/* ============================================================================
   SHAZDEH — PrestaCart (psf_prestacart) checkout re-skin → matches the mockup
   /preview/cart-v2.html (3-step: cart → address+shipping → payment).
   CSS-only override above the module (survives reinstall). Scope covers BOTH
   PrestaCart layouts: cart view (#cart) + module checkout layout (.psf-cart-body),
   which share the psf-* content classes. Tokens from szd-redesign.css :root.
   Cart-step components are mapped precisely; address/carrier/payment are
   best-effort (login-gated) and refined from screenshots.
   ============================================================================ */

/* ---------- page canvas ---------- */
:is(#cart, #checkout, .psf-cart-body){background:var(--szd-cream) !important}
:is(#cart, #checkout, .psf-cart-body) :is(#wrapper, #content-wrapper, .prestacart-checkout-global-font){background:transparent !important}
:is(#cart, #checkout, .psf-cart-body) :is(.psy-cart-content, .psf-cart-grid, .prestacart-checkout-global-font){font-family:inherit !important;color:var(--szd-ink)}
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-container, .psf-cart-grid){padding-left:10px !important;padding-right:10px !important;max-width:560px;margin-inline:auto}
.psf-cart-body{padding-bottom:90px !important}
#cart{padding-bottom:20px !important}
#cart .szd-bnav{display:none !important}

/* ============================================================================
   HEADER  (#psfcart-header)  →  mockup .hdr (sticky glass + clean back button)
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) #psfcart-header{
  display:flex !important;align-items:center;justify-content:space-between;gap:10px;
  position:sticky !important;top:0;z-index:50;
  background:rgba(255,245,240,.94) !important;backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--szd-line) !important;box-shadow:none !important;padding:10px 12px !important}
/* swap the OLD {$shop.logo} for the current fox logo, centered */
:is(#cart, #checkout, .psf-cart-body) #psfcart-header .psfcart-logo{display:flex;align-items:center;margin:0 auto}
:is(#cart, #checkout, .psf-cart-body) #psfcart-header .psfcart-logo img,
:is(#cart, #checkout, .psf-cart-body) #psfcart-header img{
  content:url('/themes/panda-redesign/assets/img/szd-fox-logo.png?v=3') !important;height:38px !important;width:auto !important;object-fit:contain}
:is(#cart, #checkout, .psf-cart-body) #psfcart-header :is(a, .back, .back-button, [class*="back"]){
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:40px;height:40px;padding:0 !important;border-radius:50% !important;
  color:#d23b6e !important;background:linear-gradient(135deg,#ffffff,#fde7f1) !important;
  border:1px solid #f6d3e3 !important;box-shadow:0 3px 9px rgba(210,59,110,.16) !important;
  text-decoration:none;transition:transform .12s,box-shadow .15s}
:is(#cart, #checkout, .psf-cart-body) #psfcart-header :is(a, .back, .back-button, [class*="back"]):active{transform:scale(.92)}
:is(#cart, #checkout, .psf-cart-body) #psfcart-header :is(a, .back, .back-button, [class*="back"]) svg{stroke:#d23b6e !important;width:18px !important;height:18px !important}
:is(#cart, #checkout, .psf-cart-body) #psfcart-header :is(a, .back, .back-button, [class*="back"]) span{display:none !important}

/* ============================================================================
   FREE-SHIPPING BAR  (displayInfoFreeShipping hook)  →  mockup .free-ship-bar
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is([class*="free-shipping"], [class*="free_shipping"], [class*="freeship"], .remaining-free-shipping, .psf-free-shipping){
  margin:12px !important;padding:10px 14px !important;
  background:linear-gradient(95deg,#FFD96B 0%,#FFB347 100%) !important;
  border-radius:var(--szd-r-md) !important;color:#5E3A04 !important;font-weight:700 !important;
  font-size:11.5px !important;border:0 !important;box-shadow:none !important}
:is(#cart, #checkout, .psf-cart-body) :is([class*="free-shipping"], [class*="freeship"]) b{color:#5E3A04 !important;font-weight:900 !important}

/* ============================================================================
   3-STEP INDICATOR (.psfordersteps-*)  →  mockup .steps (white card, circles,
   connecting line, pink=current, green=done)
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.psfordersteps, [class*="psfordersteps"]:not([class*="step"]):not([class*="icon"]):not([class*="title"]):not([class*="bar"]):not([class*="counter"]):not([class*="number"])){
  margin:12px !important;padding:14px 8px !important;background:#fff !important;
  border-radius:var(--szd-r-md) !important;box-shadow:var(--szd-sh-1) !important;
  display:flex !important;justify-content:space-around !important;align-items:center;position:relative}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-step{display:flex !important;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:2;flex:1}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-icon{
  width:34px !important;height:34px !important;border-radius:50% !important;
  display:flex !important;align-items:center;justify-content:center;
  background:#fff !important;color:var(--szd-ink-3) !important;
  border:2px solid var(--szd-line) !important;box-shadow:none !important;
  font-size:13px !important;font-weight:900 !important;transition:.25s}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-step-current .psfordersteps-icon{
  background:var(--szd-pink) !important;color:#fff !important;border-color:var(--szd-pink) !important;
  box-shadow:0 4px 10px rgba(244,120,169,.35) !important}
:is(#cart, #checkout, .psf-cart-body) :is(.psfordersteps-step-done, .psfordersteps-step.done) .psfordersteps-icon{
  background:var(--szd-green) !important;color:#fff !important;border-color:var(--szd-green) !important}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-title{font-size:10.5px !important;font-weight:800 !important;color:var(--szd-ink-3) !important;margin-top:0 !important}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-step-current .psfordersteps-title{color:var(--szd-pink-dk) !important}
/* connecting line + the old yellow progress bar → subtle line / pink */
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-bar{background:var(--szd-line) !important;height:2px !important}
:is(#cart, #checkout, .psf-cart-body) :is(.psfordersteps-bar > *, [class*="psfordersteps"][class*="progress"], [class*="psfordersteps"][class*="fill"]){background:var(--szd-pink) !important}
:is(#cart, #checkout, .psf-cart-body) .psfordersteps-counter{background:var(--szd-pink-dk) !important;color:#fff !important;border:2px solid #fff;border-radius:var(--szd-r-pill) !important;font-weight:800;box-shadow:var(--szd-sh-1)}

/* ============================================================================
   HELP / DESC BANNER (displayPrestacartHelp)  →  mockup .desc-banner
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is([class*="prestacart-help"], [class*="prestacarthelp"], .psf-help, [class*="psf"][class*="help"]){
  margin:14px 12px 0 !important;padding:12px 14px !important;background:#fff !important;
  border-radius:var(--szd-r-md) !important;border-right:3px solid var(--szd-pink) !important;
  font-size:11px !important;color:var(--szd-ink-2) !important;line-height:1.7 !important;box-shadow:var(--szd-sh-1) !important}

/* ============================================================================
   SECTION HEADINGS  →  mockup .sec-h
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-overview > h3, .cart-overview-title, .psf-section-title){
  padding:4px 4px 6px !important;font-size:12.5px !important;font-weight:900 !important;color:var(--szd-ink) !important}

/* ============================================================================
   ITEM CARD (.psf-cart-item / .product-line-grid)  →  mockup .item
   image (right, 78×96, pink-soft, rounded) · body (brand/name/opts) · price + qty
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-overview, .cart-overview, .psf-cart-items){background:transparent !important;border:0 !important;padding:0 !important}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-item{
  background:#fff !important;border:0 !important;border-radius:var(--szd-r-md) !important;
  box-shadow:var(--szd-sh-1) !important;padding:12px !important;margin-bottom:8px !important;position:relative;overflow:hidden}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-item .product-line-grid{display:flex !important;gap:10px !important;align-items:stretch !important;background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
/* product image */
:is(#cart, #checkout, .psf-cart-body) :is(.product-line-grid-left, .product-line-image){flex:0 0 78px !important;width:78px !important;max-width:78px !important}
:is(#cart, #checkout, .psf-cart-body) :is(.product-line-grid-left img, .product-line-info img, .psf-cart-item img){
  width:78px !important;height:96px !important;border-radius:10px !important;background:#FBE7EC !important;
  object-fit:contain !important;padding:4px !important}
/* body */
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-body{flex:1 !important;min-width:0;display:flex;flex-direction:column}
:is(#cart, #checkout, .psf-cart-body) :is(.product-line-grid-body a, .product-line-info a, .product-line-grid-body .label){color:var(--szd-ink) !important;font-weight:700 !important;font-size:12px !important;line-height:1.45 !important;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(#cart, #checkout, .psf-cart-body) .product-line-info .manufacturer,
:is(#cart, #checkout, .psf-cart-body) :is(.product-line-grid-body, .product-line-info) [class*="brand"]{font-size:10px !important;color:var(--szd-ink-3) !important;font-weight:600 !important}
/* price */
:is(#cart, #checkout, .psf-cart-body) :is(.product-info-total, .product-price, .cart-line-product-total){color:var(--szd-pink-dk) !important;font-weight:900 !important;font-size:13px !important}
:is(#cart, #checkout, .psf-cart-body) :is(.regular-price, .product-line-info del){font-size:10px !important;color:var(--szd-ink-3) !important;text-decoration:line-through}
:is(#cart, #checkout, .psf-cart-body) :is(.discount-total-amount, .product-line-info .discount){
  color:var(--szd-green-dk) !important;font-weight:800 !important;background:#EAF8EA;
  border-radius:var(--szd-r-xs);padding:1px 8px;display:inline-block;font-size:11px}
/* discount % badge top-right (PrestaCart .product-flag / discount) */
:is(#cart, #checkout, .psf-cart-body) .psf-cart-item :is(.discount-percentage, .product-flag.discount, [class*="reduction"]){
  position:absolute;top:8px;right:8px;background:var(--szd-red) !important;color:#fff !important;
  font-size:10px;font-weight:900;padding:2px 7px;border-radius:6px}
/* quantity stepper → pink-soft pill */
:is(#cart, #checkout, .psf-cart-body) :is(.js-cart-line-product-quantity, .cart-line-product-actions .input-group, .product-quantity .input-group){
  display:inline-flex !important;align-items:center !important;background:var(--szd-pink-soft) !important;
  border:0 !important;border-radius:10px !important;padding:2px !important;gap:1px;overflow:hidden;width:auto !important}
:is(#cart, #checkout, .psf-cart-body) :is(.js-increase-product-quantity, .js-decrease-product-quantity, .cart-line-product-actions .btn-touchspin, .bootstrap-touchspin .btn){
  width:28px !important;height:28px !important;background:transparent !important;color:var(--szd-pink-dk) !important;
  border:0 !important;border-radius:8px !important;font-size:14px !important;font-weight:900 !important;
  display:flex !important;align-items:center;justify-content:center;box-shadow:none !important}
:is(#cart, #checkout, .psf-cart-body) :is(.js-increase-product-quantity:active, .js-decrease-product-quantity:active){background:var(--szd-pink) !important;color:#fff !important}
:is(#cart, #checkout, .psf-cart-body) .js-cart-line-product-quantity input{width:26px !important;text-align:center;font-size:12px !important;font-weight:900 !important;color:var(--szd-ink) !important;background:transparent !important;border:0 !important;box-shadow:none !important}
/* remove → small icon top-left */
:is(#cart, #checkout, .psf-cart-body) .remove-from-cart{
  position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:8px !important;
  background:transparent !important;color:var(--szd-ink-3) !important;border:0 !important;
  display:flex;align-items:center;justify-content:center;padding:0 !important;font-size:0 !important}
:is(#cart, #checkout, .psf-cart-body) .remove-from-cart:hover{background:#FEE !important;color:var(--szd-red) !important}
:is(#cart, #checkout, .psf-cart-body) .remove-from-cart::before{content:"\00d7";font-size:18px;font-weight:700;line-height:1}

/* ============================================================================
   VOUCHER (.psf-cart-voucher)  →  mockup .voucher (white card, inline form)
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.block-promo, .psf-cart-voucher, .cart-voucher){
  background:#fff !important;border:0 !important;border-radius:var(--szd-r-md) !important;
  padding:12px !important;margin:12px !important;box-shadow:var(--szd-sh-1) !important}
:is(#cart, #checkout, .psf-cart-body) .promo-code-button{
  background:transparent !important;color:var(--szd-pink-dk) !important;font-weight:800 !important;
  cursor:pointer;display:inline-flex !important;align-items:center;gap:8px;width:auto !important;
  padding:2px 0 !important;border:0 !important;box-shadow:none !important;font-size:12.5px}
:is(#cart, #checkout, .psf-cart-body) .promo-code-button::after{content:"+";font-size:18px;color:var(--szd-pink);font-weight:900}
:is(#cart, #checkout, .psf-cart-body) .promo-code-button[aria-expanded="true"]::after{content:"\2013"}
:is(#cart, #checkout, .psf-cart-body) .promo-code form{display:flex !important;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
:is(#cart, #checkout, .psf-cart-body) :is(.promo-input, .psf-cart-voucher input[type="text"]){
  flex:1 1 150px !important;border:1px solid var(--szd-line) !important;border-radius:10px !important;
  padding:9px 12px !important;background:var(--szd-cream) !important;color:var(--szd-ink) !important;font-weight:600;margin:0 !important}
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-voucher .promo-code button, .promo-code button.btn){
  background:var(--szd-ink) !important;color:#fff !important;border:0 !important;border-radius:10px !important;
  padding:9px 16px !important;font-weight:800 !important;font-size:11px !important;box-shadow:none !important;white-space:nowrap;width:auto !important}
/* applied voucher chip → green */
:is(#cart, #checkout, .psf-cart-body) :is(.cart-voucher .voucher, [class*="voucher"][class*="applied"] a){
  background:var(--szd-green) !important;color:#fff !important;border-radius:8px !important;padding:4px 8px !important;font-size:10px !important;font-weight:800 !important}
/* applied voucher / wallet row → distinct soft-green card (SZD redesign) */
:is(#cart, #checkout, .psf-cart-body) .promo-name{
  list-style:none !important;margin:10px 0 4px !important;padding:0 !important;
  background:linear-gradient(135deg,#effaf2,#e1f6e9) !important;color:#1c7a43 !important;
  border:1.5px solid #c2e9cf !important;border-radius:14px !important;
  box-shadow:0 5px 14px rgba(61,168,94,.12) !important;overflow:hidden !important;font-size:12px !important;font-weight:800 !important}
:is(#cart, #checkout, .psf-cart-body) .promo-name .cart-summary-line{
  display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:10px !important;
  padding:11px 13px !important;margin:0 !important;border:0 !important;background:transparent !important;color:#1c7a43 !important}
:is(#cart, #checkout, .psf-cart-body) .promo-name .cart-summary-line::before{
  content:'';order:0;flex:0 0 30px;width:30px;height:30px;border-radius:9px;
  background:#fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233da85e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200L2%2012V2h10l8.6%208.6a2%202%200%200%201%200%202.8z'/%3E%3Ccircle%20cx='7'%20cy='7'%20r='1.1'%20fill='%233da85e'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 3px 8px rgba(61,168,94,.18)}
:is(#cart, #checkout, .psf-cart-body) .promo-name .label{
  order:1;flex:1 !important;color:#1c7a43 !important;font-weight:800 !important;font-size:12.5px !important;text-align:right !important;padding:0 !important}
:is(#cart, #checkout, .psf-cart-body) .promo-name .float-xs-right{
  order:2;color:#15803d !important;font-weight:900 !important;font-size:13px !important;white-space:nowrap;float:none !important}
:is(#cart, #checkout, .psf-cart-body) .promo-name a[data-link-action="remove-voucher"]{
  order:3;flex:0 0 26px;width:26px;height:26px;border-radius:50% !important;background:#fff !important;
  border:1px solid #cfe9d8 !important;display:inline-flex !important;align-items:center;justify-content:center;
  text-decoration:none !important;padding:0 !important;margin:0 !important;box-shadow:0 2px 5px rgba(0,0,0,.05)}
:is(#cart, #checkout, .psf-cart-body) .promo-name a[data-link-action="remove-voucher"] .material-icons{font-size:0 !important;line-height:0;width:0;height:0;overflow:hidden}
:is(#cart, #checkout, .psf-cart-body) .promo-name a[data-link-action="remove-voucher"]::after{content:'×';color:#e0518a;font-size:17px;font-weight:700;line-height:1}

/* ============================================================================
   ADDRESS / CARRIER / PAYMENT radio-cards (steps 2-3, login-gated → best-effort)
   common pattern: white card + radio + body; pink border + pink-soft bg when selected
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is([class*="address-item"], [class*="carrier"][class*="card"], [class*="delivery-option"], [class*="payment-option"], [class*="pay-card"], .js-address-item, .js-payment-option){
  background:#fff !important;border:2px solid transparent !important;border-radius:var(--szd-r-md) !important;
  box-shadow:var(--szd-sh-1) !important;padding:12px !important;margin-bottom:8px !important;transition:all .2s}
:is(#cart, #checkout, .psf-cart-body) :is([class*="address-item"].selected, [class*="carrier"].selected, [class*="delivery-option"].selected, .selected[class*="payment"], [class*="address"][class*="selected"], .--on){
  border-color:var(--szd-pink) !important;background:var(--szd-pink-soft) !important}
/* the yellow vertical accent / check on the selected address card → pink */
:is(#cart, #checkout, .psf-cart-body) [style*="background"][style*="rgb(240"],
:is(#cart, #checkout, .psf-cart-body) [style*="background:#F"][class*="address"]{background:var(--szd-pink) !important}
:is(#cart, #checkout, .psf-cart-body) :is(.btn-add-address, [class*="add-address"], [class*="add_address"]){
  display:block !important;text-align:center !important;background:#fff !important;border:2px dashed var(--szd-pink) !important;
  border-radius:var(--szd-r-md) !important;padding:12px !important;font-weight:800 !important;color:var(--szd-pink-dk) !important}
:is(#cart, #checkout, .psf-cart-body) :is(.carrier-name, .delivery-option-name, .payment-option-name, [class*="carrier"][class*="name"]){font-weight:800 !important;color:var(--szd-ink) !important;font-size:12px !important}

/* ============================================================================
   SUMMARY / TOTALS  →  mockup .summary
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-summary, .cart-detailed-totals, .cart-summary-totals){
  background:#fff !important;border:0 !important;border-radius:var(--szd-r-md) !important;
  box-shadow:var(--szd-sh-1) !important;padding:14px !important;margin:12px !important}
:is(#cart, #checkout, .psf-cart-body) .cart-summary-line{display:flex !important;justify-content:space-between !important;align-items:center;
  padding:5px 0 !important;border:0 !important;font-size:12px !important;color:var(--szd-ink-2) !important}
:is(#cart, #checkout, .psf-cart-body) :is(.cart-summary-line .label, .cart-summary-line .cart-summary-k){color:var(--szd-ink-2) !important;font-weight:600}
:is(#cart, #checkout, .psf-cart-body) :is(.cart-summary-line .value, .cart-summary-line .cart-summary-v){color:var(--szd-ink) !important;font-weight:700}
/* savings rows green */
:is(#cart, #checkout, .psf-cart-body) :is(.cart-total-discount, [class*="saving"], [class*="discount"][class*="summary"]){color:var(--szd-green-dk) !important}
/* grand total row */
:is(#cart, #checkout, .psf-cart-body) :is(.cart-total, .cart-summary-totals .cart-summary-line:last-child){
  padding-top:10px !important;border-top:1px dashed var(--szd-line) !important;margin-top:6px !important;font-size:14px !important;font-weight:900 !important}
:is(#cart, #checkout, .psf-cart-body) :is(.cart-total .value, .cart-total b, .cart-summary-totals .cart-summary-line:last-child .value){color:var(--szd-pink-dk) !important;font-size:16px !important;font-weight:900 !important}
:is(#cart, #checkout, .psf-cart-body) .cart-total .label{color:var(--szd-ink) !important;font-weight:900 !important}
:is(#cart, #checkout, .psf-cart-body) .psf-separator{border-color:var(--szd-line) !important}

/* ============================================================================
   CTA  →  mockup .cta-bar__btn  (pink gradient pill) + fixed bottom bar feel
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.btn-primary, .btn-psf-cart, .psf-cart-cta, .cart-detailed-actions .btn-primary){
  background:linear-gradient(135deg,var(--szd-pink) 0%,#FF8FBD 100%) !important;color:#fff !important;
  border:0 !important;border-radius:14px !important;padding:13px 16px !important;font-weight:900 !important;
  font-size:14px !important;box-shadow:0 6px 14px rgba(244,120,169,.4) !important}
:is(#cart, #checkout, .psf-cart-body) :is(.btn-secondary, .cart-detailed-actions .btn-secondary){
  background:#fff !important;color:var(--szd-pink-dk) !important;border:1.5px solid var(--szd-pink) !important;
  border-radius:14px !important;padding:11px 16px !important;font-weight:800 !important}
/* fixed/sticky bottom action bar */
:is(#cart, #checkout, .psf-cart-body) :is(.psf-cart-sticky-footer, .cart-detailed-actions, [id*="psfcart"][class*="footer"], .psf-cart-footer){
  background:#fff !important;box-shadow:0 -4px 18px rgba(0,0,0,.10) !important;border-top:0 !important;padding:10px 12px 14px !important}

/* ============================================================================
   NOTICE / WARNINGS
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) :is(.checkout-not-reserved, .psf-cart-notice, .alert-info){
  background:var(--szd-yellow-soft) !important;border:1px solid var(--szd-yellow) !important;color:var(--szd-ink-2) !important;
  border-radius:var(--szd-r-md) !important;padding:12px 14px !important;font-size:12.5px !important;margin:12px !important}
:is(#cart, #checkout, .psf-cart-body) :is(.checkout-not-reserved .nostock, .text-danger, .alert-danger){color:var(--szd-red) !important;font-weight:800}

/* ============================================================================
   ITEM CARD — tame PrestaCart's Bootstrap grid (.col-md/xs), TouchSpin qty,
   duplicated price. Reflow to the mockup .item: image (right) + body(name,
   discount, price) on row 1; qty pill on row 2.
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) .psf-cart-item .product-line-grid{display:flex !important;flex-wrap:wrap !important;align-items:flex-start !important;gap:6px 10px !important}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-item :is([class*="col-md-"], [class*="col-xs-"]){float:none !important;padding:0 !important;width:auto !important;max-width:none !important;flex-basis:auto}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-left{flex:0 0 76px !important;width:76px !important;order:0}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-left .product-image{display:block}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-left img{width:76px !important;height:94px !important}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-body{flex:1 1 calc(100% - 90px) !important;min-width:0 !important;order:1;display:flex;flex-direction:column;gap:3px}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-right{flex:1 1 100% !important;order:3 !important;margin-top:2px}
:is(#cart, #checkout, .psf-cart-body) .product-line-grid-right .product-info-price{display:none !important}  /* duplicate price */
:is(#cart, #checkout, .psf-cart-body) .product-line-info.product-name{margin:0 !important}
:is(#cart, #checkout, .psf-cart-body) .product-info-price{margin:0 !important}
:is(#cart, #checkout, .psf-cart-body) .product-discount{margin-bottom:2px}
:is(#cart, #checkout, .psf-cart-body) .discount-total-amount{white-space:nowrap !important;font-size:10.5px !important;padding:2px 8px !important}
:is(#cart, #checkout, .psf-cart-body) strong.price{font-size:14px !important;color:var(--szd-pink-dk) !important;font-weight:900 !important;display:inline-block}
/* qty: "تعداد:" prefix + touchspin → pink-soft pill */
:is(#cart, #checkout, .psf-cart-body) .qty{display:flex !important;align-items:center !important;gap:8px !important;justify-content:flex-end}
:is(#cart, #checkout, .psf-cart-body) .psf-quantity-prefix{font-size:11px !important;color:var(--szd-ink-3) !important;font-weight:700 !important}
:is(#cart, #checkout, .psf-cart-body) .bootstrap-touchspin{display:inline-flex !important;align-items:center !important;background:var(--szd-pink-soft) !important;border-radius:10px !important;padding:2px !important;border:0 !important;box-shadow:none !important;width:auto !important}
:is(#cart, #checkout, .psf-cart-body) .bootstrap-touchspin input{width:34px !important;text-align:center !important;background:transparent !important;border:0 !important;font-weight:900 !important;color:var(--szd-ink) !important;box-shadow:none !important;height:28px !important;padding:0 !important;font-size:13px !important}
:is(#cart, #checkout, .psf-cart-body) .bootstrap-touchspin :is(.btn, button, [class*="touchspin-up"], [class*="touchspin-down"]){width:28px !important;height:28px !important;min-width:0 !important;background:transparent !important;color:var(--szd-pink-dk) !important;border:0 !important;border-radius:8px !important;font-weight:900 !important;box-shadow:none !important;padding:0 !important;display:flex;align-items:center;justify-content:center}
:is(#cart, #checkout, .psf-cart-body) .bootstrap-touchspin :is(.btn, button):active{background:var(--szd-pink) !important;color:#fff !important}
:is(#cart, #checkout, .psf-cart-body) .bootstrap-touchspin .input-group-btn-vertical{display:inline-flex !important;flex-direction:row !important}

/* ============================================================================
   EMPTY CART (.psf-cart-empty)  → friendly شازده card (was a plain gray block)
   ============================================================================ */
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty{
  background:#fff !important;border:0 !important;border-radius:var(--szd-r-lg) !important;box-shadow:var(--szd-sh-1) !important;
  padding:36px 22px !important;text-align:center !important;margin:18px 12px !important}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty-icon{position:relative;display:inline-block;margin-bottom:6px}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty-icon-cart{color:var(--szd-pink) !important;font-size:58px !important;opacity:.9}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty-icon-sad{color:var(--szd-pink-dk) !important}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty-text{color:var(--szd-ink) !important;font-weight:800 !important;font-size:15px !important;margin:12px 0 18px !important}
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty a:not(.remove-from-cart),
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty .btn,
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty + * .btn,
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty ~ .continue-shopping a{
  background:linear-gradient(135deg,var(--szd-pink) 0%,#FF8FBD 100%) !important;color:#fff !important;border:0 !important;
  border-radius:var(--szd-r-pill) !important;padding:12px 24px !important;font-weight:800 !important;font-size:13.5px !important;
  display:inline-block;text-decoration:none !important;box-shadow:var(--szd-sh-pink) !important;opacity:1 !important}
/* on empty cart, hide the disabled grey Checkout button + stray empty cards */
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty ~ * .btn-primary.disabled,
:is(#cart, #checkout, .psf-cart-body) .psf-cart-empty ~ .checkout button.disabled{display:none !important}

/* ============================================================================
   WALLET BLOCK (wkcustomerwallet paywithwallet.tpl, $paywithwallet==2)
   Renders on the PAYMENT step via hookDisplayPaymentTop when wallet < cart.
   Real DOM: .wk_wallet_box1 > .float-xs-left(.custom-checkbox#wk_use_wallet)
             + .float-xs-left(label "استفاده از کیف پول")
             + .float-xs-right(a "شارژ کیف پول" / Add money to wallet).
   JS appends .wk_wallet_inner_box (Total − Wallet = Final) when ticked. Teal = credit.
   NOTE: the checkbox tick uses Material-icons which DON'T load in Iran — we draw
   our own CSS checkmark and hide the <i>. ===================================== */
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1{
  display:flex !important;align-items:center !important;flex-wrap:wrap;gap:8px 12px;
  width:auto !important;float:none !important;
  background:var(--szd-teal-soft) !important;border:1px solid var(--szd-teal) !important;
  border-radius:var(--szd-r-md) !important;padding:12px 14px !important;margin:12px 0 !important}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 > div{
  float:none !important;margin:0 !important;width:auto !important;display:flex;align-items:center}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .float-xs-right{margin-inline-start:auto !important}
/* "استفاده از کیف پول" label */
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 label[for="wk_use_wallet"]{
  color:var(--szd-ink) !important;font-weight:800 !important;font-size:12.5px !important;margin:0 !important;cursor:pointer}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 label.js-terms{padding:0 8px}
/* custom checkbox — Iran-safe: hide material-icons glyph, draw our own check */
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox{position:relative;display:inline-flex;width:20px;height:20px}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox input#wk_use_wallet{
  position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer;z-index:2}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox input + span{
  display:inline-block;width:20px;height:20px;border:2px solid var(--szd-teal-dk) !important;border-radius:6px;
  background:#fff;box-sizing:border-box;position:relative}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox i.material-icons{display:none !important}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox input:checked + span{
  background:var(--szd-teal-dk) !important;border-color:var(--szd-teal-dk) !important}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .custom-checkbox input:checked + span::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
/* "شارژ کیف پول" / Add money to wallet → teal pill */
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .float-xs-right label{margin:0 !important}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .float-xs-right a{
  background:linear-gradient(135deg,var(--szd-teal) 0%,var(--szd-teal-dk) 100%) !important;color:#fff !important;
  border-radius:var(--szd-r-pill) !important;padding:6px 14px !important;font-weight:800 !important;font-size:11px !important;
  display:inline-block;text-decoration:none !important;white-space:nowrap}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_box1 .float-xs-right a span{color:#fff !important}
/* calc breakdown JS-appends when ticked: Total − Wallet = Final */
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_inner_box{
  display:flex !important;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;width:100% !important;
  margin:10px 0 0 !important;padding:10px 8px 2px !important;border-top:1px dashed var(--szd-teal) !important;
  font-weight:800;color:var(--szd-ink);text-align:center}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_inner_box > div{width:auto !important;float:none !important;padding:0 !important;margin:0 !important}
:is(#cart, #checkout, .psf-cart-body) .wk_wallet_inner_box h6{
  font-size:10px !important;color:var(--szd-ink-soft,#9a8d8f) !important;margin:0 0 2px !important;font-weight:700}