@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap');

/* ==========================================================================
   Grain of Sand — child theme of Hummingbird
   ==========================================================================

   The @import above MUST remain the first statement in this file. CSS requires
   @import to precede every rule set; the previous module stylesheet placed it
   on line 586, so browsers discarded it and Manrope never loaded.

   Approach: Hummingbird 8 is Bootstrap 5. Every visual decision is expressed as
   a --bs-* custom property, so remapping those tokens at :root cascades through
   the entire theme. That is why this file needs almost no !important — the
   previous one needed 58.

   Fallback order is deliberate: Manrope, then Inter. Inter is self-hosted by
   the parent theme via @font-face, so a failed Google Fonts fetch degrades to
   the theme's real typeface rather than to Segoe UI.

   Sections:
     1. Tokens          7. Home sections
     2. Base            8. Listing / category
     3. Layout rhythm   9. Product page
     4. Header         10. Cart & checkout
     5. Controls       11. Footer
     6. Product card   12. Motion & print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --gos-sand:        #e9e0d1;  /* page + section ground */
  --gos-sand-soft:   #f2ece1;  /* lighter band, newsletter */
  --gos-card:        #ffffff;  /* product tiles, header */
  --gos-ink:         #3e3a35;  /* body copy — 8.62:1 on sand */
  --gos-rule:        #ded2be;  /* hairlines */
  --gos-taupe:       #8e8880;

  /* Gold is DECORATIVE only — rules, borders, icons, button fills.
     At 1.86:1 on sand it is unreadable as text and fails even the 3:1
     large-text threshold. */
  --gos-gold:        #bfa274;
  --gos-gold-deep:   #a8895c;

  /* Text-safe variants. Verified: gold-text 5.49:1 on sand, 7.19:1 on white;
     muted 5.28:1 on sand. Both clear WCAG AA. */
  --gos-gold-text:   #6b5426;
  --gos-muted:       #5f5952;

  --gos-danger:      #8c3a2e;
  --gos-success:     #4a6b3f;

  /* --- Type ------------------------------------------------------------- */
  --gos-font: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Wide tracking is this brand's signature. */
  --gos-track-display: 0.18em;
  --gos-track-label:   0.12em;
  --gos-track-button:  0.1em;

  /* Fluid scale — no breakpoint jumps. */
  --gos-text-xs:   0.75rem;
  --gos-text-sm:   0.8125rem;
  --gos-text-base: 0.9375rem;
  --gos-text-lg:   clamp(1.0rem,  0.96rem + 0.2vw,  1.125rem);
  --gos-text-xl:   clamp(1.15rem, 1.05rem + 0.5vw,  1.5rem);
  --gos-text-2xl:  clamp(1.4rem,  1.15rem + 1.1vw,  2.1rem);
  --gos-text-3xl:  clamp(1.8rem,  1.35rem + 2.0vw,  3.0rem);

  /* --- Spacing ---------------------------------------------------------- */
  --gos-space-2xs: 0.25rem;
  --gos-space-xs:  0.5rem;
  --gos-space-sm:  0.75rem;
  --gos-space-md:  1.25rem;
  --gos-space-lg:  2rem;
  --gos-space-xl:  3rem;
  --gos-space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);  /* section rhythm */

  --gos-radius:    3px;
  --gos-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --gos-dur:       220ms;

  /* --- Remap Bootstrap ---------------------------------------------------
     These are the names Hummingbird actually compiles against. Verified
     present in themes/hummingbird/assets/css/theme.css. The previous file
     remapped --color-primary / --font-family-base / --border-radius-base /
     --ps-primary, none of which exist. */

  --bs-body-font-family: var(--gos-font);
  --bs-body-font-size:   var(--gos-text-base);
  --bs-body-color:       var(--gos-ink);
  --bs-body-color-rgb:   62, 58, 53;
  --bs-body-bg:          var(--gos-card);
  --bs-body-bg-rgb:      255, 255, 255;
  --bs-body-line-height: 1.65;

  --bs-primary:          var(--gos-gold);
  --bs-primary-rgb:      191, 162, 116;
  --bs-secondary:        var(--gos-taupe);

  --bs-link-color:       var(--gos-gold-text);
  --bs-link-color-rgb:   107, 84, 38;
  --bs-link-hover-color: var(--gos-ink);
  --bs-link-decoration:  none;

  --bs-border-color:     var(--gos-rule);
  --bs-border-radius:    var(--gos-radius);
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 4px;
  --bs-border-radius-xl: 6px;

  --bs-emphasis-color:   var(--gos-ink);
  --bs-secondary-color:  var(--gos-muted);
  --bs-tertiary-bg:      var(--gos-sand-soft);
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--gos-font);
  color: var(--gos-ink);
  background-color: var(--gos-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--gos-font);
  font-weight: 300;
  color: var(--gos-ink);
  letter-spacing: var(--gos-track-display);
  line-height: 1.2;
  text-transform: uppercase;
}

h1, .h1 { font-size: var(--gos-text-3xl); }
h2, .h2 { font-size: var(--gos-text-2xl); }
h3, .h3 { font-size: var(--gos-text-xl); letter-spacing: var(--gos-track-label); }

p { margin-bottom: var(--gos-space-md); }

a {
  color: var(--gos-gold-text);
  text-decoration: none;
  transition: color var(--gos-dur) var(--gos-ease);
}

a:hover { color: var(--gos-ink); }

/* Accessible focus. The previous file styled :focus only, which draws a ring on
   mouse clicks too and was likely why it got suppressed. :focus-visible is
   keyboard-only. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gos-gold-text);
  outline-offset: 2px;
  box-shadow: none;
}

::selection {
  background: var(--gos-gold);
  color: var(--gos-ink);
}

img { max-width: 100%; height: auto; }


/* --------------------------------------------------------------------------
   3. Layout rhythm
   --------------------------------------------------------------------------
   Whitespace is the defining trait of Dawn/Refresh, more than colour is. */

#content.page-content,
.page-content--home { padding-block: 0; }

.ps-featuredproducts,
.ps-newproducts,
.ps-bestsellers,
.ps-customtext,
.module-products {
  padding-block: var(--gos-space-2xl);
}

/* Section headings: centred, hairline-flanked, wide-tracked. */
.section-title,
.products-section-title {
  font-size: var(--gos-text-2xl);
  font-weight: 300;
  letter-spacing: var(--gos-track-display);
  text-transform: uppercase;
  color: var(--gos-ink);
  text-align: center;
  margin-bottom: var(--gos-space-xl);
  position: relative;
}

.section-title::after,
.products-section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  margin: var(--gos-space-md) auto 0;
  background: var(--gos-gold);
}


/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

#header.header {
  background: var(--gos-card);
  border-bottom: 1px solid var(--gos-rule);
}

/* Utility strip — de-emphasised, not removed. */
.header-top {
  background: var(--gos-sand-soft);
  border-bottom: 1px solid var(--gos-rule);
  font-size: var(--gos-text-xs);
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-muted);
  padding-block: var(--gos-space-2xs);
}

.header-top a { color: var(--gos-muted); }
.header-top a:hover { color: var(--gos-gold-text); }

.header-bottom { padding-block: var(--gos-space-md); }

.header-bottom__row {
  align-items: center;
  gap: var(--gos-space-md);
}

.header-bottom__logo img { transition: opacity var(--gos-dur) var(--gos-ease); }
.header-bottom__logo:hover img { opacity: 0.75; }

.header-bottom__h1 {
  font-size: 0;   /* SEO h1 wrapper around the logo — no visual weight */
  margin: 0;
}

/* Sticky header.
   Note: Hummingbird's .js-sticky-header hook does NOT add a state class — its
   theme.js only measures the header height and writes --scroll-padding-top so
   anchor jumps clear the header. So there is no .is-stuck / .sticky class to
   hang a scrolled style on; the stickiness itself has to come from CSS here. */
#header.js-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.1) blur(6px);
}

/* Scroll-linked shadow where supported (Chrome/Edge 115+), ignored elsewhere.
   The hairline border below is the baseline that always applies. */
@supports (animation-timeline: scroll()) {
  #header.js-sticky-header {
    animation: gos-header-shadow linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }

  @keyframes gos-header-shadow {
    from { box-shadow: 0 1px 12px rgba(62, 58, 53, 0); }
    to   { box-shadow: 0 1px 12px rgba(62, 58, 53, 0.1); }
  }
}

.header-block { color: var(--gos-ink); }

/* Search */
#search_widget input[type="text"],
.ps-searchbar input[type="text"] {
  border: 1px solid var(--gos-rule);
  border-radius: var(--gos-radius);
  background: var(--gos-sand-soft);
  padding: 0.55rem 0.9rem;
  font-size: var(--gos-text-sm);
  transition: border-color var(--gos-dur) var(--gos-ease),
              background-color var(--gos-dur) var(--gos-ease);
}

#search_widget input[type="text"]:focus,
.ps-searchbar input[type="text"]:focus {
  background: var(--gos-card);
  border-color: var(--gos-gold);
}

/* Cart pill */
.blockcart .header-block__badge,
.blockcart .cart-products-count {
  background: var(--gos-gold);
  color: var(--gos-ink);
  font-weight: 600;
  font-size: var(--gos-text-xs);
}

/* Main nav */
.ps-mainmenu__tree-link,
.top-menu a,
#header .menu a {
  font-size: var(--gos-text-sm);
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-ink);
  font-weight: 500;
}

.ps-mainmenu__tree-link:hover,
.top-menu a:hover,
#header .menu a:hover { color: var(--gos-gold-text); }


/* --- Mega-menu: columns instead of one long vertical strip ----------------

   Hummingbird's submenu is a tab pattern: .submenu__left (col-sm-3) lists the
   child categories, .submenu__right (col-sm-9) shows the grandchildren of
   whichever one you hover.

   On this catalogue that falls apart. Measured on the live page:

     submenu 29 (MINERAUX DE A-Z)  72 items   0 with children   right panel empty
     submenu 17 (les Mineraux)      4 items   0 with children   right panel empty
     submenu 18 (les Fossiles)      3 items   0 with children   right panel empty
     submenu 14 (les Pierres R.)    1 item    0 with children   right panel empty
     submenu 16 (les Bijoux)        2 items   1 with children   right panel used

   Because almost nothing has grandchildren, the right panel never populates —
   so 72 links stack in a 25%-wide column while 75% of the dropdown stays blank.

   Fix: when the right panel has no links to show, drop it and let the list take
   the full width, flowing into as many columns as fit. Submenu 16, which does
   use the tab pattern, is untouched. */

@media (min-width: 1200px) {
  .submenu__row:has(.submenu__right:not(:has(a))) > .submenu__left {
    flex: 0 0 100%;
    max-width: 100%;
    columns: 14rem;
    column-gap: var(--gos-space-lg);
  }

  .submenu__row:has(.submenu__right:not(:has(a))) > .submenu__right {
    display: none;
  }

  /* Long lists must not run past the viewport. */
  .js-sub-menu.submenu {
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.submenu__left-item {
  display: block;
  break-inside: avoid;      /* no item split across a column boundary */
  padding: 0.32rem 0;
  font-size: var(--gos-text-sm);
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--gos-ink);
}

.submenu__left-item:hover,
.submenu__left-item:focus-visible {
  color: var(--gos-gold-text);
}

.submenu__left-item[aria-selected="true"] {
  color: var(--gos-gold-text);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   5. Controls — buttons, forms, badges
   --------------------------------------------------------------------------
   Most of this falls out of the --bs-btn-* remapping below; only the
   brand-specific shape and tracking need stating. */

.btn {
  --bs-btn-font-family: var(--gos-font);
  --bs-btn-font-size: var(--gos-text-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--gos-radius);
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.6rem;

  letter-spacing: var(--gos-track-button);
  text-transform: uppercase;
  transition: background-color var(--gos-dur) var(--gos-ease),
              border-color var(--gos-dur) var(--gos-ease),
              color var(--gos-dur) var(--gos-ease);
}

/* Ink on gold measures 4.64:1 — AA. Do not lighten the fill. */
.btn-primary {
  --bs-btn-bg: var(--gos-gold);
  --bs-btn-border-color: var(--gos-gold);
  --bs-btn-color: var(--gos-ink);
  --bs-btn-hover-bg: var(--gos-gold-deep);
  --bs-btn-hover-border-color: var(--gos-gold-deep);
  --bs-btn-hover-color: var(--gos-ink);
  --bs-btn-active-bg: var(--gos-gold-deep);
  --bs-btn-active-border-color: var(--gos-gold-deep);
  --bs-btn-disabled-bg: var(--gos-rule);
  --bs-btn-disabled-border-color: var(--gos-rule);
  --bs-btn-disabled-color: var(--gos-muted);
}

.btn-outline-primary {
  --bs-btn-color: var(--gos-gold-text);
  --bs-btn-border-color: var(--gos-gold);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--gos-gold);
  --bs-btn-hover-border-color: var(--gos-gold);
  --bs-btn-hover-color: var(--gos-ink);
  --bs-btn-active-bg: var(--gos-gold-deep);
  --bs-btn-active-border-color: var(--gos-gold-deep);
  --bs-btn-active-color: var(--gos-ink);
}

.btn-secondary,
.btn-tertiary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--gos-ink);
  --bs-btn-border-color: var(--gos-rule);
  --bs-btn-hover-bg: var(--gos-sand-soft);
  --bs-btn-hover-color: var(--gos-ink);
  --bs-btn-hover-border-color: var(--gos-gold);
}

/* Form controls */
.form-control,
.form-select {
  border: 1px solid var(--gos-rule);
  border-radius: var(--gos-radius);
  padding: 0.65rem 0.9rem;
  font-size: var(--gos-text-base);
  color: var(--gos-ink);
  background-color: var(--gos-card);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gos-gold);
  box-shadow: 0 0 0 3px rgba(191, 162, 116, 0.22);
}

.form-label {
  font-size: var(--gos-text-xs);
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-muted);
  font-weight: 600;
  margin-bottom: var(--gos-space-2xs);
}

/* Breadcrumb */
.breadcrumb {
  --bs-breadcrumb-bg: transparent;
  --bs-breadcrumb-font-size: var(--gos-text-xs);
  --bs-breadcrumb-divider-color: var(--gos-taupe);
  --bs-breadcrumb-item-active-color: var(--gos-muted);
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  padding-block: var(--gos-space-md);
}

.breadcrumb-link,
.breadcrumb-item a { color: var(--gos-muted); }
.breadcrumb-link:hover,
.breadcrumb-item a:hover { color: var(--gos-gold-text); }

/* Accordions — used on the product page and the category sidebar */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--gos-rule);
  --bs-accordion-btn-color: var(--gos-ink);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--gos-ink);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-radius: 0;
}

.accordion-button {
  font-size: var(--gos-text-sm);
  font-weight: 600;
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   6. Product card
   --------------------------------------------------------------------------
   Highest-leverage surface — it appears on the home, category, search and
   product pages. Dawn pattern: no border, no shadow, no button. The image does
   the work; chrome appears on hover/focus only.

   NOTE: the markup ships a single <img> per card (largest srcset candidate is
   336w). A hover second-image swap needs a template override of
   catalog/_partials/miniatures/product.tpl — see README notes. */

.product-miniature__inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-miniature__top { position: relative; }

.product-miniature__image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--gos-radius);
  background: var(--gos-sand-soft);
  aspect-ratio: 1 / 1;
}

.product-miniature__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--gos-ease);
}

.product-miniature:hover .product-miniature__image {
  transform: scale(1.04);
}

/* Title — sentence weight, generous breathing room. The source data is
   uppercase (e.g. "AMETHYSTE URUGUAY"), so no text-transform is applied here;
   CSS cannot cleanly down-case it. Fixing that means editing the product names
   in the Back Office. */
.product-miniature__infos {
  padding-top: var(--gos-space-md);
  flex: 1 1 auto;
}

.product-miniature__title {
  display: block;
  font-size: var(--gos-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--gos-ink);
}

.product-miniature__title:hover { color: var(--gos-gold-text); }

.product-miniature__prices,
.product-miniature__price {
  font-size: var(--gos-text-base);
  font-weight: 600;
  color: var(--gos-ink);
  letter-spacing: 0.02em;
  margin-top: var(--gos-space-2xs);
}

.product-miniature__discount-price {
  color: var(--gos-muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: var(--gos-text-sm);
  margin-inline-end: var(--gos-space-xs);
}

/* The per-card "Voir détails" button is heavy repeated 12x down the page.
   The whole card is already a link, so the button becomes redundant chrome. */
.product-miniature__actions { padding-top: var(--gos-space-xs); }

.product-miniature__details {
  font-size: var(--gos-text-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--gos-gold-text);
  letter-spacing: var(--gos-track-label);
  position: relative;
}

.product-miniature__details::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--gos-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gos-dur) var(--gos-ease);
}

.product-miniature:hover .product-miniature__details::after,
.product-miniature__details:focus-visible::after { transform: scaleX(1); }

/* Quick view — hidden until hover or keyboard focus. */
.product-miniature__quickview-button {
  position: absolute;
  inset-inline: var(--gos-space-xs);
  bottom: var(--gos-space-xs);
  width: auto;
  background: rgba(255, 255, 255, 0.94);
  color: var(--gos-ink);
  border: 0;
  border-radius: var(--gos-radius);
  font-size: var(--gos-text-xs);
  padding-block: 0.6rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--gos-dur) var(--gos-ease),
              transform var(--gos-dur) var(--gos-ease);
}

.product-miniature:hover .product-miniature__quickview-button,
.product-miniature__quickview-button:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices have no hover — keep the control permanently available. */
@media (hover: none) {
  .product-miniature__quickview-button { opacity: 1; transform: none; }
}

/* Flags. 6 of 12 homepage cards are currently out of stock, so this badge is
   high-traffic — it must read as information, not as an alarm. */
.product-flags {
  position: absolute;
  top: var(--gos-space-xs);
  left: var(--gos-space-xs);
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gos-space-2xs);
}

.product-flags .badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gos-muted);
}

.product-flags .badge.out_of_stock {
  background: rgba(62, 58, 53, 0.82);
  color: var(--gos-sand);
}

.product-flags .badge.on-sale,
.product-flags .badge.discount { background: var(--gos-gold); color: var(--gos-ink); }
.product-flags .badge.new { background: var(--gos-ink); color: var(--gos-sand); }

/* Grid gutters */
.products,
.module-products__list {
  --bs-gutter-x: var(--gos-space-md);
  --bs-gutter-y: var(--gos-space-xl);
}


/* --------------------------------------------------------------------------
   7. Home sections
   --------------------------------------------------------------------------
   The homepage is four stacked product carousels with no hero — the single
   biggest gap versus a modern Shopify theme. Alternating grounds at least stop
   them reading as one undifferentiated wall. A real hero needs ps_imageslider
   enabled in the Back Office, or an index.tpl override. */

.ps-newproducts { background: var(--gos-sand-soft); }

.ps-customtext {
  background: var(--gos-sand);
  padding-block: var(--gos-space-2xl);
}

.ps-customtext #custom-text,
#custom-text .card-body {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

#custom-text h3 {
  font-size: var(--gos-text-2xl);
  letter-spacing: var(--gos-track-display);
  margin-bottom: var(--gos-space-md);
}

#custom-text p { color: var(--gos-muted); line-height: 1.8; }

/* The custom text block uses a table for layout. Force it to behave
   responsively so it cannot overflow the viewport on mobile. */
#custom-text table { width: 100%; display: block; overflow-x: auto; }
#custom-text td { padding: var(--gos-space-xs); vertical-align: top; }

.module-products__buttons {
  display: flex;
  justify-content: center;
  gap: var(--gos-space-sm);
  margin-top: var(--gos-space-xl);
}


/* --------------------------------------------------------------------------
   8. Listing / category
   -------------------------------------------------------------------------- */

#left-column .left-block__title,
.ps-categorytree .left-block__title {
  font-size: var(--gos-text-xs);
  font-weight: 600;
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-muted);
  padding-bottom: var(--gos-space-xs);
  border-bottom: 1px solid var(--gos-rule);
  margin-bottom: var(--gos-space-sm);
}

.category-tree__item-link {
  font-size: var(--gos-text-sm);
  color: var(--gos-ink);
  padding-block: 0.3rem;
  display: block;
}

.category-tree__item-link:hover { color: var(--gos-gold-text); }

.category-tree__item.active > .category-tree__item-header .category-tree__item-link {
  color: var(--gos-gold-text);
  font-weight: 600;
}

.subcategory__link--with-image {
  display: block;
  border-radius: var(--gos-radius);
  overflow: hidden;
  font-size: var(--gos-text-sm);
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-ink);
  text-align: center;
}

.subcategory__link--with-image:hover { color: var(--gos-gold-text); }

/* Pagination */
.products__pagination { margin-top: var(--gos-space-2xl); }

.pagination__container {
  display: flex;
  justify-content: center;
}

.page-link,
.pagination__number {
  color: var(--gos-ink);
  border: 1px solid transparent;
  border-radius: var(--gos-radius);
  background: transparent;
  font-size: var(--gos-text-sm);
  min-width: 2.4rem;
  text-align: center;
  padding: 0.5rem 0.7rem;
}

.page-link:hover,
.pagination__number:hover {
  background: var(--gos-sand-soft);
  color: var(--gos-gold-text);
}

.page-item.active .page-link,
.pagination__number.active {
  background: var(--gos-ink);
  border-color: var(--gos-ink);
  color: var(--gos-sand);
}

/* Sort / display bar */
.products-sort-order .select-title,
.products-selection { font-size: var(--gos-text-sm); color: var(--gos-muted); }


/* --------------------------------------------------------------------------
   9. Product page
   -------------------------------------------------------------------------- */

.page-product .product__container { padding-block: var(--gos-space-lg); }

.page-product h1 {
  font-size: var(--gos-text-2xl);
  margin-bottom: var(--gos-space-sm);
}

.product__carousel,
.product-images-modal__carousel { border-radius: var(--gos-radius); overflow: hidden; }

.product__prices,
.product__price {
  font-size: var(--gos-text-xl);
  font-weight: 600;
  color: var(--gos-ink);
  letter-spacing: 0.02em;
}

.product__description,
.product__description.rich-text div,
.product__description span {
  font-size: var(--gos-text-base);
  line-height: 1.8;
  color: var(--gos-muted);
}

.product__availability-status { font-size: var(--gos-text-sm); }

.product__actions-qty-add {
  display: flex;
  gap: var(--gos-space-sm);
  align-items: stretch;
  margin-block: var(--gos-space-md);
}

.product__add-to-cart-button {
  flex: 1 1 auto;
  --bs-btn-padding-y: 0.9rem;
  font-size: var(--gos-text-sm);
}

.quantity-button__group.input-group {
  border: 1px solid var(--gos-rule);
  border-radius: var(--gos-radius);
  overflow: hidden;
  flex: 0 0 auto;
  width: auto;
}

.quantity-button__group .form-control { border: 0; text-align: center; width: 3.5rem; }

.product__accordion .accordion-button {
  padding-inline: 0;
  background: transparent;
}

.product__accordion .accordion-body { padding-inline: 0; }

.details__title,
.details__item--feature {
  font-size: var(--gos-text-sm);
  color: var(--gos-muted);
}

.details__title { color: var(--gos-ink); font-weight: 600; }

/* Mobile sticky add-to-cart — standard on current Shopify PDPs. */
@media (max-width: 767.98px) {
  .page-product .product__add-to-cart-container {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    background: var(--gos-card);
    border-top: 1px solid var(--gos-rule);
    padding: var(--gos-space-sm);
    margin-inline: calc(var(--gos-space-sm) * -1);
    box-shadow: 0 -2px 12px rgba(62, 58, 53, 0.08);
  }
}


/* --------------------------------------------------------------------------
   10. Cart & checkout
   -------------------------------------------------------------------------- */

.cart-summary {
  background: var(--gos-sand-soft);
  border: 1px solid var(--gos-rule);
  border-radius: var(--gos-radius);
  padding: var(--gos-space-md);
}

.cart-summary .cart-summary-line { font-size: var(--gos-text-sm); }

.cart-summary .cart-total,
.cart-summary .cart-summary-line--total {
  font-size: var(--gos-text-lg);
  font-weight: 600;
  border-top: 1px solid var(--gos-rule);
  padding-top: var(--gos-space-sm);
  margin-top: var(--gos-space-sm);
}

.product-line__item-unit-price { font-size: var(--gos-text-xs); color: var(--gos-muted); }

#checkout h1.page-title-section {
  font-size: var(--gos-text-2xl);
  margin-bottom: var(--gos-space-lg);
}

/* Delivery + payment options as selectable cards. */
.delivery-option__item,
.js-delivery-option {
  border: 1px solid var(--gos-rule);
  border-radius: var(--gos-radius);
  padding: var(--gos-space-sm) var(--gos-space-md);
  margin-bottom: var(--gos-space-xs);
  transition: border-color var(--gos-dur) var(--gos-ease),
              background-color var(--gos-dur) var(--gos-ease);
}

.delivery-option__item:hover,
.js-delivery-option:hover { border-color: var(--gos-gold); }

.delivery-option__item:has(input:checked),
.js-delivery-option:has(input:checked) {
  border-color: var(--gos-gold);
  background: var(--gos-sand-soft);
}

.address-card,
.selected .address-card__alias { border-radius: var(--gos-radius); }

#checkout .nav-link.active {
  color: var(--gos-gold-text);
  border-bottom-color: var(--gos-gold);
}

.buttons-wrapper--end { gap: var(--gos-space-sm); }


/* --------------------------------------------------------------------------
   11. Footer & newsletter
   -------------------------------------------------------------------------- */

/* The live markup is <section class="ps-emailsubscription bg-body-tertiary
   py-3 py-lg-4">. Those Bootstrap utilities are single-class (0,1,0); adding
   the element type here makes this (0,1,1), which beats them on specificity
   rather than by force. */
section.ps-emailsubscription {
  background: var(--gos-sand);
  padding-block: var(--gos-space-xl);
  text-align: center;
}

.ps-emailsubscription h3,
.ps-emailsubscription .h3 {
  font-size: var(--gos-text-xl);
  letter-spacing: var(--gos-track-display);
  margin-bottom: var(--gos-space-xs);
}

.ps-emailsubscription p { color: var(--gos-muted); font-size: var(--gos-text-sm); }

.ps-emailsubscription form {
  max-width: 30rem;
  margin-inline: auto;
  margin-top: var(--gos-space-md);
}

footer#footer .footer__before { border-top: 1px solid var(--gos-rule); }

footer#footer .footer__main {
  background: var(--gos-card);
  padding-block: var(--gos-space-xl);
}

.footer-block__title,
footer#footer h3 {
  font-size: var(--gos-text-xs);
  font-weight: 600;
  letter-spacing: var(--gos-track-label);
  text-transform: uppercase;
  color: var(--gos-ink);
  margin-bottom: var(--gos-space-sm);
}

footer#footer a {
  color: var(--gos-muted);
  font-size: var(--gos-text-sm);
  line-height: 2;
}

footer#footer a:hover { color: var(--gos-gold-text); }

.footer__main-top { gap: var(--gos-space-lg) 0; }


/* --------------------------------------------------------------------------
   12. Motion & print
   -------------------------------------------------------------------------- */

/* The usual reduced-motion reset is a universal selector plus !important,
   because `*` (0,0,0) otherwise loses to every class-based transition. Since
   this file routes its own timings through --gos-dur, zeroing that token
   disables them at the source — no force required. The explicit rules below
   cover the three animations that use literal durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gos-dur: 0.01ms;
  }

  html { scroll-behavior: auto; }

  .product-miniature__image,
  .product-miniature:hover .product-miniature__image {
    transition: none;
    transform: none;
  }

  .product-miniature__quickview-button { transition: none; }

  #header.js-sticky-header { animation: none; }
}

/* Selectors here are compounded to match the specificity of the theme rules
   that set display on these elements, so none of them needs !important. */
@media print {
  #header.header,
  footer#footer.footer,
  .product-miniature .product-miniature__quickview-button { display: none; }

  body { background: #fff; color: #000; }
}