/* ==========================================================================
   MTD Performance - shop.css
   Loaded AFTER site.css on store, product, cart, checkout, order and partner.
   Nothing here redefines a token; every colour, easing, radius and type face
   comes from site.css. This file only adds the shop specific furniture.

   Table of contents
    1. Shop page shell: main offset, page head, breadcrumb, tick rule
    2. Store: toolbar, chips, selects, result count, grid, empty state
    3. Product: gallery, buy panel, variants, stepper, blocks, sticky bar
    4. Cart: table, lines, summary
    5. Checkout: form grid, summary, notices
    6. Order: status panel
    7. Partner: benefits, requirements, form
    8. Shared small parts: notes, alerts, skeletons
    9. Reduced motion and short screens
   ========================================================================== */

/* ==========================================================================
   1. Shop page shell
   ========================================================================== */

/* The header is fixed and these pages have no 520vh hero under it. */
.shop-main{padding-top:var(--nav-h)}

.page-head{
  position:relative;
  padding-block:clamp(34px,4.6vw,64px) clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.page-head h1{font-size:clamp(32px,4.4vw,58px);font-style:italic;padding-bottom:.06em}
.page-head .lede{margin-top:16px}
.page-head .crumb{margin-bottom:14px}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);
}
.crumb a{color:var(--text-secondary);border-bottom:1px solid transparent;transition:color .24s var(--ease-out),border-color .24s var(--ease-out)}
.crumb a:hover{color:var(--text-primary);border-bottom-color:var(--accent-muted)}
.crumb .sep{color:var(--accent-muted)}

.shop-section{padding-block:clamp(30px,3.4vw,48px)}
.shop-section-tight{padding-block:clamp(20px,2.4vw,32px)}

/* the tick rule the shop pages use in place of the index dividers */
.rule-ticks{
  display:block;width:100%;height:10px;overflow:visible;margin-block:clamp(24px,3vw,40px);
}
.rule-ticks line{stroke:var(--accent-muted);stroke-width:1}
.rule-ticks .tick-rule{
  stroke:var(--line);
  stroke-dasharray:var(--dl,1200);
  stroke-dashoffset:var(--dl,1200);
  transition:stroke-dashoffset 1.4s var(--ease-out);
}
.rule-ticks.in .tick-rule,.rule-ticks.drawn .tick-rule{stroke-dashoffset:0}

/* ==========================================================================
   2. Store
   ========================================================================== */

.store-toolbar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(160px,1fr) minmax(160px,1fr);
  gap:14px;
  align-items:end;
  margin-bottom:22px;
}
.store-toolbar .field{margin-bottom:0}

.search-wrap{position:relative}
.search-wrap .input{padding-left:40px}
.search-wrap svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--text-secondary);fill:none;stroke-width:1.7;pointer-events:none;
}

.chip-row{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-bottom:20px;
}
.filter-chip{
  cursor:pointer;
  padding:9px 14px;
  min-height:44px;                 /* the touch floor unconditionally, like .btn:
                                      a touch device that reports a fine pointer
                                      still gets a thumb-sized chip */
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out),background-color .26s var(--ease-out);
}
.filter-chip:hover{border-color:var(--text-secondary);color:var(--text-primary)}
.filter-chip[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--text-primary);
  background:linear-gradient(180deg,rgba(233,32,42,.22) 0%,rgba(90,15,19,.14) 100%);
}

.store-meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.result-count{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
}
.result-count b{color:var(--text-primary);font-weight:600}

/* Two full width buttons read cleaner than two wrapped labels side by side
   in a 250px card. 44px is the floor here as well: this rule out-specifies the
   coarse pointer rule in site.css, so it has to carry the same number. */
.store-grid .pc-actions,.related-grid .pc-actions{flex-direction:column;gap:8px}
.store-grid .pc-actions .btn,.related-grid .pc-actions .btn{width:100%;min-height:44px}

.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
@media (max-width:1080px){.store-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .store-toolbar{grid-template-columns:1fr}
  .store-grid{gap:12px}
  .store-grid .card-body{padding:14px 13px 16px}
  .store-grid .product-card h3{font-size:14.5px;min-height:2.8em}
  .store-grid .pc-actions{flex-direction:column}
}
/* phones keep two cards across the way the marketplaces do; only the
   narrowest screens drop to one */
@media (max-width:359px){.store-grid{grid-template-columns:1fr}}

/* price on request: the one product without a public price */
.pc-ask{
  margin-top:12px;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--readout-blue);
}

.empty-state{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:clamp(30px,5vw,58px) clamp(20px,3vw,34px);
  text-align:center;
}
.empty-state p{color:var(--text-secondary);max-width:44ch;margin:0 auto}
.empty-state .btn-row{margin-top:22px;justify-content:center}

.loading-row{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);padding:26px 0;
}

/* ==========================================================================
   3. Product
   ========================================================================== */

.product-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,54px);
  align-items:start;
}

.gallery{position:relative}
.gallery-main{
  position:relative;
  aspect-ratio:1/1;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gallery-thumbs button{
  width:74px;height:74px;flex:none;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel-2);
  transition:border-color .26s var(--ease-out),transform .26s var(--ease-out);
}
.gallery-thumbs button:hover{transform:translateY(-2px);border-color:var(--text-secondary)}
.gallery-thumbs button[aria-current="true"]{border-color:var(--accent)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}

.buy-panel{position:relative}
.buy-panel h1{font-size:clamp(26px,2.8vw,40px);font-style:normal;line-height:1.06}
.buy-tagline{margin-top:12px;color:var(--text-secondary);max-width:44ch}

.buy-price{
  margin-top:20px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
}
.buy-price .price{font-size:clamp(24px,2vw,30px)}
.buy-price .price-was{font-size:16px;margin-left:0}
.buy-price .discount-inline{
  position:static;
  padding:5px 9px;border-radius:6px;
  background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent-hover) 100%);
  color:var(--text-primary);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
}
.buy-ask{
  margin-top:20px;
  font-family:var(--mono);font-size:clamp(15px,1.2vw,18px);letter-spacing:.02em;
  color:var(--readout-blue);
}

.variant-label,.qty-label{
  display:block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);
  margin:24px 0 10px;
}
.variant-chips{display:flex;flex-wrap:wrap;gap:9px}
.variant-chip{
  cursor:pointer;
  min-height:44px;
  padding:10px 15px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-secondary);
  font-size:14px;font-weight:500;
  text-align:left;
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out),background-color .26s var(--ease-out);
}
.variant-chip:hover{border-color:var(--text-secondary);color:var(--text-primary)}
.variant-chip[aria-pressed="true"]{
  border-color:var(--accent);color:var(--text-primary);
  background:linear-gradient(180deg,rgba(233,32,42,.2) 0%,rgba(90,15,19,.12) 100%);
}
.variant-chip .v-sku{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--text-secondary);
}

.qty-stepper{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel-2);
}
.qty-stepper button{
  width:46px;min-height:46px;cursor:pointer;
  color:var(--text-primary);font-family:var(--mono);font-size:18px;line-height:1;
  transition:background-color .22s var(--ease-out),color .22s var(--ease-out);
}
.qty-stepper button:hover{background:rgba(233,32,42,.16)}
.qty-stepper button:disabled{color:var(--line-interactive);cursor:not-allowed;background:none}
.qty-stepper input{
  width:56px;text-align:center;border:0;background:none;
  color:var(--text-primary);
  font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input:focus{outline:none}
.qty-stepper:focus-within{border-color:var(--accent)}

.buy-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.buy-actions .btn{flex:1 1 210px}

.trust-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}

.prod-blocks{margin-top:clamp(40px,5vw,70px);display:grid;gap:clamp(16px,2vw,24px)}
.prod-block h2{
  font-size:clamp(19px,1.5vw,24px);font-weight:700;font-stretch:87%;letter-spacing:0;
  margin-bottom:12px;
}
.prod-block p,.prod-block li{color:var(--text-secondary);max-width:68ch}
.prod-block ul{margin:0;padding-left:1.15em;display:grid;gap:8px}
.prod-block li::marker{color:var(--accent-muted)}

.limits-box{
  border:1px solid var(--accent-muted);
  border-radius:var(--radius);
  background:linear-gradient(178deg,rgba(90,15,19,.16) 0%,rgba(20,20,20,.6) 100%);
  padding:clamp(18px,2.2vw,28px);
}
.limits-box .limits-label{
  display:block;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-label);margin-bottom:12px;
}
.limits-box p{color:var(--text-primary);max-width:56ch}

.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
@media (max-width:1080px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:359px){.related-grid{grid-template-columns:1fr}}

/* the sticky mobile buy bar */
.buy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:86;
  display:none;
  align-items:center;gap:12px;
  padding:10px clamp(12px,4vw,20px) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.95);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.buy-bar .bb-price{font-family:var(--mono);font-weight:600;font-size:15px;flex:1 1 auto}
.buy-bar .bb-price small{display:block;font-family:var(--body);font-size:11.5px;color:var(--text-secondary);font-weight:400}
.buy-bar .btn{flex:0 0 auto}

@media (max-width:900px){
  .product-layout{grid-template-columns:1fr}
  .buy-bar{display:flex}
  body.has-buy-bar .wa-float{bottom:82px}
  body.has-buy-bar .site-footer{padding-bottom:96px}
}

/* ==========================================================================
   4. Cart
   ========================================================================== */

.cart-layout{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);
  gap:clamp(22px,3vw,44px);align-items:start;
}
@media (max-width:940px){.cart-layout{grid-template-columns:1fr}}

.cart-table{width:100%;border-collapse:collapse}
.cart-table th{
  text-align:left;padding:0 0 12px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
}
.cart-table th.num,.cart-table td.num{text-align:right}
.cart-table td{padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cart-line{display:flex;gap:14px;align-items:flex-start}
.cart-line img{
  width:78px;height:78px;flex:none;object-fit:cover;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
}
.cart-line .cl-name{font-weight:600;line-height:1.3}
.cart-line .cl-name a:hover{color:var(--accent)}
.cart-line .cl-variant{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);
}
.cart-remove{
  margin-top:9px;cursor:pointer;
  font-size:13px;color:var(--text-secondary);
  border-bottom:1px solid var(--accent-muted);
  padding-bottom:2px;
  transition:color .24s var(--ease-out),border-color .24s var(--ease-out);
}
.cart-remove:hover{color:var(--accent);border-color:var(--accent)}
.cart-table .price{white-space:nowrap}

.cart-summary{position:sticky;top:calc(var(--nav-h) + 18px)}
.sum-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.sum-row span:first-child{color:var(--text-secondary);font-size:14.5px}
.sum-row .price{font-size:15px}
.sum-total{border-bottom:0;padding-top:16px}
.sum-total span:first-child{color:var(--text-primary);font-weight:600;font-size:16px}
.sum-total .price{font-size:clamp(19px,1.6vw,23px)}
.sum-note{
  margin-top:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-secondary);
}
.cart-summary .btn-row{margin-top:20px;flex-direction:column;align-items:stretch}
.cart-summary .btn-row .btn{width:100%}

@media (max-width:640px){
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .cart-table td{border:0;padding:0}
  .cart-table td + td{margin-top:12px}
  .cart-table td.num{text-align:left}
  .cart-table td[data-th]::before{
    content:attr(data-th) "  ";
    font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-secondary);margin-right:10px;
  }
}

/* ==========================================================================
   5. Checkout
   ========================================================================== */

.checkout-layout{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);
  gap:clamp(22px,3vw,44px);align-items:start;
}
@media (max-width:940px){.checkout-layout{grid-template-columns:1fr}}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .span-2{grid-column:1 / -1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}}

.form-legend{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-label);
  margin-bottom:18px;padding:0;
}
.zone-note{
  margin-top:-6px;margin-bottom:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-secondary);
}

.sum-items{display:grid;gap:12px;margin-bottom:16px}
.sum-item{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.sum-item .si-name{font-size:14px;line-height:1.35}
.sum-item .si-qty{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);
}
.sum-item .price{font-size:14px;white-space:nowrap}

.pay-note{
  margin-top:14px;
  font-size:13.5px;color:var(--text-secondary);
}
.pay-helper{
  margin-top:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-secondary);
}

.alert{
  margin-top:16px;
  border:1px solid var(--accent-muted);
  border-radius:var(--radius);
  background:rgba(90,15,19,.16);
  padding:14px 16px;
  font-size:14px;color:var(--text-primary);
}
.alert .btn{margin-top:12px;width:100%}

.order-done{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  padding:clamp(20px,2.6vw,34px);
  margin-bottom:26px;
}
.order-done .on-number{
  font-family:var(--mono);font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:.04em;
  color:var(--accent-label);margin-top:8px;
}
.order-done p{color:var(--text-secondary);margin-top:12px;max-width:58ch}
.order-done .btn-row{margin-top:20px}

/* ==========================================================================
   6. Order status
   ========================================================================== */

.order-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:clamp(22px,3vw,44px);align-items:start}
@media (max-width:940px){.order-layout{grid-template-columns:1fr}}

.status-panel{position:relative}
.status-flag{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:14px;
}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--text-secondary);flex:none}
.status-panel h2{font-size:clamp(22px,2.2vw,32px);max-width:22ch}

.is-pending .status-dot{background:var(--readout-blue)}
.is-pending .status-flag{color:var(--readout-blue)}
.is-paid .status-dot{background:var(--status-ok)}
.is-paid .status-flag{color:var(--status-ok)}
.is-failed .status-dot,.is-missing .status-dot{background:var(--accent)}
.is-failed .status-flag,.is-missing .status-flag{color:var(--accent-label)}

.anim-on .is-pending .status-dot{animation:status-pulse 2.6s var(--ease-in-out) infinite}
@keyframes status-pulse{0%,100%{opacity:.45}50%{opacity:1}}

.order-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
.order-meta div span{
  display:block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:5px;
}
.order-meta div b{font-family:var(--mono);font-weight:600;font-size:14px}

/* ==========================================================================
   7. Partner
   ========================================================================== */

.partner-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.05fr);gap:clamp(24px,3.4vw,54px);align-items:start}
@media (max-width:940px){.partner-layout{grid-template-columns:1fr}}

.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.benefit-list li{
  display:flex;gap:13px;align-items:flex-start;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  color:var(--text-primary);
}
.benefit-list li:last-child{border-bottom:0;padding-bottom:0}
.benefit-list .b-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent-label);
  padding-top:.35em;flex:none;
}
.req-box{margin-top:clamp(26px,3vw,40px)}
.req-box h2{font-size:clamp(18px,1.4vw,22px);margin-bottom:14px}
.req-box ul{margin:0;padding-left:1.15em;display:grid;gap:10px}
.req-box li{color:var(--text-secondary);max-width:56ch}
.req-box li::marker{color:var(--accent-muted)}

.partner-form .checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-bottom:16px}
@media (max-width:560px){.partner-form .checkgrid{grid-template-columns:1fr}}
.partner-form .btn{width:100%}
.form-success{
  margin-top:16px;
  border:1px solid var(--accent-muted);
  border-radius:var(--radius);
  background:rgba(90,15,19,.16);
  padding:14px 16px;font-size:14px;
}

/* ==========================================================================
   8. Shared small parts
   ========================================================================== */

.note-line{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-secondary);
  margin-top:14px;
}
/* a group of checkboxes is labelled by a span, never by a label with no field */
.field > .field-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}

.stack-16{display:grid;gap:16px}
.stack-24{display:grid;gap:24px}

/* The shop pages carry less body copy than the landing page, so the footer's
   column headings would land two levels below the page heading and skip one.
   They are h2 here instead, styled to the same pixel as the landing page's h4
   so the footer reads identically on every page. */
.site-footer .footer-col h2{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  line-height:1.25;text-transform:uppercase;color:var(--text-secondary);
  margin:0 0 14px;font-stretch:normal;
}
.site-footer .mark-ledger h2{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  line-height:1.25;text-transform:uppercase;color:var(--text-secondary);
  margin:0 0 14px;font-stretch:normal;
}

/* every interactive target clears 44px under a coarse pointer */
@media (pointer:coarse){
  .filter-chip,.variant-chip,.cart-remove,.gallery-thumbs button{min-height:44px}
  .gallery-thumbs button{width:64px;height:64px}
  .cart-remove{display:inline-flex;align-items:center}
  /* the whole checkbox row is the target, so the row is what has to clear 44 */
  .partner-form .checkline{min-height:44px;align-items:center;margin-bottom:0}
}

/* ==========================================================================
   9. Reduced motion and short screens
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .rule-ticks .tick-rule{stroke-dashoffset:0!important}
  .anim-on .is-pending .status-dot{animation:none}
}
body.pinned .rule-ticks .tick-rule{stroke-dashoffset:0;transition:none}
body.pinned .status-dot{animation:none}