/* Generated from the files in ../ — edit those, not this. */

/* ==================== header.css ==================== */
/**
 * ============================================================================
 *  HEADER — scroll behaviour override  (editable, no build step)
 * ============================================================================
 *
 *  Loaded on every page AFTER the compiled bundle (see header.php), so these
 *  rules win. Scoped to `#header`, so it only affects the site header.
 *
 *  What this changes vs the original:
 *   1. HOMEPAGE ONLY: on scroll it USED TO swap the good top nav (#top-nav) for
 *      a second, broken nav (#scroll-nav). We now keep #top-nav in both states.
 *   2. EVERY PAGE: once scrolled, the header background becomes a solid brand
 *      blue at 75% opacity (instead of white on inner pages / the swap on home).
 *      Top-of-page states are left untouched — the homepage keeps its light-blue
 *      gradient, inner pages keep their default.
 *
 *  To change the scrolled background colour, edit the `background` below.
 *   - Solid white                ->  #fff                       [current]
 *   - Translucent white @ 90%    ->  rgba(255, 255, 255, 0.9)
 *   - Brand blue (#02a0c5) @ 75% ->  rgba(2, 160, 197, 0.75)
 * ============================================================================
 */

/* HOMEPAGE: keep the top nav on scroll; never show the old scroll nav. */
#header.header-home.scroll #top-nav    { display: block !important; }
#header.header-home.scroll #scroll-nav { display: none !important; }

/* EVERY PAGE: once scrolled, a clean white header + a subtle lift. */
#header.scroll {
  background: #fff !important;
  box-shadow: 0 3px 7px 0 rgba(25, 25, 25, 0.1) !important;
}

/* Custom Box Calculator button — 0.9rem instead of the inherited 1rem.
   Applies to every instance in the header (desktop, tablet and the mobile
   "Box Calculator" variant), which all share .btn-header-icon. */
#header .btn-header-icon {
  font-size: 0.9rem !important;
}


/* ==================== megamenu.css ==================== */
/**
 * ============================================================================
 *  MEGA MENU — layout tidy-up  (editable, no build step)
 * ============================================================================
 *
 *  Loaded on every page AFTER the compiled bundle (see header.php), so these
 *  rules win. Everything is scoped to `#header .ubermenu-main`, so it only
 *  affects the site navigation.
 *
 *  WHAT THIS FIXES (the old megamenu layout, measured on desktop @1440px):
 *
 *   1. TOP-LEVEL NAV WRAPPED ONTO TWO LINES. The five items needed 838px in an
 *      834px space, so "Eco Friendly Packaging" dropped to a second row and the
 *      header grew to 96px tall. Trimming the horizontal padding by a few px
 *      pulls it back to a single 48px row.
 *
 *   2. THE TAB LIST WAS SLICED IN HALF. The panel was locked to
 *      `max-height: 500px` while ten tabs need 537px, so the last item was cut
 *      through the middle and a scrollbar appeared inside the dropdown. The
 *      panel is now auto-height with tighter, even rows — all ten fit.
 *
 *   3. A LARGE DEAD GREY COLUMN. 385px was permanently reserved for the
 *      fly-out panel and painted grey (#F3F3F3), but only 5 of the 10 tabs
 *      actually have children — so half the time it was an empty grey slab.
 *      It is now white, so an empty panel reads as clean space, and each panel
 *      carries a small label (set by js/megamenu.js) so the column is never
 *      an unexplained void.
 *
 *   4. THE PROMO BLOCK TOOK 55% OF THE PANEL (712px of 1296px) to hold a
 *      heading, one sentence and a button, leaving a huge white gap with the
 *      image floating in the bottom corner. It is now a fixed 330px rail with
 *      the image sitting properly at the bottom of the stack.
 *
 *   5. INCONSISTENT PANELS. Tabbed menus were 500px tall; the simple ones
 *      (e.g. Protective Packaging) were a bare 53px strip with no padding.
 *      Both now share one shell: same border, radius, shadow and link styling.
 *
 *  BRAND NOTES — everything here uses the existing palette so the menus stay
 *  tied into the rest of the site:
 *    #02A0C5  brand blue      ($quaternary) — top border, active tab, hover text
 *    #B1E0F4  light blue      ($tertiary)   — the tab rail tint is derived from it
 *    #F2FAFD / #E4F4FB        — soft blue tints for the rail and promo gradient
 *  Type stays on sofia-pro at the site's 14px nav size.
 *
 *  TO TWEAK THE COMMON THINGS:
 *    - panel width           -> `width` in [2] (currently min(1140px, 94vw))
 *    - tab rail width        -> `width` in [4] AND `left`/`width` in [6]
 *      (these two must match: the rail is 285px, the panel starts at 285px.
 *      285 is not arbitrary — the longest tab label, "Documents Enclosed
 *      Envelopes", needs 263px at the heavier weight it takes on hover, and
 *      wrapped onto two lines at the previous 262px.)
 *    - promo rail width      -> `flex-basis`/`max-width` in [7]
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] TOP-LEVEL NAV — keep all five items on one line
 * ------------------------------------------------------------------------- */
#header .ubermenu-main > .ubermenu-nav > .ubermenu-item-level-0 > .ubermenu-target {
  padding-left: 10px !important;
  padding-right: 10px !important;
  letter-spacing: .1px;
}

/* Items with a dropdown need room for the chevron on the right. The chevron is
   absolutely positioned 10px from the item's edge, so this right padding is
   what sets the gap between the label and the chevron: 29 - 10 - ~11px chevron
   = 8px of breathing room (it was sitting 1px from the text).
   NOTE: the five items fill the nav bar almost exactly — the left/right padding
   above was trimmed from 14px to 10px to pay for this, otherwise the menu wraps
   onto a second line and the header doubles in height. */
#header .ubermenu-main > .ubermenu-nav > .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target {
  padding-right: 29px !important;
}


/* ---------------------------------------------------------------------------
 * [2] PANEL SHELL — shared by every megamenu, tabbed or simple
 * ------------------------------------------------------------------------- */
#header .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu {
  width: min(1140px, 94vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;          /* was 500px — this caused the cut-off */
  margin-top: 6px !important;
  background: #fff !important;
  border: 1px solid rgba(2, 160, 197, .30) !important;
  border-top: 4px solid #02A0C5 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 44px rgba(13, 45, 66, .18) !important;
  overflow: hidden !important;
}


/* ---------------------------------------------------------------------------
 * [3] TABBED MENUS — outer wrapper
 * ------------------------------------------------------------------------- */
/* The bundle sets this to #F3F3F3 (the dead grey slab) from a longer selector
   — `.ubermenu-item-level-0 > .ubermenu-submenu .ubermenu-tabs` — so this has
   to match that specificity to win, and override `background-color`, not the
   `background` shorthand. */
#header .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu .ubermenu-tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background-color: #fff !important;

  /* Flex so the tinted rail in [4] stretches the full height of the panel.
     Without this the rail only grows to fit its own tab rows, and stops short
     of the bottom whenever the promo block is taller (most obvious on
     Packaging Accessories). A percentage height won't do it — the wrapper's
     own height comes from being stretched, so it isn't a definite height to
     resolve against. The fly-out panels are absolutely positioned, so they are
     out of flow and unaffected by this. */
  display: flex !important;
  align-items: stretch !important;
}


/* ---------------------------------------------------------------------------
 * [4] TAB RAIL — the list of categories down the left
 * ------------------------------------------------------------------------- */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tabs-group {
  width: 285px !important;
  min-height: 0 !important;
  max-height: none !important;          /* no inner scrollbar */
  overflow: visible !important;
  padding: 10px 0 !important;
  background: #F2FAFD !important;
  border-right: 1px solid #DDEEF6 !important;

  /* runs the full height of the panel — see the note in [3] */
  flex: 0 0 285px !important;
  align-self: stretch !important;
}


/* ---------------------------------------------------------------------------
 * [5] TAB ROWS — compact and even, so ten fit without scrolling
 * ------------------------------------------------------------------------- */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tab > .ubermenu-target {
  min-height: 0 !important;
  padding: 11px 34px 11px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  border-left: 3px solid transparent !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-tab > .ubermenu-target:hover {
  background: #fff !important;
  border-left-color: #02A0C5 !important;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-tab.ubermenu-active > .ubermenu-target {
  background: #fff !important;
  border-left-color: #02A0C5 !important;
  color: #02A0C5 !important;
  font-weight: 600 !important;
}


/* ---------------------------------------------------------------------------
 * [6] FLY-OUT PANEL — the child links for the hovered tab
 *     `left` must match the rail width in [4].
 * ------------------------------------------------------------------------- */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tab-content-panel {
  left: 285px !important;
  width: calc(100% - 285px) !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: 18px 22px !important;
  background: #fff !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 2px 16px !important;
  align-content: start !important;
}

/* Only the hovered tab's panel shows. Both halves of this pair matter: the
   `display` value has to be set per-state, or an unqualified `display: grid`
   overrides UberMenu's own hiding rule and every panel renders at once,
   stacked on top of each other. */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tab > .ubermenu-tab-content-panel {
  display: none !important;
}

/* the links sit directly in the panel, so the panel itself is the grid */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tab.ubermenu-active > .ubermenu-tab-content-panel {
  display: grid !important;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-tab-content-panel > .ubermenu-item {
  min-width: 0 !important;
}

/* small label above the links — text comes from js/megamenu.js.
   Renders nothing if the attribute is missing, so the CSS is safe on its own. */
#header .ubermenu-main .ubermenu-submenu .ubermenu-tab-content-panel::before {
  content: attr(data-panel-title);
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 8px;
  padding: 0 10px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #7C93A0;
  border-bottom: 1px solid #EDF4F8;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-tab-content-panel .ubermenu-target {
  padding: 8px 10px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  transition: background .15s ease, color .15s ease;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-tab-content-panel .ubermenu-target:hover {
  background: #F2FAFD !important;
  color: #02A0C5 !important;
}


/* ---------------------------------------------------------------------------
 * [7] PROMO RAIL — the "Custom ... Boxes / Shop All" block on the right
 * ------------------------------------------------------------------------- */
#header .ubermenu-main .ubermenu-submenu > .ubermenu-item-type-custom {
  flex: 0 0 330px !important;
  max-width: 330px !important;
}

#header .ubermenu-main .ubermenu-submenu .ubermenu-content-block {
  padding: 24px 26px !important;
  background: linear-gradient(180deg, #F2FAFD 0%, #E4F4FB 100%) !important;
  border-left: 1px solid #DDEEF6 !important;
}

/* Read as a single card: picture tile, then title, copy, and the button
   pinned to the bottom so every menu's promo ends on the same line. */
#header .ubermenu-main .ubermenu-submenu .ubermenu-content-block .menu-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* the image wrapper — `order: -1` lifts it above the heading in the markup */
#header .ubermenu-main .ubermenu-submenu .menu-content > .flex-fill {
  order: -1 !important;
  flex: 0 0 auto !important;
  height: 158px !important;
  margin-bottom: 20px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(13, 45, 66, .06) !important;
}

/* The product shot is a background-image on an empty div, and it used to be
   pinned to the bottom-right corner where it overflowed the panel. It now
   fills the tile above, letter-boxed so nothing is cropped.
   NOTE: set top/right/bottom/left individually — adding a later `right: auto`
   or `bottom: auto` collapses the box to 0x0 because width/height are auto. */
#header .ubermenu-main .ubermenu-submenu .menu-content .responsive-image {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  left: 14px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#header .ubermenu-main .ubermenu-submenu .menu-content h2,
#header .ubermenu-main .ubermenu-submenu .menu-content h3 {
  margin-bottom: .4rem !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

#header .ubermenu-main .ubermenu-submenu .menu-content p {
  margin-bottom: 1.1rem !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  color: #4A6270 !important;
}

#header .ubermenu-main .ubermenu-submenu .menu-content .btn-cardboard-primary {
  align-self: flex-start !important;
  margin-top: auto !important;
}


/* ---------------------------------------------------------------------------
 * [8] SIMPLE (NON-TABBED) MENUS — e.g. Protective Packaging.
 *
 *     These render as a normal vertical dropdown anchored under their own nav
 *     item, rather than the full-width horizontal bar they used to be (four
 *     links stretched across 1140px). They keep the shared shell from [2].
 *
 *     `position: absolute` needs a positioned ancestor, hence the
 *     `position: relative` on the level-0 item below — without it the dropdown
 *     would anchor to the whole nav and sit in the wrong place.
 * ------------------------------------------------------------------------- */
#header .ubermenu-main > .ubermenu-nav > .ubermenu-item-level-0 {
  position: relative !important;
}

#header .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)) {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;          /* was centred with translateX(-50%) */
  width: auto !important;
  min-width: 280px !important;
  max-width: 340px !important;
  flex-direction: column !important;
  padding: 10px !important;
  align-items: stretch !important;
}

#header .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)) > .ubermenu-column {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
}

#header .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)) .ubermenu-target {
  display: block !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  transition: background .15s ease, color .15s ease;
}

#header .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)) .ubermenu-target:hover {
  background: #F2FAFD !important;
  color: #02A0C5 !important;
}


/* ---------------------------------------------------------------------------
 * [9] MOBILE / TABLET — the off-canvas menu keeps its own full-width layout.
 *     Undo the desktop shell so nothing above leaks into it.
 * ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  #navigation-mobile .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu,
  #home-navigation-mobile .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu,
  #fixed-home-navigation-mobile .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu {
    width: 100% !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #navigation-mobile .ubermenu-main .ubermenu-tabs-group,
  #home-navigation-mobile .ubermenu-main .ubermenu-tabs-group,
  #fixed-home-navigation-mobile .ubermenu-main .ubermenu-tabs-group {
    width: 100% !important;
    border-right: 0 !important;
  }

  #navigation-mobile .ubermenu-main .ubermenu-tab-content-panel,
  #home-navigation-mobile .ubermenu-main .ubermenu-tab-content-panel,
  #fixed-home-navigation-mobile .ubermenu-main .ubermenu-tab-content-panel {
    left: 0 !important;
    width: 100% !important;
  }

  #navigation-mobile .ubermenu-main .ubermenu-submenu > .ubermenu-item-type-custom,
  #home-navigation-mobile .ubermenu-main .ubermenu-submenu > .ubermenu-item-type-custom,
  #fixed-home-navigation-mobile .ubermenu-main .ubermenu-submenu > .ubermenu-item-type-custom {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  /* the simple menus' desktop dropdown positioning would break the
     off-canvas panel — put them back in the normal flow */
  #navigation-mobile .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)),
  #home-navigation-mobile .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)),
  #fixed-home-navigation-mobile .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu:not(:has(.ubermenu-tabs)) {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ---------------------------------------------------------------------------
 * NAV ITEM CORNERS
 *
 * The hover and current-page states paint a solid brand-blue block behind the
 * menu item with square corners, which is the only hard-edged rectangle left in
 * the header — every button on the site uses a 3px radius. Matched to them.
 * ------------------------------------------------------------------------- */
.ubermenu .ubermenu-item-level-0 > .ubermenu-target,
#header .menu-item > a {
  border-radius: 3px;
}

/* the blue only reaches the corners on hover/active, so the transition is
   worth having for the same reason the buttons have one */
.ubermenu .ubermenu-item-level-0 > .ubermenu-target {
  transition: background-color .2s ease, color .2s ease;
}


/* ==================== mobile-nav.css ==================== */
/**
 * ============================================================================
 *  MOBILE HEADER + MENU DRAWER  (editable, no build step)
 * ============================================================================
 *
 *  Replaces the old mobile header row and UberMenu's mobile panel.
 *
 *  Layout under 992px:  [ menu ]      [ logo ]      [ search ] [ basket ]
 *
 *  BRAND: blue #02A0C5, tints #F2FAFD / #E4F4FB, borders #DCEDF5,
 *         green #008B25, text #0F2F3D / #3E5A68.
 *  Corners follow the site's buttons (3px) and cards (8px).
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] THE BAR
 *
 * Three grid columns with the outer two the same width, so the logo sits on the
 * true centre line of the screen rather than in whatever space the icons leave.
 * ------------------------------------------------------------------------- */
.fs-mnav {
  display: none;
}

@media (max-width: 991.98px) {

  .fs-mnav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    min-height: 58px;
    padding: 6px 4px;
    background: none;
  }

  /*
   * The bar lives inside the header's .container, which is both padded and, at
   * tablet widths, narrower than the screen. A fixed negative margin cannot
   * reach the edges at every size, so the white is painted by a viewport-wide
   * layer behind the bar instead. The icons keep the container's alignment.
   */
  .fs-mnav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: #fff;
  }

  .fs-mnav > * {
    position: relative;
    z-index: 1;
  }

  /*
   * The 100vw layer must never be able to widen the page. This has to sit on
   * the header rather than on #top-nav / #scroll-nav — those are the padded
   * containers the layer is deliberately escaping, so clipping there would
   * trim it back to exactly the width it is trying to break out of.
   *
   * `clip` rather than `hidden`: it bounds the x axis without forcing the y
   * axis to scroll, so the desktop dropdowns still hang below the header.
   */
  #header {
    overflow-x: clip;
  }

  .fs-mnav__side {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .fs-mnav__side--end {
    justify-content: flex-end;
  }

  /* every tappable thing in the bar is at least 44px, per Apple/Google guidance */
  .fs-mnav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #0F2F3D;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease;
  }

  .fs-mnav__btn:hover,
  .fs-mnav__btn:focus-visible {
    background: #F2FAFD;
    color: #02A0C5;
  }

  .fs-mnav__btn:focus-visible {
    outline: 2px solid #02A0C5;
    outline-offset: 2px;
  }

  .fs-mnav__btn:active {
    background: #E4F4FB;
  }

  /* --- the burger ------------------------------------------------------- */
  .fs-mnav__burger {
    display: block;
    position: relative;
    width: 20px;
    height: 14px;
    flex: 0 0 20px;
  }

  .fs-mnav__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  .fs-mnav__burger span:nth-child(1) { top: 0; }
  .fs-mnav__burger span:nth-child(2) { top: 6px; }
  .fs-mnav__burger span:nth-child(3) { top: 12px; }

  /* the word "Menu" only where there is room for it */
  .fs-mnav__btn-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  @media (max-width: 400px) {
    .fs-mnav__btn-label { display: none; }
    .fs-mnav__btn--menu { padding: 0; }
  }

  /* --- the logo --------------------------------------------------------- */
  .fs-mnav__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    line-height: 0;
  }

  .fs-mnav__logo img {
    display: block;
    width: auto;
    height: 28px;
  }

  /* --- basket count ----------------------------------------------------- */
  .fs-mnav__cart {
    position: relative;
  }

  .fs-mnav__count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #008B25;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
  }

  .fs-mnav__count.is-empty,
  .fs-mnav__count:empty {
    display: none;
  }

  /*
   * The old mobile rows are replaced rather than restyled. Hiding them here
   * keeps the change to _navigation.php small and reversible: nothing was
   * deleted from the template, it is simply no longer shown.
   */
  #top-nav .row.justify-content-end > .col-lg > .basket-btn.d-block,
  #top-nav .row.justify-content-end > .col-lg > .mobile-nav-logo,
  #top-nav .row.justify-content-end > .col-lg > .d-flex.d-lg-none,
  #scroll-nav .col-8.d-flex.d-lg-none,
  #scroll-nav .col-4 .logo.d-lg-none {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
 * [2] THE DRAWER
 *
 * Slides in from the left, which is where the button that opens it lives.
 * ------------------------------------------------------------------------- */
.fs-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 47, 61, .48);
  opacity: 0;
  transition: opacity .28s ease;
}

.fs-drawer-scrim.is-open {
  opacity: 1;
}

.fs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  width: min(88vw, 380px);
  height: 100%;
  height: 100dvh;
  background: #fff;
  box-shadow: 0 0 40px rgba(15, 47, 61, .22);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.fs-drawer.is-open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .fs-drawer,
  .fs-drawer-scrim {
    transition: none;
  }
}

/* --- head ---------------------------------------------------------------- */
.fs-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #DCEDF5;
}

.fs-drawer__logo {
  display: block;
  line-height: 0;
}

.fs-drawer__logo img {
  display: block;
  width: auto;
  height: 27px;
}

.fs-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #F2FAFD;
  border: 0;
  border-radius: 999px;
  color: #0F2F3D;
  font-size: 18px;
  transition: background-color .18s ease, color .18s ease;
}

.fs-drawer__close:hover,
.fs-drawer__close:focus-visible {
  background: #E4F4FB;
  color: #02A0C5;
}

/* --- body ---------------------------------------------------------------- */
.fs-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}

/* --- calculator call to action ------------------------------------------- */
.fs-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  background: #008B25;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease;
}

.fs-drawer__cta:hover,
.fs-drawer__cta:focus-visible {
  background: #00761F;
  color: #fff;
}

.fs-drawer__cta i {
  font-size: 17px;
}

/* --- the list ------------------------------------------------------------ */
.fs-drawer__nav {
  margin-top: 18px;
}

.fs-drawer__list,
.fs-drawer__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-drawer__item + .fs-drawer__item {
  border-top: 1px solid #EDF6FA;
}

.fs-drawer__row {
  display: flex;
  align-items: stretch;
}

.fs-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 52px;
  padding: 12px 4px;
  color: #0F2F3D;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}

.fs-drawer__link:hover,
.fs-drawer__link:focus-visible {
  color: #02A0C5;
}

.fs-drawer__link.is-current {
  color: #02A0C5;
}

.fs-drawer__chev {
  flex: 0 0 auto;
  color: #A8C4D1;
  font-size: 12px;
}

/* the accordion button is separate from the link, so the parent page is still
   reachable by tapping its name */
.fs-drawer__toggle {
  flex: 0 0 auto;
  width: 48px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: #3E5A68;
  font-size: 13px;
  transition: background-color .18s ease, color .18s ease;
}

.fs-drawer__toggle i {
  display: inline-block;
  transition: transform .22s ease;
}

.fs-drawer__toggle:hover,
.fs-drawer__toggle:focus-visible {
  background: #F2FAFD;
  color: #02A0C5;
}

.fs-drawer__toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* --- sub items ----------------------------------------------------------- */
.fs-drawer__sub {
  margin: 0 0 10px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid #E4F4FB;
}

.fs-drawer__sublink {
  display: block;
  min-height: 44px;
  padding: 11px 4px;
  color: #3E5A68;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease;
}

.fs-drawer__sublink:hover,
.fs-drawer__sublink:focus-visible {
  color: #02A0C5;
}

/* a sub item that opens further: the name stays tappable, the caret is its own
   target, exactly as at the top level */
.fs-drawer__subitem.has-sub > .fs-drawer__row {
  display: flex;
  align-items: stretch;
}

.fs-drawer__subitem.has-sub > .fs-drawer__row .fs-drawer__sublink {
  flex: 1 1 auto;
}

.fs-drawer__subitem.has-sub > .fs-drawer__row .fs-drawer__toggle {
  width: 44px;
  font-size: 12px;
}

/* third level — quieter again, so the nesting reads at a glance */
.fs-drawer__sub--d2 {
  margin-bottom: 6px;
  padding-left: 12px;
  border-left-color: #F0F8FC;
}

.fs-drawer__sub--d2 .fs-drawer__sublink {
  min-height: 40px;
  padding: 9px 4px;
  color: #5C7684;
  font-size: 14px;
}


/* --- contact block ------------------------------------------------------- */
.fs-drawer__contact {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #DCEDF5;
}

.fs-drawer__contact-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 2px;
  color: #0F2F3D;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}

.fs-drawer__contact-row:hover,
.fs-drawer__contact-row:focus-visible {
  color: #02A0C5;
}

.fs-drawer__contact-row i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: #F2FAFD;
  border-radius: 999px;
  color: #02A0C5;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
}


/* ---------------------------------------------------------------------------
 * [3] THE SEARCH PANEL
 *
 * Drops down over the header so the keyboard has the whole screen beneath it.
 * ------------------------------------------------------------------------- */
.fs-msearch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10002;
  background: #fff;
  border-bottom: 1px solid #DCEDF5;
  box-shadow: 0 8px 28px rgba(15, 47, 61, .12);
  transform: translateY(-100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.fs-msearch.is-open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fs-msearch { transition: none; }
}

.fs-msearch__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
}

.fs-msearch__field {
  flex: 1 1 auto;
  min-width: 0;
}

/* the shared search component is sized for the desktop bar — give it room */
.fs-msearch .fs-search {
  max-width: none;
}

.fs-msearch .fs-search__input {
  height: 44px;
  padding-right: 44px;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  line-height: 44px;
}

.fs-msearch .fs-search__submit {
  width: 44px;
}

.fs-msearch__cancel {
  flex: 0 0 auto;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: #02A0C5;
  font-size: 15px;
  font-weight: 600;
}

.fs-msearch__cancel:focus-visible {
  outline: 2px solid #02A0C5;
  outline-offset: 2px;
  border-radius: 4px;
}

/* the dropdown is sized for a desktop header — on a phone it should use the
   screen it has, minus the bar above it */
.fs-msearch .fs-search__panel {
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fs-msearch .fs-search__results {
  max-height: none;
}

/* four filter chips wrap to two rows and eat the results area — one swipeable
   row instead */
.fs-msearch .fs-search__filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.fs-msearch .fs-search__filters::-webkit-scrollbar {
  display: none;
}

.fs-msearch .fs-search__filter {
  flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
 * [4] WHILE A PANEL IS OPEN
 * ------------------------------------------------------------------------- */
body.fs-nav-open {
  overflow: hidden;
}


/* ==================== product-card.css ==================== */
/**
 * ============================================================================
 *  PRODUCT CARDS + LISTING FILTERS  (editable, no build step)
 * ============================================================================
 *
 *  Used on category, shop and search listings. Loaded after the compiled
 *  bundle (see header.php) so these rules win.
 *
 *  Pairs with inc/_product-card.php.
 *
 *  WHAT CHANGED vs the old tile:
 *   - "from" sat on its own line above the price, which cost ~24px of height
 *     on every card. It now shares the price line.
 *   - The title carried `mb-6 pb-6` (~78px of spacing) pushing everything down.
 *   - There was no product description at all.
 *   - The only action was a "More Info" label — and because the whole tile was
 *     one big <a>, a real button could not be added inside it. The card is now
 *     a div with its own links, so it can carry a primary action button.
 *
 *  BRAND: blue #02A0C5, green #008B25, tints #F2FAFD, borders #DCEDF5,
 *         text #0F2F3D / #3E5A68. Buttons follow the site's 3px radius.
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] THE CARD
 * ------------------------------------------------------------------------- */
.product-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DCEDF5;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(13, 45, 66, .08);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.product-card:hover {
  border-color: #9BD7EA;
  box-shadow: 0 12px 28px rgba(13, 45, 66, .16);
  transform: translateY(-3px);
}


/* ---------------------------------------------------------------------------
 * [2] IMAGE — fixed height so every card lines up whatever the photo's shape
 * ------------------------------------------------------------------------- */
.product-card__media {
  display: block;
  padding: 18px 18px 0;
}

.product-card__image {
  display: block;
  height: 190px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 6px;
}


/* ---------------------------------------------------------------------------
 * [3] BODY
 * ------------------------------------------------------------------------- */
.product-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px 18px 18px;
}

/* Clamped to two lines so a long product name can't make one card taller, and
   given the matching min-height so a one-line name doesn't make it shorter —
   together these keep every card in the grid exactly the same height. */
.product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em;            /* 2 lines at the line-height below */
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.product-card__title a {
  color: #0F2F3D;
  text-decoration: none;
}

.product-card__title a:hover {
  color: #02A0C5;
}

/* Trimmed to 18 words in PHP; clamped to 3 lines here as a safety net. The
   min-height reserves the same 3 lines even for shorter (or missing)
   descriptions, so cards stay level with each other. */
.product-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.5em;            /* 3 lines at 13px / 1.5 */
  margin: 0 0 12px;
  color: #3E5A68;
  font-size: 13px;
  line-height: 1.5;
}


/* ---------------------------------------------------------------------------
 * [4] PRICE — "from", the amount and "per unit" all on one line
 * ------------------------------------------------------------------------- */
.product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: auto 0 14px;          /* `auto` pins the price + buttons to the bottom */
}

.product-card__from {
  color: #008B25;
  font-size: 13px;
  font-weight: 600;
}

.product-card__amount {
  color: #02A0C5;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.product-card__amount .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
}

.product-card__unit {
  color: #7C93A0;
  font-size: 12px;
}


/* ---------------------------------------------------------------------------
 * [5] ACTIONS
 * ------------------------------------------------------------------------- */
.product-card__actions {
  display: flex;
  /* wraps so the "View basket" link Woo adds after an add-to-cart drops onto
     its own line instead of squeezing in as a third button */
  flex-wrap: wrap;
  gap: 8px;
}

.product-card__buy,
.product-card__more {
  display: flex;
  /* zero basis, not 50% — with the row set to wrap, two 50% halves plus the
     gap overflow by exactly the gap and drop onto separate lines */
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 3px;           /* matches the site's buttons */
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* at 4-up the cards are ~272px, so "Choose options" has to stay on one
     line or the two buttons end up different heights */
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.product-card__buy {
  background: #008B25;
  border: 2px solid #008B25;
  color: #fff;
}

.product-card__buy:hover,
.product-card__buy:focus {
  background: #00691D;
  border-color: #00691D;
  color: #fff;
}

.product-card__more {
  background: #fff;
  border: 2px solid #DCEDF5;
  color: #3E5A68;
}

.product-card__more:hover,
.product-card__more:focus {
  border-color: #02A0C5;
  color: #02A0C5;
}

/* WooCommerce's ajax add-to-cart states */
.product-card__buy.loading {
  opacity: .7;
}

.product-card__buy.added::after {
  content: "✓";
  margin-left: 6px;
}

/* WooCommerce drops a "View basket" link in straight after the button, which
   lands between the two buttons and breaks the pair up. It is redundant here
   anyway — the slide-out basket opens by itself on every add — so it is hidden
   rather than styled around. */
.product-card .added_to_cart {
  display: none !important;
}


/* ---------------------------------------------------------------------------
 * [6] NARROW SCREENS
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 400px) {
  .product-card__actions {
    flex-direction: column;
  }
}


/* ---------------------------------------------------------------------------
 * [7] FILTER SIDEBAR
 *
 * The filters used to sit loose in a wide (col-lg-3) column with nothing
 * grouping them. They are now a narrower (col-lg-2) column presented as its own
 * panel, which also gives the product grid more room.
 * ------------------------------------------------------------------------- */
.filter-col {
  align-self: flex-start;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid #DCEDF5;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(13, 45, 66, .08);
}

.filter-col .filters {
  margin-bottom: 0 !important;
}

/* the "Filter by …" headings */
.filter-col label.h6 {
  display: block;
  margin-bottom: 10px !important;
  color: #0F2F3D !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* space between the category block and the colour block */
.filter-col .filter-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #EDF4F8;
}

/* colour swatches */
.filter-col .colour-filter,
.filter-col .filters .d-flex {
  gap: 8px;
}

@media only screen and (max-width: 991.98px) {
  /* the side margins line the panel up with the product cards, which are inset
     by the grid gutter — without them the panel runs edge to edge */
  .filter-col {
    margin: 0 16px 24px;
  }
}


/* ---------------------------------------------------------------------------
 * [8] DROPDOWNS — site-wide
 *
 * Every <select> on the site was the browser default in a grey box with a 3px
 * flat border. They now share one look: white, thin brand-tinted border,
 * matching the search field, with a blue chevron drawn as an inline SVG so it
 * is identical in every browser.
 *
 * The theme's own chevron (.select-container:before, a Font Awesome glyph) is
 * switched off just below, otherwise those selects would show two arrows.
 * ------------------------------------------------------------------------- */
select,
.global-html-form .select-container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 14px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2302A0C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 12px auto !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 5px !important;
  color: #0F2F3D;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

select:hover {
  border-color: #9BD7EA !important;
}

select:focus {
  outline: 0;
  border-color: #02A0C5 !important;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .14);
}

/* the theme's Font Awesome chevron — replaced by the SVG above */
.global-html-form .select-container:before {
  content: none !important;
}


/* ---------------------------------------------------------------------------
 * [9] IN-TILE VARIATION PICKER
 *
 * Variable products used to send the customer to the product page to choose
 * options. The options and quantity now sit on the tile itself, so they can add
 * to the basket without leaving the listing.
 * ------------------------------------------------------------------------- */
.product-card__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.product-card__option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.product-card__option-label {
  flex: 0 0 auto;
  min-width: 52px;
  color: #3E5A68;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* tighter than the site-wide select styling — these sit in a 272px card */
.product-card__option select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px !important;
  padding: 5px 30px 5px 10px !important;
  font-size: 12.5px;
}

.product-card__option--qty input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid #DCEDF5;
  border-radius: 5px;
  color: #0F2F3D;
  font-size: 12.5px;
}

.product-card__option--qty input:focus {
  outline: 0;
  border-color: #02A0C5;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .14);
}

/* Its line is always reserved, even when empty, so the buttons don't jump down
   the moment a message appears. */
.product-card__notice {
  min-height: 16px;
  margin: 0;
  color: #008B25;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
}

.product-card__notice.is-error {
  color: #E9310B;
}

/* the button is a <button> for variable products, an <a> otherwise — both
   need to look identical */
button.product-card__buy {
  font-family: inherit;
  cursor: pointer;
}

button.product-card__buy:disabled {
  background: #A8CDB2;
  border-color: #A8CDB2;
  cursor: not-allowed;
}

button.product-card__buy.is-loading {
  opacity: .75;
  cursor: wait;
}


/* ==================== search.css ==================== */
/**
 * ============================================================================
 *  CUSTOM PRODUCT SEARCH  (editable, no build step)
 * ============================================================================
 *
 *  Styles the search box and results dropdown that replaced the Ajax Search
 *  Lite plugin. Loaded after the compiled bundle (see header.php).
 *
 *  Pairs with inc/_search.php, js/search.js and inc/search-index.php.
 *
 *  BRAND: blue #02A0C5, tints #F2FAFD / #E4F4FB, borders #DCEDF5,
 *         green #008B25 (primary action), text #0F2F3D / #3E5A68.
 *  Corners follow the site's buttons (3px) and cards (8px).
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] THE FIELD
 * ------------------------------------------------------------------------- */
.fs-search {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.fs-search__form {
  position: relative;
  display: flex;
  align-items: center;
}

.fs-search__input {
  width: 100%;
  height: 34px;
  padding: 0 34px 0 12px;
  background: #fff;
  border: 1px solid #DCEDF5;
  border-radius: 5px;
  color: #0F2F3D;
  font-size: 13px;
  line-height: 34px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.fs-search__input::placeholder {
  color: #7C93A0;
}

.fs-search__input:focus {
  outline: 0;
  border-color: #02A0C5;
  box-shadow: 0 0 0 3px rgba(2, 160, 197, .14);
}

/* strip the browser's own clear/decoration on search inputs */
.fs-search__input::-webkit-search-decoration,
.fs-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.fs-search__submit {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #02A0C5;
  cursor: pointer;
}

.fs-search__submit:hover {
  color: #017B98;
}


/* ---------------------------------------------------------------------------
 * [2] THE DROPDOWN
 * ------------------------------------------------------------------------- */
.fs-search__panel {
  position: absolute;
  top: calc(100% + 6px);      /* tiny gap below the field */
  left: 0;
  right: 0;
  z-index: 1100;              /* above the header, below the side cart (1050+) */
  display: flex;
  flex-direction: column;
  width: 100%;                /* matches the search field exactly */
  max-height: min(70vh, 560px);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(2, 160, 197, .30);
  border-top: 4px solid #02A0C5;
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(13, 45, 66, .18);
}

.fs-search__panel[hidden] {
  display: none;
}


/* ---------------------------------------------------------------------------
 * [3] SORT FILTERS
 * ------------------------------------------------------------------------- */
.fs-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
  padding: 12px 14px;
  background: #F2FAFD;
  border-bottom: 1px solid #E7F2F7;
}

.fs-search__filter {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #DCEDF5;
  border-radius: 999px;
  color: #3E5A68;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fs-search__filter:hover {
  border-color: #9BD7EA;
  color: #02A0C5;
}

.fs-search__filter.is-active {
  background: #02A0C5;
  border-color: #02A0C5;
  color: #fff;
}


/* ---------------------------------------------------------------------------
 * [4] RESULTS — the only part that scrolls, so the filters stay at the top
 *     and the "View all" button stays pinned to the bottom
 * ------------------------------------------------------------------------- */
.fs-search__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.fs-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #0F2F3D;
  text-decoration: none;
  transition: background .15s ease;
}

.fs-search__result:hover,
.fs-search__result:focus {
  background: #F2FAFD;
  color: #0F2F3D;
}

.fs-search__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background-color: #F6FAFC;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #EDF4F8;
  border-radius: 4px;
}

.fs-search__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fs-search__title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-search__title mark {
  padding: 0;
  background: #FFF445;      /* the site's highlight yellow */
  color: inherit;
}

.fs-search__price {
  margin-top: 2px;
  color: #02A0C5;
  font-size: 13px;
  font-weight: 700;
}

.fs-search__price em {
  color: #7C93A0;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.fs-search__price span {
  color: #7C93A0;
  font-size: 11px;
  font-weight: 400;
}

.fs-search__empty {
  margin: 0;
  padding: 22px 14px;
  color: #3E5A68;
  font-size: 14px;
  text-align: center;
}


/* ---------------------------------------------------------------------------
 * [5] ACTIONS — pinned to the bottom of the dropdown, split 50/50
 * ------------------------------------------------------------------------- */
.fs-search__actions {
  display: flex;
  flex: 0 0 auto;
  border-top: 1px solid #E7F2F7;
}

.fs-search__all,
.fs-search__calc {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.fs-search__all {
  background: #02A0C5;        /* the site's button blue */
  color: #fff;
}

.fs-search__all:hover,
.fs-search__all:focus {
  background: #017B98;
  color: #fff;
}

/* matches the header's Custom Box Calculator button */
.fs-search__calc {
  background: #76E280;
  color: #00691D;
}

.fs-search__calc:hover,
.fs-search__calc:focus {
  background: #5FD46A;
  color: #00691D;
}

@media only screen and (max-width: 480px) {
  .fs-search__actions {
    flex-direction: column;
  }
}


/* ---------------------------------------------------------------------------
 * [6] SMALL SCREENS
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 991.98px) {
  .fs-search {
    max-width: none;
  }
}


/* ==================== google-reviews.css ==================== */
/**
 * ============================================================================
 *  GOOGLE REVIEWS (TrustIndex widget)  (editable, no build step)
 * ============================================================================
 *
 *  Loaded on every page AFTER the compiled bundle and the plugin's own
 *  stylesheet (see header.php), so these rules win.
 *
 *  The reviews come from the "WP Reviews Plugin for Google" (TrustIndex),
 *  rendered by `[trustindex no-registration=google]`. The markup is generated
 *  by the plugin, so everything here targets its `ti-*` classes and is scoped
 *  to `#google-reviews` — nothing else on the site is affected.
 *
 *  ---------------------------------------------------------------------------
 *  WHAT THIS CHANGES vs the plugin's default look
 *  ---------------------------------------------------------------------------
 *   - The slider is kept (so the arrows and pager dots work), but its track is
 *     wider than the container and the off-screen cards used to bleed out and
 *     get sliced by the section edges. See [3] for the fix.
 *   - Cards were ~440px tall for ~5 lines of text because the plugin reserves a
 *     fixed block for the review body. The body is now capped at 5 lines, so
 *     every card is the same tidy height. See [5] — the cap is a pixel value
 *     tied to the font-size/line-height below it.
 *   - The avatar sat centred above a centred name while the review text was
 *     centred too, which read as a mess. Card content is now consistently
 *     left-aligned with a proper avatar + name/date header row.
 *   - The aggregate "EXCELLENT" badge is hidden — see [2].
 *
 *  The plugin ships ~70KB of high-specificity CSS, hence `!important`
 *  throughout. If a rule stops working after a plugin update, its class name
 *  has probably changed — inspect the widget markup.
 *
 *  Widget structure, for reference:
 *    .ti-widget > .ti-widget-container
 *      .ti-header                       <- aggregate badge (hidden)
 *      .ti-reviews-container
 *        .ti-controls / .ti-controls-line  <- slider arrows + dots (hidden)
 *        .ti-reviews-container-wrapper     <- the slider track (JS transforms it)
 *          .ti-review-item > .ti-inner     <- one card
 *            .ti-review-header > .ti-platform-icon + .ti-profile-img + .ti-profile-details
 *            .ti-stars
 *            .ti-review-text-container
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] SECTION — heading and spacing
 *     `.reviews-band` is the cardboard-framed section on the homepage
 *     (inc/_google-reviews-cardboard.php).
 * ------------------------------------------------------------------------- */
/* Sized to match the other section titles on the page (e.g. "Why buy from
   Boxtopia?"), which are h2 at 40px/52px — this one is an h3 and was 30px. */
.reviews-band h3 {
  margin-bottom: 2.25rem;
  color: #000;                          /* was the brand green */
  font-size: 40px;
  line-height: 52px;
}

@media only screen and (max-width: 767.98px) {
  .reviews-band h3 {
    font-size: 30px;
    line-height: 39px;
  }
}

.reviews-band .container {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

@media only screen and (min-width: 992px) {
  .reviews-band .container {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}


/* ---------------------------------------------------------------------------
 * [2] AGGREGATE BADGE — removed
 *     The "EXCELLENT + stars + Google logo" block above the reviews. The site
 *     already shows a Google rating badge in the header and hero, so this was
 *     a second, competing version of the same information.
 *     To bring it back, delete this rule.
 * ------------------------------------------------------------------------- */
#google-reviews .ti-widget .ti-header {
  display: none !important;
}


/* ---------------------------------------------------------------------------
 * [3] SLIDER
 *
 *     The widget's native slider is left in place so its arrows and pager dots
 *     work. The plugin's JS (cdn.trustindex.io/loader.js) drives the paging by
 *     transforming the track, so DO NOT set `display`, `transform`, `width` or
 *     `float` on `.ti-reviews-container-wrapper` / `.ti-review-item` — that is
 *     what the slider animates, and overriding it stops the paging dead.
 *
 *     The one guard worth having: the track is wider than the container, so
 *     without `overflow: hidden` the off-screen cards bleed out past the
 *     section edges and get sliced by them.
 * ------------------------------------------------------------------------- */
#google-reviews .ti-widget .ti-reviews-container {
  overflow: hidden !important;
  /* breathing room so the cards' drop shadows aren't clipped by the above */
  padding: 6px 6px 10px !important;
}

/* cards in view share a height (the track is a flex row, so they stretch) */
#google-reviews .ti-widget .ti-review-item {
  height: auto !important;
}


/* ---------------------------------------------------------------------------
 * [3b] SLIDER CONTROLS — arrows and pager dots, in the brand blue
 * ------------------------------------------------------------------------- */
#google-reviews .ti-widget .ti-controls,
#google-reviews .ti-widget .ti-controls-line {
  display: block !important;
}

/* The arrows are positioned against .ti-controls, which by default is wider
   than the container it sits in — so pinning the arrows alone still left the
   right-hand one overhanging (and clipped). Pin this to the container first.
   The z-index matters too: the review cards otherwise paint over the arrows. */
#google-reviews .ti-widget .ti-controls {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 5 !important;
}

/* The arrows are absolutely positioned INSIDE .ti-reviews-container and by
   default hang past its edges — which the `overflow: hidden` in [3] then slices
   in half. Pinning them to 0 keeps them within the clipped area. */
#google-reviews .ti-widget .ti-prev {
  left: 0 !important;
}

#google-reviews .ti-widget .ti-next {
  right: 0 !important;
}

/* Plain white disc with a blue chevron. The chevron itself is the plugin's
   `::before` — a 10x10 box with two borders, rotated 45deg — so it only needs
   recolouring (see below) rather than replacing. */
#google-reviews .ti-widget .ti-next,
#google-reviews .ti-widget .ti-prev {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(13, 45, 66, .18) !important;
  opacity: 1 !important;
  z-index: 5 !important;                /* keep clear of the cards */
  transition: background .2s ease;
}

#google-reviews .ti-widget .ti-next:hover,
#google-reviews .ti-widget .ti-prev:hover {
  background: #F2FAFD !important;
}

/* The chevron is a 10x10 box rotated 45deg showing only two borders — but the
   plugin also gives it a background-colour, which fills the square and turns it
   into a solid diamond. Clearing the background leaves the actual chevron. */
#google-reviews .ti-widget .ti-next::before,
#google-reviews .ti-widget .ti-prev::before {
  background: transparent !important;
  border-color: #02A0C5 !important;
  border-width: 0 0 2px 2px !important;
}

/* pager dots */
#google-reviews .ti-widget .ti-controls-line {
  margin-top: 18px !important;
  text-align: center !important;
}

#google-reviews .ti-widget .ti-control,
#google-reviews .ti-widget .ti-dot {
  background-color: rgba(255, 255, 255, .75) !important;
  border-radius: 50% !important;
}

#google-reviews .ti-widget .ti-control.active,
#google-reviews .ti-widget .ti-dot.active {
  background-color: #02A0C5 !important;
}


/* ---------------------------------------------------------------------------
 * [4] THE CARD
 * ------------------------------------------------------------------------- */
#google-reviews .ti-widget .ti-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;              /* match the other cards in view */
  min-height: 0 !important;
  padding: 24px !important;
  background: #fff !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(13, 45, 66, .14) !important;
  text-align: left !important;
}

/* avatar + name/date on one row (the plugin stacks them centred) */
#google-reviews .ti-widget .ti-review-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: auto !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}

#google-reviews .ti-widget .ti-profile-img {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #EAF5FA !important;       /* placeholder while the photo loads */
}

#google-reviews .ti-widget .ti-profile-img img,
#google-reviews .ti-widget .ti-profile-img trustindex-image {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

#google-reviews .ti-widget .ti-profile-details {
  min-width: 0 !important;
  text-align: left !important;
}

#google-reviews .ti-widget .ti-name,
#google-reviews .ti-widget .ti-name a {
  color: #0F2F3D !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: left !important;
}

#google-reviews .ti-widget .ti-date {
  color: #7C93A0 !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* the Google mark sits in the card's top-right corner */
#google-reviews .ti-widget .ti-platform-icon {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

#google-reviews .ti-widget .ti-stars {
  display: block !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}


/* ---------------------------------------------------------------------------
 * [5] REVIEW TEXT
 *
 *     The plugin sets `-webkit-line-clamp` but pairs it with
 *     `display: flow-root`, so the clamp never takes effect and the block
 *     keeps a tall reserved height. Capping max-height is what actually works.
 *
 *     112px = 5 lines x 22.4px (the 14px font-size at 1.6 line-height below).
 *     If you change the font-size or line-height, recalculate this.
 * ------------------------------------------------------------------------- */
#google-reviews .ti-widget .ti-review-text-container,
#google-reviews .ti-widget .ti-review-text {
  height: auto !important;
  max-height: 112px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  color: #3E5A68 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

#google-reviews .ti-widget .ti-read-more {
  text-align: left !important;
}

#google-reviews .ti-widget .ti-read-more a {
  color: #02A0C5 !important;
  font-weight: 600 !important;
}


/* ==================== hero.css ==================== */
/**
 * ============================================================================
 *  LISTING PAGE HERO  (category, shop and search results)
 * ============================================================================
 *
 *  Loaded after the compiled bundle (see header.php) so these rules win.
 *
 *  WHY: the hero stood at roughly 45% of the screen height, and with the
 *  cardboard USP strip below it the first row of products sat well below the
 *  fold — a customer landing on a category had to scroll before seeing a
 *  single product. It is now a little over half that, which brings the grid
 *  into view on load without losing the artwork or the intro copy.
 *
 *  Everything here is scoped to `.tax-product_cat`. On a category page that is
 *  the body class; on a search results page it is the wrapper added in
 *  woocommerce/archive-product.php (see the note there). One scope, both pages.
 *
 *  The height and artwork changes are deliberately confined to large screens.
 *  Below that the hero stacks full width, the scene band is already short, and
 *  the same treatment made the artwork a sliver and flattened the torn edge of
 *  the cardboard — so phones and tablets keep the original design.
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] INTRO COPY — clamped, with a Read more  (all screen sizes)
 *
 * Some categories carry three or four paragraphs, which on its own would undo
 * the height saving. Two lines show by default and the rest is a click away.
 * js/hero.js adds the button, and only where the copy actually overflows.
 * ------------------------------------------------------------------------- */
.tax-product_cat .hero .wysiwyg {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tax-product_cat .hero .wysiwyg.is-open {
  display: block;
  overflow: visible;
}

.hero-readmore {
  align-self: flex-start;
  /* kept small and tight — this sits in a hero we have just spent effort
     shortening, so it should not cost a full line of height */
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 0;
  color: #02A0C5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: underline;
  cursor: pointer;
}

.hero-readmore:hover,
.hero-readmore:focus {
  color: #0F2F3D;
}


@media only screen and (min-width: 992px) {

  /* -------------------------------------------------------------------------
   * [2] HEIGHT
   *
   * The 45vh floor is replaced by one tied to the artwork rather than to the
   * screen. The scene band is 14% of the page width and is anchored to the
   * hero's bottom edge, so on a hero shorter than that — a search result with
   * a one-line title and a single line of copy — the band would ride up behind
   * the site header and cut off the cloud and the top-right box. Matching the
   * floor to the band in the same unit keeps the scene whole at every width,
   * while still letting a hero with more copy grow past it.
   *
   * Net effect at 1440x900: a category hero goes from ~408px to ~248px, and to
   * ~209px where the title fits one line. The first row of products moves from
   * 746px down the page to ~550px — from below the fold to comfortably in view.
   * ---------------------------------------------------------------------- */
  .tax-product_cat .hero {
    min-height: 14.5vw !important;
    /* Where the floor is taller than the copy, the section's own
       justify-content-center would split the slack above and below — putting
       half of it between the copy and the cardboard, where the pull-up then
       eats it. Sending the slack to the top instead means the clearance below
       is governed by the padding, the same as on a hero the copy fills. */
    justify-content: flex-start !important;
  }

  /* The bottom padding is load-bearing: the cardboard strip is pulled up over
     the hero (section [4]) and this is the clearance that keeps the intro copy
     and its Read more off the torn edge. */
  .tax-product_cat .hero .container.position-fixing {
    padding-top: .75rem !important;
    padding-bottom: 2.25rem !important;
  }


  /* -------------------------------------------------------------------------
   * [3] THE SCENE
   *
   * The artwork sits in a band whose height is a percentage of the page width,
   * and every element in it is positioned as a percentage of that band — so
   * shortening the band moves the whole composition in step. Only a few things
   * need a hand:
   *
   *  - the hill's height comes from its own width, not the band, so it is
   *    flattened by the same factor the band shrank (346px -> 202px, i.e. .58).
   *    Scaling from its bottom edge keeps its base on the ground and preserves
   *    the proportion of hill to sky exactly as it was.
   *  - the band is clipped, so anything sitting near its top edge is trimmed by
   *    that same factor to stay inside it. On a top-level category that is the
   *    cloud and the top-right box; on a child category the leaves sit highest.
   * ---------------------------------------------------------------------- */
  .tax-product_cat .scene-hero {
    padding-bottom: 14% !important;
  }

  .tax-product_cat .scene-hero .inner-wrap .hill {
    -webkit-transform: scaleY(.58);
    transform: scaleY(.58);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

  .tax-product_cat .scene-hero .inner-wrap .cloud {
    width: 5%;
    bottom: 70%;
  }

  /* Deliberately lower specificity than the `.scene-hero.child-hero` rules in
     the bundle, so child category pages keep their own arrangement of this box
     and only inherit the resize. */
  .tax-product_cat .scene-hero .inner-wrap .box.tilt-box {
    width: 4.5%;
    top: 8%;
  }

  .tax-product_cat .scene-hero.child-hero .inner-wrap .leaves {
    width: 4.7%;
  }


  /* -------------------------------------------------------------------------
   * [4] THE CARDBOARD USP STRIP
   *
   * A band of sky showed between the bottom of the hill and the cardboard.
   *
   * The cause is in the artwork, not the layout: card-top.png is 1920x60 and
   * its top 16 rows are fully transparent, with the ragged tear ramping in over
   * rows 16-29. Drawn in its 53px-tall box that transparent strip is ~14px of
   * see-through space above the cardboard — which is exactly the gap.
   *
   * So the fix is simply to pull the section up by that much: the standing
   * -1.5rem becomes -2.375rem, i.e. 14px more. Both torn edges keep their own
   * box untouched, which matters — they are cropped windows onto their images
   * (`background-size: cover`), so trimming a box does not trim whitespace, it
   * slides the window. Shrinking the bottom box moved its window off the tear
   * completely and cut the ragged edge off the design. Leaving both boxes alone
   * also keeps the strip symmetrical, so the USP row stays centred in it.
   * ---------------------------------------------------------------------- */
  .tax-product_cat section.position-fixing.my-n6 {
    margin-top: -2.375rem !important;
  }

}


/* ---------------------------------------------------------------------------
 * [x] HOMEPAGE HERO — the Custom Box Calculator button
 *
 * The two hero buttons were a solid blue "Printed Boxes" and an outlined
 * "Custom Box Calculator" in white. The same calculator button in the header is
 * a solid green, so the same action had two different looks depending on where
 * you met it. The hero one now matches the header: same green, same green text,
 * same hover.
 *
 * Only the size differs, and deliberately — it keeps the hero's own button size
 * so it still pairs with "Printed Boxes" beside it, rather than shrinking to
 * the header's smaller scale.
 *
 * Scoped to the homepage. The same outlined style is the second hero button on
 * ten other templates, where it is not the calculator and should stay as it is.
 * ------------------------------------------------------------------------- */
body.home .hero .btn-outline-quinary {
  background-color: #76E280 !important;
  border-color: #76E280 !important;
  color: #00691D !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

body.home .hero .btn-outline-quinary:hover,
body.home .hero .btn-outline-quinary:focus-visible {
  background-color: #00691D !important;
  border-color: #00691D !important;
  color: #fff !important;
}

/* the bundle puts a green glow on this button's focus and active states, which
   now sits on top of a green fill — softened to a plain focus ring */
body.home .hero .btn-outline-quinary:focus {
  box-shadow: 0 0 0 .25rem rgba(0, 105, 29, .35) !important;
}

/*
 * The box icon, matching the header button. The anchor is laid out as a flex
 * row so the icon and the wording sit on one baseline and the gap between them
 * is even — the template puts them on separate lines for readability, and
 * without this the whitespace between them collapses inconsistently.
 */
body.home .hero .btn-outline-quinary,
body.home .hero .btn-quaternary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

body.home .hero .btn-outline-quinary i {
  font-size: 1.05em;
  line-height: 1;
}

/*
 * The icon and the wording are already centred against each other to the pixel,
 * but the box glyph carries more of its weight in its upper half, so the words
 * read as sitting slightly low beside it. This is an optical correction rather
 * than a geometric one: a 2px lift, which is what it takes for the two to look
 * level even though they now measure 2px apart.
 */
body.home .hero .fs-btn-label {
  position: relative;
  top: -2px;
}


/* ==================== express-checkout.css ==================== */
/* ===========================================================================
 * EXPRESS CHECKOUT (Google Pay / Stripe Link)
 *
 * Lifted out of single-product.css so it can live in the core bundle: the
 * express buttons also render on the basket and checkout, and those pages no
 * longer load the product stylesheet.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * [3] EXPRESS CHECKOUT (Google Pay / Stripe Link)
 *
 * These are drawn by Stripe in an iframe, so how quickly they appear is theirs
 * to decide — the page cannot render them any sooner. What it can do is stop
 * the wait looking broken: the space was an empty bordered rectangle sitting
 * under Add To Basket, which reads as a fault rather than as something
 * arriving. It now shows a quiet loading shimmer until Stripe paints over it.
 *
 * The other half of this is in header.php: the page had no resource hints at
 * all, so every visitor paid a fresh DNS lookup and TLS handshake to Stripe
 * before the buttons could even begin. Those are preconnected now.
 * ------------------------------------------------------------------------- */
#wc-stripe-express-checkout-element {
  position: relative;
  min-height: 48px;
  border-radius: 6px;
}

/* the shimmer, shown only while the element is still empty */
#wc-stripe-express-checkout-element:empty::after,
#wc-stripe-express-checkout-element:not(:has(iframe))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #F2FAFD 0%, #E7F4FA 40%, #F2FAFD 80%);
  background-size: 200% 100%;
  border: 1px solid #DCEDF5;
  border-radius: 6px;
  animation: fs-express-loading 1.4s ease-in-out infinite;
}

@keyframes fs-express-loading {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #wc-stripe-express-checkout-element:not(:has(iframe))::after {
    animation: none;
  }
}




/* ==================== footer.css ==================== */
/**
 * ============================================================================
 *  FOOTER — layout tidy-up  (editable, no build step)
 * ============================================================================
 *
 *  Loaded on every page AFTER the compiled bundle (see header.php), so these
 *  rules win. Same content and same design as before — the logo, the four-column
 *  link list, the contact details, the payment icons and the credits all stay
 *  exactly where they were. What changes is the sizing and alignment, which was
 *  the messy part:
 *
 *   - the phone number rendered at 32px against a 16px email, so the two lines
 *     that belong together looked like a heading and a footnote
 *   - their icons were 24px and 12px, so the two rows did not line up either
 *   - the payment icons were 95x60 each, 380px in total, which made them the
 *     loudest thing in the footer
 *   - every link <li> was locked to a rigid 200px, so the columns bore no
 *     relation to the words in them
 *   - the closing row put the copyright, the address and the credit on three
 *     different baselines
 *   - everything was pure #000 on a mid-tone cardboard texture
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] TYPE COLOUR
 *
 * Pure black on the cardboard reads harsh. The site's own ink colour is used
 * for anything you read, and the softer secondary for supporting lines.
 * ------------------------------------------------------------------------- */
#footer,
#footer p,
#footer a {
  color: #0F2F3D;
}

#footer .footer-nav a {
  color: #1D4859;
}

#footer .footer-nav a:hover,
#footer a:hover {
  color: #02A0C5;
}


/* ---------------------------------------------------------------------------
 * [2] CONTACT DETAILS
 *
 * The email and the phone number are one block of contact information, so they
 * are set on one scale. The phone keeps a little more weight than the email —
 * it is the primary action — but as a half-step, not double.
 *
 * Both icons are given the same box so the two lines hang off the same edge.
 * ------------------------------------------------------------------------- */
#footer .fa-envelope,
#footer .fa-phone-flip {
  width: 16px;
  margin-right: 8px !important;
  font-size: 13px !important;
  color: #02A0C5;
  text-align: center;
}

#footer a[href^="mailto"],
#footer a[href^="tel"] {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

#footer .footer-phone a[href^="tel"] {
  font-size: 19px !important;
}

/* the two rows sat tight together with no separation from the block below */
#footer .footer-phone {
  margin-top: 4px;
}


/* ---------------------------------------------------------------------------
 * [3] PAYMENT ICONS
 *
 * These were `col-lg-3` inside a flex row, so each one stretched to a quarter
 * of the column and the artwork blew up with it. They are badges, not buttons:
 * sized to their own height, spaced evenly, and kept to the right edge under
 * the contact details.
 * ------------------------------------------------------------------------- */
#footer .col-auto .d-flex.flex-row > [class*="col-"]:has(img) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

#footer .col-auto .d-flex.flex-row:has(img) {
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}

#footer .col-auto .d-flex.flex-row img {
  display: block;
  width: auto;
  height: 34px;
  opacity: .9;
}


/* ---------------------------------------------------------------------------
 * [4] LINK COLUMNS
 *
 * Every item carried `col-6 col-lg-3`, which resolved to a flat 200px whatever
 * the link said — so "FAQ" and "Custom Printed Boxes" occupied identical boxes
 * and the gaps between columns looked arbitrary.
 *
 * A four-track grid instead: the columns are even because the grid makes them
 * even, and the rows space themselves.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #footer .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 24px;
    margin-bottom: 32px !important;
    padding-left: 0;
    list-style: none;
  }

  #footer .footer-nav li {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}

#footer .footer-nav a {
  font-size: 15px;
  line-height: 1.45;
}


/* ---------------------------------------------------------------------------
 * [5] THE CLOSING ROW
 *
 * The copyright, the address and the credit are the same tier of information
 * but sat on three different baselines — 4455, 4455 and 4464 — because each one
 * is the last child of a different column of a different height.
 *
 * They are pulled onto one line and given the same treatment, with a hairline
 * above so the footer closes on something deliberate.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #footer .container > .d-lg-flex {
    position: relative;
    padding-bottom: 12px;
  }

  #footer .col-auto p,
  #footer .col-12.col-lg p:last-child,
  #footer .backlink {
    font-size: 13px !important;
    line-height: 20px;
    color: #3E5A68 !important;
  }

  /* the credit was 10px, small enough to look like an accident next to the
     13px lines it shares a row with */
  #footer .backlink {
    font-size: 12px !important;
    opacity: .8;
  }

  #footer .backlink:hover {
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------------
 * [6] COLUMN RHYTHM
 *
 * The three columns each set their own top padding, so the logo started 32px
 * above the first link and the contact details started somewhere else again.
 * One shared top edge, and the whole band gets a little more room to breathe.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #footer .container.py-2 {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }

  #footer .d-none.d-lg-flex > .col-auto > .d-flex,
  #footer .d-none.d-lg-flex > .col-12.col-lg > .d-flex {
    padding-top: 0 !important;
  }

  #footer .logo img {
    height: 76px;
    width: auto;
  }
}


/* ---------------------------------------------------------------------------
 * [7] MOBILE
 *
 * The mobile footer is a separate block in footer.php with its own markup, so
 * it needs the same sizing applied on its own terms. The payment icons are the
 * main offender there too — `col-3` each across a full-width row.
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #footer .d-lg-none .d-flex.flex-row:has(img) {
    gap: 12px;
    align-items: center;
  }

  #footer .d-lg-none .d-flex.flex-row > .col-3:has(img) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  #footer .d-lg-none .d-flex.flex-row img {
    width: auto;
    height: 30px;
  }

  #footer .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px;
    padding-left: 0;
    list-style: none;
  }

  #footer .footer-nav li {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  #footer .backlink {
    font-size: 12px !important;
  }
}


/* ---------------------------------------------------------------------------
 * [8] THE DIVIDER
 *
 * The brand-blue rule is part of the design, but it lived on the link list, so
 * it began after the logo and stopped at the contact column — 941px of a
 * 1348px footer, which read as an unfinished line rather than a divider.
 *
 * Same rule, same colour, moved onto the row itself so it runs the full width
 * and actually separates the upper footer from the closing line. It is anchored
 * to the bottom because the closing line is bottom-aligned in all three
 * columns, so the two stay a fixed distance apart.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #footer .footer-nav {
    border-bottom: 0 !important;
  }

  #footer .container > .d-lg-flex::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 46px;
    left: 0;
    height: 2px;
    background: #02A0C5;
    opacity: .55;
  }

  /* the closing line needs to clear the new rule */
  #footer .container > .d-lg-flex {
    padding-bottom: 12px;
  }
}


/* ---------------------------------------------------------------------------
 * [9] NARROW DESKTOP
 *
 * Four columns only fit while the link column is wide enough for the longest
 * label. Between 992 and 1200 it is not: "Cardboard Boxes" broke onto two lines
 * and every row went ragged. Three columns below that width, which the longest
 * label clears.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #footer .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* the labels are what decides the column count, so they must not wrap */
  #footer .footer-nav a {
    white-space: nowrap;
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------------
 * [10] WHERE THE PAYMENT ICONS SIT
 *
 * The contact column is a `justify-content: between` stack of three things —
 * contact details, payment icons, credit — so the icons were pushed to whatever
 * height the column happened to be. That made them land in a different place at
 * every width, and at 1280 they landed on the divider: icons 94-128, rule at
 * 118, straight through them.
 *
 * Moving the rule would only move the collision to another width. The icons are
 * anchored to the top of the column instead, directly under the phone number
 * they belong with, and only the credit stays pinned to the bottom — so the
 * distance between the icons and the rule no longer depends on the column
 * height at all.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #footer .d-none.d-lg-flex > .col-auto:last-child > .d-flex.flex-column {
    justify-content: flex-start !important;
  }

  /* contact details -> payment icons */
  #footer .d-none.d-lg-flex > .col-auto:last-child > .d-flex.flex-column > .d-flex.flex-column {
    margin-bottom: 10px !important;
  }

  /* the credit is the only thing still held to the bottom of the column */
  #footer .d-none.d-lg-flex > .col-auto:last-child > .d-flex.flex-column > .d-flex.flex-row:last-child {
    margin-top: auto;
  }
}


/* ==================== cookie-banner.css ==================== */
/**
 * ============================================================================
 *  COOKIE BANNER AND SETTINGS  (editable, no build step)
 * ============================================================================
 *
 *  Loaded on every page AFTER the compiled bundle (see header.php). Styles the
 *  WebToffee GDPR Cookie Consent plugin — the bar along the bottom and the
 *  settings dialog behind "Cookie settings".
 *
 *  It arrived as the plugin ships it: a full-bleed white strip, 13px grey text
 *  running the whole 1440px, a square olive-green ACCEPT button on a colour
 *  used nowhere else on the site (#61A229 against the site's #1E9E3E), and the
 *  settings link as plain grey text that did not read as a control at all.
 *
 *  Nothing here changes the consent behaviour, the categories, the copy or
 *  which buttons exist — the plugin still does all of that. It is presentation
 *  only, on the same card, border, radius and buttons as the rest of the site.
 * ============================================================================
 */


/* ---------------------------------------------------------------------------
 * [1] THE BAR
 *
 * A card lifted off the bottom edge rather than a strip welded to it, held to a
 * sensible width so the copy is not one long line across the whole screen.
 * ------------------------------------------------------------------------- */
#cookie-law-info-bar {
  left: 50% !important;
  bottom: 20px !important;
  width: calc(100% - 40px) !important;
  max-width: 1180px !important;
  padding: 20px 24px !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 10px 34px rgba(15, 47, 61, .16) !important;
  color: #3E5A68 !important;
  font-size: 14px !important;
  transform: translateX(-50%);
}

#cookie-law-info-bar .cli-wrapper {
  max-width: none !important;
}

/* the plugin lays the copy and the controls out as one run of text */
#cookie-law-info-bar .cli-bar-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

#cookie-law-info-bar .cli-bar-message {
  flex: 1 1 420px;
  color: #3E5A68 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

#cookie-law-info-bar .cli-bar-message a {
  color: #02A0C5 !important;
  font-weight: 600;
}

#cookie-law-info-bar .cli-bar-btn_container {
  display: flex !important;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
}


/* ---------------------------------------------------------------------------
 * [2] THE BUTTONS
 *
 * Accept is the site's green action. "Cookie settings" was grey body text with
 * no affordance; it becomes the outlined secondary the rest of the site uses,
 * so the pair reads as two choices rather than one button and a sentence.
 * ------------------------------------------------------------------------- */
#cookie-law-info-bar a.cli-plugin-button,
#cookie-law-info-bar a#wt-cli-accept-btn,
#cookie-law-info-bar a#wt-cli-accept-all-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 24px !important;
  border: 2px solid #008B25 !important;
  border-radius: 3px !important;
  background: #1E9E3E !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color .15s ease;
}

#cookie-law-info-bar a.cli-plugin-button:hover,
#cookie-law-info-bar a#wt-cli-accept-btn:hover,
#cookie-law-info-bar a#wt-cli-accept-all-btn:hover {
  background: #17872F !important;
}

#cookie-law-info-bar a#wt-cli-settings-btn,
#cookie-law-info-bar .cli_settings_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  border: 1px solid #02A0C5 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #02A0C5 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}

#cookie-law-info-bar a#wt-cli-settings-btn:hover,
#cookie-law-info-bar .cli_settings_button:hover {
  background: #02A0C5 !important;
  color: #fff !important;
}

/* the small reject/close cross some configurations show */
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar #cookie_action_close_header_reject {
  color: #6C8494 !important;
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * [3] THE SETTINGS DIALOG
 * ------------------------------------------------------------------------- */
.cli-modal .cli-modal-dialog {
  max-width: 780px;
}

.cli-modal .cli-modal-content {
  border: 1px solid #DCEDF5 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 20px 60px rgba(15, 47, 61, .28) !important;
  overflow: hidden;
}

.cli-modal .cli-modal-body {
  padding: 26px 28px !important;
  color: #3E5A68;
  font-size: 15px;
  line-height: 1.65;
}

.cli-modal .cli-modal-close {
  top: 14px !important;
  right: 14px !important;
  width: 34px;
  height: 34px;
  border: 1px solid #DCEDF5 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #6C8494 !important;
  opacity: 1 !important;
  transition: border-color .15s ease, color .15s ease;
}

.cli-modal .cli-modal-close:hover {
  border-color: #02A0C5 !important;
  color: #02A0C5 !important;
}

.cli-modal .cli-privacy-overview h4,
.cli-modal .cli-tab-header h4,
.cli-modal h4 {
  color: #0F2F3D !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.cli-modal .cli-privacy-content-text {
  color: #3E5A68 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.cli-modal .cli-privacy-readmore {
  color: #02A0C5 !important;
  font-weight: 600;
}

/* the category rows */
.cli-modal .cli-tab-section {
  margin-bottom: 10px !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden;
}

.cli-modal .cli-tab-header {
  padding: 14px 16px !important;
  background: #F6FAFC !important;
}

.cli-modal .cli-tab-header a.cli-nav-link {
  color: #0F2F3D !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.cli-modal .cli-tab-content .cli-tab-pane {
  padding: 14px 16px !important;
  color: #3E5A68 !important;
  font-size: 14px !important;
}

.cli-modal .cli-necessary-caption {
  color: #6C8494 !important;
  font-size: 13px !important;
}

/* the on/off toggles */
.cli-modal .cli-switch .cli-slider {
  border-radius: 999px !important;
  background-color: #C9DCE6 !important;
}

.cli-modal .cli-switch input:checked + .cli-slider {
  background-color: #02A0C5 !important;
}

.cli-modal .cli-switch .cli-slider::before {
  border-radius: 50% !important;
}

.cli-modal .cli-modal-footer {
  padding: 18px 28px !important;
  border-top: 1px solid #EDF4F8 !important;
  background: #fff !important;
}

.cli-modal .cli-modal-footer .wt-cli-privacy-accept-btn,
.cli-modal .cli-modal-footer a.cli_setting_save_button,
.cli-modal .wt-cli-privacy-accept-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  padding: 11px 24px !important;
  border: 2px solid #008B25 !important;
  border-radius: 3px !important;
  background: #1E9E3E !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.cli-modal .cli-modal-footer .wt-cli-privacy-accept-btn:hover,
.cli-modal .cli-modal-footer a.cli_setting_save_button:hover {
  background: #17872F !important;
}

/* the dimmed backdrop */
.cli-modal-backdrop.cli-show {
  background: rgba(15, 47, 61, .55) !important;
  opacity: 1 !important;
}


/* ---------------------------------------------------------------------------
 * [4] MOBILE
 *
 * The two controls go full width and stack under the copy, rather than being
 * squeezed onto the end of a paragraph.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #cookie-law-info-bar {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 16px 18px !important;
    transform: none !important;
  }

  #cookie-law-info-bar .cli-bar-container {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  #cookie-law-info-bar .cli-bar-message {
    flex: 1 1 auto;
    font-size: 13.5px !important;
  }

  #cookie-law-info-bar .cli-bar-btn_container {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
  }

  #cookie-law-info-bar a#wt-cli-settings-btn,
  #cookie-law-info-bar a.cli-plugin-button,
  #cookie-law-info-bar a#wt-cli-accept-btn {
    width: 100% !important;
  }

  .cli-modal .cli-modal-body {
    padding: 20px !important;
  }
}


/* ==================== custom.css ==================== */
/**
 * ============================================================================
 *  CUSTOM SITE-WIDE CSS  (editable, no build step)
 * ============================================================================
 *
 *  General CSS tweaks that can't live in the compiled bundle
 *  (app/themes/frogspark/scss/dist/bundle.min.css — build tooling lost).
 *  Loaded on every page AFTER the bundle (see header.php), so anything here
 *  overrides the compiled styles. Add future one-off overrides below.
 * ============================================================================
 */

/* TrustIndex Google reviews widget — reset the Google logo's top offset. */
body .ti-widget.ti-goog .ti-header .ti-large-logo img {
  top: 0px;
}

/* Hide breadcrumbs on the homepage only (body.home is the front page). */
body.home #breadcrumbs {
  display: none !important;
}

/* Product page — for the colour attribute show ONLY the circle swatches:
   hide the redundant "Brown"/"Black" dropdown (the raw <select> the swatches
   control). The "Choose a colour:" label and the swatches stay. */
.variations .woo-variation-items-wrapper .woo-variation-raw-select,
.variations select#pa_box-colour {
  display: none !important;
}

/* Product page — remove the duplicate BLUE chevron on the variation dropdowns.
   The <select> already has its own black chevron; this .value::before was a
   second, blue one. The variation-swatches plugin locks it to display:block,
   so we make it invisible instead (visibility/opacity/font-size all win). */
html body .woocommerce div.product form.cart .variations td.value:before,
html body .variations td.value:before {
  visibility: hidden !important;
  opacity: 0 !important;
  font-size: 0 !important;
}

/* Product page — match the quantity input height to the Add to Basket button
   (button is 38px; the input was only 30px). */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .quantity input.qty {
  height: 38px !important;
}

/* Mobile nav: dead-centre the logo between the basket (left) and the
   phone/hamburger group (right). Absolute so it's centred regardless of the
   differing widths on each side. Mobile only (below the lg breakpoint). */
@media (max-width: 991.98px) {
  #top-nav .col-lg { position: relative; }
  #top-nav .mobile-nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* Google Reviews badge (inc/_google-reviews-badge.php) — clean, no-jank
   replacement for the old TrustIndex widget button. */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 9px 16px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow .2s ease, transform .2s ease;
  line-height: 1.25;
}
.gr-badge:hover {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.13);
  transform: translateY(-1px);
}
.gr-badge__g { display: inline-flex; flex: 0 0 auto; }
.gr-badge__col { display: inline-flex; flex-direction: column; }
.gr-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #fbbc05;          /* Google gold */
  font-size: 15px;
}
.gr-badge__rating {
  margin-left: 8px;
  color: #202124;
  font-weight: 700;
  font-size: 14px;
}
.gr-badge__count {
  margin-top: 2px;
  color: #5f6368;          /* Google grey */
  font-size: 12px;
  font-weight: 400;
}

/* Bootstrap `.py-4` utility — asymmetric vertical padding (was 1rem top and
   bottom). Applies everywhere the class is used, which includes the header
   announcement bar, the top nav bars, the USP strip, the footer and several
   page templates. */
.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 2.3rem !important;
}

/* Because the rule above loads after the bundle, it would also beat Bootstrap's
   responsive `.py-lg-*` utilities, which are meant to win from 992px up (e.g.
   `class="py-4 py-lg-0"` on the homepage images). Re-declaring the variants the
   theme actually uses restores that. Values copied from the compiled bundle —
   if a new py-lg-* class gets used in a template, add it here too. */
@media (min-width: 992px) {
  .py-lg-0 { padding-top: 0 !important;      padding-bottom: 0 !important; }
  .py-lg-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .py-lg-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .py-lg-8 { padding-top: 2rem !important;   padding-bottom: 2rem !important; }
}

/* "Why buy from Boxtopia?" cards — centre the title and body text to match the
   section heading and the centred icon above them (they were left-aligned).
   `.blue-card.icon-card` is used only by this section, on the homepage and the
   Box Printing page, so both stay consistent. */
.blue-card.icon-card {
  text-align: center;
}

/* "Why buy from Boxtopia?" section (homepage) — bottom padding plus a white →
   #C1E7F6 gradient so it fades into the eco-promise illustration below rather
   than meeting it on a hard edge. The section is position-relative with
   absolutely-positioned cloud graphics, which sit above this background. */
.why-boxtopia {
  padding-bottom: 5rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #C1E7F6 100%);
}

@media only screen and (min-width: 992px) {
  .why-boxtopia {
    padding-bottom: 8rem;
  }
}

/* ---------------------------------------------------------------------------
 * "Browse cardboard boxes by type" (homepage category cards)
 *
 * The cards were untidy: no card styling to speak of, product images at wildly
 * different scales, and a heavy full-width green bar as the button.
 *
 * The nine categories are now a single side-scrolling row rather than wrapping
 * onto multiple rows (which left an odd card stranded on the last one). The
 * scrolling is native CSS overflow, so it is swipeable on touch and works
 * without JavaScript; js/browse-scroller.js only adds the arrow buttons.
 * ------------------------------------------------------------------------- */
.browse-scroller {
  position: relative;
}

.our-products {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 12px;
  -webkit-overflow-scrolling: touch;

  /* the arrows are the control — no visible scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.our-products::-webkit-scrollbar {
  display: none;
}

/* Narrow, fixed-width cards. The Bootstrap col-* classes on these still apply
   at other breakpoints, hence the !important. */
.our-products > [class*="col-"] {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  scroll-snap-align: start;
}

@media only screen and (max-width: 575.98px) {
  .our-products > [class*="col-"] {
    flex: 0 0 210px !important;
    width: 210px !important;
    max-width: 210px !important;
  }
}


/* --- prev / next arrows (added by js/browse-scroller.js) ----------------- */
.browse-scroller__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;                    /* shown once JS confirms it can scroll */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(13, 45, 66, .22);
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.browse-scroller.is-scrollable .browse-scroller__arrow {
  display: flex;
}

.browse-scroller__arrow:hover {
  background: #F2FAFD;
}

.browse-scroller__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.browse-scroller__arrow--prev { left: -6px; }
.browse-scroller__arrow--next { right: -6px; }

/* the chevron itself */
.browse-scroller__arrow::before {
  content: "";
  width: 11px;
  height: 11px;
  border: solid #02A0C5;
  border-width: 0 0 2px 2px;
}

.browse-scroller__arrow--prev::before {
  transform: rotate(45deg);
  margin-left: 3px;
}

.browse-scroller__arrow--next::before {
  transform: rotate(-135deg);
  margin-right: 3px;
}
.our-products .our-products-cards {
  padding: 22px !important;
  background: #fff !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(13, 45, 66, .08) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.our-products a:hover .our-products-cards {
  border-color: #9BD7EA !important;
  box-shadow: 0 10px 26px rgba(13, 45, 66, .16) !important;
  transform: translateY(-3px);
}

/* One consistent image plate. The category images are a mix of cut-outs and
   photographs at different proportions, so `contain` on a fixed height keeps
   them all the same size rather than some filling the card and others sitting
   tiny in the middle. */
.our-products .our-products-cards .responsive-image {
  height: 170px !important;
  background-color: #fff !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 6px !important;
}

.our-products .our-products-cards h4 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  color: #0F2F3D !important;
}

/* Was a full-width flat green bar. Sized to match the site's other buttons
   (e.g. "Shop Now"): 3px corners, 8px/18px padding, 16px bold text. */
.our-products .our-products-cards .btn-light-green {
  width: auto !important;
  align-self: center !important;
  padding: 8px 18px !important;
  border-radius: 3px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: background .2s ease, color .2s ease;
}

.our-products a:hover .btn-light-green {
  background: #008B25 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * "Why buy from Boxtopia?" cards
 *
 * Were transparent panels with a heavy 3px blue border and square corners,
 * sitting on the section's gradient. Restyled as proper white cards to match
 * the category, review and calculator cards elsewhere on the site.
 *
 * Note the padding override: these carry Bootstrap's `py-4`, which is
 * asymmetric site-wide (1rem top / 2.3rem bottom), so the content sat high in
 * the card.
 * ------------------------------------------------------------------------- */
.why-boxtopia .blue-card.icon-card {
  padding: 0 26px 28px !important;
  background: #fff !important;
  border: 1px solid #DCEDF5 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(13, 45, 66, .10) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.why-boxtopia .blue-card.icon-card:hover {
  border-color: #9BD7EA !important;
  box-shadow: 0 12px 28px rgba(13, 45, 66, .16) !important;
  transform: translateY(-3px);
}

/* The icon disc overlaps the top edge of the card. The white ring (first
   shadow) separates it from the card border cleanly. */
.why-boxtopia .card-icon {
  width: 60px !important;
  height: 60px !important;
  padding: 13px !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 0 0 6px #fff, 0 4px 10px rgba(13, 45, 66, .18) !important;
}

.why-boxtopia .blue-card.icon-card h5 {
  margin-bottom: .6rem !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0F2F3D !important;
}

.why-boxtopia .blue-card.icon-card .wysiwyg,
.why-boxtopia .blue-card.icon-card .wysiwyg p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #3E5A68 !important;             /* was pure black */
}

.why-boxtopia .blue-card.icon-card .wysiwyg p {
  margin-bottom: .75rem !important;
}

.why-boxtopia .blue-card.icon-card a {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------------------------
 * "Need something unique?" section — clearance at the top.
 *
 * The Build Your Box panel's mascot deliberately pokes out above the panel, and
 * the USP strip above this section carries a negative bottom margin, so the two
 * were overlapping — the mascot's head touched the cardboard strip. The section
 * had 4rem of top padding; this gives it enough room to clear.
 * ------------------------------------------------------------------------- */
.something-unique {
  padding-top: 8rem !important;
}

@media only screen and (max-width: 991.98px) {
  .something-unique {
    padding-top: 5rem !important;
  }
}

/* Row spacing in "Why buy from Boxtopia?".
   The columns sit 32px apart, but the rows looked almost touching: the cards
   were 48px apart and the icon disc overhangs the top of each card by 39px,
   leaving only ~9px of visible gap. 71px of margin puts the visible row gap at
   32px, matching the columns. */
.why-boxtopia .blue-card.icon-card {
  margin-top: 71px !important;
}