/* ============================================================================
 * Pershume — Cart & Checkout (mobile-first, RTL, brand-violet).
 * Loaded on is_cart() || is_checkout(), AFTER style.css + woocommerce.css, so it
 * reuses the :root tokens (--accent / --ink / --line / --paper / --gut …) and
 * only adds cart/checkout layout. All selectors are prefixed .cart-* / .ck-* or
 * scoped under .cart-page / .ck-page. The theme drops WooCommerce's own
 * stylesheets, so the responsive table->cards behaviour is defined here.
 * Money pages: nothing structural is changed — layout is pure CSS over the
 * untouched WooCommerce markup/hooks.
 * ========================================================================== */

/* ====================================================================== */
/* SHARED PAGE SHELL                                                       */
/* ====================================================================== */
.cart-page,
.ck-page{ min-width:0; }

.cart-page-head,
.ck-page-head{ margin-bottom:clamp(20px,3vw,30px); }
.cart-page-title,
.ck-page-title{
  font-size:clamp(22px,4vw,32px);font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink);
  display:inline-flex;align-items:center;gap:12px;
}
.cart-page-title .cph-ic{
  width:clamp(34px,4vw,42px);height:clamp(34px,4vw,42px);border-radius:50%;flex:none;
  background:rgba(107,107,179,.1);color:var(--accent-deep);display:grid;place-items:center;
}
.cart-page-title .cph-ic svg{ width:19px;height:19px; }
.cart-page-sub{ margin-top:8px;font-size:13.5px;color:var(--ink-soft);font-weight:300; }
.cart-page-sub b{ color:var(--accent-deep);font-weight:700; }

.ck-page-head{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; }
.ck-page-secure{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:12px;font-weight:600;color:var(--accent-deep);
  background:rgba(107,107,179,.08);border:1px solid rgba(107,107,179,.2);
  border-radius:30px;padding:8px 14px;line-height:1;
}
.ck-page-secure svg{ width:15px;height:15px;flex:none; }

/* ---------- 3-step progress indicator — shared by cart + checkout ----------
   Rendered from the ONE pershume_checkout_steps() helper on both pages, so
   the label set/count can never drift between them again. */
.ck-steps{
  display:flex;align-items:flex-start;justify-content:center;gap:0;
  max-width:560px;margin:clamp(20px,3.2vh,30px) auto clamp(26px,4vw,38px);list-style:none;padding:0;
}
.ck-step{ flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:0; }
.ck-step::before{
  content:"";position:absolute;top:17px;height:2px;background:var(--line);z-index:0;
  right:-50%;left:50%;
}
.ck-step:first-child::before{ display:none; }
.ck-step.done::before{ background:var(--accent); }
.ck-step-num{
  position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:"Segoe UI",sans-serif;font-weight:700;font-size:13px;
  background:var(--paper);border:2px solid var(--line);color:var(--ink-soft);transition:.3s;
}
.ck-step.active .ck-step-num{ border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(107,107,179,.28); }
.ck-step.done .ck-step-num{ border-color:var(--accent);background:rgba(107,107,179,.1);color:var(--accent-deep); }
.ck-step-lbl{ margin-top:10px;font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.4;transition:color .3s; }
.ck-step.active .ck-step-lbl{ color:var(--ink); }
.ck-step.done .ck-step-lbl{ color:var(--accent-deep); }
.ck-step-en{ margin-top:2px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-family:"Segoe UI",sans-serif;opacity:.75; }
@media(max-width:480px){
  .ck-step-num{ width:29px;height:29px;font-size:12px; }
  .ck-step::before{ top:14px; }
  .ck-step-lbl{ font-size:11.5px; }
  .ck-step-en{ display:none; }
}

/* ====================================================================== */
/* CART                                                                    */
/* ====================================================================== */
.cart-page{ display:block; }
.cart-layout{ display:block; }

/* ---- items panel — card list (mockups/pershume-cart.html's .citem) ---- */
.cart-main .cm-head{ display:flex;align-items:baseline;justify-content:flex-start;gap:16px;margin-bottom:16px; }
.cart-main .cm-head h2{ font-size:16px;font-weight:800;color:var(--ink); }
.cart-main .cm-head .cm-count{ font-size:12px;color:var(--ink-soft);font-weight:300;margin-inline-start:9px; }
.cm-clear{ font-size:12px;color:var(--ink-soft);transition:color .25s;cursor:pointer;white-space:nowrap; }
.cm-clear:hover{ color:#b04848; }

.cart-list{ border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper); }
/* flex, not grid — .cart-main is wide (up to ~900px on desktop), and a grid's
   1fr info column stretched to fill ALL of it, stranding the price at the
   row's far edge right next to the neighbouring order-summary sidebar card
   (looked visually "stuck together" even though there was no real overlap).
   justify-content:flex-start clusters photo+info+price on one side instead,
   leaving the unused width as plain breathing room inside the row itself. */
.citem{
  display:flex;justify-content:flex-start;gap:18px;align-items:center;
  padding:18px;border-bottom:1px solid var(--line-soft);
}
.citem:last-child{ border-bottom:0; }

.ci-photo{ width:96px;height:104px;flex:none;border:1px solid var(--line-soft);border-radius:10px;background:#fff;display:block;overflow:hidden; }
.ci-photo a{ display:block;width:100%;height:100%; }
/* object-fit:contain — our real product photos are tall/narrow bottles;
   object-fit:cover on a near-square box cropped them to an unrecognisable
   close-up (same root cause as the PDP gallery crop fix). */
.ci-photo img{ display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0; }

.ci-info{ min-width:0;display:flex;flex-direction:column;gap:5px; }
.ci-brand{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-family:"Segoe UI",sans-serif;font-weight:600; }
.ci-name{ font-size:15px;font-weight:700;line-height:1.5;color:var(--ink); }
.ci-name a{ color:inherit; }
.ci-name a:hover{ color:var(--accent-deep); }
.ci-var{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11.5px;font-weight:600;color:var(--accent-deep);
  background:rgba(107,107,179,.09);border:1px solid rgba(107,107,179,.2);
  padding:4px 11px;border-radius:20px;margin-top:2px;line-height:1.6;
}
.ci-var .ic{ width:13px;height:13px;flex:none; }
/* fallback WC attribute dump for non-variation line items */
.ci-info .variation,
.ci-info dl.variation{ margin:4px 0 0;font-size:12px;color:var(--ink-soft);line-height:1.7; }
.ci-info dl.variation dt{ font-weight:600;display:inline; }
.ci-info dl.variation dd{ display:inline;margin:0 0 0 8px; }
.ci-info dl.variation dd p{ display:inline;margin:0; }
.ci-info .backorder_notification{ font-size:11.5px;color:#9a6b2b;margin-top:2px; }

.ci-actions{ display:flex;align-items:center;gap:16px;margin-top:9px;flex-wrap:wrap; }

/* qty stepper — the REAL <input class="qty"> (WooCommerce's own
   woocommerce_quantity_input()) stays functional and un-renamed; the +/-
   buttons just wrap it and dispatch a real `change` event (see theme.js) so
   the native update-cart flow fires exactly as if the shopper had typed a
   new number and clicked "به‌روزرسانیِ سبد" themselves. */
.ci-actions .qty{ display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--paper); }
.ci-actions .qty .qd{
  width:34px;height:34px;border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:17px;line-height:1;color:var(--accent-deep);display:grid;place-items:center;transition:.25s;flex:none;
}
.ci-actions .qty .qd:hover{ background:rgba(107,107,179,.1); }
.ci-actions .qty .qd:disabled{ color:var(--line);cursor:not-allowed;background:transparent; }
.ci-actions .qty .quantity{ display:inline-flex;border:0;border-radius:0;height:auto;background:transparent; }
.ci-actions .qty .quantity .qty{
  width:36px;height:34px;padding:0;border:0;background:transparent;text-align:center;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);-moz-appearance:textfield;
}
.ci-actions .qty .quantity .qty::-webkit-outer-spin-button,
.ci-actions .qty .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }

/* higher specificity than `.woocommerce a.remove` (woocommerce.css) — that
   generic rule's fixed 26x26 circle + line-height:24px was clipping our
   icon+label layout down to nothing visible. */
a.remove.ci-remove{
  display:inline-flex;align-items:center;gap:6px;background:transparent;
  width:auto;height:auto;border:0;border-radius:0;line-height:1;text-align:start;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--ink-soft);transition:color .25s;
}
a.remove.ci-remove:hover{ color:#b04848;background:transparent;border-color:transparent; }
a.remove.ci-remove svg{ width:14px;height:14px;flex:none; }

.ci-price{ text-align:left;display:flex;flex-direction:column;gap:4px;align-items:flex-end;white-space:nowrap; }
.ci-line{ font-size:15.5px;font-weight:700;color:var(--ink); }
.ci-unit{ font-size:11px;color:var(--ink-soft);font-weight:300; }
.ci-unit b{ font-weight:600;color:var(--ink-soft); }

/* coupon row — pill form (was a table <td> layout; now a plain flex row
   still inside the SAME .woocommerce-cart-form, same #coupon_code /
   apply_coupon field names, so the real coupon POST is untouched) */
.coupon{
  display:flex;align-items:center;gap:10px;margin-top:18px;
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--paper-2);flex-wrap:wrap;
}
.coupon .cp-ic{ width:38px;height:38px;flex:none;border-radius:50%;background:rgba(107,107,179,.1);color:var(--accent-deep);display:grid;place-items:center; }
.coupon .cp-ic svg{ width:19px;height:19px; }
.coupon .cp-field{
  flex:1;min-width:170px;display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:30px;padding:0 16px;transition:border-color .3s,box-shadow .3s;
}
.coupon .cp-field:focus-within{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,107,179,.12); }
.coupon .cp-field #coupon_code{
  border:0;outline:0;background:transparent;font-family:inherit;font-size:13px;width:100%;height:46px;padding:0;
}
.coupon .cp-apply{
  flex:none;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:30px;
  padding:0 22px;height:46px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.3s;
}
.coupon .cp-apply:hover{ background:var(--accent-deep);border-color:var(--accent-deep); }

/* update-cart — a small secondary/progressive-enhancement control. The +/-
   steppers auto-submit it via JS, so most shoppers never click it directly,
   but it must stay real + reachable (no-JS, screen readers, keyboard-only
   qty edits typed straight into the number field). */
.cart-update-row{ margin-top:14px;display:flex;justify-content:flex-end; }
.cart-update-row button[name="update_cart"]{
  background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);min-height:40px;
  padding:0 18px;font-size:12.5px;border-radius:30px;
}
.cart-update-row button[name="update_cart"]:hover{ background:var(--ink);color:#fff;border-color:var(--ink); }
.cart-update-row button[name="update_cart"][disabled]{ opacity:.4;cursor:not-allowed; }

/* continue shopping link */
.cm-back{ display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;font-weight:600;color:var(--accent-deep);transition:gap .3s; }
.cm-back:hover{ gap:13px; }

/* ---- summary sidebar (totals card + trust badges) ---- */
.summary{ display:flex;flex-direction:column;gap:16px; }

/* ---- cart totals card ---- */
.cart-collaterals{ margin-top:0; }
.cart-collaterals .cart_totals{
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  padding:20px 20px 22px;box-shadow:0 14px 34px -26px rgba(74,74,178,.5);
}
.cart-collaterals .cart_totals h2{
  font-size:17px;font-weight:800;color:var(--ink);margin:0 0 14px;padding:0;border:0;
}
.cart-collaterals .cart_totals table.shop_table{
  border:0;border-radius:0;margin:0;width:100%;
}
.cart-collaterals .cart_totals table.shop_table tr{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--line-soft);
}
.cart-collaterals .cart_totals table.shop_table tr:last-child{ border-bottom:0; }
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td{
  border:0;padding:12px 0;text-align:start;background:transparent;font-size:13.5px;
}
.cart-collaterals .cart_totals table.shop_table th{ color:var(--ink-soft);font-weight:600; }
.cart-collaterals .cart_totals table.shop_table td{ color:var(--ink);font-weight:700; }
.cart-collaterals .cart_totals tr.order-total{ margin-top:4px;padding-top:6px; }
.cart-collaterals .cart_totals tr.order-total th{ font-size:14.5px;font-weight:800;color:var(--ink); }
.cart-collaterals .cart_totals tr.order-total td,
.cart-collaterals .cart_totals tr.order-total td .amount{
  font-size:19px;font-weight:900;color:var(--accent-deep);
}
.cart-collaterals .cart_totals .includes_tax,
.cart-collaterals .cart_totals small{ font-size:11px;color:var(--ink-soft);font-weight:400; }
/* shipping calculator inside totals stays usable */
.cart-collaterals .cart_totals .shipping-calculator-button{ color:var(--accent-deep);font-weight:600; }
.cart-collaterals .cart_totals .woocommerce-shipping-calculator{ width:100%; }

/* savings confirmation line — only rendered when pershume_cart_sale_savings()
   finds a real, coupon-independent sale discount (see cart-totals.php) */
.sum-save{
  font-size:11.5px;color:var(--accent-deep);font-weight:600;background:rgba(107,107,179,.08);
  border-radius:10px;padding:9px 14px;margin-top:14px;display:flex;align-items:center;gap:8px;
}
.sum-save svg{ flex:none;width:15px;height:15px; }

/* proceed CTA — brand purple, full width, big tap target */
.wc-proceed-to-checkout{ margin-top:18px; }
.cart-cta.checkout-button,
.wc-proceed-to-checkout a.checkout-button{
  display:flex !important;align-items:center;justify-content:center;gap:12px;width:100%;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:40px;
  min-height:56px;padding:0 24px;font-family:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 16px 30px -14px rgba(107,107,179,.75);
  transition:background .3s,box-shadow .3s,gap .3s;
}
.cart-cta.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;gap:16px;
  box-shadow:0 20px 36px -14px rgba(84,84,154,.85);
}
.cart-cta .cart-cta-arr{ font-size:18px;line-height:1;transition:transform .3s; }
.cart-cta.checkout-button:hover .cart-cta-arr{ transform:translateX(-4px); }

/* reassurance under the CTA */
.cart-reassure{ margin-top:16px;display:flex;flex-direction:column;gap:10px; }
.cart-reassure-bnpl{
  display:flex;align-items:center;gap:12px;
  border:1px solid rgba(107,107,179,.26);border-radius:14px;background:rgba(107,107,179,.05);padding:12px 14px;
}
.cart-reassure-bnpl .cr-ic{
  width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(107,107,179,.22);color:var(--accent-deep);
}
.cart-reassure-bnpl .cr-ic svg{ width:20px;height:20px; }
.cart-reassure-bnpl .cr-txt{ display:flex;flex-direction:column;line-height:1.5;min-width:0; }
.cart-reassure-bnpl .cr-txt b{ font-size:13px;font-weight:700;color:var(--ink); }
.cart-reassure-bnpl .cr-txt span{ font-size:11.5px;color:var(--ink-soft); }
.cart-reassure-secure{
  display:flex;align-items:center;gap:9px;justify-content:center;text-align:center;
  font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.6;
}
.cart-reassure-secure .cr-lock{ color:var(--accent);display:inline-flex; }
.cart-reassure-secure .cr-lock svg{ width:16px;height:16px; }

/* ---- trust badges under the summary card ---- */
.sum-trust{ display:grid;grid-template-columns:1fr;gap:10px; }
.st-badge{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:16px;
  padding:12px 13px;background:var(--paper);transition:border-color .3s;
}
.st-badge:hover{ border-color:var(--accent); }
.st-badge .stb-ic{ width:34px;height:34px;flex:none;border-radius:50%;background:rgba(107,107,179,.1);color:var(--accent-deep);display:grid;place-items:center; }
.st-badge .stb-ic svg{ width:18px;height:18px; }
.st-badge .stb-txt{ display:flex;flex-direction:column;line-height:1.35;min-width:0; }
.st-badge .stb-txt b{ font-size:12.5px;font-weight:700;color:var(--ink); }
.st-badge .stb-txt span{ font-size:11px;color:var(--ink-soft);font-weight:300; }
/* keep the trust badges 2-up on phones (side by side), centered */
@media(max-width:480px){
  .sum-trust{ grid-template-columns:1fr;gap:8px; }
  .st-badge{ flex-direction:column;align-items:center;text-align:center;gap:6px;padding:13px 10px; }
  .st-badge .stb-txt{ align-items:center; }
  .st-badge .stb-txt b{ font-size:11.5px; }
  .st-badge .stb-txt span{ font-size:10px; }
}

/* ---- empty cart ---- */
.cart-empty-state{
  text-align:center;max-width:460px;margin:clamp(24px,6vh,60px) auto;
  padding:clamp(30px,6vw,48px) 24px;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(107,107,179,.06) 0%, transparent 60%), var(--paper);
}
.cart-empty-state .ces-emoji{
  width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  color:var(--accent);background:#fff;border:1px solid var(--line);
}
.cart-empty-state .ces-emoji svg{ width:32px;height:32px; }
.cart-empty-state .ces-title{ font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px; }
.cart-empty-state .ces-sub{ font-size:13.5px;color:var(--ink-soft);font-weight:300;line-height:1.95;margin-bottom:24px; }
.cart-empty-state .cart-empty-cta.button{ min-height:52px;padding:0 30px;font-size:14.5px;border-radius:40px; }

/* ====================================================================== */
/* CHECKOUT                                                                */
/* ====================================================================== */
.ck-form{ display:block; }

/* .ck-summary groups the heading + review card + trust note into ONE grid cell
   on desktop (see the min-width:1000px block below). On mobile it must stay
   invisible to `.ck-form`'s flex layout so the existing per-child `order`
   values (below, in the max-width:999px block) keep re-interleaving them with
   the billing fields — `display:contents` makes the wrapper a no-op box. */
.ck-summary{ display:contents; }

/* returning-customer login + coupon toggles (fired before .ck-page) read clean */
.woocommerce-form-login-toggle,
/* coupon toggle — a clean dashed "coupon" prompt with a ticket icon, not the
   generic blue WooCommerce info bar. */
.woocommerce-form-coupon-toggle{ margin-bottom:18px; }
.woocommerce-form-coupon-toggle .woocommerce-info{
  position:static;box-shadow:none;width:auto;max-width:none;inset:auto;margin:0;
  display:flex;align-items:center;gap:10px;
  border:1px dashed rgba(107,107,179,.45);border-radius:13px;background:rgba(107,107,179,.045);
  padding:13px 16px;font-size:13px;color:var(--ink-soft);font-weight:500;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before{
  content:"";flex:none;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4ab2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4Z'/%3E%3Cpath d='M13 5v14'/%3E%3C/svg%3E");
}
.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon{
  color:var(--accent-deep);font-weight:700;margin-inline-start:4px;text-decoration:none;
}
.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover{ text-decoration:underline; }
/* the coupon form that slides open */
form.checkout_coupon{
  border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 18px;background:var(--paper);
}
form.checkout_coupon p:first-child{ margin:0 0 12px;font-size:12.5px;color:var(--ink-soft); }
form.checkout_coupon .form-row{ margin:0;display:flex;gap:10px;flex-wrap:wrap; }
form.checkout_coupon .input-text{
  flex:1 1 160px;height:48px;border:1px solid var(--line);border-radius:30px;padding:0 16px;
  font-family:inherit;font-size:13px;background:var(--paper);
}
form.checkout_coupon .input-text:focus{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,107,179,.12);outline:0; }
form.checkout_coupon .button{
  flex:none;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:30px;
  height:48px;padding:0 22px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.3s;
}
form.checkout_coupon .button:hover{ background:var(--accent-deep);border-color:var(--accent-deep); }

/* ---- card chrome — matches the reference mockup's .fsec pattern ----
   Applied both to the theme's own new cards (.fsec, e.g. the relocated
   payment card in form-checkout.php) and to WooCommerce's native billing /
   order-notes wrappers, so the whole left column reads as one consistent set
   of cards. `.woocommerce-shipping-fields` is deliberately NOT included here:
   in this Iran-only, ship-to-billing-only store it renders an empty shell
   (no visible fields), so giving it card chrome would show a blank box. */
.ck-form{ counter-reset:fsec; }
/* .woocommerce-billing-fields is now just a plain wrapper around two real
   .fsec cards (see woocommerce/checkout/form-billing.php) — it no longer gets
   card chrome of its own, or every field would render inside a card-within-a-card. */
.fsec,
.ck-page .woocommerce-additional-fields{
  counter-increment:fsec;
  border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:clamp(20px,2.6vw,28px);margin-bottom:20px;
}
/* NOTE: intentionally NOT `.fsec:last-child{margin-bottom:0}` — :last-child is
   scoped to each element's OWN parent, and .fsec-address is the last .fsec
   inside .woocommerce-billing-fields (a different parent than the top-level
   .ck-form flow), so that selector zeroed the address card's margin-bottom
   even though the order-notes section still follows it — collapsing them
   together with no gap at all. A few px of extra space below the page's
   truly-last card is a non-issue; a missing gap between two cards is not. */

.fsec-head,
.ck-page .woocommerce-additional-fields > h3{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);font-size:16px;font-weight:800;color:var(--ink);
}
.fsec-head h2{ font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em; }
.fsec-ico,
.ck-page .woocommerce-additional-fields > h3::before{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(107,107,179,.09);color:var(--accent-deep);border:1px solid rgba(107,107,179,.18);
  font-size:17px;line-height:1;
}
.fsec-ico svg{ width:19px;height:19px; }
.ck-page .woocommerce-additional-fields > h3::before{
  content:"";background-repeat:no-repeat;background-position:center;background-size:19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4ab2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h13l3 3v13H4z'/%3E%3Cpath d='M8 9h9M8 13h9M8 17h5'/%3E%3C/svg%3E");
}
/* numbered pill — one shared counter across every .fsec-style card in DOM order */
.fsec-head::after,
.ck-page .woocommerce-additional-fields > h3::after{
  content:counter(fsec);margin-inline-start:auto;flex:none;
  font-family:"Segoe UI",sans-serif;font-size:11px;font-weight:700;
  color:var(--ink-soft);background:var(--line-soft);border-radius:20px;
  min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;
}
.ck-page .woocommerce-shipping-fields{ display:none; }
.ck-page #ship-to-different-address label{ font-size:17px;font-weight:800;color:var(--ink);margin:0 0 16px; }

/* Two-column field grid inside each card: form-row-first/-last pair up 50/50
   (RTL: -first lands on the right), form-row-wide spans the full width. This is
   what makes موبایل|ایمیل, استان|شهر, کدپستی|پلاک sit side-by-side per mockup. */
.ck-page .woocommerce-billing-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 18px;
}
.ck-page .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ck-page .woocommerce-billing-fields__field-wrapper .create-account,
.ck-page .woocommerce-billing-fields__field-wrapper .clear{ grid-column:1 / -1; }
@media(max-width:560px){
  .ck-page .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr; }
}
/* country is a hidden IR field — suppress its empty "کشور / منطقه *" label row. */
.ck-page #billing_country_field{ display:none; }
/* drop WC's inline "(اختیاری)" label suffix — optional fields say so in their
   own helper description instead (matches the mockup's clean labels). */
.ck-page .form-row label .optional{ display:none; }

/* form rows — comfortable, big tap targets, no overflow */
.ck-page .form-row{ margin:0 0 16px;padding:0; }
.ck-page .form-row label{ font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px;display:block; }
.ck-page .form-row .required{ color:var(--accent-deep);text-decoration:none;border:0; }
.ck-page .form-row .input-text,
.ck-page .form-row textarea,
.ck-page .form-row select,
.ck-page .select2-container--default .select2-selection--single{
  width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
.ck-page .form-row .input-text::placeholder,
.ck-page .form-row textarea::placeholder{ color:var(--ink-soft);font-weight:300; }
.ck-page .form-row .input-text:focus,
.ck-page .form-row textarea:focus,
.ck-page .form-row select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,107,179,.14);outline:0;
}
.ck-page .form-row textarea{ min-height:90px;line-height:1.8; }
.ck-page .select2-container .select2-selection--single{ height:48px;display:flex;align-items:center; }
.ck-page .select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; }
.ck-page .woocommerce-input-wrapper{ display:block;width:100%; }

/* ---- order summary / aside ---- */
#order_review_heading.ck-review-heading{
  font-size:18px;font-weight:800;color:var(--ink);margin:clamp(22px,4vw,28px) 0 14px;
}
.ck-review{ }
.ck-review .woocommerce-checkout-review-order-table{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;width:100%;margin:0;background:var(--paper);
}
/* header row hidden — the photo + name + total read fine without column
   labels once each row is reflowed into a summary-list "card row" below. */
.ck-review .woocommerce-checkout-review-order-table thead{ display:none; }
.ck-review .woocommerce-checkout-review-order-table tbody tr.cart_item{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-bottom:1px solid var(--line-soft);
}
.ck-review .woocommerce-checkout-review-order-table tbody td{
  padding:0;border:0;font-size:12.5px;vertical-align:middle;
}
/* photo box is portrait (matches our real tall-bottle photography) and uses
   object-fit:contain — a 54×62 box with object-fit:cover crushed every
   product photo into an unrecognisable close-up crop of the bottle's middle. */
.ck-review .woocommerce-checkout-review-order-table td.product-thumbnail{
  position:relative;order:1;flex:none;width:54px;height:70px;
}
.ck-review .woocommerce-checkout-review-order-table td.product-thumbnail img{
  width:54px;height:70px;object-fit:contain;border:1px solid var(--line-soft);border-radius:10px;background:var(--paper-2);display:block;
}
.ck-review .woocommerce-checkout-review-order-table .ck-item-qty{
  position:absolute;top:-7px;inset-inline-start:-7px;min-width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--paper);padding:0 4px;z-index:1;
}
/* name flexes beside the photo, price sits inline at the row's far edge and
   stays vertically centred against the tall bottle photo — mirrors the
   mockup's [shot][name……][price] single-row product line. min-width:0 lets a
   long Persian name wrap cleanly instead of shoving the price off-row. */
.ck-review .woocommerce-checkout-review-order-table tbody td.product-name{
  order:2;color:var(--ink);font-weight:600;font-size:13px;line-height:1.55;flex:1 1 auto;min-width:0;
}
.ck-review .woocommerce-checkout-review-order-table tbody td.product-total{
  order:3;flex:none;align-self:center;text-align:end;white-space:nowrap;font-weight:700;color:var(--ink);
}
.ck-review .woocommerce-checkout-review-order-table .variation{ margin:4px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.6;white-space:normal; }
/* totals read as a clean gap-separated list (mockup .sum-totals) — no line
   between every row. Only the block gets a top divider (via the last product
   row's border), a generous 16px gap off the product line, and the final
   «مبلغِ قابلِ پرداخت» row gets its own stronger rule above it. */
.ck-review .woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ck-review .woocommerce-checkout-review-order-table tfoot th,
.ck-review .woocommerce-checkout-review-order-table tfoot td{
  padding:5px 6px;border:0;font-size:13px;background:transparent;text-align:start;
}
.ck-review .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.ck-review .woocommerce-checkout-review-order-table tfoot tr:first-child td{ padding-top:16px; }
.ck-review .woocommerce-checkout-review-order-table tfoot td{ text-align:end;white-space:nowrap;font-weight:600;color:var(--ink); }
.ck-review .woocommerce-checkout-review-order-table tfoot th{ color:var(--ink-soft);font-weight:400; }
/* currency unit (تومان) — small + muted, like the mockup's .t suffix */
.ck-review .woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-currencySymbol{
  font-size:11px;color:var(--ink-soft);font-weight:400;margin-inline-start:3px;
}
/* final total: baseline-aligned, big accent-deep figure, stronger divider */
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total td{
  padding-top:15px;padding-bottom:16px;border-top:1px solid var(--line);vertical-align:baseline;
}
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total th{ font-size:14px;font-weight:800;color:var(--ink); }
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total td,
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total td .amount{
  font-size:19px;font-weight:800;color:var(--accent-deep);letter-spacing:-.01em;
}
.ck-review .woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-currencySymbol{
  font-size:11px;color:var(--ink-soft);font-weight:500;
}

/* ---- shipping-method row (see woocommerce/cart/cart-shipping.php) ----
   Still lives inside the totals tfoot (DOM position is AJAX-critical — see
   the template's comment), but is broken out of table-row layout so it reads
   as its own clearly-styled sub-section rather than a plain row. Shared by
   both the cart totals card and the checkout order-review table. */
.ck-ship-row{ display:block !important;border-top:1px solid var(--line-soft); }
.ck-ship-row > th{ display:block !important;padding:12px 16px 6px !important;border:0 !important;font-size:12px;font-weight:700;color:var(--ink-soft); }
.ck-ship-row > td{ display:block !important;padding:0 16px 14px !important;border:0 !important; }
.ck-ship-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px; }
.ck-ship-opt{
  display:flex;align-items:center;gap:11px;cursor:pointer;position:relative;
  border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.ck-ship-opt:hover{ border-color:rgba(107,107,179,.4);background:rgba(107,107,179,.025); }
.ck-ship-opt.sel{ border-color:var(--accent);background:rgba(107,107,179,.05);box-shadow:0 0 0 1px var(--accent) inset; }
.ck-ship-opt input{ position:absolute;opacity:0;pointer-events:none; }
.ck-ship-radio{
  flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;transition:.25s;
}
.ck-ship-opt.sel .ck-ship-radio{ border-color:var(--accent); }
.ck-ship-radio::after{ content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .25s; }
.ck-ship-opt.sel .ck-ship-radio::after{ transform:scale(1); }
.ck-ship-ico{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line-soft);color:var(--accent-deep);
}
.ck-ship-ico svg{ width:17px;height:17px; }
.ck-ship-label{ flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer; }
.ck-ship-label .amount{ font-weight:700;color:var(--accent-deep); }
.woocommerce-shipping-destination{ margin-top:10px;font-size:11.5px;color:var(--ink-soft); }

/* collapse bar — hidden on desktop, shown on mobile */
.ck-osum-bar{ display:none; }

/* ---- payment box + place order ----
   #payment lives in its NATIVE spot — inside #order_review/.ck-review, right
   after the totals table (owner explicitly wants payment + shipping read as
   part of the summary sidebar, not the main right-column form flow). */
.woocommerce-checkout #payment{ background:transparent;border-radius:0;margin-top:16px; }
.woocommerce-checkout #payment ul.payment_methods{
  border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:6px 4px;margin:0;list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{ list-style:none;border-bottom:1px solid var(--line-soft);padding:0; }
.woocommerce-checkout #payment ul.payment_methods li:last-child{ border-bottom:0; }
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--ink);
  padding:15px 14px;margin:0;cursor:pointer;min-height:50px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{ accent-color:var(--accent);width:18px;height:18px;flex:none; }
.woocommerce-checkout #payment ul.payment_methods li img{ max-height:26px;width:auto;margin:0 4px; }
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper-2);border-radius:12px;margin:0 14px 14px;padding:14px 16px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.85;position:relative;
}
.woocommerce-checkout #payment div.payment_box::before{
  content:"";position:absolute;top:-7px;inset-inline-start:22px;width:12px;height:12px;
  background:var(--paper-2);transform:rotate(45deg);
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{ padding:6px 14px 0;font-size:12.5px; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{ font-size:12px;color:var(--ink-soft);line-height:1.8; }

/* place-order button — brand purple, full width, big */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #payment #place_order{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;float:none;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:40px;
  min-height:58px;margin-top:14px;padding:0 24px;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 16px 30px -14px rgba(107,107,179,.75);
  transition:background .3s,box-shadow .3s;cursor:pointer;
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;
  box-shadow:0 20px 36px -14px rgba(84,84,154,.85);
}

/* checkout reassurance — installments + secure, echoes the footer.
   Rendered by form-checkout.php after the order review (see .ck-trust). */
.ck-trust{ margin-top:16px;display:flex;flex-direction:column;gap:10px; }
.ck-bnpl-note{
  display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-soft);line-height:1.6;
  border:1px solid rgba(107,107,179,.22);border-radius:13px;background:rgba(107,107,179,.05);padding:12px 14px;
}
.ck-bnpl-note svg{ width:19px;height:19px;color:var(--accent-deep);flex:none; }
.ck-bnpl-note b{ color:var(--ink);font-weight:700; }
.ck-secure-note{
  display:flex;align-items:center;gap:9px;justify-content:center;text-align:center;
  font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.7;
}
.ck-secure-note svg{ width:16px;height:16px;color:var(--accent);flex:none; }

/* ====================================================================== */
/* RESPONSIVE — CART (mobile-first base above; tablets/desktop below)      */
/* ====================================================================== */

/* --- mobile / tablet (default): single column, items stack under the totals --- */
.cart-layout{ display:flex;flex-direction:column;gap:clamp(30px,4vw,44px); }

@media(max-width:560px){
  /* compact card: photo + info on row 1, price a full-width strip below.
     MUST switch to display:grid here — the base .citem is display:flex (so the
     price stays beside the info on desktop); on a phone that flex row squeezed
     the price into an ugly stranded sliver, so we override to a real 2-col grid
     with the price spanning both columns underneath. */
  .citem{ display:grid;grid-template-columns:74px 1fr;gap:6px 13px;align-items:start;padding:15px; }
  .ci-photo{ width:74px;height:86px;grid-row:1;grid-column:1; }
  .ci-info{ grid-row:1;grid-column:2;min-width:0; }
  .ci-name{ font-size:14px; }
  .ci-price{
    grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:space-between;
    border-top:1px solid var(--line-soft);padding-top:12px;margin-top:6px;text-align:start;
  }
  .ci-price .ci-unit{ order:-1; }
  .coupon .cp-apply{ flex:1 0 100%; }
  .cart-update-row{ justify-content:stretch; }
  .cart-update-row button[name="update_cart"]{ width:100%; }
}

/* tap targets ≥44px on touch widths — qty steppers + remove control */
@media(max-width:768px){
  .ci-actions .qty .qd{ width:42px;height:42px; }
  .ci-actions .qty .quantity .qty{ width:38px;height:42px; }
  .ci-remove{ min-height:44px;padding:6px 4px; }
}

/* --- desktop: two columns, sticky summary --- */
@media(min-width:900px){
  .cart-layout{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,30vw,372px);
    column-gap:clamp(24px,3vw,44px);row-gap:0;align-items:start;
  }
  .summary{ position:sticky;top:96px; }
}

/* ====================================================================== */
/* RESPONSIVE — CHECKOUT                                                    */
/* ====================================================================== */

/* --- mobile (default): single column, collapsible summary pinned to top --- */
@media(max-width:899px){
  .ck-form{ display:flex;flex-direction:column;gap:0; }

  /* flatten #order_review so its children join the form's flex flow and can be
     re-ordered around the billing fields (summary on top, payment at bottom).
     order:8 is the graceful fallback if display:contents is unsupported — then
     the whole summary+payment block simply follows the form (natural WC order). */
  #order_review.ck-review{ display:contents;order:8; }

  .ck-review-heading{ order:1;margin-top:0; }
  .ck-osum-cb{ order:2; }
  .ck-osum-bar{ order:2; }
  .woocommerce-checkout-review-order-table{ order:3; }
  #customer_details.ck-customer{ order:5;margin-top:8px; }
  /* payment stays natively inside #order_review's flattened (display:contents)
     flow — order:9 places it after the customer/address cards and the
     shipping-method list (which lives in the totals tfoot, order:3) but
     before the trust note, still all within the summary sidebar. */
  #payment{ order:9; }
  .ck-trust{ order:10; }

  /* collapsible bar */
  .ck-osum-bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
    border:1px solid var(--line);border-radius:14px 14px 0 0;background:var(--paper-2);
    padding:14px 16px;font-size:14px;font-weight:700;color:var(--ink);min-height:50px;user-select:none;
  }
  .ck-osum-bar .ck-osum-chev{ font-size:18px;color:var(--ink-soft);transition:transform .3s; }
  /* collapsed (unchecked) hides items header+rows, keeps the totals (tfoot) */
  .ck-osum-cb:not(:checked) ~ .woocommerce-checkout-review-order-table thead,
  .ck-osum-cb:not(:checked) ~ .woocommerce-checkout-review-order-table tbody{ display:none; }
  .ck-osum-cb:checked ~ .ck-osum-bar .ck-osum-chev{ transform:rotate(180deg); }
  /* square the table top so it sits flush under the bar */
  .ck-review .woocommerce-checkout-review-order-table{ border-radius:0 0 16px 16px;border-top:0; }

  /* sticky place-order on small screens keeps the CTA reachable */
  #customer_details.ck-customer .col-1,
  #customer_details.ck-customer .col-2{ width:auto;float:none; }
}

/* --- desktop: form left, sticky summary+payment right --- */
@media(min-width:900px){
  .ck-form{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,34vw,420px);
    column-gap:clamp(28px,3.5vw,52px);align-items:start;
  }
  .ck-form > #customer_details.ck-customer{ grid-column:1;grid-row:1; }
  /* the summary wrapper is the ONLY column-2 grid item now — its three
     children (heading/review card/trust note) stack via normal block flow
     inside it, so nothing gets auto-placed into an implicit row below the
     (much taller) billing-fields column. */
  .ck-form > .ck-summary{
    display:block;grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:96px;
  }
  .ck-summary .ck-review-heading{ margin-top:0; }
  .ck-summary .ck-trust{ margin-top:16px; }
  /* billing/shipping side-by-side when both present */
  #customer_details.ck-customer{ display:grid;grid-template-columns:1fr;gap:0; }
  #customer_details.ck-customer .col-1,
  #customer_details.ck-customer .col-2{ width:auto;float:none; }
}

/* ====================================================================== */
/* ORDER RECEIVED (thank-you) — Pershume custom                            */
/* ====================================================================== */
.ty-wrap{max-width:820px;margin:0 auto;padding:8px 0 24px}
.ty-hero{text-align:center;padding:8px 0 28px}
.ty-check{width:70px;height:70px;border-radius:50%;background:#eaf7f0;color:#2e9e6b;display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 0 8px rgba(46,158,107,.08)}
.ty-check svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ty-x{background:#fdecec;color:#d4514e;box-shadow:0 0 0 8px rgba(212,81,78,.08)}
.ty-hero h1{font-size:26px;font-weight:800;color:var(--ink);margin:0 0 8px}
.ty-hero p{font-size:14px;color:var(--ink-soft);line-height:1.9;margin:0 auto;max-width:460px}
.ty-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 24px}
.ty-meta-item{background:var(--paper);padding:16px 14px;display:flex;flex-direction:column;gap:6px;text-align:center}
.ty-meta-item span{font-size:11.5px;color:var(--ink-soft)}
.ty-meta-item strong{font-size:14px;color:var(--ink);font-weight:700}
.ty-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.ty-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
.ty-card h2{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.ty-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:14px}
.ty-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.ty-thumb{width:56px;height:68px;border-radius:10px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line-soft);display:grid;place-items:center}
.ty-thumb img{width:100%;height:100%;object-fit:contain}
.ty-line-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ty-line-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.6}
.ty-line-qty{font-size:11.5px;color:var(--ink-soft)}
.ty-line-total{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.ty-totals{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:9px}
.ty-total-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.ty-total-row span:last-child{color:var(--ink);font-weight:600}
.ty-total-grand{font-size:15px;padding-top:9px;border-top:1px dashed var(--line);margin-top:4px}
.ty-total-grand span{color:var(--ink)!important;font-weight:800!important}
.ty-address address{font-style:normal;font-size:13px;line-height:2;color:var(--ink);margin:0 0 14px}
.ty-contact{display:flex;gap:8px;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px}
.ty-contact span{min-width:40px}
.ty-contact bdi{color:var(--ink);font-weight:600;direction:ltr}
.ty-note{margin-top:16px;background:var(--paper-2);border-radius:12px;padding:13px 15px;font-size:12px;color:var(--ink-soft);line-height:1.9}
.ty-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.ty-btn{flex:1;min-width:140px;text-align:center;border:1px solid var(--line);border-radius:30px;padding:11px 18px;font-size:13px;font-weight:700;color:var(--ink);background:var(--paper);transition:.25s;white-space:nowrap}
.ty-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.ty-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.ty-btn-primary:hover{background:var(--accent-deep);color:#fff}
@media(max-width:768px){
  .ty-meta{grid-template-columns:repeat(2,1fr)}
  .ty-cols{grid-template-columns:1fr}
  .ty-hero h1{font-size:22px}
}
/* --- fix: review-order totals fit the narrow summary column (was overflowing as a native table) --- */
.ck-review .woocommerce-checkout-review-order-table,
.ck-review .woocommerce-checkout-review-order-table tbody,
.ck-review .woocommerce-checkout-review-order-table tfoot{ display:block;width:100%; }
.ck-review .woocommerce-checkout-review-order-table tfoot tr{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; }
.ck-review .woocommerce-checkout-review-order-table tfoot th{ white-space:nowrap; }
.ck-review .woocommerce-checkout-review-order-table tfoot td{ white-space:nowrap;text-align:end; }