/* =========================================================
   Shared site navigation (self-contained, used on every page)
   ========================================================= */
.topnav{position:sticky;top:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #ebebeb;font-family:"Hanken Grotesk",system-ui,sans-serif}
.topnav *{box-sizing:border-box}
.topnav__inner{max-width:1180px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:18px}

/* brand */
.topnav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#0e1a2b;margin-right:auto}
.topnav__flag{height:19px;width:auto;display:block;border-radius:2px;flex:none}
.topnav__name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.18rem;line-height:1.05;letter-spacing:.01em}
.topnav__name small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#6b6b6b}

/* desktop menu row */
.topnav__menu{display:flex;align-items:center;gap:6px}
.topnav__item{position:relative}
.topnav__trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:600;color:#0e1a2b;padding:10px 12px;border-radius:10px;transition:.2s}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{color:#0e1a2b;background:rgba(255,115,0,.08)}
.topnav__caret{transition:transform .25s}
.topnav__item.is-open .topnav__caret{transform:rotate(180deg)}

/* dropdown panel */
.topnav__drop{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:#fff;border:1px solid #ebebeb;border-radius:14px;box-shadow:0 18px 50px -22px rgba(14,26,43,.35);
  padding:8px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;z-index:10}
.topnav__drop--right{left:auto;right:0}
.topnav__item:hover .topnav__drop,.topnav__item.is-open .topnav__drop{opacity:1;visibility:visible;transform:none}
.topnav__drop a{display:block;padding:9px 14px;border-radius:9px;color:#0e1a2b;text-decoration:none;
  font-size:.92rem;font-weight:500;white-space:nowrap;transition:.15s}
.topnav__drop a:hover{background:#f4f4f1;color:#0e1a2b}

/* cart */
.topnav__cart{position:relative;display:flex;color:#0e1a2b;padding:8px;text-decoration:none}
.topnav__cart:hover{color:#0e1a2b}
.cart-badge{position:absolute;top:-2px;right:-4px;background:#ff7300;color:#fff;font-size:.64rem;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.topnav__cart--bar{display:none;margin-left:auto}

/* shop online button */
.topnav__cta{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:999px;
  background:#ff7300;color:#fff;font-weight:700;font-size:.9rem;
  text-decoration:none;letter-spacing:.02em;transition:.25s;white-space:nowrap}
.topnav__cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(255,115,0,.55)}

/* hamburger */
.topnav__burger{display:none;width:46px;height:46px;background:#fff;border:1px solid #ebebeb;border-radius:12px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.topnav__burger span{display:block;width:21px;height:2px;background:#0e1a2b;border-radius:2px;transition:.3s}
.topnav.is-drawer-open .topnav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topnav.is-drawer-open .topnav__burger span:nth-child(2){opacity:0}
.topnav.is-drawer-open .topnav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.topnav__drawer{display:none;flex-direction:column;padding:6px 24px 26px;
  background:#fff;border-top:1px solid #ebebeb;max-height:calc(100vh - 66px);overflow-y:auto}
.topnav.is-drawer-open .topnav__drawer{display:flex}
.topnav__draw-group{border-bottom:1px solid #ebebeb}
.topnav__draw-head{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 2px;font-family:"Hanken Grotesk",sans-serif;font-size:1.02rem;font-weight:700;color:#0e1a2b}
.topnav__draw-head::-webkit-details-marker{display:none}
.topnav__draw-head .topnav__caret{flex:none;color:#0e1a2b;transition:transform .25s}
.topnav__draw-group[open] .topnav__draw-head .topnav__caret{transform:rotate(180deg)}
.topnav__draw-links{display:flex;flex-direction:column;padding:0 0 12px}
.topnav__draw-links a{display:block;padding:9px 0 9px 4px;color:#0e1a2b;text-decoration:none;font-size:.96rem;font-weight:500}
.topnav__draw-links a:hover{color:#0e1a2b}
.topnav__cta--drawer{margin-top:18px;justify-content:center;min-height:50px;font-size:1rem}

/* breakpoint */
@media(max-width:1023px){
  .topnav__menu{display:none}
  .topnav__cart--bar{display:flex}
  .topnav__burger{display:flex}
}

/* =========================================================
   Shared site footer
   ========================================================= */
.site-footer{background:#0e1a2b;color:rgba(255,255,255,.66);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.6;padding:56px 0 calc(32px + env(safe-area-inset-bottom,0px));margin-top:40px}
.site-footer *{box-sizing:border-box}
.site-footer__inner{max-width:1180px;margin:0 auto;padding:0 24px}
.site-footer__top{display:grid;grid-template-columns:1fr;gap:38px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:860px){.site-footer__top{grid-template-columns:1.25fr 2fr;gap:54px}}
.site-footer__logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.site-footer__logo img{height:18px;width:auto;border-radius:2px;display:block}
.site-footer__logo span{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.12rem;line-height:1.05}
.site-footer__logo small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.site-footer__tag{margin:16px 0;font-size:.94rem;line-height:1.6;max-width:34ch;color:rgba(255,255,255,.66)}
.site-footer__contact{display:flex;flex-direction:column;gap:6px}
.site-footer__contact a{color:#f4ca66;text-decoration:none;font-weight:600;font-size:.92rem}
.site-footer__contact a:hover{color:#fff}
.site-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(min-width:600px){.site-footer__cols{grid-template-columns:repeat(3,1fr)}}
/* The Shop column carries a link per PRODUCT, so on this store it holds 28 of them.
   With one link per line it made a 1,317px ribbon, the other three columns stretched
   to match, and every page on the site ended in about 1,200px of empty dark space.
   It spans the full grid and flows in CSS columns instead: same links, four rows
   instead of twenty-eight. Ordered by column so the alphabetical list still reads
   top-to-bottom. */
.site-footer__col--shop{grid-column:1/-1;margin-bottom:8px}
.site-footer__col--shop .site-footer__links{columns:2;column-gap:26px}
@media(min-width:600px){.site-footer__col--shop .site-footer__links{columns:4}}
.site-footer__col--shop a{break-inside:avoid}
.site-footer__col h4{color:#fff;font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.site-footer__col a{display:block;color:rgba(255,255,255,.66);text-decoration:none;font-size:.9rem;font-weight:500;padding:5px 0}
.site-footer__col a:hover{color:#f4ca66}
.site-footer__bar{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding-top:24px;font-size:.82rem}
.site-footer__bar p{margin:0;color:rgba(255,255,255,.5)}
.site-footer__meta{display:flex;gap:18px}
.site-footer__meta a{color:rgba(255,255,255,.6);text-decoration:none;font-weight:600}
.site-footer__meta a:hover{color:#f4ca66}

/* footer address + delivery blocks */
.site-footer__addr{margin-top:16px;display:grid;gap:12px}
.site-footer__addr div{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.6)}
.site-footer__addr strong{display:block;color:rgba(255,255,255,.8);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.site-footer__delivery{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer__delivery h4{color:#fff;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.18rem;margin:0 0 10px}
.site-footer__delivery p{margin:0;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.62)}
.site-footer__delivery strong{color:#f4ca66;font-weight:600}

/* =========================================================
   Cookie consent banner
   ========================================================= */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#0e1a2b;color:rgba(255,255,255,.85);
  padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.45);
  font-family:"Hanken Grotesk",system-ui,sans-serif}
.cookie-banner__inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cookie-banner__text{margin:0;font-size:.9rem;line-height:1.55}
.cookie-banner__text a{color:#f4ca66;text-decoration:underline;font-weight:600}
.cookie-banner__actions{display:flex;gap:10px;flex-shrink:0}
.cookie-banner__btn{min-height:42px;padding:0 22px;border-radius:999px;font-family:inherit;
  font-size:.9rem;font-weight:700;cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}
.cookie-banner__btn--accept{background:#ff7300;color:#fff}
.cookie-banner__btn--accept:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(255,115,0,.55)}
.cookie-banner__btn--ghost{background:transparent;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.3)}
.cookie-banner__btn--ghost:hover{border-color:#f4ca66;color:#fff}
@media(min-width:760px){
  .cookie-banner__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
  .cookie-banner__text{font-size:.88rem}
}

/* =========================================================
   Home only: transparent nav over the hero, solid after scroll
   ========================================================= */
body.home-hero .topnav{position:fixed;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
body.home-hero .topnav.is-scrolled,
body.home-hero .topnav.is-drawer-open{background:rgba(255,255,255,.94);border-bottom-color:#ebebeb;backdrop-filter:saturate(180%) blur(12px)}
/* keep the brand + menu legible over the image while transparent */
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name small,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__trigger,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__cart{text-shadow:0 1px 10px rgba(244,244,241,.9),0 1px 2px rgba(244,244,241,.7)}