/* ============================================================
   Print shop — The Dot store page.
   Products sit on light plates (the mockups are shot on white),
   everything around them is the site's ink ground. Dialogs are
   raised ink panels; the dot marks prices, active filters and
   the cart count.
   ============================================================ */

/* ---------- Header cart ---------- */
.cart-btn b, .cart-mini b{
  display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; margin-left:.35rem; padding:0 .35em;
  border-radius:999px; background:var(--harbor); color:var(--miami); font-size:.8rem; font-weight:700;
}
.cart-mini{ display:none; align-items:center; gap:.2rem; height:40px; padding:0 .8rem; border-radius:999px; background:var(--miami); color:var(--harbor); font-weight:650; font-size:.9rem; }
@media (max-width:900px){ .cart-mini{ display:inline-flex; } .top-cta .cart-btn{ display:none; } }

/* ---------- Page head ---------- */
.store{ padding-top:calc(var(--head-h) + clamp(2rem, 5vw, 3.5rem)); }
.store-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem 4rem; flex-wrap:wrap; }
.store-head h1{
  font-size:clamp(2.8rem, 6.4vw, 5.4rem); font-variation-settings:"wdth" 116;
  line-height:.92; letter-spacing:-.04em;
}
.store-head h1 .dot{ width:.19em; height:.19em; }
.store-sub{ margin-top:1.1rem; max-width:48ch; font-size:1.1rem; color:var(--white); font-weight:500; }
.store-hint{ display:flex; align-items:center; gap:.6rem; max-width:34ch; font-size:.95rem; color:var(--prose); }
.store-hint .dot{ width:.55rem; height:.55rem; margin:0; }

/* ---------- Toolbar ---------- */
.catalog{ padding:clamp(2rem, 4vw, 3rem) 0 var(--pad); }
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:1rem 0; border-block:1px solid var(--line); }
.filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter{
  padding:.55rem 1rem; border-radius:999px; border:1px solid var(--line-2);
  color:var(--white); font-weight:600; font-size:.9rem; transition:background .3s, color .3s, border-color .3s;
}
.filter:hover{ border-color:var(--miami); }
.filter[aria-pressed="true"]{ background:var(--miami); border-color:var(--miami); color:var(--harbor); }
.search{
  width:min(100%, 280px); padding:.65rem 1rem; border-radius:999px; border:1px solid var(--line-2);
  background:var(--ink-2); color:var(--white); font:inherit; font-size:.95rem; outline:none;
}
.search::placeholder{ color:var(--mist); }
.search:focus{ border-color:var(--miami); }
.catalog-meta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0 1.4rem; color:var(--mist); font-size:.9rem; }
.all-toggle{ font-weight:650; color:var(--white); border-bottom:1px solid var(--miami); padding-bottom:2px; }
.all-toggle[aria-pressed="true"]{ color:var(--miami); }

/* ---------- Product grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:820px){ .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.7rem; } }
.pcard{
  display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition:transform .6s var(--ease), border-color .4s;
}
.pcard:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.pcard[hidden]{ display:none; }
.pcard .dm-product-visual{ background:#EEF3F5; }
.pcard .dm-art{ transition:opacity .35s var(--ease), transform 1s var(--ease); }
.pcard:hover .dm-art{ transform:scale(1.04); }
.dm-logo-toggle{
  font:650 .78rem/1.2 var(--display); min-height:38px; padding:.5rem .85rem;
  background:rgba(255,255,255,.94); color:var(--ink); border-color:rgba(7,13,25,.15);
}
.dm-logo-toggle[aria-pressed="true"]{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.pcard-body{ display:flex; flex-direction:column; flex:1; padding:1rem 1.1rem 1.1rem; }
.pcat{ font-size:.78rem; font-weight:600; color:var(--mist); }
.pcard h3{ margin-top:.25rem; font-size:1.3rem; line-height:1.05; }
.spec{ margin-top:.35rem; font-size:.9rem; color:var(--prose); }
.pcard details{ margin-top:.6rem; font-size:.88rem; }
.pcard summary{ cursor:pointer; color:var(--white); font-weight:600; list-style:none; display:flex; align-items:center; gap:.45rem; }
.pcard summary::-webkit-details-marker{ display:none; }
.pcard summary::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; border:1.5px solid var(--miami); transition:background .3s; }
.pcard details[open] summary::before{ background:var(--miami); }
.pcard details p{ margin-top:.45rem; color:var(--prose); line-height:1.5; }
.variant-note{ color:var(--mist) !important; font-size:.82rem; }
.purchase-row{ margin-top:auto; padding-top:1rem; }
.card-price{ font-size:1.35rem; font-weight:800; color:var(--white); font-variation-settings:"wdth" 108; letter-spacing:-.02em; }
.card-price small{ font-size:.8rem; font-weight:500; color:var(--mist); letter-spacing:0; }
.card-price del, .product-price del{ font-size:.9rem; font-weight:500; color:var(--mist); }
@media (max-width:820px){
  .pcard-body{ padding:.8rem; }
  .pcard h3{ font-size:1.1rem; }
  .pcard details, .dm-logo-toggle{ font-size:.72rem; }
  .card-price{ font-size:1.1rem; }
  .dm-logo-toggle{ right:6px; bottom:6px; min-height:32px; padding:.35rem .6rem; }
}

/* store buttons: same pill grammar as the site buttons */
.primary, .secondary{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.75rem 1.3rem;
  border-radius:999px; font-weight:650; font-size:.95rem; text-align:center; transition:background .3s, color .3s, transform .4s var(--ease);
}
.primary{ background:var(--miami); color:var(--harbor); }
.primary:hover{ background:var(--white); }
.primary:disabled{ opacity:.45; cursor:not-allowed; background:var(--miami); }
.secondary{ border:1px solid var(--line-2); color:var(--white); }
.secondary:hover{ border-color:var(--miami); color:var(--miami); }
.wide{ width:100%; }
.purchase-row .primary{ width:100%; margin-top:.7rem; }
.text-button{ color:var(--miami); font-size:.85rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; padding:.4rem .5rem .4rem 0; }
.empty{ padding:3rem 0; text-align:center; color:var(--prose); }

/* ---------- Custom work band ---------- */
.store-help{ padding:0 0 var(--pad); }
.store-help h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
.store-help p{ margin-top:.8rem; max-width:48ch; color:var(--white); }
.store-help .hero-ctas{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }

/* ---------- Dialogs: product, cart, checkout ---------- */
dialog{
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:0; color:var(--prose);
  width:min(980px, calc(100% - 24px)); max-height:92dvh; background:var(--ink-2);
  box-shadow:0 30px 120px rgba(0,0,0,.55);
}
dialog[open]{ animation:pop .5s var(--ease-punch); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
dialog::backdrop{ background:rgba(7,13,25,.78); backdrop-filter:blur(6px); }
body:has(dialog[open]){ overflow:hidden; }
dialog h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin:0 0 1rem; line-height:1; }
dialog h2 .dot{ width:.2em; height:.2em; }
dialog h3{ font-size:1.2rem; }
.dialog-close{
  position:sticky; top:12px; float:right; margin:12px 12px -56px 0; z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--ink);
  color:var(--white); font-size:1rem;
}
.dialog-close:hover{ border-color:var(--miami); color:var(--miami); }
.dialog-pad{ padding:clamp(1.4rem, 4vw, 2.6rem); }
.product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:3.4rem 2rem 2rem; }
.product-layout > *{ min-width:0; }
#modal-art .dm-product-visual{ border-radius:var(--r); background:#EEF3F5; }
.pd-cat{ font-size:.82rem; font-weight:600; color:var(--mist); margin-bottom:.4rem; }
.product-layout form > p{ font-size:.95rem; }
.fine{ font-size:.82rem; line-height:1.55; color:var(--mist); margin-top:.6rem; }
dialog label{ display:grid; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--white); }
.option-fields{ display:grid; gap:.9rem; margin-top:1.2rem; }
dialog input, dialog select, dialog textarea{
  width:100%; min-height:46px; padding:.7rem .85rem; border-radius:10px; border:1px solid var(--line-2);
  background:var(--ink); color:var(--white); font:inherit; font-weight:450; font-size:.95rem; outline:none;
}
dialog select{ appearance:none; background-image:radial-gradient(circle, var(--miami) 0 3.5px, transparent 4px); background-repeat:no-repeat; background-position:right 14px center; background-size:12px 12px; padding-right:2.2rem; }
dialog input:focus, dialog select:focus, dialog textarea:focus{ border-color:var(--miami); }
dialog textarea{ resize:vertical; }
.qty-label{ width:150px; margin:1.1rem 0 0; }
.qty-label[hidden]{ display:none; }
/* every option is a row of buttons, not a dropdown */
.chip-field{ display:grid; gap:.5rem; font-size:.88rem; font-weight:600; color:var(--white); margin-top:1.1rem; }
.option-fields .chip-field{ margin-top:0; }
.qty-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.qty-chips button{ min-height:44px; min-width:64px; padding:.45rem 1rem; line-height:1.25; text-align:center; border:1px solid var(--line-2); border-radius:999px; background:transparent; color:var(--white); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.qty-chips button:hover{ border-color:var(--miami); }
.qty-chips button[aria-checked="true"]{ background:var(--miami); border-color:var(--miami); color:var(--harbor); }
.pack-chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
.pack-chips button{ display:grid; justify-items:center; gap:.1rem; border-radius:14px; padding:.6rem .5rem; }
.pack-chips button b{ font-size:1rem; }
.pack-chips button small{ font-size:.74rem; font-weight:500; opacity:.75; }
.pack-chips button em{ font-style:normal; font-size:.7rem; font-weight:700; color:var(--miami); }
.pack-chips button[aria-checked="true"] em{ color:inherit; }
.pack-chips button span{ font-size:.86rem; }
.qty-chips button:focus-visible{ outline:2px solid var(--miami); outline-offset:2px; }
.product-price{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.product-price strong{ font-size:2.1rem; font-weight:800; color:var(--white); font-variation-settings:"wdth" 110; letter-spacing:-.03em; }
.product-price span{ font-size:.85rem; color:var(--mist); }
#add-product{ margin-top:1rem; }

.cart-lines{ margin:1.4rem 0; }
.cart-line{ display:grid; grid-template-columns:78px 1fr 140px; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.cart-line img{ width:78px; height:78px; border-radius:10px; background:#EEF3F5; object-fit:contain; }
.cart-line b{ color:var(--white); }
.cart-line .fine{ margin-top:.2rem; }
.line-right{ text-align:right; }
.line-right b{ font-size:1.1rem; }
.line-right label{ display:flex; align-items:center; justify-content:flex-end; gap:.5rem; margin-top:.6rem; font-size:.82rem; }
.line-right input{ width:72px; min-height:40px; }
.subtotal{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.1rem 0 .4rem; border-top:1px solid var(--line-2); color:var(--white); font-weight:600; }
.subtotal strong{ font-size:1.6rem; font-weight:800; font-variation-settings:"wdth" 110; }
#start-checkout, #continue-shopping{ margin-top:1rem; }

.checkout-intro{ max-width:56ch; color:var(--white); }
.checkout-layout{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; margin-top:1.6rem; }
fieldset{ border:0; margin:0 0 1.6rem; min-width:0; }
legend{ font-size:1rem; font-weight:800; color:var(--white); margin-bottom:.9rem; text-transform:lowercase; font-variation-settings:"wdth" 112; }
legend::after{ content:""; display:inline-block; width:.3em; height:.3em; border-radius:50%; background:var(--miami); margin-left:.12em; }
.checkout-layout label{ margin-bottom:.8rem; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.order-box{ position:sticky; top:1rem; align-self:start; padding:1.4rem; border-radius:var(--r); background:var(--ink); border:1px solid var(--line); }
.order-box h3{ margin-bottom:.8rem; }
.summary-item{ padding:.8rem 0; border-top:1px solid var(--line); font-size:.9rem; }
.summary-item b{ color:var(--white); }
.summary-item p{ margin-top:.3rem; font-size:.82rem; color:var(--mist); }
.summary-item strong{ float:right; color:var(--white); }
.fee-row{ display:flex; justify-content:space-between; gap:1rem; margin:.7rem 0; font-size:.85rem; }
#request-review{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line-2); }
#request-review pre{ margin:.8rem 0 1rem; padding:1rem; border-radius:var(--r); background:var(--ink); color:var(--prose); white-space:pre-wrap; overflow-wrap:anywhere; font:500 .9rem/1.6 var(--display); }
#request-review .primary, #request-review .secondary{ margin:.3rem .4rem .3rem 0; }

@media (max-width:700px){
  .product-layout, .checkout-layout{ grid-template-columns:1fr; gap:1.4rem; }
  .product-layout{ padding:3.4rem 1.1rem 1.4rem; }
  #modal-art{ max-width:280px; margin-inline:auto; }
  .cart-line{ grid-template-columns:56px 1fr; gap:.8rem; }
  .cart-line img{ width:56px; height:56px; }
  .line-right{ grid-column:2; display:flex; justify-content:space-between; align-items:center; text-align:left; }
  .line-right label{ margin:0; }
  .order-box{ position:static; grid-row:1; }
  .field-grid{ grid-template-columns:1fr; gap:0; }
}

/* phones: brand, cart and menu share one row */
@media (max-width:900px){
  .top-cta{ gap:.6rem; }
}
@media (max-width:820px){
  .purchase-row .primary{ min-height:42px; padding:.6rem .8rem; font-size:.85rem; }
}
@media (max-width:370px){ .brand-name{ display:none; } }

/* ---------- Design card: a custom-quote service, not a cart product ----------
   An artboard where the d. gets drawn: the path traces, the handles show,
   the dot lands. Plays on hover. */
.design-visual{ aspect-ratio:1; display:grid; place-items:center; }
.design-visual svg{ width:100%; height:100%; display:block; }
.dv-board{ fill:#fff; filter:drop-shadow(0 14px 22px rgba(7,13,25,.16)); }
.dv-path{ fill:none; stroke:#070D19; stroke-width:84; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.2s var(--ease); }
.dv-dot{ fill:#1ED1E7; transform-box:fill-box; transform-origin:center; transition:transform .5s var(--ease-pop) .9s; }
.dv-handles line{ stroke:#0096B5; stroke-width:6; }
.dv-handles rect{ fill:#fff; stroke:#0096B5; stroke-width:6; }
.dv-handles{ opacity:0; transition:opacity .4s; }
.dv-pen{ fill:#070D19; transition:transform 1.2s var(--ease); }
.pcard-design:hover .dv-path{ animation:dv-trace 1.3s var(--ease) both; }
.pcard-design:hover .dv-dot{ animation:dv-pop .6s var(--ease-pop) 1s both; }
.pcard-design:hover .dv-handles{ opacity:1; }
.pcard-design:hover .dv-pen{ transform:translate(-22px, -30px); }
@keyframes dv-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes dv-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.pcard-design .primary{ display:inline-flex; margin-top:.6rem; }
@media (prefers-reduced-motion: reduce){ .pcard-design:hover .dv-path, .pcard-design:hover .dv-dot{ animation:none; } }

/* any-size products: size inputs in the product dialog */
.size-fields{ margin:1.2rem 0 0; padding:0; display:grid; gap:.7rem; }
.size-fields legend{ margin-bottom:.2rem; }
.unit-toggle{ display:flex; gap:.35rem; }
.unit-toggle button, .size-presets button{ min-height:40px; padding:0 .9rem; border:1px solid var(--line-2); border-radius:999px; background:transparent; color:var(--white); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.unit-toggle button[aria-pressed="true"]{ background:var(--miami); border-color:var(--miami); color:var(--harbor); }
.size-presets{ display:flex; flex-wrap:wrap; gap:.35rem; }
.size-presets button:hover, .unit-toggle button:hover{ border-color:var(--miami); }
.size-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.size-grid label[hidden]{ display:none; }
.size-grid i{ font-style:normal; }
/* products still waiting on their photo */
.dm-product-visual.is-placeholder{ display:grid; place-items:center; }
.dm-product-visual.is-placeholder .ph-note{ position:absolute; left:50%; bottom:14%; transform:translateX(-50%); font-size:.72rem; font-weight:600; letter-spacing:.04em; color:#6B7A86; white-space:nowrap; }
.pcard:hover .is-placeholder .dm-art{ transform:none; }

/* card checkout step and the customer's order page */
.pay-layout{ grid-template-columns:1fr 1fr; }
.pay-box{ display:grid; gap:1rem; align-content:start; }
.pay-steps{ margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:.8rem; }
.pay-steps li{ counter-increment:s; position:relative; padding-left:2.4rem; font-size:.92rem; line-height:1.5; color:var(--prose); }
.pay-steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; background:var(--miami); color:var(--harbor); font-weight:800; font-size:.8rem; }
.pay-steps b{ color:var(--white); }
.order-page{ display:grid; gap:2rem; }
.order-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:2rem; align-items:start; }
.upload-box{ display:grid; gap:1rem; }
.drop{ display:grid; place-items:center; gap:.4rem; min-height:170px; padding:1.4rem; border:2px dashed var(--line-2); border-radius:var(--r); text-align:center; cursor:pointer; color:var(--prose); }
.drop.is-over, .drop:focus-within{ border-color:var(--miami); }
.drop input{ position:absolute; width:1px; height:1px; opacity:0; }
.drop b{ color:var(--white); }
.file-list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; font-size:.9rem; }
.file-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px; }
.file-list small{ color:var(--mist); white-space:nowrap; }
@media (max-width:760px){ .pay-layout, .order-grid{ grid-template-columns:1fr; } }