.commerce-page { background:#f7f6f6; }
.commerce-main { max-width:1600px; min-height:65vh; margin:0 auto; padding:72px 5vw 100px; }
.commerce-kicker { margin:0 0 20px; color:#8a7d6b; font:400 10px "Hero Text",Arial,sans-serif; letter-spacing:.07em; }
.commerce-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:52px; }
.commerce-heading h1 { margin:0; font-size:clamp(52px,7.1vw,110px); line-height:.91; letter-spacing:-.065em; }
.commerce-heading p { max-width:320px; margin:0; color:#817462; font:400 13px/1.8 "Hero Text",Arial,sans-serif; }
.commerce-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(285px,1fr); align-items:start; gap:6vw; }
.commerce-summary { position:sticky; top:105px; padding:28px; border:1px solid #d6cec1; background:#f0ece5; }
.commerce-summary h2 { margin:0 0 23px; font-size:24px; letter-spacing:-.04em; }
.commerce-summary p,.commerce-copy p,.commerce-copy li { color:#817462; font:400 13px/1.8 "Hero Text",Arial,sans-serif; }
.commerce-primary,.commerce-secondary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:54px; padding:15px 18px; border:1px solid #161513; background:#161513; color:#f7f6f6; text-decoration:none; font:700 12px "Hero Sans",Arial,sans-serif; cursor:pointer; transition:background .25s,transform .2s; }
.commerce-primary>span:last-child { font-size:22px; }
.commerce-secondary { border-color:#c9bdac; background:transparent; color:#161513; }
.commerce-primary:disabled { opacity:.4; cursor:wait; }
.commerce-primary:active,.commerce-secondary:active { transform:scale(.987); }
.commerce-summary>.commerce-primary,.commerce-summary>.commerce-secondary { margin-top:18px; }
.commerce-item { display:grid; grid-template-columns:135px minmax(0,1fr) auto; align-items:center; gap:22px; padding:24px 0; border-top:1px solid #d8d0c4; }
.commerce-item-image { display:block; width:100%; aspect-ratio:1; background:#ece7df; }
.commerce-item-image img { display:block; width:100%; height:100%; object-fit:contain; }
.commerce-item-name { font-size:19px; letter-spacing:-.025em; }
.commerce-item-copy>p { margin:8px 0 16px; color:#817462; font:400 11px/1.5 "Hero Text",Arial,sans-serif; }
.item-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.commerce-stepper { display:flex; align-items:center; border:1px solid #c9bdac; }
.commerce-stepper button { width:38px; min-height:40px; padding:0; border:0; background:transparent; }
.commerce-stepper output { min-width:28px; text-align:center; font-size:12px; }
.text-action { min-height:40px; padding:0; border:0; background:transparent; font:400 10px "Hero Text",Arial,sans-serif; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.item-price { color:#817462; font-size:9px; text-align:right; }
.item-quantity { color:#817462; font-size:10px; }
.commerce-totals { margin:22px 0; font:400 12px "Hero Text",Arial,sans-serif; }
.commerce-totals>div { display:flex; justify-content:space-between; gap:20px; margin:14px 0; }
.commerce-totals dd { margin:0; }
.commerce-totals .total { margin-top:24px; padding-top:22px; border-top:1px solid #cfc2b1; font-weight:700; font-size:17px; color:#151412; }
.preview-notice { display:flex; align-items:start; justify-content:space-between; gap:24px; padding:17px 20px; margin-bottom:32px; border:1px solid #cfc2b1; color:#786448; background:#ede5d8; font:400 11px/1.6 "Hero Text",Arial,sans-serif; }
.preview-notice strong { white-space:nowrap; font-weight:700; }
.commerce-status { padding:15px 18px; margin:20px 0; background:#ebe5da; color:#6b5940; font:400 12px/1.7 "Hero Text",Arial,sans-serif; }
.commerce-status.is-error { border-left:2px solid #9a3c29; color:#8b3424; }
.commerce-status:empty { display:none; }
.commerce-form label,.commerce-label { display:block; margin-bottom:10px; font-size:10px; letter-spacing:.03em; }
.commerce-form label>span { color:#978975; font-size:9px; font-weight:400; }
.commerce-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.commerce-form select,.commerce-form textarea { display:block; width:100%; min-width:0; min-height:52px; padding:14px; border:1px solid #d1c7b8; border-radius:0; background:transparent; color:#161513; font:400 14px "Hero Text",Arial,sans-serif; outline:none; }
.commerce-form input:focus,.commerce-form select:focus,.commerce-form textarea:focus { border-color:#151412 !important; box-shadow:0 0 0 1px #151412; }
.commerce-form [aria-invalid=true] { border-color:#9a3c29 !important; }
.commerce-field { min-width:0; margin-bottom:23px; }
.commerce-form textarea { min-height:140px; resize:vertical; line-height:1.7; }
.commerce-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.commerce-field.full { grid-column:1/-1; }
.commerce-error { margin:7px 0 0; color:#9a3c29; font:400 11px/1.5 "Hero Text",Arial,sans-serif; }
.commerce-error:empty { display:none; }
.commerce-check { display:flex !important; align-items:start; gap:10px; font:400 12px/1.7 "Hero Text",Arial,sans-serif; cursor:pointer; }
.commerce-check input { width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:#161513; }
.checkout-steps { display:flex; margin:0 0 34px; padding:0; list-style:none; }
.checkout-steps li { flex:1; min-width:0; padding:0 8px 14px 0; border-bottom:1px solid #d3c9ba; color:#9b8d7a; font-size:10px; }
.checkout-steps li[aria-current],.checkout-steps li.is-complete { border-color:#161513; color:#161513; }
.checkout-panel { padding:0; margin:0; border:0; min-width:0; }
.checkout-panel legend,.checkout-panel h2 { margin:0 0 28px; font-size:29px; letter-spacing:-.035em; }
.checkout-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:28px; }
.checkout-actions .commerce-primary { min-width:220px; }
.payment-option { display:flex !important; align-items:center; gap:16px; padding:22px 18px; border:1px solid #cfc2b1; margin:0 0 14px !important; cursor:pointer; }
.payment-option input { width:18px; height:18px; accent-color:#151412; }
.payment-option strong,.payment-option small { display:block; }
.payment-option small { margin-top:7px; color:#877760; font:400 11px/1.6 "Hero Text",Arial,sans-serif; }
.provider-placeholder { padding:24px; margin-top:20px; border:1px dashed #bcab92; color:#877760; font:400 12px/1.8 "Hero Text",Arial,sans-serif; }
.review-block { padding:22px 0; border-top:1px solid #d8cdbd; }
.review-block h3 { font-size:11px; margin:0 0 12px; }
.review-block p { margin:4px 0; color:#7e705c; font:400 13px/1.7 "Hero Text",Arial,sans-serif; overflow-wrap:anywhere; }
.promo-form { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.promo-form .commerce-field { flex:1; min-width:110px; margin:0; }
.promo-form button { align-self:end; min-height:52px; border:1px solid #c6b69f; padding:12px; background:transparent; font-size:10px; }
.promo-form .commerce-error { width:100%; }
.summary-items .commerce-item { grid-template-columns:65px minmax(0,1fr) auto; gap:13px; padding:15px 0; }
.summary-items .commerce-item-name { font-size:12px; }
.summary-items .commerce-item-copy>p { font-size:10px; margin:5px 0 7px; }
.summary-items .item-price { font-size:10px; }
.empty-state { max-width:500px; margin:30px auto; padding:45px 20px; text-align:center; }
.empty-orbit { display:block; width:70px; height:90px; margin:0 auto 25px; border:1px solid #b8a88f; border-radius:50%; transform:rotate(22deg); }
.empty-state h2 { margin:0 0 16px; font-size:36px; letter-spacing:-.045em; }
.empty-state p { color:#8c7d68; font:400 13px/1.8 "Hero Text",Arial,sans-serif; }
.empty-state .commerce-primary { max-width:310px; margin:28px auto 0; text-align:left; }
.saved-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.saved-card { position:relative; min-width:0; }
.saved-card>a:first-child { display:block; aspect-ratio:1; background:var(--tile,#ece5d9); }
.saved-card img { width:100%; height:100%; object-fit:contain; }
.saved-card h2 { margin:17px 0 8px; font-size:20px; letter-spacing:-.025em; }
.saved-card p { color:#8c7d68; font:400 12px/1.6 "Hero Text",Arial,sans-serif; }
.saved-actions { display:flex; align-items:center; gap:18px; }
.saved-actions .commerce-secondary { flex:1; font-size:11px; }
.save-toggle { display:grid; place-items:center; position:absolute; z-index:4; left:14px; bottom:14px; width:42px; height:42px; padding:11px; border:1px solid #b9ad9c88; border-radius:50%; background:#f7f6f6db; color:#161513; cursor:pointer; }
.save-toggle svg,.saved-nav svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; }
.save-toggle[aria-pressed=true] svg { fill:currentColor; }
.shop-piece { position:relative; }
.shop-piece>.save-toggle { top:53px; left:12px; bottom:auto; }
.pdp-actions { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; }
.pdp-actions .save-toggle { position:static; display:inline-flex; gap:9px; width:auto; border:0; border-radius:0; padding:0; background:transparent; font-size:10px; }
.pdp-actions .text-action { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.pdp-actions a { min-height:44px; display:inline-flex; align-items:center; font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.saved-nav { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:40px; min-height:44px; }
.saved-nav span { font-size:9px; }
.commerce-feedback { position:fixed; z-index:2000; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 36px); padding:15px 24px; transform:translateX(-50%); background:#151412; color:#f7f6f6; box-shadow:0 10px 28px #0002; font:400 12px/1.7 "Hero Text",Arial,sans-serif; }
.connection-notice { position:fixed; z-index:2100; top:0; left:0; right:0; padding:12px 20px; background:#d8c7a9; color:#30291e; text-align:center; font:400 12px/1.5 "Hero Text",Arial,sans-serif; }
.intro-pending .connection-notice { display:none; }
.missing-photo { position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; background:#e8e1d6; color:#85715a; font:400 11px "Hero Text",Arial,sans-serif; }
.missing-photo button { min-height:44px; padding:10px 18px; background:transparent; border:1px solid #a89983; }
.order-card { padding:25px 0; border-top:1px solid #d4c8b8; }
.order-card-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.order-card h2 { margin:0; font-size:23px; letter-spacing:-.035em; }
.status-pill { display:inline-flex; padding:7px 10px; border:1px solid #c4b396; color:#7c6542; font:400 10px "Hero Text",Arial,sans-serif; }
.order-card p { color:#8c7d68; font:400 12px/1.7 "Hero Text",Arial,sans-serif; }
.order-card-actions { display:flex; flex-wrap:wrap; gap:20px; }
.order-card-actions a { padding:10px 0; font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.order-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.order-filter button { min-height:42px; padding:10px 17px; border:1px solid #cfc2ae; background:transparent; font-size:10px; }
.order-filter button[aria-pressed=true] { color:#f7f6f6; background:#161513; border-color:#161513; }
.order-timeline { margin:30px 0; padding:0; list-style:none; }
.order-timeline li { position:relative; margin-left:5px; padding:0 0 27px 26px; border-left:1px solid #d6cbb9; color:#a39682; font:400 12px "Hero Text",Arial,sans-serif; }
.order-timeline li::before { content:""; position:absolute; top:0; left:-5px; width:9px; height:9px; border:1px solid #b5a17f; border-radius:50%; background:#f7f6f6; }
.order-timeline li.is-complete { color:#161513; }
.order-timeline li.is-complete::before { background:#161513; border-color:#161513; }
.order-timeline p { margin:9px 0 0; color:#95846b; font-size:11px; line-height:1.7; }
.help-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:60px; }
.help-tile { display:flex; flex-direction:column; justify-content:space-between; min-height:160px; padding:24px; border:1px solid #d2c6b4; }
.help-tile>span { color:#9c896e; font-size:10px; }
.help-tile h2 { margin:28px 0 0; font-size:23px; letter-spacing:-.035em; }
.commerce-copy { max-width:740px; }
.commerce-copy h2 { margin:35px 0 15px; font-size:30px; letter-spacing:-.04em; }
.commerce-copy h3 { margin:24px 0 12px; font-size:19px; }
.commerce-copy a { text-decoration:underline; text-underline-offset:4px; }
.commerce-copy ul { padding-left:20px; }
.commerce-copy li { margin:9px 0; }
.policy-layout { display:grid; grid-template-columns:240px minmax(0,740px); gap:8vw; }
.policy-nav { display:flex; flex-direction:column; align-items:start; gap:5px; }
.policy-nav a { display:block; padding:12px 0; font-size:12px; color:#8a775d; }
.policy-nav a[aria-current] { color:#151412; }
.file-upload { display:block; padding:24px; border:1px dashed #b8a17f; margin-bottom:22px; }
.file-upload input { max-width:100%; font-size:12px; }
.artwork-preview { display:block; max-width:100%; max-height:220px; margin-top:20px; object-fit:contain; }
.draft-row { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #d3c8b7; padding:18px 0; font:400 11px/1.7 "Hero Text",Arial,sans-serif; }
.draft-row p { margin:0; overflow-wrap:anywhere; }
.skeleton-line { height:14px; margin:18px 0; background:linear-gradient(100deg,#e0d7c9 20%,#f6f1e8 45%,#e0d7c9 70%); background-size:200% 100%; animation:skeleton-shift 1.2s linear infinite; }
@keyframes skeleton-shift { to { background-position:-200% 0; } }
.account-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; }
.account-links a { display:flex; justify-content:space-between; min-height:48px; padding:13px; border:1px solid #d2c7b7; font-size:11px; text-decoration:none; }
.interface-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.interface-card { padding:24px; border:1px solid #d2c7b7; min-width:0; }
.interface-card h2 { margin:0 0 17px; font-size:23px; }
.commerce-page [hidden],[hidden].commerce-feedback,[hidden].connection-notice { display:none !important; }
@media(hover:hover) and (pointer:fine) { .commerce-primary:hover { background:#3f3527; } .commerce-secondary:hover { background:#e7dfd2; } .save-toggle:hover { background:#fff; } }
@media(max-width:1000px) { .commerce-grid { grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr); gap:4vw; } .commerce-item { grid-template-columns:100px minmax(0,1fr); } .item-price { grid-column:2; text-align:left; } .commerce-summary { padding:22px; } .policy-layout { grid-template-columns:180px minmax(0,1fr); gap:5vw; } }
@media(max-width:760px) { .commerce-main { padding:40px 24px 65px; } .commerce-heading { display:block; margin-bottom:35px; } .commerce-heading h1 { font-size:clamp(48px,12.3vw,80px); } .commerce-heading p { margin-top:22px; font-size:12px; } .commerce-grid { grid-template-columns:1fr; gap:35px; } .commerce-summary { position:static; } .commerce-item { grid-template-columns:95px minmax(0,1fr); gap:18px; padding:20px 0; } .commerce-item-name { font-size:17px; } .item-actions { gap:8px 12px; } .preview-notice { flex-direction:column; gap:5px; padding:15px 17px; } .commerce-fields { gap:0 13px; } .commerce-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.commerce-form select,.commerce-form textarea { font-size:16px; } .checkout-actions .commerce-primary { min-width:200px; } .saved-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:27px 16px; } .saved-card h2 { font-size:17px; } .saved-actions { flex-wrap:wrap; gap:6px; } .saved-actions .commerce-secondary { width:100%; flex:auto; padding:12px; } .help-grid { grid-template-columns:1fr; gap:12px; margin-bottom:38px; } .help-tile { min-height:110px; } .help-tile h2 { margin-top:15px; } .policy-layout { grid-template-columns:1fr; gap:25px; } .policy-nav { flex-direction:row; flex-wrap:wrap; gap:0 20px; border-bottom:1px solid #d5c7b2; padding-bottom:15px; } .interface-grid { grid-template-columns:1fr; } .pdp-actions { gap:12px 18px; } .header-actions .saved-nav { min-width:32px; } .account-links { grid-template-columns:1fr 1fr; } }
@media(max-width:360px) { .commerce-main { padding-inline:18px; } .commerce-fields { grid-template-columns:1fr; } .checkout-actions { flex-wrap:wrap; } .checkout-actions .commerce-primary { width:100%; } .commerce-summary { padding:19px; } .item-actions { gap:5px 9px; } .commerce-stepper button { width:33px; } .saved-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .skeleton-line { animation:none; } .commerce-primary,.commerce-secondary { transition:none; } }
.commerce-clear-dialog { width:min(440px,calc(100vw - 36px)); max-height:calc(100svh - 36px); padding:30px; border:1px solid #c9bda9; background:#f7f6f6; color:#151412; }
.commerce-clear-dialog::backdrop { background:#0007; backdrop-filter:blur(5px); }
.commerce-clear-dialog h2 { font-size:32px; letter-spacing:-.04em; margin:0 0 20px; }
.commerce-clear-dialog p { font:400 13px/1.8 "Hero Text",Arial,sans-serif; color:#8c7a61; }
.commerce-clear-dialog .clear-actions { display:flex; gap:12px; margin-top:25px; }
.commerce-clear-dialog button { min-height:46px; padding:12px 16px; border:1px solid #c4b396; background:transparent; color:#151412; font-size:11px; cursor:pointer; }
.commerce-clear-dialog [data-confirm-yes] { background:#151412; color:#f7f6f6; border-color:#151412; }
.store-footer .footer-top { grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; }
.drawer-primary[href] { display:flex; align-items:center; justify-content:space-between; text-decoration:none; }
@media(max-width:760px) { .store-footer .footer-top { grid-template-columns:1fr 1fr; gap:28px 20px; } .store-footer .footer-statement { grid-column:1/-1; } }
@media print { .store-nav,.store-footer,.connection-notice,.commerce-feedback,.commerce-primary,.commerce-secondary,.save-toggle { display:none !important; } .commerce-grid { display:block; } .commerce-summary { position:static; break-inside:avoid; margin-top:30px; } }
.catalog-launch-label { margin:10px 0 0; color:#8b7d69; font:400 10px "Hero Text",Arial,sans-serif; }
.shop-piece-info .catalog-launch-label { grid-column:1/-1; margin:0; font-size:9px; }
.pdp-commerce-info { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; margin:22px 0; }
.pdp-commerce-info [data-commerce-price] { font-size:18px; letter-spacing:-.025em; }
.pdp-commerce-info [data-commerce-stock] { color:#8c785d; font:400 9px "Hero Text",Arial,sans-serif; }
.continue-button[href] { display:flex; align-items:center; justify-content:space-between; text-decoration:none; }
@media(max-width:1000px) { .store-footer .footer-top { grid-template-columns:1fr 1fr; } .store-footer .footer-statement { grid-column:1/-1; } }
.commerce-item-copy .set-line-contents { max-width:420px; font-size:10px; line-height:1.6; }