/*
Theme Name: Diamond Vow
Theme URI: https://diamondvow.com
Author: Diamond Vow
Description: Custom WooCommerce theme for Diamond Vow lab-grown diamond jewelry. ACF-powered, no page builder.
Version: 1.9.94
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: diamond-vow

A Love Vow, A Forever Diamond.
*/

/* ── EXACT CSS from HTML prototypes ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark-soft:#2D3748;
  --blue-pale:var(--bg-alt,#F7F8FA);--blue-faint:var(--bg-alt,#F7F8FA);
  --white:#FFFFFF;
}
html{overflow-x:clip}
body{font-family:'Outfit',sans-serif;color:var(--text);background:var(--bg);overflow-x:clip;width:100%;max-width:100vw}
a{text-decoration:none;color:inherit}
button{font-family:'Outfit',sans-serif;cursor:pointer}

/* ── HEADER ── */
.promo-bar{background:var(--dark-deep);color:#fff;text-align:center;padding:9px 16px;font-size:11px;letter-spacing:3px;font-weight:500}
.main-nav{max-width:1200px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.logo-text{font-family:'Libre Baskerville',serif;font-size:22px;font-weight:700;color:var(--blue);letter-spacing:3px;line-height:1;text-align:center}
.logo-sub{font-size:9px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;margin-top:2px;text-align:center}
.main-nav>a{display:flex;flex-direction:column;margin-bottom:-11px}
.nav-links{display:flex;gap:36px;font-size:13px;font-weight:500;letter-spacing:1.2px}
.nav-links a,.nav-links span{cursor:pointer;transition:color .2s;color:var(--text);text-decoration:none}
.nav-links a:hover,.nav-links span:hover{color:var(--blue)}
.nav-links a.active,.nav-links span.active{color:var(--blue)}
.nav-icons{display:flex;gap:20px;align-items:center}
@media(min-width:1025px){
  .nav-icons>.dv-user-dropdown,
  .nav-icons>.nav-icon-user{order:99!important}
  .nav-icons>.dv-user-dropdown{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
  .nav-icons>.dv-user-dropdown .nav-icon-user,
  .nav-icons>.nav-icon-user{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
  .nav-icons>.dv-user-dropdown .nav-icon-user svg,
  .nav-icons>.nav-icon-user svg{display:block;width:20px;height:20px;overflow:visible;transform:translateY(-1px)}
}
.nav-icon-link{display:flex;align-items:center;justify-content:center;color:var(--dark);text-decoration:none;transition:opacity .2s;width:20px;height:20px;flex-shrink:0}
.nav-icon-link:hover{opacity:.6}
.nav-icon-link svg{display:block}
.cart-badge{position:absolute;top:-5px;right:-9px;background:var(--dark);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s}
/* For inner pages: sticky header instead of fixed */
.page-template header,.single header,.archive header,.blog header{position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
main{overflow-x:clip;max-width:100vw}

/* ── fade-in on scroll ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* ── SECTION HELPERS ── */
.section-label{font-size:12px;letter-spacing:5px;color:var(--blue);text-transform:uppercase;margin-bottom:12px;font-weight:600}
.section-title{font-family:'Libre Baskerville',serif;font-size:42px;font-weight:400;color:var(--dark);line-height:1.25}
.section-pad{padding:100px 28px}
.container{max-width:1200px;margin:0 auto}

/* ── FOOTER ── */
footer{background:var(--dark-deep);padding:48px 28px 28px;color:rgba(255,255,255,.55)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1200px;margin-left:auto;margin-right:auto}
.footer-brand-area{text-align:center}
.footer-brand{font-family:'Libre Baskerville',serif;font-size:22px;font-weight:700;color:#fff;letter-spacing:2px;margin-bottom:4px}
.footer-brand-sub{font-size:10px;letter-spacing:4px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:16px}
.footer-desc{font-size:14px;line-height:1.8;max-width:320px;margin:0 auto;color:rgba(255,255,255,.55)}
.footer-cols{display:contents}
.footer-col-title{font-size:12px;letter-spacing:2.5px;color:#fff;text-transform:uppercase;font-weight:600;margin-bottom:20px}
.footer-link{font-size:14px;margin-bottom:12px;cursor:pointer;transition:color .2s;display:block;color:rgba(255,255,255,.55);text-decoration:none}
.footer-link:hover{color:#fff}
.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.06);padding-top:24px;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-bottom::before{display:none}
.footer-copy{font-size:11px;color:rgba(255,255,255,.35)}
.footer-legal{display:flex;align-items:center;gap:6px;font-size:11px}
.footer-legal a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:rgba(255,255,255,.7)}
.footer-legal-sep{color:rgba(255,255,255,.15)}
.footer-payments{display:flex;gap:12px}
.footer-pay{font-size:10px;color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);padding:4px 10px}

/* ── Buttons ── */
.btn-primary{font-size:13px;letter-spacing:1.2px;padding:20px 44px;background:var(--btn-pri-bg,var(--blue));color:var(--btn-pri-text,#fff);border:none;cursor:pointer;font-weight:600;text-transform:uppercase;border-radius:var(--btn-pri-radius,6px);transition:all .3s;font-family:'Outfit',sans-serif;display:inline-block;text-decoration:none;min-width:240px;text-align:center}
.btn-primary:hover{background:var(--btn-pri-hov,var(--blue-hov));transform:translateY(-2px);box-shadow:0 8px 28px rgba(79,163,214,.25)}
.btn-secondary{font-size:13px;letter-spacing:1.2px;padding:20px 44px;background:var(--btn-sec-bg,transparent);color:var(--btn-sec-text,var(--dark));border:1.5px solid var(--btn-sec-border,var(--border));cursor:pointer;font-weight:500;text-transform:uppercase;border-radius:var(--btn-sec-radius,6px);transition:all .3s;font-family:'Outfit',sans-serif;display:inline-block;text-decoration:none;min-width:240px;text-align:center}
.btn-secondary:hover{border-color:var(--blue)}

/* ── PAGE HERO (shared by Contact/FAQ/Blog) ── */
.page-hero{background:linear-gradient(180deg,var(--bg-alt,#F7F8FA) 0%,var(--bg,#fff) 100%);padding:80px 28px 48px;text-align:center}
.page-hero-label{font-size:11px;letter-spacing:5px;color:var(--blue);text-transform:uppercase;font-weight:600;margin-bottom:16px}
.page-hero h1{font-family:'Libre Baskerville',serif;font-size:40px;font-weight:400;color:var(--dark);margin-bottom:12px}
.page-hero p{font-size:16px;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.8}

/* ── MOBILE GLOBAL ── */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}
  .nav-icon-user{display:none}
  .main-nav{padding:12px 16px}
  .nav-icons{gap:18px}
  .nav-icon-link{width:20px;height:20px;flex-shrink:0}
  .hamburger{flex-shrink:0}
  .logo-text{font-size:clamp(14px,4.8vw,18px);letter-spacing:clamp(1.5px,0.5vw,3px)}
  .promo-bar{font-size:10px;letter-spacing:2px;padding:7px 12px}
  .section-title{font-size:28px}
  .section-pad{padding:60px 16px}
  footer{padding:24px 20px 20px;margin-top:20px}
  .footer-grid{display:flex;flex-direction:column;align-items:center;gap:0}
  .footer-brand-area{width:100%;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
  .footer-brand-inner{max-width:300px;margin:0 auto;padding:0 16px;text-align:center}
  .footer-brand{font-size:16px;text-align:center}
  .footer-brand-sub{font-size:9px;margin-bottom:6px;text-align:center}
  .footer-desc{font-size:13px;line-height:1.6;max-width:260px;margin:0 auto 16px;text-align:center}
  .footer-cols{display:block;max-width:300px;margin:0 auto;padding:0 16px 0;border-bottom:none;margin-bottom:0;text-align:center}
  .footer-col{text-align:center}
  .footer-col:last-child{margin-top:20px}
  .footer-col-title{margin-bottom:8px;font-size:13px;letter-spacing:2px;opacity:.8}
  .footer-link{margin-bottom:4px;font-size:13px}
  .footer-bottom{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:0;width:100%;margin-top:16px}
  .footer-bottom::before{display:none}
  .footer-copy{font-size:10px}
  .footer-payments{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
  .footer-pay{font-size:9px;padding:2px 6px}
  .page-hero{padding:48px 16px 32px}
  .page-hero h1{font-size:28px}
}

/* Override WooCommerce disabled add-to-cart button */
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button:disabled,
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce-page .single_add_to_cart_button.disabled,
.woocommerce-page .single_add_to_cart_button:disabled {
  background-color: #1e3a6e !important;
  color: #fff !important;
  opacity: 0.75 !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE — Diamond Vow Shopify-style single-page checkout
   Scoped under .dv-checkout-page (body class) to avoid bleeding.
   All overrides target both our custom .dv-co-* markup AND the WC
   form fields rendered via woocommerce_form_field() (which we cannot
   change at the markup level — only style).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page-level: keep the brand bg, hide promo bar (cleaner checkout)
     Use multiple scopes — body class via filter + shell-presence fallback. ── */
.dv-checkout-page,
body:has(.dv-checkout-shell){background:var(--bg)}
.dv-checkout-page .promo-bar,
body:has(.dv-checkout-shell) .promo-bar{display:none}
.dv-checkout-page main,
body:has(.dv-checkout-shell) main{padding-bottom:0}

/* ── Shell + grid (left form / right summary) ── */
.dv-checkout-shell{max-width:1200px;margin:0 auto;padding:32px 28px 80px}
.dv-co-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
/* CRITICAL: grid items default to min-width:auto (= min-content). If any
   descendant (Stripe UPE iframe, a <fieldset>, a long URL, etc.) reports
   a min-content wider than the allocated column, the column WILL blow
   past its declared width and push the right column out of the viewport.
   Explicitly opt-out so columns honor their grid-track widths. */
.dv-co-grid > .dv-co-left,
.dv-co-grid > .dv-co-right,
.dv-co-left,
.dv-co-right{min-width:0}

/* ── Sections (left column) ── */
.dv-co-section{background:#fff;border:1px solid var(--border);border-radius:8px;padding:32px;margin-bottom:20px}
.dv-co-section:last-child{margin-bottom:0}
.dv-co-section-title{font-family:'Libre Baskerville',serif;font-size:20px;font-weight:400;color:var(--dark);margin:0 0 4px;line-height:1.6;padding-bottom:6px;overflow:visible}
.dv-co-section-title--spaced{margin-top:28px;padding-top:28px;padding-bottom:8px;border-top:1px solid var(--border)}
.dv-co-section-title--small{font-size:16px;margin-bottom:12px}
.dv-co-section-sub{font-size:13px;color:var(--muted);margin:0 0 20px}

/* ── Express checkout area (top of left column) ── */
.dv-co-express{padding:24px 32px}
.dv-co-express-target{min-height:0}
.dv-co-express-target:not(:empty){margin-bottom:14px}
.dv-co-express #wc-stripe-payment-request-button{margin:0 0 10px}
.dv-co-express #wc-stripe-express-checkout-element{margin:0 0 10px}
/* Hide Stripe's default position (we move them to top) */
.dv-co-payment #wc-stripe-payment-request-button-separator,
.dv-co-payment #wc-stripe-express-checkout-button-separator,
.dv-co-payment .wc-stripe-payment-request-button-separator{display:none!important}
/* OR divider — keep v400 horizontal width/margins; JS only adjusts vertical centering. */
.dv-co-or{display:flex!important;align-items:center;gap:14px;margin:18px 0 4px!important;padding:0!important;line-height:1;color:var(--muted);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600;transform:none;will-change:transform}
.dv-co-or::before,.dv-co-or::after{content:"";flex:1;height:1px;background:var(--border)}
.dv-co-or:empty,.dv-co-express:has(.dv-co-express-target:empty:only-child) .dv-co-or{display:none}

/* ── Field rows (Shopify-style 1/2/3 column) ── */
.dv-co-fields{display:block}
.dv-co-fields-row{display:grid;gap:14px;margin-bottom:14px}
.dv-co-fields-row--full{grid-template-columns:1fr}
.dv-co-fields-row--2col{grid-template-columns:1fr 1fr}
.dv-co-fields-row--3col{grid-template-columns:1.3fr 1fr 1fr}
.dv-co-fields-row:last-child{margin-bottom:0}

/* Reset the WC form-row internal margins/widths so our grid controls layout.
   IMPORTANT: WC writes inline style="" on .form-row for width — we override
   via a high-specificity selector + !important. Confirmed in v293-v307
   that this works as long as we're inside .dv-co-fields-row context. */
.dv-checkout-form .dv-co-fields-row .form-row{margin:0!important;padding:0!important;width:100%!important;float:none!important;clear:none!important;display:block}
.dv-checkout-form .dv-co-fields-row .form-row.form-row-first,
.dv-checkout-form .dv-co-fields-row .form-row.form-row-last,
.dv-checkout-form .dv-co-fields-row .form-row.form-row-wide{width:100%!important}

/* ── Floating-label inputs ── */
.dv-checkout-form .form-row,
.dv-checkout-form p.form-row{position:relative!important;display:block}
.dv-checkout-form .form-row label{position:absolute;left:14px;top:18px;font-size:14px;color:var(--muted);pointer-events:none;transition:all .18s cubic-bezier(.22,1,.36,1);background:#fff;padding:0 4px;font-weight:400;letter-spacing:0;z-index:1;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-checkout-form .form-row .required{color:var(--blue);text-decoration:none;margin-left:2px}
.dv-checkout-form .form-row .optional{color:var(--muted);font-weight:400;font-size:12px}
.dv-checkout-form .form-row.dv-co-filled label,
.dv-checkout-form .form-row:focus-within label,
/* Float the label the moment the input has ANY value — including values
   written by browser autofill (Chrome/Safari/Edge), even before JS gets a
   chance to toggle .dv-co-filled. This prevents Chrome's autofill preview
   text (shown when user hovers over an autofill suggestion) from
   overlapping with the inline label position. */
.dv-checkout-form .form-row:has(input.input-text:not(:placeholder-shown)) label,
.dv-checkout-form .form-row:has(textarea:not(:placeholder-shown)) label,
.dv-checkout-form .form-row:has(input:-webkit-autofill) label,
.dv-checkout-form .form-row:has(input:autofill) label{top:-8px;font-size:11px;color:var(--blue);letter-spacing:.4px}

/* Unhide labels that WC core marked as screen-reader-text (notably
   billing/shipping_address_2). The screen-reader-text class would normally
   clip the label to 1x1px off-screen, breaking our floating-label pattern
   which requires the label to be visually positioned above the input.
   Scoped to .dv-checkout-form so it doesn't affect legitimate a11y-only
   labels elsewhere. */
.dv-checkout-form .form-row label.screen-reader-text{
  position:absolute!important;
  width:auto!important;
  height:auto!important;
  clip:auto!important;
  clip-path:none!important;
  overflow:visible!important;
  margin:0!important;
}

.dv-checkout-form .form-row .input-text,
.dv-checkout-form .form-row textarea,
.dv-checkout-form .form-row select{width:100%!important;padding:18px 14px 12px;font-family:'Outfit',sans-serif;font-size:14px;color:var(--dark);background:#fff;border:1px solid var(--border);border-radius:6px;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;line-height:1.4;height:auto;min-height:54px;box-shadow:none}
/* Disable browser native :invalid red border — Chrome/Firefox auto-mark
   empty required fields red on page load, which looks like validation
   errors are showing before user has interacted. Only show red when WC
   adds .woocommerce-invalid via JS validation. */
.dv-checkout-form .form-row .input-text:invalid,
.dv-checkout-form .form-row select:invalid,
.dv-checkout-form .form-row textarea:invalid{border-color:var(--border);box-shadow:none}
/* Hide placeholder text — floating label is the visual cue, placeholder
   collides with it. Some WC plugins insert placeholder strings via
   markup we can't filter out; this is the visual nuke. */
.dv-checkout-form .form-row .input-text::placeholder,
.dv-checkout-form .form-row textarea::placeholder{color:transparent!important;opacity:0!important}
.dv-checkout-form .form-row .input-text::-webkit-input-placeholder,
.dv-checkout-form .form-row textarea::-webkit-input-placeholder{color:transparent!important;opacity:0!important}
.dv-checkout-form .form-row .input-text::-moz-placeholder,
.dv-checkout-form .form-row textarea::-moz-placeholder{color:transparent!important;opacity:0!important}
/* On focus only, show placeholder very faintly so users get a hint */
.dv-checkout-form .form-row .input-text:focus::placeholder,
.dv-checkout-form .form-row textarea:focus::placeholder{color:rgba(80,90,104,.45)!important;opacity:1!important}
.dv-checkout-form .form-row textarea{min-height:88px;padding-top:22px}
/* v52i: keep Order notes the original compact height; only align text like regular inputs. */
.dv-checkout-form #order_comments_field textarea#order_comments{min-height:54px!important;height:54px!important;padding:18px 14px 12px!important;line-height:1.4!important;resize:none!important;}
.dv-checkout-form .form-row .input-text:focus,
.dv-checkout-form .form-row textarea:focus,
.dv-checkout-form .form-row select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,110,.08)}
.dv-checkout-form .form-row.woocommerce-invalid .input-text,
.dv-checkout-form .form-row.woocommerce-invalid select{border-color:#D14343}
.dv-checkout-form .form-row.woocommerce-invalid label{color:#D14343}
.dv-checkout-form .form-row .woocommerce-input-wrapper{display:block;width:100%}

/* Field description (e.g. phone's "used only for order issues" note).
   WC core wraps the field description in a blue speech-bubble tooltip
   with an up arrow pseudo-element (::before) by default. Reset to a
   plain inline hint below the input, consistent with other sites'
   microcopy pattern. We override at both .form-row > .description AND
   .form-row > .woocommerce-input-wrapper > .description because WC
   may place it in either location depending on field type. */
.dv-checkout-form .form-row > .description,
.dv-checkout-form .form-row .woocommerce-input-wrapper .description,
.dv-checkout-form .form-row .woocommerce-input-wrapper + .description{
  display:block!important;
  position:static!important;
  /* Tight top margin: description "belongs" to the input above it.
     Extra bottom margin: visually separate from the next form-row so
     users don't mistake it for a label of the following field. */
  margin:4px 4px 14px!important;
  padding:0!important;
  font-size:11px!important;
  color:var(--muted)!important;
  line-height:1.5!important;
  font-family:'Outfit',sans-serif!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:left!important;
  width:auto!important;
  max-width:none!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  overflow:visible!important;
  z-index:auto!important;
}
/* Kill the tooltip arrow pseudo-elements (::before and ::after) */
.dv-checkout-form .form-row > .description::before,
.dv-checkout-form .form-row > .description::after,
.dv-checkout-form .form-row .woocommerce-input-wrapper .description::before,
.dv-checkout-form .form-row .woocommerce-input-wrapper .description::after{
  display:none!important;
  content:none!important;
  border:none!important;
}

/* ── Kill WooCommerce's default validated/success styles ──
   WC core CSS adds a green border + background tint to fields that have
   passed validation (class .woocommerce-validated). This clashes with
   Diamond Vow's calmer design language — in our form a filled field is
   just filled, no "green ✓" reward signal. Reset to identical resting
   appearance. Only invalid state still gets visual feedback (red). */
.dv-checkout-form .form-row.woocommerce-validated .input-text,
.dv-checkout-form .form-row.woocommerce-validated textarea,
.dv-checkout-form .form-row.woocommerce-validated select{
  border-color:var(--border)!important;
  background:#fff!important;
  box-shadow:none!important;
}
.dv-checkout-form .form-row.woocommerce-validated:focus-within .input-text,
.dv-checkout-form .form-row.woocommerce-validated:focus-within textarea,
.dv-checkout-form .form-row.woocommerce-validated:focus-within select{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(30,58,110,.08)!important;
}
.dv-checkout-form .form-row.woocommerce-validated label{color:var(--muted)}
.dv-checkout-form .form-row.woocommerce-validated.dv-co-filled label,
.dv-checkout-form .form-row.woocommerce-validated:focus-within label{color:var(--blue)}
/* Select2 validated state (country / state dropdown after valid selection) */
.dv-checkout-form .form-row.woocommerce-validated .select2-container--default .select2-selection--single{
  border-color:var(--border)!important;
  box-shadow:none!important;
}
.dv-checkout-form .form-row.woocommerce-validated:focus-within .select2-container--default .select2-selection--single,
.dv-checkout-form .form-row.woocommerce-validated .select2-container--default.select2-container--focus .select2-selection--single,
.dv-checkout-form .form-row.woocommerce-validated .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(30,58,110,.08)!important;
}

/* ── Chrome / Safari autofill visual override ──
   Browsers apply their own heavy-handed styles to :-webkit-autofill
   inputs — yellow/green background tint, colored borders. The only way
   to override the autofill background color is the -webkit-box-shadow
   inset hack (a ~100px inset shadow in our desired bg color literally
   paints over the autofill tint). We also pin text color and disable
   the browser's own border coloring. Matches the resting input style. */
.dv-checkout-form .form-row .input-text:-webkit-autofill,
.dv-checkout-form .form-row .input-text:-webkit-autofill:hover,
.dv-checkout-form .form-row .input-text:-webkit-autofill:focus,
.dv-checkout-form .form-row textarea:-webkit-autofill,
.dv-checkout-form .form-row textarea:-webkit-autofill:hover,
.dv-checkout-form .form-row textarea:-webkit-autofill:focus,
.dv-checkout-form .form-row select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:var(--dark)!important;
  caret-color:var(--dark);
  border-color:var(--border)!important;
  transition:background-color 5000s ease-in-out 0s;
}
.dv-checkout-form .form-row .input-text:-webkit-autofill:focus,
.dv-checkout-form .form-row textarea:-webkit-autofill:focus{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 1000px #fff inset, 0 0 0 3px rgba(30,58,110,.08)!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset, 0 0 0 3px rgba(30,58,110,.08)!important;
}

/* Select2 (country / state dropdowns rendered by WC) */
.dv-checkout-form .select2-container .select2-selection--single{height:54px;border:1px solid var(--border);border-radius:6px;padding:8px 14px;background:#fff;font-family:'Outfit',sans-serif}
.dv-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered{padding:14px 0 0;color:var(--dark);font-size:14px;line-height:1.4}
.dv-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:54px;right:8px}
/* Hide Select2's built-in "Select an option…" / "Choose a country…"
   placeholder text. With floating labels, this placeholder collides with
   the label ("State * Select an opti..." crunched together). Let the
   floating label be the only cue in the empty state. */
.dv-checkout-form .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:transparent!important;
  visibility:hidden!important;
}
.dv-checkout-form .select2-container--default.select2-container--focus .select2-selection--single,
.dv-checkout-form .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,110,.08)}
.dv-checkout-form .form-row.dv-co-filled .select2-selection__rendered{padding-top:14px}
.select2-dropdown{border-color:var(--border);font-family:'Outfit',sans-serif;border-radius:6px}
.select2-results__option{font-size:14px;padding:10px 14px}
.select2-results__option--highlighted{background:var(--blue)!important;color:#fff!important}

/* Checkboxes (Diamond Vow style) */
.dv-co-checkbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);cursor:pointer;line-height:1.5;margin:8px 0}
.dv-co-checkbox input[type="checkbox"]{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--blue);flex-shrink:0}
.dv-co-checkbox--newsletter{margin-top:14px;color:var(--muted)}
.dv-co-shipping-toggle{margin:24px 0 0;font-size:14px;color:var(--dark);font-weight:500}
.dv-co-shipping-address{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

/* ══════════════════════════════════════════════════════════════════════
   PAYMENT — Brilliant Earth-style compact list
   All payment methods grouped under ONE outer border, divided by hairlines.
   Active state: radio dot + subtle row tint, expanded content slides below
   without bulging the option row.
   ══════════════════════════════════════════════════════════════════════ */
.dv-co-payment .dv-co-section-title{margin-bottom:4px}
.dv-co-payment-block,
.dv-checkout-form #payment{margin-top:8px;background:transparent;border:none;padding:0}

/* The outer container — ONE border for the whole list */
.dv-checkout-form .wc_payment_methods,
.dv-checkout-form .payment_methods,
.dv-co-payment-methods{list-style:none;padding:0;margin:0 0 18px;display:block;background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden}

/* Each method = one row, hairline divider between rows, no individual border */
.dv-checkout-form .wc_payment_method,
.dv-checkout-form .payment_method{border:none;border-radius:0;background:transparent;padding:0;margin:0;list-style:none;border-bottom:1px solid var(--border);transition:none;position:relative}
.dv-checkout-form .wc_payment_method:last-child,
.dv-checkout-form .payment_method:last-child{border-bottom:none}

/* Hover/checked tint: only on the LABEL (the clickable row), not on the
   expanded payment_box below — otherwise the selected method's row balloons
   in visual weight. */
.dv-checkout-form .wc_payment_method > label,
.dv-checkout-form .payment_method > label{transition:background .15s}
.dv-checkout-form .wc_payment_method:hover > label,
.dv-checkout-form .payment_method:hover > label{background:#FAFBFC!important}
.dv-checkout-form .wc_payment_method:has(input:checked) > label,
.dv-checkout-form .payment_method:has(input:checked) > label{background:#F8FAFD!important}

/* The clickable row label — leaves left padding for the absolute-positioned radio */
.dv-checkout-form .wc_payment_method > label,
.dv-checkout-form .payment_method > label{display:flex!important;align-items:center;gap:14px;padding:18px 18px 18px 50px;cursor:pointer;font-size:15px;font-weight:500;color:var(--dark);width:100%;margin:0;line-height:1.3;position:static!important;background:transparent!important;letter-spacing:0!important;text-transform:none!important;min-height:60px;box-sizing:border-box}

/* Radio: absolute positioned at row's vertical center.
   IMPORTANT: WC outputs the <input type="radio"> as a SIBLING of <label>
   (not a child), so flex on label can't align it. We pin it to the row. */
.dv-checkout-form .wc_payment_method > input[type=radio],
.dv-checkout-form .payment_method > input[type=radio]{appearance:none;-webkit-appearance:none;margin:0!important;width:18px;height:18px;flex-shrink:0;position:absolute!important;left:18px;top:50%;transform:translateY(-50%);opacity:1!important;border:1.5px solid #B5BCC8;border-radius:50%;background:#fff;cursor:pointer;transition:all .15s;display:inline-block;z-index:2}
.dv-checkout-form .wc_payment_method > input[type=radio]:checked,
.dv-checkout-form .payment_method > input[type=radio]:checked{border-color:var(--blue);background:radial-gradient(circle,var(--blue) 0 5px,#fff 6px 100%)}
.dv-checkout-form .wc_payment_method > input[type=radio]:focus-visible,
.dv-checkout-form .payment_method > input[type=radio]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* (selected-row label highlight is handled above) */

/* Right-side icon (card brand / PayPal logo) */
.dv-checkout-form .payment_method img,
.dv-checkout-form .wc_payment_method img{height:22px;width:auto;margin-left:auto;display:inline-block;border:none;box-shadow:none;background:transparent}

/* PayPal radio label — inject PayPal wordmark on the right side, matching
   the credit card icon placement on the Stripe row. The PayPal plugin
   doesn't add its own <img> to the label, so we render the wordmark as
   an inline SVG background on a ::after pseudo. */
.dv-checkout-form .payment_method_ppcp-gateway > label::after,
.dv-checkout-form .wc_payment_method_ppcp-gateway > label::after,
.dv-checkout-form .payment_method_paypal > label::after{
  content:"";
  display:inline-block;
  width:64px;
  height:18px;
  margin-left:auto;
  flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'><g font-family='-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Arial,sans-serif' font-weight='800' font-size='24' font-style='italic' letter-spacing='-1'><text x='0' y='23' fill='%23003087'>Pay</text><text x='47' y='23' fill='%23009cde'>Pal</text></g></svg>");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:contain;
}

/* Expanded content under the selected row — transparent, indented to align
   with label text (after the absolute-positioned radio) */
.dv-checkout-form .payment_box,
.dv-checkout-form .wc_payment_method .payment_box,
.dv-checkout-form .payment_method .payment_box{padding:0 18px 18px 50px!important;background:transparent!important;border:none!important;border-top:none!important;font-size:13px;color:var(--muted);line-height:1.55;margin:0!important}
.dv-checkout-form .payment_box p:last-child{margin-bottom:0}
.dv-checkout-form .payment_box::before,
.dv-checkout-form .payment_box:before{display:none!important}

/* PayPal description "Pay via PayPal." adds zero info — hide it.
   The button at the bottom changes to a PayPal logo when selected, which
   communicates the redirect clearly. */
.dv-checkout-form .payment_method_ppcp-gateway .payment_box,
.dv-checkout-form .payment_method_paypal .payment_box,
.dv-checkout-form .wc_payment_method_ppcp-gateway .payment_box{display:none!important}
/* Hide WC dev-mode test card notice on production-style pages.
   In test mode it's fine, but the gray block looks heavy. We tone it down. */
.dv-checkout-form .payment_box .woocommerce-info,
.dv-checkout-form .payment_box .test-mode-notice,
.dv-checkout-form .wc-stripe-test-mode-notice{font-size:12px;color:var(--muted);background:transparent!important;border:none!important;border-left:2px solid #FFB300!important;padding:6px 10px!important;margin:0 0 12px!important;border-radius:0!important;line-height:1.5}
.dv-checkout-form .payment_box .woocommerce-info::before{display:none!important}

/* Stripe Card Elements — compact horizontal layout when possible.
   By default Stripe Element wrappers stack each field vertically with their
   own gray label boxes. We strip that visual weight. */
.dv-checkout-form .wc-stripe-elements-field,
.dv-checkout-form .wc-stripe-iban-element-field,
.dv-checkout-form #stripe-card-element,
.dv-checkout-form #stripe-exp-element,
.dv-checkout-form #stripe-cvc-element,
.dv-checkout-form .wc-stripe-upe-element,
.dv-checkout-form #wc-stripe-upe-element{padding:12px 14px!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:6px!important;min-height:46px!important;box-shadow:none!important;margin-bottom:10px!important;transition:border-color .15s}
.dv-checkout-form .wc-stripe-elements-field.focused,
.dv-checkout-form .wc-stripe-elements-field.StripeElement--focus,
.dv-checkout-form .StripeElement--focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(30,58,110,.08)!important}

/* Stripe Card form: try to put Exp + CVC side-by-side */
.dv-checkout-form .form-row#stripe-exp{display:inline-block;width:48%!important;margin-right:4%!important;vertical-align:top}
.dv-checkout-form .form-row#stripe-cvc{display:inline-block;width:48%!important;margin-right:0!important;vertical-align:top}

/* Card field "labels" that Stripe outputs above each iframe — make them
   smaller and inline since the iframes themselves show clear placeholders */
.dv-checkout-form .payment_box label[for="stripe-card-element"],
.dv-checkout-form .payment_box label[for="stripe-exp-element"],
.dv-checkout-form .payment_box label[for="stripe-cvc-element"],
.dv-checkout-form .payment_box .form-row > label{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.3px;margin:0 0 5px;display:block;position:static}

/* Save card / save payment info checkbox */
.dv-checkout-form .payment_box .woocommerce-SavedPaymentMethods-saveNew,
.dv-checkout-form .payment_box .form-row.woocommerce-SavedPaymentMethods-saveNew label{display:flex!important;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:10px 0 0;cursor:pointer}
.dv-checkout-form .payment_box input[type=checkbox]{margin:0;accent-color:var(--blue);width:14px;height:14px;flex-shrink:0}

/* "Secure & encrypted" pill in section header */
.dv-co-section-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.dv-co-secure-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bg-alt,#F7F8FA);border-radius:20px;font-size:11px;font-weight:500;color:var(--dark);letter-spacing:.3px}
.dv-co-secure-pill svg{color:var(--muted)}

/* Privacy text below the methods list — make it tiny and unobtrusive */
.dv-checkout-form .woocommerce-privacy-policy-text{font-size:11px;color:var(--muted);margin:14px 0 0;line-height:1.55}
.dv-checkout-form .woocommerce-privacy-policy-text a{color:var(--blue);text-decoration:underline}

/* ── Hide the WC default cart-totals table inside #order_review.
   The visual order summary is in the right column (.dv-summary).
   We MUST keep this in DOM (Stripe UPE fragment-updates it on country/state
   changes), so display:none rather than removing it. ── */
.dv-checkout-form .shop_table.woocommerce-checkout-review-order-table,
.dv-checkout-form #order_review > .shop_table,
.dv-checkout-form .woocommerce-checkout-review-order-table{display:none!important}

/* ── Hide redundant payment widgets that PayPal/Stripe inject at form
   bottom. The buttons we want are inside .wc_payment_method labels;
   anything dangling at form end is duplicate (handoff v266: PayPal
   Smart Buttons render at woocommerce_review_order_after_submit by
   default and look like a second "checkout" button). ── */
.dv-checkout-form .ppc-button-wrapper:not(.payment_method_ppcp-gateway .ppc-button-wrapper),
.dv-checkout-form #ppc-button-paypal-container:not(.payment_method_ppcp-gateway #ppc-button-paypal-container),
.dv-checkout-form > .ppcp-button-container,
.dv-checkout-form .place-order > .ppcp-button-container,
.dv-checkout-form .place-order ~ .ppcp-button-container,
.dv-checkout-form .place-order + div[class*="paypal"]{display:none!important}

/* ── Hide the top-of-page "Have a coupon? Click here" toggle.
   We have a promo input in the right column instead.
   IMPORTANT: this notice renders OUTSIDE .dv-checkout-form (via the
   woocommerce_before_checkout_form hook, before the <form> tag), so the
   .dv-checkout-form scope doesn't reach it. Use body / shell scope. ── */
.dv-checkout-page .checkout_coupon,
.dv-checkout-page .woocommerce-form-coupon-toggle,
.dv-checkout-page .woocommerce-form-coupon,
.dv-checkout-page .woocommerce-form-login-toggle,
.dv-checkout-page .woocommerce-form-login,
body:has(.dv-checkout-shell) .checkout_coupon,
body:has(.dv-checkout-shell) .woocommerce-form-coupon-toggle,
body:has(.dv-checkout-shell) .woocommerce-form-coupon,
body:has(.dv-checkout-shell) .woocommerce-form-login-toggle,
body:has(.dv-checkout-shell) .woocommerce-form-login{display:none!important}

/* ══════════════════════════════════════════════════════════════════════
   PROTECTED CHECKOUT BLOCK — replaces the Payment section visually.
   The original WC #payment UL with radio options + Stripe UPE iframe is
   kept in DOM (fragments + lifecycle), but CSS-hidden. The user interacts
   with our pill switcher + hold-to-submit button; our JS syncs selections
   back into WC's invisible radios so the standard checkout submit works.
   ══════════════════════════════════════════════════════════════════════ */

/* Container: center-aligned, less padding than a regular section card */
.dv-co-checkout-block{
  text-align:center;
  padding:36px 32px 32px!important;
  /* Paint white card directly on this element. Don't rely on .dv-co-section
     inheritance — DevTools shows .dv-co-section rule exists in CSS but
     doesn't apply here (reason unknown). Set visual properties explicitly
     on the block itself. Use literal color value (not var(--border)) to
     rule out any CSS-variable resolution quirks. */
  background:#fff!important;
  border:1px solid #E5E7EB!important;
  border-radius:8px!important;
  margin-bottom:20px;
}

/* 🔒 PROTECTED CHECKOUT label at top */
.dv-co-protected-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Outfit',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.dv-co-protected-label svg{color:var(--muted);opacity:.85}

/* Big amount — serif, with dimmed decimal part */
.dv-co-amount-display{
  font-family:'Libre Baskerville',serif;
  font-size:48px;
  font-weight:400;
  color:var(--dark);
  line-height:1;
  margin-bottom:10px;
  letter-spacing:-.5px;
}
.dv-co-amount-currency{font-size:36px;vertical-align:10%;margin-right:2px;font-weight:400}
.dv-co-amount-whole{color:var(--dark)}
.dv-co-amount-decimal{color:var(--muted);opacity:.7}

/* Summary line (Solitaire ring · Engraving · Insured shipping) */
.dv-co-amount-summary{
  font-family:'Outfit',sans-serif;
  font-size:15px;
  color:var(--muted);
  margin-bottom:26px;
  letter-spacing:.1px;
}

/* ── Pill switcher (PayPal / Credit-Debit card / Affirm) ──
   v424d: keep the original checkout stable, add an actual Affirm wordmark,
   and make all three tabs feel aligned and evenly spaced without changing
   the surrounding layout. */
.dv-co-pill{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  width:100%;
  padding:5px;
  background:#F0F3F8;
  border:1px solid #E2E7EF;
  border-radius:999px;
  margin-bottom:28px;
  max-width:100%;
  position:relative;
  box-sizing:border-box;
}
.dv-co-pill-tab{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  border:none;
  background:#fff;
  border-radius:999px;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:var(--dark);
  cursor:pointer;
  transition:all .2s cubic-bezier(.22,1,.36,1);
  min-height:40px;
  position:relative;
  z-index:1;
  white-space:nowrap;
  min-width:0;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.03);
}
.dv-co-pill-tab:hover{color:var(--dark)}
.dv-co-pill-tab.is-active{
  background:#fff;
  color:var(--dark);
  /* v424h: all tabs stay lit, but the selected one gets a colored outer ring
     so users can still clearly tell which payment method is active. */
  box-shadow:0 0 0 2px #3C4D7D,0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
.dv-co-pill-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Shared alignment */
.dv-co-pill-tab > *{min-width:0}
.dv-co-pill-paypal,
.dv-co-pill-card-label,
.dv-co-pill-affirm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Card tab */
.dv-co-pill-card-icon{
  display:block;
  width:15px;
  height:11px;
  color:currentColor;
  flex:0 0 auto;
  position:relative;
  top:-.5px;
}
.dv-co-pill-tab:not(.is-active) .dv-co-pill-card-icon{color:inherit}
.dv-co-pill-card-label{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:inherit;
}

/* PayPal wordmark */
.dv-co-pill-paypal{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:14px;
  letter-spacing:-.4px;
  position:relative;
  top:-.5px;
}
.dv-co-pill-paypal-pay{color:#003087}
.dv-co-pill-paypal-pal{color:#009CDE}
.dv-co-pill-tab:not(.is-active) .dv-co-pill-paypal-pay,
.dv-co-pill-tab:not(.is-active) .dv-co-pill-paypal-pal{opacity:1}

/* Affirm wordmark logo */
.dv-co-pill-affirm-logo{
  display:block;
  width:58px;
  max-width:100%;
  height:auto;
  flex:0 0 auto;
  position:relative;
  top:-1px;
  filter:brightness(0) saturate(100%) invert(29%) sepia(87%) saturate(2926%) hue-rotate(232deg) brightness(100%) contrast(96%);
}
.dv-co-pill-tab:not(.is-active) .dv-co-pill-affirm-logo{opacity:1}

@media (min-width: 601px) and (max-width: 1024px){
  /* v424g: some tablet widths give the center Card tab too little room,
     causing its icon and label to collide. Make the center tab wider and
     slightly rebalance icon/text sizing only for tablet layouts. */
  .dv-co-pill{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.36fr) minmax(0,.92fr);
    gap:5px;
    padding:4px;
  }
  .dv-co-pill-tab{
    gap:5px;
    padding:9px 6px;
    min-height:39px;
  }
  .dv-co-pill-tab[data-dv-method="stripe"]{
    gap:4px;
    padding-left:6px;
    padding-right:6px;
  }
  .dv-co-pill-card-icon{
    width:13px;
    height:10px;
  }
  .dv-co-pill-card-label{
    font-size:12px;
    letter-spacing:-.02em;
  }
  .dv-co-pill-paypal{
    font-size:13px;
  }
  .dv-co-pill-affirm-logo{
    width:52px;
  }
}

@media (max-width: 600px){
  .dv-co-pill{
    /* v424f: keep the wider center Card tab on mobile, but restore a slightly
       larger card label and lift the Affirm logo a touch for better balance. */
    grid-template-columns:minmax(0,.9fr) minmax(0,1.34fr) minmax(0,.9fr);
    gap:3px;
    padding:3px;
  }
  .dv-co-pill-tab{
    gap:3px;
    padding:8px 4px;
    min-height:38px;
  }
  .dv-co-pill-paypal{
    font-size:12.5px;
    letter-spacing:-.3px;
  }
  .dv-co-pill-card-icon{
    width:11px;
    height:8px;
  }
  .dv-co-pill-card-label{
    font-size:9.8px;
    letter-spacing:-.025em;
  }
  .dv-co-pill-tab[data-dv-method="stripe"]{
    gap:3px;
    padding-left:4px;
    padding-right:4px;
  }
  .dv-co-pill-affirm-logo{
    width:48px;
    top:-1.5px;
  }
}

/* Affirm promo widget — only visible when Affirm pill is active.
   Reuses Affirm SDK's .affirm-as-low-as element pattern so we get the
   exact same "Starting at $X/mo or 0% APR with Affirm. Learn more" copy
   that appears on cart and PDP. */
.dv-co-affirm-promo{display:none;margin:14px 0 0;padding:14px 16px;background:var(--bg-alt,#F7F8FA);border-radius:6px;text-align:center}
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-affirm-promo{display:block}
.dv-co-affirm-widget{margin:0;color:var(--dark);font-size:13px;font-weight:500;line-height:1.5}
.dv-co-affirm-widget strong{color:var(--dark);font-weight:700}
.dv-co-affirm-widget a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ── Card slot: where Stripe Elements move when Credit/Debit is selected ── */
.dv-co-card-slot{
  width:100%;
  margin:0 0 20px;
  text-align:left;
  display:none;  /* Hidden by default (PayPal mode) */
}
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-card-slot{
  display:block;
}
.dv-co-checkout-block[data-dv-active-method="stripe"].dv-card-slot-ready .dv-co-card-slot{
  min-height:0;
}
.dv-co-checkout-block[data-dv-active-method="stripe"].dv-card-slot-ready .dv-co-card-slot:empty{
  display:block!important;
  min-height:210px;
}
.dv-co-checkout-block:not([data-dv-active-method="stripe"]) .dv-co-card-slot:empty{display:none!important}
/* Legacy Stripe fields (individual card/exp/cvc divs) — only applies when
   Stripe is NOT in UPE mode. In UPE mode these selectors match nothing and
   these rules are harmless. Kept for backward compat with older Stripe. */
.dv-co-card-slot .wc-stripe-elements-field,
.dv-co-card-slot #stripe-card-element,
.dv-co-card-slot #stripe-exp-element,
.dv-co-card-slot #stripe-cvc-element{
  padding:12px 14px!important;
  background:#fff!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  min-height:46px!important;
  margin-bottom:10px!important;
}
/* UPE mode: .wc-stripe-upe-element is just a wrapper around the Stripe
   iframe, which already paints its own input visuals. Any border / bg /
   padding we add here stacks on top as a second grey frame. Keep only
   vertical rhythm. Do NOT touch background — parent .payment_box is
   transparent, white card (.dv-co-checkout-block) shines through. */
.dv-co-card-slot .wc-stripe-upe-element,
.dv-co-card-slot #wc-stripe-upe-element{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  margin:0 0 10px!important;
  /* Allow this wrapper around the Stripe iframe to shrink with its
     parent fieldset — critical on narrow viewports. */
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
/* Belt-and-suspenders: the card slot itself and its direct children
   (payment_box, any Stripe iframes) must also allow shrinking. */
.dv-co-card-slot,
.dv-co-card-slot .payment_box,
.dv-co-card-slot iframe,
.dv-co-card-slot .StripeElement{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
/* Stripe renders two <fieldset>s inside the payment_box:
   1) <fieldset id="wc-stripe-upe-form"> wrapping Card + Exp + CVC
      → KEEP as a visible card-style container (white bg, border, radius)
   2) <fieldset> (no id) wrapping the "Save payment info" checkbox
      → FLATTEN to nothing
   Default browser user-agent gives both a 2px groove border we override. */

/* 1) The UPE form fieldset = the visible grouping container for the
      three card fields. Paint it white with a subtle border + radius.
      CRITICAL: min-inline-size:0 + max-width:100% + box-sizing:border-box
      together prevent <fieldset>'s default min-content (which Stripe's
      iframe reports as ~400px) from blowing out narrow viewports.
      Border uses inset box-shadow instead of `border:` because fieldset
      has user-agent default border-style:groove (3D ridge) and
      border-color:threedface (dark gray) that render harshly even when
      overridden — box-shadow bypasses those defaults entirely. */
.dv-co-card-slot fieldset#wc-stripe-upe-form,
.dv-co-card-slot fieldset.wc-upe-form,
.dv-co-card-slot fieldset.wc-payment-form{
  border:0!important;
  box-shadow:inset 0 0 0 1px #E5E7EB!important;
  border-radius:8px!important;
  background:#fff!important;
  padding:20px!important;
  margin:0!important;
  min-inline-size:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* 2) The Save-payment-info fieldset (has no id, no class) — flatten it
      and sit flush against the card container's bottom edge. */
.dv-co-card-slot fieldset:not([id]):not([class]){
  border:0!important;
  padding:0!important;
  margin:2px 0 0!important;
  min-inline-size:auto!important;
  background:transparent!important;
}
/* Zero out WC's default top spacing on the inner form-row / <p> */
.dv-co-card-slot fieldset:not([id]):not([class]) .form-row,
.dv-co-card-slot fieldset:not([id]):not([class]) > p{
  margin:0!important;
  padding:0!important;
}
/* Align the "Save payment info" checkbox and its label on the same
   baseline using flexbox — otherwise the inline <input> and text
   sit at different vertical positions. */
.dv-co-card-slot fieldset:not([id]):not([class]) .form-row,
.dv-co-card-slot fieldset:not([id]):not([class]) > p.form-row,
.dv-co-card-slot .woocommerce-SavedPaymentMethods-saveNew{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.dv-co-card-slot fieldset:not([id]):not([class]) input[type="checkbox"]{
  margin:0!important;
  flex-shrink:0;
  width:16px;
  height:16px;
  accent-color:var(--blue);
}
.dv-co-card-slot fieldset:not([id]):not([class]) label{
  margin:0!important;
  line-height:1.4;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  /* Allow the label to take the remaining flex width and wrap to a
     second line on narrow viewports instead of being clipped.
     flex:1 + min-width:0 is the standard flex-child shrink pattern. */
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:normal!important;
  word-break:normal;
  overflow-wrap:anywhere;
}
.dv-co-card-slot fieldset > legend{
  display:none!important;
}
.dv-co-card-slot .payment_box{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  margin:0!important;
  display:block!important;
}

/* v364: Permanently hide "Save payment information" checkbox.
   Rationale: DV sells engagement/wedding rings (once-per-lifetime purchase),
   not repeat-buy merchandise. Card-on-file gives zero value to a customer
   who won't return, and real users rarely opt in due to fraud concerns.
   Keeping it only adds UI noise and dead-option clutter.
   We hide via CSS rather than removing DOM because the fieldset is Stripe
   UPE lifecycle machinery — leaving it intact keeps hidden inputs in the
   form for plugin state consistency. */
.dv-co-card-slot fieldset:not([id]):not([class]){
  display:none!important;
}

/* ── Billing address toggle (Stripe path only) ──
   v365: JS moves this wrap INTO the UPE fieldset (below CVC field), so it
   visually sits inside the grey card container. CSS handles both states:
   - When inside fieldset: add top separator, sit flush
   - When outside (initial DOM, before first relocate): keep breathing space
   Hidden entirely when PayPal pill is active. */
.dv-co-billing-toggle-wrap{
  margin:16px 0 0;
}
/* When relocated inside UPE fieldset (Stripe active), adopt a subtle top
   separator so the checkbox doesn't feel glued to the CVC field. */
.dv-co-card-slot fieldset#wc-stripe-upe-form > .dv-co-billing-toggle-wrap,
.dv-co-card-slot fieldset.wc-upe-form > .dv-co-billing-toggle-wrap,
.dv-co-card-slot fieldset.wc-payment-form > .dv-co-billing-toggle-wrap{
  margin:18px 0 0!important;
  padding:16px 0 0!important;
  border-top:1px solid var(--border,#E8E8ED)!important;
}
.dv-co-checkout-block[data-dv-active-method="ppcp-gateway"] .dv-co-billing-toggle-wrap,
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-billing-toggle-wrap{
  display:none!important;
}
.dv-co-billing-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  color:#1F2937;
  line-height:1.4;
}
.dv-co-billing-toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}
.dv-co-billing-toggle-check{
  flex:0 0 18px;
  width:18px;
  height:18px;
  border:1px solid #9ca3af;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:transparent;
  transition:all .15s ease;
}
.dv-co-billing-toggle input[type="checkbox"]:checked + .dv-co-billing-toggle-check{
  background:#3B6BA5;
  border-color:#3B6BA5;
  color:#fff;
}
.dv-co-billing-toggle input[type="checkbox"]:focus-visible + .dv-co-billing-toggle-check{
  outline:2px solid rgba(59,107,165,0.35);
  outline-offset:2px;
}
.dv-co-billing-toggle-label{
  flex:1 1 auto;
  text-align:left;
}

/* Expanded billing form */
.dv-co-billing-fields{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #E5E7EB;
}
.dv-co-billing-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dv-co-billing-row{
  display:grid;
  gap:12px;
}
.dv-co-billing-row--name{
  grid-template-columns:1fr 1fr;
}
.dv-co-billing-row--citystate{
  grid-template-columns:1fr 1fr 1fr;
}
.dv-co-billing-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
}
.dv-co-billing-field-label{
  font-size:11px;
  color:#6b7280;
  font-weight:500;
  letter-spacing:0.02em;
}
.dv-co-billing-field input[type="text"],
.dv-co-billing-field input[type="tel"],
.dv-co-billing-field select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:10px 12px;
  font-size:14px;
  font-family:inherit;
  color:#1F2937;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:6px;
  line-height:1.4;
  box-sizing:border-box;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dv-co-billing-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 6 6 10 2'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  padding-right:32px;
}
.dv-co-billing-field input:focus,
.dv-co-billing-field select:focus{
  outline:none;
  border-color:#3B6BA5;
  box-shadow:0 0 0 3px rgba(59,107,165,0.12);
}

/* Mobile: stack name + city/state into single columns */
@media (max-width: 520px){
  .dv-co-billing-row--name,
  .dv-co-billing-row--citystate{
    grid-template-columns:1fr;
  }
}

/* Billing floating-label — forces absolute positioning against WC defaults. */
[data-dv-billing-fields] .form-row{position:relative!important;margin:0!important}
[data-dv-billing-fields] .form-row label{
  position:absolute!important;
  left:14px!important;
  top:14px!important;
  margin:0!important;
  padding:0 4px!important;
  background:#fff!important;
  color:#6b7280!important;
  font-size:13px!important;
  font-weight:400!important;
  pointer-events:none!important;
  z-index:1!important;
  max-width:calc(100% - 28px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  transition:top .18s cubic-bezier(.22,1,.36,1), font-size .18s, color .18s!important;
}
[data-dv-billing-fields] .form-row:focus-within label,
[data-dv-billing-fields] .form-row:has(input:not(:placeholder-shown)) label,
[data-dv-billing-fields] .form-row:has(input:-webkit-autofill) label,
[data-dv-billing-fields] .form-row:has(select) label{
  top:-7px!important;
  font-size:11px!important;
  color:#3B6BA5!important;
  letter-spacing:.3px!important;
}

/* Billing section heading */
.dv-co-billing-heading{
  margin:0 0 14px;
  padding:0;
  font-family:'Libre Baskerville',serif;
  font-size:15px;
  font-weight:600;
  color:var(--dark);
  letter-spacing:.2px;
}

/* ── Hold-to-submit button ── */
.dv-co-hold-wrap{
  margin:0;
  text-align:center;
}
.dv-co-hold-btn{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  padding:20px 24px;
  border:none;
  border-radius:4px;
  background:#FFC439;
  color:#003087;
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,box-shadow .2s;
  min-height:60px;
}
.dv-co-hold-btn:hover{
  background:#F5B921;
  box-shadow:0 8px 20px rgba(255,196,57,.32);
}
.dv-co-hold-btn:focus-visible{outline:3px solid rgba(0,48,135,.3);outline-offset:2px}
/* When Stripe (card) is the active method, use brand blue button */
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-hold-btn{
  background:var(--blue);
  color:#fff;
}
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-hold-btn:hover{
  background:var(--blue-hov,#1a3362);
  box-shadow:0 8px 20px rgba(30,58,110,.22);
}
/* When Affirm is the active method — same brand blue as Stripe to keep
   visual consistency for non-PayPal flows. */
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-hold-btn{
  background:var(--blue);
  color:#fff;
}
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-hold-btn:hover{
  background:var(--blue-hov,#1a3362);
  box-shadow:0 8px 20px rgba(30,58,110,.22);
}
/* Disabled during submit */
.dv-co-hold-btn[disabled],
.dv-co-hold-btn.is-submitting{opacity:1;cursor:wait}

/* Processing state — replaces text with spinner + status copy.
   Triggered by .is-submitting class added on submit. The fill
   layer reaches 100% just before this; together they convey
   immediate feedback while WC/Stripe handles the order. */
.dv-co-hold-processing{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  z-index:1;
  font-weight:500;
  letter-spacing:.2px;
}
.dv-co-hold-btn.is-submitting .dv-co-hold-text{display:none}
.dv-co-hold-btn.is-submitting .dv-co-hold-processing{display:inline-flex}
.dv-co-hold-spinner{
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:dvSpin .7s linear infinite;
  flex-shrink:0;
  opacity:.85;
}
@keyframes dvSpin{to{transform:rotate(360deg)}}

/* Progress fill (::before): inline translucent layer that grows left→right */
.dv-co-hold-fill{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:0;
  background:rgba(0,48,135,.18);
  pointer-events:none;
  transition:width .06s linear;
  z-index:0;
}
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-hold-fill{
  background:rgba(255,255,255,.22);
}
/* Text stays above fill */
.dv-co-hold-text{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dv-co-hold-label{font-weight:500}

/* Inline PayPal wordmark inside hold text */
.dv-co-hold-brand--paypal{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:17px;
  letter-spacing:-.5px;
}
.dv-co-hold-brand-pay{color:#003087}
.dv-co-hold-brand-pal{color:#009CDE}
/* Card mode: show "card", hide PayPal wordmark */
.dv-co-hold-brand--card{display:none!important}
.dv-co-hold-brand--affirm{display:none!important}
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-hold-brand--paypal{display:none!important}
.dv-co-checkout-block[data-dv-active-method="stripe"] .dv-co-hold-brand--card{
  display:inline!important;
  color:#fff;
  font-weight:600;
}
/* Affirm mode: show "Affirm", hide PayPal wordmark */
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-hold-brand--paypal{display:none!important}
.dv-co-checkout-block[data-dv-active-method="affirm"] .dv-co-hold-brand--affirm{
  display:inline!important;
  color:#fff;
  font-weight:600;
}

/* Hint text under the hold button */
.dv-co-hold-hint{
  margin-top:14px;
  font-family:'Outfit',sans-serif;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}

/* ── Hide the native WC #payment UI visually while keeping DOM intact ──
   Stripe UPE depends on #payment existing and receiving fragment updates
   on updated_checkout. We hide the visual tree; JS moves the active
   payment method's fields into our card slot. */
.dv-co-checkout-block #order_review,
.dv-co-checkout-block #payment{
  position:absolute!important;
  left:-9999px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}

/* Real #place_order stays in DOM (our hold-btn triggers its click), hidden */
.dv-checkout-form .place-order,
.dv-checkout-form #place_order{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* WC notices stay visible at the top of the form */
.dv-checkout-form .woocommerce-NoticeGroup,
.dv-checkout-form .woocommerce-error,
.dv-checkout-form .woocommerce-info,
.dv-checkout-form .woocommerce-message{margin:0 0 20px;padding:14px 16px;border-radius:6px;font-size:13px;list-style:none;border:none}
.dv-checkout-form .woocommerce-error{background:#FEEBEC;color:#A02434;border-left:3px solid #D14343}
.dv-checkout-form .woocommerce-info{background:#E8F0FA;color:var(--blue);border-left:3px solid var(--blue)}
.dv-checkout-form .woocommerce-message{background:#E8F5E9;color:#1B5E20;border-left:3px solid #34A853}
.dv-checkout-form .woocommerce-error li,
.dv-checkout-form .woocommerce-info li,
.dv-checkout-form .woocommerce-message li{margin:0;padding:0}

/* WC notices that render OUTSIDE the form (above page header).
   Default WC styling adds a ::before exclamation-mark icon that
   overlaps with the message text — neutralise it and use clean
   typography matching the in-form notice style. */
.dv-checkout-page .woocommerce-NoticeGroup,
.dv-checkout-page > .woocommerce-error,
.dv-checkout-page > .woocommerce-message,
.dv-checkout-page > .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info{
  list-style:none!important;
  margin:0 auto 24px!important;
  padding:16px 20px!important;
  border-radius:8px!important;
  border:none!important;
  font-family:'Outfit',sans-serif!important;
  font-size:14px!important;
  line-height:1.6!important;
  max-width:1100px!important;
}
.dv-checkout-page .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error{
  background:#FEEBEC!important;
  color:#A02434!important;
  border-left:3px solid #D14343!important;
}
.dv-checkout-page .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message{
  background:#E8F5E9!important;
  color:#1B5E20!important;
  border-left:3px solid #34A853!important;
}
.dv-checkout-page .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info{
  background:#E8F0FA!important;
  color:var(--blue)!important;
  border-left:3px solid var(--blue)!important;
}
/* Remove WC's default ::before exclamation icon that overlaps text */
.dv-checkout-page .woocommerce-error::before,
.dv-checkout-page .woocommerce-message::before,
.dv-checkout-page .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before{
  display:none!important;
  content:none!important;
}
.dv-checkout-page .woocommerce-error li,
.dv-checkout-page .woocommerce-message li,
.dv-checkout-page .woocommerce-info li,
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-info li{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

/* Loading state during AJAX */
/* WC's blockUI loading overlay during AJAX submit.
   On checkout page only: hide the overlay completely so our button's
   own spinner ("Processing your order…") is the single feedback element.
   blockMsg is the small WC spinner box; blockOverlay is the white scrim. */
body.dv-checkout-page .blockUI{display:none!important}
body.woocommerce-checkout .blockUI{display:none!important}

/* ══════════════════════════════════════════════════════════════════════
   ORDER SUMMARY — Right column (custom rendered via dv_render_checkout_summary)
   ══════════════════════════════════════════════════════════════════════ */
.dv-co-right{position:sticky;top:120px;align-self:start}
.dv-summary{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.dv-summary-toggle{display:none}
.dv-summary-body{padding:28px}
.dv-summary-title{font-family:'Libre Baskerville',serif;font-size:18px;font-weight:400;color:var(--dark);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* Items list */
.dv-summary-items{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:16px;max-height:340px;overflow-y:auto}
.dv-summary-items::-webkit-scrollbar{width:4px}
.dv-summary-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dv-summary-item{display:flex;gap:14px;align-items:flex-start}
.dv-summary-item-thumb{position:relative;width:64px;height:64px;flex-shrink:0;background:var(--bg);border:1px solid var(--border);border-radius:6px}
.dv-summary-item-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px}
.dv-summary-item-qty{position:absolute;top:-7px;right:-7px;background:var(--dark);color:#fff;font-size:11px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;line-height:1;border:2px solid #fff}
.dv-summary-item-info{flex:1;min-width:0}
.dv-summary-item-name{font-size:13px;font-weight:500;color:var(--dark);line-height:1.4;margin-bottom:4px;font-family:'Outfit',sans-serif}
.dv-summary-item-attrs{font-size:11px;color:var(--muted);line-height:1.4}
.dv-summary-item-price{font-size:13px;color:var(--dark);font-weight:500;text-align:right;flex-shrink:0;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dv-summary-item-price del{font-size:11px;color:var(--muted);font-weight:400;text-decoration:line-through}
.dv-summary-item-price .woocommerce-Price-amount{color:inherit}

/* Promo input */
.dv-summary-promo{display:flex;gap:8px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.dv-summary-promo-input{flex:1;padding:11px 12px;border:1px solid var(--border);border-radius:4px;background:#fff;font-family:'Outfit',sans-serif;font-size:13px;color:var(--dark);outline:none;transition:border-color .15s}
.dv-summary-promo-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,110,.08)}
.dv-summary-promo-btn{padding:11px 18px;background:var(--btn-pri-bg,var(--blue));color:var(--btn-pri-text,#fff);border:1px solid var(--btn-pri-bg,var(--blue));border-radius:4px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap}
.dv-summary-promo-btn:hover{background:var(--btn-pri-hov,var(--blue-hov));border-color:var(--btn-pri-hov,var(--blue-hov));color:var(--btn-pri-text,#fff)}
.dv-summary-promo-btn:disabled{opacity:.55;cursor:wait}

/* Totals rows */
.dv-summary-totals{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.dv-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text)}
.dv-summary-row > span:first-child{color:var(--muted)}
.dv-summary-row > span:last-child{color:var(--dark);font-weight:500}
.dv-summary-row .woocommerce-Price-amount{color:inherit;font-weight:inherit}
.dv-summary-row--discount > span:last-child{color:#34A853}
.dv-summary-free{color:#34A853;font-weight:600}

.dv-summary-grand{display:flex;justify-content:space-between;align-items:baseline;padding-top:18px;border-top:1px solid var(--border);margin-bottom:20px}
.dv-summary-grand-label{font-size:15px;font-weight:600;color:var(--dark)}
.dv-summary-grand-amount{font-family:'Libre Baskerville',serif;font-size:24px;font-weight:400;color:var(--dark)}
.dv-summary-grand-amount .woocommerce-Price-amount{color:inherit;font-weight:inherit}
.dv-summary-grand-amount .woocommerce-Price-currencySymbol{font-size:16px;margin-right:2px;vertical-align:top;line-height:1}

/* Trust strip */
.dv-summary-trust{display:grid!important;grid-template-columns:repeat(2,max-content)!important;grid-auto-flow:row;justify-content:space-between;align-items:center;gap:12px 18px;padding-top:16px;border-top:1px solid var(--border)}
.dv-summary-trust-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.2px;text-align:left;line-height:1.2;white-space:nowrap;min-width:max-content}
.dv-summary-trust-icon{display:inline-flex!important;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background:rgba(30,58,110,.08);color:var(--blue);flex:0 0 18px;white-space:normal}
.dv-summary-trust-icon svg{display:block;flex:0 0 14px;width:14px;height:14px;color:inherit}
.dv-summary-trust-text{display:block;white-space:nowrap;min-width:max-content;color:var(--text)}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤1024
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  /* Match cart-layout tablet sizing exactly — user goes cart → checkout,
     left/right column positions should not jump. cart.line 301:
     `grid-template-columns:1.2fr clamp(280px,38vw,360px);gap:28px;padding:0 24px 60px` */
  .dv-checkout-shell{padding:24px 24px 60px}
  .dv-co-grid{grid-template-columns:1.2fr clamp(280px,38vw,360px);gap:28px}
  .dv-co-section{padding:24px}
  .dv-co-express{padding:20px 24px}
  .dv-co-right{top:100px}
  .dv-summary-body{padding:22px}
  .dv-summary-trust{grid-template-columns:repeat(2,max-content)!important;gap:12px 14px;justify-content:space-between}
  .dv-summary-trust-item{font-size:10.5px;letter-spacing:.1px;white-space:nowrap}
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤768
   Stack: summary collapsible at top, form below
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .dv-checkout-shell{padding:0 0 60px}
  .dv-co-grid{grid-template-columns:1fr;gap:0}
  .dv-co-right{position:static;top:0;order:-1;margin-bottom:16px}

  /* Summary becomes a top-of-page collapsible bar */
  .dv-summary{border-radius:0;border-left:none;border-right:none;border-top:none}
  .dv-summary-toggle{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;cursor:pointer;border-bottom:1px solid var(--border);min-height:60px}
  .dv-summary-toggle-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--blue);font-weight:500}
  .dv-summary-toggle-label svg{color:var(--blue)}
  .dv-summary-toggle-caret{transition:transform .25s;color:var(--blue)}
  .dv-summary--open .dv-summary-toggle-caret{transform:rotate(180deg)}
  .dv-summary-toggle-total{font-family:'Libre Baskerville',serif;font-size:18px;font-weight:400;color:var(--dark)}
  .dv-summary-toggle-total .woocommerce-Price-amount{color:inherit;font-weight:inherit}
  .dv-summary-body{display:none;padding:20px;background:#FAFBFC;border-bottom:1px solid var(--border)}
  .dv-summary--open .dv-summary-body{display:block}
  .dv-summary-title{display:none}
  .dv-summary-items{max-height:none}

  /* Form sections */
  .dv-co-left{padding:0 16px}
  .dv-co-section{padding:20px;margin-bottom:14px;border-radius:6px}
  .dv-co-section-title{font-size:18px}
  .dv-co-express{padding:16px 20px}

  /* Stack 3-col rows on mobile */
  .dv-co-fields-row--3col{grid-template-columns:1fr 1fr;gap:12px}
  .dv-co-fields-row--3col .form-row:first-child{grid-column:1/-1}
  .dv-co-fields-row--2col{gap:12px}

  /* Smaller field padding on mobile */
  .dv-checkout-form .form-row .input-text,
  .dv-checkout-form .form-row textarea,
  .dv-checkout-page .form-row select{padding:16px 12px 10px;font-size:14px;min-height:50px}
  .dv-checkout-page .form-row label{top:16px;left:12px;font-size:14px}
  .dv-checkout-page .form-row.dv-co-filled label,
  .dv-checkout-page .form-row:focus-within label{top:-8px;font-size:11px}
  .dv-checkout-page .select2-container .select2-selection--single{height:50px}
  .dv-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px}

  /* Pay button */
  .dv-co-pay-button{padding:16px;font-size:13px}
}

@media (max-width: 480px){
  .dv-co-section{padding:18px}
  .dv-summary-body{padding:18px}
  .dv-summary-trust{grid-template-columns:repeat(2,max-content)!important;gap:12px 8px;justify-content:space-between}
  .dv-summary-trust-item{justify-content:flex-start;font-size:10px;text-align:left;gap:6px;white-space:nowrap}
  .dv-co-fields-row--3col{grid-template-columns:1fr}
  .dv-co-fields-row--3col .form-row:first-child{grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════════
   THANK YOU PAGE  —  .dv-thankyou-shell  /  .dv-ty-*
   Added in v355.  Ceremonial post-purchase experience.
   Brand palette: #1F2937 (dark) / #3B6BA5 (accent) / #FFFFFF (bg) / #E8E8ED (border)
   Fonts: Libre Baskerville (headings) / Outfit (body)
   ═══════════════════════════════════════════════════════════════ */

/* Outer shell — constrains width, centers, breathing room */
.dv-thankyou-shell{
  max-width:880px;
  margin:0 auto;
  padding:72px 24px 80px;
  color:#1F2937;
}

/* ──── 0. AFFIRM REDIRECT INTERSTITIAL ────
   Shown while the WC Affirm plugin is exchanging the order with Affirm's
   API to obtain a hosted-checkout URL. Without this, users see the regular
   "order confirmed" page for ~5 seconds before getting redirected, and
   often think the order is done and close the tab. */
.dv-ty-affirm-redirect{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
}
.dv-ty-affirm-redirect-card{
  text-align:center;
  max-width:480px;
  padding:48px 32px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(31,41,55,.06);
}
.dv-ty-affirm-logo{
  display:block;
  margin:0 auto 24px;
  height:28px;
  width:auto;
}
.dv-ty-affirm-spinner{
  width:40px;
  height:40px;
  margin:0 auto 24px;
  border:3px solid #E5E7EB;
  border-top-color:#3B6BA5;
  border-radius:50%;
  animation:dvAffirmSpin 0.8s linear infinite;
}
@keyframes dvAffirmSpin{to{transform:rotate(360deg)}}
.dv-ty-affirm-title{
  font-family:'Libre Baskerville',serif;
  font-size:24px;
  font-weight:400;
  color:#1F2937;
  margin:0 0 12px;
}
.dv-ty-affirm-sub{
  font-family:'Outfit',sans-serif;
  font-size:14px;
  line-height:1.6;
  color:#6B7280;
  margin:0 0 20px;
}
.dv-ty-affirm-meta{
  font-family:'Outfit',sans-serif;
  font-size:12px;
  color:#9CA3AF;
  margin:0;
  letter-spacing:.3px;
}
@media (max-width: 600px){
  .dv-ty-affirm-redirect-card{padding:36px 24px;border-radius:10px}
  .dv-ty-affirm-title{font-size:20px}
  .dv-ty-affirm-sub{font-size:13px}
}

/* ──── ORDER-PAY AFFIRM INTERSTITIAL — refined v421 ────
   Shown while the WC Affirm plugin auto-submits the receipt form and
   exchanges with Affirm's API for a hosted-checkout URL (4-6s). Uses
   Diamond Vow's brand language (Libre Baskerville for the headline,
   pulsing diamond mark in brand blue, Outfit micro-typography for
   trust-row + partnership line). The Affirm plugin's receipt output
   sits in .dv-pay-affirm-receipt-wrap below — visually hidden but
   in-DOM so its auto-submit JS still runs. */
.dv-pay-affirm-redirect{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64vh;
  padding:56px 24px 32px;
  background:linear-gradient(180deg, var(--bg-alt,#F7F8FA) 0%, #FFFFFF 100%);
}
.dv-pay-affirm-redirect-card{
  text-align:center;
  max-width:520px;
  width:100%;
  padding:56px 48px 44px;
  background:#fff;
  border:1px solid rgba(31,41,55,.06);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(31,41,55,.04), 0 12px 40px rgba(31,41,55,.06);
}

/* Affirm LOGO as primary visual anchor with brand-blue pulsing rings.
   The LOGO is sized strictly (height + max-width !important) so the SVG
   can never blow out the layout. Two absolute-positioned rings expand
   and fade behind it on a 2.4s loop, staggered .6s, conveying "loading"
   without a generic spinner. */
.dv-pay-affirm-mark{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:140px;
  height:80px;
  margin:0 auto 32px;
}
.dv-pay-affirm-mark-logo{
  position:relative;
  z-index:2;
  display:block;
  height:32px!important;
  width:auto!important;
  max-width:120px!important;
}
.dv-pay-affirm-mark-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:80px;
  height:80px;
  margin:-40px 0 0 -40px;
  border:1px solid #3B6BA5;
  border-radius:50%;
  opacity:0;
  transform:scale(.6);
  animation:dvAffirmRingPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
  z-index:1;
}
.dv-pay-affirm-mark-ring--delay{
  animation-delay:1.2s;
}
@keyframes dvAffirmRingPulse{
  0%   {transform:scale(.55); opacity:0}
  20%  {opacity:.45}
  100% {transform:scale(1.6); opacity:0}
}

.dv-pay-affirm-title{
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:-.5px;
  color:#1F2937;
  margin:0 0 14px;
  line-height:1.15;
}
.dv-pay-affirm-sub{
  font-family:'Outfit', sans-serif;
  font-size:15px;
  line-height:1.6;
  color:#6B7280;
  margin:0 auto 36px;
  max-width:380px;
}

/* Trust row — three reassurance points, horizontal flex, brand-blue icons */
.dv-pay-affirm-trust{
  list-style:none;
  margin:0 0 32px;
  padding:24px 0;
  border-top:1px solid #EAEEF3;
  border-bottom:1px solid #EAEEF3;
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  gap:16px;
}
.dv-pay-affirm-trust li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:1 1 0;
  min-width:0;
  font-family:'Outfit', sans-serif;
  font-size:12px;
  font-weight:500;
  color:#4B5563;
  letter-spacing:.2px;
  text-align:center;
}
.dv-pay-affirm-trust-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(59,107,165,.08);
  color:#3B6BA5;
}

.dv-pay-affirm-meta{
  font-family:'Outfit', sans-serif;
  font-size:11px;
  color:#C7CCD4;
  margin:0;
  letter-spacing:.6px;
  text-transform:uppercase;
}

/* Visually hide the WC Affirm plugin's receipt output (auto-submit form
   and script) but keep it in the DOM so its JS runs and submits. We
   use position:absolute + zero size + opacity:0 (NOT display:none) so
   the form fields remain submittable by the plugin's own JS. */
.dv-pay-form-hidden,
.dv-pay-affirm-receipt-wrap{
  position:absolute!important;
  left:-9999px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Tablet */
@media (max-width: 768px){
  .dv-pay-affirm-redirect-card{
    padding:44px 32px 36px;
    max-width:480px;
  }
  .dv-pay-affirm-title{font-size:28px}
}

/* Mobile */
@media (max-width: 600px){
  .dv-pay-affirm-redirect{
    padding:32px 16px 24px;
    min-height:60vh;
  }
  .dv-pay-affirm-redirect-card{
    padding:36px 24px 28px;
    border-radius:14px;
  }
  .dv-pay-affirm-title{font-size:24px}
  .dv-pay-affirm-sub{font-size:14px; margin-bottom:28px}
  .dv-pay-affirm-trust{
    padding:18px 0;
    margin-bottom:24px;
    gap:8px;
  }
  .dv-pay-affirm-trust li{font-size:11px; gap:6px}
  .dv-pay-affirm-trust-icon{width:28px; height:28px}
  .dv-pay-affirm-trust-icon svg{width:14px; height:14px}
  .dv-pay-affirm-mark{width:120px; height:72px; margin-bottom:24px}
  .dv-pay-affirm-mark-logo{height:28px!important; max-width:104px!important}
  .dv-pay-affirm-mark-ring{width:72px; height:72px; margin:-36px 0 0 -36px}
}

/* ──── 1. HERO ──── */
.dv-ty-hero{
  text-align:center;
  padding:0 0 48px;
}
.dv-ty-hero-ornament{
  color:#3B6BA5;
  margin:0 auto 28px;
  display:flex;
  justify-content:center;
  line-height:0;
}
.dv-ty-hero-title{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:400;
  font-size:clamp(26px, 5.6vw, 44px);
  line-height:1.18;
  letter-spacing:-0.01em;
  color:#1F2937;
  margin:0 0 14px;
}
.dv-ty-hero-subtitle{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:clamp(14px, 2vw, 17px);
  line-height:1.55;
  color:#4b5563;
  margin:0;
  font-weight:300;
  letter-spacing:0.01em;
}
.dv-ty-hero-divider{
  width:40px;
  height:1px;
  background:#3B6BA5;
  opacity:0.4;
  margin:36px auto 24px;
}
.dv-ty-hero-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:14px;
  color:#1F2937;
}
.dv-ty-meta-row{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
}
.dv-ty-meta-label{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:11px;
  color:#6b7280;
  font-weight:500;
}
.dv-ty-meta-value{
  font-weight:500;
  color:#1F2937;
  font-size:14px;
}
.dv-ty-meta-sep{
  color:#d1d5db;
  font-size:14px;
}
.dv-ty-hero-email{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:13px;
  color:#6b7280;
  margin:20px 0 0;
  font-weight:300;
}
.dv-ty-email-address{
  color:#1F2937;
  font-weight:500;
}

/* ──── 2. TIMELINE ──── */
.dv-ty-timeline{
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:8px;
  padding:36px 32px;
  margin:0 0 28px;
}
.dv-ty-section-heading{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:400;
  font-size:18px;
  text-align:center;
  color:#1F2937;
  margin:0 0 28px;
  letter-spacing:0.01em;
}
.dv-ty-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
}
.dv-ty-step{
  position:relative;
  text-align:center;
  padding:0 8px;
}
/* Connector line between steps */
.dv-ty-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:15px;
  left:calc(50% + 16px);
  right:calc(-50% + 16px);
  height:1px;
  background:#E5E7EB;
  z-index:0;
}
.dv-ty-step--done:not(:last-child)::after{
  background:#3B6BA5;
  opacity:0.4;
}
.dv-ty-step-node{
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  border-radius:50%;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #E5E7EB;
  color:#9ca3af;
  transition:all 0.2s ease;
}
.dv-ty-step-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  display:block;
}
.dv-ty-step--done .dv-ty-step-node{
  background:#3B6BA5;
  border-color:#3B6BA5;
  color:#fff;
}
.dv-ty-step--active .dv-ty-step-node{
  background:#fff;
  border-color:#3B6BA5;
  border-width:2px;
  color:#3B6BA5;
  box-shadow:0 0 0 4px rgba(59,107,165,0.08);
}
.dv-ty-step--active .dv-ty-step-dot{
  animation:dv-ty-pulse 2s ease-in-out infinite;
}
@keyframes dv-ty-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.8)}
}
.dv-ty-step-title{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:13px;
  font-weight:500;
  color:#1F2937;
  line-height:1.35;
  margin-bottom:3px;
}
.dv-ty-step--done .dv-ty-step-title,
.dv-ty-step--active .dv-ty-step-title{
  color:#1F2937;
}
.dv-ty-step:not(.dv-ty-step--done):not(.dv-ty-step--active) .dv-ty-step-title{
  color:#9ca3af;
}
.dv-ty-step-caption{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:11px;
  color:#9ca3af;
  line-height:1.4;
  font-weight:300;
}

/* ──── 3-4. ORDER DETAILS + ADDRESSES ──── */
/* WC's default woocommerce_order_details_table + woocommerce_order_details_after_customer_details
   wraps content in classes like .woocommerce-order, .woocommerce-order-details, .woocommerce-columns.
   We restyle these in place — no markup change needed. */
.dv-ty-section-wrap{
  display:block;
}
.dv-ty-section-wrap .woocommerce-order{
  display:block;
}
.dv-ty-section-wrap .woocommerce-order-details,
.dv-ty-section-wrap .woocommerce-customer-details{
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:8px;
  padding:32px;
  margin:0 0 20px;
}
/* Strip WC's default "Order details"/"Billing address" H2 styling, match ours */
.dv-ty-section-wrap .woocommerce-order-details__title,
.dv-ty-section-wrap .woocommerce-column__title{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:400;
  font-size:18px;
  color:#1F2937;
  margin:0 0 20px;
  padding:0 0 14px;
  border-bottom:1px solid #E5E7EB;
  letter-spacing:0.01em;
}

/* Order details TABLE — clean lines, generous row padding */
.dv-ty-section-wrap .woocommerce-table--order-details,
.dv-ty-section-wrap table.shop_table{
  width:100%;
  border-collapse:collapse;
  border:0;
  background:transparent;
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:14px;
}
.dv-ty-section-wrap .woocommerce-table--order-details thead th,
.dv-ty-section-wrap table.shop_table thead th{
  text-align:left;
  padding:0 0 12px;
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:#6b7280;
  border-bottom:1px solid #E5E7EB;
  background:transparent;
}
.dv-ty-section-wrap .woocommerce-table--order-details tbody td,
.dv-ty-section-wrap table.shop_table tbody td{
  padding:18px 0;
  border-top:0;
  border-bottom:1px solid var(--border,#E8E8ED);
  vertical-align:top;
  color:#1F2937;
  background:transparent;
}
.dv-ty-section-wrap .woocommerce-table--order-details tbody tr:last-child td,
.dv-ty-section-wrap table.shop_table tbody tr:last-child td{
  border-bottom:1px solid #E5E7EB;
}
/* Product name link */
.dv-ty-section-wrap .woocommerce-table--order-details .wc-item-meta,
.dv-ty-section-wrap table.shop_table .wc-item-meta{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  font-size:13px;
  color:#6b7280;
}
.dv-ty-section-wrap .wc-item-meta li{
  margin:3px 0;
}
.dv-ty-section-wrap .wc-item-meta strong{
  color:#1F2937;
  font-weight:500;
  margin-right:4px;
}
.dv-ty-section-wrap .wc-item-meta p{
  margin:0;
  display:inline;
}
/* Table footer (Subtotal / Total rows) */
.dv-ty-section-wrap .woocommerce-table--order-details tfoot th,
.dv-ty-section-wrap .woocommerce-table--order-details tfoot td,
.dv-ty-section-wrap table.shop_table tfoot th,
.dv-ty-section-wrap table.shop_table tfoot td{
  padding:12px 0;
  border:0;
  background:transparent;
  font-size:14px;
  color:#1F2937;
}
.dv-ty-section-wrap .woocommerce-table--order-details tfoot tr:first-child th,
.dv-ty-section-wrap .woocommerce-table--order-details tfoot tr:first-child td,
.dv-ty-section-wrap table.shop_table tfoot tr:first-child th,
.dv-ty-section-wrap table.shop_table tfoot tr:first-child td{
  padding-top:18px;
}
.dv-ty-section-wrap .woocommerce-table--order-details tfoot tr:last-child th,
.dv-ty-section-wrap .woocommerce-table--order-details tfoot tr:last-child td,
.dv-ty-section-wrap table.shop_table tfoot tr:last-child th,
.dv-ty-section-wrap table.shop_table tfoot tr:last-child td{
  font-weight:600;
  font-size:16px;
  padding-top:14px;
  border-top:1px solid #E5E7EB;
}
.dv-ty-section-wrap .woocommerce-table__product-total,
.dv-ty-section-wrap .product-total{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* Payment method value (and Subtotal/Total amounts) — never wrap.
   v358 tried `td.method` — WC 8.x tfoot td has NO class attribute at all
   (verified via DevTools console: all tfoot td className is empty).
   Safe to blanket-nowrap all tfoot td since values are either short money
   amounts or payment-method names; neither benefits from wrapping. */
.dv-ty-section-wrap .woocommerce-table--order-details tfoot td,
.dv-ty-section-wrap table.shop_table tfoot td{
  white-space:nowrap;
}
.dv-ty-section-wrap .woocommerce-table__product-name a,
.dv-ty-section-wrap .product-name a{
  color:#1F2937;
  text-decoration:none;
  font-weight:500;
}
.dv-ty-section-wrap .woocommerce-table__product-name a:hover,
.dv-ty-section-wrap .product-name a:hover{
  color:#3B6BA5;
}
/* "Payment method" footer row specifically */
.dv-ty-section-wrap .woocommerce-table--order-details tfoot .woocommerce-table__label,
.dv-ty-section-wrap table.shop_table tfoot th{
  text-align:left;
  font-weight:500;
  color:#1F2937;
}

/* Downloads block (if digital) — hide for now, DV has no digital products */
.dv-ty-section-wrap .woocommerce-order-downloads{display:none}

/* Customer details — 2-column grid for billing + shipping addresses */
.dv-ty-section-wrap .woocommerce-customer-details address{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:14px;
  line-height:1.7;
  color:#1F2937;
  font-style:normal;
  padding:0;
  border:0;
  background:transparent;
}
.dv-ty-section-wrap .woocommerce-columns--addresses{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin:0;
}
.dv-ty-section-wrap .woocommerce-columns--addresses .woocommerce-column{
  padding:0;
}
.dv-ty-section-wrap .woocommerce-customer-details--email,
.dv-ty-section-wrap .woocommerce-customer-details--phone{
  color:#6b7280;
  font-size:13px;
  margin-top:6px;
}

/* Order again button (if present) — we keep hidden for Phase 1 */
.dv-ty-section-wrap .woocommerce-order-again{display:none}

/* ──── 5. SUPPORT ──── */
.dv-ty-support{
  margin:40px 0 0;
  text-align:center;
  padding:40px 24px 24px;
  border-top:1px solid #E5E7EB;
}
.dv-ty-support-inner{
  max-width:520px;
  margin:0 auto;
}
.dv-ty-support-heading{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:400;
  font-size:20px;
  color:#1F2937;
  margin:0 0 10px;
  letter-spacing:0.01em;
}
.dv-ty-support-text{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:14px;
  color:#6b7280;
  line-height:1.6;
  margin:0 0 22px;
  font-weight:300;
}
.dv-ty-support-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.dv-ty-support-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 26px;
  background:#1F2937;
  color:#fff;
  border:1px solid #1F2937;
  border-radius:4px;
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  text-decoration:none;
  transition:all 0.15s ease;
}
.dv-ty-support-btn:hover{
  background:#3B6BA5;
  border-color:#3B6BA5;
  color:#fff;
}
.dv-ty-support-link{
  font-family:"Outfit", -apple-system, sans-serif;
  font-size:13px;
  color:#3B6BA5;
  text-decoration:none;
  font-weight:500;
  letter-spacing:0.02em;
  padding:11px 0;
}
.dv-ty-support-link:hover{
  color:#1F2937;
  text-decoration:underline;
}

/* ──── RESPONSIVE — TABLET ──── */
@media (max-width: 820px){
  .dv-thankyou-shell{
    padding:56px 20px 64px;
  }
  .dv-ty-timeline{
    padding:28px 20px;
  }
  .dv-ty-section-wrap .woocommerce-order-details,
  .dv-ty-section-wrap .woocommerce-customer-details{
    padding:24px;
  }
}

/* ──── RESPONSIVE — MOBILE ──── */
@media (max-width: 600px){
  .dv-thankyou-shell{
    padding:40px 16px 56px;
  }
  .dv-ty-hero{
    padding-bottom:36px;
  }
  .dv-ty-hero-meta{
    gap:10px;
    font-size:13px;
  }
  .dv-ty-meta-label{
    font-size:10px;
  }
  .dv-ty-meta-value{
    font-size:13px;
  }
  .dv-ty-hero-divider{
    margin:28px auto 20px;
  }

  /* Timeline becomes vertical on mobile */
  .dv-ty-timeline{
    padding:26px 20px;
  }
  .dv-ty-steps{
    grid-template-columns:1fr;
    gap:18px;
  }
  .dv-ty-step{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    gap:14px;
    text-align:left;
    padding:0;
  }
  .dv-ty-step-node{
    margin:0;
  }
  /* Vertical connector */
  .dv-ty-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:30px;
    left:14px;
    right:auto;
    bottom:-18px;
    width:1px;
    height:auto;
    background:#E5E7EB;
  }
  .dv-ty-step--done:not(:last-child)::after{
    background:#3B6BA5;
    opacity:0.4;
  }
  .dv-ty-step-body{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .dv-ty-step-title{
    font-size:14px;
  }
  .dv-ty-step-caption{
    font-size:12px;
  }

  /* Address cards stack */
  .dv-ty-section-wrap .woocommerce-order-details,
  .dv-ty-section-wrap .woocommerce-customer-details{
    padding:22px 20px;
  }
  .dv-ty-section-wrap .woocommerce-columns--addresses{
    grid-template-columns:1fr;
    gap:24px;
  }

  /* Mobile order table — keep table semantics, make denser */
  .dv-ty-section-wrap .woocommerce-table--order-details,
  .dv-ty-section-wrap table.shop_table{
    font-size:13px;
  }
  .dv-ty-section-wrap .woocommerce-table--order-details tbody td,
  .dv-ty-section-wrap table.shop_table tbody td{
    padding:14px 0;
  }

  /* Support actions stack */
  .dv-ty-support{
    padding:32px 16px 8px;
    margin-top:28px;
  }
  .dv-ty-support-heading{
    font-size:18px;
  }
  .dv-ty-support-actions{
    flex-direction:column;
    gap:10px;
  }
  .dv-ty-support-btn{
    width:100%;
    padding:13px 24px;
  }
}

/* V37h: mobile/tablet nav icon spacing fix
   Hide the logged-in account dropdown wrapper itself (not only its inner icon),
   then force Search / Wishlist / Cart / Menu into identical 24px slots with
   one consistent gap. */
@media(max-width:1024px){
  .nav-icons{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:18px!important;
    column-gap:18px!important;
  }
  .nav-icons>.dv-user-dropdown,
  .nav-icons>.nav-icon-user{
    display:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .nav-icons>.nav-icon-link:not(.nav-icon-user),
  .nav-icons>.hamburger{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 24px!important;
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:24px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .nav-icons>.nav-icon-link:not(.nav-icon-user) svg{
    display:block!important;
    width:22px!important;
    height:22px!important;
  }
  .nav-icons>.hamburger{
    flex-direction:column!important;
    gap:5px!important;
  }
  .nav-icons>.hamburger span{
    width:22px!important;
    height:2px!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
}
@media(max-width:768px){
  .nav-icons{gap:16px!important;column-gap:16px!important}
}

/* V40o: PDP title natural wrapping on mobile/tablet.
   The title should use the full available line before wrapping; do not let
   side controls or aggressive word wrapping force early/broken lines. */
@media(max-width:1024px){
  .pi-title{
    width:100%;
    max-width:none;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:manual;
  }
  .pi-title-row{
    position:relative;
    display:block;
    width:100%;
  }
  .pi-title-row .pi-title{
    display:block;
    width:100%;
    max-width:none;
    min-width:0;
    padding-right:0;
  }
  .pi-title-row .dv-wish-btn-pdp{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
  }
}
/* V40r: narrow tablet PDP title wrap fix, layout-safe.
   Do NOT change PDP grid columns, gallery width, image sizing, or gap here.
   Only adjust the title text and detach the heart button from title flow. */
@media(min-width:769px) and (max-width:900px){
  .pi-title-row{
    position:relative!important;
    display:block!important;
    width:100%!important;
  }
  .pi-title,
  .pi-title-row .pi-title{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding-right:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:manual!important;
    font-size:clamp(24px,3.15vw,28px)!important;
    line-height:1.25!important;
  }
  .pi-title-row .dv-wish-btn-pdp{
    position:absolute!important;
    top:0!important;
    right:0!important;
    z-index:2!important;
  }
}


/* V40s: PDP title wrapping final guard — layout-safe.
   Do not touch PDP grid/gallery/image sizing. This only gives the title
   its own line width and moves the wishlist heart out of the text line on
   narrow phones/folds, so text can fill the row before natural word wrap. */
@media(max-width:1024px){
  .pi-title-row{
    position:relative!important;
    display:block!important;
    width:100%!important;
  }
  .pi-title,
  .pi-title-row .pi-title{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding-right:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:manual!important;
    text-wrap:normal!important;
  }
  .pi-title-row .dv-wish-btn-pdp{
    position:absolute!important;
    right:0!important;
    z-index:2!important;
  }
}
@media(min-width:769px) and (max-width:1024px){
  .pi-title,
  .pi-title-row .pi-title{
    font-size:clamp(24px,2.75vw,28px)!important;
    line-height:1.25!important;
  }
  .pi-title-row .dv-wish-btn-pdp{
    top:0!important;
  }
}
@media(max-width:768px){
  .pi-title,
  .pi-title-row .pi-title{
    font-size:clamp(22px,6.2vw,24px)!important;
    line-height:1.24!important;
    letter-spacing:-.01em!important;
  }
  .pi-title-row .dv-wish-btn-pdp{
    top:-50px!important;
  }
}


/* V40t: mobile/tablet PDP wishlist button position refinement.
   Keep all PDP layout untouched. Only move the heart button to the top-right
   beside the bestseller pill, instead of floating over the title area. */
@media(max-width:1024px){
  .product-info{position:relative!important}
  .pi-tag{
    display:inline-flex!important;
    max-width:calc(100% - 64px)!important;
    margin-right:64px!important;
  }
  .pi-title-row{
    position:static!important;
  }
  .pi-title-row .dv-wish-btn-pdp{
    position:absolute!important;
    top:0!important;
    right:0!important;
    margin-top:0!important;
    z-index:3!important;
  }
}


/* V40w: keep add-to-cart redirect to cart, but hide the green success notice.
   Error/info notices remain visible. */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.page-template-page-cart .woocommerce-notices-wrapper .woocommerce-message,
body[class*="page-cart"] .woocommerce-notices-wrapper .woocommerce-message{
  display:none!important;
}


/* V41h: PDP trust badges icon alignment fix.
   Make both columns use stable column widths so the lower right check icon
   aligns exactly under the upper right one on desktop, tablet, and mobile. */
.trust-badges{
  display:grid;
  grid-template-columns:max-content max-content;
  justify-content:space-between;
  align-items:start;
  gap:10px 24px;
}
.trust-badge{
  display:grid;
  grid-template-columns:18px auto;
  align-items:center;
  column-gap:8px;
}
.trust-badge:nth-child(even){justify-self:start}
.trust-badge .t-text{line-height:1.2}


/* V45k: global product-title fallback for templates without inline styles. */
@media(max-width:768px){
  .prod-name,.related-name{font-size:clamp(12px,2.9vw,12.5px);line-height:1.2;letter-spacing:-.052em;word-spacing:-.065em;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:manual;text-wrap:wrap;min-height:calc(1.2em * 2);max-height:calc(1.2em * 2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px}
  .prod-info,.related-info{padding-left:2px;padding-right:2px}
  .prod-prices,.related-price{margin-top:auto}
}
@media(max-width:374px){.prod-name,.related-name{font-size:11.4px;line-height:1.2}}
@media(min-width:769px) and (max-width:900px){.prod-name,.related-name{font-size:13.5px;line-height:1.2;letter-spacing:-.04em;word-spacing:-.05em;text-wrap:wrap;min-height:calc(1.2em * 2);max-height:calc(1.2em * 2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
/* Hide Klaviyo newsletter checkbox on checkout */
#kl_newsletter_checkbox_field { display:none !important; }


/* v52l — Stripe validation message readability.
   Stripe UPE content lives in an iframe, so the PHP Appearance API above is
   the primary fix. These rules are fallback support for legacy/non-UPE Stripe
   markup where error nodes are still in the page DOM. */
.dv-co-card-slot .stripe-source-errors,
.dv-co-card-slot .woocommerce-error,
.dv-co-card-slot .wc-stripe-error,
.dv-co-card-slot .stripe-error-message,
.dv-co-card-slot .StripeElement + .woocommerce-error,
.dv-co-card-slot .form-row .woocommerce-error,
.dv-co-card-slot .form-row [class*="error"]{
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
  line-height:1.3!important;
  font-size:12px!important;
}

/* Legacy Stripe Elements fallback: card number gets the full first row, Exp/CVC
   share a wider second row so their validation text is not cramped. */
.dv-co-card-slot fieldset#wc-stripe-upe-form > p.form-row,
.dv-co-card-slot fieldset.wc-upe-form > p.form-row,
.dv-co-card-slot fieldset.wc-payment-form > p.form-row{
  min-width:0!important;
  box-sizing:border-box!important;
}
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-card-element_field,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-card-element_field,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-card-element_field,
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-card,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-card,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-card{
  display:block!important;
  width:100%!important;
  margin-right:0!important;
}
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-exp-element_field,
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-exp-element_field,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-exp-element_field,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-exp,
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-cvc,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-exp,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-cvc,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-exp,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-cvc{
  display:inline-block!important;
  width:calc(50% - 8px)!important;
  margin-right:16px!important;
  vertical-align:top!important;
}
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-cvc-element_field,
.dv-co-card-slot fieldset#wc-stripe-upe-form > p#stripe-cvc,
.dv-co-card-slot fieldset.wc-upe-form > p#stripe-cvc,
.dv-co-card-slot fieldset.wc-payment-form > p#stripe-cvc{
  margin-right:0!important;
}