/* =============================================================================
   PrestoMart
   Brand colours sampled from prestomart_logo.jpg:
     #D2344D  crimson  (the P badge and "Mart")
     #828685  grey     ("resto")
   The flat brand red is hot at large sizes, so it is reserved for the primary
   action; #A3253A carries text and hover states.
   ========================================================================== */

:root{
  --brand:        #D2344D;
  --brand-deep:   #A3253A;
  --brand-dark:   #7E1B2C;
  --brand-tint:   #FBE9EC;
  --grey:         #828685;
  --grey-deep:    #5C605F;

  --ink:          #1E1719;
  --ink-2:        #4A4245;
  --muted:        #776E71;
  --ground:       #FFFFFF;
  --surface:      #FFFFFF;
  --sunk:         #F6F3F4;
  --rule:         #E6DFE1;
  --rule-2:       #CFC5C8;

  --radius:       8px;
  --radius-lg:    12px;
  --shadow-1:     0 1px 2px rgba(30,23,25,.06);
  --shadow-2:     0 4px 16px -6px rgba(30,23,25,.18);

  --header-h:     72px;
  --maxw:         1360px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Graphik","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit }

/* visually hidden, still announced */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 var(--radius) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{ left:0 }

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--brand-deep);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================ header ==================================== */

.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--rule);
  position:relative;
  z-index:50;
}

.header-main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}

.logo{ flex:none; display:block; line-height:0 }
.logo img{ height:38px; width:auto }

.search{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:stretch;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--surface);
  overflow:hidden;
  transition:box-shadow .12s ease;
}
.search:focus-within{ box-shadow:0 0 0 3px var(--brand-tint) }
.search input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  padding:11px 18px;font:inherit;color:var(--ink);
}
.search input::placeholder{ color:var(--muted) }
.search button{
  flex:none;border:0;cursor:pointer;
  background:var(--brand);color:#fff;
  padding:0 18px;display:grid;place-items:center;
  transition:background .12s ease;
}
.search button:hover{ background:var(--brand-deep) }

.header-actions{ flex:none; display:flex; align-items:center; gap:6px }
.action{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);
  transition:background .12s ease;
}
.action:hover{ background:var(--sunk) }
.cart{ position:relative }
.cart .badge{
  position:absolute;top:2px;right:4px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
}

/* ---- category strip ---- */

.catnav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px 10px;
  display:flex;align-items:center;gap:18px;
}
.catnav-toggle{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;padding:7px 0;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
}
.catnav-toggle:hover{ color:var(--brand-deep) }

.catnav-top{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;
}
.catnav-top::-webkit-scrollbar{ display:none }
.catnav-top a,
.catnav-more{
  display:inline-block;white-space:nowrap;
  padding:7px 12px;border-radius:999px;
  font-size:14.5px;color:var(--ink-2);text-decoration:none;
  background:none;border:0;cursor:pointer;font:inherit;
  transition:background .12s ease,color .12s ease;
}
.catnav-top a:hover,
.catnav-more:hover{ background:var(--sunk);color:var(--ink) }
.catnav-top a[aria-current="page"]{
  color:var(--brand-deep);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--brand);
  border-radius:0;
}

/* ---- all-categories panel ---- */

.category-panel{
  border-top:1px solid var(--rule);
  background:var(--surface);
  box-shadow:var(--shadow-2);
}
.category-panel-inner{
  max-width:var(--maxw);margin:0 auto;padding:22px 20px 26px;
}
.panel-heading{
  margin:0 0 14px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.category-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;
}
.category-grid a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:var(--radius);text-decoration:none;
  transition:background .12s ease;
}
.category-grid a:hover{ background:var(--sunk) }
.cg-name{ font-size:15px }
.cg-count{ font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums }
.panel-note{ margin:16px 0 0;font-size:13px;color:var(--muted) }

/* ============================ layout ==================================== */

.container{ max-width:var(--maxw);margin:0 auto;padding:0 20px }

/* ============================ footer ==================================== */

.site-footer{
  margin-top:72px;
  border-top:1px solid var(--rule);
  background:var(--sunk);
}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:34px 20px 42px;
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;
}
.footer-brand{ max-width:34ch }
.footer-brand img{ height:30px;width:auto;margin-bottom:12px }
.footer-brand p{ margin:0;font-size:13.5px;color:var(--muted);line-height:1.6 }
.footer-links{ display:flex;flex-wrap:wrap;gap:44px }
.footer-col h2{
  margin:0 0 10px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.footer-col ul{ list-style:none;margin:0;padding:0 }
.footer-col li{ margin-bottom:7px }
.footer-col a{ font-size:14px;color:var(--ink-2);text-decoration:none }
.footer-col a:hover{ color:var(--brand-deep);text-decoration:underline }
.footer-legal{
  border-top:1px solid var(--rule);
  padding:16px 20px;font-size:12.5px;color:var(--muted);
  max-width:var(--maxw);margin:0 auto;
}

/* ============================ responsive ================================ */

@media (max-width:860px){
  .header-main{ flex-wrap:wrap;gap:12px;padding:12px 16px }
  .logo{ order:1 }
  .header-actions{ order:2;margin-left:auto }
  .search{ order:3;flex-basis:100% }
  .catnav{ padding:0 16px 8px;gap:12px }
  .catnav-toggle span{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important;animation:none!important }
}
/* =============================================================================
   Phase 2 — category page: breadcrumb, sub-category strip, sort bar, grid,
   product cards, pagination.
   ========================================================================== */

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:20px 0 4px;font-size:13px;color:var(--muted);
}
.crumbs a{ color:var(--muted);text-decoration:none }
.crumbs a:hover{ color:var(--brand-deep);text-decoration:underline }
.crumbs [aria-current]{ color:var(--ink-2) }

.cat-head{ margin:0 0 22px }
.cat-head h1{
  margin:0 0 4px;font-size:clamp(24px,3.4vw,32px);
  letter-spacing:-.022em;line-height:1.15;
}
.cat-sub{ margin:0;color:var(--muted);font-size:14.5px }

/* ---- sub-category strip ---- */

.subcats{ margin:0 0 26px }
.subcats ul{
  list-style:none;margin:0;padding:4px 2px 12px;
  display:flex;gap:14px;overflow-x:auto;
  scrollbar-width:thin;scroll-snap-type:x proximity;
}
.subcats li{ flex:none;scroll-snap-align:start }

.subcat{
  display:block;width:118px;text-decoration:none;color:var(--ink);
}
.subcat-media{
  display:grid;place-items:center;
  width:118px;height:118px;margin-bottom:9px;
  border-radius:50%;overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.subcat-media img{ width:100%;height:100%;object-fit:cover }
.subcat-media.is-back{ font-size:24px;color:var(--muted) }
.subcat:hover .subcat-media{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
.subcat.is-active .subcat-media{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
.subcat-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13.5px;font-weight:600;line-height:1.32;text-align:center;
}
.subcat.is-active .subcat-name{ color:var(--brand-deep) }
.subcat-count{
  display:block;margin-top:2px;text-align:center;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
}

/* ---- sort bar ---- */

.sortbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 0 16px;border-top:1px solid var(--rule);
}
.sortbar-count{ margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums }
.sortform{ display:flex;align-items:center;gap:9px }
.sortform label{ font-size:14px;color:var(--ink-2) }
.sortform select{
  font:inherit;font-size:14px;padding:8px 12px;
  border:1px solid var(--rule-2);border-radius:999px;
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.sortform select:hover{ border-color:var(--ink-2) }
/* The Apply button is for shoppers without JavaScript; app.js hides it and
   submits on change instead. */
.sortgo{
  font:inherit;font-size:14px;font-weight:600;padding:8px 15px;
  border:1px solid var(--rule-2);border-radius:999px;
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.sortgo:hover{ border-color:var(--ink-2) }
.js .sortgo{ display:none }

/* ---- grid ---- */

.grid{
  display:grid;gap:26px 18px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  margin:0 0 40px;
}

.card{ display:flex;flex-direction:column;min-width:0 }
.card-link{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;min-width:0;
}

/* Square box. aspect-ratio reserves the space before the image loads, so the
   grid never reflows as pictures arrive. */
.card-media{
  position:relative;aspect-ratio:1/1;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);
  display:grid;place-items:center;
  transition:box-shadow .14s ease;
}
.card-link:hover .card-media{ box-shadow:var(--shadow-2) }

.card-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .3s ease;
}
.card-link:hover .card-media img{ transform:scale(1.035) }

/* Image smaller than the box: centre it at natural size on the tinted ground
   and keep the outline, rather than upscaling into a blurry mess. */
.card-media.is-small img{
  width:auto;height:auto;max-width:70%;max-height:70%;
  object-fit:contain;
}
.card-link:hover .card-media.is-small img{ transform:none }

.card-noimg{
  width:44px;height:44px;border-radius:8px;
  border:2px dashed var(--rule-2);
}

.card-name{
  margin:10px 0 0;font-size:14.5px;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-link:hover .card-name{ text-decoration:underline }
.card-desc{
  margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-price{
  margin:7px 0 0;font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.card-seller{
  margin:3px 0 0;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.empty{ margin:60px 0;text-align:center;color:var(--muted) }

/* ---- pagination ---- */

.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
  margin:8px 0 64px;
}
.pg{
  min-width:38px;padding:9px 13px;border-radius:999px;
  font-size:14px;text-align:center;text-decoration:none;color:var(--ink);
  border:1px solid transparent;font-variant-numeric:tabular-nums;
}
.pg:hover{ background:var(--sunk) }
.pg.is-current{
  background:var(--ink);color:#fff;font-weight:600;
}
.pg-step{ font-weight:600 }
.pg-gap{ padding:9px 4px;color:var(--muted) }

@media (max-width:600px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px }
  .subcat,.subcat-media{ width:96px }
  .subcat-media{ height:96px }
}
/* =============================================================================
   Phase 3 — product page
   ========================================================================== */

.listing{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:44px;
  align-items:start;
  margin:14px 0 60px;
}

/* ---- image ---- */

.pmedia{
  position:relative;aspect-ratio:1/1;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);
  display:grid;place-items:center;
}
.pmedia img{
  width:100%;height:100%;object-fit:contain;
  /* contain, not cover: on a detail page the whole item must be visible.
     Cropping is acceptable in a grid, not here. */
}
.pmedia.is-small img{ width:auto;height:auto;max-width:62%;max-height:62% }

/* ---- detail column ---- */

.listing-detail{ padding-top:4px }

.seller-line{ margin:0 0 8px;font-size:14px }
.seller-line a{
  color:var(--brand-deep);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;
}
.seller-line a:hover{ border-bottom-color:currentColor }

.listing-title{
  margin:0 0 14px;font-size:clamp(20px,2.5vw,26px);
  line-height:1.3;letter-spacing:-.012em;font-weight:500;
}

.listing-price{
  margin:0 0 22px;font-size:30px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

.listing-actions{ margin:0 0 10px }

.btn{
  display:block;width:100%;text-align:center;
  padding:15px 22px;border-radius:999px;
  font:inherit;font-size:16px;font-weight:600;
  cursor:pointer;text-decoration:none;
  border:2px solid transparent;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn-primary{ background:var(--ink);color:#fff;border-color:var(--ink) }
.btn-primary:hover{ background:var(--brand-deep);border-color:var(--brand-deep) }
.btn-outline{
  background:var(--surface);color:var(--ink);border-color:var(--ink);
  margin-bottom:16px;
}
.btn-outline:hover{ background:var(--sunk) }

.listing-note{
  margin:0 0 26px;font-size:13px;line-height:1.55;color:var(--muted);
}

.saved-flash{
  display:flex;align-items:center;gap:9px;
  margin:0 0 16px;padding:11px 15px;
  border-radius:var(--radius);
  background:var(--brand-tint);border:1px solid var(--brand);
  font-size:14px;color:var(--brand-dark);
}
.saved-flash a{ color:var(--brand-dark);font-weight:700 }

.listing-desc{ border-top:1px solid var(--rule);padding-top:22px;margin-bottom:22px }
.listing-desc h2{
  margin:0 0 10px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.listing-desc p{ margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--ink-2) }

.listing-ask{ margin:0;font-size:14.5px }
.listing-ask a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;
}
.listing-ask a:hover{ color:var(--brand-deep) }

/* ---- more from seller ---- */

.more-seller{ border-top:1px solid var(--rule);padding-top:30px }
.more-seller h2{
  margin:0 0 20px;font-size:19px;font-weight:600;letter-spacing:-.012em;
}

@media (max-width:820px){
  .listing{ grid-template-columns:1fr;gap:26px }
  .listing-price{ font-size:26px }
}

/* =============================================================================
   Phase 4 — search
   ========================================================================== */

.search-head h1{ font-weight:500 }

.no-results{ margin:44px 0 80px;max-width:64ch }
.no-results p{ margin:0 0 8px;font-size:16px;color:var(--ink-2) }
.no-results .hint{ color:var(--muted);font-size:14.5px }
.no-results h2{
  margin:34px 0 14px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.nr-cats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px;
}
.nr-cats a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;
}
.nr-cats a:hover{ background:var(--sunk);border-color:var(--rule) }
.nr-cats span{ font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums }

/* =============================================================================
   Phase 5 — saved items
   ========================================================================== */

.cart-explain{
  max-width:66ch;margin:0 0 28px;
  font-size:14.5px;line-height:1.6;color:var(--muted);
}

.cart-group{
  border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--surface);margin:0 0 22px;overflow:hidden;
}
.cg-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px;padding:15px 20px;background:var(--sunk);
  border-bottom:1px solid var(--rule);
}
.cg-head h2{ margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.01em }
.cg-meta{ margin:0;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums }

.cart-items{ list-style:none;margin:0;padding:0 }
.cart-item{
  display:grid;grid-template-columns:88px minmax(0,1fr) auto;
  gap:16px;align-items:start;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
.cart-item:last-child{ border-bottom:0 }
.cart-item.is-missing{ background:var(--sunk) }

.ci-media{
  width:88px;height:88px;border-radius:var(--radius);overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);
  display:grid;place-items:center;
}
.ci-media img{ width:100%;height:100%;object-fit:cover }

.ci-body{ min-width:0 }
.ci-name{ margin:0 0 5px;font-size:15px;font-weight:500;line-height:1.35 }
.ci-name a{ color:inherit;text-decoration:none }
.ci-name a:hover{ text-decoration:underline }
.ci-gone{ color:var(--muted);font-style:italic;font-weight:400 }
.ci-desc{
  margin:0;font-size:13px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.ci-side{ text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px }
.ci-price{ margin:0;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums }
.ci-remove{
  font:inherit;font-size:13px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.ci-remove:hover{ color:var(--brand-deep) }

.cg-foot{ margin:0;padding:15px 20px;border-top:1px solid var(--rule) }
.btn-inline{ display:inline-block;width:auto;padding:11px 20px;font-size:14.5px;margin:0 }

.cart-footnote{
  margin:30px 0 70px;font-size:14px;color:var(--muted);
}
.cart-footnote a{ color:var(--brand-deep);font-weight:600 }

@media (max-width:640px){
  .cart-item{ grid-template-columns:68px minmax(0,1fr);gap:12px }
  .ci-media{ width:68px;height:68px }
  .ci-side{ grid-column:2;flex-direction:row;align-items:center;
            justify-content:space-between;width:100%;text-align:left }
}

/* =============================================================================
   Phase 6 — accounts, sign-in, questions
   ========================================================================== */

.auth{ max-width:34rem;margin:52px auto 90px }
.auth h1{ margin:0 0 10px;font-size:28px;letter-spacing:-.02em;font-weight:600 }
.auth-lede{ margin:0 0 24px;color:var(--ink-2);font-size:15.5px;line-height:1.6 }
.auth-note{ margin:20px 0 0;font-size:14px;color:var(--muted) }
.auth-note a{ color:var(--brand-deep);font-weight:600 }

.auth-error,.auth-ok{
  margin:0 0 20px;padding:12px 15px;border-radius:var(--radius);font-size:14.5px;
}
.auth-error{ background:var(--brand-tint);border:1px solid var(--brand);color:var(--brand-dark) }
.auth-ok{ background:#EAF4EE;border:1px solid #2E6A4A;color:#245239 }

.auth-form label{
  display:block;margin:16px 0 6px;font-size:13.5px;font-weight:600;color:var(--ink);
}
.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=tel],
.auth-form input[type=password],
.auth-form textarea{
  display:block;width:100%;font:inherit;font-size:15px;
  padding:11px 14px;border:1px solid var(--rule-2);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
}
.auth-form textarea{ resize:vertical;line-height:1.55 }
.auth-form input:focus,.auth-form textarea:focus{
  outline:2px solid var(--brand-deep);outline-offset:1px;border-color:var(--brand-deep);
}
.auth-form .btn{ margin-top:22px }

.auth-alt{ margin-top:18px;text-align:center }
.linkish{
  font:inherit;font-size:14.5px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600;
}
.linkish:hover{ color:var(--brand-dark) }

.field-row{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.field-row label{ margin-top:16px }

/* ---- account ---- */

.account{ margin-bottom:80px }
.acct-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;margin:8px 0 20px;
}
.acct-card{
  border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--surface);padding:22px 24px;
}
.acct-card h2{ margin:0 0 6px;font-size:16.5px;font-weight:600;letter-spacing:-.01em }
.acct-hint{ margin:0 0 4px;font-size:13px;color:var(--muted);line-height:1.5 }
.acct-wide{ grid-column:1/-1 }
.acct-signout{ margin-top:26px }

.qlist{ list-style:none;margin:14px 0 0;padding:0 }
.qlist li{ padding:14px 0;border-top:1px solid var(--rule) }
.q-head{ display:flex;align-items:center;gap:10px;margin-bottom:5px }
.q-status{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--sunk);
  border:1px solid var(--rule-2);color:var(--muted);
}
.q-status.q-a{ background:#EAF4EE;border-color:#2E6A4A;color:#245239 }
.q-when{ font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums }
.q-about{ margin:0 0 4px;font-size:14px }
.q-about a{ color:var(--brand-deep);font-weight:600 }
.q-body{ margin:0;font-size:13.5px;color:var(--muted);line-height:1.5 }

@media (max-width:560px){
  .field-row{ grid-template-columns:1fr }
}
.q-topic{ margin:0 0 3px;font-size:14.5px;font-weight:600;line-height:1.35 }

/* ---- home: hero ---- */

.hero{
  background:var(--brand-tint);border-bottom:1px solid var(--rule);
  margin:0 0 44px;
}
.hero-inner{ padding:52px 20px 46px;text-align:center }
.hero h1{
  margin:0 auto 12px;max-width:26ch;
  font-size:clamp(27px,3.6vw,42px);line-height:1.1;letter-spacing:-.025em;
  font-weight:700;text-wrap:balance;
}
.hero-lede{
  margin:0 auto;max-width:56ch;font-size:16px;line-height:1.6;color:var(--ink-2);
}

.hero-search{
  display:flex;align-items:center;gap:8px;
  max-width:600px;margin:26px auto 0;
  background:var(--surface);border:1px solid var(--rule-2);
  border-radius:999px;padding:5px 5px 5px 20px;box-shadow:var(--shadow-1);
}
.hero-search:focus-within{
  border-color:var(--brand-deep);box-shadow:0 0 0 3px rgba(210,52,77,.18);
}
.hero-search input{
  flex:1;min-width:0;font:inherit;font-size:16px;border:0;background:none;
  color:var(--ink);padding:11px 0;
}
.hero-search input:focus{ outline:0 }
.hero-search input::placeholder{ color:var(--muted) }
.hero-search button{
  flex:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:0;border-radius:999px;padding:11px 26px;background:var(--brand);color:#fff;
}
.hero-search button:hover{ background:var(--brand-deep) }

.hero-chips{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:22px 0 0;padding:0;
}
.hero-chips a{
  display:inline-block;font-size:13.5px;text-decoration:none;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--rule-2);
  border-radius:999px;padding:6px 14px;
}
.hero-chips a:hover{ border-color:var(--brand-deep);color:var(--brand-deep) }

/* ---- home: titled rows ---- */

.prow{ margin:0 0 48px }
.prow-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 18px;
}
.prow-head h2{ margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em }
.prow-note{ margin:4px 0 0;font-size:13.5px;color:var(--muted) }
.prow-more{
  flex:none;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--brand-deep);white-space:nowrap;
}
.prow-more:hover{ text-decoration:underline;text-underline-offset:3px }

.prow-grid{
  display:grid;gap:24px 18px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1180px){ .prow-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:820px) { .prow-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:560px) {
  .prow-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* Twelve tiles two-up is six screens of scrolling before the next section. */
  .prow-grid > :nth-child(n+9){ display:none }
}

/* ---- home: category tiles ---- */

.ctiles{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px 18px;grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:900px){ .ctiles{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:620px){ .ctiles{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.ctile{ display:block;text-decoration:none;color:inherit }
.ctile-media{
  display:grid;place-items:center;aspect-ratio:4/3;width:100%;overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--rule);background:var(--sunk);
  transition:box-shadow .14s ease;
}
.ctile:hover .ctile-media{ box-shadow:var(--shadow-2) }
.ctile-media img{
  width:100%;height:100%;object-fit:cover;transition:transform .3s ease;
}
.ctile:hover .ctile-media img{ transform:scale(1.04) }
.ctile-name{
  display:block;margin:10px 0 0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
}
.ctile:hover .ctile-name{ text-decoration:underline;text-underline-offset:3px }
.ctile-count{ display:block;margin:2px 0 0;font-size:12.5px;color:var(--muted) }

/* Without JavaScript the "All categories" link still opens the panel: the
   anchor makes it the :target. Scoped to :not(.js) so that with JavaScript the
   toggle owns [hidden] alone - otherwise arriving on a #category-panel URL
   would leave the panel visible but the toggle convinced it was shut, and the
   first click would appear to do nothing. */
html:not(.js) .category-panel:target{ display:block }

/* ---- home: how it works ---- */

.how{ border-top:1px solid var(--rule);padding:38px 0 0;margin:8px 0 72px }
.how h2{ margin:0 0 22px;font-size:19px;font-weight:700;letter-spacing:-.02em }
.how-grid{
  list-style:none;margin:0;padding:0;counter-reset:how;
  display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));
}
.how-grid li{ counter-increment:how;padding-left:40px;position:relative }
.how-grid li::before{
  content:counter(how);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-deep);
  font-size:13px;font-weight:700;border:1px solid var(--brand);
}
.how-grid h3{ margin:2px 0 6px;font-size:15.5px;font-weight:600 }
.how-grid p{ margin:0;font-size:14px;line-height:1.6;color:var(--ink-2) }
@media (max-width:760px){ .how-grid{ grid-template-columns:1fr } }

/* ---- unavailable products ---- */

.unavailable{
  margin:22px 0 0;padding:16px 18px;
  border:1px solid var(--rule-2);border-left:3px solid var(--grey);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--sunk);
}
.un-head{
  margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.un-note{ margin:0;font-size:14px;line-height:1.55;color:var(--ink-2) }
.un-alt{ margin:12px 0 0;font-size:14px }
.un-alt a{ color:var(--brand-deep);font-weight:600;text-decoration:none }
.un-alt a:hover{ text-decoration:underline;text-underline-offset:3px }

/* A saved item that can no longer be bought. Muted rather than hidden: the
   shopper put it there, so it stays until they remove it. */
.ci-state{
  margin:4px 0 0;font-size:13px;font-weight:600;color:var(--grey-deep);
}