/* =========================================================================
 * Funds & Rewards — site header bits (balance menu item + currency switcher).
 * Loaded site-wide so the header always shows the wallet. Minimalist, with
 * the lightest possible motion.
 * ====================================================================== */

/* --- WCML currency switcher in the header (minimalist) --- */
.header-widget .wcml-dropdown.header.wcml_currency_switcher,
.wcml-dropdown.header.wcml_currency_switcher{
	display:inline-block; position:relative; min-width:0; width:auto; vertical-align:middle;
}
.wcml-dropdown.header.wcml_currency_switcher ul{
	list-style:none; margin:0; padding:0; border:0; background:transparent;
}
.wcml-dropdown.header.wcml_currency_switcher li{ margin:0; padding:0; }
.wcml-dropdown.header.wcml_currency_switcher > ul > li > a{
	display:inline-flex; align-items:center; gap:6px; line-height:1;
	padding:6px 12px; border-radius:999px; border:1px solid #ececf1;
	background:#f7f8f9; color:#222 !important; font-weight:700; font-size:13px;
	text-decoration:none; box-shadow:none; transition:border-color .15s, background .15s;
}
.wcml-dropdown.header.wcml_currency_switcher > ul > li > a:hover{ border-color:#ff6e40; background:#fff; }
/* Submenu (the currency list). */
.wcml-dropdown.header.wcml_currency_switcher ul.wcml-sub-menu,
.wcml-dropdown.header.wcml_currency_switcher .wcml-sub-menu{
	position:absolute; top:calc(100% + 6px); left:0; z-index:9997; min-width:140px;
	background:#fff; border:0; border-radius:12px; padding:6px;
	box-shadow:0 12px 32px rgba(0,0,0,.18);
	opacity:0; visibility:hidden; transform:translateY(-4px);
	transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.wcml-dropdown.header.wcml_currency_switcher:hover .wcml-sub-menu,
.wcml-dropdown.header.wcml_currency_switcher.wcml-dropdown-click.wcml-open .wcml-sub-menu{
	opacity:1; visibility:visible; transform:translateY(0);
}
.wcml-dropdown.header.wcml_currency_switcher .wcml-sub-menu li a{
	display:block; padding:8px 12px; border-radius:8px; color:#222 !important;
	font-weight:600; font-size:13px; text-decoration:none; transition:background .12s;
}
.wcml-dropdown.header.wcml_currency_switcher .wcml-sub-menu li a:hover{ background:#f7f8f9; }

/* OUR own currency switcher in the header menu (.acc-ccy-dd--header). WPML/WCML's
   widget is disabled in PHP, so this is the only switcher. The menu is positioned
   `fixed` by header.js, so the header can never clip it. Colours are forced so a
   theme/WCML rule can't paint it white-on-white. */
/* =========================================================================
 * Currency switcher (header) — a clean, on-brand pill: white glass button with a
 * globe glyph + the ISO code + a chevron; hover/open lift to the site's coral/red
 * accent; the dropdown is a soft floating card with a red "active" row.
 * ==========================================================================*/
li.acc-menu-ccy{ display:inline-flex; align-items:center; }
.acc-ccy-dd--header{ position:relative; display:inline-flex; vertical-align:middle; }
.acc-ccy-dd--header .acc-ccy-dd-btn{
	display:inline-flex; align-items:center; gap:7px; -webkit-appearance:none; appearance:none;
	background:#fff !important; color:#16161c !important; border:1.5px solid #ececf1; border-radius:12px;
	padding:7px 12px; font-weight:700; font-size:13px; line-height:1; cursor:pointer;
	box-shadow:0 1px 2px rgba(20,22,30,.05); text-transform:none; letter-spacing:.02em; font-variant-numeric:tabular-nums;
	transition:border-color .16s ease, box-shadow .16s ease, color .16s ease; }
.acc-ccy-dd--header .acc-ccy-dd-btn::before{
	content:""; width:15px; height:15px; flex:0 0 auto; background:currentColor; opacity:.7;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9z'/%3E%3C/svg%3E") center/contain no-repeat; }
.acc-ccy-dd--header .acc-ccy-dd-btn:hover,
.acc-ccy-dd--header.is-open .acc-ccy-dd-btn{ border-color:#ff6e40; color:#f80031 !important; box-shadow:0 6px 16px rgba(248,0,49,.14); }
.acc-ccy-dd--header .acc-ccy-dd-btn:focus-visible{ outline:2px solid #f80031; outline-offset:2px; }
.acc-ccy-dd--header .acc-caret{ width:0; height:0; margin-left:1px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.6; transition:transform .16s ease; }
.acc-ccy-dd--header.is-open .acc-caret{ transform:rotate(180deg); }
.acc-ccy-menu--header{ z-index:100200; min-width:140px; margin:0; padding:6px; list-style:none; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.4) blur(6px); backdrop-filter:saturate(1.4) blur(6px); border:1px solid rgba(240,241,244,.9); border-radius:14px; box-shadow:0 18px 44px rgba(16,18,26,.18); display:flex; flex-direction:column; gap:2px; transform-origin:top center; }
.acc-ccy-menu--header[hidden]{ display:none; }
/* Open animation: fade + settle down from just under the trigger (never from a
   "strange place" — transform-origin pins it to the top). :not([hidden]) —
   the menu is PORTALED to <body> while open, so an .is-open-ancestor selector
   can no longer see it; display:none→flex restarts the animation each open. */
.acc-ccy-menu--header:not([hidden]){ animation:acc-ccy-menu-in .16s cubic-bezier(.2,.7,.2,1); }
/* Symmetric fade-out before display:none lands (header.js holds ~150ms). */
.acc-ccy-menu--header.is-closing{ animation:acc-ccy-menu-out .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes acc-ccy-menu-out{ to{ opacity:0; transform:translateY(-6px) scale(.98); } }
@keyframes acc-ccy-menu-in{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce){ .acc-ccy-menu--header:not([hidden]), .acc-ccy-menu--header.is-closing{ animation:none; } }
.acc-ccy-menu--header .acc-ccy-mi{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:10px; font-weight:600; font-size:13px; color:#16161c !important; text-decoration:none !important; white-space:nowrap; text-transform:none; font-variant-numeric:tabular-nums; transition:background .12s ease, color .12s ease; }
.acc-ccy-menu--header .acc-ccy-mi:hover{ background:#f6f7f9; }
.acc-ccy-menu--header .acc-ccy-mi:focus-visible{ outline:2px solid #f80031; outline-offset:-2px; }
.acc-ccy-menu--header .acc-ccy-mi.is-active{ background:#fff5f2; color:#f80031 !important; font-weight:800; }
/* Unified item anatomy — identical to the hero switcher (style.css): symbol disk,
   bold code, brand check on the active row. */
.acc-ccy-menu--header .acc-ccy-mi-sym{ flex:0 0 auto; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#f7f8f9; border:1px solid #ececf1; font-size:12px; font-weight:700; color:#777; line-height:1; }
.acc-ccy-menu--header .acc-ccy-mi.is-active .acc-ccy-mi-sym{ background:#fff; border-color:#ffd9c9; color:#f80031; }
.acc-ccy-menu--header .acc-ccy-mi-code{ flex:1 1 auto; letter-spacing:.02em; }
.acc-ccy-menu--header .acc-ccy-mi-check{ flex:0 0 auto; width:14px; height:14px; color:#f80031; }
li.acc-menu-ccy.acc-ccy-mobile{ order:-1; }

/* Belt-and-suspenders: hide WPML/WCML's own currency switcher in EVERY render form
   (widget, dropdown, select/list, shortcode, block, synced nav-menu) should any
   still render — we disable them in PHP and provide our own single switcher. The
   bare `.wcml_currency_switcher` class covers the non-dropdown formats too. */
.widget_currency_sel_widget, .wcml_currency_switcher,
.wp-block-wpml-currency-switcher, .wcml-cs-block, .wcml_currency_switcher_block{ display:none !important; }

/* =========================================================================
 * GeneratePress compatibility (generatepress / generatepress-child).
 *
 * GP lays the navigation out as a flex row: .inside-navigation contains the
 * menu (.main-nav), the menu-bar items (.menu-bar-items → .menu-bar-item, e.g.
 * the rewards "stars-item") and the navigation widget area (.header-widget).
 * On many configs .header-widget WRAPS onto its own line beneath the bar. Keep
 * it on the SAME line, sitting just LEFT of the menu-bar items, and compact.
 * Scoped to desktop so the mobile toggle layout is untouched. Filter
 * `acc_gp_header_layout` (PHP) lets a store opt out by not enqueueing — these
 * rules only ever apply inside GP's own .main-navigation, so they're inert on
 * other themes.
 * ====================================================================== */
@media (min-width:769px){
	.main-navigation .inside-navigation{ flex-wrap:nowrap; align-items:center; }
	/* Menu fills the row; the widget + bar items are pushed to the right. */
	.main-navigation .inside-navigation > .main-nav,
	.main-navigation .inside-navigation > #primary-menu{ order:0; flex:1 1 auto; min-width:0; }
	.main-navigation .inside-navigation > .header-widget{
		order:1; flex:0 0 auto; width:auto; min-width:0; margin:0 10px 0 auto;
		display:inline-flex; align-items:center; line-height:1;
	}
	/* Trim default widget chrome so it doesn't eat horizontal space. */
	.main-navigation .inside-navigation > .header-widget .widget,
	.main-navigation .inside-navigation > .header-widget .widget-title{ margin:0; padding:0; }
	.main-navigation .inside-navigation > .header-widget .widget-title{ display:none; }
	.main-navigation .inside-navigation > .menu-bar-items{ order:2; flex:0 0 auto; margin-left:0; }
}
/* The stars (rewards) menu-bar item: don't let it grow; keep it tight. */
.menu-bar-item.stars-item{ flex:0 0 auto; }

/* =========================================================================
 * Onboarding flash-bonus popup + floating mini widget (site-wide).
 * ====================================================================== */
.acc-flash-pop[hidden], .acc-flash-mini[hidden]{ display:none !important; }
.acc-flash-pop{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; }
.acc-flash-pop-backdrop{ position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(18,14,14,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:acc-fade-in .25s ease; }
@keyframes acc-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.acc-flash-pop-card{ position:relative; width:100%; max-width:392px; background:linear-gradient(180deg,#fff,#fff7f4); border-radius:26px; padding:34px 28px 28px; text-align:center; overflow:hidden;
	box-shadow:0 36px 90px rgba(20,8,8,.42), 0 0 0 1px rgba(255,110,64,.10); animation:acc-flash-in .46s cubic-bezier(.16,1.2,.3,1); }
/* Warm glow sweep behind the header so the offer feels premium and alive. */
.acc-flash-pop-card::before{ content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:300px; height:190px;
	background:radial-gradient(circle, rgba(255,110,64,.30), rgba(255,110,64,0) 70%); pointer-events:none; }
/* A thin gradient hairline at the very top edge — a premium, "designed" cue. */
.acc-flash-pop-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#f80031,#ff6e40); }
/* No scale — scaling the card from the middle reads as a stretch effect; a clean
   slide-up + fade is correct modal entry choreography. */
@keyframes acc-flash-in{ 0%{ opacity:0; transform:translateY(20px); } 60%{ opacity:1; } 100%{ opacity:1; transform:none; } }
.acc-flash-pop-close{ position:absolute; top:12px; right:12px; width:40px; height:40px; padding:0; box-sizing:border-box; border:0; background:#f3f4f6; color:#555; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; transition:background .15s, transform .15s, color .15s; z-index:2; }
.acc-flash-pop-close:hover{ background:#ffe6df; color:#f80031; transform:rotate(90deg); }
.acc-flash-pop-close:focus-visible{ outline:2px solid #f80031; outline-offset:2px; }
/* Base size for the plugin's inline SVG icons (acc_icon): 1em so an icon scales
   with its wrapper's font-size exactly like the emoji glyphs it replaced (e.g.
   the 46px popup zap, 16px mini-pill zap, inline flame/check). Parent-scoped
   px rules in style.css still override where a fixed size is wanted. */
svg.acc-svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; }
.acc-flash-pop-zap{ font-size:46px; line-height:1; color:#ff6e40; position:relative; display:inline-block; animation:acc-zap 1.8s ease-in-out infinite; }
@keyframes acc-zap{ 0%,100%{ transform:translateY(0) rotate(0); } 25%{ transform:translateY(-3px) rotate(-6deg); } 75%{ transform:translateY(-1px) rotate(5deg); } }
.acc-flash-pop-title{ margin:10px 0 5px; font-size:23px; font-weight:850; color:#16161c; letter-spacing:-.02em; line-height:1.18; position:relative; }
.acc-flash-pop-text{ margin:0 0 16px; color:#5a5a63; font-size:14.5px; line-height:1.55; position:relative; }
/* The headline rate is the hero of the popup — big, gradient, shimmering. */
.acc-flash-pop-text b{ color:#16161c; font-weight:800; }
.acc-flash-pop-text .acc-flash-pop-rate{ font-size:1.18em; font-weight:900; background:linear-gradient(135deg,#f80031,#ff6e40); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#f80031; }
.acc-flash-pop-count{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; font-size:12px; color:#9a3b3b; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.acc-flash-pop-timer{ font-size:16px; padding:5px 13px; border-radius:10px; animation:acc-pulse-soft 1.6s ease-in-out infinite; }
@keyframes acc-pulse-soft{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,16,42,.25); } 50%{ box-shadow:0 0 0 5px rgba(224,16,42,0); } }
.acc-flash-pop-cta{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; box-sizing:border-box; padding:15px; border-radius:14px; background:linear-gradient(135deg,#f80031,#ff6e40); background-size:200% 100%; color:#fff !important; font-weight:800; font-size:15.5px; text-decoration:none; box-shadow:0 10px 24px rgba(248,0,49,.32); transition:transform .14s, box-shadow .14s; animation:acc-cta-shine 3s linear infinite, acc-cta-breathe 2.4s ease-in-out infinite; }
@keyframes acc-cta-shine{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
@keyframes acc-cta-breathe{ 0%,100%{ box-shadow:0 10px 24px rgba(248,0,49,.32); } 50%{ box-shadow:0 12px 30px rgba(248,0,49,.46); } }
/* Pause the breathing shadow animation on hover so the lift-shadow doesn't get
   overwritten mid-animation — the transition-target stays sticky. */
.acc-flash-pop-cta:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 16px 32px rgba(248,0,49,.4); color:#fff !important; animation-play-state:paused; }
.acc-flash-pop-cta:focus-visible{ outline:2px solid #16161c; outline-offset:2px; }

/* Floating mini widget (bottom-right on desktop, full-width bottom on mobile). */
.acc-flash-mini{ position:fixed; right:20px; bottom:20px; z-index:99999; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; padding:12px 15px; border-radius:999px; background:linear-gradient(135deg,#f80031,#ff6e40); color:#fff; font-weight:700; font-size:13px; box-shadow:0 12px 28px rgba(248,0,49,.36); animation:acc-mini-in .4s cubic-bezier(.16,1.2,.3,1), acc-cta-breathe 2.4s ease-in-out infinite; }
@keyframes acc-mini-in{ from{ opacity:0; transform:translateY(20px) scale(.9); } to{ opacity:1; transform:none; } }
.acc-flash-mini:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.acc-flash-mini:focus-visible{ outline:2px solid #16161c; outline-offset:2px; }
.acc-flash-mini-zap{ font-size:16px; color:#ffd28a; animation:acc-zap 1.8s ease-in-out infinite; }
.acc-flash-mini-text b{ font-weight:800; }
.acc-flash-mini .acc-flash-mini-timer{ background:rgba(255,255,255,.24); border:0; border-radius:7px; color:#fff; padding:1px 7px; font-variant-numeric:tabular-nums; }
.acc-flash-mini-close{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; box-sizing:border-box; margin-left:2px; border:0; border-radius:50%; background:rgba(255,255,255,.24); color:#fff; font-size:15px; line-height:1; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .15s; }
/* Invisible hit-area extender: the 20px glyph stays, but the tap target reaches
   ~44px — on phones this X is the only way to dismiss the pinned promo bar. */
.acc-flash-mini-close::before{ content:""; position:absolute; inset:-12px; border-radius:50%; }
.acc-flash-mini-close:hover{ background:rgba(255,255,255,.4); }
@media (max-width:600px){
	.acc-flash-mini{ right:10px; left:10px; bottom:10px; justify-content:center; border-radius:14px; padding:14px; }
	.acc-flash-pop-card{ padding:26px 20px 22px; }
}
@media (prefers-reduced-motion:reduce){
	.acc-flash-pop-zap, .acc-flash-mini-zap, .acc-flash-pop-timer, .acc-flash-pop-cta, .acc-flash-mini,
	.acc-flash-pop-backdrop, .acc-flash-pop-card{ animation:none !important; }
}

/* Flash popup: struck base rate + membership boost note. */
.acc-flash-old{ opacity:.6; font-weight:600; margin-right:2px; }
.acc-flash-pop-boost{ display:inline-block; margin-top:2px; font-size:12px; color:#1f7a46; font-weight:700; }

/* WPML/WCML currency switcher — kill ALL-CAPS, cover dropdown + select variants. */
.widget_currency_sel_widget *, .wcml_currency_switcher *, .wcml-dropdown.wcml_currency_switcher *{ text-transform:none !important; letter-spacing:normal !important; }
.widget_currency_sel_widget select, .wcml_currency_switcher select{
	-webkit-appearance:none; appearance:none; cursor:pointer; line-height:1;
	padding:7px 30px 7px 12px; border-radius:999px; border:1px solid #ececf1; background:#f7f8f9;
	color:#222; font-weight:700; font-size:13px; box-shadow:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23777' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 11px center;
}
.widget_currency_sel_widget select:hover, .wcml_currency_switcher select:hover{ border-color:#ff6e40; background-color:#fff; }

/* --- Currency switcher: stop the header clipping the dropdown, and match the
   exact acc-ccy-dd look. The dropdown panel is positioned absolutely and must
   escape the header, so the widget's own wrappers must not clip it. The header
   bar still can't be forced overflow:visible from here without knowing the theme,
   so the panel is given a very high z-index and the widget chain is told not to
   clip. --- */
.widget_currency_sel_widget, .widget_currency_sel_widget > div, .widget_currency_sel_widget .wcml_currency_switcher,
.header-widget, .header-widget > div, .wcml_currency_switcher, .wcml-dropdown.wcml_currency_switcher{ overflow:visible !important; }
.widget_currency_sel_widget .wcml-cs-submenu,
.wcml_currency_switcher .wcml-cs-submenu,
.wcml-dropdown.header.wcml_currency_switcher .wcml-sub-menu,
.wcml-dropdown.header.wcml_currency_switcher ul.wcml-sub-menu{ z-index:100001 !important; }

/* Exact acc-ccy-dd parity: pill button + caret, and the white card menu. */
.widget_currency_sel_widget .wcml-cs-active-currency,
.wcml_currency_switcher .wcml-cs-active-currency,
.wcml-dropdown.header.wcml_currency_switcher > ul > li > a{
	display:inline-flex; align-items:center; gap:5px; line-height:1.2; cursor:pointer;
	padding:6px 12px; border-radius:999px; border:1px solid #ececf1; background:#f7f8f9;
	color:#222 !important; font-weight:800; font-size:13px; text-decoration:none; box-shadow:none;
}

/* Mobile: the switcher is moved (by header.js) to be the first control in the
   mobile menu wrapper — make it sit flush and full-pill there. */
.mobile-menu-control-wrapper{ overflow:visible !important; }
.widget_currency_sel_widget.acc-ccy-mobile{ order:-1; margin:0 8px 0 0; display:inline-flex; align-items:center; }
@media (max-width:768px){
	.widget_currency_sel_widget.acc-ccy-mobile .wcml-cs-submenu,
	.widget_currency_sel_widget.acc-ccy-mobile .wcml-sub-menu{ left:0; right:auto; }
}

/* =========================================================================
 * Cart badge — count bubble on the cart/checkout menu link + a red dot on the
 * mobile menu toggle whenever the cart has items (live via cart fragments).
 * ====================================================================== */
.gpco-cart-menu-link{ position:relative; }
.gpco-cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
	border-radius:999px; background:#f80031; color:#fff; font-size:11px; font-weight:800; line-height:1; vertical-align:middle; box-shadow:0 2px 6px rgba(248,0,49,.3); }
.gpco-cart-count.is-empty, .gpco-cart-count[data-count="0"]{ display:none; }
/* Bump animation when the cart count/total changes (class toggled by the
   floating cart bar's JS, which listens to the WooCommerce cart events). */
.gpco-cart-count.gpco-cart-bump{ animation:gpco-cart-bump .42s cubic-bezier(.16,1,.3,1); }
@keyframes gpco-cart-bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .gpco-cart-count.gpco-cart-bump{ animation:none; } }
/* The cart's own burger dot is now HIDDEN: the unified .acc-menu-burger-dot
   (header.js) is the single burger dot for cart + unseen-activity. .gpco-burger-dot
   stays in the DOM only as the cart-state signal header.js reads (its .is-on
   class), so it must never paint a second dot on the burger. */
.gpco-burger-dot{ position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:#f80031; box-shadow:0 0 0 2px #fff; display:none !important; pointer-events:none; z-index:5; }
@keyframes gpco-dot-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* =========================================================================
 * Unseen-activity dots — a counterless red dot next to a My-Account menu item
 * (Balance / Rewards / Orders) with a change the customer has not seen yet,
 * plus one dot over the mobile menu (burger) toggle when ANY item has one.
 * Mirrors the cart dot's look; the server adds `.acc-has-dot` to the menu <li>.
 * ====================================================================== */
.woocommerce-MyAccount-navigation li.acc-has-dot > a{ position:relative; }
.woocommerce-MyAccount-navigation li.acc-has-dot > a::after{
	content:""; display:inline-block; width:8px; height:8px; margin-left:0;
	border-radius:50%; background:#f80031; vertical-align:middle; box-shadow:none;
	top:1px; position:absolute; border:1px solid #fff; right:14px; }
@media (max-width:768px){
	.woocommerce-MyAccount-navigation li.acc-has-dot > a::after{ right:10px; } }
/* THE single burger dot — header.js toggles .is-on when the cart has items OR any
   tracked My-Account section has an unseen change. One dot, one meaning ("needs
   attention"); the legacy cart dot (.gpco-burger-dot) is hidden above. */
.acc-menu-burger-dot{ position:absolute; top:0.5px; right:20px; width:9px; height:9px;
	border-radius:50%; background:#f80031; box-shadow:none; display:none;
	pointer-events:none; z-index:5; }
.acc-menu-burger-dot.is-on{ display:block; animation:gpco-dot-pop .3s ease; }

/* =========================================================================
 * WooCommerce notices — modern, dismissible, icon-led cards (site-wide).
 * Enhanced by the notice module in header.js (adds .acc-notice + a type class
 * + a leading .acc-notice-ico + a .acc-notice-close button). These rules also
 * neutralise WooCommerce's / the theme's default notice chrome (the ::before
 * icon, background bar, left border) so our card is the single source of truth.
 * Handles one or many notices, mixed types, and error <ul><li> lists.
 * ====================================================================== */
.woocommerce-notices-wrapper:empty{ display:none; margin:0; }
/* display:BLOCK (not flex): the notice element itself can be a <ul> (error
   list), where injecting a flex row would lay the <li>s out side-by-side.
   Block flow keeps the <li>s / text stacked; the icon + close button are
   ABSOLUTELY positioned (out of flow) so they don't disrupt list rendering
   even though they're technically non-<li> children of the <ul>. */
.acc-notice{ position:relative; display:block; box-sizing:border-box;
	margin:0 0 12px; padding:15px 52px 15px 54px; border:1px solid #eaecf1; border-left:3px solid #cdd2da;
	border-radius:14px; background:#fff;
	/* Layered shadow — a tight contact shadow + a soft ambient one — reads as a
	   crisp, lifted card rather than a flat box. */
	box-shadow:0 1px 2px rgba(20,22,30,.04), 0 10px 30px rgba(20,22,30,.06);
	font-size:14.5px; line-height:1.55; color:#22252c; font-weight:500; list-style:none;
	/* No `both` fill-mode: with it, the intro animation would keep filling the final
	   frame and lock opacity/transform, so the .acc-notice--closing exit transition
	   could never take effect. There's no animation-delay, so dropping fill doesn't
	   change the intro's start values. */
	animation:acc-notice-in .28s cubic-bezier(.16,1,.3,1); }
@keyframes acc-notice-in{ from{ opacity:0; transform:translateY(-8px) scale(.992); } to{ opacity:1; transform:none; } }
.acc-notice.acc-notice--closing{ opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease; }
/* Kill WooCommerce's own icon + bar so it doesn't double up with ours. */
.acc-notice::before{ display:none !important; content:none !important; }
/* NOTE: action buttons INSIDE a notice (Add to cart / View cart / …) are left to
   the theme's native styling — we only own the card frame + the close button. */
/* Leading icon badge — absolute, vertically centred on the LEFT. Tinted square
   with an accent-coloured SVG glyph, a soft drop shadow + inner ring so it reads
   as a crisp chip rather than a flat swatch. */
.acc-notice .acc-notice-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:9px;
	display:inline-flex; align-items:center; justify-content:center; }
.acc-notice .acc-notice-ico svg{ width:15px; height:15px; display:block; }
/* Type accents — left rule + tinted icon + a whisper of colour washed in from the
   accent edge (fading to white), so each type has identity while staying minimal. */
.acc-notice--error{ border-left-color:#e0102a; background:linear-gradient(90deg,#fff6f7,#fff 26%); }
.acc-notice--error .acc-notice-ico{ background:#fdeaec; color:#e0102a; box-shadow:0 2px 6px rgba(224,16,42,.18), inset 0 0 0 1px rgba(224,16,42,.10); }
.acc-notice--success{ border-left-color:#17935a; background:linear-gradient(90deg,#f4fbf7,#fff 26%); }
.acc-notice--success .acc-notice-ico{ background:#e7f6ee; color:#17935a; box-shadow:0 2px 6px rgba(23,147,90,.18), inset 0 0 0 1px rgba(23,147,90,.10); }
.acc-notice--info{ border-left-color:#2569d6; background:linear-gradient(90deg,#f4f8ff,#fff 26%); }
.acc-notice--info .acc-notice-ico{ background:#e9f1fd; color:#2569d6; box-shadow:0 2px 6px rgba(37,105,214,.18), inset 0 0 0 1px rgba(37,105,214,.10); }
/* Error lists: the <ul class="woocommerce-error"> is wrapped in the .acc-notice
   card (see enhance() in header.js) — reset the list and give one tidy row per
   <li> with hairline separators. Descendant selectors so it works whether the
   list is the notice itself (legacy) or nested inside the wrapper. */
/* The wrapped inner list still carries .woocommerce-error — kill WooCommerce's /
   the theme's OWN chrome on it (background bar, borders, icon glyph), or it
   renders inside our card as a second nested notice. */
.acc-notice > ul, .acc-notice > ol{ margin:0 !important; padding:0 !important; list-style:none;
	background:none !important; border:0 !important; box-shadow:none !important; color:inherit;
	/* CRITICAL: the wrapped inner <ul> STILL carries .woocommerce-error, so the
	   global toast rules (position:fixed; bottom:11rem; display:flex;
	   justify-content:space-between; overflow:hidden; backdrop-filter; z-index)
	   would ALSO apply to it — pulling the list (the actual message text) out of
	   the card as a second fixed box and clipping/hiding its text. This is why
	   list errors (login on my-account, payment-gateway errors on checkout) lost
	   their text while single-<div> notices were fine. Force the inner list back
	   into normal in-card flow. */
	position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
	display:block !important; float:none !important; overflow:visible !important;
	max-width:none !important; width:auto !important; z-index:auto !important;
	backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
	border-radius:0 !important; min-width:0; }
.acc-notice > ul::before, .acc-notice > ol::before{ display:none !important; content:none !important; }
.acc-notice li{ list-style:none; margin:0; padding:2px 0; }
.acc-notice li + li{ border-top:1px solid #f1e3e5; margin-top:5px; padding-top:7px; }
/* Inline TEXT links (not buttons) — accent-tinted per type, crisp underline. */
.acc-notice a:not(.acc-notice-close):not(.button){ font-weight:700; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.acc-notice--error a:not(.acc-notice-close):not(.button){ color:#c60e25; }
.acc-notice--success a:not(.acc-notice-close):not(.button){ color:#147a49; }
.acc-notice--info a:not(.acc-notice-close):not(.button){ color:#1f5bc0; }
/* Dismiss button (OURS) — vertically centred on the RIGHT, mirroring the icon so
   the card is symmetric. 30px hit area, muted glyph that firms on hover. */
.acc-notice .acc-notice-close{ position:absolute; top:50%; transform:translateY(-50%); right:12px; width:30px; height:30px; padding:0;
	display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent;
	color:#9aa0ab; font-size:20px; line-height:1; cursor:pointer; border-radius:9px;
	-webkit-appearance:none; appearance:none; transition:background .15s, color .15s, transform .15s; }
.acc-notice .acc-notice-close:hover{ background:rgba(20,22,30,.06); color:#16161c; transform:translateY(-50%) rotate(90deg); }
.acc-notice .acc-notice-close:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }
@media (max-width:480px){
	.acc-notice{ padding:13px 46px 13px 48px; font-size:14px; border-radius:11px; }
	.acc-notice .acc-notice-ico{ left:13px; }
	.acc-notice .acc-notice-close{ right:9px; }
}
@media (prefers-reduced-motion:reduce){
	.acc-notice{ animation:none; }
	.acc-notice.acc-notice--closing{ transition:none; }
}

/* =========================================================================
 * Top status banner (status_banner.php) — a slim green "all systems
 * operational" strip at the top of the content: a trust/conversion cue that
 * payments work and orders deliver fast. Calm, single line, wraps on mobile.
 * ====================================================================== */
.acc-statusbar{ background:linear-gradient(90deg,#0f7a46,#12905a); color:#fff; font-size:13px; line-height:1.3; }
.acc-statusbar-in{ max-width:1300px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; }
.acc-statusbar-dot{ width:9px; height:9px; border-radius:50%; background:#7dffb0; box-shadow:0 0 0 0 rgba(125,255,176,.7); flex:0 0 auto; animation:acc-sb-pulse 2s infinite; }
@keyframes acc-sb-pulse{ 0%{ box-shadow:0 0 0 0 rgba(125,255,176,.6); } 70%{ box-shadow:0 0 0 7px rgba(125,255,176,0); } 100%{ box-shadow:0 0 0 0 rgba(125,255,176,0); } }
.acc-statusbar-msg{ font-weight:800; letter-spacing:.01em; }
.acc-statusbar-pills{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.acc-statusbar-pill{ display:inline-flex; align-items:center; gap:5px; font-weight:600; opacity:.96; background:rgba(255,255,255,.14); padding:3px 10px; border-radius:999px; }
.acc-statusbar-ic{ flex:0 0 auto; }
@media (max-width:600px){ .acc-statusbar{ font-size:12px; } .acc-statusbar-in{ gap:6px 8px; padding:7px 12px; } }
@media (prefers-reduced-motion:reduce){ .acc-statusbar-dot{ animation:none; } }

/* =========================================================================
 * Mobile horizontal-scroll rows (right-edge fade + chevron).
 * header.js tags overflowing rows (.acc-segmented / .acc-chips / the My-Account
 * nav <ul>) with .acc-hscroll and injects the .acc-hscroll-arrow button. Lives
 * here (site-wide) so that injected arrow is styled on EVERY page the enhancer
 * runs, not only account/checkout/cart (which is all style.css covered before).
 * ====================================================================== */
@media (max-width:768px){
	.acc-hscroll{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; }
	.acc-hscroll::-webkit-scrollbar{ display:none; }
	.acc-hscroll > *{ flex:0 0 auto; }
}
.acc-hscroll-host{ position:relative; }
/* A THIN GREY chevron on a transparent→white fade. !important on background/border/
   box-shadow so the theme's own <button> styling can never turn it black (esp. on
   hover). The glyph nudges a touch larger + darker on hover/focus — nothing else
   about the button changes. */
.acc-hscroll-arrow{ position:absolute; top:0; right:0; height:100%; width:52px; display:none; align-items:center; justify-content:flex-end;
	padding:0 8px 0 22px; margin:0; border:0 !important; cursor:pointer; z-index:3; -webkit-appearance:none; appearance:none;
	background:linear-gradient(to right, rgba(255,255,255,0), var(--card,#fff) 62%) !important; box-shadow:none !important;
	color:#9aa0ab; font-size:22px; font-weight:400; line-height:1; }
.acc-hscroll-arrow > span{ display:inline-block; transition:transform .15s ease, color .15s ease; }
.acc-hscroll-host.acc-hs-more .acc-hscroll-arrow{ display:flex; }
.acc-hscroll-arrow:hover, .acc-hscroll-arrow:focus, .acc-hscroll-arrow:active{
	background:linear-gradient(to right, rgba(255,255,255,0), var(--card,#fff) 62%) !important; box-shadow:none !important; color:#9aa0ab; }
.acc-hscroll-arrow:hover > span, .acc-hscroll-arrow:focus-visible > span{ transform:scale(1.22); color:#6b7178; }
.acc-hscroll-arrow:focus-visible{ outline:2px solid var(--red,#f80031); outline-offset:-2px; }
@media (min-width:769px){ .acc-hscroll-arrow{ display:none !important; } }

.acc-menu-burger-dot { top: 1px; }

/* Seamless currency switch: picking a currency reloads the page by design —
   header.js tags <html> so the old page fades instead of hard-cutting. Skipped
   under prefers-reduced-motion (the class is never added there). */
html.acc-ccy-switching body{ opacity:.3; transition:opacity .28s cubic-bezier(.25,.55,.25,1); pointer-events:none; }