/* ==========================================================================
   Shahaz Cart Page — ported 1:1 from the Lovable design system
   (src/styles.css of shahaz-style-bangladesh). Colors, gradients, shadows,
   radii and internal spacing amounts are UNCHANGED from that source; the
   only thing altered here is the page layout: vendor cards + suggestions
   are placed in a 3-column band side-by-side on desktop, and the gap
   between sections is compressed instead of a tall single-column stack.
   ========================================================================== */

:root{
  --sh-primary:#F40097;
  --sh-primary-foreground:#FDF7FB;
  --sh-brand-dark:#560238;
  --sh-secondary:#9F2C75;
  --sh-brand-accent:#D281B5;
  --sh-accent-foreground:#560238;

  --sh-background:#FAEEFA;
  --sh-surface:#FFFFFF;
  --sh-foreground:#1F2937;
  --sh-muted:#F6E9F4;
  --sh-muted-foreground:#6B7280;

  --sh-destructive:#DC2626;
  --sh-success:#16A34A;
  --sh-warning:#F59E0B;

  --sh-border:#F0DCEF;
  --sh-input:#F3DFF1;
  --sh-ring:#F40097;

  --sh-gradient-brand: linear-gradient(135deg,#F40097 0%,#9F2C75 50%,#560238 100%);
  --sh-gradient-soft: linear-gradient(135deg,#FAEEFA 0%,#F3DFF0 100%);
  --sh-gradient-gold: linear-gradient(135deg,#F59E0B 0%,#F40097 100%);
  /* CTA gradient actually used on the cart pill / checkout / add-to-cart
     buttons in the reference screenshots — amber → hot pink, verified by
     sampling pixels straight off the provided screenshot (not the plain
     pink→maroon --sh-gradient-brand token). */
  --sh-gradient-cta: linear-gradient(100deg,#D98A46 0%,#F0116A 55%,#EE1F86 100%);

  --sh-shadow-soft: 0 1px 2px rgba(86,2,56,.04), 0 4px 16px rgba(86,2,56,.06);
  --sh-shadow-card: 0 2px 4px rgba(86,2,56,.04), 0 12px 32px rgba(86,2,56,.08);
  --sh-shadow-glow: 0 8px 32px rgba(244,0,151,.28);

  --sh-radius-lg:.9rem;
  --sh-radius-xl:1.15rem;
  --sh-radius-2xl:1.4rem;
  --sh-radius-3xl:1.65rem;

  --sh-font-display:"Fraunces","Playfair Display",ui-serif,Georgia,serif;
  --sh-font-bangla:"Hind Siliguri","Noto Sans Bengali","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
}

/* Section rhythm — this is the "compress top-to-bottom" control point.
   One variable, used consistently, instead of ad-hoc margins per block. */
.shahaz-cart-page{ --sh-section-gap: 14px; }

.shahaz-cart-page{
  max-width:1180px;
  margin:0 auto;
  padding:18px 14px 40px;
  background:var(--sh-gradient-soft);
  font-family:var(--sh-font-bangla);
  color:var(--sh-foreground);
}
.shahaz-cart-page *{ box-sizing:border-box; }
.shahaz-cart-page h1,
.shahaz-cart-page h2,
.shahaz-cart-page h3{ font-family:var(--sh-font-display); letter-spacing:-.01em; margin:0; }

.shahaz-text-gradient{
  background:var(--sh-gradient-cta);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shahaz-text-primary{ color:var(--sh-primary); }



/* ---- Heading --------------------------------------------------------*/
.shahaz-cart-heading{ margin-bottom:var(--sh-section-gap); }
.shahaz-cart-heading h1{ font-size:1.55rem; font-weight:700; }
.shahaz-cart-heading p{ margin:.35rem 0 0; font-size:.85rem; color:var(--sh-muted-foreground); }

/* ---- 3-column band: vendor cards + suggestions --------------------- */
.shahaz-columns-3{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sh-section-gap);
  margin-bottom:var(--sh-section-gap);
}
@media (min-width:1024px){
  .shahaz-columns-3{ grid-template-columns:repeat(3,1fr); align-items:start; }
}

.shahaz-vendor-card,
.shahaz-suggest-card{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-2xl);
  box-shadow:var(--sh-shadow-card);
  padding:18px;
}

.shahaz-vendor-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.shahaz-vendor-id{ display:flex; align-items:center; gap:10px; min-width:0; }
.shahaz-vendor-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:var(--sh-radius-lg);
  display:flex; align-items:center; justify-content:center;
  background:var(--sh-muted); color:var(--sh-primary); box-shadow:var(--sh-shadow-soft);
}
.shahaz-vendor-name{ font-weight:700; font-size:.9rem; color:var(--sh-brand-dark); }
.shahaz-vendor-meta{ font-size:.72rem; color:var(--sh-muted-foreground); margin-top:1px; }
.shahaz-delivery-badge{
  flex:0 0 auto; font-size:.72rem; font-weight:600; color:var(--sh-primary);
  border:1px solid var(--sh-primary); border-radius:999px; padding:6px 12px;
  white-space:nowrap;
}

.shahaz-vendor-items{ display:flex; flex-direction:column; gap:14px; }
/* ⚠️ Cart Page বাগ-ফিক্স (STEP 01) — আগে .shahaz-cart-item শুধু একটাই
   সারিতে thumb+body+controls গাদাগাদি করে রাখত, কোনো mobile-নির্দিষ্ট
   wrap/stack rule ছাড়াই (পুরো ফাইলে মাত্র একটা @media ছিল, শুধু
   ১০২৪px+ ডেস্কটপ গ্রিডের জন্য)। ছোট স্ক্রিনে thumb(64px)+controls
   (~৫টা বাটন) মিলিয়ে প্রোডাক্ট নাম/দামের জন্য প্রায় কোনো জায়গাই
   থাকত না — এটাই horizontal overflow-এর মূল কারণ, এবং বাটনগুলো
   এত ঠাসাঠাসি হয়ে যেত যে ট্যাপ করলে পাশেরটা ট্রিগার হওয়ার ঝুঁকি
   তৈরি হতো। এখন ছোট স্ক্রিনে controls সারি নিজের আলাদা পূর্ণ-প্রস্থ
   লাইনে wrap করে (thumb+body উপরে, controls নিচে) — কোনো রং/আকার/
   গ্র্যাডিয়েন্ট/টাইপোগ্রাফি পরিবর্তন হয়নি, শুধু লেআউট-ফ্লো। */
.shahaz-cart-item{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.shahaz-item-thumb{ flex:0 0 auto; display:block; }
.shahaz-item-thumb img{
  width:64px; height:64px; object-fit:cover; border-radius:var(--sh-radius-lg);
  background:var(--sh-muted); display:block;
}
.shahaz-item-body{ flex:1 1 160px; min-width:0; }
.shahaz-item-name{
  font-size:.85rem; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shahaz-item-variant{ font-size:.72rem; color:var(--sh-muted-foreground); margin-top:2px; }
.shahaz-item-price{ margin-top:6px; font-size:.9rem; font-weight:700; color:var(--sh-primary); }
.shahaz-item-price s{ margin-left:6px; font-size:.72rem; font-weight:500; color:var(--sh-muted-foreground); }

.shahaz-item-controls{ flex:0 0 auto; display:flex; align-items:center; gap:6px; margin-left:auto; }
/* ⚠️ ৪৮০px-এর নিচে controls-এর সারি পূর্ণ প্রস্থ নেয় (thumb-এর
   পাশে না গুঁজে), এবং একটু বেশি gap দেওয়া হলো যাতে বাটনগুলোর মধ্যে
   যথেষ্ট স্পর্শ-দূরত্ব থাকে — ভুল বাটনে চাপ পড়ার ঝুঁকি কমাতে। বাটনের
   নিজস্ব সাইজ/রং/শেপ অপরিবর্তিত। */
@media (max-width:480px){
  .shahaz-item-controls{
    flex-basis:100%; margin-left:0; justify-content:flex-start;
    gap:10px; padding-left:76px; /* thumb(64px)+gap(12px)-এর সাথে align করার জন্য */
  }
}
/* Reference screenshot: each +/- is its own soft pink-tinted circle button,
   not a single bordered pill wrapping both. Every one of these small
   circular buttons carries the same floating drop-shadow as the cards —
   confirmed by zooming the screenshot (a soft colored shadow under each
   button, not flat). */
.shahaz-qty-stepper{ display:flex; align-items:center; gap:4px; }
.shahaz-qty-stepper{ display:flex; align-items:center; gap:6px; }
/* ⚠️ Phase 3B-8, ROOT CAUSE FIX (Item 4 — কোয়ান্টিটি বাটন অস্বাভাবিক
   বড়/oval): এই বাটনগুলো `<form class="woocommerce-cart-form">`-এর
   ভেতরে থাকায় WooCommerce/Astra-র নিজস্ব ডিফল্ট ফর্ম-বাটন স্টাইলিং
   (padding, border-radius ইত্যাদি) প্রযোজ্য হয়ে যাচ্ছিল — আমাদের
   আগের নিয়ম (".shahaz-qty-stepper button", কম specificity) সেটা
   নির্ভরযোগ্যভাবে override করতে পারছিল না, ফলে বাটন বড়/oval দেখাত।
   এখন .shahaz-qty-minus/.shahaz-qty-plus (real মার্কআপে ব্যবহৃত
   এক্সাক্ট ক্লাস) সরাসরি টার্গেট + !important দিয়ে নিশ্চিতভাবে জেতানো
   হচ্ছে (ঠিক যেভাবে রিভিউ সাবমিট বাটনের একই সমস্যা আগে সমাধান করা
   হয়েছিল)। কমপ্যাক্ট সাইজ (৪০px), স্পষ্ট গোল্ড 3D-ডেপথ, বড়/স্পষ্ট
   glyph — ব্যবহারকারীর নির্দেশ অনুযায়ী। */
.shahaz-qty-stepper .shahaz-qty-minus,
.shahaz-qty-stepper .shahaz-qty-plus,
.shahaz-qty-stepper button{
  width:40px !important; height:40px !important;
  min-width:40px !important; max-width:40px !important;
  padding:0 !important; margin:0 !important;
  border:1px solid var(--sh-gold, #d4af37) !important;
  background: linear-gradient(180deg, #fdf6e3, var(--sh-muted)) !important;
  cursor:pointer;
  font-size:1.3rem !important; font-weight:800; line-height:1;
  color:var(--sh-brand-dark) !important;
  border-radius:50% !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 0 rgba(160,120,20,.35), var(--sh-shadow-soft);
  transition: transform .08s ease, box-shadow .08s ease;
}
.shahaz-qty-stepper .shahaz-qty-minus:active,
.shahaz-qty-stepper .shahaz-qty-plus:active,
.shahaz-qty-stepper button:active{
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(160,120,20,.35), inset 0 2px 4px rgba(0,0,0,.15);
}
.shahaz-qty-val{ min-width:16px; text-align:center; font-size:.78rem; font-weight:700; color:var(--sh-brand-dark); }
/* ⚠️ Phase 3B-8, ROOT CAUSE FIX (Item 1 — হেডার বাটন ছোট হয়ে যাওয়া):
   ".shahaz-icon-btn" ক্লাসটা সম্পূর্ণ কাকতালীয়ভাবে হেডারের নিজস্ব
   Menu/Mall/Chat/Live/Wishlist/Cart/Login বাটনের ক্লাসের সাথে হুবহু
   মিলে যাচ্ছিল (header-custom.php)। এই ফাইল শুধু Cart পেজেই লোড হয়
   (is_cart() গেটেড), কিন্তু হেডার সাইট-জোড়া প্রতিটা পেজেই থাকে —
   তাই Cart পেজে ঢুকলেই এই ফাইলের 24px আকারের নিয়ম হেডারের বড়
   বাটনগুলোকেও override করে ছোট করে দিত। এখন ".shahaz-cart-page-wrap"
   (আসল wrapper ক্লাস) দিয়ে স্কোপ করা হলো — এখন এটা শুধু Cart
   পেজের ভেতরের হার্ট/ট্র্যাশ বাটনেই প্রযোজ্য, হেডারের কোনো এলিমেন্ট
   কখনো ম্যাচ করবে না (হেডার .shahaz-cart-page-wrap-এর ভেতরে থাকে
   না)। */

/* Cart item actions — same circular 3D footprint as the existing +/- controls. */
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn{
  width:40px !important; height:40px !important;
  min-width:40px !important; max-width:40px !important;
  min-height:40px !important; max-height:40px !important;
  flex:0 0 40px !important;
  padding:0 !important; margin:0 !important;
  border:1px solid var(--sh-gold,#d4af37) !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#fdf6e3,var(--sh-muted)) !important;
  display:flex !important; align-items:center; justify-content:center;
  box-sizing:border-box !important;
  cursor:pointer; line-height:1 !important;
  appearance:none; -webkit-appearance:none;
  box-shadow:0 2px 0 rgba(160,120,20,.35),var(--sh-shadow-soft),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .08s ease,box-shadow .08s ease,background .15s ease,color .15s ease;
}
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn svg{
  width:18px !important; height:18px !important;
  min-width:18px !important; max-width:18px !important;
  min-height:18px !important; max-height:18px !important;
  display:block !important; flex:0 0 18px; overflow:visible;
}
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-wishlist{ color:var(--sh-primary) !important; }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-wishlist:hover{ background:var(--sh-primary) !important; color:#fff !important; }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-wishlist.is-active{ color:var(--sh-primary) !important; }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-wishlist.is-active svg{ fill:var(--sh-primary); }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-remove{ color:var(--sh-destructive) !important; }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn.shahaz-remove:hover{ background:var(--sh-destructive) !important; color:#fff !important; }
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn:active{
  transform:translateY(2px) scale(.97);
  box-shadow:0 0 0 rgba(160,120,20,.35),inset 0 2px 4px rgba(0,0,0,.15);
}
.shahaz-cart-page .shahaz-item-controls .shahaz-icon-btn:disabled{ opacity:.62; cursor:wait; }

/* ---------------------------------------------------------------------
   Cart action feedback — compact glass capsule, anchored above the
   exact action button that was touched.  This is deliberately scoped to
   the native cart so no other wishlist/remove UI on the site is changed.
   --------------------------------------------------------------------- */
.shahaz-cart-action-toast{
  position:fixed;
  z-index:999999;
  max-width:min(82vw,280px);
  padding:7px 12px;
  border:1px solid rgba(212,175,55,.55);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:var(--sh-brand-dark);
  box-shadow:0 8px 24px rgba(86,2,56,.14), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  font-family:var(--sh-font-bangla);
  font-size:.74rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,4px) scale(.96);
  transition:opacity .18s ease,transform .18s ease;
}
.shahaz-cart-action-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.shahaz-cart-action-toast.is-success{
  border-color:rgba(244,0,151,.42);
}
.shahaz-cart-action-toast.is-remove{
  border-color:rgba(220,38,38,.34);
}
.shahaz-cart-action-toast.is-error{
  border-color:rgba(220,38,38,.5);
  color:#8b1022;
}

/* ---- Suggestions ----------------------------------------------------*/
.shahaz-suggest-heading{ font-size:1.05rem; font-weight:700; margin-bottom:12px; }
/* Always 3-across, exactly like both reference screenshots — never
   collapses to 1 or 2 columns at any breakpoint. */
.shahaz-suggest-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
/* ⚠️ Cart Page বাগ-ফিক্স (STEP 01) — আগে কোনো mobile breakpoint ছাড়াই
   সবসময় ৩ কলাম ছিল, ফলে ৩৬০-৩৯০px স্ক্রিনে প্রতিটা কার্ড খুব সরু হয়ে
   যেত এবং "+ কার্টে যোগ" বাটনের টেক্সট কেটে/গাদাগাদি হয়ে যেত (স্ক্রিনশটে
   স্পষ্ট)। এখন সংকীর্ণ স্ক্রিনে ২ কলাম — একই কার্ড ডিজাইন/রং, শুধু
   প্রতিটা কার্ডের জন্য বেশি জায়গা। */
@media (max-width:420px){
  .shahaz-suggest-grid{ grid-template-columns:repeat(2,1fr); }
}
.shahaz-suggest-item{
  border:1px solid var(--sh-border); border-radius:var(--sh-radius-xl);
  padding:10px; text-align:center; background:var(--sh-surface);
  box-shadow:var(--sh-shadow-soft);
}
.shahaz-suggest-thumb img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--sh-radius-lg);
  background:var(--sh-muted); display:block;
}
.shahaz-suggest-name{
  font-size:.72rem; font-weight:600; margin-top:8px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.shahaz-suggest-vendor{ font-size:.65rem; color:var(--sh-muted-foreground); margin-top:1px; }
.shahaz-suggest-price{ font-size:.8rem; font-weight:700; color:var(--sh-primary); margin-top:4px; }
.shahaz-add-btn{
  margin-top:8px; width:100%; border:0; border-radius:999px; padding:7px 8px;
  font-size:.68rem; font-weight:700; color:var(--sh-primary-foreground);
  background:var(--sh-gradient-cta); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:var(--sh-shadow-glow);
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
/* ⚠️ STEP 03 — আগে শুধু :hover-এ সামান্য box-shadow বদলাত, যেটা
   মোবাইলে (touch, কোনো real hover নেই) কার্যত অদৃশ্য ছিল — এটাই
   "hover animation নেই" রিপোর্টের কারণ। এখন desktop hover (lift +
   উজ্জ্বল shadow) এবং mobile/touch :active (press-down feedback)
   দুটোই আছে — একই রং/গ্র্যাডিয়েন্ট, শুধু interaction feedback যোগ। */
.shahaz-add-btn:hover{ box-shadow:var(--sh-shadow-card); transform:translateY(-1px); }
.shahaz-add-btn:active{ transform:translateY(1px) scale(.97); box-shadow:var(--sh-shadow-soft); }
.shahaz-add-btn:disabled{ opacity:.6; cursor:default; transform:none; }

/* ---- Order summary ----------------------------------------------------*/
.shahaz-order-summary{
  background:var(--sh-surface); border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-2xl); box-shadow:var(--sh-shadow-card);
  padding:20px; margin-bottom:var(--sh-section-gap);
}
.shahaz-order-summary h3{ font-size:1.05rem; font-weight:700; margin-bottom:14px; }

.shahaz-coupon-row{
  display:flex; align-items:center; gap:8px;
  background:var(--sh-muted); border-radius:999px; padding:6px 6px 6px 14px; margin-bottom:6px;
}
.shahaz-coupon-icon{ color:var(--sh-primary); display:flex; }
.shahaz-coupon-row input{
  flex:1 1 auto; border:0; background:none; outline:none; font-size:.8rem;
  font-family:inherit; color:var(--sh-foreground);
}
.shahaz-coupon-row button{
  border:0; border-radius:999px; padding:8px 16px; font-size:.75rem; font-weight:700;
  color:#fff; background:var(--sh-warning); cursor:pointer; white-space:nowrap;
  box-shadow:var(--sh-shadow-soft);
}
.shahaz-coupon-message{ font-size:.72rem; margin:0 0 10px 4px; color:var(--sh-destructive); }
.shahaz-coupon-message.is-success{ color:var(--sh-success); }

.shahaz-summary-lines{ display:flex; flex-direction:column; gap:8px; margin-top:12px; font-size:.85rem; }
.shahaz-summary-row{ display:flex; justify-content:space-between; color:var(--sh-foreground); }
.shahaz-discount-row span:last-child{ color:var(--sh-success); }
.shahaz-summary-total{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px dashed var(--sh-border); margin-top:6px; padding-top:10px;
  font-size:1.05rem; font-weight:700;
}

.shahaz-savings-note{
  margin:12px 0 0; font-size:.75rem; color:var(--sh-secondary);
  background:#EEF1FA; border-radius:var(--sh-radius-lg); padding:8px 12px;
}

.shahaz-btn-gradient{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:16px; padding:13px; border:0; border-radius:999px;
  background:var(--sh-gradient-cta); color:var(--sh-primary-foreground);
  font-size:.9rem; font-weight:700; text-decoration:none; box-shadow:var(--sh-shadow-glow);
  cursor:pointer;
}
.shahaz-btn-gradient .shahaz-arrow{ font-size:1rem; }
.shahaz-btn-outline{
  display:block; width:100%; margin-top:8px; padding:12px; border-radius:999px;
  border:1px solid var(--sh-primary); background:var(--sh-surface); color:var(--sh-primary);
  font-size:.85rem; font-weight:600; text-align:center; text-decoration:none;
  box-shadow:var(--sh-shadow-soft);
}

/* ---- Trust badges -----------------------------------------------------*/
/* Screenshot 2 shows this staying a stacked column even inside a wide
   desktop browser frame — so no row-flip at wider breakpoints. */
.shahaz-trust-badges{
  list-style:none; margin:0; padding:16px 18px; display:flex; flex-direction:column; gap:10px;
  background:var(--sh-surface); border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-2xl); box-shadow:var(--sh-shadow-soft);
  font-size:.78rem; color:var(--sh-foreground); margin-bottom:var(--sh-section-gap);
}
.shahaz-trust-badges li{ display:flex; align-items:center; gap:8px; }
.shahaz-trust-icon{ flex:0 0 auto; display:flex; }
.shahaz-trust-icon.is-pink{ color:var(--sh-primary); }
.shahaz-trust-icon.is-amber{ color:var(--sh-warning); }

.shahaz-cart-footer{ text-align:center; font-size:.72rem; color:var(--sh-muted-foreground); padding-top:6px; }

.shahaz-cart-empty{ text-align:center; padding:60px 20px; }
.shahaz-empty-title{ font-size:1.1rem; font-weight:700; margin-bottom:16px; }

/* Loading state while an AJAX call is in flight */
.shahaz-cart-item.is-updating,
.shahaz-order-summary.is-updating{ opacity:.55; pointer-events:none; transition:opacity .15s; }