:root { --ink:#171713; --paper:#f8f7f4; --line:#d5d4cf; --muted:#77756f; --mono:Consolas,"Liberation Mono","Courier New",monospace; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; -webkit-font-smoothing:antialiased; }
button,select,input { font:inherit; color:inherit; }
button,select { cursor:pointer; }
button:disabled { cursor:default; opacity:.4; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #a76c37; outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:0; left:20px; transform:translateY(-120%); z-index:30; padding:14px; background:white; }
.skip-link:focus { transform:none; }
.locked { overflow:hidden; }
.announcement { position:relative; height:32px; display:flex; justify-content:center; align-items:center; background:#e8e6e0; font-size:10px; letter-spacing:.12em; }
.announcement-index { position:absolute; right:5%; font:9px var(--mono); letter-spacing:.08em; }
.site-header { height:108px; padding:0 5%; display:grid; grid-template-columns:210px 1fr auto; gap:20px; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:29px; font-weight:800; letter-spacing:-.055em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; background:var(--ink); color:white; border-radius:50%; font:700 14px var(--mono); }
.site-header nav { display:flex; align-items:center; gap:32px; font-size:12px; letter-spacing:.04em; }
.site-header nav a { padding:10px 0; }
.site-header nav .active::before { content:"> "; }
.header-actions { display:flex; align-items:center; gap:17px; }
.header-actions select,.success-header select { appearance:auto; border:0; background:none; padding:8px 0; font-size:11px; }
#currency { font-family:var(--mono); }
.cart-button { display:flex; align-items:center; gap:5px; background:none; border:0; padding:7px 0 7px 7px; }
.cart-button span { font:11px var(--mono); min-width:12px; }
main { padding:0 5% 90px; }
.collection-head { height:126px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--ink); }
.path { margin:0; font:11px var(--mono); letter-spacing:.09em; font-weight:400; }
.collection-tools { display:flex; align-items:center; gap:20px; }
.collection-count { font-size:10px; color:var(--muted); letter-spacing:.05em; white-space:nowrap; }
.collection-tools select { border:1px solid #c8c6bf; background:transparent; font-size:11px; padding:9px 10px; max-width:190px; }
.collection-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:35px; padding-top:30px; min-height:510px; align-content:start; }
.categories { display:flex; flex-direction:column; align-items:flex-start; gap:18px; height:max-content; position:sticky; top:25px; padding-top:8px; }
.categories button { background:none; border:0; padding:0; text-align:left; color:var(--muted); font-size:20px; letter-spacing:-.04em; line-height:1.3; }
.categories button.selected { color:var(--ink); font-weight:600; }
.categories button.selected::before { content:"›"; position:absolute; margin-left:-18px; }
.sidebar-note { display:flex; flex-direction:column; gap:17px; margin-top:65px; color:var(--muted); font:9px var(--mono); letter-spacing:.06em; }
.sidebar-line { width:28px; height:1px; background:var(--ink); }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 18px; align-content:start; }
.product-card { min-width:0; }
.product-card-link { display:block; }
.card-image { position:relative; aspect-ratio:1/1.13; background:white; overflow:hidden; }
.card-image > img { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; transition:opacity .22s,transform .4s; }
.card-alternate { opacity:0; }
@media(hover:hover) { .product-card-link:hover .card-alternate { opacity:1; } .product-card-link:hover .card-image > img { transform:scale(1.035); } }
.card-arrow { position:absolute; bottom:13px; right:13px; width:28px; height:28px; display:grid; place-items:center; background:#f8f7f4d9; border:1px solid var(--line); font-size:19px; }
.card-info { display:flex; justify-content:space-between; gap:9px; align-items:baseline; padding-top:14px; }
.card-info h2 { font-size:14px; line-height:1.5; margin:0; font-weight:500; }
.card-price { margin:0; font:11px var(--mono); white-space:nowrap; }
.card-meta { margin:7px 0 0; font-size:10px; line-height:1.6; color:var(--muted); }
.open-art { background:#e8e5dc; width:100%; height:100%; padding:24px; min-height:350px; display:flex; flex-direction:column; justify-content:space-between; }
.open-art > span:first-child,.open-art-bottom { font:9px var(--mono); letter-spacing:.06em; }
.open-art strong { font-size:clamp(45px,5.5vw,80px); font-weight:500; letter-spacing:-.065em; line-height:1.04; padding:25px 0; }
.open-art-bottom { display:flex; align-items:center; justify-content:space-between; }
.open-art-bottom > span { font:46px Arial,sans-serif; line-height:1; }
.card-image .open-art { position:absolute; inset:0; min-height:0; padding:18px; }
.card-image .open-art strong { font-size:clamp(26px,3.1vw,47px); }
.card-image .open-art > span:first-child { font-size:7px; }
.card-image .open-art-bottom > span { visibility:hidden; }
.detail-breadcrumb { display:flex; gap:13px; align-items:center; padding:39px 0 30px; font-size:11px; color:var(--muted); }
.detail-breadcrumb a { color:var(--ink); }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr); gap:clamp(45px,7vw,110px); max-width:1180px; margin:0 auto; }
.product-gallery { min-width:0; }
.photo-stage { aspect-ratio:1/1.05; position:relative; background:white; overflow:hidden; }
.photo-stage > img { width:100%; height:100%; object-fit:contain; display:block; }
.photo-brand,.image-size { position:absolute; top:17px; font:9px var(--mono); letter-spacing:.07em; z-index:1; }
.photo-brand { left:17px; color:var(--muted); }
.image-size { top:13px; right:17px; border:1px solid var(--line); background:#ffffffdd; padding:4px 6px; }
.thumbnail-list { display:flex; align-items:center; gap:10px; padding-top:12px; }
.thumbnail { display:flex; flex-direction:column; align-items:center; width:64px; padding:4px 4px 6px; background:white; border:1px solid var(--line); color:var(--muted); }
.thumbnail img { width:45px; height:48px; object-fit:contain; }
.thumbnail span { font:9px var(--mono); margin-top:4px; }
.thumbnail.selected { border-color:var(--ink); color:var(--ink); }
.photo-caption { font-size:10px; color:var(--muted); line-height:1.6; margin-left:5px; }
.product-details { padding-top:12px; min-width:0; }
.product-kicker { display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:.06em; }
.product-kicker > span:last-child { font-family:var(--mono); color:var(--muted); white-space:nowrap; }
.product-details h1 { font-size:clamp(38px,4.5vw,68px); font-weight:500; line-height:1.13; letter-spacing:-.055em; margin:29px 0 22px; }
.product-price { font:21px var(--mono); letter-spacing:-.04em; margin:0; }
.product-description { font-size:13px; line-height:1.95; color:var(--muted); max-width:350px; margin:30px 0 24px; }
.formula-note { padding:12px 0; font-size:13px; border-block:1px solid var(--line); margin:0 0 27px; }
.option-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:11px; }
.option-label > span:last-child { font:11px var(--mono); color:var(--muted); }
.variant-options { display:flex; gap:9px; }
.variant-options button { font:12px var(--mono); padding:13px 18px; min-width:90px; border:1px solid #c6c4be; background:transparent; }
.variant-options button.selected { border-color:var(--ink); background:var(--ink); color:white; }
.purchase-label { font-size:11px; margin:25px 0 10px; }
.product-purchase { display:flex; gap:10px; }
.product-quantity { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); width:95px; flex-shrink:0; }
.product-quantity button { border:0; background:none; width:30px; height:49px; font-size:16px; }
.product-quantity output { font:12px var(--mono); }
.add-to-cart { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:var(--ink); border:1px solid var(--ink); color:white; min-height:51px; flex:1; font-size:12px; letter-spacing:.03em; }
.add-to-cart:hover,.checkout-button:hover { background:#35332e; }
.add-to-cart > span:last-child { font-size:20px; }
.product-sku { font:9px var(--mono); color:#8e8c84; letter-spacing:.06em; margin:15px 0 29px; }
.product-description-details { border-block:1px solid var(--line); padding:17px 0; }
.product-description-details summary { font-size:12px; display:flex; justify-content:space-between; cursor:pointer; list-style:none; }
.product-description-details summary::-webkit-details-marker { display:none; }
.product-description-details summary::after { content:"+"; }
.product-description-details[open] summary::after { content:"−"; }
.product-description-details p { font-size:12px; color:var(--muted); line-height:1.9; margin:15px 0 0; }
.back-to-shop { display:inline-block; font-size:11px; color:var(--muted); margin-top:28px; }
#custom-form { margin-top:32px; }
#custom-form label { display:block; font-size:11px; margin-bottom:10px; }
.custom-amount-field { display:flex; align-items:center; border:1px solid #c6c4be; }
.custom-amount-field > span { font:12px var(--mono); padding:0 14px; }
.custom-amount-field input { width:100%; min-width:0; padding:15px 10px; background:transparent; border:0; font:21px var(--mono); }
.custom-amount-field input::placeholder { font:13px Arial,sans-serif; color:#88857b; }
.custom-note { font-size:11px; color:var(--muted); line-height:1.8; margin:13px 0 22px; }
.custom-error { font-size:12px; color:#a43221; line-height:1.6; }
.custom-error:empty { display:none; }
footer { padding:44px 5% 22px; min-height:255px; background:var(--ink); color:white; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.footer-wordmark { font-size:67px; font-weight:600; letter-spacing:-.065em; line-height:1; }
.footer-statement { text-align:right; align-self:center; margin:0; font-size:21px; white-space:pre-line; line-height:1.55; color:#dbd8d0; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #494843; padding-top:21px; font-size:9px; color:#b6b3ab; }
.footer-bottom > span:first-child { font-family:var(--mono); }
.backdrop { position:fixed; inset:0; background:#0006; z-index:10; }
.cart-drawer { width:min(480px,100%); position:fixed; z-index:11; inset:0 0 0 auto; background:var(--paper); transform:translateX(102%); transition:transform .25s; display:flex; flex-direction:column; overflow-y:auto; }
.cart-drawer.open { transform:none; }
.drawer-head { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); padding:0 25px; font-size:13px; }
.drawer-head button { border:0; background:none; font-size:28px; }
#drawer-count { font-family:var(--mono); color:var(--muted); }
.cart-line { display:grid; grid-template-columns:75px 1fr auto; gap:17px; padding:18px 25px; border-bottom:1px solid var(--line); }
.cart-photo,.cart-custom-art { width:75px; height:94px; background:white; object-fit:contain; }
.cart-custom-art { display:grid; place-items:center; background:#e8e5dc; font:44px Arial,sans-serif; }
.cart-line-info { display:flex; flex-direction:column; gap:7px; font-size:14px; }
.cart-line-info span { font:11px var(--mono); }
.cart-volume { color:var(--muted); }
.cart-product-name { font-size:14px; }
.quantity { display:flex; align-items:center; border:1px solid var(--line); width:max-content; margin-top:3px; }
.quantity button { width:27px; height:26px; border:0; background:none; }
.quantity span { width:24px; text-align:center; }
.remove { border:0; background:none; align-self:start; font-size:20px; }
.cart-empty { margin:auto; text-align:center; padding:30px; font-size:15px; }
.cart-empty button,.outline-link { display:inline-block; margin-top:15px; padding:13px 18px; border:1px solid var(--ink); background:transparent; font-size:11px; }
.cart-summary { margin-top:auto; border-top:1px solid var(--ink); padding:22px 25px; }
.summary-row { display:flex; justify-content:space-between; gap:15px; align-items:baseline; font-size:12px; margin-bottom:12px; }
.summary-row strong { font:14px var(--mono); }
.grand-total { border-top:1px solid var(--line); padding-top:15px; margin-top:15px; }
.grand-total strong { font-size:18px; }
#shipping-section { margin:19px 0; }
#shipping-section label { display:block; font-size:11px; margin-bottom:8px; }
#shipping-country { width:100%; padding:10px; border:1px solid var(--line); background:transparent; font-size:12px; }
.shipping-rules,.fx-attribution { font-size:10px; color:var(--muted); line-height:1.7; margin:9px 0; }
.fx-attribution a { text-decoration:underline; text-underline-offset:2px; }
#shipping-message { font-size:11px; color:var(--muted); line-height:1.6; }
#shipping-message:empty { display:none; }
.text-button { background:none; border:0; padding:0; font-size:11px; text-decoration:underline; }
.checkout-button { width:100%; padding:17px; border:0; background:var(--ink); color:white; font-size:12px; margin-top:10px; }
.checkout-error { color:#a43221; font-size:11px; line-height:1.7; }
.checkout-error:empty { display:none; }
.toast { position:fixed; z-index:20; left:50%; bottom:28px; transform:translate(-50%,20px); padding:12px 18px; background:#ece8de; border:1px solid var(--line); font-size:11px; opacity:0; pointer-events:none; transition:.2s; max-width:90%; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.load-error { padding:20px; border:1px solid #a43221; color:#a43221; font-size:13px; }
.not-found { padding:80px 0; }
.success-page { min-height:100vh; display:grid; place-items:center; padding:30px; }
.success-card { width:min(760px,100%); border:1px solid var(--ink); padding:48px; }
.success-header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.success-card h1 { font-size:clamp(32px,5vw,56px); letter-spacing:-.04em; line-height:1.4; margin-top:48px; }
.success-card .path { margin-top:32px; }
.order-details { margin:35px 0; padding:20px 0; border-block:1px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:12px; }
.order-details strong { text-align:right; }
@media(max-width:1100px) { .collection-layout { grid-template-columns:155px minmax(0,1fr); gap:25px; } .categories button { font-size:18px; } .card-info { display:block; } .card-price { margin-top:6px; } .site-header { grid-template-columns:180px 1fr auto; } .detail-layout { gap:45px; } }
@media(max-width:800px) { .site-header { grid-template-columns:1fr auto; height:93px; } .site-header nav { display:none; } .collection-head { height:105px; } .collection-layout { grid-template-columns:1fr; gap:24px; } .categories { position:static; flex-direction:row; gap:22px; overflow-x:auto; padding:2px 0 10px; white-space:nowrap; } .categories button { font-size:14px; } .categories button.selected::before,.sidebar-note { display:none; } .detail-layout { gap:30px; grid-template-columns:minmax(0,1fr) minmax(265px,.9fr); } .product-details h1 { font-size:40px; } .product-description { margin-top:22px; } }
@media(max-width:600px) { .announcement { justify-content:flex-start; padding-left:20px; font-size:9px; } .announcement-index { right:20px; font-size:7px; } .site-header { padding-inline:20px; height:83px; gap:10px; } .brand { font-size:23px; gap:7px; } .brand-mark { width:25px; height:25px; font-size:12px; } .header-actions { gap:10px; } .header-actions select { font-size:10px; } .cart-button { padding-left:0; } .cart-button svg { width:17px; } .cart-button span { font-size:10px; min-width:8px; } main { padding:0 20px 55px; } .collection-head { height:91px; padding-bottom:16px; gap:10px; } .path { font-size:9px; } .collection-tools { gap:10px; } .collection-tools select { max-width:125px; padding:8px 5px; font-size:9px; } .collection-count { display:none; } .collection-layout { padding-top:22px; gap:17px; min-height:0; } .categories { gap:18px; } .categories button { font-size:12px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 12px; } .card-image { aspect-ratio:1/1.14; } .card-info { padding-top:11px; } .card-info h2 { font-size:13px; } .card-price { font-size:11px; } .card-meta { font-size:9px; } .card-arrow { bottom:9px; right:9px; width:24px; height:24px; font-size:17px; } .card-image .open-art { padding:13px; } .card-image .open-art strong { font-size:clamp(24px,6vw,34px); } .card-image .open-art > span:first-child { font-size:6px; line-height:1.5; } .open-art-bottom { font-size:7px; } .detail-breadcrumb { padding:24px 0; font-size:10px; } .detail-layout { display:block; } .photo-stage { aspect-ratio:1/1; } .product-details { padding-top:35px; } .product-details h1 { font-size:43px; margin-top:23px; } .product-price { font-size:22px; } .product-description { max-width:100%; } .formula-note { font-size:12px; } .product-kicker { font-size:9px; } .open-art { min-height:340px; } .open-art strong { font-size:64px; } footer { grid-template-columns:1fr; padding:33px 20px 20px; gap:25px; } .footer-wordmark { font-size:53px; } .footer-statement { text-align:left; font-size:17px; } .footer-bottom { flex-wrap:wrap; font-size:8px; gap:15px; } .success-card { padding:25px; } }
@media(max-width:360px) { .brand-mark { display:none; } .header-actions { gap:8px; } }
@media(max-width:800px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-layout { min-height:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }