@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap');
/* ============================================================================
   apol.base.css - the Apollyon base layer (token-driven core)
   Replaces style.min.css on converted (Template 1+) pages.
   The Website Designer writes the :root token block into style_additional.css,
   which loads last and overrides these defaults per site. 
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS (defaults = current Apollyon look, from style.min.css)
---------------------------------------------------------------------------- */
:root {
  --apol-color-primary:          #0099cc;
  --apol-color-primary-contrast: #ffffff;
  --apol-color-accent:           #cc2127;

  --apol-color-heading:    #222222;
  --apol-color-text:       #222222;
  --apol-color-muted:      #666666;
  --apol-color-background: #ffffff;
  --apol-color-surface:    #f5f5f5;
  --apol-color-border:     #e2e2e2;
  --apol-color-bar:        #333333;
  --apol-color-bar-text:   #cfcfcf;

  --apol-font-body:    'Roboto Condensed', Georgia, sans-serif;
  --apol-font-heading: 'Roboto Condensed', Georgia, sans-serif;
  --apol-font-size-base: 17px;
  --apol-line-height-body: 1.8;
  --apol-line-height-heading: 1.3;
  --apol-font-weight-body: 300;
  --apol-font-weight-heading: 700;

  --apol-radius: 8px;
  --apol-button-radius: 3px;
  --apol-button-corner: 8px;          /* .Button corner radius (inputs/checkout use --apol-button-radius) */
  --apol-button-bg: var(--apol-color-primary, #0099cc);   /* default .Button background = PRIMARY accent (variants override) */
  --apol-button-text: #ffffff;        /* default .Button label colour */
  --apol-input-bg: #ffffff;
  --apol-input-text: #222222;
  --apol-input-placeholder: #8a8a8a;
  --apol-input-border: #e2e2e2;
  --apol-input-border-width: 1px;
  --apol-input-radius: 3px;
  --apol-input-padding-y: 0.6rem;
  --apol-input-padding-x: 0.75rem;
  --apol-input-margin-bottom: 0px;
  --apol-float-labels: on;            /* contact-form label mode: on|off|above (read by scripts.additional.js) */
  --apol-products-menu-style: mega;   /* products menu: mega (promote each department) | dropdown (single 'Products' dropdown) - read by apol.nav.js */
  /* header / footer bars - each independent of the page side margin */
  --apol-topbar-bg: #333333;
  --apol-topbar-text: #cfcfcf;
  --apol-topbar-font-size: .85rem;   /* App Designer: top-bar text size */
  --apol-topbar-pad-y: 0px;
  --apol-topbar-pad-x: 5%;
  --apol-topbar-border-width: 0px;
  --apol-topbar-border-color: #333333;
  --apol-topbar-margin: 0px;
  --apol-header-bg: #f5f5f5;
  --apol-header-pad-y: 0px;
  --apol-header-pad-x: 5%;
  --apol-header-border-width: 1px;
  --apol-header-border-color: #dddddd;
  --apol-header-margin: 0px;
  --apol-nav-bg: #ffffff;
  --apol-nav-pad-y: 0px;
  --apol-nav-pad-x: 5%;
  --apol-nav-border-width: 0px;
  --apol-nav-border-color: transparent;
  --apol-nav-margin: 0px;
  --apol-sticky-logo: flex;            /* App Designer "Show logo" toggle (flex = shown, none = hidden). Declared here so the reserve style-query below matches at the default. */
  --apol-sticky-logo-size: 30px;       /* App Designer: desktop sticky-header logo height. */
  --apol-sticky-logo-mini-size: 32px;  /* App Designer: tablet/mobile mini-bar logo height. */
  --apol-sticky-logo-reserve: 150px;   /* App Designer: room reserved in the sticky bar for the left-pinned logo, so a left-aligned menu clears it. Only applied while the logo is shown. */
  /* --apol-sticky-bg and --apol-sticky-shadow are intentionally NOT declared here: left
     unset, the sticky bars fall back to the nav / header colour and no shadow (current
     behaviour). The App Designer sets them only when a custom sticky colour / shadow is chosen. */
  --apol-footer-bg: #333333;
  --apol-footer-text: #cfcfcf;
  --apol-footer-pad-y: 16px;
  --apol-footer-pad-x: 5%;
  --apol-navfooter-bg: #222222;                    /* mobile menu footer (App Designer) */
  --apol-navfooter-text: #ffffff;
  --apol-navfooter-detail: rgba(255,255,255,0.5);
  --apol-navfooter-accent: rgba(255,255,255,0.6);
  --apol-navfooter-card-bg: rgba(255,255,255,0.1);
  --apol-footer-border-width: 0px;
  --apol-footer-border-color: transparent;
  --apol-prefooter-bg: #f3f3f3;
  --apol-prefooter-text: #222222;
  --apol-prefooter-pad-y: 20px;
  --apol-prefooter-pad-x: 5%;
  --apol-prefooter-border-width: 0px;
  --apol-prefooter-border-color: transparent;
  --apol-hdricon-color: #222222;
  --apol-hdricon-size: 24px;
  --apol-hdricon-label-size: 0.72rem;
  --apol-hdricon-label-weight: 300;
  --apol-hdricon-label-display: block;
  --apol-hdricon-label-display-m: none;
  --apol-burger-size: 23px;
  --apol-logo-width: 200px;
  --apol-logo-height: 64px;
  --apol-logo-pad: 0px;
  --apol-icon-home-display: block;
  --apol-icon-stores-display: block;
  --apol-search-bg: #ffffff;
  --apol-search-text: #222222;
  --apol-search-border: #e2e2e2;
  --apol-search-radius: 6px;
  --apol-search-btn: #111111;
  --apol-search-btn-bg: transparent;   /* App Designer: search icon-button background (set a colour for a solid button) */
  --apol-search-font-size: 1rem;       /* App Designer: search input text/placeholder size */
  --apol-search-btn-width: 48px;       /* App Designer: search button width (also reserves input right padding) */
  --apol-search-btn-inset-x: 2px;      /* gap from the input's right edge */
  --apol-search-btn-inset-y: 2px;      /* gap from top & bottom (0 = full input height) */
  --apol-search-btn-radius-tl: 6px;    /* four independent button corners */
  --apol-search-btn-radius-tr: 6px;
  --apol-search-btn-radius-br: 6px;
  --apol-search-btn-radius-bl: 6px;
  --apol-msearch-box: block;
  --apol-msearch-icon: none;
  /* App Designer: header phone (tel: link, injected before the icon cluster) + logo strapline.
     Both float via nudge offsets so moving them never grows the header. */
  --apol-header-phone-color: inherit;
  --apol-header-phone-size: 1.35rem;
  --apol-header-phone-weight: 700;
  --apol-phone-nudge-x: 0px;
  --apol-phone-nudge-y: 0px;
  --apol-phone-display-m: inline-flex;
  --apol-header-strapline-color: inherit;
  --apol-header-strapline-size: 0.95rem;
  --apol-header-strapline-weight: 400;
  --apol-strapline-nudge-x: 0px;
  --apol-strapline-nudge-y: 6px;
  --apol-strapline-display-m: block;
  --apol-button-padding-x: 30px;
  --apol-button-padding-y: 0px;
  --apol-button-font-weight: 600;

  --apol-gutter-y: 10px;
  --apol-gutter-x: 1.5%;          /* Template 2 (no gutters) sets this to 0 */
  --apol-flow-space: 0.95rem;   /* text flow margins (NB --apol-spacing-unit belongs to the section system = 8px) */
  --apol-header-height: 78px;
  --apol-header-top-height: 34px;
  --apol-page-gutter: 5%;
  --apol-page-gutter-y: 15px;          /* legacy single top+bottom margin (kept for back-compat) */
  --apol-page-gutter-top: 30px;        /* App Designer: page margin above content */
  --apol-page-gutter-bottom: 30px;     /* App Designer: page margin below content - 30px default gap above the footer. MUST match the BASE map's 'page-gutter-bottom' in app_designer_setup.aspx: the designer only persists tokens that differ from BASE, so if this fallback and BASE disagree, setting the control back to BASE writes no token and this fallback wins (the old 30px-vs-BASE-0 mismatch is exactly why the control at 0 couldn't remove the gap). Both at 30px now, so dragging to 0 writes a 0px token into style_additional.css and removes the gap. */
  --apol-crumb-border-width: 1px;
  --apol-crumb-border-color: #e6e6e6;

  --apol-vspace-sm: 1.5rem;
  --apol-vspace-md: 3rem;
  --apol-vspace-lg: 5rem;
  --apol-section-vspace-default: var(--apol-vspace-md);

  /* Inner padding presets (context toolbar > Spacing & align > Inner padding).
     Distinct from --apol-vspace-* (which now drives OUTER gap / margin). */
  --apol-pad-sm: 1rem;
  --apol-pad-md: 2rem;
  --apol-pad-lg: 3.5rem;

  --apol-font-size-nav: 0.95rem;
  --apol-font-size-nav-m: 0.95rem;     /* mobile menu link size (App Designer, mobile device) */
  --apol-font-weight-nav: 300;         /* nav link weight (App Designer, desktop) */
  --apol-font-weight-nav-m: 300;       /* nav link weight (App Designer, mobile) */
  --apol-nav-link:   var(--apol-color-text);
  --apol-nav-icon:   #555555;
  --apol-nav-active: var(--apol-color-heading);
  /* mobile slide-out menu colours (App Designer). Default to following the existing
     tokens so unchanged sites are visually identical; set them to override. */
  --apol-mobilemenu-text: var(--apol-nav-link);
  --apol-mobilesubmenu-bg: var(--apol-mobilemenu-bg, var(--apol-color-surface));
  --apol-color-tag:  #ef8b1f;
  --apol-dim-alpha:  .6;

  /* App Designer - product-section surround (Argos-style: each product-page
     section boxed as its own card). Only the on/off gate lives here; scripts_
     additional.js reads it and stamps html.apol-pdp-surround-on. The card's
     background / border / corners default to the Cards panel tokens (see the
     .apol-pdp-surround-on rule in the PDP section) and are overridden only when
     the admin sets a surround-specific value (emitted to style_additional.css). */
  --apol-pdp-surround-display: 0;

  /* App Designer - fade content in on scroll. 'off' | 'on'. Read at runtime by
     the managed observer in scripts_additional.js; the CSS below only defines the
     transition, applied when html carries .apol-reveal-on. */
  --apol-scroll-reveal: off;
}

/* ----------------------------------------------------------------------------
   2. BASE ELEMENTS
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip !important; max-width: 100%; }
body { min-width: 300px; }
/* Full bleed (issue 6): overflow-x:clip here was clipping .apol-space-bleed at
   the 5% gutters on Standard Margin pages, so Full bleed only worked on Full
   Width pages. Relaxed to visible so Full bleed reaches the viewport on ANY
   page. html/body still carry overflow-x:clip !important (below), so no
   horizontal PAGE scroll appears. If you'd rather contain bleed to the content
   box again on margin pages, set this back to overflow-x: clip. */
.main_content_inner, .main_content_inner_rows { overflow-x: visible; }
[hidden] { display: none !important; }
/* the page lives inside this wrapper - it must pass the flex chain through,
   or the footer's margin-top:auto has no flex context to push against */
body > .wsmenucontainer { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; }
html { font-size: var(--apol-font-size-base); scroll-behavior: smooth;
  /* reserve the scrollbar gutter permanently so a mega menu opening on a short
     page (scrollbar appearing/disappearing) can't shift the layout sideways */
  scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column !important;
  font-family: var(--apol-font-body); font-weight: var(--apol-font-weight-body);
  line-height: var(--apol-line-height-body); color: var(--apol-color-text);
  background: var(--apol-color-background); -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--apol-font-heading); font-weight: var(--apol-font-weight-heading); line-height: var(--apol-line-height-heading); color: var(--apol-color-heading); margin: 0 0 var(--apol-flow-space); }
/* App Designer: heading-size multiplier - scales the heading hierarchy without
   touching base body size. Defaults to the browser sizes (x1), so unchanged. */
h1 { font-size: calc(2em    * var(--apol-heading-scale, 1)); }
h2 { font-size: calc(1.5em  * var(--apol-heading-scale, 1)); }
h3 { font-size: calc(1.17em * var(--apol-heading-scale, 1)); }
h4 { font-size: calc(1em    * var(--apol-heading-scale, 1)); }
h5 { font-size: calc(0.83em * var(--apol-heading-scale, 1)); }
h6 { font-size: calc(0.67em * var(--apol-heading-scale, 1)); }
p { margin: 0 0 var(--apol-flow-space); }
a { color: var(--apol-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--apol-flow-space); padding-left: 1.4em; }
hr { border: 0; border-top: 1px solid var(--apol-color-border); margin: var(--apol-vspace-sm) 0; }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select {
  font-family: inherit; font-size: var(--apol-input-font-size, inherit); font-weight: var(--apol-input-font-weight, inherit); color: var(--apol-input-text); background: var(--apol-input-bg);
  border: var(--apol-input-border-width) solid var(--apol-input-border); border-radius: var(--apol-input-radius); padding: var(--apol-input-padding-y) var(--apol-input-padding-x); margin: 0 0 var(--apol-input-margin-bottom, 0px); width: var(--apol-input-width, auto); max-width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--apol-color-primary); }
input::placeholder, textarea::placeholder { color: var(--apol-input-placeholder); opacity: 1; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%23888' d='M6 8 0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; line-height: 1.25; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--apol-color-border); }

/* ----------------------------------------------------------------------------
   3. BUTTONS + TAGS (verbatim from style.min.css, brand colours tokenised)
---------------------------------------------------------------------------- */
.Button_no_change_mobile { color: #fff;
		background-color: #666;
		border-color: #666;
		/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
        cursor: pointer;
		padding: 0px 30px 0px 30px;
		height: 54px;
		margin: 0em 1px 0.5em 1px;
		font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important;
		font-size: 1.0em;
		font-weight: 100;
		text-transform: uppercase;
		cursor: pointer;
		border: 0;
		border-radius: 8px;
		outline: 0;
		/*transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
				  -webkit-appearance: none;
		  -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;*/ }
.Button_no_change_mobile:hover, .btn-secondary:focus { border-color: #701c7e;
                background-color: #eee;
        color: #222;
		border-radius: 8px;
		/*box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);*/ }
/* default .Button colour - declared before the variants so .Button_X overrides it */
.Button { --btn-c: var(--apol-button-bg); background-color: var(--btn-c); border-color: var(--btn-c); color: var(--apol-button-text); }
/* three accents (drive solid/outline/ghost; :hover darkens via color-mix) */
.Button_primary, .Button_light_blue { --btn-c: var(--apol-color-primary, #0099cc); color: var(--apol-button-primary-text, #fff); }
.Button_secondary, .Button_red      { --btn-c: var(--apol-color-accent, #cc2127); color: var(--apol-button-secondary-text, #fff); }
.Button_tertiary                     { --btn-c: var(--apol-color-tertiary, #6c757d); color: var(--apol-button-tertiary-text, #fff); }
/* legacy named colours retained (now darken-on-hover via --btn-c) */
.Button_dark_blue { --btn-c: #3b5998; }
.Button_purple { --btn-c: #9c27b0; }
.Button_green { --btn-c: #4caf50; }
.Button_yellow { --btn-c: #FFDF14; }
.Button_orange { --btn-c: #FF5414; }
.Button_black { --btn-c: #000; }
.Button_white { --btn-c: #fff; color: #222; }
.Button_light_grey { --btn-c: #ccc; color: #222; }
.Button_small_padding { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px; }
.Button_small_padding_no_change { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px;
        max-width: 56px; }
.Button_small_padding_no_change_event { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px;
        max-width: 200px; }
.Button_small_padding_no_change_wide { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px;
        max-width: 100%; }
.Button_round { border-radius: 50%;
	padding: 0px 20px 0px 20px; }
.Button_full { width:100% !Important; }
.Button_no_background { background-color: transparent;
		border-color: transparent;
		color: #666;
		/* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);*/
		padding: 0px 5px 0px 5px;
		height: 24px;
		font-size: 0.9em;
        cursor:  pointer;
        font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important; }
.Button_no_background:hover, .btn-secondary:focus { border-color: transparent;
		/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);*/
		color:#222; }
.Button_no_background_light_blue { color: var(--apol-color-primary, #0099cc); }
.Button_no_background_dark_blue { color: #3b5998; }
.Button_no_background_red { color: var(--apol-color-accent, #cc2127); }
.Button_no_background_purple { color: #9c27b0; }
.Button_no_background_green { color: #4caf50; }
.Button_no_background_yellow { color: #FFDF14; }
.Button_no_background_orange { color: #FF5414; }
.Button_no_background_black { color: #000; }
.Button_no_background_white { color: #fff; }
.Button_no_background_light_grey { color: #ccc; }
.Button_no_background_custom_search { background-color: transparent;
		border-color: transparent;

		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
		padding: 0px 5px 0px 5px;
		font-size: 1.8em; color:#999; height: 80px; }
.Button_no_background_custom_search:hover, .btn-secondary:focus { border-color: transparent;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
		color:#222; }
@media only screen and (max-width : 767px) {
  .Button_small_padding { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px; }
  .Button_small_padding_no_change { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 46px; }
  .Button_small_padding_no_change_event { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 50%; }
  .Button_small_padding_no_change_wide { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 100%;
        margin: 0px 0px 0px 1px; }
  .Button_round { border-radius: 50%;
	padding: 0px 20px 0px 20px;
    width: auto;
    margin-left: 0px; }
}
@media only screen and (max-width : 500px) {
  .Button_no_change_mobile { color: #fff;
		background-color: #666;
		border-color: #666;
		/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
        cursor: pointer;
		padding: 0px 30px 0px 30px;
		height: 54px;
		margin: 0em 1px 0.5em 1px;
		font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important;
		font-size: 1.0em;
		font-weight: 100;
		text-transform: uppercase;
		cursor: pointer;
		border: 0;
		border-radius: 8px;
		outline: 0;
		/*transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		-webkit-appearance: none;
		  -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;*/
    width: auto;
    margin-bottom: 10px; }
  .Button_no_change_mobile:hover, .btn-secondary:focus { border-color: #701c7e;
		border-radius: 8px;
		/*box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);*/ }
  .Button_light_blue { background-color: var(--apol-color-primary, #0099cc);
		border-color: var(--apol-color-primary, #0099cc); }
  .Button_dark_blue { background-color: #3b5998;
		border-color: #3b5998; }
  .Button_red { background-color: var(--apol-color-accent, #cc2127);
		border-color: var(--apol-color-accent, #cc2127); }
  .Button_purple { background-color: #9c27b0;
		border-color: #9c27b0; }
  .Button_green { background-color: #4caf50;
		border-color: #4caf50; }
  .Button_yellow { background-color: #FFDF14;
		border-color: #FFDF14; }
  .Button_orange { background-color: #FF5414;
		border-color: #FF5414; }
  .Button_black { background-color: #000;
		border-color: #000; }
  .Button_white { background-color: #fff;
		border-color: #fff;
		color: #222; }
  .Button_light_grey { background-color: #ccc;
		border-color: #ccc;
		color: #222; }
  .Button_small_padding { padding: 0px 18px 0px 18px;
		height: 54px;
        min-width: 56px; }
  .Button_small_padding_no_change { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 46px; }
  .Button_small_padding_no_change_event { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 50%; }
  .Button_small_padding_no_change_wide { padding: 0px 13px 0px 13px !Important;
		height: 54px;
        min-width: 46px;
        max-width: 100%;
        margin: 0px 0px 0px 1px; }
  .Button_round { border-radius: 50%;
	padding: 0px 20px 0px 20px;
    width: auto;
    margin-left: 0px; }
  .Button_no_background { background-color: transparent;
		border-color: transparent;
		color: #666;
		/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);*/
		padding: 0px 5px 0px 5px;
		height: 24px;
		font-size: 0.9em;
        width: auto;
        margin-left: 0px; }
  .Button_no_background:hover, .btn-secondary:focus { border-color: transparent;
		/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
		color:#222;*/ }
  .Button_no_background_light_blue { color: var(--apol-color-primary, #0099cc); }
  .Button_no_background_dark_blue { color: #3b5998; }
  .Button_no_background_red { color: var(--apol-color-accent, #cc2127); }
  .Button_no_background_purple { color: #9c27b0; }
  .Button_no_background_green { color: #4caf50; }
  .Button_no_background_yellow { color: #FFDF14; }
  .Button_no_background_orange { color: #FF5414; }
  .Button_no_background_black { color: #000; }
  .Button_no_background_white { color: #fff; }
  .Button_no_background_light_grey { color: #ccc; }
  .Button_no_background_custom_search { background-color: transparent;
		border-color: transparent;

		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
		padding: 0px 5px 0px 5px;
		font-size: 1.8em; color:#999; height: 80px; }
  .Button_no_background_custom_search:hover, .btn-secondary:focus { border-color: transparent;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
		color:#222; }
}

/* ----------------------------------------------------------------------------
   4. FLUID COLUMN / GUTTER SYSTEM (verbatim from style.min.css)
---------------------------------------------------------------------------- */
.flex-container-columns { display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0px calc(-1 * var(--apol-gutter-x, 1.5%)) 0px calc(-1 * var(--apol-gutter-x, 1.5%)); }
.flex-container-columns-blog { display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 30px calc(-1 * var(--apol-gutter-x, 1.5%)) -10px calc(-1 * var(--apol-gutter-x, 1.5%)); }
.flex-item-100-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-100-percent-column-location { width:100%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%);
margin: -30px 0px 0px 0px; }
.flex-item-100-percent-column-event { width:100%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%);
margin: -27px 0px 0px 0px; }
.flex-item-100-percent-column-donations { width:100%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%);
margin: -10px 0px -10px 0px; }
.flex-item-75-percent-column { width: 75%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-66-percent-column { width: 66.66666%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-50-percent-column { width: 50%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-50-percent-column-divider { width: 50%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%);
border-right: solid 1px #ccc; }
.flex-item-33-percent-column { width: 33.33333%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-25-percent-column { width: 25%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-20-percent-column { width: 20%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-16-percent-column { width: 16.666%;
padding: var(--apol-gutter-y, 10px) var(--apol-gutter-x, 1.5%); }
.flex-item-auto-percent-column { width: auto;
padding: 10px 4px; }
.flex-container-columns-stretch { display: flex;
  flex-flow: row wrap;
align-items: stretch;
  margin: 0px 0% 0px 0%; }
.flex-item-100-percent-column-stretch { width:100%;
padding: 10px 1% 10px 0%; }
.flex-item-100-percent-column-stretch-no-padding { width:100%;
padding: 0px 1% 0px 0%; }
.flex-item-100-percent-column-stretch-nopad { width:100%;
padding: 0px 0% 0px 0%; }
.flex-item-100-percent-column-stretch-nopaddingright { width:100%;
padding: 10px 0% 10px 0%; }
.flex-item-84-percent-column-stretch { width: 83.334%;
padding: 10px 1% 10px 0%; }
.flex-item-75-percent-column-stretch { width: 75%;
padding: 10px 1% 10px 0%; }
.flex-item-66-percent-column-stretch { width: 66.66666%;
padding: 10px 1% 10px 0%; }
.flex-item-50-percent-column-stretch { width: 50%;
padding: 10px 1% 10px 0%; }
.flex-item-33-percent-column-stretch { width: 33.33333%;
padding: 10px 1% 10px 0%; }
.flex-item-33-percent-column-stretch-nopaddingright { width: 33.33333%;
padding: 10px 0% 10px 0%; }
.flex-item-25-percent-column-stretch { width: 25%;
padding: 10px 1% 10px 0%; }
.flex-item-25-100mobile-percent-column-stretch { width: 25%;
padding: 0px 1% 0px 0%; }
.flex-item-20-percent-column-stretch { width: 20%;
padding: 10px 1% 10px 0%; }
.flex-item-16-percent-column-stretch { width: 16.666%;
padding: 10px 1% 10px 0%; }
.flex-item-auto-percent-column-stretch { width: auto;
padding: 10px 4px 10px 4px; }
.flex-item-auto-percent-column-stretch-wide { width: auto;
padding: 10px 4px 10px 4px; }
.flex-item-20-percent-column-stretch-full-products { width: 16.333333%;
padding: 10px 1% 10px 0%; }
.flex-item-100-percent-column-stretch-dashboard { width:98%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-75-percent-column-stretch-dashboard { width: 73%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-66-percent-column-stretch-dashboard { width: 64.66666%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-50-percent-column-stretch-dashboard { width: 48%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-33-percent-column-stretch-dashboard { width: 31.33333%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-25-percent-column-stretch-dashboard { width: 23%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-20-percent-column-stretch-dashboard { width: 18%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-16-percent-column-stretch-dashboard { width: 14.666%;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-auto-percent-column-stretch-dashboard { width: auto;
padding: 30px;
border: 1px solid #ddd;
margin: 1%; }
.flex-item-row-100-percent-1 { width:100%;
padding: 0%;
background: rgba(150,150,150,1.0);
min-height: 0px;
display: block; }
.flex-item-row-100-percent-2 { width:100%;
padding: 0%;
background: rgba(200,150,150,1.0);
min-height: 0px;
display: block; }
.flex-item-row-100-percent-3 { width:100%;
padding: 0%;
background: rgba(100,150,150,1.0);
min-height: 0px;
display: block; }
.flex-item-row-100-percent-4 { width:100%;
padding: 0%;
background: rgba(50,150,150,1.0);
min-height: 0px;
display: block; }
.flex-item-row-100-percent-5 { width:100%;
padding: 0%;
background: rgba(0,150,150,1.0);
min-height: 0px;
display: block; }
@media only screen and (max-width : 1365px) {
  .flex-item-20-percent-column-stretch-full-products { width: 100%;
padding: 0px 0px ; }
}
@media only screen and (max-width : 1000px) {
  .flex-container-columns { display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0px 0%; }
  .flex-container-columns-blog { display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 30px 0% -10px 0%; }
  .flex-item-100-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-100-percent-column-location { width:100%;
padding: 10px 0% 0px 0%; }
  .flex-item-100-percent-column-event { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-100-percent-column-donations { width:100%;
padding: 10px 0% 0px 0%; }
  .flex-item-75-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-66-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-50-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-50-percent-column-divider { width: 100%;
padding: var(--apol-gutter-y, 10px) 0%;
border-right: solid 0px #ccc; }
  .flex-item-33-percent-column { width:100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-25-percent-column { width: 100%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-20-percent-column { width: 50%;
padding: var(--apol-gutter-y, 10px) 0%; }
  .flex-item-16-percent-column { width: 33.332%;
padding: 10px 3% 10px 0%; }
  .flex-container-columns-stretch { display: flex;
  flex-flow: row wrap;
align-items: stretch;
  margin: 0px 0%; }
  .flex-item-100-percent-column-stretch { width:100%;
padding:10px 0% 0px 0%; }
  .flex-item-75-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-66-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-50-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-33-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-33-percent-column-stretch-nopaddingright { width: 100%;
padding:5px 0% 5px 0%; }
  .flex-item-25-percent-column-stretch { width: 100%;
padding:10px 1% 0px 0%; }
  .flex-item-20-percent-column-stretch { width: 50%;
padding:10px 1% 0px 0%; }
  .flex-item-16-percent-column-stretch { width: 33.332%;
padding:10px 1% 0px 0%;
min-width:170px; }
  .flex-item-100-percent-column-stretch-dashboard { width:100%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-75-percent-column-stretch-dashboard { width:100%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-66-percent-column-stretch-dashboard { width:100%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-50-percent-column-stretch-dashboard { width:100%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-33-percent-column-stretch-dashboard { width:100%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-25-percent-column-stretch-dashboard { width: 48%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-20-percent-column-stretch-dashboard { width: 48%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-16-percent-column-stretch-dashboard { width: 14.666%;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-auto-percent-column-stretch-dashboard { width: auto;
padding: 30px;
border: 1px solid #ddd;
margin: 0.0% 0% 3.0% 0%; }
  .flex-item-100-percent-column-stretch { width:100%;
padding: 5px 0% 5px 0%; }
  .flex-item-50-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-33-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
  .flex-item-25-percent-column-stretch { width: 50%;
padding:10px 0% 0px 0%; }
  .flex-item-25-100mobile-percent-column-stretch { width: 50%;
padding:10px 1% 0px 0%; }
  .flex-item-20-percent-column-stretch { width: 50%;
padding:10px 0% 0px 0%; }
  .flex-item-66-percent-column-stretch { width: 100%;
padding:10px 0% 0px 0%; }
}
@media only screen and (max-width : 600px) {
  .flex-item-16-percent-column { width: 47%;
        padding: 10px 3% 10px 0%; }
  .flex-item-16-percent-column-stretch { width: 47%;
        padding: 10px 1% 10px 0%;
        min-width: 130px; }
  .flex-item-25-100mobile-percent-column-stretch { width: 100%;
        padding: 0px 1% 0px 0%; }
  .flex-item-100-percent-column-location { width:100%;
padding: 10px 0% 0px 0%; }
  .flex-item-100-percent-column-event { width:100%;
padding: 42px 0% 0px 0%; }
}
@media only screen and (max-width : 500px) {
  .flex-item-100-percent-column-location { width:100%;
padding: 0px 0% 0px 0%; }
  .flex-item-100-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-75-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-66-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-50-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-33-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-25-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-20-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-16-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-auto-percent-column-stretch-dashboard { width:100%;
padding: 20px 15px;
border: 1px solid #ddd;
margin: 0.0% 0% 30px 0%; }
  .flex-item-auto-percent-column-stretch { width: auto;
padding: 8px 4px 8px 4px;
  min-width: 50%; }
  .flex-item-auto-percent-column-stretch-wide { width: 50%;
padding: 8px 4px 8px 4px; }
}

/* ----------------------------------------------------------------------------
   6. CHROME - Template 1 (approved shell design on the real markup)
      Wrapper classes come from the template; inner nav classes
      (.sub-menu, .wsmegamenu, .wslistlinks, .wsshoptabing, .wstmenutag)
      are emitted by the server links token and styled here under .apol-menu.
      JS hooks preserved for resources.min.js:
      .sidenav-trigger, .quickdonateopenclose_ecombasket, .roundpoint,
      .signin_button_text*, #apol-user-type / data-cat-access.
      apol.nav.js: mobile overlay, department tabs, search mount.
---------------------------------------------------------------------------- */
#top { position: absolute; top: 0; }
.page_background { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: 50% 0; background-repeat: no-repeat; }

/* --- top dark bar --- */
.header_top { background: var(--apol-topbar-bg); min-height: var(--apol-header-top-height); color: var(--apol-topbar-text); font-size: var(--apol-topbar-font-size, .85rem); display: flex; align-items: center; border-bottom: var(--apol-topbar-border-width) solid var(--apol-topbar-border-color); margin-bottom: var(--apol-topbar-margin); position: relative; z-index: 1000; }  /* above .nav_scrim (z-index 15) so the top bar stays bright when a menu opens, matching .logo_menu_container */
.header_top_inner { width: 100%; padding: var(--apol-topbar-pad-y) var(--apol-topbar-pad-x); }
.header_top_inner a { color: var(--apol-topbar-text); }  /* links (tel:/mailto:) follow the App Designer "Text colour" control, not the global bar-text default, so setting the top bar text to white actually whitens the contact links too */
/* the top-bar contact template hardcodes font-size on .apol-topbar-row in its own CSS
   (style_additional.css, one-class specificity) which beat .header_top and made the App
   Designer "Text size" do nothing. Re-point those template rows at the token with higher
   specificity so the control works. Icon-only social links (.apol-topbar-ico, font-size:0)
   are deliberately excluded so their hidden text stays hidden. */
.header_top :is(.apol-topbar-row, .apol-topbar-group, .apol-topbar-link, .apol-topbar-promo, .apol-topbar-usps) { font-size: var(--apol-topbar-font-size, .85rem); }

/* --- header bar: logo / search / icons --- */
.logo_menu_container_background { display: none; }
.logo_menu_container { background: var(--apol-color-surface); border-bottom: 1px solid var(--apol-color-border); position: relative; z-index: 25; }
.logo_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--apol-header-justify, space-between); gap: 28px; min-height: var(--apol-header-height); padding: var(--apol-header-pad-y) var(--apol-header-pad-x); border-top: var(--apol-header-border-width) solid var(--apol-header-border-color); border-bottom: var(--apol-header-border-width) solid var(--apol-header-border-color); background-color: var(--apol-header-bg); margin-bottom: var(--apol-header-margin); }
.logo { display: flex; align-items: center; flex: var(--apol-header-side-grow, 1) 1 0; min-width: 0; margin: 8px 0 -4px -10px; position: relative; left: var(--apol-logo-nudge-x, 0px); top: var(--apol-logo-nudge-y, 0px); /* grow basis-0 so search centres; left/top = pixel nudge (not transform - avoids trapping fixed descendants) */ }
.logo a { display: block; }
.logo img { width: var(--apol-logo-width); height: var(--apol-logo-height); padding: var(--apol-logo-pad); object-fit: contain; object-position: left center; }
.logo2 { display: none; }  /* sticky/scrolled logo variant - wired later */

/* --- search (form is moved here from the slide-out by apol.nav.js) --- */
.header_search { flex: 0 1 clamp(320px, 35vw, 600px); width: 100%; max-width: clamp(320px, 35vw, 600px); margin: 0; position: relative; left: var(--apol-search-nudge-x, 0px); top: var(--apol-search-nudge-y, 0px); z-index: 4000; }  /* left/top nudge (not transform: a transform here would break the fixed search scrim) */
.header_search .topmenusearch { position: relative; display: flex; }
.header_search .input-field { flex: 1 1 auto; min-width: 0; position: relative; }
.header_search input.autocomplete, .header_search input#autocomplete-input {
  width: 100%; padding: .85rem 3.2rem .85rem 1.1rem; font-size: var(--apol-search-font-size, 1rem); font-weight: 300;
  background: #fff; color: var(--apol-color-text);
  border: 1px solid var(--apol-color-border); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s;
}
.header_search input.autocomplete::placeholder { color: var(--apol-color-muted); }
.header_search input.autocomplete:focus, .header_search input#autocomplete-input:focus {
  outline: none; border-color: var(--apol-color-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.header_search .btnstyleslide { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 46px; background: transparent; border: 0; color: #111; cursor: pointer; display: grid; place-items: center; font-size: 19px; }
input.searchMenuSupport { display: none !important; }   /* honeypot field */

/* --- icon cluster (token-emitted wraps; flex row, labels under icons) --- */
.header_top_inner_sub { flex: var(--apol-header-side-grow, 1) 1 0; min-width: 0; display: flex; justify-content: flex-end; position: relative; left: var(--apol-icons-nudge-x, 0px); top: var(--apol-icons-nudge-y, 0px); }
.contact_header_holder { display: flex; align-items: center; gap: 18px; }
.mobile_header_icons { display: flex; gap: 26px; align-items: center; }
.mobile_header_icons > div { position: relative; }
.mobile_header_icons_iconwrap_search { display: none !important; }  /* search is inline now */
.mobile_header_icons_iconwrap_search { order: var(--apol-icon-search-order, 2); flex: 0 0 auto; }
.tertiary_link2 { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; color: var(--apol-color-text); font-size: .72rem; font-weight: 300; position: relative; }
.tertiary_link2:hover { color: var(--apol-hdricon-hover, var(--apol-hdricon-color)); text-decoration: none; }
.tertiary_link2 i { font-size: 24px; line-height: 1; font-weight: var(--apol-icon-weight, 100) !important; }
.mobile_header_icons a { color: var(--apol-hdricon-color); }
.mobile_header_icons a i { font-size: var(--apol-hdricon-size); }
.mobile_header_icons a span { font-size: var(--apol-hdricon-label-size); font-weight: var(--apol-hdricon-label-weight); }
.tertiary_link2 span, .signin_button_text, .signout_button_text { display: var(--apol-hdricon-label-display, block); }
.tertiary_link2 br { display: none; }
.roundpoint { position: absolute; top: -7px; right: -10px; background: var(--apol-color-primary); color: #fff; font-size: .62rem; line-height: 1; padding: 2px 5px; border-radius: 999px; font-style: normal; }

/* --- App Designer: header phone + logo strapline (injected by scripts_additional.js
   from the --apol-header-phone-number / --apol-header-strapline-text tokens). The
   elements only exist when the admin has typed a value, so an empty field removes
   them. Both FLOAT (position offsets, not layout flow) so nudging them never grows
   the header; desktop + mobile (-m) tiers are independent, mobile hide via display. */
.apol-hdr-phone { position: relative; left: var(--apol-phone-nudge-x, 0px); top: var(--apol-phone-nudge-y, 0px);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; line-height: 1;
  color: var(--apol-header-phone-color, inherit); font-size: var(--apol-header-phone-size, 1.35rem); font-weight: var(--apol-header-phone-weight, 700); }
.apol-hdr-phone:hover { color: var(--apol-header-phone-color, inherit); text-decoration: none; }
.apol-hdr-phone i { font-size: 1em; font-weight: var(--apol-icon-weight, 300) !important; }
/* strapline: absolute so it NEVER grows the logo/header - it floats out of flow and
   is nudged down to sit level with the nav. .logo is position:relative already. */
.apol-logo-strapline { position: absolute; left: var(--apol-strapline-nudge-x, 0px); top: calc(100% + var(--apol-strapline-nudge-y, 6px));
  white-space: nowrap; line-height: 1.2; pointer-events: none; z-index: 1001;   /* above .menu_desktop (opaque white bg, z-index:1000) so it stays visible when floated down onto the nav line */
  color: var(--apol-header-strapline-color, inherit); font-size: var(--apol-header-strapline-size, .95rem); font-weight: var(--apol-header-strapline-weight, 400); }

/* icon order per the approved design: Home, Stores, Bag, Account */
.mobile_header_icons { display: flex; }
.mobile_header_icons_iconwrap_home   { order: 1; display: var(--apol-icon-home-display, block); }
.mobile_header_icons_iconwrap_stores { order: 2; display: var(--apol-icon-stores-display, block); }
.mobile_header_icons_iconwrap_basket { order: 3; }
.mobile_header_icons_iconwrap_login  { order: 4; }
/* --- App Designer nudges: per-icon (desktop/base). position:relative is
   inherited from `.mobile_header_icons > div`. Mobile/tablet overrides are in
   the @media block just below so the two tiers stay independent. ------------- */
.mobile_header_icons_iconwrap_home   { left: var(--apol-icon-home-nudge-x, 0px);    top: var(--apol-icon-home-nudge-y, 0px); }
.mobile_header_icons_iconwrap_stores { left: var(--apol-icon-stores-nudge-x, 0px);  top: var(--apol-icon-stores-nudge-y, 0px); }
.mobile_header_icons_iconwrap_basket { left: var(--apol-icon-bag-nudge-x, 0px);     top: var(--apol-icon-bag-nudge-y, 0px); }
.mobile_header_icons_iconwrap_login  { left: var(--apol-icon-account-nudge-x, 0px); top: var(--apol-icon-account-nudge-y, 0px); }
.mobile_header_icons_iconwrap_search { position: relative; left: var(--apol-icon-search-nudge-x, 0px); top: var(--apol-icon-search-nudge-y, 0px); }
/* mobile/tablet tier (<=980): group + per-icon nudges override the desktop values
   above, so the App Designer's device toggle edits each tier independently. ---- */
@media (max-width: 980px) {
  .logo                 { left: var(--apol-logo-nudge-x-m, 0px);   top: var(--apol-logo-nudge-y-m, 0px); }
  .header_search        { left: var(--apol-search-nudge-x-m, 0px); top: var(--apol-search-nudge-y-m, 0px); }
  .header_top_inner_sub { left: var(--apol-icons-nudge-x-m, 0px);  top: var(--apol-icons-nudge-y-m, 0px); }
  .mobile_header_icons_iconwrap_home   { left: var(--apol-icon-home-nudge-x-m, 0px);    top: var(--apol-icon-home-nudge-y-m, 0px); }
  .mobile_header_icons_iconwrap_stores { left: var(--apol-icon-stores-nudge-x-m, 0px);  top: var(--apol-icon-stores-nudge-y-m, 0px); }
  .mobile_header_icons_iconwrap_basket { left: var(--apol-icon-bag-nudge-x-m, 0px);     top: var(--apol-icon-bag-nudge-y-m, 0px); }
  .mobile_header_icons_iconwrap_login  { left: var(--apol-icon-account-nudge-x-m, 0px); top: var(--apol-icon-account-nudge-y-m, 0px); }
  .mobile_header_icons_iconwrap_search { left: var(--apol-icon-search-nudge-x-m, 0px); top: var(--apol-icon-search-nudge-y-m, 0px); }
  /* header phone + strapline: independent mobile tier - own position, own size, own show/hide */
  .apol-hdr-phone { left: var(--apol-phone-nudge-x-m, 0px); top: var(--apol-phone-nudge-y-m, 0px); display: var(--apol-phone-display-m, inline-flex); font-size: var(--apol-header-phone-size-m, var(--apol-header-phone-size, 1.35rem)); }
  .apol-logo-strapline { left: var(--apol-strapline-nudge-x-m, 0px); top: calc(100% + var(--apol-strapline-nudge-y-m, 6px)); display: var(--apol-strapline-display-m, block); font-size: var(--apol-header-strapline-size-m, var(--apol-header-strapline-size, .95rem)); }
}
.mobile_header_icons > div:not([class*="iconwrap"]) { order: 4; }
/* global icon weight (thin/light/regular/solid) - brand icons exempt.
   Thin/Light/Regular/Solid share one FA family and differ only by weight, so a
   single font-weight swap restyles every default icon with no markup change. */
.mobile_header_icons i:not(.fa-brands), .apol-menu i:not(.fa-brands), .apol-menu-list i:not(.fa-brands), .header_search i:not(.fa-brands), .hdr-burger i:not(.fa-brands), .apol-mini-burger i:not(.fa-brands) { font-weight: var(--apol-icon-weight, 100) !important; }

/* ---- Icon style: extra FA7 families -------------------------------------
   The default icons (top-bar search/bag/account + the menus) are restyled by the
   App Designer "Icon style" control, which writes --apol-icon-weight. Classic
   Thin/Light/Regular/Solid are just a font-weight swap (rule above). Everything
   below switches FONT-FAMILY (and, for duotone-style families, adds the FA7 two-
   layer ::before/::after treatment) via a style query, so it toggles live in the
   App Designer preview. Brand icons stay exempt (:not(.fa-brands)).
     all.min.css only ships the Pro/Duotone/Brands @font-face, so the Sharp, Sharp
   Duotone and expressive families are declared here; their woff2 downloads lazily
   only when actually selected. Expressive families cover a LIMITED icon set, so a
   default glyph they lack renders blank - hence the '(selected icons only)' label. */

@font-face{font-family:"Font Awesome 7 Duotone";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-duotone-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Duotone";font-style:normal;font-weight:300;font-display:block;src:url("fontawesome/webfonts/fa-duotone-light-300.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Duotone";font-style:normal;font-weight:100;font-display:block;src:url("fontawesome/webfonts/fa-duotone-thin-100.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-sharp-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-sharp-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp";font-style:normal;font-weight:300;font-display:block;src:url("fontawesome/webfonts/fa-sharp-light-300.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp";font-style:normal;font-weight:100;font-display:block;src:url("fontawesome/webfonts/fa-sharp-thin-100.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp Duotone";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-sharp-duotone-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp Duotone";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-sharp-duotone-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp Duotone";font-style:normal;font-weight:300;font-display:block;src:url("fontawesome/webfonts/fa-sharp-duotone-light-300.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Sharp Duotone";font-style:normal;font-weight:100;font-display:block;src:url("fontawesome/webfonts/fa-sharp-duotone-thin-100.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Chisel";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-chisel-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Etch";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-etch-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Graphite";font-style:normal;font-weight:100;font-display:block;src:url("fontawesome/webfonts/fa-graphite-thin-100.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Jelly";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-jelly-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Jelly Duo";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-jelly-duo-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Jelly Fill";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-jelly-fill-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Mosaic";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-mosaic-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Notdog";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-notdog-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Notdog Duo";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-notdog-duo-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Pixel";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-pixel-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Slab";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-slab-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Slab Duo";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-slab-duo-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Slab Press";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-slab-press-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Slab Press Duo";font-style:normal;font-weight:400;font-display:block;src:url("fontawesome/webfonts/fa-slab-press-duo-regular-400.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Thumbprint";font-style:normal;font-weight:300;font-display:block;src:url("fontawesome/webfonts/fa-thumbprint-light-300.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Utility";font-style:normal;font-weight:600;font-display:block;src:url("fontawesome/webfonts/fa-utility-semibold-600.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Utility Duo";font-style:normal;font-weight:600;font-display:block;src:url("fontawesome/webfonts/fa-utility-duo-semibold-600.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Utility Fill";font-style:normal;font-weight:600;font-display:block;src:url("fontawesome/webfonts/fa-utility-fill-semibold-600.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Vellum";font-style:normal;font-weight:900;font-display:block;src:url("fontawesome/webfonts/fa-vellum-solid-900.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 7 Whiteboard";font-style:normal;font-weight:600;font-display:block;src:url("fontawesome/webfonts/fa-whiteboard-semibold-600.woff2") format("woff2");}

@container style(--apol-icon-weight: duotone){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Duotone"!important;font-weight:900!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: duotone-r){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Duotone"!important;font-weight:400!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: duotone-l){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Duotone"!important;font-weight:300!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: duotone-t){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Duotone"!important;font-weight:100!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: sharp-s){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp"!important;font-weight:900!important;}
}
@container style(--apol-icon-weight: sharp-r){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: sharp-l){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp"!important;font-weight:300!important;}
}
@container style(--apol-icon-weight: sharp-t){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp"!important;font-weight:100!important;}
}
@container style(--apol-icon-weight: sduo-s){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp Duotone"!important;font-weight:900!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: sduo-r){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp Duotone"!important;font-weight:400!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: sduo-l){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp Duotone"!important;font-weight:300!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: sduo-t){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Sharp Duotone"!important;font-weight:100!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: chisel){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Chisel"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: etch){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Etch"!important;font-weight:900!important;}
}
@container style(--apol-icon-weight: graphite){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Graphite"!important;font-weight:100!important;}
}
@container style(--apol-icon-weight: jelly){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Jelly"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: jelly-duo){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Jelly Duo"!important;font-weight:400!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: jelly-fill){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Jelly Fill"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: mosaic){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Mosaic"!important;font-weight:900!important;}
}
@container style(--apol-icon-weight: notdog){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Notdog"!important;font-weight:900!important;}
}
@container style(--apol-icon-weight: notdog-duo){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Notdog Duo"!important;font-weight:900!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: pixel){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Pixel"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: slab){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Slab"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: slab-duo){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Slab Duo"!important;font-weight:400!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: slabpress){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Slab Press"!important;font-weight:400!important;}
}
@container style(--apol-icon-weight: slabpress-duo){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Slab Press Duo"!important;font-weight:400!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: thumbprint){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Thumbprint"!important;font-weight:300!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: utility){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Utility"!important;font-weight:600!important;}
}
@container style(--apol-icon-weight: utility-duo){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Utility Duo"!important;font-weight:600!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: utility-fill){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Utility Fill"!important;font-weight:600!important;}
}
@container style(--apol-icon-weight: vellum){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Vellum"!important;font-weight:900!important;position:relative;}
  .mobile_header_icons i:not(.fa-brands)::before,.apol-menu i:not(.fa-brands)::before,.apol-menu-list i:not(.fa-brands)::before,.header_search i:not(.fa-brands)::before,.hdr-burger i:not(.fa-brands)::before,.apol-mini-burger i:not(.fa-brands)::before{position:absolute;opacity:var(--fa-primary-opacity,1);}
  .mobile_header_icons i:not(.fa-brands)::after,.apol-menu i:not(.fa-brands)::after,.apol-menu-list i:not(.fa-brands)::after,.header_search i:not(.fa-brands)::after,.hdr-burger i:not(.fa-brands)::after,.apol-mini-burger i:not(.fa-brands)::after{content:var(--fa);font-feature-settings:"ss01";opacity:var(--fa-secondary-opacity,.4);}
}
@container style(--apol-icon-weight: whiteboard){
  .mobile_header_icons i:not(.fa-brands),.apol-menu i:not(.fa-brands),.apol-menu-list i:not(.fa-brands),.header_search i:not(.fa-brands),.hdr-burger i:not(.fa-brands),.apol-mini-burger i:not(.fa-brands){font-family:"Font Awesome 7 Whiteboard"!important;font-weight:600!important;}
}

/* --- hamburger (mobile only) --- */
.hdr-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--apol-hdricon-color, var(--apol-color-heading)); padding: 4px; font-size: 26px; position: relative; left: var(--apol-burger-nudge-x, 0px); top: var(--apol-burger-nudge-y, 0px); }
.hdr-burger:hover { color: var(--apol-hdricon-hover, var(--apol-hdricon-color)); }
.hdr-burger .ico-x { display: none; }
body.menu-open .hdr-burger .ico-bars { display: none; }
body.menu-open .hdr-burger .ico-x { display: inline; }

/* ----------------------------------------------------------------------------
   NAV - own engine (.apol-menu). Webslide css/js no longer used on converted
   pages; the inner ws* class names below come from the server links token.
---------------------------------------------------------------------------- */
.menu_desktop { background: #fff; border-bottom: 0; position: relative; z-index: 24; }
.apol-menu { position: relative; padding: var(--apol-nav-pad-y) var(--apol-nav-pad-x); background: var(--apol-nav-bg); border-top: var(--apol-nav-border-width) solid var(--apol-nav-border-color); margin-bottom: var(--apol-nav-margin); }
.apol-menu-list { display: flex; flex-wrap: wrap; justify-content: var(--apol-nav-justify, flex-start); list-style: none; margin: 0; padding: 0; gap: 4px; }
/* Desktop menu position nudge (App Designer: Nav > Desktop nav bar > Menu nudge
   X/Y). A visual-only relative offset of the menu items within the bar, matching
   the logo/search/icon nudges - the bar background and dropdowns move with the
   items (dropdowns anchor to their own li / .apol-menu, so anchoring is intact).
   Desktop only: the same .apol-menu-list is reused in the mobile slide-out. */
@media (min-width: 981px) {
  .apol-menu-list { position: relative; left: var(--apol-nav-nudge-x, 0px); top: var(--apol-nav-nudge-y, 0px); }
}
/* first VISIBLE item's internal 16px padding would push its text right of the
   5% line; pull it back so nav text aligns with the logo and breadcrumb.
   (the hidden search-slot li is first-child, so anchor off the user-type input
   the links token emits just before the first real item) */
#apol-user-type + li > a,
.apol-menu-list > li.apol-search-slot + li > a { margin-left: -16px; }
.apol-search-slot { display: none !important; }
.apol-menu-list > li { position: relative; list-style: none; font-size: 0; line-height: 0; flex: var(--apol-nav-item-flex, 0 0 auto); padding: 0; }  /* no shrink: shrinking folds the longest label onto two lines */
.apol-menu-list > li:not(:has(> a)) { display: none !important; }  /* anchor-less items = phantom flex gaps */
.apol-menu-list > li.apol-phantom { display: none !important; }    /* empty-anchor items flagged by apol.nav.js */
.apol-menu-list > *:not(li):not(input):not(.mobile-menu-footer):not(.apol-nav-footer) { display: none !important; }  /* stray non-li children (legacy quickmenu div etc) - footer injector and user-type input exempt */
.menu_desktop .quickmenu, .menu_desktop .ui-selectmenu-button, .menu_desktop .ui-selectmenu-menu { display: none !important; }  /* legacy mobile quick-menu - replaced by the overlay */
.apol-menu-list > li > a { font-size: var(--apol-font-size-nav); line-height: 1.3; white-space: nowrap; }
.apol-menu-list > li > .sub-menu, .apol-menu-list > li > .wsmegamenu, .apol-menu-list > li > .wsshoptabing { font-size: 1rem; line-height: 1.4; }
.apol-menu-list > li:has(> .wsmegamenu), .apol-menu-list > li:has(> .wsshoptabing) { position: static; }
.apol-menu-list > li > a {
  display: flex; align-items: center; gap: 9px; padding: 15px 16px;
  color: var(--apol-nav-link); font-weight: var(--apol-font-weight-nav, 300); font-size: var(--apol-font-size-nav); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.apol-menu-list > li > a:hover, .apol-menu-list > li:hover > a, .apol-menu-list > li.open > a { border-bottom-color: var(--apol-nav-active); color: var(--apol-nav-active); text-decoration: none; }
.apol-menu-list > li > a i { color: var(--apol-nav-icon); font-size: 15px; }
/* ---- App Designer: show / hide the icons shown against menu labels, INDEPENDENT
   per device (Nav panel > Menu icons). The desktop bar and the tablet/mobile burger
   menu are the SAME .apol-menu-list, split only by width, so each tier gets its own
   token and stays independent: Desktop >=981, Tablet 641-980, Mobile <=640. Shown by
   default (token unset -> inline-block); the App Designer sets a tier's token to
   'none' to hide only that tier (e.g. off on Desktop, kept on Tablet & Mobile).
   .menuicon (the empty label-icon slot) is excluded so its own :empty rule still
   governs it and an unset token never forces phantom spacing; the dropdown carets
   are ::after pseudo-elements, so they are never affected. ---------------------- */
@media (min-width: 981px) {
  .apol-menu-list li a i:not(.menuicon) { display: var(--apol-menuicon-desktop, inline-block); }
}
@media (min-width: 641px) and (max-width: 980px) {
  .apol-menu-list li a i:not(.menuicon) { display: var(--apol-menuicon-tablet, inline-block); }
}
@media (max-width: 640px) {
  .apol-menu-list li a i:not(.menuicon) { display: var(--apol-menuicon-mobile, inline-block); }
}
.apol-menu a .navtext span { font: inherit; }

/* dropdowns (token emits nested ul.sub-menu) */
.apol-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--apol-submenu-bg, #fff);
  border: var(--apol-submenu-border-width, 1px) solid var(--apol-submenu-border-color, var(--apol-color-border)); box-shadow: 0 12px 28px rgba(0,0,0,.07);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px); display: none; z-index: 30;
  /* closed panels are display:none so their boxes can't extend the page's scrollable
     area (hidden mega menus were adding ~115px below the footer on short pages and
     causing scroll re-clamp jumps). allow-discrete defers the display flip until the
     fade ends; older browsers keep the first transition line and lose only the fade. */
  transition: all .16s;
  transition: all .16s allow-discrete;
}
.apol-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); display: block; }
.apol-menu .sub-menu li { position: relative; list-style: none; }
.apol-menu .sub-menu .sub-menu { top: -8px; left: 100%; transform: translateX(6px); }
.apol-menu .sub-menu li:hover > .sub-menu { transform: translateX(0); }
.apol-menu .sub-menu a { display: block; padding: 12px 22px; color: var(--apol-color-text); font-weight: var(--apol-font-weight-nav, 300); font-size: var(--apol-font-size-nav); }
.apol-menu .sub-menu a:hover { background: var(--apol-color-surface); color: var(--apol-color-primary); text-decoration: none; }
.apol-menu .sub-menu li:has(> .sub-menu) > a::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid var(--apol-color-muted); border-bottom: 1.5px solid var(--apol-color-muted); transform: rotate(-45deg);
}
.apol-menu .sub-menu .menuicon:empty { display: none; }

/* mega menu (token emits div.wsmegamenu > ul.wslistlinks with li.title) */
.apol-menu .wsmegamenu {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--apol-submenu-bg, #fff);
  border: var(--apol-submenu-border-width, 1px) solid var(--apol-submenu-border-color, var(--apol-color-border)); box-shadow: 0 12px 28px rgba(0,0,0,.07);
  display: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); justify-content: flex-start; gap: 8px 56px;
  /* NB: minmax max must be 1fr, not a %% - auto-fit counts tracks by the MAX
     when it's definite, and 4 x 24%% + gaps never fits, so a %% max caps the
     panel at 3 columns at ANY width. 1fr counts by the 190px min: 4+ columns
     from ~1100px up, wrapping gracefully below. */
  padding: 30px var(--apol-page-gutter) 36px; opacity: 0; visibility: hidden; transform: translateY(6px); z-index: 30;
  transition: all .16s;
  transition: all .16s allow-discrete;
}
.apol-menu-list > li:hover > .wsmegamenu { opacity: 1; visibility: visible; transform: translateY(0); display: grid; }
.apol-menu .wslistlinks { list-style: none; margin: 0; padding: 0; min-width: 0; }
.apol-menu .wslistlinks > li { list-style: none; }
.apol-menu .wslistlinks > li.title {
  font-family: var(--apol-font-heading); font-size: var(--apol-font-size-nav); font-weight: 700; color: var(--apol-color-heading);
  margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--apol-color-border);
}
.apol-menu .wslistlinks a { display: flex; align-items: center; gap: 10px; padding: 8px 8px; margin: 0 -8px; color: var(--apol-color-text); font-weight: var(--apol-font-weight-nav, 300); font-size: var(--apol-font-size-nav); border-radius: 3px; }
.apol-menu .wslistlinks a:hover { background: var(--apol-color-surface); color: var(--apol-color-primary); text-decoration: none; }

/* App Designer: Products menu as a single traditional dropdown instead of a
   promoted mega menu. --apol-products-menu-style:dropdown makes apol.nav.js keep
   the single 'Products' item and tag its panel .apol-products-dropdown. Desktop
   only - on mobile it falls back to the standard stacked accordion below. */
@media (min-width: 981px) {
  /* anchor under the Products item (a mega spans the full bar; a dropdown must not) */
  .apol-menu-list > li:has(> .wsmegamenu.apol-products-dropdown) { position: relative; }
  .apol-menu .wsmegamenu.apol-products-dropdown {
    right: auto; left: 0; width: max-content; min-width: 240px; max-width: 340px;
    display: block; grid-template-columns: none; gap: 0; padding: 8px 0;
  }
  .apol-menu-list > li:hover > .wsmegamenu.apol-products-dropdown { display: block; }
  .apol-menu .wsmegamenu.apol-products-dropdown .wslistlinks { padding: 6px 0; }
  .apol-menu .wsmegamenu.apol-products-dropdown .wslistlinks + .wslistlinks { border-top: 1px solid var(--apol-color-border); }
  .apol-menu .wsmegamenu.apol-products-dropdown .wslistlinks > li.title { margin: 0; padding: 10px 22px 6px; border-bottom: 0; }
  .apol-menu .wsmegamenu.apol-products-dropdown .wslistlinks a { padding: 10px 22px; margin: 0; border-radius: 0; }
}

/* department / shop-tab menu (div.wsshoptabing: tabs left, panel right) */
.apol-menu .wsshoptabing {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--apol-submenu-bg, #fff);
  border: var(--apol-submenu-border-width, 1px) solid var(--apol-submenu-border-color, var(--apol-color-border)); box-shadow: 0 12px 28px rgba(0,0,0,.07);
  opacity: 0; visibility: hidden; transform: translateY(6px); display: none; z-index: 30;
  transition: all .16s;
  transition: all .16s allow-discrete;
}
.apol-menu-list > li:hover > .wsshoptabing { opacity: 1; visibility: visible; transform: translateY(0); display: block; }
/* entry animation when coming from display:none (modern browsers; others appear instantly) */
@starting-style {
  .apol-menu li:hover > .sub-menu,
  .apol-menu-list > li:hover > .wsmegamenu,
  .apol-menu-list > li:hover > .wsshoptabing { opacity: 0; transform: translateY(6px); }
}
.apol-menu .wsshopwp { position: relative; min-height: 320px; }
.apol-menu .wstabitem { list-style: none; margin: 0; padding: 14px 0; width: 260px; border-right: 1px solid var(--apol-color-border); min-height: 320px; }
.apol-menu .wstabitem > li { list-style: none; }
.apol-menu .wstabitem > li > a { display: flex; align-items: center; gap: 10px; padding: 13px 22px; color: var(--apol-color-text); font-weight: 300; }
.apol-menu .wstabitem > li.wsshoplink-active > a, .apol-menu .wstabitem > li > a:hover { background: var(--apol-color-surface); color: var(--apol-color-primary); text-decoration: none; }
.apol-menu .wstitemright {
  display: none; position: absolute; left: 260px; top: 0; right: 0; bottom: 0;
  padding: 30px var(--apol-page-gutter) 36px; overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(190px, 24%)); justify-content: flex-start; gap: 8px 56px;
}
.apol-menu .wstitemright.wstitemrightactive { display: grid; }
.apol-menu .wstliststy02 { list-style: none; margin: 0; padding: 0; min-width: 0; }
.apol-menu .wstliststy02 > li { list-style: none; }
.apol-menu .wstliststy02 > li.wstheading {
  font-family: var(--apol-font-heading); font-size: var(--apol-font-size-nav); font-weight: 700; color: var(--apol-color-heading);
  margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--apol-color-border);
}
.apol-menu .wstliststy02 a { display: flex; align-items: center; gap: 10px; padding: 11px 8px; margin: 0 -8px; color: var(--apol-color-text); font-weight: var(--apol-font-weight-nav, 300); font-size: var(--apol-font-size-nav); border-radius: 3px; }
.apol-menu .wstliststy02 a:hover { background: var(--apol-color-surface); color: var(--apol-color-primary); text-decoration: none; }

/* menu tags (token emits span.wstmenutag.orangetag etc.) */
.wstmenutag { display: inline-block; margin-left: 8px; background: var(--apol-color-tag, #ef8b1f); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 3px; }

/* scroll-up nav reveal (desktop) - apol.nav.js toggles is-fixed / is-hidden */
@media (min-width: 981px) {
  .menu_desktop.is-fixed {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    /* bg + border track the nav settings so the sticky bar matches the in-flow nav
       (was a hard-wired #fff / 1px #ddd that showed a border even when the nav bar
       has none). .apol-menu inside still paints nav-bg full-width; the fallbacks
       only apply when the tokens are unset. */
    background: var(--apol-sticky-bg, var(--apol-nav-bg, #fff)); border-bottom: var(--apol-nav-border-width, 0px) solid var(--apol-nav-border-color, transparent);
    box-shadow: var(--apol-sticky-shadow, none);   /* App Designer: optional sticky-bar shadow (off by default) */
    transform: translateY(0);
    transition: transform .2s ease;   /* pure slide down from the top, matching the mobile mini bar (no opacity fade, which reads as "appearing") */
  }
  .menu_desktop.is-fixed.is-hidden { transform: translateY(-100%); pointer-events: none; }
  #apol-nav-spacer { height: 0; }   /* JS sizes this while the nav is fixed - prevents scroll jump */
  /* optional small logo in the fixed desktop nav (App Designer "Show logo" toggle).
     Only while fixed; absolutely positioned in the left gutter so the menu never reflows.
     The base hide + img size are GLOBAL (below the media block) so the logo stays hidden
     in the mobile slide-out, which REUSES .menu_desktop - otherwise the raw img renders
     full-size at the bottom of the open menu. */
  .menu_desktop.is-fixed .apol-nav-fixed-logo { display: var(--apol-sticky-logo, flex); align-items: center; position: absolute; left: var(--apol-page-gutter, 5%); top: 50%; transform: translateY(-50%); z-index: 1; text-decoration: none; }
}
.apol-nav-fixed-logo { display: none; }
.apol-nav-fixed-logo img { height: var(--apol-sticky-logo-size, 30px); width: auto; display: block; }

/* Sticky logo overlap guard. The fixed logo above is position:absolute in the left
   gutter, so on a LEFT-aligned menu (--apol-nav-justify: flex-start) it lands on top of
   the first menu item. Reserve room for it by indenting the fixed menu list. Gated on
   the logo actually being shown (style query on --apol-sticky-logo) so hiding the logo
   removes the indent; the width is tunable in the App Designer (Header > Sticky logo >
   Reserve). Right-aligned menus (e.g. Riverside, flex-end) are visually unaffected -
   items sit at the right edge, and the padding just formalises the gutter the logo
   already occupies. */
@container style(--apol-sticky-logo: flex) {
  .menu_desktop.is-fixed .apol-menu-list { padding-left: var(--apol-sticky-logo-reserve, 150px); }
}

@media (min-width: 981px) { .apol-mini { display: none !important; } .mobile-menu-footer { display: none !important; } }

@media (min-width: 981px) { .mobile_header_icons { margin-top: 4px; } }

/* --- header bar: independent slot placement (logo / search / icons) ---------
   Desktop only. Mobile (<=980px) keeps the existing flex layout above untouched.
   Each element is placed in a column (1=left, 2=centre, 3=right) and aligned
   within it via justify-self; the designer writes a col+justify token pair per
   slot. --apol-search-maxw caps the search box width. Defaults reproduce the
   legacy "logo left / search centre / icons right" arrangement. -------------- */
@media (min-width: 981px) {
  .logo_row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; align-content: center; }
  /* grid-row:1 pins all three to the same row so column assignment never forces a
     wrap (grid-auto-flow would otherwise bump an earlier-column item to row 2 when
     DOM order != visual order); align-items:center then levels their heights. */
  .logo                 { grid-row: 1; grid-column: var(--apol-logo-col, 1);   justify-self: var(--apol-logo-justify, start); }
  .header_search        { grid-row: 1; grid-column: var(--apol-search-col, 2); justify-self: var(--apol-search-justify, center); width: var(--apol-search-maxw, clamp(320px, 35vw, 600px)); max-width: 100%; display: var(--apol-dsearch-input, block); }
  .header_top_inner_sub { grid-row: 1; grid-column: var(--apol-icons-col, 3);  justify-self: var(--apol-icons-justify, end); }
  /* desktop search-as-icon: show the header search icon when the inline input is hidden */
  .mobile_header_icons_iconwrap_search { display: var(--apol-dsearch-icon, none) !important; }
}

/* page scrim - dims content under open menus / focused search */
.nav_scrim { position: fixed; inset: 0; background: rgba(0,0,0, var(--apol-dim-alpha)); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; z-index: 15; pointer-events: none; }
body:has(.apol-menu-list > li:hover > .sub-menu) .nav_scrim,
body:has(.apol-menu-list > li:hover > .wsmegamenu) .nav_scrim,
body:has(.apol-menu-list > li:hover > .wsshoptabing) .nav_scrim { opacity: 1; visibility: visible; }
/* search isolation: a fixed scrim INSIDE the search's stacking context -
   it covers the viewport (header included) while the input + dropdown,
   higher in the same context, stay bright and clickable */
.apol-search-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0, var(--apol-dim-alpha));
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
  z-index: 1; pointer-events: none; cursor: default;
  display: var(--apol-search-dim, block);   /* App Designer: 'none' fully disables the search dim/reveal */
}
body.apol-search-focus .apol-search-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 981px) { #inline-search-mount > *:not(.apol-search-scrim) { position: relative; z-index: 2; } }
@media (max-width: 980px) { .apol-search-scrim { display: none !important; } }

/* search-as-icon reveal -------------------------------------------------------
   When the App Designer hides the inline input behind the header search icon
   (icon-on-mobile and/or icon-on-desktop modes) #inline-search-mount is
   display:none. apol.nav.js toggles body.apol-search-open when the icon is
   tapped and the mounted form drops in pinned to the top. Dimming REUSES the
   in-context .apol-search-scrim (same --apol-dim-alpha as the nav scrim) so it
   matches the standard overlay and never double-stacks; because the scrim lives
   inside the mount's stacking context the form always sits above it. --------- */
/* centre the overlay at the configured search width (--apol-search-maxw, same
   token the inline desktop search uses) so it lands where the input would be if
   it were part of the design. left:0/right:0 + margin auto centres a fixed box
   WITHOUT a transform (a transform here would trap the fixed scrim). apol.nav.js
   sets `top` to align it with the header row; top:0 is the fallback. */
body.apol-search-open #inline-search-mount.header_search { display: block !important; position: fixed; left: 0; right: 0; top: 0; width: var(--apol-search-maxw, clamp(320px, 35vw, 600px)) !important; max-width: calc(100% - 32px) !important; margin: 0 auto !important; padding: 0; z-index: 6000; }
body.apol-search-open #inline-search-mount.header_search .topmenusearch { width: 100%; max-width: none; margin: 0; position: relative; z-index: 2; }
body.apol-search-open #inline-search-mount.header_search .input-field { width: 100%; }
/* mobile design search is full-width, so match that when revealed on phones */
@media (max-width: 980px) { body.apol-search-open #inline-search-mount.header_search { top: 40px; width: 100% !important; max-width: none !important; padding: 12px 16px; } }
body.apol-search-open .apol-search-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
/* lift the form above the scrim at ALL breakpoints when open - the desktop-only
   z-index:2 rule above doesn't fire on mobile, which is why the icon search was
   sitting under the veil. */
body.apol-search-open #inline-search-mount > *:not(.apol-search-scrim) { position: relative; z-index: 2; }
@media (max-width: 980px) { body.apol-search-open .apol-search-scrim { display: var(--apol-search-dim, block) !important; } }

/* --- breadcrumb --- */
.breadcrumb_holder, .breadcrumb_nomargin_holder { display: var(--apol-breadcrumb-display, block); padding: 14px var(--apol-page-gutter); margin-bottom: var(--apol-page-gutter-top, var(--apol-page-gutter-y, 0px)); }
.breadcrumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--apol-crumb-font-size, .85rem); text-transform: var(--apol-crumb-transform, none); color: var(--apol-color-muted); margin: 0; padding: 0; list-style: none; }
.breadcrumb a { color: var(--apol-color-heading); font-weight: 400; }
.breadcrumb i { display: none !important; }

/* --- content --- */
/* Floor for the page body so short pages don't collapse the content area and pull
   the footer up under the header. flex:1 0 auto already fills tall viewports; the
   min-height guarantees a minimum even when the viewport is short. Tokenised so a
   future App Designer control can tune it; defaults to 350px. */
.main_content_outer, .main_content_outer_rows { flex: 1 0 auto; min-height: var(--apol-main-min-height, 450px); }
.main_content_inner { padding: 0 var(--apol-page-gutter) var(--apol-page-gutter-bottom, 0px); }  /* bottom: the App Designer 'Page margin - bottom' value IS the whole gap above the footer, and defaults to 0 so content meets the footer unless spacing is dialled in. NB: deliberately does NOT fall back to the legacy page-gutter-y (that combined top+bottom token still drives the TOP via .breadcrumb_holder) - otherwise an old site's page margin reappears as a bottom gap. full 5% horiz: .flex-container-columns' -1.5% margin cancels the items' 1.5% padding */
.main_content_inner .breadcrumb_holder, .main_content_inner .breadcrumb_nomargin_holder { padding-left: 0; padding-right: 0; }  /* wrapper already provides the 5% */
/* crumb divider: full-viewport-width line driven by --apol-crumb-border-* (App Designer).
   100vw is safe here - html/body are overflow-x:clip. Centred on the holder (itself
   centred in the viewport) so the line bleeds to both edges regardless of the page gutter. */
.breadcrumb_holder, .breadcrumb_nomargin_holder { position: relative; }
.breadcrumb_holder::after, .breadcrumb_nomargin_holder::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: var(--apol-crumb-border-width, 0px);
  background: var(--apol-crumb-border-color, #e6e6e6); pointer-events: none; }

.main_content_inner_rows { padding: 0 0 var(--apol-page-gutter-bottom, 30px); }  /* full-width template: sections manage their own width. bottom gap = the 'Page margin - bottom' value, default 30px for a gap above the footer - set the control to 0 to make content meet the footer (no legacy page-gutter-y fallback - see .main_content_inner note) */

/* Top page margin without a breadcrumb. The 'Page margin - top' value rides on
   the breadcrumb holder's margin-bottom (line ~1048); when the breadcrumb is
   turned off App Designer sets --apol-breadcrumb-display:none, the holder is
   display:none, its margin collapses and the top gutter vanished entirely.
   Re-home the top gutter onto the content wrapper's padding-top in that case
   ONLY, so breadcrumb-visible pages keep their existing crumb-to-content
   spacing untouched. Style-queries the non-default value only (per the token
   rules - never declare the token here). */
@container style(--apol-breadcrumb-display: none) {
  .main_content_inner,
  .main_content_inner_rows {
    padding-top: var(--apol-page-gutter-top, var(--apol-page-gutter-y, 0px));
  }
}
/* Breadcrumb "listing & item pages only" mode (App Designer: Breadcrumb trail >
   Only on listing & item pages -> --apol-breadcrumb-scope:listing). The trail
   still shows by default; here we HIDE it on any page whose content wrapper is
   NOT a listing (carries .apol-cat-toolbar) or item (.pdp-stage) page - i.e.
   home, CMS content, blog etc. - and re-home the top gutter onto those wrappers,
   exactly as the fully-hidden case above does. Catalogue pages are unaffected.
   ('off' hides everywhere via --apol-breadcrumb-display:none, so the two modes
   never both fire.) */
@container style(--apol-breadcrumb-scope: listing) {
  :is(.main_content_inner, .main_content_inner_rows):not(:has(.apol-cat-toolbar)):not(:has(.pdp-stage)) :is(.breadcrumb_holder, .breadcrumb_nomargin_holder) { display: none; }
  :is(.main_content_inner, .main_content_inner_rows):not(:has(.apol-cat-toolbar)):not(:has(.pdp-stage)) { padding-top: var(--apol-page-gutter-top, var(--apol-page-gutter-y, 0px)); }
}
.header_sub { width: 100%; }
/* header banner: base rule lives here (not only in per-site style_additional.css);
   the template keeps div+token on one line so :empty can hide bannerless pages */
.header_banner_holder { width: 100%; }
.header_banner_holder:empty { display: none; }
/* A full-bleed header banner (home/CMS carousel .header_banner_holder, or the
   category banner in .header_main) butts directly against the header bar. The
   header's hard-wired 1px separator (.logo_menu_container border-bottom) then
   shows as a light seam between the coloured nav and the banner - it has no App
   Designer control, so it can't be recoloured or removed by the user. Drop it
   only when a banner actually follows, so the banner meets the nav flush; pages
   without a banner keep the divider. (border-box: dropping the border also pulls
   the banner up by that 1px, closing the seam - verified on staging.) */
.logo_menu_container:has(~ .header_banner_holder:not(:empty)),
.logo_menu_container:has(~ .header_main > *) { border-bottom: 0; }
/* Header-banner bottom gap: the banner element itself carries no spacing, but
   the page content area (.main_content_inner / _rows) still applies its top
   gutter (--apol-page-gutter-top, e.g. 50px). Because the banner is pulled up
   into its own full-width slot ABOVE the content, that gutter shows as a dead
   gap between the banner and the first section that no per-section nudge can
   reach. Collapse the content top gutter ONLY when a banner is actually present
   (verified: closes the gap exactly, first section meets the banner flush).
   Normal pages with no banner keep their top gutter. */
body:has(.header_banner_holder:not(:empty)) .main_content_inner,
body:has(.header_banner_holder:not(:empty)) .main_content_inner_rows { padding-top: 0 !important; }

/* --- pre-footers (editor regions) --- */
.pre_footer_a { position: relative; width: 100%; display: var(--apol-prefooter-display, none); padding: var(--apol-prefooter-pad-y) var(--apol-prefooter-pad-x); background: var(--apol-prefooter-bg); color: var(--apol-prefooter-text); border-top: var(--apol-prefooter-border-width) solid var(--apol-prefooter-border-color); }  /* hidden by default - enable per design via App Designer 'Pre-footer (top)' > Show. Avoids an empty grey bar on pages that don't use it. */
.pre_footer_b { position: relative; width: 100%; display: var(--apol-prefooter-b-display, none); padding: var(--apol-prefooter-b-pad-y, var(--apol-prefooter-pad-y)) var(--apol-prefooter-b-pad-x, var(--apol-prefooter-pad-x)); background: var(--apol-prefooter-b-bg, var(--apol-prefooter-bg)); color: var(--apol-prefooter-b-text, var(--apol-prefooter-text)); border-top: var(--apol-prefooter-b-border-width, var(--apol-prefooter-border-width)) solid var(--apol-prefooter-b-border-color, var(--apol-prefooter-border-color)); }  /* hidden by default - enable per design via App Designer 'Pre-footer (bottom)' > Show */
.pre_footer_a_holder { display: flex; align-items: center; justify-content: center; text-align: center; }


/* --- footer --- */
.footer_main { background: var(--apol-footer-bg); color: var(--apol-footer-text); margin-top: auto; border-top: var(--apol-footer-border-width) solid var(--apol-footer-border-color); }
/* JS-appended body-end elements (materialize sidenav helpers etc.) must not add flow height below the footer */
body > .drag-target, body > .sidenav-overlay { position: fixed !important; }
.footer_main_inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: var(--apol-footer-pad-y) var(--apol-footer-pad-x); font-size: .85rem; font-weight: 300; }
.apollyoncredit { margin: 0; }
.apollyoncredit a, .footer_main a { color: #fff; }
.secondary_link { color: var(--apol-color-bar-text); }
.secondary_link:hover { color: #fff; }
.back_to_top_holder { margin-left: auto; }
.apollyoncredit { display: var(--apol-footer-credit-display, block); }
/* the runtime builds the footer as [editable include] + [Powered by Apollyon credit] + [back-to-top];
   .footer_main_inner is a wrapping flex row. 6th Jul 2026: the editable footer area should sit on its
   OWN line ABOVE the "Powered by Apollyon" credit, so anything the include emits gets a full-width
   basis and takes the top line on its own, letting the credit + back-to-top share the line below it.
   The credit and back-to-top must be excluded by name, not by position: when the editable area is
   emptied the include contributes no element, and a :first-child rule would then make the credit
   full-width and push back-to-top onto its own line.
   (Was previously order:-1, which rendered the credit before/left of the editable content.) */
.footer_main_inner .apollyoncredit { order: 0; }
.footer_main_inner > :not(.apollyoncredit):not(.back_to_top_holder):not(.footer_main_inner_footer) { flex: 0 0 100%; }
.back_to_top_holder { display: var(--apol-footer-backtotop-display, block); }

/* --- legacy search slide-out: retired (form is mounted inline) --- */
.quick_donate_area_ecomsearch, .quick_donate_area_background_ecomsearch { display: none !important; }

/* ----------------------------------------------------------------------------
   MOBILE (max-width: 980px) - app-style full-screen menu overlay
---------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .header_top { min-height: 28px; }
  .logo_menu_container { position: static; }
  .logo_row { gap: 4px; padding: 2px 4% 0; min-height: 0; justify-content: flex-start; }
  .logo img { max-width: min(46vw, calc(92vw - 200px)); }  /* width/height stay token-driven (--apol-logo-* via the per-device -tab/-mob cascade) so tablet & mobile can be sized independently; this is ONLY a safety cap so a large logo still yields space - icons + burger stay on one line to ~320px (object-fit:contain keeps it proportional) */
  .header_search { order: 4; flex: 1 1 100%; max-width: none; margin: 0 0 6px; }  /* hug the logo row */
  .header_search input.autocomplete, .header_search input#autocomplete-input { height: 38px !important; }
  /* grey header: no shadow. The single divider under the search is .logo_row's
     token-driven border (--apol-header-border-width); the container must NOT add its
     own, or the two stack into a 2px line once the nav is pulled out of flow. */
  .logo_menu_container { box-shadow: none !important; border-bottom: 0 !important; }
  /* crumb spacing only; the divider line itself is the full-bleed ::after above */
  .breadcrumb_holder, .breadcrumb_nomargin_holder { padding-bottom: 10px; margin-bottom: calc(12px + var(--apol-page-gutter-top, var(--apol-page-gutter-y, 0px))); }
  .logo { flex: 0 1 auto; min-width: 0; }
  .header_top_inner_sub { order: 2; flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
  .header_top_inner_sub, .contact_header_holder, .mobile_header_icons { display: flex; align-items: center; }
  .mobile_header_icons { gap: 2px; }
  .mobile_header_icons > div { display: flex; align-items: center; }
  .mobile_header_icons > div a.tertiary_link2 { min-width: 42px; min-height: 42px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  /* Signed in, the account anchor swaps class (.tertiary_link2 -> .secondary_link_signedin)
     and so used to miss the 42px slot + 21px glyph the logged-out icons get - the account
     slot shrank and the whole row bunched up. Give the signed-in anchor identical sizing so
     spacing is the same regardless of login state. (High-specificity descendant selector so
     it also beats the base .mobile_header_icons_iconwrap_login > a i sizing.) */
  .mobile_header_icons > div a.secondary_link_signedin { min-width: 42px; min-height: 42px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  .mobile_header_icons > div a.secondary_link_signedin i { font-size: 21px; }
  .tertiary_link2 span, .signin_button_text, .signout_button_text { display: var(--apol-hdricon-label-display-m, none); }   /* App Designer: labels on/off per device */
  .tertiary_link2 i { font-size: 21px; }
  .roundpoint { top: 2px; right: 2px; }
  .mobile_header_icons_iconwrap_stores, .mobile_header_icons_iconwrap_home { display: none !important; }
  .tertiary_link2 { font-size: 0; gap: 5px; }
  .hdr-burger { display: inline-flex; order: 3; margin-left: 2px; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; font-size: var(--apol-burger-size, 23px); flex: 0 0 auto; }

  /* mobile header slots: logo / icons / hamburger, organised INDEPENDENTLY of
     desktop. Flex with designer-computed order + auto-margins: the designer works
     out the left-to-right order and which element starts each left/centre/right
     group, so same-side elements sit ADJACENT (never overlapping) - the default
     keeps the icons tucked against the burger on the right. Search wraps to row 2.
     Defaults below reproduce: logo left, icons + burger together on the right. */
  .logo_row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  .logo                 { order: var(--apol-m-logo-order, 1);   margin-left: var(--apol-m-logo-ml, 0);    margin-right: var(--apol-m-logo-mr, 0); flex: 0 1 auto; }
  .header_top_inner_sub { order: var(--apol-m-icons-order, 2);  margin-left: var(--apol-m-icons-ml, auto); margin-right: var(--apol-m-icons-mr, 0); flex: 0 0 auto; }
  .hdr-burger           { order: var(--apol-m-burger-order, 3); margin-left: var(--apol-m-burger-ml, 0);   margin-right: var(--apol-m-burger-mr, 0); }
  .header_search        { order: 9; flex: 1 1 100%; width: 100%; max-width: none; margin: 0 0 6px; }

  .menu_desktop {
    display: block; border-bottom: 0;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--apol-mobile-header-h, 150px);
    background: var(--apol-mobilemenu-bg, var(--apol-color-surface)); overflow-y: auto; overflow-x: hidden; z-index: 45; -webkit-overflow-scrolling: touch;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  body.menu-open .menu_desktop { transform: translateX(0); visibility: visible; }
  .apol-menu { padding: 0; background: transparent; }  /* slide-out: the panel colour is painted by .menu_desktop (--apol-mobilemenu-bg). Do NOT re-paint the desktop nav bar colour (--apol-nav-bg) here, or it shows through the .apol-menu-list top padding as a mismatched band (App Designer "Menu spacing (top)" looked like it added header space on tablet). */
  .apol-menu-list { display: block; width: 100%; padding: var(--apol-mobilemenu-pad-top, 0px) 0 0; }  /* top breathing room for the whole slide-out menu (App Designer); horizontal stays 0 so items keep their own 5%. Bottom spacing is applied as the gap ABOVE the footer (below) so it sits between the last item and the contact footer, not off the end of the panel. */
  .apol-menu-list:not(:has(.mobile-menu-footer)) { padding-bottom: var(--apol-mobilemenu-pad-bottom, 0px); }  /* no footer: bottom spacing pads the end of the menu instead */
  /* plain block stacking, NOT a flex column: Chrome's column-flex intrinsic
     sizing computed item heights as if labels were wrapped, permanently
     reserving a phantom extra line under any li with a long multi-word label */
  .apol-menu-list > li { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important;
    height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; display: block !important; }
  /* fully content-sized rows: legacy fixed heights / flex-grow / list-item quirks cannot inflate them;
     no-op for already-correct items */
  .apol-menu-list > li:not(:has(> a)) { display: none !important; }  /* anchor-less items = phantom gaps */
  /* unknown injected nodes (legacy menu scripts) render as phantom spacing - hide them */
  .apol-menu-list > li > *:not(a):not(.sub-menu):not(.wsmegamenu):not(.wsshoptabing) { display: none !important; }
  .apol-menu-list > li, .apol-menu-list > li:has(> .wsmegamenu), .apol-menu-list > li:has(> .wsshoptabing) { position: static; }
  #apol-user-type + li > a,
  .apol-menu-list > li.apol-search-slot + li > a { margin-left: 0; }
  .apol-menu-list > li > a {
    padding: 18px 5%; border-bottom: var(--apol-mobilemenu-divider-width, 1px) solid var(--apol-mobilemenu-divider-color, rgba(0,0,0,.07));  /* divider lines between mobile menu items - App Designer: width 0 removes them */
    font-size: var(--apol-font-size-nav-m, var(--apol-font-size-nav));
    font-weight: var(--apol-font-weight-nav-m, var(--apol-font-weight-nav, 300));
    color: var(--apol-mobilemenu-text, var(--apol-nav-link));
    background: var(--apol-mobilemenu-bg, #fff); position: relative; white-space: normal;
  }
  /* mobile accordion sub-links reuse the desktop dropdown anchors - give them the mobile nav font + colour too */
  .apol-menu .sub-menu a, .apol-menu .wslistlinks a, .apol-menu .wstliststy02 a {
    font-size: var(--apol-font-size-nav-m, var(--apol-font-size-nav));
    font-weight: var(--apol-font-weight-nav-m, var(--apol-font-weight-nav, 300));
    color: var(--apol-mobilemenu-text, var(--apol-color-text));
  }
  .apol-menu-list > li > a:hover, .apol-menu-list > li:hover > a,
  .apol-menu-list > li.open > a { border-bottom-color: var(--apol-mobilemenu-divider-color, rgba(0,0,0,.07)); }  /* no dark underline on tap/open */
  .apol-menu-list > li:has(> .sub-menu) > a::after,
  .apol-menu-list > li:has(> .wsmegamenu) > a::after,
  .apol-menu-list > li:has(> .wsshoptabing) > a::after {
    content: ''; position: absolute; right: 6%; top: 44%; width: 8px; height: 8px;
    border-right: 2px solid var(--apol-color-muted); border-bottom: 2px solid var(--apol-color-muted);
    transform: rotate(-45deg); transition: transform .2s;
  }
  .apol-menu-list > li.open > a::after { transform: rotate(45deg); }

  /* all panels become inline accordions */
  .apol-menu-list > li > a { margin: 0 !important; }   /* legacy anchor margins = space inside the row */
  .apol-menu .sub-menu, .apol-menu .wsmegamenu, .apol-menu .wsshoptabing { margin: 0 !important; }  /* max-height:0 does NOT collapse margins */
  .apol-menu .sub-menu, .apol-menu .wsmegamenu, .apol-menu .wsshoptabing {
    position: static; opacity: 1; visibility: visible; transform: none; display: block;
    box-shadow: none; border: 0; grid-template-columns: 1fr;
    max-height: 0; overflow: hidden; padding: 0 5%;
    background: var(--apol-mobilesubmenu-bg, var(--apol-mobilemenu-bg, var(--apol-color-surface))); min-width: 0;
    transition: max-height .28s ease, padding .28s ease;
  }
  .apol-menu-list > li.open > .sub-menu,
  .apol-menu-list > li.open > .wsmegamenu,
  .apol-menu-list > li.open > .wsshoptabing { max-height: 70vh; overflow-y: auto; padding: 4px 5% 14px; }
  .apol-menu .sub-menu .sub-menu { position: static; transform: none; display: block; padding: 0 0 0 16px; }
  .apol-menu .sub-menu li:has(> .sub-menu) > a::after { content: none; }
  .apol-menu .sub-menu a, .apol-menu .wslistlinks a, .apol-menu .wstliststy02 a { padding: 12px 6px; margin: 0; }
  .apol-menu .wslistlinks > li.title, .apol-menu .wstliststy02 > li.wstheading { margin: 16px 0 4px; padding-bottom: 0; border-bottom: 0; }

  /* department menu flattens: tabs become headings, panels always shown */
  .apol-menu .wsshopwp { min-height: 0; }
  .apol-menu .wstabitem { width: auto; border-right: 0; min-height: 0; padding: 0; }
  .apol-menu .wstitemright { display: block; position: static; padding: 0 0 0 16px; overflow: visible; }

  /* fixed mini-bar slides in once the full header has scrolled away -
     a separate layer, so the page never changes height (no scroll jerk) */
  .apol-mini {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4%; background: var(--apol-sticky-bg, var(--apol-header-bg, var(--apol-color-surface)));
    border-bottom: var(--apol-header-border-width, 1px) solid var(--apol-header-border-color, #ddd);
    box-shadow: var(--apol-sticky-shadow, none);   /* App Designer: optional sticky-bar shadow (off by default) */
    transform: translateY(-100%); transition: transform .2s ease;
  }
  .apol-mini .apol-mini-logo { display: var(--apol-sticky-logo, flex); align-items: center; }   /* App Designer "Show logo" toggle */
  .apol-mini .apol-mini-logo img { width: auto; height: var(--apol-sticky-logo-mini-size, 32px); object-fit: contain; object-position: left center; display: block; }
  .apol-mini .apol-mini-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }   /* burger stays right even when the logo is hidden */
  .apol-mini .apol-mini-actions a, .apol-mini .apol-mini-actions button {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 0; color: var(--apol-hdricon-color, var(--apol-color-heading)); font-size: 22px; cursor: pointer; position: relative;
  }
  .apol-mini .apol-mini-actions a:hover, .apol-mini .apol-mini-actions button:hover { color: var(--apol-hdricon-hover, var(--apol-hdricon-color)); }
  .apol-mini-burger .ico-x { display: none; }
  body.menu-open .apol-mini-burger .ico-bars { display: none; }
  body.menu-open .apol-mini-burger .ico-x { display: inline; }
  body.menu-open.apol-mini-on .apol-mini { transform: translateY(0); }  /* keep the bar only if it was already showing */
  body.apol-mini-on .apol-mini { transform: translateY(0); }
  body:not(.apol-mini-on) .apol-mini { transition: none; }  /* hide instantly at the top - the real header is already there, so a slide-away just looks like lag */

  .mobile-menu-footer { margin-top: var(--apol-mobilemenu-pad-bottom, 0px) !important; }   /* App Designer 'Menu spacing (bottom)' = the gap between the last menu item and the contact footer (default 0 kills the legacy 20px phantom gap) */

  /* Custom (design-your-own) mobile menu footer: freeform admin HTML from App Designer.
     Inherit the navfooter text colour so any content is legible on the dark panel, and
     opt OUT of the contact-card <a> styling (that is for the structured contact footer). */
  .mobile-menu-footer.mmf-custom { color: var(--apol-navfooter-text, #fff); }
  .mobile-menu-footer.mmf-custom h1, .mobile-menu-footer.mmf-custom h2, .mobile-menu-footer.mmf-custom h3,
  .mobile-menu-footer.mmf-custom h4, .mobile-menu-footer.mmf-custom h5, .mobile-menu-footer.mmf-custom h6,
  .mobile-menu-footer.mmf-custom p, .mobile-menu-footer.mmf-custom li, .mobile-menu-footer.mmf-custom span { color: inherit; }
  .mobile-menu-footer.mmf-custom a {
    display: inline; align-items: initial; gap: 0; padding: 0; margin: 0;
    background: none; border: 0; border-radius: 0; font-size: inherit; line-height: inherit;
    color: var(--apol-navfooter-accent, var(--apol-navfooter-text, #fff)); text-decoration: underline;
  }
  .mobile-menu-footer.mmf-custom a:hover, .mobile-menu-footer.mmf-custom a:active { background: none; border: 0; }
  .mobile-menu-footer.mmf-custom img { max-width: 100%; height: auto; }

  /* App Designer: contact footer '3 across' layout (icon on top, label below,
     detail hidden) - toggled via navfooter.layout='cols' (adds .mmf-cols). The
     default stacked rows are unchanged. */
  .mobile-menu-footer.mmf-cols { display: flex; align-items: stretch; gap: 8px; }
  .mobile-menu-footer.mmf-cols a { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; margin-bottom: 0; padding: 8px 6px; }
  .mobile-menu-footer.mmf-cols a .mmf-label { flex: 0 0 auto; margin: 0; text-align: center; }
  .mobile-menu-footer.mmf-cols a .mmf-detail { display: none; }   /* no number/email in this layout */
  .mobile-menu-footer.mmf-cols a svg { margin: 0; }

  /* mobile menu footer - company/contact details (populated by apol.nav.js) */
  .apol-nav-footer { padding: 26px 5% 36px; background: var(--apol-color-surface); border-top: 1px solid rgba(0,0,0,.08); color: var(--apol-color-muted); font-size: .92rem; display: none; }
  body.menu-open .apol-nav-footer { display: block; }
  .apol-nav-footer:empty { display: none !important; }
  .apol-nav-footer a { color: var(--apol-color-text); }

  .nav_scrim { display: none !important; }
}


/* ----------------------------------------------------------------------------
   8. PORTED SUBSYSTEMS (verbatim): autocomplete dropdown UI, basket drawer,
      cart innards. Legacy inline-search layout rules deliberately excluded.
---------------------------------------------------------------------------- */
.shopping_cart_area_donation_item_image { width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }
.shopping_cart_area { display:none; width: 100vw;  min-height: 100vh; background-color: rgba(0,0,0,0.8);  backdrop-filter: blur(0px); float:left;  -webkit-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); -moz-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); padding:  0px 0px 0px 0px;  overflow: hidden; z-index:10000; position: relative; }
.shopping_cart_area_DONATION { display:none; width: 100%;  min-height: 100vh; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(0px); float:left;  -webkit-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.0); -moz-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.0); box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.0); padding:  0px 0px 0px 0px;  overflow: hidden; z-index:10000; position: absolute; }
.shopping_cart_area_close { position: relative; width: 100%; height: 20px; float: right; margin-bottom: 0px; right: 0px; top:25px; z-index:10000; }
.shopping_cart_area_close_DONATION { position: relative; width: 100%; height: 20px; float: right; margin-bottom: 0px; right: 0px; top:25px; z-index:10000; }
.shopping_cart_area_button { position: absolute; width: auto; height: auto; right: 0px; display:block; font-size: 2.0em; color: #fff; }
.shopping_cart_area_button:hover { color: #ccc; cursor: pointer; }
.shopping_cart_area_background { display:none; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.0); position:fixed; z-index:9999; float:right; }
.shopping_cart_area_button_DONATION { position: absolute; width: auto; height: auto; right: 0px; display:block; font-size: 2.0em; color: #fff; }
.shopping_cart_area_button_DONATION:hover { color: #ccc; cursor: pointer; }
.shopping_cart_area_background_DONATION { display:none; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.0); position:fixed; z-index:9999; float:right; }
.shopping_cart_area_content { position:relative; width: 100vw; height:100vh; float:left;   padding: 0px 0px 30px 0px; display:inline-block; }
.shopping_cart_area_inner { position:relative; width: 90%; height: auto; margin: 0px 5%; display:block; }
.shopping_cart_area_header { position:relative; width: 100%; height: 80px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 50px; }
.shopping_cart_area_content_DONATION { position:relative; width: calc(60vw + 20px); height:100vh; float:left;   padding: 0px 0px 0px 0px; display:inline-block; }
.shopping_cart_area_inner_DONATION { position:relative; width: 100%; height: auto; margin: 0px 6vw 0px 5vw; display:block; }
.shopping_cart_area_header_DONATION { position:relative; width: 100%; height: 80px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 30px; }
.shopping_cart_area_donation_holder { position:relative; width: 86.5%; height: auto; background-color: rgba(256,256,256, 0.0);-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); margin-bottom:10px; padding-bottom:0px; margin: 0 5%; top: 0vh; }
.shopping_cart_area_donation_holder_header { position:relative; width: 100%; height: auto; top:0; left: 0px; padding: 0px 0px; font-size: 0.7em; letter-spacing: 0.1em; word-spacing: 0.1em; color:#000; text-align:left; background-color: rgba(256,256,256,0.0); margin-bottom: 10px; font-weight: 400; }
.shopping_cart_area_donation_holder_header_background { display:block; width: 100%; height: auto; top:0; left: 0px; padding: 5px 0px; background-color: transparent; webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.shopping_cart_area_donation_item_holder { position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5em 1em;
    width: 100%;
    background-color: rgba(255,255,255,1.0);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
    padding: .6em 0; }
.shopping_cart_area_donation_item_holder_empty { position: relative;
    width: 100%;
    height: auto;
    background-color: rgba(256,256,256,0.0);
    border: 0px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
    overflow: hidden; }
.shopping_cart_area_donation_item_holder_image { position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 80px;
    height: 80px;
    line-height: 0;
    margin-right: 0;
    text-align: left;
    overflow: hidden; }
.shopping_cart_area_donation_item_holder_image a { display: block; line-height: 0; height: 100%; }
.shopping_cart_area_donation_item_image { width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }
.shopping_cart_area_donation_item_holder_text { position: relative;
    flex: 1 1 10em;
    min-width: 0;
    align-self: baseline;
    text-align: left; }
.shopping_cart_area_donation_item_holder_text p,
.shopping_cart_area_donation_item_holder_text h4,
.shopping_cart_area_donation_item_holder_text h5,
.shopping_cart_area_donation_item_holder_text h6 { line-height: 1.3; margin: .15em 0; }
.shopping_cart_area_donation_item_holder_text > :first-child { margin-top: 0; }
.shopping_cart_area_donation_item_holder_price { position: relative;
    align-self: baseline;
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
    color: #222;
    font-size: 1.0em;
    font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important;
    font-weight: 900; }
.shopping_cart_area_donation_item_holder_price .small_text,
.shopping_cart_area_donation_total_holder_value .small_text { white-space: nowrap; font-weight: 400; }
.shopping_cart_area_donation_item_holder_price2 { position: absolute;
    width: 100%;
    height: auto;
    float: left;
    overflow: visible;
    text-align: right;
    font-weight: bold;
    color: #222;
    line-height: 40px;
    padding-right: 2.5%;
    padding-top: 0px;
    bottom: 0px;
    right: 0%;
    font-size: 1.125em;
    border: 0px solid #ddd;
    margin-right: 0%;
    background-color: #f8f8f8;
    font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important;
    font-weight: 900; }
.shopping_cart_area_donation_total_holder { position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25em 1em;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: .45em;
    margin-bottom: 20px;
    margin-top: 15px; }
.shopping_cart_area_donation_total_holder_total { position: relative;
    text-align: left;
    color: #000;
    font-size: 1.6em;
    font-weight: normal; }
.shopping_cart_area_donation_total_holder_value { position: relative;
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
    color: var(--apol-color-primary, #0099cc);
    font-size: 1.5em;
    font-weight: bold; }
.shopping_cart_area_donation_checkout_holder { position: relative;
    width: 100%;
    height: 86px;
    border-bottom: 0px solid rgba(0,0,0,0.1);
    margin-bottom: 1px;
    padding: 0px 0% 20px 0%; }
.shopping_cart_area_donation_checkout_holder_editbasket { position:relative; width: 49.5%; float: left;  margin-right: 0%; text-align:left; color: var(--apol-color-primary, #0099cc); font-size: 1.0em; font-weight: bold; }
.shopping_cart_area_donation_checkout_holder_checkout { position:relative; width: 49.5%; float: right;  margin-left: 0%; text-align:right; color: var(--apol-color-primary, #0099cc); font-size: 1.0em; font-weight: bold; }
.shopping_cart_empty { margin: -40px 0 0 0;
    display: block;
    text-align: left;
    line-height: 60px;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    world-spacing: 0.1em;
    font-weight: 400;
    width: 100%;
    margin: 150px auto 0 auto;
    text-align: center; }
.shopping_cart_area_donation_checkout_holder_checkout button { width:100% !important; }
.shopping_cart_area_donation_checkout_holder_editbasket button { width:100% !important; }
.shopping_cart_empty_main { margin: -40px 0 0 0;
    display: block;
    text-align: left;
    line-height: 60px;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    world-spacing: 0.1em;
    font-weight: 400;
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center; }
.shopping_cart_payment_logos { width: 70%; max-width: 260px; }
.shopping_cart_combined_ecom { display:inline; }
.shopping_cart_combined_donation { display:inline; }
.autocomplete_mobile { -webkit-transition: all 0.0s ease-in-out;
        -moz-transition: all 0.0s ease-in-out;
			font-size: 1.8em;
		font-family: var(--apol-font-body), "Font Awesome 7 Pro", Georgia, sans-serif !Important;
		color: #222; width: 100%; box-sizing: border-box; font-weight:100; padding: 18px 3px; border: 0px solid rgba(0,0,0,0.2); outline: none; 
		height:75px; 
		margin-top:-12px;	
		margin-left:0px;
		  -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
background-color: #f5f5f5;
width: 100%;
text-indent: 0px;
right: 0px;
border-bottom: 1px solid rgba(0,0,0,0.1); }
.autocomplete_mobile:focus { -webkit-transition: all 0.0s ease-in-out;
        -moz-transition: all 0.0s ease-in-out;
			font-size: 1.8em;
		font-family: var(--apol-font-body), "Font Awesome 7 Pro", Georgia, sans-serif !Important;
		color: #222; width: 100%; box-sizing: border-box; font-weight:100; padding: 18px 3px; border: 0px solid rgba(0,0,0,0.2); outline: none; 
		height:75px; 
		margin-top:-12px;	
		margin-left:0px;
		  -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
background-color: #f5f5f5;
width: 100%;
text-indent: 0px;
right: 0px;
border-bottom: 1px solid rgba(0,0,0,0.1); }
.autocomplete_mobile::placeholder { color: rgba(0, 0, 0, 0.8);
      font-family: var(--apol-font-body), "Font Awesome 7 Pro", Georgia, sans-serif !Important;
      text-transform: none;
      font-size: 1.1em;
      word-spacing: auto;
      letter-spacing: auto;
      font-weight:200;
	  margin-top: 28px; }
.quick_donate_area_ecombasket { display: none;
    width: 100%;
    background: url(../svg/);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(0px);
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10000;
    -webkit-box-shadow: inset -4px 0px 11px 0px rgb(0 0 0 / 0%);
    -moz-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.0);
    box-shadow: inset -4px 0px 11px 0px rgb(0 0 0 / 0%);
    overflow: hidden;
    z-index: 10000;
    border-top: solid 0px var(--apol-color-primary, #0099cc);
	padding:  0px 0px 50px 0px; }
.quick_donate_area_ecombasket_donation { width: 100%; position:relative;  padding:  0px 30px 50px 30px; }
.quick_donate_area_close_ecombasket { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: 0px; right: 0px; top:25px; z-index:10000; }
.quick_donate_area_close_ecombasket h4 { order: 1; margin: 0; line-height: 1.2; text-align: left; float: none; }
.quick_donate_area_close_ecombasket > .quick_donate_area_header_ecombasket { display: none; }
/* Empty-basket guard: when the bag is empty the basket includes drop the header's
   closing tags, so the "Your bag is empty" block lands inside this flex header row
   and drags the title + close button out of place. Push it onto its own full-width
   line below the title/X so the header stays put. */
.quick_donate_area_close_ecombasket > .shopping_cart_area_donation_item_holder_empty { order: 3; flex: 1 0 100%; width: 100%; }
.quick_donate_area_close_ecombasket_donation { position: relative; width: 100%; height: 20px; float: right; margin-bottom: 0px; right: 0px; top:10px; z-index:10000; }
.quick_donate_area_button_ecombasket { order: 2;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: 1.9em;
    line-height: 1;
    color: #222;
    z-index: 10001;
    cursor: pointer; }
.quick_donate_area_button_ecombasket:hover { color: #ccc; cursor: pointer; }
.quick_donate_area_background_ecombasket { display:none; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.0); position:fixed; z-index:9999; float:right; }
.quick_donate_area_content_ecombasket { position: relative;
    width: 400px;
    height: 100vh;
    float: right;
    padding: 0px 2% 0px 2%;
    background-color: #ffffff; }
.quick_donate_area_inner_ecombasket { position:relative; width: auto; height: auto; margin: 0px 30px 0px 30px; }
.quick_donate_area_header_ecombasket { position: relative;
    width: 100%;
    height: 40px;
    border-bottom: 0px solid rgba(0,0,0,0.1);
    top: 0px; }
.quick_donate_area_header_ecombasket_ecom { position: relative;
    width: 100%;
    height: 75px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 0px; }
.quick_donate_area_header_ecombasket_donation { position: relative;
    width: 100%;
    height: 90px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: -65px;
    top: -75px; }
.quick_donate_area_donation_holder_ecombasket { position:relative; width: 100%; height: auto; background-color: #fff;-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); margin-bottom:10px; padding-bottom;30px; }
.quick_donate_area_donation_holder_header_ecombasket { position:relative; width: 100%; height: auto; top:0; left: 0px; padding: 10px 15px; font-size: 0.7em; letter-spacing: 0.1em; word-spacing: 0.1em; color:#fff; text-align:left; background-color: rgba(233,246,249,1.0); }
.quick_donate_area_donation_holder_header_background_ecombasket { width: auto; height: auto; top:0; left: 0px; padding: 5px 10px; background-color: rgba(77,196,232,1.0); webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.quick_donate_area_donation_item_holder_ecombasket { position:relative; width: 100%; height: 150px; background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1px; }
.quick_donate_area_donation_item_holder_image_ecombasket { position:relative; width: 25%; height: 150px; float: left; overflow: hidden; margin-right: 5%; text-align:left; }
.quick_donate_area_donation_item_holder_text_ecombasket { position:relative; width: 50%; height: 150px; float: left; overflow: hidden;margin-right: 0%; text-align:left; }
.quick_donate_area_donation_item_holder_price_ecombasket { position:relative; width: 20%; height: 150px; float: right; overflow: hidden; text-align:center; font-size:1.5em; line-height:auto; padding-top:20px; }
.quick_donate_area_donation_item_image_ecombasket { width: 100%; height: 100%; background-size: cover; background-position: center; }
.quick_donate_area_donation_total_holder_ecombasket { position:relative; width: 100%; height: 50px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1px; margin-top:30px; }
.quick_donate_area_donation_total_holder_total_ecombasket { position:relative; width: 100px; float: left; margin-right: 0%; text-align:left; color: #fff; font-size: 2.0em; font-weight: normal; }
.quick_donate_area_donation_total_holder_value_ecombasket { position:relative; width: auto; float: left;  margin-right: 0%; text-align:left; color: var(--apol-color-primary, #0099cc); font-size: 2.0em; font-weight: bold; }
.quick_donate_area_donation_checkout_holder_ecombasket { position:relative; width: 100%; height: 120px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1px; padding: 30px 0px; }
.quick_donate_area_donation_checkout_holder_checkout_ecombasket { position:relative; width: 100%; float: left;  margin-right: 0%; text-align:left; color: var(--apol-color-primary, #0099cc); font-size: 2.0em; font-weight: bold; }
.quick_donate_payment_logos_ecombasket { width: 70%; max-width: 260px; }
#quickdonateopenclose_ecombasket { height: 40px; display:block; background-color: transparent; }
.quick_donate_area_ecombasket { position: fixed;
  inset: 0;
  display: block !important;        /* force visible so transitions work */
  z-index: 2147483647;

  /* hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease; }
.quick_donate_area_background_ecombasket { position: absolute;
  inset: 0; }
.quick_donate_area_content_ecombasket { overflow: hidden;
  transform: translateY(0px);      /* start offset */
  transition: transform .25s ease; }
body.basket-open .quick_donate_area_ecombasket { opacity: 1;
  visibility: visible;
  pointer-events: auto; }
body.basket-open .quick_donate_area_content_ecombasket { transform: translateY(0); }
/* Lock the page scroll while the slide-out basket is open so there are not two
   scrollbars (the page behind + the basket panel). :has() lets the body-level
   class reach <html>, which is the actual scroll container in most browsers. */
body.basket-open { overflow: hidden; }
html:has(body.basket-open) { overflow: hidden; }
/* Slide-out basket: SHOPPING BAG header stays pinned at the top, the Total row +
   EDIT BASKET / CHECKOUT stay pinned at the bottom, and ONLY the product list
   scrolls between them. The panel is a flex column; the item column
   (.flex-container-columns) scrolls; the total + checkout are stacked sticky at
   the bottom (checkout is a fixed 86px tall, so the total pins just above it).
   In BOTH the normal drawer (buildECOMBasket) and the functional-page drawer
   (chrome host) the tree is: panel > inner > [header] + .flex-container-columns >
   .flex-item > holder_basket(items) + total + checkout. We make everything a flex
   column so ONLY the product list (.shopping_cart_area_donation_holder_basket) scrolls,
   and the Total + checkout sit BELOW it as a fixed footer (not sticky). That way the
   scrollbar runs only alongside the products - it doesn't extend past the buttons, and
   the buttons don't shift when it appears (the scrollbar takes width from the product
   list, not from the footer). One rule set, both drawers identical. */
.quick_donate_area_content_ecombasket { display: flex; flex-direction: column; }
.quick_donate_area_content_ecombasket > .quick_donate_area_inner_ecombasket {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.quick_donate_area_inner_ecombasket > .quick_donate_area_header_ecombasket_ecom { flex: 0 0 auto; }
.quick_donate_area_inner_ecombasket > .flex-container-columns {
  flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  /* zero the negative-margin gutter this class carries (would otherwise overflow) */
  margin-left: 0; margin-right: 0; }
.quick_donate_area_inner_ecombasket > .flex-container-columns > .flex-item-100-percent-column {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding-left: 0; padding-right: 0; }
/* ONLY the product list scrolls; 16px right gap so items clear the scrollbar */
.quick_donate_area_inner_ecombasket .shopping_cart_area_donation_holder_basket {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding-right: 16px; }
/* Total + checkout are the fixed footer below the scroll (not sticky) */
.quick_donate_area_inner_ecombasket .shopping_cart_area_donation_total_holder,
.quick_donate_area_inner_ecombasket .shopping_cart_area_donation_checkout_holder {
  flex: 0 0 auto; background: #fff; }
/* Total row: slightly smaller so the big "(...Ex Vat)" figure fits the narrow panel;
   allow the ex-VAT part to wrap as a last resort rather than clip. (It's in the footer
   now, so the scrollbar no longer overlaps it - no right margin needed.) */
.quick_donate_area_content_ecombasket .shopping_cart_area_donation_total_holder_total {
  font-size: 1.25em; }
.quick_donate_area_content_ecombasket .shopping_cart_area_donation_total_holder_value {
  font-size: 1.2em; white-space: normal; }
.quick_donate_area_inner_ecombasket { position:relative; width: auto; height: auto; margin: 0px 0px 0px 0px; }
.shopping_cart_image_ecom { background-attachment: absolute; background-position: center; background-repeat: no-repeat; background-size: cover; display:block; width:150px; height:100px; position: relative; margin: 0 auto; }
.autocomplete-results { position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
    margin-top: -1px !important;
    display: block !important; }
.autocomplete-results.active { max-height: 600px !important;
    opacity: 1 !important;
    overflow-y: auto !important; }
.autocomplete-results::-webkit-scrollbar { width: 8px !important; }
.autocomplete-results::-webkit-scrollbar-track { background: #f1f1f1 !important; }
.autocomplete-results::-webkit-scrollbar-thumb { background: #c1c1c1 !important;
    border-radius: 4px !important; }
.autocomplete-results::-webkit-scrollbar-thumb:hover { background: #a8a8a8 !important; }
.autocomplete-item { display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #2c3e50 !important;
    transition: background-color 0.2s ease !important;
    min-height: auto !important; }
.autocomplete-item:last-child { border-bottom: none !important; }
.autocomplete-item:hover,
.autocomplete-item.active { background-color: #f8f9fa !important; }
.autocomplete-image { width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    flex-shrink: 0 !important;
    margin-right: 16px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
    display: block !important;
    float: none !important;
    position: relative !important; }
.autocomplete-content { flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; }
.autocomplete-title { font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-title mark { background-color: #fff3cd !important;
    color: #856404 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: 700 !important; }
.autocomplete-description { font-size: 13px !important;
    color: #6c757d !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-price-stars { display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 4px !important; }
.autocomplete-price { display: var(--apol-autocomplete-price-display, block) !important;   /* App Designer: hide prices in the search autocomplete (set to none) */
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-price .sale-badge { display: inline-block !important;
    background: var(--apol-color-accent, #cc2127) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-right: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important; }
.autocomplete-price.on-sale { color: #dc3545 !important; }
.autocomplete-stars { display: flex !important;
    gap: 2px !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-stars .fas,
.autocomplete-stars .far,
.autocomplete-stars .fa-star,
.autocomplete-stars .fa-star-half-alt { color: #ffc107 !important; }
.autocomplete-stars .far,
.autocomplete-stars .fa-star.far { color: #e0e0e0 !important; }
.autocomplete-no-results { padding: 24px 16px !important;
    text-align: center !important;
    color: #6c757d !important;
    font-size: 14px !important; }
.autocomplete-price-line.single-line { display:flex; align-items:baseline; gap:6px; line-height:1.2; }
.autocomplete-price-line.single-line .price-secondary { font-size: 12px; opacity: 0.75; }
input.autocomplete,
input[type="text"].autocomplete { border-radius: 0px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
input.autocomplete:focus,
input[type="text"].autocomplete:focus { outline: none !important;
    border-color: #ccc !important;
    box-shadow: none !important; }
.autocomplete-overlay { position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 4999 !important;  /* Just below inline-search-mount (5000) */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.0s ease, visibility 0.0s ease !important;
    pointer-events: none !important; }
.autocomplete-overlay.active { opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; }
.autocomplete-results { position: absolute !important;
    z-index: 5001 !important; }
input.autocomplete,
input[type="text"].autocomplete,
#autocomplete-input { z-index: 5001 !important; }
.search-wrapper,
.input-field,
.autocomplete-wrapper { position: relative !important; }
.shopping_cart_empty_icon { font-size: 30px }
@media only screen and (max-width : 1365px) {
  .autocomplete_mobile { -webkit-transition: all 0.0s ease-in-out;
        -moz-transition: all 0.0s ease-in-out;
			font-size: 1.8em;
		font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important;
		color: #222; width: 100%; box-sizing: border-box; font-weight:100; padding: 18px 3px; border: 0px solid rgba(0,0,0,0.2); outline: none; 
		height:77px; 
		margin-top:-12px;	
		margin-left:0px;
		  -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
background-color: #f5f5f5;
width: 100%;
text-indent: 0px;
right: 0px;
border-bottom: 1px solid rgba(0,0,0,0.15); }
  .autocomplete_mobile:focus { height:77px; 
border-bottom: 1px solid rgba(0,0,0,0.15); }
  .shopping_cart_area_donation_holder { position:relative; width: 96%; height: auto; background-color: rgba(256,256,256, 0.0);-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); margin-bottom:10px; padding-bottom:0px; margin: 0; top: 1px; }
  .shopping_cart_area_content { position:relative; width: 100vw; height:100vh; float:left;   padding: 0px 0px 30px 0px; display:inline-block; }
  .shopping_cart_area_inner { position:relative; width: 90%; height: auto; margin: 0px 5%; display:block; }
  .shopping_cart_area_header { position:relative; width: 100%; height: 80px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 30px; }
  .quick_donate_area_inner_ecombasket { position:relative; width: auto; height: auto; margin: 0px 0px 0px 0px; }
  .shopping_cart_image_ecom { margin: auto 0 auto auto; }
  .shopping_cart_area { display:none; width: 100vw;  min-height: 100vh; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(0px); float:left;  -webkit-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); -moz-box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); box-shadow: inset -4px 0px 11px 0px rgba(0,0,0,0.56); padding:  0px 0px 0px 0px;  overflow: hidden; z-index:10000; position: relative; }
}
@media only screen and (max-width : 767px) {
  .shopping_cart_area_content { position:relative; width: 100vw; height:100vh; float:left;   padding: 0px 0px 30px 0px; display:inline-block; }
  .shopping_cart_area_inner { position:relative; width: 90%; height: auto; margin: 0px 5%; display:block; }
  .shopping_cart_area_header { position:relative; width: 100%; height: 80px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 30px; }
  .shopping_cart_area_donation_total_holder_total { position:relative; text-align:left; color: #000; font-size: 1.4em; font-weight: normal; }
  .quick_donate_area_content_ecombasket { position:relative; width: 100%; height:100vh; float:left;   padding: 0px 5% 0px 5%; }  /* no bottom padding: let the sticky total+checkout footer sit flush on the viewport bottom */
  .autocomplete-results { border-radius: 0 0 6px 6px !important;
        max-width: 100vw !important; }
  .autocomplete-results.active { max-height: 500px !important; }
  .autocomplete-item { padding: 10px 12px !important; }
  .autocomplete-image { width: 100px !important;
        height: 100px !important;
        margin-right: 12px !important; }
  .autocomplete-title { font-size: 18px !important; }
  .autocomplete-description { font-size: 12px !important;
        -webkit-line-clamp: 1 !important; }
  .autocomplete-price { font-size: 15px !important; }
  .autocomplete-stars { font-size: 11px !important; }
}
@media only screen and (max-width : 600px) {
  .autocomplete_mobile { -webkit-transition: all 0.0s ease-in-out;
    -moz-transition: all 0.0s ease-in-out;
    font-size: 1.2em;
    font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif ! Important;
    height: 5px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 100;
    padding: 18px 18px 18px 0.8em;
    border: 0px solid rgba(0, 0, 0, 0.0);
    outline: none;
    height: 59px;
    margin-top: -6px;
    margin-left: -5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    background-color: rgba(256, 256, 256, 1.0);
    width: 100%;
    text-indent: 0px;
    right: 0px;
	color:#222; }
  .autocomplete_mobile:focus { -webkit-transition: all 0.0s ease-in-out;
    -moz-transition: all 0.0s ease-in-out;
    font-size: 1.2em;
    font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif ! Important;
    height: 5px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 100;
    padding: 18px 18px 18px 0.8em;
    border: 0px solid rgba(0, 0, 0, 0.0);
    outline: none;
    height: 59px;
    margin-top: -6px;
    margin-left: -5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    background-color: rgba(256, 256, 256, 1.0);
    width: 100%;
    text-indent: 0px;
    right: 0px; }
  .shopping_cart_area_donation_holder { position:relative; width: 95%; height: auto; background-color: rgba(256,256,256, 0.0);-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.0); margin-bottom:10px; padding-bottom:0px; margin: 0 0 0 0%; top: 6px; }
  .autocomplete-results { /* Compensate for any padding/margin on the input-field */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important; }
}
@media only screen and (max-width : 500px) {
  .quick_donate_area_header_ecombasket_donation { margin-bottom: -45px;
    top: -55px; }
  .shopping_cart_area_content { position:relative; width: 100vw; height:100vh; float:left;   padding: 0px 0px 30px 0px; display:inline-block; }
  .shopping_cart_area_inner { position:relative; width: 90%; height: auto; margin: 0px 5%; display:block; }
  .shopping_cart_area_header { position:relative; width: 100%; height: 80px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 30px; }
  .autocomplete-price-stars { flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important; }
  .autocomplete-image { width: 100px !important;
        height: 100px !important; }
}
.autocomplete-loading { padding: 16px !important;
    text-align: center !important;
    color: #6c757d !important; }
.autocomplete-loading::after { content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-top-color: var(--apol-color-accent, #cc2127) !important;
    border-radius: 50% !important;
    animation: autocomplete-spin 0.6s linear infinite !important;
    margin-left: 8px !important; }
@keyframes autocomplete-spin {
    to { transform: rotate(360deg); }
}
.autocomplete-results { position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.0s ease, opacity 0.0s ease !important;
    margin-top: -1px !important;
    display: block !important; }
.autocomplete-results.active { max-height: 600px !important;
    opacity: 1 !important;
    overflow-y: auto !important; }
.autocomplete-results::-webkit-scrollbar { width: 8px !important; }
.autocomplete-results::-webkit-scrollbar-track { background: #f1f1f1 !important; }
.autocomplete-results::-webkit-scrollbar-thumb { background: #c1c1c1 !important;
    border-radius: 4px !important; }
.autocomplete-results::-webkit-scrollbar-thumb:hover { background: #a8a8a8 !important; }
.autocomplete-item { display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #2c3e50 !important;
    transition: background-color 0.2s ease !important;
    min-height: auto !important; }
.autocomplete-item:last-child { border-bottom: none !important; }
.autocomplete-item:hover,
.autocomplete-item.active { background-color: #f8f9fa !important; }
.autocomplete-image { width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    flex-shrink: 0 !important;
    margin-right: 16px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
    display: block !important;
    float: none !important;
    position: relative !important; }
.autocomplete-content { flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; }
.autocomplete-title { font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-title mark { background-color: #fff3cd !important;
    color: #856404 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: 700 !important; }
.autocomplete-description { font-size: 13px !important;
    color: #6c757d !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-price-stars { display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 4px !important; }
.autocomplete-price { display: var(--apol-autocomplete-price-display, block) !important;   /* App Designer: hide prices in the search autocomplete (set to none) */
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-price .sale-badge { display: inline-block !important;
    background: var(--apol-color-accent, #cc2127) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-right: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important; }
.autocomplete-stars { display: flex !important;
    gap: 2px !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important; }
.autocomplete-stars .fas,
.autocomplete-stars .far,
.autocomplete-stars .fa-star,
.autocomplete-stars .fa-star-half-alt { color: #ffc107 !important; }
.autocomplete-stars .far,
.autocomplete-stars .fa-star.far { color: #e0e0e0 !important; }
.autocomplete-no-results { padding: 24px 16px !important;
    text-align: center !important;
    color: #6c757d !important;
    font-size: 14px !important; }
input.autocomplete,
input[type="text"].autocomplete { border-radius: 0px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
input.autocomplete:focus,
input[type="text"].autocomplete:focus { outline: none !important;
    box-shadow: 0 0 0 3px rgba(204, 33, 39, 0.1) !important; }
.search-wrapper,
.input-field,
.autocomplete-wrapper { position: relative !important; }
@media (max-width: 768px) {
  .autocomplete-results { border-radius: 0 0 6px 6px !important;
        max-width: 100vw !important; }
  .autocomplete-results.active { max-height: 500px !important; }
  .autocomplete-item { padding: 10px 12px !important; }
  .autocomplete-image { width: 100px !important;
        height: 100px !important;
        margin-right: 12px !important; }
  .autocomplete-title { font-size: 18px !important; }
  .autocomplete-description { font-size: 12px !important;
        -webkit-line-clamp: 1 !important; }
  .autocomplete-price { font-size: 15px !important; }
  .autocomplete-stars { font-size: 11px !important; }
}
@media (max-width: 600px) {
  .autocomplete-results { /* Compensate for any padding/margin on the input-field */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important; }
}
@media (max-width: 480px) {
  .autocomplete-price-stars { flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important; }
  .autocomplete-image { width: 80px !important;
        height: 80px !important; }
}
.autocomplete-loading { padding: 16px !important;
    text-align: center !important;
    color: #6c757d !important; }
.autocomplete-loading::after { content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-top-color: var(--apol-color-accent, #cc2127) !important;
    border-radius: 50% !important;
    animation: autocomplete-spin 0.6s linear infinite !important;
    margin-left: 8px !important; }
@keyframes autocomplete-spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   8b. OVERRIDES - must win over the ported subsystems above
---------------------------------------------------------------------------- */
/* legacy autocomplete page-dimmer: kept functional for autocomplete.js,
   but visually inert - the nav scrim owns page dimming now */
.autocomplete-overlay { background: transparent !important; backdrop-filter: none !important; pointer-events: none !important; }
.autocomplete-overlay.active { pointer-events: none !important; }  /* the ported .active rule re-arms it otherwise */
/* legacy autocomplete renderer (rich: prices, VAT, sale flags).
   Desktop bug: it sets an inline height of 1px on the results container
   (measured against the retired slide-out anchor) - pin it open instead. */
.autocomplete-results {
  height: auto !important; min-height: 0 !important;
  max-height: 60vh !important; overflow-y: auto !important;
  z-index: 6000 !important; pointer-events: auto !important;
}
.autocomplete-results * { pointer-events: auto !important; }

/* header search: hard reset - resources.min.css (materialize) styles
   .input-field wrappers and inputs aggressively; nothing may inflate this */
.header_search form, .header_search .topmenusearch {
  margin: 0 !important; padding: 0 !important; display: flex !important; position: relative !important; width: 100% !important;
}
.header_search .input-field {
  flex: 1 1 auto !important; min-width: 0 !important; position: relative !important;
  margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
}
.header_search input.autocomplete,
.header_search input#autocomplete-input,
.header_search input[type="text"].autocomplete {
  width: 100% !important; height: 48px !important; margin: 0 !important;
  padding: 0 calc(var(--apol-search-btn-inset-x, 2px) + var(--apol-search-btn-width, 48px) + 8px) 0 18px !important; font-size: var(--apol-search-font-size, 1rem) !important; font-weight: 300 !important;
  font-family: var(--apol-font-body) !important; color: var(--apol-search-text) !important;
  background: var(--apol-search-bg) !important; border: 1px solid var(--apol-search-border) !important;
  border-radius: var(--apol-search-radius) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  box-sizing: border-box !important; transition: border-color .15s, box-shadow .15s !important;
}
.header_search input.autocomplete:focus,
.header_search input#autocomplete-input:focus,
.header_search input[type="text"].autocomplete:focus {
  outline: none !important;
  border-color: var(--apol-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}
.header_search .btnstyleslide {
  /* App Designer button box: sized by width + vertical inset (inset 0 = full input height),
     positioned by the right-edge gap, fine-tuned by "Search icon nudge" (translate), with
     four independent corner radii. Was wired to the desktop-hidden mobile search icon. */
  position: absolute !important; right: var(--apol-search-btn-inset-x, 2px) !important;
  top: var(--apol-search-btn-inset-y, 2px) !important; bottom: var(--apol-search-btn-inset-y, 2px) !important;
  height: auto !important; width: var(--apol-search-btn-width, 48px) !important;
  transform: translate(var(--apol-icon-search-nudge-x, 0px), var(--apol-icon-search-nudge-y, 0px)) !important;
  margin: 0 !important; padding: 0 !important; background: var(--apol-search-btn-bg, transparent) !important;
  border: 0 !important; box-shadow: none !important; color: var(--apol-search-btn) !important;
  border-radius: var(--apol-search-btn-radius-tl, 6px) var(--apol-search-btn-radius-tr, 6px) var(--apol-search-btn-radius-br, 6px) var(--apol-search-btn-radius-bl, 6px) !important;
  display: grid !important; place-items: center !important; font-size: 18px !important; cursor: pointer !important;
}
/* mobile search mode (App Designer): box | icon | hidden */
@media (max-width: 1365px){
  .header_search { display: var(--apol-msearch-box, block); }
  .mobile_header_icons_iconwrap_search { display: var(--apol-msearch-icon, none) !important; }
}
/* search magnifier: independent mobile-tier nudge (mirrors the -m pattern) */
@media (max-width: 980px){
  .header_search .btnstyleslide { transform: translate(var(--apol-icon-search-nudge-x-m, 0px), var(--apol-icon-search-nudge-y-m, 0px)) !important; }
}

/* webslide JS (still in resources.min.js) injects arrow spans into menus - hide */
.wsmenu-click, .wsmenu-click02, .wsmenu-arrow, .wsanimated-arrow, .wsmobileheader { display: none !important; }

/* ----------------------------------------------------------------------------
   9. [PORT] - fill from style.min.css as each page type is converted
   - product page components
   - category / apolGrid page components
   - functional pages (login, account, checkout)
---------------------------------------------------------------------------- */


/* ====================================================================
   LEGACY CONTENT STYLES - ported from retired style.min.css
   The TinyMCE style_formats vocabulary (text wraps, colour spans,
   rules, blockquotes, bullets, readmore) so editor styling carries
   over to the rebuilt templates. Values lifted verbatim from
   style.min.css unless commented otherwise.
==================================================================== */

/* image / text wraps (the editor's "Text Wrap Left / Right") */
.text_wrap_left  { position: relative; float: left;  margin: 10px 20px 10px 0; max-width: 50%; height: auto; }
.text_wrap_right { position: relative; float: right; margin: 10px 0 10px 20px; max-width: 50%; height: auto; }
.text_wrap_left img, .text_wrap_right img { max-width: 100%; height: auto; }
@media only screen and (max-width: 420px) {
  /* mobile: wraps stack full width (as legacy) */
  .text_wrap_left, .text_wrap_right { float: none; margin: 10px 0 20px 0; max-width: 100%; }
  .text_wrap_left img, .text_wrap_right img { width: 100%; margin: 10px 0 0 0; }
}

/* inline text styles */
.underlined_text { text-decoration: underline; }
.blockquote { padding: 10px 20px; margin: 0 0 20px; border-left: 5px solid #eee; display: block; }
.blockquote p { font-size: 1.063em; font-style: italic; }
.blockquote_small { display: block; font-size: 80%; line-height: 1.42857143; color: #777; padding: 10px 20px; margin: 0 0 20px; }

/* text colours (blue_light tracks the brand token; rest are legacy literals) */
.white_text      { color: #fff; }
.blue_light_text { color: var(--apol-color-primary, #0099CC); }
.blue_dark_text  { color: #3b5998; }
.red_text        { color: #cc2127; }
.purple_text     { color: #9c27b0; }
.green_text      { color: #4caf50; }
.yellow_text     { color: #FFDF14; }
.orange_text     { color: #FF5414; }
.grey_light_text { color: #ccc; }
.grey_dark_text  { color: #333; }

/* rules */
.horizontal_rule { border-bottom: 1px solid #ccc; padding: 15px 0 20px; display: block; }
.horizontal_rule_short { border-bottom: 1px solid #ccc; padding: 15px 0 20px; margin: 0 15%; display: block; }
.vertical_rule { border-left: 1px solid rgba(0,0,0,.2); margin: 0 .5em; display: block; width: auto; height: 100%; }

/* ticked bullet lists (legacy used ../svg/check.svg - replaced with a
   unicode tick coloured by the brand token so it needs no asset path) */
.bullet ul { list-style-position: inside; line-height: 2.0em; padding: 0 1em; }
.bullet ul li { margin: 0 0 0 1em; padding: 0 0 0 1em; text-indent: -2em; }
li.bullet { list-style-type: none !important; line-height: 2.0em; }
li.bullet::before { content: "\2713"; color: var(--apol-color-primary, #0099CC); display: inline-block; width: 1em; height: 1em; margin-right: .5em; position: relative; top: .05rem; }

/* full-bleed image - mobile only, as the legacy class name intends.
   (the 100vw breakout pattern reintroduces a horizontal scrollbar on
   desktop, so it is deliberately scoped to small screens) */
@media only screen and (max-width: 420px) {
  .fullwidth_mobile_image { width: 100vw; display: block; height: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* read more (collapsed: JS sets max-height inline) */
.readmore > .readmore__inner { overflow: hidden; transition: max-height .25s ease; }
.readmore__inner > :first-child { margin-top: 0; }
.readmore__inner > :last-child { margin-bottom: 0; }
.readmore__toggle { margin-top: .35rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }

/* ====================================================================
   FLICKITY CORE (v2, MIT) - never carried over from the old bundle.
   Without it carousels show the neighbouring cell (no viewport
   clipping) and cannot animate the slide. Cell sizing stays in
   style_additional.css; this is just the engine chrome.
==================================================================== */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; }
.flickity-button { position: absolute; background: hsla(0,0%,100%,.75); border: none; color: #333; }
.flickity-button:hover { background: #fff; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 5px rgba(0,153,204,.5); }
.flickity-button:active { opacity: .6; }
.flickity-button:disabled { opacity: .3; cursor: auto; pointer-events: none; }
.flickity-button-icon { fill: currentColor; }
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: .25; cursor: pointer; }
.flickity-page-dots .dot.is-selected { opacity: 1; }
/* fade-mode support (flickity-fade plugin) */
.flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; }
.flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; }

/* ====================================================================
   LEGACY CAROUSEL + PARALLAX PORT (from style.min.css / old bundle)
   The engine (Flickity + parallax driver) lives in resources.min.js and
   has always loaded; what never came over was the element styling.
==================================================================== */

/* legacy carousels: real markup is .carousel > .inner-cell > img.carousel-cell-image
   with .carousel_text_ovelay* caption overlays.
   In style.min.css the cells/images were position:absolute and the HEIGHT came
   from a JS sizing routine keyed off the old .header_main wrapper - which the
   new templates don't have. So: overlays ported VERBATIM; cells re-based on a
   CSS-only model (16:9 frame + object-fit cover, matching the 1920x1080 source
   images) so the carousel is self-sizing with no legacy JS dependency. */
.carousel { position: relative; }
.carousel .inner-cell {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  background-position: center 0; background-repeat: no-repeat; background-size: cover;
}
.carousel .inner-cell img.carousel-cell-image, .carousel .inner-cell img.carousel_image {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; margin: 0 auto; z-index: 1;
}
.carousel .inner-cell a:visited { color: inherit; }
/* caption overlays - verbatim from style.min.css */
.carousel_text_ovelay        { position: absolute; width: 90%; height: auto; margin: 0 5%; text-align: left;   top: 50%; left: 0; transform: translateY(-50%); z-index: 2; }
.carousel_text_ovelay_left   { position: absolute; width: 90%; height: auto; margin: 0 5%; text-align: left;   top: 50%; transform: translateY(-50%); z-index: 2; }
.carousel_text_ovelay_center { position: absolute; width: 90%; height: auto; margin: 0 5%; text-align: center; top: 50%; transform: translateY(-50%); z-index: 2; }
.carousel_text_ovelay_right  { position: absolute; width: 90%; height: auto; margin: 0 5%; text-align: right;  top: 50%; transform: translateY(-50%); z-index: 2; }
/* hide lazy images until Flickity marks them (style.min.css rule, retargeted
   at the lazyload attribute so non-lazy carousels are unaffected) */
.carousel img[data-flickity-lazyload-src]:not(.flickity-lazyloaded):not(.flickity-lazyerror) { visibility: hidden !important; }
/* responsive-height variant kept verbatim for any content that uses it */
.inner-cell-responsive { position: relative; width: 100%; display: block; background-position: center 0; background-repeat: no-repeat; background-size: cover; }
.inner-cell-responsive img { width: 100%; height: auto; display: block; }

/* parallax: container height was the ONLY rule in style.min.css - the inner
   .parallax/.parallax img rules came from the materialize layer. Both ported;
   without them the container renders as a full-viewport empty block that
   "jumps into place" as the scroll driver runs (the mobile grey-area bug). */
.parallax-container { position: relative; overflow: hidden; height: 100vh; z-index: 0; }
.parallax-container .parallax { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }
.parallax-container .parallax img {
  display: block; opacity: 0; position: absolute; left: 50%; bottom: 0;
  min-width: 100%; min-height: 100%; transform: translate3d(-50%, 0, 0);
}

/* full-bleed galleries on small screens (verbatim legacy behaviour) */
@media only screen and (max-width: 420px) {
  .carousel, .image_gallery_holder, .parallax-container, .product_gallery_container {
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
  .parallax-container { position: relative; }
  .carousel_calendar { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* carousels: a slide with no heading/description renders no stray boxes */
[class*="carousel_text_ovelay"] h1:empty { display: none; }
[class*="carousel_text_ovelay"]:empty { display: none; }

/* ============================================================================
   ECOM COMPONENTS - ported from style.min.css for template_00200 (product)
   and template_00201 (category) on the unified chassis. Mechanically
   extracted rule families (grid cards, filter modal, listings tabs, product
   detail, support pieces, loading spinner) incl. responsive variants, with
   brand hexes swapped to the design tokens. Improve selectively; do not
   re-import from style.min.css wholesale.
   ============================================================================ */
/* ============================================================================
   PDP "M&S-style" layout. Stage = gallery + left content + buy box (LAST).
   Bottom description is a full-width row BELOW the stage (.pdp-bottom-row) so the
   sticky buy box releases at the bottom of the accordion, not over the bottom text.
   Mosaic: 2-up; a lone trailing image spans full width. Square corners.
   Pairs with apol.pdp.gallery.js + template_00200. Bump apol.base.css ?v=.
   ============================================================================ */

.flex-container-columns.pdp-stage .carousel.pdp-gallery img,
.flex-container-columns.pdp-stage .carousel.pdp-gallery .carousel-cell-image { visibility: visible !important; opacity: 1 !important; }

.pdp-dots { list-style: none; margin: 0; padding: 0; }

/* ---- ACCORDION (native <details>): a divider line on every section, M&S style */
.pdp-accordion { margin-top: var(--apol-vspace-md, 3rem); border-top: 1px solid var(--apol-color-border, #dcdcdc); }
/* App Designer: "No gallery" PDP mode - hide the gallery and give the buy box
   and the content columns the full width, sticky dropped. Style query so it
   needs no template/JS change; applies on the live item page (won't preview). */
/* No gallery: hide the column, both remaining columns full-width. The extra
   .flex-container-columns lifts these above the desktop layout rule (same class
   count otherwise, which would win on source order). */
.flex-container-columns.pdp-stage.pdp-stage--no-gallery > .pdp-gallery-col { display: none !important; }
.flex-container-columns.pdp-stage.pdp-stage--no-gallery > .pdp-right { display: block !important; width: 100% !important; position: static !important; margin-left: 0 !important; margin-right: 0 !important; }
.flex-container-columns.pdp-stage.pdp-stage--no-gallery > .pdp-content { display: block !important; width: 100% !important; clear: both !important; }
/* Swap sides: item column to the left, gallery to the right (desktop). */
@media only screen and (min-width: 1001px) {
  .flex-container-columns.pdp-stage.pdp-stage--gallery-right > .pdp-right     { order: 1; }
  .flex-container-columns.pdp-stage.pdp-stage--gallery-right > .pdp-gallery-col { order: 2; }
  .flex-container-columns.pdp-stage.pdp-stage--gallery-right > .pdp-content { margin-left: auto !important; margin-right: 0 !important; }
  .flex-container-columns.pdp-stage.pdp-stage--gallery-right > .pdp-right { margin-left: 0 !important; margin-right: auto !important; }
}
.pdp-acc { border-bottom: 1px solid var(--apol-color-border, #dcdcdc); }
.pdp-acc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--apol-font-heading, inherit); font-weight: 700;
  color: var(--apol-color-heading, #222); text-transform: uppercase; letter-spacing: .02em;
}
.pdp-acc > summary::-webkit-details-marker { display: none; }
.pdp-acc > summary::after {
  content: ""; flex: 0 0 auto; width: .55em; height: .55em; margin-right: .2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.pdp-acc[open] > summary::after { transform: rotate(-135deg); }
.pdp-acc-body { padding: 0 0 1.4rem; }
.pdp-accordion details.pdp-acc:not(.pdp-acc-empty) { display: block !important; }  /* beat the runtime .tabs_N{display:inline!important} so the divider renders full width */
.pdp-acc.pdp-acc-empty { display: none !important; }

/* ---- App Designer PDP content layout: FULL-WIDTH TAB STRIP (--apol-pdp-content-layout:tabs)
   Alternative to the slide-out drawer. apol.pdp.gallery.js reads the token and, when
   'tabs', moves each section body into .pdp-tabs-panels and builds a .pdp-tabs-nav row,
   tagging .pdp-accordion.pdp-tabbed. One panel visible at a time, full page width - like
   the classic product tabs. (Live item page only; the App Designer preview shows the home
   page so it won't preview here.) --------------------------------------------------- */
.pdp-accordion.pdp-tabbed { border-top: 0; }
.pdp-accordion.pdp-tabbed > details.pdp-acc { display: none !important; }  /* originals hidden; summaries live on as tabs, bodies moved into panels */
.pdp-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--apol-color-border, #dcdcdc); }
.pdp-tab {
  background: transparent; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
  padding: .9rem 1.5rem; font-family: var(--apol-font-heading, inherit); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; color: var(--apol-color-muted, #666);
  cursor: pointer; border-radius: 6px 6px 0 0; transition: color .15s ease, background .15s ease;
}
.pdp-tab:hover { color: var(--apol-color-heading, #222); }
.pdp-tab.is-active { color: var(--apol-color-heading, #222); background: var(--apol-color-surface, #f5f5f5); border-color: var(--apol-color-border, #dcdcdc); }
.pdp-tabs-panels { border: 1px solid var(--apol-color-border, #dcdcdc); border-top: 0; padding: 1.6rem 1.4rem; }
.pdp-tab-panel { display: none; }
.pdp-tab-panel.is-active { display: block; }
@media only screen and (max-width: 640px) {
  .pdp-tab { flex: 1 1 auto; padding: .8rem 1rem; font-size: .85rem; }
  .pdp-tabs-panels { padding: 1.2rem 1rem; }
}

.pdp-stage .pdp-main-desc:empty { display: none; }
.pdp-stage .pdp-main-desc { margin: var(--apol-vspace-sm, 1.5rem) 0; }

/* ---- App Designer: PRODUCT-SECTION SURROUND (Argos-style: each block a card) --
   scripts_additional.js adds html.apol-pdp-surround-on AND tags each INDIVIDUAL
   product-page block with .apol-surr-card - the gallery, the buy box, the lower
   description, the info accordion and the bottom row. It never boxes the .pdp-stage
   row or the .pdp-content wrapper, so there is no single outer background box and
   no card nested inside another; empty blocks are skipped by the JS. WYSIWYG: the
   fallbacks below MATCH the admin BASE defaults, so an untouched value renders the
   same in the editor and on the live site (previously the fallbacks read the Cards
   tokens, so leaving the background at its white default fell through to the grey
   Cards colour on the frontend while the editor still showed white). Applies on the
   live item page; does not preview. No overflow:hidden - it would break the sticky
   buy box; the inner padding keeps content off the rounded corners instead. */
.apol-pdp-surround-on .apol-surr-card {
  box-sizing: border-box;
  display: block;   /* .pdp-lower ships as display:inline, which ignores min-height & mis-sizes as a card - force block */
  background: var(--apol-pdp-surround-bg, #ffffff);
  border: var(--apol-pdp-surround-border-width, 1px) solid var(--apol-pdp-surround-border-color, #cccccc);
  border-radius: var(--apol-pdp-surround-radius, 12px);
  padding: var(--apol-pdp-surround-pad, 20px);
  box-shadow: var(--apol-pdp-surround-shadow, 0 1px 3px rgba(15,23,42,.10));
  min-height: var(--apol-pdp-surround-min-h, 0px);   /* give sparse boxes a floor (App Designer "Min box height") */
}
/* The gallery & buy-box columns carry padding:0 !important from the base PDP
   layout - re-assert the card's inner padding over it (higher specificity +
   important). The lower-description & accordion cards take it from the rule above. */
.apol-pdp-surround-on .flex-container-columns.pdp-stage > .apol-surr-card {
  padding: var(--apol-pdp-surround-pad, 20px) !important;
}
/* VERTICAL distance between the stacked cards. Both the gallery -> lower-content gap
   (.pdp-content margin-top) and the lower -> accordion gap (.pdp-accordion
   margin-top) are set from the gap token; both need !important + this specificity
   to beat the base PDP vspace margins. */
.apol-pdp-surround-on .flex-container-columns.pdp-stage > .pdp-content { margin-top: var(--apol-pdp-surround-gap, 24px) !important; }
.apol-pdp-surround-on .pdp-content > .pdp-accordion { margin-top: var(--apol-pdp-surround-gap, 24px) !important; }
.apol-pdp-surround-on .pdp-content > .pdp-lower { margin-bottom: 0 !important; }
/* HORIZONTAL gap between the gallery and the buy-box columns (desktop only - on
   mobile the columns stack full-width). The base layout sets column-gap 3% and
   .pdp-right width calc(97% - galleryW), i.e. galleryW + 3% + rightW = 100%. We
   re-derive the buy-box width from the same hgap token so widening the gap narrows
   the buy box instead of overflowing the row. */
@media only screen and (min-width: 1001px) {
  /* column-gap needs !important: the App Designer's item specimen carries an inline
     style="gap:24px", which would otherwise pin the gap at 24px while the buy-box
     width still tracks the token - so below 24px the row overflowed and the buy box
     vanished in the editor (the real frontend has no inline gap). */
  .apol-pdp-surround-on .flex-container-columns.pdp-stage { column-gap: var(--apol-pdp-surround-hgap, 30px) !important; }
  .apol-pdp-surround-on .flex-container-columns.pdp-stage > .pdp-right {
    width: calc(100% - var(--apol-pdp-gallery-col-w, 62%) - var(--apol-pdp-surround-hgap, 30px)) !important;
  }
}

/* full-width bottom row, set apart from the columns above it */
.pdp-bottom-row { clear: both; width: 100%; order: 99; margin-top: var(--apol-vspace-lg, 5rem); }

/* Anti-flash guard: keep the gallery invisible until apol.pdp.gallery.js has
   applied the published layout mode and added .pdp-gallery-ready. Without this
   the server-rendered markup paints as the default mosaic, then snaps to the
   real mode (herogrid / stacked / single) - the "flash of default gallery".
   visibility (not display) so layout is reserved and images still load. Gated on
   the html.pdp-gallery-js class the script sets at parse time, so a no-JS
   browser still shows the base gallery. */
html.pdp-gallery-js .pdp-stage .carousel.pdp-gallery:not(.pdp-gallery-ready) {
  visibility: hidden;
}

/* ---- DESKTOP (> 1000px) -------------------------------------------------- */
@media only screen and (min-width: 1001px) {

  .flex-container-columns.pdp-stage {
    display: flex !important; flex-flow: row wrap;
    justify-content: flex-start; align-items: flex-start;
    gap: 0 3%; margin: 0.5rem 0 0;
  }
  .flex-container-columns.pdp-stage > .pdp-gallery-col { width: var(--apol-pdp-gallery-col-w, 62%) !important; padding: 0 !important; order: calc(1 + var(--apol-pdp-gallery-right, 0)); }
  .flex-container-columns.pdp-stage > .pdp-right {
    width: calc(97% - var(--apol-pdp-gallery-col-w, 62%)) !important; padding: 0 !important; order: calc(2 - var(--apol-pdp-gallery-right, 0));
    position: var(--apol-pdp-buybox-sticky, sticky); top: calc(var(--apol-header-height, 78px) + 1rem); align-self: flex-start;
  }
  /* Content width defaults to the gallery column width (aligned under the gallery). App
     Designer breaks it out to full width via --apol-pdp-content-w:100% (style query below).
     Driving breakout as a style query - rather than var() straight inside width: - means
     ONLY the exact value 100% breaks out. Any stray/blank/legacy value (notably a saved
     'none', which as `width:none` is an invalid declaration and made the flex item collapse
     to its content width) now simply keeps the default column width instead of collapsing. */
  .flex-container-columns.pdp-stage > .pdp-content { width: var(--apol-pdp-gallery-col-w, 62%) !important; padding: 0 !important; order: 3; margin-top: var(--apol-vspace-md, 3rem); }
  @container style(--apol-pdp-content-w: 100%) {
    .flex-container-columns.pdp-stage > .pdp-content { width: 100% !important; }
    /* Belt-and-braces with the App Designer mutual-exclusion: if full-width and a sticky
       buybox are ever both set (e.g. stale data), drop the buybox out of sticky so it can't
       scroll down over the now full-width content row below it. */
    .flex-container-columns.pdp-stage > .pdp-right { position: static !important; }
  }
  .pdp-dots { display: none; }

  .pdp-stage .carousel.pdp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: static; }
  .pdp-stage .carousel.pdp-gallery .gallery-cell,
  .pdp-stage .carousel.pdp-gallery .inner-cell {
    position: static !important; float: none !important; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0;
  }
  .pdp-stage .carousel.pdp-gallery .gallery-cell:last-child:nth-child(odd),
  .pdp-stage .carousel.pdp-gallery .inner-cell:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .pdp-stage .carousel.pdp-gallery .gallery-cell > a,
  .pdp-stage .carousel.pdp-gallery .gallery-cell picture { display: block; width: 100%; height: 100%; }
  .pdp-stage .carousel.pdp-gallery img,
  .pdp-stage .carousel.pdp-gallery .carousel-cell-image {
    position: static !important; width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0;
  }
  /* single-image handling is unified in the "SINGLE-IMAGE product" block after
     the herogrid section (it must beat herogrid, which loads later) */
}

/* ---- MOBILE (<= 1000px) -------------------------------------------------- */
@media only screen and (max-width: 1000px) {

  .flex-container-columns.pdp-stage { display: flex !important; flex-direction: column; margin: 0.25rem 0 0; }
  .flex-container-columns.pdp-stage > * { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .flex-container-columns.pdp-stage > .pdp-gallery-col { order: 1; }
  .flex-container-columns.pdp-stage > .pdp-right { order: 2; position: static; }
  .flex-container-columns.pdp-stage > .pdp-content { order: 3; margin-top: var(--apol-vspace-md, 3rem); }
  .pdp-bottom-row { margin-top: var(--apol-vspace-md, 3rem); }

  .pdp-stage .carousel.pdp-gallery {
    display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; position: static;
  }
  .pdp-stage .carousel.pdp-gallery::-webkit-scrollbar { display: none; }
  .pdp-stage .carousel.pdp-gallery .gallery-cell,
  .pdp-stage .carousel.pdp-gallery .inner-cell {
    position: static !important; float: none !important; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0;
  }
  .pdp-stage .carousel.pdp-gallery .gallery-cell > a,
  .pdp-stage .carousel.pdp-gallery .gallery-cell picture { display: block; width: 100%; height: 100%; }
  .pdp-stage .carousel.pdp-gallery img,
  .pdp-stage .carousel.pdp-gallery .carousel-cell-image {
    position: static !important; width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0;
  }

  .pdp-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 0; }
  .pdp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--apol-color-border, #e2e2e2); }
  .pdp-dot.is-on { background: var(--apol-color-primary, #0099cc); }
}

#loading_animation { display: none; }
.data_grid_card_was_save { display: block; font-size: 14px; margin-top: -10px; }
.was_label,
.was_sep { color: var(--apol-color-muted); }
.save_label { color: #e74c3c; font-weight: bold; }
.data_grid_items_all_left .fa-bars-filter,
.data_grid_items_all_left .fa-trash-can-xmark { vertical-align: 0; }
.apol-inline-block { display: inline-block; }
.smaller_h1_text { font-size: 2.0em; }
.larger_h6_text { font-size: 1.2em; text-transform: capitalize; letter-spacing:0.0em; font-weight: 200; margin: 10px 0px 10px 0px; }
.botTrackField { position: absolute; left: -10000px; }
.nochange_link:link { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link:visited { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link:hover { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link:active { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link:focus, active { outline: none; }
.nochange_link_cards:link { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link_cards:visited { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link_cards:hover { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link_cards:active { color: var(--apol-color-heading); text-decoration: none; }
.nochange_link_cards:focus, active { outline: none; }
.breadcrumb_productpage { display: flex; flex-wrap: wrap; padding: 0.0em 0.0em 0.0em 0.15em; margin-bottom: 0.6em; margin-top: -0.5em; list-style: none; background-color: rgba(0,0,0,0.0); border-radius: 0.25em; font-size: 0.85em; display: flex; line-height: auto; z-index:99; color:rgba(0,0,0,0.5); }
.breadcrumb_productpage a:link { color: #000; }
.breadcrumb_productpage a:visited { color: #000; }
.breadcrumb_productpage a:hover { color: #000; text-decoration: underline; }
.breadcrumb_productpage a:active { color: #000; }
.grey_background { background: #fff !Important; }
/* App Designer: category/listing page background. The listing page paints an
   opaque .grey_background fill (#fff !important, above) on .main_content_inner,
   so the global "Page background" (body's --apol-color-background) never shows
   on a category page. This gives that page its OWN control. Compound selector
   (0,2,0) + !important beats the .grey_background (0,1,0) + !important above and
   the mobile duplicate at ~line 3066; #fff fallback keeps untouched sites
   pixel-identical until the control is set. */
.main_content_inner.grey_background { background: var(--apol-listing-page-bg, #fff) !Important; }
.small_select { width: auto; padding:15px 40px 15px 15px; margin-bottom: 0.5em; background-color: rgba(256,256,256,1.0); -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; background-image: url('chevron-down.svg'); background-position: right 14px center; background-repeat: no-repeat; background-size: 10px 10px; outline: none; font-size: 1.0em !important; background-color: rgba(256,256,256,1.0); margin-bottom:2px; margin-right:2px; border-radius: 8px; }
.small_select:focus { font-size: 1.0em !important; background-color: rgba(255,255,255,1.0); margin-bottom:2px; border-radius: 8px; }
.input-icons i { position: absolute; }
.input-icons fa { position: absolute; }
.input-icons > i,  
.input-icons > .icon { display: none !important; }
.input-icons { font-size: 1.1em; color:var(--apol-color-heading); }
.b-contain *,
.b-contain *::before,
.b-contain *::after { box-sizing: content-box !important; }
.b-contain input { position: absolute; z-index: -1; opacity: 0; }
.b-contain span { line-height: 1.5; font-size: 1rem; font-family: inherit; }
.b-contain { display: table; position: relative; padding-left: 2.0rem; cursor: pointer; margin-bottom: 0.9rem; }
.b-contain-inline-fix { display: inline-block !Important; }
.b-contain input[type="checkbox"] ~ .b-input { position: absolute; top: 5px; left: 2px; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 0rem; }
.b-contain input[type="radio"] ~ .b-input { position: absolute; top: 5px; left: 2px; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 3rem; }
.b-contain input[type="checkbox"] ~ .b-input::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 0.3rem; height: 0.6rem; border: solid #ffffff; border-width: 0 2px 2px 0; transition: background 250ms; transform: rotate(45deg); }
.b-contain2 input[type="checkbox"] ~ .b-input::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 0.3rem; height: 0.6rem; border: solid #ffffff; border-width: 0 2px 2px 0; transition: background 250ms; transform: rotate(45deg); }
.b-contain input[type="radio"] ~ .b-input::after { content: ""; position: absolute; display: none; left: 4px; top: 4px; width: 0.75rem; height: 0.75rem; border-radius: 3rem; background: #ffffff; transition: background 250ms; }
.b-contain input[type="checkbox"]:disabled ~ .b-input::after { border-color: #ffffff; }
.b-contain input:checked ~ .b-input::after { display: block; }
.b-contain:hover input[type="checkbox"]:not([disabled]) ~ .b-input,
.b-contain input[type="checkbox"]:focus ~ .b-input { background: #e2e8f0; border-color: #64748b; }
.b-contain:hover input[type="radio"]:not([disabled]) ~ .b-input,
.b-contain input[type="radio"]:focus ~ .b-input { background: #e2e8f0; border-color: #64748b; }
.b-contain input:focus ~ .b-input { box-shadow: 0 0 0 2px #60a5fa; }
.b-contain input[type="checkbox"]:checked ~ .b-input { background: var(--apol-color-primary); border-color: var(--apol-color-primary); }
.b-contain input[type="radio"]:checked ~ .b-input { background: var(--apol-color-primary); border-color: var(--apol-color-primary); }
.b-contain input[type="checkbox"]:disabled ~ .b-input,
.b-contain input[type="radio"]:disabled ~ .b-input { opacity: 0.5; cursor: not-allowed; }
.b-contain input[type="radio"]:disabled ~ .b-input::after { background: #ffffff; }
.b-contain:hover input[type="checkbox"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="checkbox"]:checked:focus ~ .b-input { background: var(--apol-color-primary); border-color: var(--apol-color-primary); }
.b-contain:hover input[type="radio"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="radio"]:checked:focus ~ .b-input { background: var(--apol-color-primary); border-color: var(--apol-color-primary); }
.b-contain-label-text-custom { position: relative; top: -0.25rem; }
.Button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: var(--apol-button-padding-y) var(--apol-button-padding-x); min-height: 54px; margin: 0px 1px 6px 1px; font-family: var(--apol-font-body), "Font Awesome 7 Pro", Georgia, sans-serif !Important; font-size: var(--apol-button-font-size, 1rem); font-weight: var(--apol-button-font-weight); text-transform: none; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; border: 0; border-radius: var(--apol-button-corner); outline: 0; }
.Button:hover, .btn-secondary:focus { background-color: color-mix(in srgb, var(--btn-c) 82%, #000); border-color: color-mix(in srgb, var(--btn-c) 82%, #000); border-radius: var(--apol-button-corner); text-decoration: var(--apol-button-underline-hover, none); }
.table_responsive { border: 1px solid #e0e0e0; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; }
.table_responsive tr { background-color: #fff; border: 1px solid #e0e0e0; padding: 15px; }
.table_responsive th,
.table_responsive td { padding: 15px; text-align: center; font-size: .95em; }
.table_responsive th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }
.table_responsive_mobile { border: 1px solid #e0e0e0; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; }
.table_responsive_mobile tr { background-color: #fff; border: 1px solid #e0e0e0; padding: 15px; }
.table_responsive_mobile th,
.table_responsive_mobile td { padding: 15px; text-align: left; font-size: .95em; }
.table_responsive_mobile th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }
.table_responsive_mobile { border: 0; }
.table_responsive_mobile thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.table_responsive_mobile tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
.table_responsive_mobile td { border-bottom: 1px solid #ddd; display: block; font-size: .95em; text-align: left; }
.table_responsive_mobile td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; font-size: .95em; }
.table_responsive_mobile td:last-child { border-bottom: 0; }
.pagination { display:block; margin: 0 0%; border-top: 0.05em solid rgba(0,0,0,0.2); border-bottom: 0.05em solid rgba(0,0,0,0.2); }
.pagination_container { display: flex; align-items: center; justify-content: center; text-align:center; }
.pagination_left { width: 25%; padding: 10px 1% 10px 0%; border-right: 0.05em solid rgba(0,0,0,0.2); color:#ccc; }
.pagination_middle { width: 50%; padding: 10px 1% 10px 0%; }
.pagination_right { width: 25%; padding: 10px 1% 10px 0%; border-left: 0.05em solid rgba(0,0,0,0.2); }
.pagination_dropdown { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; font-size: 1.0em; font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important; color: #333; width: auto; box-sizing: border-box; font-weight:100; padding: 15px 15px 15px 15px; border: 1px solid #e0e0e0; outline: none; height:54px; }
.card:hover .larger_h6_text { color: var(--apol-color-primary); }
.spec_icon_span { width: 100%; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: left; justify-content: left; padding: 20px 0px; font-size: 0.90em; font-weight: normal; }
.spec_icon_span_fontawesome { width: 100%; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: left; justify-content: left; padding: 20px 0px; font-size: 0.90em; margin: 0px; font-weight: normal; }
.spec_icon_span_fontawesome svg { font-size: 1.375em; color: var(--apol-color-primary); }
.vat_price_ordering { font-size: 0.875em; color: rgba(0,0,0,0.7); }
.ordering_page_stars { position: relative; width: 100%; display: block; }
.ordering_page_price { position: relative; width: 100%; display: block; margin: 10px 0px -10px 0px; font-weight: bold; font-size: 1.4em; }
.ordering_page_productref { position: relative; width: 100%; display: block; font-size: 0.85em; margin-top: 2px; }
.card_booking:hover .larger_h6_text { color: var(--apol-color-primary); }
.card_donation:hover .larger_h6_text { color: var(--apol-color-primary); }
.sale_price_text { color:var(--apol-color-accent); font-size: 0.7em; }
.sold_ex_vat_message { color:green; font-size: 0.7em; padding: 0px 0px; display: none; }
.card_ordering:hover .larger_h6_text { color: var(--apol-color-primary); }
.card_ordering_related:hover .larger_h6_text { color: var(--apol-color-primary); }
.no-results { display:none; position: relative; top:120px; height: 0px; width:100%; text-align: center; font-size: 1em; min-height: 400px; }
.card_event:hover .larger_h6_text { color: var(--apol-color-primary); }
.card_location:hover .larger_h6_text { color: var(--apol-color-primary); }
.corner-ribbon { width: 200px; background: #e43; position: inherit; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); z-index: 99; }
.corner-ribbon.sticky { position: fixed; }
.corner-ribbon.shadow { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
.corner-ribbon.top-left { top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.corner-ribbon.top-right { top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.corner-ribbon.bottom-left { top: auto; bottom: 25px; left: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.corner-ribbon.bottom-right { top: auto; right: -50px; bottom: 25px; left: auto; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.corner-ribbon.white { background: #f0f0f0; color: #555; }
.corner-ribbon.whitetrans { background: rgba(255, 255, 255, 0.7); color: #555; }
.corner-ribbon.black { background: #333; }
.corner-ribbon.blacktrans { background: rgba(0, 0, 0, 0.7); }
.corner-ribbon.grey { background: #999; }
.corner-ribbon.darkgrey { background: #333; }
.corner-ribbon.blue { background: #39d; }
.corner-ribbon.darkblue { background: rgba(31, 65, 134, 1.0); }
.corner-ribbon.green { background: #2c7; }
.corner-ribbon.turquoise { background: #1b9; }
.corner-ribbon.purple { background: #95b; }
.corner-ribbon.red { background: #e43; }
.corner-ribbon.orange { background: #e82; }
.corner-ribbon.yellow { background: #ec0; }
.corner-ribbon.brown { background: #4D2F00; }
.corner-ribbon-product { width: auto; background: #e43; position: absolute; top: 0; left: 0px; padding: 0px 15px; text-align: left; line-height: 24px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(0deg); -webkit-transform: rotate(0deg); z-index: 99; font-size: 0.75em; text-transform: uppercase; font-weight: 400; overflow: hidden; margin:3% 0% 0% 3%; }
.corner-ribbon-product.shadow { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
.corner-ribbon-product.top-right { top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.corner-ribbon-product.white { background: #f0f0f0; color: #555; }
.corner-ribbon-product.whitetrans { background: rgba(255, 255, 255, 0.7); color: #555; }
.corner-ribbon-product.black { background: #333; }
.corner-ribbon-product.blacktrans { background: rgba(0, 0, 0, 0.7); }
.corner-ribbon-product.grey { background: #999; }
.corner-ribbon-product.darkgrey { background: #333; }
.corner-ribbon-product.blue { background: #39d; }
.corner-ribbon-product.darkblue { background: rgba(31, 65, 134, 1.0); }
.corner-ribbon-product.green { background: #2c7; }
.corner-ribbon-product.turquoise { background: #1b9; }
.corner-ribbon-product.purple { background: #95b; }
.corner-ribbon-product.red { background: #e43; }
.corner-ribbon-product.orange { background: #e82; }
.corner-ribbon-product.yellow { background: #ec0; }
.corner-ribbon-product.brown { background: #4D2F00; }
.apollyoncredit a:link { color: !Important; }
.apollyoncredit_comp_details { font-size: 0.75em; position: absolute; bottom: 0px; left: 0px; z-index: 2; }
.input-icons { position: relative; }
.input-icons { position: relative; }
.input-icons { position: relative; }
.loading_animation_background_HIDE { margin: 0; padding: 0; box-sizing: border-box; height: 100vh; width: 100%; background-color: var(--apol-color-heading); display:none; position: fixed; top:0px; left:0px; z-index:100000; opacity: 0.8; }
.loading_animation_background { margin: 0; padding: 0; box-sizing: border-box; height: 100vh; width: 100%; background-color: var(--apol-color-heading); display:block; position: fixed; top:0px; left:0px; z-index:100000; opacity: 0.8; }
#loading_animation_holder { height: 90vh; display: flex; justify-content: center; align-items: center; z-index:100001; }
.spinner-box { width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; background-color: transparent; }
.circle-border { width: 150px; height: 150px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: rgba(0,0,0,0.0); background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%); animation: spin .8s linear 0s infinite; }
.circle-core { width: 100%; height: 100%; background-color: var(--apol-color-heading); border-radius: 50%; }
.loading_text { position: absolute; width:100%; justify-content: center; align-items: center; color:#fff; height: 100vh; display: flex; justify-content: center; align-items: center; z-index:1; font-size:1.3em; font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important; }
.main_page_title_area { width: calc(100% + 0%); position: relative; margin-top: 40px; margin-bottom: -20px; min-height: 0px; }
.main_page_title_area_forms { width: calc(100% + 0%); position: relative; margin-top: 30px; margin-bottom:20px; min-height: 0px; }
.main_page_title_area_tables { width: calc(100% + 0%); position: relative; margin-top: 30px; margin-bottom:40px; min-height: 0px; }
.Popup_window_close { position: absolute; display: block; top: 30px; right: 0px; }
.Popup_window_close_html { position: relative; display: inline-block; top: 20px; right: 54px; }
.roundpoint a { padding: 11px 15px 11px 23px; text-align: center; }
.roundpoint a .fa { font-size: 1.0625em; }
em.roundpoint { position: relative; top: -9px; width: auto; height: auto; display: inline-block; right: auto; left: 0px; background-color: transparent; font-size: 0.75em; text-align: center; font-style: normal; font-weight: normal; line-height: 10px; color: var(--apol-color-heading); border-bottom: solid var(--apol-color-heading) 0px; }
.roundpoint>a>.mobiletext { display: none; }
.backtocat_positon { position: absolute; right: 5%; top: 20px; z-index: 0; font-size: 0.8em; font-weight: normal; display:none; }
.data_grid_items_all_left { position:relative; float: none; width: fit-content; margin: 10px 0% -25px 0%; }
.data_grid_items_all_right { position:relative; float: none; width: 100%; margin: 17px 0% 0% 0%; }
.data_grid_items_all_left_full { position:relative; float: none; width: fit-content; margin: 0%; padding: 0px; background-color: rgba(0,0,0,.0); }
.data_grid_items_all_right_full { position:relative; float: none; width: 100%; margin: 0px 0% 0% 0%; }
.data_grid_items_all_left_full_mapcal { position:relative; float: none; width: fit-content%; margin: 21px 0% -20px 0%; padding: 0px 0px 0px 0px; background-color: rgba(0,0,0,.0); }
.data_grid_items_all_right_full_mapcal { position:relative; float: none; width: 100%; margin: 0px 0% 0% 0%; }
.data_grid_card_holder { display: flex; margin: 0 0px 50px 0px; flex-flow: row wrap; background-color:rgba(256,256,256,0.0); min-height: 400px; margin: 6px -10px 0.0em -10px; }
.data_grid_card { background:rgba(256,256,256,0.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.0em rgba(0,0,0,0.0); margin: 0em 10px 20px 10px; width: calc(33.333333% - 20px); overflow:hidden; }
.data_grid_card:hover { background:rbga(0,0,0,0.0); -webkit-box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.0); }
.data_grid_card:hover .larger_h6_text { color: var(--apol-color-primary); }
.data_grid_card_product_name { width:100%; }
.data_grid_card_content { position: relative; padding: 10px 0% calc(10px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 0px; }
.data_grid_card_stars_holder { position: relative; margin: -10px 0px -16px 0px; width: 100%; display: none; font-size: 13px; }
.data_grid_card_stars { font-size: 13px; }
.data_grid_card_stars_star { color: #FFDF14; display: none; }
.data_grid_card_description { position: relative; margin: -5px 0px 0px 0px; width: 100%; display: block; font-size:1em; }
.data_grid_card_price { position: relative; margin: 0px 0px 0px 0px; width: 100%; display: block; right: 0px; top: 0px; text-align:left; font-size: 110% !Important; font-weight: 600 !Important; }
.data_grid_card_regular_price { font-weight: bold !Important; }
.data_grid_filter_button { display:block; position:relative; }
.data_grid_toggle_button_hide { display:block; }
#data_grid_toggle_button { display:block; padding: 16px 16px; margin:0px -16px; left:0px; z-index:0; position: relative; }
#data_grid_toggle_panel { display: block; position:relative; text-align:left; margin-bottom: 0px; }
.data_grid_card_image,
.data_grid_card_image_small,
.data_grid_card_image_large,
.data_grid_card_image_wide { position: relative; width: 100%; overflow: hidden; border-radius: 0px; aspect-ratio: 16 / 9; background:#F0F0F0; }
.data_grid_card_image_small { aspect-ratio: 4 / 3; }
.data_grid_card_image_large { aspect-ratio: 16 / 9; }
.data_grid_card_image_wide { aspect-ratio: 21 / 9; }
.data_grid_card_image img,
.data_grid_card_image_small img,
.data_grid_card_image_large img,
.data_grid_card_image_wide img,
.responsive_image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* apolGrid: fill the holder so its aspect-ratio reserves the image box before
   the lazy image loads - keeps the grey placeholder visible and stops product
   cards changing height on load (the Show-more row jump). Scoped to normal +
   small grid cards; _wide (list) and _large keep their own img rules below. */
.data_grid_card_image img,
.data_grid_card_image_small img { position: absolute; inset: 0; }
.data_grid_card_image iframe,
.data_grid_card_image_small iframe,
.data_grid_card_image_large iframe,
.data_grid_card_image_wide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; border-radius: inherit; }
.data_grid_card_image,
.data_grid_card_image_small,
.data_grid_card_image_wide { aspect-ratio: var(--ar, 16 / 9); }
.data_grid_card_image iframe { width: 100%; padding: 10%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 280px; }
.data_grid_no-results { position: relative; width: 100%; height:100%; line-height:3em; display: block; text-align:center; background-color: transparent; font-size:18px; font-weight:100; margin-top:21px; }
.data_grid_popup_options { display:none; max-width:100%; min-height:300px; }
.data_grid_popup_options_closebutton { display: block; position: absolute; top: 0px; left: 0%; right: 0%; border-bottom: solid 1px rgba(0,0,0,0.1); width: auto; height:90px; margin: 0px 0px 20px 0px !Important; }
.data_grid_card_dateorder_hidden { display: none; }
.filter_wrapper { display: var(--apol-listing-filter-hide, block); padding: 0px 0px 10px 0px; }
.filter_wrapper_searchpage { display: var(--apol-listing-filter-hide, block); padding: 15px 0px 10px 0px; }
.filter_wrapper_full { display: var(--apol-listing-filter-hide, block); padding: 0px 0px 10px 0px; width: 100%; }
.sort_wrapper { display:block; padding: 0px 0px 0px 0px; margin-left: -2px; }
.search_wrapper { display:block; padding: 40px 0px 0px 0px; margin-left: -2px; }
.pages_wrapper { display:block; padding: 0px 0px 0px 0px; margin-left: -2px; }
.reset_wrapper { display:block; padding: 20px 0px 0px 0px; }
.reset_wrapper_full { display:inline-block; padding: 20px 0px 0px 5px; }
.item_filters_hidden { display:none; }
.pagination-label-holder { display: block; position: absolute; right:  5px; top: -23px; font-size: 0.90em; font-weight: bold; }
.pagination-label-mobile-holder { display: block; position: absolute; font-size: 0.9em; left: 36px; margin-top: 0px; top: 30px; font-weight: bold; }
.pagination-label::before { content: "Items: "; font-weight: bold; margin-right: 4px; color: #af0c0c; }
.pagination_holder { display: flex; padding-right: 0; list-style: none; width:100%; justify-content: flex-end; margin-top: 40px; }
.pagination { display: inline-flex; padding-left: 0; list-style: none; width: 100%; border: 0; }
.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; }
.pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }
.pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }
.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }
.pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }
.sign_in_price_link_viewproduct { width: 48%; cursor:pointer; display: inline-block; z-index: 0; bottom: 0px; left: 0px; position:  relative; font-weight: 100; background: rgba(50,50,50,1.0); padding: 15px 2px; text-align: center; text-transform: uppercase; font-size: 13px; line-height: 0.8rem; margin: 30px 2% 0px 0px; white-space: nowrap; }
.sign_in_price_link_viewproduct:hover { background: rgba(0,153,204,1.0); }
.sign_in_price_link_viewproduct a:link { color: #fff !Important; text-decoration: none; }
.sign_in_price_link_viewproduct a:visited { color: #fff !Important; text-decoration: none; }
.sign_in_price_link_viewproduct a:hover { color: #fff !Important; text-decoration: none; }
.sign_in_price_link_viewproduct a:active { color: #fff !Important; text-decoration: none; }
.sign_in_price_link_viewproduct a:focus, active { outline: none; }
.data_grid_card_holder_wide { display: flex; margin: 0 0px 0px 0px; flex-flow: row wrap; background-color:rgba(256,256,256,0.0); height: auto; margin: 0px 0px 0.0em 0px; }
.data_grid_card_wide { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.05em rgba(0,0,0,0.2); padding:0px 0 0px 0; width: calc(100% - 0px); overflow:  hidden; position: relative; height: auto; }
.data_grid_card_wide:hover { background:#fff; -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); }
.data_grid_card_wide:hover .larger_h6_text { color: var(--apol-color-primary); }
.data_grid_card_content_wide { position: relative; padding: 10px 0% 20px 0px; display: inline-block; width: calc(100% - 270px); height: auto; float:left; top: 0px; overflow: hidden; }
.data_grid_card_image_wide { width: 250px; border-radius:0px 0px 0px 0px; position: relative; display:inline-block; overflow: hidden; height:200px; background: transparent; float: left; border: 0px solid #ddd; margin:20px 20px 20px 0px; }
.data_grid_card_image_wide img { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: relative; }
.larger_h6_text_wide { font-size: 1.2em; text-transform: capitalize; letter-spacing:0.0em; font-weight: 200; margin: 10px 0px 10px 0px; }
.data_grid_card_image_wide iframe { width: 250px; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; }
.data_grid_card_holder_small { display: flex; margin: 0 0px 50px 0px; flex-flow: row wrap; background-color:rgba(256,256,256,0.0); min-height: 400px; margin: 6px -10px 0.0em -10px; }
.data_grid_card_small { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 2em 10px; width: calc(25% - 20px); overflow:hidden; }
.data_grid_card_small:hover { background:#fff; -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); }
.data_grid_card_small:hover .larger_h6_text { color: var(--apol-color-primary); }
.data_grid_card_small_related { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 1em 10px; width: calc(25% - 20px); overflow:hidden; }
.data_grid_card_small_related:hover { background:#fff; -webkit-box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 27px -8px rgba(0, 0, 0, 0.75); }
/* Related items (#card_container) render inside the narrow PDP column (tab / drawer /
   accordion). The listing-grid 25% card width squashes them to one word per line there.
   Lay the holder out as a responsive grid so cards keep a sensible width and wrap to
   fewer columns in the narrow column (and fill out nicely when the tabs are broken out
   to full width - see --apol-pdp-content-w). Scoped to #card_container so category
   listings are untouched. */
#card_container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 24px; min-height: 0 !important; margin: 0 !important; }
#card_container .data_grid_card_small_related { width: auto !important; margin: 0 !important; }
/* Mobile: two columns, matching the main product-card grid (auto-fit would collapse
   to one column on a narrow phone). */
@media (max-width: 640px) { #card_container { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; } }
/* Slide-out drawer: the panel is only ~480px, so auto-fit minmax(240px) collapses to a
   single full-width card. Force a couple per row here (matching the mobile grid) so the
   related cards read as compact product cards, same styling as the tabs layout - just
   narrower. Scoped to .pdp-drawer so the tabs / full-width layouts keep their auto-fit. */
.pdp-drawer #card_container { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
/* Related items: drop the description on the card in BOTH layouts (tabs + drawer). For a
   related-products rail the name + price + button is enough, and hiding it keeps the
   narrower cards even in height. !important beats the line-clamp display:-webkit-box on
   .data_grid_card_description_small. Scoped to #card_container so category listings keep
   their descriptions. */
#card_container .data_grid_card_description_small { display: none !important; }
/* Equal height + button pinned to the bottom so the buttons line up across the row, like
   the listing page. The grid already equalises card height; flex-column + content:flex-1
   drops the button to the bottom (the listing does this via resources.min.js, which does
   NOT include related cards). Padding/weight/colour match the main card's
   .viewproduct_button_link so it's the SAME button height/weight, not a shorter/lighter one. */
/* The related card's markup is card > a.nochange_link > [image, content, button]
   (the a is the card's ONLY child), so the flex column must run THROUGH the a:
   card is a flex column, the a fills it (flex:1) as a flex column, content fills,
   button drops to the bottom. With grid-auto-rows:1fr equalising card heights, all
   buttons line up across the row - same as the listing page. */
#card_container .data_grid_card_small_related { display: flex; flex-direction: column; }
#card_container .data_grid_card_small_related > a { flex: 1 1 auto; display: flex; flex-direction: column; }
#card_container .data_grid_card_small_related .data_grid_card_content_small_related { flex: 1 1 auto; }
#card_container .viewproduct_button_link {
  margin-top: auto !important;
  padding: var(--apol-listing-btn-py, 12px) var(--apol-listing-btn-px, 18px) !important;
  text-align: center;
  line-height: 1.25;
  font-weight: var(--apol-button-font-weight, 600) !important;
  color: var(--apol-button-text, #fff) !important;
}
.data_grid_card_small_related:hover .larger_h6_text { color: var(--apol-color-primary); }
.data_grid_card_content_small { position: relative; padding: 10px 0% calc(10px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 160px; }
.data_grid_card_content_small_related { position: relative; padding: 20px 0% 20px 0%; display: block; min-height: 160px; }
.data_grid_card_stars_holder_small { position: relative; margin: 0px 0px -20px 0px; width: 100%; display: none; font-size: 13px; }
.data_grid_card_stars_small { font-size: 13px; }
.data_grid_card_stars_star_small { color: #FFDF14; display: none; }
.data_grid_card_description_small { position: relative; margin: -5px 0px 0px 0px; width: 100%; display: block; }
.data_grid_card_price_small { position: relative; margin: 0px 0px 0px 0px; width: 100%; display: block; }
.data_grid_card_regular_price_small { font-weight: bold !Important; }
.data_grid_card_image_small iframe { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 220px; }
.data_grid_card_holder_large { display: flex; margin: 0 0px 50px 0px; flex-flow: row wrap; background-color:rgba(256,256,256,0.0); min-height: 400px; margin: 6px -10px 0.0em -10px; }
.data_grid_card_large { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.0em rgba(0,0,0,0.2); margin: 0em 10px 1em 10px; width: calc(50% - 20px); overflow:hidden; }
.data_grid_card_large:hover { background:#fff; -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); }
.data_grid_card_large:hover .larger_h6_text { color: var(--apol-color-primary); }
.data_grid_card_content_large { position: relative; padding: 10px 0% calc(10px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 160px; }
.data_grid_card_stars_holder_large { position: relative; margin: 0px 0px -20px 0px; width: 100%; display: none; font-size: 13px; }
.data_grid_card_stars_large { font-size: 13px; }
.data_grid_card_stars_star_large { color: #FFDF14; display: none; }
.data_grid_card_description_large { position: relative; margin: -5px 0px 0px 0px; width: 100%; display: block; }
.data_grid_card_price_large { position: relative; margin: 0px 0px 0px 0px; width: 100%; display: block; }
.data_grid_card_regular_price_large { font-weight: bold !Important; }
.data_grid_filter_button_large { display:block; }
.data_grid_toggle_button_hide_large { display:block; }
.data_grid_card_image_large { width: 100%; border-radius:0px 0px 0px 0px; position: relative; display:block; overflow: hidden; height: 600px; background: #fff; }
.data_grid_card_image_large img { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; max-height: 600px; }
.data_grid_card_image_large iframe { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 600px; }
.spec_container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.spec_icon { display: block; flex-grow: 0; min-width: 60px; position: relative; float: left; font-size: 26px; color: #1a1a1a; margin: 10px; text-align:center; }
.spec_icon_text { display: block; flex-grow: 0; width: auto; position: relative; float: left; margin: 0 5% 0 0; }
.spec_icon_title { display: block; height: auto; flex-grow: 0; width: 100%; font-size: 12px; color: var(--apol-color-muted); text-transform: uppercase; font-weight: 400; }
.spec_icon_details { display: block; height: auto; flex-grow: 0; width: 100%; font-size: 15px; color: #000; font-weight: bold; margin-top: -6px; line-height: 18px !Important; }
.spec_container_contact { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.spec_icon_contact { display: none; flex-grow: 0; min-width: 60px; position: relative; float: left; font-size: 26px; color: #1a1a1a; margin: 10px; text-align:center; }
.spec_icon_text_contact { display: block; flex-grow: 0; width: auto; position: relative; float: left; margin: 0 5% 0 0; }
.spec_icon_title_contact { display: block; height: auto; flex-grow: 0; width: 100%; font-size: 12px; color: var(--apol-color-muted); text-transform: uppercase; font-weight: 400; }
.spec_icon_details_contact { display: block; height: auto; flex-grow: 0; width: 100%; font-size: 1.5em; color: #000; font-weight: bold; margin-top: -4px; line-height: 18px !Important; }
.box_contact { height: auto; padding: 0px; background-color: #fff; }
.row_contact { display: flex; flex-wrap:wrap; }
.cell_contact { flex: 1 1 185px; min-height: 0px; background-color: #f2f2f2; border: 0rem solid #fff; padding: 1rem 1rem 1.6rem 1rem; }
.box { height: auto; padding: 0px; background-color: #fff; padding-top: 0px; }
.row { display: flex; flex-wrap:wrap; }
.cell { flex: 1 1 225px; min-height: 60px; background-color: rgba(256,256,256,0.0); border: 0.0625rem solid rgba(256,256,256,0.0); padding-bottom: 0.625rem; padding-top: 0.625rem; min-width: 200px; }
/* Spec section sub-headings (from the admin spec editor's named sections) */
.spec_section_title { width: 100%; font-size: 15px; font-weight: 700; color: #222; text-transform: uppercase; letter-spacing: .02em; margin: 22px 0 10px; }
.spec_section_title:first-child { margin-top: 0; }
/* In the (narrow) PDP drawer, pack spec items across the row and wrap only when
   they no longer fit, rather than one-per-line. */
.pdp-drawer__body .cell { flex: 1 1 160px; min-width: 140px; }

/* ===== Quick View modal (category page) ==================================== */
.data_grid_card[data-quickview] { position: relative; }
.apol-qv-btn {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: var(--apol-quickview-display, inline-flex); align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.95); color: #222;
  font-size: 12px; font-weight: 600; line-height: 1;
  border: 1px solid rgba(0,0,0,.12); box-shadow: 0 2px 8px rgba(0,0,0,.12);
  white-space: nowrap; transition: background .15s ease, box-shadow .15s ease;
}
.apol-qv-btn:hover, .apol-qv-btn:focus { background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); outline: none; }
.apol-qv-btn i { font-size: 13px; }

.apol-qv-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  z-index: 100000;
}
.apol-qv-scrim.is-open { opacity: 1; visibility: visible; }
.apol-qv-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(1160px, 95vw); height: min(780px, 92vh);
  background: #fff; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; z-index: 100001;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.apol-qv-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.apol-qv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid #ececec; flex: 0 0 auto;
}
.apol-qv-title { font-size: 15px; font-weight: 700; color: #222; }
.apol-qv-close {
  border: 0; background: transparent; cursor: pointer; font-size: 20px;
  color: #555; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.apol-qv-close:hover { background: #f2f2f2; color: #111; }
.apol-qv-body { position: relative; flex: 1 1 auto; min-height: 0; }
.apol-qv-frame { width: 100%; height: 100%; border: 0; display: block; }
.apol-qv-spinner {
  position: absolute; top: 50%; left: 50%; width: 36px; height: 36px;
  margin: -18px 0 0 -18px; border: 3px solid #e0e0e0;
  border-top-color: var(--apol-color-primary, #0077cc); border-radius: 50%;
  animation: apol-qv-spin .8s linear infinite;
  display: none; z-index: 3;
}
@keyframes apol-qv-spin { to { transform: rotate(360deg); } }
/* Loading state: an opaque cover over the iframe + the spinner, so the initial
   load and the add-to-basket reload 'blink' are hidden behind a clean screen. */
.apol-qv-modal.apol-qv-loading .apol-qv-body::after { content: ""; position: absolute; inset: 0; background: #fff; z-index: 2; }
.apol-qv-modal.apol-qv-loading .apol-qv-spinner { display: block; }
body.apol-qv-open { overflow: hidden; }

/* =========================================================================
   QUICK-VIEW MODE
   The category "Quick view" modal loads the REAL product page in its iframe
   with ?quickview=1; the renderer tags <body class="apol-qv-mode">. This block
   strips the page to a fixed gallery + buy box that ALWAYS looks the same,
   independent of the site's App Designer PDP settings (which live in
   style_additional.css and set the --apol-pdp-* tokens).
   apol.pdp.gallery.js reads the gallery mode/side off <html> at runtime, so we
   pin those tokens on <html> via html:has(body.apol-qv-mode) - it's in the head
   CSS, matched from first paint (the body class is server-rendered), so the
   gallery builds in the locked mode rather than the site's chosen one.
   ========================================================================= */
html:has(body.apol-qv-mode) {
  --apol-pdp-gallery-mode: mosaic !important;   /* simple grid + arrows, not stacked/none */
  --apol-pdp-gallery-right: 0 !important;       /* gallery always on the left */
  --apol-pdp-gallery-col-w: 50% !important;     /* fixed 50/50 */
  --apol-pdp-buybox-sticky: static !important;  /* no sticky buy box in the modal */
}

/* Hide all site chrome + the extra PDP content (accordion / lower / bottom /
   info cards / slide-out panels + their scrims). */
body.apol-qv-mode .page_background,
body.apol-qv-mode .header_top,
body.apol-qv-mode .logo_menu_container_background,
body.apol-qv-mode .logo_menu_container,
body.apol-qv-mode .menu_desktop,
body.apol-qv-mode .nav_scrim,
body.apol-qv-mode .header_main,
body.apol-qv-mode .header_sub,
body.apol-qv-mode .breadcrumb_holder,
body.apol-qv-mode .backtocat_positon,
body.apol-qv-mode .pdp-content,
body.apol-qv-mode .pdp-bottom-row,
body.apol-qv-mode .info-cards,
body.apol-qv-mode .pre_footer_a,
body.apol-qv-mode .pre_footer_b,
body.apol-qv-mode .footer_main,
body.apol-qv-mode .sidenav,
body.apol-qv-mode .sidenav-overlay,
body.apol-qv-mode .apol-search-scrim,
body.apol-qv-mode .autocomplete-overlay,
body.apol-qv-mode .pdp-drawer,
body.apol-qv-mode .pdp-drawer-scrim { display: none !important; }

/* Plain white panel, no site-shell spacing. */
body.apol-qv-mode { display: block !important; min-height: 0 !important; background: #fff !important; }
body.apol-qv-mode .main_content_outer { flex: none !important; }
body.apol-qv-mode .main_content_inner { padding: 16px 22px 26px !important; max-width: none !important; margin: 0 !important; }

/* No sticky buy box, and drop the App Designer content-spacing offset. */
body.apol-qv-mode .flex-container-columns.pdp-stage { margin: 0 !important; }
body.apol-qv-mode .flex-container-columns.pdp-stage > .pdp-right { position: static !important; top: auto !important; }

/* Belt & braces: if a mode modifier class was ever applied (token lock missed),
   force the gallery visible + on the left. */
body.apol-qv-mode .pdp-stage.pdp-stage--no-gallery > .pdp-gallery-col { display: block !important; }
body.apol-qv-mode .pdp-stage.pdp-stage--gallery-right > .pdp-gallery-col { order: 1 !important; }
body.apol-qv-mode .pdp-stage.pdp-stage--gallery-right > .pdp-right { order: 2 !important; }

/* Gallery: one large image in a horizontal snap rail (like the mobile layout),
   not the desktop mosaic grid - closest to the standalone quick view - with the
   prev/next arrows apol.pdp.gallery.js adds in mosaic mode. Applied at the
   desktop width the widened modal gives the iframe. */
@media only screen and (min-width: 1001px) {
  body.apol-qv-mode .pdp-stage .carousel.pdp-gallery {
    /* overflow-x:hidden (not auto): not user-scrollable, so a mouse wheel scrolls
       the page/modal as normal; the prev/next arrows still drive it via scrollTo. */
    display: flex !important; flex-direction: row; overflow-x: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; position: static; gap: 0;
  }
  body.apol-qv-mode .pdp-stage .carousel.pdp-gallery::-webkit-scrollbar { display: none; }
  body.apol-qv-mode .pdp-stage .carousel.pdp-gallery .gallery-cell,
  body.apol-qv-mode .pdp-stage .carousel.pdp-gallery .inner-cell {
    position: static !important; float: none !important; flex: 0 0 100% !important;
    width: 100% !important; scroll-snap-align: center; aspect-ratio: 3 / 4;
    overflow: hidden; border-radius: 0; grid-column: auto !important;
  }
}

/* Per-page content spacing (App Designer: Item Page & Listing panels).
   Applied to each page type's own content elements so the space lands BETWEEN
   the breadcrumb and the content (not above the breadcrumb), and doesn't depend
   on :has() resolving. Product page = gallery/buy-box stage; category = the
   title/filter/grid block. */
.flex-container-columns.pdp-stage { margin-top: var(--apol-item-content-mt, 50px) !important; }
.pdp-bottom-row { margin-bottom: var(--apol-item-content-mb, 0px); }
.main_page_title_area { margin-top: var(--apol-listing-content-mt, 50px); }
.data_grid_items_all_right { margin-bottom: var(--apol-listing-content-mb, 0px); }
/* Per-device override (App Designer device switch writes the "-m" token for
   tablet/mobile at <=980px). Default from Desktop via the nested fallback:
   var(--x-m, var(--x)) - so a breakpoint with no override inherits Desktop,
   and only the edited tier changes. Mirrors the nav font-size pattern (~1186).
   Editing in Mobile view no longer moves the Desktop base value. */
@media (max-width: 980px) {
  .flex-container-columns.pdp-stage { margin-top: var(--apol-item-content-mt-m, var(--apol-item-content-mt, 50px)) !important; }
  .pdp-bottom-row { margin-bottom: var(--apol-item-content-mb-m, var(--apol-item-content-mb, 0px)); }
  .main_page_title_area { margin-top: var(--apol-listing-content-mt-m, var(--apol-listing-content-mt, 50px)); }
  .data_grid_items_all_right { margin-bottom: var(--apol-listing-content-mb-m, var(--apol-listing-content-mb, 0px)); }
}

/* Decouple the ITEM and LISTING pages from the GLOBAL "Page margin - top" gutter,
   so their per-page "Space above content" token is the ONLY top-spacing lever.
   That global gutter lives on the breadcrumb's margin-bottom (~line 1081) - or,
   when the breadcrumb is hidden, on .main_content_inner padding-top (~line 1109) -
   and is ADDITIVE to the per-page token, so item-content-mt:0 still left the ~15px
   gutter above the gallery. Zero it on just these two page types (identified by
   their content markers .pdp-stage / .main_page_title_area). The token on
   .pdp-stage / .main_page_title_area margin-top then owns the gap outright:
   0 = snug under the breadcrumb/header, a set value pushes it down. Every OTHER
   page type keeps the global gutter untouched. (Mobile PDP has its own crumb rule
   at ~4374, aligned to 0 there too.) */
.breadcrumb_holder:has(~ .pdp-stage),
.breadcrumb_holder:has(~ .main_page_title_area) { margin-bottom: 0; }
@container style(--apol-breadcrumb-display: none) {
  .main_content_inner:has(.pdp-stage), .main_content_inner_rows:has(.pdp-stage),
  .main_content_inner:has(.main_page_title_area), .main_content_inner_rows:has(.main_page_title_area) { padding-top: 0; }
}
@media (max-width: 1000px) {
  /* Below the PDP's desktop breakpoint the iframe can't hold the 50/50, so go
     full-screen and let the product page fall to its own one-column layout. */
  .apol-qv-modal { width: 100vw; height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
  .apol-qv-modal.is-open { transform: none; }
}
.listings_tabs_mobile_panel { display: inline; }
.listings_tabs_mobile_tab { display: block; flex-grow: 0; flex-shrink: 1; flex-basis: auto; margin: 0px 0px; }
.listings_css_listings_tabs_wrapper { display: flex; flex-direction: column; align-items: left; margin: 0px 0px 0px 0px; border-bottom: 1px solid #ddd !Important; }
.listings_tabs { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.listings_tab { display: block !important; width: 100%; height: 100%; background-color: #fff; text-align: center; min-width: 100px; cursor: pointer; padding: 10px 0px; margin: 0px 0px; color: var(--apol-color-heading); border-top: 0px solid #ddd; border-left: 0px solid #ddd; border-right: 0px solid #ddd; font-weight: 600; font-size: 90%; text-transform: uppercase; }
.listings_panels { background: #fff; min-height: 0px; width: calc(100% - 4px); border-radius: 8px; overflow: hidden; padding: 10px 0px 0px 0px; border-top: 1px solid #ddd; margin-left: 2px; }
.listings_panel { display: none; animation: fadein 0.8s; }
.listings_radio { display: none; }
#one:checked ~ .listings_panels #one-panel,
#two:checked ~ .listings_panels #two-panel,
#three:checked ~ .listings_panels #three-panel,
#four:checked ~ .listings_panels #four-panel,
#five:checked ~ .listings_panels #five-panel,
#six:checked ~ .listings_panels #six-panel,
#seven:checked ~ .listings_panels #seven-panel,
#eight:checked ~ .listings_panels #eight-panel,
#nine:checked ~ .listings_panels #nine-panel,
#ten:checked ~ .listings_panels #ten-panel { display: block; }
#one:checked ~ .listings_tabs #one-tab,
#two:checked ~ .listings_tabs #two-tab,
#three:checked ~ .listings_tabs #three-tab,
#four:checked ~ .listings_tabs #four-tab,
#five:checked ~ .listings_tabs #five-tab,
#six:checked ~ .listings_tabs #six-tab,
#seven:checked ~ .listings_tabs #seven-tab,
#eight:checked ~ .listings_tabs #eight-tab, 
#nine:checked ~ .listings_tabs #nine-tab, 
#ten:checked ~ .listings_tabs #ten-tab { background: rgba (256,256,256,0.0); color: var(--apol-color-heading); border-bottom: 3px solid #ccc; padding-bottom: 5px; }
.content-area-main-description-halfwidth { display: inline; margin-top: 0px; margin-left: 1.5%; margin-right: -1.5%; }
.content-area-gallery-halfwidth { display: inline; padding:0px 1.5% 0px 1.5% !important; }
.content-area-main-description-fullwidth { display: none; }
.additonal-content-area1 { display: inline; margin: 0px 0 0px 0; }
.additonal-content-area3listings_tabs { display: inline; margin-top:20px; width: 103% ! Important; margin-left: 0%; }
.additonal-content-area2 { display: inline; }
.listings_tabs_plans { display: inline-block; position: relative; width: 100%; }
.listings_tabs_plans_mobile { display: none; }
.listings_hide { display: none !important; }
.review_holder_new { display: inline-block; width: 96%; height: auto; position: relative; margin: -20px 0% 20px 0%; border-bottom: 0px solid #ddd; }
.review_holder_item { display: inline-block; width: 100%; height: auto; border-bottom: solid var(--apol-color-surface) 8px; }
.quantitymore { display:none; margin-left:0px; }
.quantitymoreinput { font-size: 1.0em !Important; padding: 15px !important; min-width: 120px; max-width: 120px; }
.maxwidthinput { max-width: 300px; min-width:250px; }
.hide_collectionsearch { display: none; margin-top: 0px; margin-bottom: 0px; margin-left: -4px; }
.delivery_options { display: inline-flexbox; padding-top: 6px; margin-bottom: -6px; }
.b-contain { margin-bottom: 0rem; }
.storeoptions { display: inline-flexbox; width: 100%; margin-top: 0px; padding-bottom: 6px; margin-left: 2px; }
.search_collect_button { position: relative; width: 50px; top:1px; line-height: normal; z-index: 1; cursor: pointer; color: #000; background-color: var(--apol-color-surface); height: 52px; border: solid 0px; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; outline: none; font-size: 1.25em ! Important; font-family: 'Roboto Condensed', 'Font Awesome 7 Pro', Georgia, sans-serif ! Important; }
.input_container_search { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; }
.input_item_search { order: 0; }
.store_search_holder { display:block; width: 100%; padding: 20px 0px; border-bottom:solid 1px #ddd; border-top:solid 1px #ddd; }
.breadcrumb .crumb-sep,
.breadcrumb_productpage .crumb-sep { opacity: 0.4 !important; margin: 0 0.9ch; display: inline-block; font-weight: 400; }
.breadcrumb span:not(.crumb-sep),
.breadcrumb_productpage span:not(.crumb-sep) { color: #ddd !Important; }
.data_grid_card.has-desc-popover .data_grid_card_description { display: none !important; }
.data_grid_card .desc-popover p { margin: 0; }
.data_grid_card .desc-popover ul,
.data_grid_card .desc-popover ol { margin: 6px 0 0 18px; padding: 0; }
.data_grid_card .desc-popover li { margin: 2px 0; }
.carousel .gallery-cell img:not(.flickity-lazyloaded):not(.flickity-lazyerror) { visibility: hidden !important; }
.viewproduct_button_link { width: 100%; cursor: pointer; display: inline-block; z-index: 0; bottom: 0px; left: 0px; position: relative; font-weight: 100; background: rgba(50,50,50,1.0); margin:0px 0px 0px 0px; white-space: nowrap; color:#fff; text-align:center; }
.viewproduct_button_link:hover { background: rgba(0,153,204,1.0); }
.viewproduct_button_link a { color: #fff !important; text-decoration: none; display: block; width: 100%; padding: 15px 2px; text-align: center; text-transform: uppercase; font-size: 13px; line-height: 0.3rem !Important; }
.viewproduct_button_link a:hover,
.viewproduct_button_link a:visited,
.viewproduct_button_link a:active { color: #fff !important; text-decoration: none; }
.viewproduct_button_link a:focus { outline: none; }
.item_filters_hidden_descmain { display:none; }
.ordering_page_price .sale_price_text { display:block; margin-top:6px; font-size:16px; line-height:1.2; }
.ordering_page_price .sale_price_text .was_label { color:#444; font-weight:400; text-transform:uppercase; }
.ordering_page_price .sale_price_text .save_label { color:#c00; font-weight:700; text-transform:uppercase; }
.ordering_page_price .sale_price_text .was_sep { color:#999; }
.ordering_page_price { display: inline-block; margin-bottom: 14px; }
.content-area-main-description-halfwidth { padding-top: 0; }
.sold_ex_vat_message,
.sold_ex_vat_message a { margin: 0 !important; padding: 0 !important; }
.smaller_vat_text { font-size: 0.6em; }
.info-cards { display: none; flex-direction: column; gap: 14px; }
.info-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; text-decoration: none; color: #111827; transition: background 0.2s ease, box-shadow 0.2s ease; }
.info-card:hover { background: #f9fafb; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.info-card-icon { font-size: 22px; width: 28px; text-align: center; color: #6b7280; flex-shrink: 0; }
.info-card-text { flex: 1; }
.info-card-text strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.info-card-text span { font-size: 14px; color: #6b7280; }
.info-card-arrow { font-size: 22px; color: #9ca3af; flex-shrink: 0; }
@keyframes spin { from { transform: rotate(0); } to{ transform: rotate(359deg); }; }
@keyframes fadein { from {opacity: 1; } to {opacity: 1; }; }
@media only screen and (max-width : 1365px) {
  .content-area-gallery-halfwidth { display: inline; padding:0px !important; }
  .data_grid_items_all_left { position:relative; float: left; width: fit-content; margin: 19px 0% 0px 0%; }
  .data_grid_items_all_right { position:relative; float: left; width: 100%; margin: -2px 0% 0px 0%; }
  .data_grid_items_all_left_full { position:relative; float: left; width: fit-content; margin: 19px 0% 0px 0%; padding: 0px 0px 0px 0px; background-color: rgba(0,0,0,.0); }
  .data_grid_items_all_right_full { position:relative; float: left; width: 100%; margin: -2px 0% 0px 0%; }
  .data_grid_filter_button { display:block; margin-left: -1px; }
  #data_grid_toggle_panel { display: none; position:relative; text-align:left; margin-bottom: 10px; top:0px; }
  .data_grid_toggle_button_hide { display:inline-block; float:left; text-align:left; width:100%; margin-top:-2px; margin-left:-2px; z-index:0; position: relative; }
  .data_grid_popup_options { display:none; max-width:100%; min-height:300px; }
  .data_grid_popup_options_closebutton { display: block; position: relative; top: 0px; left: 0%; right: 0%; border-bottom: solid 1px rgba(0,0,0,0.1); width: 100%; height:50px; margin: 0px -10px 0px 0px !Important; }
  .datagrid_popup_mobile_close_button { cursor: pointer; position: absolute; top: -20px; right: 5px; }
  .Popup_window_close { top:20px; }
  .search_wrapper { display:block; padding: 0px 0px 0px 0px; margin-top: -30px; }
  .sort_wrapper { margin-left: 0px; }
  .search_wrapper { margin-left: 0px; margin-right: 0px; }
  .pages_wrapper { margin-left: 0px; }
  .pagination-label-holder { display: block; position: absolute; right: 5px; text-align: right; top: -23px; }
  .pagination-label-mobile-holder { display: block; position: absolute; font-size: 0.9em; left: 36px; margin-top: 0px; top: 24px; font-weight: bold; }
  .data_grid_card:hover { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); background:rbga(0,0,0,0.0); }
  .data_grid_card_wide:hover { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }
  .data_grid_card_small:hover { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }
  .data_grid_card_small_related:hover { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }
  .data_grid_card_large:hover { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }
  .listings_css_listings_tabs_wrapper { background-color: rgba(256,256,256,0.0); padding: 0; }
  .listings_tabs_mobile_tab { flex-grow: 1; flex-shrink: 1; flex-basis: auto; margin: 0px 0px 4px 0px; border-bottom: 1px solid #ccc; }
  .listings_panels { background: transparent; min-height: 0px; width: calc(100% -4px); border-radius: 8px; overflow: hidden; padding: 0px 0px 0px 0px; border-top: 0px solid #ddd; margin-left: 0px; padding: 0px; }
  .listings_tab { min-width: 100px; }
  .listings_tabs { padding: 0%; }
  .listings_tabs_plans { display: none; }
  .listings_tabs_plans_mobile { display: inline; overflow: hidden; }
  .box { height: auto; padding: 0px; background-color: rgba(256,256,256,0.0); padding-top: 0px; margin: -20px -19px -20px -21px; }
  .review_holder_new { display: inline-block; width: 100%; height: auto; position: relative; margin:-28px 0% 18px 0%; border-bottom: 0px solid #ddd; }
  .additonal-content-area1 { display: inline; margin: 0px 0 0px 0; }
  .cell { flex: 1 1 225px; min-height: 60px; background-color: rgba(256,256,256,0.0); border: 0.0625rem solid rgba(256,256,256,0.0); padding-bottom: 0.625rem; padding-top: 0.625rem; min-width: 200px; }
  .filter_wrapper_full { display:block; padding: 0px 0px 10px 5px; margin-top: -20px; }
  .filter_wrapper_searchpage { display:block; padding: 0px 0px 10px 5px; margin-top: 15px; }
  .filter_wrapper { display:block; padding: 0px 0px 10px 5px; margin-top: -20px; }
  .viewproduct_button_link { width: 100%; cursor: pointer; display: inline-block; z-index: 0; bottom: 0px; left: 0px; position: relative; font-weight: 100; background: rgba(50,50,50,1.0); margin:0px 0px 0px 0px; white-space: nowrap; }
  .viewproduct_button_link:hover { background: rgba(0,153,204,1.0); }
  .viewproduct_button_link a { color: #fff !important; text-decoration: none; display: block; width: 100%; padding: 15px 2px; text-align: center; text-transform: uppercase; font-size: 13px; line-height: 0.3rem !Important; }
  .viewproduct_button_link a:hover,
.viewproduct_button_link a:visited,
.viewproduct_button_link a:active { color: #fff !important; text-decoration: none; }
  .viewproduct_button_link a:focus { outline: none; }
}
@media only screen and (max-width : 1000px) {
  .table_responsive { border: 0; }
  .table_responsive thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .table_responsive tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
  .table_responsive td { border-bottom: 1px solid #ddd; display: block; font-size: .95em; text-align: right; }
  .table_responsive td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; font-size: .95em; }
  .table_responsive td:last-child { border-bottom: 0; }
  .spec_icon_span { font-size: 0.8em; padding: 10px 0px; }
  .spec_icon_span img { max-width: 50px; }
  .spec_icon_span_fontawesome { padding: 10px 0px; font-size: 0.8em; }
  .data_grid_card { background:rgba(256,256,256,0.0); text-align: left; border: solid 0.05em rgba(0,0,0,0.0); margin: 0em 10px 10px 10px; width: calc(49.9% - 20px); overflow:hidden; height: auto; flex-grow: 0; flex-basis: auto; display: block; }
  .data_grid_card_image iframe { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 240px; }
  .data_grid_card_small { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 2em 10px; width: calc(33.33333% - 20px); overflow:hidden; }
  .data_grid_card_small_related { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 1em 10px; width: calc(33.33333% - 20px); overflow:hidden; }
  .content-area-main-description-halfwidth { display: inline; margin-top: 10px; margin-left: 0%; margin-right: 0%; }
  .small_select { margin-top:2px; margin-bottom:2px; }
  .small_select:focus { border: 1px solid rgba(0, 153, 204, 0.8); }
  .search_collect_button { top:11px; }
}
@media only screen and (max-width : 767px) {
  .cell { flex: 1 1 265px; background-color: rgba(256,256,256,0.0); min-width: 0px; }
  .data_grid_card { background:rgba(256,256,256,0.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.05em rgba(0,0,0,0.0); margin: 0em 10px 10px 10px; width: calc(49.9% - 20px); overflow:hidden; height: auto; flex-grow: 0; flex-basis: auto; display: block; }
  .data_grid_card_image iframe { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 240px; }
  .data_grid_card_small { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 0px 10px; width: calc(50% - 20px); overflow:hidden; }
  .data_grid_card_small_related { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.2); margin: 0em 10px 0px 10px; width: calc(50% - 20px); overflow:hidden; }
  .data_grid_card_content_small { position: relative; padding: 20px 0% calc(20px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 160px; }
  .data_grid_card_content_small .larger_h6_text { font-size:1.1em !Important; }
  .data_grid_card_content_small_related { position: relative; padding: 20px 5% 20px 5%; display: block; min-height: 50px; }
  .data_grid_card_large { background:rgba(256,256,256,1.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.00em rgba(0,0,0,0.0); margin: 0em 10px 1em 10px; width: calc(100% - 20px); overflow:hidden; height: auto; flex-grow: 0; flex-basis: auto; display: block; }
  .data_grid_card_content_large { position: relative; padding: 20px 0% calc(20px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 160px; }
  .larger_h6_text { font-size: 1.2em; text-transform: capitalize; letter-spacing:0.0em; font-weight: 200; margin: 0px 0px 10px 0px; }
  .pagination_holder { justify-content: center; }
  .data_grid_items_all_left { position:relative; float: left; width: 100%; margin: 10px 0% 0px 0%; }
  .data_grid_card_content_wide { position: relative; padding: 20px 0% 20px 0px; display: inline-block; width: calc(100% - 270px); height: auto; float:left; top: 0px; overflow: hidden; }
  .grey_background { background: #fff !Important; }
  .data_grid_card_content { position: relative; padding: 14px 0% calc(14px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; min-height: 0px; }
  .Popup_window_close_html { position: relative; display: inline-block; top: 10px; right: 10px; }
}
@media only screen and (max-width : 600px) {
  body.wsactive .backtocat_positon { display: none !important; }
  .smaller_h1_text { margin-top: 0px; margin-bottom: -5px; font-size:1.8em; }
  .corner-ribbon { width: 180px; background: #e43; position: inherit; top: 25px; left: 0px; text-align: center; line-height: 30px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); z-index: 99; font-weight: 400; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; }
  .apollyoncredit_comp_details { font-size: 0.75em; position: absolute; bottom: -10px; left: 0px; z-index: 2; max-width: 90%; }
  .backtocat_positon { top: 18px; font-size: 0.75em; font-weight: bold; z-index:99; display:none; }
  #data_grid_toggle_button { display:block; padding: 16px 16px; margin:0px -16px; width:100%; margin-left: 4px; }
  .data_grid_toggle_button_hide { display:inline-block; float:left; text-align:left; width:100%; margin-top:-4px; margin-bottom:-10px; margin-left: 0px; z-index:0; position: relative; }
  .pagination-label-holder { display: block; }
  .pagination-label-mobile-holder { display: block; top: 24px; left:  35px; }
  .data_grid_card { background:rgba(256,256,256,0.0); text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.05em rgba(0,0,0,0.0); margin: 0em 10px 10px 10px; width: calc(100% - 20px); overflow:hidden; height: auto; flex-grow: 0; flex-basis: auto; display: block; }
  .data_grid_card_content { position: relative; padding: 14px 0% calc(14px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; }
  .data_grid_card_large { background:#fff; text-align: left; border: solid 0.00em rgba(0,0,0,0.0); border-bottom: solid 0.0em rgba(0,0,0,0.0); margin: 0em 10px 1em 10px; width: calc(100% - 20px); overflow:hidden; height: auto; flex-grow: 0; flex-basis: auto; display: block; }
  .data_grid_card_content_large { position: relative; padding: 20px 0% calc(20px * (1 - var(--apol-listing-card-btn-bleed, 0))) 0%; display: block; }
  .data_grid_card_content_wide { position: relative; padding: 20px 0% 20px 0px; display: inline-block; width: calc(100% - 170px); height: auto; float:left; top: 0px; overflow: hidden; }
  .data_grid_card_image_wide { width: 150px; border-radius:0px 0px 0px 0px; position: relative; display:inline-block; overflow: hidden; height:120px; background: transparent; float: left; border: 0px solid #ddd; margin:20px 20px 20px 0px; }
  .data_grid_card_image_wide iframe { width: 150px; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; }
  .data_grid_card_content_small_related .larger_h6_text { font-size:1.0em !Important; }
  .data_grid_card_content_small_related .sign_in_price_link_viewproduct { display: none; }
  .data_grid_card_content_small_related .sign_in_price_link { margin-top: 30px; display: block; width: 100% !important; font-size:0.8em !Important; }
  .data_grid_card_content_small_related h5 { font-size:0.9em !Important; }
  .box { height: auto; padding: 0px; background-color: #fff; padding-top: 0px; margin: 0px -2px 20px 0px; }
  .cell { background-color: rgba(256,256,256,0.0); border:  0.0625rem solid rgba(256,256,256,0.0); }
  .maxwidthinput { max-width: 236px; min-width:236px; }
  .search_collect_button { width:40px; }
  .data_grid_card_price { font-size: 80% !Important; font-weight: 600 !Important; }
}
@media only screen and (max-width : 576px) {
  .pagination-label-mobile-holder { display: block; top: 24px; left:  20px; }
  .cell { flex: 1 1 130px; background-color: rgba(256,256,256,0.0); }
  .cell_contact { flex: 1 1 185px; min-height: 0px; background-color: #f2f2f2; border: 0rem solid #fff; border-top: 10px solid #fff; padding: 0.5rem 1rem 1.1rem 1rem; }
}
@media only screen and (max-width : 500px) {
  .breadcrumb_productpage { display: flex; flex-wrap: wrap; padding: 5px 10px 5px 6.5%; margin-bottom: 0.0em; list-style: none; background-color: #fff; border-radius: 0.0em; font-size: 0.75em; display: flex; line-height: auto; margin: -20px 0px 0px 0px; width: 100vw; left: -5.5vw; top: -7px; position: relative; border-bottom: solid 1px rgba(0,0,0,0.1); border-top: solid 0px rgba(0,0,0,0.1); }
  .Button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: var(--apol-button-padding-y) var(--apol-button-padding-x); min-height: 54px; margin: 0px 1px 6px 1px; font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !Important; font-size: var(--apol-button-font-size, 1rem); font-weight: var(--apol-button-font-weight, 600); text-transform: none; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; border: 0; border-radius: var(--apol-button-corner); outline: 0; width: 100.0%; margin-left: 0px; margin-bottom: 10px; }
  .Button:hover, .btn-secondary:focus { border-color: #701c7e; border-radius: var(--apol-button-corner); }
  .corner-ribbon-product { width: auto; background: #e43; position: absolute; top: 0; left: 0px; padding: 0px 5px; text-align: left; line-height: 18px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(0deg); -webkit-transform: rotate(0deg); z-index: 99; font-size: 0.75em; text-transform: uppercase; font-weight: 400; overflow: hidden; margin:1% 0% 0% 1%; }
  .corner-ribbon.top-left { top: 15px; left: -60px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
  .corner-ribbon.top-right { top: 15px; right: -60px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
  .corner-ribbon.bottom-left { top: auto; bottom: 15px; left: -60px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
  .corner-ribbon.bottom-right { top: auto; right: -60px; bottom: 15px; left: auto; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
  .corner-ribbon-product.top-right { top: 15px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
  .backtocat_positon { top: 0px; font-size: 0.70em; display:none; }
  .pagination-label-holder { display: block; }
  .data_grid_card_description_small { display: none; }
  .data_grid_card_content_wide { position: relative; padding: 20px 0% 20px 0px; display: inline-block; width: calc(100% - 120px); height: auto; float:left; top: 0px; overflow: hidden; }
  .data_grid_card_image_wide { width: 100px; border-radius:0px 0px 0px 0px; position: relative; display:inline-block; overflow: hidden; height:80px; background: transparent; float: left; border: 0px solid #ddd; margin:20px 20px 20px 0px; }
  .data_grid_card_image_wide iframe { width: 150px; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; }
  .data_grid_items_all_left_full { position:relative; float: left; width: fit-content; margin: 0px 0% 0px 0%; padding: 0px 0px 0px 0px; background-color: rgba(0,0,0,.0); }
  .data_grid_card_image_large { width: 100%; border-radius:0px 0px 0px 0px; position: relative; display:block; overflow: hidden; height: 300px; background: #fff; }
  .data_grid_card_image_large img { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 300px; }
  .data_grid_card_image_large iframe { width: 100%; height: auto; object-fit: cover; margin: auto; top: 0px; bottom: 0px; position: absolute; min-height: 300px; }
}
@media only screen and (max-width : 420px) {
  .data_grid_card_description { display: inline-block; }
  .data_grid_card_stars_holder { position: relative; margin: -10px 0px -10px 0px !Important; width: 100%; display: none; font-size: 13px; }
  .sign_in_price_link_viewproduct { width: 100%; cursor: pointer; display: inline-block; z-index: 0; bottom: 0px; left: 0px; position: relative; font-weight: 100; background: rgba(50,50,50,1.0); margin: 0px 0px 0px 0px; white-space: nowrap; }
  .sign_in_price_link_viewproduct:hover { background: rgba(0,153,204,1.0); }
  .sign_in_price_link_viewproduct a { color: #fff !important; text-decoration: none; display: block; width: 100%; padding: 15px 2px; text-align: center; text-transform: uppercase; font-size: 13px; line-height: 0.8rem; }
  .sign_in_price_link_viewproduct a:hover,
.sign_in_price_link_viewproduct a:visited,
.sign_in_price_link_viewproduct a:active { color: #fff !important; text-decoration: none; }
  .sign_in_price_link_viewproduct a:focus { outline: none; }
  .b-contain input[type="checkbox"] ~ .b-input { position: absolute; top: 3px; left: 2px; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 0rem; }
  .b-contain input[type="radio"] ~ .b-input { position: absolute; top: 3px; left: 2px; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 3rem; }
  .maxwidthinput { max-width: 83vw; min-width:83vw; }
}

/* ============================================================================
   ECOM v2 REFINEMENTS - category grid layout (CSS grid, equal-height cards,
   Small=4 / Medium=3 / Large=2 columns), inline filter panel (details/summary,
   replaces the fancybox modal), structural pagination chips, price typography,
   product breadcrumb alignment, variant swatches (ported), link-look buttons.
   ============================================================================ */

/* --- variant swatches (ported from style.min.css) --- */
.variant-ui { margin: 10px 0; display: grid; gap: 12px; }
.variant-ui .variant-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.variant-ui .swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-ui button.swatch { appearance: none; border: 1px solid #cfcfcf; background: #fff; padding: 6px; border-radius: 8px; cursor: pointer; line-height: 1; display: grid; justify-items: center; gap: 6px; min-width: 56px; }
.variant-ui button.swatch .dot { width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.15); display: inline-block; background: var(--swatch, #ddd); }
.variant-ui button.swatch .name { font-size: 12px; white-space: nowrap; }
.variant-ui button.swatch[aria-pressed="true"] { outline: 2px solid #2b7cff; outline-offset: 2px; border-color: transparent; }
.variant-ui button.swatch:disabled { opacity: .45; cursor: not-allowed; }
.variant-ui .size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-ui button.size { appearance: none; border: 1px solid #cfcfcf; background: #fff; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; min-width: 44px; text-align: center; }
.variant-ui button.size[aria-pressed="true"] { border-color: #2b7cff; outline: 2px solid #2b7cff; outline-offset: 1px; }
.variant-ui button.size:disabled { opacity: .45; cursor: not-allowed; }
.variant-ui .dot { position: relative; overflow: hidden; }
.variant-ui button.is-oos .dot::after,
.variant-ui button:disabled .dot::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 4px, rgba(255,255,255,0.55) 4px, rgba(255,255,255,0.55) 8px ); }
.variant-ui button.is-oos,
.variant-ui button:disabled { opacity: 0.55; }

/* --- category grid v2: equal-height cards via grid stretch --- */
.data_grid_items_all_right { width: 100%; float: none; padding: 0; margin: 0; }
.data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_wide {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px; margin: 0 0 44px; min-height: 0; align-items: stretch;
}
.data_grid_card_holder_small { grid-template-columns: repeat(4, 1fr); }
.data_grid_card_holder_wide  { grid-template-columns: repeat(2, 1fr); }
.data_grid_card_holder > a, .data_grid_card_holder_small > a, .data_grid_card_holder_wide > a {
  display: flex; margin: 0; width: auto; text-decoration: none;
}
.data_grid_card, .data_grid_card_small, .data_grid_card_wide {
  display: flex; flex-direction: column; width: 100%; margin: 0;
  height: auto !important; /* neutralise any legacy JS height-equaliser inline styles; grid stretch owns heights now */
}
.data_grid_card_content, .data_grid_card_content_small, .data_grid_card_content_wide {
  display: flex; flex-direction: column; flex: 1 1 auto; width: auto;
}
.viewproduct_button_link { margin-top: auto; }
.data_grid_card_holder > div, .data_grid_card_holder_small > div, .data_grid_card_holder_wide > div { grid-column: 1 / -1; }
@media (max-width: 1365px) { .data_grid_card_holder_small { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_wide { grid-template-columns: 1fr; } }

/* --- card price typography --- */
.data_grid_card_price h5 { font-size: 1.35rem; margin: 8px 0 2px; }
.data_grid_card_price_small h5 { font-size: 1.15rem; margin: 6px 0 2px; }
/* Currency symbol matches the weight of the price it sits with. The markup wraps
   the pound sign in <strong>, which forced it bolder than the digits (most visible
   in the App Designer specimen where the number sits at the lighter heading weight).
   Normalise the whole price - symbol + digits - to one weight so the pound sign is
   never heavier than the number beside it. */
.data_grid_card_price strong, .data_grid_card_price_small strong, .data_grid_card_price_large strong,
.data_grid_card_regular_price, .data_grid_card_regular_price_small, .data_grid_card_regular_price_large { font-weight: inherit !important; }
.smaller_vat_text { font-size: .72em; color: var(--apol-color-muted); font-weight: 400; }
.data_grid_card_was_save { display: block; margin: 2px 0 6px; font-size: .9rem; }
.was_label del { color: var(--apol-color-muted); }
.save_label { color: var(--apol-color-accent); font-weight: 700; }
.sale_price_text { color: var(--apol-color-accent); }

/* --- pagination chips: structural, independent of generated classes --- */
.pagination_holder { display: flex; justify-content: center; margin: 6px 0 34px; }
.pagination_holder nav[data-grid-control="pagination"] { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination_holder nav[data-grid-control="pagination"] a,
.pagination_holder nav[data-grid-control="pagination"] span,
.pagination_holder nav[data-grid-control="pagination"] strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--apol-color-border); border-radius: var(--apol-button-radius);
  color: var(--apol-color-text); text-decoration: none; font-size: .95rem; background: #fff;
}
.pagination_holder nav[data-grid-control="pagination"] a:hover { border-color: var(--apol-color-primary); color: var(--apol-color-primary); }
.pagination_holder nav[data-grid-control="pagination"] a.active,
.pagination_holder nav[data-grid-control="pagination"] a[aria-current],
.pagination_holder nav[data-grid-control="pagination"] strong {
  background: var(--apol-color-primary); border-color: var(--apol-color-primary); color: var(--apol-color-primary-contrast);
}

/* --- inline filter panel (details/summary, replaces the fancybox modal) --- */
/* Border / radius are App Designer tokens; the fallbacks are the values that
   were hardcoded here, so an un-themed site is unchanged. These matter most
   when the dark bar background is switched off - the panel outline is then the
   only chrome left, and a site may well not want it. */
.apol-filter-panel {
  margin: 0 0 22px;
  border: var(--apol-listing-filterbar-border-width, 1px) solid var(--apol-listing-filterbar-border-color, var(--apol-color-border));
  border-radius: var(--apol-listing-filterbar-radius, var(--apol-radius));
  background: #fff;
}
.apol-filter-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: var(--apol-listing-filterbar-pad-y, 13px) var(--apol-listing-filterbar-pad-x, 18px); font-weight: 600; user-select: none; }
.apol-filter-summary::-webkit-details-marker { display: none; }
.apol-filter-chevron { margin-left: auto; transition: transform .2s ease; }
details[open] > .apol-filter-summary .apol-filter-chevron { transform: rotate(180deg); }
details[open] > .apol-filter-summary { border-bottom: 1px solid var(--apol-color-border); }
.apol-filter-body { padding: 18px; }
.apol-filter-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.apol-filter-controls .input-icons { position: relative; width: 100%; margin: 0; }
.apol-filter-controls .input-icons .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--apol-color-muted); pointer-events: none; }
.apol-filter-controls input[type="text"], .apol-filter-controls select {
  width: 100%; height: 44px; padding: 0 12px 0 36px;
  border: 1px solid var(--apol-color-border); border-radius: var(--apol-input-radius, var(--apol-button-radius));
  background: #fff; font-size: .95rem; color: var(--apol-color-text);
}
.apol-filter-groups { border-top: 1px solid var(--apol-color-border); padding-top: 6px; }
.apol-filter-groups h3 { margin: 0; padding: 10px 2px; font-size: 1rem; border-bottom: 1px solid var(--apol-color-border); }
.apol-filter-groups h3 a { color: var(--apol-color-text); text-decoration: none; display: block; }
.apol-filter-groups > div { padding: 12px 2px 16px; }
.apol-filter-footer { display: flex; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 1000px) { .apol-filter-controls { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .apol-filter-controls { grid-template-columns: 1fr; } }

/* --- product page breadcrumb aligned with site breadcrumb --- */
.breadcrumb_productpage { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--apol-color-muted); margin: 0; padding: 0; list-style: none; }
.breadcrumb_productpage a { color: var(--apol-color-muted); }
.breadcrumb_productpage a:hover { color: var(--apol-color-primary); }

/* --- empty editor regions paint nothing --- */
.additonal-content-area1:empty, .additonal-content-area2:empty { display: none; }

/* --- link-look buttons: strip the solid .Button chrome (colour comes from the
       _black/_green/_light_blue variants already defined above) --- */
.Button_no_background, .Button.Button_no_background, button.Button_no_background {
  background: transparent; border: none; box-shadow: none; height: auto; padding: 6px 4px; font-weight: 600;
}
.Button_no_background:hover { background: transparent; text-decoration: underline; }

/* ============================================================================
   ECOM v2.1 FIXES
   ============================================================================ */

/* Grid items: apolGrid can leave cards wrapped in <a>, move them as bare divs,
   or group them under wrapper divs when paginating. Handle all three:
   unknown wrapper divs become layout-transparent (display:contents) so their
   card children participate in the grid directly; only the no-results card
   spans the full row. */
.data_grid_card_holder > div, .data_grid_card_holder_small > div, .data_grid_card_holder_wide > div { grid-column: auto; }
.data_grid_card_holder > div:not(.data_grid_no-results):not([class*="data_grid_card"]),
.data_grid_card_holder_small > div:not(.data_grid_no-results):not([class*="data_grid_card"]),
.data_grid_card_holder_wide > div:not(.data_grid_no-results):not([class*="data_grid_card"]) { display: contents; }
.data_grid_card_holder > .data_grid_no-results,
.data_grid_card_holder_small > .data_grid_no-results,
.data_grid_card_holder_wide > .data_grid_no-results { grid-column: 1 / -1; display: block; }

/* jQuery UI accordion stamps inline heights measured before our fonts/padding
   applied - panels then clip and scroll. Let content size itself. */
.apol-filter-groups > div,
.apol-filter-groups .ui-accordion-content { height: auto !important; overflow: visible !important; }

/* breathing room around the filter bar */
.main_page_title_area { margin-bottom: 6px; }
.apol-filter-panel { margin: 18px 0 26px; }
.pagination-label-holder { margin: 0 0 18px; }

/* product variants: when the swatch UI (colour dots or image swatches) is
   active it replaces the select - the select stays in the DOM, hidden, so the
   form still submits the chosen variant (legacy behaviour). */
body:has(.variant-ui) select#ProductSelected { display: none; }

/* product tabs: space between label text, divider line, and panel content */
.listings_tab { display: inline-block; padding: 12px 18px 14px; }
.listings_tabs { margin-bottom: 0; }
.listing_tab_wrapper_inner, .listing_tab_wrapper_inner_related { padding: 22px 4px 10px; }

/* ============================================================================
   ECOM v2.2 FIXES
   ============================================================================ */

/* typography actually wins: resources.min.css loads after this file in the
   head and carries its own body/p values, so assert the tokens with weight.
   Content-scoped p beats a bare p selector on specificity regardless of order. */
body { line-height: var(--apol-line-height-body) !important; color: var(--apol-color-text) !important; }
.main_content_outer p, .main_content_outer_rows p,
.listing_tab_wrapper_inner, .listing_tab_wrapper_inner p,
.data_grid_card_description, .data_grid_card_description p { line-height: var(--apol-line-height-body); }

/* click & collect: reveal the postcode/store search from the radio state
   itself - no reliance on the legacy inline show1()/show2() handlers. The
   !important also beats any stale inline display:none those handlers set. */
.delivery_options:has(input[name="DeliverOrCollect"][value="Click & Collect"]:checked) .hide_collectionsearch { display: block !important; }

/* category grid: clearfix pseudo-elements become phantom grid items on a grid
   container (::before steals the first cell) - remove them outright */
.data_grid_card_holder::before,  .data_grid_card_holder::after,
.data_grid_card_holder_small::before, .data_grid_card_holder_small::after,
.data_grid_card_holder_wide::before,  .data_grid_card_holder_wide::after { content: none !important; display: none !important; }

/* no-results card: zero footprint until apolGrid fills it */
.data_grid_no-results:empty { display: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: 0 !important; }

/* card text: clear space between price block and description */
.data_grid_card_description { display: block; margin-top: 12px; }

/* results count above the filter bar */
.apol-cat-toolbar .pagination-label-holder { text-align: right; margin: 0 0 8px; }

/* ============================================================================
   ECOM v2.3 - apolGrid runtime layer (written against apolgrid.js source)
   ============================================================================ */

/* apolGrid expects its companion apolgrid.css for these; that file is not
   linked on the unified templates, so the rules live here instead - loaded in
   <head>, which is exactly what apolGrid wants for the first-paint race.
   THE BIG ONE: off-page cards carry .data-grid-hide. Without display:none
   they hold invisible grid cells and the visible page renders a viewport
   further down - the "massive gap". */
.data-grid-hide { display: none !important; }
.apol-grid-rendering { visibility: hidden; }
.dg-label-empty { display: none; }
.dg-pagination-empty { display: none; }
.hide_filters { display: none; }

/* --- size variants, complete set (applyGridSize swaps these wholesale):
       Small = 4 across, Medium/normal = 3, Large = 2, legacy wide = 2 --- */
.data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_large, .data_grid_card_holder_wide {
  display: grid !important; gap: 32px var(--apol-listing-card-gap-x, 24px); margin: 0 0 44px; min-height: 0; align-items: stretch;
}
.data_grid_card_holder        { grid-template-columns: repeat(3, 1fr); }
.data_grid_card_holder_small  { grid-template-columns: repeat(4, 1fr); }
.data_grid_card_holder_large,
.data_grid_card_holder_wide   { grid-template-columns: repeat(2, 1fr); }

.data_grid_card_holder > a, .data_grid_card_holder_small > a,
.data_grid_card_holder_large > a, .data_grid_card_holder_wide > a { display: flex; margin: 0; width: auto; text-decoration: none; }

.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide {
  display: flex; flex-direction: column; width: 100%; margin: 0; height: auto !important;
}
.data_grid_card_content, .data_grid_card_content_small, .data_grid_card_content_large, .data_grid_card_content_wide {
  display: flex; flex-direction: column; flex: 1 1 auto; width: auto;
}

/* _large image family is new (no legacy rules existed) - mirror the ported
   image-box treatment */
.data_grid_card_image_large { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.data_grid_card_image_large img, .data_grid_card_image_large iframe { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1365px) { .data_grid_card_holder_small { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_large, .data_grid_card_holder_wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .data_grid_card_holder, .data_grid_card_holder_small, .data_grid_card_holder_large, .data_grid_card_holder_wide { grid-template-columns: 1fr; } }

/* no-results / unknown wrappers, extended to the full size set */
.data_grid_card_holder_large > div { grid-column: auto; }
.data_grid_card_holder_large > div:not(.data_grid_no-results):not([class*="data_grid_card"]) { display: contents; }
.data_grid_card_holder_large > .data_grid_no-results { grid-column: 1 / -1; }
.data_grid_card_holder_large::before, .data_grid_card_holder_large::after { content: none !important; display: none !important; }

/* --- pagination: apolGrid emits nav > ul.pagination > li.page-item > a.page-link --- */
nav[data-grid-control="pagination"] ul.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
nav[data-grid-control="pagination"] li.page-item { margin: 0; }
nav[data-grid-control="pagination"] a.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--apol-color-border); border-radius: var(--apol-button-radius);
  background: #fff; color: var(--apol-color-text); text-decoration: none; font-size: .95rem;
}
nav[data-grid-control="pagination"] li.page-item:not(.disabled) a.page-link:hover { border-color: var(--apol-color-primary); color: var(--apol-color-primary); }
nav[data-grid-control="pagination"] li.page-item.active a.page-link { background: var(--apol-color-primary); border-color: var(--apol-color-primary); color: var(--apol-color-primary-contrast); }
nav[data-grid-control="pagination"] li.page-item.disabled a.page-link { opacity: .4; pointer-events: none; }

/* ============================================================================
   ECOM v2.3.1 - anchor husks
   apolGrid's [data-grid-item] is the inner card div; on render it re-appends
   those divs to the grid root, leaving the server-rendered <a> wrappers empty.
   Legacy CSS floated them (zero size, invisible); our > a { display:flex }
   gave each husk a grid cell - twelve empty cells = the "massive gap".
   Anchors that no longer contain a card take no cell. Cards re-appended as
   direct grid children are already covered by the card rules and stretch
   normally.
   ============================================================================ */
.data_grid_card_holder > a:not(:has(.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide)),
.data_grid_card_holder_small > a:not(:has(.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide)),
.data_grid_card_holder_large > a:not(:has(.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide)),
.data_grid_card_holder_wide > a:not(:has(.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide)) { display: none; }

/* ============================================================================
   ECOM v2.3.2 - equal heights with authority + dropdown filter pills + reset
   ============================================================================ */

/* Equal heights: ported legacy card rules carry their own display values
   (some !important) that beat the flex chain - assert it outright. Cards are
   grid items after apolGrid's first render; stretch + flex column + content
   flex:1 + button margin-top:auto = every card matches the tallest in row. */
.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide {
  display: flex !important; flex-direction: column !important; align-self: stretch;
}
.data_grid_card_content, .data_grid_card_content_small, .data_grid_card_content_large, .data_grid_card_content_wide {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
}
.viewproduct_button_link { margin-top: auto !important; }

/* reset button inside the main panel summary */
.apol-filter-reset {
  margin-left: 16px; padding: 4px 10px; border: none; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--apol-color-muted); cursor: pointer;
}
.apol-filter-reset:hover { color: var(--apol-color-accent); }

/* filter groups as dropdown pills */
.apol-filter-groups { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--apol-color-border); padding-top: 16px; }
.apol-filter-group { position: relative; }
.apol-filter-group > .apol-filter-group-summary {
  list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--apol-color-border); border-radius: var(--apol-input-radius, var(--apol-button-radius));
  background: #fff; font-size: .92rem; font-weight: 600; color: var(--apol-color-text); white-space: nowrap;
}
.apol-filter-group > .apol-filter-group-summary::-webkit-details-marker { display: none; }
.apol-filter-group-chevron::after { content: "\25BE"; font-size: .8em; color: var(--apol-color-muted); }
.apol-filter-group[open] > .apol-filter-group-summary { border-color: var(--apol-color-primary); color: var(--apol-color-primary); }
.apol-filter-group[open] .apol-filter-group-chevron::after { content: "\25B4"; }
/* Mobile rows are full-width tap targets, so the .8em desktop-pill triangle
   reads as an unidentifiable speck. Enlarge it (and darken from muted) on the
   drawer / sheet rows so it is legibly a caret. */
@media (max-width: 980px) {
  .apol-filter-group .apol-filter-group-chevron::after { font-size: 1.5rem; color: var(--apol-color-heading); }
}
.apol-filter-group-panel {
  /* z-index must clear the product-card sale ribbon (.corner-ribbon-product,
     z 99) below the bar; at the old 40 the ribbon painted through the pop-out
     when the filter bar was NOT sticky (no toolbar stacking context). */
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  min-width: 280px; max-width: 380px; max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--apol-color-border); border-radius: var(--apol-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10); padding: 14px 16px;
}
/* group panels were padded as inline accordion bodies before - tidy inputs */
.apol-filter-group-panel .b-contain { display: block; margin: 8px 0; }
@media (max-width: 640px) {
  .apol-filter-group { position: static; }
  .apol-filter-group-panel { left: 18px; right: 18px; max-width: none; }
}

/* ============================================================================
   ECOM v2.3.3 - reset to match Filter & Sort + divider; controls as pills on
   one wrapping line with the filter groups; structure-agnostic button pinning
   ============================================================================ */

/* reset: same size/colour as the Filter & Sort label, thin divider between */
.apol-filter-reset {
  /* inline-flex + align-items:center so the trash icon and the word sit on the
     same optical centre (the icon was on the text baseline and read a touch
     high), with a real gap between them instead of butting together. */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: inherit; font-weight: 600; color: var(--apol-color-text);
  border-left: 1px solid var(--apol-color-border); border-radius: 0;
  margin-left: 18px; padding: 2px 0 2px 18px; line-height: 1;
}
.apol-filter-reset:hover { color: var(--apol-color-accent); }

/* controls + filter groups merge into one wrapping pill row */
.apol-filter-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 18px; }
.apol-filter-controls, .apol-filter-groups { display: contents; }
.apol-filter-controls .input-icons { width: auto; }
.apol-filter-controls input[type="text"] { width: 220px; }
.apol-filter-controls input[type="text"], .apol-filter-controls select {
  width: auto; min-width: 0; height: 40px; padding: 0 14px 0 36px;
  border: 1px solid var(--apol-color-border); border-radius: var(--apol-input-radius, var(--apol-button-radius));
  background: #fff; font-size: .92rem; font-weight: 500; color: var(--apol-color-text);
}
.apol-filter-controls input[type="text"] { width: 220px; }
.apol-filter-group > .apol-filter-group-summary { height: 40px; }

/* equal heights, final piece: pin whichever direct flex child contains the
   View Product link, regardless of wrapper nesting */
.data_grid_card_content > *:has(.viewproduct_button_link),
.data_grid_card_content_small > *:has(.viewproduct_button_link),
.data_grid_card_content_large > *:has(.viewproduct_button_link),
.data_grid_card_content_wide > *:has(.viewproduct_button_link),
.data_grid_card_content > .viewproduct_button_link,
.data_grid_card_content_small > .viewproduct_button_link,
.data_grid_card_content_large > .viewproduct_button_link,
.data_grid_card_content_wide > .viewproduct_button_link,
.data_grid_card > *:has(.viewproduct_button_link),
.data_grid_card_small > *:has(.viewproduct_button_link),
.data_grid_card_large > *:has(.viewproduct_button_link),
.data_grid_card_wide > *:has(.viewproduct_button_link) { margin-top: auto !important; }

/* ============================================================================
   ECOM v2.4 - select pills + mobile slide-out filter drawer
   ============================================================================ */

/* native selects proxied into pills stay in the DOM for apolGrid */
.apol-filter-controls select.apol-select-proxied { display: none !important; }

/* radio rows inside pill panels */
.apol-select-option { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; font-size: .95rem; line-height: 1.3; }
.apol-select-option input[type="radio"] { accent-color: var(--apol-color-primary); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.apol-select-pill .apol-filter-group-panel { min-width: 230px; }
.apol-filter-drawer-close { display: none; }

/* ---------------- mobile: slide-out drawer (M&S style) ---------------- */
@media (max-width: 980px) {
  /* scrim = summary::after, so tapping it natively toggles the panel shut */
  details.apol-filter-panel[open] > .apol-filter-summary::after {
    content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 11990;
  }
  details.apol-filter-panel[open] > .apol-filter-body {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); z-index: 11995;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 54px 18px 24px;
    transition: transform .28s ease;
  }
  @starting-style {
    details.apol-filter-panel[open] > .apol-filter-body { transform: translateX(100%); }
  }
  details.apol-filter-panel[open] > .apol-filter-summary { border-bottom: 0; }
  body:has(details.apol-filter-panel[open]) { overflow: hidden; }

  .apol-filter-drawer-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px; width: 38px; height: 38px;
    border: none; background: transparent; font-size: 1.15rem; color: var(--apol-color-text); cursor: pointer;
  }

  /* drawer contents: full-width rows, panels expand inline */
  .apol-filter-controls .input-icons, .apol-filter-controls input[type="text"] { width: 100%; }
  .apol-filter-group { width: 100%; position: static; }
  .apol-filter-group > .apol-filter-group-summary { width: 100%; justify-content: space-between; }
  .apol-filter-group-panel {
    position: static; min-width: 0; max-width: none; max-height: none;
    border: 0; border-left: 2px solid var(--apol-color-border); border-radius: 0;
    box-shadow: none; margin: 4px 0 10px; padding: 8px 14px;
  }
}

/* App Designer: mobile filter bar - hide the chevron and park Reset on the
   right (where the chevron used to sit). Reset stays inside the summary row. */
@media (max-width: 980px) {
  .apol-filter-panel > .apol-filter-summary .apol-filter-chevron { display: none; }
  .apol-filter-panel > .apol-filter-summary .apol-filter-reset { margin-left: auto; border-left: 0; padding-left: 0; }
}

/* ============================================================================
   ECOM v2.5 (trimmed) - filter panel input styling only. The card/image
   structural rules this block previously carried are reverted: they fought
   the legacy letterbox mechanism and degraded the cards. Card layout returns
   to the v2.3-era treatment, with the one genuine fix applied in v2.6 below.
   ============================================================================ */
.apol-filter-group-panel .b-contain,
.apol-filter-group-panel label { display: flex; align-items: center; gap: 10px; position: static; padding: 8px 2px; margin: 0; min-height: 0; cursor: pointer; font-size: .95rem; line-height: 1.3; color: var(--apol-color-text); }
.apol-filter-group-panel .b-contain input[type="checkbox"],
.apol-filter-group-panel .b-contain input[type="radio"],
.apol-filter-group-panel input[type="checkbox"],
.apol-filter-group-panel input[type="radio"] {
  position: static; opacity: 1; width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  accent-color: var(--apol-color-primary); cursor: pointer;
}
.apol-filter-group-panel .b-contain > input:not([data-grid-control]):not([name]) { display: none !important; }
.apol-filter-group-panel .b-contain .b-input,
.apol-filter-group-panel .b-contain__checkmark { display: none !important; }
.apol-filter-group-panel .b-contain input[data-grid-control] { order: 0; }
.apol-filter-group-panel .b-contain .b-contain-label-text-custom { order: 1; }

/* ============================================================================
   ECOM v2.6 - the single fix the 14:52 state needed: the category emitter's
   content class is data_grid_card_content_small_related, which the v2.3
   equal-height chain (cards already flex-column via grid stretch) never
   matched. Add it, and pin the CTA within it. Nothing else changes.
   ============================================================================ */
.data_grid_card_content_small_related {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: auto;
}
.data_grid_card_content_small_related > .viewproduct_button_link,
.data_grid_card_content_small_related > *:has(.viewproduct_button_link) { margin-top: auto !important; }
.data_grid_card_content_small_related .data_grid_card_description_small,
.data_grid_card_content_small_related .data_grid_card_description { margin-top: 12px; }

/* ============================================================================
   ECOM v2.7 - surgical image slot
   The image box was sizing to each photo's natural height, so every card's
   text started at a different y. Give the slot a consistent aspect-ratio
   footprint and centre the image inside it. Flex centring, direct-child
   scoped, no !important - this block is appended last so source order wins.
   The CTA pinning already in place then puts the flexible gap between the
   description and the View Product bar, matching the original design.
   ============================================================================ */
.data_grid_card_image, .data_grid_card_image_small,
.data_grid_card_image_large, .data_grid_card_image_wide {
  width: 100%; aspect-ratio: 4 / 3; height: auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; float: none;
}
.data_grid_card_image > img, .data_grid_card_image_small > img,
.data_grid_card_image_large > img, .data_grid_card_image_wide > img {
  position: static; width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; margin: 0;
}

/* ============================================================================
   ECOM v2.8 - six fixes
   ============================================================================ */

/* 1) Colour dots live in the card's MAIN CONTENT (below the description), in
   flow - not as a pill over the image. apol-card-colour-dots.js inserts the
   strip after .data_grid_card_description and category-swatch-enhance.js puts
   its .cat-swatch-row in the same place, so keeping the strip in flow drops it
   into the content column. (Grid rows stretch to equal height now, so the extra
   line no longer staggers cards the way it did before the grid rework - which
   is why this used to be an absolute out-of-flow pill.) */
.data_grid_card_image, .data_grid_card_image_small,
.data_grid_card_image_large, .data_grid_card_image_wide { position: relative; }
.apol-card-colour-dots {
  display: var(--apol-listing-dots-display, flex) !important; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 0; padding: 0; background: transparent; box-shadow: none;
}
.apol-card-colour-dot {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c); border: 1px solid rgba(0, 0, 0, .15);
  position: relative; cursor: help;
}
.apol-card-colour-label:empty { display: none; }
/* hover tooltip = colour name (apolgrid stamps data-tooltip on each dot).
   Consolidated here from apolgrid.css so colour-dot CSS has one home. */
.apol-card-colour-dot::after {
  content: attr(data-tooltip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
  background: #222; color: #fff; padding: 4px 8px; font-size: 11px; border-radius: 3px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 10;
}
.apol-card-colour-dot::before {
  content: ""; position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%);
  border-width: 5px; border-style: solid; border-color: #222 transparent transparent transparent;
  opacity: 0; transition: opacity .15s ease;
}
.apol-card-colour-dot:hover::after, .apol-card-colour-dot:hover::before { opacity: 1; }

/* Colour dots on mobile - slightly smaller and tighter. Breakpoint 768px =
   phones + small tablets (the 2-col listing tier); change to 640 or 980 to
   taste. */
@media (max-width: 768px) {
  .apol-card-colour-dots { gap: 4px; }
  .apol-card-colour-dot { width: 12px !important; height: 12px !important; }
}

/* ============================================================================
   App Designer - category swatch row (category-swatch-enhance.js)
   That script is the REAL colour-dot / image-swatch UI on live category cards:
   it builds .cat-swatch-row / .cat-swatch with inline styles and suppresses
   apolGrid's .apol-card-colour-dots. Its inline styles are non-!important, so
   these rules win - giving the App Designer 'Show colour dots' toggle and the
   mobile treatment authority over the live swatches too.
   ============================================================================ */
/* Show/hide: same token as the apolGrid dots, so the designer toggle governs both. */
.cat-swatch-row { display: var(--apol-listing-dots-display, flex) !important; }
/* Hold the swatch size against any legacy `.data_grid_card_image img` rule that
   would otherwise squash an image swatch to a sliver. */
.cat-swatch-row .cat-swatch > img, .cat-swatch-row .cat-swatch > span {
  width: 18px !important; height: 18px !important;
  max-width: none !important; max-height: none !important; object-fit: cover !important;
}
/* Mobile: smaller swatches, transparent pill, no shadow (take less of the image). */
@media (max-width: 768px) {
  .cat-swatch-row { background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 2px 0 !important; }
  .cat-swatch-row .cat-swatch > img, .cat-swatch-row .cat-swatch > span { width: 13px !important; height: 13px !important; }
}

/* 2) Results count: the ported legacy rule absolutely positions the holder
   at top:-23px, which threw it out of the toolbar. Back into flow. */
.apol-cat-toolbar .pagination-label-holder {
  position: static !important; top: auto; right: auto;
  display: block; text-align: right; margin: 0 0 8px;
}

/* 3) Mobile filter inputs: ported responsive b-contain variants re-hide the
   real inputs below the breakpoints; assert visibility with weight. The
   decorative twins stay hidden (they have neither name nor data-grid-control,
   so these selectors never match them). */
.apol-filter-group-panel input[type="radio"][data-grid-control],
.apol-filter-group-panel input[type="checkbox"][data-grid-control],
.apol-filter-group-panel input[type="radio"][name],
.apol-filter-group-panel input[type="checkbox"][name] {
  position: static !important; opacity: 1 !important;
  width: 16px !important; height: 16px !important;
  display: inline-block !important; margin: 0 !important;
}

/* 4) Search input: icon removed, so the icon gutter goes too */
.apol-filter-controls .input-icons .icon { display: none; }
.apol-filter-controls input[type="text"] { padding-left: 14px; }

/* 5) Mobile: Small view shows 2 per row */
@media (max-width: 640px) {
  .data_grid_card_holder_small { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}

/* ============================================================================
   ECOM v2.9
   - Image slot: top-anchor + transparent slack (photos all start flush with
     the top of their uniform box; letterboxing no longer paints grey).
   - Filter inputs: the ported b-contain pattern sets appearance:none, so
     even when v2.8 forced the real inputs visible they rendered as blank
     16px ghosts. appearance:auto resets them to native radios/checkboxes.
     Id-scoped so nothing later in the cascade can plausibly outrank it.
   ============================================================================ */

/* Image slot: top-anchor the photo so every card's image starts flush with
   the top of its (already uniform) box, and make letterbox slack invisible
   instead of grey. */
.data_grid_card_image, .data_grid_card_image_small,
.data_grid_card_image_large, .data_grid_card_image_wide {
  align-items: flex-start !important;
  background: transparent !important;
  min-height: 0 !important;
}
.data_grid_card_image::before, .data_grid_card_image::after,
.data_grid_card_image_small::before, .data_grid_card_image_small::after,
.data_grid_card_image_large::before, .data_grid_card_image_large::after,
.data_grid_card_image_wide::before, .data_grid_card_image_wide::after {
  content: none !important;
}
.data_grid_card_image > img, .data_grid_card_image_small > img,
.data_grid_card_image_large > img, .data_grid_card_image_wide > img {
  opacity: 1 !important; visibility: visible !important;
}

/* Filter inputs: id-scoped assertion that outranks anything the legacy
   sheet can throw at it. Real inputs visible, decorative twins and the
   custom checkmark div stay dead. */
#apolFilterGroups .b-contain input[type="radio"][name],
#apolFilterGroups .b-contain input[type="checkbox"][name],
#apolFilterGroups .b-contain input[data-grid-control] {
  position: static !important; opacity: 1 !important;
  width: 16px !important; height: 16px !important;
  display: inline-block !important; margin: 0 6px 0 0 !important;
  appearance: auto !important; -webkit-appearance: auto !important;
  accent-color: var(--apol-color-primary);
  pointer-events: auto !important; clip: auto !important;
  clip-path: none !important;
}
#apolFilterGroups .b-contain input:not([data-grid-control]):not([name]),
#apolFilterGroups .b-contain .b-input,
#apolFilterGroups .b-contain__checkmark {
  display: none !important;
}

/* ============================================================================
   ECOM v3.0 - fix the misfired CTA pin
   The View Product div sits INSIDE data_grid_card_content, so the earlier
   :has(.viewproduct_button_link) pin caught the whole content block and
   bottom-pinned it - the equal-height slack landed between the image box
   and the title, varying with description length (the title stagger).
   Correct architecture: content block flush under the image, fills the
   remaining card height as a column flex, and the CTA alone pins to its
   bottom - slack sits between description and button on every card.
   ============================================================================ */
.data_grid_card > *:has(.viewproduct_button_link),
.data_grid_card_small > *:has(.viewproduct_button_link),
.data_grid_card_large > *:has(.viewproduct_button_link),
.data_grid_card_wide > *:has(.viewproduct_button_link) {
  margin-top: 0 !important;
}
.data_grid_card_content, .data_grid_card_content_small,
.data_grid_card_content_large, .data_grid_card_content_wide,
.data_grid_card_content_small_related {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-height: 0;
}
.data_grid_card_content .viewproduct_button_link,
.data_grid_card_content_small .viewproduct_button_link,
.data_grid_card_content_large .viewproduct_button_link,
.data_grid_card_content_wide .viewproduct_button_link,
.data_grid_card_content_small_related .viewproduct_button_link {
  margin-top: auto !important;
}

/* ============================================================================
   ECOM v3.1 - propagate row height through the swatch-enhancer wrapper
   category-swatch-enhance.js wraps most items in div.cat-swatches-rendered
   (which becomes the grid item); the anchor + card inside it kept natural
   height, so buttons rode at content height while bare-card items stretched.
   Flex the chain wrapper -> anchor -> card so every card fills the row.
   ============================================================================ */
[class*="data_grid_card_holder"] > *:not(.data-grid-hide):has(.data_grid_card,
  .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide) {
  display: flex !important; flex-direction: column !important; min-width: 0;
}
/* the engine's paging/filtering mechanism must always win: the flex rules
   above are more specific than bare .data-grid-hide, so re-assert the hide
   at matching specificity, later in the cascade */
[class*="data_grid_card_holder"] > .data-grid-hide,
[class*="data_grid_card_holder"] .nochange_link.data-grid-hide,
[class*="data_grid_card_holder"] .data-grid-hide[class*="data_grid_card"] {
  display: none !important;
}
.cat-swatches-rendered > .nochange_link,
[class*="data_grid_card_holder"] > .nochange_link:has(.data_grid_card,
  .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide) {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-width: 0;
}
/* husks: anchors apolGrid abandoned when re-parenting cards must never
   take a grid cell - re-asserted with weight since the rule above is
   !important and later in the cascade than the original husk hider */
[class*="data_grid_card_holder"] > .nochange_link:not(:has(.data_grid_card,
  .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide)) {
  display: none !important;
}
/* Related Items (PDP tab 10, .data_grid_card_holder#card_container) uses the legacy
   .data_grid_card_small_related card, which was NEVER added to the husk-hider
   allowlists above - so its anchors matched the :not(:has(...)) hider and were set to
   display:none, leaving Related Items empty in the slide-out drawer (and it would be
   empty in the new tab strip too). Re-show + flex those anchors here (later in the
   cascade, matching specificity) and let the card fill its grid cell. */
[class*="data_grid_card_holder"] > .nochange_link:has(.data_grid_card_small_related) {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0;
}
[class*="data_grid_card_holder"] > .nochange_link > .data_grid_card_small_related {
  width: 100% !important; margin: 0 !important;
}
.nochange_link > .data_grid_card, .nochange_link > .data_grid_card_small,
.nochange_link > .data_grid_card_large, .nochange_link > .data_grid_card_wide,
.data-grid-html > .data_grid_card, .data-grid-html > .data_grid_card_small,
.data-grid-html > .data_grid_card_large, .data-grid-html > .data_grid_card_wide,
.data-grid-html > .nochange_link {
  flex: 1 1 auto !important; min-height: 0;
}
.data-grid-html > .nochange_link {
  display: flex !important; flex-direction: column !important; min-width: 0;
}
/* inverted anatomy: some items end up card > anchor > content. The anchor
   is then the only flex child of the stretched card and must pass the
   height through, or slack pools below it and the button rides high. */
.data_grid_card > .nochange_link, .data_grid_card_small > .nochange_link,
.data_grid_card_large > .nochange_link, .data_grid_card_wide > .nochange_link {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-width: 0; min-height: 0;
}

/* ============================================================================
   ECOM v3.2 - 12 Jun: category/product mobile filter + basket fixes
   Append-only. Nothing above is reorganised; these are end-of-cascade
   overrides that win on specificity + order.
   ============================================================================ */

/* --- (6) Basket count badge ---------------------------------------------
   The legacy `em.roundpoint` rule (relative, transparent, top:-9px) outranks
   the intended floating badge at .roundpoint and drops the count in-flow
   below the icon, kills the blue circle, and the in-flow height shoves the
   bag icon up. Re-assert the badge at higher specificity than em.roundpoint
   so it floats top-right again (which also restores the icon's position). */
.mobile_header_icons_iconwrap_basket a > em.roundpoint {
  position: absolute; top: -7px; right: -10px; left: auto;
  width: auto; height: auto; min-width: 0;
  background: var(--apol-color-primary); background-color: var(--apol-color-primary);
  color: #fff; font-size: .62rem; line-height: 1; padding: 2px 5px;
  border-radius: 999px; font-style: normal; font-weight: 600;
  border-bottom: 0; display: inline-block; text-align: center;
}
@media (max-width: 980px) {
  .mobile_header_icons_iconwrap_basket a > em.roundpoint { top: 2px; right: 2px; }
}

/* --- (1) Mobile filter radio/checkbox: belt-and-braces visibility --------
   The real inputs already get position:static/opacity:1, but z-index/visibility
   were never re-asserted; force them fully visible in the panel and the drawer.
   Decorative twins + custom .b-input stay hidden (handled earlier in cascade). */
.apol-filter-group-panel .b-contain input[type="radio"][name],
.apol-filter-group-panel .b-contain input[type="checkbox"][name],
.apol-filter-group-panel .b-contain input[data-grid-control],
#apolFilterGroups .b-contain input[type="radio"][name],
#apolFilterGroups .b-contain input[type="checkbox"][name],
#apolFilterGroups .b-contain input[data-grid-control] {
  position: static !important; display: inline-block !important;
  visibility: visible !important; opacity: 1 !important; z-index: auto !important;
  width: 16px !important; height: 16px !important; min-width: 16px !important;
  margin: 0 6px 0 0 !important; flex: 0 0 auto;
  appearance: auto !important; -webkit-appearance: auto !important;
  accent-color: var(--apol-color-primary);
  clip: auto !important; clip-path: none !important; pointer-events: auto !important;
}

/* --- (4) Mobile filter drawer slides from the right at the menu's speed ---
   The main menu (.menu_desktop) is an always-rendered fixed panel translated
   off-canvas and slid in via transform .28s ease. Mirror that exactly so the
   filter drawer slides both ways at the same speed instead of popping. */
@media (max-width: 980px) {
  details.apol-filter-panel > .apol-filter-body {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(420px, 88vw); z-index: 11995;
    background: #fff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
    padding: 54px 18px 24px;
    transform: translateX(105%); visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  details.apol-filter-panel[open] > .apol-filter-body {
    transform: translateX(0); visibility: visible;
  }

  /* --- (2) Every group opens DOWN, full-width, never sideways ----------- */
  details.apol-filter-panel .apol-filter-group { position: static !important; width: 100% !important; }
  details.apol-filter-panel .apol-filter-group-panel {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    min-width: 0 !important; max-width: 100% !important; width: 100% !important;
    box-sizing: border-box !important; overflow-x: hidden;
  }
  details.apol-filter-panel .apol-filter-group-panel form,
  details.apol-filter-panel .apol-filter-group-panel .b-contain,
  details.apol-filter-panel .apol-filter-group-panel label {
    max-width: 100% !important; box-sizing: border-box;
  }

  /* --- (3) 'View results' button pinned at the foot of the drawer --------
     Chrome comes from the App Designer BUTTON tokens (--apol-button-corner /
     -padding-x / -padding-y / -font-size), not from bespoke values, so the
     action bar follows the site's button style like every other button. It
     was reading --apol-button-radius, which App Designer does not emit, so
     the corner setting never reached it. Fallbacks are the previous
     hardcoded values, leaving an un-themed site unchanged. */
  .apol-filter-drawer-apply {
    display: block; width: 100%; margin-top: auto; flex: 0 0 auto;
    position: sticky; bottom: 0; z-index: 1;
    border: 0;
    border-radius: var(--apol-button-corner, var(--apol-button-radius, 8px));
    padding: var(--apol-button-padding-y, 14px) var(--apol-button-padding-x, 18px);
    background: var(--apol-color-primary); color: var(--apol-color-primary-contrast, #fff);
    /* a <button> does NOT inherit font-family - without this it fell back to
       the UA default (Arial 400) while every other site button uses the body
       font, so "View results" looked out of place. Match .Button / .apol-btn. */
    font-family: var(--apol-font-body), Georgia, sans-serif;
    font-size: var(--apol-button-font-size, 1rem);
    font-weight: var(--apol-button-font-weight, 600);
    line-height: 1.2; cursor: pointer;
  }
}
.apol-filter-drawer-apply { display: none; }  /* hidden outside the mobile drawer */

/* --- (5) Mobile pagination: centre, single line ---------------------------
   ul.pagination is width:100% with default flex-start, so chips sit left and
   next/last wrap. Centre and keep them on one line. Page-count is reduced to
   3 on mobile via apol.nav.js (data-grid-pages-range). */
@media (max-width: 640px) {
  .pagination_holder { justify-content: center !important; }
  nav[data-grid-control="pagination"] ul.pagination {
    width: auto !important; justify-content: center !important;
    flex-wrap: nowrap !important; gap: 4px !important;
  }
  nav[data-grid-control="pagination"] a.page-link { padding: 0 10px !important; min-width: 34px; }
}

/* ============================================================================
   ECOM v3.3 - 12 Jun: product-page delivery options + click&collect button
   Append-only.
   ============================================================================ */

/* (8) Delivery / Click & Collect: these use the original b-contain control
   (the filter-page native-input overrides don't reach .delivery_options), and
   the dot sits at top:5px so the icon + label read as slightly too high.
   Centre the dot on the label's line instead. More specific + later than the
   base and the <=500 responsive b-input rules, so it wins at every width. */
.delivery_options .b-contain input[type="radio"] ~ .b-input,
.delivery_options .b-contain input[type="checkbox"] ~ .b-input {
  top: 50%; transform: translateY(-50%);
}

/* (9) Click & Collect 'Go' button overflowing the postcode input: the button
   hard-codes height:52px, but its flex item already stretches to the input's
   height via .input_container_search{align-items:stretch}. Match the button to
   that row height rather than a fixed value so it can't overhang the bottom. */
.search_collect_button { height: 100%; top: 0; box-sizing: border-box; }
@media (max-width: 767px) { .search_collect_button { top: 0; } }

/* ============================================================================
   ECOM v3.4 - 12 Jun: nav above sale stickers; product delivery radios match
   the category filter radios; click&collect Go-button height. Append-only.
   ============================================================================ */

/* (Sale sticker over the menu) The corner ribbons sit at z-index:99; the nav
   was 24/25 (desktop) / 45 (mobile), so a Sale ribbon painted over the open
   menu. Lift the nav above page content while staying below the slide-out
   overlays (basket/search 9999, filter drawer 11995). */
.logo_menu_container { z-index: 1000; }
.menu_desktop { z-index: 1000; }

/* 25 Jul 2026: the DESKTOP nav got the fix above, but the MOBILE sticky bar
   (.apol-mini, the fixed mini-header that slides in on scroll) was still
   z-index:60 - below the 99 stickers - so a Sale ribbon scrolled over it on a
   phone. Same treatment: 1000 clears the stickers and stays below the search
   /basket overlays (6000/9999). Still above the slide-out menu (45), so the
   bar keeps sitting over the menu it opens. .apol-mini is display:none on
   desktop, so this only bites on mobile where the bug was. */
.apol-mini { z-index: 1000; }

/* 26 Jul 2026: ROOT fix for the sale-sticker-escapes-everything problem (the two
   fixes above were symptom-chasing: bumping each bar to 1000 to out-rank the 99
   sticker). The real issue is .corner-ribbon-product has a PAGE-GLOBAL z-index:99
   because its card never established a stacking context - so it also painted over
   the nav scrim (z-index:15) and stayed bright while the page dimmed. isolation
   contains the sticker's z-index INSIDE its own card, so it dims with the card and
   can never poke through the scrim/overlays again. Intra-card stacking is unchanged
   (the ribbon still sits over the product image). NB the grid has size variants -
   .data_grid_card_image (normal) / _image_small / _image_large - so target the
   ribbon's actual positioned wrapper across ALL of them by substring (the search
   grid in "Small" view uses _small, which .data_grid_card alone missed). */
[class*="data_grid_card_image"] { isolation: isolate; }

/* (match filters + label height) Product delivery options now use the native
   input with the brand-blue accent, exactly like the category filter radios,
   and the custom b-input dot is retired. Centred flex row so the icon + label
   line up with the control. Supersedes the v3.3 dot-centring (dot now hidden). */
.delivery_options .b-contain {
  display: flex; align-items: center; gap: 8px;
  position: static; padding-left: 0; margin: 0 0 .6rem;
  cursor: pointer; font-size: .95rem; line-height: 1.3;
}
.delivery_options .b-contain .b-contain-label-text-custom { display: none; }
.delivery_options .b-contain .b-input { display: none !important; }
.delivery_options .b-contain > input[type="radio"][name],
.delivery_options .b-contain > input[type="radio"][data-grid-control] {
  position: static !important; opacity: 1 !important; z-index: auto !important;
  width: 16px !important; height: 16px !important; min-width: 16px !important;
  margin: 0 !important; order: -1; flex: 0 0 auto;
  appearance: auto !important; -webkit-appearance: auto !important;
  accent-color: var(--apol-color-primary); pointer-events: auto !important;
  clip: auto !important; clip-path: none !important;
}
.delivery_options .b-contain > input[type="radio"]:not([name]):not([data-grid-control]) {
  display: none !important;   /* decorative twin */
}

/* (Go button height) Equalise the click&collect Go button with the postcode
   input via the row's existing align-items:stretch, rather than a fixed/percent
   height which left it overhanging. Both items stretch to one height, so the
   button can no longer exceed the input. Supersedes the v3.3 height:100%. */
.input_container_search { align-items: stretch !important; }
.input_container_search .input_item_search { display: flex !important; align-items: stretch; }
.input_container_search .input_item_search > .input-icons { display: flex; align-items: stretch; flex: 1 1 auto; }
.input_container_search .input_item_search .search_input_field_quarter_width,
.input_container_search .input_item_search .maxwidthinput {
  align-self: stretch; box-sizing: border-box;
}
.search_collect_button {
  height: auto !important; align-self: stretch !important;
  top: 0 !important; box-sizing: border-box; min-height: 0;
}

/* ============================================================================
   ECOM v3.5 - 12 Jun: filter group header size, mobile drawer internal scroll,
   delivery icon/label gap. Append-only; end-of-cascade overrides.
   ============================================================================ */

/* (header font size) Filter group headers (Price Range / etc.) read larger than
   the Search / Sort / View control pills. When apol.nav.js transforms them they
   become .92rem summaries; if the transform hasn't run they stay as <h3> at 1rem
   with a divider, which looks oversized. Pin both to the control-pill size so the
   row is consistent whether or not the transform has executed. */
.apol-filter-groups h3 {
  font-size: .92rem !important; font-weight: 600;
  padding: 9px 2px !important; border-bottom: 0 !important;
}
.apol-filter-group > .apol-filter-group-summary { font-size: .92rem !important; }

/* (mobile drawer internal scroll) The drawer body already scrolls
   (overflow-y:auto), but touch/wheel was chaining through to the page behind it,
   so the body scrolled instead of the filter list. Contain the scroll to the
   drawer, and keep the body lock scoped to mobile only (on desktop the panel is
   permanently open and inline, so locking the body there would freeze the page). */
@media (max-width: 980px) {
  details.apol-filter-panel > .apol-filter-body {
    overscroll-behavior: contain; touch-action: pan-y;
  }
  body:has(details.apol-filter-panel[open]) { overflow: hidden !important; }
}

/* (delivery icon -> label gap) Tighten the space between the delivery / click &
   collect icon and its word. The flex gap was 8px; the emitter also outputs a
   literal &nbsp; between icon and label, so the two together read too far apart.
   Drop the gap so they sit close. (Removing the &nbsp; in the emitter would close
   it fully - bundled into the delivery-script externalisation edit.) */
.delivery_options .b-contain { gap: 4px; }

/* ============================================================================
   ECOM v3.6 - 12 Jun: fix View-results button visibility.
   The v3.2 base rule ".apol-filter-drawer-apply { display:none }" (line ~3242)
   was appended AFTER the mobile "display:block" rule, so with equal specificity
   it won at every width and kept the button hidden even in the drawer. Re-assert
   the mobile show with !important so it beats that later unscoped rule; desktop
   still falls through to display:none (this @media doesn't match there).
   ============================================================================ */
@media (max-width: 980px) {
  .apol-filter-drawer-apply { display: block !important; }
}

/* ============================================================================
   ECOM v3.7 - 12 Jun: filter drawer slide-OUT on close, and real scroll lock.
   ============================================================================ */
@media (max-width: 980px) {
  /* Slide-out: apol.nav.js adds .apol-filter-closing (while [open] is still set)
     so the body animates back off-canvas; it removes [open] on transitionend.
     Override the [open] translateX(0) and keep it visible through the slide. */
  details.apol-filter-panel.apol-filter-closing > .apol-filter-body {
    transform: translateX(105%) !important;
    visibility: visible !important;
  }

  /* Real scroll lock: the document scrolls on <html>, so body{overflow:hidden}
     alone never stopped the page behind the drawer. Lock <html> too; combined
     with overscroll-behavior:contain on the drawer, only the filter list moves. */
  html:has(details.apol-filter-panel[open]) { overflow: hidden !important; }
}

/* ============================================================================
   ECOM v3.8 - 12 Jun: filter option font parity + View-results button flow.
   ============================================================================ */

/* (font) Price/balls/sweaty option labels wrap their text in <span>, so the
   global ".b-contain span { font-size:1rem }" sizes them larger than the other
   filters' labels (which have no span and inherit .95rem from the panel). Scope
   a panel-level override (0,3,1 beats the global 0,1,1) so every filter option
   reads .95rem. */
.apol-filter-group-panel .b-contain span { font-size: .95rem; }

/* (View-results button) v3.2 made it position:sticky + margin-top:auto, which in
   the flex-column drawer pushed it off to the right when a long group expanded.
   Make it a normal full-width block at the foot of the scroll flow, so the drawer
   scrolls down to it as expected. */
@media (max-width: 980px) {
  .apol-filter-drawer-apply {
    position: static !important;
    margin: 16px 0 0 !important;
    bottom: auto !important;
    flex: 0 0 auto;
  }
}

/* ============================================================================
   ECOM v3.9 - 12 Jun: stop the mobile filter drawer wrapping into a 2nd column.
   The drawer body is flex-direction:column (v3.2) but inherited flex-wrap:wrap
   from the desktop ".apol-filter-body" rule. With the drawer's fixed height
   (top:0;bottom:0), a wrapping column overflows SIDEWAYS into a new column
   instead of down - which shoved the View-results button off to the right AND
   left nothing to scroll. Force nowrap: items stack vertically, overflow, and
   the body's overflow-y:auto scrolls. Fixes the button position and the scroll.
   ============================================================================ */
@media (max-width: 980px) {
  details.apol-filter-panel > .apol-filter-body { flex-wrap: nowrap !important; }
}


/************************ ALERTS / "ADDED TO BASKET" CONFIRMATION ****************************/
/* Migrated from the retired style.min.css (this is what drives the .you_are_logged_in_text
   green-tick overlay shown after add-to-basket, plus its error variant). Three syntax errors
   in the original were corrected so it parses: the colour value in the success fill keyframe,
   the malformed second fill-keyframe name (now fill_error), and the SCSS-style nesting under
   .progress (flattened). Success/error colours kept literal as they are semantic. */
.you_are_logged_in_text {
  position: fixed; top: 0px; left: 0px; text-align: center; width: 100%; height: 100%;
  padding: 0px; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(0px);
  z-index: 99999; display: none;
}
.you_are_logged_in_text_inner {
  position: relative; color: #fff; letter-spacing: 2px; word-spacing: 2px;
  font-family: 'Roboto Condensed', "Font Awesome 7 Pro", Georgia, sans-serif !important;
  font-size: 1.5em; font-weight: 100; text-transform: none; z-index: 1000; width: 100%; top: 20vh;
}
.checkmark_circle_success {
  stroke-dasharray: 216; stroke-dashoffset: 216; stroke-width: 2; stroke-miterlimit: 10;
  stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark_circle_error {
  stroke-dasharray: 216; stroke-dashoffset: 216; stroke-width: 2; stroke-miterlimit: 10;
  stroke: red; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
  width: 106px; height: 106px; border-radius: 50%; display: block; stroke-width: 4;
  stroke: #fff; stroke-miterlimit: 10; margin: 3% auto; box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark_error {
  width: 106px; height: 106px; border-radius: 50%; display: block; stroke-width: 4;
  stroke: #fff; stroke-miterlimit: 10; margin: 3% auto; box-shadow: inset 0px 0px 0px red;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark_check {
  transform-origin: 50% 50%; stroke-dasharray: 98; stroke-dashoffset: 98;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.checkmark_check_error {
  transform-origin: 50% 50%; stroke-dasharray: 98; stroke-dashoffset: 98;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.progress { transform: rotate(-90deg); stroke: black; position: absolute; top: 5%; left: 5%; }
.progress circle { stroke-dasharray: 130; stroke-dashoffset: 130; animation: dash 1.5s infinite; }
.progress.progress--thin { left: auto; right: 5%; }
@keyframes dash { 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -130; } }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 80px rgba(0, 0, 0, 0); } }
@keyframes fill_error { 100% { box-shadow: inset 0px 0px 0px 80px red; } }

/* ============================================================================
   PDP v4 - 13 Jun: accordion sections open in a right-hand DRAWER (kills the
   sticky buy-box scroll jump); mobile gallery uses prev/next ARROWS instead of
   dots; mobile gallery pulled up onto the breadcrumb divider; spec icon rows
   tidied; defensive hide of the retired legacy nav spacer. Pairs with
   apol.pdp.gallery.js?v=4. Append-only; bump apol.base.css ?v=.
   ============================================================================ */

/* ---- safety net: kill the retired webslide nav spacer ---------------------
   apol.nav.js owns the scroll reveal now (#apol-nav-spacer). The legacy
   resources.min.js still creates a 'menu_desktop-spacer' until that patched
   file is deployed + its ?v= bumped; hiding it here stops the ~694px grey
   block regardless of cache. Harmless once the patched JS is live. */
.menu_desktop-spacer { display: none !important; }

/* ---- (#1) Accordion -> slide-out drawer ---------------------------------- */
/* Once JS has drawerized, hide the in-flow chevron so the "open" icon sits on
   the right where the chevron was. */
.pdp-accordion.pdp-drawerized .pdp-acc > summary::after { display: none; }
.pdp-accordion.pdp-drawerized .pdp-acc > summary { cursor: pointer; }
.pdp-acc-ico { flex: 0 0 auto; font-size: .9em; opacity: .5;
  transition: opacity .2s ease, transform .2s ease; }
.pdp-accordion.pdp-drawerized .pdp-acc > summary:hover .pdp-acc-ico {
  opacity: 1; transform: translate(2px, -2px); }

/* The shared drawer + scrim (apol.pdp.gallery.js appends both to <body>).
   Motion mirrors the mobile filter drawer: fixed right, .28s ease, white,
   shadow. Above nav (1000) and basket/search (9999), below filter drawer
   (11995). */
.pdp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(480px, 92vw); z-index: 11990;
  display: flex; flex-direction: column;
  background: #fff; box-shadow: -12px 0 32px rgba(0,0,0,.18);
  transform: translateX(105%); visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
  will-change: transform;
}
.pdp-drawer.is-open { transform: translateX(0); visibility: visible; }
.pdp-drawer__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 16px 20px;
  border-bottom: 1px solid var(--apol-color-border, #dcdcdc);
}
.pdp-drawer__title {
  margin: 0; font-family: var(--apol-font-heading, inherit); font-weight: 700;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--apol-color-heading, #222);
}
.pdp-drawer__close {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 0;
  background: transparent; cursor: pointer; padding: 6px; line-height: 1;
  font-size: 1.3rem; color: var(--apol-color-heading, #222);
}
.pdp-drawer__body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 20px 28px;
}
.pdp-drawer__body > .pdp-acc-body { padding: 0; }

.pdp-drawer-scrim {
  position: fixed; inset: 0; z-index: 11985; background: rgba(0,0,0,.4);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.pdp-drawer-scrim.is-open { opacity: 1; visibility: visible; }
body.pdp-drawer-open { overflow: hidden; }
/* the real scroll container is usually <html>; lock it while the drawer is
   open so only the panel scrolls. The drawer body already scrolls on its own. */
html:has(.pdp-drawer.is-open) { overflow-y: hidden !important; }

/* ---- (#spec) tidy the product spec icon rows -----------------------------
   Fix the invalid `align-items:left`, vertically centre the icon with its
   two-line label, cap the icon size, tighten row spacing. Works in the drawer
   and on the full spec page; covers svg / <i> / <img> icon markup. */
.spec_icon_span,
.spec_icon_span_fontawesome { align-items: center; justify-content: flex-start; padding: 12px 10px; }
.spec_container { align-items: center; gap: 14px; }
.spec_icon {
  flex: 0 0 34px; width: 34px; height: 34px; min-width: 0; margin: 0; float: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; overflow: hidden;
}
.spec_icon svg { width: 26px !important; height: 26px !important; font-size: 26px; }
.spec_icon i   { font-size: 26px; line-height: 1; }
.spec_icon img { width: 26px; height: 26px; object-fit: contain; }
.spec_icon_text { float: none; margin: 0; }
.spec_icon_details { margin-top: 2px; }
/* desktop: the drawer is wide enough to lay the spec items two across rather
   than one tall column. Mobile keeps them stacked (looks right when narrow). */
@media only screen and (min-width: 1001px) {
  .pdp-drawer__body .spec_icon_span,
  .pdp-drawer__body .spec_icon_span_fontawesome {
    display: inline-flex; width: 48%; vertical-align: top; box-sizing: border-box;
  }
}

/* ---- (#4) Mobile gallery prev/next arrows (replaces .pdp-dots) ------------ */
.pdp-nav-arrow { display: none; }
@media only screen and (max-width: 1000px) {
  .product_gallery_container { position: relative; }
  .pdp-has-arrows .pdp-nav-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: auto; height: auto; padding: 8px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; cursor: pointer;
    color: #1d1d1d; font-size: 1.85rem; line-height: 1;
    /* halo so the dark chevron stays legible over darker product images;
       flip color to #fff + a dark shadow if your imagery is mostly dark. */
    text-shadow: 0 0 8px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.6);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease;
  }
  .pdp-has-arrows .pdp-nav-arrow--prev { left: 2px; }
  .pdp-has-arrows .pdp-nav-arrow--next { right: 2px; }
  .pdp-has-arrows .pdp-nav-arrow.is-hidden { opacity: 0; pointer-events: none; }
  .pdp-has-arrows .pdp-nav-arrow { display: none !important; } /* chevrons hidden - swipe still works */
  .pdp-dots { display: none !important; }

  /* ---- (#mobile) gallery spacing to the breadcrumb -----------------------
     The item page is now decoupled from the GLOBAL page gutter (see the decouple
     block ~2947): the per-page "Space above content" token on .pdp-stage is the
     sole top-spacing lever. So zero the crumb margin here too - 0 sits the gallery
     on the divider, and the item-content-mt token pushes it down when set. */
  .main_content_inner .breadcrumb_holder:has(~ .pdp-stage),
  .main_content_inner_rows .breadcrumb_holder:has(~ .pdp-stage) { margin-bottom: 0; }
  .main_content_inner .backtocat_positon:has(~ .pdp-stage),
  .main_content_inner_rows .backtocat_positon:has(~ .pdp-stage) { margin: 0; padding: 0; }
  .flex-container-columns.pdp-stage { margin-top: 0; }
  /* breathing space between the gallery and the title/buy-box below it */
  .flex-container-columns.pdp-stage > .pdp-right { margin-top: 18px; }
}

/* ---- sale corner-ribbon must not paint over the mobile header -----------
   The header is position:static at <=980px, so its z-index:1000 does nothing
   and the absolute .corner-ribbon-product (z-index:99) bleeds over the logo /
   burger. Give the header bar a real stacking context above the ribbon. */
@media only screen and (max-width: 980px) {
  .logo_menu_container { position: relative; z-index: 1000; }
}


/* ============================================================================
   APOL BASE ADDITIONS  (merged by Claude - single-owner section)
   Only rules NOT already present in base. The Button system, .input-icons and
   the tokenised colours already in base are intentionally NOT duplicated here.
   ============================================================================ */

/* --- signed-in header icon + label (was the logged-in-home bug) ------------ */
.secondary_link_signedin:link,
.secondary_link_signedin:visited,
.secondary_link_signedin:hover,
.secondary_link_signedin:active { color: var(--apol-hdricon-active-color, var(--apol-color-primary)); text-decoration: none; }
.secondary_link_signedin:focus  { outline: none; }
/* Label sizing for both states; the text itself is filled by apol.nav.js.
   Match the Home/Stores/Bag labels (.tertiary_link2 = .72rem / 300) with
   explicit values, NOT inherit: the logged-out link is .tertiary_link2 but the
   logged-in link is .secondary_link_signedin, which has no font sizing, so
   inherit would pull the wrong size on the signed-in state. Also drops the
   legacy -8px lift + 13px/400 overrides that pushed the label out of line. */
.signin_button_text,
.signout_button_text { position: static; top: auto; left: auto;
                       display: block; font-size: .72rem; font-weight: 300; }

/* Signed-in account link parity. The logged-out link is .tertiary_link2 (flex
   column + 24px icon), but the logged-in link carries .secondary_link_signedin
   instead and so missed all of that — small icon, off-centre, label adrift.
   Re-apply the .tertiary_link2 layout to whatever anchor sits in the login wrap,
   scoped so it can't affect .secondary_link_signedin used elsewhere. Colour is
   left to .secondary_link_signedin so the blue signed-in cue is preserved. */
.mobile_header_icons_iconwrap_login > a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  position: relative; font-size: .72rem; font-weight: 300;
}
.mobile_header_icons_iconwrap_login > a i { font-size: var(--apol-hdricon-size); line-height: 1; font-weight: 100 !important; }
.mobile_header_icons_iconwrap_login > a br { display: none; }

/* --- account slide-out (was unstyled on the new template) ------------------ */
.sidenav {
  position: fixed; top: 0; left: 0; width: 300px; height: calc(100% + 60px);
  margin: 0; padding-bottom: 60px; text-align: left;
  background-color: var(--apol-color-background); z-index: 999999; overflow-y: auto;
  backface-visibility: hidden; transform: translateX(-105%);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
}
.sidenav.right-aligned { left: auto; right: 0; transform: translateX(100%); }
/* Full-screen scrim behind the slide-out. The overlay element is created by
   apol.nav.js and appended to <body> (line 881 forces position:fixed), but the
   migration dropped the inset/size/z-index and the display toggle, so it was
   present-but-invisible. Sits just under the .sidenav (z 999999). Clicking it
   closes the panel via apol.nav.js's overlay click handler. */
.sidenav-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: none; z-index: 999998;
  background-color: rgba(0,0,0,.5); opacity: 0;
  will-change: opacity; transition: opacity .22s ease; cursor: pointer;
}
.sidenav-overlay.active { display: block; opacity: 1; pointer-events: auto; }
.sidenav li { float: none; line-height: 24px; }
.sidenav li.active { background-color: rgba(0,0,0,.05); }
.sidenav li > a { display: block; height: 48px; line-height: 48px; padding: 0 32px; font-size: 1em; font-weight: 400; color: var(--apol-color-text); border-left: solid 3px transparent; }
.sidenav li > a:hover { background-color: rgba(0,0,0,.05); border-left: solid 3px var(--apol-color-primary); }
.sidenav .user-view { position: relative; margin: 0 0 8px 0; padding: 32px; text-align: center; font-size: 14px; line-height: 24px; color: var(--apol-color-primary-contrast); }
.sidenav .user-view > a { height: auto; padding: 0; }
.sidenav .user-view > a:hover { background-color: transparent; }
.sidenav .user-view .background { position: absolute; inset: 0; z-index: -1; overflow: hidden; object-fit: cover; background-color: var(--apol-color-primary); }
.sidenav .user-view .circlesidenav, .sidenav .user-view .name, .sidenav .user-view .email { display: block; }
.sidenav .user-view .circlesidenav { width: 64px; height: 64px; }
.sidenav .user-view .name  { margin-top: 16px; font-size: .875em; line-height: 24px; font-weight: 400; }
.sidenav .user-view .email { padding-bottom: 16px; font-size: .875em; line-height: 24px; font-weight: 400; }
.sidenav_icon { display: inline-block; width: 30px; text-align: left; }
.sidenavdivider { width: 100%; height: .05em; background-color: rgba(0,0,0,.2); }
img.circlesidenav { border-radius: 50%; object-fit: cover; margin: 0 auto; }

/* --- floating placeholder hooks (animation is JS in resources.min.js) ------- */
.floating-placeholder { line-height: normal; margin-top: 0; font-size: .85em; }
.floating-placeholder.active { top: 0; text-decoration: none; }
.login_input_spacing { padding: 10px 0; }

/* --- basket / delivery / order-confirmation card system --------------------- */
/* ---- layout ---- */
.basket-page-wrapper { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.basket-left-column  { flex: 2; min-width: 0; }
.basket-right-column { flex: 1; min-width: 280px; }

/* ---- card ---- */
.basket-card {
  background: var(--apol-color-background);
  border: 1px solid var(--apol-color-border);
  border-radius: var(--apol-radius);   /* [CHECK] copies used 8px and 12px; unified to --apol-radius (8px) */
  padding: 20px;
}

/* ---- item count header ---- */
.basket-item-count { margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid var(--apol-color-border); font-size: 16px; font-weight: 600; color: var(--apol-color-heading); }
.basket-count-row  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid var(--apol-color-border); }

/* ---- basket action buttons (clear / print) ---- */
.basket-action-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 6px 12px; border: 1px solid; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.basket-clear-btn       { color: var(--apol-color-accent); border-color: var(--apol-color-accent); background: var(--apol-color-background); }
.basket-clear-btn:hover { color: var(--apol-color-primary-contrast); background: var(--apol-color-accent); text-decoration: none; }
.basket-print-btn       { color: var(--apol-color-muted); border-color: var(--apol-color-border); background: var(--apol-color-background); }
.basket-print-btn:hover { color: var(--apol-color-heading); background: var(--apol-color-surface); text-decoration: none; }

/* ---- item rows ---- */
.basket-items-list { display: flex; flex-direction: column; }
.basket-item { display: flex; align-items: center; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--apol-color-border); }
.basket-item:last-child { border-bottom: none; }
.basket-item-image { flex-shrink: 0; width: 80px; height: 80px; }
.basket-item-image .shopping_cart_image_ecom { width: 80px; height: 80px; border-radius: var(--apol-radius); background-color: var(--apol-color-surface); background-size: contain; background-position: center; background-repeat: no-repeat; }
.basket-item-details { flex: 1; min-width: 0; }
.basket-item-name { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.basket-item-name a { color: var(--apol-color-heading); text-decoration: none; }
.basket-item-name a:hover { color: var(--apol-color-primary); }
.basket-item-remove { color: var(--apol-color-primary); text-decoration: none; font-size: 14px; }
.basket-item-remove:hover { text-decoration: underline; }
.order-item-qty { display: block; margin-top: 5px; font-size: 14px; color: var(--apol-color-muted); }

/* ---- quantity ---- */
.basket-item-quantity { flex-shrink: 0; text-align: center; }
.basket-qty-wrapper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--apol-color-border); border-radius: 6px; overflow: hidden; }
.basket-qty-wrapper select, .basket-qty-wrapper .small_select {
  height: 100%; min-width: 60px; padding: 0 30px 0 12px; border: none; background: var(--apol-color-background);
  font-size: 16px; line-height: normal; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
.basket-qty-wrapper select:focus { outline: none; }
.basket-stock-warning { display: block; margin-top: 5px; font-size: 12px; color: var(--apol-color-accent); }

/* ---- subtotal / ex-VAT ---- */
.basket-item-subtotal { flex-shrink: 0; min-width: 80px; margin-left: auto; text-align: right; font-size: 18px; font-weight: 600; color: var(--apol-color-heading); }
.basket-exvat { display: block; font-size: 12px; font-weight: 400; color: var(--apol-color-muted); }

/* ---- order summary card ---- */
.order-summary-card { position: sticky; top: 20px; }
.order-summary-title { margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid var(--apol-color-border); font-size: 20px; font-weight: 600; color: var(--apol-color-heading); }
.order-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 15px; color: var(--apol-color-muted); }
.order-summary-total { margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--apol-color-border); font-size: 18px; font-weight: 600; color: var(--apol-color-heading); }
.order-summary-total .basket-exvat { display: inline; font-size: 13px; }
.order-summary-button { margin-top: 20px; }
.order-summary-button .Button { width: 100%; padding: 15px 20px; font-size: 16px; border-radius: var(--apol-button-radius); }

/* ---- savings / discount / address / terms (order-confirmation) ---- */
.order-summary-section-header { display: flex; justify-content: space-between; margin-top: 4px; padding: 10px 0 4px 0; border-top: 1px solid var(--apol-color-border); font-size: .95em; font-weight: 600; color: var(--apol-color-heading); }
.order-summary-saving, .order-summary-saving span:last-child { color: var(--apol-color-accent); font-weight: 600; }  /* [CHECK] savings red -> accent (#cc2127); copies used #d9534f/#e74c3c */
.order-discount-section { margin-top: 5px; padding-top: 20px; border-top: 1px solid var(--apol-color-border); }
.order-discount-title { display: inline-block; margin: 0 0 10px 0; font-size: 15px; font-weight: 600; color: var(--apol-color-primary); text-decoration: none; cursor: pointer; }
.order-discount-title:hover { color: var(--apol-color-primary); text-decoration: underline; }
.order-discount-title::before { content: "+ "; font-weight: bold; }
.order-discount-title.open::before { content: "- "; }
.order-discount-input-wrapper { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.order-discount-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--apol-color-border); border-radius: 6px; font-size: 14px; }
.order-discount-input:focus { outline: none; border-color: var(--apol-color-primary); }
.order-discount-button { width: 100%; margin-top: 12px; padding: 10px 20px !important; white-space: nowrap; }
.order-address-section { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--apol-color-border); }
.order-address-title { margin: 0 0 10px 0; font-size: 15px; font-weight: 600; color: var(--apol-color-heading); }
.order-address-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--apol-color-muted); }
.order-terms-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--apol-color-border); }
.order-terms-section label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--apol-color-heading); cursor: pointer; }
.order-terms-section input[type="checkbox"] { margin-top: 3px; }
.order-checkout-button { width: 100%; margin-top: 15px; padding: 15px 20px !important; font-size: 16px !important; border-radius: var(--apol-button-radius); }

/* ---- "three options" strip ---- */
.basket-options-wrapper { display: flex; flex-wrap: wrap; width: 100%; margin-top: 30px; overflow: hidden; background: var(--apol-color-surface); border: 1px solid var(--apol-color-border); border-radius: var(--apol-radius); }
.basket-option-item { flex: 1 1 33.333%; display: flex; flex-direction: row; align-items: flex-start; gap: 15px; padding: 30px 25px; box-sizing: border-box; text-align: left; }
.basket-option-item i { flex-shrink: 0; font-size: 42px; color: var(--apol-color-primary); }
.basket-option-item span { margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--apol-color-heading); }

/* ---- delivery-address page ---- */
.delivery-address-select-wrapper { margin-top: 15px; }
.delivery-address-select { width: 100%; padding: 12px 15px; border: 1px solid var(--apol-color-border); border-radius: 6px; background: var(--apol-color-background); font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.delivery-address-select:focus { outline: none; border-color: var(--apol-color-primary); }
.delivery-left-card { min-height: 280px; }
.selected-address-display { margin-bottom: 15px; padding: 15px 0; border-bottom: 1px solid var(--apol-color-border); }
.selected-address-name { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: var(--apol-color-heading); }
.selected-address-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--apol-color-muted); }
.new-address-section-inline { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--apol-color-border); }
.new-address-title { margin: 0 0 15px 0; font-size: 15px; font-weight: 600; color: var(--apol-color-heading); }
.new-address-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.new-address-form-grid .input-icons, .new-address-form-grid input { width: 100%; }

/* ---- print (basket) ---- */
.basket-print-total { display: none; }
@media print {
  @page { margin: 1cm; }
  .logo_menu_container_background, .logo_menu_container, .logo, #inline-search-mount,
  .menu_desktop, .breadcrumb, .footer_main, .footer_main_inner { display: none !important; }
  .basket-action-btn, .basket-item-remove, .basket-item-image, .basket-qty-wrapper,
  .basket-options-wrapper, .order-summary-button, .order-summary-title, .basket-right-column { display: none !important; }
  .basket-print-total { display: flex !important; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--apol-color-heading); font-size: 16px; font-weight: bold; }
  .basket-page-wrapper { display: block !important; }
  .basket-left-column { width: 100% !important; }
  .basket-card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .basket-item { page-break-inside: avoid; }
  .basket-item-name a { color: #000 !important; text-decoration: none !important; }
}

/* ---- responsive ---- */
@media screen and (max-width: 992px) {
  .basket-page-wrapper { flex-direction: column; }
  .basket-left-column, .basket-right-column { width: 100%; flex: none; }
  .order-summary-card { position: static; }
}
@media screen and (max-width: 768px) {
  .basket-card { padding: 15px; border-radius: 0; }
  .basket-item { flex-wrap: wrap; gap: 12px; padding: 15px 0; }
  .basket-item-image, .basket-item-image .shopping_cart_image_ecom { width: 70px; height: 70px; }
  .basket-item-details { flex: 1; min-width: calc(100% - 90px); }
  .basket-item-quantity { flex-shrink: 0; text-align: left; }
  .basket-item-subtotal { flex: 1; text-align: right; }
  .basket-options-wrapper { flex-direction: column; }
  .basket-option-item { flex: 1 1 100%; gap: 20px; padding: 20px; border-bottom: 1px solid var(--apol-color-border); }
  .basket-option-item:last-child { border-bottom: none; }
  .basket-option-item i { width: 40px; font-size: 32px; }
  .basket-option-item span { font-size: 16px; }
  .new-address-form-grid { grid-template-columns: 1fr; }
  .delivery-left-card { min-height: auto; }
  .order-discount-input-wrapper { flex-direction: column; }
  .order-discount-button { width: 100%; }
}
@media screen and (max-width: 480px) {
  .basket-item-image, .basket-item-image .shopping_cart_image_ecom { width: 60px; height: 60px; }
  .basket-item-details { min-width: calc(100% - 75px); }
}


/* ============================================================================
   ECOM v4.0 - 15 Jun: category filter bar restyle + tighten to page title.
   - Bar: solid #333 with white label/icons/chevron.
   - Reset: white to match the label, RED only on hover.
   - Pull the bar, the "Items:" count and the grid ~18px nearer the title.
   The dark bar + white text currently come from the per-site
   style_additional.css (loaded after this file), so these are scoped high and
   assert the colour props with !important rather than relying on source order.
   ============================================================================ */

/* (1) The bar itself.
   The colours were hardcoded #333/#fff here; they are now App Designer
   tokens that FALL BACK to exactly those values, so an un-themed site looks
   identical. The !important is still required for the reason above (the
   per-site style_additional.css loads after this file) - which also means a
   plain var() override appended later could not win, hence tokenising in
   place rather than adding another layer. */
.apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary {
  background: var(--apol-listing-filterbar-bg, #333) !important;
  color: var(--apol-listing-filterbar-text, #fff) !important;
}
.apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary i,
.apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary .apol-filter-chevron {
  color: var(--apol-listing-filterbar-text, #fff) !important;
}

/* (2) Reset: matches the label, red on hover only; divider reads on dark.
   Scoped to the toolbar, NOT to the summary: on desktop apol.nav.js moves the
   bin out of the (hidden) summary and into the .apol-filter-body bar row, so a
   summary-scoped rule would leave the desktop bin unstyled. On mobile the bin
   is still in the summary, which is inside the toolbar, so this matches there
   too. The reset button is unique, so the looser scope collides with nothing. */
.apol-cat-toolbar .apol-filter-reset,
.apol-cat-toolbar .apol-filter-reset i {
  color: var(--apol-listing-filterbar-text, #fff) !important;
  border-left-color: var(--apol-listing-filterbar-rule, rgba(255, 255, 255, .28));
}
.apol-cat-toolbar .apol-filter-reset:hover,
.apol-cat-toolbar .apol-filter-reset:hover i {
  color: var(--apol-color-accent) !important;   /* #cc2127 */
}

/* (3) Lift the toolbar, results count and grid up toward the page title.
   Products sit in the in-flow sibling after .apol-cat-toolbar, so they ride
   up with it. */
.apol-cat-toolbar { margin-top: -18px; }

/* ----------------------------------------------------------------------------
   PDP: lift the gallery/buy-box row up to the breadcrumb divider (desktop).
   Keeps the breadcrumb spacing/line where it is; only closes the band below it.
   Scoped to pages with a .pdp-stage so category/listing pages are untouched.
   Append-only; bump apol.base.css ?v=.
---------------------------------------------------------------------------- */
@media only screen and (min-width: 1001px) {
  .flex-container-columns.pdp-stage { margin-top: 0; }
}

/* ============================================================================
   APP DESIGNER - editable button variant presets (token-driven).
   Appended last so they override the verbatim-legacy button rules above by
   source order (equal specificity). Defaults equal prior values EXCEPT
   .Button_round, which is now a pill (was a hardcoded 50% ellipse).
   Bump apol.base.css ?v= in the emitters after deploying.
   ========================================================================= */
.Button_outline {
  background-color: transparent;
  border: var(--apol-button-outline-width, 2px) solid var(--apol-button-outline-color, var(--apol-color-primary, #0099cc));
  color: var(--apol-button-outline-text, var(--apol-color-primary, #0099cc));
  border-radius: var(--apol-button-corner, 8px);
}
.Button_outline:hover, .Button_outline:focus {
  background-color: var(--apol-button-outline-color, var(--apol-color-primary, #0099cc));
  color: var(--apol-button-outline-hover-text, #ffffff);
  border-color: var(--apol-button-outline-color, var(--apol-color-primary, #0099cc));
}
.Button_round { border-radius: var(--apol-button-round-radius, 999px); }
/* keep the rounded radius on hover/focus: .Button:hover restates --apol-button-corner
   at equal (0,2,0) specificity, so re-assert here (later in source order). */
.Button_round:hover, .Button_round:focus { border-radius: var(--apol-button-round-radius, 999px); }

/* ===== Accent button trio (App Designer) =====================================
   primary/secondary/tertiary = --apol-color-primary / -accent / -tertiary.
   Solids are handled above (--btn-c + darken hover). Here: outline + ghost,
   and keep ghosts transparent on hover (overriding the solid darken). ======= */
/* outline */
.Button_primary_outline, .Button_secondary_outline, .Button_tertiary_outline { background-color: transparent; border-style: solid; border-width: var(--apol-button-outline-width, 2px); border-radius: var(--apol-button-corner, 8px); }
.Button_primary_outline   { border-color: var(--apol-color-primary, #0099cc); color: var(--apol-color-primary, #0099cc); }
.Button_secondary_outline { border-color: var(--apol-color-accent, #cc2127); color: var(--apol-color-accent, #cc2127); }
.Button_tertiary_outline  { border-color: var(--apol-color-tertiary, #6c757d); color: var(--apol-color-tertiary, #6c757d); }
.Button_primary_outline:hover,   .Button_primary_outline:focus   { background-color: var(--apol-color-primary, #0099cc); color: #fff; }
.Button_secondary_outline:hover, .Button_secondary_outline:focus { background-color: var(--apol-color-accent, #cc2127); color: #fff; }
.Button_tertiary_outline:hover,  .Button_tertiary_outline:focus  { background-color: var(--apol-color-tertiary, #6c757d); color: #fff; }
/* ghost / text */
.Button_primary_ghost, .Button_secondary_ghost, .Button_tertiary_ghost { background-color: transparent; border-color: transparent; }
.Button_primary_ghost,   .Button_no_background_light_blue { color: var(--apol-color-primary, #0099cc); }
.Button_secondary_ghost, .Button_no_background_red        { color: var(--apol-color-accent, #cc2127); }
.Button_tertiary_ghost,  .Button_no_background_tertiary   { color: var(--apol-color-tertiary, #6c757d); }
.Button_primary_ghost:hover   { color: color-mix(in srgb, var(--apol-color-primary, #0099cc) 78%, #000); }
.Button_secondary_ghost:hover { color: color-mix(in srgb, var(--apol-color-accent, #cc2127) 78%, #000); }
.Button_tertiary_ghost:hover  { color: color-mix(in srgb, var(--apol-color-tertiary, #6c757d) 78%, #000); }
/* ghosts never gain a fill on hover (override the solid darken hover above) */
.Button_no_background:hover, .Button_no_background:focus, .Button_primary_ghost:hover, .Button_secondary_ghost:hover, .Button_tertiary_ghost:hover, .Button_primary_ghost:focus, .Button_secondary_ghost:focus, .Button_tertiary_ghost:focus { background-color: transparent; border-color: transparent; }
.Button_small_padding { padding: var(--apol-button-sm-pad-y, 0px) var(--apol-button-sm-pad-x, 18px); }
.Button_large {
  padding: var(--apol-button-lg-pad-y, 6px) var(--apol-button-lg-pad-x, 44px);
  font-size: var(--apol-button-lg-font-size, 1.15rem);
  height: auto; min-height: 54px;
}
/* ===== App Designer: independent outline / no-background controls ============
   Outline & no-background buttons get their OWN corner/padding/font (edited
   separately to solid), and every button's text follows the per-variant label
   colour. Appended after the variant presets so they win on source order. ==== */
/* Outline: own border width, corner, padding, font size/weight */
.Button_outline, .Button_primary_outline, .Button_secondary_outline, .Button_tertiary_outline {
  border-width: var(--apol-button-outline-width, 2px);
  border-radius: var(--apol-button-outline-corner, var(--apol-button-corner, 8px));
  padding: var(--apol-button-outline-pad-y, var(--apol-button-padding-y, 0px)) var(--apol-button-outline-pad-x, var(--apol-button-padding-x, 30px));
  font-size: var(--apol-button-outline-font-size, var(--apol-button-font-size, 1rem));
  font-weight: var(--apol-button-outline-font-weight, var(--apol-button-font-weight, 600));
}
/* Outline hover: fill with the variant colour, flip text to the matching label colour + optional underline */
.Button_primary_outline:hover,   .Button_primary_outline:focus   { color: var(--apol-button-primary-text, #fff); border-color: var(--apol-color-primary, #0099cc); text-decoration: var(--apol-button-outline-underline-hover, none); }
.Button_secondary_outline:hover, .Button_secondary_outline:focus { color: var(--apol-button-secondary-text, #fff); border-color: var(--apol-color-accent, #cc2127); text-decoration: var(--apol-button-outline-underline-hover, none); }
.Button_tertiary_outline:hover,  .Button_tertiary_outline:focus  { color: var(--apol-button-tertiary-text, #fff); border-color: var(--apol-color-tertiary, #6c757d); text-decoration: var(--apol-button-outline-underline-hover, none); }
.Button_outline:hover, .Button_outline:focus { text-decoration: var(--apol-button-outline-underline-hover, none); }
/* No-background: own padding + font size/weight; text stays the variant colour, no fill/border */
.Button_no_background, .Button_primary_ghost, .Button_secondary_ghost, .Button_tertiary_ghost {
  padding: var(--apol-button-nobg-pad-y, 0px) var(--apol-button-nobg-pad-x, 5px);
  font-size: var(--apol-button-nobg-font-size, 0.9rem);
  font-weight: var(--apol-button-nobg-font-weight, 600);
  min-height: 0; height: auto;
}
.Button_no_background:hover, .Button_no_background:focus, .Button_primary_ghost:hover, .Button_secondary_ghost:hover, .Button_tertiary_ghost:hover { text-decoration: var(--apol-button-nobg-underline-hover, none); }
/* Sticky header is handled by the scroll-up nav reveal (desktop) and the .apol-mini
   bar (tablet/mobile), both gated by the App Designer --apol-header-sticky token in
   apol.nav.js. The old .logo_row position:sticky mechanism was retired (it fought the
   .apol-mini bar). Bump apol.base.css ?v= in the emitters after deploying. */
/* ============================================================================
   APP DESIGNER preview: drop the reserved scrollbar gutter so there is no empty
   white track on the right. The design iframe is sized to its content and never
   scrolls, so this only affects the editor preview (html.apol-editmode).
   ========================================================================== */
html.apol-editmode { scrollbar-gutter: auto !important; overflow-y: auto !important; }

/* ----------------------------------------------------------------------------
   App Designer: header-icon size, mobile/tablet tier. Independent of desktop;
   falls back to --apol-hdricon-size until a mobile value is set, so existing
   sites are unchanged. Appended last so it wins over the desktop size rules.
---------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .mobile_header_icons a i { font-size: var(--apol-hdricon-size-m, var(--apol-hdricon-size)); }
  .mobile_header_icons_iconwrap_login > a i { font-size: var(--apol-hdricon-size-m, var(--apol-hdricon-size)); }
}

/* signed-in account label obeys the same on/off toggle as the other icon labels
   (overrides the earlier hardcoded display:block on .sign*_button_text). */
.signin_button_text, .signout_button_text { display: var(--apol-hdricon-label-display, block); }
@media (max-width: 980px) {
  .signin_button_text, .signout_button_text { display: var(--apol-hdricon-label-display-m, none); }
}

/* ============================================================================
   App Designer  -  Listing (category) + Item (product) tokens
   Added for the App Designer listing/item editing panels. Every token falls
   back to the current value, so output is unchanged until a control is touched.
   ============================================================================ */
/* Listing cards: proportions ride the inherited --ar (per-card inline --ar still wins) */
.data_grid_card_holder { --ar: var(--apol-listing-card-ar, 16 / 9); }
.data_grid_card {
  padding: var(--apol-listing-card-pad, 0px) !important;
  margin-bottom: var(--apol-listing-card-mb, 20px) !important;
  background: var(--apol-listing-card-bg, transparent) !important;
  border: var(--apol-listing-card-border-width, 0px) solid var(--apol-listing-card-border-color, #e2e2e2) !important;
  border-radius: var(--apol-listing-card-radius, 0px) !important;
}
/* Card CTA shape. NB: assumes the card buy/view button is the standard .Button. */
.data_grid_card .viewproduct_button_link,
.data_grid_card_small_related .viewproduct_button_link {
  display: block !important;
  width: calc(var(--apol-listing-btn-width, 100%) + 2 * var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  margin: var(--apol-listing-btn-mt, 12px) calc(var(--apol-listing-btn-mr, 0px) - var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) calc(-1 * var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) calc(var(--apol-listing-btn-ml, 0px) - var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  background: var(--apol-button-bg, #0099cc) !important;
  border-radius: var(--apol-listing-card-btn-radius, var(--apol-button-corner, 3px)) !important;
  overflow: hidden !important;
}
.data_grid_card .viewproduct_button_link:hover,
.data_grid_card_small_related .viewproduct_button_link:hover { filter: brightness(0.92); }
.data_grid_card .viewproduct_button_link a,
.data_grid_card_small_related .viewproduct_button_link a {
  padding: var(--apol-listing-btn-py, 12px) var(--apol-listing-btn-px, 18px) !important;
  line-height: 1.25 !important;
  font-weight: var(--apol-button-font-weight, 600) !important;
  color: var(--apol-button-text, #fff) !important;
}

/* Item / PDP gallery: 'stacked' mode = one hero image + a thumbnail strip.
   apol.pdp.gallery.js reads --apol-pdp-gallery-mode, adds .pdp-gallery--stacked
   and .pdp-hero, and builds the .pdp-thumbs strip. The extra class outranks the
   desktop 1fr/1fr grid, so this wins without !important. */
.pdp-stage .carousel.pdp-gallery.pdp-gallery--stacked { display: block; }
.pdp-stage .pdp-gallery--stacked .gallery-cell,
.pdp-stage .pdp-gallery--stacked .inner-cell { display: none; }
.pdp-stage .carousel.pdp-gallery.pdp-gallery--stacked .pdp-hero { display: block; width: 100%; aspect-ratio: var(--apol-pdp-hero-ar, 1 / 1) !important; }
.pdp-stage .pdp-gallery--stacked .pdp-hero > a,
.pdp-stage .pdp-gallery--stacked .pdp-hero picture { display: block; width: 100%; height: 100%; }
.pdp-stage .pdp-gallery--stacked .pdp-hero img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pdp-thumb { width: 68px; height: 68px; padding: 0; border: 1px solid var(--apol-color-border, #e2e2e2); background: #fff; border-radius: 6px; overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.pdp-thumb.is-active { border-color: var(--apol-color-primary, #0099cc); outline: 1px solid var(--apol-color-primary, #0099cc); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   Gallery VIDEO items (added 2026-07-31)
   A video is a gallery cell (.gallery-cell.pdp-cell-video) whose lightbox link
   (a.pdp-video-link) points at a YouTube/Vimeo embed - Fancybox plays it. The
   poster renders like any gallery image, with a play button overlaid. Markup is
   emitted by the precompiler + runtime PDP gallery builders; the per-mode
   behaviour is in apol.pdp.gallery.js.
   ============================================================================ */
.pdp-cell-video a.pdp-video-link { position: relative; display: block; height: 100%; }

/* play button - a CSS border-triangle, so there is no icon-font dependency */
.pdp-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 3;
  transition: background .15s ease, transform .15s ease;
}
.pdp-play::before {
  content: ""; display: block;
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.pdp-cell-video a.pdp-video-link:hover .pdp-play { background: rgba(0, 0, 0, .72); transform: translate(-50%, -50%) scale(1.06); }

/* stacked mode swaps the hero <img> between image and video cells, so the
   per-cell play badges are suppressed and a single JS-owned hero badge toggles. */
.pdp-stage .carousel.pdp-gallery.pdp-gallery--stacked .pdp-hero { position: relative; }
.pdp-gallery--stacked .pdp-play:not(.pdp-hero-play) { display: none; }
.pdp-hero-play { display: none; }
.pdp-hero.pdp-hero--video .pdp-hero-play { display: flex; }

/* small play badge on a video thumbnail in the strip */
.pdp-thumb--video { position: relative; }
.pdp-thumb--video::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); z-index: 2;
}
.pdp-thumb--video::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); z-index: 3;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}

/* "all photos on one page" grid lightbox: video tiles + the iframe player */
.apol-photogrid-tile--video { position: relative; }
.apol-photogrid-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3;
}
.apol-photogrid-play::before {
  content: ""; display: block;
  border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.apol-photogrid-zoom .apol-photogrid-video {
  width: min(90vw, 1200px); aspect-ratio: 16 / 9; max-width: 100%; max-height: 100%;
  border: 0; background: #000; border-radius: 8px;
}

/* ============================================================================
   App Designer  -  Listing/Item fixes & additions (v2)
   ============================================================================ */
/* Filter bar show/hide: real new-grid filter is .apol-filter-panel (the old
   .filter_wrapper is legacy). Default block = current. */
.apol-filter-panel { display: var(--apol-listing-filter-hide, block); }

/* Review stars on the listing cards (hidden by default in base; toggle shows). */
.data_grid_card_stars_holder,
.data_grid_card_stars_holder_small,
.data_grid_card_stars_holder_large { display: var(--apol-listing-stars-display, none) !important;
  margin: 4px 0 10px 0 !important; line-height: 1 !important; }

/* Review stars on the item (PDP) page. The PDP renders its stars into
   .ordering_page_stars (#Product.Area.Show.Review.Stars#), NOT the listing-card
   .data_grid_card_stars_holder, so the toggle must target that class. */
.ordering_page_stars { display: var(--apol-pdp-stars-display, none) !important; }

/* Product reference / SKU on the item (PDP) page (#Product.Area.Show.Product.Ref#).
   Shown by default; toggle hides it. */
.ordering_page_productref { display: var(--apol-pdp-sku-display, block) !important; }

/* Third gallery layout: thumbnails to the LEFT of the hero (stacked-left). */
.product_gallery_container.pdp-stacked-left { display: flex; gap: 10px; align-items: flex-start; }
.product_gallery_container.pdp-stacked-left .pdp-thumbs { order: -1; flex: 0 0 78px; flex-direction: column; margin-top: 0; }
.product_gallery_container.pdp-stacked-left .carousel.pdp-gallery { flex: 1 1 auto; min-width: 0; }
.product_gallery_container.pdp-stacked-left .pdp-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* :root defaults so var() always resolves (esp. the gallery mode the JS reads).
   The published style_additional.css :root loads later and overrides these. */
:root {
  --apol-listing-filter-hide: block;
  --apol-listing-stars-display: none;
  --apol-listing-view: small;
  --apol-listing-dots-display: flex;
  --apol-listing-card-gap-x: 24px;
  --apol-pdp-stars-display: none;
  --apol-pdp-sku-display: block;
  --apol-pdp-gallery-mode: mosaic;
  --apol-pdp-gallery-col-w: 62%;
  --apol-pdp-hero-ar: 1 / 1;
  --apol-pdp-buybox-sticky: sticky;
}

/* ============================================================================
   Spec sheet (token-driven product specification block)
   Scoped under .spec_sheet so the new .spec_icon does not collide with the
   legacy .spec_icon / .spec_container component defined earlier in this file.
   ============================================================================ */
.spec_sheet { font-family: inherit; color: #1a1a1a; }
.spec_sheet .spec_section { padding: 22px 0; }
.spec_sheet .spec_section + .spec_section { border-top: 1px solid rgba(0,0,0,.08); }
.spec_sheet .spec_section:first-child { padding-top: 4px; }
.spec_sheet .spec_section_title { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #111; }
.spec_sheet .spec_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 32px; }
.spec_sheet .spec_item { display: flex; align-items: center; gap: 14px; }
.spec_sheet .spec_icon { width: 44px; height: 44px; min-width: 0; margin: 0; float: none; border-radius: 50%; background: #f3f3f1; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.spec_sheet .spec_icon i { font-size: 20px; color: #1a1a1a; line-height: 1; }
.spec_sheet .spec_icon img, .spec_sheet .spec_icon_img { width: 100%; height: 100%; object-fit: cover; }
.spec_sheet .spec_icon_empty { background: transparent; }
.spec_sheet .spec_text { min-width: 0; }
.spec_sheet .spec_label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; margin: 0 0 3px; line-height: 1.3; }
.spec_sheet .spec_value { font-size: 16px; font-weight: 600; color: #1a1a1a; line-height: 1.35; margin: 0; }
@media (max-width: 640px) { .spec_sheet .spec_grid { grid-template-columns: 1fr; gap: 16px; } }


/* ============================================================================
   App Designer - listing tokens reach ALL card size variants (Small/Large/Wide)
   The App Designer rules were scoped to .data_grid_card only; the grid-size
   switcher renders Small/Large/Wide cards as .data_grid_card_small/_large/_wide,
   so on any view but Medium those rules never matched and the legacy classless
   .viewproduct_button_link (grey, square) won. Re-declared across the full card
   set, last in source order. Also re-asserts the image aspect-ratio token over
   the ECOM v2.7 literal 4/3, and pads the bare-<div> CTA (no inner <a>).

   v2: the button keeps margin-top:auto so it stays pinned to the card foot (the
   equal-height-bottoms mechanism from ECOM v3.0/v3.1). listing-btn-mt is NOT
   applied here - a fixed top margin fights the auto bottom-pin and reintroduced
   the unequal-card-height regression. The button is a centred flex box so the
   label sits dead-centre (fixes the top-aligned text in the designer preview).
   Defaults match shipped values; bump apol.base.css ?v=.
   ============================================================================ */
.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide {
  padding: var(--apol-listing-card-pad, 0px) !important;
  margin-bottom: var(--apol-listing-card-mb, 20px) !important;
  background: var(--apol-listing-card-bg, transparent) !important;
  border: var(--apol-listing-card-border-width, 0px) solid var(--apol-listing-card-border-color, #e2e2e2) !important;
  border-radius: var(--apol-listing-card-radius, 0px) !important;
}
/* ===== App Designer: card shadow (resting) + hover effects (border ring + drop
   shadow) =====================================================================
   All rendered through box-shadow so there is NO layout shift. Every default is
   invisible (resting 0 0 #0000, 0-width transparent hover ring + transparent
   hover shadow), so nothing shows until a control is set. box-shadow is NOT
   additive - a hover shadow REPLACES the resting one - so each hover declaration
   restates the resting shadow LAST, letting a card that has a resting shadow keep
   it on hover while the hover ring/shadow layer on top. Bump apol.base.css ?v=.
   ============================================================================ */
.card, .card_booking, .card_donation, .card_event, .card_location,
.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide,
.card_ordering, .card_ordering_related { transition: box-shadow .18s ease; }
/* Resting shadow - general content cards */
.card, .card_booking, .card_donation, .card_event, .card_location {
  box-shadow: var(--apol-card-shadow, 0 0 #0000);
}
/* Resting shadow - product / item cards (listing grid + ordering cards) */
.data_grid_card, .data_grid_card_small, .data_grid_card_large, .data_grid_card_wide,
.card_ordering, .card_ordering_related {
  box-shadow: var(--apol-listing-card-shadow, 0 0 #0000);
}
/* Hover - general content cards */
.card:hover, .card_booking:hover, .card_donation:hover, .card_event:hover, .card_location:hover {
  box-shadow: 0 0 0 var(--apol-card-hover-border-width, 0px) var(--apol-card-hover-border-color, transparent), var(--apol-card-hover-shadow, 0 0 #0000), var(--apol-card-shadow, 0 0 #0000);
}
/* Hover - product / item cards (listing grid + ordering cards) */
.data_grid_card:hover, .data_grid_card_small:hover, .data_grid_card_large:hover, .data_grid_card_wide:hover,
.card_ordering:hover, .card_ordering_related:hover {
  box-shadow: 0 0 0 var(--apol-listing-card-hover-border-width, 0px) var(--apol-listing-card-hover-border-color, transparent), var(--apol-listing-card-hover-shadow, 0 0 #0000), var(--apol-listing-card-shadow, 0 0 #0000);
}
/* Item name hover colour (defaults to follow the primary accent) */
.data_grid_card:hover .larger_h6_text, .data_grid_card_small:hover .larger_h6_text, .data_grid_card_large:hover .larger_h6_text, .data_grid_card_wide:hover .larger_h6_text, .data_grid_card_wide:hover .larger_h6_text_wide {
  color: var(--apol-listing-card-name-hover-color, var(--apol-color-primary));
}
/* Related cards (#15) match the main product/listing cards. The related renderer uses
   .data_grid_card_small_related, which was missing from the App Designer card-token
   selector lists above, so related cards rendered as plain text blocks. Apply the same
   card tokens (bg / border / radius / padding / shadow + hover + name-hover) so they read
   as proper product cards. Width stays grid-controlled (see #card_container). */
.data_grid_card_small_related {
  padding: var(--apol-listing-card-pad, 0px) !important;
  background: var(--apol-listing-card-bg, transparent) !important;
  border: var(--apol-listing-card-border-width, 0px) solid var(--apol-listing-card-border-color, #e2e2e2) !important;
  border-radius: var(--apol-listing-card-radius, 0px) !important;
  box-shadow: var(--apol-listing-card-shadow, 0 0 #0000);
  transition: box-shadow .18s ease;
}
.data_grid_card_small_related:hover {
  box-shadow: 0 0 0 var(--apol-listing-card-hover-border-width, 0px) var(--apol-listing-card-hover-border-color, transparent), var(--apol-listing-card-hover-shadow, 0 0 #0000), var(--apol-listing-card-shadow, 0 0 #0000);
}
.data_grid_card_small_related:hover .larger_h6_text {
  color: var(--apol-listing-card-name-hover-color, var(--apol-color-primary));
}
.data_grid_card_image, .data_grid_card_image_small,
.data_grid_card_image_large, .data_grid_card_image_wide {
  aspect-ratio: var(--apol-listing-card-ar, 4 / 3) !important;
}
.data_grid_card .viewproduct_button_link,
.data_grid_card_small .viewproduct_button_link,
.data_grid_card_large .viewproduct_button_link,
.data_grid_card_wide .viewproduct_button_link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--apol-listing-btn-width, 100%) + 2 * var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  /* Pin the button to the card foot so buttons line up across a row (equal-
     height bottoms). "Button spacing (above)" is applied as a MINIMUM gap on the
     element immediately before the button (see the :has rule below) instead of
     as a fixed top margin here - a fixed margin un-pins the button and leaves the
     buttons at different heights when the cards' text runs to different lengths. */
  margin-top: auto !important;
  margin-bottom: calc(-1 * var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  margin-left: calc(var(--apol-listing-btn-ml, 0px) - var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  margin-right: calc(var(--apol-listing-btn-mr, 0px) - var(--apol-listing-card-btn-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
  background: var(--apol-button-bg, #0099cc) !important;
  border-radius: var(--apol-listing-card-btn-radius, var(--apol-button-corner, 3px)) !important;
  overflow: hidden !important;
}
.data_grid_card .viewproduct_button_link a,
.data_grid_card_small .viewproduct_button_link a,
.data_grid_card_large .viewproduct_button_link a,
.data_grid_card_wide .viewproduct_button_link a,
.data_grid_card .viewproduct_button_link:not(:has(a)),
.data_grid_card_small .viewproduct_button_link:not(:has(a)),
.data_grid_card_large .viewproduct_button_link:not(:has(a)),
.data_grid_card_wide .viewproduct_button_link:not(:has(a)) {
  padding: var(--apol-listing-btn-py, 12px) var(--apol-listing-btn-px, 18px) !important;
  line-height: 1.25 !important;
  font-weight: var(--apol-button-font-weight, 600) !important;
  color: var(--apol-button-text, #fff) !important;
  text-align: center;
}
/* "Button spacing (above)" (listing-btn-mt) as a MINIMUM gap that coexists with
   the foot-pin. The gap sits on whatever content element immediately precedes the
   button, so the button keeps margin-top:auto (buttons stay bottom-aligned across
   a row) and never butts against the text. Default 0 via the var() fallback, so
   untouched sites are unchanged. */
.data_grid_card_content > *:has(+ .viewproduct_button_link),
.data_grid_card_content_small > *:has(+ .viewproduct_button_link),
.data_grid_card_content_large > *:has(+ .viewproduct_button_link),
.data_grid_card_content_wide > *:has(+ .viewproduct_button_link) {
  margin-bottom: var(--apol-listing-btn-mt, 0px) !important;
}
.data_grid_card_holder, .data_grid_card_holder_small,
.data_grid_card_holder_large, .data_grid_card_holder_wide { --ar: var(--apol-listing-card-ar, 16 / 9); }

/* ============================================================================
   App Designer - listing card TEXT controls (name / price / description size
   + show-hide description). Scoped across every card size variant so it works
   on all views (Medium / Small / Large / Wide) - the "works for all" ask.
   Sizes are em-relative (match the shipped 1.2em / 110% / 1em) so they track
   the site base font. Tokens default via var() fallback to the shipped values.
     --apol-listing-card-name-size    (1.2em)  -> .larger_h6_text (card name)
     --apol-listing-card-price-size   (1.1em)  -> .data_grid_card_price*
     --apol-listing-card-desc-size    (1em)    -> .data_grid_card_description*
     --apol-listing-card-desc-display (block)  -> show / hide the description
   !important is required: the price carries its own !important (110%), and the
   mobile breakpoint sets .data_grid_card_content_small .larger_h6_text !important.
   Appended last so it outranks those at equal specificity. Scoped to the listing
   card classes only, so related-products (_small_related) and other .card types
   that share .larger_h6_text are untouched. Bump apol.base.css ?v= on deploy.
   ============================================================================ */
.data_grid_card .larger_h6_text,
.data_grid_card_small .larger_h6_text,
.data_grid_card_large .larger_h6_text,
.data_grid_card_wide .larger_h6_text,
.data_grid_card_wide .larger_h6_text_wide {
  font-size: var(--apol-listing-card-name-size, 1.2em) !important;
}
/* Price size: the visible price is the inner <h5> (font-size:1.35rem in base,
   1.15rem on _small) - sizing the wrapper span did nothing. Drive the <h5> for
   every variant; the currency symbol, .price_value and .smaller_vat_text are
   em-relative so they scale with it. The sale line (.data_grid_card_was_save) is
   a sibling at a fixed .9rem, so scale it proportionally (x0.72 keeps the .9rem
   look at the 1.25rem default). */
.data_grid_card_price h5,
.data_grid_card_price_small h5,
.data_grid_card_price_large h5,
.data_grid_card_price,
.data_grid_card_price_small,
.data_grid_card_price_large {
  font-size: var(--apol-listing-card-price-size, 1.25rem) !important;
}
.data_grid_card_was_save {
  font-size: calc(var(--apol-listing-card-price-size, 1.25rem) * 0.72) !important;
}
/* "Hide prices until signed in": in the price slot, show ONLY the sign-in
   message, sized to match the App Designer listing price. Drop the redundant
   grey "Product Details" button (its 30px top margin was the gap) - the card
   already has a View Product button. */
.sign_in_price_link_viewproduct { display: none !important; }
.sign_in_price_link {
  display: block;
  margin: 8px 0 2px;   /* matches .data_grid_card_price h5 so it sits where the price did */
  font-size: var(--apol-listing-card-price-size, 1.25rem) !important;
  font-weight: 600;
}
.sign_in_price_link a,
.sign_in_price_link a:link,
.sign_in_price_link a:visited,
.sign_in_price_link .apol-signin-link {
  color: var(--apol-color-primary, #0099cc);
  text-decoration: none;
  font-size: inherit;
  cursor: pointer;
}
.sign_in_price_link a:hover,
.sign_in_price_link .apol-signin-link:hover { text-decoration: underline; }
/* Data Engine listing sign-in-for-price link (rendered as a span; matches the ecom look). */
.de-signin-price { color: var(--apol-color-primary, #0099cc); cursor: pointer; text-decoration: none; }
.de-signin-price:hover { text-decoration: underline; }
.data_grid_card_description,
.data_grid_card_description_small,
.data_grid_card_description_large {
  font-size: var(--apol-listing-card-desc-size, 1em) !important;
  display:   var(--apol-listing-card-desc-display, block) !important;
}
.data_grid_card_description p,
.data_grid_card_description_small p,
.data_grid_card_description_large p {
  font-size: inherit !important;
}

/* :root defaults so var() resolves before first publish; the published
   style_additional.css loads later and overrides these per-site. */
:root {
  --apol-listing-card-name-size: 1.2em;
  --apol-listing-card-price-size: 1.25rem;
  --apol-listing-card-desc-size: 1em;
  --apol-listing-card-desc-display: block;
  --apol-listing-filter-position: top;
}


/* ============================================================================
   App Designer - listing FILTER POSITION (across top | down the left side).
   Category page nests the toolbar (.apol-cat-toolbar, which holds the
   .apol-filter-panel) and the grid column (.data_grid_items_all_right) as
   siblings inside .flex-item-100-percent-column. When the App Designer token
   --apol-listing-filter-position is 'left', turn that wrapper into a two-column
   row: a fixed-width filter rail on the left, grid taking the rest. Default
   'top' leaves the normal stacked flow completely untouched. Forced back to
   stacked below 980px (a left rail on a phone is never wanted).
   Implemented with a CSS style query so NO JS or template change is needed;
   browsers without style-query support simply keep the top layout. The :has()
   scopes it to the one wrapper that actually contains the toolbar + grid, so
   the generic .flex-item-100-percent-column used elsewhere is unaffected. */
@media (min-width: 980px) {
  @container style(--apol-listing-filter-position: left) {
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) {
      display: flex;
      align-items: flex-start;
      gap: 0 32px;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar {
      flex: 0 0 280px;
      order: -1;
      margin-top: 0;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .data_grid_items_all_right {
      flex: 1 1 auto;
      min-width: 0;
      margin-top: 0;
    }
    /* the filter controls are a 4-up grid by default; in a 280px rail stack
       them one per row (viewport media queries won't fire at desktop width). */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-controls {
      grid-template-columns: 1fr;
    }
  }
}


/* ============================================================================
   App Designer - listing filter LEFT mode, Riverside-style refinements.
   Frontend only (gated by the same style query as the rail layout): strip the
   filter box chrome, turn the dark 'Filter & Sort' bar into a plain heading,
   move the results count to the top-right above the grid, and pull both columns
   up so the rail top lines up with the top of the item cards. All scoped to the
   left-rail container query, so top mode and every other page are untouched.
   ============================================================================ */
@media (min-width: 980px) {
  @container style(--apol-listing-filter-position: left) {

    /* reserve a slim band at the top for the count, and align both columns */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) {
      position: relative;
      padding-top: 34px;
    }

    /* results count -> top-right of the whole row, above the grid (beats the
       in-flow 'position:static !important' the toolbar normally forces). */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar > .pagination-label-holder {
      position: absolute !important;
      top: 0; right: 0; left: auto;
      margin: 0 !important;
      text-align: right;
    }

    /* no box: drop border / background / radius / padding off the panel */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-panel {
      border: 0;
      background: transparent;
      border-radius: 0;
      margin: 0;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body { padding: 0; }

    /* dark 'Filter & Sort' bar -> plain heading with a hairline underline */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary {
      background: transparent !important;
      color: var(--apol-color-heading) !important;
      padding: 0 0 12px !important;
      margin: 0 0 14px;
      border-bottom: 1px solid var(--apol-color-border);
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: .95rem;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary i,
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary .apol-filter-chevron {
      color: var(--apol-color-muted) !important;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-summary .apol-filter-reset,
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-summary .apol-filter-reset i {
      color: var(--apol-color-muted) !important;
      border-left-color: var(--apol-color-border);
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-summary .apol-filter-reset:hover,
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-summary .apol-filter-reset:hover i {
      color: var(--apol-color-accent) !important;
    }
  }
}


/* ============================================================================
   App Designer - listing filter LEFT mode, refinements pt.2 (frontend only).
   1) No open/close in the rail: hide the chevron and keep the body shown even
      if the <details> is toggled (the toggle only matters in TOP mode).
   2) Every control + group on its own full-width line. .apol-filter-body is a
      flex-wrap bar with .apol-filter-controls/.apol-filter-groups as
      display:contents, so the real flex items are the .input-icons and
      .apol-filter-group children - stack the body into a single column.
   3) Sticky rail: the toolbar stretches to the grid height and the (boxless)
      panel sticks, so the filters stay in view while the products scroll.
   4) Results count flush with the cards: the wrapper has 1.5% side padding but
      the cards stop at the content edge, so right:0 overhangs them - pull the
      count in by the gutter so it lines up with the right card edge.
   ============================================================================ */
@media (min-width: 980px) {
  @container style(--apol-listing-filter-position: left) {

    /* stretch the rail to the grid height so the panel has room to stick */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) { align-items: stretch; }
    /* Offset from the top = whatever bar is covering the viewport top + 20px.
       --apol-filter-stick-top is published by apol.nav.js and equals the bottom
       edge of the reveal-on-scroll-up nav (.menu_desktop.is-fixed) while it is
       showing, else 0. Without it the rail stuck at a flat 16px and the nav,
       which re-appears when you scroll back up, painted straight over the top of
       the filters. 0 + 20px keeps a small gap while scrolling down (nav hidden);
       navHeight + 20px tucks the filters just under the nav when it reveals. */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-panel { position: sticky; top: calc(var(--apol-filter-stick-top, 0px) + 20px); align-self: flex-start; }

    /* (1) drop the open/close affordance in the rail */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary .apol-filter-chevron { display: none; }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary { cursor: default; }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar details.apol-filter-panel > .apol-filter-body { display: flex !important; }

    /* (2) one control / group per line, full width */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 12px !important;
      padding: 0 !important;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body .input-icons { width: 100% !important; }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body input[type="text"],
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body select { width: 100% !important; }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body .apol-filter-group { width: 100% !important; }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-body .apol-filter-group > .apol-filter-group-summary {
      width: 100% !important;
      justify-content: space-between;
    }

    /* (4) Reset + count share ONE line at the foot of the rail - Reset hard
       left, count hard right, no divider. apol.nav.js relocates both into
       .apol-filter-barfoot inside the body (in top mode that wrapper is
       display:contents; here it is this row). This supersedes the old
       absolute top-right count: with the count now in the rail flow there is
       nothing positioned over the grid. The earlier count rules in this block
       (position:absolute on '> .apol-cat-toolbar > .pagination-label-holder')
       no longer match - the count is no longer a direct child of the toolbar -
       and stay only as a graceful fallback if the JS never runs. */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-barfoot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      margin-top: 8px;
      padding-top: 14px;
      border-top: 1px solid var(--apol-color-border);
    }
    /* no divider on the Reset, and let the row's space-between place the count */
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-barfoot .apol-filter-reset {
      margin-left: 0;
      padding-left: 0;
      border-left: 0;
    }
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .data_grid_items_all_right) > .apol-cat-toolbar .apol-filter-barfoot .apol-filter-count-inbar {
      margin-left: 0;
    }
  }
}


/* ============================================================================
   LISTING CATEGORY SHORTCUTS BAR  (App Designer opt-in: --apol-listing-cat-shortcuts:on)
   ----------------------------------------------------------------------------
   apol-cat-shortcuts.js grabs the product-level category links from the menu and
   inserts .apol-cat-shortcuts between the filter bar and the product grid. A full-
   width row of pills; works whether the filter is across the top (normal stack) or
   down the side (spans full width at the top of the rail+grid row). Optional sticky
   reuses the filter's --apol-filter-stick-top. Nothing renders unless the App
   Designer sets the token to 'on' (the JS bails otherwise). One token-gated block.
   ============================================================================ */
.apol-cat-shortcuts { margin: 0 0 var(--apol-vspace-sm, 1rem); }
.apol-cat-shortcuts__inner { display: flex; flex-wrap: wrap; gap: 8px; }
.apol-cat-shortcut {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--apol-color-border, #e2e2e2); border-radius: 999px;
  background: var(--apol-color-surface, #f5f5f5); color: var(--apol-color-text, #333);
  font-size: .9rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.apol-cat-shortcut:hover { background: #fff; border-color: var(--apol-color-primary, #0099cc); color: var(--apol-color-heading, #222); text-decoration: none; }
.apol-cat-shortcut.is-current { background: var(--apol-color-primary, #0099cc); border-color: var(--apol-color-primary, #0099cc); color: var(--apol-color-primary-contrast, #fff); }
.apol-cat-shortcut i { font-size: 1.05em; line-height: 1; }
.apol-cat-shortcut__img { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }

/* SIDE (left) filter layout: the wrapper is a flex row, so span the full width at
   the top (above the rail+grid). In TOP layout the bar is a normal block already. */
@media (min-width: 980px) {
  @container style(--apol-listing-filter-position: left) {
    .flex-item-100-percent-column:has(> .apol-cat-toolbar):has(> .apol-cat-shortcuts) > .apol-cat-shortcuts {
      flex: 0 0 100%; width: 100%; order: -2;
    }
  }
}
/* optional sticky (independent of the filter's own sticky toggle) */
@container style(--apol-listing-cat-shortcuts-sticky: on) {
  .apol-cat-shortcuts {
    position: sticky; top: var(--apol-filter-stick-top, 0px); z-index: 48;
    background: var(--apol-color-background, #fff); padding: 8px 0; margin-bottom: 0;
  }
}

/* ============================================================================
   APPENDED (Apollyon): design-token aliases + .apol-btn button class
   ----------------------------------------------------------------------------
   Section templates were authored against a token vocabulary that wasn't all
   defined here, so muted text, radii, heading sizes and buttons silently fell
   back to defaults and ignored the App Designer. These aliases map that
   vocabulary onto the real, designer-controlled tokens, and .apol-btn gives the
   section-template button class (and the editor's button style picker) the same
   token-driven styling as .Button. Additive only - nothing above is changed.
   ========================================================================== */
:root {
  --apol-color-text-muted:        var(--apol-color-muted);
  --apol-color-secondary:         var(--apol-color-accent);
  --apol-color-secondary-contrast:#ffffff;
  --apol-radius-md:               var(--apol-radius);
  --apol-radius-lg:               calc(var(--apol-radius) * 1.6);
  --apol-font-size-h1:            calc(var(--apol-font-size-base) * 2.4);
  --apol-font-size-h2:            calc(var(--apol-font-size-base) * 1.8);
  --apol-font-size-h3:            calc(var(--apol-font-size-base) * 1.4);
  --apol-font-weight-bold:        var(--apol-font-weight-heading, 700);
  --apol-container-max-width:     1100px;
  --apol-section-padding-y:       4rem;
  --apol-spacing-unit:            1rem;
}

/* .apol-btn - section-template + style-picker button, mirrors .Button on tokens */
.apol-btn {
  cursor: pointer;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  text-decoration: none; text-align: center; vertical-align: middle;
  padding: var(--apol-button-padding-y) var(--apol-button-padding-x) !important;
  min-height: 54px; box-sizing: border-box;
  font-family: var(--apol-font-body), "Font Awesome 7 Pro", Georgia, sans-serif;
  font-size: 1rem; font-weight: var(--apol-button-font-weight, 600); line-height: 1 !important;
  border: 0; border-radius: var(--apol-button-corner);
  background: var(--apol-button-bg); color: var(--apol-button-text);
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.apol-btn:hover { background: color-mix(in srgb, var(--apol-button-bg) 82%, #000); }
.apol-btn--primary { background: var(--apol-button-bg); color: var(--apol-button-text); }
.apol-btn--primary:hover { background: color-mix(in srgb, var(--apol-button-bg) 82%, #000); }
.apol-btn--secondary { background: var(--apol-color-accent); color: #ffffff; }
.apol-btn--secondary:hover { background: color-mix(in srgb, var(--apol-color-accent) 82%, #000); }
.apol-btn--light { background: #ffffff; color: var(--apol-color-primary); }
.apol-btn--light:hover { background: color-mix(in srgb, #ffffff 90%, #000); }
.apol-btn--dark { background: var(--apol-color-heading); color: #ffffff; }
.apol-btn--dark:hover { background: color-mix(in srgb, var(--apol-color-heading) 85%, #ffffff); }
.apol-btn--outline-light { background: transparent; color: #ffffff; border: var(--apol-button-outline-width, 2px) solid #ffffff; }
.apol-btn--outline-light:hover { background: rgba(255,255,255,.14); }

/* ===== App Designer: content card box (.card) - real, card-specific tokens ===
   Separate from the global surface/panel tokens (those drive menus, the basket
   and filter panels). Fallbacks = shipped values, so default output is unchanged.
   Bump apol.base.css ?v= on deploy. ======================================== */
.card {
  background: var(--apol-card-bg, rgba(256,256,256,1.0));
  border-style: solid;
  border-width: var(--apol-card-border-width, 0.05em);
  border-color: var(--apol-card-border-color, rgba(0,0,0,0.2));
  border-radius: var(--apol-card-radius, 0px);
}
@media only screen and (max-width: 500px) {
  /* preserve the shipped mobile treatment: bottom border only */
  .card { border-width: 0 0 var(--apol-card-border-width, 0.05em) 0; }
}

/* ===== App Designer: selects must match text inputs ==========================
   style.min.css hardcodes select size/padding/border/height in a max-width:1365px
   block (only border-radius got through). Track the input tokens instead. ===== */
select:not(.apol-select-proxied):not(.small_select) {
  font-size: var(--apol-input-font-size, inherit) !important;
  font-weight: var(--apol-input-font-weight, inherit) !important;
  color: var(--apol-input-text) !important;
  background-color: var(--apol-input-bg) !important;
  border: var(--apol-input-border-width) solid var(--apol-input-border) !important;
  border-radius: var(--apol-input-radius) !important;
  padding: var(--apol-input-padding-y) 2rem var(--apol-input-padding-y) var(--apol-input-padding-x) !important;
  width: var(--apol-input-width, auto) !important;
  margin: 0 0 var(--apol-input-margin-bottom, 0px) !important;
  height: auto !important;
}
/* App Designer: green outline on a filled, valid field (toggle defaults on). */
input[type=text]:user-valid, input[type=email]:user-valid,
input[type=tel]:user-valid, input[type=number]:user-valid,
input[type=password]:user-valid, input[type=search]:user-valid,
textarea:user-valid {
  border-color: var(--apol-input-valid-color, #1f9d55);
}

/* ===== Legacy floating-placeholder inputs adopt the token look ============== */
input.floating-placeholder, textarea.floating-placeholder {
  color: var(--apol-input-text) !important;
  background-color: var(--apol-input-bg) !important;
  border: var(--apol-input-border-width) solid var(--apol-input-border) !important;
  border-radius: var(--apol-input-radius) !important;
  margin: 0 0 var(--apol-input-margin-bottom, 0px) !important;
}
input.floating-placeholder:focus, textarea.floating-placeholder:focus {
  border-color: var(--apol-color-primary) !important;
}
input.floating-placeholder:user-valid, textarea.floating-placeholder:user-valid {
  border-color: var(--apol-input-valid-color, #1f9d55) !important;
}

/* Full-bleed card image: break out of the card padding so the image fills the
   card width/top even when the content keeps a margin. Multiplier defaults to 0
   (off). The card's overflow:hidden keeps the corners clipped to the radius. */
.data_grid_card_image, .data_grid_card_image_small, .data_grid_card_image_large {
  margin-top: calc(-1 * var(--apol-listing-card-img-bleed, 0) * var(--apol-listing-card-pad, 0px));
  margin-inline: calc(-1 * var(--apol-listing-card-img-bleed, 0) * var(--apol-listing-card-pad, 0px));
  width: calc(100% + 2 * var(--apol-listing-card-img-bleed, 0) * var(--apol-listing-card-pad, 0px)) !important;
}

/* ===== Contact form component (.apol-cf) ==================================
   Styling for the Contact form section template. Behaviour lives in the shared
   scripts.additional.js (APOL-CONTACT-FORM block); this is its matching styling,
   kept here in the base layer alongside it rather than in the template css_body.
   Scoped to .apol-cf / .apol-section--contact-form, so it is inert on pages with
   no contact form. ======================================================== */
.apol-section--contact-form .apol-section__container{max-width:640px;margin:0 auto;}
.apol-cf__form{display:block;}
.apol-cf__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.apol-cf__field{display:flex;flex-direction:column;gap:5px;}
.apol-cf__field--full{grid-column:1 / -1;}
.apol-cf__form > .apol-cf__field--full{margin-top:14px;}
.apol-cf__label{font-size:.9rem;font-weight:600;color:var(--apol-color-text);}
.apol-cf__req{color:#dc2626;font-style:normal;}
/* inputs inherit the App Designer Form-field tokens from apol.base.css; only layout here */
.apol-cf__field input,.apol-cf__field textarea,.apol-cf__field select{width:100%;box-sizing:border-box;}
.apol-cf__field textarea{resize:vertical;min-height:120px;}
/* Field rhythm: the rule below would neutralise the global App Designer input
   margin inside the contact form (so it would NOT stack on the grid gap).
   Commented out for testing - the contact form now also responds to the
   Field-spacing sliders. Uncomment to isolate the form from the sliders again. */
/* .apol-cf .apol-cf__field input,.apol-cf .apol-cf__field textarea{margin:0;} */
/* floating labels (App Designer "Field labels" = Floating) */
.apol-cf__field--float{position:relative;display:block;}
.apol-cf__field--float > input,.apol-cf__field--float > textarea{width:100%;box-sizing:border-box;}
.apol-cf__field--float > label{position:absolute;left:var(--apol-input-padding-x,0.75rem);top:var(--apol-input-padding-y,0.6rem);color:var(--apol-input-placeholder);pointer-events:none;background:var(--apol-input-bg);padding:0 4px;line-height:1.2;transition:top .15s ease,transform .15s ease,font-size .15s ease,color .15s ease;}
.apol-cf__field--float > input:focus + label,.apol-cf__field--float > input:not(:placeholder-shown) + label,.apol-cf__field--float > textarea:focus + label,.apol-cf__field--float > textarea:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:.78rem;color:var(--apol-color-primary);}
/* standard labels (App Designer "Field labels" = Standard): label hidden for sight but
   kept for screen readers; the field name lives in the placeholder (set by the renderer) */
.apol-cf__field--standard > .apol-cf__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.apol-cf__hp{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;}
.apol-cf__turnstile{margin:14px 0;}
.apol-cf__submit{margin-top:6px;}
.apol-cf__submit:disabled{opacity:.5;cursor:not-allowed;}
.apol-cf__status{margin-top:12px;font-size:.95rem;}
.apol-cf__status.is-error{color:#b91c1c;}
.apol-cf__status.is-ok{color:#166534;}
@media (max-width:560px){.apol-cf__grid{grid-template-columns:1fr;}}
.apol-cf__preview{display:block;padding:18px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc;}
.apol-cf__preview-field{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:10px 12px;color:#64748b;font-size:13px;margin:0 0 10px;}
.apol-cf__preview-field--msg{min-height:56px;}
.apol-cf__preview-note{font-size:12px;color:#0099CC;font-style:italic;margin:2px 0 0;}

/* Sign-in box - ported from old 00033 template stylesheet, 1 Jul 2026 */
.signin_box_holder {display: flex; width:100%; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items:center;}
.signin_box {display: block; width:33.3333%; min-width: 400px; border: 1px solid #e0e0e0; padding: 20px; border-radius:8px;}
@media only screen and (max-width : 500px) {
.signin_box {display: block; width:100%; min-width: 320px; border: 0px solid #ddd; padding: 0px 0px 0px 0px;}
}

/* Login inputs: adopt the .apol-cf__field width behaviour (form emitted by #Apollyon.Login.Form#, outside that wrapper). Visual comes from the global input rule; this only adds full width. 1 Jul 2026 */
.signin_box input:not([type=checkbox]):not([type=radio]),
.signin_box textarea,
.signin_box select { width: 100%; box-sizing: border-box; }

/* Sign-in success / hint / error panels (quick-login "check your email", etc.) 31 Jul 2026 */
.signin_success { text-align: center; padding: 6px 0; }
.signin_success_icon { font-size: 3rem; line-height: 1; color: var(--apol-color-primary, #4a8a63); margin-bottom: 12px; }
.signin_success h1 { margin: 0 0 10px; }
.signin_success p { color: #555; margin: 0 0 18px; }
.signin_hint { font-size: 0.85em; color: #888; margin: 12px 0 0; text-align: center; }
.signin_error { color: #b00020; background: #fdecec; border: 1px solid #f5c2c2; border-radius: 6px; padding: 8px 12px; margin: 0 0 14px; font-size: 0.9em; }

/* --apol-input-font-size was consumed at line 167 as var(--apol-input-font-size, inherit) but NEVER defined in :root, so every input fell back to inherit and took its parent's size (login/form1/contact-form all diverged). Define it once => all inputs read one value, and it becomes a single knob App Designer can drive globally. Converges every input site-wide to this size - tune this one line to taste. 1 Jul 2026 */
:root{ --apol-input-font-size: 1rem; }

/* signin box holder: neutralise any inherited wrapper padding/width so the sign-in card centres identically regardless of surrounding container (login wraps it in flex-item-*-stretch which carries asymmetric padding; forgotten-password doesn't). 2 Jul 2026 */
.signin_box_holder { width: 100%; padding: 0; margin: 0; }

/* Vertical alignment of the sign-in card across pages: login nests signin_box_holder inside
   .flex-item-100-percent-column-stretch (padding:10px 1% 10px 0%), pushing its box ~10px lower
   than forgotten-password, which has no such wrapper. Zero that wrapper's padding ONLY when it
   directly hosts the card, so the class is unaffected everywhere else. 2 Jul 2026 */
.flex-item-100-percent-column-stretch:has(> .signin_box_holder) { padding: 0; }

/* Float component: selects must fill their field like inputs do (the > input rule didn't cover select), so floated dropdowns go full width and pick up the same token border/radius. 2 Jul 2026 */
.apol-cf__field--float > select { width: 100%; box-sizing: border-box; }
.apol-cf__field > select { width: 100%; box-sizing: border-box; }

/* .b-contain focus/alignment refinements (append overrides the earlier rules by source order).
   - focus ring only on keyboard nav (:focus-visible), not mouse click, and uses the primary token
   - vertical-centre the box against single-line label text
   2 Jul 2026 */

/* kill the always-on mouse-click ring */
.b-contain input:focus ~ .b-input { box-shadow: none; }
/* keyboard-only focus ring, brand colour */
.b-contain input:focus-visible ~ .b-input {
  box-shadow: 0 0 0 2px var(--apol-color-primary, #0099CC);
}
/* remove any native outline bleeding through on the hidden input */
.b-contain input:focus { outline: none; }

/* vertical alignment: centre the faux box on the label's first line.
   Label text line-height is 1.5 on 1rem => ~1.5rem line; box is 1.25rem.
   Nudge the box to sit centred rather than pinned at top:5px. */
.b-contain input[type="checkbox"] ~ .b-input,
.b-contain input[type="radio"] ~ .b-input {
  top: 50%;
  transform: translateY(-50%);
}
/* the custom label-text span was lifted -0.25rem to compensate the old top:5px;
   with the box now centred, reset that so text aligns naturally */
.b-contain .b-contain-label-text-custom { top: 0; }

/* ============================================================================
   APOLLYON SECTION EDITOR - FRONTEND FIXES
   ----------------------------------------------------------------------------
   Hand-maintained frontend rules for the section editor. NOT placed in
   style_additional.css (machine-written) and NOT in the editor content_css,
   so no mce-content-body scoping is needed.
   ============================================================================ */

/* Caret-target spacers (added by the toolbar normaliser) are structural only -
   never show them on the live site, so they can't add spacing or a top gap. */
.apol-section-spacer { display: none; }
/* 6th Jul 2026: BUT a spacer sitting BETWEEN two sections should render as a small
   neutral gap, so stacked full-bleed colour bands (e.g. dark hero + grey stats) don't
   sit flush - matching the editor, which shows the spacer (it doesn't load this file).
   Scoped to `.apol-section + .apol-section-spacer` so the LEADING spacer (before the
   first section) stays hidden and never re-introduces the top gap the rule above kills.
   Height is tokenised (--apol-section-spacer-h) so it can be tuned later. */
.apol-section + .apol-section-spacer {
  display: block;
  height: var(--apol-section-spacer-h, 2.5rem);
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
/* ...but a spacer that TRAILS the last section (last child of its container)
   is not between two bands - it just adds a fixed ~2.5rem gap above the footer
   that the 'Page margin - bottom' control (default 0) cannot remove. Kill it so
   0 genuinely means content meets the footer. Later + equal specificity, plus
   !important, so it beats the '.apol-section + .apol-section-spacer' block. */
.apol-section-spacer:last-child { display: none !important; }

/* Divider dropped in from the toolbar (issue 5). The base hr already styles it;
   this class is a named hook so section dividers can be tuned separately. */
.apol-divider {
  border: 0;
  border-top: 1px solid var(--apol-color-border);
  margin: var(--apol-vspace-sm) 0;
  height: 0;
}

/* Issue 2 - "no top space really means no space".
   The gap under the nav/breadcrumb divider is the breadcrumb holder's
   margin-bottom (--apol-page-gutter-y), NOT the section's own spacing - so a
   section set to vspace-0 still sat below it. When the section immediately
   after the breadcrumb asks for no top space, collapse that margin so the
   content sits on the divider line. Opt-in: only fires when the user chose
   "None". (Assumes the first section is the breadcrumb's next sibling; if the
   markup nests differently, tell me and I'll adjust the selector.) */
.breadcrumb_holder:has(+ .apol-vspace-0),
.breadcrumb_nomargin_holder:has(+ .apol-vspace-0) { margin-bottom: 0; }

/* Issue 6 - full bleed for real. .apol-space-bleed (style_additional.css) makes
   the SECTION box 100vw, but does NOT do what .apol-space-0 does: release the
   inner container's max-width AND its 0 1rem padding, nor the section's own side
   padding. That leftover 1rem (~16px) each side was the '10-15px not quite full'
   gap on banners and columns. Mirror .apol-space-0 exactly so bleed is truly
   edge-to-edge on every section and column type. */
.apol-section.apol-space-bleed,
.apol-columns.apol-space-bleed { padding-left: 0; padding-right: 0; }
.apol-space-bleed > .apol-section__container,
.apol-space-bleed > .apol-columns__inner {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 6th Jul 2026 - make the Full (.apol-space-0) / Full bleed (.apol-space-bleed) toolbar
   widths AUTHORITATIVE over any section template's own container cap. Many templates hard-code
   .apol-section__container { max-width: ... } - including the page-scaffold sections
   (.apol-section--s-heros / --s-fsplit / --s-cta ...) and carousel/gallery templates - and
   their CSS is appended to style_additional.css, which loads AFTER this file, so it won win by
   load order and the content stayed capped (e.g. ~1200px, centred) even after the user picked
   Full/Full bleed. It only "looked" full on mobile because the viewport was already below the cap.
   !important lets the explicit user choice release the cap for EVERY template, current or future. */
.apol-space-0 > .apol-section__container,
.apol-space-0 > .apol-columns__inner,
.apol-space-bleed > .apol-section__container,
.apol-space-bleed > .apol-columns__inner {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================================
   VERTICAL SPACING - TWO INDEPENDENT AXES  (context toolbar > Spacing & align)
   ----------------------------------------------------------------------------
   Added Aug 2026. Previously the toolbar wrote apol-vspace-* / apol-pad-* with
   NO backing CSS, so "None" changed nothing and a block's gap-to-neighbours and
   its inner content inset could not be controlled separately. Now split cleanly:
     - OUTER GAP  (apol-vspace-*) -> MARGIN  : distance to the block above/below
     - INNER PAD  (apol-pad-*)    -> PADDING : inset from the (coloured) edge to
                                               the content
   Both honour a TRUE 0 for "None". Compound class selectors (specificity 0,2,0)
   beat the single-class section-template rules that load later in
   style_additional.css WITHOUT !important - so a per-side inline nudge written
   by the toolbar (specificity of inline styles) still overrides these presets,
   and "Reset nudges" (clearing the inline style) falls back to the preset.
   Applied uniformly to sections, BOTH column systems (new .apol-columns/.apol-col
   and legacy .flex-container-columns/.flex-item-*) and loose top-level blocks.
   "Default" (no class) writes nothing, so untouched content round-trips intact.
   ========================================================================== */
/* -- Inner padding (top + bottom) - apol-vspace-* ----------------------------
   FIXED Aug 2026: apol-vspace-* is the "Inner padding" control for sections and
   loose blocks. It MUST apply PADDING (not margin) to match the admin editor,
   where apol-editor-canvas.css and apol.section-extras.css both map apol-vspace-*
   to `padding !important`. This file previously mapped it to MARGIN, so the
   control looked correct in admin but did nothing on the live frontend (only the
   column control, apol-pad-*, was padding in both places - hence "only columns
   work"). The between-block gap is a SEPARATE axis, owned by apol-gap-* (margin)
   below. Values + !important mirror apol.section-extras.css / apol-editor-canvas.css
   exactly so the admin preview and the published page agree. */
.apol-section.apol-vspace-0, .apol-columns.apol-vspace-0, .flex-container-columns.apol-vspace-0,
.apol-col.apol-vspace-0, [class*="flex-item-"].apol-vspace-0, .apol-loose.apol-vspace-0 {
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.apol-section.apol-vspace-xs, .apol-columns.apol-vspace-xs, .flex-container-columns.apol-vspace-xs,
.apol-col.apol-vspace-xs, [class*="flex-item-"].apol-vspace-xs, .apol-loose.apol-vspace-xs {
  padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;
}
.apol-section.apol-vspace-sm, .apol-columns.apol-vspace-sm, .flex-container-columns.apol-vspace-sm,
.apol-col.apol-vspace-sm, [class*="flex-item-"].apol-vspace-sm, .apol-loose.apol-vspace-sm {
  padding-top: 1rem !important; padding-bottom: 1rem !important;
}
.apol-section.apol-vspace-md, .apol-columns.apol-vspace-md, .flex-container-columns.apol-vspace-md,
.apol-col.apol-vspace-md, [class*="flex-item-"].apol-vspace-md, .apol-loose.apol-vspace-md {
  padding-top: 2.5rem !important; padding-bottom: 2.5rem !important;
}
.apol-section.apol-vspace-lg, .apol-columns.apol-vspace-lg, .flex-container-columns.apol-vspace-lg,
.apol-col.apol-vspace-lg, [class*="flex-item-"].apol-vspace-lg, .apol-loose.apol-vspace-lg {
  padding-top: 4.5rem !important; padding-bottom: 4.5rem !important;
}

/* -- Outer gap (margin, top + bottom) - the dedicated "space BETWEEN this block
   and its neighbours" control (section-context-toolbar "Outer gap"). Pure margin
   so it is distinct from Inner padding. New classes (apol-gap-*) - opt-in, so no
   existing content is affected. -- */
.apol-section.apol-gap-0, .apol-columns.apol-gap-0, .flex-container-columns.apol-gap-0,
.apol-col.apol-gap-0, [class*="flex-item-"].apol-gap-0, .apol-loose.apol-gap-0 {
  margin-top: 0; margin-bottom: 0;
}
.apol-section.apol-gap-xs, .apol-columns.apol-gap-xs, .flex-container-columns.apol-gap-xs,
.apol-col.apol-gap-xs, [class*="flex-item-"].apol-gap-xs, .apol-loose.apol-gap-xs {
  margin-top: var(--apol-gap-xs, 0.5rem); margin-bottom: var(--apol-gap-xs, 0.5rem);
}
.apol-section.apol-gap-sm, .apol-columns.apol-gap-sm, .flex-container-columns.apol-gap-sm,
.apol-col.apol-gap-sm, [class*="flex-item-"].apol-gap-sm, .apol-loose.apol-gap-sm {
  margin-top: var(--apol-gap-sm, 1rem); margin-bottom: var(--apol-gap-sm, 1rem);
}
.apol-section.apol-gap-md, .apol-columns.apol-gap-md, .flex-container-columns.apol-gap-md,
.apol-col.apol-gap-md, [class*="flex-item-"].apol-gap-md, .apol-loose.apol-gap-md {
  margin-top: var(--apol-gap-md, 2rem); margin-bottom: var(--apol-gap-md, 2rem);
}
.apol-section.apol-gap-lg, .apol-columns.apol-gap-lg, .flex-container-columns.apol-gap-lg,
.apol-col.apol-gap-lg, [class*="flex-item-"].apol-gap-lg, .apol-loose.apol-gap-lg {
  margin-top: var(--apol-gap-lg, 3.5rem); margin-bottom: var(--apol-gap-lg, 3.5rem);
}
/* When a section takes explicit control of its OUTER gap (apol-gap-*, margin),
   the rhythm spacer between it and its neighbour steps aside so the margin is the
   single source of truth (0 => two stacked colour bands sit flush). Later +
   !important so it beats the '.apol-section + .apol-section-spacer { display:block }'
   rhythm rule above. NB: apol-vspace-* (inner PADDING) no longer collapses the
   spacer - it doesn't control the between-block gap, and the editor keeps the
   spacer visible for it, so leaving it here would desync admin from live. */
[class*="apol-gap-"] + .apol-section-spacer,
.apol-section-spacer:has(+ [class*="apol-gap-"]) { display: none !important; }

/* -- Inner padding (top + bottom) -- */
.apol-section.apol-pad-0, .apol-columns.apol-pad-0, .flex-container-columns.apol-pad-0,
.apol-col.apol-pad-0, [class*="flex-item-"].apol-pad-0, .apol-loose.apol-pad-0 {
  padding-top: 0; padding-bottom: 0;
}
.apol-section.apol-pad-xs, .apol-columns.apol-pad-xs, .flex-container-columns.apol-pad-xs,
.apol-col.apol-pad-xs, [class*="flex-item-"].apol-pad-xs, .apol-loose.apol-pad-xs {
  padding-top: var(--apol-pad-xs, 0.5rem); padding-bottom: var(--apol-pad-xs, 0.5rem);
}
.apol-section.apol-pad-sm, .apol-columns.apol-pad-sm, .flex-container-columns.apol-pad-sm,
.apol-col.apol-pad-sm, [class*="flex-item-"].apol-pad-sm, .apol-loose.apol-pad-sm {
  padding-top: var(--apol-pad-sm, 1rem); padding-bottom: var(--apol-pad-sm, 1rem);
}
.apol-section.apol-pad-md, .apol-columns.apol-pad-md, .flex-container-columns.apol-pad-md,
.apol-col.apol-pad-md, [class*="flex-item-"].apol-pad-md, .apol-loose.apol-pad-md {
  padding-top: var(--apol-pad-md, 2rem); padding-bottom: var(--apol-pad-md, 2rem);
}
.apol-section.apol-pad-lg, .apol-columns.apol-pad-lg, .flex-container-columns.apol-pad-lg,
.apol-col.apol-pad-lg, [class*="flex-item-"].apol-pad-lg, .apol-loose.apol-pad-lg {
  padding-top: var(--apol-pad-lg, 3.5rem); padding-bottom: var(--apol-pad-lg, 3.5rem);
}

/* -- Corner radius (section-context-toolbar "Corner radius") --------------
   Rounds the box AND clips its background colour / image to the curve
   (overflow:hidden). Applies to sections, columns and loose blocks - opt-in,
   so untouched content is unaffected. Sizes are var-driven for future App
   Designer control; the fallbacks are the shipped defaults. */
.apol-section.apol-radius-sm, .apol-columns.apol-radius-sm, .flex-container-columns.apol-radius-sm,
.apol-col.apol-radius-sm, [class*="flex-item-"].apol-radius-sm, .apol-loose.apol-radius-sm {
  border-radius: var(--apol-radius-sm, 8px); overflow: hidden;
}
.apol-section.apol-radius-md, .apol-columns.apol-radius-md, .flex-container-columns.apol-radius-md,
.apol-col.apol-radius-md, [class*="flex-item-"].apol-radius-md, .apol-loose.apol-radius-md {
  border-radius: var(--apol-radius-md, 16px); overflow: hidden;
}
.apol-section.apol-radius-lg, .apol-columns.apol-radius-lg, .flex-container-columns.apol-radius-lg,
.apol-col.apol-radius-lg, [class*="flex-item-"].apol-radius-lg, .apol-loose.apol-radius-lg {
  border-radius: var(--apol-radius-lg, 28px); overflow: hidden;
}
.apol-section.apol-radius-round, .apol-columns.apol-radius-round, .flex-container-columns.apol-radius-round,
.apol-col.apol-radius-round, [class*="flex-item-"].apol-radius-round, .apol-loose.apol-radius-round {
  border-radius: var(--apol-radius-round, 999px); overflow: hidden;
}

/* ============================================================================
   PAGE-SCAFFOLD SECTIONS (s-*) - the page_* full-page templates
   (home / about / contact / product / services / pricing / landing / faq).
   EXACT original CSS restored 6th Jul 2026 from apol_html_section_templates.css_body
   (deduplicated across all page_* rows). Kept in this hand-maintained platform
   stylesheet so it survives style_additional.css server-churn; an identical copy
   lives in style_additional.css so the admin content editor previews it too.
   ========================================================================== */
/* centered hero */
.apol-section--s-heroc{text-align:center;padding-top:var(--apol-vspace-lg,5rem);padding-bottom:var(--apol-vspace-lg,5rem);}.apol-section--s-heroc .apol-section__container{max-width:760px;}.apol-section--s-heroc h1{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 1rem;}.apol-section--s-heroc p{font-size:1.15rem;color:var(--apol-color-muted,#666);margin:0 0 1.75rem;}.apol-section--s-heroc .apol-section__buttons{justify-content:center;}
/* two-column hero (+ --rev) */
.apol-section--s-heros .apol-section__container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:var(--apol-container-max-width,1200px);}.apol-section--s-heros h1{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 1rem;}.apol-section--s-heros p{font-size:1.1rem;color:var(--apol-color-muted,#666);margin:0 0 1.5rem;}.apol-section--s-heros .apol-s-media img{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:var(--apol-radius-lg,14px);display:block;}.apol-section--s-heros--rev .apol-s-media{order:-1;}@media(max-width:820px){.apol-section--s-heros .apol-section__container{grid-template-columns:1fr;gap:2rem;}.apol-section--s-heros--rev .apol-s-media{order:0;}}
/* dark image hero */
.apol-section--s-herod{position:relative;text-align:center;color:#fff;padding-top:6rem;padding-bottom:6rem;background:#0b1220;overflow:hidden;}.apol-section--s-herod .apol-s-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}.apol-section--s-herod .apol-section__container{position:relative;z-index:2;max-width:820px;}.apol-section--s-herod h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);margin:0 0 1rem;}.apol-section--s-herod p{color:rgba(255,255,255,.82);font-size:1.2rem;margin:0 0 1.75rem;}.apol-section--s-herod .apol-section__buttons{justify-content:center;}
/* feature split (+ --rev / --sf) */
.apol-section--s-fsplit .apol-section__container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}.apol-section--s-fsplit h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 1rem;}.apol-section--s-fsplit .apol-s-copy>p{color:var(--apol-color-muted,#666);font-size:1.08rem;margin:0 0 1.25rem;}.apol-section--s-fsplit ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem;}.apol-section--s-fsplit li{position:relative;padding-left:2.1rem;color:var(--apol-color-text,#222);line-height:1.5;min-height:1.4rem;}.apol-section--s-fsplit li::before{content:'\2713';display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:.05em;width:1.4rem;height:1.4rem;border-radius:999px;background:var(--apol-color-primary,#0099cc);color:#fff;font-size:.82rem;font-weight:700;line-height:1;}.apol-section--s-fsplit .apol-s-media img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--apol-radius-lg,14px);display:block;}.apol-section--s-fsplit--rev .apol-s-media{order:-1;}.apol-section--s-fsplit--sf{background:var(--apol-color-surface,#f5f5f5);}@media(max-width:820px){.apol-section--s-fsplit .apol-section__container{grid-template-columns:1fr;gap:2rem;}.apol-section--s-fsplit--rev .apol-s-media{order:0;}}
/* intro */
.apol-section--s-intro{text-align:center;}.apol-section--s-intro .apol-section__container{max-width:720px;}.apol-section--s-intro h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 1rem;}.apol-section--s-intro p{font-size:1.12rem;color:var(--apol-color-muted,#666);margin:0;}
/* logo bar */
.apol-section--s-logos{background:var(--apol-color-surface,#f5f5f5);text-align:center;padding-top:2.5rem;padding-bottom:2.5rem;}.apol-section--s-logos p{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--apol-color-muted,#666);margin:0 0 1.5rem;}.apol-section--s-logos .apol-s-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.5rem;}.apol-section--s-logos .apol-s-logo{font-family:var(--apol-font-heading,sans-serif);font-weight:800;font-size:1.15rem;letter-spacing:.03em;color:var(--apol-color-muted,#666);opacity:.65;}
/* icon/feature cards (+ --sf) */
.apol-section--s-cards{text-align:center;}.apol-section--s-cards h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .5rem;}.apol-section--s-cards .apol-s-sub{color:var(--apol-color-muted,#666);max-width:640px;margin:0 auto 2.75rem;}.apol-section--s-cards .apol-s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left;}.apol-section--s-cards .apol-s-card{background:var(--apol-color-background,#fff);border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-lg,14px);padding:1.75rem;transition:transform .18s ease,box-shadow .18s ease;}.apol-section--s-cards .apol-s-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.09);}.apol-section--s-cards .apol-s-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--apol-color-primary,#0099cc) 12%,transparent);color:var(--apol-color-primary,#0099cc);margin-bottom:1rem;}.apol-section--s-cards .apol-s-ic i{font-size:23px;line-height:1;}.apol-section--s-cards h3{font-size:1.2rem;margin:0 0 .5rem;}.apol-section--s-cards .apol-s-card p{color:var(--apol-color-muted,#666);margin:0;}.apol-section--s-cards--sf{background:var(--apol-color-surface,#f5f5f5);}@media(max-width:900px){.apol-section--s-cards .apol-s-grid{grid-template-columns:1fr;}}
/* stats */
.apol-section--s-stats{background:var(--apol-color-surface,#f5f5f5);}.apol-section--s-stats .apol-s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;}.apol-section--s-stats .apol-s-num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--apol-color-primary,#0099cc);line-height:1;}.apol-section--s-stats .apol-s-lbl{color:var(--apol-color-muted,#666);margin-top:.4rem;}@media(max-width:640px){.apol-section--s-stats .apol-s-grid{grid-template-columns:1fr 1fr;gap:2rem;}}
/* steps */
.apol-section--s-steps{text-align:center;}.apol-section--s-steps h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .5rem;}.apol-section--s-steps .apol-s-sub{color:var(--apol-color-muted,#666);max-width:640px;margin:0 auto 2.75rem;}.apol-section--s-steps .apol-s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:left;counter-reset:step;}.apol-section--s-steps .apol-s-step{position:relative;padding-top:.5rem;}.apol-section--s-steps .apol-s-step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--apol-color-primary,#0099cc);color:var(--apol-color-primary-contrast,#fff);font-weight:700;font-size:1.1rem;margin-bottom:1rem;}.apol-section--s-steps h3{font-size:1.15rem;margin:0 0 .4rem;}.apol-section--s-steps .apol-s-step p{color:var(--apol-color-muted,#666);margin:0;}@media(max-width:820px){.apol-section--s-steps .apol-s-grid{grid-template-columns:1fr;gap:1.5rem;}}
/* team */
.apol-section--s-team{text-align:center;}.apol-section--s-team h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .5rem;}.apol-section--s-team .apol-s-sub{color:var(--apol-color-muted,#666);max-width:640px;margin:0 auto 2.75rem;}.apol-section--s-team .apol-s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}.apol-section--s-team .apol-s-card{text-align:center;}.apol-section--s-team .apol-s-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--apol-radius-lg,14px);background:var(--apol-color-surface,#eef1f6);margin-bottom:1rem;}.apol-section--s-team h3{font-size:1.1rem;margin:0;}.apol-section--s-team .apol-s-role{color:var(--apol-color-primary,#0099cc);font-size:.9rem;font-weight:600;margin:.15rem 0 .5rem;}.apol-section--s-team .apol-s-card p{color:var(--apol-color-muted,#666);font-size:.92rem;margin:0;}@media(max-width:900px){.apol-section--s-team .apol-s-grid{grid-template-columns:1fr 1fr;}}@media(max-width:520px){.apol-section--s-team .apol-s-grid{grid-template-columns:1fr;}}
/* gallery (viewer wired by enhanceGalleries in scripts_additional.js) */
.apol-section--s-gal h2{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 2.5rem;}.apol-section--s-gal .apol-s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}.apol-section--s-gal a{display:block;overflow:hidden;border-radius:var(--apol-radius-md,10px);}.apol-section--s-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .25s ease;}.apol-section--s-gal a:hover img{transform:scale(1.05);}@media(max-width:720px){.apol-section--s-gal .apol-s-grid{grid-template-columns:1fr 1fr;}}
/* pricing tiers */
.apol-section--s-price{text-align:center;}.apol-section--s-price h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .5rem;}.apol-section--s-price .apol-s-sub{color:var(--apol-color-muted,#666);max-width:600px;margin:0 auto 2.75rem;}.apol-section--s-price .apol-s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;text-align:left;}.apol-section--s-price .apol-s-tier{display:flex;flex-direction:column;background:var(--apol-color-background,#fff);border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-lg,14px);padding:2rem;}.apol-section--s-price .apol-s-tier--hot{border-color:var(--apol-color-primary,#0099cc);box-shadow:0 16px 40px rgba(0,0,0,.1);position:relative;}.apol-section--s-price .apol-s-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--apol-color-primary,#0099cc);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px;}.apol-section--s-price .apol-s-tname{font-weight:700;font-size:1.15rem;}.apol-section--s-price .apol-s-price{font-size:2.6rem;font-weight:800;margin:.5rem 0 0;line-height:1;}.apol-section--s-price .apol-s-per{color:var(--apol-color-muted,#666);font-size:.9rem;margin-bottom:1.25rem;}.apol-section--s-price ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem;flex:1;}.apol-section--s-price li{position:relative;padding-left:1.7rem;color:var(--apol-color-text,#222);}.apol-section--s-price li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--apol-color-primary,#0099cc);font-weight:700;font-size:1.05rem;line-height:1.5;}.apol-section--s-price .apol-btn{width:100%;text-align:center;}@media(max-width:900px){.apol-section--s-price .apol-s-grid{grid-template-columns:1fr;}}
/* testimonials (3-up) */
.apol-section--s-quotes h2{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 2.5rem;}.apol-section--s-quotes .apol-s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}.apol-section--s-quotes figure{margin:0;background:var(--apol-color-background,#fff);border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-lg,14px);padding:1.75rem;}.apol-section--s-quotes .apol-s-stars{color:#f5a623;letter-spacing:2px;margin-bottom:.75rem;}.apol-section--s-quotes blockquote{margin:0 0 1.25rem;font-size:1.05rem;line-height:1.6;color:var(--apol-color-text,#222);}.apol-section--s-quotes figcaption{display:flex;align-items:center;gap:.75rem;}.apol-section--s-quotes figcaption img{width:44px;height:44px;border-radius:999px;object-fit:cover;}.apol-section--s-quotes .apol-s-nm{font-weight:700;display:block;}.apol-section--s-quotes .apol-s-rl{color:var(--apol-color-muted,#666);font-size:.9rem;}@media(max-width:900px){.apol-section--s-quotes .apol-s-grid{grid-template-columns:1fr;}}
/* single quote */
.apol-section--s-quote1{background:var(--apol-color-surface,#f5f5f5);text-align:center;}.apol-section--s-quote1 .apol-section__container{max-width:820px;}.apol-section--s-quote1 .apol-s-stars{color:#f5a623;letter-spacing:3px;font-size:1.2rem;margin-bottom:1rem;}.apol-section--s-quote1 blockquote{margin:0 0 1.5rem;font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.5;font-weight:500;color:var(--apol-color-heading,#222);}.apol-section--s-quote1 img{width:56px;height:56px;border-radius:999px;object-fit:cover;}.apol-section--s-quote1 .apol-s-nm{font-weight:700;margin-top:.6rem;}.apol-section--s-quote1 .apol-s-rl{color:var(--apol-color-muted,#666);}
/* faq accordion */
.apol-section--s-faq .apol-section__container{max-width:760px;}.apol-section--s-faq h2{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 2rem;}.apol-section--s-faq details{border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-md,10px);margin:0 0 .75rem;background:var(--apol-color-background,#fff);}.apol-section--s-faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;font-weight:600;color:var(--apol-color-heading,#222);display:flex;justify-content:space-between;align-items:center;gap:1rem;}.apol-section--s-faq summary::-webkit-details-marker{display:none;}.apol-section--s-faq summary::after{content:'+';font-size:1.4rem;color:var(--apol-color-primary,#0099cc);line-height:1;}.apol-section--s-faq details[open] summary::after{content:'\2212';}.apol-section--s-faq details>div{padding:0 1.25rem 1.2rem;color:var(--apol-color-muted,#666);}
/* faq 2-column */
.apol-section--s-faq2 h2{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 2.5rem;}.apol-section--s-faq2 .apol-s-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem;}.apol-section--s-faq2 h3{font-size:1.1rem;margin:0 0 .5rem;}.apol-section--s-faq2 .apol-s-grid p{color:var(--apol-color-muted,#666);margin:0;}@media(max-width:760px){.apol-section--s-faq2 .apol-s-grid{grid-template-columns:1fr;gap:1.75rem;}}
/* contact form split (+ preview placeholder) */
.apol-section--s-cform .apol-section__container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}.apol-section--s-cform h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 1rem;}.apol-section--s-cform .apol-s-lead{color:var(--apol-color-muted,#666);font-size:1.08rem;margin:0 0 1.75rem;}.apol-section--s-cform .apol-s-info{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;}.apol-section--s-cform .apol-s-info li{display:flex;gap:.9rem;align-items:flex-start;}.apol-section--s-cform .apol-s-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:color-mix(in srgb,var(--apol-color-primary,#0099cc) 12%,transparent);color:var(--apol-color-primary,#0099cc);}.apol-section--s-cform .apol-s-ic i{font-size:19px;line-height:1;}.apol-section--s-cform .apol-s-il{font-weight:700;display:block;}.apol-section--s-cform .apol-s-iv{color:var(--apol-color-muted,#666);}@media(max-width:820px){.apol-section--s-cform .apol-section__container{grid-template-columns:1fr;gap:2rem;}}
.apol-cf__preview{display:block;padding:18px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc;}.apol-cf__preview-field{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:10px 12px;color:#64748b;font-size:13px;margin:0 0 10px;}.apol-cf__preview-field--msg{min-height:56px;}.apol-cf__preview-note{font-size:12px;color:#0099CC;font-style:italic;margin:2px 0 0;}
/* contact info cards */
.apol-section--s-cinfo{background:var(--apol-color-surface,#f5f5f5);}.apol-section--s-cinfo .apol-s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;}.apol-section--s-cinfo .apol-s-card{background:var(--apol-color-background,#fff);border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-lg,14px);padding:1.75rem 1.25rem;}.apol-section--s-cinfo .apol-s-ic{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--apol-color-primary,#0099cc) 12%,transparent);color:var(--apol-color-primary,#0099cc);margin-bottom:.9rem;}.apol-section--s-cinfo .apol-s-ic i{font-size:21px;line-height:1;}.apol-section--s-cinfo .apol-s-il{font-weight:700;display:block;margin-bottom:.25rem;}.apol-section--s-cinfo .apol-s-iv{color:var(--apol-color-muted,#666);}@media(max-width:860px){.apol-section--s-cinfo .apol-s-grid{grid-template-columns:1fr 1fr;}}
/* faux map */
.apol-section--s-map{padding-top:0;padding-bottom:0;}.apol-section--s-map .apol-section__container{max-width:100%;padding:0;}.apol-section--s-map .apol-s-map{position:relative;height:420px;background-color:#e8ecf2;background-image:repeating-linear-gradient(0deg,transparent 0 59px,#d7dde6 59px 60px),repeating-linear-gradient(90deg,transparent 0 59px,#d7dde6 59px 60px);display:flex;align-items:center;justify-content:center;}.apol-section--s-map .apol-s-pin{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border-radius:999px;padding:.6rem 1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.12);font-weight:600;color:var(--apol-color-heading,#222);}.apol-section--s-map .apol-s-pin i{font-size:17px;color:var(--apol-color-accent,#cc2127);}
/* newsletter */
.apol-section--s-news{background:var(--apol-color-surface,#f5f5f5);text-align:center;}.apol-section--s-news .apol-section__container{max-width:620px;}.apol-section--s-news h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem;}.apol-section--s-news p{color:var(--apol-color-muted,#666);margin:0 0 1.5rem;}.apol-section--s-news form{display:flex;gap:.6rem;max-width:460px;margin:0 auto;}.apol-section--s-news input{flex:1;padding:.8rem 1rem;border:1px solid var(--apol-color-border,#e2e2e2);border-radius:var(--apol-radius-md,10px);font:inherit;}@media(max-width:520px){.apol-section--s-news form{flex-direction:column;}}
/* cta band */
.apol-section--s-cta{background:var(--apol-color-primary,#0099cc);color:var(--apol-color-primary-contrast,#fff);text-align:center;}.apol-section--s-cta .apol-section__container{max-width:720px;}.apol-section--s-cta h2{color:#fff;font-size:clamp(1.7rem,3.5vw,2.5rem);margin:0 0 .75rem;}.apol-section--s-cta p{color:rgba(255,255,255,.9);font-size:1.12rem;margin:0 0 1.75rem;}.apol-section--s-cta .apol-section__buttons{justify-content:center;}

/* Issue 2 - the ~5px gap under the nav divider is the top padding
   (--apol-gutter-y) on the FIRST legacy column row. Zero it so the first row of
   content sits on the divider line. Covers both 'breadcrumb present' and
   'breadcrumb absent' layouts, AND both the standard (.main_content_inner) and
   full-width / no-margin (.main_content_inner_rows) templates - the _rows twin
   was previously missing, so the gap persisted on rows-template pages only
   (the bottom mirror below already covered both; this brings the top in line). */
.main_content_inner > .flex-container-columns:first-child > [class*="flex-item-"],
.main_content_inner > .breadcrumb_holder + .flex-container-columns > [class*="flex-item-"],
.main_content_inner > .breadcrumb_nomargin_holder + .flex-container-columns > [class*="flex-item-"],
.main_content_inner_rows > .flex-container-columns:first-child > [class*="flex-item-"],
.main_content_inner_rows > .breadcrumb_holder + .flex-container-columns > [class*="flex-item-"],
.main_content_inner_rows > .breadcrumb_nomargin_holder + .flex-container-columns > [class*="flex-item-"] {
  padding-top: 0;
}

/* Mirror of the above at the bottom: the last column of the last row carries a
   --apol-gutter-y bottom padding (the column gutter, ~10px, from the max-width:1000px
   rule). With page margin bottom = 0 that padding is the only thing left between the
   final section and the footer, so zero it so content truly meets the footer.
   :last-child keeps the inter-column gutters intact - only the very last item flushes. */
.main_content_inner > .flex-container-columns:last-child > [class*="flex-item-"]:last-child,
.main_content_inner_rows > .flex-container-columns:last-child > [class*="flex-item-"]:last-child {
  padding-bottom: 0;
}

/* ----------------------------------------------------------------------------
   NOT changed here (these are deliberate design decisions in this base):

   Issue 6 - full bleed. .apol-space-bleed (in style_additional.css) is CORRECT.
   On a STANDARD MARGIN page the content lives in .main_content_inner, which has
   5% gutters and overflow-x:clip (base ~line 135) - so bleed is clipped at the
   gutters BY DESIGN (see the note at base ~line 133). On a FULL WIDTH page
   (.main_content_inner_rows, no gutters) bleed reaches the viewport. So the
   'Transform the way you work' banner not bleeding means that page is set to
   Standard Margin. Intended fix: set the page to Full Width (the apolPageLayout
   button in the editor toolbar). If you would rather Full bleed escape on
   margin pages too, that means relaxing overflow-x:clip on .main_content_inner /
   .main_content_inner_rows - a change to a deliberate rule, so I left it for you
   to decide (html/body already have overflow-x:clip, so page scroll stays
   prevented either way).
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   App Designer: FADE CONTENT IN ON SCROLL
   Opt-in via the App Designer "Page" panel (writes --apol-scroll-reveal: on).
   The managed observer in scripts_additional.js reads that token at load; when
   'on' it stamps html.apol-reveal-on and adds .apol-reveal ONLY to sections that
   start below the fold (so above-the-fold content never flashes), then flips each
   to .is-visible as it scrolls into view. This block only defines the motion.
   Honours prefers-reduced-motion: the observer skips entirely when the user asks
   for reduced motion, and this CSS guard makes revealed content visible even if
   any element was tagged before that check. ---------------------------------- */
.apol-reveal-on .apol-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.apol-reveal-on .apol-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .apol-reveal-on .apol-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ============================================================================
   App Designer - 20 Jul: top-bar visibility, sticky filter bar, filter-bar
   styling, full-screen mobile filter sheet, all-photos lightbox.

   Written as ONE self-contained block rather than another vX.Y override layer.
   Everything is gated on a token and inert at its default, so nothing changes
   on an existing site until the switch is thrown in App Designer.
   ============================================================================ */

/* Tokens introduced here. DELIBERATELY NOT DECLARED IN A :root BLOCK.
   -----------------------------------------------------------------------------
   Every default below is supplied by the var() fallback at the point of use, or
   by only ever style-querying the non-default value - so an author declaration
   would be redundant. It would also be actively harmful: the App Designer
   preview injects its tokens as a <style> appended to the iframe's <body>, and
   a competing declaration inside apol.base.css is what stopped the top bar
   hiding in the preview while it worked correctly on the live site (there the
   value arrives via style_additional.css, which loads after this file).

   This matches how every other show/hide token already works here -
   --apol-prefooter-display, --apol-quickview-display, --apol-listing-filter-hide
   and --apol-breadcrumb-display are all fallback-only, none is declared.

     --apol-topbar-show           flex   | none    (fallback at 'Top bar on/off')
     --apol-listing-filter-sticky (unset)| on      (only 'on' is queried)
     --apol-listing-filter-mobile (unset)| sheet   (read in JS with a default)
     --apol-pdp-lightbox          (unset)| grid    (read in JS with a default)
     --apol-filter-stick-top      0px             (fallback; JS sets it inline)
     --apol-listing-filterbar-bg     #333333      (fallback at line ~4507)
     --apol-listing-filterbar-text   #ffffff      (fallback at line ~4507)
     --apol-listing-filterbar-rule   rgba(255,255,255,.28)
     --apol-listing-filterbar-fill   (unset)| off (only 'off' is queried)
     --apol-listing-filterbar-align  (unset)| left|centre|right
     --apol-listing-filterbar-labels (unset)| icons

   The one exception is --apol-listing-filter-position, which IS declared (line
   ~4899, pre-existing) because its default 'top' is style-queried directly. */

/* --- (1) Top bar on/off ---------------------------------------------------
   .header_top is display:flex at line 750; this later rule of equal
   specificity swaps in the token, so 'none' collapses the bar entirely -
   margin and border go with it, which a height:0 would leave behind. */
.header_top { display: var(--apol-topbar-show, flex); }
/* Top bar hide-on-mobile: independent of the desktop on/off. Default 'flex' isn't
   emitted (equals BASE) so it falls through to --apol-topbar-show (follows desktop);
   the App Designer only writes 'none' when the admin hides it on mobile. */
@media (max-width: 980px) { .header_top { display: var(--apol-topbar-display-m, var(--apol-topbar-show, flex)); } }

/* --- (2) Sticky filter bar (TOP position only) ----------------------------
   Only the dark BAR sticks - not the results count, and not the toolbar box.
   Sticking the whole .apol-cat-toolbar dragged the "Items: 1-12 of 67" line
   and a background panel along with it; the bar alone tucks neatly under the
   site nav while the count scrolls away with the page.

   The offset cannot be a constant: on desktop the reveal-on-scroll-up nav
   (.menu_desktop.is-fixed) sits at top:0, and on mobile it is the .apol-mini
   bar - both toggled at runtime. apol.nav.js measures whichever is covering
   the viewport top and writes --apol-filter-stick-top.

   Left-rail mode already sticks its own panel (line ~5024), so this is scoped
   to top mode to avoid two competing sticky contexts. */
@container style(--apol-listing-filter-sticky: on) {
  @container style(--apol-listing-filter-position: top) {

    /* The TOOLBAR is what sticks, not the bar inside it. A sticky element can
       only travel within its parent's box, and the bar's parent is the closed
       <details> - exactly the bar's own height, so it would have nowhere to
       go and would never latch. The toolbar sits in the tall grid column, so
       it has the full page to travel.

       To keep the results count from riding along, apol.nav.js moves
       .pagination-label-holder OUT of the toolbar to just before it (same
       position visually, since it was the toolbar's first child). That leaves
       the dark bar as the only thing that sticks.

       No background and no padding here: the toolbar must stay visually
       absent, or it greys the strip above and below the bar. */
    /* z-index 50, deliberately LOW. The desktop nav is 1000, but the mobile
       .apol-mini bar is only 60 (line ~1220) - at 900 the filter bar slid
       OVER the mobile nav's dark background instead of tucking under it.
       50 clears the grid (auto) and stays under both navs. The drawer/sheet
       overlays are 11990+, so they are unaffected. */
    .apol-cat-toolbar {
      position: sticky;
      top: var(--apol-filter-stick-top, 0px);
      z-index: 50;
    }

    /* The inline group pop-outs (desktop) live INSIDE this sticky context, so at
       z-index 50 the whole toolbar - pop-outs included - painted UNDER the
       product-card sale ribbon (.corner-ribbon-product, z 99). Lift the context
       above the ribbon on DESKTOP only: mobile keeps z 50 to tuck under the
       mini-nav (z 60), and leaves sticky entirely when a panel opens (line
       ~5713). Still well below the site header (z 1000+). */
    @media (min-width: 981px) {
      .apol-cat-toolbar { z-index: 120; }
    }

    /* Stuck, the bar keeps the PAGE GUTTER rather than full-bleeding to the
       viewport edges. It used to widen itself with a negative-margin pair and
       then push its own contents back inwards with matching padding, which
       left the search input sitting proud of the content below it. The
       toolbar already sits inside the content column that --apol-page-gutter
       (5%) insets, so aligning to the gutter is simply not full-bleeding:
       there is no width or padding to restate here. */
    .apol-cat-toolbar.is-stuck > details.apol-filter-panel > .apol-filter-summary {
      box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
    }
  }
}

/* Sticky's stacking-context TRAP on the mobile overlay.
   position:sticky + z-index makes .apol-cat-toolbar a stacking context - and
   in Chromium position:sticky forms one regardless of z-index. The mobile
   drawer / full-screen sheet is position:fixed with z-index 11995, but it
   lives INSIDE the toolbar, so that 11995 is confined to the toolbar's context
   (z-index 50), which sits below the site header (z 1000-4000). The result:
   with "filter bar follows scroll" on, an OPEN filter overlay rendered under
   the header. (With sticky off the toolbar is not a context, so the fixed
   overlay escapes to the viewport and covers the header - which is why it only
   broke when sticky.)

   While the overlay is open on mobile, take the toolbar out of sticky so it
   stops being a stacking context and the fixed panel escapes to the viewport.
   The collapsed bar's position is irrelevant here because the full-screen
   overlay is over it; it returns to sticky the moment the panel closes. Scoped
   to mobile, so the desktop sticky bar (where the panel is always open inline,
   not an overlay) is untouched. Setting z-index:auto is NOT enough - sticky
   forms the context on its own - so position must actually leave sticky. */
@media (max-width: 980px) {
  .apol-cat-toolbar:has(> details.apol-filter-panel[open]) {
    position: static !important;
    z-index: auto !important;
  }
}

/* --- (3) Filter bar styling ------------------------------------------------
   Background / text colours are tokenised in place at line ~4507 (they need
   !important there). Here: alignment of the label + Reset, and an icons-only
   mode for sites that want the controls bare with no bar behind them. */

/* alignment - the chevron's margin-left:auto (line 3191) is what pushes Reset
   right, so each non-default alignment has to neutralise it. */
@container style(--apol-listing-filterbar-align: left) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: flex-start; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}
@container style(--apol-listing-filterbar-align: centre) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: center; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}
@container style(--apol-listing-filterbar-align: right) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: flex-end; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}

/* icons only: drop the word labels and let the bar colour go transparent if
   the site has set it so. apol.nav.js wraps the summary's bare text nodes in
   .apol-filter-summary-text so there is something to hide. */
@container style(--apol-listing-filterbar-labels: icons) {
  /* summary-text is the "Filter & Sort" label and only ever lives in the
     summary; the reset-text and reset chrome are scoped to the toolbar so the
     rule still reaches the bin after apol.nav.js moves it into the desktop
     bar (see the reset colour note above). */
  .apol-cat-toolbar .apol-filter-summary .apol-filter-summary-text,
  .apol-cat-toolbar .apol-filter-reset-text { display: none; }
  .apol-cat-toolbar .apol-filter-reset {
    border-left: 0; padding-left: 6px;
  }
  .apol-cat-toolbar .apol-filter-summary i,
  .apol-cat-toolbar .apol-filter-reset i { font-size: 1.15rem; }
}

/* No bar: strip the backdrop so the controls sit bare on the page. A colour
   picker cannot express "none", so this is its own toggle rather than a
   sentinel colour value. Without the dark backdrop the white default text
   would vanish, so inherit the page's heading colour instead, and drop the
   horizontal padding so the icons line up with the page gutter. */
@container style(--apol-listing-filterbar-fill: off) {
  .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary {
    background: transparent !important;
  }
  /* Desktop: the single bar is the .apol-filter-body (the summary is hidden
     up there), so strip ITS backdrop and border too, or a site that turned
     the bar off would still get the dark #333 the desktop rule applies by
     default. Controls then sit bare on the page. */
  @media (min-width: 981px) {
    .apol-cat-toolbar details.apol-filter-panel > .apol-filter-body {
      background: transparent !important;
      border-color: transparent !important;
      /* !important, and the count / pill labels inherit it: the desktop bar
         rule sets white text for the dark-bar default and sits LATER in source
         order, so a plain colour here would lose and leave white text
         invisible on the bare page. */
      color: var(--apol-color-heading) !important;
    }
  }
  .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary,
  .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary i,
  .apol-cat-toolbar details.apol-filter-panel > .apol-filter-summary .apol-filter-chevron,
  .apol-cat-toolbar .apol-filter-reset,
  .apol-cat-toolbar .apol-filter-reset i {
    color: var(--apol-color-heading) !important;
  }
  .apol-cat-toolbar .apol-filter-reset {
    border-left-color: var(--apol-color-border);
  }
}

/* --- (4) Full-screen mobile filter sheet -----------------------------------
   Opt-in alternative to the 420px right-hand drawer: full screen, a titled
   header row, generous tappable group rows, and a pinned action bar carrying
   'Clear all' plus the live result count.

   Motion: the sheet slides in from the RIGHT, exactly like the drawer. This
   matters beyond taste - the drawer CSS carries an @starting-style entry rule
   of translateX(100%), so animating to a translateY would interpolate from an
   X offset to a Y offset and the panel would fly in diagonally from the
   corner. Staying on the X axis keeps that entry rule correct.

   All scoped under body.apol-filter-sheet, which apol.nav.js sets from the
   token, so the drawer rules never enter the cascade here. */

/* The header row and the action bar are mobile-only furniture, and the bar
   lives on <body> (it is position:fixed). Hide both by default so neither
   leaks onto desktop, where the panel is a row of pills with no sheet. */
.apol-filter-sheet-head,
.apol-filter-sheet-foot { display: none; }

@media (max-width: 980px) {

  body.apol-filter-sheet .apol-filter-sheet-head,
  body.apol-filter-sheet .apol-filter-sheet-foot { display: flex; }

  body.apol-filter-sheet details.apol-filter-panel > .apol-filter-body {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0;
    box-shadow: none;
    /* header is sticky inside the sheet, footer bar is fixed - reserve for it */
    padding: 0 0 92px !important;
    transform: translateX(100%);
  }
  body.apol-filter-sheet details.apol-filter-panel[open] > .apol-filter-body {
    transform: translateX(0);
  }
  body.apol-filter-sheet .apol-filter-closing > .apol-filter-body {
    transform: translateX(100%) !important;
  }

  /* full-bleed sheet: nothing behind to tap, so the X and the action bar are
     the only ways out. Hide the drawer's scrim pseudo-element. */
  body.apol-filter-sheet details.apol-filter-panel[open] > .apol-filter-summary::after {
    display: none;
  }

  /* sheet header: title + close, stays put while the body scrolls */
  body.apol-filter-sheet .apol-filter-sheet-head {
    position: sticky; top: 0; z-index: 2;
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 20px 14px;
    background: #fff; border-bottom: 1px solid var(--apol-color-border, #e3e3e3);
  }
  body.apol-filter-sheet .apol-filter-sheet-head h2 {
    margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2;
    color: var(--apol-color-heading);
  }
  body.apol-filter-sheet .apol-filter-sheet-head .apol-filter-drawer-close {
    position: static; width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 50%;
    font-size: 1.35rem; line-height: 1; color: var(--apol-color-heading);
    cursor: pointer;
  }
  body.apol-filter-sheet .apol-filter-sheet-head .apol-filter-drawer-close:hover {
    background: var(--apol-color-surface-2, #f4f4f4);
  }

  /* Rows: one generous tap target per filter, label over current value.
     The search box and the select pills need breathing room too - previously
     they sat flush against the sheet edges. */
  body.apol-filter-sheet .apol-filter-body { gap: 0 !important; }
  /* NB descendant selectors, not '>': .apol-filter-controls and
     .apol-filter-groups are display:contents, so their CHILDREN are the flex
     items - but they are still nested in the DOM. A child combinator follows
     the DOM tree, so '.apol-filter-body > .input-icons' matches nothing and
     the sheet rows ended up with no side padding at all. */
  body.apol-filter-sheet details.apol-filter-panel .apol-filter-body .input-icons,
  body.apol-filter-sheet details.apol-filter-panel .apol-filter-body .apol-filter-group {
    padding-left: 20px; padding-right: 20px;
  }
  body.apol-filter-sheet .apol-filter-body .input-icons { margin: 14px 0; }

  /* A Sort / View / Per-page select is a .apol-select-pill (a .apol-filter-
     group) that apol.nav.js inserts INSIDE its .input-icons wrapper. Both the
     wrapper and the pill match the 20px row-padding rule above, so the pill
     ended up double-indented (40px) and a step narrower than the filter rows.
     Make the wrapper transparent when it holds a pill - no padding, no margin,
     no border, no min sizing - so the pill itself is the row and aligns pixel-
     for-pixel with the filter groups (which get their padding + border direct).
     The search box keeps its own wrapper treatment; it has no pill inside. */
  body.apol-filter-sheet .apol-filter-body .input-icons:has(> .apol-select-pill) {
    padding: 0 !important; margin: 0 !important; border: 0 !important;
  }
  body.apol-filter-sheet .apol-filter-body input[type="text"],
  body.apol-filter-sheet .apol-filter-body select { width: 100%; }

  /* Row dividers on the filter groups (and the select pills, which are
     .apol-filter-group) only - NOT on the search's .input-icons. The search
     input already has its own box border, so a wrapper divider right beneath
     it read as an odd stray line. */
  body.apol-filter-sheet .apol-filter-group {
    border-bottom: 1px solid var(--apol-color-border, #e9e9e9);
  }
  body.apol-filter-sheet .apol-filter-group > .apol-filter-group-summary {
    display: flex; align-items: center; gap: 14px;
    min-height: 72px; padding: 16px 0;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    font-size: 1.05rem; font-weight: 600; color: var(--apol-color-heading);
  }
  /* the value line apol.nav.js writes under each group label. The select
     pills (Sort by / View / Per page) keep their value in .apol-select-pill-
     label rather than .apol-filter-group-value - it is the label a DESKTOP
     visitor reads, so it must not inherit the desktop rule that hides
     .apol-filter-group-value. Here on the sheet it should look identical, so
     it is included alongside: same block, same muted value line, so the
     Sort / View rows match the filter rows instead of being a shorter,
     inline-valued shape. */
  body.apol-filter-sheet .apol-filter-group-value,
  body.apol-filter-sheet .apol-select-pill .apol-select-pill-label {
    display: block; margin-top: 3px;
    font-size: .9rem; font-weight: 400; color: var(--apol-color-muted, #6b6b6b);
  }
  body.apol-filter-sheet .apol-filter-group-summary .apol-filter-group-text {
    flex: 1 1 auto; min-width: 0;
  }

  /* Groups open like blinds. A native <details> snaps its panel open, so the
     panel is wrapped in a grid whose row track animates 0fr -> 1fr; that is
     the one way to transition to an auto height without measuring it in JS.
     min-height:0 on the inner element is required or the content refuses to
     compress on the way back. */
  body.apol-filter-sheet .apol-filter-group > .apol-filter-group-panel {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 !important; border: 0 !important; box-shadow: none !important;
    transition: grid-template-rows .28s ease;
  }
  body.apol-filter-sheet .apol-filter-group[open] > .apol-filter-group-panel {
    grid-template-rows: 1fr;
  }
  /* apol.nav.js wraps the panel's contents in this single child - the grid
     row can only size one explicit track, so several loose <label>s would
     spawn auto-sized implicit rows and the panel would never collapse. */
  body.apol-filter-sheet .apol-filter-group > .apol-filter-group-panel > .apol-filter-group-inner {
    min-height: 0;
    overflow: hidden;
  }
  /* the closing row's padding has to live inside the animating track */
  body.apol-filter-sheet .apol-filter-group[open] > .apol-filter-group-panel > .apol-filter-group-inner {
    padding-bottom: 18px;
  }
  @media (prefers-reduced-motion: reduce) {
    body.apol-filter-sheet .apol-filter-group > .apol-filter-group-panel { transition: none; }
  }

  /* pinned action bar: just the 'View results' button now. 'Clear all' was
     removed (apol.nav.js no longer builds it) - the Reset bin lives on the
     main filter bar, which is visible above the sheet, so a second clear
     control here was a duplicate. */
  body.apol-filter-sheet .apol-filter-sheet-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 11996;
    align-items: center; gap: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--apol-color-border, #e3e3e3);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    visibility: hidden; opacity: 0; transition: opacity .28s ease, visibility .28s ease;
  }
  body.apol-filter-sheet .apol-filter-sheet-foot.is-open {
    visibility: visible; opacity: 1;
  }
  /* the existing 'View results' button is reused as the primary action and
     moved into the bar by apol.nav.js. Full width, in the App Designer BUTTON
     style: corner / padding / font come from the button tokens (not a bespoke
     999px pill), so it matches every other primary button on the site. It read
     --apol-button-radius before, which App Designer does not emit, so the
     corner setting never reached it. Fallbacks are the prior values. */
  body.apol-filter-sheet .apol-filter-sheet-foot .apol-filter-drawer-apply {
    display: block !important;
    flex: 1 1 100%; width: 100% !important; margin: 0 !important;
    padding: var(--apol-button-padding-y, 15px) var(--apol-button-padding-x, 18px) !important;
    border: 0;
    border-radius: var(--apol-button-corner, var(--apol-button-radius, 8px)) !important;
    background: var(--apol-color-primary); color: var(--apol-color-primary-contrast, #fff);
    font-size: var(--apol-button-font-size, 1rem);
    font-weight: var(--apol-button-font-weight, 600);
    line-height: 1.2; text-align: center; cursor: pointer;
  }
}

/* --- (5) 'All photos on one page' lightbox --------------------------------
   Replaces the Fancybox one-at-a-time carousel with a single scrolling
   patchwork of every image. Built by apol.pdp.gallery.js when
   --apol-pdp-lightbox is 'grid'; the markup is appended to <body>. */
.apol-photogrid {
  position: fixed; inset: 0; z-index: 12000;
  display: none; flex-direction: column;
  background: var(--apol-color-surface, #fff);
}
.apol-photogrid.is-open { display: flex; }
/* Lock BOTH the root and the body. Locking <body> alone leaves the page
   scrollbar rendered behind the overlay, so you get two scrollbars side by
   side - the gallery's and the page's.

   The :has() rule is what actually does the work: it locks <html> purely from
   the class on <body>, so the lock holds even if apol.pdp.gallery.js is stale
   or cached and never adds the class to <html>. The explicit html.* selector
   is kept as the fallback for any engine without :has(). */
html:has(body.apol-photogrid-open),
html.apol-photogrid-open,
body.apol-photogrid-open { overflow: hidden !important; }

.apol-photogrid-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  background: #fff; border-bottom: 1px solid var(--apol-color-border, #e3e3e3);
}
.apol-photogrid-count {
  font-size: 1rem; font-weight: 600; color: var(--apol-color-heading);
}
.apol-photogrid-close {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; color: var(--apol-color-heading); cursor: pointer;
}
.apol-photogrid-close:hover { background: var(--apol-color-surface-2, #f4f4f4); }

/* The mosaic rhythm: TWO columns at every width, with every 3rd tile running
   full width. That yields full / half+half / full / half+half - a regular,
   predictable cadence.

   It is deliberately NOT a 3-column grid with a 2-column span (the first
   attempt): with 3 tracks the spanning tile cannot always find two adjacent
   free columns, so auto-placement leaves holes and the result reads as
   scattered rather than as a mosaic. */
.apol-photogrid-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 8px 40px;
  align-content: start;
  /* grid-auto-rows MUST be max-content, not the 'auto' default. The tiles get
     their height from aspect-ratio, and inside this height-constrained
     flex child an auto row resolves against the container instead of the
     item - rows collapsed to ~95px while the tiles stayed 178-366px, so every
     tile overflowed its row and painted over the next one. max-content forces
     each row to size to the tile it holds. */
  grid-auto-rows: max-content;
}
.apol-photogrid-tile {
  margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0;
}
.apol-photogrid-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apol-photogrid-tile:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Desktop keeps the same two-column cadence - only the gutters change, and the
   grid is centred with a max content width so the tiles stay a sane size on a
   wide monitor. */
@media (min-width: 768px) {
  .apol-photogrid-body {
    gap: 12px;
    padding: 12px max(12px, calc((100vw - 1180px) / 2)) 60px;
  }
}

/* tapping a tile zooms it over the grid (the grid stays scrolled behind) */
.apol-photogrid-zoom {
  position: fixed; inset: 0; z-index: 12010;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92); padding: 24px;
}
.apol-photogrid-zoom.is-open { display: flex; }
.apol-photogrid-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.apol-photogrid-zoom .apol-photogrid-close { position: absolute; top: 14px; right: 14px; color: #fff; }
.apol-photogrid-zoom .apol-photogrid-close:hover { background: rgba(255, 255, 255, .15); }

/* ============================================================================
   Section template ALIGNMENT (apol-align-left | -center | -right)

   Applied by the editor's context toolbar (Spacing / align popover) to the
   section or loose block itself, alongside apol-space-* / apol-vspace-*.
   Absent by default, so untouched content round-trips byte-identical.

   !important is required for the same reason as .apol-space-bleed above: the
   per-tenant style_additional.css (which carries each template's own css_body,
   much of it hard-coding text-align:center or a container max-width) loads
   AFTER this file, so source order alone would lose.

   Three hooks are needed because templates are built three different ways:
     1. .apol-section__container / .apol-columns__inner - the capped, centred
        wrapper nearly every section template uses. Alignment = which side the
        auto margin goes on.
     2. text-align - templates that centre their own copy.
     3. justify-content - flex rows (the top-bar templates are built this way,
        and a margin change alone would do nothing to them).
   ============================================================================ */

.apol-align-left  > .apol-section__container,
.apol-align-left  > .apol-columns__inner  { margin-left: 0 !important;    margin-right: auto !important; }
.apol-align-center > .apol-section__container,
.apol-align-center > .apol-columns__inner { margin-left: auto !important; margin-right: auto !important; }
.apol-align-right > .apol-section__container,
.apol-align-right > .apol-columns__inner  { margin-left: auto !important; margin-right: 0 !important; }

.apol-align-left  { text-align: left !important; }
.apol-align-center { text-align: center !important; }
.apol-align-right { text-align: right !important; }

/* Flex rows (top-bar templates). The align class can land EITHER on an
   ancestor (a section wrapping the row) or on the row itself - the top-bar
   templates are bare divs, so the editor applies the class directly to the
   flex row. Both cases have to be covered or aligning a top-bar template
   silently does nothing. */
.apol-align-left:is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps),
.apol-align-left  :is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps)  { justify-content: flex-start !important; }
.apol-align-center:is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps),
.apol-align-center :is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps) { justify-content: center !important; }
.apol-align-right:is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps),
.apol-align-right :is(.apol-topbar-row, .apol-topbar-promo, .apol-topbar-usps)  { justify-content: flex-end !important; }

/* a loose (non-section) block has no inner container - align the block */
.apol-loose.apol-align-left  { margin-left: 0;    margin-right: auto; }
.apol-loose.apol-align-center { margin-left: auto; margin-right: auto; }
.apol-loose.apol-align-right { margin-left: auto; margin-right: 0; }

/* Full-width / bleed cancels the capped container, so a margin-auto shift has
   nothing to move against. Keep text alignment working in that case. */
.apol-space-0.apol-align-center > .apol-section__container,
.apol-space-bleed.apol-align-center > .apol-section__container { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================================
   App Designer - hide the card button, make the whole card the link.

   Two card families, two mechanisms, because their markup differs:

   LISTING CARDS (.data_grid_card - products, events, DE listing items)
     The CTA is a plain <div class="viewproduct_button_link">, NOT a link, and
     the card already contains a real anchor to the item
     (a.nochange_link, a direct child, wrapping the image). So: hide the div and
     stretch that existing anchor over the card. No markup change - which
     matters, because this card is emitted by the duplicated Cache_CategoryArea*
     generators in the precompiler and editing those is a two-copy job.

   CONTENT CARDS (.card - the section-template / content card box)
     Here the CTA usually IS the only link, so display:none would throw the
     href away and leave nothing to click. Instead the button is stretched over
     the card and made visually invisible - the card keeps a real, focusable
     link for accessibility and SEO.

   Both are queried on the non-default value only, so an untouched site never
   enters these rules and no :root declaration is needed (see the token note
   at the top of this block).
   ============================================================================ */

@container style(--apol-listing-card-btn: hidden) {

  /* mirrors the four-variant selector list at line ~4813, which sets
     display:flex !important - same specificity, so this must stay later in
     source order to win */
  .data_grid_card .viewproduct_button_link,
  .data_grid_card_small .viewproduct_button_link,
  .data_grid_card_large .viewproduct_button_link,
  .data_grid_card_wide .viewproduct_button_link { display: none !important; }

  /* The CTA bottom-align routine in resources.min.js (~line 724) inserts a
     .js-cta-spacer above the button and sizes it from the button's measured
     position. It bails on a MISSING button (`if (!btn) return`) but not on a
     hidden one: display:none gives a zero rect, so spaceAboveBtn goes strongly
     negative and the computed spacer height runs away - and because the spacer
     grows the card, the next pass measures a taller card and grows again. That
     feedback loop reached ~17,800px per card and ~37,000px of page.

     Hiding the spacer breaks the loop at the layout stage: the routine still
     writes its silly inline height, but a display:none element contributes
     nothing, so the card height stays honest and the loop cannot compound.
     Done here rather than in resources.min.js - that file is shared, minified,
     and this state only arises from this token. */
  .data_grid_card .js-cta-spacer,
  .data_grid_card_small .js-cta-spacer,
  .data_grid_card_large .js-cta-spacer,
  .data_grid_card_wide .js-cta-spacer { display: none !important; }

  /* .data_grid_card is already position:relative, so ::after resolves against
     the card box and covers the whole tile. z-index 1 keeps it BELOW the
     Quick View button (z-index 4) and the colour swatches (z-index 5), which
     must stay independently clickable. */
  .data_grid_card > a.nochange_link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
}

@container style(--apol-card-btn: hidden) {

  /* .card is the content card box (App Designer > Cards & surfaces);
     .apol-card is the section-template card. Both are "normal cards". */
  .card, .apol-card { position: relative; }

  /* Keep the anchor (and its href) but collapse it into an invisible overlay
     covering the card. font-size:0 + color:transparent hides the label without
     display:none, which would remove the link entirely. */
  .card .apol-btn, .apol-card .apol-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
  .card .apol-btn:hover, .apol-card .apol-btn:hover,
  .card .apol-btn:focus, .apol-card .apol-btn:focus { background: transparent; box-shadow: none; }
  /* a visible focus ring on the card itself, since the button has no box now */
  .card .apol-btn:focus-visible,
  .apol-card .apol-btn:focus-visible { outline: 2px solid var(--apol-color-primary); outline-offset: -2px; }
}

/* ============================================================================
   Item page gallery: "Large image with photo grid beside it"
   (App Designer > Item Page > Gallery layout = herogrid)

   AutoTrader-style banner: one big lead photo on the left and a SCROLLABLE
   thumbnail grid on the right. apol.pdp.gallery.js re-parents every non-lead
   cell into .pdp-herogrid-rail (the lead keeps .pdp-herogrid-lead and stays a
   direct child of the stage), so ALL photos are reachable by scrolling the rail.
   The old layout hid everything past the 5th tile (n+6 { display:none }) and
   only the lightbox could reach the rest.

   Structure (desktop):
     .carousel.pdp-gallery.pdp-gallery--herogrid   grid: [lead 2fr][rail 1fr]
       > .gallery-cell.pdp-herogrid-lead           left column, full height
       > .pdp-herogrid-rail                         right column, scrolls
           > .gallery-cell  x N                     2-col thumbnail grid

   Because the tiles are now NESTED in the rail, herogrid styling uses DESCENDANT
   selectors for the images/anchors and rail-scoped child selectors for the
   tiles - NOT the old '> .gallery-cell' direct-child selectors, which only the
   lead still matches.
   ============================================================================ */

.carousel.pdp-gallery.pdp-gallery--herogrid {
  display: grid !important;
  /* lead on the left, rail on the right, split evenly so the lead is not too
     wide and the thumbnails read large (AutoTrader proportions). */
  grid-template-columns: 1fr 1fr;
  /* minmax(0,1fr) pins the single row to the aspect-ratio height so the two-row
     rail inside can divide it cleanly and stay bounded (no growth). */
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  aspect-ratio: 16 / 6;
  position: relative;                 /* anchor the rail scroll-arrows */
  /* the mosaic mode makes this a scroll-snap row; unset that here */
  overflow: visible !important;
  scroll-snap-type: none !important;
}

/* lead photo: left column, full banner height. position:relative !important so
   the count badge anchors to it (the mosaic rule sets position:static !important
   on every .gallery-cell at >=1001px and would otherwise win). object-fit:cover
   on the image crops it to the column. */
.pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-lead {
  position: relative !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: 0 !important;
}

/* the rail: a TWO-ROW strip that scrolls HORIZONTALLY (the AutoTrader film-
   strip). grid-auto-flow:column lays the thumbnails top-then-bottom down each
   column, so image 2 sits above image 3, image 4 above image 5, and so on -
   each scroll step to the right reveals a fresh vertical pair. grid-auto-columns
   pins every column to exactly half the rail (minus half the 8px gap) so
   precisely TWO columns are visible at rest = a 2x2 block; the rest overflow to
   the right and the chevron arrows (or a trackpad) scroll to them. min-height:0
   keeps the two rows bounded to the banner height; overflow-y is clipped so the
   scroll axis is purely horizontal. */
.pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-rail {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 8px) / 2);
  gap: 8px;
  height: 100%;
  min-height: 0;
  /* overflow-x:hidden (NOT auto): the rail is deliberately NOT user-scrollable,
     so a mouse wheel over the thumbnails scrolls the PAGE as normal instead of
     being hijacked into horizontal image-scroll. The chevron arrows still drive
     it (overflow:hidden stays programmatically scrollable via scrollBy). This
     also drops the stray trackpad-swipe / browser back-gesture. */
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;              /* the chevron arrows drive it */
}
.pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-rail::-webkit-scrollbar { display: none; }

/* rail tiles: each fills its grid cell (one of the two rows x an auto column);
   object-fit:cover on the image crops it. width/height/aspect are unset so the
   grid track drives the size. grid-column:auto and aspect-ratio:auto override
   the mosaic ':last-child:nth-child(odd) { grid-column:1/-1; aspect-ratio:16/10 }'
   rule, which would otherwise blow the last odd tile across every column.
     MUST be gated to >=1001px: this selector is 6 classes deep, so left
   unmediated it would out-specific the 5-class mobile '.gallery-cell' fallback
   below and force the wrong size on the swipe cells. */
@media (min-width: 1001px) {
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-rail > .gallery-cell,
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-rail > .inner-cell {
    position: relative;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: 0 !important;
    grid-column: auto !important;
  }
}

/* Herogrid spans the FULL page width, with the buy box + info stacked BELOW it
   (the Autotrader arrangement). apol.pdp.gallery.js adds .pdp-stage--gallery-full
   to the stage row in herogrid mode. Desktop only - mobile already stacks. The
   buy box drops its sticky so it sits statically under the gallery. */
@media (min-width: 1001px) {
  .flex-container-columns.pdp-stage.pdp-stage--gallery-full > .pdp-gallery-col { width: 100% !important; order: 1; }
  .flex-container-columns.pdp-stage.pdp-stage--gallery-full > .pdp-right {
    width: 100% !important; order: 2;
    position: static !important; top: auto !important; margin-top: 2rem;
    /* drop the 1.5% column gutter margin - in full width it just indents the
       name/price past the gallery and the lower description below it */
    margin-left: 0 !important;
  }
  .flex-container-columns.pdp-stage.pdp-stage--gallery-full > .pdp-content { width: 100% !important; order: 3; }
}

/* images / anchors fill their cell - descendant selectors so this covers both
   the lead and every rail tile. */
.pdp-gallery--herogrid .gallery-cell img,
.pdp-gallery--herogrid .inner-cell img,
.pdp-gallery--herogrid .gallery-cell picture,
.pdp-gallery--herogrid .inner-cell picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;      /* AutoTrader has square corners */
}
.pdp-gallery--herogrid .gallery-cell a,
.pdp-gallery--herogrid .inner-cell a { display: block; width: 100%; height: 100%; border-radius: 0 !important; }

/* rail scroll chevrons (apol.pdp.gallery.js -> heroRailArrows). Absolutely
   positioned over the rail (the herogrid container is position:relative): prev
   just inside the rail's left edge - which is ~half the container plus the gap -
   and next at the far right. They auto-hide at the ends via .is-hidden. */
.pdp-herogrid-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 42px; height: 42px; padding: 0; border: 0;
  border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--apol-color-heading, #111);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  font-size: 1rem; line-height: 1;
}
.pdp-herogrid-arrow:hover { background: #fff; }
.pdp-herogrid-arrow--prev { left: calc(50% + 12px); }
.pdp-herogrid-arrow--next { right: 10px; }
.pdp-herogrid-arrow.is-hidden { display: none; }

/* "Gallery" button on the lead photo (legacy - JS no longer injects it; kept so
   the App Designer preview reset path still has something to clear). */
.pdp-herogrid-open {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: 999px;
  background: #fff; color: var(--apol-color-heading);
  font-size: .9rem; font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.pdp-herogrid-open:hover { background: var(--apol-color-surface-2, #f4f4f4); }

/* total-photo count, over the lead image */
.pdp-herogrid-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: #fff; color: var(--apol-color-heading);
  font-size: .85rem; font-weight: 600; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  pointer-events: none;
}

/* Mobile: the rail beside the lead is too small to read, so herogrid FALLS BACK
   to the standard single-image swipe rail - one photo per view, native swipe,
   tap opens the Fancybox lightbox. display:contents flattens .pdp-herogrid-rail
   so its tiles rejoin the flex swipe row alongside the lead (all photos; the
   desktop rail wrapper is inert here). Scoped to <=1000px to match the mosaic
   mobile breakpoint. grid-column / grid-row are inert once the container is
   flex, so no explicit unset is needed beyond the reset below. */
@media (max-width: 1000px) {
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid {
    display: flex !important;
    flex-direction: row;
    grid-template-columns: none !important;
    gap: 0;
    aspect-ratio: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid::-webkit-scrollbar { display: none; }
  /* flatten the rail wrapper so its tiles become swipe items of the container */
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid > .pdp-herogrid-rail {
    display: contents !important;
  }
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid .gallery-cell,
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--herogrid .inner-cell {
    display: block !important;               /* one photo per view */
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--apol-pdp-hero-ar, 3 / 4) !important;
    scroll-snap-align: center;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .pdp-gallery--herogrid .pdp-herogrid-count,
  .pdp-gallery--herogrid .pdp-herogrid-open,
  .pdp-gallery--herogrid .pdp-herogrid-arrow { display: none !important; }
}

/* ============================================================================
   SINGLE-image SWIPE gallery (App Designer gallery mode "single") - the
   original classic gallery: ONE image at a time in a horizontal scroll-snap
   rail you swipe / drag / arrow through, NO thumbnail strip, and a click opens
   the Fancybox lightbox (the data-fancybox anchors are always present). It is
   the mobile rail applied at ALL widths. apol.pdp.gallery.js adds
   .pdp-gallery--single to the stage and .pdp-single to the gallery host.
   Image proportion follows the App Designer "main image" ratio
   (--apol-pdp-hero-ar). NOTE: different from the automatic single-IMAGE-product
   handling below (:only-child) - this is a chosen gallery TYPE for any product.
   ============================================================================ */
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single {
  display: flex !important;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: static;
  cursor: grab;                       /* desktop click-drag to swipe (JS) */
}
/* Desktop: the single rail is driven by click-drag + dots + autoplay (all
   programmatic scroll), so make it NOT user-scrollable - a mouse wheel over it
   then scrolls the PAGE as normal instead of being hijacked into horizontal
   image-scroll. Mobile keeps overflow-x:auto above for native touch swipe. */
@media (min-width: 1001px) {
  .pdp-stage .carousel.pdp-gallery.pdp-gallery--single { overflow-x: hidden; }
}
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single.pdp-dragging {
  cursor: grabbing;
  scroll-snap-type: none;             /* free scroll while dragging; snaps on release */
  scroll-behavior: auto;
}
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single::-webkit-scrollbar { display: none; }
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .gallery-cell,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .inner-cell {
  position: static !important;
  float: none !important;
  flex: 0 0 100% !important;
  scroll-snap-align: center;
  aspect-ratio: var(--apol-pdp-hero-ar, 4 / 3);
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: hidden;
  border-radius: 0;
}
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .gallery-cell > a,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .gallery-cell picture,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .inner-cell > a,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single > .inner-cell picture { display: block; width: 100%; height: 100%; }
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single img,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single .carousel-cell-image {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* Navigation is swipe / drag + FOOTER DOTS (the original gallery's style) - no
   arrows over the image, at any width. The image must not ghost-drag while you
   click-drag to swipe. */
.product_gallery_container.pdp-single { position: relative; }
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single img,
.pdp-stage .carousel.pdp-gallery.pdp-gallery--single a {
  -webkit-user-drag: none; user-select: none;
}
.pdp-single-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
}
.pdp-single-dots .pdp-dot {
  width: 9px; height: 9px;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--apol-color-border, #d4d4d4);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.pdp-single-dots .pdp-dot.is-on {
  background: var(--apol-color-primary, #0099cc);
  transform: scale(1.15);
}

/* ============================================================================
   SINGLE-IMAGE product: bypass every multi-image grid mode.
   A lone product image inside a herogrid (4-up) or mosaic grid renders sparse
   and half-width - the App Designer layout modes are all designed for several
   photos. When there is exactly one image, drop the grid entirely and show one
   clean, full-width, uncropped image that opens the Fancybox lightbox on click
   (the data-fancybox anchor is always present). This is the "original gallery"
   for single-image items. Placed AFTER the herogrid block and unmediated so it
   wins over every mode at every width; :has() matches the gallery holding a
   single cell (gallery-cell OR inner-cell wrapper).
   ============================================================================ */
.pdp-stage .carousel.pdp-gallery:has(> .gallery-cell:only-child),
.pdp-stage .carousel.pdp-gallery:has(> .inner-cell:only-child) {
  display: block !important;
}
.pdp-stage .carousel.pdp-gallery:has(> .gallery-cell:only-child) > .gallery-cell,
.pdp-stage .carousel.pdp-gallery:has(> .inner-cell:only-child) > .inner-cell {
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}
.pdp-stage .carousel.pdp-gallery:has(> .gallery-cell:only-child) > .gallery-cell > a,
.pdp-stage .carousel.pdp-gallery:has(> .gallery-cell:only-child) > .gallery-cell picture,
.pdp-stage .carousel.pdp-gallery:has(> .inner-cell:only-child) > .inner-cell > a,
.pdp-stage .carousel.pdp-gallery:has(> .inner-cell:only-child) > .inner-cell picture {
  height: auto !important;
}
.pdp-stage .carousel.pdp-gallery:has(> .gallery-cell:only-child) img,
.pdp-stage .carousel.pdp-gallery:has(> .inner-cell:only-child) img {
  height: auto !important;
  object-fit: contain !important;
}

/* ============================================================================
   FILTER BAR - consolidated layout layer.

   Replaces the three trailing blocks that used to live here ("results count
   inside the bar", "final pass", and the alignment set), which overrode each
   other. One place now owns: where the results count sits, how the bar
   aligns, the desktop single-row bar, and the mobile sheet's action bar. The
   earlier ECOM vX.Y layers still own bar colour, drawer motion and the group
   internals.

   BREAKPOINT: 980/981px throughout, matching the site's mobile navigation.
   The old 768/769 split left the 769-980 band rendering mobile chrome with
   the DESKTOP filter layout - the panel fell back to position:static and
   appeared inline in the page flow, with no sheet header and so no way to
   close it. Keep this in step with apol.nav.js.
   ============================================================================ */

/* --- (1) Results count in the bar ------------------------------------------
   apol.nav.js tags .pagination-label-holder as .apol-filter-count-inbar and
   moves it into the bar - into the <summary> on mobile, into the
   .apol-filter-body row on desktop. So these are scoped to the TOOLBAR, not
   to a particular parent, or the desktop position loses its styling and the
   holder falls back to its base rule (position:absolute; right:5px;
   top:-23px, line ~2640) which floats it out of the bar entirely. */
.apol-cat-toolbar .apol-filter-count-inbar {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  /* The holder inherits margin-bottom:8px, and align-self centres the MARGIN
     box, so that 8px lifted the visible text ~4px above the bar's centre
     line. Only the vertical margins are cleared - margin-left is what the
     alignment modes below use to push the count around. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.apol-cat-toolbar .apol-filter-count-inbar .pagination-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* the red "Items:" label reads as an error colour on a dark bar - inherit */
.apol-cat-toolbar .apol-filter-count-inbar .pagination-label,
.apol-cat-toolbar .apol-filter-count-inbar .pagination-label::before {
  color: inherit !important;
}
.apol-cat-toolbar .apol-filter-count-inbar .pagination-label::before {
  line-height: 1;
  margin-right: 4px;
}

/* --- (2) Alignment (mobile bar) --------------------------------------------
   'apart' (Filter left, Reset + count right) is the DEFAULT, so it is the
   BASE rule here rather than a container query.

   --apol-listing-filterbar-align is only emitted when the site picks a
   non-default value, so a @container query for 'apart' matches nothing on a
   default site. That is exactly what stranded the Reset bin mid-bar: the
   chevron is hidden on mobile, so Reset's margin-left:auto and the count's
   margin-left:auto split the free space between them and Reset came to rest
   in the middle. Base sets the default; the queries below cover the three
   non-default modes only.

   Do NOT declare the token in a :root{} block to give it a default - the App
   Designer preview injects tokens as a <style> on the iframe's <body>, and an
   author declaration competes with it, making the control look dead in the
   preview while working on the live site. */
.apol-cat-toolbar .apol-filter-summary { justify-content: flex-start; }
.apol-cat-toolbar .apol-filter-summary .apol-filter-reset { margin-left: auto; }
.apol-cat-toolbar .apol-filter-summary .apol-filter-count-inbar { margin-left: 0; }

/* The chevron also carries margin-left:auto (line ~3200) to push Reset right.
   With Reset now owning that auto the chevron has to give it up, or the two
   fight and the count is pushed off the end of the bar. */
.apol-cat-toolbar .apol-filter-summary:has(.apol-filter-count-inbar) .apol-filter-chevron {
  margin-left: 0;
}

@container style(--apol-listing-filterbar-align: left) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: flex-start; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-reset,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-count-inbar,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}
@container style(--apol-listing-filterbar-align: centre) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: center; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-reset,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-count-inbar,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}
@container style(--apol-listing-filterbar-align: right) {
  .apol-cat-toolbar .apol-filter-summary { justify-content: flex-end; }
  .apol-cat-toolbar .apol-filter-summary .apol-filter-reset,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-count-inbar,
  .apol-cat-toolbar .apol-filter-summary .apol-filter-chevron { margin-left: 0; }
}

/* --- (3) Desktop: ONE bar --------------------------------------------------
   This used to be three stacked rows inside .apol-cat-toolbar: the results
   count, then the dark <summary> carrying the Reset bin, then the filter
   pills. Now .apol-filter-body IS the bar: apol.nav.js moves the Reset bin
   and the count into it (see relocateBarControls), the summary row is hidden,
   and the bar chrome moves off the summary onto the body. Filters, then the
   bin, then the count - one wrapping row.

   The body stays a real flex container. An earlier attempt made it (and the
   panel) display:contents so everything became a child of the toolbar; that
   dissolved the flex context the pills are laid out in, and because
   buildPill() nests each select pill INSIDE its .input-icons wrapper, the
   Sort / View pills collapsed to ~48px. Keep the flex context, move the two
   controls into it instead.

   .apol-filter-controls / .apol-filter-groups are display:contents (line
   ~3446), which is why child combinators do not reach the controls:
   .apol-filter-body > .input-icons matches nothing, because the DOM parent is
   .apol-filter-controls. Use descendant selectors. */
@media (min-width: 981px) {

  /* --- desktop common (TOP and LEFT-rail both) ---------------------------
     The collapsed <summary> bar is never shown on desktop: in top mode the
     body IS the bar, in left mode it is a rail with no dark bar. Its two live
     controls (Reset + count) are relocated by apol.nav.js. And on desktop the
     pills read as a value, not a heading + value. */
  .apol-cat-toolbar > details.apol-filter-panel > .apol-filter-summary {
    display: none !important;
  }
  /* per-group "current value" line has no separator on desktop and reads as
     "ColourAny" / "Price RangeAll prices, All", so drop it; the select pills
     are the other way round - their VALUE ("Recommended", "View - Small") is
     what a desktop visitor needs, so hide the heading buildPill() adds. */
  .apol-cat-toolbar .apol-filter-group-value { display: none; }
  .apol-cat-toolbar .apol-select-pill .apol-filter-group-label { display: none; }

  /* Reset + count wrapper is layout-transparent by default; the left-rail
     block below turns it into a row. In top mode it stays contents so its
     children are direct flex items of the single-row bar. */
  .apol-cat-toolbar .apol-filter-barfoot { display: contents; }

  /* --- TOP mode only: the single-row bar --------------------------------
     Scoped to the position token so none of this reaches the left rail, which
     owns its own column layout. Default sites are 'top' (declared at :root
     ~line 4935), so this matches out of the box. */
  @container style(--apol-listing-filter-position: top) {
    .apol-cat-toolbar { margin-bottom: 26px; }

    /* the panel's own chrome would double up on the bar's */
    .apol-cat-toolbar > details.apol-filter-panel {
      margin: 0;
      border: 0;
      background: none;
    }

    .apol-cat-toolbar details.apol-filter-panel > .apol-filter-body {
      display: flex !important;   /* the UA hides a closed <details>'s children */
      flex-wrap: wrap;            /* many configured filters wrap naturally */
      align-items: center;
      gap: 10px;
      padding: var(--apol-listing-filterbar-pad-y, 13px) var(--apol-listing-filterbar-pad-x, 18px);
      background: var(--apol-listing-filterbar-bg, #333);
      color: var(--apol-listing-filterbar-text, #fff);
      border: var(--apol-listing-filterbar-border-width, 1px) solid var(--apol-listing-filterbar-border-color, var(--apol-color-border));
      border-radius: var(--apol-listing-filterbar-radius, var(--apol-radius));
    }

    /* bin after the last filter, count hard right on the same row */
    .apol-cat-toolbar .apol-filter-body .apol-filter-reset { order: 98; margin-left: 0; }
    .apol-cat-toolbar .apol-filter-body .apol-filter-count-inbar { order: 99; margin-left: auto; }

    /* stuck: the shadow belongs on the bar, which is now the body. Scoped to
       top so the left rail never gains a shadow when it sticks. */
    .apol-cat-toolbar.is-stuck details.apol-filter-panel > .apol-filter-body {
      box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
    }
    .apol-cat-toolbar.is-stuck > details.apol-filter-panel > .apol-filter-summary {
      box-shadow: none;
    }
  }
}

/* --- App Designer mockup: the filter-bar specimen -------------------------
   The App Designer's listing mockup (apol.design.specimens.html) is fetched
   and injected into the preview, which can be ANY width and is often in 'left'
   filter mode. Earlier attempts reused the LIVE filter DOM (a <details> with
   .apol-filter-body) so the mockup would reflect settings - but that dragged in
   the whole live machinery: the <=980px mobile drawer (position:fixed, slid
   off-screen), the top-mode @container query (dead when the site is 'left'),
   the closed-<details> content hiding, and apol.nav.js (which never runs on a
   static mockup). The result rendered at one width and vanished at another.

   So the mockup is now SELF-CONTAINED: a plain flex bar (.apxfb) with dedicated
   classes, no <details>, no live filter classes to inherit behaviour from. It
   still reflects the bar-colour / text / padding / border / radius tokens and
   the "show / hide filter bar" toggle (kept on its .apol-filter-panel wrapper,
   whose display is driven by --apol-listing-filter-hide at line ~4777). It is
   NOT a pixel copy of the live bar, but a stable, decent representation that
   cannot be broken by preview width, filter mode, or future filter-bar changes.
   .apol-filter-specimen / .apxfb exist ONLY on the mockup. */
.apol-filter-specimen { margin-bottom: 24px; }   /* gap down to the cards (top mode) */
.apol-filter-specimen .apol-filter-panel { margin: 0; border: 0; background: none; border-radius: 0; }
.apol-filter-specimen .apxfb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--apol-listing-filterbar-pad-y, 13px) var(--apol-listing-filterbar-pad-x, 18px);
  background: var(--apol-listing-filterbar-bg, #333);
  color: var(--apol-listing-filterbar-text, #fff);
  border: var(--apol-listing-filterbar-border-width, 1px) solid var(--apol-listing-filterbar-border-color, var(--apol-color-border));
  border-radius: var(--apol-listing-filterbar-radius, var(--apol-radius));
  font-size: .9rem;
  line-height: 1;
}
.apxfb-search,
.apxfb-pill {
  background: #fff;
  color: #333;
  border: 1px solid var(--apol-color-border, #ddd);
  border-radius: var(--apol-button-corner, 8px);
  padding: 9px 12px;
  white-space: nowrap;
}
.apxfb-search { min-width: 160px; color: #8a8a8a; }
.apxfb-pill::after { content: " \25BE"; color: #999; }
.apxfb-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--apol-listing-filterbar-text, #fff);
  font-weight: 600;
  font-size: .9rem;
}
.apxfb-count { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* Left filter mode: mirror the live left-rail - the mockup bar becomes a narrow
   vertical column BESIDE the cards. Reads the position token the preview
   injects on <body>, so the mockup follows the actual "Filter position" setting
   (top = bar across the top; left = rail down the side). :has() targets only
   the listing section's frame. */
@container style(--apol-listing-filter-position: left) {
  .apx-secframe:has(> .apol-cat-toolbar.apol-filter-specimen) {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .apx-secframe:has(> .apol-cat-toolbar.apol-filter-specimen) > .apol-filter-specimen {
    flex: 0 0 200px;
    margin-bottom: 0;
  }
  .apx-secframe:has(> .apol-cat-toolbar.apol-filter-specimen) > .data_grid_card_holder {
    flex: 1 1 auto;
    min-width: 0;
  }
  .apol-filter-specimen .apxfb { flex-direction: column; align-items: stretch; gap: 10px; }
  .apol-filter-specimen .apxfb-search,
  .apol-filter-specimen .apxfb-pill { white-space: normal; }
  .apol-filter-specimen .apxfb-count { margin-left: 0; }
}

/* Slide-out DRAWER (mobile, non-sheet): the select pills show their heading
   only - "Sort by", "View", "Per page" - matching the filter-group rows there,
   which are heading-only in the drawer (syncGroups writes the value line only
   in sheet mode). Without this the pill showed heading AND value inline as
   "Sort bySort by price asc". The full-screen SHEET keeps both (heading over a
   value subtitle - handled in the sheet block); desktop keeps the value only
   (heading hidden, above). This is the drawer's distinct case, so it lives
   here rather than in the sheet block. */
@media (max-width: 980px) {
  body:not(.apol-filter-sheet) .apol-select-pill .apol-select-pill-label {
    display: none;
  }
}

/* Mobile sheet row-parity and action-bar fixes are made IN the sheet block
   above (the "Full-screen mobile filter sheet" section), not here - a second
   @media block competing with it is exactly the append-only layering this
   pass set out to remove. See the select-pill and action-bar notes there. */