/* ============================================================
   PADDOCK BUSINESS CONNECT — MERCH SHOP
   Light theme. Loaded AFTER css/styles.css and reuses its tokens
   (--asphalt* surfaces, --cream* text, --amber accent, --line borders)
   so the shop sits in the same visual system as index.html.

   Covers: shop.php (hero, search, filters, product grid, cart drawer),
   single.php (gallery + buy box) and checkout.php (order review).
   ============================================================ */

/* ------------------------------------------------------------
   Shop-local tokens
------------------------------------------------------------ */
/* An author `display:` beats the UA stylesheet's [hidden] rule, so a
   .checkout-ref{display:inline-block} would still paint while hidden.
   Make the attribute win everywhere. */
[hidden]{ display:none !important; }

:root{
  --shop-radius: 4px;
  --shop-shadow: 0 1px 3px rgba(22,24,28,.06);
  --shop-shadow-lift: 0 10px 30px rgba(22,24,28,.10);
  --shop-ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   NAV — cart button + count badge
============================================================ */
.nav-cart{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt);
  color:var(--cream);
  transition:border-color .15s, color .15s;
}
.nav-cart:hover{ border-color:var(--amber); color:var(--amber); }
.nav-cart svg{ width:17px; height:17px; }
.cart-count{
  min-width:19px; height:19px;
  padding:0 5px;
  border-radius:10px;
  background:var(--amber);
  color:#FFFFFF;
  font-size:10.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.cart-count.is-empty{ display:none; }

/* ============================================================
   HERO — shop.php
============================================================ */
.shop-hero{
  position:relative;
  padding:76px 0 64px;
  background:var(--asphalt-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Faint racing stripe sweeping behind the copy. */
.shop-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 320px at 88% -10%, rgba(214,40,40,.10), transparent 62%),
    repeating-linear-gradient(115deg, rgba(22,24,28,.020) 0 1px, transparent 1px 46px);
  pointer-events:none;
}
.shop-hero-inner{ position:relative; }
.shop-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
}
.shop-hero h1{
  font-size:clamp(34px,5.2vw,60px);
  line-height:1.02;
  margin:14px 0 0;
}
.shop-hero h1 span{ color:var(--amber); display:block; }
.shop-hero .lede{
  color:var(--cream-dim);
  font-size:16.5px;
  max-width:520px;
  margin-top:18px;
}
.shop-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.shop-hero-stats{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:36px;
  border-top:1px solid var(--line);
}
.shop-hero-stat{
  padding:16px 26px 0 0;
  margin-right:26px;
  border-right:1px solid var(--line);
  padding-right:26px;
}
.shop-hero-stat:last-child{ border-right:none; }
.shop-hero-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:26px;
  line-height:1;
}
.shop-hero-stat span{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey);
}

/* Hero art panel — stacked product cards */
.shop-hero-art{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt);
  box-shadow:var(--shop-shadow-lift);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.shop-hero-art img{
  width:100%; height:100%;
  object-fit:cover;
}
.shop-hero-badge{
  position:absolute; top:16px; left:16px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--asphalt);
  border:1px solid var(--line);
  padding:7px 11px;
  border-radius:2px;
}
.shop-hero-badge i{
  width:6px; height:6px; border-radius:50%;
  background:var(--green-light);
  display:inline-block;
}

/* ============================================================
   SEARCH + FILTER BAR
============================================================ */
.shop-toolbar{
  /* 64px nav + its 1px bottom border. */
  position:sticky; top:65px; z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.shop-toolbar-inner{
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.shop-search{
  position:relative;
  flex:1 1 320px;
  min-width:0;
}
.shop-search input{
  width:100%;
  height:46px;
  padding:0 44px 0 44px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt-2);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:15px;
  transition:border-color .18s, background .18s;
}
.shop-search input::placeholder{ color:var(--grey-dim); }
.shop-search input:focus{
  outline:none;
  border-color:var(--amber);
  background:var(--asphalt);
}
.shop-search-icon{
  position:absolute; left:15px; top:50%;
  transform:translateY(-50%);
  width:17px; height:17px;
  color:var(--grey);
  pointer-events:none;
}
.shop-search-clear{
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  width:22px; height:22px;
  border-radius:50%;
  display:none;
  align-items:center; justify-content:center;
  background:var(--asphalt-3);
  color:var(--cream-dim);
  font-size:13px; line-height:1;
}
.shop-search-clear.is-visible{ display:inline-flex; }
.shop-search-clear:hover{ background:var(--amber); color:#FFFFFF; }

.shop-chips{
  display:flex; gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.shop-chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt);
  color:var(--cream-dim);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover{ border-color:var(--grey); color:var(--cream); }
.chip.is-active{
  background:var(--amber);
  border-color:var(--amber);
  color:#FFFFFF;
}

.shop-result-note{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
  margin-top:4px;
}

/* ============================================================
   PRODUCT GRID
============================================================ */
.products-section{ padding:56px 0 80px; }

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px 22px;
}

.product-card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt);
  overflow:hidden;
  transition:border-color .2s var(--shop-ease), transform .2s var(--shop-ease), box-shadow .2s var(--shop-ease);
}
.product-card:hover{
  border-color:var(--grey-dim);
  transform:translateY(-3px);
  box-shadow:var(--shop-shadow-lift);
}

.product-card__media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--asphalt-3);
  overflow:hidden;
  display:block;
}
.product-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--shop-ease);
}
.product-card:hover .product-card__media img{ transform:scale(1.06); }

.product-badge{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:2px;
  background:var(--cream);
  color:#FFFFFF;
}
.product-badge--limited{ background:var(--amber); }
.product-badge--low{ background:var(--asphalt); color:var(--amber); border:1px solid var(--amber); }
.product-badge--sold{ background:var(--grey-dim); }

/* Featured sits top-RIGHT, opposite the stock badge, so a product can be
   both "Limited Edition" and "Featured" without the two colliding. */
.product-badge--featured{
  left:auto; right:12px;
  background:var(--amber);
  display:inline-flex; align-items:center; gap:4px;
}
.product-badge--featured svg{ width:10px; height:10px; }

.product-card__body{
  padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.product-card__cat{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey);
}
.product-card__name{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  text-transform:uppercase;
  line-height:1.15;
  letter-spacing:.01em;
}
.product-card__name a:hover{ color:var(--amber); }
.product-card__desc{
  font-size:13px;
  color:var(--cream-dim);
  line-height:1.5;
}
.product-card__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:6px 10px;
  flex-wrap:wrap;              /* a struck-through compare price pushes stock to its own row */
  margin-top:auto;
  padding-top:8px;
}
.product-card__price{
  font-family:var(--font-mono);
  font-size:15.5px;
  font-weight:600;
  white-space:nowrap;          /* never split "KES 9,500" from its old price */
}
.product-card__price s{
  color:var(--grey-dim);
  font-size:12.5px;
  font-weight:400;
  margin-left:6px;
}
.product-card__stock{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--cream-dim);
  white-space:nowrap;
}
.stock-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.stock-dot--ok{ background:var(--green-light); }
.stock-dot--low{ background:var(--amber); }
.stock-dot--out{ background:var(--grey-dim); }

/* Colour swatches are not shown on grid cards — colours are chosen on
   single.php, where .colour-opt renders the pickable version. */
.product-sizes{
  display:flex; gap:5px; flex-wrap:wrap;
}
.product-sizes span{
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--cream-dim);
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 6px;
}

.product-card__actions{ display:flex; gap:8px; margin-top:10px; }
.add-btn{
  flex:1;
  padding:11px 12px;
  border:1px solid var(--cream);
  border-radius:var(--shop-radius);
  background:var(--cream);
  color:#FFFFFF;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .16s, border-color .16s, transform .12s;
}
.add-btn:hover{ background:var(--amber); border-color:var(--amber); }
.add-btn:active{ transform:scale(.98); }
.add-btn:disabled{
  background:var(--asphalt-3);
  border-color:var(--line);
  color:var(--grey-dim);
  cursor:not-allowed;
}
.view-btn{
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream-dim);
  transition:border-color .16s, color .16s;
}
.view-btn:hover{ border-color:var(--amber); color:var(--amber); }

/* Empty / loading states */
.shop-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:72px 24px;
  border:1px dashed var(--line);
  border-radius:var(--shop-radius);
  color:var(--cream-dim);
}
.shop-empty h3{ font-size:20px; margin-bottom:8px; }
.shop-empty p{ font-size:14.5px; }
.shop-skeleton{
  aspect-ratio:1/1.35;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:linear-gradient(100deg, var(--asphalt-2) 30%, var(--asphalt-3) 50%, var(--asphalt-2) 70%);
  background-size:200% 100%;
  animation:shopShimmer 1.2s infinite linear;
}
@keyframes shopShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ============================================================
   CART DRAWER
============================================================ */
.shop-overlay{
  position:fixed; inset:0;
  background:rgba(22,24,28,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--shop-ease);
  z-index:90;
}
.shop-overlay.is-open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0;
  width:400px; max-width:92vw;
  height:100%;
  background:var(--asphalt);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%);
  transition:transform .34s var(--shop-ease);
  z-index:100;
}
.cart-drawer.is-open{ transform:translateX(0); }

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.cart-head h3{ font-size:17px; }
.cart-close{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-dim);
  transition:border-color .15s, color .15s;
}
.cart-close:hover{ border-color:var(--amber); color:var(--amber); }
.cart-close svg{ width:15px; height:15px; }

.cart-body{ flex:1; overflow-y:auto; padding:6px 22px; }
.cart-empty{
  text-align:center;
  padding:64px 12px;
  color:var(--cream-dim);
}
.cart-empty svg{ width:42px; height:42px; margin:0 auto 14px; color:var(--grey-dim); }
.cart-empty p{ font-size:14px; margin-bottom:18px; }

.cart-line{
  display:flex; gap:13px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.cart-line__thumb{
  width:66px; height:66px;
  flex:none;
  border-radius:3px;
  overflow:hidden;
  background:var(--asphalt-3);
  border:1px solid var(--line);
}
.cart-line__thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-line__info{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-line__info h5{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  line-height:1.2;
}
.cart-line__meta{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--grey);
}
.cart-line__price{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
}
.cart-line__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.qty button{
  width:27px; height:27px;
  font-size:15px;
  color:var(--cream-dim);
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, color .14s;
}
.qty button:hover{ background:var(--asphalt-3); color:var(--amber); }
.qty span{
  width:30px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
}
.cart-line__remove{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cart-line__remove:hover{ color:var(--amber); }

.cart-foot{
  flex:none;
  border-top:1px solid var(--line);
  padding:18px 22px 22px;
  background:var(--asphalt-2);
}
.sumrow{
  display:flex; justify-content:space-between;
  font-size:13.5px;
  color:var(--cream-dim);
  padding:5px 0;
}
.sumrow b{ font-family:var(--font-mono); color:var(--cream); }
.sumrow.total{
  border-top:1px solid var(--line);
  margin-top:8px; padding-top:12px;
  color:var(--cream);
  font-size:15px;
}
.sumrow.total b{ font-family:var(--font-display); font-size:19px; }
.cart-foot .btn{ margin-top:14px; }
.cart-foot-note{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--grey);
  text-align:center;
  margin-top:10px;
}

/* ============================================================
   TOAST
============================================================ */
.shop-toast{
  position:fixed;
  bottom:26px; left:50%;
  transform:translateX(-50%) translateY(18px);
  background:var(--cream);
  color:#FFFFFF;
  padding:13px 20px;
  border-radius:var(--shop-radius);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  display:flex; align-items:center; gap:9px;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s var(--shop-ease), transform .28s var(--shop-ease);
  z-index:120;
  box-shadow:var(--shop-shadow-lift);
  max-width:90vw;
}
.shop-toast.is-open{ opacity:1; transform:translateX(-50%) translateY(0); }
.shop-toast svg{ width:14px; height:14px; color:#7BE3AC; flex:none; }

/* ============================================================
   SINGLE PRODUCT — single.php
============================================================ */
.single-section{ padding:44px 0 80px; }

.breadcrumb{
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:28px;
}
.breadcrumb a:hover{ color:var(--amber); }
.breadcrumb span{ color:var(--grey-dim); }

.single-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:start;
}

.single-gallery{ display:flex; flex-direction:column; gap:12px; }
.single-main{
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  overflow:hidden;
  background:var(--asphalt-3);
}
.single-main img{ width:100%; height:100%; object-fit:cover; }

/* ---- carousel (only when a product has more than one image) ---- */
.single-main.is-carousel{ position:relative; }
.carousel-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shop-shadow);
  transition:background .16s, color .16s, border-color .16s;
}
.carousel-nav svg{ width:20px; height:20px; }
.carousel-nav:hover{ background:var(--amber); border-color:var(--amber); color:#FFFFFF; }
.carousel-prev{ left:12px; }
.carousel-next{ right:12px; }
.carousel-count{
  position:absolute; right:12px; bottom:12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:2px;
  padding:4px 8px;
}
.carousel-dots{
  display:flex; justify-content:center; gap:7px;
  margin-top:2px;
}
.carousel-dot{
  width:8px; height:8px;
  border-radius:50%;
  border:none;
  background:var(--line);
  padding:0;
  transition:background .16s, transform .16s;
}
.carousel-dot:hover{ background:var(--grey-dim); }
.carousel-dot.is-active{ background:var(--amber); transform:scale(1.25); }
.single-thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
.single-thumbs button{
  width:70px; height:70px;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--asphalt-3);
  transition:border-color .16s;
}
.single-thumbs button.is-active{ border-color:var(--amber); }
.single-thumbs img{ width:100%; height:100%; object-fit:cover; }

.single-cat{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey);
}
.single-info h1{
  font-size:clamp(26px,3.6vw,40px);
  margin:10px 0 14px;
}
.single-price{
  font-family:var(--font-mono);
  font-size:24px;
  font-weight:600;
  margin-bottom:6px;
}
.single-price s{
  color:var(--grey-dim);
  font-size:16px;
  font-weight:400;
  margin-left:8px;
}
.single-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--cream-dim);
  margin-bottom:18px;
}
.single-desc{
  color:var(--cream-dim);
  font-size:15.5px;
  line-height:1.7;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.opt-block{ padding:20px 0; border-bottom:1px solid var(--line); }
.opt-label{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:11px;
}
.colour-opts{ display:flex; gap:10px; flex-wrap:wrap; }
.colour-opt{
  width:30px; height:30px;
  border-radius:50%;
  border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line);
  transition:border-color .16s;
}
.colour-opt.is-active{ border-color:var(--amber); }
.size-opts{ display:flex; gap:9px; flex-wrap:wrap; }
.size-opt{
  min-width:52px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--cream-dim);
  transition:border-color .16s, color .16s, background .16s;
}
.size-opt:hover{ border-color:var(--grey); color:var(--cream); }
.size-opt.is-active{ background:var(--cream); border-color:var(--cream); color:#FFFFFF; }
.size-opt:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }

.qty-lg{
  display:inline-flex; align-items:center;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  overflow:hidden;
}
.qty-lg button{
  width:44px; height:44px;
  font-size:19px;
  color:var(--cream-dim);
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, color .14s;
}
.qty-lg button:hover{ background:var(--asphalt-3); color:var(--amber); }
.qty-lg span{
  width:40px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:14px;
}

.single-ctas{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.single-ctas .btn{ flex:1; justify-content:center; min-width:150px; }

.single-trust{
  display:flex; flex-wrap:wrap; gap:18px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.single-trust span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--cream-dim);
}
.single-trust svg{ width:15px; height:15px; color:var(--amber); flex:none; }

.related-section{ margin-top:72px; }
.related-section h2{ font-size:24px; margin-bottom:24px; }

/* ============================================================
   CHECKOUT — checkout.php
============================================================ */
.checkout-section{ padding:48px 0 80px; }
.checkout-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:36px;
  align-items:start;
}

.checkout-review{
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt-2);
  padding:24px;
  position:sticky;
  top:88px;
}
.checkout-review h3{ font-size:16px; margin-bottom:16px; }
.review-line{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.review-line__name{ color:var(--cream); }
.review-line__meta{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--grey);
  margin-top:2px;
}
.review-line b{ font-family:var(--font-mono); white-space:nowrap; }

/* Collection notice — nothing is shipped, so this replaces the old
   delivery address block. Same visual shape as .paymethod. */
.collect-panel{
  display:flex; align-items:flex-start; gap:12px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt-2);
}
.collect-panel svg{ width:21px; height:21px; color:var(--amber); flex:none; margin-top:1px; }
.collect-panel b{ display:block; font-size:13px; }
.collect-panel span{ display:block; font-size:12.5px; color:var(--cream-dim); margin-top:3px; line-height:1.5; }

/* M-PESA is the only method, so the picker is a single static panel
   rather than a grid of choices. */
.paymethod--only{ width:100%; cursor:default; }
.paymethod--only:hover{ border-color:var(--amber); }
.paymethod--only + .form-grid{ margin-top:18px; }
.paymethod{
  display:flex; align-items:center; gap:12px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt);
  text-align:left;
  transition:border-color .18s, background .18s;
}
.paymethod:hover{ border-color:var(--grey); }
.paymethod.is-active{ border-color:var(--amber); background:rgba(214,40,40,.04); }
.paymethod svg{ width:21px; height:21px; color:var(--amber); flex:none; }
.paymethod b{ display:block; font-size:13px; }
.paymethod span{
  display:block;
  font-size:11px;
  color:var(--grey);
  margin-top:2px;
}

.checkout-alert{
  padding:14px 16px;
  border-radius:var(--shop-radius);
  border:1px solid var(--amber);
  background:rgba(214,40,40,.06);
  color:var(--amber);
  font-size:13.5px;
  margin-bottom:24px;
}
.checkout-done{
  text-align:center;
  padding:64px 24px;
  border:1px solid var(--line);
  border-radius:var(--shop-radius);
  background:var(--asphalt-2);
}
.checkout-done-icon{
  width:64px; height:64px;
  border-radius:50%;
  color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  animation:payPop .32s var(--shop-ease);
}
.checkout-done-icon svg{ width:30px; height:30px; }
/* One icon element, two outcomes — the state class picks which glyph shows. */
.checkout-done-icon.is-ok{ background:var(--green-light); }
.checkout-done-icon.is-bad{ background:var(--amber); }
.checkout-done-icon .icon-ok,
.checkout-done-icon .icon-bad{ display:none; }
.checkout-done-icon.is-ok .icon-ok{ display:block; }
.checkout-done-icon.is-bad .icon-bad{ display:block; }
@keyframes payPop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Waiting on the M-PESA callback. */
.pay-spinner{
  width:56px; height:56px;
  margin:0 auto 20px;
  border:3px solid var(--line);
  border-top-color:var(--amber);
  border-radius:50%;
  animation:paySpin .9s linear infinite;
}
@keyframes paySpin{ to{ transform:rotate(360deg); } }

.checkout-receipt{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--grey);
  margin-top:10px;
}
.checkout-done h2{ font-size:26px; margin-bottom:10px; }
.checkout-done p{ color:var(--cream-dim); font-size:15px; max-width:460px; margin:0 auto; }
.checkout-ref{
  display:inline-block;
  margin:22px auto 0;
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.1em;
  border:1px dashed var(--amber);
  border-radius:var(--shop-radius);
  padding:13px 22px;
  color:var(--cream);
}
.checkout-done-actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1080px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .shop-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .shop-hero-art{ max-width:420px; }
  .single-grid{ grid-template-columns:1fr; gap:34px; }
  .checkout-grid{ grid-template-columns:1fr; }
  .checkout-review{ position:static; }
}


@media (max-width:760px){
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .shop-hero{ padding:56px 0 48px; }
  .products-section{ padding:40px 0 64px; }
  .shop-toolbar-inner{ gap:12px; }
  .shop-search{ flex:1 1 100%; }
  .related-section{ margin-top:52px; }
}

@media (max-width:600px){
  .product-card__body{ padding:13px 13px 15px; gap:6px; }
  .product-card__name{ font-size:15px; }
  .product-card__desc{ display:none; }
  .product-card__actions{ margin-top:8px; }
  .view-btn{ display:none; }
  .shop-hero-stat{ padding-right:18px; margin-right:18px; }
  .shop-hero-stat b{ font-size:22px; }
  .checkout-review{ padding:18px; }
  .single-ctas .btn{ min-width:100%; }
  .cart-drawer{ width:100%; max-width:100%; }
  .cart-body{ padding:6px 18px; }
  .cart-foot{ padding:16px 18px 20px; }
}

/* Only the narrowest phones drop to one column — at 390px and up a
   two-up grid keeps the collection scannable without endless scrolling. */
@media (max-width:359px){
  .product-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .single-thumbs button{ width:58px; height:58px; }
}

@media (prefers-reduced-motion: reduce){
  .product-card,
  .product-card__media img,
  .cart-drawer,
  .shop-toast,
  .shop-overlay{ transition:none; }
  .shop-skeleton{ animation:none; }
  .checkout-done-icon{ animation:none; }
  /* The spinner must keep turning — it is the only signal that the page
     is still waiting on M-PESA — but slow it right down. */
  .pay-spinner{ animation-duration:2.4s; }
}