/* =========================
   NKEETA PRODUCT MODULE — FINAL
   ========================= */

/* Base wrapper */
body{ outline: 8px solid lime !important; }

.nkeeta-product-module{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 96px;   /* BIG outer breathing room */
  text-align: center;
  box-sizing: border-box;
}

/* Force Montserrat everywhere inside */
.nkeeta-product-module *{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* =========================
   HEADER BLOCK
   ========================= */

.nkeeta-title{
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 28px;
  margin: 0 0 18px;
}

.nkeeta-price{
  font-size: 16px;
  opacity: .85;
  margin: 0 0 28px;
}

.nkeeta-short{
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 48px;   /* BIG gap before availability */
  opacity: .9;
}

/* =========================
   AVAILABILITY TABLE
   ========================= */

.nkeeta-availability{
  max-width: 560px;
  margin: 0 auto 56px;   /* BIG gap after table */
}

.nkeeta-availability-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 20px;
}

.nkeeta-availability-list{
  border-top: 1px solid rgba(0,0,0,.08);
}

.nkeeta-availability-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;        /* TALLER rows */
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.nkeeta-variant{
  opacity: .9;
  text-align: left;
}

.nkeeta-stock{
  opacity: .75;
  white-space: nowrap;
}

/* =========================
   VARIATION FORM
   ========================= */

.nkeeta-cart{
  margin-top: 0;
}

/* Whole form spacing */
.nkeeta-product-module form.variations_form{
  margin-top: 0;
}

/* Table layout → stacked luxury layout */
.nkeeta-product-module table.variations{
  width: 100%;
  max-width: 560px;
  margin: 0 auto 40px;   /* space before button */
  border: none;
}

.nkeeta-product-module table.variations tr{
  display: block;
  margin-bottom: 32px;  /* BIG gap between Colour / Size */
}

.nkeeta-product-module table.variations th,
.nkeeta-product-module table.variations td{
  display: block;
  border: none;
  padding: 0;
  text-align: center;
}

/* Labels */
.nkeeta-product-module table.variations th.label{
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .7;
  margin-bottom: 14px;
}

/* Selects */
.nkeeta-product-module table.variations select{
  width: min(560px, 90vw);
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22);
  background: transparent;
  font-size: 14px;
}

/* =========================
   ADD TO BASKET
   ========================= */

.nkeeta-product-module .single_variation_wrap{
  margin-top: 12px;
}

.nkeeta-product-module .single_add_to_cart_button,
.nkeeta-product-module button.single_add_to_cart_button{
  height: 56px;
  border-radius: 999px !important;
  padding: 0 38px !important;
  font-size: 14px;
  letter-spacing: .08em;
  margin-top: 10px;
}

/* Hide noise */
.nkeeta-product-module .reset_variations,
.nkeeta-product-module .woocommerce-variation-description{
  display: none !important;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px){
  .nkeeta-product-module{
    padding: 56px 20px 72px;
  }
  .nkeeta-title{
    font-size: 26px;
  }
  .nkeeta-short{
    margin-bottom: 40px;
  }
  .nkeeta-availability{
    margin-bottom: 48px;
  }
}
/* =========================
   FORCE SPACING (HIGH PRIORITY)
   ========================= */

/* Title → Price spacing */
.nkeeta-product-module .nkeeta-title{
  margin-bottom: 40px !important;
}

/* Price → Description spacing */
.nkeeta-product-module .nkeeta-price{
  margin-bottom: 40px !important;
  font-size: 17px !important;
}

/* Description → Availability spacing */
.nkeeta-product-module .nkeeta-short{
  margin-bottom: 60px !important;
  font-size: 17px !important;
}

/* Availability heading spacing */
.nkeeta-product-module .nkeeta-availability-title{
  margin-top: 48px !important;
  margin-bottom: 24px !important;
  font-size: 13px !important;
  letter-spacing: .18em !important;
}

/* Availability rows readability */
.nkeeta-product-module .nkeeta-availability-row{
  padding: 18px 0 !important;
  font-size: 15px !important;
}

/* Availability → dropdown spacing */
.nkeeta-product-module .nkeeta-cart{
  margin-top: 56px !important;
}

/* Dropdown → button spacing */
.nkeeta-product-module .single_add_to_cart_button{
  margin-top: 28px !important;
}

/* =========================
   NKEETA — FINAL CHECKOUT ORDER FIX
   ========================= */

/* Make checkout a vertical stack */
.woocommerce-checkout form.checkout{
  display:flex !important;
  flex-direction:column !important;
}

/* Flatten Woo wrappers so children can be reordered */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .woocommerce-checkout-review-order{
  display: contents !important;
}

/* 🔑 THIS IS THE KEY FIX */
/* Billing block */
.woocommerce-checkout .col2-set .col-1{
  order: 40 !important;
}

/* Order summary */
.woocommerce-checkout .woocommerce-checkout-review-order-table{
  order: 10 !important;
}

/* Express payments (Apple / Google / Link) */
.woocommerce-checkout .wc-stripe-payment-request-wrapper,
.woocommerce-checkout #wc-stripe-express-checkout-element{
  order: 20 !important;
}

/* OR separator */
.woocommerce-checkout .wc-stripe-express-checkout-button-separator{
  order: 30 !important;
}

/* Card payment section */
.woocommerce-checkout #payment{
  order: 50 !important;
}

/* NKEETA — force Stripe OR separator into correct position */
.woocommerce-checkout form.checkout {
  display: flex;
  flex-direction: column;
}

#wc-stripe-express-checkout-button-separator {
  order: 25 !important;
  margin: 18px 0 !important;
  text-align: center !important;
}

/* =========================
   NKEETA — BILLING FEELS SHORTER (SAFE PATCH)
   (Only reduces vertical space + pairs fields on desktop)
   ========================= */

/* Tighten spacing between billing rows */
.woocommerce-checkout .woocommerce-billing-fields .form-row{
  margin-bottom: 10px !important;
}

/* Tighten label spacing without changing font/weight */
.woocommerce-checkout .woocommerce-billing-fields label{
  margin-bottom: 4px !important;
}

/* Slightly reduce padding inside billing card (if you’re using one) */
.woocommerce-checkout .woocommerce-billing-fields{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Pair common fields to reduce scroll (desktop only) */
@media (min-width: 768px){

  /* First + Last */
  .woocommerce-checkout #billing_first_name_field,
  .woocommerce-checkout #billing_last_name_field{
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
  .woocommerce-checkout #billing_first_name_field{ margin-right: 4% !important; }

  /* Email + Postcode */
  .woocommerce-checkout #billing_email_field,
  .woocommerce-checkout #billing_postcode_field{
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
  .woocommerce-checkout #billing_email_field{ margin-right: 4% !important; }

  /* City + Country */
  .woocommerce-checkout #billing_city_field,
  .woocommerce-checkout #billing_country_field{
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
  .woocommerce-checkout #billing_city_field{ margin-right: 4% !important; }
}

/* Billing + Stripe side-by-side (desktop), stacked (mobile) */
.nkeeta-payrow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
  width:100%;
}

@media (max-width: 980px){
  .nkeeta-payrow{ grid-template-columns:1fr; }
}

/* Make sure each side fills its column */
.nkeeta-payrow #customer_details,
.nkeeta-payrow #payment{
  width:100%;
}

/* =========================
   NKEETA — FORCE neutral checkout notices
   ========================= */

body.woocommerce-checkout .woocommerce-notice,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error{
  background: #F6F6F6 !important;
  border: 1px solid #111 !important;
  color: #111 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Kill Woo success / info colours */
body.woocommerce-checkout .woocommerce-message--success,
body.woocommerce-checkout .woocommerce-message--info,
body.woocommerce-checkout .woocommerce-info{
  background: #F6F6F6 !important;
  border-color: #111 !important;
}

/* Override Stripe / Woo icons */
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before{
  color: #111 !important;
}

/* Remove any gradient / shadow Stripe sneaks in */
body.woocommerce-checkout .woocommerce-notice *{
  box-shadow: none !important;
  background-image: none !important;
}

/* Hide links like “View basket” if injected */
body.woocommerce-checkout .woocommerce-notice a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a{
  display: none !important;
}
/* =========================
   NKEETA — Order summary: single-line only
   ========================= */

/* Remove "Your order" heading */
body.woocommerce-checkout #order_review_heading{
  display: none !important;
}

/* Order table: hide headers + totals, keep only the product row */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot{
  display: none !important;
}

/* Tighten the remaining single row */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  border-collapse: collapse !important;
  border: 0 !important;
  margin: 10px 0 14px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr{
  border: 0 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td{
  padding: 12px 0 !important;
  border: 0 !important;
  font-size: 16px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total{
  text-align: right !important;
  font-weight: 500 !important;
}

/* =========================================
   NKEETA — Notice banners (refined / luxury)
   Woo Blocks + classic, removes blue/green UI
   ========================================= */

/* Blocks notice wrapper */
.wc-block-components-notice-banner{
  background:#fff !important;
  border:1px solid #111 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Kill that thick blue “focus” ring / glow */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-within{
  outline:none !important;
  box-shadow:none !important;
}

/* Remove any default coloured variants */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info{
  background:#fff !important;
  border-color:#111 !important;
}

/* Icon area: no coloured discs */
.wc-block-components-notice-banner__icon{
  background:transparent !important;
  box-shadow:none !important;
}

/* Force icons neutral (kills green/blue) */
.wc-block-components-notice-banner svg,
.wc-block-components-notice-banner svg *{
  color:#111 !important;
  fill:#111 !important;
  stroke:#111 !important;
}

/* Clean typography + spacing */
.wc-block-components-notice-banner__content{
  color:#111 !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

/* Remove Woo’s left colour bar + extra padding */
.wc-block-components-notice-banner::before{
  display:none !important;
}

/* If your “Selected…” message is a classic Woo notice inside, strip its styling */
.wc-block-components-notice-banner .woocommerce-message,
.wc-block-components-notice-banner .woocommerce-info{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Classic Woo fallback (outside blocks) */
.woocommerce-message,
.woocommerce-info{
  background:#fff !important;
  border:1px solid #111 !important;
  color:#111 !important;
  box-shadow:none !important;
  outline:none !important;
  border-radius:14px !important;
}

/* NKEETA — Notices: kill inner pill + force icons monochrome */
.wc-block-components-notice-banner{
  background:#fff !important;
  border:1px solid #111 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Remove the weird inner “pill” + any nested backgrounds/borders */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content *{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Keep text clean + aligned */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{
  padding:0 !important;
  margin:0 !important;
}
.wc-block-components-notice-banner p{
  margin:0 !important;
}

/* Force icons to be neutral (works even if SVG has inline colours) */
.wc-block-components-notice-banner .wc-block-components-notice-banner__icon,
.wc-block-components-notice-banner .wc-block-components-notice-banner__icon *{
  background:transparent !important;
  box-shadow:none !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__icon svg{
  filter: grayscale(1) brightness(0) !important;
}

/* NKEETA — neutralise ALL checkout notices (Blocks + classic) */

/* Blocks notice shell */
.wc-block-components-notice-banner{
  background: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Kill the classic Woo “pill” that’s being injected inside the banner */
.wc-block-components-notice-banner .woocommerce-message,
.wc-block-components-notice-banner .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #111 !important;
}

/* Kill Woo’s coloured left bar / icon block + padding */
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before{
  display: none !important;
}

/* Neutralise the Blocks icons (green/blue) */
.wc-block-components-notice-banner__icon svg,
.wc-block-components-notice-banner__icon{
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* Make the text sit cleanly */
.wc-block-components-notice-banner__content{
  padding: 14px 16px !important;
}


/* NKEETA — finish notice cleanup (kill icon colours + inner pill) */

/* Kill the coloured icon circles */
.wc-block-components-notice-banner__icon{
  background: transparent !important;
  border: 1px solid #111 !important;
  border-radius: 999px !important;
}

/* Force all icons neutral (some use currentColor, some use fill) */
.wc-block-components-notice-banner__icon svg,
.wc-block-components-notice-banner__icon svg *{
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* Kill ANY inner “pill” backgrounds/borders inside the notice content */
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner__content *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep spacing tidy after nuking inner styles */
.wc-block-components-notice-banner__content{
  padding: 14px 16px !important;
}

/* Checkout line item: cleaner + premium price */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-amount{
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

.woocommerce-checkout-review-order-table td.product-name{
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

/* Claim yours button: big + bold */
.woocommerce-checkout #place_order{
  width: 100% !important;
  padding: 18px 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* NKEETA — checkout order line polish */
.woocommerce-checkout #order_review{
  max-width: 820px;
  margin: 0 auto;
}

/* Make the single line feel like a designer receipt */
.woocommerce-checkout #order_review .shop_table{
  border: 0 !important;
}
.woocommerce-checkout #order_review .shop_table td,
.woocommerce-checkout #order_review .shop_table th{
  border: 0 !important;
  padding: 14px 0 !important;
}

/* Product name left */
.woocommerce-checkout #order_review td.product-name{
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

/* Price right: heavier + tabular numbers = “pro” */
.woocommerce-checkout #order_review td.product-total,
.woocommerce-checkout #order_review .order-total .amount,
.woocommerce-checkout #order_review .amount{
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .02em !important;
}

body.woocommerce-checkout td.product-total .woocommerce-Price-amount{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
}

/* NKEETA — luxury price styling (smaller decimals) */
body.woocommerce-checkout td.product-total .woocommerce-Price-amount{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
}

/* NKEETA — smaller price decimals on checkout */
body.woocommerce-checkout .nkeeta-decimals{
  font-size: 12px !important;
  vertical-align: super !important;
  opacity: .7 !important;
  letter-spacing: .02em !important;
  margin-left: 1px !important;
}

/* NKEETA — price micro-typography (receipt style) */
body.woocommerce-checkout #order_review .woocommerce-Price-amount{
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .02em !important;
}

body.woocommerce-checkout #order_review .woocommerce-Price-currencySymbol{
  font-size: 14px !important;
  opacity: .85 !important;
  margin-right: 2px !important;
  position: relative !important;
  top: -1px !important;
}

body.woocommerce-checkout .nkeeta-decimals{
  font-size: 12px !important;
  vertical-align: super !important;
  opacity: .55 !important;
  letter-spacing: .01em !important;
}

body.woocommerce-checkout #order_review td.product-name{
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

body.woocommerce-checkout #order_review td.product-total{
  font-weight: 700 !important;
}

/* =========================
   NKEETA — Remove ONLY the "Selected..." pill (success notice)
   (Your global .woocommerce-message styling is creating that pill)
   ========================= */

body.woocommerce-checkout .wc-block-components-notice-banner.is-success{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border-radius: 0 !important;
}

body.woocommerce-checkout .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon{
  display: none !important;
}

body.woocommerce-checkout .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content{
  padding: 0 !important;
  margin: 0 !important;
}

/* 🔑 This is the actual pill */
body.woocommerce-checkout .wc-block-components-notice-banner.is-success .woocommerce-message{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove Woo icon spacing if it exists */
body.woocommerce-checkout .wc-block-components-notice-banner.is-success .woocommerce-message::before{
  display: none !important;
}

/* =========================================
   NKEETA — Remove the "Selection updated." banner (Blocks + classic)
   ========================================= */

/* Woo Blocks info notice (this is your bordered box) */
body.woocommerce-checkout .wc-block-components-notice-banner.is-info{
  display: none !important;
}

/* Fallbacks (just in case Woo outputs classic info notices too) */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message.woocommerce-info{
  display: none !important;
}

/* =========================================
   NKEETA — Desktop: Billing + Stripe side-by-side (final)
   Keeps order summary + express pay full width
   Mobile stays stacked
   ========================================= */

@media (min-width: 981px){

  /* Make the whole checkout a wrapping row layout */
  body.woocommerce-checkout form.checkout{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* Full-width blocks stay full width (top stack) */
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table,
  body.woocommerce-checkout .wc-stripe-payment-request-wrapper,
  body.woocommerce-checkout #wc-stripe-express-checkout-element,
  body.woocommerce-checkout .wc-stripe-express-checkout-button-separator,
  body.woocommerce-checkout #wc-stripe-express-checkout-button-separator{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Left: Billing */
  body.woocommerce-checkout #customer_details{
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 420px !important;
  }

  /* Right: Stripe payment box */
  body.woocommerce-checkout #payment{
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 420px !important;
    margin-top: 0 !important;
  }

  /* Make sure the Stripe element doesn’t overflow its column */
  body.woocommerce-checkout #payment .payment_box,
  body.woocommerce-checkout #payment .wc-stripe-elements-field,
  body.woocommerce-checkout #payment .StripeElement{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile/tablet stays exactly as your current stacked layout */
@media (max-width: 980px){
  body.woocommerce-checkout form.checkout{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
}

/* =========================================
   NKEETA — Checkout product image (small + refined)
   ========================================= */

.nkeeta-checkout-hero{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 14px !important;
}

.nkeeta-checkout-hero-img{
  width: auto !important;
  max-width: 260px !important;   /* ← controls overall size */
  max-height: 320px !important;  /* keeps it elegant, not dominant */
  height: auto !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  display: block !important;
}

/* =========================================
   NKEETA — Reposition checkout image only
   (no size or style changes)
   ========================================= */

body.woocommerce-checkout .nkeeta-checkout-hero{
  margin-left: clamp(16px, 4vw, 32px) !important; /* matches header/subtitle edge */
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  justify-content: flex-start !important;
}

/* =========================================
   NKEETA — Put order details/price to the RIGHT of the image
   (works even when Woo blocks aren't grouped)
   ========================================= */

/* Float the image left so the next block wraps alongside */
body.woocommerce-checkout .nkeeta-checkout-hero{
  float: left !important;
  margin-right: 22px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Allow the order line block to sit beside it (don't clear floats) */
body.woocommerce-checkout #order_review{
  margin-top: 18px !important; /* aligns vertically with image */
  clear: none !important;
}

/* Make sure ONLY the top cluster wraps, then stop the float affecting the rest */
body.woocommerce-checkout #order_review::after{
  content: "" !important;
  display: block !important;
  clear: both !important;
}


/* =========================================
   NKEETA — Checkout hero row (image + details + price)
   ========================================= */

body.woocommerce-checkout .nkeeta-hero-row{
  display:flex;
  align-items:center;
  gap:24px;
  margin: 6px 0 10px clamp(16px, 4vw, 32px);
}

body.woocommerce-checkout .nkeeta-hero-imgwrap{
  margin: 0;
}

body.woocommerce-checkout .nkeeta-hero-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.woocommerce-checkout .nkeeta-hero-name{
  font-weight: 600;
  letter-spacing: .01em;
}

body.woocommerce-checkout .nkeeta-hero-attrs{
  opacity: .75;
  font-size: 14px;
}

body.woocommerce-checkout .nkeeta-hero-price{
  font-weight: 700;
  letter-spacing: .02em;
}

/* Kill the massive dead space above/below image */
body.woocommerce-checkout .nkeeta-checkout-subtitle{
  margin-bottom: 6px !important;
}

/* Optional: hide the old “order line” table since hero shows it */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  margin-top: 0 !important;
}

/* Hide only the product row display (we already show it in hero) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  display: none !important;
}

/* =========================================
   NKEETA — kill gap ABOVE checkout hero
   ========================================= */

/* Remove top margin from the block Woo outputs before our hero */
body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-checkout .woocommerce-checkout-review-order{
  margin-top: 0 !important;
}

/* Pull hero up slightly into place */
body.woocommerce-checkout .nkeeta-hero-row{
  margin-top: -60px !important;
}

/* =========================================
   NKEETA — Shipping promise (CSS-only, guaranteed placement)
   Appears directly UNDER the express pay buttons
   ========================================= */

/* Prefer the main express element if present */
body.woocommerce-checkout #wc-stripe-express-checkout-element::after{
  content: "Secure checkout · UK delivery included";
  display: block;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .75;
  margin: 10px 0 6px;
}

/* Fallback if Stripe renders only the wrapper */
body.woocommerce-checkout .wc-stripe-payment-request-wrapper::after{
  content: "Secure checkout · UK delivery included";
  display: block;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .75;
  margin: 10px 0 6px;
}

/* =========================================
   NKEETA — Shipping promise FINAL (Montserrat + no ghosts)
   ========================================= */

/* 1) Kill any old JS-inserted promise line if it still exists anywhere */
body.woocommerce-checkout .nkeeta-shipping-promise{
  display: none !important;
}

/* 2) Prevent the fallback from ever rendering (stops “behind image” issues) */
body.woocommerce-checkout .wc-stripe-payment-request-wrapper::after{
  content: none !important;
  display: none !important;
}

/* 3) Render the promise ONLY under the express-pay element */
body.woocommerce-checkout #wc-stripe-express-checkout-element::after{
  content: "Secure checkout · UK delivery included";
  display: block;
  text-align: center;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .75;
  margin: 10px 0 6px;
}

.nkeeta-sizeguide .size-guide{
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 14px;
  border-radius: 999px; /* pill shape */
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
  cursor: pointer;
}

.nkeeta-sizeguide .size-guide:hover{
  border-color: rgba(0,0,0,.35);
  color: rgba(0,0,0,.9);
}