/* Product and cart presentation, sharing the storefront's brand tokens and header. */
.premium-commerce .page { width:min(1280px,calc(100% - 80px)); margin:0 auto; padding:24px 0 72px; }
.premium-commerce .breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 28px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.premium-commerce .back { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.premium-commerce h1 { margin:0; font:clamp(30px,3.5vw,46px)/1.16 Georgia,'Times New Roman',serif; overflow-wrap:anywhere; }
.premium-commerce .form-error { padding:16px 20px; margin:0 0 24px; background:var(--bg); border-left:3px solid var(--primary); color:var(--text); font-size:14px; }
.premium-commerce .product-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:start; }
.premium-commerce .media { position:sticky; top:116px; display:grid; place-items:center; background:var(--bg); aspect-ratio:1/1.08; overflow:hidden; }
.premium-commerce .media img { display:block; width:100%; height:100%; max-height:680px; object-fit:contain; }
.premium-commerce .placeholder { display:grid; place-items:center; width:100%; height:100%; min-height:260px; color:var(--muted); font-size:13px; }
.premium-commerce .promo { position:absolute; top:16px; left:16px; padding:6px 12px; background:var(--primary); color:var(--on-primary); font-size:10px; letter-spacing:.08em; }
.premium-commerce .content { min-width:0; padding:12px 0; }
.premium-commerce .content .eyebrow { margin-bottom:12px; }
.premium-commerce .description { margin:20px 0 0; font-size:14px; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; }
.premium-commerce .price-box { display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; margin-top:24px; padding:24px 0; border-block:1px solid var(--line); }
.premium-commerce .price-current { font-size:30px; font-weight:500; }
.premium-commerce .price-old { font-size:14px; color:var(--muted); text-decoration:line-through; }
.premium-commerce .form { margin-top:24px; }
.premium-commerce .field { margin-top:20px; }
.premium-commerce .field:first-child { margin-top:0; }
.premium-commerce label { display:block; margin-bottom:8px; font-size:13px; }
.premium-commerce input:not([type=hidden]),.premium-commerce select { min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--button-radius); background:var(--surface); color:var(--text); font:inherit; }
.premium-commerce select { display:block; width:100%; max-width:100%; }
.premium-commerce #quantity { width:104px; }
.premium-commerce .hint { margin-top:8px; font-size:12px; color:var(--muted); }
.premium-commerce .actions { display:grid; gap:12px; margin-top:24px; }
.premium-commerce button { min-height:44px; border:1px solid var(--primary); border-radius:var(--button-radius); padding:10px 18px; font:inherit; font-size:13px; cursor:pointer; background:var(--primary); color:var(--on-primary); }
.premium-commerce .actions button { width:100%; min-height:52px; font-size:14px; }
.premium-commerce button:disabled { cursor:not-allowed; background:var(--soft); color:var(--muted); border-color:var(--line); }
.premium-commerce button:hover:not(:disabled),.premium-commerce .checkout:hover { opacity:.88; }
.premium-commerce .secondary,.premium-commerce .continue { display:flex; justify-content:center; align-items:center; min-height:46px; border:1px solid var(--line); border-radius:var(--button-radius); color:var(--text); text-decoration:none; font-size:13px; }
.premium-commerce .store-note { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.premium-commerce input:focus-visible,.premium-commerce select:focus-visible,.premium-commerce button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.premium-commerce .head { margin-bottom:32px; }
.premium-commerce .sub { margin-top:12px; font-size:13px; color:var(--muted); }
.premium-commerce .layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:48px; align-items:start; }
.premium-commerce .items { min-width:0; border-top:1px solid var(--line); }
.premium-commerce .item { display:grid; grid-template-columns:112px minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.premium-commerce .item-media { width:112px; height:128px; background:var(--bg); }
.premium-commerce .item-media img { display:block; width:100%; height:100%; object-fit:contain; }
.premium-commerce .item-placeholder { display:grid; place-items:center; width:100%; height:100%; font:32px Georgia,serif; color:var(--muted); }
.premium-commerce .item-content { min-width:0; }
.premium-commerce .item-head { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.premium-commerce .item-name { margin:0; font-size:16px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.premium-commerce .item-name a { text-decoration:none; }
.premium-commerce .item-name a:hover { text-decoration:underline; text-underline-offset:4px; }
.premium-commerce .variant,.premium-commerce .unit { margin-top:6px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.premium-commerce .subtotal { font-size:16px; font-weight:500; white-space:nowrap; }
.premium-commerce .item-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:16px; }
.premium-commerce .update-form { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.premium-commerce input.qty { width:72px; min-height:44px; padding:8px 10px; }
.premium-commerce .update-form button { background:var(--surface); color:var(--text); border-color:var(--line); }
.premium-commerce button.remove { padding:8px 0; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.premium-commerce .summary { position:sticky; top:114px; padding:28px; background:var(--bg); border:1px solid var(--line); }
.premium-commerce .summary h2 { margin:0 0 20px; font:24px/1.2 Georgia,serif; }
.premium-commerce .sum-row { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:14px 0; border-top:1px solid var(--line); font-size:13px; }
.premium-commerce .muted { color:var(--muted); }
.premium-commerce .grand { font-size:24px; font-weight:500; }
.premium-commerce .checkout { display:flex; justify-content:center; align-items:center; gap:24px; min-height:50px; margin-top:20px; border-radius:var(--button-radius); background:var(--primary); color:var(--on-primary); text-decoration:none; font-size:14px; }
.premium-commerce .continue { margin-top:12px; }
.premium-commerce .next-step { margin:16px 0 0; font-size:12px; color:var(--muted); }
.premium-commerce .empty { margin:40px auto; max-width:680px; padding:64px 24px; border:1px solid var(--line); background:var(--bg); color:var(--muted); text-align:center; font-size:14px; }
.premium-commerce .empty strong { display:block; margin-bottom:12px; color:var(--text); font:30px/1.2 Georgia,serif; }
.premium-commerce .empty a { display:inline-flex; justify-content:center; align-items:center; min-height:48px; margin-top:24px; padding:12px 28px; background:var(--primary); color:var(--on-primary); border-radius:var(--button-radius); text-decoration:none; }
.premium-commerce .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; }
@media(max-width:1024px) {
    .premium-commerce .product-detail { gap:36px; }
    .premium-commerce .layout { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }
    .premium-commerce .summary { padding:22px; }
    .premium-commerce .item { grid-template-columns:88px minmax(0,1fr); gap:16px; }
    .premium-commerce .item-media { width:88px; height:108px; }
    .premium-commerce .item-head { flex-direction:column; gap:10px; }
}
@media(max-width:820px) {
    .premium-commerce .page { width:calc(100% - 40px); padding-top:12px; }
    .premium-commerce .layout { grid-template-columns:1fr; gap:28px; }
    .premium-commerce .summary { position:static; }
    .premium-commerce .item-head { flex-direction:row; }
    .premium-commerce .product-detail { grid-template-columns:1fr; gap:28px; }
    .premium-commerce .media { position:relative; top:auto; aspect-ratio:1/1; max-height:560px; }
    .premium-commerce .media img { max-height:560px; }
    .premium-commerce .content { padding:0; }
}
@media(max-width:560px) {
    .premium-commerce .page { width:calc(100% - 32px); padding-bottom:40px; }
    .premium-commerce .breadcrumbs { margin-bottom:16px; gap:8px; font-size:11px; }
    .premium-commerce h1 { font-size:32px; }
    .premium-commerce .price-current { font-size:27px; }
    .premium-commerce .description { font-size:14px; margin-top:16px; }
    .premium-commerce input:not([type=hidden]),.premium-commerce select { font-size:16px; }
    .premium-commerce .head { margin-bottom:24px; }
    .premium-commerce .item { grid-template-columns:76px minmax(0,1fr); gap:14px; padding:20px 0; }
    .premium-commerce .item-media { width:76px; height:96px; }
    .premium-commerce .item-head { flex-direction:column; gap:10px; }
    .premium-commerce .item-name { font-size:14px; }
    .premium-commerce .item-actions { gap:4px; }
    .premium-commerce .update-form button { padding:10px 12px; font-size:12px; }
    .premium-commerce .summary { padding:24px 20px; }
    .premium-commerce .empty { padding:40px 20px; }
}