/* =====================================================================
   onlinelad.css
   Shared across every static onlinelad page: colour tokens, type, buttons,
   the announcement bar, header, language switcher, basket drawer, footer,
   and the logged in / logged out rules.

   Page-specific styles stay in a <style> block on the page itself.
   Load this BEFORE that block so page rules win.
   ===================================================================== */

:root{
  --blue:#004AAD; --sky:#3BBFF2; --aqua:#5CE1E6;
  --ink:#0B1B2B; --slate:#5A6B7C; --line:#DCE5EE; --mist:#EEF3F8; --white:#fff;
  --font:"Proxima Nova","Montserrat","Inter",Helvetica,Arial,sans-serif;
  --wrap:1240px; --gut:clamp(18px,3.5vw,32px); --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:var(--blue);padding:10px 16px}
.sect{padding:clamp(34px,4.5vw,52px) 0}
.sect-title{font-size:clamp(20px,2.1vw,25px);margin-bottom:18px;color:var(--blue)}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.sect-head .sect-title{margin-bottom:0}
.more{font-size:14px;font-weight:700;color:var(--blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);
  font-weight:800;font-size:14.5px;padding:12px 20px;border:1px solid transparent;
  background:var(--blue);color:#fff;transition:opacity .18s ease,background .18s ease}
.btn:hover{background:#003c8c;text-decoration:none}
.btn-sky{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.btn-sky:hover{background:#2fb2e6}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#132c42}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-quiet{background:#fff;color:var(--blue);border-color:var(--line);font-size:13px;padding:9px 14px}
.btn-quiet:hover{background:var(--mist)}
.btn-full{width:100%}
.ico{width:14px;height:14px;flex:none}

/* announcement */
.promo{background:var(--sky);color:var(--ink);font-size:13.5px;font-weight:600}
.promo .wrap{display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:9px var(--gut);text-align:center}
.promo .btn{padding:7px 14px;font-size:12.5px;background:#fff;color:var(--blue)}

/* header */
.head{background:var(--blue);position:sticky;top:0;z-index:40}
.head .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px;
  position:relative}
/* Text wordmark. Proxima Nova Black when your Adobe Fonts kit is loaded,
   Montserrat 900 until then. Always lowercase. */
.wordmark{font-weight:900;font-size:clamp(22px,2vw,26px);letter-spacing:-.035em;
  color:#fff;line-height:1;display:block}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:21px;margin:0 auto}
.nav a{color:#fff;font-weight:600;font-size:15px}
.nav a:hover{color:var(--sky);text-decoration:none}
.head-end{display:flex;align-items:center;gap:10px;color:#fff}
.head-end a{color:#fff;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.head-end a:hover{text-decoration:none}
.head-end svg{width:19px;height:19px}
.head-end .cart-link{position:relative;margin-left:6px;font-size:14.5px}
.head-end .cart-link:hover{color:var(--sky)}
.count{position:absolute;top:-7px;left:10px;min-width:17px;height:17px;border-radius:9px;
  background:var(--sky);color:var(--ink);font-size:10.5px;font-weight:800;line-height:17px;
  text-align:center;padding:0 4px}
.count[hidden]{display:none}

/* basket drawer */
.scrim{position:fixed;inset:0;background:rgba(11,27,43,.45);z-index:60;opacity:0;
  visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:#fff;z-index:61;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s ease;
  border-left:1px solid var(--line)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:16px}
.drawer-close{background:none;border:0;padding:6px;cursor:pointer;color:var(--slate);font:inherit}
.drawer-close svg{width:18px;height:18px;display:block}
.drawer-body{flex:1;overflow-y:auto;padding:4px 18px}
.drawer-foot{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:10px}
.drawer-sum{display:flex;justify-content:space-between;font-weight:800;font-size:15px}
.cart-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0}
.cart-item figure{width:52px;height:66px;margin:0;flex:none;background:var(--mist);
  border-radius:4px;overflow:hidden}
.cart-item img{width:100%;height:100%;object-fit:cover}
.cart-item h3{font-size:13.5px;line-height:1.35;margin-bottom:4px}
.cart-item h3 a{color:var(--ink)}
.cart-item .qty{font-size:12.5px;color:var(--slate)}
.cart-item .line{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap}
.cart-empty{padding:30px 0;text-align:center;color:var(--slate);font-size:14.5px;line-height:1.6}
/* language switcher */
.lang{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;padding:11px 8px}
.lang-btn:hover{color:var(--sky)}
.lang-btn svg{width:12px;height:12px;transition:transform .18s ease}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:50;width:230px;
  max-width:calc(100vw - 28px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px;
  max-height:min(70vh,460px);overflow-y:auto}
.lang-menu[hidden]{display:none}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;font:inherit;font-size:14px;color:var(--ink);
  text-align:left;padding:10px 12px;border-radius:4px;cursor:pointer}
.lang-menu button:hover{background:var(--mist)}
.lang-menu button.on{font-weight:800;background:var(--mist)}
.lang-menu button svg{width:14px;height:14px;color:var(--blue);flex:none;visibility:hidden}
.lang-menu button.on svg{visibility:visible}

/* Google Translate chrome, hidden the same way the WordPress plugin hides it */
.goog-te-banner-frame,.skiptranslate{display:none!important}
body{top:0!important}
#google_translate_element{display:none}
.goog-text-highlight{background:none!important;box-shadow:none!important}

.head-end .btn-join{background:#fff;color:var(--blue);border-color:#fff;font-size:15.5px;padding:13px 30px}
.head-end .btn-join:hover{background:var(--mist);color:var(--blue)}
.btn-login{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);
  font-size:14px;padding:11px 20px}
.btn-login:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-login svg{width:15px;height:15px}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r);padding:8px 12px;font:inherit;font-weight:700;font-size:13.5px;color:#fff;cursor:pointer}


/* ---------- logged in / logged out ----------
   Pages ship in the logged-out state, which is what search engines index and
   what an edge cache stores. onlinelad.js flips the html element to .is-member
   once WordPress/WooCommerce confirms a session, and the optional ol_member
   cookie lets that happen before first paint. Nothing here gates content. */
[data-auth="in"]{display:none!important}
.is-member [data-auth="in"]{display:inline-flex!important}
.is-member [data-auth="in"].auth-block{display:block!important}
.is-member [data-auth="out"]{display:none!important}
.nav a.here{color:var(--sky)}

/* Member account control. The left half is a normal /my-account/ link; the
   chevron opens a compact WooCommerce-style menu without sacrificing the link. */
.account-menu{position:relative;align-items:stretch;flex:none}
.account-main,.account-toggle{background:#fff;color:var(--blue);border:1px solid #fff;
  font:inherit;font-size:14px;font-weight:800;line-height:1;min-height:42px}
.account-main{display:flex;align-items:center;padding:0 12px 0 15px;border-radius:var(--r) 0 0 var(--r);color:var(--blue)!important}
.account-main:hover{background:var(--mist);color:var(--blue)!important;text-decoration:none}
.account-toggle{display:flex;align-items:center;justify-content:center;width:32px;padding:0;
  border-left:1px solid var(--line);border-radius:0 var(--r) var(--r) 0;cursor:pointer}
.account-toggle:hover{background:var(--mist)}
.account-toggle svg{width:12px;height:12px;transition:transform .18s ease}
.account-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.account-dropdown{position:absolute;right:0;top:calc(100% + 10px);z-index:52;width:220px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px;
  box-shadow:0 12px 30px rgba(11,27,43,.16)}
.account-dropdown[hidden]{display:none}
.account-dropdown::before{content:"";position:absolute;top:-6px;right:13px;width:10px;height:10px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.account-hello{position:relative;margin:0 0 5px;padding:9px 11px 10px;border-bottom:1px solid var(--line);
  color:var(--slate);font-size:12.5px;line-height:1.35}
.account-hello strong{color:var(--ink)}
.account-dropdown a{display:flex!important;color:var(--ink)!important;font-size:13.5px!important;
  font-weight:600!important;padding:9px 11px;border-radius:4px}
.account-dropdown a:hover{background:var(--mist);color:var(--blue)!important;text-decoration:none}
.account-dropdown a:first-of-type{color:var(--blue)!important;font-weight:800!important}

.wishlist-link{justify-content:center;width:35px;height:42px;flex:none}
.wishlist-link:hover{color:var(--sky)!important}
.wishlist-link svg{width:20px!important;height:20px!important}
.logout-link{white-space:nowrap;padding:10px 2px;font-size:13.5px!important}
.logout-link:hover{color:var(--sky)!important}
.logout-link svg{width:15px!important;height:15px!important}

/* Members have more controls, so tighten just their desktop header slightly. */
.is-member .head .wrap{gap:12px}
.is-member .nav{gap:18px}
.is-member .head-end{gap:9px}
.is-member .head-end .cart-link{margin-left:0}

/* footer */
.foot{padding:clamp(30px,4vw,44px) 0 0}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.foot-top>a img{height:26px;width:auto}
.wordmark-blue{font-weight:900;font-size:clamp(22px,2vw,26px);letter-spacing:-.035em;
  color:var(--blue);line-height:1;display:block}
.pays{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pays img{height:26px;width:auto;border:1px solid var(--line);border-radius:4px;
  background:#fff;padding:3px 6px;object-fit:contain}
.pays .gateway{height:34px;border:0;padding:0;background:none;border-radius:4px}
.socials{display:flex;gap:13px}
.socials a{color:var(--ink)}
.socials svg{width:17px;height:17px;display:block}
.socials a:hover{color:var(--blue)}
.foot-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;padding:28px 0 6px}
.foot-cols h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink);margin-bottom:12px}
.foot-cols li{margin-bottom:7px}
.foot-cols a{font-size:13.5px;color:var(--slate)}
.foot-cols a:hover{color:var(--blue)}
.foot-base{border-top:1px solid var(--line);margin-top:22px;padding:16px 0 30px;
  font-size:12.5px;color:var(--slate);text-align:center}

/* reveal */
.anim .rv{opacity:0;transform:translateY(12px)}
.anim .rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.anim .cast a{opacity:0;transform:translateY(14px)}
.anim .cast.go a{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}

@media (max-width:1240px){
  .nav,.head-end{display:none}
  /* The language switcher stays out of the collapsing menu and sits to the
     left of Menu, so it is reachable on tablet and phone without opening
     anything. Its panel opens leftwards from the button. */
  .burger{display:block;margin-left:12px}
  .lang{margin-left:auto;position:static}
  .lang-btn{padding:10px 6px}
  /* Below 1240 the panel spans the header rather than hanging off the button,
     so it is always fully on screen whichever side the button ends up on. */
  .lang-menu{left:var(--gut);right:var(--gut);width:auto;max-width:none}
  .head.open .wrap{flex-wrap:wrap}
  .head.open .nav{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin:8px 0 0}
  .head.open .nav a{padding:12px 0;border-top:1px solid rgba(255,255,255,.2);width:100%}
  .head.open .head-end{display:flex;order:4;width:100%;margin:14px 0 4px}
  .head.open .account-menu{flex:none}
  .head.open .account-dropdown{top:calc(100% + 8px);right:0}
  .head.open .logout-link{padding-left:8px;padding-right:8px}
}
@media (max-width:680px){
  .head.open .head-end{flex-wrap:wrap}
  .btn-join,.btn-login{flex:1}
  .is-member .head.open .head-end{align-items:stretch;gap:8px}
  .is-member .head.open .account-menu{order:1;flex:1;min-width:170px}
  .is-member .head.open .account-main{flex:1}
  .is-member .head.open .wishlist-link{order:2;width:42px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r)}
  .is-member .head.open .cart-link{order:3;flex:1;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:var(--r);padding:8px 10px}
  .is-member .head.open .logout-link{order:4;flex:1;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:var(--r);padding:8px 10px}
  .is-member .head.open .account-dropdown{left:0;right:0;width:auto}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .anim .rv{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}