/* Homepage layout pass (2026-10-29): category strip under the hero, even product grids, calmer cards,
   custom-order steps and FAQ. Loaded last so it only refines the shared storefront styles. */

/* Hero keeps the interactive TikTok phone; a compact category strip sits right under it. */
.hero-shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-block:4px 22px}
.hero-tile{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;padding:8px 16px 8px 8px;background:var(--white);border:2px solid var(--ink);border-radius:18px;color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hero-tile img{width:88px;height:88px;object-fit:contain;background:#FEFEFE;border-radius:12px}
.hero-tile:hover,.hero-tile:focus-visible{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--pink)}
.hero-tile-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-tile-copy b{font-weight:800;font-size:17px;line-height:1.2}
.hero-tile-copy small{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}

/* Product cards: four per row on desktop, white image wells, one-line copy, plain-font names. */
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid[data-count="1"]{grid-template-columns:minmax(0,320px)}
.grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,320px))}
.grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,320px))}
.card .frame,.card .frame .photo,.wardrobe-card-image,.collection-frame{background:#FEFEFE!important}
.card .frame .photo,.wardrobe-card-image>img{object-fit:contain;padding:0}
.collection-frame[data-slot="main"]>img,.collection-frame[data-slot="color"]>img{padding:0}
.card .body{padding:16px 16px 18px;gap:6px}
.card h3{font-family:var(--body);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.card .line{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta .pt{white-space:nowrap}
.card .row{padding-top:8px}
.card .price{font-size:22px}
.flag{font-size:11px}

/* Short lists keep categories, the dog/cat switch and a narrow search; sort returns at 8+ pieces. */
.compact-tools .sort{display:none!important}
.compact-tools .controls{justify-content:flex-start}
@media (min-width:641px){.compact-tools .search{flex:0 1 340px}}

/* How custom orders work. */
.how{padding-block:clamp(48px,6vw,84px);border-top:2px solid var(--ink);background:var(--white)}
.how-head{margin-bottom:clamp(22px,3vw,36px)}
.how-head .kicker{color:var(--pink)}
.how-head h2{font-size:clamp(32px,3.6vw,50px);color:var(--blue)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.how-steps li{display:flex;flex-direction:column;gap:8px;padding:20px;border:2px solid var(--ink);border-radius:20px;background:var(--paper)}
.how-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yolk);border:2px solid var(--ink);font-weight:700;font-size:13px}
.how-steps b{font-weight:800;font-size:18px;line-height:1.25;margin-top:6px}
.how-steps p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* FAQ. */
.faq{padding-block:clamp(48px,6vw,84px);background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.faq-head .kicker{color:var(--pink)}
.faq-head h2{font-size:clamp(32px,3.6vw,50px);color:var(--blue)}
.faq-head p{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.faq-head a{color:var(--ink);font-weight:800;text-underline-offset:3px}
.faq-list{display:grid;gap:10px}
.faq-list details{border:2px solid var(--ink);border-radius:16px;background:var(--white)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;font-weight:800;font-size:16px;line-height:1.3;cursor:pointer;list-style:none;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yolk);border:2px solid var(--ink);font-size:16px;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{margin:0;padding:0 18px 18px;font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* TikTok clips: arrows are hidden by home.js when every clip already fits. */
.reel-hint[hidden]{display:none!important}

/* Product dialog: white image wells and one shipping line in the purchase bar. */
.wardrobe-image-button,.wardrobe-reference{background:#FEFEFE}
.buy .selection-summary>span{display:none}

/* Footer: keep the big wordmark clear of the legal rule. */
.wordmark{padding-bottom:.36em}

@media (max-width:1180px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .hero-shop{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .grid,.grid[data-count="2"],.grid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:640px){
  .hero-shop{gap:8px;margin-block:2px 16px}
  .hero-tile{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:8px 6px 10px;border-radius:14px}
  .hero-tile img{width:100%;height:auto;aspect-ratio:1}
  .hero-tile-copy{align-items:center}
  .hero-tile-copy b{font-size:12.5px}
  .hero-tile-copy small{font-size:10px}
  .card .body{padding:12px;gap:5px}
  .card h3{font-size:16px}
  .card .line{display:none}
  .card .price{font-size:20px}
  .how-steps{grid-template-columns:1fr;gap:10px}
  .how-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:16px}
  .how-n{grid-row:1 / span 2}
  .how-steps b{margin-top:0;font-size:16px}
  .how-steps p{font-size:14px}
  .faq-list summary{font-size:15px;padding:14px 16px}
  .cats{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}