/* ===== Cart drawer, floating button, fly animation, and the cart page ===== */

/* ---------- Floating cart button ---------- */
.ds-cart-fab{
  position:fixed;right:22px;bottom:26px;z-index:120;
  width:58px;height:58px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--primary-foreground,#fff);
  box-shadow:0 12px 28px -8px color-mix(in srgb,var(--primary) 80%,transparent);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s
}
.ds-cart-fab:hover{transform:scale(1.07);box-shadow:0 16px 34px -8px color-mix(in srgb,var(--primary) 90%,transparent)}
.ds-cart-fab:focus-visible{outline:3px solid var(--foreground);outline-offset:3px}
/* Bump when something lands in it */
.ds-cart-fab.is-bump,.hdr-action.is-bump{animation:ds-bump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes ds-bump{0%{transform:scale(1)}35%{transform:scale(1.25)}100%{transform:scale(1)}}

.ds-fab-count{
  position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-foreground,#fff);
  border:2px solid var(--card);border-radius:999px;
  font-size:11px;font-weight:700;line-height:1
}
.ds-fab-count.is-empty{display:none}
/* Clear the mobile bottom nav */
@media (max-width:767px){ .ds-cart-fab{bottom:88px;right:16px;width:52px;height:52px} }

/* ---------- Drawer ---------- */
.ds-drawer{position:fixed;inset:0;z-index:1100;visibility:hidden;pointer-events:none}
.ds-drawer.is-open{visibility:visible;pointer-events:auto}
.ds-drawer-overlay{
  position:absolute;inset:0;background:rgba(18,31,52,.5);
  opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px)
}
.ds-drawer.is-open .ds-drawer-overlay{opacity:1}
/* Centred modal. Kept the .ds-drawer-* class names so the existing JS,
   fragments and focus handling keep working unchanged. */
.ds-drawer-panel{
  position:absolute;left:50%;top:50%;
  width:min(470px,92vw);max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border-radius:16px;
  box-shadow:0 30px 70px rgba(18,31,52,.34);
  transform:translate(-50%,-50%) scale(.94);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.35,.6,1),opacity .22s ease
}
.ds-drawer.is-open .ds-drawer-panel{transform:translate(-50%,-50%) scale(1);opacity:1}
@media (max-width:520px){
  .ds-drawer-panel{width:94vw;max-height:88vh}
}
body.ds-drawer-open{overflow:hidden}

.ds-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 20px;border-bottom:1px solid var(--border);flex-shrink:0
}
.ds-drawer-head h3{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--foreground)
}
.ds-drawer-head svg{color:var(--primary)}
.ds-drawer-close{
  width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:var(--muted);color:var(--foreground);font-size:22px;line-height:1;
  transition:background .2s,color .2s
}
.ds-drawer-close:hover{background:var(--primary);color:#fff}
/* The body itself no longer scrolls — the item list inside it does. That keeps
   the subtotal, the suggestions and the checkout button pinned in view no
   matter how many items are in the cart, instead of letting a long list push
   them below the fold. */
.ds-drawer-body{flex:1;overflow:hidden;min-height:0;padding:16px 20px 20px;display:flex;flex-direction:column}
.ds-drawer-body > .widget_shopping_cart_content{display:flex;flex-direction:column;flex:1;min-height:0}
/* min-height keeps at least a couple of items visible: with the suggestions
   and footer holding fixed space, a short window would otherwise squeeze the
   list down to a sliver. */
.ds-mini-list{flex:1 1 auto;min-height:140px;overflow-y:auto;overscroll-behavior:contain}
.ds-mini-foot{flex-shrink:0}
/* On a genuinely short window the cart itself matters more than a cross-sell. */
@media (max-height:600px){ .ds-suggest{display:none} }

/* Slim scrollbars so the scrolling regions don't read as browser chrome. */
.ds-mini-list::-webkit-scrollbar,
.woocommerce-checkout table.shop_table tbody::-webkit-scrollbar{width:6px}
.ds-mini-list::-webkit-scrollbar-thumb,
.woocommerce-checkout table.shop_table tbody::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted-foreground) 35%,transparent);border-radius:99px
}
.ds-mini-list::-webkit-scrollbar-track,
.woocommerce-checkout table.shop_table tbody::-webkit-scrollbar-track{background:transparent}

/* ---------- Mini cart inside the popup ---------- */
.ds-mini-list{list-style:none;margin:0;padding:0}
.ds-mini-item{
  position:relative;display:flex;align-items:flex-start;gap:13px;
  padding:14px 34px 14px 0;border-bottom:1px solid var(--border);
  transition:opacity .2s
}
.ds-mini-item:last-of-type{border-bottom:0}
.ds-mini-item.is-busy{opacity:.45;pointer-events:none}

.ds-mini-thumb{flex-shrink:0;width:66px;height:66px;display:block}
.ds-mini-thumb a{display:block}
.ds-mini-thumb img{
  width:66px;height:66px;object-fit:contain;
  background:var(--muted);border-radius:9px;display:block;margin:0
}

.ds-mini-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ds-mini-name{
  font-size:13.5px;font-weight:600;line-height:1.4;color:var(--foreground);
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
a.ds-mini-name:hover{color:var(--primary)}
.ds-mini-info .variation{margin:0;font-size:11.5px;color:var(--muted-foreground)}
.ds-mini-info .variation dt,.ds-mini-info .variation dd{display:inline;margin:0}
.ds-mini-info .variation dd{margin-right:8px}
.ds-mini-info .variation p{margin:0;display:inline}

.ds-mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ds-mini-total{font-size:14.5px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Quantity stepper */
.ds-qty{
  display:inline-flex;align-items:center;flex-shrink:0;
  border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card)
}
.ds-qty-btn{
  width:30px;height:32px;border:0;background:var(--muted);cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;color:var(--foreground);
  transition:background .18s,color .18s
}
.ds-qty-btn:hover{background:var(--primary);color:#fff}
.ds-qty-input{
  width:40px;height:32px;border:0;text-align:center;background:var(--card);
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--foreground);
  -moz-appearance:textfield
}
.ds-qty-input::-webkit-outer-spin-button,
.ds-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ds-qty-input:focus{outline:none}

.ds-mini-item a.remove{
  position:absolute;top:16px;right:0;
  width:26px;height:26px;display:flex!important;align-items:center;justify-content:center;
  border-radius:50%;background:var(--muted);color:var(--muted-foreground)!important;
  font-size:17px;line-height:1;text-decoration:none;transition:background .2s,color .2s
}
.ds-mini-item a.remove:hover{background:var(--destructive);color:#fff!important}

.ds-mini-foot{margin-top:16px;padding-top:16px;border-top:2px solid var(--border)}
.ds-mini-subtotal{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
  font-size:14px;font-weight:600;color:var(--muted-foreground)
}
.ds-mini-subtotal strong{font-size:21px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.ds-mini-subtotal .amount{color:inherit}
.ds-mini-checkout{
  display:flex;align-items:center;justify-content:center;height:50px;
  border-radius:11px;background:var(--primary);color:#fff;
  font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 85%,transparent);
  transition:background .2s,transform .2s
}
.ds-mini-checkout:hover{background:var(--primary-hover);color:#fff;transform:translateY(-2px)}

.ds-drawer-empty{text-align:center;padding:52px 10px}
.ds-drawer-empty-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;border-radius:50%;margin-bottom:16px;
  background:var(--muted);color:var(--muted-foreground)
}
.ds-drawer-empty p{margin:0 0 18px;font-size:15px;font-weight:600;color:var(--foreground)}
.ds-drawer-shop{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;
  border-radius:999px;background:var(--primary);color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s
}
.ds-drawer-shop:hover{background:var(--primary-hover);transform:translateY(-2px)}

/* ---------- Fly-to-cart clone ---------- */
.ds-fly{
  position:fixed;z-index:1200;pointer-events:none;
  object-fit:contain;background:var(--card);border-radius:10px;
  box-shadow:0 14px 30px rgba(18,31,52,.3);will-change:transform,opacity
}

/* ---------- Cart page ---------- */
.woocommerce-cart .wc-page > .container{max-width:1100px}
.woocommerce-cart table.shop_table{
  border:1px solid var(--border);border-radius:14px;border-collapse:separate;border-spacing:0;
  overflow:hidden;background:var(--card);margin-bottom:26px
}
.woocommerce-cart table.shop_table thead th{
  background:var(--muted);border:0;padding:15px 18px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)
}
.woocommerce-cart table.shop_table td{
  border:0;border-top:1px solid var(--border);padding:18px;vertical-align:middle
}
.woocommerce-cart table.shop_table tbody tr:first-child td{border-top:0}
.woocommerce-cart .product-thumbnail img{
  width:76px;height:76px;object-fit:contain;background:var(--muted);border-radius:10px
}
.woocommerce-cart .product-name a{font-size:14.5px;font-weight:600;color:var(--foreground);text-decoration:none}
.woocommerce-cart .product-name a:hover{color:var(--primary)}
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal{font-variant-numeric:tabular-nums}
.woocommerce-cart .product-subtotal{font-weight:700;color:var(--primary)}
.woocommerce-cart td.product-remove a.remove{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--muted);color:var(--muted-foreground)!important;
  font-size:18px;text-decoration:none;transition:background .2s,color .2s
}
.woocommerce-cart td.product-remove a.remove:hover{background:var(--destructive);color:#fff!important}
.woocommerce-cart .quantity input.qty{
  width:70px;height:42px;padding:0 8px;text-align:center;
  border:1.5px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--foreground)
}
.woocommerce-cart .actions{padding:16px 18px!important;background:var(--muted)}
.woocommerce-cart .coupon{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.woocommerce-cart .coupon input[type=text]{
  height:44px;min-width:190px;padding:0 14px;
  border:1.5px solid var(--border);border-radius:9px;background:var(--card);
  font-family:inherit;font-size:14px
}
/* WooCommerce's own rule is `.cart-collaterals .cart_totals{float:right;width:48%}`,
   which turned this 440px column into a 211px one and broke every word onto
   its own line. Reset both. */
.woocommerce-cart .cart-collaterals{width:100%;max-width:440px;margin-left:auto;float:none}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce-cart .cart-collaterals .cross-sells{width:100%;float:none;margin-top:26px}
.woocommerce-cart .cart_totals{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;overflow:hidden
}
.woocommerce-cart .cart_totals h2{
  margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--foreground)
}
.woocommerce-cart .cart_totals table{width:100%;border:0;border-collapse:collapse}
.woocommerce-cart .cart_totals table{table-layout:fixed}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{
  border:0;border-bottom:1px solid var(--border);padding:12px 0;
  font-size:14px;text-align:left;vertical-align:top
}
.woocommerce-cart .cart_totals th{width:34%;padding-right:14px;color:var(--muted-foreground);font-weight:600}
.woocommerce-cart .cart_totals td{text-align:right;font-variant-numeric:tabular-nums}
/* ---------- WooCommerce notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin:0 0 22px;padding:15px 18px;
  border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:10px;background:var(--card);
  font-size:14px;color:var(--foreground);list-style:none
}
.woocommerce-message{border-left-color:#16a34a;background:#f0fdf4;border-color:#bbf7d0}
.woocommerce-error{border-left-color:var(--destructive);background:#fef2f2;border-color:#fecaca}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none}
.woocommerce-message .button,
.woocommerce-info .button{
  margin-left:auto;height:38px;padding:0 18px;border-radius:8px;
  display:inline-flex;align-items:center;
  background:var(--primary);color:#fff;font-size:13px;font-weight:700;text-decoration:none
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover{background:var(--primary-hover)}

/* ---------- Checkout ---------- */
.woocommerce-checkout{background:var(--background)}
.woocommerce-checkout .wc-page > .container{max-width:1160px}
.ds-modal-checkout .wc-page{padding-top:10px;padding-bottom:16px}
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .wc-page h1{margin:0 0 22px}

/* Two columns: details left, order summary right */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:860px){
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px}
  .woocommerce-checkout #customer_details{grid-column:1;margin:0;display:flex;flex-direction:column;gap:16px}
  .woocommerce-checkout .ds-checkout-side{grid-column:2;position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
}
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0;padding:0}

/* ─── Card Containers — elevated white cards ─── */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-methods-panel,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .ds-checkout-side{
  background:#ffffff;border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;margin:0;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06);
  transition:border-color .25s ease,box-shadow .25s ease
}
.woocommerce-checkout .woocommerce-billing-fields:hover,
.woocommerce-checkout .woocommerce-shipping-methods-panel:hover,
.woocommerce-checkout .woocommerce-additional-fields:hover{
  border-color:color-mix(in srgb,var(--primary) 25%,var(--border));
  box-shadow:0 2px 6px rgba(0,0,0,.05),0 10px 28px -10px rgba(0,0,0,.08)
}
.woocommerce-checkout #order_review{
  background:transparent;border:0;padding:0;margin:0;box-shadow:none;overflow:visible
}
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-additional-fields:empty{display:none}

/* Modal base background */
.ds-modal-checkout body,
.woocommerce-checkout{background:var(--background)}

/* ─── Section Headings — brand pill accent ─── */
.woocommerce-checkout h3,
.woocommerce-checkout .ds-shipping-panel-heading,
.woocommerce-checkout #order_review_heading{
  position:relative;margin:0 0 12px;padding:0 0 0 14px;
  font-size:14.5px;font-weight:700;color:var(--foreground);
  letter-spacing:.01em;text-transform:none;
  display:flex;align-items:center;gap:8px
}
.woocommerce-checkout .ds-shipping-panel-heading svg{display:none}
.woocommerce-checkout h3::before,
.woocommerce-checkout .ds-shipping-panel-heading::before,
.woocommerce-checkout #order_review_heading::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:3.5px;border-radius:4px;
  background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#f97316))
}
.woocommerce-checkout h3::after,
.woocommerce-checkout .ds-shipping-panel-heading::after,
.woocommerce-checkout #order_review_heading::after{
  display:none;content:none
}

/* WooCommerce clearfixes several of these containers with
   `::before{content:" ";display:table}`. That is harmless for a block layout,
   but in a flex or grid container a pseudo-element becomes a real item: on
   #customer_details (flex, gap:16px) it took the first slot and pushed the
   billing card 16px below the order-summary card beside it, and on the
   payment list it stole the first grid cell. Neutralise them wherever the
   checkout switches a container to flex/grid. */
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after,
.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after{content:none;display:none}

/* ─── Form Fields — refined inputs ─── */
/* Two-up rows via grid rather than floats: floated half-width rows depend on
   source order and clearing to line up, and any row that isn't exactly half
   width drifts. The grid pins each field to a real column, so the pair is
   always aligned and equal width. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *{grid-column:1 / -1}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first{grid-column:1}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:2}

.woocommerce-checkout .form-row{margin:0 0 16px;padding:0;display:block}
/* body + form qualifiers again: WooCommerce core sets
   `.woocommerce form .form-row-first{width:47%;float:left}`, so without
   matching its element count these rows kept collapsing to 47% *of their grid
   column* — about 112px instead of the full half-width track. */
body.woocommerce-checkout form .form-row-first,
body.woocommerce-checkout form .form-row-last,
body.woocommerce-checkout form .form-row-wide{
  width:auto;float:none;margin-right:0;margin-bottom:16px
}
@media (max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:1 / -1}
}
.woocommerce-checkout .form-row label{
  display:block;margin:0 0 7px;font-size:12.5px;font-weight:600;line-height:1.4;
  color:var(--muted-foreground);letter-spacing:.01em
}
.woocommerce-checkout .form-row label .required{color:var(--primary);text-decoration:none;margin-left:2px}
/* The `body` + `form` qualifiers are load-bearing. WooCommerce core ships
   `.woocommerce form .form-row .input-text{padding:.5em;height:auto}`, whose
   `form` element selector outranks a plain `.woocommerce-checkout .form-row
   .input-text` — which is why these fields kept collapsing to ~31px tall with
   .5em padding no matter what height was set here. */
body.woocommerce-checkout form .form-row .input-text,
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout form .form-row textarea{
  width:100%;height:50px;padding:0 16px;line-height:normal;
  border:1.5px solid var(--border);border-radius:12px;
  background:var(--card);font-family:inherit;font-size:14.5px;
  color:var(--foreground);transition:all .2s ease
}
body.woocommerce-checkout form .form-row textarea{
  height:auto;min-height:92px;padding:14px 16px;line-height:1.55;resize:vertical
}
.woocommerce-checkout .form-row .input-text:hover,
.woocommerce-checkout .form-row select:hover,
.woocommerce-checkout .form-row textarea:hover{
  border-color:color-mix(in srgb,var(--primary) 40%,var(--border));
  background:#fff
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{
  outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--primary) 12%,transparent),
              0 2px 8px color-mix(in srgb,var(--primary) 8%,transparent)
}
.woocommerce-checkout .form-row .input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder{color:#94a3b8;font-size:13px}

/* ─── Shipping Cards ─── */
.ds-shipping-cards-list{display:flex;flex-direction:column;gap:7px}
.ds-shipping-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border:1.5px solid var(--border);border-radius:12px;
  background:#ffffff;cursor:pointer;position:relative;
  transition:all .22s ease
}
.ds-shipping-card:hover{
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border));
  background:color-mix(in srgb,var(--primary) 3%,#fff);
  transform:translateY(-1px);
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 8%,transparent)
}
.ds-shipping-card.is-selected{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 5%,#fff);
  box-shadow:0 4px 18px -4px color-mix(in srgb,var(--primary) 20%,transparent)
}
/* flex:1 so the label side claims the space the cost column doesn't use.
   Without it this row only ever grew to its own content width, and the long
   pickup-address option was left wrapping one word per line on narrow
   screens while empty space sat beside it. */
.ds-shipping-card-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.ds-shipping-radio{accent-color:var(--primary);width:18px;height:18px;flex-shrink:0;cursor:pointer}
.ds-shipping-card-icon-wrap{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--muted);color:var(--muted-foreground);transition:all .22s ease
}
.ds-shipping-card.is-selected .ds-shipping-card-icon-wrap{
  background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)
}
.ds-shipping-card-info{min-width:0;flex:1 1 auto}
.ds-shipping-card-title{font-size:12px;font-weight:500;color:var(--foreground);line-height:1.35;display:block}
.ds-shipping-card-cost{flex-shrink:0;text-align:right}
.ds-ship-cost-val{font-size:14.5px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.ds-ship-free-badge{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;
  background:linear-gradient(135deg,#dcfce7,#ecfdf5);color:#15803d;
  font-size:11.5px;font-weight:700;letter-spacing:.02em
}

/* Shipping row in summary table */
.woocommerce-checkout .shop_table tr.ds-review-shipping-row th{
  font-size:13.5px;font-weight:500;color:var(--muted-foreground)
}
.woocommerce-checkout .shop_table tr.ds-review-shipping-row td{
  font-weight:600;color:var(--foreground)
}
.woocommerce-checkout .shop_table .ds-review-ship-val{
  font-size:14px;font-weight:700;color:var(--foreground);font-variant-numeric:tabular-nums
}

/* ─── Review Table Layout ─── */
.woocommerce-checkout .shop_table{
  width:100%;border-collapse:collapse;border:0;margin:0;background:transparent
}
/* The `table.` qualifier is load-bearing. main.css carries
   `.woocommerce table.shop_table th, … td{border-bottom:1px solid var(--border)}`
   for the normal cart/order tables, which out-specifies a plain
   `.woocommerce-checkout .shop_table td`. Since the footer rows below are flex
   with shrink-to-content cells, that stray border-bottom rendered as an
   underline beneath every label and every price. Matching its element count
   lets the reset actually land. */
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{border:0;padding:8px 0}
/* Scroll the item list rather than letting it grow. A big cart otherwise
   pushed the totals and Place Order button far down the panel; capping it here
   keeps the summary and the button at a fixed, predictable position.
   display:block on tbody/tr/td is what makes a table section scrollable —
   overflow has no effect on table-row-group in its default display. */
.woocommerce-checkout table.shop_table tbody{
  display:block;max-height:290px;overflow-y:auto;overscroll-behavior:contain
}
.woocommerce-checkout table.shop_table tbody tr{display:block;width:100%}
.woocommerce-checkout table.shop_table tbody td{
  display:block;width:100%;border:0;border-top:1px solid var(--muted);padding:14px 0
}
.woocommerce-checkout table.shop_table tbody tr:first-child td{border-top:0;padding-top:0}
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td{border:0}
.woocommerce-checkout .shop_table tfoot{display:block;margin-top:10px;padding-top:4px}
.woocommerce-checkout .shop_table tfoot tr{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:7px 0;border:0;box-sizing:border-box
}
.woocommerce-checkout .shop_table tfoot th{
  padding:0;font-size:13.5px;font-weight:500;color:var(--muted-foreground);text-align:left
}
.woocommerce-checkout .shop_table tfoot td{
  padding:0;text-align:right;font-weight:600;color:var(--foreground);font-variant-numeric:tabular-nums;font-size:14px
}
.woocommerce-checkout .shop_table tfoot tr.order-total{
  border-top:2px solid var(--border);padding-top:14px;margin-top:8px
}
.woocommerce-checkout .shop_table tfoot tr.order-total th{
  font-size:15px;font-weight:800;color:var(--foreground)
}
.woocommerce-checkout .shop_table tfoot tr.order-total td{
  color:var(--primary);font-size:20px;font-weight:800
}

/* ─── Item Rows with Thumbnails ─── */
.ds-review-item{display:flex;align-items:center;gap:12px}
/* font-size:0 / transparent text so a product whose image file is missing
   degrades to a plain muted tile instead of spilling its alt text across the
   row — the summary should never look broken because of one bad upload. */
.ds-review-thumb{
  position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:12px;
  overflow:hidden;background:var(--muted);border:1px solid var(--border);
  font-size:0;color:transparent
}
.ds-review-thumb img,
.ds-review-thumb .ds-review-img{
  width:100%;height:100%;object-fit:cover;display:block;
  font-size:0;color:transparent
}

.ds-review-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.ds-review-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;line-height:1.35;color:var(--foreground)
}
.ds-review-meta{font-size:11.5px;line-height:1.4;color:var(--muted-foreground)}
.ds-review-qty-row{display:flex;align-items:center;gap:8px}
.ds-review-qty-label{font-size:12px;font-weight:500;color:var(--muted-foreground)}

.ds-review-item.is-busy{opacity:.5;pointer-events:none}
.ds-review-qty-box{
  display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;
  background:var(--muted);height:28px;overflow:hidden;transition:border-color .2s ease
}
.ds-review-qty-box:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--border))}
.ds-review-qty-btn{
  width:26px;height:100%;border:0;background:transparent;color:var(--muted-foreground);
  font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s
}
.ds-review-qty-btn:hover{background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)}
.ds-review-qty-input{
  width:28px;height:100%;border:0;background:transparent;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--foreground);padding:0;
  -moz-appearance:textfield;pointer-events:none
}
.ds-review-price{
  font-size:14px;font-weight:700;color:var(--primary);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:4px
}

.ds-review-remove-btn{
  width:26px;height:26px;border-radius:8px;border:0;
  background:color-mix(in srgb,var(--destructive) 8%,#fff);
  color:var(--destructive);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:all .18s ease
}
.ds-review-remove-btn:hover{background:var(--destructive);color:#fff;transform:scale(1.08)}

/* ─── Collapsible Coupon ─── */
.ds-checkout-coupon-wrap{
  padding:12px 0;margin:8px 0;border-top:1px solid var(--muted);border-bottom:1px solid var(--muted)
}
.ds-coupon-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:4px 0;border:0;background:transparent;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--muted-foreground);transition:color .2s ease
}
.ds-coupon-toggle:hover{color:var(--primary)}
.ds-coupon-toggle-left{display:inline-flex;align-items:center;gap:8px}
.ds-coupon-icon{color:var(--primary);flex-shrink:0}
.ds-coupon-toggle-arrow{display:inline-flex;align-items:center;color:#94a3b8;transition:transform .25s ease,color .25s ease}
.ds-checkout-coupon-wrap.is-open .ds-coupon-toggle-arrow{transform:rotate(180deg);color:var(--primary)}
.ds-coupon-collapse{display:none;margin-top:12px}
.ds-checkout-coupon-wrap.is-open .ds-coupon-collapse{display:block}
.ds-coupon-input-group{display:flex;align-items:center;gap:8px}
.ds-coupon-input{
  flex:1 1 auto;height:42px;padding:0 14px;
  border:1.5px solid var(--border);border-radius:10px;background:var(--card);
  font-family:inherit;font-size:13px;font-weight:600;color:var(--foreground);
  transition:border-color .2s ease
}
.ds-coupon-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.ds-coupon-apply-btn{
  flex:0 0 auto;height:42px;padding:0 20px;border:0;border-radius:10px;
  background:var(--primary);color:#fff;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--primary) 40%,transparent);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
.ds-coupon-apply-btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--primary) 50%,transparent)
}

/* ─── Payment Method Cards ─── */
.woocommerce-checkout #payment{background:transparent;border-radius:0;border:0;padding:0;margin:0}
/* One column, not auto-fit. In the summary column an auto-fit track list fits
   two ~180px tiles, which is too narrow for a gateway name like "Cash and
   Links delivery" — it wrapped mid-label and left the tile stranded beside
   dead space. Full-width tiles stack cleanly at any method count. */
.woocommerce-checkout #payment ul.payment_methods{
  display:grid;grid-template-columns:1fr;gap:10px;
  margin:0 0 16px;padding:0;border:0;list-style:none
}
/* A ::before/::after with content on a grid container becomes a real grid
   item. The clearfix pseudo-elements WooCommerce puts on its lists were
   silently taking the first cell and shunting the actual payment method into
   the next one. */
.woocommerce-checkout #payment ul.payment_methods::before,
.woocommerce-checkout #payment ul.payment_methods::after{content:none;display:none}
.woocommerce-checkout #payment ul.payment_methods li{
  position:relative;overflow:hidden;
  margin:0;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:#ffffff;
  transition:all .22s ease;
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer
}
.woocommerce-checkout #payment ul.payment_methods li:hover{
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border));
  background:color-mix(in srgb,var(--primary) 3%,#fff);
  transform:translateY(-1px);
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 8%,transparent)
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 5%,#fff);
  box-shadow:0 4px 18px -4px color-mix(in srgb,var(--primary) 22%,transparent)
}
/* flex:1 with min-width:0 rather than width:100% — at 100% the label claimed
   the whole tile and squeezed the ✓ badge (the li's ::after) off its own row. */
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline-flex;align-items:center;gap:8px;margin:0;flex:1 1 auto;min-width:0;
  font-size:13.5px;font-weight:700;color:var(--foreground);cursor:pointer
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{display:none}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked)::after{
  content:"✓";width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:#ffffff;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;flex-shrink:0;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 40%,transparent);
  animation:ds-check-pop .3s cubic-bezier(.34,1.56,.64,1)
}
@keyframes ds-check-pop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* Payment description boxes */
.woocommerce-checkout #payment div.payment_box{
  margin:6px 0 2px 24px;padding:6px 10px;border-radius:8px;
  background:var(--muted);font-size:12px;line-height:1.4;color:var(--muted-foreground);
  border:1px solid var(--border);display:none !important
}
.woocommerce-checkout #payment div.payment_box:has(input),
.woocommerce-checkout #payment div.payment_box:has(iframe),
.woocommerce-checkout #payment div.payment_box:has(select){
  display:block !important
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after{display:none;content:none}
.woocommerce-checkout #payment div.payment_box p{margin:0;font-size:12px;line-height:1.4}
.woocommerce-checkout #payment div.payment_box p:last-child{margin-bottom:0}

/* ─── Place Order Button — premium brand gradient ─── */
.woocommerce-checkout #payment .place-order{padding:8px 0 0;margin:0}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  padding:0 0 12px;font-size:12px;color:var(--muted-foreground);line-height:1.45
}
.woocommerce-checkout #place_order{
  width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);
  color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 28px -6px color-mix(in srgb,var(--primary) 50%,transparent);
  transition:all .25s ease;
  position:relative;overflow:hidden
}
.woocommerce-checkout #place_order::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  background-size:200% 100%;
  animation:ds-btn-shine 2.5s ease-in-out infinite
}
@keyframes ds-btn-shine{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.woocommerce-checkout #place_order:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px -6px color-mix(in srgb,var(--primary) 60%,transparent)
}
.woocommerce-checkout #place_order:active{transform:translateY(0)}

/* ========================================================
   Mobile Checkout Hierarchy (< 860px)
   ======================================================== */
@media (max-width: 859px) {
  /* align-items:stretch is not redundant. The desktop rule sets
     `align-items:start` for the grid, and that declaration still applies once
     this switches to flex — leaving every panel to size to its own content, so
     the notes card, promo row and payment box each ended up a different width
     and the notes textarea spilled out of its card. */
  .woocommerce-checkout form.checkout{
    display:flex;flex-direction:column;align-items:stretch;gap:0
  }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #customer_details .col2-set,
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout .ds-checkout-side,
  .woocommerce-checkout #order_review{
    display:contents !important
  }

  /* 1. Top: Order Review Heading & Table */
  .woocommerce-checkout #order_review_heading{
    order:1 !important;background:transparent;padding:6px 4px 12px;margin:0
  }
  .woocommerce-checkout table.woocommerce-checkout-review-order-table{
    order:2 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;margin:0 0 14px;overflow:hidden;padding:16px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 2. Billing Details */
  .woocommerce-checkout .woocommerce-billing-fields{
    order:3 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;padding:18px;margin:0 0 14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 3. Shipping Methods */
  .woocommerce-checkout .woocommerce-shipping-methods-panel{
    order:4 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;padding:18px;margin:0 0 14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 4. Additional Fields / Notes */
  .woocommerce-checkout .woocommerce-additional-fields{
    order:5 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;padding:18px;margin:0 0 14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 5. Collapsible Promo Code */
  .woocommerce-checkout .ds-checkout-coupon-wrap{
    order:6 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;padding:14px 18px;margin:0 0 14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 6. Payment & Place Order */
  .woocommerce-checkout #payment{
    order:7 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;overflow:hidden;margin:0 0 18px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }
  .woocommerce-checkout #payment ul.payment_methods{padding:16px 18px 6px}
  .woocommerce-checkout #payment .place-order{padding:6px 18px 18px}
}

/* Coupon / login prompts above the form (disabled in modal, fallback styling) */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle{margin:0 0 18px}
.woocommerce-checkout form.checkout_coupon{
  border:1px solid var(--border);border-radius:14px;padding:20px;background:var(--card);margin:0 0 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)
}

/* Shipping rows */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals tr.shipping,
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals,
.woocommerce-checkout .shop_table tr.shipping{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 18px;
  width:100%;border-top:1px solid var(--border);border-bottom:0;
  padding:14px 24px;margin:0
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals tr.shipping{padding:12px 0}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals tr.shipping th,
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals th,
.woocommerce-checkout .shop_table tr.shipping th{
  display:block;flex:0 0 auto;width:auto;margin:0;padding:0;border:0;
  font-size:13.5px;font-weight:600;color:var(--muted-foreground)
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals tr.shipping td,
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals td,
.woocommerce-checkout .shop_table tr.shipping td{
  display:flex;justify-content:flex-end;flex:1 1 220px;min-width:0;
  margin:0;padding:0;border:0;text-align:left
}
.cart_totals #shipping_method,
.shop_table #shipping_method{
  list-style:none;margin:0;padding:0;width:100%;max-width:380px;
  display:grid;gap:9px;text-align:left
}
.cart_totals #shipping_method li,
.shop_table #shipping_method li{
  display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;color:var(--foreground)
}
.cart_totals #shipping_method input[type=radio],
.shop_table #shipping_method input[type=radio]{margin:3px 0 0;accent-color:var(--primary);flex-shrink:0}
.cart_totals #shipping_method label,
.shop_table #shipping_method label{cursor:pointer}
.cart_totals #shipping_method .amount,
.shop_table #shipping_method .amount{font-weight:700;color:var(--primary)}
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .shipping-calculator-button,
.woocommerce-checkout .woocommerce-shipping-destination{display:none!important}

@media (max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields{padding:16px}
  .woocommerce-checkout #order_review_heading{padding:16px 16px 10px}
  .woocommerce-checkout .shop_table td,
  .woocommerce-checkout .shop_table th,
  .woocommerce-checkout .shop_table thead th{padding:12px 16px}
  .woocommerce-checkout .ds-review td.product-name{padding:12px 16px}
  .ds-review-item{gap:10px}
  .ds-review-thumb,.ds-review-thumb img,.ds-review-thumb .ds-review-img{width:48px;height:48px}
  .ds-checkout-coupon-wrap{padding:12px 16px}
  .woocommerce-checkout #payment ul.payment_methods{padding:14px 16px;grid-template-columns:1fr}
  .woocommerce-checkout #payment .place-order{padding:6px 16px 16px}

  /* The shipping picker is a card nested inside the billing card, so on a
     390px screen the page gutter, the billing padding, the panel padding and
     the option padding stacked up to ~104px of chrome — leaving the long
     pickup-address option about 100px to wrap into, one word per line.
     Trimming the two inner levels gives that text back ~40px. */
  .woocommerce-checkout .woocommerce-shipping-methods-panel{padding:12px}
  .ds-shipping-cards-list{gap:6px}
  .ds-shipping-card{padding:9px 12px;gap:10px}
  .ds-shipping-card-left{gap:10px}
  .ds-shipping-card-icon-wrap{width:28px;height:28px}
}

/* Shipping/additional panels render as empty cards when no fields exist */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(.form-row)),
.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)),
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(input)):not(:has(textarea)),
.woocommerce-checkout .woocommerce-additional-fields:not(:has(input)):not(:has(textarea)){
  display:none
}

/* ========================================================
   Checkout Modal Frame & Overlay
   ======================================================== */
.ds-co{position:fixed;inset:0;z-index:1300;visibility:hidden;pointer-events:none}
.ds-co.is-open{visibility:visible;pointer-events:auto}
.ds-co-overlay{
  position:absolute;inset:0;background:rgba(15,23,42,.55);
  opacity:0;transition:opacity .3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.ds-co.is-open .ds-co-overlay{opacity:1}
.ds-co-panel{
  position:absolute;left:50%;top:50%;
  width:min(1080px,94vw);height:min(90vh,920px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 32px 84px -12px rgba(15,23,42,.4),0 0 0 1px var(--border);
  transform:translate(-50%,-50%) scale(.95);opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .24s ease
}
.ds-co.is-open .ds-co-panel{transform:translate(-50%,-50%) scale(1);opacity:1}

.ds-co-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;
  padding:12px 20px;border-bottom:1px solid var(--border);background:var(--card)
}
.ds-co-title-wrap{
  display:flex;align-items:center;gap:10px
}
.ds-co-title{
  margin:0;font-size:15px;font-weight:700;color:var(--foreground)
}
.ds-co-secure-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  background:#ecfdf5;border:1px solid #d1fae5;
  font-size:11px;font-weight:600;color:#059669
}
.ds-co-close{
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:var(--muted);color:var(--muted-foreground);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease
}
.ds-co-close:hover{background:var(--destructive);color:#fff;transform:scale(1.05)}

.ds-co-body{position:relative;flex:1;min-height:0;background:var(--background)}
.ds-co-frame{width:100%;height:100%;border:0;display:block}

/* Spinner while framed checkout loads */
.ds-co-loader{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--background);z-index:2
}
.ds-co.is-loading .ds-co-loader{display:flex}
.ds-co-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--primary);
  animation:ds-co-spin .75s linear infinite
}
.ds-co-loader-text{
  margin:0;font-size:13.5px;font-weight:600;color:var(--muted-foreground)
}
@keyframes ds-co-spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .ds-co-panel{width:100vw;height:100vh;max-height:none;border-radius:0;top:0;left:0;transform:none}
  .ds-co.is-open .ds-co-panel{transform:none}
  .ds-co-head{padding:12px 16px}
  .ds-co-secure-badge{display:none}
}

/* ---------- Bare Template inside Frame ---------- */
body.ds-modal-checkout{background:var(--background)}
body.ds-modal-checkout .ds-modal-main{padding:14px 16px 40px;max-width:1120px;margin:0 auto}

.ds-modal-trust-bar{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;
  margin:0 0 20px;padding:10px 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--border)
}
.ds-modal-trust-item{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--muted-foreground)
}
.ds-modal-trust-item svg{color:var(--primary);flex-shrink:0}

/* The framed page has its own scroll; hide outer site elements */
body.ds-modal-checkout .site-header,
body.ds-modal-checkout footer.site-footer,
body.ds-modal-checkout .bottom-nav,
body.ds-modal-checkout .ds-cart-fab,
body.ds-modal-checkout .ds-drawer,
body.ds-modal-checkout .ds-co,
body.ds-modal-checkout #wpadminbar{display:none!important}
body.ds-modal-checkout.admin-bar{margin-top:0!important}
body.ds-modal-checkout .woocommerce-checkout .wc-page > .container{max-width:none;padding:0}
body.ds-modal-checkout h1.entry-title{display:none}

.ds-modal-done{
  padding:60px 24px;text-align:center;max-width:480px;margin:40px auto;
  background:var(--card);border-radius:20px;border:1px solid var(--border);
  box-shadow:0 8px 32px -12px rgba(15,23,42,.1)
}
.ds-modal-done-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:#dcfce7;color:#16a34a
}
.ds-modal-done h3{
  margin:0 0 8px;font-size:20px;font-weight:800;color:var(--foreground)
}
.ds-modal-done p{
  margin:0;font-size:14px;color:var(--muted-foreground);line-height:1.5
}


/* ========================================================
   "You may also like" carousel (cart popup)
   ======================================================== */
.ds-suggest{flex-shrink:0;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border)}
.ds-suggest-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.ds-suggest-title{
  position:relative;margin:0;padding:0 0 6px;
  font-size:13.5px;font-weight:700;color:var(--foreground);letter-spacing:.01em
}
.ds-suggest-title::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent))
}
.ds-suggest-nav{display:flex;gap:6px;flex-shrink:0}
.ds-suggest-arrow{
  width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;transition:background .18s,opacity .18s,transform .18s
}
.ds-suggest-arrow:hover{background:var(--primary-hover);transform:scale(1.06)}
.ds-suggest-arrow[disabled]{opacity:.3;cursor:default;transform:none}

/* Horizontal scroller with snap points — no carousel library, and it stays
   swipeable on touch even when the arrows aren't used. */
.ds-suggest-track{
  display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px
}
.ds-suggest-track::-webkit-scrollbar{height:0}
.ds-suggest-card{
  flex:0 0 auto;width:196px;scroll-snap-align:start;
  display:flex;align-items:center;gap:9px;
  padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--card)
}
.ds-suggest-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:9px;overflow:hidden;background:var(--muted);font-size:0;color:transparent}
.ds-suggest-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ds-suggest-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ds-suggest-name{
  font-size:11.5px;font-weight:600;line-height:1.35;color:var(--foreground);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
a.ds-suggest-name:hover{color:var(--primary)}
.ds-suggest-price{font-size:12px;font-weight:700;color:var(--primary);line-height:1.2}
.ds-suggest-price del{font-weight:500;color:var(--muted-foreground);font-size:10.5px;margin-left:3px}
.ds-suggest-price ins{text-decoration:none}
/* Icon-only add button. The product name gets the width the old "Add to cart"
   label was eating, so it can wrap to two lines instead of truncating. */
.ds-suggest-add{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:var(--primary);color:#fff!important;text-decoration:none;
  box-shadow:0 4px 10px -4px color-mix(in srgb,var(--primary) 80%,transparent);
  transition:background .18s,transform .18s
}
.ds-suggest-add:hover{background:var(--primary-hover);transform:scale(1.08)}
.ds-suggest-add svg{display:block}
/* WooCommerce toggles .loading during the request and .added on success. */
.ds-suggest-add.loading{opacity:.55;pointer-events:none}
.ds-suggest-add.added{background:#15803d}
.ds-suggest-add.added::after{content:none}
.ds-suggest-add.added svg{display:none}
.ds-suggest-add.added::before{
  content:"";width:13px;height:8px;margin-top:-3px;
  border-left:2.6px solid #fff;border-bottom:2.6px solid #fff;transform:rotate(-45deg)
}
/* WooCommerce injects its own "View cart" link after a successful ajax add;
   inside a 172px card it just breaks the layout. */
.ds-suggest-card .added_to_cart{display:none!important}

@media (max-width:520px){
  .ds-suggest-card{width:182px}
}

/* ========================================================
   Order success popup (cart → checkout route)
   ======================================================== */
.ds-ok{position:fixed;inset:0;z-index:1400;visibility:hidden;pointer-events:none}
.ds-ok.is-open{visibility:visible;pointer-events:auto}
.ds-ok-overlay{
  position:absolute;inset:0;background:rgba(18,31,52,.55);
  opacity:0;transition:opacity .3s ease;backdrop-filter:blur(3px)
}
.ds-ok.is-open .ds-ok-overlay{opacity:1}
.ds-ok-panel{
  position:absolute;left:50%;top:50%;
  width:min(420px,92vw);max-height:90vh;overflow-y:auto;
  padding:32px 26px 26px;text-align:center;
  background:var(--card);border-radius:18px;
  box-shadow:0 30px 70px rgba(18,31,52,.34);
  transform:translate(-50%,-50%) scale(.9);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.4,.6,1),opacity .22s ease
}
.ds-ok.is-open .ds-ok-panel{transform:translate(-50%,-50%) scale(1);opacity:1}
.ds-ok-close{
  position:absolute;right:12px;top:12px;
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:var(--muted);color:var(--muted-foreground);font-size:21px;line-height:1;
  transition:background .2s,color .2s
}
.ds-ok-close:hover{background:var(--destructive);color:#fff}

/* Tick draws itself in, so the confirmation feels like a result rather than
   a panel that was already sitting there. */
.ds-ok-check{
  width:66px;height:66px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;
  box-shadow:0 10px 26px -8px rgba(21,128,61,.6)
}
.ds-ok-check svg{width:32px;height:32px;stroke-dasharray:32;stroke-dashoffset:32}
.ds-ok.is-open .ds-ok-check svg{animation:ds-ok-tick .45s .18s ease forwards}
@keyframes ds-ok-tick{to{stroke-dashoffset:0}}

.ds-ok-panel h3{margin:0 0 6px;font-size:21px;font-weight:800;color:var(--foreground)}
.ds-ok-sub{margin:0 0 18px;font-size:14px;color:var(--muted-foreground)}

.ds-ok-meta{
  margin:0 0 14px;padding:12px 16px;border-radius:12px;
  background:var(--muted);border:1px dashed var(--border)
}
.ds-ok-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0}
.ds-ok-label{font-size:12.5px;font-weight:600;color:var(--muted-foreground)}
.ds-ok-oid,.ds-ok-total{font-size:15px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}

.ds-ok-note{
  display:flex;align-items:flex-start;gap:8px;text-align:left;
  margin:0 0 20px;padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--primary) 5%,#fff);
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);
  font-size:12.5px;line-height:1.5;color:var(--foreground)
}
.ds-ok-note svg{flex-shrink:0;margin-top:1px;color:var(--primary)}

.ds-ok-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ds-ok-btn{
  display:flex;align-items:center;justify-content:center;height:46px;
  border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;text-decoration:none;
  transition:background .2s,transform .2s,color .2s
}
.ds-ok-view{background:var(--muted);color:var(--foreground)}
.ds-ok-view:hover{background:var(--border);color:var(--foreground);transform:translateY(-2px)}
.ds-ok-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 85%,transparent)
}
.ds-ok-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}

@media (max-width:420px){
  .ds-ok-panel{padding:28px 18px 20px}
  .ds-ok-actions{grid-template-columns:1fr}
}