/* QuickCheckout Frontend CSS v2.6
   - Product badge system
   - Phone: strip leading 0, no +88
   - Variation UI redesigned
   - Mobile fully responsive
*/

/* The Google Fonts @import that used to sit here has been removed. The same fonts are
   already enqueued properly as the 'qco-google-fonts' stylesheet, so this was a duplicate
   download — and an @import inside a stylesheet is render-blocking and cannot be
   preloaded, which made it the slowest possible way to fetch them. */

/* ── Scoped reset ──────────────────────────────────────────────────────────────
   This used to read `*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}`
   with no scope at all. Because this stylesheet loads on any landing page carrying the
   checkout shortcode, that single line stripped the margin and padding off EVERY element
   on the page — the theme's headings, paragraphs, menus, footer, everything — which is
   why sections above and below the checkout collapsed together and the page stopped
   looking the way the theme intended.

   The reset is genuinely needed, but only inside the plugin's own containers. Scoping it
   gives the widget the clean slate it was written against while leaving the rest of the
   page completely untouched. */
.qco-checkout-wrap, .qco-checkout-wrap *, .qco-checkout-wrap *::before, .qco-checkout-wrap *::after,
.qco-showcase-wrap, .qco-showcase-wrap *, .qco-showcase-wrap *::before, .qco-showcase-wrap *::after,
.qco-ty-wrap, .qco-ty-wrap *, .qco-ty-wrap *::before, .qco-ty-wrap *::after,
.qco-float-cart, .qco-float-cart *, .qco-ip-modal-overlay, .qco-ip-modal-overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --qco-primary:       #1a6b3c;
  --qco-primary-dark:  #124d2b;
  --qco-primary-light: #eaf5ee;
  --qco-primary-mid:   #b7dfca;
  --qco-border:        #e2e8f0;
  --qco-text:          #0f172a;
  --qco-muted:         #64748b;
  --qco-error:         #ef4444;
  --qco-success:       #16a34a;
  --qco-card:          #ffffff;
  --qco-radius:        14px;
  --qco-radius-sm:     9px;
  --qco-shadow:        0 2px 12px rgba(0,0,0,.07);
  --font-en: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-bn: 'Tiro Bangla','Hind Siliguri','Noto Sans Bengali',sans-serif;
}

.qco-checkout-wrap{
  font-family:var(--font-bn);
  color:var(--qco-text, #0f172a);
  background:transparent;
  width:100%;max-width:100%;
  overflow-x:clip;
}
.qco-checkout-inner{width:100%;max-width:1100px;margin:0 auto;padding:0;}

/* Title */
.qco-page-title{
  font-family:var(--font-bn);
  text-align:center;font-size:22px;font-weight:700;
  color:var(--qco-text, #0f172a);margin:0 0 24px;
  padding-bottom:16px;border-bottom:2.5px solid var(--qco-primary, #1a6b3c);
}

/* Layout */
.qco-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;width:100%;}
.qco-col-right{position:sticky;top:20px;}

/* Section header */
.qco-sec-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-bn);font-size:14px;font-weight:700;color:var(--qco-primary, #1a6b3c);
  margin:0 0 12px;
}
.qco-sec-head i{font-size:14px;}
.qco-sec-head .qco-sec-line{flex:1;height:1.5px;background:linear-gradient(to right,var(--qco-primary-mid, #b7dfca),transparent);}

/* ═══════════════════════════════════
   PRODUCT CARDS
═══════════════════════════════════ */
.qco-products-section{margin-bottom:20px;}

.qco-product-card{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--qco-card, #ffffff);
  border:2px solid var(--qco-border, #e2e8f0);
  border-radius:var(--qco-radius);
  padding:14px;margin-bottom:10px;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,background .15s;
  position:relative;width:100%;
}
.qco-product-card:hover{border-color:var(--qco-primary-mid, #b7dfca);box-shadow:0 3px 16px rgba(26,107,60,.1);}
.qco-product-card.qco-selected{
  border-color:var(--qco-primary, #1a6b3c);
  background:linear-gradient(135deg,#f5fdf7,#ecf8f1);
  box-shadow:0 4px 20px rgba(26,107,60,.15);
}

/* ── BADGE — sits on top edge, white text ── */
.qco-product-badge{
  position:absolute;
  top:-1px;          /* flush with top border */
  left:50px;         /* clear of checkbox */
  padding:4px 14px;
  border-radius:0 0 10px 10px;
  font-family:var(--font-en);font-size:11px;font-weight:700;
  color:#ffffff !important;
  letter-spacing:.4px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  white-space:nowrap;z-index:3;
  line-height:1.4;
}
/* Card needs top padding so badge doesn't cover content */
.qco-product-card.has-badge{
  padding-top:30px;
}

/* ── Corner selected-check badge ──
   Moved to TOP-RIGHT but SMALL so it doesn't block qty buttons.
   Qty buttons are on the right — we use a tiny indicator instead. */



/* Checkbox */
.qco-pc-check{flex-shrink:0;margin-top:2px;}
.qco-checkbox{
  width:24px;height:24px;border:2px solid #cbd5e1;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  transition:all .16s;background:white;
}
.qco-checkbox i{font-size:12px;color:white;opacity:0;transition:opacity .14s;}
.qco-cb-checked{background:var(--qco-primary, #1a6b3c)!important;border-color:var(--qco-primary, #1a6b3c)!important;}
.qco-cb-checked i{opacity:1;}

/* Image */
.qco-pc-img{
  width:76px;height:76px;object-fit:cover;border-radius:11px;
  flex-shrink:0;border:2px solid var(--qco-border, #e2e8f0);transition:border-color .15s;
}
.qco-product-card.qco-selected .qco-pc-img{border-color:var(--qco-primary-mid, #b7dfca);}

/* Info */
.qco-pc-info{flex:1;min-width:0;}
.qco-pc-name{
  font-family:var(--font-bn);font-size:16px;font-weight:700;
  color:var(--qco-text, #0f172a);line-height:1.45;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qco-pc-price{
  font-family:var(--font-en);font-size:17px;font-weight:800;
  color:var(--qco-primary, #1a6b3c);margin-bottom:8px;
}
.qco-pc-price .qco-taka{font-family:var(--font-bn);}

/* ── VARIATIONS — redesigned ── */
.qco-variations{margin-top:8px;}
.qco-var-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.qco-var-group:last-child{margin-bottom:0;}
.qco-var-label{
  font-family:var(--font-en);font-size:12px;font-weight:600;
  color:var(--qco-muted, #64748b);min-width:36px;flex-shrink:0;
}
.qco-var-btn{
  font-family:var(--font-en);
  padding:5px 13px;
  border:2px solid var(--qco-border, #e2e8f0);border-radius:8px;
  background:white;font-size:12.5px;font-weight:500;
  cursor:pointer;color:var(--qco-text, #0f172a);
  transition:all .15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
}
.qco-var-btn:hover{border-color:var(--qco-primary, #1a6b3c);color:var(--qco-primary, #1a6b3c);background:var(--qco-primary-light, #eaf5ee);}
.qco-var-btn.qco-var-active{
  background:var(--qco-primary, #1a6b3c);border-color:var(--qco-primary, #1a6b3c);
  color:white;font-weight:700;
  box-shadow:0 2px 8px rgba(26,107,60,.25);
}

/* Qty — always visible, z-index above badge overlay */
.qco-pc-qty{display:flex;align-items:center;gap:8px;flex-shrink:0;align-self:flex-start;margin-top:2px;position:relative;z-index:3;}
.qco-qty-btn{
  width:32px;height:32px;border:2px solid var(--qco-border, #e2e8f0);border-radius:8px;
  background:white;font-size:18px;font-family:var(--font-en);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .14s;color:var(--qco-text, #0f172a);padding:0;line-height:1;
}
.qco-qty-btn:hover{background:var(--qco-primary, #1a6b3c);border-color:var(--qco-primary, #1a6b3c);color:white;}
.qco-qty-val{min-width:28px;text-align:center;font-size:16px;font-weight:700;font-family:var(--font-en);}

/* ═══════════════════════════════════
   FORM
═══════════════════════════════════ */
.qco-form-section{margin-bottom:20px;}
/* The name/phone/address fields sat too close together — 14px left the label of the next
   field almost touching the previous input, so the group read as one dense block. */
.qco-field-wrap{margin-bottom:22px;}
.qco-field-wrap:last-child{margin-bottom:0;}
.qco-field-label{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-bn);font-size:15px;font-weight:700;
  color:var(--qco-text, #0f172a);margin-bottom:7px;
}
.qco-field-label i{font-size:13px;color:var(--qco-primary, #1a6b3c);width:16px;}
.qco-req{color:var(--qco-error);margin-left:2px;font-family:var(--font-en);}
.qco-field-input{
  display:block;width:100%;padding:13px 16px;
  border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius-sm);
  font-size:15px;font-family:var(--font-bn);background:white;color:var(--qco-text, #0f172a);
  outline:none;transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;
}
.qco-field-input::placeholder{color:#a8b5c6;font-size:14px;}
.qco-field-input:focus{border-color:var(--qco-primary, #1a6b3c);box-shadow:0 0 0 4px rgba(26,107,60,.1);}
.qco-field-error{border-color:var(--qco-error)!important;box-shadow:0 0 0 4px rgba(239,68,68,.09)!important;}
.qco-field-textarea{resize:vertical;min-height:90px;}
.qco-field-validation-msg{font-size:13px;font-family:var(--font-bn);margin-top:5px;display:none;}
.qco-field-validation-msg.show{display:block;color:var(--qco-error);}
.qco-field-validation-msg.qco-field-validation-ok{color:var(--qco-success);}

/* ═══════════════════════════════════
   SHIPPING
═══════════════════════════════════ */
/* Columns follow the number of zones instead of always being two.
   With `1fr 1fr` a store offering ONE delivery zone got a half-width box with an empty
   gap beside it, which reads as a missing second option rather than a deliberate single
   choice. auto-fit collapses the empty track, so one zone spans the full width, two split
   it 50/50, and three or more wrap onto their own rows — all without a media query. */
.qco-shipping-section{
  margin-bottom:20px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.qco-shipping-free-active{
  display:flex;align-items:center;gap:12px;background:linear-gradient(135deg, var(--qco-primary-light, #eaf5ee), #fff);
  border:1.5px solid var(--qco-primary-mid, #b7dfca);border-radius:var(--qco-radius);padding:14px 16px;margin-bottom:20px;
}
.qco-shipping-free-active i{font-size:22px;color:var(--qco-primary, #1a6b3c);flex-shrink:0;}
.qco-shipping-free-active strong{display:block;font-family:var(--font-bn);font-size:14px;color:var(--qco-primary, #1a6b3c);}
.qco-shipping-free-active span{display:block;font-family:var(--font-bn);font-size:12px;color:var(--qco-muted, #64748b);margin-top:2px;}
.qco-shipping-option{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius-sm);
  cursor:pointer;margin-bottom:0;background:white;transition:all .16s;width:100%;
}
.qco-shipping-option input[type=radio]{display:none;}
.qco-so-radio{
  width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .16s;
}
.qco-so-radio::after{content:'';width:10px;height:10px;background:white;border-radius:50%;opacity:0;transition:opacity .16s;}
.qco-shipping-selected,.qco-shipping-option:has(input:checked){border-color:var(--qco-primary, #1a6b3c);background:var(--qco-primary-light, #eaf5ee);}
.qco-shipping-selected .qco-so-radio,.qco-shipping-option:has(input:checked) .qco-so-radio{background:var(--qco-primary, #1a6b3c);border-color:var(--qco-primary, #1a6b3c);}
.qco-shipping-selected .qco-so-radio::after,.qco-shipping-option:has(input:checked) .qco-so-radio::after{opacity:1;}
.qco-so-label{flex:1;font-family:var(--font-bn);font-size:15px;font-weight:600;}
.qco-so-cost{font-family:var(--font-en);font-size:15px;font-weight:700;color:var(--qco-primary, #1a6b3c);flex-shrink:0;}
.qco-so-icon{color:var(--qco-muted, #64748b);font-size:16px;flex-shrink:0;}

/* ═══════════════════════════════════
   SUMMARY
═══════════════════════════════════ */
.qco-summary-card{background:var(--qco-card, #ffffff);border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius);overflow:hidden;box-shadow:var(--qco-shadow);margin-bottom:14px;}
.qco-sum-head{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--qco-primary, #1a6b3c);color:white;font-family:var(--font-en);font-size:14px;font-weight:700;}
.qco-sum-body{padding:0;}
.qco-sum-product-row{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid #f1f5f9;gap:8px;}
.qco-sum-pname{color:var(--qco-muted, #64748b);font-family:var(--font-bn);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.qco-sum-pval{color:var(--qco-text, #0f172a);font-weight:700;font-family:var(--font-en);white-space:nowrap;font-size:14px;}
.qco-sum-shipping-row{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid #f1f5f9;}
.qco-sum-shipping-row span:first-child{color:var(--qco-muted, #64748b);font-family:var(--font-bn);display:flex;align-items:center;gap:6px;font-size:13px;}
.qco-free-delivery-note{
  display:flex;align-items:center;gap:7px;background:var(--qco-primary-light, #eaf5ee);color:var(--qco-primary, #1a6b3c);
  border:1.5px dashed var(--qco-primary-mid, #b7dfca);border-radius:9px;padding:8px 12px;font-size:12px;font-weight:600;margin:0 18px 12px;
}
.qco-free-delivery-note i{font-size:13px;}
.qco-free-delivery-note .qco-fd-remaining{font-family:var(--font-en);font-weight:800;}
.qco-shipping-cost{font-weight:700;font-family:var(--font-en);font-size:14px;}
.qco-sum-total{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#f0faf4;border-top:2px solid var(--qco-primary-mid, #b7dfca);}
.qco-sum-total span:first-child{font-family:var(--font-bn);font-size:16px;font-weight:700;}
.qco-total{font-family:var(--font-en);font-size:20px;font-weight:800;color:var(--qco-primary, #1a6b3c);}

/* COD */
.qco-cod-badge{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fffbeb;border:2px solid #fde68a;border-radius:var(--qco-radius-sm);
  padding:12px 14px;font-family:var(--font-bn);font-size:14px;color:#92400e;font-weight:700;
  margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qco-cod-badge i{color:#b45309;font-size:15px;flex-shrink:0;}
/* When the Upsell section renders right before this badge, its own bottom edge sits flush
   against it with no natural gap — this margin only applies in that specific adjacency. */
.qco-upsell-section + .qco-cod-badge{margin-top:20px;}

/* Trust */



/* Submit button */
.qco-submit-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:16px 20px;
  background:var(--qco-primary, #1a6b3c);color:white;border:none;
  border-radius:var(--qco-radius);font-size:17px;font-weight:700;
  font-family:var(--font-bn);cursor:pointer;
  box-shadow:0 4px 20px rgba(26,107,60,.3);
  transition:background .18s,box-shadow .18s,opacity .18s;
}
.qco-submit-btn:not(:disabled):hover{background:var(--qco-primary-dark, #124d2b);box-shadow:0 6px 26px rgba(26,107,60,.4);}
.qco-submit-btn:active{transform:scale(.99);}
.qco-submit-btn:disabled{opacity:.45;cursor:not-allowed;animation:none!important;transform:none!important;}
.qco-submit-btn i{font-size:16px;flex-shrink:0;}
.qco-btn-total-wrap{font-family:var(--font-en);font-size:17px;}
.qco-btn-divider{opacity:.4;margin:0 4px;}
.qco-submit-btn.qco-btn-animated:not(:disabled){animation:zoomCornerShake 2s ease-in-out infinite;will-change:transform;}
@keyframes zoomCornerShake{
  0%,65%{transform:scale(1) rotate(0deg);}
  70%{transform:scale(1.08) rotate(0deg);}
  75%{transform:scale(1.08) rotate(1.5deg);}
  80%{transform:scale(1.08) rotate(-1.5deg);}
  85%{transform:scale(1.08) rotate(1.5deg);}
  100%{transform:scale(1) rotate(0deg);}
}

.qco-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:white;border-radius:50%;animation:qco-spin .65s linear infinite;flex-shrink:0;}
@keyframes qco-spin{to{transform:rotate(360deg);}}

.qco-error-msg{
  display:flex;align-items:flex-start;gap:10px;
  background:#fef2f2;border:2px solid #fecaca;border-radius:var(--qco-radius-sm);
  padding:13px 15px;color:var(--qco-error);font-family:var(--font-bn);font-size:14px;margin-top:10px;
}
.qco-error-msg i{font-size:15px;margin-top:1px;flex-shrink:0;}

/* ═══════════════════════════════════
   THANK YOU PAGE
═══════════════════════════════════ */
.qco-ty-wrap{font-family:var(--font-bn);max-width:600px;margin:36px auto;padding:0 16px 56px;color:var(--qco-text, #0f172a);}

.qco-ty-hero{text-align:center;margin-bottom:26px;}
.qco-ty-check-circle{
  width:76px;height:76px;margin:0 auto 20px;background:var(--qco-primary, #1a6b3c);border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(26,107,60,.3);
  animation:ty-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.qco-ty-check-circle i{font-size:32px;color:white;}
.qco-ty-congrats{font-size:28px;font-weight:800;color:var(--qco-primary, #1a6b3c);margin:0 0 8px;animation:ty-fade .4s .15s both;}
.qco-ty-subheading{font-size:17px;font-weight:700;color:var(--qco-text, #0f172a);margin:0 0 12px;animation:ty-fade .4s .25s both;}
.qco-ty-desc{font-size:14px;color:var(--qco-muted, #64748b);line-height:1.75;margin:0;max-width:460px;margin-left:auto;margin-right:auto;animation:ty-fade .4s .35s both;}

.qco-ty-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;animation:ty-fade .4s .45s both;}
.qco-ty-step{border-radius:14px;padding:18px 10px;text-align:center;}
.qco-ty-step-green{background:#eaf5ee;}
.qco-ty-step-blue{background:#eaf1fd;}
.qco-ty-step-purple{background:#f3eefc;}
.qco-ty-step-icon{
  width:44px;height:44px;margin:0 auto 12px;background:white;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.qco-ty-step-green .qco-ty-step-icon i{color:#1a6b3c;font-size:17px;}
.qco-ty-step-blue .qco-ty-step-icon i{color:#2563eb;font-size:17px;}
.qco-ty-step-purple .qco-ty-step-icon i{color:#7c3aed;font-size:17px;}
.qco-ty-step strong{display:block;font-size:13px;margin-bottom:4px;}
.qco-ty-step-green strong{color:#15803d;}
.qco-ty-step-blue strong{color:#1d4ed8;}
.qco-ty-step-purple strong{color:#6d28d9;}
.qco-ty-step span{display:block;font-size:12px;color:var(--qco-muted, #64748b);}
@media(max-width:520px){
  .qco-ty-steps{grid-template-columns:1fr;}
}

.qco-ty-important{background:#fffbeb;border:1.5px solid #fde68a;border-radius:14px;padding:18px 20px;margin-bottom:16px;animation:ty-fade .4s .8s both;}
.qco-ty-important strong{display:block;text-align:center;font-size:14px;color:#92400e;margin-bottom:8px;}
.qco-ty-important strong i{margin-right:5px;}
.qco-ty-important p{margin:0;font-size:13px;line-height:1.75;color:#78350f;text-align:center;}

@keyframes ty-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ty-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qco-ty-card{background:white;border:1.5px solid var(--qco-border, #e2e8f0);border-radius:16px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 16px rgba(0,0,0,.07);animation:ty-fade .4s .6s both;}
.qco-ty-card-head{display:flex;align-items:center;gap:9px;padding:14px 20px;background:var(--qco-primary, #1a6b3c);color:white;font-family:var(--font-en);font-size:14px;font-weight:700;}
.qco-ty-card-head .qco-ty-order-num{font-size:13px;opacity:.85;margin-left:auto;font-weight:500;}
.qco-ty-row{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #f1f5f9;font-size:14px;}
.qco-ty-row:last-child{border-bottom:none;}
.qco-ty-row .ty-label{display:flex;align-items:center;gap:7px;color:var(--qco-muted, #64748b);}
.qco-ty-row .ty-label i{color:var(--qco-primary, #1a6b3c);width:15px;font-size:12px;}
.qco-ty-row strong{color:var(--qco-text, #0f172a);font-weight:600;text-align:right;max-width:60%;}
.qco-ty-prods{padding:4px 20px 14px;}
.qco-ty-prods-label{font-family:var(--font-en);font-size:10.5px;color:#aaa;text-transform:uppercase;letter-spacing:.7px;margin:12px 0 10px;}
.qco-ty-prod-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f5f5f5;}
.qco-ty-prod-row:last-child{border-bottom:none;}
.qco-ty-prod-img{width:50px;height:50px;object-fit:cover;border-radius:10px;border:1.5px solid var(--qco-border, #e2e8f0);flex-shrink:0;}
.qco-ty-prod-ph{width:50px;height:50px;background:#f1f5f9;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.qco-ty-prod-ph i{font-size:18px;color:#94a3b8;}
.qco-ty-pname{font-size:14px;font-weight:600;margin-bottom:2px;}
.qco-ty-pqty{font-size:13px;color:var(--qco-muted, #64748b);font-family:var(--font-en);}
.qco-ty-pamt{font-family:var(--font-en);font-weight:700;color:var(--qco-text, #0f172a);font-size:14px;margin-left:auto;flex-shrink:0;}
.qco-ty-total-section{border-top:2px solid var(--qco-primary-mid, #b7dfca);background:#f0faf4;}
.qco-ty-total-row{display:flex;justify-content:space-between;align-items:center;padding:11px 20px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04);}
.qco-ty-total-row:last-child{border-bottom:none;font-size:17px;font-weight:700;}
.qco-ty-total-row span:first-child{color:var(--qco-muted, #64748b);display:flex;align-items:center;gap:6px;}
.qco-ty-total-row i{color:var(--qco-primary, #1a6b3c);font-size:13px;}
.qco-ty-grand-total{color:var(--qco-primary, #1a6b3c)!important;font-size:20px!important;font-family:var(--font-en);}
.qco-ty-trust{display:flex;gap:10px;flex-wrap:wrap;animation:ty-fade .4s .85s both;}
.qco-ty-trust-item{flex:1;min-width:100px;display:flex;align-items:center;justify-content:center;gap:7px;background:white;border:1.5px solid var(--qco-border, #e2e8f0);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--qco-muted, #64748b);}
.qco-ty-trust-item i{color:var(--qco-primary, #1a6b3c);font-size:15px;}
.qco-ty-empty{text-align:center;background:#fff7ed;border:1.5px solid #fed7aa;border-radius:14px;padding:32px;color:#c2410c;}
.qco-ty-empty i{font-size:36px;margin-bottom:12px;display:block;}
.qco-ty-empty h2{font-size:18px;font-weight:700;margin:0 0 6px;}
.qco-ty-empty p{font-size:14px;margin:0;opacity:.8;}

/* ═══════════════════════════════════
   MOBILE
═══════════════════════════════════ */
@media(max-width:720px){
  .qco-checkout-wrap{overflow-x:hidden;}
  .qco-checkout-inner{padding:0;max-width:100%;}
  .qco-layout{display:flex!important;flex-direction:column;gap:0;}
  .qco-col-left{width:100%;}
  .qco-col-right{position:static;width:100%;margin-top:18px;}

  .qco-page-title{font-size:18px;margin-bottom:18px;}
  .qco-product-card{padding:12px 10px;gap:9px;}
  /* On mobile: badge sits above image+info area */
  .qco-product-badge{font-size:10.5px;padding:3px 10px;}
  .qco-pc-img{width:60px;height:60px;border-radius:9px;}
  .qco-pc-name{font-size:14px;white-space:normal;line-height:1.3;}
  .qco-pc-price{font-size:15px;margin-bottom:6px;}

  /* Variations — wrap nicely */
  .qco-var-group{gap:5px;}
  .qco-var-btn{font-size:12px;padding:4px 11px;}
  .qco-var-label{font-size:11.5px;}

  /* Qty — smaller */
  .qco-qty-btn{width:28px;height:28px;font-size:16px;}
  .qco-qty-val{font-size:14px;min-width:24px;}

  .qco-field-input{padding:12px 14px;font-size:14.5px;}
  .qco-field-label{font-size:14px;}
  .qco-shipping-section{grid-template-columns:1fr;}
  .qco-shipping-option{padding:12px 13px;}
  .qco-so-label{font-size:14px;}
  .qco-so-cost{font-size:14px;}
  .qco-submit-btn{font-size:15.5px;padding:15px;}
  .qco-btn-total-wrap{font-size:15.5px;}
  .qco-cod-badge{white-space:normal;text-align:center;font-size:13px;}

  .qco-total{font-size:18px;}
}

@media(max-width:400px){
  .qco-pc-img{width:52px;height:52px;}
  .qco-pc-name{font-size:13px;}
  .qco-submit-btn{font-size:14.5px;padding:14px 10px;}
  .qco-btn-divider{display:none;}
  .qco-var-btn{font-size:11.5px;padding:3px 9px;}
}


/* ═══════════════════════════════════════════════════
   v3.0 ADDITIONS
   - Inline card: short description + old price
   - Phone field: 🇧🇩 +880 chip
   - Order Summary: qty stepper + remove (JS-rendered rows)
   - Product Showcase: grid, filters, cards
   - General polish + accessibility
═══════════════════════════════════════════════════ */

/* ── Inline card: short description + old price ── */
.qco-pc-desc{
  font-family:var(--font-bn);font-size:12.5px;color:var(--qco-muted, #64748b);
  margin-bottom:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qco-pc-price{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.qco-pc-old-price{
  font-family:var(--font-en);font-size:13px;font-weight:600;color:#a1a1aa;
  text-decoration:line-through;
}

/* ── Phone field: fixed 🇧🇩 +880 chip, styled as one control ── */
.qco-phone-group{
  display:flex;align-items:stretch;
  border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius-sm);
  background:white;overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.qco-phone-group:focus-within{border-color:var(--qco-primary, #1a6b3c);box-shadow:0 0 0 4px rgba(26,107,60,.1);}
.qco-phone-group:has(.qco-field-error){border-color:var(--qco-error);box-shadow:0 0 0 4px rgba(239,68,68,.09);}
.qco-phone-flag{
  display:flex;align-items:center;gap:6px;
  padding:0 12px;background:linear-gradient(180deg,#f8fafc,#eef2f6);
  border-right:2px solid var(--qco-border, #e2e8f0);
  font-family:var(--font-en);font-weight:700;color:var(--qco-text, #0f172a);font-size:14.5px;
  flex-shrink:0;white-space:nowrap;user-select:none;
}
.qco-phone-flag-emoji{font-size:19px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.1));}
.qco-phone-cc{letter-spacing:.2px;}
.qco-phone-group .qco-phone-input{
  border:none!important;border-radius:0!important;box-shadow:none!important;
  flex:1;min-width:0;
}

/* ── Order Summary: dynamic rows with qty stepper + remove ── */
.qco-sum-empty{
  padding:22px 18px;text-align:center;color:var(--qco-muted, #64748b);
  font-family:var(--font-bn);font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.qco-sum-empty i{font-size:15px;opacity:.55;}
.qco-sum-product-row{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:9px 14px;border-bottom:1px solid #f1f5f9;
}
.qco-sum-pimg{
  width:36px;height:36px;border-radius:8px;object-fit:cover;
  border:1.5px solid var(--qco-border, #e2e8f0);flex-shrink:0;background:#f8fafc;
}
.qco-sum-pimg-ph{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;}
.qco-sum-pname{
  color:var(--qco-text, #0f172a);font-family:var(--font-bn);font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;
}
.qco-sum-qty{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.qco-sum-qty-btn{
  width:21px;height:21px;border:1.5px solid var(--qco-border, #e2e8f0);border-radius:6px;
  background:white;font-family:var(--font-en);font-size:12.5px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .14s;color:var(--qco-text, #0f172a);padding:0;
}
.qco-sum-qty-btn:hover{background:var(--qco-primary, #1a6b3c);border-color:var(--qco-primary, #1a6b3c);color:white;}
.qco-sum-qty-val{min-width:15px;text-align:center;font-size:12px;font-weight:700;font-family:var(--font-en);}
.qco-sum-pval{color:var(--qco-text, #0f172a);font-weight:700;font-family:var(--font-en);white-space:nowrap;font-size:13.5px;flex-shrink:0;min-width:52px;text-align:right;}
.qco-sum-remove{
  width:23px;height:23px;border:none;border-radius:6px;background:transparent;
  color:#cbd5e1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:12px;transition:all .15s;flex-shrink:0;
}
.qco-sum-remove:hover{background:#fef2f2;color:var(--qco-error);}

@keyframes qco-pulse-glow{
  0%{box-shadow:var(--qco-shadow);}
  40%{box-shadow:0 0 0 6px rgba(26,107,60,.18),var(--qco-shadow);}
  100%{box-shadow:var(--qco-shadow);}
}
.qco-summary-card.qco-pulse{animation:qco-pulse-glow .9s ease-out;}

/* ═══════════════════════════════════
   PRODUCT SHOWCASE
═══════════════════════════════════ */
.qco-showcase-wrap{font-family:var(--font-bn);color:var(--qco-text, #0f172a);width:100%;overflow-x:clip;}
.qco-showcase-inner{width:100%;max-width:1180px;margin:0 auto;padding:0;}
.qco-showcase-title{
  font-family:var(--font-bn);text-align:center;font-size:26px;font-weight:800;
  color:var(--qco-text, #0f172a);margin:0 0 20px;
}
.qco-showcase-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px;}
.qco-sf-btn{
  font-family:var(--font-en);padding:9px 20px;border-radius:999px;
  border:2px solid var(--qco-border, #e2e8f0);background:white;color:var(--qco-muted, #64748b);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:all .18s;
}
.qco-sf-btn:hover{border-color:var(--qco-primary-mid, #b7dfca);color:var(--qco-primary, #1a6b3c);}
.qco-sf-btn.qco-sf-active{
  background:var(--qco-primary, #1a6b3c);border-color:var(--qco-primary, #1a6b3c);color:white;
  box-shadow:0 3px 10px rgba(26,107,60,.25);
}

.qco-showcase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.qco-sc-card{
  display:flex;flex-direction:column;position:relative;height:100%;
  background:var(--qco-card, #ffffff);border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;
}
.qco-sc-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(15,23,42,.13);border-color:var(--qco-primary-mid, #b7dfca);}
.qco-sc-card.qco-sc-hidden{display:none;}
.qco-sc-card .qco-product-badge{top:10px;left:10px;border-radius:8px;}

/* Persistent "already in cart" indicator — updates live, from anywhere the cart changes */
.qco-sc-cart-badge{
  position:absolute;top:10px;right:10px;z-index:4;
  display:none;align-items:center;gap:5px;
  background:var(--qco-primary, #1a6b3c);color:white;
  padding:5px 11px;border-radius:999px;
  font-family:var(--font-bn);font-size:11.5px;font-weight:700;
  box-shadow:0 2px 10px rgba(26,107,60,.35);
  white-space:nowrap;
}
.qco-sc-cart-badge i{font-size:10px;}
.qco-sc-card.qco-sc-in-cart{border-color:var(--qco-primary, #1a6b3c);box-shadow:0 0 0 3px rgba(26,107,60,.13);}
.qco-sc-card.qco-sc-in-cart .qco-sc-cart-badge{display:flex;}

.qco-sc-img-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f8fafc;}
.qco-sc-img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block;}
.qco-sc-card:hover .qco-sc-img{transform:scale(1.06);}

.qco-sc-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px;gap:8px;}
.qco-sc-name{
  font-family:var(--font-bn);font-size:15.5px;font-weight:700;line-height:1.35;color:var(--qco-text, #0f172a);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.qco-sc-desc{
  font-family:var(--font-bn);font-size:12.5px;color:var(--qco-muted, #64748b);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qco-sc-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:2px;}
.qco-sc-price{font-family:var(--font-en);font-size:19px;font-weight:800;color:var(--qco-primary, #1a6b3c);}
.qco-sc-price .qco-taka{font-family:var(--font-bn);}
.qco-sc-old-price{font-family:var(--font-en);font-size:13.5px;font-weight:600;color:#a1a1aa;text-decoration:line-through;}

.qco-sc-body .qco-var-group{margin-bottom:0;}
.qco-sc-body .qco-var-btn{padding:4px 10px;font-size:11.5px;}

.qco-sc-footer{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.qco-sc-qty{display:flex;align-items:center;justify-content:center;gap:10px;}

.qco-sc-add-btn{
  position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  padding:12px 14px;border:none;border-radius:var(--qco-radius-sm);
  background:var(--qco-primary, #1a6b3c);color:white;font-family:var(--font-en);
  font-size:14px;font-weight:700;cursor:pointer;
  transition:background .18s,box-shadow .18s,transform .12s;
}
.qco-sc-card:hover .qco-sc-add-btn{box-shadow:0 6px 18px rgba(26,107,60,.3);}
.qco-sc-add-btn:hover{background:var(--qco-primary-dark, #124d2b);}
.qco-sc-add-btn:active{transform:scale(.98);}
.qco-sc-add-text,.qco-sc-add-ok{display:flex;align-items:center;justify-content:center;gap:8px;}
.qco-sc-add-ok{display:none;}
.qco-sc-add-btn.qco-sc-add-success{background:var(--qco-success);}
.qco-sc-add-btn.qco-sc-add-error{background:var(--qco-error);}

@keyframes qco-sc-added-pulse{0%{transform:scale(1);}35%{transform:scale(1.025);}100%{transform:scale(1);}}
.qco-sc-card.qco-sc-added-pulse{
  animation:qco-sc-added-pulse .5s ease-out;
  border-color:var(--qco-primary, #1a6b3c);box-shadow:0 0 0 4px rgba(26,107,60,.15);
}

/* Showcase tablet / mobile — 4 → 3 → 2 columns, per spec */
@media(max-width:1023px){
  .qco-showcase-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
}
@media(max-width:639px){
  .qco-showcase-grid{grid-template-columns:repeat(2,1fr);gap:11px;}
  .qco-showcase-title{font-size:20px;margin-bottom:14px;}
  .qco-sc-body{padding:10px 10px 12px;gap:6px;}
  .qco-sc-name{font-size:13px;min-height:2.4em;}
  .qco-sc-desc{-webkit-line-clamp:1;font-size:11px;}
  .qco-sc-price{font-size:16px;}
  .qco-sc-old-price{font-size:11px;}
  .qco-sf-btn{padding:7px 14px;font-size:12.5px;}
  .qco-sc-add-btn{padding:10px 8px;font-size:12.5px;}
  .qco-sc-qty{gap:8px;}
  .qco-sc-cart-badge{padding:3px 8px;font-size:10px;top:6px;right:6px;}
  .qco-sc-card .qco-product-badge{top:6px;left:6px;}
}

/* ═══════════════════════════════════
   GENERAL POLISH
═══════════════════════════════════ */
.qco-checkout-wrap{animation:qco-fade-up .45s ease-out both;}
@keyframes qco-fade-up{from{opacity:0;}to{opacity:1;}}

.qco-field-input:focus-visible,.qco-submit-btn:focus-visible,.qco-sc-add-btn:focus-visible,
.qco-sf-btn:focus-visible,.qco-var-btn:focus-visible,.qco-qty-btn:focus-visible{
  outline:2.5px solid var(--qco-primary, #1a6b3c);outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  .qco-checkout-wrap,.qco-sc-card,.qco-sc-img,.qco-submit-btn.qco-btn-animated,
  .qco-ty-check-circle,.qco-ty-congrats,.qco-ty-subheading,.qco-ty-desc,
  .qco-ty-steps,.qco-ty-card,.qco-ty-important,.qco-ty-trust,
  .qco-summary-card.qco-pulse,.qco-sc-card.qco-sc-added-pulse{
    animation:none!important;transition:none!important;
  }
}

/* Intermediate tablet breakpoint — ease the two-column layout in before the 720px stack */
@media(max-width:900px) and (min-width:721px){
  .qco-layout{grid-template-columns:1fr 300px;gap:20px;}
}

/* ── Mobile refinements for the new pieces ── */
@media(max-width:720px){
  .qco-phone-flag{padding:0 9px;font-size:13px;}
  .qco-phone-flag-emoji{font-size:16px;}
  .qco-sum-product-row{padding:9px 14px;gap:6px;}
  .qco-sum-pname{font-size:12.5px;}
  .qco-sum-qty-btn{width:19px;height:19px;}
  .qco-sum-pval{font-size:12.5px;min-width:44px;}
  .qco-pc-desc{font-size:11.5px;}
}
@media(max-width:380px){
  .qco-sum-product-row{flex-wrap:wrap;row-gap:6px;}
  .qco-sum-pname{flex:1 1 calc(100% - 44px);white-space:normal;line-height:1.3;min-width:0;}
  .qco-sum-qty{margin-left:44px;}
  .qco-sum-pval{margin-left:auto;}
}

/* ═══════════════════════════════════
   PAYMENT METHOD SELECTOR
═══════════════════════════════════ */
.qco-payment-options{display:flex;flex-wrap:wrap;gap:10px;}
.qco-payment-option{
  display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;
  padding:12px 16px;border:2px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius-sm);
  background:var(--qco-card, #ffffff);transition:all .16s;flex:1 1 190px;
}
.qco-payment-option:hover{border-color:var(--qco-primary-mid, #b7dfca);}
.qco-payment-option.qco-payment-selected{border-color:var(--qco-primary, #1a6b3c);background:var(--qco-primary-light, #eaf5ee);}
.qco-payment-option input[type=radio]{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;}
.qco-po-radio{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--qco-border, #e2e8f0);
  flex-shrink:0;position:relative;transition:border-color .16s;background:white;
}
.qco-payment-option.qco-payment-selected .qco-po-radio{border-color:var(--qco-primary, #1a6b3c);}
.qco-payment-option.qco-payment-selected .qco-po-radio::after{
  content:'';position:absolute;inset:3px;background:var(--qco-primary, #1a6b3c);border-radius:50%;
}
.qco-po-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:white;font-size:15px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.qco-po-icon-logo{
  background:white;border:1.5px solid var(--qco-border, #e2e8f0);padding:5px;box-shadow:none;
}
.qco-po-icon-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.qco-po-label{font-family:var(--font-bn);font-weight:700;font-size:14px;color:var(--qco-text, #0f172a);}

.qco-payment-details{
  display:none;margin-top:14px;padding:16px;background:#f8fafc;
  border:1.5px dashed var(--qco-border, #e2e8f0);border-radius:var(--qco-radius-sm);
}
.qco-pd-number-box{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;
  font-family:var(--font-bn);font-size:13.5px;color:var(--qco-text, #0f172a);
}
.qco-pd-number{font-family:var(--font-en);font-size:16px;font-weight:800;color:var(--qco-primary, #1a6b3c);letter-spacing:.4px;}
.qco-pd-copy{
  border:1.5px solid var(--qco-border, #e2e8f0);background:white;border-radius:7px;width:28px;height:28px;
  cursor:pointer;color:var(--qco-muted, #64748b);transition:all .15s;flex-shrink:0;
}
.qco-pd-copy:hover{border-color:var(--qco-primary, #1a6b3c);color:var(--qco-primary, #1a6b3c);}
.qco-pd-instructions{font-family:var(--font-bn);font-size:12.5px;color:var(--qco-muted, #64748b);margin:0 0 14px;font-style:italic;}
.qco-payment-details .qco-field-wrap:last-child{margin-bottom:0;}

@media(max-width:480px){
  .qco-payment-option{flex:1 1 100%;}
}

/* ═══════════════════════════════════
   REPEAT ORDER PROTECTION — popup
═══════════════════════════════════ */
.qco-ip-modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:999999;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(2px);
}
.qco-ip-modal{
  background:white;border-radius:20px;padding:32px 28px;max-width:400px;width:100%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:qco-modal-pop .3s cubic-bezier(.2,.9,.3,1.2);
  font-family:var(--font-bn);
}
@keyframes qco-modal-pop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.qco-ip-modal-icon{font-size:52px;margin-bottom:10px;line-height:1;}
.qco-ip-modal-title{font-size:19px;font-weight:800;color:var(--qco-text, #0f172a);margin:0 0 10px;}
.qco-ip-modal-msg{font-size:13.5px;color:var(--qco-muted, #64748b);line-height:1.65;margin:0 0 18px;}
.qco-ip-modal-contact{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;margin-bottom:12px;border-radius:10px;background:var(--qco-primary-light, #eaf5ee);
  color:var(--qco-primary, #1a6b3c);font-weight:700;text-decoration:none;font-family:var(--font-en);font-size:14px;
}

@media(prefers-reduced-motion:reduce){
  .qco-ip-modal{animation:none!important;}
}

/* ═══════════════════════════════════
   FLOATING CART WIDGET
═══════════════════════════════════ */
.qco-float-cart{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:99997;
  display:none;align-items:center;gap:12px;cursor:pointer;
  background:var(--qco-text, #0f172a);color:white;
  padding:10px 20px 10px 10px;border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .18s;
  font-family:var(--font-en);
  user-select:none;
}
.qco-float-cart:hover{transform:translateY(-50%) scale(1.05);}
.qco-fc-icon{
  width:42px;height:42px;border-radius:50%;background:var(--qco-primary, #1a6b3c);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
  color:white;
}
.qco-fc-info{display:flex;flex-direction:column;gap:1px;line-height:1.3;}
.qco-fc-count{font-size:11.5px;font-weight:600;opacity:.82;white-space:nowrap;}
.qco-fc-total{font-size:17px;font-weight:800;white-space:nowrap;}

@keyframes qco-fc-pulse{0%{transform:translateY(-50%) scale(1);}35%{transform:translateY(-50%) scale(1.08);}100%{transform:translateY(-50%) scale(1);}}
.qco-float-cart.qco-fc-pulse{animation:qco-fc-pulse .4s ease-out;}

@media(max-width:720px){
  .qco-float-cart{right:12px;padding:8px 16px 8px 8px;gap:9px;border-radius:16px;}
  .qco-fc-icon{width:36px;height:36px;font-size:15px;}
  .qco-fc-count{font-size:10.5px;}
  .qco-fc-total{font-size:15px;}
}
@media(max-width:380px){
  .qco-float-cart{right:8px;}
}

@media(prefers-reduced-motion:reduce){
  .qco-float-cart.qco-fc-pulse{animation:none!important;}
}

/* ═══════════════════════════════════
   UPSELL SUGGESTIONS
═══════════════════════════════════ */
.qco-upsell-section{
  background:var(--qco-card, #ffffff);border:1.5px solid var(--qco-border, #e2e8f0);border-radius:var(--qco-radius);
  padding:14px;margin-top:14px;
}
.qco-upsell-head{
  font-family:var(--font-bn);font-size:13px;font-weight:700;color:var(--qco-text, #0f172a);
  margin-bottom:10px;display:flex;align-items:center;gap:7px;
}
.qco-upsell-head i{color:#f59e0b;}
.qco-upsell-item{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-top:1px solid #f1f5f9;
}
.qco-upsell-item:first-of-type{border-top:none;padding-top:0;}
.qco-upsell-img{
  width:42px;height:42px;border-radius:8px;object-fit:cover;
  border:1.5px solid var(--qco-border, #e2e8f0);flex-shrink:0;background:#f8fafc;
}
.qco-upsell-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.qco-upsell-name{
  font-family:var(--font-bn);font-size:12.5px;font-weight:600;color:var(--qco-text, #0f172a);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qco-upsell-price{font-family:var(--font-en);font-size:13px;font-weight:700;color:var(--qco-primary, #1a6b3c);}
.qco-upsell-add{
  width:32px;height:32px;border-radius:9px;border:none;flex-shrink:0;
  background:var(--qco-primary, #1a6b3c);color:white;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.qco-upsell-add:hover{background:var(--qco-primary-dark, #124d2b);transform:scale(1.06);}

@media(max-width:720px){
  .qco-upsell-section{padding:12px;}
  .qco-upsell-img{width:38px;height:38px;}
  .qco-upsell-name{font-size:12px;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   THEME COMPATIBILITY LAYER
   Themes style bare `input`, `textarea`, `select`, `button` and `img` with broad
   selectors that frequently outrank the single-class rules above — which showed up as
   over-tall textareas, inputs with the theme's own borders and heights, and buttons
   inheriting the theme's font. Repeating the critical properties at a higher specificity
   (container + element + class) wins those collisions without needing !important on
   everything, and without affecting a single element outside the widget.
═══════════════════════════════════════════════════════════════════════════ */

.qco-checkout-wrap input.qco-field-input,
.qco-checkout-wrap textarea.qco-field-input,
.qco-checkout-wrap select.qco-field-input {
  width: 100%;
  height: auto;
  min-height: 48px;
  max-width: none;
  padding: 13px 16px;
  margin: 0;
  font-family: var(--font-bn);
  font-size: 15px;
  line-height: 1.5;
  color: var(--qco-text, #0f172a);
  background-color: #fff;
  background-image: none;
  border: 2px solid var(--qco-border, #e2e8f0);
  border-radius: var(--qco-radius-sm, 10px);
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

/* rows="3" plus a sane min-height — themes routinely set a fixed `textarea{height:…}`
   which min-height alone cannot override, which is what made the address box balloon. */
.qco-checkout-wrap textarea.qco-field-textarea {
  height: auto;
  min-height: 92px;
  max-height: 220px;
  resize: vertical;
  overflow: auto;
}

.qco-checkout-wrap .qco-phone-group input.qco-phone-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.qco-checkout-wrap button.qco-submit-btn,
.qco-checkout-wrap button.qco-qty-btn,
.qco-checkout-wrap button.qco-var-btn,
.qco-showcase-wrap button.qco-sc-add-btn,
.qco-showcase-wrap button.qco-qty-btn {
  font-family: var(--font-bn);
  text-transform: none;
  letter-spacing: normal;
  height: auto;
  min-height: 0;
  box-shadow: none;
  text-shadow: none;
}

/* A disabled order button still has to be readable — at .45 opacity on a coloured
   background the label was barely visible, so it looked broken rather than "not ready
   yet". Muted-but-legible communicates the same thing far better. */
.qco-checkout-wrap button.qco-submit-btn:disabled {
  opacity: 1;
  background: #94a3b8;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}

.qco-checkout-wrap img,
.qco-showcase-wrap img,
.qco-ty-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: inherit;
  box-shadow: none;
}
.qco-checkout-wrap img.qco-pc-img,
.qco-showcase-wrap img.qco-sc-img {
  border-radius: 0;
}

/* Themes that set `ul,li{list-style:…}` or float list items would otherwise reshape the
   product and shipping lists, which are built from divs and labels, not lists. */
.qco-checkout-wrap ul, .qco-checkout-wrap ol,
.qco-showcase-wrap ul, .qco-showcase-wrap ol {
  list-style: none;
}

.qco-checkout-wrap label, .qco-showcase-wrap label {
  display: initial;
  font-weight: inherit;
  margin: 0;
}
.qco-checkout-wrap label.qco-shipping-option,
.qco-checkout-wrap label.qco-payment-option {
  display: flex;
}
.qco-checkout-wrap label.qco-field-label {
  display: flex;
}

/* Gateway notice on the landing-page checkout — the customer pays on the provider's page
   after submitting, so this replaces the manual sender/transaction fields entirely. */
.qco-checkout-wrap .qco-gateway-note{
  display:flex;align-items:flex-start;gap:9px;
  margin:12px 0 0;padding:13px 15px;border-radius:11px;
  background:#eff6ff;border:1.5px solid #bfdbfe;color:#1e3a8a;
  font-size:13.5px;line-height:1.65}
.qco-checkout-wrap .qco-gw-note-ico{flex:0 0 auto;font-size:15px;line-height:1.3}

/* "Not ready yet" state for the order button.
   The button is no longer `disabled` — a dead button hides WHICH field is blocking the
   customer, so they assume the page is broken. It stays clickable, and clicking runs the
   form's own validation which scrolls to the first problem and explains it. This class is
   only the visual cue that something is still missing. */
/* `filter:saturate()` was the wrong tool here — a CSS filter applies to the ENTIRE
   element, text included, so the label washed out along with the background and the button
   read as unreadable rather than as "not ready yet". A flat muted colour affects only the
   fill, so the white label keeps full contrast. */
.qco-checkout-wrap .qco-submit-btn.qco-btn-incomplete{
  background:#94a3b8!important;
  box-shadow:none!important;
}
.qco-checkout-wrap .qco-submit-btn.qco-btn-incomplete:hover{
  background:#7c8ba1!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER SUMMARY — larger thumbnails, roomier rows
   At 34px the product image was too small to recognise what had been added, which is the
   one job it has in a summary. Bigger image, two-line name instead of a hard ellipsis,
   and more vertical room so the qty stepper and price stop crowding each other.
═══════════════════════════════════════════════════════════════════════════ */
.qco-checkout-wrap .qco-sum-product-row{
  align-items:flex-start;
  padding:14px 16px;
  gap:12px;
}
.qco-checkout-wrap .qco-sum-pimg{
  width:56px;height:56px;flex:0 0 auto;
  object-fit:cover;border-radius:10px;
  border:1px solid var(--qco-border,#e2e8f0);background:#fff;
}
.qco-checkout-wrap .qco-sum-pimg-ph{
  display:flex;align-items:center;justify-content:center;
  background:#f1f5f9;color:#94a3b8;font-size:18px;
}
/* Two lines beats an ellipsis here — Bengali product names are long, and "Ray Ban-Ferrari
   N…" tells the customer almost nothing about what they're buying. */
.qco-checkout-wrap .qco-sum-pname{
  white-space:normal;text-overflow:clip;
  font-size:13.5px;font-weight:600;color:var(--qco-text,#0f172a);
  line-height:1.45;padding-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qco-checkout-wrap .qco-sum-pval{font-size:14.5px;padding-top:2px}
.qco-checkout-wrap .qco-sum-qty{flex:0 0 auto;margin-top:2px}

@media(max-width:600px){
  .qco-checkout-wrap .qco-sum-pimg{width:48px;height:48px}
  .qco-checkout-wrap .qco-sum-product-row{padding:12px 13px;gap:10px}
  .qco-checkout-wrap .qco-sum-pname{font-size:13px}
}


/* ── Order button: keep it readable in every state ──
   The theme styles bare `button:hover` and `button:focus`, which outranks the single-class
   rules above and was repainting the confirm button mid-hover. Restating background and
   colour on each state — and forcing the label colour to inherit — keeps the text legible
   whatever the theme does. */
.qco-checkout-wrap .qco-submit-btn,
.qco-checkout-wrap .qco-submit-btn:hover,
.qco-checkout-wrap .qco-submit-btn:focus,
.qco-checkout-wrap .qco-submit-btn:active{
  color:#fff!important;
  text-decoration:none!important;
  opacity:1!important;
}
.qco-checkout-wrap .qco-submit-btn .qco-submit-text,
.qco-checkout-wrap .qco-submit-btn i,
.qco-checkout-wrap .qco-submit-btn span{
  color:inherit!important;
  opacity:1!important;
}
.qco-checkout-wrap .qco-submit-btn:not(.qco-btn-incomplete):hover{
  background:var(--qco-primary-dark,#124d2b)!important;
}

/* Phone field nudge — a short horizontal shake when the number is left incomplete.
   Deliberately brief and un-red: the shopper is mid-task, not in error. */
@keyframes qco-phone-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
}
.qco-checkout-wrap .qco-phone-shake{
  animation:qco-phone-shake .45s cubic-bezier(.36,.07,.19,.97) both;
}
.qco-checkout-wrap .qco-phone-short{
  border-color:#f59e0b!important;
  background:#fffbeb!important;
}
@media(prefers-reduced-motion:reduce){
  .qco-checkout-wrap .qco-phone-shake{animation:none!important}
}

/* Block popup — Call and WhatsApp side by side. */
.qco-ip-modal-actions{display:flex;gap:10px;margin:16px 0 14px;flex-wrap:wrap}
.qco-ip-btn{
  flex:1;min-width:132px;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 14px;border-radius:12px;text-decoration:none!important;
  font-family:var(--font-bn);transition:transform .15s,filter .15s;
}
.qco-ip-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.qco-ip-btn i{font-size:19px;flex:0 0 auto}
.qco-ip-btn span{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.qco-ip-btn b{font-size:13.5px;font-weight:700}
.qco-ip-btn small{font-size:11.5px;opacity:.85}
.qco-ip-btn-call{background:var(--qco-primary,#1a6b3c);color:#fff!important}
.qco-ip-btn-wa{background:#25D366;color:#fff!important}
.qco-ip-btn-call:hover,.qco-ip-btn-wa:hover{color:#fff!important}
.qco-ip-modal-icon i{font-size:40px;color:var(--qco-primary,#1a6b3c)}
@media(max-width:420px){.qco-ip-btn{min-width:100%}}

/* ── Product card "Add to Cart" hover ──
   The theme's own `button:hover` was repainting this button, so on hover the fill turned
   pale and the white label vanished. Same class of bug as the order button: the paint has
   to be restated on each interactive state to outrank the theme's bare-element rule. */
.qco-checkout-wrap .qco-sc-add-btn,
.qco-showcase-wrap .qco-sc-add-btn{
  background:var(--qco-primary,#1a6b3c)!important;
  color:#fff!important;
  border:0!important;
}
.qco-checkout-wrap .qco-sc-add-btn:hover,
.qco-showcase-wrap .qco-sc-add-btn:hover,
.qco-checkout-wrap .qco-sc-add-btn:focus,
.qco-showcase-wrap .qco-sc-add-btn:focus{
  background:var(--qco-primary-dark,#124d2b)!important;
  color:#fff!important;
  filter:brightness(1.06);
}
.qco-checkout-wrap .qco-sc-add-btn span,
.qco-checkout-wrap .qco-sc-add-btn i,
.qco-showcase-wrap .qco-sc-add-btn span,
.qco-showcase-wrap .qco-sc-add-btn i{color:inherit!important}

/* Already-added state stays clearly distinct from the hover state. */
.qco-checkout-wrap .qco-sc-add-btn.is-added,
.qco-showcase-wrap .qco-sc-add-btn.is-added{
  background:#166534!important;color:#fff!important;
}

/* ── Thank You: invoice download card ── */
.qco-ty-invoice{
  display:flex;align-items:center;gap:16px;
  margin:18px 0;padding:18px 20px;
  background:#fff;border:1px solid #e6ebf1;border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.05);
  text-align:left;
}
.qco-ty-invoice-ico{
  width:52px;height:52px;flex:0 0 auto;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--qco-primary,#1a6b3c) 10%,#fff);
  color:var(--qco-primary,#1a6b3c);font-size:22px;
}
.qco-ty-invoice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qco-ty-invoice-body strong{font-size:15px;font-weight:700;color:#0f172a;line-height:1.4}
.qco-ty-invoice-body span{font-size:12.5px;color:#64748b;line-height:1.5}
.qco-ty-invoice-btn{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:11px 20px;border-radius:11px;
  background:var(--qco-primary,#1a6b3c);color:#fff!important;
  font-size:13.5px;font-weight:700;text-decoration:none!important;
  transition:transform .15s,filter .15s;
}
.qco-ty-invoice-btn:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff!important}
@media(max-width:600px){
  .qco-ty-invoice{flex-direction:column;text-align:center;gap:12px;padding:20px 16px}
  .qco-ty-invoice-body{align-items:center}
  .qco-ty-invoice-btn{width:100%;justify-content:center}
}

/* ── Advance (partial) payment box ──
   Sits directly under the total, visually distinct from it: the shopper's eye needs to
   land on "what do I pay right now", which is a different number from the order total and
   is the single most confusing thing about a part-paid COD order. */
.qco-checkout-wrap .qco-partial-box{
  margin-top:12px;padding:14px 16px;
  background:linear-gradient(160deg,#fffbeb,#fff 70%);
  border:1.5px solid #fde68a;border-radius:13px;
}
.qco-partial-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;padding-bottom:9px;
  border-bottom:1px dashed #fde68a;
  font-size:13.5px;font-weight:800;color:#92400e;
}
.qco-partial-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0;font-size:13.5px;color:#78350f;
}
.qco-partial-row b{font-size:15px;font-weight:800}
.qco-partial-now b{color:#b45309;font-size:17px}
.qco-partial-note{
  margin:9px 0 0;padding-top:8px;border-top:1px dashed #fde68a;
  font-size:11.5px;line-height:1.6;color:#a16207;
}
@media(max-width:600px){
  .qco-checkout-wrap .qco-partial-box{padding:13px 14px}
  .qco-partial-now b{font-size:16px}
}