/*
 * WC CRO Booster — Frontend Stylesheet
 * All colour values reference CSS custom properties so they are fully
 * overridable from the plugin's admin settings page.
 */

/* ============================================================
   DESIGN TOKENS (defaults — overridden by inline :root block)
   ============================================================ */
:root {
  --cro-primary:        #8B3A3A;
  --cro-primary-dark:   #6B2C2C;
  --cro-secondary:      #1A1A2E;
  --cro-accent:         #FFD700;
  --cro-success:        #16A34A;
  --cro-danger:         #DC2626;
  --cro-trust:          #2563EB;
  --cro-text:           #111827;
  --cro-muted:          #6B7280;
  --cro-border:         #E5E7EB;
  --cro-bg-alt:         #F9FAFB;
  --cro-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --cro-shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --cro-shadow-lg:      0 8px 32px rgba(0,0,0,.16);
  --cro-radius:         8px;
  --cro-radius-pill:    999px;
  --cro-transition:     0.22s ease;

  /* Per-feature overridable tokens */
  --cro-ann-bg:         var(--cro-secondary);
  --cro-ann-color:      #ffffff;
  --cro-ts-bg:          var(--cro-bg-alt);
  --cro-ts-color:       var(--cro-text);
  --cro-ts-icon-color:  var(--cro-trust);
  --cro-ship-color:     var(--cro-trust);
  --cro-urg-bg:         #FFFBEB;

  /* Delivery estimate */
  --cro-delivery-color: #2E7D52;
  --cro-delivery-bg:    #F0FAF4;

  /* Product trust block */
  --cro-pp-trust-icon-color: var(--cro-trust);
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.cro-bar {
  background: var(--cro-ann-bg);
  color: var(--cro-ann-color);
  text-align: center;
  padding: 9px 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  position: relative;
  z-index: 9999;
}
.cro-bar a { color: var(--cro-accent); text-decoration: underline; }
.cro-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cro-bar__countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.12);
  border-radius: var(--cro-radius-pill);
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.cro-bar__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color var(--cro-transition);
}
.cro-bar__close:hover { color: #fff; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.cro-trust-strip {
  background: var(--cro-ts-bg);
  border-bottom: 1px solid var(--cro-border);
  padding: 12px 0;
}
.cro-trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cro-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cro-ts-color);
  white-space: nowrap;
}
.cro-trust-strip__item svg { color: var(--cro-ts-icon-color); flex-shrink: 0; }

/* ============================================================
   FREE SHIPPING PROGRESS BAR (Mini Cart)
   ============================================================ */
.cro-shipping-progress {
  padding: 14px 16px;
  background: #EFF6FF;
  border-radius: var(--cro-radius);
  margin: 0 0 12px;
}
.cro-shipping-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cro-trust);
  margin-bottom: 8px;
}
.cro-shipping-progress__label strong { color: var(--cro-secondary); }
.cro-shipping-progress__track {
  background: #BFDBFE;
  border-radius: var(--cro-radius-pill);
  height: 7px;
  overflow: hidden;
}
.cro-shipping-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cro-ship-color), #1D4ED8);
  border-radius: var(--cro-radius-pill);
  transition: width .6s ease;
}
.cro-shipping-progress--done { background: #F0FDF4; }
.cro-shipping-progress--done .cro-shipping-progress__label { color: var(--cro-success); }
.cro-shipping-progress--done .cro-shipping-progress__fill { background: linear-gradient(90deg, var(--cro-success), #15803D); }

/* ============================================================
   PRODUCT CARD ENHANCEMENTS
   ============================================================ */
.product-small.col .box {
  transition: box-shadow var(--cro-transition), transform var(--cro-transition);
  border-radius: var(--cro-radius);
  overflow: hidden;
}
.product-small.col:hover .box {
  box-shadow: var(--cro-shadow-lg);
  transform: translateY(-3px);
}

/* Sale badge */
.product-small .onsale,
span.onsale {
  background: var(--cro-danger) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 4px 10px !important;
  line-height: 1.4 !important;
}

/* Star ratings */
.star-rating span::before,
.woocommerce-product-rating .star-rating span::before { color: var(--cro-accent) !important; }

/* Sale price on cards */
.product-small .price ins .amount,
.woocommerce ul.products li.product .price ins .amount {
  color: var(--cro-primary) !important;
  font-weight: 800;
}

/* Add-to-cart button on cards */
.product-small .button.add_to_cart_button,
.woocommerce ul.products li.product a.button {
  background: var(--cro-secondary) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-weight: 700 !important;
  transition: background var(--cro-transition) !important;
}
.product-small .button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--cro-primary) !important;
  color: #fff !important;
}

/* Live viewer badge on product cards */
.cro-card-viewers {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--cro-muted);
  padding: 6px 12px 8px;
}
.cro-card-viewers__dot {
  width: 7px;
  height: 7px;
  background: var(--cro-success);
  border-radius: 50%;
  animation: cro-blink 1.4s infinite;
  flex-shrink: 0;
}
@keyframes cro-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* ============================================================
   SINGLE PRODUCT — URGENCY COUNTDOWN
   ============================================================ */
.cro-urgency {
  background: var(--cro-urg-bg);
  border: 1px solid #FCD34D;
  border-radius: var(--cro-radius);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.cro-urgency__text { font-size: 13.5px; font-weight: 600; color: #92400E; flex: 1; }
.cro-urgency__clock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.cro-cd-unit {
  background: var(--cro-secondary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  width: 34px;
  text-align: center;
  padding: 4px 0;
  border-radius: 4px;
}
.cro-cd-sep { font-weight: 800; color: #B45309; margin: 0 1px; }

/* ============================================================
   SINGLE PRODUCT — STOCK SCARCITY
   ============================================================ */
.cro-stock { margin-bottom: 14px; }
.cro-stock__header {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 5px;
}
.cro-stock__label { color: var(--cro-danger); }
.cro-stock__sold  { color: var(--cro-muted); font-weight: 500; }
.cro-stock__bar {
  background: #FEE2E2;
  border-radius: var(--cro-radius-pill);
  height: 8px;
  overflow: hidden;
}
.cro-stock__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cro-danger), var(--cro-primary));
  border-radius: var(--cro-radius-pill);
  transition: width 1s ease;
}

/* ============================================================
   SINGLE PRODUCT — LIVE VIEWERS
   ============================================================ */
.cro-viewers {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cro-muted);
  margin: 0 0 12px;
}
.cro-viewers__dot {
  width: 8px;
  height: 8px;
  background: var(--cro-success);
  border-radius: 50%;
  animation: cro-blink 1.4s infinite;
  flex-shrink: 0;
}

/* ============================================================
   SINGLE PRODUCT — ADD-TO-CART BUTTON
   ============================================================ */
.single_add_to_cart_button.button,
button.single_add_to_cart_button {
  background: var(--cro-primary) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 36px !important;
  letter-spacing: .2px;
  width: 100% !important;
  box-shadow: 0 4px 18px rgba(139,58,58,.4) !important;
  border: none !important;
  transition: background var(--cro-transition), box-shadow var(--cro-transition), transform var(--cro-transition) !important;
}
.single_add_to_cart_button.button:hover,
button.single_add_to_cart_button:hover {
  background: var(--cro-primary-dark) !important;
  box-shadow: 0 6px 24px rgba(139,58,58,.5) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* Quantity + Add-to-Cart side-by-side layout */
form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
form.cart .quantity {
  flex-shrink: 0;
}
form.cart .single_add_to_cart_button.button,
form.cart button.single_add_to_cart_button {
  width: auto !important;
  flex: 1;
  min-width: 160px;
}

/* ============================================================
   PRODUCT PAGE — TRUST BLOCK (below ATC)
   ============================================================ */
.cro-product-trust {
  background: var(--cro-bg-alt);
  border: 1px solid var(--cro-border);
  border-radius: var(--cro-radius);
  padding: 14px 16px;
  margin-top: 16px;
}
.cro-product-trust__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 12px;
}
.cro-product-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cro-text);
}
.cro-product-trust__item svg { color: var(--cro-pp-trust-icon-color); }
.cro-product-trust__divider {
  border: none;
  border-top: 1px solid var(--cro-border);
  margin: 10px 0;
}
.cro-product-trust__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cro-product-trust__guarantee svg { color: var(--cro-success); flex-shrink: 0; margin-top: 1px; }
.cro-product-trust__guarantee-text { font-size: 12.5px; line-height: 1.5; color: var(--cro-muted); }
.cro-product-trust__guarantee-text strong { color: var(--cro-success); display: block; margin-bottom: 1px; }
.cro-payment-icons { margin-top: 12px; text-align: center; }
.cro-payment-icons__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cro-muted);
  margin: 0 0 10px;
}
.cro-payment-icons__label svg { color: var(--cro-trust); flex-shrink: 0; }
.cro-payment-icons__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  .cro-payment-icons__row {
    gap: 6px;
  }
  .cro-payment-icons__row svg {
    height: 27px !important;
    width: auto !important;
    flex-shrink: 0;
  }
}

/* ============================================================
   PRODUCT PAGE — CANCELLATION NOTICE
   ============================================================ */
.cro-cancel-notice {
  font-size: 13px;
  color: var(--cro-muted);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
}
.cro-cancel-notice strong { color: var(--cro-text); }

/* ============================================================
   PRODUCT PAGE — BUY MORE SAVE MORE
   ============================================================ */
.cro-bmsm {
  margin-top: 16px;
}
.cro-bmsm__heading {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 8px;
  color: var(--cro-text);
}
.cro-bmsm__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  border: 2px solid #D1D5DB;
  border-radius: var(--cro-radius);
  overflow: hidden;
}
.cro-bmsm__table thead tr {
  background: #F3F4F6;
}
.cro-bmsm__table th {
  padding: 11px 16px;
  text-align: center;
  font-weight: 700;
  color: var(--cro-text);
  border-bottom: 2px solid #D1D5DB;
  border-right: 2px solid #D1D5DB;
}
.cro-bmsm__table th:last-child { border-right: none; }
.cro-bmsm__table td {
  padding: 11px 16px;
  text-align: center;
  color: var(--cro-text);
  border-bottom: 2px solid #D1D5DB;
  border-right: 2px solid #D1D5DB;
}
.cro-bmsm__table td:last-child { border-right: none; }
.cro-bmsm__table tbody tr:last-child td { border-bottom: none; }
.cro-bmsm__table tbody tr:nth-child(odd)  { background: #fff; }
.cro-bmsm__table tbody tr:nth-child(even) { background: #F9FAFB; }

/* ============================================================
   STICKY ADD-TO-CART
   Flatsome built-in enhanced + custom fallback bar
   ============================================================ */

/* Flatsome sticky ATC */
.sticky-atc-bar {
  background: #fff !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
  border-top: 1px solid var(--cro-border) !important;
}
.sticky-atc-bar .button {
  background: var(--cro-primary) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-weight: 800 !important;
}
.sticky-atc-bar .button:hover { background: var(--cro-primary-dark) !important; }

/* Custom sticky ATC (non-Flatsome) */
.cro-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  border-top: 1px solid var(--cro-border);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cro-sticky-atc.is-visible { transform: translateY(0); }
.cro-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.cro-sticky-atc__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--cro-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.cro-sticky-atc__btn {
  background: var(--cro-primary) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-weight: 800 !important;
  padding: 12px 28px !important;
  white-space: nowrap;
  border: none !important;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cro-transition) !important;
}
.cro-sticky-atc__btn:hover { background: var(--cro-primary-dark) !important; color: #fff !important; }

/* ============================================================
   CHECKOUT — TRUST BLOCK
   ============================================================ */
.cro-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 0;
  margin-bottom: 14px;
}
.cro-checkout-trust__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cro-muted);
}
.cro-checkout-trust__item svg { color: var(--cro-success); }

/* Place order button */
#place_order {
  background: var(--cro-primary) !important;
  border-radius: var(--cro-radius-pill) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 18px 32px !important;
  width: 100%;
  box-shadow: 0 4px 20px rgba(255,107,53,.4) !important;
  border: none !important;
  transition: background var(--cro-transition), box-shadow var(--cro-transition) !important;
}
#place_order:hover {
  background: var(--cro-primary-dark) !important;
  box-shadow: 0 6px 28px rgba(255,107,53,.5) !important;
}

/* ============================================================
   CART — SHIPPING NUDGE
   ============================================================ */
.cro-cart-shipping-nudge {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--cro-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.cro-cart-shipping-nudge--done {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.cro-cart-shipping-nudge__text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cro-trust);
  margin-bottom: 10px;
}
.cro-cart-shipping-nudge--done .cro-cart-shipping-nudge__text { color: var(--cro-success); margin-bottom: 0; }
.cro-cart-shipping-nudge__text strong { color: var(--cro-secondary); }
.cro-cart-shipping-nudge__track {
  background: #DBEAFE;
  border-radius: var(--cro-radius-pill);
  height: 8px;
  overflow: hidden;
}
.cro-cart-shipping-nudge__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cro-ship-color), #1D4ED8);
  border-radius: var(--cro-radius-pill);
  transition: width .6s ease;
}

/* ============================================================
   SOCIAL PROOF POPUP
   ============================================================ */
.cro-popup {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 99999;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--cro-shadow-lg);
  padding: 14px 36px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  border-left: 4px solid var(--cro-success);
  animation: cro-slide-in .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cro-slide-in {
  from { transform: translateX(-115%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.cro-popup__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cro-bg-alt);
}
.cro-popup__body  { flex: 1; min-width: 0; }
.cro-popup__text  { font-size: 12.5px; line-height: 1.45; color: var(--cro-text); }
.cro-popup__text strong { font-weight: 700; }
.cro-popup__time  { font-size: 11px; color: var(--cro-muted); margin-top: 3px; }
.cro-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--cro-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* ============================================================
   EXIT-INTENT MODAL
   ============================================================ */
.cro-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cro-exit-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: var(--cro-shadow-lg);
}
.cro-exit-modal__banner {
  background: linear-gradient(135deg, var(--cro-primary), var(--cro-primary-dark));
  color: #fff;
  text-align: center;
  padding: 28px 24px 20px;
}
.cro-exit-modal__emoji   { font-size: 40px; margin-bottom: 8px; }
.cro-exit-modal__heading { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.cro-exit-modal__sub     { font-size: 14px; opacity: .9; margin: 0; }
.cro-exit-modal__body    { padding: 24px; text-align: center; }
.cro-exit-modal__coupon {
  background: var(--cro-bg-alt);
  border: 2px dashed var(--cro-border);
  border-radius: var(--cro-radius);
  padding: 12px 20px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--cro-primary);
  margin: 0 0 8px;
  cursor: pointer;
  transition: background var(--cro-transition);
}
.cro-exit-modal__coupon:hover { background: #FFF7ED; }
.cro-exit-modal__copy-hint { font-size: 12px; color: var(--cro-muted); margin: 0 0 20px; }
.cro-exit-modal__cta {
  display: block;
  width: 100%;
  background: var(--cro-primary);
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  padding: 14px;
  border-radius: var(--cro-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cro-transition);
  box-sizing: border-box;
}
.cro-exit-modal__cta:hover { background: var(--cro-primary-dark); color: #fff !important; }
.cro-exit-modal__dismiss {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cro-muted);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  width: 100%;
  text-align: center;
}
.cro-exit-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ============================================================
   WOOCOMMERCE GENERAL OVERRIDES
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: var(--cro-radius-pill) !important;
  font-weight: 700 !important;
  transition: background var(--cro-transition), box-shadow var(--cro-transition) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--cro-primary) !important;
  color: #fff !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--cro-primary-dark) !important;
  color: #fff !important;
}

/* Checkout proceed button in cart */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--cro-primary) !important;
  color: #fff !important;
  border-radius: var(--cro-radius-pill) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 32px !important;
  box-shadow: 0 4px 18px rgba(255,107,53,.35) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--cro-primary-dark) !important;
}

/* Price styling */
.woocommerce .price ins,
.woocommerce .price ins .amount { color: var(--cro-primary) !important; font-weight: 800; }
.woocommerce .price del          { color: var(--cro-muted) !important; }

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a    { color: var(--cro-primary) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active       { border-color: var(--cro-primary) !important; }

/* WC notice colours */
.woocommerce-message { border-top-color: var(--cro-success) !important; }
.woocommerce-error   { border-top-color: var(--cro-danger)  !important; }

/* ============================================================
   HEADER ENHANCEMENTS
   ============================================================ */
#header.is-stuck { box-shadow: var(--cro-shadow-md) !important; }
.cart-icon-count  { background: var(--cro-primary) !important; color: #fff !important; }

/* ============================================================
   ESTIMATED DELIVERY DATE  (Etsy-style)
   ============================================================ */
.cro-delivery {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--cro-delivery-bg);
  border: 1.5px solid color-mix(in srgb, var(--cro-delivery-color) 30%, transparent);
  border-radius: var(--cro-radius);
  padding: 14px 16px;
  margin: 14px 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Fallback border for browsers without color-mix */
@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
  .cro-delivery { border-color: #B7DFC8; }
}

.cro-delivery__icon {
  flex-shrink: 0;
  color: var(--cro-delivery-color);
  margin-top: 2px;
}

.cro-delivery__body {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cro-delivery__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--cro-text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.cro-delivery__text strong {
  font-weight: 700;
  color: var(--cro-text);
}

.cro-delivery__sep {
  font-weight: 400;
  color: var(--cro-muted);
  margin: 0 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media only screen and (max-width: 48em) {
  .cro-bar       { padding: 8px 36px; font-size: 12px; }
  .cro-trust-strip__list { gap: 6px 16px; }
  .cro-trust-strip__item { font-size: 11.5px; }
  .cro-popup     { bottom: 70px; left: 12px; max-width: 270px; }
  .cro-urgency   { flex-direction: column; align-items: flex-start; }
  .cro-exit-modal__heading { font-size: 19px; }
  .cro-sticky-atc__title  { display: none; }
}