/* Storefront refinements. Keep the product illustrations in the original brand system. */
:root { --ink:#183d32; --muted:#536b61; --line:#d8e4dc; --paper:#fffef9; }
body { background:var(--paper); color:var(--ink); }
[hidden] { display:none !important; }
button, input, select, summary, a { -webkit-tap-highlight-color:transparent; }
button, .button { touch-action:manipulation; }
:focus-visible { outline:3px solid #14765a; outline-offset:4px; }
.skip-link { position:fixed; top:8px; left:12px; z-index:20; transform:translateY(-160%); background:white; padding:12px 18px; border:2px solid var(--teal); border-radius:6px; }
.skip-link:focus { transform:none; }
dialog { width:min(1020px,94vw); padding:26px; border:1px solid var(--line); border-radius:18px; }
.dialog-header h2 { font-size:30px; }
.icon-btn { width:44px; height:44px; flex-shrink:0; background:var(--paper); }
.editor { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.editor-controls { max-height:68dvh; gap:16px; }
.editor-step { display:flex; flex-direction:column; gap:10px; }
.editor-step h3 { font-family:Playfair,Georgia,serif; font-size:25px; font-weight:400; margin:4px 0; }
.editor-controls label { font-size:13px; }
.editor-controls input:not([type=file]):not([type=range]), select { font-size:16px; min-height:46px; border-radius:7px; }
.editor-controls input[type=checkbox] { min-height:20px; }
.helper { font-size:12px; line-height:1.65; color:var(--muted); }
.upload-box { padding:20px; min-height:120px; border-radius:10px; }
.upload-box b { font-size:14px; }
.upload-box small { font-size:12px; }
.small-btn { font-size:12px; min-height:44px; padding:10px 13px; border-radius:6px; }
.customizer-steps { display:flex; gap:6px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.customizer-steps button { flex:1; border:1px solid var(--line); background:#f2f6ef; color:var(--muted); border-radius:7px; padding:10px 5px; min-height:44px; font:inherit; font-size:12px; }
.customizer-steps button[aria-pressed=true] { color:white; background:var(--teal); border-color:var(--teal); }
.step-navigation { display:flex; gap:10px; position:sticky; bottom:0; padding:12px 0 3px; background:var(--paper); z-index:1; }
.step-navigation .button { flex:1; }
.step-navigation .small-btn { margin:0; }
.privacy-note { margin-top:0; }
.color-options button { width:44px; height:44px; border-width:7px; }
.color-options button.selected { outline:2px solid var(--teal); }
.caption-picker { margin-top:10px; padding:16px; }
.caption-picker .caption-clear { font-size:12px; min-height:44px; }
.caption-picker .eyebrow { font-size:9px; }
.photo-details { border:1px solid var(--line); border-radius:8px; padding:14px; }
.photo-details summary { min-height:32px; cursor:pointer; font-size:14px; font-weight:600; }
.photo-details .photo-actions { margin:12px 0; }
.photo-details .placement-controls { margin-bottom:14px; }
.design-summary { background:#e8f4ed; border-radius:8px; padding:16px; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.design-summary span { display:block; }
.design-summary span:first-child { font-weight:600; margin-bottom:5px; }
.design-summary span:nth-child(n+3) { font-size:12px; color:var(--muted); }
.placement-buttons .small-btn { min-width:44px; min-height:44px; }
.preview-area { min-height:420px; }
.cart-row { align-items:flex-start; gap:14px; }
.bag-preview { position:relative; width:92px; height:116px; flex-shrink:0; background:#e8f1e8; border-radius:10px; overflow:hidden; display:grid; place-items:center; }
.bag-preview .product-mock { position:absolute; transform:scale(.34); margin:0; }
.bag-preview .tumbler { transform:scale(.30); }
.bag-preview .sticker { width:190px; min-height:230px; background:#fffaf0; border:8px solid white; border-radius:45% 45% 22% 22%; transform:scale(.4); }
.bag-preview .photo-window>img { width:100%; height:100%; object-fit:contain; }
.cart-row .item-copy { min-width:0; }
.cart-row h3 { font-size:15px; line-height:1.5; }
.cart-row p { font-size:12px; line-height:1.7; overflow-wrap:anywhere; margin-top:5px; }
.cart-row>strong { font-size:14px; white-space:nowrap; padding-top:3px; }
.quantity-control { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; margin-top:12px; }
.quantity-control button { width:40px; height:40px; min-height:40px; font-size:20px; text-decoration:none; padding:0; }
.quantity-control span { min-width:28px; text-align:center; font-size:14px; }
.quantity-control button:disabled { opacity:.4; cursor:default; }
.cart-row .remove-item { font-size:12px; min-height:40px; color:var(--muted); }
.continue-shopping { width:100%; min-height:44px; margin-top:10px; background:none; border:0; color:var(--teal); font:inherit; font-size:13px; text-decoration:underline; }
.cart-bottom p { font-size:12px; line-height:1.7; }
.empty-bag h3 { font-family:Playfair,Georgia,serif; font-size:25px; margin-bottom:14px; font-weight:400; }
.empty-bag p { font-size:14px; line-height:1.7; }
#toast { z-index:30; bottom:max(20px,env(safe-area-inset-bottom)); }
.collection-status { font-size:12px; color:var(--muted); margin:-12px 0 18px; }
.faq { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; border-top:1px solid var(--line); }
.faq h2 { font-size:clamp(32px,3.7vw,46px); line-height:1.2; margin:14px 0; }
.faq>div>p { font-size:14px; line-height:1.7; color:var(--muted); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:21px 24px 21px 0; font-size:15px; line-height:1.5; }
.faq details p { font-size:14px; line-height:1.8; color:var(--muted); padding:0 20px 22px 0; }
.upload-box { color:var(--ink); font-family:inherit; width:100%; }
.upload-box:hover { border-color:var(--teal); background:#e5f3e9; }
@media(max-width:420px) { .hero h1 { font-size:54px; } .cart-row { gap:10px; } .bag-preview { width:76px; } .cart-row h3 { font-size:14px; } }
@media(max-width:380px) { .preview-area { top:110px; } .dialog-header h2 { font-size:22px; } .step-navigation .button { padding-inline:12px; font-size:12px; } }
@media(max-height:650px) and (max-width:720px) { .preview-area { position:relative; top:0; height:180px; min-height:180px; } }
html { scroll-padding-top:120px; }
.announcement { padding:11px 20px; font-size:11px; line-height:1.5; }
header { position:sticky; top:0; z-index:5; background:#fffef9f5; border-bottom:1px solid var(--line); backdrop-filter:blur(12px); height:100px; }
nav a { font-size:13px; padding-block:14px; }
.bag-btn { min-height:44px; font-size:13px; }
.hero { padding-block:64px 76px; gap:50px; }
.hero h1 { font-size:clamp(60px,6.8vw,96px); line-height:1.02; letter-spacing:-3px; }
.hero-copy>p { font-size:16px; line-height:1.8; max-width:400px; }
.eyebrow { font-size:10px; line-height:1.7; }
.hero-note { font-size:12px; line-height:1.6; max-width:360px; }
.hero-art { border-radius:48% 48% 20px 20px; background:radial-gradient(ellipse at 40% 25%,#f4f8eb,#deecdf 72%); }
.button { min-height:48px; padding:15px 23px; font-size:13px; border-radius:7px; gap:22px; }
.section { padding-block:76px; }
.section-top h2 { font-size:clamp(32px,3.7vw,48px); line-height:1.16; margin-top:12px; }
.section-top p, .story p, .caption-showcase>div>p { font-size:15px; line-height:1.8; }
.values { font-size:11px; line-height:1.7; }
.filters { gap:9px; flex-wrap:wrap; }
.filters button { min-height:44px; font-size:13px; padding:10px 18px; border-radius:24px; }
.products { gap:28px; }
.product-card { min-width:0; }
.product-image { border-radius:14px; height:350px; border:1px solid #d7e5da; }
.badge { font-size:10px; letter-spacing:1px; }
.image-cta { font-size:12px; padding:9px 0; }
.product-info h3 { font-size:17px; line-height:1.4; }
.product-info>span { font-size:16px; font-weight:600; white-space:nowrap; }
.product-card>p { font-size:14px; color:var(--muted); line-height:1.6; }
.swatches { min-height:24px; }
.swatches span { font-size:11px; color:var(--muted); }
.demo-note { font-size:12px; line-height:1.7; color:var(--muted); background:#f0f5ed; border:1px solid var(--line); padding:14px 20px; border-radius:8px; }
.steps p { font-size:14px; line-height:1.7; }
.steps h3 { font-size:17px; }
.text-link { font-size:14px; min-height:44px; padding-top:12px; }
.caption-card>label, .caption-card>p.helper { font-size:12px; }
footer p, footer>span { font-size:12px; line-height:1.7; }
@media(max-width:1050px) { .hero { gap:24px; } .products { gap:18px; } .product-image { height:310px; } }
@media(min-width:721px) and (max-width:960px) {
  .products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-image { height:340px; }
  .hero h1 { font-size:58px; }
  .hero-art { min-width:0; }
  .section-top { gap:24px; }
  .section-top p { max-width:180px; }
}
@media(max-width:720px) {
  .faq { grid-template-columns:1fr; gap:16px; }
  dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding:16px; }
  .dialog-header { position:sticky; top:-16px; background:var(--paper); z-index:3; margin:-16px -16px 12px; padding:16px; border-bottom:1px solid var(--line); align-items:center; }
  .dialog-header h2 { font-size:24px; margin-top:3px; }
  .editor { grid-template-columns:minmax(0,1fr); gap:16px; }
  .preview-area { position:sticky; top:80px; min-height:210px; height:210px; z-index:2; box-shadow:0 6px 12px #183d320b; }
  .preview-area .mug { transform:rotate(-8deg) scale(.60); margin-top:-12px; }
  .preview-area .tumbler { transform:scale(.57); margin-top:-8px; }
  .preview-area .sticker { transform:rotate(-7deg) scale(.64); }
  .preview-label { font-size:8px; bottom:9px; }
  .preview-area:after { display:none; }
  .editor-controls { max-height:none; overflow:visible; padding:0; }
  .step-navigation { bottom:-16px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .editor-controls label { font-size:14px; }
  .caption-card-actions .small-btn { font-size:12px; }
  #cart { width:100%; }
  html { scroll-padding-top:116px; }
  header { height:auto; min-height:80px; padding:12px 5%; flex-wrap:wrap; gap:8px; }
  .brand .store-label { display:none; }
  .brand-logo { width:44px; height:44px; }
  .brand { font-size:15px; }
  .bag-btn { margin-left:auto; }
  nav { display:flex; width:100%; justify-content:space-between; order:3; gap:8px; border-top:1px solid var(--line); }
  nav a { font-size:12px; padding:10px 0 2px; min-height:34px; }
  .announcement { font-size:10px; padding:8px 16px; }
  .hero { padding:35px 6% 46px; gap:30px; }
  .hero h1 { font-size:clamp(56px,14vw,76px); letter-spacing:-2px; }
  .hero-copy>p { font-size:15px; }
  .hero .eyebrow { font-size:9px; }
  .hero-note { font-size:11px; }
  .hero-art { height:340px; max-width:370px; }
  .hero-mug { left:-10px; bottom:20px; transform:rotate(-8deg) scale(.75); }
  .hero-cup { right:9%; top:25px; transform:rotate(11deg) scale(.75); }
  .hero-sticker { right:-12px; bottom:-15px; transform:rotate(15deg) scale(.65); }
  .scribble { bottom:-14px; left:38%; }
  .pack-seal>img { width:70px; height:70px; }
  .art-caption { top:22px; left:20px; }
  .section { padding:48px 6%; }
  .eyebrow { font-size:9px; }
  .filters { gap:7px; }
  .filters button { padding:10px 13px; font-size:12px; }
  .products { gap:30px; }
  .product-image { height:330px; }
  .product-info h3 { font-size:17px; }
  .product-card>p { font-size:14px; }
  .caption-card-actions { flex-wrap:wrap; }
  footer { gap:20px; }
  footer>span { font-size:11px; }
}