/* [claude-design] Design-upgrade overrides (Claude, 2026-09-21).
   Loaded last on every storefront page by sync_header.py. Each block is one
   proposal item; delete a block, or this file plus claude-design.js, to revert.
   Storefront tokens: ground #f6f3eb · ink #251f27 · line #dcd8d0 · lavender #d8c8e8 · accent #3f3dd6 */

/* ---- 03 Size chips: no inferred icon, state shown by shape (strike-through / inverted / small label) ---- */
.variant-options{gap:8px 8px;margin:14px 0 6px}
.variant.ui-button::before{display:none!important}
.variant.ui-button{min-width:48px;min-height:40px;padding:0 14px;border:1px solid #cfc9bd;border-radius:4px;background:#fff;color:#251f27;font-size:13px;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:0;transition:border-color .12s,background .12s}
.variant.ui-button small{display:none}
.variant.ui-button:disabled small{display:inline-block;margin:0 0 0 8px;font-size:11px;font-weight:500;color:#8b857b;text-decoration:none} /* [claude] show "Sold out" / "Unverified" on disabled options, not only grey them out */
.variant.ui-button:hover:not(:disabled){border-color:#251f27}
.variant.ui-button.chosen{background:#251f27;border:1px solid #251f27;color:#fff;padding:0 14px}
.variant.ui-button:disabled{background:#f3f1ec;border-color:#e6e2da;color:#b3ada4;text-decoration:line-through;text-decoration-thickness:1px;cursor:not-allowed}
.variant.ui-button:focus-visible{outline:2px solid #8e6daa;outline-offset:2px}
/* Selection summary line replaces the per-chip "Available" text */
#selectionInfo{margin-top:12px}

/* ---- 09 Japanese typography: one consistent family per script, no external fonts (site policy).
   Pretendard has no kana/kanji, so ja pages fell back per-glyph. Use the platform's Japanese sans for the
   whole page (its Latin is designed to match), keep headings at 600 max and drop negative tracking. ---- */
html[lang="ja"],html[lang="ja"] body,html[lang="ja"] body *,html[lang="ja"] body *::before,html[lang="ja"] body *::after{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",-apple-system,sans-serif!important}
html[lang="ja"] body{line-height:1.8}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .hero-slide h1,html[lang="ja"] .hero-slide h2{letter-spacing:0;font-weight:600}
html[lang="ja"] .eyebrow,html[lang="ja"] [class*="eyebrow"]{letter-spacing:.08em}
/* Spanish runs 20–30% longer than English: let buttons grow instead of clipping. */
html[lang="es"] .primary,html[lang="es"] .ui-button{min-width:0;white-space:normal}

/* ---- 01 Catalog cards: photo · brand · name · price. Whole card reads as one link; 4 columns from 1150px. ---- */
@media(min-width:1150px){.catalog .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}}
.grid .card{position:relative;border-radius:6px;transition:transform .15s ease}
.grid .card .photo{border-radius:6px;overflow:hidden}
.grid .card .photo img{transition:transform .35s ease}
.grid .card:hover .photo img{transform:scale(1.03)}
.grid .card .brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#251f27;margin:14px 0 3px}
.grid .card .product-name{font-size:13.5px;line-height:1.4;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#302635;text-decoration:none}
.grid .card .product-name:hover{text-decoration:underline;text-underline-offset:3px}
.grid .card .price{margin-top:6px;font-weight:700;font-size:14px}
/* Save (heart) button quiet until the card is hovered or focused */
.grid .card .save-product{opacity:.45;transition:opacity .15s}
.grid .card:hover .save-product,.grid .card:focus-within .save-product{opacity:1}
@media(hover:none){.grid .card .save-product{opacity:1}}

/* ---- 07 Cart summary: three cost lines, per-store detail indented, one CTA ---- */
.claude-summary h2{margin-bottom:18px}
.claude-summary>div{margin:12px 0;align-items:baseline}
.claude-summary .claude-group{margin:2px 0 2px 12px;font-size:11px;color:#6d6672}
.claude-summary .claude-group em,.claude-summary .claude-min{font-style:normal;background:#fff;border:1px solid #dcd8d0;padding:0 6px;border-radius:3px;font-size:10px;color:#847d89;margin-left:4px;white-space:nowrap}
.claude-summary .claude-needs{color:#b42318;font-weight:600}
.claude-summary .claude-blocked{background:#fff;border-left:3px solid #b42318;padding:8px 12px;font-size:12px;margin:14px 0}
.claude-summary .bag-total{margin-top:18px;padding-top:18px}
.claude-summary .bag-total strong{font-size:22px}

/* ---- 05 Mobile header: ☰ menu · wordmark · search · cart. Language/currency move into the drawer (claude-design.js). ---- */
@media(max-width:700px){
 .nav-ready header.mall-header .menu-toggle img{display:none!important}
 .nav-ready header.mall-header .menu-toggle::before{content:""!important;display:block!important;width:22px;height:16px;margin:0;background:linear-gradient(#251f27 0 2px,transparent 2px 7px,#251f27 7px 9px,transparent 9px 14px,#251f27 14px 16px);mask:none;-webkit-mask:none}
 .nav-ready header.mall-header .mall-utilities>a[href$="/shop"]{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;font-size:0;color:#251f27}
 .nav-ready header.mall-header .mall-utilities>a[href$="/shop"]::before{content:"";display:inline-block;margin:0;width:22px;height:22px;opacity:1;background:currentColor;--claude-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-2 5 6 6'/%3E%3C/svg%3E");mask:var(--claude-search) center/contain no-repeat;-webkit-mask:var(--claude-search) center/contain no-repeat}
 .nav-ready header.mall-header>.language-mobile{display:none!important}
 .mobile-drawer .currency-control{gap:8px 20px}
 .mobile-drawer .currency-control .language-picker{display:flex!important;margin:0}
 .mobile-drawer .currency-control .language-picker>span{display:none}
 .mobile-drawer .currency-control .language-picker select{border:1px solid #c8c3bc;border-radius:6px;padding:8px 24px 8px 10px;min-height:44px;font-size:13px;max-width:none}
 .mobile-drawer .drawer-department span{color:#8e739d}
}

/* ---- 02 Product page: price → options → buttons first; summary panel sticks while reading below ---- */
@media(min-width:801px){.product-summary{position:sticky;top:16px}}
.product-summary .product-category{display:none}
.product-summary .claude-cost-note{margin-top:6px;color:#6d6672}
.product-summary .support-product-link{font-size:12px}
.product-summary .product-introduction{margin:26px 0 0}
.product-summary .inventory{margin-top:18px}

/* ---- 06 Home: shorter page. Product edits scroll sideways below 1150px instead of stacking two rows;
   on phones the hero copy sits over the photo so products appear within the first two screens. ---- */
@media(max-width:1150px){
 .fashion-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .fashion-grid::-webkit-scrollbar{display:none}
 .fashion-grid>*{flex:0 0 clamp(150px,30vw,220px);scroll-snap-align:start}
 .fashion-grid .product-name{min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:700px){
 .fashion-grid>*{flex-basis:46vw}
 .campaign-slide{height:min(76vh,560px)}
 .campaign-image{position:absolute;inset:0;padding:0;height:100%;z-index:0;mask-image:none;-webkit-mask-image:none}
 .campaign-image img{height:100%;object-position:50% 20%}
 .campaign-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;flex:none;padding:70px 7% 66px;justify-content:flex-end;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--campaign-bg) 92%,#000 0%) 38%)}
 .campaign-copy h1,.campaign-copy h2{margin-bottom:8px}
 .campaign-subtitle{margin-bottom:12px}
 .campaign-loading,.campaign-error{min-height:min(76vh,560px)}
}

/* ---- Compact shared footer ---- */
.claude-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px;justify-content:start;text-align:left;padding:22px 4% 20px;border-top:1px solid #dcd8d0;font-size:12px;background:#f6f3eb;color:#251f27}
.claude-footer .claude-footer-col{display:flex;flex-wrap:wrap;gap:3px 14px;align-content:start;align-items:baseline}
.claude-footer .claude-footer-col b{flex-basis:100%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#746d78;margin-bottom:2px}
.claude-footer .claude-footer-col a,.claude-footer .claude-footer-col button{color:#302635;text-decoration:none;font:inherit;background:none;border:0;padding:2px 0;cursor:pointer;line-height:1.5}
.claude-footer .claude-footer-col a:hover,.claude-footer .claude-footer-col button:hover{text-decoration:underline;text-underline-offset:3px}
.claude-footer .claude-footer-col a::before,.claude-footer .claude-footer-col button::before{display:none!important}
.claude-footer .claude-footer-brand{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.claude-footer .official-logo{display:inline-flex;align-items:center;gap:8px;font-weight:750!important;letter-spacing:.05em}
.claude-footer .claude-footer-brand .footer-payment{display:inline-flex;align-items:center;background:#fff;padding:3px 9px;border:1px solid #e5e1da;border-radius:4px}
.claude-footer .footer-payment img{display:block;width:79px;height:28px;object-fit:contain}
.claude-footer .currency-control{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0;padding:0;font-size:11px}
.claude-footer .currency-control label{display:flex;align-items:center;gap:8px;margin:0}
.claude-footer .currency-control select{padding:4px 7px;min-height:30px;font:inherit}
.claude-footer .currency-control small{display:block;margin:0;font-size:10px;color:#746d78}
.claude-footer .claude-footer-biz{grid-column:1/-1;border-top:1px solid #dcd8d0;padding-top:10px;font-size:11px;line-height:1.5;color:#6d6672}
@media(max-width:700px){
 .claude-footer{grid-template-columns:1fr;gap:10px;padding:18px 5% max(18px,env(safe-area-inset-bottom))}
 .claude-footer .claude-footer-col:not(.claude-footer-brand){gap:2px 13px}
 .claude-footer .claude-footer-col b{margin:0}
 .claude-footer .currency-control{grid-row:auto;gap:4px 12px}
}

/* ---- 12 Brand hooks ---- */
.claude-brand-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.claude-brand-link:hover,.claude-brand-link:focus-visible{border-bottom-color:currentColor}
.bag-detail .eyebrow .claude-brand-link,.product-summary .eyebrow .claude-brand-link{letter-spacing:inherit}
.claude-more-from{max-width:1200px;margin:48px auto 8px;padding:0 20px;box-sizing:border-box}
.claude-more-from .section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.claude-more-from h2{font-size:20px;margin:0}.claude-more-from h2 a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.claude-more-all{font-size:13px;color:var(--muted,#72766f);text-decoration:none;white-space:nowrap}.claude-more-all:hover{color:var(--ink,#171917)}
.claude-more-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,180px);gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.claude-more-rail .theme-product{scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.claude-more-rail .theme-product-image{display:block;aspect-ratio:4/5;background:var(--surface,#f3f4f1);overflow:hidden;border-radius:4px}
.claude-more-rail .theme-product-image img{width:100%;height:100%;object-fit:cover;display:block}
.claude-more-rail h3{font-size:13px;font-weight:500;margin:10px 0 4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.claude-more-rail .product-price{font-size:13px;margin:0;color:var(--muted,#72766f)}
@media(max-width:700px){.claude-more-from{margin-top:32px;padding:0 16px}.claude-more-rail{grid-auto-columns:minmax(140px,150px);gap:12px}}

/* Merchant details stay readable without a separate tall label/value grid. */
.business-info h2{font-size:11px;font-weight:650;margin:0 0 6px;color:#49434e}
.business-info dl{display:flex;flex-wrap:wrap;gap:3px 20px;margin:0}
.business-info dl>div{min-width:0;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.business-info dt{font-weight:600;color:#625b68}
.business-info dd{margin:0;overflow-wrap:anywhere}
.business-info .business-address{flex-basis:100%}
.business-info a{font-size:inherit!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.business-info dl{gap:4px 14px}.business-info dl>div{display:block}.business-info dt,.business-info dd{display:inline}.business-info dt{margin-right:5px}.claude-footer .claude-footer-biz{font-size:11px}}