/* ============================================================
   البلقا ALBELGA — المتجر والسلة والدفع
   ============================================================ */

.page-header-solid{
  background:var(--espresso-900);
  padding:14px 0;
}

/* تتبع الطلب */
.tracking-page{min-height:100vh;background:radial-gradient(circle at 15% 10%,#f4e5c7 0,transparent 30%),#f8f3eb}.tracking-shell{width:min(760px,calc(100% - 28px));margin:0 auto;padding:125px 0 70px}.tracking-card,.tracking-result{margin-bottom:18px;padding:26px;border:1px solid #eadfce;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 18px 55px rgba(55,37,20,.09)}.tracking-heading{display:flex;align-items:flex-start;gap:15px}.tracking-heading small,.tracking-result-head small{color:#a87625;font-weight:900}.tracking-heading h1{margin:2px 0 4px;color:#26180e;font-size:1.65rem}.tracking-heading p{margin:0;color:#7b6a5c;font-size:.86rem}.tracking-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;background:linear-gradient(135deg,#41291a,#1c120b);font-size:1.45rem}.tracking-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;margin-top:22px}.tracking-form label{color:#514337;font-size:.76rem;font-weight:800}.tracking-form input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #dfd1bf;border-radius:11px;background:#fff;font:inherit}.tracking-form .btn{min-height:44px}.tracking-alert{margin-top:15px;padding:12px 14px;border-radius:11px;color:#9e342d;background:#fff0ed;font-size:.8rem}.tracking-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.tracking-result-head strong{display:block;margin-top:3px;color:#2a1a10;direction:ltr}.tracking-current{padding:7px 12px;border-radius:999px;color:#684512;background:#fff0cd;font-size:.75rem;font-weight:900}.tracking-current.status-completed{color:#226c43;background:#e5f5eb}.tracking-current.status-cancelled{color:#a6362d;background:#fde9e6}.tracking-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0;padding:13px;border-radius:14px;background:#faf6ef}.tracking-summary span{color:#8a7766;font-size:.7rem}.tracking-summary strong{display:block;margin-top:3px;color:#322116;font-size:.82rem}.tracking-timeline{margin:8px 7px}.tracking-event{position:relative;display:flex;gap:13px;padding-bottom:20px}.tracking-event:not(:last-child):before{position:absolute;top:15px;right:6px;width:2px;height:calc(100% - 3px);background:#e2d6c6;content:""}.tracking-event i{position:relative;z-index:1;width:14px;height:14px;margin-top:4px;border:3px solid #fff;border-radius:50%;background:#c9973e;box-shadow:0 0 0 2px #c9973e}.tracking-event.status-completed i{background:#3d9463;box-shadow:0 0 0 2px #3d9463}.tracking-event.status-cancelled i{background:#c65349;box-shadow:0 0 0 2px #c65349}.tracking-event strong{color:#332217;font-size:.84rem}.tracking-event time{margin-right:9px;color:#958477;font-size:.68rem}.tracking-event p{margin:4px 0 0;color:#766457;font-size:.75rem}.tracking-items{padding:12px 14px;border:1px solid #ece2d5;border-radius:12px}.tracking-items summary{cursor:pointer;font-size:.78rem;font-weight:900}.tracking-items ul{margin:12px 0 0;padding:0;list-style:none}.tracking-items li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #f0e8de;font-size:.74rem}
@media(max-width:700px){.tracking-shell{padding-top:95px}.tracking-card,.tracking-result{padding:19px;border-radius:17px}.tracking-form{grid-template-columns:1fr}.tracking-form .btn{width:100%}.tracking-summary{grid-template-columns:1fr}.tracking-result-head{align-items:flex-start;flex-direction:column}.tracking-heading h1{font-size:1.35rem}}
.main-nav a.is-current{ color:var(--gold-300); }

.store-hero{
  background:linear-gradient(160deg, var(--espresso-900), #34220f);
  color:var(--ivory);
  padding:150px 0 60px;
}
.store-hero h1{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom:14px;
}
.store-hero p{ color:rgba(251,245,234,.75); margin-bottom:30px; max-width:560px; }
.store-heading-row{ display:flex; justify-content:space-between; gap:30px; align-items:flex-start; }
.store-trust-pill{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:100px; color:var(--gold-300); background:rgba(255,255,255,.06); border:1px solid rgba(232,196,104,.2); font-size:.78rem; font-weight:800; white-space:nowrap; }
.store-trust-pill svg,.wholesale-access svg,.search-icon svg,.scan-button svg,.location-button svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wholesale-access{ margin:18px 0; padding:16px; max-width:640px; border:1px solid rgba(232,196,104,.35); border-radius:14px; background:rgba(251,245,234,.08); }
.wholesale-access>strong{ display:inline-flex; align-items:center; gap:7px; }
.wholesale-login-form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.wholesale-login-form input{ min-width:150px; padding:10px 13px; border-radius:10px; border:1px solid #c9b28d; font-family:var(--font-body); }

.search-bar{
  display:flex; gap:12px; flex-wrap:wrap;
  background:rgba(251,245,234,.06);
  border:1px solid rgba(232,196,104,.2);
  padding:10px;
  border-radius:100px;
  max-width:640px;
}
.search-icon{ display:grid; place-items:center; padding-right:10px; color:var(--gold-300); }
.search-bar input{
  flex:1;
  min-width:200px;
  background:none; border:none; outline:none;
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:1rem;
  padding:13px 16px;
  min-height:44px;
}
.search-bar input::placeholder{ color:rgba(251,245,234,.5); }
.search-bar .btn{ padding:10px 22px; white-space:nowrap; }
.scan-button svg{ display:none; }
.catalog-title{ display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }
.catalog-title span{ color:var(--gold-600); font-size:.72rem; font-weight:800; }
.catalog-title h2{ color:var(--espresso-900); font-size:1.45rem; margin-top:2px; }
.catalog-title>strong{ padding:7px 11px; border-radius:100px; background:var(--cream-100); color:#7a614c; font-size:.72rem; }

.store-body{ background:var(--cream-50); padding:50px 0 100px; }
.store-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:40px;
  align-items:start;
}
.store-main{ min-width:0; }

.category-filters{
  display:flex; gap:10px; margin-bottom:28px;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px; scroll-snap-type:x proximity;
}
.category-filters::-webkit-scrollbar{ display:none; }
.category-select{
  display:none;
  width:100%;
  padding:14px 18px;
  margin-bottom:22px;
  border-radius:14px;
  border:1px solid #e0d3ba;
  background:var(--ivory);
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:700;
  color:var(--espresso-900);
  min-height:48px;
}
@media (max-width:640px){
  .category-filters{ display:none; }
  .category-select{ display:block; }
}
.cat-chip{ scroll-snap-align:start; }
.cat-chip{
  padding:9px 20px;
  border-radius:100px;
  border:1px solid #e0d3ba;
  background:var(--ivory);
  font-family:var(--font-body);
  font-size:.88rem; font-weight:700;
  color:#6b5744;
  cursor:pointer;
  transition:all .2s ease;
}
.cat-chip:hover{ border-color:var(--gold-500); }
.cat-chip.is-active{
  background:linear-gradient(120deg,var(--gold-300),var(--gold-600));
  color:var(--espresso-900);
  border-color:transparent;
}

.products-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  transition:opacity .18s ease;
}
.products-grid.is-loading{ opacity:.48; pointer-events:none; }
.product-card{
  background:var(--ivory);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 32px -18px rgba(28,18,11,.32);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -16px rgba(28,18,11,.4); }
.product-card .thumb{
  aspect-ratio:1/1;
  background:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.product-card:hover .thumb img{ transform:scale(1.06); }
.product-card .thumb .placeholder{ width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:#a18b75; background:rgba(255,255,255,.55); }
.product-card .thumb .placeholder svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.product-card .info{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card .cat-tag{ font-size:.68rem; color:var(--gold-600); font-weight:700; }
.product-card h4{ font-size:.92rem; margin:0; color:var(--espresso-900); line-height:1.4; }
.product-card .price{ font-weight:800; color:var(--espresso-800); margin-top:auto; }
.product-card-footer{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; }
.product-card .add-btn{
  margin-top:8px; min-width:92px; padding:10px 12px; min-height:42px; border-radius:12px;
  border:none;
  background:var(--espresso-900);
  color:var(--gold-300);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  transition:background .2s ease;
}
.product-card .add-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; display:inline-block; vertical-align:middle; margin-inline-end:4px; }
.product-card .add-btn:hover{ background:var(--espresso-800); }
.product-card .add-btn.added{ background:#2c6b3f; color:#fff; }

.empty-state{ text-align:center; color:#8a7660; padding:60px 0; }

/* ---------------- Cart panel ---------------- */
.cart-panel{
  background:var(--ivory);
  border-radius:var(--radius-lg);
  padding:24px;
  position:sticky;
  top:110px;
  box-shadow:var(--shadow-soft);
}
.cart-panel h3{ font-family:var(--font-display); color:var(--espresso-900); margin-bottom:16px; }
.cart-items{ display:flex; flex-direction:column; gap:14px; max-height:360px; overflow-y:auto; margin-bottom:16px; }
.cart-empty-msg{ color:#8a7660; font-size:.9rem; text-align:center; padding:20px 0; }
.cart-item{
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid #f0e6d3;
}
.ci-product-icon{ flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--cream-100); color:var(--gold-600); }
.ci-product-icon svg,.ci-remove svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cart-item .ci-info{ flex:1; }
.cart-item .ci-info h5{ margin:0 0 4px; font-size:.88rem; color:var(--espresso-900); }
.cart-item .ci-info span{ font-size:.8rem; color:#8a7660; }
.cart-item .ci-qty{ display:flex; align-items:center; gap:6px; }
.cart-item .ci-qty button{
  width:24px; height:24px; border-radius:50%; border:1px solid #e0d3ba;
  background:var(--cream-50); cursor:pointer; font-weight:700; line-height:1;
}
.cart-item .ci-remove{
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#fff1ef; border:none; color:#b9483d; cursor:pointer;
}
.cart-sheet-kicker{ display:block; color:var(--gold-600); font-size:.68rem; font-weight:800; margin-bottom:2px; }
.cart-total-row{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:2px solid var(--espresso-900);
  font-size:1.05rem; margin-bottom:16px;
}
.cart-checkout-btn{ width:100%; justify-content:center; }
.cart-checkout-btn.is-disabled{ opacity:.5; pointer-events:none; }

/* ---------------- Scanner modal ---------------- */
.scanner-modal{
  position:fixed; inset:0; background:rgba(20,13,8,.85);
  z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
}
.scanner-modal.is-open{ display:flex; }
.scanner-box{
  background:var(--ivory); border-radius:var(--radius-lg);
  padding:24px; max-width:420px; width:100%; position:relative;
}
.scanner-box h4{ text-align:center; margin-bottom:16px; color:var(--espresso-900); font-size:1rem; }
.scanner-close{
  position:absolute; top:14px; left:14px;
  background:none; border:none; font-size:1.3rem; cursor:pointer; color:#8a7660;
}
#reader{ border-radius:12px; overflow:hidden; }

/* ---------------- Checkout page ---------------- */
.checkout-section{ background:var(--cream-50); padding:150px 0 100px; }
.checkout-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:start;
}
.checkout-form-card, .order-summary-card{
  background:var(--ivory);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--shadow-soft);
}
.checkout-form-card h3, .order-summary-card h3{
  font-family:var(--font-display); color:var(--espresso-900); margin-bottom:20px;
}
.checkout-card-head,.summary-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.checkout-card-head h3,.summary-card-head h3{ margin:0; }
.checkout-card-head small,.summary-card-head small{ display:block; color:#8a7660; font-size:.7rem; margin-bottom:2px; }
.checkout-step-icon{ flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; border-radius:15px; color:var(--espresso-900); background:linear-gradient(145deg,var(--gold-300),var(--gold-600)); }
.checkout-step-icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.summary-card-head{ justify-content:space-between; }
.summary-card-head>div{ flex:1; }
.summary-card-head>a{ color:var(--gold-600); font-size:.8rem; font-weight:800; }
.checkout-form .field{ margin-bottom:18px; }
.checkout-form label{ display:block; font-size:.88rem; font-weight:700; color:var(--espresso-800); margin-bottom:6px; }
.checkout-form input, .checkout-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e0d3ba;
  font-family:var(--font-body); font-size:.95rem; background:var(--cream-50);
}
.method-toggle{ display:flex; gap:12px; margin-bottom:18px; }
.method-toggle label{
  flex:1; text-align:center; padding:14px; border-radius:12px;
  border:2px solid #e0d3ba; cursor:pointer; font-weight:700; font-size:.9rem;
  color:#6b5744; transition:all .2s ease;
}
.method-toggle input{ display:none; }
.method-toggle label>span{ display:flex; justify-content:center; align-items:center; gap:7px; }
.method-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.method-toggle input:checked + span{ color:var(--espresso-900); }
.method-toggle label:has(input:checked){
  border-color:var(--gold-500);
  background:linear-gradient(120deg, rgba(232,196,104,.18), rgba(232,196,104,.06));
}
#address-field{ display:none; }
#address-field.is-visible{ display:block; }

.order-summary-card .os-item{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid #f0e6d3; font-size:.92rem;
}
.order-summary-card .os-total{
  display:flex; justify-content:space-between; padding-top:14px;
  font-size:1.1rem; font-weight:800; color:var(--espresso-900);
}
.checkout-submit-btn{ width:100%; justify-content:center; margin-top:10px; }
.location-button svg{ width:18px; height:18px; }
.checkout-alert{
  padding:12px 16px; border-radius:10px; margin-bottom:16px;
  font-size:.9rem; font-weight:700; display:none;
}
.checkout-alert.is-visible{ display:block; }
.checkout-alert.error{ background:#fbe6e4; color:#a3372a; }

@media (max-width:980px){
  .store-layout{ grid-template-columns:1fr; }
  .cart-panel{ position:static; }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .checkout-layout{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .products-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .method-toggle{ flex-direction:column; }
}

.unit-tag{ font-size:.75rem; color:#8a7660; font-weight:600; }
#load-more-btn{ padding:12px 30px; border-radius:100px; }
.btn-outline-dark{
  background:none; border:2px solid var(--espresso-800); color:var(--espresso-800);
  font-family:var(--font-body); font-weight:700; cursor:pointer;
}
.btn-outline-dark:hover{ background:var(--espresso-800); color:var(--ivory); }

/* ---------------- Product card entrance animation ---------------- */
@keyframes cardEnter{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference){
  .product-card.card-enter{ animation:cardEnter .45s ease both; }
}
.add-btn{ transition:transform .15s ease; }
.add-btn:active{ transform:scale(.94); }
.add-btn.added{ animation:addPulse .4s ease; }
@keyframes addPulse{
  0%{ transform:scale(1); } 40%{ transform:scale(1.05); } 100%{ transform:scale(1); }
}

/* ---------------- Cart drawer backdrop (mobile) ---------------- */
.cart-backdrop{
  display:none; position:fixed; inset:0; background:rgba(20,13,8,.55);
  z-index:200; opacity:0; transition:opacity .3s ease;
}
.cart-backdrop.is-visible{ display:block; opacity:1; }
.cart-panel-handle{ display:none; }
.cart-panel-header{ display:flex; justify-content:space-between; align-items:center; }
.cart-drawer-close{ display:none; background:none; border:none; font-size:1.2rem; color:#8a7660; cursor:pointer; }

/* ---------------- Sticky cart bar (mobile only) ---------------- */
.sticky-cart-bar{
  display:none;
  position:fixed; right:12px; left:12px; bottom:100px; z-index:140;
  background:var(--espresso-900); color:var(--ivory);
  border-radius:16px; padding:12px 16px;
  align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
  transform:translateY(140%); transition:transform .35s ease;
}
.scb-info{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.scb-count{
  background:var(--gold-300); color:var(--espresso-900);
  min-width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.78rem;
}
.scb-btn{ padding:9px 18px; font-size:.82rem; white-space:nowrap; }

@media (max-width:760px){
  .sticky-cart-bar{ display:flex; }
  .sticky-cart-bar.is-visible{ transform:translateY(0); }
}

@media (max-width:980px){
  .cart-panel{
    position:fixed; inset-inline:0; bottom:0; z-index:250;
    max-height:80vh; overflow-y:auto;
    border-radius:22px 22px 0 0;
    transform:translateY(100%); transition:transform .35s ease;
    top:auto; margin:0;
  }
  .cart-panel.is-open{ transform:translateY(0); }
  .cart-panel-handle{
    display:block; width:44px; height:5px; border-radius:100px;
    background:#e0d3ba; margin:0 auto 12px; cursor:pointer;
  }
  .cart-drawer-close{ display:block; }
}

/* ---------------- Print receipt ---------------- */
@media print{
  body *{ visibility:hidden; }
  .receipt-print, .receipt-print *{ visibility:visible; }
  .receipt-print{
    position:absolute; top:0; left:0; width:100%;
    padding:20px;
  }
  .no-print{ display:none !important; }
}

/* ---------------- Checkout submit spinner ---------------- */
.btn-spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(28,18,11,.25); border-top-color:var(--espresso-900);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- Success screen ---------------- */
.success-section{
  background:var(--cream-50); padding:150px 0 100px; text-align:center;
}
.success-check{ width:90px; height:90px; margin:0 auto 20px; }
.success-check-circle{
  stroke:#2c6b3f; stroke-width:2.5;
  stroke-dasharray:151; stroke-dashoffset:151;
  animation:drawCircle .5s ease forwards;
}
.success-check-mark{
  stroke:#2c6b3f; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:36; stroke-dashoffset:36;
  animation:drawCheck .35s ease forwards .45s;
}
@keyframes drawCircle{ to{ stroke-dashoffset:0; } }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }
.success-title{ font-family:var(--font-display); font-size:1.7rem; color:var(--espresso-900); margin-bottom:8px; }
.success-sub{ color:#6b5744; margin-bottom:34px; }

.receipt-card{
  background:var(--ivory); max-width:480px; margin:0 auto 30px;
  border-radius:var(--radius-lg); padding:28px; text-align:right;
  box-shadow:var(--shadow-soft); border:1px solid #eee1c8;
}
.receipt-header{ display:flex; align-items:center; gap:14px; border-bottom:2px dashed #e0d3ba; padding-bottom:16px; margin-bottom:16px; }
.receipt-logo{ height:44px; width:auto; }
.receipt-header h3{ margin:0 0 2px; font-family:var(--font-display); font-size:1.1rem; color:var(--espresso-900); }
.receipt-header span{ font-size:.82rem; color:#8a7660; font-weight:700; }
.receipt-meta{ display:flex; flex-direction:column; gap:6px; font-size:.88rem; margin-bottom:16px; }
.receipt-meta div{ display:flex; justify-content:space-between; gap:10px; }
.receipt-meta span{ color:#8a7660; }
.receipt-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
.receipt-table th{ text-align:right; font-size:.78rem; color:#8a7660; padding:6px 4px; border-bottom:1px solid #eadfc7; }
.receipt-table td{ font-size:.88rem; padding:8px 4px; border-bottom:1px solid #f3ecdb; }
.receipt-total-row{
  display:flex; justify-content:space-between; padding-top:12px;
  border-top:2px solid var(--espresso-900); font-size:1.05rem; font-weight:800; color:var(--espresso-900);
}
.receipt-thanks{ text-align:center; margin:18px 0 0; color:var(--gold-600); font-weight:700; font-size:.9rem; }

.success-actions{ display:flex; flex-direction:column; gap:12px; max-width:340px; margin:0 auto; }
.btn-continue-shopping{ font-size:.88rem; color:#6b5744; font-weight:700; text-align:center; padding:6px; }

/* ---- Stock badges on storefront ---- */
.stock-badge{
  position:absolute; top:8px; right:8px; z-index:2;
  padding:4px 10px; border-radius:100px; font-size:.7rem; font-weight:800;
}
.stock-badge.out{ background:#c0392b; color:#fff; }
.stock-badge.low{ background:#e8a33d; color:#241812; }
.product-card .thumb{ position:relative; }
.product-card.is-out-of-stock{ opacity:.6; }
.add-btn:disabled{ background:#bcae94; color:#fff; cursor:not-allowed; }
.add-btn:disabled:active{ transform:none; }

/* ============================================================
   Mobile storefront and checkout — app-like experience
   ============================================================ */
@media (max-width:760px){
  .store-hero{
    padding:calc(96px + env(safe-area-inset-top)) 0 26px;
    border-radius:0 0 28px 28px;
    background:radial-gradient(circle at 12% 18%,rgba(201,151,62,.2),transparent 30%),linear-gradient(155deg,var(--espresso-900),#332113);
  }
  .store-heading-row{ align-items:center; gap:14px; }
  .store-heading-row .eyebrow{ margin-bottom:6px; font-size:.7rem; }
  .store-hero h1{ font-size:1.65rem; margin-bottom:4px; }
  .store-hero p{ font-size:.8rem; margin:0; }
  .store-trust-pill{ padding:8px 10px; font-size:.65rem; }
  .store-trust-pill svg{ width:16px; height:16px; }
  .wholesale-access{ margin:18px 0 14px; padding:12px 13px; border-radius:17px; font-size:.76rem; background:rgba(255,255,255,.07); }
  .wholesale-access>strong{ font-size:.78rem; }
  #wholesale-state{ display:block; margin:2px 0 0 !important; color:rgba(255,255,255,.58); }
  .wholesale-login-form{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .wholesale-login-form input{ min-width:0; width:100%; padding:10px; font-size:.75rem; background:rgba(255,255,255,.93); }
  .wholesale-login-form .btn{ grid-column:1/-1; min-height:40px; justify-content:center; padding:8px 14px; }
  .search-bar{ flex-wrap:nowrap; max-width:none; padding:5px; gap:4px; border-radius:18px; background:var(--ivory); border-color:rgba(255,255,255,.25); box-shadow:0 14px 32px rgba(0,0,0,.2); }
  .search-icon{ padding:0 9px 0 2px; color:#8b725c; }
  .search-bar input{ min-width:0; color:var(--espresso-900); padding:10px 2px; font-size:.82rem; }
  .search-bar input::placeholder{ color:#9a8878; }
  .search-bar .scan-button{ flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:14px; display:grid; place-items:center; background:var(--espresso-900); color:var(--gold-300); }
  .scan-button svg{ display:block; width:22px; height:22px; }
  .scan-button span{ display:none; }
  .store-body{ padding:26px 0 120px; }
  .store-body .container{ padding-inline:14px; }
  .catalog-title{ margin:0 2px 15px; }
  .catalog-title h2{ font-size:1.2rem; }
  .catalog-title>strong{ font-size:.65rem; }
  .category-filters{ display:flex; gap:8px; margin-inline:-14px; padding:0 14px 9px; margin-bottom:13px; }
  .category-select{ display:none; }
  .cat-chip{ padding:9px 15px; font-size:.73rem; min-height:38px; box-shadow:0 3px 10px rgba(28,18,11,.04); }
  .products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .product-card{ border-radius:18px; border:1px solid rgba(28,18,11,.06); box-shadow:0 8px 22px rgba(28,18,11,.07); }
  .product-card:active{ transform:scale(.98); }
  .product-card .thumb{ aspect-ratio:1/.9; border-radius:15px; margin:6px 6px 0; }
  .product-card .info{ padding:11px; gap:5px; }
  .product-card .cat-tag{ font-size:.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .product-card h4{ font-size:.82rem; min-height:2.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .product-card .price{ font-size:.91rem; white-space:nowrap; }
  .product-card .price small{ display:none; }
.unit-tag{ display:block; font-size:.58rem; }
.sale-unit-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:3px; margin-top:3px; border-radius:10px; background:#f3eadc; }
.sale-unit-toggle button{ border:0; border-radius:8px; padding:5px 3px; background:transparent; color:#725f4e; font:700 .66rem var(--font-body); cursor:pointer; }
.sale-unit-toggle button.is-active{ background:var(--ivory); color:var(--espresso-900); box-shadow:0 2px 7px rgba(28,18,11,.1); }
.ci-info small{ display:block; color:#9a8068; font-size:.66rem; }
  .product-card .add-btn{ flex:0 0 40px; min-width:40px; width:40px; height:40px; min-height:40px; padding:0; border-radius:13px; display:grid; place-items:center; box-shadow:0 7px 16px rgba(28,18,11,.18); }
  .product-card .add-btn svg{ margin:0; width:19px; height:19px; }
  .product-card .add-btn span{ display:none; }
  .stock-badge{ top:10px; right:10px; font-size:.58rem; padding:4px 7px; }
  .sticky-cart-bar{ right:18px; left:18px; bottom:102px; min-height:58px; padding:9px 10px 9px 14px; border-radius:19px; background:rgba(28,18,11,.96); backdrop-filter:blur(12px); }
  .scb-btn{ border-radius:14px; min-height:40px; }
  .cart-backdrop{ backdrop-filter:blur(3px); background:rgba(20,13,8,.62); }
  .cart-panel{ padding:10px 18px calc(22px + env(safe-area-inset-bottom)); max-height:88dvh; border-radius:28px 28px 0 0; box-shadow:0 -24px 70px rgba(0,0,0,.28); }
  .cart-panel-handle{ width:38px; height:4px; margin-bottom:12px; }
  .cart-panel-header{ margin-bottom:8px; }
  .cart-panel h3{ margin:0; font-size:1.25rem; }
  .cart-drawer-close{ display:grid; width:40px; height:40px; }
  .cart-drawer-close svg{ width:20px; height:20px; }
  .cart-items{ max-height:46dvh; gap:8px; padding:3px 0; }
  .cart-item{ padding:10px 0; gap:8px; }
  .cart-item .ci-info h5{ font-size:.8rem; }
  .cart-item .ci-qty{ gap:3px; padding:3px; border-radius:12px; background:var(--cream-50); }
  .cart-item .ci-qty button{ width:28px; height:28px; background:var(--ivory); }
  .cart-total-row{ margin:10px 0 12px; padding-top:14px; }
  .cart-total-row strong{ font-size:1.25rem; }
  .cart-checkout-btn{ min-height:52px; border-radius:16px; }

  .checkout-page .bottom-nav{ display:none; }
  .checkout-page{ padding-bottom:0; background:#f6efe3; }
  .checkout-app-header .nav-toggle{ display:none; }
  .checkout-app-header .mobile-back{ display:grid; order:3; }
  .checkout-app-header .header-cta{ justify-content:flex-end; }
  .checkout-section{ padding:calc(92px + env(safe-area-inset-top)) 0 42px; }
  .checkout-section>.container{ padding-inline:12px; }
  .checkout-layout{ gap:12px; }
  .order-summary-card{ order:-1; }
  .checkout-form-card,.order-summary-card{ padding:18px; border-radius:21px; box-shadow:0 6px 24px rgba(28,18,11,.07); }
  .checkout-card-head,.summary-card-head{ margin-bottom:18px; }
  .checkout-step-icon{ width:42px; height:42px; flex-basis:42px; border-radius:14px; }
  .checkout-form .field{ margin-bottom:17px; }
  .checkout-form label{ font-size:.78rem; margin-bottom:7px; }
  .checkout-form input,.checkout-form textarea{ min-height:52px; padding:13px 14px; border-radius:14px; border-color:#e7d9c1; background:#fbf7f0; font-size:.88rem; outline:none; }
  .checkout-form input:focus,.checkout-form textarea:focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,151,62,.12); background:var(--ivory); }
  .method-toggle{ flex-direction:row; gap:8px; margin-bottom:16px; }
  .method-toggle label{ min-height:54px; padding:9px 7px; border-width:1px; border-radius:14px; font-size:.74rem; display:grid; place-items:center; }
  .method-toggle label:has(input:checked){ border-color:var(--gold-500); box-shadow:0 5px 16px rgba(201,151,62,.1); }
  .payment-toggle{ display:grid; grid-template-columns:repeat(3,1fr); }
  .payment-toggle label{ min-width:0; }
  .payment-toggle label>span{ flex-direction:column; gap:4px; }
  #bank-details{ border-radius:14px !important; font-size:.78rem; }
  .location-button{ width:100%; min-height:48px; justify-content:center; border-radius:14px; }
  .checkout-submit-btn{ min-height:54px; border-radius:17px; position:sticky; bottom:12px; z-index:20; box-shadow:0 12px 30px rgba(178,126,46,.28); }
  .order-summary-card .os-item{ font-size:.8rem; }
  .order-summary-card .os-total{ font-size:1rem; }
  .success-section{ padding:calc(100px + env(safe-area-inset-top)) 12px 50px; }
  .receipt-card{ border-radius:22px; padding:20px; }
}