/* A single product surface: centered on desktop, edge-to-edge on phones. */
/* Initial dialog focus belongs to its title; interactive keyboard focus stays visible. */
#product-dialog #product-detail-title:focus,#cart-dialog #cart-title:focus{outline:0;box-shadow:none}
html:has(#product-dialog[open]),body:has(#product-dialog[open]){overflow:hidden}
#product-dialog{padding:24px;background:rgba(13,22,17,.3);backdrop-filter:blur(4px)}
#product-dialog[open]{display:flex;align-items:center;justify-content:center}
#product-dialog .product-sheet{position:relative;inset:auto;display:flex;flex-direction:column;width:min(960px,100%);height:min(720px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);margin:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 24px 80px rgba(0,0,0,.2)}
#product-dialog .product-sheet::before{display:none}
#product-dialog .product-detail-toolbar{display:flex;align-items:center;gap:8px;flex:0 0 56px;padding:0 12px 0 24px;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink)}
#product-dialog .product-detail-store{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}
#product-dialog .product-detail-toolbar button{position:static;display:grid;place-items:center;width:44px;height:44px;min-height:44px;flex:0 0 44px;margin:0;padding:0;border:0;border-radius:9px;color:var(--ink);background:transparent;font:inherit}
#product-dialog .product-detail-toolbar svg{display:block;width:21px;height:21px}
#product-dialog .product-detail-toolbar .sheet-close{font-size:26px;font-weight:400;line-height:1}
#product-dialog .product-detail-toolbar .product-detail-back{display:none}
#product-dialog .product-detail-toolbar .product-detail-bag{display:flex;justify-content:center;gap:4px;width:auto;flex-basis:auto;padding:0 6px}
#product-dialog [data-product-cart-count]{font-size:11px;font-weight:650;color:var(--primary)}
#product-dialog [data-product-detail]{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#product-dialog .product-detail-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:28px;flex:1;min-height:0;padding:24px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#product-dialog .product-detail-content:not(:has(.product-detail-media,.product-detail-gallery)){grid-template-columns:minmax(0,1fr)}
#product-dialog :is(.product-detail-media,.product-detail-gallery){position:sticky;top:0;align-self:start;width:100%;height:clamp(220px,48dvh,420px);aspect-ratio:auto;margin:0;border:0;border-radius:12px;background:var(--card)}
#product-dialog :is(.product-detail-media img,.product-detail-gallery img){object-fit:contain;padding:12px}
#product-dialog .product-detail-media:not(:has(.product-detail-gallery))::after,#product-dialog .product-detail-gallery::after{content:'⤢';position:absolute;right:12px;bottom:12px;z-index:4;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font-size:22px;line-height:1;pointer-events:none}
#product-dialog .product-detail-copy{min-width:0;padding:4px 0 12px}
#product-dialog .product-detail-copy h2{margin:7px 0 13px;font-size:clamp(24px,2.4vw,30px);line-height:1.13;letter-spacing:-.035em;overflow-wrap:anywhere}
#product-dialog .product-detail-copy>.eyebrow{font-size:10px;letter-spacing:.1em}
#product-dialog .sale-price-summary{border:0;border-radius:0;padding:0;background:transparent;margin:14px 0 18px}
#product-dialog .sale-unit-price-main{font-size:29px;line-height:1.15}
#product-dialog .sale-unit-price-label{font-size:10px;font-weight:650;letter-spacing:.04em}
#product-dialog .sale-package-price-copy{font-size:12px;line-height:1.5}
#product-dialog :is(.sale-commercial-badge,.sale-quantity-benefit){font-size:10px}
#product-dialog .sale-package-choice{margin:15px 0 18px}
#product-dialog .sale-package-choice-heading strong{font-size:13px;font-weight:650}
#product-dialog .sale-package-choice-option{min-height:54px;border-radius:10px;background:var(--card);color:var(--ink);box-shadow:none}
#product-dialog .sale-package-choice-option.is-selected{background:color-mix(in srgb,var(--primary) 8%,var(--card));color:var(--primary);border-color:var(--primary);box-shadow:inset 0 0 0 .5px var(--primary)}
#product-dialog .product-description{margin-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6}
#product-dialog .product-description summary{padding:12px 0;cursor:pointer;color:var(--ink);font-weight:600}
#product-dialog .product-description .catalog-description{margin:0 0 15px;font-size:13px}
#product-dialog .product-detail-labels{margin-top:16px}
#product-dialog .product-detail-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:0 0 auto;margin:0;padding:14px 24px 18px;border-top:1px solid var(--line);background:var(--card);box-shadow:0 -5px 20px rgba(0,0,0,.025)}
#product-dialog [data-detail-cart-host]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px 20px;align-items:center}
#product-dialog .product-purchase-total{display:grid;gap:4px;min-width:0;align-content:center}
#product-dialog .product-purchase-total small{font-size:11px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
#product-dialog .product-purchase-total strong{font-size:23px;line-height:1.15;letter-spacing:-.035em;color:var(--ink);overflow-wrap:anywhere}
#product-dialog .product-purchase-controls{display:grid;grid-template-columns:124px minmax(0,1fr);gap:10px;min-width:0}
#product-dialog .detail-cart-stepper{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;width:100%;height:48px;min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--card);box-shadow:none;color:var(--ink)}
#product-dialog .detail-cart-stepper>button:not([data-detail-cart-add]){width:100%;min-width:0;min-height:46px;background:transparent;box-shadow:none;border:0;font-size:20px;color:var(--ink)}
#product-dialog .detail-cart-stepper>button:disabled{opacity:.35}
#product-dialog [data-detail-quantity]{width:100%;min-width:0;padding:0;border:0;color:var(--ink);background:transparent;font:inherit;font-size:16px;font-weight:650;text-align:center;border-radius:0}
#product-dialog .product-purchase-add{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:10px 12px;border:0;border-radius:10px;background:var(--primary);color:var(--on-primary);font:inherit;font-size:13px;font-weight:650;line-height:1.25}
#product-dialog .product-purchase-add svg{width:18px;height:18px;flex:0 0 18px}
#product-dialog .product-purchase-add:disabled{opacity:.45;cursor:not-allowed}
#product-dialog .detail-cart-availability{grid-column:1/-1;min-height:0;text-align:right;font-size:11px;line-height:1.3}
#product-dialog .product-detail-actions .detail-whatsapp{order:2;flex:0 0 auto;min-height:32px;height:auto;padding:3px;box-shadow:none;background:transparent;color:var(--primary);border-radius:6px;font-size:12px;text-decoration:underline;text-underline-offset:3px}
#product-dialog .product-detail-actions .detail-whatsapp svg{width:16px;height:16px}
#product-dialog :is(button,input,summary):focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media(max-width:700px){
  #product-dialog{padding:0;background:var(--card);backdrop-filter:none}
  #product-dialog .product-sheet{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}
  #product-dialog .product-detail-toolbar{flex-basis:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0}
  #product-dialog .product-detail-toolbar .product-detail-back{display:grid}
  #product-dialog .product-detail-toolbar .sheet-close{display:none}
  #product-dialog .product-detail-content{display:block;padding:0;scrollbar-gutter:auto}
  #product-dialog :is(.product-detail-media,.product-detail-gallery){position:relative;top:auto;height:clamp(160px,27dvh,220px);width:100%;border-radius:0;border-bottom:1px solid var(--line)}
  #product-dialog :is(.product-detail-media img,.product-detail-gallery img){padding:10px 32px}
  #product-dialog .product-detail-copy{padding:17px 20px 20px}
  #product-dialog .product-detail-copy h2{font-size:24px;line-height:1.14;margin:7px 0 10px}
  #product-dialog .sale-price-summary{margin:12px 0 15px}
  #product-dialog .sale-unit-price-main{font-size:27px}
  #product-dialog .product-detail-actions{padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));gap:4px}
  #product-dialog [data-detail-cart-host]{grid-template-columns:1fr;gap:8px}
  #product-dialog .product-purchase-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  #product-dialog .product-purchase-total small{font-size:11px}
  #product-dialog .product-purchase-total strong{font-size:21px;white-space:nowrap}
  #product-dialog .product-purchase-controls{grid-template-columns:112px minmax(0,1fr);gap:9px}
  #product-dialog .detail-cart-stepper{grid-template-columns:36px minmax(0,1fr) 36px}
  #product-dialog .product-purchase-add{font-size:12px;padding:9px}
  #product-dialog .product-detail-actions .detail-whatsapp{min-height:30px;font-size:11px}
  #product-dialog .detail-cart-availability{text-align:center;font-size:10px}
  /* Keep the bag recognizable when the cart has content, not just its counter. */
  .cart-button,.cart-button.has-items{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:44px;min-height:44px;padding:5px 8px}
  .cart-button.has-items .cart-icon{display:grid}
  .cart-button.has-items b{display:grid;width:20px;min-width:20px;height:20px;font-size:10px}
}
@media(max-width:360px){#product-dialog .product-detail-copy{padding-inline:16px}#product-dialog .product-detail-actions{padding-inline:12px}#product-dialog .product-purchase-controls{grid-template-columns:104px minmax(0,1fr)}#product-dialog .detail-cart-stepper{grid-template-columns:32px minmax(0,1fr) 32px}#product-dialog .product-purchase-add svg{display:none}}