dialog{--drawer-line:rgba(242,240,234,.24);position:fixed;inset:0 0 0 auto;margin:0;width:min(540px,100%);max-width:100%;height:100%;max-height:100%;padding:30px;background:var(--ink);color:var(--paper);border:0;border-left:1px solid var(--drawer-line);overflow-y:auto}
#cart-dialog{width:min(540px,100%);height:100%;max-height:100%;background:var(--ink);border-left:1px solid var(--drawer-line)}
#cart-dialog .drawer-head{display:flex;justify-content:flex-end}
.cart-close-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#cart-dialog .cart-close-button{position:relative;top:auto;right:auto;z-index:2;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--drawer-line);border-radius:50%;color:var(--paper);background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;padding:0}
#cart-dialog .cart-close-button:focus,#cart-dialog .cart-close-button:focus-visible{outline:none;box-shadow:none}
#cart-dialog .empty{padding:0;font-size:var(--type-lg);line-height:1.25;color:var(--paper)}
dialog::backdrop{background:#0009;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
html.dialog-open,html.dialog-open body{overflow:hidden}
body:has(dialog[open]){overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.drawer-head h2{font-size:var(--type-4xl);font-weight:var(--weight-regular);letter-spacing:-.04em}
#product-dialog .drawer-head{justify-content:flex-end}
.icon-button{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--drawer-line);border-radius:50%;color:inherit;cursor:pointer}
.hugeicon{display:block;flex:none;width:22px;height:22px;overflow:visible}
.icon-button .hugeicon{width:22px;height:22px}
.drawer-hero{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:28px;margin:2px 0 34px}
.drawer-hero img{width:138px;height:220px;object-fit:contain}
.drawer-hero :is(h1,h2){font-size:var(--type-5xl);line-height:.98;margin:0 0 12px;font-weight:var(--weight-regular);letter-spacing:-.055em}
.drawer-hero p{margin:0;font-size:var(--type-lg);line-height:1.2;color:var(--paper-soft)}
fieldset{border:0;padding:0;margin:0}
legend{font-size:var(--type-meta);line-height:1.2;margin-bottom:10px;color:var(--paper-soft)}
.pack-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pack-options label{position:relative;cursor:pointer}
.pack-options input{position:absolute;top:17px;right:16px;accent-color:var(--paper)}
.pack-options label>span{display:block;min-height:78px;border:1px solid var(--drawer-line);padding:15px 42px 14px 17px;font-size:var(--type-body);line-height:1.2;border-radius:3px}
.pack-options input:checked+span{border-color:var(--paper);background:rgba(242,240,234,.06)}
.pack-options small{display:block;color:var(--muted);margin-top:10px;font-size:var(--type-meta)}
.add-row{--purchase-control-height:60px;display:flex;gap:14px;margin-top:18px;align-items:flex-end}
.quantity{font-size:var(--type-sm);line-height:1.2;width:126px;color:rgba(242,240,234,.9)}
.quantity-stepper{display:grid;grid-template-columns:34px 1fr 34px;align-items:stretch;height:var(--purchase-control-height);margin-top:6px;overflow:hidden;border:1px solid var(--drawer-line)}
.quantity-stepper input,.quantity-stepper .quantity-value{display:grid;align-self:stretch;width:100%;min-width:0;height:auto;min-height:0;margin:0;border:0;background:transparent;color:var(--paper);padding:0;text-align:center;place-items:center;appearance:textfield;-webkit-appearance:none;-moz-appearance:textfield}
.quantity-stepper input::-webkit-outer-spin-button,.quantity-stepper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.quantity-stepper button{display:grid;place-items:center;width:34px;height:100%;border:0;background:transparent;color:var(--paper);font-size:var(--type-xl);line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease}
.quantity-stepper .hugeicon{width:18px;height:18px}
.quantity-stepper button:hover,.quantity-stepper button:focus-visible{background:rgba(242,240,234,.08)}
.primary{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--purchase-control-height,58px);min-height:var(--purchase-control-height,58px);border:0;background:var(--paper);color:var(--ink);font-size:var(--type-ui);padding:0 22px;flex:1;cursor:pointer}
.primary span{font-weight:var(--weight-regular)}
.primary .button-icon{display:grid;place-items:center;width:24px;height:24px}
.primary .button-icon .hugeicon{width:24px;height:24px}
.primary:disabled{background:var(--paper);color:var(--ink);opacity:1;cursor:not-allowed}
dialog button:focus-visible,dialog input:focus-visible,dialog summary:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
.micro{font-size:var(--type-sm);color:var(--muted);margin:14px 0 22px}
.label-note{font-size:var(--type-sm);color:var(--muted);margin:25px 0 5px}
dialog details{border-bottom:1px solid var(--drawer-line)}
dialog summary{position:relative;list-style:none;cursor:pointer;font-size:var(--type-ui);line-height:1.2;padding:19px 28px 19px 0;display:flex;align-items:center;justify-content:space-between}
dialog summary::-webkit-details-marker{display:none}
dialog summary:after{content:none!important}
dialog summary .summary-icon{position:absolute;top:50%;right:0;display:grid;place-items:center;width:18px;height:18px;transform:translateY(-50%)}
dialog summary .summary-icon>span{grid-area:1/1;display:grid;place-items:center;transition:opacity .12s ease,transform .18s cubic-bezier(.16,1,.3,1)}
dialog summary .summary-icon .hugeicon{width:18px;height:18px}
dialog summary .summary-minus{opacity:0;transform:rotate(-90deg) scale(.85)}
dialog details[open]:not(.is-closing) summary .summary-plus,dialog details.is-opening summary .summary-plus{opacity:0;transform:rotate(90deg) scale(.85)}
dialog details[open]:not(.is-closing) summary .summary-minus,dialog details.is-opening summary .summary-minus{opacity:1;transform:none}
dialog .details-panel{height:0;overflow:hidden;transition:height .28s cubic-bezier(.16,1,.3,1)}
dialog details[open] .details-panel{height:auto}
dialog details p{font-size:var(--type-meta);line-height:1.55;color:#c0bec2;padding-bottom:18px}
dialog details dl{margin:0 0 20px;font-size:var(--type-meta);line-height:1.35}
dialog details dl>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-top:1px solid var(--drawer-line)}
dialog dd{margin:0}
.cart-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:start;gap:14px;padding:18px 0;border-bottom:1px solid var(--drawer-line)}
.cart-row img{width:88px;height:132px;object-fit:contain}
.cart-item-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px}
.cart-row h3{margin:0;font-size:var(--type-card);font-weight:var(--weight-regular);line-height:1.05;letter-spacing:-.04em}
.cart-row p{margin:4px 0 0;font-size:var(--type-meta);line-height:1.25;color:var(--muted-strong)}
.cart-row strong{display:block;margin-top:1px;font-size:var(--type-label);font-weight:var(--weight-regular);line-height:1.1;text-align:right;white-space:nowrap}
.cart-controls{--purchase-control-height:54px;display:flex;align-items:center;gap:16px;margin-top:18px}
.cart-controls .quantity-stepper{width:138px;margin-top:0}
.cart-controls .remove{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:var(--type-sm);cursor:pointer}
.subtotal{display:flex;justify-content:space-between;font-size:var(--type-2xl);line-height:1.1;margin-top:34px;margin-bottom:24px;letter-spacing:-.035em}
.subtotal strong{font-weight:var(--weight-regular)}
#cart-summary .primary{--purchase-control-height:64px;display:flex;width:100%;flex:none;min-width:0;padding:0 40px;justify-content:center;font-size:var(--type-ui)}
.empty{padding:70px 0;font-size:var(--type-card)}
dialog .section-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:25px;padding:0 34px;border:.75px solid currentColor;background:transparent;color:inherit;font:var(--weight-medium) var(--type-meta)/1 var(--font-sans);letter-spacing:.02em;text-decoration:none;overflow:hidden}
dialog .section-cta span{transition:transform .2s ease}
dialog .section-cta:after{content:'→';position:absolute;right:17px;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
dialog .section-cta:hover span,dialog .section-cta:focus-visible span{transform:translateX(-7px)}
dialog .section-cta:hover:after,dialog .section-cta:focus-visible:after{opacity:1;transform:none}
dialog[open]{animation:drawer-in .28s cubic-bezier(.16,1,.3,1)}
dialog.is-closing{animation:drawer-out .28s cubic-bezier(.16,1,.3,1) both}
dialog.is-closing::backdrop{animation:backdrop-out .24s ease both}
.has-custom-cursor,.has-custom-cursor *{cursor:none!important}
.has-custom-cursor dialog,.has-custom-cursor dialog a,.has-custom-cursor dialog button,.has-custom-cursor dialog summary,.has-custom-cursor dialog label{cursor:none}
.has-custom-cursor dialog input{cursor:none}
.has-custom-cursor dialog .quantity-stepper input{cursor:none}
@keyframes drawer-in{from{transform:translateX(35px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes drawer-out{from{transform:translateX(0);opacity:1}to{transform:translateX(35px);opacity:0}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog.is-closing,dialog.is-closing::backdrop{animation:none}}
@media(max-width:520px){dialog{padding:16px 24px 22px}.drawer-head{min-height:48px}.icon-button,#cart-dialog .cart-close-button{width:46px;height:46px}.icon-button:focus,.icon-button:focus-visible,#cart-dialog .cart-close-button:focus,#cart-dialog .cart-close-button:focus-visible{outline:0;box-shadow:none}.drawer-hero{grid-template-columns:102px minmax(0,1fr);gap:16px;margin:-2px 0 22px}.drawer-hero img{width:102px;height:152px}.drawer-hero :is(h1,h2){font-size:var(--type-4xl)}.drawer-hero p{font-size:var(--type-body)}legend{margin-bottom:8px}.pack-options{grid-template-columns:1fr 1fr;gap:10px}.pack-options input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0}.pack-options label>span{min-height:66px;padding:13px 14px;font-size:var(--type-ui)}.pack-options small{margin-top:7px;font-size:var(--type-sm)}.add-row{--purchase-control-height:56px;display:grid;grid-template-columns:126px minmax(0,1fr);gap:12px;margin-top:14px}.primary{font-size:var(--type-ui);font-weight:var(--weight-regular);padding:0 18px}.cart-row{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:16px 0}.cart-row img{width:78px;height:118px}.cart-row h3{font-size:var(--type-xl)}.cart-row strong{font-size:var(--type-body)}.cart-controls{gap:9px}.cart-controls .quantity-stepper{width:126px}.cart-controls button{min-width:34px;min-height:40px}}

/* Separate product information from the compact purchase controls. */
#product-dialog .add-row{--purchase-control-height:52px}
#product-dialog .add-row .primary{border:1px solid var(--drawer-line);background:var(--paper);color:var(--ink);padding:0 16px}
#product-dialog .add-row .primary .button-icon,#product-dialog .add-row .primary .button-icon .hugeicon{width:20px;height:20px}
#product-dialog #label-details{margin-top:24px}
#product-dialog #label-details a strong{font-weight:700}

/* A product-to-cart handoff keeps an opaque drawer in place throughout. */
dialog[open].is-replacing:not(.is-closing){animation:none}

/* Keep Back and Close available as distinct cart actions. */
#cart-dialog .drawer-head{justify-content:space-between;margin-bottom:24px}
#cart-dialog .cart-back-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 0;border:0;background:transparent;color:var(--paper);font:inherit;cursor:pointer}
#cart-dialog .cart-back-button .hugeicon{width:20px;height:20px;transform:rotate(90deg)}

/* Drawer hierarchy and consistent control alignment. */
#cart-title{font-size:var(--type-3xl);font-weight:var(--weight-regular);line-height:1.1;letter-spacing:-.04em;margin:0 0 8px}
#product-dialog .drawer-hero{margin-bottom:16px}
#product-dialog .drawer-hero img{height:184px}
#product-dialog summary{padding-right:48px}
#product-dialog summary .summary-icon{right:13px}
.pack-options input{width:1px;height:1px;opacity:0;overflow:hidden}
.pack-options label>span{padding-right:36px}
.pack-options input:checked+span:after{content:'✓';position:absolute;right:13px;top:14px;font-size:14px;line-height:18px}
.pack-options input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}
.cart-row img{height:106px;object-position:center top}
.cart-controls .remove{min-width:60px;min-height:44px;padding:0 8px;margin-left:0;color:var(--muted);text-decoration:none}
.cart-controls .remove:hover{color:var(--paper);text-decoration:underline}
#cart-summary{margin-top:24px;padding-top:24px;border-top:1px solid var(--drawer-line)}
.cart-row:last-child{border-bottom:0}
#cart-summary .subtotal{margin:0 0 20px}
#cart-summary .primary:disabled{background:rgba(242,240,234,.06);border:1px solid var(--drawer-line);color:var(--muted);cursor:not-allowed}
@media(max-width:520px){
 #product-dialog .drawer-hero{margin-bottom:12px}
 #product-dialog .drawer-hero img{height:132px}
 #product-dialog summary .summary-icon{right:14px}
 .pack-options label>span{padding-right:30px}
 .cart-row img{height:96px}
 .cart-controls{gap:8px}
 .cart-controls .remove{min-width:52px;padding:0 4px}
}

/* Icon-only removal retains a generous touch target. */
#cart-dialog .cart-controls .remove{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0}
#cart-dialog .cart-controls .remove .hugeicon{width:20px;height:20px}

/* Compact cart controls align with the price and image row. */
#cart-dialog .cart-controls{--purchase-control-height:44px;justify-content:flex-end;gap:8px;margin-top:12px}
#cart-dialog .cart-controls .quantity-stepper{width:112px;grid-template-columns:36px minmax(0,1fr) 36px;flex:none}
#cart-dialog .cart-controls .quantity-stepper button{width:36px;min-width:36px;min-height:0}
#cart-dialog .cart-controls .remove{order:-1}
#cart-dialog .cart-row img{height:98px}

#cart-dialog .cart-controls{margin-top:4px}
#cart-summary .subtotal{margin-bottom:8px}
#cart-summary .cart-currency-note{margin:0 0 20px;font-size:var(--type-sm);line-height:1.4;color:var(--muted)}

/* Keep image placement centered and avoid doubled footer spacing. */
#cart-dialog .cart-row img{align-self:center;object-position:center}
#cart-dialog .cart-row:last-child{padding-bottom:0}
#cart-summary{margin-top:16px;padding-top:20px}

/* Matching circular navigation controls. */
#cart-dialog .cart-back-button{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--drawer-line);border-radius:50%;background:transparent;color:var(--paper)}
#cart-dialog .cart-back-button .hugeicon{width:22px;height:22px;transform:none}
@media(max-width:520px){#cart-dialog .cart-back-button{width:46px;height:46px;min-height:46px}}

/* Independent price/control column removes space reserved for pack text. */
#cart-dialog .cart-item-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
#cart-dialog .cart-item-head{display:contents}
#cart-dialog .cart-item-head>div{grid-column:1;grid-row:1 / span 2}
#cart-dialog .cart-item-head>strong{grid-column:2;grid-row:1}
#cart-dialog .cart-controls{grid-column:2;grid-row:2;margin-top:8px}

#cart-dialog .cart-item-copy{column-gap:8px}
#cart-dialog .cart-controls{gap:0}

#cart-dialog .cart-row p{margin-top:8px}

/* Let artwork keep its natural ratio without extra frame height. */
#cart-dialog .cart-row img{height:auto;align-self:start;object-position:center top}

/* Match cart quantity typography to prices and quiet the control icons. */
#cart-dialog .cart-row{--cart-price-size:var(--type-label)}
#cart-dialog .cart-row strong,#cart-dialog .quantity-value{font-size:var(--cart-price-size);font-weight:var(--weight-regular);line-height:1.1}
#cart-dialog .cart-controls .quantity-stepper .hugeicon,#cart-dialog .cart-controls .remove .hugeicon{width:14px;height:14px}
@media(max-width:520px){#cart-dialog .cart-row{--cart-price-size:var(--type-body)}}

#cart-dialog .cart-controls .remove .hugeicon{width:18px;height:18px}

/* Cart typography: four deliberate sizes with consistent regular weight. */
#cart-dialog{font-weight:400}
#cart-dialog #cart-title{font-size:24px;font-weight:400}
#cart-dialog .cart-row h3{font-size:18px;font-weight:400}
#cart-dialog .cart-row p,#cart-dialog .cart-currency-note{font-size:14px;font-weight:400}
#cart-dialog .cart-row strong,#cart-dialog .quantity-value{font-size:16px;font-weight:400}
#cart-dialog .subtotal,#cart-dialog .subtotal strong{font-size:18px;font-weight:400}
#cart-dialog #cart-summary .primary{font-size:16px;font-weight:400}

/* Product details share the cart's 14/16/18/24px type scale. */
#product-dialog{font-weight:400}
#product-dialog .drawer-hero :is(h1,h2){font-size:24px;font-weight:400;line-height:1.1}
#product-dialog #detail-price{font-size:18px;font-weight:400}
#product-dialog legend,#product-dialog .quantity,#product-dialog .pack-options small{font-size:14px;font-weight:400}
#product-dialog .pack-options label>span,#product-dialog #quantity,#product-dialog .primary,#product-dialog summary{font-size:16px;font-weight:400}
#product-dialog details p,#product-dialog details dl,#product-dialog .label-note{font-size:14px;font-weight:400}

/* Suppress double-tap zoom while preserving scrolling and pinch zoom. */
html,body,dialog,button,a,input,summary{touch-action:manipulation}

#product-dialog .informed-choice-note{margin:24px 0 0;font-size:14px;line-height:1.55;color:#c0bec2}
#product-dialog .informed-choice-note a{color:inherit;text-underline-offset:3px}

#product-dialog .pack-options .pack-price-row{display:flex;min-height:24px;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap}
#product-dialog .pack-options .pack-savings{display:inline-flex;align-items:center;margin:0;padding:3px 8px;border-radius:999px;background:#c5e5bf;color:#203e26;font-size:12px;line-height:1.4;white-space:nowrap}
#product-dialog .pack-options label>span:has(.pack-price-row){padding-right:14px}
#product-dialog .pack-options label>span{height:100%}
#product-dialog .product-currency-note{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.4}

#product-dialog #product-title{max-width:none}