/* =============================================================================
   SHOPIMAL — WOOCOMMERCE TEMPLATES
   Build Brief §7.2-7.7. Shop, product, cart, checkout, confirmation, account.
   Mobile-first. Every value comes from tokens.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. SHARED SHELL
   -------------------------------------------------------------------------- */

.sh-shop{ max-width:var(--container); margin-inline:auto; padding:var(--sp-6) var(--gutter) var(--sp-11); }
.sh-shop__head{ margin-bottom:var(--sp-6); }
.sh-shop__title{ margin:0 0 var(--sp-2); }
.sh-shop__count{ font-size:14.5px; color:var(--slate-500); }

.sh-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-4); flex-wrap:wrap;
}
.sh-toolbar select{ width:auto; min-width:190px; }

/* -----------------------------------------------------------------------------
   2. SHOP LAYOUT — §7.2
   -------------------------------------------------------------------------- */

.sh-shop__body{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
@media (min-width:1024px){
  .sh-shop__body{ grid-template-columns:260px minmax(0,1fr); gap:var(--sp-8); }
}

/* Filter sidebar: a full-screen sheet on mobile, a column on desktop. */
.sh-filters{
  position:fixed; inset:0; z-index:1000; background:var(--slate-0);
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform var(--dur) var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.sh-filters.is-open{ transform:translateY(0); }
.sh-filters__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--gutter); border-bottom:1px solid var(--slate-100);
  position:sticky; top:0; background:var(--slate-0); z-index:2;
}
.sh-filters__body{ padding:var(--sp-4) var(--gutter) var(--sp-8); flex:1 1 auto; }
.sh-filters__foot{
  position:sticky; bottom:0; background:var(--slate-0);
  border-top:1px solid var(--slate-100); padding:var(--sp-4) var(--gutter);
  display:flex; gap:var(--sp-3);
}
@media (min-width:1024px){
  .sh-filters{
    position:static; transform:none; overflow:visible;
    background:transparent; display:block;
  }
  .sh-filters__head,.sh-filters__foot{ display:none; }
  .sh-filters__body{ padding:0; }
}

.sh-filter{ padding-block:var(--sp-5); border-top:1px solid var(--slate-100); }
.sh-filter:first-child{ border-top:0; padding-top:0; }
.sh-filter__title{
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-500);
  margin:0 0 var(--sp-3);
}
.sh-filter__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sh-filter__list label{ display:flex; align-items:center; gap:10px; font-size:14.5px; cursor:pointer; color:var(--slate-700); }
.sh-filter__count{ margin-left:auto; font-size:12.5px; color:var(--slate-500); font-variant-numeric:tabular-nums; }

.sh-range{ display:flex; align-items:center; gap:var(--sp-3); }
.sh-range input[type="number"]{ width:100%; }
.sh-range span{ color:var(--slate-500); }

.sh-filters__open{ display:inline-flex; }
@media (min-width:1024px){ .sh-filters__open{ display:none; } }

/* Active filter pills above the grid. */
.sh-activefilters{ display:flex; flex-wrap:wrap; gap:var(--sp-2); padding-bottom:var(--sp-4); }
.sh-activefilters:empty{ display:none; }
.sh-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blue-50); color:var(--blue-800);
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  padding:6px 12px; border-radius:var(--radius-pill);
  border:0; cursor:pointer;
}
.sh-chip:hover{ background:var(--blue-100); }
.sh-chip--clear{ background:transparent; color:var(--blue-600); text-decoration:underline; }

/* -----------------------------------------------------------------------------
   3. PRODUCT GRID — §6.5
   -------------------------------------------------------------------------- */

.sh-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--sp-6);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){ .sh-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .sh-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Inside the shop's two-column body the grid is narrower, so it drops to 3. */
@media (min-width:1024px) and (max-width:1279px){
  .sh-shop__body .sh-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.sh-grid--related{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .sh-grid--related{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Horizontal scroll with a 24px peek on mobile, per §7.1 sections 6 and 8. */
@media (max-width:767px){
  .sh-grid--scroll{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:var(--sp-4); padding-bottom:var(--sp-3);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .sh-grid--scroll::-webkit-scrollbar{ display:none; }
  .sh-grid--scroll > li{ flex:0 0 calc(70% - var(--sp-2)); scroll-snap-align:start; }
}

.sh-pcard__img a{ display:block; width:100%; height:100%; }
.sh-pcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-pcard--out .sh-pcard__img{ opacity:.55; }
.sh-pcard__save{ margin-left:auto; }

/* Empty state — §8.3 */
.sh-empty{ text-align:center; padding:var(--sp-11) var(--sp-5); }
.sh-empty__icon{
  width:64px; height:64px; border-radius:50%; background:var(--slate-100);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--sp-4); color:var(--slate-400);
}
.sh-empty h2{ font-size:19px; margin:0 0 6px; }
.sh-empty p{ font-size:14.5px; color:var(--slate-500); margin:0 0 var(--sp-5); }

.sh-pagination-wrap{ display:flex; justify-content:center; padding-top:var(--sp-8); }

/* -----------------------------------------------------------------------------
   4. PRODUCT DETAIL — §7.3
   -------------------------------------------------------------------------- */

.sh-product{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
@media (min-width:1024px){
  .sh-product{ grid-template-columns:55fr 45fr; gap:var(--sp-8); }
}

.sh-gallery__main{
  aspect-ratio:1; background:var(--slate-50); border-radius:var(--radius);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.sh-gallery__main img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-gallery__thumbs{
  display:flex; gap:var(--sp-2); margin-top:var(--sp-3);
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.sh-gallery__thumbs::-webkit-scrollbar{ display:none; }
.sh-gallery__thumb{
  flex:0 0 72px; width:72px; height:72px; padding:0;
  border:1px solid var(--slate-200); border-radius:12px; overflow:hidden;
  background:var(--slate-50); cursor:pointer;
}
.sh-gallery__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-gallery__thumb[aria-current="true"]{ border:2px solid var(--blue-600); }

.sh-buybox__eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-500);
}
.sh-buybox__eyebrow a{ color:inherit; text-decoration:none; }
.sh-buybox h1{ margin:8px 0 10px; }
.sh-buybox__rating{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--slate-500); }
.sh-buybox__rating a{ color:var(--blue-600); text-decoration:none; }
.sh-buybox__price{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:var(--sp-4) 0; }
.sh-save{
  background:var(--pink-600); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  padding:4px 11px; border-radius:var(--radius-pill); letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.sh-buybox__short{ font-size:15px; color:var(--slate-600); line-height:1.6; margin:0 0 var(--sp-5); }

.sh-variant{ margin-bottom:var(--sp-5); }
.sh-variant__label{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--slate-700);
  margin-bottom:var(--sp-2);
}
.sh-variant__label a{ font-size:13px; }
.sh-sizes{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.sh-sizes button{
  min-width:46px; height:44px; padding:0 14px;
  border:1.5px solid var(--slate-300); border-radius:var(--radius-pill);
  background:var(--slate-0); cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--slate-700);
  transition:all var(--dur) var(--ease);
}
.sh-sizes button:hover{ border-color:var(--blue-500); }
.sh-sizes button[aria-pressed="true"]{ border:2px solid var(--blue-600); background:var(--blue-50); color:var(--blue-800); }
.sh-sizes button[disabled]{ color:var(--slate-300); border-color:var(--slate-200); text-decoration:line-through; cursor:not-allowed; }

.sh-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.sh-swatch{
  width:40px; height:40px; border-radius:50%; padding:0;
  border:2px solid var(--slate-200); cursor:pointer; position:relative;
}
.sh-swatch[aria-pressed="true"]{ border-color:var(--blue-600); box-shadow:0 0 0 2px var(--blue-100); }
.sh-swatch[disabled]{ opacity:.35; cursor:not-allowed; }

.sh-buybox__actions{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-5); }
.sh-buybox__qtyrow{ display:flex; gap:var(--sp-3); align-items:center; }

.sh-delivery{
  background:var(--blue-50); border-radius:var(--radius);
  padding:14px 16px; font-size:13.8px; color:var(--blue-800);
  margin-top:var(--sp-5); line-height:1.6;
}
.sh-trustrow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--slate-100);
  text-align:center;
}
.sh-trustrow div{ font-size:12.5px; color:var(--slate-600); line-height:1.4; }
.sh-trustrow svg{ color:var(--blue-600); margin-bottom:6px; }

/* Sticky add-to-cart bar on mobile. */
.sh-stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:490;
  background:var(--slate-0); border-top:1px solid var(--slate-200);
  padding:10px var(--gutter); display:flex; gap:var(--sp-3); align-items:center;
  box-shadow:0 -4px 16px rgba(7,26,85,.08);
  transform:translateY(110%); transition:transform var(--dur) var(--ease);
}
.sh-stickybuy.is-in{ transform:translateY(0); }
.sh-stickybuy .sh-btn{ flex:1; }
@media (min-width:1024px){ .sh-stickybuy{ display:none; } }
/* Keep the Messenger button clear of the bar. */
@media (max-width:1023px){
  body.sh-has-stickybuy .sh-messenger{ bottom:calc(var(--sp-4) + 68px); }
}

.sh-tabs-wrap{ margin-top:var(--sp-9); }
.sh-specs{ width:100%; border-collapse:collapse; font-size:14.5px; }
.sh-specs th,.sh-specs td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--slate-100); vertical-align:top; }
.sh-specs th{ font-family:var(--font-display); font-weight:600; color:var(--slate-500); width:40%; }

.sh-section-title{ margin:var(--sp-9) 0 var(--sp-5); }

/* -----------------------------------------------------------------------------
   5. CART — §7.4
   -------------------------------------------------------------------------- */

.sh-cart{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
@media (min-width:1024px){ .sh-cart{ grid-template-columns:65fr 35fr; gap:var(--sp-8); } }

.sh-cartline{
  display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:var(--sp-4);
  padding:var(--sp-5) 0; border-bottom:1px solid var(--slate-100); align-items:start;
}
.sh-cartline__thumb{
  width:80px; height:80px; border-radius:12px; overflow:hidden;
  background:var(--slate-50); display:block;
}
.sh-cartline__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-cartline__name{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--blue-900); text-decoration:none; display:block; }
.sh-cartline__variant{ font-size:13px; color:var(--slate-500); margin-top:3px; }
.sh-cartline__unit{ font-size:13px; color:var(--slate-500); margin-top:3px; font-variant-numeric:tabular-nums; }
.sh-cartline__controls{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); flex-wrap:wrap; }
.sh-cartline__total{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--blue-900); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.sh-cartline__remove{
  background:none; border:0; cursor:pointer; color:var(--slate-500);
  font-size:13px; text-decoration:underline; padding:0;
}
.sh-cartline__remove:hover{ color:var(--error); }

.sh-summary{
  background:var(--slate-50); border-radius:var(--radius); padding:var(--sp-6);
}
@media (min-width:1024px){ .sh-summary{ position:sticky; top:calc(72px + var(--sp-6)); } }
.sh-summary h2{ font-size:18px; margin:0 0 var(--sp-4); }
.sh-summary__row{ display:flex; justify-content:space-between; gap:var(--sp-4); font-size:14.5px; padding:7px 0; }
.sh-summary__row span:last-child{ font-variant-numeric:tabular-nums; }
.sh-summary__row--total{
  border-top:1px solid var(--slate-200); margin-top:9px; padding-top:14px;
  font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--blue-900);
}
.sh-free{ color:var(--success); font-weight:600; }
.sh-summary__actions{ margin-top:var(--sp-5); display:grid; gap:var(--sp-3); justify-items:center; }
.sh-summary__actions .sh-btn{ width:100%; }

.sh-nudge{ margin:var(--sp-5) 0; }
.sh-nudge__text{ font-size:13.5px; color:var(--slate-600); margin-bottom:8px; }
.sh-nudge__text strong{ color:var(--blue-900); font-family:var(--font-display); }

.sh-coupon summary{
  cursor:pointer; font-size:14px; color:var(--blue-600); list-style:none;
  padding:var(--sp-3) 0; text-decoration:underline; text-underline-offset:2px;
}
.sh-coupon summary::-webkit-details-marker{ display:none; }
.sh-coupon__row{ display:flex; gap:var(--sp-2); }

/* Slide-in cart drawer — §14 "both". */
.sh-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1000;
  width:min(92vw, 420px); background:var(--slate-0);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--dur) var(--ease);
  overflow:hidden;
}
.sh-drawer.is-open{ transform:translateX(0); }
.sh-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--slate-100); flex:0 0 auto;
}
.sh-drawer__head h2{ margin:0; font-size:18px; }
.sh-drawer__body{ flex:1 1 auto; overflow-y:auto; padding:0 var(--sp-5); overscroll-behavior:contain; }
.sh-drawer__foot{ flex:0 0 auto; border-top:1px solid var(--slate-100); padding:var(--sp-5); background:var(--slate-0); }
.sh-drawer .sh-cartline{ grid-template-columns:64px minmax(0,1fr) auto; }
.sh-drawer .sh-cartline__thumb{ width:64px; height:64px; }

/* -----------------------------------------------------------------------------
   6. CHECKOUT — §7.5
   -------------------------------------------------------------------------- */

.sh-checkout{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
@media (min-width:1024px){ .sh-checkout{ grid-template-columns:58fr 42fr; gap:var(--sp-8); } }

.sh-fieldset{ margin-bottom:var(--sp-7); }
.sh-fieldset > h2{ font-size:18px; margin:0 0 var(--sp-4); }
.sh-fieldrow{ display:grid; grid-template-columns:1fr; gap:0 var(--sp-4); }
@media (min-width:600px){ .sh-fieldrow--2{ grid-template-columns:1fr 1fr; } }

.sh-radiocards{ display:grid; gap:var(--sp-3); }
.sh-radiocards .sh-radcard{ align-items:center; }
.sh-radcard__body{ flex:1 1 auto; }
.sh-radcard__price{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--blue-900); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sh-radcard__note{ font-size:12.5px; color:var(--slate-500); margin-top:6px; }

.sh-consent{ margin:var(--sp-6) 0; }

/* The one gradient button on the entire site. Build Brief section 3.5, hard rule 3. */
.sh-place-order{
  width:100%; min-height:56px; font-size:16.5px;
  background:var(--grad); color:#fff; border:0;
  border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  transition:filter var(--dur) var(--ease);
}
.sh-place-order:hover{ filter:brightness(1.06); }
.sh-place-order:disabled{ background:var(--slate-100); color:var(--slate-400); cursor:not-allowed; filter:none; }

.sh-ordersummary{ background:var(--slate-50); border-radius:var(--radius); padding:var(--sp-6); }
@media (min-width:1024px){ .sh-ordersummary{ position:sticky; top:calc(72px + var(--sp-6)); } }
.sh-ordersummary__item{ display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--slate-200); }
.sh-ordersummary__item:last-of-type{ border-bottom:0; }
.sh-ordersummary__thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--slate-0); flex:0 0 56px; }
.sh-ordersummary__thumb img{ width:100%; height:100%; object-fit:cover; }
.sh-ordersummary__name{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--blue-900); line-height:1.35; }
.sh-ordersummary__meta{ font-size:12.5px; color:var(--slate-500); margin-top:3px; }
.sh-ordersummary__price{ margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--blue-900); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Mobile: the summary collapses into a bar at the top. */
.sh-summarybar{ margin-bottom:var(--sp-5); }
.sh-summarybar summary{
  list-style:none; cursor:pointer;
  background:var(--slate-50); border-radius:var(--radius);
  padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  font-size:14px; color:var(--slate-600);
}
.sh-summarybar summary::-webkit-details-marker{ display:none; }
.sh-summarybar summary strong{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--blue-900); font-variant-numeric:tabular-nums; }
@media (min-width:1024px){ .sh-summarybar{ display:none; } }

/* Reduced checkout header — §7.5 */
.sh-header--checkout .sh-nav,
.sh-header--checkout .sh-header__actions,
.sh-header--checkout .sh-header__burger,
.sh-header--checkout .sh-search{ display:none !important; }
.sh-header--checkout .sh-header__brand{ position:static; transform:none; }
.sh-header--checkout .sh-header__inner{ justify-content:space-between; }
.sh-secure{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--success);
}

/* -----------------------------------------------------------------------------
   7. ORDER CONFIRMATION — §7.6
   -------------------------------------------------------------------------- */

.sh-thanks{ max-width:760px; margin-inline:auto; text-align:center; padding-block:var(--sp-8); }
.sh-thanks__tick{
  width:72px; height:72px; border-radius:50%; background:var(--success-bg); color:var(--success);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-5);
}
.sh-thanks h1{ margin-bottom:var(--sp-3); }
.sh-thanks__meta{ font-size:15px; color:var(--slate-600); }
.sh-thanks__meta strong{ font-family:var(--font-display); color:var(--blue-900); font-variant-numeric:tabular-nums; }
.sh-thanks__card{
  text-align:left; background:var(--slate-0); border:1px solid var(--slate-200);
  border-radius:var(--radius); padding:var(--sp-6); margin-top:var(--sp-7);
}
.sh-thanks__actions{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-7); }
.sh-bank{
  text-align:left; border:2px solid var(--warning); background:var(--warning-bg);
  color:var(--warning-fg); border-radius:var(--radius); padding:var(--sp-5); margin-top:var(--sp-6);
}
.sh-bank h2{ font-size:16px; color:var(--warning-fg); margin:0 0 var(--sp-3); }

/* -----------------------------------------------------------------------------
   8. ACCOUNT AND TRACKING — §7.7
   -------------------------------------------------------------------------- */

.sh-account{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); align-items:start; }
@media (min-width:1024px){ .sh-account{ grid-template-columns:240px minmax(0,1fr); gap:var(--sp-8); } }

.sh-account__nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; }
.sh-account__nav ul::-webkit-scrollbar{ display:none; }
.sh-account__nav a{
  display:block; white-space:nowrap; padding:11px 16px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  color:var(--slate-600); text-decoration:none; background:var(--slate-50);
}
.sh-account__nav a:hover{ background:var(--blue-50); color:var(--blue-700); }
.sh-account__nav .is-active a{ background:var(--blue-900); color:#fff; }
@media (min-width:1024px){
  .sh-account__nav ul{ flex-direction:column; gap:6px; overflow:visible; }
}

.sh-timeline{ list-style:none; margin:var(--sp-6) 0 0; padding:0; }
.sh-timeline li{ display:flex; gap:var(--sp-4); padding-bottom:var(--sp-6); position:relative; }
.sh-timeline li:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--slate-200);
}
.sh-timeline li.is-done:not(:last-child)::before{ background:var(--success); }
.sh-timeline__dot{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:var(--slate-100); color:var(--slate-400);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.sh-timeline li.is-done .sh-timeline__dot{ background:var(--success-bg); color:var(--success); }
.sh-timeline__label{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--blue-900); }
.sh-timeline__when{ font-size:13px; color:var(--slate-500); margin-top:2px; }

/* -----------------------------------------------------------------------------
   9. 404 AND SEARCH
   -------------------------------------------------------------------------- */

.sh-404{ max-width:640px; margin-inline:auto; text-align:center; padding-block:var(--sp-11); }
.sh-404__search{ display:flex; gap:var(--sp-2); margin:var(--sp-6) 0; }
.sh-404__cats{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }

/* -----------------------------------------------------------------------------
   10. WOOCOMMERCE CHROME WE DO NOT WANT
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination,
.woocommerce ul.products,
.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
.woocommerce-cart .cart-collaterals{ display:none; }

/* The child theme renders its own; only unhide what we build. */
.sh-shop .woocommerce-result-count,
.sh-shop .woocommerce-ordering{ display:block; }

.woocommerce-cart-form__contents,
.woocommerce .quantity .qty{ /* replaced by .sh-qty */ }

.woocommerce form .form-row{ padding:0; margin:0 0 var(--sp-4); }
.woocommerce form .form-row label{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--slate-700);
  display:block; margin-bottom:6px;
}
.woocommerce form .form-row .required{ color:var(--pink-600); text-decoration:none; border:0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{ width:100%; float:none; }
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{ border:1px solid var(--slate-200); border-radius:var(--radius); padding:var(--sp-5); }
.select2-container--default .select2-selection--single{
  height:48px; border:1.5px solid var(--slate-400); border-radius:var(--radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:45px; padding-left:14px; color:var(--slate-700); }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; }

/* -----------------------------------------------------------------------------
   11. NARROW PRODUCT CARDS

   At 390px a two-up grid leaves about 127px of usable card width. The default
   button padding (28px each side) and nowrap pushed 'Add to cart' outside the
   card, and long unbroken product names were being ellipsised mid-word on
   every line. Build Brief section 6.5 and the 390px-first rule.
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  .sh-grid{ gap:var(--sp-4); }
  .sh-pcard__body{ padding:var(--sp-3); }
  .sh-pcard__add .sh-btn{ padding:12px 10px; font-size:13.5px; white-space:normal; }
  .sh-pcard__title{ font-size:14.5px; }
  .sh-pcard__stock{ font-size:11.5px; }
}

/* Long model names must wrap rather than get clipped. */
.sh-pcard__title{ overflow-wrap:anywhere; }

/* -----------------------------------------------------------------------------
   12. WISHLIST

   TI Wishlist renders a full-width text link. Section 6.5 asks for a heart in
   the top-right corner of the image, so the label is hidden from sight but
   kept for screen readers.
   -------------------------------------------------------------------------- */

.sh-pcard__img .tinv-wishlist{
  position:absolute; top:12px; right:12px; z-index:3; margin:0; padding:0;
}
.sh-pcard__img .tinv-wishlist .tinvwl_add_to_wishlist_button{
  width:32px; height:32px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.92); color:var(--slate-400);
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; font-size:15px; line-height:1;
  box-shadow:0 1px 3px rgba(7,26,85,.12);
  transition:color var(--dur) var(--ease);
}
.sh-pcard__img .tinv-wishlist .tinvwl_add_to_wishlist_button:hover,
.sh-pcard__img .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list{ color:var(--pink-600); }
.sh-pcard__img .tinv-wishlist .tinvwl_add_to_wishlist-text,
.sh-pcard__img .tinv-wishlist .tinvwl-tooltip{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* -----------------------------------------------------------------------------
   13. ONE SET OF GUTTERS

   Astra's container adds its own horizontal padding on top of .sh-shop's
   gutter, which at 390px cost roughly 40px of card width and forced the
   product card CTA onto three lines. The child theme owns the gutter.
   -------------------------------------------------------------------------- */

.woocommerce-page #primary,
.woocommerce-page #content > .ast-container,
.woocommerce #primary,
.search-results #primary,
.error404 #primary{
  padding-left:0; padding-right:0; margin-left:0; margin-right:0; max-width:100%;
}
.woocommerce-page #content > .ast-container,
.search-results #content > .ast-container,
.error404 #content > .ast-container{ max-width:100%; padding-left:0; padding-right:0; }
.woocommerce-page .site-content .ast-container{ display:block; }

/* -----------------------------------------------------------------------------
   14. DISABLED ADD TO CART

   Before a variant is chosen WooCommerce fades its own button, which reads as
   a washed-out pink rather than a disabled control. Section 6.4 has a token
   for this: slate-100 on slate-400.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart button.disabled,
button.single_add_to_cart_button.disabled,
button.single_add_to_cart_button:disabled{
  background:var(--slate-100) !important;
  color:var(--slate-400) !important;
  cursor:not-allowed; opacity:1;
}

/* The buy box add-to-cart row lines the stepper up with the CTA. */
.woocommerce div.product form.cart{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin:0; }
.woocommerce div.product form.cart.variations_form{ display:block; }
.woocommerce div.product form.cart .sh-qty{ flex:0 0 auto; }
.woocommerce div.product form.cart button.single_add_to_cart_button{ flex:1 1 200px; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.woocommerce div.product form.cart table.variations{ width:100%; margin-bottom:var(--sp-5); }
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th{ display:block; padding:0; text-align:left; }
.woocommerce div.product form.cart table.variations label{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--slate-700);
  display:block; margin-bottom:var(--sp-2);
}
.woocommerce div.product form.cart .reset_variations{ font-size:13px; color:var(--blue-600); }

/* -----------------------------------------------------------------------------
   15. WOOCOMMERCE NOTICE BUTTONS
   Only seen on the no-JavaScript path, but it still has to be on-brand.
   -------------------------------------------------------------------------- */

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  background:var(--pink-600); color:#fff; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600; font-size:14px;
  padding:10px 20px; min-height:40px; border:0;
}

/* -----------------------------------------------------------------------------
   SIZE GUIDE - Build Brief 7.3, item 7
   A text trigger rather than a button: it opens a reference table, it does not
   act on the order. Astra pads every button 15px 30px, hence the reset.
   -------------------------------------------------------------------------- */

.sh-sizeguide{ margin:0 0 var(--sp-3); }

.sh-sizeguide__btn{
  -webkit-appearance:none; appearance:none;
  background:none !important; border:0; padding:0 !important; margin:0;
  min-height:0; line-height:1.4; cursor:pointer;
  font-family:var(--font-body); font-size:15px; font-weight:600;
  color:var(--sh-link) !important; text-decoration:underline; text-underline-offset:3px;
}
.sh-sizeguide__btn:hover{ color:var(--blue-700) !important; }

.sh-sizeguide__note{ margin:0 0 var(--sp-4); color:var(--sh-muted); font-size:14px; }

.sh-modal .sh-specs{ width:100%; }
.sh-modal .sh-specs th,
.sh-modal .sh-specs td{ font-variant-numeric:tabular-nums; }


/* Astra styles every button element; the modal close is an icon, not a CTA. */
.sh-modal__close{
  background:none !important; background-color:transparent !important;
  color:var(--slate-500) !important; border:0 !important;
  padding:0 !important; min-height:0 !important; min-width:0 !important;
  width:36px !important; height:36px !important;
  border-radius:var(--radius-pill) !important; box-shadow:none !important;
}
.sh-modal__close:hover{ background:var(--slate-100) !important; color:var(--slate-700) !important; }
.sh-modal__close svg{ width:20px; height:20px; flex:0 0 auto; }


/* Astra uppercases the reset link. It is a quiet escape hatch, not a shout. */
.woocommerce div.product form.cart .reset_variations{
  text-transform:none !important; letter-spacing:0 !important;
  font-family:var(--font-body); font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
}


/* A link in a block of text cannot rely on colour alone: blue-600 against
   slate-700 body copy is 1.58:1, well under the 3:1 that would let it. */
.sh-consent a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-privacy-policy-text a,
.woocommerce-privacy-policy-link{
  text-decoration:underline !important; text-underline-offset:2px;
}


/* -----------------------------------------------------------------------------
   NARROW PHONES
   The sort control is the one thing on the shop that will not fit a 320px
   screen beside the result count - it overflowed by three pixels, which is
   enough to put a horizontal scrollbar on the narrowest phones still in use
   here. Let the toolbar wrap instead.
   -------------------------------------------------------------------------- */

@media (max-width:400px){
  .sh-toolbar{ flex-wrap:wrap; row-gap:var(--sp-3); }
  /* min-width:0 is the fix that matters: a flex item defaults to min-width
     auto, so a select refuses to shrink below its content and pushes the row
     past the viewport. */
  .sh-toolbar > *{ min-width:0; max-width:100%; }
  .sh-orderby, .sh-toolbar select{ width:100%; max-width:100%; }
}

/* Ticked highlights under the price. Icons inherit the body colour so the
   list reads as fact rather than as a row of green approvals. */
.sh-highlights {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.sh-highlights li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: var(--slate-700);
}
.sh-highlights svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--blue-600);
}

/* FAQ accordion. Native details/summary: keyboard and screen reader support
   come free, and there is no script to get out of step with the markup. */
.sh-faq__item {
	border-bottom: 1px solid var(--slate-200);
}
.sh-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--slate-900);
	list-style: none;
}
.sh-faq__q::-webkit-details-marker {
	display: none;
}
.sh-faq__q::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--slate-500);
}
.sh-faq__item[open] .sh-faq__q::after {
	content: '\2212';
}
.sh-faq__q:focus-visible {
	outline: 2px solid var(--blue-600);
	outline-offset: 2px;
}
.sh-faq__a {
	padding: 0 0 16px;
	color: var(--slate-700);
	font-size: 15px;
	line-height: 1.6;
	max-width: 68ch;
}
.sh-faq__a p {
	margin: 0 0 8px;
}
.sh-faq__a p:last-child {
	margin-bottom: 0;
}

/* Live activity - real counts, rendered only when there is something true to say. */
.sh-activity{ display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-4); }
.sh-activity[hidden]{ display:none; }
.sh-activity > div{ display:flex; align-items:center; gap:var(--sp-2); font-size:14px; color:var(--slate-600); }
.sh-activity svg{ flex:none; color:var(--blue-600); }