/* ============================================================
   app/public/css/main.css
   Electric Applesauce — base styles and page shell layout

   CSS custom properties (variables) are set on :root at
   page load by main.js using the domain's colour_palette
   from the API. The values below are the EA defaults —
   they are overwritten at runtime for other domains.
   ============================================================ */

/* ── Font declarations ──────────────────────────────────── */

@font-face {
  font-family: 'Architects Daughter';
  src: url('/fonts/ArchitectsDaughter-Regular.woff2') format('woff2'),
       url('/fonts/ArchitectsDaughter-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Shadows Into Light';
  src: url('/fonts/ShadowsIntoLight-Regular.woff2') format('woff2'),
       url('/fonts/ShadowsIntoLight-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── CSS custom properties (EA defaults) ────────────────── */
/* main.js overwrites these at runtime from the domain API   */

:root {
  --bg-page:        #212529;
  --bg-container:   #1C2023;
  --header-top:     #5F798A;
  --header-logo:    #2F4858;
  --text-cream:     #EFDAB9;
  --text-gold:      #F6AE2D;
  --accent-orange:  #F47016;
  --accent-green:   #1F7F00;
  --link-blue:      #4E798C;
  --menu-link:      #86BBD8;

  /* Ticker bar sits just below the nav — slightly different shade */
  --ticker-bg:      #3a4a5a;

  /* Typography */
  --font-primary:        'Architects Daughter', cursive;
  --font-decorative:     'Shadows Into Light',  cursive;
  --font-price:           Arial, 'Helvetica Neue', sans-serif;  /* prices — legible numerals */
  --font-primary-size:    16px;   /* overridable per-domain via Settings → Site Fonts */
  --font-decorative-size: 16px;
  --font-price-size:      16px;

  /* ── Typography system — per-domain overrides applied by main.js ── */
  --ty-title-font:        var(--font-primary);
  --ty-title-size:        28px;
  --ty-desc-font:         var(--font-primary);
  --ty-desc-size:         15px;
  --ty-price-font:        var(--font-price);
  --ty-price-size:        22px;
  --ty-meta-font:         var(--font-primary);
  --ty-meta-size:         14px;
  --ty-blog-title-font:   var(--font-primary);
  --ty-blog-title-size:   2.2rem;
  --ty-blog-prose-font:   var(--font-primary);
  --ty-blog-prose-size:   17px;
  --ty-ui-font:           var(--font-primary);
  --ty-ui-size:           16px;

  /* Constrained page layout — homepage and item pages */
  --page-max-width: 1280px;

  /* Background overlay opacity — semi-transparent dark layer between
     full-bleed background images and page content.
     Overridden at runtime by main.js from domain_config.bg_opacity.
     0.65 is the default: readable content, atmosphere still visible. */
  --bg-overlay-opacity: 0.65;
}

/* ── Reset / base ───────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  height: 100%;
}

:root {
  --header-height: 72px;  /* nav-bar only — top-bar scrolls away */
}

body {
  background-color: var(--bg-page);
  color:            var(--text-cream);
  font-family:      var(--ty-ui-font);
  font-size:        var(--ty-ui-size);
  line-height:      1.5;
}

a {
  color:           var(--link-blue);
  text-decoration: none;
}

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

/* ── Page layout ────────────────────────────────────────── */

/* ── Page wrap — shifts right when ShiftNav opens ────────── */
/*
 * Wraps everything: top-bar, nav-bar, ticker, context-bar,
 * page-content, and footer. The entire page slides right 300px
 * when ShiftNav opens, revealing the fixed panel behind it.
 */

#page-wrap {
  position:   relative;
  width:      100%;
  transition: transform 0.3s ease;
}

body.shiftnav-open #page-wrap {
  transform: translateX(300px);  /* matches .shiftnav-panel width */
}

#page-header {
  /* No position here — top-bar scrolls naturally */
  width:    100%;
  z-index:  100;
}


/* ── Context bar — category / product name strip ────────── */
/*
 * Sits directly below the fixed header. Hidden on homepage
 * (body.page-mode--constrained). Shown on category and item
 * pages (body.page-mode--full, body.page-mode--item).
 *
 * JS sets the text content of #context-bar-title and adds
 * body.has-context-bar so page-content shifts down correctly.
 * The fly-in letter animation targets #context-bar-title.
 */

#context-bar {
  /* Normal flow — scrolls away with the page, like the OG site */
  background-color: var(--ticker-bg);   /* same warm slate as the ticker strip */
  min-height:       42px;
  display:          none;  /* shown when body.has-context-bar is set */
  align-items:      center;
  justify-content:  flex-end;  /* right-justified title */
  padding:          0 24px;
}

body.has-context-bar #context-bar {
  display: flex;
}


#context-bar-title {
  font-family:    var(--font-primary);
  font-size:      22px;
  font-weight:    400;       /* Architects Daughter is single-weight */
  color:          var(--text-cream);
  letter-spacing: 0.03em;
  margin:         0;         /* reset h2 default margins */
  padding:        0;

  /* #context-bar is a flex container with justify-content:flex-end.
     Flex items shrink to content width by default. CoolText clears the
     element's innerHTML before measuring offsetWidth — so it sees an
     empty element and gets ~15px width, causing vertical letter stacking.
     width:100% forces the flex item to fill the bar so CoolText always
     measures the full viewport width regardless of content. */
  width:          100%;
  min-width:      0;         /* prevents flex overflow on very long titles */
  text-align:     right;     /* keep title right-justified within the full-width block */
}

/* ── Family strip — mini category navigation ─────────── */
/*
 * Sits immediately below the context bar on category pages.
 * Shows the parent category + all siblings (or self + children for top-level).
 *
 * A semi-transparent slate bar (20% opacity) wraps the tiles so names
 * are readable against any category background image.
 * Tiles are centred horizontally; the bar wraps when there are many tiles.
 *
 * body.has-family-strip reveals the strip via display:flex.
 * Tiles are <a> elements built and injected by category.js.
 */

/* Shared layout for both the category page strip (#family-strip)
 * and the item page strip (#item-family-strip). Both elements carry
 * class="family-strip" so these rules apply to both automatically. */
.family-strip {
  display:          none;                          /* shown via body class */
  flex-direction:   row;
  flex-wrap:        wrap;                          /* wraps to second row if needed */
  justify-content:  center;                        /* centred horizontally */
  align-items:      flex-start;
  gap:              12px;
  padding:          12px 20px;
  background:       rgba(28, 32, 35, 0.30);        /* 30% slate — bg image shows through */
}

body.has-family-strip #family-strip {
  display: flex;
}

/* Item page family strip — same visual, sits just above the footer.
 * Revealed via body.has-item-family-strip set by item.js. */
body.has-item-family-strip #item-family-strip {
  display: flex;
}

/* ── Family tile — the <a> wrapper ──────────────────────── */

.family-tile {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  text-decoration: none;
  cursor:          pointer;
  transition:      transform 0.15s ease;
}

.family-tile:hover {
  transform: translateY(-3px);
}

/* Current page tile — gold highlight, still acts as a link */
.family-tile.is-current {
  cursor: pointer;
}
.family-tile.is-current:hover {
  transform: translateY(-3px);
}

/* ── Tile image box ─────────────────────────────────────── */

.family-tile-image {
  width:               100px;
  height:              72px;
  background-color:    rgba(20, 26, 30, 0.55);     /* warm dark fallback if no image */
  background-size:     cover;
  background-position: center;
  border-radius:       4px;
  border:              2px solid transparent;       /* placeholder — overridden below */
  transition:          border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Current category — gold border highlight */
.family-tile.is-current .family-tile-image {
  border-color: var(--text-gold);
  box-shadow:   0 0 8px rgba(246, 174, 45, 0.35);
}

/* Hover state for non-current tiles */
.family-tile:not(.is-current):hover .family-tile-image {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:   0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ── Tile name label ────────────────────────────────────── */

.family-tile-name {
  font-family:  var(--font-primary);
  font-size:    12px;
  color:        var(--text-cream);
  text-align:   center;
  line-height:  1.25;
  max-width:    104px;          /* matches image width + border */
  white-space:  normal;
  word-break:   break-word;
  text-shadow:  0 1px 3px rgba(0, 0, 0, 0.9);   /* readability over any bg */
}

/* Current category name in gold */
.family-tile.is-current .family-tile-name {
  color:   var(--text-gold);
}

/* Parent tile name slightly dimmed + italic */
.family-tile.is-parent .family-tile-name {
  font-style: italic;
  opacity:    0.75;
}


/*
 * body.page-mode--constrained  — homepage, item pages, static pages
 * body.page-mode--full         — category pages (edge to edge)
 */

#page-content {
  /* No overflow-x here — any overflow value kills position:sticky on ancestors.
     Horizontal overflow is naturally clipped by the html element. */
  min-height: calc(100vh - 350px);
}

body.page-mode--constrained #page-content {
  max-width: var(--page-max-width);
  margin:    0 auto;
  padding:   24px 16px;
}

body.page-mode--full #page-content {
  max-width: none;
  padding:   12px;   /* breathing room around the grid — background peeks through */
}

/* ── Top bar ────────────────────────────────────────────── */

#top-bar {
  background-color: var(--bg-container);
  height:           32px;
  display:          flex;
  align-items:      center;
  justify-content:  flex-end;
  padding:          0 16px;
  gap:              16px;
  font-size:        13px;
  color:            var(--text-cream);
  opacity:          0.8;
}

#top-bar a {
  color: var(--text-cream);
}

#top-bar a:hover {
  color: var(--text-gold);
}

/* ── Main nav bar ───────────────────────────────────────── */

#nav-bar {
  position:         relative;  /* normal flow by default */
  z-index:          100;
  background-color: var(--header-logo);
  height:           72px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 16px;
  gap:              12px;
}

/* ── nav-bar pinned state — added by scroll listener in main.js ── */
/* Once the top-bar has scrolled out of view, nav-bar becomes fixed.
   page-wrap gets padding-top to fill the space nav-bar vacated. */
body.nav-stuck #nav-bar {
  position: fixed;
  top:      0;
  left:     0;
  right:    0;
  z-index:  100;
}

body.nav-stuck #page-wrap {
  padding-top: 72px;  /* fills gap left by the now-fixed nav-bar */
}

/* When ShiftNav is open, fixed nav-bar shifts right with the page */
body.nav-stuck.shiftnav-open #nav-bar {
  transform: translateX(300px);
  transition: transform 0.3s ease;
}

body.nav-stuck:not(.shiftnav-open) #nav-bar {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

#nav-left {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex:        1;          /* equal third — left-aligned */
  justify-content: flex-start;
}

/* Logo button — opens ShiftNav */
#logo-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0;
  display:     flex;
  align-items: center;
}

#logo-btn img {
  width:     52px;
  height:    52px;
  animation: logo-spin 30s linear infinite;
}

@keyframes logo-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Search box */
#search-form {
  display:     flex;
  align-items: center;
  gap:         6px;
}

#search-input {
  background-color: var(--bg-page);
  border:           1px solid var(--link-blue);
  border-radius:    999px;
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        14px;
  padding:          6px 14px;
  width:            220px;
  outline:          none;
}

#search-input::placeholder {
  color:   var(--text-cream);
  opacity: 0.4;
}

#search-input:focus {
  border-color: var(--text-gold);
}

#search-btn {
  background: none;
  border:     none;
  color:      var(--text-cream);
  cursor:     pointer;
  font-size:  18px;
  padding:    4px 6px;
}

#search-btn:hover {
  color: var(--text-gold);
}

#nav-right {
  display:         flex;
  align-items:     center;
  gap:             6px;
  flex:            1;          /* equal third — right-aligned */
  justify-content: flex-end;
}

.nav-icon-btn {
  background:    none;
  border:        none;
  color:         var(--text-cream);
  cursor:        pointer;
  font-size:     20px;
  padding:       6px 8px;
  position:      relative;
  border-radius: 4px;
  transition:    color 0.15s;
}

/* Admin gear button — visible on every page when logged in as admin.
 * Hidden by default; main.js adds body.is-admin when role === 'admin'.
 * Styled as a link (<a>) but matches .nav-icon-btn appearance exactly. */
#btn-admin {
  display:         none;
  text-decoration: none;
  color:           inherit;
}
body.is-admin #btn-admin {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
}

/* Gear icon gets a subtle gold tint to distinguish it from other nav icons —
 * a quiet signal that you're in admin mode without being distracting. */
body.is-admin #btn-admin i {
  color: var(--text-gold);
}
body.is-admin #btn-admin:hover i {
  color: var(--accent-orange);
}

/* Tour button — only shown on the homepage AND only for non-admins.
 * Hidden by default; main.js adds body.is-homepage on / */
#btn-tour {
  display: none;
}
body.is-homepage #btn-tour {
  display: inline-flex;
}
/* Admins see the gear instead — hide the tour button for them on all pages */
body.is-admin #btn-tour {
  display: none !important;
}

.nav-icon-btn:hover {
  color: var(--text-gold);
}

.nav-badge {
  position:         absolute;
  top:              -4px;          /* superscript — above and to the right of icon */
  right:            -2px;
  background-color: var(--accent-green);   /* dark green — consistent across all badges */
  color:            #fff;
  font-size:        10px;
  font-family:      var(--font-primary);
  border-radius:    999px;
  min-width:        16px;
  height:           16px;
  display:          none;
  align-items:      center;
  justify-content:  center;
  padding:          0 3px;
  line-height:      1;
  pointer-events:   none;   /* don't interfere with button clicks */
}

.nav-badge.visible {
  display: flex;
}

/* ── Ticker ─────────────────────────────────────────────── */
/*
 * One message at a time:
 *   1. Scrolls in from right
 *   2. Stops at horizontal centre
 *   3. Pauses for admin-configured seconds
 *   4. Fades out
 *   5. Next message
 *
 * On large screens (>900px): ticker lives inside #nav-centre in the
 * nav bar — no background of its own, inherits nav bar colour.
 * Animation is a simple fade: in → hold → out → next message.
 *
 * On small screens (≤900px): #nav-centre is hidden, #ticker-small shown
 * as its own strip below the nav exactly as before.
 */

/* ── Nav centre — holds ticker on large screens ─────────── */

#nav-centre {
  flex:            1;             /* equal third — perfectly centred */
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  min-width:       0;             /* allow flex shrinking without overflow */
  padding:         0 8px;
}

/* Hide nav-centre entirely below 900px rather than letting it truncate.
   At 768px and below the whole thing disappears (ticker-small takes over). */
@media (max-width: 900px) {
  #nav-centre {
    display: none;
  }
}

/* Ticker inside nav — no background, no fixed height, inherits nav */
#ticker {
  width:      100%;
  text-align: center;  /* centres normal-length messages */
  overflow:   hidden;  /* clips wide scrolling text */
  display:    none;    /* shown by JS when active */
}

/* Ticker track — display:block, sizes to container width by default.
   For scroll mode JS sets display:inline-block + text-align:left on
   #ticker so the track sizes to text and starts at the left edge. */
#ticker-track {
  display:        block;
  white-space:    nowrap;
  overflow:       visible;
  font-size:      14px;
  color:          var(--text-cream);
  font-family:    var(--font-primary);
  opacity:        0;   /* JS controls fade */
  transition:     opacity 0.6s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.02em;
}

/* nav-centre hides at ≤900px — see @media rule in #nav-centre block above */

/* ── Small-screen ticker strip ───────────────────────────── */
/* Hidden on large screens — only shows at ≤900px where nav-centre hides. */

#ticker-small {
  display:          none;   /* hidden by default — large screens use nav ticker */
  background-color: var(--ticker-bg);
  height:           36px;
  overflow:         hidden;
  position:         relative;
}

#ticker-track-small {
  position:    absolute;
  top:         50%;
  transform:   translateY(-50%);
  white-space: nowrap;
  font-size:   14px;
  color:       var(--text-cream);
  font-family: var(--font-primary);
  opacity:     0;
  transition:  opacity 0.6s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  left:        0;
  right:       0;
  text-align:  center;   /* centred for normal-length messages */
  /* NB: JS overrides transform for scroll animation — left:0 anchors start */
}

@media (max-width: 900px) {
  #ticker-small {
    display: block;   /* show strip when nav ticker is hidden */
  }
}

/* ── Ticker link icon ────────────────────────────────────────
   Shown beside the ticker strip when the current message has a URL.
   Toggled by JS adding .ticker-has-link to #ticker / #ticker-small.
   Hidden by default — only appears for linked messages.
   The icon is a small, muted chain-link glyph; clicking navigates
   to the current message URL. Styled to match the ticker strip. */

.ticker-link-icon {
  display:    none;             /* hidden until .ticker-has-link is set */
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--text-cream);
  font-size:  11px;
  opacity:    0.55;
  padding:    0 0 0 6px;
  line-height: 1;
  vertical-align: middle;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.ticker-link-icon:hover {
  opacity: 1;
}

/* Show the icon when its parent has .ticker-has-link */
#ticker.ticker-has-link .ticker-link-icon,
#ticker-small.ticker-has-link .ticker-link-icon {
  display: inline-block;
}

/* #ticker.active — shown by JS when messages are loaded.
   Flex row so the link icon sits inline beside the track. */
#ticker.active {
  display:     flex;
  align-items: center;
  justify-content: center;
}

/* Small-screen ticker strip flex layout.
   Must be scoped to ≤900px — without this guard, adding .ticker-has-link
   via JS would override the default display:none and show the strip on
   large screens alongside the nav ticker, causing a double-render. */
@media (max-width: 900px) {
  #ticker-small.ticker-has-link {
    display:     flex;
    align-items: center;
  }
}

/* ── Ticker message link ──────────────────────────────────────
   Applied to <a> elements injected by main.js when a ticker
   message has a URL. Renders identically to plain ticker text —
   no underline, inherits colour — so the strip looks unchanged.
   The link icon is the only affordance that it's clickable. */

.ticker-message-link {
  color:           inherit;   /* inherits inline color set by JS per-ticker font */
  text-decoration: none;
  font-size:       inherit;   /* inherits inline font-size set by JS per-ticker font */
  font-family:     inherit;   /* inherits inline font-family set by JS per-ticker font */
  letter-spacing:  0.02em;
  cursor:          pointer;
}

.ticker-message-link:hover {
  color:           var(--text-cream);
  text-decoration: none;
}

/* ── Sibling-domain awareness elements ───────────────────────
   All three sibling notices are hidden by default.
   body.is-sibling-domain (set by main.js on non-EA domains)
   reveals them. Subtle and unobtrusive — no box, no border,
   just quiet contextual text. */

/* ── ShiftNav bottom EA notice ────────────────── */

.shiftnav-ea-notice {
  display: none;   /* hidden on all domains by default */
}

body.is-sibling-domain .shiftnav-ea-notice {
  display:      block;
  padding:      16px 20px 20px;
  border-top:   1px solid rgba(255,255,255,0.08);
  margin-top:   auto;   /* pushes to the bottom of the flex panel */
}

.shiftnav-ea-notice-link {
  display:        block;
  color:          var(--text-cream);
  font-size:      12px;
  font-family:    var(--font-primary);
  text-decoration: none;
  opacity:        0.5;
  line-height:    1.5;
  text-align:     center;
  transition:     opacity 0.2s ease;
}

.shiftnav-ea-notice-link:hover {
  opacity: 0.85;
}

.shiftnav-ea-notice-link strong {
  display:     block;
  font-size:   13px;
  font-weight: normal;   /* handwritten font — bold looks odd */
  opacity:     0.9;
}

/* ── Cart checkout sibling notice ─────────────── */

.cart-sibling-notice {
  display: none;   /* hidden on all domains by default */
}

body.is-sibling-domain .cart-sibling-notice {
  display:     block;
  font-size:   11px;
  color:       var(--text-cream);
  opacity:     0.55;
  text-align:  center;
  margin:      0 0 8px;
  font-family: var(--font-primary);
}

.cart-sibling-link {
  color:           var(--text-gold);
  text-decoration: none;
  opacity:         1;
}

.cart-sibling-link:hover {
  text-decoration: underline;
}

/* ── Footer EA notice ─────────────────────────── */

.footer-ea-notice {
  display: none;   /* hidden on all domains by default */
}

body.is-sibling-domain .footer-ea-notice {
  display: block;
}

.footer-ea-notice-link {
  color:           var(--text-cream);
  font-size:       12px;
  text-decoration: none;
  opacity:         0.5;
  font-family:     var(--font-primary);
  transition:      opacity 0.2s ease;
}

.footer-ea-notice-link:hover {
  opacity: 0.85;
}

/* ── Footer ─────────────────────────────────────────────── */

#footer {
  background-color: var(--bg-container);
  padding:          40px 16px 20px;
  margin-top:       40px;
}

/* ── Footer three-column grid ────────────────────────────── */

#footer-links {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
  max-width:             900px;
  margin:                0 auto 32px;
  text-align:            center;   /* centre column headings and links */
}

.footer-col h3 {
  color:          var(--text-gold);
  font-size:      15px;
  font-family:    var(--font-primary);
  margin-bottom:  12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col ul {
  list-style: none;
  padding:    0;
}

.footer-col ul li {
  margin-bottom: 6px;
}

.footer-col ul li a {
  color:     var(--text-cream);
  font-size: 14px;
  opacity:   0.8;
}

.footer-col ul li a:hover {
  color:   var(--text-gold);
  opacity: 1;
}

/* ── Footer bottom — centred column layout ───────────────── */

#footer-bottom {
  border-top:      1px solid rgba(255,255,255,0.1);
  padding-top:     20px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
  font-size:       12px;
  opacity:         0.6;
  max-width:       1200px;    /* wider than the 3-col grid — spans full content width */
  margin:          0 auto;
}

/* Logo + copyright on one centred line */
#footer-copyright-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

#footer-copyright {
  font-family: var(--font-primary);
  font-size:   12px;
  color:       var(--text-cream);
}

/* Domain family strip — full width, centred, all names on one visual line */
#footer-domains {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             20px 32px;
}

#footer-domains a {
  color:          var(--text-cream);
  white-space:    nowrap;   /* never wrap a domain name mid-word */
  font-size:      12px;
  text-decoration: none;
}

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

/* Mini logo button */
#footer-logo-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
  opacity:    0.5;
  flex-shrink: 0;
}

#footer-logo-btn:hover {
  opacity: 1;
}

#footer-logo-btn img {
  width:          22px;
  height:         22px;
  vertical-align: middle;
}

/* "Built with love" tagline */
#footer-built-with {
  text-align:     center;
  font-family:    var(--font-decorative);
  font-size:      13px;
  color:          var(--text-gold);
  opacity:        0.55;
  padding:        10px 0 4px;
  letter-spacing: 0.04em;
}

/* ── Loading state ──────────────────────────────────────── */

#page-loading {
  position:         fixed;
  inset:            0;
  background-color: var(--bg-page);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          9999;
  font-size:        18px;
  color:            var(--text-cream);
  opacity:          0.7;
}

body.ready #page-loading {
  display: none;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
  #search-input {
    width: 140px;
  }

  #footer-links {
    grid-template-columns: 1fr;
    gap:                   24px;
  }
  /* footer-bottom is already column on all sizes — no override needed */
}

/* ── ShiftNav panels ────────────────────────────────────── */

.shiftnav {
  position:       fixed;
  inset:          0;
  z-index:        200;
  pointer-events: none;
}

.shiftnav.open {
  pointer-events: all;
}

.shiftnav-overlay {
  position:         fixed;   /* viewport-relative — covers full page behind panel */
  inset:            0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity:          0;
  transition:       opacity 0.3s ease;
}

.shiftnav.open .shiftnav-overlay {
  opacity: 1;
}

/* During tour step 1, suppress the ShiftNav dim overlay so the logo
   remains fully visible. The tour's own SVG handles the dimming. */
body.tour-shiftnav-open .shiftnav.open .shiftnav-overlay {
  opacity: 0;
}

/* Block all ShiftNav interaction while the tour controls it.
   Prevents the overlay click, logo toggle, or nav links from
   closing the nav mid-explanation. pointer-events: none lets
   clicks pass through to the tour card buttons underneath. */
body.tour-shiftnav-open .shiftnav-overlay,
body.tour-shiftnav-open #logo-btn,
body.tour-shiftnav-open .shiftnav-nav,
body.tour-shiftnav-open .shiftnav-panel {
  pointer-events: none;
}

.shiftnav-panel {
  position:         fixed;   /* viewport-relative — stays put while page slides */
  top:              0;        /* full height from top of viewport */
  bottom:           0;
  width:            300px;
  background-color: var(--bg-container);
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  transition:       transform 0.3s ease;
}

.shiftnav-panel-left {
  left:      0;
  transform: translateX(-100%);
}

.shiftnav.open .shiftnav-panel-left {
  transform: translateX(0);
}

/* ── CRT header — Commodore animation ───────────────────── */

.shiftnav-header {
  background-color: var(--header-logo);
  max-height:       300px;
  flex-shrink:      0;
  overflow:         hidden;
  padding:          40px;           /* 40px gap on all sides of the animation */
  line-height:      0;
}

#shiftnav-crt-header {
  cursor:  pointer;
  display: block;
  width:   100%;
  height:  100%;
}

#shiftnav-crt-header:hover {
  opacity: 0.9;
}

#shiftnav-crt-img {
  width:            100%;
  height:           auto;
  display:          block;
  object-position:  center 30%;
}

/* ── Sub-panel title — clickable for parent categories ──── */

.shiftnav-sublevel-title {
  padding:          12px 20px 10px;
  color:            var(--text-gold);
  font-family:      var(--font-primary);
  font-size:        15px;
  border-bottom:    1px solid rgba(255,255,255,0.08);
  flex-shrink:      0;
}

/* When rendered as a <button>, add hover/cursor */
button.shiftnav-sublevel-title {
  background:    none;
  border:        none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width:         100%;
  text-align:    left;
  cursor:        pointer;
  transition:    color 0.15s, background-color 0.15s;
}

button.shiftnav-sublevel-title:hover {
  color:            var(--accent-orange);
  background-color: rgba(255,255,255,0.04);
}

.shiftnav-nav {
  flex:       1;
  overflow-y: auto;
  padding:    8px 0;
}

/* ── ShiftNav item — split click zones ──────────────────── */

.shiftnav-item {
  display:       flex;
  align-items:   stretch;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.shiftnav-item-label {
  flex:        1;
  padding:     10px 12px 10px 20px;
  color:       var(--menu-link);
  font-family: var(--font-primary);
  font-size:   15px;
  cursor:      pointer;
  transition:  background-color 0.15s, color 0.15s;
  user-select: none;
}

.shiftnav-item-label:hover {
  background-color: rgba(255,255,255,0.07);
  color:            var(--text-gold);
}

.shiftnav-item-label.active {
  color:            var(--text-gold);
  background-color: rgba(246, 174, 45, 0.1);
}

.shiftnav-item-arrow {
  width:           48px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-cream);
  opacity:         0.35;
  font-size:       12px;
  cursor:          pointer;
  transition:      background-color 0.15s, opacity 0.15s, color 0.15s;
  border-left:     1px solid rgba(255,255,255,0.06);
  user-select:     none;
}

.shiftnav-item-arrow:hover {
  background-color: rgba(255,255,255,0.12);
  opacity:          1;
  color:            var(--text-gold);
}

.shiftnav-item-arrow.hidden {
  display: none;
}

.shiftnav-loading {
  padding:   20px;
  color:     var(--text-cream);
  opacity:   0.4;
  font-size: 14px;
}

/* ── Sub-panel ───────────────────────────────────────────── */

.shiftnav-sublevel {
  position:         absolute;
  top: 300px;   /* must match .shiftnav-header height */
  left:             0;
  right:            0;
  bottom:           0;
  background-color: var(--bg-container);
  display:          flex;
  flex-direction:   column;
  transform:        translateX(100%);
  transition:       transform 0.25s ease;
  overflow:         hidden;
}

.shiftnav-sublevel.open {
  transform: translateX(0);
}

.shiftnav-sublevel-title {
  background-color: var(--header-logo);
  color:            var(--text-gold);
  font-family:      var(--font-primary);
  font-size:        16px;
  padding:          12px 20px;
  flex-shrink:      0;
  border-bottom:    1px solid rgba(255,255,255,0.1);
}

.shiftnav-sublevel-nav {
  flex:       1;
  overflow-y: auto;
}

.shiftnav-back-btn {
  background:    none;
  border:        none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color:         var(--text-gold);
  font-family:   var(--font-primary);
  font-size:     14px;
  padding:       12px 20px;
  cursor:        pointer;
  text-align:    right;
  flex-shrink:   0;
  width:         100%;
}

.shiftnav-back-btn:hover {
  color: var(--accent-orange);
}

@media (max-width: 480px) {
  .shiftnav-panel {
    width: 85vw;
  }

  /* Hide the tour button at phone width — one too many icons in the nav row.
   * The tour still works if the user finds it on a wider screen.
   * Hiding this also fixes the filter button being half-clipped, since
   * that only occurs on the homepage where #btn-tour is visible. */
  body.is-homepage #btn-tour {
    display: none;
  }

  /* Widen the search input so the placeholder fits without truncating.
   * The 768px rule sets 140px — override here to give more breathing room. */
  #search-input {
    width: 200px;
  }
}  /* end @media (max-width: 480px) */

/* ── ShiftNav Right Panel — Filters ─────────────────────────
   Mirror of the left panel. Slides in from the right edge.
   Page shifts LEFT (translateX negative) when open.
   ─────────────────────────────────────────────────────────── */

/* Page shifts LEFT when right panel opens */
body.filtersnav-open #page-wrap {
  transform: translateX(-300px);  /* matches .shiftnav-panel width */
}

/* Sticky nav-bar must shift left too when filtersnav opens */
body.nav-stuck.filtersnav-open #nav-bar {
  transform: translateX(-300px);
}

/* Right panel: slides in from the right edge */
.shiftnav-panel-right {
  right:     0;
  transform: translateX(100%);   /* hidden off right edge by default */
}

.shiftnav.open .shiftnav-panel-right {
  transform: translateX(0);      /* slides into view */
}

/* ── Filter panel header ─────────────────────────────────── */

.shiftnav-filter-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  background-color: var(--header-logo);
  padding:          14px 16px;
  flex-shrink:      0;
  border-bottom:    1px solid rgba(255,255,255,0.1);
}

.shiftnav-filter-title {
  color:       var(--text-gold);
  font-family: var(--font-primary);
  font-size:   16px;
}

.shiftnav-filter-title i {
  margin-right: 8px;
  opacity:      0.8;
}

.shiftnav-filter-close {
  background:  none;
  border:      none;
  color:       var(--text-cream);
  font-size:   18px;
  cursor:      pointer;
  padding:     4px 6px;
  line-height: 1;
  opacity:     0.6;
  transition:  opacity 0.15s, color 0.15s;
}

.shiftnav-filter-close:hover {
  opacity: 1;
  color:   var(--text-gold);
}

/* ── Filter body — scrollable controls area ──────────────── */

.shiftnav-filter-body {
  flex:       1;
  overflow-y: auto;
  padding:    12px 0;
}

/* Empty state — shown when the category has no filterable fields */
.shiftnav-filter-empty {
  padding:   24px 20px;
  color:     var(--text-cream);
  opacity:   0.4;
  font-size: 13px;
  font-family: var(--font-primary);
  text-align: center;
}

/* ── Filter group — one group per field definition ──────── */

.filter-group {
  padding:       10px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.filter-group:last-child {
  border-bottom: none;
}

/* Field label */
.filter-group-label {
  display:     block;
  color:       var(--text-gold);
  font-family: var(--font-primary);
  font-size:   13px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* ── Text input ─────────────────────────────────────────── */

.filter-input-text {
  width:            100%;
  background-color: rgba(255,255,255,0.07);
  border:           1px solid rgba(255,255,255,0.15);
  border-radius:    4px;
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        13px;
  padding:          6px 10px;
  box-sizing:       border-box;
  transition:       border-color 0.15s;
}

.filter-input-text:focus {
  outline:      none;
  border-color: var(--link-blue);
}

/* ── Select dropdown ────────────────────────────────────── */

.filter-select {
  width:            100%;
  background-color: rgba(255,255,255,0.07);
  border:           1px solid rgba(255,255,255,0.15);
  border-radius:    4px;
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        13px;
  padding:          6px 10px;
  box-sizing:       border-box;
  cursor:           pointer;
  transition:       border-color 0.15s;
  /* Remove default browser arrow on some browsers */
  appearance:       none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23EFDAB9' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       28px;
}

.filter-select:focus {
  outline:      none;
  border-color: var(--link-blue);
}

/* ── Checkbox list (multi_select, availability, tags) ───── */

.filter-checkbox-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;   /* slightly more breathing room between items */
}

.filter-checkbox-item {
  display:     flex;
  align-items: center;
  gap:         9px;
  cursor:      pointer;
  line-height: 1.3;
}

.filter-checkbox-item input[type="checkbox"],
.filter-checkbox-item input[type="radio"] {
  accent-color: var(--link-blue);
  width:        15px;
  height:       15px;
  flex-shrink:  0;
  cursor:       pointer;
  margin:       0;     /* reset browser default margin */
}

.filter-checkbox-item span {
  color:       var(--text-cream);
  font-family: var(--font-primary);
  font-size:   13px;
  line-height: 1.3;
}

/* ── Range inputs (number, year) ────────────────────────── */

.filter-range-pair {
  display: flex;
  gap:     8px;
  align-items: center;
}

.filter-range-input {
  flex:             1;
  background-color: rgba(255,255,255,0.07);
  border:           1px solid rgba(255,255,255,0.15);
  border-radius:    4px;
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        13px;
  padding:          6px 8px;
  box-sizing:       border-box;
  text-align:       center;
  transition:       border-color 0.15s;
}

.filter-range-input:focus {
  outline:      none;
  border-color: var(--link-blue);
}

.filter-range-sep {
  color:     var(--text-cream);
  opacity:   0.4;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Colour swatches ────────────────────────────────────── */

.filter-swatch-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.filter-swatch {
  padding:       4px 10px;
  border-radius: 12px;
  font-family:   var(--font-primary);
  font-size:     12px;
  cursor:        pointer;
  border:        2px solid transparent;
  background-color: rgba(255,255,255,0.1);
  color:         var(--text-cream);
  transition:    border-color 0.15s, background-color 0.15s;
  user-select:   none;
}

.filter-swatch:hover {
  background-color: rgba(255,255,255,0.18);
}

.filter-swatch.active {
  border-color:     var(--text-gold);
  background-color: rgba(246,174,45,0.15);
  color:            var(--text-gold);
}

/* ── Filter footer — Clear Filters button ───────────────── */

.shiftnav-filter-footer {
  padding:       14px 16px;   /* slightly more breathing room */
  border-top:    1px solid rgba(255,255,255,0.08);
  flex-shrink:   0;
}

.shiftnav-filter-clear {
  width:         100%;
  background:    rgba(244,112,22,0.1);   /* subtle orange tint always-on */
  border:        1px solid rgba(244,112,22,0.35);
  border-radius: 4px;
  color:         var(--accent-orange);
  font-family:   var(--font-primary);
  font-size:     13px;
  padding:       10px 12px;  /* taller than before — easier to tap */
  cursor:        pointer;
  transition:    border-color 0.15s, color 0.15s, background-color 0.15s;
  letter-spacing: 0.03em;
}

.shiftnav-filter-clear:hover {
  border-color:     var(--accent-orange);
  color:            #fff;
  background-color: rgba(244,112,22,0.28);
}

/* Active filter count badge on the #btn-filters nav button.
   Uses the same superscript position as .nav-badge (compare, wishlist, cart).
   Shown/hidden by shiftnav.js via the .visible class — same pattern as nav-badge. */
.filter-badge {
  position:         absolute;
  top:              -4px;
  right:            -2px;
  background-color: var(--accent-green);
  color:            #fff;
  font-size:        10px;
  font-family:      var(--font-primary);
  border-radius:    999px;
  min-width:        16px;
  height:           16px;
  display:          none;          /* hidden until .visible is added */
  align-items:      center;
  justify-content:  center;
  padding:          0 3px;
  line-height:      1;
  pointer-events:   none;
}

.filter-badge.visible {
  display: flex;
}

/* ── Filter accordion sections ───────────────────────────────
   Each Tier 1 and Tier 2 filter section is a collapsible
   accordion panel inside the right ShiftNav filter body.
   ─────────────────────────────────────────────────────────── */

.filter-accordion {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.filter-accordion:last-child {
  border-bottom: none;
}

/* Header button — full width, click to toggle */
.filter-accordion-header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  width:          100%;
  background:     none;
  border:         none;
  padding:        12px 16px;   /* slightly tighter than before */
  cursor:         pointer;
  user-select:    none;
  transition:     background-color 0.15s;
}

.filter-accordion-header:hover {
  background-color: rgba(255,255,255,0.04);
}

.filter-accordion-title {
  color:       var(--menu-link);
  font-family: var(--font-primary);
  font-size:   13px;           /* consistent with body controls */
  letter-spacing: 0.03em;
  transition:  color 0.15s;
}

.filter-accordion-header.open .filter-accordion-title {
  color: var(--text-gold);
}

/* Chevron rotates when open */
.filter-accordion-chevron {
  color:      var(--text-cream);
  opacity:    0.35;
  font-size:  10px;
  transition: transform 0.2s, opacity 0.15s;
  flex-shrink: 0;
}

.filter-accordion-header.open .filter-accordion-chevron {
  transform: rotate(180deg);
  opacity:   0.7;
}

/* Collapsible body — hidden by default, revealed when .open */
.filter-accordion-body {
  display:  none;
  padding:  2px 16px 14px;   /* less top pad — header already has bottom pad */
}

.filter-accordion-body.open {
  display: block;
}

/* ── Sale! section accent ──────────────────────────────────
   The Sale! accordion gets a left-border accent so it stands out
   from the other sections at a glance. */

.filter-accordion--sale .filter-accordion-header {
  border-left: 3px solid var(--accent-orange);
  padding-left: 13px;   /* compensate for border so text stays aligned */
}

.filter-accordion--sale .filter-accordion-title {
  color: var(--accent-orange);
  opacity: 0.85;
}

.filter-accordion--sale .filter-accordion-header.open .filter-accordion-title {
  color:    var(--accent-orange);
  opacity:  1;
}

/* ── Price slider ─────────────────────────────────────────────
   Dual-handle range slider using two overlapping <input type=range>.
   A CSS custom property tracks the filled portion between handles.
   ─────────────────────────────────────────────────────────── */

/* Display showing current selected range */
.filter-price-display {
  color:       var(--text-gold);
  font-family: var(--font-price);    /* legible numerals — Arial */
  font-size:   13px;
  text-align:  center;
  margin-bottom: 12px;
}

/* Wrapper provides the track and filled segment via pseudo-element */
.filter-slider-wrap {
  position:  relative;
  height:    32px;           /* slightly taller — more thumb grab area */
  --range-min: 0%;
  --range-max: 100%;
}

/* Both handles share base styling */
.filter-range-slider {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  width:      100%;
  height:     4px;
  background: transparent;
  outline:    none;
  cursor:     pointer;
  /* Remove default browser styling */
  -webkit-appearance: none;
  appearance:         none;
  pointer-events:     none;   /* clicks pass through to whichever handle is on top */
}

/* Re-enable pointer events on the thumb only */
.filter-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:         18px;         /* slightly larger — easier to grab on mobile */
  height:        18px;
  border-radius: 50%;
  background:    var(--text-gold);
  border:        2px solid var(--bg-container);
  cursor:        pointer;
  pointer-events: all;   /* re-enable so user can grab the thumb */
  transition:    background-color 0.15s, transform 0.1s;
  position:      relative;
  z-index:       2;
  box-shadow:    0 1px 4px rgba(0,0,0,0.4);
}

.filter-range-slider::-moz-range-thumb {
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    var(--text-gold);
  border:        2px solid var(--bg-container);
  cursor:        pointer;
  pointer-events: all;
  box-shadow:    0 1px 4px rgba(0,0,0,0.4);
}

.filter-range-slider::-webkit-slider-thumb:hover {
  background:  var(--accent-orange);
  transform:   scale(1.1);
}

/* Track: full bar is dim, filled section between handles is gold.
   We use a linear-gradient driven by CSS custom props set by JS. */
.filter-range-slider::-webkit-slider-runnable-track {
  height:     4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.12) var(--range-min),
    var(--text-gold)       var(--range-min),
    var(--text-gold)       var(--range-max),
    rgba(255,255,255,0.12) var(--range-max),
    rgba(255,255,255,0.12) 100%
  );
}

/* Firefox track — simpler, no gradient trick needed */
.filter-range-slider::-moz-range-track {
  height:       4px;
  border-radius: 2px;
  background:   rgba(255,255,255,0.12);
}

/* The max handle sits on top — z-index ensures it's always grabbable */
.filter-range-slider--max {
  z-index: 1;
}


/* ── Category Wall (/category-wall) ────────────────────────
   Full-viewport grid of all categories organised into
   parent/child groups. Each group has:
     - Column 1 (2fr): parent tile, spans 2 rows = square
     - Columns 2-5 (4×1fr): small square child tiles,
       2 rows × 4 cols = 8 children per group before wrapping.

   Children are half the parent width AND half the parent height
   so they are small rounded squares — the same proportion as
   the parent but at quarter the area.

   Solo parents (no children) render as single standard tiles.
   All tiles click through directly — no reveal overlay.
   ─────────────────────────────────────────────────────────── */

/* Outer wrapper — stacks groups vertically with consistent gap */
.cwall {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  width:          100%;
}

/* ── Parent/child group ──────────────────────────────────────
   Grid: 2fr parent column + 4×1fr child columns.
   Parent (2fr) is twice as wide as one child (1fr).
   Two child rows of 1:1 squares = one parent height.
   Parent spans 2 rows → parent is also square.
   ─────────────────────────────────────────────────────────── */

.cwall-group {
  display:               grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap:                   4px;
  width:                 100%;
}

/* ── Solo parent (no children) ───────────────────────────────
   Same column structure — parent sits in the 2fr column.
   ─────────────────────────────────────────────────────────── */

.cwall-solo {
  display:               grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap:                   4px;
  width:                 100%;
}

/* ── Base tile ───────────────────────────────────────────────
   Shared by parent, child, and solo modifiers.
   ─────────────────────────────────────────────────────────── */

.cwall-tile {
  position:      relative;
  cursor:        pointer;
  overflow:      hidden;
  border-radius: 6px;
  transition:    opacity 0.15s;
}

.cwall-tile:hover {
  opacity: 0.88;
}

/* ── Parent tile ─────────────────────────────────────────────
   Takes the 2fr column, spans 2 grid rows.
   ─────────────────────────────────────────────────────────── */

.cwall-tile--parent {
  grid-column: 1;
  grid-row:    span 2;
}

/* ── Child tile ──────────────────────────────────────────────
   Flows naturally into columns 2-5. Square aspect-ratio.
   ─────────────────────────────────────────────────────────── */

.cwall-tile--child {
  /* flows into 1fr columns automatically */
}

/* ── Solo tile ───────────────────────────────────────────────
   Single parent, no children. Square, sits in the 2fr column.
   ─────────────────────────────────────────────────────────── */

.cwall-tile--solo {
  grid-column: 1;
}

/* ── Tile image div ──────────────────────────────────────────
   Parent: row-span controls height, no aspect-ratio needed.
   Child:  aspect-ratio 1/1 — small square.
   Solo:   aspect-ratio 1/1 — standard square.
   ─────────────────────────────────────────────────────────── */

.cwall-tile-image {
  width:               100%;
  height:              100%;
  background-color:    rgba(255,255,255,0.04);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  border-radius:       6px;
  position:            relative;
  display:             flex;
  align-items:         flex-end;
}

.cwall-tile--child .cwall-tile-image {
  aspect-ratio: 1 / 1;   /* small square */
}

.cwall-tile--solo .cwall-tile-image {
  aspect-ratio: 1 / 1;
}

/* ── Category name label ─────────────────────────────────────
   Gradient scrim + name at bottom of every tile.
   ─────────────────────────────────────────────────────────── */

.cwall-tile-label {
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  padding:          8px 10px 6px;
  background:       linear-gradient(to top,
                      rgba(0,0,0,0.75) 0%,
                      rgba(0,0,0,0.0)  100%);
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        13px;
  line-height:      1.2;
  border-radius:    0 0 6px 6px;
  pointer-events:   none;
  word-break:       break-word;
}

/* Small child tiles get tiny labels — limited space */
.cwall-tile--child .cwall-tile-label {
  font-size:     9px;
  padding:       4px 5px 3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Responsive ──────────────────────────────────────────────
   Tablet (<900px): parent(2fr) + 2 child cols
   Mobile (<540px): parent(2fr) + 1 child col
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cwall-group,
  .cwall-solo {
    grid-template-columns: 2fr repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .cwall-group,
  .cwall-solo {
    grid-template-columns: 2fr 1fr;
  }

  .cwall-tile-label      { font-size: 11px; }
  .cwall-tile--child .cwall-tile-label { font-size: 8px; }
}

/* ── Quick-list tiles (right panel on item + home pages) ────
   Horizontal strip: small square image left, title+price right.
   Used in renderQuickList() and renderHomeQuickList() in shiftnav.js.
   ─────────────────────────────────────────────────────────── */

.quick-list-heading {
  padding:     10px 16px 6px;
  color:       var(--text-gold);
  font-family: var(--font-primary);
  font-size:   12px;
  letter-spacing: 0.05em;
  opacity:     0.7;
  text-transform: uppercase;
}

.quick-tile {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 12px;
  cursor:      pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition:  background-color 0.15s;
}

.quick-tile:hover {
  background-color: rgba(255,255,255,0.05);
}

.quick-tile-img {
  width:               52px;
  height:              52px;
  flex-shrink:         0;
  border-radius:       4px;
  background-color:    rgba(255,255,255,0.06);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}

.quick-tile-info {
  flex:        1;
  min-width:   0;   /* allow text truncation */
}

.quick-tile-title {
  color:         var(--text-cream);
  font-family:   var(--font-primary);
  font-size:     12px;
  line-height:   1.3;
  /* Clamp to 2 lines */
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

.quick-tile-price {
  color:       var(--text-gold);
  font-family: var(--font-price);    /* legible numerals — Arial */
  font-size:   11px;
  margin-top:  3px;
}

.quick-tile-price-orig {
  text-decoration: line-through;
  opacity:         0.5;
  color:           var(--text-cream);
}

.quick-tile-price-sale {
  color: var(--accent-orange);
}

/* ── Sale divider inside Availability accordion ──────────── */

.filter-sale-divider {
  height:        1px;
  background:    rgba(255,255,255,0.08);
  margin:        6px 0;
}

.filter-checkbox-item--sale span {
  color: var(--accent-orange) !important;
}

/* ── Search expand on mobile ─────────────────────────────── */

@media (max-width: 480px) {
  #search-input {
    display:    none;
    position:   absolute;
    left:       0;
    right:      0;
    top:        100%;
    width:      100%;
    z-index:    10;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
  }

  #search-input.expanded {
    display: block;
  }

  /* Nudge nav-left so search btn stays visible */
  #nav-left {
    position: relative;
  }
}

/* ── Homepage category grid ─────────────────────────────── */

.category-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;  /* gap between tiles reveals background */
  width:                 100%;
}

.category-tile {
  position:            relative;
  background-color:    var(--bg-container);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  aspect-ratio:        1 / 1;
  cursor:              pointer;
  overflow:            hidden;
  border-radius:       6px;  /* rounded corners on category tiles */
}

.category-tile--hero {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.category-tile-overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         16px;
  gap:             4px;
}

.category-tile-name {
  font-family: var(--font-primary);
  font-size:   18px;
  color:       var(--text-cream);
  line-height: 1.2;
}

.category-tile--hero .category-tile-name {
  font-size: 24px;
}

.category-tile-count {
  font-family:    var(--font-primary);
  font-size:      12px;
  color:          var(--text-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.grid-empty {
  color:       var(--text-cream);
  opacity:     0.4;
  font-size:   16px;
  padding:     40px;
  text-align:  center;
  font-family: var(--font-primary);
}

@media (max-width: 1199px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-tile--hero {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
}

/* ── Category page ──────────────────────────────────────── */

body.has-category-bg #page-content {
  background: transparent;
}

/* ── Full-bleed background overlay — all page types ─────── */
/*
 * When a full background image is active, a semi-transparent dark
 * overlay sits between the image and the page content so text remains
 * readable. Implemented as a fixed ::before pseudo-element on the body.
 *
 * Covers: product detail pages (has-product-bg), category pages
 * (has-category-bg), standalone pages (has-page-bg), and search
 * results (has-search-bg). All four use the same mechanism.
 *
 * Overlay darkness is controlled by --bg-overlay-opacity, set by
 * main.js from domain_config.bg_opacity (default 0.65). Adjustable
 * per domain in Admin → Settings → Background Opacity.
 *
 * 0.0 = background image fully visible
 * 1.0 = background image completely hidden
 */

body.has-product-bg::before,
body.has-category-bg::before,
body.has-page-bg::before,
body.has-search-bg::before,
body.has-tag-bg::before {
  content:        '';
  position:       fixed;
  inset:          0;
  background:     rgba(33, 37, 41, var(--bg-overlay-opacity, 0.65));
  z-index:        0;
  pointer-events: none;
}

/* Ensure page-wrap stacks above the overlay on all bg types */
body.has-product-bg #page-wrap,
body.has-category-bg #page-wrap,
body.has-page-bg #page-wrap,
body.has-search-bg #page-wrap,
body.has-tag-bg #page-wrap {
  position: relative;
  z-index:  1;
}

/* Page content transparent so background + overlay shows through */
body.has-product-bg #page-content,
body.has-category-bg #page-content,
body.has-page-bg #page-content,
body.has-search-bg #page-content,
body.has-tag-bg #page-content {
  background: transparent;
}

/* ── Product page readability panels ────────────────────────
 *
 * When a full background is active on a product page, a dark
 * semi-transparent panel is applied behind the right detail column
 * and the full-width bottom section (availability / categories /
 * tags / social). The left image column is intentionally left
 * without a panel — product images float on the background.
 *
 * The ::before overlay (above) darkens the whole background.
 * These panels add a second layer of contrast directly behind
 * the text-heavy areas so they remain readable at any opacity.
 *
 * Colour matches --bg-page (#212529) at 88% opacity — opaque
 * enough to guarantee contrast, translucent enough to hint at
 * the background beneath.
 * ─────────────────────────────────────────────────────────── */

body.has-product-bg .item-info-card {
  background:    rgba(33, 37, 41, 0.92);
  /* border and box-shadow from .item-info-card already present —
     the stronger background is the only change needed here.      */
}

body.has-product-bg .item-bottom-section {
  background:    rgba(33, 37, 41, 0.88);
  border-radius: 8px;
  /* border-top is already on .item-bottom-section — hide it when
     the panel provides its own visual separation */
  border-top:    none;
  padding:       20px 24px 28px;
}

/* ── Content blocks — collapsible on category pages ─────── */

.content-block {
  margin-bottom:    12px;
  background-color: var(--bg-container);
  border-radius:    4px;
  overflow:         hidden;
}

.content-block-title {
  padding:     12px 20px;
  font-family: var(--font-primary);
  font-size:   16px;
  color:       var(--text-gold);
}

.content-block.collapsible .content-block-title {
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         10px;
  user-select: none;
  transition:  background-color 0.15s;
}

.content-block.collapsible .content-block-title:hover {
  background-color: rgba(255,255,255,0.04);
}

.content-block-toggle-icon {
  font-size:   18px;
  line-height: 1;
  color:       var(--text-gold);
  transition:  transform 0.2s ease;
  flex-shrink: 0;
}

.content-block.collapsible.expanded .content-block-toggle-icon {
  transform: rotate(45deg);
}

.content-block-body {
  padding:     0 20px 16px;
  color:       var(--text-cream);
  font-family: var(--font-primary);
  font-size:   15px;
  line-height: 1.6;
}

.content-block.collapsible .content-block-body {
  display: none;
}

.content-block.collapsible.expanded .content-block-body {
  display: block;
}

.content-block-images {
  display:    flex;
  gap:        12px;
  margin-top: 12px;
  flex-wrap:  wrap;
}

.content-block-images img {
  max-width:     100%;
  max-height:    300px;
  object-fit:    cover;
  border-radius: 3px;
}

/* ── Item grid ───────────────────────────────────────────── */

.item-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;   /* matches homepage feel — background visible between tiles */
  width:                 100%;
}

.item-tile {
  position:      relative;
  cursor:        pointer;
  border-radius: 6px;  /* rounded corners on product tiles */
  /* Drop shadow lifts transparent-PNG products off the background.
     Applied on the tile wrapper (not .item-tile-image) so overflow:hidden
     on the image div doesn't clip it. Suppressed in no-frames mode. */
  filter:        drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
  transition:    filter 0.2s ease;
}

.item-tile:hover {
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.70));
}

/* No frames mode — plain images don't need the shadow */
body.no-frames .item-tile {
  filter: none;
}

.item-tile-image {
  position:            relative;   /* anchor for .item-tile-frame overlay */
  overflow:            hidden;     /* clip corner-ribbon and absolutely-positioned layers */
  aspect-ratio:        1 / 1;
  background-color:    transparent;  /* transparent — PNG items float on category bg */
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  width:               100%;
  transition:          transform 0.2s ease;
  border-radius:       6px;  /* matches parent — image fills rounded tile */
  container-type:      inline-size; /* enables cqi units for flag font scaling */
}

.item-tile:hover .item-tile-image {
  transform: scale(1.02);
}

.item-tile-sale-badge {
  position:         absolute;
  top:              10px;
  left:             10px;
  background-color: var(--accent-orange);
  color:            #fff;
  font-family:      var(--font-primary);
  font-size:        12px;
  padding:          3px 8px;
  border-radius:    3px;
  pointer-events:   none;
  z-index:          5;             /* above frame overlay (z:3) and viewports (z:1-2) */
}

/* ── Product Flag / Banner System ───────────────────────────
   Decorative overlays on category grid tiles.
   Each flag is absolutely positioned inside .item-tile-image.
   z-index: 5 matches the sale badge — always above the frame PNG.
   Composed from three modifier classes applied to .item-tile-flag:
     .flag-style-*       — visual shape/treatment
     .flag-pos-*         — tile placement (top-left, bottom-full, etc.)
     .flag-color-*       — background + text colour preset
   ──────────────────────────────────────────────────────────── */

/* ── Base flag element ───────────────────────────────────── */

.item-tile-flag {
  position:       absolute;
  z-index:        5;
  pointer-events: none;
  font-family:    var(--font-primary);
  /* Scale font with tile size so flag proportion stays consistent
     across all tile sizes (grid, homepage rows, featured blocks).
     cqi = 1% of the containing block's inline size (set above).  */
  font-size:      clamp(9px, 1.8cqi, 14px);
  line-height:    1.2;
  white-space:    nowrap;
  user-select:    none;
}

/* ── Position variants ───────────────────────────────────────
   Removed — position is now driven by flag_pos_x / flag_pos_y
   (% of tile) applied as inline styles from category.js.
   The .flag-pos-* classes are no longer used or generated.   */

/* ── Style: pill-badge ───────────────────────────────────────
   Compact rounded pill — clean and readable anywhere          */

.flag-style-pill-badge {
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     11px;
  margin:        8px;
}

/* ── Style: corner-ribbon ────────────────────────────────────
   Classic diagonal corner ribbon. overflow:hidden on
   .item-tile-image clips it to the tile boundary.             */

.flag-style-corner-ribbon {
  width:          80px;
  padding:        5px 0;
  text-align:     center;
  font-size:      10px;
  transform-origin: top left;
}

/* corner-ribbon rotate variants removed — flag-pos-* classes no longer emitted */

/* ── Style: angled-stamp ─────────────────────────────────────
   Slightly rotated rectangular stamp — casual, handmade feel  */

.flag-style-angled-stamp {
  padding:        5px 10px;
  border-radius:  2px;
  font-size:      11px;
  transform:      rotate(-8deg);
  margin:         10px;
  box-shadow:     1px 2px 4px rgba(0,0,0,0.5);
  border:         1px solid rgba(255,255,255,0.2);
  letter-spacing: 0.03em;
}

/* ── Style: tag-tab ──────────────────────────────────────────
   Hangtag-style tab, pointing left or right depending on
   which horizontal position is chosen                         */

.flag-style-tag-tab {
  padding:       5px 10px 5px 8px;
  font-size:     11px;
  clip-path:     polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
  padding-right: 18px;
}

/* tag-tab right-pointing variant removed — flag-pos-* classes no longer used */

/* ── Style: bottom-strip ─────────────────────────────────────
   Full-width flat strip anchored to one of the bottom
   positions — overrides left/right to span full tile width    */

.flag-style-bottom-strip {
  /* Position/width set via inline styles — full tile width. */
  padding:    5px 10px;
  text-align: center;
  font-size:  11px;
}

/* ── Style: diagonal-slash ───────────────────────────────────
   Wide diagonal band across the tile with a right-pointing
   arrowhead on the right end — bold and directional.
   clip-path carves: flat left edge, arrowhead point on right. */

.flag-style-diagonal-slash {
  width:            130%;
  padding:          6px 0 6px 12px;
  text-align:       left;
  font-size:        10px;
  transform:        rotate(-30deg) translateX(-14%) translateY(-10%);
  transform-origin: top left;
  box-shadow:       0 2px 6px rgba(0,0,0,0.4);
  /* Flat left, angled top/bottom cuts, arrowhead point on right */
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  padding-right: 20%;
}

/* ── Style: scroll-banner ────────────────────────────────────
   A proper ribbon/scroll banner with V-cut notches at each end
   and a folded shadow flap underneath, evoking a vintage label
   or prize ribbon. Floats above the tile bottom edge.
   The banner body is the element itself; ::before and ::after
   form the back-fold triangles on each end (darker colour,
   clipped to a right-triangle shape via clip-path).            */

.flag-style-scroll-banner {
  /* Position is set via inline styles (flag_pos_y %).
     left/right/width are locked by JS — full tile width. */
  padding:        7px 20px;
  text-align:     center;
  font-size:      12px;
  letter-spacing: 0.04em;
  /* V-cut notches at both ends */
  clip-path: polygon(
    0%   0%,
    8px  50%,
    0%   100%,
    100% 100%,
    calc(100% - 8px) 50%,
    100% 0%
  );
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

/* Back-fold flap — left end: darker triangle behind the notch */
.flag-style-scroll-banner::before {
  content:   '';
  position:  absolute;
  bottom:    -5px;
  left:      0;
  width:     14px;
  height:    5px;
  background: rgba(0,0,0,0.35);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Back-fold flap — right end: mirror of ::before */
.flag-style-scroll-banner::after {
  content:   '';
  position:  absolute;
  bottom:    -5px;
  right:     0;
  width:     14px;
  height:    5px;
  background: rgba(0,0,0,0.35);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ── Colour presets ──────────────────────────────────────────
   Named pairs: background + text. Matched to EA's MCM palette. */

.flag-color-orange-white { background-color: #F47016; color: #fff;     }  /* EA accent orange      */
.flag-color-gold-dark    { background-color: #F6AE2D; color: #1a1a1a;  }  /* EA gold on near-black */
.flag-color-teal-cream   { background-color: #4E798C; color: #EFDAB9;  }  /* link-blue on cream    */
.flag-color-red-white    { background-color: #C0392B; color: #fff;     }  /* attention red         */
.flag-color-dark-gold    { background-color: #1C2023; color: #F6AE2D;  }  /* dark panel + gold     */
.flag-color-green-white  { background-color: #1F7F00; color: #fff;     }  /* EA accent green       */
.flag-color-cream-dark   { background-color: #EFDAB9; color: #1C2023;  }  /* warm cream on slate   */
.flag-color-blue-white   { background-color: #86BBD8; color: #1a1a1a;  }  /* sky blue              */

/* ── Frame overlay ──────────────────────────────────────────
   Transparent-centre PNG floated over the product photo.
   Covers the full tile area — frame may partially obscure image edges.
   Only injected on category grid tiles, never on item detail pages.
   pointer-events: none — clicks pass through to the tile below.        */

.item-tile-frame {
  position:        absolute;
  inset:           0;             /* fill the entire .item-tile-image area */
  width:           100%;
  height:          100%;
  object-fit:      contain;       /* show full transparent-centre frame PNG  */
  pointer-events:  none;          /* clicks pass through to tile and reveal  */
  user-select:     none;
  -webkit-user-drag: none;        /* prevent drag ghost on Safari            */
  z-index:         3;             /* above both viewport layers, below reveal */
}

/* ── Click-reveal overlay ───────────────────────────────── */

.item-tile-reveal {
  position:         absolute;
  inset:            0;
  background-color: rgba(20, 26, 30, 0.92);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  padding:          16px;
  gap:              8px;
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 0.2s ease;
}

.item-tile.revealed .item-tile-reveal {
  opacity:        1;
  pointer-events: all;
}

.reveal-title {
  font-family:   var(--font-primary);
  font-size:     15px;
  color:         var(--text-cream);
  text-align:    center;
  margin-bottom: 4px;
  line-height:   1.3;
}

.reveal-price {
  font-family: var(--font-price);    /* legible numerals — Arial */
  font-size:   16px;
  color:       var(--text-gold);
}

.reveal-price-original {
  text-decoration: line-through;
  opacity:         0.6;
  font-size:       13px;
}

.reveal-price-sale {
  color:     var(--accent-orange);
  font-size: 16px;
}

.reveal-status {
  font-family: var(--font-primary);
  font-size:   13px;
  color:       var(--text-cream);
  opacity:     0.6;
}

/* Blogette story snippet — first ~25 words shown in the reveal card */
.reveal-snippet {
  font-family:  var(--font-primary);
  font-size:    13px;
  line-height:  1.55;
  color:        var(--text-cream);
  opacity:      0.82;
  display:      -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:     hidden;
}

/* Out of stock label — replaces action buttons on tiles with zero stock */
.reveal-sold-out {
  font-family:    var(--font-primary);
  font-size:      12px;
  color:          rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        4px 0;
}

.reveal-btn-primary {
  background-color: var(--accent-orange);
  color:            #fff;
  border:           none;
  border-radius:    4px;
  font-family:      var(--font-primary);
  font-size:        13px;
  padding:          8px 16px;
  cursor:           pointer;
  width:            100%;
  transition:       background-color 0.15s;
}

.reveal-btn-primary:hover {
  background-color: var(--text-gold);
}

/* Offer button — teal, sits below Add to Bag on make_offer tiles */
.reveal-btn-offer {
  background-color: var(--link-blue);
  color:            #fff;
  border:           none;
  border-radius:    4px;
  font-family:      var(--font-primary);
  font-size:        13px;
  padding:          8px 16px;
  cursor:           pointer;
  width:            100%;
  transition:       background-color 0.15s;
  margin-top:       4px;
}

.reveal-btn-offer:hover {
  background-color: var(--menu-link);
}

.reveal-actions {
  display: flex;
  gap:     6px;
  width:   100%;
}

.reveal-btn-secondary {
  flex:          1;
  background:    none;
  border:        1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color:         var(--text-cream);
  font-family:   var(--font-primary);
  font-size:     11px;
  padding:       6px 4px;
  cursor:        pointer;
  transition:    border-color 0.15s, color 0.15s;
  text-align:    center;
}

.reveal-btn-secondary:hover {
  border-color: var(--text-gold);
  color:        var(--text-gold);
}

/* Active state — item is in the list — gold colour */
.reveal-btn-secondary.reveal-btn--active {
  color:        var(--text-gold);
  border-color: var(--text-gold);
}

/* Error flash — compare full feedback */
.reveal-btn-secondary.reveal-btn--error {
  color:        #e05c5c;
  border-color: #e05c5c;
}

/* Item page nav button error state — compare full */
.item-nav-btn--error {
  color: #e05c5c !important;
}

.grid-empty--category {
  color:       var(--text-cream);
  background:  rgba(246,174,45,0.1);
  opacity:     0.5;
  font-size:   16px;
  padding:     60px 20px;
  text-align:  center;
  font-family: var(--font-primary);
}

@media (max-width: 1199px) {
  .item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   ITEM DETAIL PAGE
   Styles for /item/:slug pages rendered by item.js.

   Layout overview:
     #item-nav-bar              sticky sub-bar (back/bullseye/compare/wishlist/prev/next)
     .item-detail-wrapper       two-column grid (images left, info right)
       .item-detail-images      left col: primary image, lightbox hint, gallery strip
       .item-detail-info        right col: split-flap slot, badge, title, price, desc, fields
     .item-bottom-section       full-width: availability, categories, tags, share
     .item-jump-row             jump row tiles (populated async by fetchLinkRow)
     .offer-form-section        make-an-offer form (make_offer items only)
     .lightbox-overlay          full-screen image lightbox
   ================================================================ */


/* ── Item nav bar ───────────────────────────────────────────────── */
/* Sticky sub-bar that appears at the top of item pages, just below
   the main nav bar. Shows Back, Bullseye, Compare, Wishlist, Prev/Next.
   Sticks to the top of the viewport as the user scrolls. */

#item-nav-bar {
  position:         sticky;
  top:              0;                         /* sticks at viewport top */
  z-index:          90;                        /* below main nav (z:100) */
  display:          flex;
  align-items:      center;
  justify-content:  center;                    /* single centred button group */
  gap:              0;
  padding:          0 20px;
  height:           44px;
  background-color: var(--bg-container);
  border-bottom:    1px solid rgba(255,255,255,0.08);
  margin-bottom:    24px;
}

/* When the main nav is stuck (fixed), the item nav bar is inside
   the scrolling content so it sticks naturally behind the main nav.
   Offset its top by the nav-bar height so it doesn't hide under it. */
body.nav-stuck #item-nav-bar {
  top: var(--header-height);                   /* 72px — defined in :root */
}

/* All three groups sit inline in the centred flex container */
.item-nav-group {
  display:     flex;
  align-items: center;
  gap:         2px;
}

/* Thin divider rule between the three button clusters */
.item-nav-group + .item-nav-group::before {
  content:    '';
  display:    block;
  width:      1px;
  height:     20px;
  background: rgba(255,255,255,0.12);
  margin:     0 8px;
}

.item-nav-group--mid {
  gap: 2px;
}

/* Base button style for all item nav buttons */
.item-nav-btn {
  background:    none;
  border:        none;
  color:         var(--text-cream);
  font-family:   var(--font-primary);
  font-size:     14px;
  cursor:        pointer;
  padding:       6px 10px;
  border-radius: 4px;
  display:       flex;
  align-items:   center;
  gap:           6px;
  opacity:       0.75;
  transition:    opacity 0.15s, color 0.15s, background-color 0.15s;
}

.item-nav-btn:hover {
  opacity:          1;
  background-color: rgba(255,255,255,0.06);
}

/* Disabled state — prev/next before adjacent data arrives */
.item-nav-btn:disabled {
  opacity: 0.25;
  cursor:  default;
}

.item-nav-btn:disabled:hover {
  background-color: transparent;
}

/* Active state for toggleable buttons (compare, wishlist) */
.item-nav-btn--active {
  color:   var(--text-gold);
  opacity: 1;
}

/* Bullseye gets the brand orange on hover */
.item-nav-btn--bullseye:hover {
  color: var(--accent-orange);
}

/* Prev/Next get a slightly larger icon */
.item-nav-btn--prev i,
.item-nav-btn--next i {
  font-size: 16px;
}

/* ── Circular prev/next buttons ──────────────────────────────
   Round pill buttons with a subtle border. Since wrap logic
   means there's always a destination, they're never greyed out
   (except briefly while the adjacent fetch is in-flight).
   ─────────────────────────────────────────────────────────── */

.item-nav-btn--circle {
  width:         36px;
  height:        36px;
  padding:       0;
  border-radius: 50%;
  border:        1px solid rgba(255,255,255,0.2);
  justify-content: center;
  background:    rgba(255,255,255,0.04);
}

.item-nav-btn--circle:hover {
  border-color:     var(--text-gold);
  color:            var(--text-gold);
  background-color: rgba(246,174,45,0.1);
}

.item-nav-btn--circle i {
  font-size: 14px;
  margin:    0;
}

/* Wrap indicator — a subtle pulsing ring when the button wraps
   to the other end of the list (class added briefly by JS) */
.item-nav-btn--circle.is-wrapping {
  border-color: var(--accent-orange);
  color:        var(--accent-orange);
}


/* ── Two-column layout ──────────────────────────────────────────── */
/* Images on the left, details on the right. At mobile widths the
   columns stack vertically (images above, info below). */

.item-detail-wrapper {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
  max-width:             1100px;
  margin:                0 auto;
  padding:               0 20px 40px;
  align-items:           start;   /* cards are independent heights — don't stretch */
}

@media (max-width: 900px) {
  .item-detail-wrapper {
    grid-template-columns: 1fr;
    gap:                   16px;
  }
}


/* ── Image card — floating dark panel ──────────────────────────── */

.item-image-card {
  background:     rgba(255, 255, 255, 0.04);  /* just enough lift off the page */
  border:         1px solid rgba(95, 121, 138, 0.5);
  border-radius:  14px;
  padding:        16px;
  box-shadow:     0 2px 16px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* ── Image column (inside the card) ────────────────────────────── */

.item-detail-images {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Primary image wrap — positions the frame overlay on top */
.item-primary-image-wrap {
  position:         relative;
  overflow:         hidden;
  border-radius:    8px;
  background-color: #181b1e;   /* dark showcase shelf for transparent PNG products */
}

/* The hero product image */
.item-primary-image {
  display:    block;
  width:      100%;
  height:     auto;
  max-height: 560px;
  object-fit: contain;              /* preserve aspect ratio, no crop */
  transition: transform 0.2s;
}

.item-primary-image-wrap:hover .item-primary-image {
  transform: scale(1.01);           /* very subtle scale hint on hover */
}

/* Frame overlay — absolutely positioned transparent PNG on top of photo */
.item-frame-overlay {
  position:      absolute;
  inset:         0;                 /* covers the entire wrap */
  width:         100%;
  height:        100%;
  object-fit:    contain;
  pointer-events: none;             /* clicks pass through to image below */
}

/* Magnify hint icon — bottom-right corner, shown on hover */
.item-lightbox-hint {
  position:         absolute;
  bottom:           10px;
  right:            12px;
  color:            var(--text-cream);
  font-size:        18px;
  opacity:          0;
  transition:       opacity 0.2s;
  pointer-events:   none;
  text-shadow:      0 1px 4px rgba(0,0,0,0.6);
}

.item-primary-image-wrap:hover .item-lightbox-hint {
  opacity: 0.7;
}

/* Placeholder when no image exists */
.item-primary-image--placeholder {
  min-height:       300px;
  background-color: var(--bg-container);
}

/* Thumbnail gallery strip wrapper — rounded tray that lifts thumbs off the bg */
.item-gallery-strip-wrap {
  background:    #292d31;                      /* matches rendered colour of .item-info-card */
  border:        1px solid rgba(95, 121, 138, 0.5);
  border-radius: 10px;
  padding:       10px;
}

/* Thumbnail gallery strip */
.item-gallery-strip {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
}

/* ── Thumbnail wrapper div — carries the view background per-thumb ── */
.item-gallery-thumb-wrap {
  width:            72px;
  height:           72px;
  border-radius:    4px;
  cursor:           pointer;
  border:           2px solid transparent;
  transition:       border-color 0.15s;
  background-color: #181b1e;         /* dark backing when no view bg assigned */
  overflow:         hidden;          /* clips both img and bg to rounded corners */
  flex-shrink:      0;
}

.item-gallery-thumb-wrap:hover {
  border-color: rgba(212, 184, 111, 0.4);  /* subtle gold hint on hover */
}

.item-gallery-thumb-wrap.active {
  border-color: var(--text-gold);    /* gold border = currently displayed image */
}

/* The img sits on top of the wrapper's background — full size, no dim */
.item-gallery-thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  opacity:    1;
}

/* ── Product view background variants ──────────────────────────── */

/* When a view background is assigned, the card itself carries the bg image.
   Override the default transparent lift so the bg fills the card. */
.item-image-card--has-view-bg {
  background-color: transparent;
  border-color:     rgba(95, 121, 138, 0.35);
}

/* Primary image wrap — transparent so card gradient shows through */
.item-image-card--has-view-bg .item-primary-image-wrap {
  background-color: transparent;
}

/* Thumb wraps with view bg — remove dark backing so gradient shows through */
.item-image-card--has-view-bg .item-gallery-thumb-wrap {
  background-color: transparent;    /* view bg set via inline style by item.js */
}


/* ── Detail column (right) ──────────────────────────────────────── */

.item-info-card {
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(95, 121, 138, 0.5);
  border-radius:  14px;
  padding:        20px 22px;
  box-shadow:     0 2px 16px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.item-detail-info {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

/* Split-flap outer container — dark departure-board panel.
   Matches the OG site's bordered box around the status display. */
.item-split-flap-outer {
  display:          inline-flex;     /* shrink-wraps to content width     */
  flex-direction:   column;          /* ALWAYS stack row 1 above row 2    */
  gap:              2px;             /* small gap between the two rows    */
  background-color: #1a1a1a;
  border:           2px solid var(--header-top);
  border-radius:    4px;
  padding:          10px 14px;
  margin-bottom:    4px;
}

/* Inner slot — block so it fills the flex column, not inline */
.item-split-flap {
  display:    block;
  line-height: 0;              /* remove any gap between inline children */
}

/* The plugin adds .splitflap to the container it builds.
   Perspective here enables the 3D card-flip animation. */
.item-split-flap .splitflap {
  display:                    inline-block;
  -webkit-perspective-origin: top center;
     -moz-perspective-origin: top center;
      -ms-perspective-origin: top center;
          perspective-origin: top center;
  -webkit-perspective:        900px;
     -moz-perspective:        900px;
      -ms-perspective:        900px;
          perspective:        900px;
}

/* Each character tile — absolutely positioned by the plugin */
.item-split-flap .splitflap .char {
  position: absolute;
}

/* Upper half tile */
.item-split-flap .splitflap .char .upper {
  position: absolute;
  top:      0;
  left:     0;
  overflow: hidden;
}

/* Lower half tile — top MUST be charHeight/2 (25px/2 = 12.5px at current scale).
   The plugin sets width/height on .lower but never sets top — we must do it here. */
.item-split-flap .splitflap .char .lower {
  position: absolute;
  top:      12.5px;    /* charHeight(25px) / 2 — positions lower half below upper */
  left:     0;
  overflow: hidden;
}

/* Flipping animation tile */
.item-split-flap .splitflap .char .flipping {
  position:                    absolute;
  overflow:                    hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Item type badge */
.item-type-badge {
  display:       inline-block;
  font-family:   var(--font-primary);
  font-size:     12px;
  padding:       4px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.item-type-badge--for_sale {
  background-color: var(--accent-green);
  color:            #fff;
}

.item-type-badge--make_offer {
  background-color: var(--link-blue);
  color:            #fff;
}

.item-type-badge--private {
  background-color: rgba(255,255,255,0.1);
  color:            var(--text-cream);
}

/* Sold badge — muted grey, item is gone but remains as museum history */
.item-type-badge--sold {
  background-color: rgba(255,255,255,0.08);
  color:            rgba(255,255,255,0.4);
}

/* Item title */
.item-title {
  font-family:  var(--ty-title-font);
  font-size:    var(--ty-title-size);
  color:        var(--text-cream);
  margin:       0;
  line-height:  1.2;
}

/* Price display */
.item-price {
  font-family: var(--ty-price-font);
  font-size:   var(--ty-price-size);
  color:       var(--text-cream);
  display:     flex;
  align-items: baseline;
  gap:         10px;
}

.item-price-original {
  text-decoration: line-through;
  opacity:         0.5;
  font-size:       16px;
}

.item-price-sale {
  color:     var(--accent-orange);
  font-size: 24px;
}

.item-price-currency {
  font-size: 13px;
  opacity:   0.6;
}

/* Action buttons */
.item-action-block {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.item-action-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  font-family:      var(--font-primary);
  font-size:        15px;
  padding:          12px 24px;
  border-radius:    6px;
  border:           none;
  cursor:           pointer;
  transition:       background-color 0.15s, opacity 0.15s;
}

.item-action-btn--primary {
  background-color: var(--accent-orange);
  color:            #fff;
}

.item-action-btn--primary:hover {
  background-color: var(--text-gold);
}

.item-action-btn--offer {
  background-color: var(--link-blue);
  color:            #fff;
}

.item-action-btn--offer:hover {
  background-color: var(--menu-link);
}

.item-action-btn:disabled {
  opacity: 0.5;
  cursor:  default;
}

/* Private collection label */
.item-private-label {
  font-family: var(--font-primary);
  font-size:   14px;
  color:       var(--text-cream);
  opacity:     0.6;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Description prose */
.item-description {
  font-family: var(--ty-desc-font);
  font-size:   var(--ty-desc-size);
  color:       var(--text-cream);
  line-height: 1.7;
  opacity:     0.9;
  white-space: pre-line;            /* respects newlines from DB text */
}

/* Custom fields — specifications table */
.item-fields {
  margin-top: 16px;
}

/* "Specifications" section heading */
.item-fields-heading {
  font-family:    var(--font-primary);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--text-gold);
  opacity:        0.8;
  margin-bottom:  8px;
  padding-bottom: 6px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.08);
}

/* Table container */
.item-fields-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-primary);
  font-size:       13px;
}

/* Alternating row backgrounds — very subtle zebra */
.item-field-row {
  background: rgba(255, 255, 255, 0.02);
}

.item-field-row--alt {
  background: rgba(255, 255, 255, 0.05);
}

/* Label column — left-aligned, dimmed, no wrap */
.item-field-label {
  color:        var(--text-cream);
  opacity:      0.55;
  white-space:  nowrap;
  padding:      5px 14px 5px 8px;
  font-weight:  normal;
  text-align:   left;
  width:        1%;    /* shrink-wrap to content */
}

/* Value column — fills remaining width */
.item-field-value {
  color:   var(--text-cream);
  opacity: 0.9;
  padding: 5px 8px;
}


/* ── Bottom section ─────────────────────────────────────────────── */

/* ── Blogette story layout ─────────────────────────────────── */

.blogette-story {
  max-width:     860px;
  margin:        0 auto;
  padding:       0 20px 40px;
}

.blogette-hero {
  width:         100%;
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow:      hidden;
}

.blogette-hero-img {
  display:    block;
  width:      100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center;
}

.blogette-header {
  margin-bottom: 1.5rem;
}

.blogette-title {
  font-family:   var(--ty-blog-title-font);
  font-size:     var(--ty-blog-title-size);
  color:         var(--text-gold);
  margin-bottom: 0.5rem;
  line-height:   1.2;
}

.blogette-categories {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* Prose — TinyMCE output, EA-styled */
.blogette-prose {
  font-family:   var(--ty-blog-prose-font);
  font-size:     var(--ty-blog-prose-size);
  line-height:   1.8;
  color:         var(--text-cream);
  margin-bottom: 2.5rem;
}

.blogette-prose h1,
.blogette-prose h2,
.blogette-prose h3 {
  color:        var(--text-gold);
  margin-top:   1.5em;
  margin-bottom: 0.5em;
}

.blogette-prose h2 { font-size: 1.4rem; }
.blogette-prose h3 { font-size: 1.2rem; }

.blogette-prose p {
  margin-bottom: 1em;
}

.blogette-prose ul,
.blogette-prose ol {
  margin:       0.5em 0 1em 1.5em;
}

.blogette-prose strong,
.blogette-prose b {
  color:       var(--text-gold);
  font-weight: 600;
}

.blogette-prose a {
  color:           var(--link-blue);
  text-decoration: underline;
}

/* Featured products grid */
.blogette-featured {
  margin-top:  3rem;
  border-top:  1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
}

.blogette-featured-label {
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         var(--text-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.blogette-tiles {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   12px;
}

.blogette-tile {
  aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
  .blogette-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .blogette-hero-img {
    max-height: 280px;
  }
}


.item-bottom-section {
  max-width:    1100px;
  margin:       0 auto;
  padding:      24px 20px 32px;
  display:      flex;
  flex-direction: column;
  gap:          14px;
  border-top:   1px solid rgba(255,255,255,0.08);
}

/* In-card variant — sits inside .item-info-card, no outer padding needed */
.item-bottom-incard {
  margin-top:   4px;
  padding:      16px 0 0;
  border-top:   1px solid rgba(95, 121, 138, 0.2);
  display:      flex;
  flex-direction: column;
  gap:          12px;
}

/* Availability row */
.item-availability-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--ty-meta-font);
  font-size:   var(--ty-meta-size);
}

.item-availability-label {
  color:   var(--text-cream);
  opacity: 0.5;
}

/* Colour-coded availability values */
.item-availability--available {
  color: var(--accent-green);
}

.item-availability--make_offer {
  color: var(--link-blue);   /* distinct from for_sale green — matches offer UI */
}

.item-availability--sold {
  color:   var(--text-cream);
  opacity: 0.45;
}

.item-availability--private {
  color: var(--link-blue);
}

/* Category links row */
.item-categories-row {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px 8px;
  font-family: var(--ty-meta-font);
  font-size:   var(--ty-meta-size);
}

.item-categories-label {
  color:   var(--text-cream);
  opacity: 0.5;
}

.item-category-link {
  color:            var(--link-blue);
  text-decoration:  none;
  transition:       color 0.15s;
}

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

/* Comma separator between category links (CSS-only, no extra markup) */
.item-category-link + .item-category-link::before {
  content: ', ';
  color:   var(--text-cream);
  opacity: 0.4;
}

/* Tags row */
.item-tags-row {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px 8px;
  font-family: var(--ty-meta-font);
  font-size:   var(--ty-meta-size);
}

.item-tags-label {
  color:   var(--text-cream);
  opacity: 0.5;
}

/* Tag pill */
.item-tag-pill {
  display:          inline-block;
  background-color: rgba(255,255,255,0.07);
  color:            var(--text-cream);
  text-decoration:  none;
  font-family:      var(--ty-meta-font);
  font-size:        var(--ty-meta-size);
  padding:          4px 10px;
  border-radius:    12px;
  transition:       background-color 0.15s, color 0.15s;
}

.item-tag-pill:hover {
  background-color: var(--accent-orange);
  color:            #fff;
}

/* Social share row */
.item-share-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.item-share-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            34px;
  height:           34px;
  border-radius:    4px;
  text-decoration:  none;
  font-size:        14px;
  transition:       opacity 0.15s;
  opacity:          0.85;
}

.item-share-btn:hover {
  opacity: 1;
}

.item-share-btn--facebook {
  background-color: #1877F2;
  color:            #fff;
}

.item-share-btn--x {
  background-color: #000;
  color:            #fff;
}

.item-share-btn--email {
  background-color: var(--header-top);
  color:            #fff;
}


/* ── Jump row ───────────────────────────────────────────────────── */
/* Populated asynchronously by fetchLinkRow() after page render.
   Items are randomised server-side — each product in a category
   shows a different arrangement from the same link row. */

.item-jump-row {
  max-width:   1100px;
  margin:      0 auto;
  padding:     16px 20px 48px;
}

/* Empty state — invisible until tiles arrive */
.item-jump-row:empty {
  display: none;
}

.item-jump-row-heading {
  font-family:  var(--font-primary);
  font-size:    18px;
  color:        var(--text-cream);
  opacity:      0.7;
  margin:       0 0 16px;
  font-weight:  normal;
}

/* Horizontal tile strip — flex row, wraps on narrow viewports */
.item-jump-row-strip {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

/* Individual jump tile */
.item-jump-tile {
  display:          flex;
  flex-direction:   column;
  width:            140px;
  text-decoration:  none;
  border-radius:    6px;
  overflow:         hidden;
  background-color: var(--bg-container);
  transition:       transform 0.15s, box-shadow 0.15s;
}

.item-jump-tile:hover {
  transform:  translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Tile image */
.item-jump-tile-img {
  width:      140px;
  height:     120px;
  object-fit: cover;
  display:    block;
}

/* Text placeholder used when no image is available (category tiles etc.) */
.item-jump-tile-placeholder {
  width:            140px;
  height:           120px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  padding:          8px;
  font-family:      var(--font-primary);
  font-size:        12px;
  color:            var(--text-cream);
  opacity:          0.5;
  background-color: rgba(255,255,255,0.04);
}

/* Tile label */
.item-jump-tile-label {
  padding:     8px 8px 10px;
  font-family: var(--font-primary);
  font-size:   12px;
  color:       var(--text-cream);
  opacity:     0.8;
  line-height: 1.3;

  /* Clamp to 2 lines max */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}


/* ── Inline offer form (in the action block, beside the image) ── */

/* Outer zone — holds .item-offer-buttons and .item-offer-form.
 * Only one child is visible at a time; they share the same
 * column space so the image stays in view throughout. */
.item-offer-zone {
  display:        flex;
  flex-direction: column;
}

/* Buttons container inside the zone — flex so Add to Bag and
 * Make an Offer stack the same way they did in .item-action-block */
.item-offer-buttons {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* Inline form — hidden by default, shown via JS when Make an Offer
 * is clicked. Inherits the right column width naturally. */
.item-offer-form {
  display:        none;           /* JS sets to block on open */
  flex-direction: column;
  gap:            14px;
}

/* Heading row — title left, Cancel link right */
.item-offer-form-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   4px;
}

.item-offer-form-title {
  font-family:  var(--font-primary);
  font-size:    18px;
  color:        var(--text-cream);
  font-weight:  normal;
  margin:       0;
}

/* Cancel — styled as a subtle text link, not a full button */
.item-offer-form-cancel {
  background:  none;
  border:      none;
  color:       var(--text-cream);
  opacity:     0.5;
  font-family: var(--font-primary);
  font-size:   13px;
  cursor:      pointer;
  padding:     0;
  transition:  opacity 0.15s;
}
.item-offer-form-cancel:hover {
  opacity: 1;
  color:   var(--accent-orange);
}

/* Inner form fields wrapper */
.item-offer-form-inner {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* ── Legacy offer-form-section (kept for any future standalone use) ── */

.offer-form-section {
  max-width:  1100px;
  margin:     0 auto;
  padding:    32px 20px 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.offer-form-heading {
  font-family:  var(--font-primary);
  font-size:    22px;
  color:        var(--text-cream);
  margin:       0 0 24px;
  font-weight:  normal;
}

.offer-form {
  max-width:      480px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.form-label {
  font-family: var(--font-primary);
  font-size:   14px;
  color:       var(--text-cream);
  opacity:     0.75;
}

.form-input,
.form-textarea {
  background-color: var(--bg-container);
  border:           1px solid rgba(255,255,255,0.15);
  border-radius:    4px;
  color:            var(--text-cream);
  font-family:      var(--font-primary);
  font-size:        14px;
  padding:          10px 12px;
  transition:       border-color 0.15s;
  resize:           vertical;
}

.form-input:focus,
.form-textarea:focus {
  outline:      none;
  border-color: var(--link-blue);
}

/* Hide the up/down spinner arrows on number inputs — cleaner look */
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
}

/* Remove browser default spinner arrows from number inputs —
 * they clash with the design and are not needed in our forms. */
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
}

.form-message {
  font-family:  var(--font-primary);
  font-size:    13px;
  padding:      10px 12px;
  border-radius: 4px;
}

.form-message--success {
  background-color: rgba(31,127,0,0.25);
  color:            var(--accent-green);
}

.form-message--error {
  background-color: rgba(244,112,22,0.2);
  color:            var(--accent-orange);
}


/* ── Lightbox ───────────────────────────────────────────────────── */
/* Full-screen overlay for large image viewing. Keyboard navigable.
   Triggered by clicking the primary product image. */

/* ═══════════════════════════════════════════════════════════
   GUIDED TOUR
   Styled after .item-tile-reveal — same dark slate bg, cream
   text, gold accents, handwritten font. Feels native to EA.
   ═══════════════════════════════════════════════════════════ */

/* ── Full-screen tour overlay ────────────────────────────── */

.tour-overlay {
  position:       fixed;
  inset:          0;
  z-index:        600;       /* above lightbox (500) and ShiftNav (400) */
  pointer-events: none;      /* overlay itself doesn't block clicks */
}

/* tour-active on body: prevent scrolling while tour is running */
body.tour-active {
  overflow: hidden;
}

/* ── SVG spotlight layer ─────────────────────────────────── */

.tour-svg {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
}

/* ── Tooltip card ─────────────────────────────────────────── */
/*
 * Styled after .item-tile-reveal:
 *   - rgba(20, 26, 30, 0.95) dark slate background
 *   - var(--text-cream) body text
 *   - var(--text-gold) accents
 *   - var(--font-primary) handwritten font throughout
 *
 * Fixed-position, placed by JS. pointer-events: all so buttons work.
 */

#tour-card {
  position:         fixed;     /* JS sets left/top */
  width:            320px;
  max-width:        calc(100vw - 24px);
  background-color: rgba(20, 26, 30, 0.95);
  border:           1px solid rgba(246, 174, 45, 0.25);   /* faint gold rim */
  border-radius:    8px;
  padding:          18px 20px 16px;
  box-shadow:       0 8px 32px rgba(0, 0, 0, 0.7);
  pointer-events:   all;        /* card is interactive */
  display:          flex;
  flex-direction:   column;
  gap:              12px;
  z-index:          601;
}

/* ── Progress bar ──────────────────────────────────────────── */

.tour-progress-wrap {
  width:            100%;
  height:           4px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius:    2px;
  overflow:         hidden;
}

.tour-progress-bar {
  height:           100%;
  background-color: var(--accent-orange);
  border-radius:    2px;
  transition:       width 0.3s ease;
  width:            0%;
}

/* ── Card content ─────────────────────────────────────────── */

.tour-content {
  flex: 1;
}

.tour-title {
  font-family:   var(--font-primary);
  font-size:     15px;
  color:         var(--text-gold);
  margin-bottom: 8px;
  line-height:   1.35;
}

.tour-lines {
  margin:      0;
  padding:     0 0 0 18px;
  list-style:  disc;
}

.tour-lines li {
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         var(--text-cream);
  line-height:   1.5;
  margin-bottom: 6px;
  opacity:       0.92;
}

.tour-lines li:last-child {
  margin-bottom: 0;
}

/* ── Button row ───────────────────────────────────────────── */

.tour-btn-row {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-wrap:   wrap;
}

/* Shared button base */
.tour-btn {
  font-family:   var(--font-primary);
  font-size:     13px;
  border-radius: 4px;
  padding:       7px 16px;
  cursor:        pointer;
  transition:    background-color 0.15s, color 0.15s, border-color 0.15s;
  white-space:   nowrap;
}

/* Exit — outlined, subdued */
.tour-btn--exit {
  background:   transparent;
  border:       1px solid rgba(255, 255, 255, 0.25);
  color:        var(--text-cream);
  opacity:      0.7;
}
.tour-btn--exit:hover {
  border-color: var(--text-gold);
  color:        var(--text-gold);
  opacity:      1;
}

/* Back — outlined teal */
.tour-btn--back {
  background:   transparent;
  border:       1px solid var(--link-blue);
  color:        var(--link-blue);
}
.tour-btn--back:hover {
  background:   var(--link-blue);
  color:        #fff;
}

/* Next / Done — filled orange (matches reveal-btn-primary) */
.tour-btn--next {
  background-color: var(--accent-orange);
  border:           1px solid transparent;
  color:            #fff;
  margin-left:      auto;   /* push to right edge */
}
.tour-btn--next:hover {
  background-color: var(--text-gold);
}

/* ── Lit clone of target element ──────────────────────────── */
/*
 * A pixel-perfect copy of the spotlit element rendered above the
 * dim layer so it's always fully visible regardless of overlay opacity.
 * pointer-events: none so clicks pass through to the real element.
 *
 * The clone wrapper is positioned exactly over the original via JS.
 * overflow:visible lets cloned children (icons, badges) show outside
 * their natural bounds if needed.
 * We do NOT force width/height on child elements — the clone must
 * inherit the original's computed layout naturally.
 */

.tour-clone {
  position:        fixed;
  z-index:         603;        /* above ring (602) and overlay (601) */
  pointer-events:  none;
  overflow:        visible;
  display:         none;       /* shown by positionSpotlight() */
}


/*
 * A gold pulsing ring rendered as a box-shadow on a pseudo-overlay
 * div injected by JS over the target element.
 */

.tour-spotlight-ring {
  position:      fixed;
  pointer-events: none;
  border-radius:  8px;
  box-shadow:     0 0 0 3px var(--text-gold),
                  0 0 0 6px rgba(246, 174, 45, 0.25);
  z-index:        602;
  animation:      tour-pulse 1.8s ease-in-out infinite;
}

@keyframes tour-pulse {
  0%,  100% { box-shadow: 0 0 0 3px var(--text-gold), 0 0 0 6px rgba(246,174,45,0.25); }
  50%       { box-shadow: 0 0 0 3px var(--text-gold), 0 0 0 12px rgba(246,174,45,0.12); }
}

/* ── Mobile adjustments ───────────────────────────────────── */

@media (max-width: 480px) {
  #tour-card {
    width:   calc(100vw - 24px);
    padding: 14px 14px 12px;
  }
}


.lightbox-overlay {
  position:         fixed;
  inset:            0;
  background-color: rgba(0,0,0,0.92);
  z-index:          500;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          20px;
  animation:        lightbox-fade-in 0.15s ease;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* Inner container — sized to fit the image */
.lightbox-box {
  position:  relative;
  display:   flex;
  align-items: center;
  gap:       12px;
  max-width: 90vw;
  max-height: 90vh;
}

/* The large image */
.lightbox-img {
  max-width:   80vw;
  max-height:  85vh;
  object-fit:  contain;
  border-radius: 4px;
  display:     block;
  box-shadow:  0 8px 40px rgba(0,0,0,0.8);
}

/* Close button — top-right corner of the overlay */
.lightbox-close {
  position:         absolute;
  top:              -44px;
  right:            0;
  background:       none;
  border:           none;
  color:            var(--text-cream);
  font-size:        22px;
  cursor:           pointer;
  opacity:          0.7;
  padding:          8px;
  transition:       opacity 0.15s;
}

.lightbox-close:hover {
  opacity: 1;
}

/* Prev/Next navigation arrows */
.lightbox-arrow {
  background:       rgba(255,255,255,0.1);
  border:           none;
  border-radius:    50%;
  color:            var(--text-cream);
  font-size:        18px;
  width:            44px;
  height:           44px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  flex-shrink:      0;
  opacity:          0.7;
  transition:       opacity 0.15s, background-color 0.15s;
}

.lightbox-arrow:hover {
  opacity:          1;
  background-color: rgba(255,255,255,0.2);
}

.lightbox-arrow:disabled {
  opacity: 0.2;
  cursor:  default;
}

/* Image counter label (1 / 4) */
.lightbox-counter {
  position:    absolute;
  bottom:      -32px;
  left:        50%;
  transform:   translateX(-50%);
  font-family: var(--font-primary);
  font-size:   13px;
  color:       var(--text-cream);
  opacity:     0.5;
}


/* ── Not found ──────────────────────────────────────────────────── */

.item-not-found {
  text-align:  center;
  padding:     80px 20px;
  font-family: var(--font-primary);
  color:       var(--text-cream);
  opacity:     0.5;
}

.item-not-found i {
  font-size:     48px;
  display:       block;
  margin-bottom: 16px;
}

.item-not-found p {
  font-size:     18px;
  margin-bottom: 20px;
}

.item-not-found-link {
  color:           var(--link-blue);
  text-decoration: none;
  font-size:       15px;
}

.item-not-found-link:hover {
  color: var(--text-gold);
}

/* ============================================================
   Compare & Wishlist drawers
   Both fly in as fixed overlays — no page shift.
   Compare slides in from the LEFT, wishlist from the RIGHT.
   Triggered only by their respective nav icon buttons.

   Structure (same for both):
     .ea-drawer                — fixed full-screen container (pointer-events:none when closed)
     .ea-drawer-overlay        — dim backdrop, fades in
     .ea-drawer-panel          — the visible sliding panel
       .ea-drawer-bg           — random background image, blurred + darkened
       .ea-drawer-header       — title, count, close + clear buttons
       .ea-drawer-body         — scrollable item list
         .ea-drawer-item       — one product card
         .ea-drawer-empty      — empty state message
   ============================================================ */

/* ── Shared drawer shell ────────────────────────────────────── */

.ea-drawer {
  position:       fixed;
  inset:          0;
  z-index:        300;          /* above ShiftNav (200) and page-loading (9999 only at load) */
  pointer-events: none;         /* inactive when closed — clicks pass through */
}

.ea-drawer.open {
  pointer-events: all;
}

/* Dim backdrop — same pattern as ShiftNav overlay */
.ea-drawer-overlay {
  position:         fixed;
  inset:            0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity:          0;
  transition:       opacity 0.3s ease;
  cursor:           pointer;    /* clicking backdrop closes the drawer */
}

.ea-drawer.open .ea-drawer-overlay {
  opacity: 1;
}

/* ── Panel shell ────────────────────────────────────────────── */

.ea-drawer-panel {
  position:        fixed;
  top:             0;
  bottom:          0;
  width:           420px;
  max-width:       92vw;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  transition:      transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:      0 0 40px rgba(0, 0, 0, 0.6);
}

/* Compare panel is wider — side-by-side column layout needs room.
   calc(100vw - 180px) leaves the right nav icons visible and clickable
   while filling nearly the full screen width on any screen size. */
#compare-drawer .ea-drawer-panel {
  width:     calc(100vw - 180px);
  left:      0;
  transform: translateX(-100%);
}

#compare-drawer.open .ea-drawer-panel {
  transform: translateX(0);
}

/* Wishlist — slides in from right, standard width */
#wishlist-drawer .ea-drawer-panel {
  right:     0;
  transform: translateX(100%);
}

#wishlist-drawer.open .ea-drawer-panel {
  transform: translateX(0);
}

/* ── Random background image ────────────────────────────────── */
/* Sits behind all panel content. JS sets background-image inline. */

.ea-drawer-bg {
  position:   absolute;
  inset:      0;
  background-size:     cover;
  background-position: center;
  filter:     blur(3px) brightness(0.70);  /* bright — collection images shine through */
  transform:  scale(1.05);                 /* hide blur edges */
  z-index:    0;
}

/* Light mask — just enough to keep text readable */
.ea-drawer-panel::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background-color: rgba(0, 0, 0, 0.15);
  z-index:          0;
  pointer-events:   none;
}

/* Fallback solid colour if no image loaded yet */
#compare-drawer  .ea-drawer-bg { background-color: var(--bg-container); }
#wishlist-drawer .ea-drawer-bg { background-color: var(--bg-container); }

/* ── Header ─────────────────────────────────────────────────── */

.ea-drawer-header {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 16px 12px;
  background:      rgba(0, 0, 0, 0.55);
  border-bottom:   1px solid rgba(255, 255, 255, 0.08);
  flex-shrink:     0;
}

.ea-drawer-title {
  flex:        1;
  font-size:   18px;
  color:       var(--text-gold);
  font-family: var(--font-primary);
  margin:      0;
}

.ea-drawer-count {
  font-size:   12px;
  color:       var(--text-cream);
  opacity:     0.7;
  white-space: nowrap;
}

/* Clear All / header action button */
.ea-drawer-clear {
  background:    none;
  border:        1px solid rgba(255,255,255,0.2);
  color:         var(--text-cream);
  font-size:     11px;
  font-family:   var(--font-primary);
  padding:       3px 8px;
  border-radius: 3px;
  cursor:        pointer;
  opacity:       0.7;
  transition:    opacity 0.15s, color 0.15s;
  white-space:   nowrap;
}

.ea-drawer-clear:hover {
  opacity: 1;
  color:   var(--accent-orange);
  border-color: var(--accent-orange);
}

/* Close button */
.ea-drawer-close {
  background:  none;
  border:      none;
  color:       var(--text-cream);
  font-size:   20px;
  cursor:      pointer;
  padding:     2px 4px;
  line-height: 1;
  opacity:     0.7;
  transition:  opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.ea-drawer-close:hover {
  opacity: 1;
  color:   var(--text-gold);
}

/* ── Scrollable body ─────────────────────────────────────────── */

.ea-drawer-body {
  position:   relative;
  z-index:    1;
  flex:       1;
  overflow-y: auto;
  padding:    12px;
  display:    flex;
  flex-direction: column;
  gap:        10px;

  /* Thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.ea-drawer-body::-webkit-scrollbar       { width: 4px; }
.ea-drawer-body::-webkit-scrollbar-track { background: transparent; }
.ea-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── Empty state ─────────────────────────────────────────────── */

.ea-drawer-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         40px 24px;
  color:           var(--text-cream);
  opacity:         0.75;
  gap:             14px;
  flex:            1;
}

.ea-drawer-empty i {
  font-size: 40px;
  color:     var(--text-gold);
  opacity:   0.6;
}

.ea-drawer-empty-title {
  font-size:   18px;
  font-family: var(--font-primary);
  color:       var(--text-gold);
}

.ea-drawer-empty-text {
  font-size:   13px;
  line-height: 1.6;
  max-width:   240px;
}

/* ── Item card ───────────────────────────────────────────────── */

.ea-drawer-item {
  display:          flex;
  gap:              10px;
  background:       rgba(0, 0, 0, 0.45);
  border:           1px solid rgba(255, 255, 255, 0.07);
  border-radius:    6px;
  padding:          10px;
  transition:       border-color 0.15s;
}

.ea-drawer-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Thumbnail */
.ea-drawer-item-thumb {
  width:         72px;
  height:        72px;
  object-fit:    contain;
  border-radius: 4px;
  flex-shrink:   0;
  background:    rgba(0,0,0,0.3);
  cursor:        pointer;
}

.ea-drawer-item-thumb:hover {
  opacity: 0.85;
}

/* Right side content */
.ea-drawer-item-content {
  flex:           1;
  min-width:      0;           /* allows text truncation inside flex */
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.ea-drawer-item-title {
  font-size:     15px;
  font-family:   var(--font-primary);
  color:         var(--text-gold);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  cursor:        pointer;
  text-decoration: none;
}

.ea-drawer-item-title:hover {
  color: var(--text-cream);
}

/* Item type badge — reuses item page pattern */
.ea-drawer-item-badge {
  display:       inline-block;
  font-size:     9px;
  padding:       1px 5px;
  border-radius: 2px;
  font-family:   var(--font-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self:    flex-start;
}

.ea-drawer-item-badge--for_sale   { background: rgba(31,127,0,0.35);  color: #7dda58; }
.ea-drawer-item-badge--make_offer { background: rgba(244,110,22,0.3); color: #f6ae2d; }
.ea-drawer-item-badge--private    { background: rgba(78,121,140,0.3); color: #86bbd8; }
.ea-drawer-item-badge--sold       { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); }

/* Price */
.ea-drawer-item-price {
  font-size:   13px;
  font-family: var(--font-price);    /* legible numerals — Arial */
  color:       var(--text-cream);
}

.ea-drawer-item-price-original {
  text-decoration: line-through;
  opacity:         0.5;
  margin-right:    4px;
}

.ea-drawer-item-price-sale {
  color: #7dda58;
}

/* Offer negotiated price — amber to distinguish from regular sale */
.ea-drawer-item-price-offer {
  color:        #c8860a;
  font-weight:  600;
  margin-right: 3px;
}

/* Small label after the offer price */
.ea-drawer-item-offer-label {
  font-size:  11px;
  color:      #c8860a;
  opacity:    0.75;
  font-style: italic;
}

/* Truncated description */
.ea-drawer-item-desc {
  font-size:     13px;
  color:         var(--text-cream);
  opacity:       0.8;
  line-height:   1.5;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

/* Custom fields — shown as compact key:value pairs */
.ea-drawer-item-fields {
  display:   flex;
  flex-wrap: wrap;
  gap:       3px 8px;
  margin-top: 2px;
}

.ea-drawer-item-field {
  font-size: 11px;
  color:     var(--text-cream);
  opacity:   0.7;
}

.ea-drawer-item-field strong {
  color:   var(--menu-link);
  opacity: 1;
}

/* Action buttons row */
.ea-drawer-item-actions {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ea-drawer-item-btn {
  background:    none;
  border:        1px solid rgba(255,255,255,0.2);
  color:         var(--text-cream);
  font-size:     10px;
  font-family:   var(--font-primary);
  padding:       3px 8px;
  border-radius: 3px;
  cursor:        pointer;
  transition:    all 0.15s;
  white-space:   nowrap;
}

.ea-drawer-item-btn:hover {
  background:   rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
  color:        var(--text-gold);
}

/* Primary action (Add to Bag / Make an Offer) */
.ea-drawer-item-btn--primary {
  background:   rgba(31,127,0,0.25);
  border-color: rgba(31,127,0,0.5);
  color:        #7dda58;
}

.ea-drawer-item-btn--primary:hover {
  background:   rgba(31,127,0,0.4);
  border-color: #7dda58;
  color:        #7dda58;
}

/* Offer button */
.ea-drawer-item-btn--offer {
  background:   rgba(244,174,45,0.15);
  border-color: rgba(244,174,45,0.4);
  color:        var(--text-gold);
}

.ea-drawer-item-btn--offer:hover {
  background:   rgba(244,174,45,0.25);
  border-color: var(--text-gold);
}

/* Remove button */
.ea-drawer-item-btn--remove {
  color:        rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.1);
}

.ea-drawer-item-btn--remove:hover {
  color:        #e05c5c;
  border-color: #e05c5c;
  background:   rgba(224,92,92,0.1);
}

/* Move to compare (wishlist panel only) */
.ea-drawer-item-btn--move {
  color:        var(--menu-link);
  border-color: rgba(134,187,216,0.3);
}

.ea-drawer-item-btn--move:hover {
  background:   rgba(134,187,216,0.1);
  border-color: var(--menu-link);
}

/* ── Responsive — full width on small screens ───────────────── */

@media (max-width: 480px) {
  .ea-drawer-panel,
  #compare-drawer .ea-drawer-panel {
    width:     100vw;
    max-width: 100vw;
  }
}

/* ============================================================
   Compare panel — side-by-side table layout
   The compare body uses a horizontal scroll container so items
   are shown in columns. On small screens the table scrolls
   horizontally rather than wrapping or squishing.
   ============================================================ */

/* Override the default flex column body for compare */
#compare-drawer .ea-drawer-body {
  overflow-x: auto;   /* horizontal scroll on small screens */
  overflow-y: auto;
  padding:    0;      /* table manages its own padding */
  display:    block;  /* override flex column — table handles layout */

  /* Horizontal scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#compare-drawer .ea-drawer-body::-webkit-scrollbar        { height: 4px; width: 4px; }
#compare-drawer .ea-drawer-body::-webkit-scrollbar-track  { background: transparent; }
#compare-drawer .ea-drawer-body::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Table container — min-width forces scroll on small screens */
.compare-table {
  display:   flex;
  flex-direction: row;
  gap:       0;
  min-width: max-content;   /* prevents columns from wrapping */
  padding:   12px;
  gap:       10px;
}

/* Each item is a column */
.compare-col {
  display:        flex;
  flex-direction: column;
  width:          320px;
  flex-shrink:    0;
  background:     rgba(0, 0, 0, 0.4);
  border:         1px solid rgba(255, 255, 255, 0.07);
  border-radius:  6px;
  overflow:       hidden;
}

/* Image at the top of each column */
.compare-col-img {
  width:      100%;
  height:     220px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
  cursor:     pointer;
  display:    block;
  flex-shrink: 0;
}

.compare-col-img:hover {
  opacity: 0.85;
}

/* Content area below the image */
.compare-col-content {
  padding:        10px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
}

/* Title — clickable, truncated to 2 lines */
.compare-col-title {
  font-size:           14px;
  font-family:         var(--font-primary);
  color:               var(--text-gold);
  text-decoration:     none;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  line-height:         1.4;
}

.compare-col-title:hover {
  color: var(--text-cream);
}

/* Divider rows between attribute groups */
.compare-col-divider {
  height:           1px;
  background-color: rgba(255,255,255,0.07);
  margin:           2px 0;
}

/* Each attribute row */
.compare-col-row {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.compare-col-label {
  font-size:  10px;
  color:      var(--menu-link);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity:    0.8;
}

.compare-col-value {
  font-size:  13px;
  color:      var(--text-cream);
  line-height: 1.4;
}

/* Description — clamped to 3 lines */
.compare-col-desc {
  font-family:         var(--ty-desc-font);   /* respects admin description font setting */
  font-size:           var(--ty-desc-size);   /* respects admin description size setting */
  color:               var(--text-cream);
  opacity:             0.8;
  line-height:         1.5;
  display:             -webkit-box;
  -webkit-line-clamp:  3;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

/* Field values in compact pairs */
.compare-col-fields {
  display:   flex;
  flex-wrap: wrap;
  gap:       3px 8px;
}

.compare-col-field {
  font-size: 11px;
  color:     var(--text-cream);
  opacity:   0.7;
}

.compare-col-field strong {
  color:   var(--menu-link);
  opacity: 1;
}

/* Action buttons at the bottom of each column */
.compare-col-actions {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        8px 10px 10px;
  margin-top:     auto;   /* push to bottom of column */
  border-top:     1px solid rgba(255,255,255,0.06);
}

/* =============================================================
   Cart (Bag) drawer — flies up from BOTTOM, centred
   Desktop: ~33vw wide. Mobile: full width.
   ============================================================= */

/* ── Cart panel positioning — bottom fly-up ─────────────────── */
/* The base .ea-drawer is fixed full-viewport, pointer-events:none.
   The panel inside slides up from below the fold.               */

#cart-drawer .ea-drawer-panel {
  /* Centred horizontally */
  left:      50%;
  transform: translateX(-50%) translateY(100%);  /* off-screen below */

  /* 1/3 of site width on desktop, full on mobile */
  width:     33.333vw;
  min-width: 320px;
  max-width: 520px;

  /* Rises from the bottom — attached to bottom edge */
  top:       auto;
  bottom:    0;
  height:    auto;
  max-height: 80vh;
}

#cart-drawer.open .ea-drawer-panel {
  /* Slide into view */
  transform: translateX(-50%) translateY(0);
}

/* Background tint for cart — matches wishlist/compare fallback colour */
#cart-drawer .ea-drawer-bg {
  background-color: var(--bg-container);
}

/* Add breathing room inside the panel — 12px all around */
#cart-drawer .ea-drawer-panel {
  padding-bottom: 0;   /* subtotal bar sits flush at the bottom */
}

/* Body padding and gap between cards matches the 12px brief */
#cart-drawer .ea-drawer-body {
  padding: 12px;
  gap:     12px;
}

/* Cart panel overlay — lighter than default so it doesn't feel like a void */
#cart-drawer .ea-drawer-panel::after {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Cart item cards — slightly lighter background than the default 0.45 */
#cart-drawer .ea-drawer-item {
  background: rgba(255, 255, 255, 0.06);
  padding:    12px;
}

/* ── Cart quantity controls ──────────────────────────────────── */
/* Only shown when stock > 1. Inline +/- with qty display.       */

.cart-qty-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  4px;
}

.cart-qty-btn {
  background:    rgba(255,255,255,0.08);
  border:        1px solid rgba(255,255,255,0.2);
  color:         var(--text-cream);
  width:         24px;
  height:        24px;
  border-radius: 3px;
  font-size:     14px;
  line-height:   1;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.15s, opacity 0.15s;
}

.cart-qty-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.18);
}

.cart-qty-btn:disabled {
  opacity: 0.3;
  cursor:  not-allowed;
}

.cart-qty-display {
  font-size:  14px;
  font-family: var(--font-primary);
  color:      var(--text-gold);
  min-width:  20px;
  text-align: center;
}

/* ── Subtotal bar ────────────────────────────────────────────── */
/* Fixed at the bottom of the panel, above the viewport edge.
   Shows only when the cart has priced items.                    */

.cart-subtotal {
  position:   relative;
  z-index:    2;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding:    14px 16px 16px;
  display:    flex;
  flex-direction: column;
  gap:        10px;
}

.cart-subtotal-label {
  font-size:   11px;
  font-family: var(--font-primary);
  color:       var(--text-cream);
  opacity:     0.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-subtotal-amount {
  font-size:   22px;
  font-family: var(--font-primary);
  color:       var(--text-gold);
  line-height: 1;
}

/* Checkout CTA button */
.cart-checkout-btn {
  display:         block;
  text-align:      center;
  background:      var(--accent-green);
  color:           #fff;
  font-family:     var(--font-primary);
  font-size:       14px;
  padding:         10px 16px;
  border-radius:   4px;
  text-decoration: none;
  transition:      background 0.15s, opacity 0.15s;
  letter-spacing:  0.03em;
}

.cart-checkout-btn:hover {
  background: #27a300;
  color:      #fff;
}

/* "Continue Shopping" is a ghost link styled like a small button */
.cart-continue-btn {
  background:    none;
  border:        1px solid rgba(255,255,255,0.15);
  color:         var(--text-cream);
  font-family:   var(--font-primary);
  font-size:     12px;
  padding:       6px 12px;
  border-radius: 3px;
  cursor:        pointer;
  text-align:    center;
  transition:    border-color 0.15s, color 0.15s;
}

.cart-continue-btn:hover {
  border-color: rgba(255,255,255,0.4);
  color:        var(--text-gold);
}

/* ── Mobile — full width at ≤600px ──────────────────────────── */

@media (max-width: 600px) {
  #cart-drawer .ea-drawer-panel {
    width:     100%;
    min-width: 0;
    max-width: none;
    left:      0;
    /* On mobile reset the X translate — only Y slide needed */
    transform: translateY(100%);
  }

  #cart-drawer.open .ea-drawer-panel {
    transform: translateY(0);
  }
}


/* ================================================================
   Account page — /account and /account/orders
   ================================================================ */

/* ── Page wrapper — centred column ─────────────────────────── */

#account-page {
  display:         flex;
  justify-content: center;
  padding:         3rem 1rem 4rem;
  min-height:      60vh;
}

/* ── Card container ─────────────────────────────────────────── */

.account-card {
  background:    rgba(20, 24, 36, 0.82);   /* dark, semi-opaque — readable over any bg image */
  backdrop-filter: blur(6px);              /* subtle blur to lift card off busy backgrounds */
  -webkit-backdrop-filter: blur(6px);
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding:       2.5rem 2rem;
  width:         100%;
  max-width:     460px;
}

/* Wider variant for order history — more room for item rows */
.account-card--wide {
  max-width: 680px;
}

/* ── Page heading ───────────────────────────────────────────── */

.account-heading {
  font-family:   var(--font-primary);
  font-size:     1.6rem;
  color:         var(--text-cream);
  margin:        0 0 1.4rem;
  font-weight:   normal;
}

/* ── Tab switcher ───────────────────────────────────────────── */

.account-tabs {
  display:       flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.6rem;
  gap:           0;
}

.account-tab {
  background:    none;
  border:        none;
  border-bottom: 2px solid transparent;
  color:         rgba(255, 255, 255, 0.45);
  cursor:        pointer;
  font-family:   var(--font-primary);
  font-size:     0.95rem;
  margin-bottom: -1px;   /* overlap the tab row border */
  padding:       0.5rem 1.1rem 0.6rem;
  transition:    color 0.15s, border-color 0.15s;
}

.account-tab:hover {
  color: var(--text-cream);
}

.account-tab.active {
  border-bottom-color: var(--text-gold);
  color:               var(--text-cream);
}

/* ── Message banner (error / success) ──────────────────────── */

.account-msg {
  font-size:    0.875rem;
  margin:       0 0 1rem;
  min-height:   1.2em;   /* reserve space so form doesn't jump */
  padding:      0;
}

.account-msg--error {
  color: #e07070;
}

.account-msg--success {
  color: var(--accent-green, #8bc34a);
}

/* ── Form groups ────────────────────────────────────────────── */

.account-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.account-panel.hidden {
  display: none;
}

.account-form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.account-label {
  color:       var(--text-cream);
  font-family: var(--font-primary);
  font-size:   0.875rem;
  opacity:     0.75;
}

.account-optional {
  opacity: 0.5;
  font-size: 0.8em;
}

.account-input {
  background:    rgba(10, 13, 24, 0.70);   /* darker fill — stands out against the card */
  border:        1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color:         var(--text-cream);
  font-family:   var(--font-primary);
  font-size:     0.95rem;
  padding:       0.55rem 0.75rem;
  transition:    border-color 0.15s;
  width:         100%;
  box-sizing:    border-box;
}

.account-input::placeholder {
  color:   rgba(255, 255, 255, 0.2);
}

.account-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  outline:      none;
}

/* ── Submit button ──────────────────────────────────────────── */

.account-btn {
  background:    rgba(255, 255, 255, 0.1);
  border:        1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color:         var(--text-cream);
  cursor:        pointer;
  font-family:   var(--font-primary);
  font-size:     1rem;
  margin-top:    0.5rem;
  padding:       0.65rem 1.5rem;
  text-decoration: none;
  display:       inline-block;
  text-align:    center;
  transition:    background 0.15s, border-color 0.15s;
}

.account-btn:hover:not(:disabled) {
  background:    rgba(255, 255, 255, 0.16);
  border-color:  rgba(255, 255, 255, 0.35);
}

.account-btn:disabled {
  cursor:  not-allowed;
  opacity: 0.5;
}

.account-btn--outline {
  background: none;
  border:     1px solid rgba(255, 255, 255, 0.25);
}

/* Ghost variant for secondary actions (sign out) */
.account-btn--ghost {
  background:   none;
  border-color: rgba(255, 255, 255, 0.12);
  color:        rgba(255, 255, 255, 0.45);
  font-size:    0.875rem;
  padding:      0.4rem 1rem;
  margin-top:   0;
}

.account-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color:        var(--text-cream);
}

/* ── Privacy note ───────────────────────────────────────────── */

.account-privacy-note {
  color:      rgba(255, 255, 255, 0.35);
  font-size:  0.78rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* ── Loading / error states ─────────────────────────────────── */

.account-loading,
.account-error {
  color:     rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  padding:   1rem 0;
}

.account-error {
  color: #e07070;
}

/* ── Order history ──────────────────────────────────────────── */

.account-orders-header {
  margin-bottom: 1.8rem;
}

.account-greeting {
  color:     rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin:    0.25rem 0 0;
}

/* Single order card */
.account-order-card {
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  padding:     1.2rem 0;
}

.account-order-card:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Order header row: date + status badge */
.account-order-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.8rem;
  gap:             1rem;
}

.account-order-date {
  color:     rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

/* Status badge */
.account-order-status {
  border-radius: 3px;
  font-size:     0.75rem;
  font-family:   var(--font-primary);
  padding:       0.2rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-order-status--paid      { background: rgba(139, 195, 74,  0.2); color: #a8d97a; }
.account-order-status--shipped   { background: rgba(33,  150, 243, 0.2); color: #90caf9; }
.account-order-status--complete  { background: rgba(76,  175, 80,  0.2); color: #a5d6a7; }
.account-order-status--cancelled { background: rgba(244, 67,  54,  0.2); color: #ef9a9a; }

/* Line item row */
.account-order-item {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.3rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.04);
  gap:             1rem;
}

.account-order-item:last-child {
  border-bottom: none;
}

.account-item-title {
  color:     var(--text-cream);
  font-size: 0.9rem;
  flex:      1;
}

.account-item-link {
  color: var(--text-cream);
  text-decoration: none;
}

.account-item-link:hover {
  color: var(--text-gold);
  text-decoration: underline;
}

.account-item-price {
  color:       rgba(255, 255, 255, 0.55);
  font-size:   0.85rem;
  font-family: var(--font-price);    /* legible numerals — Arial */
  white-space: nowrap;
}

/* Order total row */
.account-order-total {
  color:      var(--text-gold);
  font-size:  0.9rem;
  margin-top: 0.7rem;
  text-align: right;
}

/* ── Empty state ────────────────────────────────────────────── */

.account-empty {
  padding:    2rem 0;
  text-align: center;
}

.account-empty p {
  color:         rgba(255, 255, 255, 0.5);
  font-size:     0.95rem;
  margin-bottom: 1.5rem;
}

/* ── Footer actions (back link + sign out) ──────────────────── */

.account-footer-actions {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      2rem;
  padding-top:     1.2rem;
  border-top:      1px solid rgba(255, 255, 255, 0.07);
  flex-wrap:       wrap;
  gap:             1rem;
}

.account-back-link {
  color:           rgba(255, 255, 255, 0.4);
  font-size:       0.875rem;
  text-decoration: none;
  transition:      color 0.15s;
}

.account-back-link:hover {
  color: var(--text-cream);
}

/* ── Mobile adjustments ─────────────────────────────────────── */

@media (max-width: 600px) {
  .account-card {
    padding: 1.8rem 1.2rem;
  }

  .account-order-item {
    flex-direction: column;
    gap:            0.15rem;
  }

  .account-item-price {
    align-self: flex-end;
  }

  .account-footer-actions {
    flex-direction: column;
    align-items:    flex-start;
  }
}


/* ── Viewport-fitted product image inside frame opening ─────
   When a frame has a viewport defined, the product image is
   rendered inside a clipping div positioned at the viewport
   rectangle rather than as the tile background.              */

/* Background image fill — sits at z:1 inside the frame opening.
   Fills the bg_viewport rectangle; product viewport sits above it. */
.item-tile-bg-viewport {
  position:   absolute;
  overflow:   hidden;    /* clips bg image to the background viewport rect */
  z-index:    1;         /* below product viewport (z:2) and frame (z:3)   */
}

.item-tile-viewport {
  position:   absolute;
  overflow:   hidden;    /* clips the product image to the frame opening   */
  z-index:    2;         /* above bg viewport (z:1), below frame (z:3)     */
  display:    block;
}

.item-tile-viewport-img {
  width:             100%;
  height:            100%;
  object-fit:        contain;
  object-position:   center center;
  display:           block;
  user-select:       none;
  -webkit-user-drag: none;
  min-width:         100%;   /* force fill even if intrinsic width is smaller  */
  min-height:        100%;   /* force fill even if intrinsic height is smaller */
}



/* ════════════════════════════════════════════════════════════
   DISPLAY MODE TOGGLES  (body.no-bg, body.no-frames)
   ════════════════════════════════════════════════════════════
   Two independent toggles in the ShiftNav left panel.
   State stored in sessionStorage; resets on tab close.

   body.no-bg     — hides page/category/product backgrounds
   body.no-frames — hides tile frames and tile background layers
                    (tile rendering is gated in category.js)   ═ */

/* ── Toggle bar — bottom of left ShiftNav panel ─────────────
   Two stacked rows, each: [ label ]  [ pill ]
   Separated from the nav list by a fine top border.          */

.shiftnav-no-fun-bar {
  /* Sticky at bottom of the left panel — always visible, never scrolls away.
     The scrollable nav list (flex:1 overflow-y:auto) sits above this. */
  position:         sticky;
  bottom:           0;
  background-color: var(--bg-container);   /* solid bg so it never bleeds through */
  border-top:       1px solid rgba(255, 255, 255, 0.10);
  flex-shrink:      0;
  z-index:          2;   /* above any tile shadows in the scroll list */
}

/* Clickable header bar — always visible, shows title + arrow */
.shiftnav-fun-bar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 20px;
  cursor:          pointer;
  user-select:     none;
}

.shiftnav-fun-bar-header:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Title text in the header */
.shiftnav-fun-bar-header span:first-child {
  font-family: var(--font-primary);
  font-size:   13px;
  color:       var(--text-cream);
  opacity:     0.55;
}

/* Collapse arrow */
.shiftnav-fun-bar-arrow {
  font-size:  10px;
  color:      var(--text-cream);
  opacity:    0.35;
  transition: transform 0.15s;
}

/* Body — the toggle rows, shown/hidden by JS */
.shiftnav-fun-bar-body {
  padding: 0 20px 12px;
}

/* Each individual toggle row */
.shiftnav-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         4px 0;
}

.shiftnav-no-fun-label {
  font-family:  var(--font-primary);
  font-size:    13px;
  color:        var(--text-cream);
  opacity:      0.55;
  user-select:  none;
}

/* Pill toggle — shared by both rows */
.shiftnav-no-fun-toggle {
  position:    relative;
  display:     inline-block;
  width:       40px;
  height:      22px;
  cursor:      pointer;
  flex-shrink: 0;
}

.shiftnav-no-fun-toggle input[type='checkbox'] {
  opacity:  0;
  width:    0;
  height:   0;
  position: absolute;
}

.shiftnav-no-fun-slider {
  position:      absolute;
  inset:         0;
  background:    rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  transition:    background 0.2s ease;
}

.shiftnav-no-fun-slider::before {
  content:       '';
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    #888;
  transition:    transform 0.2s ease, background 0.2s ease;
}

/* Checked state — amber track, gold knob */
.shiftnav-no-fun-toggle input:checked + .shiftnav-no-fun-slider {
  background: rgba(200, 140, 40, 0.35);
}

.shiftnav-no-fun-toggle input:checked + .shiftnav-no-fun-slider::before {
  transform:  translateX(18px);
  background: #c8a84b;
}

/* ── body.no-bg suppression rules ───────────────────────────

   Rule 1: Page backgrounds set inline by JS on <body>.       */

body.no-bg {
  background-image: none !important;
}

/* Rule 2: Dim overlay pseudo-element — suppressed on all bg types. */

body.no-bg.has-product-bg::before,
body.no-bg.has-category-bg::before,
body.no-bg.has-page-bg::before,
body.no-bg.has-search-bg::before,
body.no-bg.has-tag-bg::before {
  display: none;
}

/* Rule 3: Drawer backgrounds (cart, wishlist, compare panels). */

body.no-bg .ea-drawer-bg {
  display: none;
}

/* Rule 4: Category page background colour reset. */

body.no-bg.has-category-bg #page-content {
  background: var(--bg-panel);
}

/* body.no-frames — tile decoration is handled at render time
   in category.js (isNoFrames() gate). No CSS rules needed.   */

/* body.no-tile-bgs — tile background layer is suppressed at
   render time in tileBuilder.js (isNoTileBgs() gate).
   No CSS rules needed — the layer is simply not created.     */

/* ── body.no-splitflap — hides the departure-board status display
   on item detail pages. The badge and availability row still
   communicate status so nothing is lost.                      */

body.no-splitflap .item-split-flap-outer {
  display: none;
}

/* ── body.no-flares — disables the highlight sweep animation on
   flare-tagged text spans. Text stays visible at its rest state
   (pure cream colour). The gradient is already parked off-screen
   by default so there is no flash of invisible text.
   animation: none is enough — background-position stays at the
   100% rest value that shows only solid cream.                 */

body.no-flares .ea-flare-single,
body.no-flares .ea-flare-multi {
  animation: none !important;
}

/* ── body.no-strip-images — text-only breadcrumb strip ──────
   Hides the category tile images and resizes each tile to a
   compact text pill. Tiles display as a horizontal row of
   labelled rectangles — still fully navigable.               */

/* Hide the image box entirely */
body.no-strip-images .family-tile-image {
  display: none;
}

/* Shrink the tile wrapper to hug the label only */
body.no-strip-images .family-tile {
  gap: 0;
}

/* Pill background behind each name — warm dark rect */
body.no-strip-images .family-tile-name {
  background:    rgba(20, 26, 30, 0.75);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding:       5px 12px;
  max-width:     none;
  white-space:   nowrap;
  font-size:     13px;
}

/* Current tile — gold border on the pill */
body.no-strip-images .family-tile.is-current .family-tile-name {
  border-color: var(--text-gold);
  box-shadow:   0 0 6px rgba(246, 174, 45, 0.3);
}

/* Hover — brighten the pill border */
body.no-strip-images .family-tile:not(.is-current):hover .family-tile-name {
  border-color: rgba(255, 255, 255, 0.35);
  background:   rgba(30, 36, 40, 0.90);
}

/* Fun Removal Options section title */
.shiftnav-toggles-title {
  font-family:    var(--font-primary);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--text-gold);
  opacity:        0.7;
  margin-bottom:  4px;
  padding-bottom: 4px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.05);
}


/* =============================================================
   CONTENT GROUP SYSTEM
   Styles for content_groups, content_blocks (mosaic layouts),
   link_rows, standalone pages, and ShiftNav page entries.
   ============================================================= */


/* ── Content group wrapper ────────────────────────────────── */

/* Each content_group renders as a section block. Groups stack
   vertically wherever they are injected on the page. */
.ea-content-group {
  width:         100%;
  margin-bottom: 2.5rem;   /* breathing room between groups */
}

.ea-content-group:last-child {
  margin-bottom: 0;
}

/* ── Collapsible content group ────────────────────────────── */

/* Title bar — shown when is_collapsible = true */
.ea-content-group-title {
  display:          flex;
  align-items:      center;
  gap:              12px;
  padding:          14px 18px;
  cursor:           pointer;
  user-select:      none;
  background:       rgba(28, 32, 35, 0.6);
  border:           1px solid rgba(78, 121, 140, 0.2);
  border-radius:    8px;
  margin-bottom:    0;
  transition:       background-color 0.15s, border-color 0.15s;
}

.ea-content-group-title:hover {
  background:   rgba(78, 121, 140, 0.12);
  border-color: rgba(78, 121, 140, 0.4);
}

.ea-content-group-title-text {
  flex:         1;
  font-family:  var(--font-primary);
  font-size:    clamp(1.1rem, 2.5vw, 1.4rem);
  color:        var(--text-cream);
  line-height:  1.3;
}

/* The +/- toggle indicator */
.ea-content-group-toggle {
  font-family:  var(--font-primary);
  font-size:    1.6rem;
  color:        var(--text-gold);
  line-height:  1;
  flex-shrink:  0;
  transition:   transform 0.25s ease;
  width:        28px;
  text-align:   center;
}

/* The collapsible body — animated open/close */
.ea-content-group-body {
  overflow:   hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.ea-content-group-body.is-open {
  opacity:    1;
  margin-top: 8px;
}

.ea-content-group-body.is-closed {
  max-height: 0 !important;
  opacity:    0;
  margin-top: 0;
}

/* Homepage groups container — sits above the category grid */
.homepage-content-groups {
  width:         100%;
  margin-bottom: 2rem;
}

/* Category page groups container — below breadcrumb, above grid */
.category-content-groups {
  width:         100%;
  padding:       0 1rem;
  margin-bottom: 2rem;
  box-sizing:    border-box;
}

/* Product page groups container — below product details */
.product-content-groups {
  width:         100%;
  padding:       0 1rem;
  margin-top:    3rem;
  margin-bottom: 2rem;
  box-sizing:    border-box;
}

/* Standalone page groups container */
.page-content-groups {
  width:      100%;
  margin-top: 1.5rem;
}


/* ── Content block — shared ───────────────────────────────── */

/* All content_blocks share this base. The ea-cb-{key} class
   on the same element defines the grid columns/rows. */
.ea-content-block {
  display:               grid;
  gap:                   4px;    /* 4px gutter between mosaic cells */
  width:                 100%;
  margin-bottom:         4px;    /* gap between blocks within a group */
  border-radius:         6px;
  overflow:              hidden;  /* clip child cells to rounded corners */
}

/* Background card — optional wrapper that gives a content block visual
   lift over vivid full-page backgrounds. Enabled per-block in admin.
   --block-card-opacity is overridden inline when a non-default value
   is saved; defaults to 0.85 for a solid-but-warm dark panel feel. */
.ea-block-card {
  --block-card-opacity: 0.85;
  background-color: rgba(28, 32, 35, var(--block-card-opacity));
  border-radius:    10px;
  padding:          16px;
  /* Gap between sibling block-cards — gives breathing room on the page */
  margin-bottom:    16px;
}

/* When block-card is active, the inner .ea-content-block doesn't need
   its own bottom margin since the card already provides spacing */
.ea-block-card > .ea-content-block {
  margin-bottom: 0;
}


/* ── Mosaic layout templates — CB-01 through CB-20 ────────── */
/* Each template defines grid-template-columns and (where needed)
   grid-template-rows. All heights are set via min-height on cells.
   On mobile (≤600px) all layouts collapse to a single column. */

/* CB-01 — Full width, 1 cell */
.ea-cb-CB-01 {
  grid-template-columns: 1fr;
}

/* CB-02 — Two equal columns, 2 cells */
.ea-cb-CB-02 {
  grid-template-columns: 1fr 1fr;
}

/* CB-03 — Three equal columns, 3 cells */
.ea-cb-CB-03 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* CB-04 — Four equal columns, 4 cells */
.ea-cb-CB-04 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* CB-05 — Hero left (2fr) + 2 stacked right (1fr), 3 cells */
.ea-cb-CB-05 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows:    auto auto;
}
/* Cell 1 spans both rows in the left column */
.ea-cb-CB-05 .ea-cell:nth-child(1) {
  grid-row: 1 / 3;
}

/* CB-06 — 2 stacked left (1fr) + hero right (2fr), 3 cells */
.ea-cb-CB-06 {
  grid-template-columns: 1fr 2fr;
  grid-template-rows:    auto auto;
}
/* Cell 2 spans both rows in the right column */
.ea-cb-CB-06 .ea-cell:nth-child(2) {
  grid-column: 2;
  grid-row:    1 / 3;
}

/* CB-07 — Hero top (full width) + 3 below, 4 cells */
.ea-cb-CB-07 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-07 .ea-cell:nth-child(1) {
  grid-column: 1 / 4;  /* spans all 3 columns */
}

/* CB-08 — 3 above + hero bottom (full width), 4 cells */
.ea-cb-CB-08 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-08 .ea-cell:nth-child(4) {
  grid-column: 1 / 4;  /* spans all 3 columns */
}

/* CB-09 — Hero left + 4 in 2×2 grid right, 5 cells */
.ea-cb-CB-09 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-09 .ea-cell:nth-child(1) {
  grid-row: 1 / 3;
}

/* CB-10 — 4 in 2×2 grid left + hero right, 5 cells */
.ea-cb-CB-10 {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-10 .ea-cell:nth-child(3) {
  grid-column: 3;
  grid-row:    1 / 3;
}

/* CB-11 — Hero left + 2 stacked right (equal halves), 3 cells */
.ea-cb-CB-11 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-11 .ea-cell:nth-child(1) {
  grid-row: 1 / 3;
}

/* CB-12 — Wide left (2fr) + narrow right (1fr), 2 rows, 4 cells */
.ea-cb-CB-12 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows:    auto auto;
}

/* CB-13 — Narrow left (1fr) + wide right (2fr), 2 rows, 4 cells */
.ea-cb-CB-13 {
  grid-template-columns: 1fr 2fr;
  grid-template-rows:    auto auto;
}

/* CB-14 — 2×2 equal grid, 4 cells */
.ea-cb-CB-14 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    auto auto;
}

/* CB-15 — Six equal cells, 3×2 grid */
.ea-cb-CB-15 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    auto auto;
}

/* CB-16 — Full hero top + 2 mid + full hero bottom, 4 cells */
.ea-cb-CB-16 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    auto auto auto;
}
.ea-cb-CB-16 .ea-cell:nth-child(1) {
  grid-column: 1 / 3;  /* top full-width hero */
  grid-row:    1;
}
.ea-cb-CB-16 .ea-cell:nth-child(4) {
  grid-column: 1 / 3;  /* bottom full-width hero */
  grid-row:    3;
}

/* CB-17 — 3 top + full-width banner + 3 bottom, 7 cells */
.ea-cb-CB-17 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    auto auto auto;
}
.ea-cb-CB-17 .ea-cell:nth-child(4) {
  grid-column: 1 / 4;  /* full-width middle banner */
}

/* CB-18 — Corner hero (left, 2fr) + 2×2 right grid, 5 cells */
.ea-cb-CB-18 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-18 .ea-cell:nth-child(1) {
  grid-column: 1;
  grid-row:    1 / 3;
}

/* CB-19 — 2×2 left grid + corner hero (right, 2fr), 5 cells */
.ea-cb-CB-19 {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-19 .ea-cell:nth-child(3) {
  grid-column: 3;
  grid-row:    1 / 3;
}

/* CB-20 — Editorial: wide text left (2fr) + 2 images right, 3 cells */
.ea-cb-CB-20 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows:    auto auto;
}
.ea-cb-CB-20 .ea-cell:nth-child(1) {
  grid-row: 1 / 3;  /* text block spans full height of layout */
}


/* ── Mosaic cells ─────────────────────────────────────────── */

.ea-cell {
  position:   relative;
  min-height: 180px;      /* minimum cell height — content expands beyond this */
  overflow:   hidden;
  background: var(--bg-container);  /* fallback bg when cell has no image */
}

/* Empty cells collapse to zero height — they hold their grid slot
   but contribute nothing visually */
.ea-cell--empty {
  /* height intentionally NOT overridden — inherits min-height:180px from .ea-cell
     so the grid slot stays its full size. visibility:hidden makes it invisible
     without collapsing the row. */
  background:  transparent;
  visibility:  hidden;
}

/* ── Text cells ─────────────────────────────────────── */
/* TinyMCE-generated HTML rendered in prose style */

/* Image cells are fully covered by their image — dark bg behind them looks wrong */
.ea-cell--image,
.ea-cell--image_map {
  background: transparent;
}

.ea-cell--text {
  padding:    0;          /* padding on inner div, not cell */
  min-height: 120px;      /* minimum visible height */
  position:   relative;   /* anchor for absolutely-positioned inner scroller */
  overflow:   hidden;     /* cell itself does not scroll — inner div does */
}

/* Inner text scroller — absolutely fills the cell, scrolls if needed */
.ea-cell--text .ea-cell-text {
  position:   absolute;
  inset:      0;
  padding:    1.5rem 2rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.ea-cell-text {
  font-family:  var(--font-primary);
  font-size:    17px;
  line-height:  1.75;
  color:        var(--text-cream);
}

/* TinyMCE heading tags inside text cells */
.ea-cell-text h1,
.ea-cell-text h2,
.ea-cell-text h3,
.ea-cell-text h4 {
  color:        var(--text-gold);
  margin-bottom: 0.5em;
  margin-top:    1em;
  line-height:   1.3;
}

.ea-cell-text h1 { font-size: 1.6rem; }
.ea-cell-text h2 { font-size: 1.35rem; }
.ea-cell-text h3 { font-size: 1.15rem; }
.ea-cell-text h4 { font-size: 1.0rem; }

.ea-cell-text p {
  margin-bottom: 0.85em;
}

.ea-cell-text p:last-child {
  margin-bottom: 0;
}

.ea-cell-text ul,
.ea-cell-text ol {
  margin:       0.5em 0 0.85em 1.4em;
  padding-left: 0;
}

.ea-cell-text li {
  margin-bottom: 0.4em;
}

.ea-cell-text strong,
.ea-cell-text b {
  color:       var(--text-gold);
  font-weight: 600;
}

.ea-cell-text em,
.ea-cell-text i {
  color: var(--text-cream);
}

.ea-cell-text a {
  color:           var(--link-blue);
  text-decoration: underline;
  transition:      color 0.15s;
}

.ea-cell-text a:hover {
  color: var(--text-gold);
}

/* ── Image cells ──────────────────────────────────────── */

.ea-cell--image {
  padding:    0;
  min-height: 180px;
}

.ea-cell-image-link {
  display: block;
  width:   100%;
  height:  100%;
}

/* ── Image cell — link wrapper ───────────────────────────────────────
   When an image cell has a link_url, the entire cell is wrapped in an
   <a class="ea-cell-image-link">. Cursor + subtle hover scale signal
   interactivity without cluttering the layout.                        */

a.ea-cell-image-link {
  display:  block;
  width:    100%;
  height:   100%;
  position: relative;           /* overlay is positioned inside this */
  cursor:   pointer;
}

a.ea-cell-image-link:hover .ea-cell-image {
  transform: scale(1.04);
}

a.ea-cell-image-link:hover .ea-cell-image-composite {
  filter: brightness(1.07);
}

/* ── Image cell — caption overlay ───────────────────────────────────
   Shown on click. Dark scrim slides up from the bottom, cream text.
   Hidden by default; .is-open class makes it visible.
   Works whether the cell has a link or not.                          */

.ea-cell-caption-overlay {
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  background:       rgba(12, 14, 16, 0.88);
  backdrop-filter:  blur(4px);
  padding:          16px 18px 18px;
  transform:        translateY(100%);   /* hidden below bottom edge */
  transition:       transform 0.28s ease;
  z-index:          10;
  pointer-events:   none;               /* passthrough when closed */
}

.ea-cell-caption-overlay.is-open {
  transform:      translateY(0);        /* slides up into view */
  pointer-events: auto;
}

/* Caption text */
.ea-cell-caption-text {
  font-family:  var(--font-primary);
  font-size:    14px;
  line-height:  1.6;
  color:        var(--text-cream);
  margin:       0;
}

/* "Visit →" link button inside the overlay — shown when both
   caption AND link_url are set on the same cell.              */
.ea-cell-caption-link {
  display:          inline-block;
  margin-top:       10px;
  font-family:      var(--font-primary);
  font-size:        12px;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--text-gold);
  text-decoration:  none;
  border:           1px solid rgba(246, 174, 45, 0.45);
  border-radius:    4px;
  padding:          4px 12px;
  transition:       background 0.15s, border-color 0.15s;
}

.ea-cell-caption-link:hover {
  background:   rgba(246, 174, 45, 0.12);
  border-color: var(--text-gold);
}

/* Close hint — top-right corner of overlay */
.ea-cell-caption-close {
  position:    absolute;
  top:         8px;
  right:       10px;
  font-family: var(--font-primary);
  font-size:   18px;
  line-height: 1;
  color:       rgba(255, 255, 255, 0.45);
  cursor:      pointer;
  padding:     2px 4px;
  transition:  color 0.15s;
}

.ea-cell-caption-close:hover {
  color: var(--text-cream);
}


/* ═══════════════════════════════════════════════════════════════
   CELL IMAGE EFFECTS (migration 098)
   Applied via ea-cell-effect--{name} class on .ea-cell.
   Effects that apply to composites / product tiles work at the
   cell level; sepia/blur-in are image-only effects.
   ═══════════════════════════════════════════════════════════════ */

/* Raised — shadow applied to the inner image/composite so it looks like
   the item is floating rather than the tile box casting a shadow.
   The cell itself gets a subtle lift; the inner content gets the depth. */
.ea-cell-effect--raised {
  transform:        translateY(-3px);
}
.ea-cell-effect--raised .ea-cell-image,
.ea-cell-effect--raised .ea-cell-image-composite {
  box-shadow:       0 12px 40px rgba(0, 0, 0, 0.70),
                    0 4px 12px  rgba(0, 0, 0, 0.50),
                    0 0   0 1px rgba(255, 255, 255, 0.04);
  border-radius:    6px;
}
/* .item-tile uses filter:drop-shadow (not box-shadow) so the shadow
   follows the PNG alpha contour rather than the rectangular tile box. */
.ea-cell-effect--raised .item-tile {
  filter:           drop-shadow(0 12px 40px rgba(0, 0, 0, 0.70))
                    drop-shadow(0 4px  12px rgba(0, 0, 0, 0.50));
}

/* Tilt — casually-placed rotation; combine with raised for best effect */
.ea-cell-effect--tilt {
  transform:        rotate(1.8deg) translateY(-1px);
  transform-origin: center center;
}

/* Tilt + raised compound — both classes on the same cell */
.ea-cell-effect--raised.ea-cell-effect--tilt {
  transform:        rotate(1.8deg) translateY(-3px);
}

/* Float — gentle vertical bob animation */
@keyframes ea-cell-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.ea-cell-effect--float {
  animation: ea-cell-float 3.5s ease-in-out infinite;
}

/* Flourish — fade + scale up when scrolled into view.
   pending: invisible and scaled down, waiting for IntersectionObserver.
   active:  transition fires to full opacity + scale.
   The transition is set on pending so it's ready when the class swap happens. */
.ea-cell-flourish-pending {
  opacity:          0;
  transform:        scale(0.92) translateY(12px);
  transition:       opacity 0.65s ease, transform 0.65s ease;
  will-change:      opacity, transform;
}
.ea-cell-flourish-active {
  opacity:          1;
  transform:        scale(1) translateY(0);
}

/* Elastic — spring-bounce scale on hover.
   Pulls back slightly first, then overshoots forward, settles at 1.
   More interesting than a plain zoom; replaces the default hover scale. */
@keyframes ea-cell-elastic {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.96); }
  55%  { transform: scale(1.07); }
  75%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}
.ea-cell-effect--elastic {
  overflow:  hidden;
}
.ea-cell-effect--elastic:hover {
  animation: ea-cell-elastic 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Vignette — moody edge darkening via ::after pseudo-element */
.ea-cell-effect--vignette {
  position:         relative;
  overflow:         hidden;
}
.ea-cell-effect--vignette::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       radial-gradient(
                      ellipse at center,
                      transparent 40%,
                      rgba(0, 0, 0, 0.65) 100%
                    );
  pointer-events:   none;  /* let clicks pass through */
  z-index:          5;
}

/* Sepia — warm vintage tone (plain image cells only) */
.ea-cell-effect--sepia .ea-cell-image,
.ea-cell-effect--sepia .ea-cell-image-composite {
  filter: sepia(0.65) contrast(1.05);
}

/* Blur-in — starts blurred, sharpens when scrolled into view.
   Uses .ea-cell-blurin-active class toggled by IntersectionObserver in
   rowRenderer.js — same pattern as flourish. Without the observer the
   animation fires immediately on paint before the cell is visible. */
@keyframes ea-cell-blur-in {
  from { filter: blur(10px) brightness(0.7); }
  to   { filter: blur(0)    brightness(1);   }
}
.ea-cell-effect--blur-in .ea-cell-image,
.ea-cell-effect--blur-in .ea-cell-image-composite {
  filter:     blur(10px) brightness(0.7);
  transition: none;
}
.ea-cell-blurin-active .ea-cell-image,
.ea-cell-blurin-active .ea-cell-image-composite {
  animation: ea-cell-blur-in 1.1s ease forwards;
}


/* ═══════════════════════════════════════════════════════════════
   TEXT OVERLAY CARD (migration 098)
   Centred over any cell that has cell_overlay.text set.
   Injected by rowRenderer.js after the cell content is built.
   ═══════════════════════════════════════════════════════════════ */

.ea-cell-text-overlay {
  position:         absolute;
  /* Centre the card both horizontally and vertically */
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  /* Grow to content width; only wrap when hitting the 80% max.
     This prevents wrapping a 3-word line after 2 words. */
  width:            max-content;
  max-width:        80%;
  min-width:        80px;
  /* Padding and shape */
  padding:          12px 18px;
  border-radius:    6px;
  backdrop-filter:  blur(3px);
  /* Text alignment — all lines centred */
  text-align:       center;
  line-height:      1.55;
  word-break:       normal;
  overflow-wrap:    break-word;
  /* Default text colour (overridden by inline style from overlay settings) */
  color:            var(--text-cream);
  /* Sit above image, composite frame layers (z:3), and effect layers (z:5)
     but still below caption overlay (z:10) */
  z-index:          9;
  /* Non-interactive — clicks pass through to zones/links beneath */
  pointer-events:   none;
  /* Prevent text selection highlighting the overlay */
  user-select:      none;
}


/* ═══════════════════════════════════════════════════════════════
   IMAGE MAP ZONE POLYGONS (migration 098)
   SVG <polygon> hit targets inside image_map cells.
   Transparent by default; amber glow on hover.
   ═══════════════════════════════════════════════════════════════ */

/* Polygon hit target — invisible by default */
.ea-zone-polygon {
  fill:             transparent;
  stroke:           transparent;
  cursor:           pointer;
  transition:       fill 0.18s ease, stroke 0.18s ease;
}

/* Hover: amber glow signals the zone is clickable */
a:hover .ea-zone-polygon {
  fill:             rgba(246, 174, 45, 0.18);
  stroke:           rgba(246, 174, 45, 0.70);
  stroke-width:     2;
}

/* Plain image inside image cell — fills the full cell area */
.ea-cell-image {
  display:          block;
  width:            100%;
  height:           100%;
  object-fit:       cover;      /* fill the cell, crop if needed */
  object-position:  center;
  transition:       transform 0.25s ease;
}

.ea-cell--image:hover .ea-cell-image {
  transform: scale(1.03);       /* subtle zoom on hover */
}

/* ── Image cell with frame composite ──────────────────────────────── */
/* When the image cell has frame/bg pools assigned, rowRenderer.js     */
/* builds a div with this class instead of a plain <img>. Must be      */
/* square with position:relative so percentage viewport coords work.   */

.ea-cell-image-composite {
  position:      relative;       /* anchor for absolutely-positioned layers */
  width:         100%;
  aspect-ratio:  1 / 1;          /* square tile — matches product tile geometry */
  overflow:      hidden;         /* clip all layers to tile boundary */
  border-radius: 6px;
  background:    transparent;
}

/* ── Product / link_tile / blogette / category cells ──── */
/* These wrap the standard .item-tile markup from category.js.
   The cell provides sizing; the tile provides the visual. */

.ea-cell--product,
.ea-cell--link_tile,
.ea-cell--blogette,
.ea-cell--category {
  padding:    12px;
  min-height: 0;
  background: transparent;
}

/* ea-item-tile inside a content block cell — square aspect ratio
   matching category grid tiles, with shadow */
.ea-cell .ea-item-tile {
  width:        100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow:      hidden;
  position:      relative;   /* required for title overlay positioning */
  filter:        drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}

/* Title overlay on content block tiles — mirrors link-row tile overlay */
.ea-cell .ea-item-tile .item-tile-overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  z-index:    4;             /* above frame PNG (z:3) so title is always readable */
}

.ea-cell .ea-item-tile .item-tile-name {
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         var(--text-cream);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}


/* ── Link rows ────────────────────────────────────────────── */

.ea-link-row {
  display:         flex;
  flex-wrap:       wrap;       /* tiles wrap on narrow viewports */
  gap:             8px;
  width:           100%;
  margin-bottom:   8px;
}

/* single_height — all tiles same height in a tight row */
.ea-link-row--single_height {
  flex-wrap: nowrap;           /* force single line */
  overflow-x: auto;            /* scroll if tiles overflow */
}

/* Each tile in a link row — equal-width flex children, square aspect ratio */
.ea-link-row-tile {
  flex:                1 1 0;
  min-width:           140px;
  aspect-ratio:        1 / 1;   /* square tiles */
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  cursor:              pointer;
  border-radius:       6px;
  position:            relative;
  overflow:            hidden;
  filter:              drop-shadow(0 3px 10px rgba(0,0,0,0.45));
  transition:          filter 0.2s ease, transform 0.2s ease;
}

.ea-link-row-tile:hover {
  filter:    drop-shadow(0 5px 16px rgba(0,0,0,0.65));
  transform: translateY(-2px);
}

.ea-link-row-tile .item-tile-overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  z-index:    4;             /* above frame PNG (z:3) so title is always readable */
}

.ea-link-row-tile .item-tile-name {
  font-family:  var(--font-primary);
  font-size:    13px;
  color:        var(--text-cream);
  line-height:  1.3;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* single_height — compact rectangular row, no aspect-ratio override */
.ea-link-row--single_height .ea-link-row-tile {
  aspect-ratio: unset;
  min-height:   140px;
}

/* featured — one large hero tile + smaller companions */
.ea-link-row--featured {
  gap: 8px;
}
.ea-link-row--featured .ea-link-row-tile:first-child {
  flex:         3 1 0;
  aspect-ratio: 4 / 3;
}
.ea-link-row--featured .ea-link-row-tile:not(:first-child) {
  flex:         1 1 0;
  aspect-ratio: 1 / 1;
}

/* mixed — alternating sizes for visual rhythm */
.ea-link-row--mixed .ea-link-row-tile:nth-child(odd) {
  flex:         2 1 0;
  aspect-ratio: 4 / 3;
}
.ea-link-row--mixed .ea-link-row-tile:nth-child(even) {
  flex:         1 1 0;
  aspect-ratio: 1 / 1;
}


/* ── Standalone page layout ───────────────────────────────── */

/* page-mode--standalone combined with page-mode--constrained
   gives the standalone page its centred, padded layout */
body.page-mode--standalone #page-content {
  padding-top: 1.5rem;
}

/* Page title heading — handwritten font, gold */
.page-title {
  font-family:   var(--font-primary);
  font-size:     clamp(1.6rem, 3.5vw, 2.4rem);
  color:         var(--text-gold);
  margin-bottom: 1.5rem;
  line-height:   1.2;
}

/* Empty / error states for standalone pages */
.page-empty,
.page-error {
  font-family: var(--font-primary);
  font-size:   15px;
  color:       var(--text-cream);
  opacity:     0.6;
  padding:     2rem 0;
  text-align:  center;
}


/* ── ShiftNav page entries ────────────────────────────────── */

/* Thin separator between the category list and the page links */
.shiftnav-section-sep {
  height:     1px;
  margin:     6px 12px;
  background: rgba(255, 255, 255, 0.10);
}

/* Page nav items use the same base as .shiftnav-item — they
   inherit all the flex/border-bottom rules. The --page modifier
   adds a subtle colour distinction so pages feel different from
   categories without breaking visual harmony. */
/* Pages and links use the same colour as category items for visual unity.
   The separator line above them already provides sufficient grouping. */
.shiftnav-item--page .shiftnav-item-label,
.shiftnav-item--link .shiftnav-item-label {
  color:     var(--menu-link);
  font-size: 15px;
  opacity:   1;
}

.shiftnav-item--page .shiftnav-item-label:hover,
.shiftnav-item--link .shiftnav-item-label:hover {
  color:            var(--text-gold);
  background-color: rgba(255,255,255,0.07);
}


/* ── Responsive collapse — mobile ────────────────────────── */
/* All mosaic layouts collapse to a single column on narrow screens */

@media (max-width: 600px) {

  .ea-content-block {
    grid-template-columns: 1fr !important;  /* override all CB-XX templates */
    grid-template-rows:    auto !important;
  }

  /* Reset all cell-level grid-column and grid-row spans */
  .ea-cell {
    grid-column: auto !important;
    grid-row:    auto !important;
    min-height:  140px;
  }

  /* Empty cells still collapse on mobile */
  .ea-cell--empty {
    min-height: 0 !important;
    height:     0 !important;
  }

  /* Link row tiles wrap to 2 per row on mobile */
  .ea-link-row {
    gap: 6px;
  }

  .ea-link-row-tile {
    flex:      1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 130px;
  }

  /* Single-height rows scroll horizontally on mobile */
  .ea-link-row--single_height .ea-link-row-tile {
    flex:       0 0 140px;
    min-height: 130px;
  }

}


/* ── Search results page ──────────────────────────────────── */

/* Summary line: "42 results for 'dali'" */
.search-summary {
  font-family:   var(--font-primary);
  font-size:     15px;
  color:         var(--text-cream);
  opacity:       0.7;
  padding:       1rem var(--page-h-pad, 1rem) 0.5rem;
}

/* Section labels: "Categories" / "Items" */
.search-section-label {
  font-family:    var(--font-primary);
  font-size:      13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--text-gold);
  opacity:        0.75;
  padding:        1rem var(--page-h-pad, 1rem) 0.4rem;
}

/* ── Category result strip ───────────────────────── */

.search-cat-section {
  margin-bottom: 0.5rem;
}

/* Horizontal scroll row of category cards */
.search-cat-row {
  display:    flex;
  gap:        10px;
  overflow-x: auto;
  padding:    0 var(--page-h-pad, 1rem) 0.75rem;
  /* Smooth scrolling — hide scrollbar visually on webkit */
  scrollbar-width: thin;
}

.search-cat-row::-webkit-scrollbar {
  height: 4px;
}

.search-cat-row::-webkit-scrollbar-track {
  background: transparent;
}

.search-cat-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* Individual category card */
.search-cat-card {
  flex:          0 0 140px;
  cursor:        pointer;
  border-radius: 6px;
  overflow:      hidden;
  background:    var(--bg-container);
  transition:    transform 0.15s ease, box-shadow 0.15s ease;
}

.search-cat-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Category tile image */
.search-cat-card-img {
  width:               100%;
  aspect-ratio:        1 / 1;
  background-size:     cover;
  background-position: center;
  background-color:    rgba(255, 255, 255, 0.04);
}

/* Category name label */
.search-cat-card-name {
  font-family:  var(--font-primary);
  font-size:    12px;
  color:        var(--text-cream);
  padding:      5px 8px 2px;
  line-height:  1.3;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* Item count under category name */
.search-cat-card-count {
  font-family: var(--font-primary);
  font-size:   11px;
  color:       var(--text-gold);
  opacity:     0.7;
  padding:     0 8px 6px;
}

/* ── Product grid ─────────────────────────────────── */

/* The product grid reuses .item-grid fully.
   This modifier adds horizontal padding matching the rest of the page. */
.search-product-grid {
  padding: 0 var(--page-h-pad, 1rem);
}

/* Wrapper around each tile + its headline snippet */
.search-tile-wrapper {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

/* ts_headline excerpt — shown below each product tile.
   mark tags from PostgreSQL are styled as gold highlights. */
.search-headline {
  font-family:  var(--font-primary);
  font-size:    12px;
  line-height:  1.5;
  color:        var(--text-cream);
  opacity:      0.65;
  /* Clamp to two lines — long descriptions truncate gracefully */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* Highlighted match terms within the headline snippet */
.search-headline mark {
  background:    transparent;
  color:         var(--text-gold);
  font-weight:   bold;
}

/* ── Load More button ─────────────────────────────── */

.search-load-more {
  display:       block;
  margin:        2rem auto 1.5rem;
  padding:       0.6rem 2rem;
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family:   var(--font-primary);
  font-size:     14px;
  color:         var(--text-cream);
  opacity:       0.75;
  cursor:        pointer;
  transition:    opacity 0.15s ease, border-color 0.15s ease;
}

.search-load-more:hover {
  opacity:      1;
  border-color: var(--text-gold);
  color:        var(--text-gold);
}

/* ── State messages ───────────────────────────────── */

/* Shown while the API call is in flight */
.search-loading {
  font-family: var(--font-primary);
  font-size:   15px;
  color:       var(--text-cream);
  opacity:     0.55;
  padding:     2rem var(--page-h-pad, 1rem);
}

/* No results state */
.search-empty {
  font-family: var(--font-primary);
  font-size:   15px;
  color:       var(--text-cream);
  opacity:     0.6;
  padding:     2rem var(--page-h-pad, 1rem) 0.75rem;
  display:     inline;
}

.search-empty-state {
  padding: 1rem var(--page-h-pad, 1rem) 2rem;
}

/* "Surprise Me" bullseye suggestion button in the empty state */
.search-bullseye-btn {
  display:       inline-block;
  margin-top:    0.75rem;
  padding:       0.45rem 1.25rem;
  background:    var(--accent-orange);
  border:        none;
  border-radius: 4px;
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         #fff;
  cursor:        pointer;
  transition:    opacity 0.15s ease;
}

.search-bullseye-btn:hover {
  opacity: 0.85;
}

/* Error state */
.search-error {
  font-family: var(--font-primary);
  font-size:   15px;
  color:       #e06c75;
  opacity:     0.8;
  padding:     2rem var(--page-h-pad, 1rem);
}

/* ── Search page responsive ───────────────────────── */

@media (max-width: 900px) {
  /* 3-column grid at medium width — same breakpoint as item-grid */
  .search-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  /* 2-column grid on mobile */
  .search-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Category cards slightly narrower on mobile */
  .search-cat-card {
    flex: 0 0 120px;
  }
}


/* ── Recently Viewed Rail ─────────────────────────────────── */

/* Outer section — sits at the bottom of page-content on item
   and category pages, above the family strip and footer.
   Constrained to page max-width and centred with auto margins
   so it aligns with the grid on both full-width (category) and
   constrained (item) page modes. */
.rv-rail {
  /* Full-width flex column. align-items:stretch so children (label
     and row) fill the full width. The row then uses justify-content:center
     to centre the tiles within that full-width row. */
  display:        flex;
  flex-direction: column;
  align-items:    stretch;   /* children fill full width */
  width:          100%;
  padding:        12px 20px;
  margin-top:     16px;
  box-sizing:     border-box;
}

.rv-rail-inner {
  display: contents;  /* transparent passthrough — no layout effect */
}

/* Section label */
.rv-rail-label {
  font-family:    var(--font-primary);
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--text-gold);
  opacity:        0.7;
  margin-bottom:  10px;
  text-align:     center;   /* centres over the centred tile row */
}

/* Tile row: full-width, tiles centred within it via justify-content:center */
.rv-rail-row {
  display:         flex;
  flex-wrap:       nowrap;
  justify-content: center;   /* centres tiles horizontally within the row */
  gap:             8px;
  overflow-x:      auto;
  padding-bottom:  6px;
  width:           100%;     /* fills the full rv-rail width */
  scrollbar-width: thin;
}

.rv-rail-row::-webkit-scrollbar {
  height: 3px;
}

.rv-rail-row::-webkit-scrollbar-track {
  background: transparent;
}

.rv-rail-row::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

/* Individual tile — fixed size square, plain product image.
   background-color provides a dark canvas behind transparent PNGs
   so images are always visible against the page background. */
.rv-tile {
  flex:                0 0 100px;
  height:              100px;
  background-size:     cover;          /* fills the tile — small size suits cover */
  background-position: center;
  background-repeat:   no-repeat;
  background-color:    rgba(0, 0, 0, 0.35); /* dark canvas for transparent PNGs */
  border-radius:       6px;
  cursor:              pointer;
  position:            relative;
  overflow:            hidden;
  filter:              drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition:          filter 0.15s ease, transform 0.15s ease;
  opacity:             0.82;
}

.rv-tile:hover {
  filter:    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
  transform: translateY(-2px);
  opacity:   1;
}

/* Title label — gradient overlay along the bottom edge */
.rv-tile-name {
  position:      absolute;
  bottom:        0;
  left:          0;
  right:         0;
  padding:       14px 6px 5px;
  background:    linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  font-family:   var(--font-primary);
  font-size:     10px;
  color:         var(--text-cream);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  border-radius: 0 0 6px 6px;
}

/* Mobile: tiles slightly smaller, tighter padding */
@media (max-width: 600px) {
  .rv-rail {
    margin-top: 16px;
  }
  .rv-rail-inner {
    padding: 8px 12px;
  }
  .rv-tile {
    flex:   0 0 84px;
    height: 84px;
  }
}

/* ── Font Flare ────────────────────────────────────────────────────────
   background-size:200%, rest position:100% = right half of gradient visible.
   ALL bright stops confined to 0-50% (left half, off-screen at rest).
   50%-100% is PURE solid text-cream — mathematically guaranteed normal text.
   ─────────────────────────────────────────────────────────────────────── */

.ea-flare-single,
.ea-flare-multi {
  display:                 inline;
  background-image:        linear-gradient(
    90deg,
    var(--text-cream)   0%,
    var(--text-cream)   5%,
    #c8d8e8            18%,
    #ffffff            26%,
    #ffe9a0            32%,
    #ffffff            38%,
    #c8d8e8            46%,
    var(--text-cream)  50%,    /* hard stop — everything right of here is pure cream */
    var(--text-cream) 100%
  );
  background-size:         200% 100%;
  background-position:     100% center; /* shows 50%-100% = pure cream = normal text */
  background-clip:         text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
}

.ea-flare-single.ea-flare-active,
.ea-flare-multi.ea-flare-active {
  animation-name:            ea-flare-sweep;
  animation-timing-function: ease-in-out;
  animation-duration:        2.4s;
  animation-iteration-count: 1;
  animation-fill-mode:       none;
}

.ea-flare-single.ea-flare-done {
  font-weight: 700;
}

@keyframes ea-flare-sweep {
  0%   { background-position: 100% center; }   /* sweep starts off-right */
  100% { background-position: -100% center; }  /* sweep exits off-left   */
}


/* ══════════════════════════════════════════════════════════════
   Compare panel — font & size updates (session 8)
   ══════════════════════════════════════════════════════════════ */

/* Column width upsized ~25%: 320px → 400px */
.compare-col {
  width: 400px;
}

/* Image height upsized to match: 220px → 275px */
.compare-col-img {
  height: 275px;
}

/* Apply font-primary to all compare text elements except description
   (description uses --ty-desc-font / --ty-desc-size from admin settings) */
.compare-col-title,
.compare-col-label,
.compare-col-value,
.compare-col-field,
.compare-col-field strong {
  font-family: var(--font-primary);
}

/* Price value — use the price font (--font-price) matching product tiles */
.compare-col-row .compare-col-value .ea-drawer-item-price-original,
.compare-col-row .compare-col-value .ea-drawer-item-price-sale,
.compare-col-row .compare-col-value {
  font-family: var(--font-price, var(--font-primary));
}

/* Title slightly larger */
.compare-col-title {
  font-size: 16px;
}

/* Value text slightly larger */
.compare-col-value {
  font-size: 15px;
}

/* ══════════════════════════════════════════════════════════════
   Blogette & page — dark content card (session 8)
   ══════════════════════════════════════════════════════════════ */

/* Dark card wrapper behind blogette prose and page body content.
   Uses dark slate (not near-transparent white) so it reads over
   vivid page backgrounds like the orange sunburst. */
.blogette-content-card,
.page-content-card {
  background:    rgba(20, 22, 26, 0.82);
  border:        1px solid rgba(95, 121, 138, 0.5);
  border-radius: 14px;
  padding:       24px 28px;
  box-shadow:    0 2px 16px rgba(0, 0, 0, 0.5),
                 inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 24px;
}

/* Block title heading — shown above a content block when show_block_title = true */
.ea-block-title {
  font-family:   var(--font-primary);
  font-size:     clamp(1.3rem, 2.8vw, 2rem);
  color:         var(--text-gold);
  margin:        0 0 16px 0;
  line-height:   1.2;
}

/* Page wrapper — full width, no max-width constraint.
   Pages contain full-width content blocks (frames, composites, images)
   so the narrow 860px blogette column is wrong here. */
.page-story-wrap {
  width:   100%;
  padding: 0 0 40px;
}

/* ══════════════════════════════════════════════════════════════
   Age Gate Modal (session 16)
   Full-screen semi-transparent overlay shown on age-restricted
   domains (Weed Lovers, Cannabiz) before the user confirms age.
   Teases the site content behind the overlay.
   ══════════════════════════════════════════════════════════════ */

/* Overlay — full viewport, semi-transparent dark, highest z-index */
.age-gate-overlay {
  position:        fixed;
  inset:           0;                       /* top/right/bottom/left: 0 */
  z-index:         9999;
  background:      rgba(0, 0, 0, 0.82);    /* dark but lets page show through */
  backdrop-filter: blur(3px);              /* subtle blur on content behind */
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}

/* Modal card */
.age-gate-card {
  background:    var(--bg-container, rgba(24, 26, 32, 0.97));
  border:        1px solid rgba(95, 121, 138, 0.45);
  border-radius: 16px;
  box-shadow:    0 8px 48px rgba(0, 0, 0, 0.7),
                 inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding:       44px 48px;
  max-width:     460px;
  width:         100%;
  text-align:    center;
}

/* Site/domain name above the gate heading */
.age-gate-domain {
  font-family: var(--font-primary);
  font-size:   13px;
  color:       var(--text-gold, #c8a96e);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity:     0.8;
}

/* Main question */
.age-gate-heading {
  font-family:   var(--font-primary);
  font-size:     clamp(1.5rem, 4vw, 2rem);
  color:         var(--text-cream, #e8dcc8);
  line-height:   1.25;
  margin-bottom: 10px;
}

/* Legal sub-text */
.age-gate-subtext {
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         #888;
  line-height:   1.6;
  margin-bottom: 32px;
}

/* Button row */
.age-gate-buttons {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* "Yes" button — primary */
.age-gate-btn-yes {
  font-family:     var(--font-primary);
  font-size:       15px;
  padding:         13px 32px;
  border:          none;
  border-radius:   8px;
  background:      var(--accent-green, #5a8a5a);
  color:           #fff;
  cursor:          pointer;
  transition:      background 0.15s, transform 0.1s;
  min-width:       160px;
}

.age-gate-btn-yes:hover {
  background:  var(--accent-orange, #c86428);
  transform:   translateY(-1px);
}

/* "No" button — secondary, muted */
.age-gate-btn-no {
  font-family:  var(--font-primary);
  font-size:    15px;
  padding:      13px 32px;
  border:       1px solid rgba(255, 255, 255, 0.15);
  border-radius:8px;
  background:   transparent;
  color:        #888;
  cursor:       pointer;
  transition:   border-color 0.15s, color 0.15s;
  min-width:    160px;
}

.age-gate-btn-no:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color:        #aaa;
}

/* Legal fine print at the bottom */
.age-gate-legal {
  font-family: var(--font-primary);
  font-size:   11px;
  color:       #555;
  margin-top:  24px;
  line-height: 1.5;
}

/* ── Age gate cart checkbox ──────────────────────────────────────
   Shown in the cart panel above the checkout button whenever any
   cart item originates from an age-gated domain. */

.cart-age-confirm {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       12px 16px;
  background:    rgba(0, 0, 0, 0.25);
  border:        1px solid rgba(95, 121, 138, 0.3);
  border-radius: 8px;
  margin-bottom: 12px;
  font-family:   var(--font-primary);
  font-size:     13px;
  color:         var(--text-cream, #e8dcc8);
  line-height:   1.5;
  cursor:        pointer;
}

.cart-age-confirm input[type="checkbox"] {
  width:         16px;
  height:        16px;
  flex-shrink:   0;
  margin-top:    2px;
  accent-color:  var(--accent-green, #5a8a5a);
  cursor:        pointer;
}

/* ══════════════════════════════════════════════════════════════
   Cart totals breakdown — Session 19 (Shipping Session 2)
   Replaces the single .cart-subtotal-label / .cart-subtotal-amount pair
   with a full breakdown: items → shipping → grand total.
   All injected dynamically by cart-panel.js renderTotals().
   ══════════════════════════════════════════════════════════════ */

/* Wrapper for the items / shipping / grand total rows */
.cart-totals-wrap {
  display:        flex;
  flex-direction: column;
  gap:            0;                /* rows manage their own spacing via padding */
  width:          100%;
}

/* Individual row: label left, value right */
.cart-totals-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         5px 0;
  font-family:     var(--font-primary);
}

.cart-totals-label {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      12px;
  color:          var(--text-cream);
  opacity:        0.7;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.cart-totals-value {
  font-size:   14px;
  font-family: var(--font-primary);
  color:       var(--text-cream);
}

/* Items subtotal row — slightly muted */
.cart-totals-row--items .cart-totals-value {
  opacity: 0.85;
}

/* Divider line above grand total */
.cart-totals-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin:     6px 0 2px;
}

/* Grand total row — prominent */
.cart-totals-row--grand .cart-totals-label {
  opacity:     1;
  font-size:   13px;
}

.cart-totals-row--grand .cart-totals-value {
  font-size:   20px;
  color:       var(--text-gold);
  line-height: 1;
}

/* ── Shipping row specifics ───────────────────────────── */

/* "Free!" shipping value — green accent */
.cart-shipping-free {
  color:       var(--accent-green, #5a8a5a);
  font-weight: normal;
}

/* "Invoice to follow" — muted amber, smaller */
.cart-shipping-quoted {
  color:     var(--text-gold);
  font-size: 12px;
  opacity:   0.85;
}

/* ⓘ info button next to "Shipping" label */
.cart-shipping-info-btn {
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.4);
  cursor:      pointer;
  font-size:   12px;
  line-height: 1;
  padding:     0;
  transition:  color 0.15s;
}

.cart-shipping-info-btn:hover {
  color: var(--text-gold);
}

/* ── Quoted-cart notice ───────────────────────────────── */
/* Shown below totals when any item requires a shipping quote */

.cart-shipping-quoted-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       10px 12px;
  background:    rgba(0, 0, 0, 0.3);
  border:        1px solid rgba(200, 170, 100, 0.2);
  border-radius: 5px;
  font-family:   var(--font-primary);
  font-size:     12px;
  color:         rgba(255, 255, 255, 0.65);
  line-height:   1.5;
}

.cart-shipping-quoted-notice i {
  color:      var(--text-gold);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Free-shipping nudge ──────────────────────────────── */
/* "Add $X more for free shipping!" — shown when within 50% of threshold */

.cart-shipping-nudge {
  padding:       8px 12px;
  background:    rgba(90, 138, 90, 0.12);
  border:        1px solid rgba(90, 138, 90, 0.25);
  border-radius: 5px;
  font-family:   var(--font-primary);
  font-size:     12px;
  color:         var(--accent-green, #5a8a5a);
  display:       flex;
  align-items:   center;
  gap:           7px;
}

.cart-shipping-nudge strong {
  color: #7fbf7f;
}

/* ── Tier popup overlay ───────────────────────────────── */
/* Full-viewport dark overlay with a centred card */

.cart-tier-popup {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  background:      rgba(0, 0, 0, 0);   /* starts transparent, transitions in */
  transition:      background 0.2s;
}

.cart-tier-popup--open {
  background: rgba(0, 0, 0, 0.7);
}

/* The card itself */
.cart-tier-card {
  background:    rgba(22, 26, 38, 0.97);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  max-width:     420px;
  width:         100%;
  padding:       20px 22px 18px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.6);
  transform:     translateY(8px);
  transition:    transform 0.2s;
}

.cart-tier-popup--open .cart-tier-card {
  transform: translateY(0);
}

/* Card header: title + × close */
.cart-tier-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   14px;
}

.cart-tier-header h3 {
  font-family:    var(--font-primary);
  font-size:      14px;
  color:          var(--text-cream);
  font-weight:    normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-tier-close {
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.45);
  cursor:      pointer;
  font-size:   16px;
  line-height: 1;
  padding:     2px 4px;
  transition:  color 0.15s;
}

.cart-tier-close:hover {
  color: var(--text-cream);
}

/* Tier table */
.cart-tier-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-primary);
  font-size:       13px;
  margin-bottom:   14px;
}

.cart-tier-table th {
  color:           rgba(255, 255, 255, 0.5);
  font-size:       10px;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  padding:         0 0 8px;
  text-align:      left;
  border-bottom:   1px solid rgba(255, 255, 255, 0.1);
}

.cart-tier-table th:last-child,
.cart-tier-table td:last-child {
  text-align: right;
}

.cart-tier-table td {
  padding:       7px 0;
  color:         var(--text-cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* "Free!" in tier table */
.cart-tier-free {
  color: var(--accent-green, #5a8a5a);
}

/* Notes below the tier table */
.cart-tier-note {
  font-family: var(--font-primary);
  font-size:   11px;
  color:       rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin-top:  6px;
}

/* Mobile: full-width card */
@media (max-width: 600px) {
  .cart-tier-card {
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Share button additions — Pinterest, WhatsApp, Copy Link (session 16)
   ══════════════════════════════════════════════════════════════ */

.item-share-btn--pinterest {
  background-color: #E60023;
  color:            #fff;
}

.item-share-btn--whatsapp {
  background-color: #25D366;
  color:            #fff;
}

.item-share-btn--copy {
  background-color: var(--bg-container, rgba(40, 44, 52, 0.9));
  border:           1px solid rgba(95, 121, 138, 0.4);
  color:            var(--text-cream, #e8dcc8);
  position:         relative;    /* for the "Copied!" tooltip */
}

.item-share-btn--copy:hover {
  background-color: rgba(95, 121, 138, 0.3);
  opacity:          1;
}

/* "Copied!" tooltip that pops up briefly on click */
.item-share-btn--copy .share-copy-tip {
  display:          none;
  position:         absolute;
  bottom:           calc(100% + 6px);
  left:             50%;
  transform:        translateX(-50%);
  background:       rgba(0,0,0,0.85);
  color:            #fff;
  font-size:        11px;
  font-family:      var(--font-primary);
  white-space:      nowrap;
  padding:          4px 8px;
  border-radius:    4px;
  pointer-events:   none;
}

.item-share-btn--copy.copied .share-copy-tip {
  display: block;
}