/* ============================================================
   Gold Coast Comics — child theme custom CSS
   Layered on top of Hummingbird's own compiled theme.css
   (use_parent_assets: true loads that first, this file after)
   ============================================================

   Every selector and CSS variable below was verified against the
   real hummingbird.zip you sent — not guessed. Specifically:
   - Bootstrap variables (--bs-primary, --bs-body-font-family, etc.)
     confirmed in assets/css/theme.css
   - .header-bottom / .navbar-brand .logo confirmed in
     src/scss/prestashop/layout/_header-bottom.scss
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette, sampled directly from the real logo file */
  --gcc-cyan: #16BAFE;
  --gcc-cyan-deep: #0A3A57;
  --gcc-orange: #FF3D00;
  --gcc-ink: #14181C;
  --gcc-site-blue: #9FD6EB;

  /* Re-point Bootstrap's own variables at our palette. This one change
     re-colors buttons, links, focus rings, and badges site-wide,
     because Hummingbird's whole component library is built on these
     CSS custom properties rather than hard-coded colors. */
  --bs-primary: var(--gcc-orange);
  --bs-link-color: var(--gcc-cyan-deep);
  --bs-body-font-family: 'Work Sans', sans-serif;
}

/* Headings use our bold display face, matching the logo's lettering */
h1, h2, h3, h4, h5, h6,
.header-bottom__h1 {
  font-family: 'Anton', sans-serif;
  letter-spacing: .3px;
}

/* ---- Header ---- */
.header-bottom {
  background-color: var(--gcc-site-blue);
  border-bottom: none;
}

.header-bottom .navbar-brand .logo {
  /* Parent theme caps this at 8-9rem / 3rem (see _header-bottom.scss).
     Raising both so our round logo reads clearly at the size we
     designed for in the mockups. */
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
}

/* ---- Footer ---- */
.footer {
  background-color: var(--gcc-ink);
}

.footer a {
  color: #fff;
}

.footer a:hover {
  color: var(--gcc-orange);
}

/* ============================================================
   HERO CAROUSEL — cap at 1280x500, scale responsively below that.

   Verified against the real ps_imageslider markup dumped from
   view-source: .ps-imageslider > .carousel-item > .ps-imageslider__figure
   > img.w-100. The parent theme puts no max-width on the container
   and sets img { height: auto } with fixed 320px/240px figure heights
   at the lg/md breakpoints — nothing caps it on wide screens, which
   is why it was stretching full-bleed. This replaces that with a
   locked aspect-ratio so it shrinks smoothly instead.
   ============================================================ */

.ps-imageslider {
  /* Full-width section — this is what actually shows behind the capped
     carousel below, so the background-color has to live HERE, not on
     the element that gets max-width + margin:auto. margin:auto pushes
     content inward but background-color only paints inside an element's
     own box, never its margin — so putting both on one element left the
     gutter showing the page's white background regardless of caching. */
  /* 2026-09-12: switched back to the base site-blue (same shade as
     .header-top / .header-bottom), replacing the lighter
     site-blue-light-2 accent used since 2026-09-11, per request. */
  background-color: var(--gcc-site-blue);
}

#ps_imageslider {
  /* This is the actual <div id="ps_imageslider" class="carousel slide">
     inside the section above — capping and centering THIS is what
     makes the blue show on either side once the browser is wider
     than 1280px. */
  max-width: 1280px;
  margin: 0 auto;
  /* 2026-09-12: framing border around the carousel itself, per
     request, same site-blue as the background above it. HONEST
     CAVEAT: because the border colour now matches the surrounding
     background exactly, it won't read as a visible outline against
     the blue section around it — it'll mostly show as a thin margin
     against the slide image itself (or wherever the image doesn't
     fully fill the frame). If you want it to actually stand out as
     a line, it'll need a different colour than the background --
     say the word and I'll switch it. */
  border: 4px solid var(--gcc-site-blue);
}

.ps-imageslider__figure {
  aspect-ratio: 1280 / 500;
  height: auto !important; /* overrides parent's fixed-height mobile/tablet breakpoints */
  overflow: hidden;
}

.ps-imageslider__figure img {
  width: 100%;
  height: 100%;
  /* "cover" was cropping the edges of your images to fill the box.
     "contain" shows the FULL image every time — since your source
     images aren't all exactly 1280x500 (some are 1200x500 or
     1250x500), this may letterbox slightly top/bottom on some
     slides, but that will show the site-blue background behind it
     rather than a gap, so it should blend in. */
  object-fit: contain;
}

/* ============================================================
   CAROUSEL TEXT BOX — smaller than the default. Bootstrap's
   .carousel-caption sets left:25%/right:25% (its width = middle
   50% of the slide) with a bold H1-sized heading. Pulling the
   left/right insets in further shrinks the box; shrinking the
   heading class effect via font-size does the same for the type.
   Neither of the underlying rules is !important, so this plain
   override wins without needing any cascade-layer tricks.
   ============================================================ */
.ps-imageslider__figcaption {
  left: 34%;
  right: 34%;
  padding: 0.6rem 0.9rem;
}

.ps-imageslider__figcaption .h1 {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
  /* TEMPORARY TEST — font-family reverted to the theme's own body font
     (this also overrides the site-wide h1-h6 Anton rule, which would
     otherwise still apply to this <h2>) and shadow removed, so you can
     see exactly what loads with none of our custom styling on top.
     Nothing lost — the previous version is in the turn above this one
     whenever you're ready to go back to it. */
  font-family: var(--bs-body-font-family);
}

.ps-imageslider__figcaption p {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  /* Same test — reverted to body font, no shadow. */
  font-family: var(--bs-body-font-family);
}

/* ============================================================
   FEATURED PRODUCTS GRID — 6 across on desktop instead of 4.
   Confirmed from theme.css: .products is a CSS grid, breakpoint-based
   grid-template-columns (1 col mobile → 2 → 3 → 4 at xl, 1200px+).
   None of this is !important, so a plain override wins. Targeting
   the same 1200px breakpoint the theme itself uses for consistency.
   ============================================================ */
@media (min-width: 1200px) {
  .products {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ============================================================
   FEATURED PRODUCTS — slightly larger images, no width change.
   The image already fills 100% of its grid column, so the only
   "free" space to reclaim without widening the whole row (which
   would misalign it against the badges row / hero above) is the
   gap BETWEEN the 6 images. Theme default is 1.5rem (24px);
   tightening it to 0.5rem (8px) gains each image ~7-8% more
   width — real, but well short of 30%. Scoped to just the
   homepage Featured Products section so it doesn't affect other
   product grids (category pages, related products, etc).
   Same unlayered-override logic as the grid-template-columns
   rule above — no !important needed.
   ============================================================ */
.ps-featuredproducts .products {
  gap: 0.5rem;
}

/* ============================================================
   CATEGORY SIDEBAR — dropdown arrows closer to category names.
   Parent theme's .category-tree__item-link has flex-grow:1 (fills
   the whole row width) and the accordion arrow button has
   margin-left:auto (pinned to the far right edge) -- so for any
   category name shorter than the sidebar's full width, there's a
   gap between the text and its arrow. Letting the link size to its
   own text (flex-grow:0) and giving the button a small fixed
   margin instead of auto pulls the arrow in right next to the
   name. Font size/colour untouched -- not targeted here at all.
   ============================================================ */
.category-tree__item-link {
  flex-grow: 0;
}
.category-tree__item-header.split .accordion-button {
  margin-left: 0.5rem;
}

/* ============================================================
   HOMEPAGE TEXT BLOCK — "Back Issue Comic Book Specialists" section.
   Confirmed class from ps_customtext.tpl: <section class="ps-customtext">.
   Matches the top banner blue; no competing background was set here
   by the parent theme, so no cascade-layer fight needed.
   ============================================================ */
.ps-customtext {
  /* 2026-09-12: switched to the base site-blue, same shade as
     .header-top / .header-bottom, replacing the lighter
     site-blue-light-2 accent used since 2026-09-11, per request. */
  background-color: var(--gcc-site-blue);

  /* Confirmed from ps_customtext.tpl: this section has NO padding at
     all — just <section class="ps-customtext"><div class="container">
     {cms text}</div></section>. With zero padding/border to contain it,
     the CMS heading's own default top margin "collapses through" the
     section and merges with whatever's above (the badge row) — a
     classic CSS quirk, not a deliberately-set gap. display: flow-root
     stops that collapsing, so the gap becomes fully controllable via
     the two rules below instead of an invisible inherited margin. */
  display: flow-root;
  padding-top: 0;
}

/* Zero out the heading's own top margin now that flow-root is
   containing it, so padding-top above is the ONLY thing setting this
   gap — tune that one number if you want it tighter/looser still. */
.ps-customtext .container > *:first-child {
  margin-top: 0;
}

/* ============================================================
   CATEGORY TILE ROW — the custom gcccategorybadges module (CGC
   Graded / Comic Books / Graphic Novels / Memorabilia / Books).
   This reflows the row for 6 tiles instead of 5. NOTE: this only
   changes the LAYOUT — the module currently only has 5 badges
   configured, so a 6th blank slot won't appear on its own. Adding
   an actual 6th category tile (e.g. "Magazines") needs to be done
   in the back office wherever that module's badges are configured,
   since I don't have that module's admin settings to check from
   here — happy to help style it once you've added it.
   ============================================================ */
@media (min-width: 768px) {
  .gcc-badges__inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* ============================================================
   HEADER RESTRUCTURE — single row, logo/wordmark left,
   search+nav grouped and right-aligned.

   Verified against the real markup dumped from view-source on
   goldcoastcomics: confirmed classes are .header-bottom__row,
   .navbar-brand .logo, #_desktop_ps_searchbar, .ps-mainmenu--desktop,
   .ps-mainmenu__tree-link. Nothing here is guessed.

   Pairs with templates/_partials/header.tpl (Smarty {extends} override)
   which adds the .gcc-brand wordmark markup and wraps displayTop's
   output (ps_mainmenu + ps_searchbar) in .gcc-header-right.
   ============================================================ */

.header-bottom .navbar-brand .logo {
  border-radius: 50%;
  border: 3px solid var(--gcc-ink);
}

.gcc-brand {
  gap: 14px;
}

.gcc-wordmark {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  line-height: 1.05;
  color: var(--gcc-cyan-deep);
  text-decoration: none;
  white-space: nowrap;
}

.gcc-wordmark .gcc-tld {
  font-size: 14px;
}

.gcc-wordmark .gcc-tagline {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gcc-cyan-deep);
  margin-top: 4px;
  white-space: normal;
}

/* Right-hand block: on mobile/tablet it's just the hamburger + search
   icon side by side; at xl+ (when the full menu + search box appear)
   it switches to a stacked, right-aligned column, matching the mockup. */
.gcc-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bootstrap's "container-md" class locks max-width to 720px from the
   md breakpoint UPWARD — it never grows again at lg/xl/xxl like plain
   .container does. That's what was forcing your 8 nav items into a
   cramped column and wrapping onto two lines (CGC COMICS...MEMORABILIA,
   then MAGAZINES/ADULTS ONLY on their own line), which in turn made the
   whole blue banner taller than it needs to be. Widening it lets the
   menu sit on one line and the banner shrink to fit it. */
.header-bottom__container {
  max-width: 1280px;
}

@media (min-width: 990px) {
  .gcc-header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* Parent theme sets ps-mainmenu order:1 and the search bar carries a
     Bootstrap "order-2" utility class — both after the logo, menu-then-
     search. We want search-then-menu, stacked, so flip both.

     IMPORTANT — CSS Cascade Layers: theme.css opens with
     "@layer vendors, bs-base, bs-components, bs-custom-components,
     ps-base, ps-components, ps-pages, ps-modules, utilities;" and
     Bootstrap's .order-2 utility is !important INSIDE that "utilities"
     layer (the LAST one declared).

     For normal-importance CSS, unlayered rules (like the rest of this
     file) always beat layered ones, so this has never been a problem
     anywhere else in this stylesheet. But !important flips the layer
     priority order: for !important declarations, the EARLIEST-declared
     layer wins, and anything unlayered is treated as if it came before
     even the first layer — i.e. it has the LOWEST priority of all for
     !important. So a plain unlayered !important here can never beat
     Bootstrap's !important utility, no matter how specific we make the
     selector.

     The fix: explicitly join the "vendors" layer — it's the first one
     theme.css declares, so for !important comparisons it now outranks
     "utilities" (and everything else). We're not creating a new layer
     here, just adding declarations into that already-existing one. */
  @layer vendors {
    .gcc-header-right #_desktop_ps_searchbar {
      order: 1 !important;
    }

    .gcc-header-right .ps-mainmenu--desktop {
      order: 2 !important;
      flex: 0 0 auto !important; /* parent's col-xl auto-grows to fill the row — stop that */
    }
  }

  #_desktop_ps_searchbar .ps-searchbar__form {
    width: 320px;
  }
}

/* Forces a genuine 2-row nav layout at EVERY desktop width, not just
   a narrow in-between zone. Originally this only applied from
   990-1199.98px, leaving anything 1200px+ uncapped — which worked
   fine at 8 items (screenshot 04, single row) but meant more items
   (9-11) still squeezed onto one full-width row, and fewer items
   (e.g. 8) could still land on a single too-wide row at some
   in-between sizes ("07 - not perfect"), depending on exactly how
   much room they needed.

   Removing the upper bound sidesteps needing to detect item count in
   CSS at all: the 620px cap is now always on above 990px. Whatever
   doesn't fit in 620px wraps to a 2nd row, whatever does fit stays on
   one row — same rule handles 1 item or 11 without caring which.
   990px hamburger cutoff confirmed still correct via DevTools
   measurement (2026-09-27), so that boundary is unchanged. */
@media (min-width: 990px) {
  .gcc-header-right {
    max-width: 620px;
  }
}

/* Compact, uppercase nav to match the mockup's small-caps style */
.ps-mainmenu__tree-link {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.ps-mainmenu__tree-link:hover {
  color: var(--gcc-orange) !important;
}

/* ============================================================
   DROPDOWN FLYOUT — the tab-style headers on the left side of each
   nav item's dropdown panel (e.g. hover "Comic Books" > the column
   of sub-genre labels). Confirmed class from hummingbird's own
   _mainmenu.scss: .submenu__left-item. Bumping weight/size only —
   the hover/active states already come from the parent theme.
   ============================================================ */
.submenu__left-item {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ============================================================
   NEWSLETTER SECTION — match the top banner's blue instead of the
   parent theme's default bg-body-tertiary (light grey).
   Confirmed class from ps_emailsubscription.tpl: <section class="
   ps-emailsubscription bg-body-tertiary ...">

   .bg-body-tertiary is !important inside theme.css's "utilities"
   cascade layer (the last-declared layer). Same issue as the search
   bar above: !important reverses layer priority, so our unlayered
   !important was always going to lose. Joining the "vendors" layer
   (first-declared, so highest !important priority) fixes it — see the
   longer explanation up in the HEADER RESTRUCTURE section.
   ============================================================ */
@layer vendors {
  .ps-emailsubscription.bg-body-tertiary {
    background-color: var(--gcc-site-blue) !important;
  }
}

/* ============================================================
   SOCIAL ICON ROW — the Facebook/X/etc. strip in the black bar just
   above the newsletter section. Confirmed class from
   ps_socialfollow.tpl: <div class="ps-socialfollow py-4">.
   Hidden per request; delete this rule to bring it back.
   ============================================================ */
.ps-socialfollow {
  display: none;
}

/* ============================================================
   SESSION 3 TIDY-UP
   ============================================================ */

/* ---- Carousel: resize to 1140x445, was 1280x500 ----
   Same technique as before — cap + center the inner carousel div,
   lock the figure to the new ratio. */
#ps_imageslider {
  max-width: 1140px;
}

.ps-imageslider__figure {
  aspect-ratio: 1140 / 445;
}

/* ---- Category badge row: solid color, no more bleed trick needed ----
   Originally had a box-shadow "bleed" here to paper over what looked
   like a seam between sections. Turned out the real cause (found much
   later) was the outer #content grid's own 40px "gap" — see
   .page-content--home near the end of this file. Now that that's
   fixed at the source, this section just needs its own background;
   no bleed required, and the bleed was actually causing a NEW bug
   once the grid gap was removed — with no more empty space between
   sections for it to fill, the box-shadow was painting 40px into the
   carousel above instead (that's the carousel indicator dots showing
   up "inside" the orange rectangle). */
.gcc-badges {
  position: relative;

  /* 2026-09-12: switched to the base site-blue, same shade as
     .header-top / .header-bottom, replacing the lighter
     site-blue-light-2 accent used since 2026-09-11, per request. */
  background: var(--gcc-site-blue);

  /* Now that we have the real badges.css: the module sets
     "padding: 28px 0" — equal 28px top and bottom around the badge
     circles. Top all the way to 0 per your request (was 10px). Bottom
     brought down from 28px to 8px too, since you asked for that gap
     tighter as well — this is a first pass, easy to tune further.
     Same specificity as the module's own rule (both single-class), and
     this file loads after badges.css, so plain source order is enough
     to win — no !important or layer trick needed. */
  padding-top: 0;
  padding-bottom: 8px;
}

/* Tiles (the circles themselves) — back to plain white per badges.css
   default; no override needed here anymore, keeping the rule as a
   no-op placeholder in case you want a different tile color later. */
.gcc-badge__ring {
  background: #fff;
}

/* DEFENSIVE FIX for the still-unexplained ~36-40px of extra space
   between the section edges and the circles themselves. I traced the
   math (64px ring + 8px gap + label + 8px gap + sub-label ≈ 114px
   content height + our 0/8px padding ≈ 122px total) and it doesn't
   match what's showing on screen — so something is adding space that
   isn't accounted for by anything in badges.css or the padding rules
   above. Rather than guess at ONE cause, this neutralizes every likely
   suspect at once: any stray margin on the badge or its parts, and grid
   row-stretching if the row ever ends up taller than its content.
   If the gap is still there after this, it's something I can't see
   from CSS alone — see my note below on how to pin it down exactly. */
.gcc-badges__inner {
  align-content: start;
}

.gcc-badge,
.gcc-badge__ring,
.gcc-badge__label,
.gcc-badge__sub {
  margin: 0;
}

/* ---- Brand wordmark: bigger, and centred against the logo ----
   .gcc-brand already inherits d-flex + align-items-center from the
   template markup (both the logo and the wordmark are flex children of
   the same row), so centering itself is structural; this just makes
   sure it's explicit here too, and bumps the type up. */
.gcc-brand {
  align-items: center;
}

.gcc-wordmark {
  font-size: 26px;
}

.gcc-wordmark .gcc-tld {
  font-size: 18px;
}

.gcc-wordmark .gcc-tagline {
  font-size: 12px;
  margin-top: 6px;
}

/* ---- Search bar + nav: pull them to the top of the header, tight
   against each other, with the nav's bottom lining up near the bottom
   of the logo ----
   The row itself (.header-bottom__row) now uses align-items-start
   (changed directly in header.tpl, not overridden here) instead of
   align-items-center, so the brand block (logo+wordmark, still
   internally centered on itself) and the search+nav block both start
   from the same top edge of the row — which puts the search bar level
   with the top of the wordmark instead of vertically centered against
   the full 130px logo height. */
@media (min-width: 990px) {
  .gcc-header-right {
    gap: 4px;
  }
}

/* ---- Search bar: black outline box like the mockup ----
   Confirmed from the real ps_searchbar.tpl + _searchbar.scss: the
   visible border currently comes from .form-control on the actual
   input (.ps-searchbar__input) — .ps-searchbar__form itself carries no
   border of its own. Overriding the input directly, rather than a
   wrapper, is what actually draws the ink outline the mockup shows. */
#_desktop_ps_searchbar .ps-searchbar__form {
  width: 300px;
}

#_desktop_ps_searchbar .ps-searchbar__input {
  border: 2px solid var(--gcc-ink);
  border-radius: 6px;
}

#_desktop_ps_searchbar .ps-searchbar__input:focus {
  border-color: var(--gcc-ink);
  box-shadow: none;
}

/* ---- Nav: bolder, smaller ---- */
.ps-mainmenu__tree-link {
  font-weight: 700;
  font-size: 11.5px;
}

/* ============================================================
   NAV WRAPPING — let it go to 2 lines instead of the header
   growing tall, then only collapse to the hamburger once even 2
   lines won't fit.

   The parent theme's .ps-mainmenu__tree already has flex-wrap: wrap
   by default (confirmed in _mainmenu.scss) — that's not something we
   need to add, it's already why the nav wraps instead of overflowing.
   The actual problem is padding: 1.25rem top/bottom (20px) on EVERY
   .ps-mainmenu__tree-link, and the same on the dropdown-toggle chevron
   buttons. One line of that is already ~48px tall with its line-height;
   two lines is close to 100px — plus your ~44px search bar above it —
   pushes past your 130px logo height, which is what was making the
   header grow ("fat") before it reached the 1200px hamburger cutoff.

   Your logo is what currently sets the header's height (130px), and
   the search+nav stack only needs to fit inside that. Shrinking this
   padding (roughly a quarter of the original) means a full 2-line wrap
   comfortably fits under 130px, so the nav can wrap without the header
   growing at all.

   Below 1200px the desktop nav still switches to the hamburger, same
   as before (that's a fixed Bootstrap xl breakpoint in the parent
   theme, not something worth fighting with CSS). If you still see the
   header growing anywhere in the 1200px+ range after this, the fallback
   is swapping to the hamburger at a wider custom breakpoint (e.g. 1350px)
   instead of 1200px — say the word and I'll wire that up instead.
   ============================================================ */
.ps-mainmenu--desktop .ps-mainmenu__tree-link {
  padding: 0.3rem 0.4rem;
}

/* Tighter label-to-chevron gap — two changes, for two different
   causes:

   1. The chevron itself is a Material Icons glyph, and Bootstrap sizes
      it at font-size:1.375em with width/height:1em — so the icon's own
      bounding box (not padding) is the biggest single contributor to
      that visible gap. The button doesn't set its own font-size, so it
      was inheriting ~16px (1rem), making the glyph box ~22px wide on
      its own. Setting a smaller font-size directly on the button
      shrinks the glyph proportionally.
   2. Pulling the link's own right-padding in tightens the rest. The
      :has() selector (supported in current Chrome/Opera) only applies
      it to links that actually have a chevron next to them, so plain
      links like "CGC Comics" keep even padding on both sides. */
.ps-mainmenu__tree-item-wrapper:has(.ps-mainmenu__tree-dropdown-toggle) .ps-mainmenu__tree-link {
  padding-right: 0.1rem;
}

.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle {
  padding: 0.3rem 0.05rem;
  font-size: 0.75rem;
}

.ps-mainmenu--desktop .ps-mainmenu__tree {
  gap: 0.3rem;
  row-gap: 0.15rem;
}

/* ============================================================
   TWO-ROW NAV — take over the desktop-nav/hamburger swap from
   Bootstrap's fixed 1200px (xl) breakpoint entirely, and move it down
   to 990px, so there's real room between 990-1200px for the nav to
   wrap onto 2 rows (now that the padding above makes 2 rows fit inside
   the 130px logo height) instead of jumping straight to the hamburger.

   Both .ps-mainmenu__desktop (nav) and .ps-mainmenu__mobile-toggle
   (hamburger button) need to flip at the SAME width, or you'd get a
   gap where neither shows, or both show at once.

   - The nav uses Bootstrap's .d-none.d-xl-block utility classes, which
     are !important inside the "utilities" cascade layer (same issue as
     the search-bar order and newsletter background earlier in this
     file) — so this needs the "join the vendors layer" trick again to
     actually win.
   - The hamburger toggle's visibility comes from a plain (non-important)
     SCSS media query, not a Bootstrap utility class, so a normal
     unlayered override beats it with no extra trick needed.

   990px gives a safety margin past both browsers' measured "too fat"
   zones (Chrome 958-970px, Opera 968-983px) — see the longer note above
   the 2-row max-width rule for the full reasoning. */
@layer vendors {
  .ps-mainmenu__desktop {
    display: none !important;
  }

  @media (min-width: 990px) {
    .ps-mainmenu__desktop {
      display: block !important;
    }
  }
}

.ps-mainmenu__mobile-toggle {
  display: flex;
}

@media (min-width: 990px) {
  .ps-mainmenu__mobile-toggle {
    display: none;
  }
}

/* ---- Category badge titles: kill the faux-bold blur ----
   Confirmed from theme.css: the base h1-h6 rule sets font-weight:600
   on every heading, including our .gcc-badge__label (an <h3>). Anton
   is a single-weight display font — this is the exact same "faux bold"
   problem already fixed once on the ".com" wordmark suffix. Anton is
   visually bold/heavy by design, so dropping the weight back to normal
   keeps it looking bold while removing the browser-synthesized blur. */
.gcc-badge__label {
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* ============================================================
   THE REAL SOURCE OF THE "MYSTERY GAP" — found via your box-model
   screenshots. #content.page-content--home (the homepage's outer
   wrapper — carousel, badges, text block, Featured Products all live
   inside it) is a CSS Grid with "gap: 2.5rem" (40px), confirmed in
   theme.css. Every one of those sections is a grid row, and the
   browser was inserting 40px between EVERY pair of them automatically
   — completely separate from any padding we were tuning on .gcc-badges
   itself. That's why carousel-to-badges measured ~40px despite
   padding-top: 0 (the padding was correctly 0 — the 40px was the grid
   gap alone), and badges-to-text measured ~48px (40px grid gap + our
   own 8px padding-bottom, stacked together).

   This turns that automatic gap off site-wide, so every section
   boundary from here on is controlled purely by each section's own
   padding — the padding values already set above (0 top on
   .gcc-badges, 8px bottom, 0 on .ps-customtext) become the ACTUAL,
   final gap with nothing hidden underneath.

   Not layered/important in theme.css, so this plain override wins on
   its own — no cascade-layer trick needed.

   HEADS UP: this also removes the 40px gap between the text block and
   Featured Products, and between Featured Products and the newsletter
   section further down — those may now look too tight, since they
   were likely designed assuming this 40px was there. Take a look at
   the whole page top-to-bottom after this change, not just the badges
   area, and let me know if any of those other boundaries need padding
   added back in. */
.page-content--home {
  gap: 0;
  /* 2026-09-12: the parent theme paints #content.page-content--home
     white by default, which was showing as a white margin around the
     homepage's blue sections -- along the top edge above the
     carousel, and down the left/right sides of the text bar and
     badges row (it stops at Subscribe because that block sits
     outside #content, as its own separate hook, with its own
     background already). Setting it to the same site-blue as the
     header closes that gap up. UNCONFIRMED live: I can't see the
     actual rendered page from here, so take a look and let me know
     if any white sliver is still showing somewhere this doesn't
     reach. */
  background-color: var(--gcc-site-blue);

  /* 2026-09-12 follow-up, per your latest screenshot: the background
     fix above worked, but it revealed a WHITE BORDER tracing the
     whole rounded rectangle -- something the parent theme puts on
     #content.page-content--home itself (invisible before, against a
     white background). BEST GUESS, unconfirmed: I don't have
     theme.css open in this session to see the exact rule, so I can't
     tell you for certain whether it's a literal `border` or a
     `box-shadow`. This assumes border and recolours it to match the
     Contact-us bar. If it's still showing after this, it's a
     box-shadow instead -- tell me and I'll switch approach (or send
     me a screenshot of DevTools' computed styles for #content and
     I'll target it exactly first time). */
  border-color: var(--gcc-site-blue) !important;
}

/* ============================================================
   HOMEPAGE SECTION ORDER — badges row moved from carousel→badges→text
   to carousel→text→badges→Featured Products, without touching any
   template markup. #content.page-content--home is a CSS Grid (see
   above), and every one of these sections is a direct grid item, so
   the standard "order" property reorders them visually with zero HTML
   changes — the DOM order (and therefore tab/reading order for screen
   readers) stays exactly as PrestaShop renders it.
   ============================================================ */
.ps-imageslider {
  order: 1;
}

.ps-customtext {
  order: 2;
}

.gcc-badges {
  order: 3;
}

.ps-featuredproducts {
  order: 4;
  /* Small breathing room between the blue badges section above and
     "Featured products" — longhand so it only adds top spacing
     without touching whatever left/right/bottom padding the theme
     already sets on this section. */
  padding-top: 8px;
  /* 2026-09-12: matching site-blue frame around the whole Featured
     Products block, per request -- same colour as the carousel
     border above and the header/top bar. This one should actually
     be visible as a line, since the tiles inside are getting a white
     background below, giving the border something lighter to stand
     out against. */
  border: 4px solid var(--gcc-site-blue);
  border-radius: 10px;
}

/* ============================================================
   FOOTER WORK — merged in from custom(sg04).css, developed in a
   separate session against the footer.tpl/copyright.tpl/
   ps_contactinfo.tpl overrides. Verified those template overrides
   (in the zip you sent) use exactly the class names and
   aria-labelledby values this CSS targets — nothing here is guessed.
   ============================================================ */

/* Shrink the overall footer height: tighter vertical padding and block
   spacing than Hummingbird's defaults. Not wrapped in a media query, so —
   because this file loads after the theme's compiled CSS — it wins at
   every breakpoint, including the ones where Hummingbird's own SCSS sets
   larger spacing for md and up. */
.footer__main {
  padding-block: 1rem 0.75rem;
}

.footer-block {
  margin-block-end: 0.5rem;
}

.footer-block__title {
  margin-block-end: 0.35rem;
}

.footer-block__list a,
.ps-contactinfo__phone a,
.ps-contactinfo__fax a {
  padding-block: 0.1rem;
  line-height: 1.2;
}

.ps-contactinfo__infos {
  line-height: 1.2;
}

/* One size down from the theme's 1rem base, bold, right across the
   footer. Only the 4 column headers go fully uppercase; everything else
   uses "capitalize" instead — that only forces the first letter of each
   word to a capital and leaves the rest of the string exactly as typed,
   so it reads as title case regardless of how it's stored in the back
   office, and it won't clobber something already-correct like a mixed
   case shop name, or the deliberately all-caps "ON SALE" link (capitalize
   never lowercases anything, it only ever uppercases a first letter). */
.footer-block__title {
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  text-transform: uppercase;
}

.footer-block__list a,
.ps-contactinfo__phone a,
.ps-contactinfo__fax a {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: capitalize;
}

/* Left as-is (no case transform) so these render exactly as stored in
   the back office: the shop name / address block, and the email —
   which needs to stay fully lowercase. */
.ps-contactinfo__infos,
.ps-contactinfo__email a {
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Left-align the copyright line — Hummingbird centers .copyright by
   default (see _copyright.scss) — and shrink it down a size, since it's
   the least important line in the footer. Also styles the second credit
   line added via the copyright.tpl override. */
.copyright {
  text-align: left;
  font-size: 0.75rem; /* 12px, one step below the rest of the footer */
  padding-block-start: 0.5rem;
}

.copyright__separator {
  color: var(--bs-gray-300, #a6a6a6);
}

.copyright__custom {
  color: var(--bs-gray-300, #a6a6a6);
}

/* 5 equal columns across the footer row (was 4 at col-lg-3/25% each):
   Products | Our company (split into 2) | Your account | Shop information.
   "Our company" is given double width and its own <ul> is turned into a
   2-column CSS multi-column layout, so the links auto-flow into two visual
   columns with no second heading — no template change needed for the
   split itself. Targeted by aria-labelledby, which is stable regardless
   of DOM tag (nav vs section) or admin-side title renames.
   Only applied at the col-lg breakpoint and up, so mobile/tablet keep
   Hummingbird's normal stacked/2-up behaviour. */
@media (min-width: 992px) {
  .footer__main-top [aria-labelledby="footer_title_1"],
  .footer__main-top [aria-labelledby="footer_customeraccount_title"],
  .footer__main-top [aria-labelledby="footer_contactinfo_title"] {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .footer__main-top [aria-labelledby="footer_title_2"] {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .footer__main-top [aria-labelledby="footer_title_2"] .footer-block__list {
    column-count: 2;
    column-gap: 1.5rem;
  }

  .footer__main-top [aria-labelledby="footer_title_2"] .footer-block__list li {
    break-inside: avoid;
  }
}

/* ============================================================
   BREADCRUMB — align "Home / ..." with the tagline instead of
   sitting under the logo, on inner pages (product/category/CMS pages
   that don't have the carousel). Confirmed real markup from the
   parent theme's own breadcrumb.tpl (no child override exists for
   it): <nav class="breadcrumb__wrapper"><div class="container">
   <ol class="breadcrumb">.

   Two things going on:
   1. The breadcrumb's <div class="container"> is a PLAIN Bootstrap
      .container, which has its own responsive max-width table —
      different from header-bottom__container (which we capped at
      1280px). Matching that max-width here means both containers are
      centered identically and share the same left edge at every
      viewport width, not just coincidentally at some.
   2. padding-left is set to clear the logo + the gap next to it, so
      the text starts where the wordmark starts: logo max-width
      130px + .gcc-brand's 14px gap + Bootstrap's own ~12px container
      gutter ≈ 156px.

   HONEST CAVEAT: I've grounded this in the real numbers already set
   elsewhere in this file (the 130px logo, the 14px brand gap), but I
   can't load the live page to confirm the wordmark's exact final
   pixel position — there could be a few px of rounding I'm not
   accounting for. Take a look and tell me if it needs nudging either
   way.
   ============================================================ */
.breadcrumb__wrapper .container {
  max-width: 1280px;
  padding-left: 156px;
}

/* ============================================================
   NEWSLETTER SENTENCE — align its left edge with "PRODUCTS" in the
   footer below (both sections use the same plain .container, so they
   share the same left edge once Bootstrap's row-centering is
   removed), and stop it wrapping onto 2 lines.

   .justify-content-center is a Bootstrap utility class and is
   !important in the "utilities" layer — same situation as the search
   bar order-flip and the newsletter background earlier in this file —
   so overriding it needs to join the "vendors" layer (see the longer
   explanation up in the HEADER RESTRUCTURE section for why).
   ============================================================ */
@layer vendors {
  .ps-emailsubscription .row.justify-content-center {
    justify-content: flex-start !important;
  }
}

/* The paragraph is currently locked to Bootstrap's col-lg-4 (a fixed
   33% width), which is what's forcing the wrap. .col-lg-4 itself is
   NOT !important (it's part of Bootstrap's grid system, not a utility
   class), so this plain override is enough — no layer trick needed
   here. Letting it size to its actual text width (auto) instead of a
   fixed column stops the wrap and means the form naturally starts
   right after it rather than in a separate fixed-width column. */
.ps-emailsubscription .col-lg-4 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}

/* Breathing room between the sentence and the email box, now that
   they're sitting right next to each other instead of in two fixed
   grid columns. */
.ps-emailsubscription form.col-lg-6 {
  margin-left: 1.5rem;
}

/* HONEST CAVEAT: this should land the sentence very close to flush
   with "PRODUCTS", assuming the footer's row uses Bootstrap's default
   gutter (same as this row). If the footer row uses different gutter
   classes (gx-2/gx-md-4 etc., like the header does), there could be a
   small remaining offset — let me know what you see and I can nudge
   it with an exact margin-left if so. */

/* ============================================================
   Single product page — Description / Product Details / Data
   sheet, 2026-09, REDESIGNED 2026-09-14 per request
   ============================================================
   New layout, 2026-09-14 (later): Description -- when present --
   spans the FULL width of .product__bottom-left, sitting in its own
   row above Product Details and Data sheet, which sit side by side
   in the row below it at their EXISTING widths, unchanged. This
   replaces the earlier version (Description sharing column 1's
   width with Product Details, stacked) -- per request, Description
   needs to be much wider once it's carrying a lot of text, while
   Data sheet's width should stay exactly as it is. Giving
   Description the full row (spanning across where the blank third
   column sits too) does that without touching Product Details or
   Data sheet's own grid-column/width at all.

   2026-09-14 (earlier the same day): columns 1 and 2 widened from
   equal 1fr/1fr/1fr (each a third) to 4fr/4fr/1fr (each ~44% of the
   row) -- per request, roughly a 33% width increase for both,
   shrinking column 3 down to a narrow blank strip rather than a
   full third. This is also most of what fixes the Data sheet
   wrapping problem (see the nowrap rule further down for the rest).
   These stay exactly as they were -- Description spanning over the
   top of them doesn't change Product Details/Data sheet's own
   widths, only what sits above them.

   No-description case, confirmed unchanged: Product Details and Data
   sheet both fall back to row 1 (nothing above them) when
   #product_description isn't present, which is the same "current,
   fine" arrangement from before this change -- neither of their grid-
   column values moved, only which row they land in.
   ============================================================ */
@media (min-width: 992px) {
  .product__accordion.accordion-flush {
    display: grid;
    grid-template-columns: 4fr 4fr 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 2rem;
    row-gap: 1rem;
    max-width: 1280px;
    margin-inline: auto;
  }
  /* Description: spans columns 1-2 only (Product Details + Data
     sheet's combined width), row 1. Stops short of column 3 on
     purpose, per request -- previously spanned all three columns
     (1 / 4), which let it run wider than Product Details + Data
     sheet's combined width by however wide the blank third column
     is. This targets the ONE actual direct child of
     .product__accordion.accordion-flush carrying .accordion-item --
     Product Details/Data sheet don't compete for this because
     they're real DOM children of .js-product-details, not of this
     element, regardless of display:contents below. */
  .product__accordion.accordion-flush > .accordion-item {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  /* Product Details and Data sheet both live inside this one wrapper div
     (js-product-details). display:contents removes the wrapper from
     grid layout purposes so its two children can each be placed into
     the grid individually below. */
  .js-product-details {
    display: contents;
  }
  /* Product Details: column 1. Row 2 (below Description) when
     Description exists, row 1 (its own, with nothing above it) when
     it doesn't -- same :has() detection as before, only the target
     row number changed (2, not 3, since Description is no longer
     sharing column 1 with it). */
  .product__accordion.accordion-flush:has(#product_description)
    .js-product-details
    > .accordion-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .product__accordion.accordion-flush:not(:has(#product_description))
    .js-product-details
    > .accordion-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  /* Data sheet: column 2, same row logic as Product Details --
     row 2 alongside it when Description exists, row 1 when it
     doesn't. No longer spans two rows (1/3) since Description now
     lives in its own separate full-width row rather than sharing
     column 1's height. */
  .product__accordion.accordion-flush:has(#product_description)
    .js-product-details
    > .accordion-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }
  .product__accordion.accordion-flush:not(:has(#product_description))
    .js-product-details
    > .accordion-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .product__accordion.accordion-flush > .accordion-item,
  .js-product-details > .accordion-item {
    /* 2026-09-14: doubled from 1px to 2px, and switched to
       currentColor, per request to match "Data sheet"'s own text
       colour. Checked the actual source rather than going by eye on
       a screenshot: the accordion button's colour is
       var(--bs-accordion-btn-color), which resolves to
       var(--bs-body-color) -- and separately, --bs-heading-color is
       set to a literal "inherit" everywhere in this theme, so there's
       no special heading-blue at play here despite how it may look
       in a compressed screenshot. currentColor picks up
       .accordion-item's own color (var(--bs-accordion-color), same
       ultimate value) automatically, so this will keep matching the
       text even if that ever changes, rather than a hardcoded hex
       that could drift out of sync. */
    border: 2px solid currentColor;
    border-radius: var(--bs-border-radius);
  }
  /* Title padding -- was flush against the border on all sides
     (theme sets --bs-accordion-btn-padding-x: 0 for this "flush"
     accordion variant). Adding horizontal padding to match the
     0.75rem indent already used inside the body content below
     (.details__item, and now .product__description-body next to it)
     so "Description", "Product Details" and "Data sheet" line up
     with "CGC", "Issue" etc. underneath them, and so the text isn't
     touching the border on any side. */
  .product__accordion.accordion-flush .accordion-button {
    padding-inline: 0.75rem;
  }
  /* Body padding to match -- .details__item already had its own
     0.75rem horizontal padding (kept, see the rule further down),
     but Description's own body content had none at all, sitting
     flush left same as the old title did. Matching it here. Also
     adds the "blank line" gap you asked for between the end of the
     description text and the bottom border -- 1.5rem is roughly one
     blank line at this theme's line-height. */
  #product_description .accordion-body {
    padding-inline: 0.75rem;
    padding-block-end: 1.5rem;
  }
}

/* Tighter label/value spacing inside these three sections.
   Core theme hardcodes .details__left to a flat 50% of the row, which
   is why the gap between a short label and its value could run out to
   ~300px+ on a wide screen — the label column was always half the row
   no matter how short the label text was. This replaces that with a
   single fixed column width sized to comfortably fit the longest label
   in use ("Country of Publication") plus a consistent buffer.

   2026-09-14: cut from 240px to 185px, per request -- you measured the
   label-to-value gap at ~105px and wanted it roughly halved to ~50px.
   Since this is one fixed width shared by every row (so values stay
   aligned in a column, not ragged), reducing it by ~55px should trim
   that same ~55px off the gap on every row, not just the one you
   measured -- rows with longer labels (closer to the width already)
   will see less change than rows with short ones. Still an estimate
   the way the original 240px was; nudge this one number again if
   50px isn't quite what you see. */
:root {
  --gcc-details-label-width: 185px;
}
.js-product-details .details__item {
  padding: 0.5rem 0.75rem;
}
.js-product-details .details__left {
  flex: 0 0 var(--gcc-details-label-width);
  width: auto;
}
.js-product-details .details__right {
  flex: 1 1 auto;
}
/* Data sheet values not wrapping onto a second line, per request.
   The column widening above (4fr/4fr/1fr) does most of the work
   already, but this guarantees it regardless of column width, for
   values like "Very Fine" or "Marvel Comics". HONEST TRADE-OFF: a
   genuinely long value (a long CGC label variant, say) would now
   overflow its cell instead of wrapping, rather than growing the row
   taller. Say the word if you hit one of those and I'll scope this
   to exclude it. */
.js-product-details .details__right {
  white-space: nowrap;
}

/* ============================================================
   VIEWED PRODUCTS (sidebar instance only) — larger, fixed-size
   images, 2026-09
   ============================================================
   Two separate copies of the "Viewed products" widget render on
   every single-product page (ps_viewedproduct module, hooked twice
   via displayProductButtons-triggered cookie write + displayFooterProduct
   render, called from two spots in the page template): one inside
   .product__additional-info (the narrow column next to price/Add to
   Cart), one further down in full-width page flow after "4 other
   products in the same category". Confirmed from the CTRL+U source —
   both render the identical bare <section><h2>Viewed products</h2>
   <div class="products"> markup and the same
   catalog/_partials/miniatures/product.tpl partial, so the only real
   difference between them is how much width their parent container
   gives them.

   The full-width instance already renders at normal tile size and is
   left untouched here. The narrow instance inherits the same
   responsive .products grid used everywhere else on the site (up to
   4 columns at wide widths), which works fine in a full-width row but
   squeezes each image down to ~45x70px once that same grid has to fit
   inside a ~350-450px sidebar column instead.

   Fix: scoped to .product__additional-info .products only, so nothing
   else on the site is touched. Swaps the responsive grid for a
   horizontally-scrolling flex row of fixed-width tiles sized close to
   the ~135x210px requested — there's no column width in that narrow a
   space that fits more than one product AND keeps a reasonably sized
   image, so a horizontal scroll strip is the natural fit here rather
   than trying to force the full grid into less room.
   ============================================================ */
.product__additional-info .products {
  display: flex;
  grid-template-columns: unset; /* clears the inherited grid so flex takes over cleanly */
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem; /* room for the scrollbar without clipping the last tile */
  scroll-snap-type: x proximity;
}

.product__additional-info .products .product-miniature {
  flex: 0 0 135px;
  scroll-snap-align: start;
}

/* No explicit height rule needed: product-miniature__image is
   width:100% of its container per the parent theme's own
   _product-miniature.scss, and these are portrait comic covers —
   fixing the tile's width above is enough to bring the image itself
   close to the ~135x210px requested, since height follows the
   image's own aspect ratio automatically. */

/* ============================================================
   VIEWED PRODUCTS (sidebar instance only) — visual cap at 3 items
   ============================================================
   The sidebar and full-width "Viewed products" instances share one
   PHP-built product list (same module, same $products array) --
   there's no back-office setting that can give them two different
   counts. The module's own "number of products" setting (Modules >
   Viewed products block > Configure) sets the count for BOTH
   instances at once. If you want the full-width one at 4 but the
   sidebar strip at 3, set the module to 4 and let this rule visually
   trim the sidebar's 4th tile -- the 4th product is still fetched and
   in the DOM, just hidden here, so nothing breaks if you later widen
   the column or remove this rule.
   ============================================================ */
.product__additional-info .products .product-miniature:nth-child(n + 4) {
  display: none;
}

/* ============================================================
   PRICE — centered everywhere, 2026-09
   ============================================================
   Two separate class families cover every price on the site:
   .product-miniature__* (any product tile -- category grids, Viewed
   products, "4 other products", featured products, related products
   -- all of these share catalog/_partials/miniatures/product.tpl or
   our child-theme copy of it) and .product__* (the single product
   page). Centering both families here covers every page in one place
   rather than needing a rule per listing.
   ============================================================ */
.product-miniature__infos {
  justify-items: center;
  text-align: center;
}

.product-miniature__prices {
  justify-content: center;
}

.product__prices {
  text-align: center;
}

.product__prices-block {
  align-items: center;
}

.product__prices-inline {
  justify-content: center;
}

/* ============================================================
   UPCOMING EVENTS PAGE (CMS id 7) — event card grid.
   Scoped to body.cms-id-7 only (confirmed via view-source: every
   CMS page gets a unique cms-id-N body class), deliberately NOT
   site-wide, so no other CMS page inherits this background.
   Added 2026-09-10.
   ============================================================ */
body.cms-id-7 {
  background-color: var(--gcc-site-blue);
}
/* NOTE: the breadcrumb override that used to live here (scoped to just
   this page) was removed 2026-09-10 -- .breadcrumb__wrapper now gets a
   single site-wide rule further down this file instead, so every page
   (including this one) matches. */

.gcc-events-grid {
  margin: 32px 0;
}
.gcc-events-grid .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.gcc-event-col {
  padding: 0 12px;
  margin-bottom: 24px;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .gcc-event-col { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .gcc-event-col { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

.gcc-event-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(10, 58, 87, 0.25);
}
.gcc-event-card__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.gcc-event-card__body {
  padding: 20px 40px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.gcc-event-card__title {
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--gcc-cyan-deep);
  text-align: center;
}
.gcc-event-card__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
  margin: 0 0 20px;
  flex-grow: 1;
  text-align: justify;
  text-align-last: center;
}

/* Button styled fully by hand (no .btn/.btn-primary classes) so it
   isn't affected by the --bs-primary -> orange repoint at the top of
   this file -- keeps it the same blue as the rest of the site's CTAs. */
.gcc-event-card__btn {
  display: inline-block;
  align-self: center;
  margin: 0 auto;
  background: var(--gcc-cyan);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 6px;
}
.gcc-event-card__btn:hover {
  background: var(--gcc-cyan-deep);
}

/* ============================================================
   SIDEBAR ("category-tree" left-column block) — tighter spacing
   + site-blue background, site-wide on every page it appears.
   Added 2026-09-10.

   WIDTH NOTE: layout-left-column.tpl already narrows the sidebar
   column to col-lg-2 (from the parent theme's col-lg-3) and this
   layout file is used identically everywhere the left column
   renders -- there's no per-section variant, so "one design for
   everything" is already how it works. Nothing to change here for
   width/consistency; this section only touches spacing + colour.

   SPACING: .category-tree__list and .category-tree__item-header
   are the SAME classes at every depth (top-level categories and
   the subcategories revealed by the expand arrows both use them),
   so one change here affects both list levels at once, as asked.
   Parent theme defaults: row-gap: 0.5rem (8px) between items, plus
   padding: 0.25rem 0 (4px top + 4px bottom) on each item's own
   header -- roughly 16px of box-model gap between two rows, though
   line-height/font metrics stack on top of that and can make it
   read as more like the 25-28px you measured. Halving both
   the row-gap and the padding halves the total gap the same way.

   2026-09-13 (evening) follow-up: tightened further, per request,
   down toward the 10-15px range. HONEST CAVEAT: at this point the
   row-gap + padding box-model total is only a few px -- most of
   whatever visible gap remains is coming from the links' own
   line-height (inherited at 1.5, i.e. 24px tall per line at the
   default 16px font), which I can't confirm the exact rendered
   value of from this file alone. Added a tighter line-height here
   too as a reasonable attempt at closing that gap further; if the
   rows still look wider than 10-15px apart after this, that's the
   line-height still doing most of the work, and I'd need the
   Computed-tab line-height value (same DevTools technique as
   before) to dial it in precisely rather than guess again.
   ============================================================ */
.category-tree__list {
  row-gap: 0.125rem;
}
.category-tree__item-header {
  padding: 0.0625rem 0;
}
.category-tree__item-link,
.category-tree__item-header .accordion-button {
  line-height: 1.2;
}

/* Background — matches the site-blue used everywhere else (header,
   footer, Upcoming Events page, etc.), applied to the whole
   #left-column wrapper rather than just the category-tree block, so
   it's consistent even on pages where a different widget (e.g. the
   layered-navigation filters on search/category pages) renders in
   this same slot instead. Small padding added so text doesn't sit
   flush against the colour's edge now that there's a visible
   background where there wasn't one before. */
#left-column {
  /* 2026-09-11: flipped from dark blue to white -- the "inside the
     black lines" idea -- with the surrounding area (.columns-
     container below, body further down this file) carrying the
     dark blue instead. */
  background-color: #fff;
  border-radius: 10px;
  /* 2026-09-13 (evening): back to plain/symmetric, matching
     #center-column -- see that rule for the full history. */
  box-shadow: 0 2px 14px rgba(10, 58, 87, 0.15);
  padding: 12px 14px;
}

/* ============================================================
   SITE-WIDE BLUE PAGE / WHITE CONTENT CARD
   Added 2026-09-10.

   Extends --gcc-site-blue with a lighter tint (+8% lightness in
   HLS, i.e. "2 shades lighter") for two accents: the breadcrumb
   bar, and the highlight behind expandable sidebar categories.
   ============================================================ */
:root {
  --gcc-site-blue-light-2: #C1E4F2;
}

/* Breadcrumb bar ("Home / CGC Comics" etc.) — now site-wide, every
   page, not just the Upcoming Events CMS page as it was before. */
.breadcrumb__wrapper {
  /* 2026-09-11: reverted from the lighter accent back to the base
     site-blue, per request. */
  background-color: var(--gcc-site-blue);
}

/* The row wrapping the sidebar + main content (only present on pages
   that use the sidebar layout -- category, search, etc. -- so this
   naturally doesn't touch the homepage or other full-width layouts).
   Base site-blue here as a safety net so if the sidebar and content
   column end up different heights, the gap behind the shorter one
   still reads as blue instead of showing the page's white through. */
.columns-container {
  background-color: var(--gcc-site-blue);
  /* 2026-09-13: added to replace the margin removed from
     #center-column below -- see that rule for why. Padding here
     (rather than each column's own margin) means #left-column and
     #center-column both sit flush with the SAME container edges, so
     their tops line up with each other and their bottoms line up
     with each other, whatever their individual heights turn out to
     be. UNCONFIRMED live: I don't know this container's existing
     padding/display (flex vs grid) from this file alone, so if the
     two columns still don't line up after this, screenshot it and
     I'll dig into the actual box model. */
  padding: 20px 0;
}

/* The main content column becomes a floating white card against that
   blue, per the mock-up. #center-column only exists in the sidebar
   layout (layouts/layout-left-column.tpl), so like .columns-container
   above this is automatically scoped to the right pages without
   needing a body class. Padding/margin are a starting point -- the
   page's own internal content padding is unverified from here, so
   tell me if it ends up doubled-up and looking too spacious. */
#center-column {
  background-color: #fff;
  border-radius: 10px;
  /* 2026-09-13 (evening): back to plain/symmetric, per request --
     the touching-edge shadow line has grown on you. History for
     anyone reading this later: tried directional/negative-spread
     shadows twice today to quiet that edge, reverted both times for
     different reasons (once suspecting the "v" notch, disproven; now
     because it's just preferred as-is). Leaving it plain going
     forward unless asked again. */
  box-shadow: 0 2px 14px rgba(10, 58, 87, 0.15);
  padding: 24px 28px;
  /* 2026-09-13: removed the "20px 0" vertical margin that was here --
     it's what was pushing this box's top (and bottom) out of line
     with #left-column, which has no margin of its own. Equivalent
     breathing room now comes from .columns-container's own padding
     instead, applied equally to both columns. */
}

/* 2026-09-14: SOLVED -- the long-running front-page white border
   mystery. #content.page-content--home is nested INSIDE
   #center-column (confirmed straight from your CTRL+U dump), and the
   rule above -- white background, rounded corners, box-shadow, 24-
   28px padding -- was never scoped to exclude the homepage. It's
   been quietly wrapping the whole front page in the same white card
   used for category/sidebar pages this entire time. My earlier fixes
   (painting .page-content--home's own background blue, then trying
   border-color) only ever touched the INSIDE of that card -- the
   card's own padding was always going to show as a white margin
   framing everything, regardless of what colour the inside was.
   That's the border. It was never #content, it was one level further
   out. This strips the card styling specifically when #center-column
   is wrapping the homepage, leaving category/sidebar pages
   untouched. */
#center-column:has(.page-content--home) {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Sidebar categories WITH a drop-down arrow (i.e. ones that have
   subcategories -- .split is only added by ps_categorytree.tpl when
   $node.children exists) get the lighter blue as their own highlight;
   categories without an arrow (CGC Comics, The Phantom, Unknown,
   Featured on the Homepage) are untouched and stay flush with the
   sidebar's own background. */
.category-tree__item-header.split {
  /* 2026-09-13: switched to white, per request -- was
     site-blue-light-2. This class is shared at every depth (see the
     note above .category-tree__list), so this covers top-level
     categories AND the subcategories revealed inside an expanded
     dropdown (e.g. Posters & Prints > Film Posters, Prints, etc.) in
     one change, same as when the light-blue was first added. */
  background-color: #fff;
  border-radius: 4px;
  padding: 0.125rem 0.4rem;
}

/* The arrow button itself: Hummingbird's own SCSS sets this
   transparent, which should let the rule above show through on its
   own -- but going by your "now" screenshot something is currently
   painting it solid white regardless, and I can't see the live
   compiled CSS to confirm what. Forcing it here as a safety net,
   using the same unlayered !important trick documented elsewhere in
   this file for beating Hummingbird's layered styles. Remove the
   !important if it turns out not to be needed. */
.category-tree__item-header.split .accordion-button {
  background-color: #fff !important;
}

/* ============================================================
   MORE LIGHT-BLUE ACCENTS — top utility bar, nav dropdowns,
   sidebar "Home" border, and non-expandable sidebar items.
   Added 2026-09-11. Uses --gcc-site-blue-light-2 (#C1E4F2),
   defined earlier in this file.
   ============================================================ */

/* Top utility bar ("Contact us / Sign in / Cart"). */
.header-top {
  /* 2026-09-11: reverted from the lighter accent back to the base
     site-blue, per request. */
  background-color: var(--gcc-site-blue);
  /* The thin line under Contact us: Hummingbird puts a 1px solid
     border-bottom on this bar using --bs-border-color (a light
     grey), separate from the background-color above -- that's what
     was still showing as an off-white hairline. */
  border-bottom-color: var(--gcc-site-blue);
}

/* NEW "Filter By" panel (ps_facetedsearch) that appeared on category
   pages once there were enough products with filterable attributes
   -- not needed right now, hiding it. */
.search-filters-modules {
  display: none;
}

/* Desktop nav dropdown panels (the flyout that opens under COMIC
   BOOKS, GRAPHIC NOVELS, etc.) -- giving each item inside its own
   light-blue background/box, the same treatment as the sidebar
   rows, rather than colouring the whole white panel solid. */
.submenu__left-item,
.menu-item {
  display: block;
  background-color: var(--gcc-site-blue-light-2);
  border-radius: 4px;
  padding: 4px 10px;
}

/* 2026-09-14: reverted everything below back to how it was in the
   custom(079).css you sent -- i.e. back to the last version where
   the dropdown actually worked. Between the last two sessions I'd
   added: (1) grid-auto-flow/grid-template-rows on
   .submenu__right-items and .menu-item__group--child, trying for the
   "4 items then wrap" layout, and (2) position:relative on the nav
   <li> plus width:max-content on .submenu, trying to shrink the wide
   blank panel. Neither landed cleanly, and the combination ended up
   breaking the ability to even hover/click into the dropdown to
   inspect it. Pulling all of that out for now -- this restores the
   plain, full-width, working-but-wide dropdown. Not shrinking the
   white panel this round either, per request. */
.submenu__right-items {
  row-gap: 1rem;
}

/* STEP 2 -- "start a new column after every 4 categories", now done
   against the REAL markup from your Inspect screenshot instead of my
   earlier guesses. Turns out I'd been targeting completely the wrong
   element all last session: the actual structure is
   .submenu__left[role=tablist] containing the <a class=
   "submenu__left-item"> links directly as siblings (Australian
   Printings, Archie Comics, etc.) -- .submenu__right-items and
   .menu-item__group--child, which I'd spent that whole session
   fighting with, apparently belong to something else (probably
   whatever shows in .submenu__right once a tab is selected, not
   visible in your screenshot) and were never the right target for
   this list at all. That's why the item styling always looked right
   (it WAS hitting .submenu__left-item correctly) while the wrap
   never did anything (it wasn't hitting anything real).

   Turning .submenu__left itself into a 4-row grid, auto-flowing into
   new columns, same technique as before but now on the right
   element: 14 items = 4 columns, 4 items = 1 column, 13 items = 4
   columns.

   ONE THING THIS NEEDS THAT WASN'T PART OF "JUST WRAP IT": .submenu
   __left carries Bootstrap's col-sm-3 class, which caps its own
   width at a flat 25% of the panel -- fine for one narrow column of
   text, but with items reflowing into 3-4 columns side by side, 25%
   isn't enough room for the columns to be readable (they'd just wrap
   each label onto 2-3 lines instead of the squished-single-column
   look). Loosened that width cap so the grid actually has room. This
   is scoped to .submenu__left specifically -- NOT touching .submenu
   itself, so the overall panel stays exactly as wide (full-bleed) as
   it is right now, matching "don't shrink the white area yet". */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: max-content;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  /* 2026-09-14: theme default is padding-block: 1.5rem (24px top AND
     bottom). Keeping the top as-is, cutting the bottom down toward
     the ~20px you asked for. HONEST CAVEAT: 24px of padding on this
     column alone doesn't fully account for the ~70px gap you
     measured, so something else is also adding height below the
     items -- most likely .submenu__right (still present as an empty
     sibling column, also confirmed from source to carry its own
     padding-block: 1.5rem), stretching the shared row taller than
     .submenu__left's own content. Trimmed that one to match, below.
     If 20px isn't quite hit after both, there may be a third
     contributor I can't see from this file -- screenshot it and I'll
     keep digging. */
  padding-block: 1.5rem 1.25rem;
  /* 2026-09-14: confirmed from theme.css source -- .submenu__left
     has its own border-right, originally there to divide the narrow
     one-column tab list from the (in this layout, unused) content
     panel to its right. Now that this column is a wide multi-column
     grid instead, that border just trails along after the last
     column instead of dividing anything -- that's the line you
     spotted. Removing it, same on every dropdown since it's the same
     rule everywhere. */
  border-right: none;
}

/* Centering the dropdown under whichever nav item opened it. This
   needs the <li> to have its own positioning context again -- the
   same change I tried and reverted two sessions ago. Safe to bring
   back now: what broke it last time was combining this with the
   grid rule that was hitting the WRONG element (.submenu__right-items
   instead of .submenu__left) and collapsing to near-zero width. Now
   that the grid above is targeting the real element and sizing
   properly, this should behave.

   left:50% + transform:translateX(-50%) centers the panel on the
   <li>'s own horizontal midpoint, then width:max-content sizes the
   panel to its actual content instead of the page.

   HONEST CAVEAT: .container (inside .submenu, wrapping
   .submenu__row) is Bootstrap's non-fluid container, which forces
   its own fixed breakpoint width (e.g. ~960px/1140px at typical
   desktop sizes) regardless of how few buttons are inside -- so the
   white panel itself likely won't shrink all the way down to hug
   just the button grid, even though it will now be centered on the
   correct nav item. If you want the panel tight around the content
   too, not just centered, that's the "shrink the white area" step
   from a couple of sessions ago, still on hold per your call at the
   time -- say the word and I'll pick it up now that centering is
   sorted, since the two are related. */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li {
  position: relative;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
  /* 2026-09-14: SOLVED, thanks to your colour-coded screenshots --
     this was never a padding problem. .submenu__left's width:auto
     (added earlier to let the 4-column grid grow) plus this
     column's fixed col-sm-9 (75%) added up to more than the panel's
     width, so Bootstrap's row wrapped this column onto its own line
     BELOW .submenu__left instead of beside it -- its padding was the
     "gap", just relocated underneath rather than removed. Since this
     column is confirmed empty on every category on this site (every
     .submenu__right-items carries "not-active", none carry
     "active"), simplest fix is to take it out of the layout
     entirely rather than keep trimming padding on a box that
     shouldn't be affecting vertical space at all. Also lets
     .submenu__left use the panel's full width instead of being
     squeezed against a phantom column. */
  display: none;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu {
  /* 2026-09-14: switched from centred to left-aligned, per request.
     Centering a wide multi-column panel on a nav item works fine for
     items in the middle of the bar, but for one near the left edge
     (Comic Books, second item) there isn't enough room to the left
     for the panel's left half, so it was running off the edge of the
     screen -- that's the gap you saw. Left-aligning avoids that
     entirely: the panel's own left edge matches the <li>'s left
     edge, so column 1 starts right under the heading and any further
     columns build off to the right, regardless of how wide the panel
     ends up or how close to the edge the nav item is. */

  /* 2026-09-14 follow-up -- the vertical drop. Going back to your
     very first DevTools screenshot from a couple of sessions ago:
     .submenu had an INLINE style, "top: 261px" -- that's JavaScript
     calculating a pixel offset at runtime, not this stylesheet. That
     math was built assuming .submenu's ORIGINAL positioning parent
     (the wide ancestor it used before I added position:relative to
     the <li>). Now that the <li> is the positioning parent instead,
     that same JS-calculated pixel number gets measured from a much
     smaller, different starting point -- landing way down over the
     carousel instead of right under the nav bar, which is exactly
     what you're seeing, and also why the mouse can't reach it (it's
     visually floating over the carousel, unconnected to its own
     hover/focus trigger area). Forcing top back to 100% (relative to
     the <li>, i.e. right at its bottom edge) with !important, which
     beats a plain inline style like that one. */
  top: 100% !important;
  left: 0;
  right: auto;
  width: max-content;
  max-width: 92vw;
}

/* Sidebar "Home" link at the very top -- UNCONFIRMED: I can see this
   has a visible border in your screenshot, but nothing in the
   .left-block__title source (Hummingbird's own SCSS) accounts for
   it, the same kind of gap as the arrow-button mystery from
   yesterday. This targets the border colour on a best guess; if it
   doesn't hit the actual border, screenshot it and I'll dig further.
   Left at the darker base site-blue as asked -- not the lighter
   accent used everywhere else in this section. */
.left-block__title {
  border: 1px solid var(--gcc-site-blue);
  border-radius: 4px;
  padding: 4px 8px;
}

/* Sidebar items WITHOUT a drop-down arrow (CGC Comics, The Phantom,
   Unknown, Featured on the Homepage) -- previously left flush with
   the sidebar background; now get the same lighter-blue highlight
   box as the expandable ones. :not(.split) keeps this off both the
   expandable rows (handled by the rule already in this file) and off
   "Home" itself (a different element entirely, .left-block__title
   above, not .category-tree__item-header). */
.category-tree__item-header:not(.split) {
  /* 2026-09-13: switched to white, per request -- was
     site-blue-light-2, same as the .split rule above (both changed
     together, same reasoning). */
  background-color: #fff;
  border-radius: 4px;
  padding: 0.125rem 0.4rem;
}

/* ============================================================
   EXPERIMENT 2026-09-11 — whole-site background test.
   Testing the theory that "white" showing through in spots (the
   border around Home, possibly the nav dropdowns) is just the raw
   page background peeking through something transparent, rather
   than an actual white fill somewhere. Two changes:

   1. Site-wide body background, light blue instead of white.
   2. #center-column (the "floating white card" added yesterday for
      category/search pages, e.g. the Comic Books section) switched
      to the same light blue instead of white, so that whole area
      blends in too rather than standing out as its own white block.

   This is explicitly a "let's see what it looks like" step, not a
   final decision -- if you like it, say so and I'll tidy up/remove
   the now-redundant white-card rule further up this file. If not,
   just delete this whole block and yesterday's white card comes
   straight back with no other changes needed.
   ============================================================ */
body {
  /* 2026-09-11: was the light accent during the "everything blue"
     experiment; now the dark base blue, as the surround for the
     white sidebar + white content card. */
  background-color: var(--gcc-site-blue);
}

/* ============================================================
   MORE LIGHT-BLUE: nav dropdown panel background, and product
   tile backgrounds (stock listings + Featured Products).
   Added 2026-09-11.
   ============================================================ */

/* The dropdown flyout panel itself (COMIC BOOKS, GRAPHIC NOVELS,
   etc.) was still white behind the already-blue item boxes -- that's
   the "bleed" you're seeing. Colouring the panel the same light blue
   should make it disappear, though the individual item highlight
   boxes added yesterday will now blend into the panel rather than
   standing out, since they're the same colour. Flag it if you'd
   rather the items stay visually distinct (e.g. white text, or a
   border) instead of just blending in.
   Also covering the left/right sub-panels explicitly in case either
   has its own white fill not visible in Hummingbird's SCSS source --
   same kind of gap as the Home-border and arrow-button mysteries. */
.submenu,
.submenu__left,
.submenu__right {
  /* 2026-09-13: switched to white, per request -- was
     site-blue-light-2 (set 2026-09-11, to paper over the panel being
     white behind already-blue item boxes at the time). The
     .submenu__left-item / .menu-item boxes just below still carry
     their own light-blue background though -- worth knowing that
     those will now show up as visible light-blue pills against this
     white panel, rather than blending in like they did before. Say
     the word if you'd rather those went white too, to match. */
  background-color: #fff;
}

/* Product tiles -- both the category/stock listing grid (Comic
   Books, CGC Comics, etc.) and the homepage Featured Products block
   use this exact same .product-miniature wrapper class (confirmed:
   product-standard.tpl and product-featured.tpl both extend the same
   base product.tpl and only override the title text), so one rule
   covers both as asked. */
.product-miniature {
  /* 2026-09-12: switched to white, site-wide, per request (was
     site-blue-light-2, set 2026-09-11). This is the OUTER wrapper --
     .product-miniature__inner below is the one actually painting the
     visible card. The two were left on different colours between
     2026-09-11 and 2026-09-12 (inner went white on Featured Products
     only, this stayed light-blue everywhere), which is almost
     certainly what caused the thin light-blue frame you spotted
     around each tile on the homepage -- the inner card sat slightly
     inset from this outer box, letting this colour show through
     around the edges. Matching both should close that gap. */
  background-color: #fff;
}

/* ============================================================
   FIXES FOR "STILL WHITE" — tile background and dropdown border.
   Added 2026-09-11, after checking the real markup in your CTRL+U
   dumps against the templates.
   ============================================================ */

/* THE ACTUAL BUG: .product-miniature is the outer <article> — it has
   no padding of its own and was never the thing rendering a visible
   white box. The real card look (padding + white fill) lives one
   level deeper, on .product-miniature__inner, per the CTRL+U dump.
   My last rule targeted the wrong element entirely. This is the
   fix -- kept the old .product-miniature rule too, harmless either
   way. */
.product-miniature__inner {
  /* 2026-09-12: switched to white, site-wide, per request (was
     site-blue-light-2, set 2026-09-11 — then briefly white on
     Featured Products only via a separate .ps-featuredproducts rule
     added the same day; that scoped rule is now redundant and has
     been removed since this covers every page). */
  background-color: #fff !important;
}

/* THE ACTUAL BUG on the nav dropdown: what you're seeing is a
   literal CSS *border*, not background peeking through -- I only
   ever set background-color on .submenu, never touched its border.
   Using !important here since this and the last two "still white"
   mysteries (Home's border, the arrow button) all point the same
   way: Hummingbird's compiled Bootstrap-derived styles for these
   interactive components are very likely using !important
   themselves, which per this file's own documented cascade-layer
   quirk only loses to another unlayered !important, not to normal
   specificity. */
.submenu {
  border-color: var(--gcc-site-blue-light-2) !important;
}

/* NOTE: the Featured-Products-only white tile rule that lived here
   (added 2026-09-12 morning) has been removed — it's redundant now
   that .product-miniature__inner above is white site-wide, per
   request the same day. See that rule for the history. */

/* 2026-09-14: SOLVED -- the real cause of the narrow columns on the
   single product page. Confirmed straight from theme.css:
   .product__bottom { display:grid; grid-template-columns: 55%
   minmax(0,1fr); } -- .product__bottom-left (everything we've been
   styling: Description, Product Details, Data sheet) was hard-capped
   at a flat 55% of the row the whole time, regardless of anything set
   on .product__accordion inside it. The other 45% goes to
   .product__bottom-right, which only hooks in a "reassurance" module
   (trust badges etc) -- on this shop that renders empty, silently
   reserving nearly half the width for nothing visible. Widened to
   68%, per request ("slightly wider than 66%"), leaving
   .product__bottom-right whatever's left rather than removing it
   outright, in case that module gets configured later. */
.product__bottom {
  grid-template-columns: 68% minmax(0, 1fr);
}


/* ============================================================
   LAST-4 NAV ITEMS — dropdowns open leftward instead of rightward.

   First attempt targeted Magazines/Memorabilia by their category ID
   (#submenu-category-11 / -17). That broke as soon as the "ON" count
   changed: with all 11 categories on, Books sits mid-nav and opens
   fine to the right; with only 8 on, Books becomes one of the last
   few items and needs to flip -- but a fixed ID rule has no way to
   know that, since it doesn't know how many items are active.

   [NOTE 2026-09-30: superseded -- the rule below now applies to ALL items,
   not just the last 4. This comment is the original history.]

   Fix: target by POSITION instead of identity. :nth-last-child(-n+4)
   selects the last 4 <li> children of .ps-mainmenu__tree, counting
   from the end of however many are actually switched on -- so this
   self-adjusts correctly whether you're running 1 category or all
   11, with no per-category maintenance needed if items are ever
   reordered or renamed. Confirmed from view-source: .submenu is a
   direct child of the <li class="ps-mainmenu__tree-item">, which is
   itself a direct child of .ps-mainmenu__tree -- so this reaches the
   right element. Added 2026-09-27, replacing the ID-based version.
   ============================================================ */
/* Updated 2026-09-30: ALL dropdowns now open leftward (was: only the last
   4 items). Applies at every desktop width. */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .submenu {
  left: auto !important;
  right: 0 !important;
}


/* ============================================================
   NAV: 5 ITEMS ON THE TOP ROW, EVERYTHING ELSE ON THE BOTTOM ROW,
   BOTH ROWS RIGHT-ALIGNED (updated 2026-09-30 -- was 7 on top; before
   that 6). Applies at 1200px and wider; 990-1199px keeps the old
   natural wrap, because there isn't room to force a set number of items
   per row next to the logo at those widths.

   HOW THE FORCED BREAK WORKS: CSS can't say "wrap after item 5", so
   the <ul>'s own ::after pseudo-element is used as an invisible,
   full-width, zero-height flex item that sits BETWEEN two groups via
   the flex "order" property:
     order 1 = items 1-5  (top row)
     order 2 = the invisible full-width spacer (forces the line break)
     order 3 = items 6+   (bottom row, however many there are)
   The -0.15rem top margin cancels the extra row-gap the empty spacer
   line would otherwise add.

   RIGHT-ALIGNED ROWS: justify-content: flex-end pushes every row to
   the right edge of the menu, so the bottom row's last item ends
   directly under the top row's last (far-right) item.

   To change the top-row count, change the 5 in nth-child(-n+5) below.
   The 800px cap is a ceiling, not a target.

   DROPDOWN DIRECTION: every dropdown opens LEFT (rule above, applies at
   all widths).
   ============================================================ */
@media (min-width: 1200px) {
  .gcc-header-right {
    max-width: 800px;
  }

  .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree {
    justify-content: flex-end;
  }

  .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li {
    order: 3;
  }

  .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li:nth-child(-n+5) {
    order: 1;
  }

  .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree::after {
    content: "";
    order: 2;
    flex: 0 0 100%;
    height: 0;
    margin-top: -0.15rem;
  }
}

/* ============================================================
   2026-10-03: FEATURED PRODUCTS -- white strip above the cover image
   ============================================================
   Request: on the homepage Featured products tiles, add a white band
   (~15px) above the cover picture, the same thickness as the white
   gap under the "Add to cart" button.

   Markup (from the 2026-10-03 CTRL+U): every tile is
     article.product-miniature > div.product-miniature__inner
       > div.product-miniature__top (image) + div.product-miniature__bottom
   __inner is the visible white card (see the 2026-09-11 "ACTUAL BUG"
   note above), so top padding on __inner shows as white above the image.

   Size: measured off the 2026-10-03 screenshot, the bottom gap is
   ~16 CSS px (20 screen px at what looks like 125% Windows scaling),
   so 1rem (16px) is used here to match it.
   HONEST CAVEAT: I could not see which parent-theme rule makes the
   bottom gap (the parent theme's SCSS isn't in this thread), so this is
   matched by measurement, not by reusing the same variable. If top
   and bottom don't look identical, change 1rem (e.g. 0.9rem = ~15px).

   Scope: homepage Featured products only (.ps-featuredproducts). To
   apply it to every tile on the site (category pages, related
   products), delete ".ps-featuredproducts " from the selector. */
.ps-featuredproducts .product-miniature__inner {
  padding-top: 1rem;
}


/* ============================================================
   2026-10-13 -- CATEGORY BADGES ROW: CENTRED, MAX 6 PER ROW
   (the gcccategorybadges module -- CGC Graded, Comic Books ...)
   Before: badges.css (and the 2026-09 block above) lay the badges out
   in a fixed 6-column GRID, so with only 2 badges they sat in the first
   2 of 6 columns, i.e. on the left. Now: a wrapping, centred row.
     - up to 6 badges: one row, centred
     - 7 or more: rows of 6; a part-filled last row is centred too
     - each badge keeps the same width as before (1/6 of the row), so
       nothing grows or shrinks when badges are added or removed
     - tablet/phone keep the module's own steps: 3 per row under 768px,
       2 per row at 480px and under
   Layout only -- the badges themselves (ring, colours, fonts, hover)
   are untouched. Two-class selectors so this wins over the single-class
   grid rules in badges.css and above, whatever order they load in.
   To undo: delete this block.
   ============================================================ */
.gcc-badges .gcc-badges__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.gcc-badges .gcc-badge {
  flex: 0 0 calc((100% - 5rem) / 6);   /* 6 per row: 5 gaps of 1rem between them */
  max-width: calc((100% - 5rem) / 6);
  min-width: 0;
}
@media (max-width: 767.98px) {
  .gcc-badges .gcc-badge {
    flex-basis: calc((100% - 2rem) / 3);  /* 3 per row */
    max-width: calc((100% - 2rem) / 3);
  }
}
@media (max-width: 480px) {
  .gcc-badges .gcc-badge {
    flex-basis: calc((100% - 1rem) / 2);  /* 2 per row */
    max-width: calc((100% - 1rem) / 2);
  }
}

/* ============================================================
   2026-10-16: HOMEPAGE ORDER -- "Latest arrivals" (ps_newproducts)
   appeared when the first new product went live. It had no CSS
   "order" value, so it was drawn above the numbered sections
   (slider 1, text 2, badges 3). Put it between the badges and
   Featured products, and move Featured products down one.
   ============================================================ */
.ps-newproducts {
  order: 4;
}
.ps-featuredproducts {
  order: 5;
}