/* ========== HEADER ========== */
.store-header{position:sticky;top:0;z-index:30;background:#fff;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding:24px clamp(24px,4vw,60px);border-bottom:1px solid rgba(10,13,22,.06);flex-wrap:wrap}

.store-header__logo img{height:24px;width:auto}
.store-header nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-left:clamp(24px,4vw,60px)}
.store-header nav a,.store-header nav .cat-nav-item{font-size:13.5px;font-weight:500;color:#5b6070;transition:color .25s ease,text-shadow .25s ease;text-decoration:none}
.store-header nav a:hover,.store-header nav .cat-nav-item:hover{color:#0e8c84}
/* text-shadow instead of font-weight change so activating an item doesn't
   widen it and shift neighbours. */
.store-header nav a.is-active,.store-header nav .cat-nav-item.is-active{color:#0e8c84;text-shadow:0.4px 0 0 currentColor,-0.4px 0 0 currentColor}
.store-search{flex:0 1 400px;min-width:230px;max-width:400px;display:flex;align-items:center;gap:8px;margin-left:auto}
.store-search__pill{flex:1;min-width:0;display:flex;align-items:center;height:39px;background:url('../img/ui/search_pill_bg.png') center/100% 100% no-repeat;padding:0 20px;transition:filter .2s ease}
.store-search__pill:focus-within{filter:brightness(.98)}
.store-search input{flex:1;background:transparent;border:0;outline:0;font:inherit;font-size:13.5px;color:#0a0d16;min-width:0}
.store-search__btn{width:39px;height:39px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;flex-shrink:0;transition:transform .25s ease;line-height:0}
.store-search__btn img{width:100%;height:100%;display:block}
.store-search__btn:hover{transform:scale(1.06)}
.header-icons{display:flex;gap:3px;align-items:center;margin-right:clamp(12px,2vw,32px)}
.header-icons a{display:flex;line-height:0;transition:transform .25s ease}
.header-icons a:hover{transform:translateY(-1px)}
.header-icons img{width:40px;height:40px;display:block}

/* ========== BODY ========== */
.store-body{max-width:1360px;margin:0 auto;padding:clamp(24px,3vw,40px) clamp(20px,4vw,60px) clamp(60px,7vw,100px)}
.store-title{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;color:#0a0d16;padding-left:2px;align-self:center;margin:0}

/* ========== CATEGORY TABS ========== */
.cat-tabs{display:flex;gap:8px;flex-wrap:nowrap;max-width:920px;justify-content:space-between;padding:10px;background:#FBFBFB;border-radius:14px;border:1px solid #fff;box-sizing:border-box}
.cat-tab{display:flex;align-items:center;gap:10px;padding:9px 24px;background:#fff;border:1px solid rgba(10,13,22,.09);border-radius:14px;font-size:14px;font-weight:500;color:#0a0d16;cursor:pointer;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease,transform .2s ease;white-space:nowrap;font-family:inherit;flex:1 1 0;justify-content:flex-start}
.cat-tab:hover{border-color:rgba(9,65,111,.35);transform:translateY(-1px)}
.cat-tab.is-active{background:#e8eff6;border-color:#6EA9DB;box-shadow:inset 0 0 0 .5px #6EA9DB;color:#09416F;font-weight:600}
.cat-tab img{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:block}

/* Empty state when a category has no products yet */
.store-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:#5b6070}
.store-empty svg{width:52px;height:52px;color:#dcdee3;margin-bottom:16px}
.store-empty h3{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:16px;color:#0a0d16;margin:0 0 8px;letter-spacing:-.01em}
.store-empty p{font-size:13px;margin:0 auto 20px;max-width:360px;line-height:1.6}
.store-empty button{background:#0e8c84;color:#fff;border:0;padding:10px 22px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s ease}
.store-empty button:hover{background:#0d7a72}


/* ========== LAYOUT GRID ========== */
.store-grid{display:grid;grid-template-columns:1fr;gap:clamp(6px,.8vw,10px) clamp(20px,2.4vw,32px);align-items:start;row-gap:clamp(6px,.8vw,10px)}
@media(min-width:900px){.store-grid{grid-template-columns:270px minmax(0,1fr)}}
.store-grid > .store-title{grid-column:1}
.store-grid > .cat-tabs{grid-column:2}
.store-grid > .filters-card{grid-column:1}
.store-grid > .products-grid{grid-column:2}
@media(max-width:900px){
  .store-grid > .store-title,.store-grid > .cat-tabs,.store-grid > .filters-card,.store-grid > .products-grid{grid-column:1}
}

/* ========== FILTERS SIDEBAR ========== */
.filters-card{background:#ffffff;border:1px solid rgba(10,13,22,.09);border-radius:16px;padding:22px 20px;position:sticky;top:80px;overflow:hidden}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.filters-head h3{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:15.5px;color:#0a0d16;letter-spacing:-.01em}
.filters-erase{font-size:12.5px;font-weight:600;color:#3079C2;cursor:pointer;background:none;border:0;font-family:inherit;padding:0;transition:opacity .2s ease}
.filters-erase:hover{opacity:.7}
/* First section (Collection) — its top divider is the "under Filters" line
   and should reach the card walls. Negative horizontal margin does that. */
.filter-section{margin:0 -20px;padding:18px 20px 0;border-top:1px solid rgba(10,13,22,.08)}
/* Subsequent sections (Script, ...) — divider stays inset like the original
   design; also nudged 12px lower so it tracks with the Script heading. */
.filter-section + .filter-section{margin-left:0;margin-right:0;padding-left:0;padding-right:0;margin-top:12px}
.filter-section h4{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:13.5px;color:#0a0d16;margin-bottom:12px;letter-spacing:-.005em}
.filter-check{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:13px;color:#5b6070;transition:color .2s ease}
.filter-check:hover{color:#0a0d16}
.filter-check input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid rgba(10,13,22,.28);border-radius:4px;background:#fff;cursor:pointer;position:relative;flex-shrink:0;transition:border-color .2s ease,background .2s ease}
.filter-check input:checked{background:#0e8c84;border-color:#0e8c84}
.filter-check input:checked::after{content:'';position:absolute;left:3px;top:0;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.filter-check input:checked + span{color:#0a0d16;font-weight:500}
.filter-section:last-of-type{padding-bottom:4px}

/* ========== PRODUCTS GRID ========== */
/* Category switch: fade the outgoing cards, then stagger the new ones in. */
.products-grid{transition:opacity .13s ease}
.products-grid.is-leaving{opacity:0}
@keyframes cardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.products-grid.is-entering > *{animation:cardIn .36s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 26ms)}
@media(prefers-reduced-motion:reduce){
  .products-grid{transition:none}
  .products-grid.is-entering > *{animation:none}
  .cat-tab{transition:none}
}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,18px);max-width:920px;margin-top:clamp(18px,2.2vw,32px)}
@media(max-width:900px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.products-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.product-card{display:block;color:inherit;text-align:left;transition:transform .3s ease}
.product-card:hover{transform:translateY(-3px)}
.product-card__img{position:relative;aspect-ratio:1;background:#fff;border:1px solid rgba(10,13,22,.06);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .3s ease,box-shadow .3s ease}
.product-card:hover .product-card__img{border-color:rgba(20,172,172,.4);box-shadow:0 14px 32px rgba(10,13,22,.06)}
.product-card__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-card__img img{transform:scale(1.05)}
.badge-new{position:absolute;top:10px;left:10px;background:#e8f2fc;color:#09416F;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:-.005em;z-index:2}
.badge-discount{position:absolute;background:#e93a4a;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.01em}
/* Reserve exactly 2 lines so pricerows across cards sit on the same y-axis
   regardless of whether a title happens to fit on one line. */
.product-card__title{font-size:14px;font-weight:500;color:#0a0d16;margin:16px 2px 0;line-height:1.4;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.4em * 2)}
/* Discount-aware price row.
   - New price top-left, discount pill top-right on the SAME line
   - Old price (line-through) beneath the new price
   - min-height reserves the 2-line stack even when there's no old price,
     so pricerows align across cards regardless of discount state. */
.product-card__pricerow{display:flex;align-items:flex-start;gap:10px;margin:12px 2px 0;position:relative;min-height:42px}
.product-card__pricerow>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.product-card__price{font-size:18px;font-weight:700;color:#0a0d16;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.product-card__price-old{font-size:13px;color:#9ca0aa;text-decoration:line-through;letter-spacing:-.005em;line-height:1;white-space:nowrap}
.product-card__discount-inline{background:#e93a4a;color:#fff;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.01em;margin-left:auto;line-height:1;white-space:nowrap;flex-shrink:0;align-self:flex-start}

/* ========== FOOTER ========== */
.ft-icon{opacity:.7;transition:opacity .25s ease}
.ft-icon:hover{opacity:1}
.store-footer{background:#fff;border-top:1px solid rgba(10,13,22,.06)}
.store-footer__inner{max-width:1400px;margin:0 auto;padding:clamp(22px,2.4vw,32px) clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ========== MOBILE MENU (drawer, same as landing) ========== */

/* ---- Mobile account button (signed-in only) ----
   Puts the account icon where the logo used to sit and moves the logo to the
   centre, so the header reads: account | logo | menu. It opens the same
   .account-popover the desktop header uses — the click handler is delegated
   on `data-open-account`, so nothing new had to be wired up.

   Hidden for guests: they have nothing to open, and the header stays exactly
   as it was. Only pages without a header search box carry the button, since
   centring the logo needs the middle of the row.

   42px matches .menu-btn opposite it; the icon is already a circular badge,
   so it needs no border of its own. Equal widths on both ends is also what
   actually centres the logo under space-between. */
.hdr-account-btn{display:none;width:42px;height:42px;border:1px solid rgba(10,13,22,.08);border-radius:50%;background:#fff;align-items:center;justify-content:center;padding:0;cursor:pointer;flex-shrink:0;box-shadow:0 2px 6px rgba(10,13,22,.04);color:rgba(10,13,22,.88);position:relative}
.hdr-account-btn svg{width:19px;height:19px;display:block}
.hdr-account-btn:active{transform:translateY(1px)}
.menu-btn{display:none;width:42px;height:42px;border:1px solid rgba(10,13,22,.08);border-radius:50%;background:#fff;align-items:center;justify-content:center;padding:0;cursor:pointer;flex-shrink:0;box-shadow:0 2px 6px rgba(10,13,22,.04);position:relative}
.menu-btn__lines{display:block;width:18px;height:1.6px;background:#0a0d16;position:relative;transition:transform .3s ease,opacity .3s ease}
.menu-btn__lines::before,.menu-btn__lines::after{content:'';position:absolute;left:0;width:100%;height:1.6px;background:#0a0d16;transition:transform .3s ease}
.menu-btn__lines::before{top:-6px}
.menu-btn__lines::after{top:6px}
.menu-btn.open .menu-btn__lines{background:transparent}
.menu-btn.open .menu-btn__lines::before{transform:rotate(45deg) translate(4px,4px)}
.menu-btn.open .menu-btn__lines::after{transform:rotate(-45deg) translate(4px,-4px)}
/* 100vh on a phone measures the viewport WITHOUT the browser's address bar,
   so a drawer sized to it runs past the bottom of the screen and anything
   anchored to its foot — the sign-in card — is cut off. 100dvh tracks the
   area actually visible; the 100vh line above stays as the fallback.
   The safe-area padding keeps it clear of the iPhone home indicator. */
.drawer{position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100vh;height:100dvh;background:#fff;z-index:100;padding:78px 24px calc(20px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:0;box-shadow:-16px 0 40px rgba(0,0,0,.12);transition:right .4s cubic-bezier(.22,.65,.2,1);overflow-y:auto}
.drawer.open{right:0}
.drawer a.drawer-link{padding:16px 8px;font-size:15.5px;font-weight:500;color:#5b6070;border-bottom:1px solid rgba(10,13,22,.06);transition:color .25s ease,padding-left .25s ease;letter-spacing:-.01em}
.drawer a.drawer-link.is-active{font-weight:700;color:#0e8c84}
.drawer a.drawer-link:hover,.drawer a.drawer-link:active{color:#0e8c84;padding-left:14px}
.drawer a.drawer-link--icon{display:flex;align-items:center;gap:12px}
.drawer-bg{position:fixed;inset:0;background:rgba(8,12,20,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:99;opacity:0;pointer-events:none;transition:opacity .4s ease}
.drawer-bg.open{opacity:1;pointer-events:auto}

/* ========== MOBILE / RESPONSIVE ========== */
@media(max-width:900px){
  .filters-card{position:static}
}

/* ========== FILTERS COLLAPSE ON MOBILE ========== */
@media(max-width:900px){
  .filters-card{padding:0 !important;border:0 !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
  .filters-head{padding:6px 2px;cursor:pointer;margin-bottom:0;user-select:none;display:flex;justify-content:flex-end;align-items:center;gap:6px}
  .filters-head h3{font-size:12.5px;font-weight:500;color:#5b6070;letter-spacing:-.005em}
  .filters-head .filters-erase{display:none}
  .filters-head::after{content:'';display:block;width:10px;height:6px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8' fill='none' stroke='%235b6070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l4 4 4-4'/></svg>") no-repeat center/contain;transition:transform .3s ease}
  .filters-card.is-open .filters-head::after{transform:rotate(180deg)}
  .filter-section{overflow:hidden;max-height:0;padding-top:0 !important;padding-bottom:0 !important;border-top:0 !important;visibility:hidden;transition:max-height .75s cubic-bezier(.19,1,.22,1),padding .7s cubic-bezier(.19,1,.22,1),box-shadow .6s ease,visibility 0s .75s}
  .filters-card.is-open .filter-section{max-height:360px;padding-top:12px !important;padding-bottom:4px !important;visibility:visible;transition:max-height .75s cubic-bezier(.19,1,.22,1),padding .7s cubic-bezier(.19,1,.22,1),box-shadow .6s ease,visibility 0s}
  .filters-card.is-open .filter-section:not(:first-of-type){box-shadow:inset 0 1px 0 rgba(10,13,22,.06)}
}
@media(max-width:720px){
  .cat-tabs{margin-top:8px}
}
@media(max-width:900px){
  .store-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:22px 20px}
  .store-footer__inner > div:first-child{display:none !important}
  .store-footer__inner > span{order:2;font-size:12px !important;letter-spacing:-.005em}
  .store-footer__inner > a{order:1;line-height:0}
  .store-footer__inner > a img{height:20px !important;width:auto;opacity:.85}
}
@media(max-width:720px){
  /* Single-row header: logo | search | hamburger.
     `nowrap` makes it structurally impossible for the menu button to drop to
     a second line, and the search is the only flexible item so it absorbs
     whatever space is left instead of relying on hard-coded max-widths. */
  .store-header{gap:10px;padding:12px 20px;flex-wrap:nowrap}
  .store-header nav,.header-icons{display:none}
  .store-header__logo{flex:none}
  .menu-btn{display:flex;flex:none;margin-left:auto}
  body.is-signed-in .hdr-account-btn{display:flex}
  /* The header carries the account button on this page, so the drawer's copy
     of the same card — and its Sign out, which the popover also offers — is
     duplicated navigation. Hidden only where that button actually exists:
     :has() fails on store/product/services, which have no room for it and
     therefore still need the drawer to carry account. */
  body.is-signed-in:has(.hdr-account-btn) .drawer-account,
  body.is-signed-in:has(.hdr-account-btn) .drawer-signout{display:none}
  body.is-signed-in .store-header--center{justify-content:space-between}
  body.is-signed-in .store-header--center .menu-btn{margin-left:0}
  .store-search{flex:1 1 auto;min-width:0;gap:6px;margin-left:auto;max-width:none}
  .store-search__pill{height:38px;padding:0 14px;min-width:0}
  .store-search input{font-size:13px;min-width:0}
  .store-search__btn{width:38px;height:38px;flex:none}
  .store-title{font-size:17px;padding-left:0}
  /* Extra top padding shifts title/tabs/filter down; matching -reduction on
     products-grid margin-top keeps product cards at their original y-position. */
  .store-body{padding-top:24px;padding-bottom:60px}
  .cat-tabs{flex-wrap:wrap;gap:6px;max-width:none;justify-content:flex-start;padding:8px;border-radius:12px}
  .cat-tab{padding:7px 12px 7px 10px;font-size:12.5px;border-radius:8px;gap:6px;flex:0 1 auto}
  .cat-tab img{width:17px;height:17px}
  .products-grid{margin-top:8px}
  .product-card__img{padding:0;border-radius:12px}
  .product-card__title{font-size:12.5px;margin-top:10px;line-height:1.35}
  .product-card__pricerow{min-height:34px;gap:8px}
  .product-card__pricerow>div{gap:4px}
  .product-card__price{font-size:14px}
  .product-card__price-old{font-size:11px}
  .product-card__discount-inline{font-size:10px;padding:2px 8px}
  .badge-new{top:7px;left:7px;font-size:10px;padding:2px 7px}
  body.drawer-open{overflow:hidden}
}
@media(max-width:420px){
  .store-body{padding-left:16px;padding-right:16px}
  .store-title{font-size:16px}
  /* Reclaim horizontal room so the placeholder stays readable. */
  .store-header{gap:8px;padding:12px 16px}
  .store-search__pill{height:36px;padding:0 12px}
  .store-search__btn{width:36px;height:36px}
  .cat-tabs{padding:6px;gap:5px}
  .cat-tab{padding:6px 10px 6px 8px;font-size:11.5px;gap:5px}
  .cat-tab img{width:15px;height:15px}
  .products-grid{gap:10px}
  .product-card__img{padding:0;border-radius:10px}
  .product-card__title{font-size:12px;margin-top:8px}
  .product-card__price{font-size:13px}
  .product-card__pricerow{min-height:30px;gap:6px}
  .product-card__discount-inline{font-size:9.5px;padding:2px 6px}
}

/* Banner for a Featured Collection arriving from the home page. Sits between
   the category tabs and the grid, so it reads as "why no tab is lit". */
.collection-note[hidden]{ display:none; }   /* author display beats the UA [hidden] rule */
.collection-note{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 22px; padding:12px 16px;
  border:1px solid var(--line, #e6e1d8); border-radius:10px;
  background:#faf8f4; font-size:14px; color:#5a5348;
}
.collection-note strong{ color:#1a1a1a; font-weight:600; }
.collection-note button{
  margin-left:auto; padding:6px 14px; cursor:pointer;
  border:1px solid var(--line, #e6e1d8); border-radius:999px;
  background:#fff; font:inherit; font-size:13px; color:#5a5348;
  transition:background .15s ease, color .15s ease;
}
.collection-note button:hover{ background:#1a1a1a; border-color:#1a1a1a; color:#fff; }
@media (max-width:600px){
  .collection-note{ margin-bottom:18px; padding:11px 14px; font-size:13px; }
  .collection-note button{ margin-left:0; }
}