/* ===== 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 ---------- */
/* ---------- Checkout ---------- */
.woocommerce-checkout{background:var(--background)}
.woocommerce-checkout .wc-page > .container,
.woocommerce-checkout .page-standard-main{max-width:1200px;padding:24px 16px 60px}
.ds-modal-checkout .wc-page{padding-top:10px;padding-bottom:16px}
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-standard-hero,
.woocommerce-checkout .ds-checkout-page-header,
.woocommerce-checkout .wc-page h1{display:none !important;margin:0;padding:0}

/* Two columns: Left (Items + Delivery) & Right (Payment + Notes) */
.woocommerce-checkout .ds-checkout-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 28px;
  align-items: start;
  width: 100%;
}
@media (max-width: 960px) {
  .woocommerce-checkout .ds-checkout-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.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 .ds-checkout-card{
  background:#ffffff;border:1px solid #E2E8F0;border-radius:18px;
  padding:20px 22px;margin:0 0 18px;
  box-shadow:0 2px 12px rgba(15,23,42,0.04);
  transition:border-color .25s ease,box-shadow .25s ease
}
.woocommerce-checkout .ds-checkout-card:hover{
  border-color:#CBD5E1;
  box-shadow:0 6px 20px -6px rgba(15,23,42,0.08)
}

/* Remove duplicate inner card styling on billing and additional fields */
.ds-card-delivery-address .woocommerce-billing-fields,
.ds-card-order-notes .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
.ds-card-delivery-address .woocommerce-billing-fields h3,
.ds-card-order-notes .woocommerce-additional-fields h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3{
  display:none !important;
}

/* Hide duplicate tfoot inside the left items card */
.ds-card-order-items table.shop_table tfoot{
  display:none !important;
}

.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 — signature indicator bar accent ─── */
.woocommerce-checkout h3,
.woocommerce-checkout .ds-card-title,
.woocommerce-checkout .ds-shipping-panel-heading,
.woocommerce-checkout #order_review_heading{
  position:relative;margin:0 0 14px;padding:0 0 0 14px;
  font-size:15px;font-weight:700;color:#0F172A;
  letter-spacing:.01em;text-transform:none;
  display:flex;align-items:center;gap:8px
}
.woocommerce-checkout h3::before,
.woocommerce-checkout .ds-card-title::before,
.woocommerce-checkout .ds-card-title .ds-title-bar,
.woocommerce-checkout .ds-shipping-panel-heading::before,
.woocommerce-checkout #order_review_heading::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3.5px;border-radius:4px;
  background:#5D5FEF;
}
.woocommerce-checkout h3::after,
.woocommerce-checkout .ds-shipping-panel-heading::after,
.woocommerce-checkout #order_review_heading::after{
  display:none;content:none
}

/* Subtitle for order notes */
.ds-order-notes-wrap{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed #E2E8F0;
}
.ds-card-subtitle{
  font-size:13.5px;
  font-weight:700;
  color:#0F172A;
  margin:0 0 8px;
  position:relative;
  padding-left:12px;
  display:flex;
  align-items:center;
}
.ds-card-subtitle .ds-title-bar{
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:3.5px;
  border-radius:4px;
  background:#5D5FEF;
}
.ds-order-notes-input{
  min-height:50px !important;
  height:50px !important;
  font-size:12.5px !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  resize:vertical;
}

/* ─── Form Fields — refined inputs ─── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .ds-billing-fields-grid{
  display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *,
.woocommerce-checkout .ds-billing-fields-grid > *{grid-column:1 / -1}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .ds-billing-fields-grid > .form-row-first{grid-column:1}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .ds-billing-fields-grid > .form-row-last{grid-column:2}

.woocommerce-checkout .form-row{margin:0 0 12px;padding:0;display:block}
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:12px
}
@media (max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .ds-billing-fields-grid{grid-template-columns:1fr}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-checkout .ds-billing-fields-grid > .form-row-first,
  .woocommerce-checkout .ds-billing-fields-grid > .form-row-last{grid-column:1 / -1}
}
.woocommerce-checkout .form-row label{
  display:flex;align-items:center;justify-content:flex-start;gap:4px;
  margin:0 0 6px;font-size:12.5px;font-weight:700;line-height:1.35;
  color:#1E293B;letter-spacing:-0.01em
}
.woocommerce-checkout .form-row label .required{
  color:#EF4444;font-weight:800;font-size:13.5px;text-decoration:none;margin-left:2px
}

/* Form inputs & custom dropdowns */
body.woocommerce-checkout form .form-row .input-text,
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout select#billing_state,
body.woocommerce-checkout select#billing_city,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  width:100%;height:48px;padding:0 16px;line-height:48px;
  border:1.5px solid #E2E8F0;border-radius:12px;
  background:#F8FAFC;font-family:inherit;font-size:13.5px;font-weight:500;
  color:#0F172A;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  outline:none
}
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout select#billing_state,
body.woocommerce-checkout select#billing_city{
  cursor:pointer;
  padding-right:42px;
  background-color:#F8FAFC;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235D5FEF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px;
  font-weight:600;
  color:#0F172A;
  border:1.5px solid #E2E8F0;
}
body.woocommerce-checkout form .form-row select option{
  background:#FFFFFF;
  color:#0F172A;
  font-size:14px;
  font-weight:500;
  padding:10px 12px;
}
body.woocommerce-checkout form .form-row textarea{
  height:auto;min-height:70px;padding:10px 14px;line-height:1.5;resize:vertical
}

/* Phone Field with 88 Badge (Matching Reference Design) */
.woocommerce-checkout #billing_phone_field .woocommerce-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.woocommerce-checkout #billing_phone_field .woocommerce-input-wrapper::before {
  content: "88";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #E2E8F0;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  line-height: 1.3;
}
.woocommerce-checkout #billing_phone_field input#billing_phone {
  padding-left: 50px !important;
}
.woocommerce-checkout .form-row .input-text:hover,
.woocommerce-checkout .form-row select:hover,
.woocommerce-checkout select#billing_state:hover,
.woocommerce-checkout select#billing_city:hover,
.woocommerce-checkout .form-row textarea:hover,
.woocommerce-checkout .select2-container--default .select2-selection--single:hover{
  border-color:#CBD5E1;
  background-color:#FFFFFF;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout select#billing_state:focus,
.woocommerce-checkout select#billing_city:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single{
  border-color:#5D5FEF !important;
  background-color:#FFFFFF !important;
  box-shadow:0 0 0 3.5px rgba(3, 168, 185, 0.16), 0 2px 10px rgba(3, 168, 185, 0.08) !important;
}
.woocommerce-checkout .form-row .input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder{
  color:#94A3B8;
  font-size:13px;
  font-weight:400;
}

/* ─── Collapsible Order Notes Accordion ─── */
.ds-notes-accordion{
  margin:10px 0 14px;
}
.ds-notes-toggle-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border:1px dashed #CBD5E1;border-radius:10px;
  background:#F8FAFC;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:#475569;transition:all .2s ease
}
.ds-notes-toggle-btn:hover{
  background:#EEF2FF;border-color:#5D5FEF;color:#4338CA
}
.ds-notes-arrow{
  font-size:13px;color:#94A3B8;transition:transform .2s ease
}
.ds-notes-toggle-btn.is-active .ds-notes-arrow{
  transform:rotate(180deg)
}
.ds-notes-collapse-content{
  padding-top:8px;
}
.ds-order-notes-textarea{
  width:100%;min-height:56px !important;height:56px !important;
  font-size:13px !important;line-height:1.45 !important;
  padding:10px 14px !important;border:1.5px solid #E2E8F0 !important;
  border-radius:10px !important;resize:vertical;background:#FFFFFF !important
}

/* ─── 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:13.5px;font-weight:600;color:var(--foreground);line-height:1.4;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:175px;overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;
}
.woocommerce-checkout table.shop_table tbody::-webkit-scrollbar{width:4px}
.woocommerce-checkout table.shop_table tbody::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.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:10px 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:8px;padding-top:4px}
.woocommerce-checkout .shop_table tfoot tr{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:5px 0;border:0;box-sizing:border-box
}
.woocommerce-checkout .shop_table tfoot th{
  padding:0;font-size:13px;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:13.5px
}
.woocommerce-checkout .shop_table tfoot tr.order-total{
  border-top:2px solid var(--border);padding-top:10px;margin-top:6px
}
.woocommerce-checkout .shop_table tfoot tr.order-total th{
  font-size:14.5px;font-weight:800;color:var(--foreground)
}
.woocommerce-checkout .shop_table tfoot tr.order-total td{
  color:var(--primary);font-size:19px;font-weight:800
}

/* ─── Item Rows with Thumbnails (Matching Reference Design) ─── */
.ds-review-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;width:100%;box-sizing:border-box
}
.ds-review-thumb{
  position:relative;flex:0 0 54px;width:54px;height:54px;border-radius:8px;
  overflow:hidden;background:#FFFFFF;border:1px solid #E2E8F0;
  padding:2px;font-size:0;color:transparent
}
.ds-review-thumb img,
.ds-review-thumb .ds-review-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;
  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{
  font-size:13.5px;font-weight:700;line-height:1.35;color:#0F172A;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.ds-review-meta{font-size:11px;line-height:1.3;color:#64748B}
.ds-review-qty-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.ds-review-qty-label{font-size:12px;font-weight:600;color:#64748B}

.ds-review-item.is-busy{opacity:.5;pointer-events:none}
.ds-review-qty-box{
  display:inline-flex;align-items:center;border:1px solid #CBD5E1;border-radius:6px;
  background:#F8FAFC;height:26px;overflow:hidden;transition:border-color .2s ease
}
.ds-review-qty-box:hover{border-color:#5D5FEF}
.ds-review-qty-btn{
  width:22px;height:100%;border:0;background:transparent;color:#5D5FEF;
  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:#EEF2FF;color:#4338CA}
.ds-review-qty-input{
  width:26px;height:100%;border:0;background:#FFFFFF;text-align:center;
  font-size:12px;font-weight:700;color:#0F172A;padding:0;
  -moz-appearance:textfield;pointer-events:none
}
.ds-review-price{
  font-size:14px;font-weight:700;color:#0F172A;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:6px
}

.ds-review-remove-btn{
  width:26px;height:26px;border-radius:6px;border:0;
  background:#EF4444;color:#ffffff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:all .18s ease;
  box-shadow:0 2px 6px rgba(239, 68, 68, 0.25);
}
.ds-review-remove-btn:hover{background:#DC2626;transform:scale(1.08)}

/* ─── Collapsible Coupon Accordion ─── */
.ds-coupon-accordion{
  margin:14px 0;
}
.ds-coupon-toggle-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border:1px solid #E2E8F0;border-radius:10px;
  background:#F8FAFC;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:#334155;transition:all .2s ease
}
.ds-coupon-toggle-btn:hover{
  background:#F1F5F9;color:#0F172A
}
.ds-coupon-arrow{
  font-size:14px;color:#94A3B8;transition:transform .2s ease
}
.ds-coupon-toggle-btn.is-active .ds-coupon-arrow{
  transform:rotate(180deg)
}
.ds-coupon-collapse-content{
  padding:12px 0 4px;
}
.ds-coupon-form-inner{
  display:flex;gap:8px;
}
.ds-coupon-form-inner .ds-input{
  flex:1 1 auto;height:42px;padding:0 12px;
  border:1.5px solid #E2E8F0;border-radius:8px;
  background:#FFF;font-family:inherit;font-size:13px;color:#0F172A
}
.ds-coupon-form-inner .ds-input:focus{
  outline:none;border-color:#5D5FEF;box-shadow:0 0 0 3px rgba(93, 95, 239, 0.15)
}
.ds-coupon-form-inner .btn{
  height:42px;padding:0 18px;border-radius:8px;
  background:#5D5FEF;color:#FFF;font-size:13px;font-weight:700;border:0;cursor:pointer
}

/* ─── Payment Method Pills (Side-by-Side Reference Design) ─── */
.woocommerce-checkout #payment{background:transparent;border-radius:0;border:0;padding:0;margin:0}
.woocommerce-checkout #payment ul.payment_methods,
.ds-payment-pills{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:0 0 16px;padding:0;border:0;list-style:none
}
@media (max-width:520px){
  .woocommerce-checkout #payment ul.payment_methods,
  .ds-payment-pills{grid-template-columns:1fr}
}
.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,
.ds-payment-pill{
  position:relative;overflow:hidden;
  margin:0;padding:12px 14px;border:1.5px solid #E2E8F0;border-radius:12px;background:#ffffff;
  transition:all .2s ease;
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;
  box-sizing:border-box;
}
.woocommerce-checkout #payment ul.payment_methods li:hover,
.ds-payment-pill:hover{
  border-color:#5D5FEF;
}
.woocommerce-checkout #payment ul.payment_methods li.is-selected,
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked),
.ds-payment-pill.is-selected,
.ds-payment-pill:has(input:checked){
  border-color:#5D5FEF;
  background:#EEF2FF;
  box-shadow:0 4px 14px -4px rgba(93, 95, 239, 0.22)
}
.woocommerce-checkout #payment ul.payment_methods li label,
.ds-payment-pill-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;
  width:100%;cursor:pointer;font-size:13px;font-weight:700;color:#0F172A
}
.ds-pay-icon{font-size:16px;flex-shrink:0}
.ds-pay-title{flex:1 1 auto}
.ds-pay-check{
  display:none;color:#5D5FEF;font-size:15px;flex-shrink:0;align-items:center
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) .ds-pay-check,
.ds-payment-pill.is-selected .ds-pay-check,
.ds-payment-pill:has(input:checked) .ds-pay-check{
  display:inline-flex
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio],
.ds-payment-pill input[type=radio]{display:none}

/* ─── Pricing Summary ─── */
.ds-checkout-totals-summary{
  margin:16px 0 18px;padding-top:12px;border-top:1px dashed #E2E8F0
}
.ds-total-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;font-size:13.5px;color:#475569
}
.ds-total-row .ds-total-val{
  font-weight:700;color:#0F172A;font-variant-numeric:tabular-nums
}
.ds-total-row.ds-grand-total{
  border-top:1.5px solid #E2E8F0;padding-top:12px;margin-top:6px
}
.ds-total-row.ds-grand-total .ds-total-label{
  font-size:16px;font-weight:800;color:#0F172A
}
.ds-total-row.ds-grand-total .ds-grand-val{
  font-size:19px;font-weight:800;color:#0F172A
}

/* ─── Confirm Order Button ─── */
.ds-confirm-order-btn,
.woocommerce-checkout #place_order{
  width:100%;height:52px;border:0;border-radius:12px;cursor:pointer;
  background:#5D5FEF;
  color:#fff;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px -4px rgba(93, 95, 239, 0.45);
  transition:all .2s ease;
  position:relative;overflow:hidden;margin-top:14px;
}
.ds-confirm-order-btn:hover,
.woocommerce-checkout #place_order:hover{
  background:#4B4DED;
  transform:translateY(-1px);
  box-shadow:0 10px 28px -4px rgba(93, 95, 239, 0.6);
}

/* Payment description boxes */
.woocommerce-checkout #payment div.payment_box{
  margin:4px 0 2px;padding:6px 10px;border-radius:8px;
  background:var(--muted);font-size:11.5px;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:11.5px;line-height:1.4}
.woocommerce-checkout #payment div.payment_box p:last-child{margin-bottom:0}

/* Completely remove Privacy policy text and Terms checkbox */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ─── Place Order Button — High-Converting Prominent CTA ─── */
.woocommerce-checkout #payment .place-order{padding:4px 0 0;margin:0}
.woocommerce-checkout #place_order{
  width:100%;height:52px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px -6px color-mix(in srgb,var(--primary) 50%,transparent);
  transition:all .2s 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,.18) 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 30px -6px color-mix(in srgb,var(--primary) 65%,transparent)
}
.woocommerce-checkout #place_order:active{transform:translateY(0)}

/* ========================================================
   Mobile Checkout Hierarchy (< 860px)
   ======================================================== */
@media (max-width: 859px) {
  .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. Billing Details at top */
  .woocommerce-checkout .woocommerce-billing-fields{
    order:1 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;padding:16px;margin:0 0 12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px -8px rgba(0,0,0,.06)
  }

  /* 2. Payment & Confirm Order Button directly after billing info */
  .woocommerce-checkout #payment{
    order:2 !important;background:var(--card);border:1px solid var(--border);
    border-radius:16px;overflow:hidden;margin:0 0 14px;
    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:14px 14px 4px}
  .woocommerce-checkout #payment .place-order{padding:4px 14px 14px}

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

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

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

/* 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-print-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.ds-ok-print-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ds-ok-print-inv {
  background: #F0FDF4;
  color: #166534;
  border: 1.5px solid #BBF7D0;
}
.ds-ok-print-inv:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
  transform: translateY(-1px);
}
.ds-ok-print-stk {
  background: #F0F9FF;
  color: #075985;
  border: 1.5px solid #BAE6FD;
}
.ds-ok-print-stk:hover {
  background: #E0F2FE;
  border-color: #7DD3FC;
  transform: translateY(-1px);
}

.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}
}

/* ─── Modern Thank You / Order Received Page ─── */
.ds-thankyou-page {
  max-width: 860px;
  margin: 32px auto 60px;
  padding: 0 16px;
}
.ds-thankyou-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 36px -10px rgba(15, 23, 42, 0.08);
  padding: 36px 32px;
  text-align: center;
}
.ds-ty-icon-success {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ECFDF5;
  border: 2px solid #A7F3D0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.25);
}
.ds-ty-icon-failed {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FEF2F2;
  border: 2px solid #FECACA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.ds-ty-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px;
}
.ds-ty-subtitle {
  font-size: 14px;
  color: #64748B;
  margin: 0 0 24px;
}
.ds-ty-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 16px 20px;
  margin: 0 0 28px;
  background: #F8FAFC;
  border: 1.5px solid #F1F5F9;
  border-radius: 14px;
  text-align: left;
}
.ds-ty-overview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-ty-meta-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ds-ty-meta-val {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F172A;
}
.ds-ty-price {
  color: var(--primary, #03A8B9);
  font-size: 16px;
  font-weight: 800;
}
.ds-ty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* Order Details Table on Thank You Page */
.ds-thankyou-page .woocommerce-order-details {
  margin-top: 32px;
  text-align: left;
}
.ds-thankyou-page .woocommerce-order-details__title {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 14px;
}
.ds-thankyou-page table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ds-thankyou-page table.woocommerce-table--order-details th,
.ds-thankyou-page table.woocommerce-table--order-details td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13.5px;
}
.ds-thankyou-page table.woocommerce-table--order-details th {
  background: #F8FAFC;
  font-weight: 700;
  color: #334155;
}
.ds-thankyou-page .woocommerce-customer-details {
  text-align: left;
  margin-top: 24px;
}
.ds-thankyou-page .woocommerce-column__title {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
}
.ds-thankyou-page address {
  padding: 16px 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: #334155;
}