/* ==========================================================================
Vinding — Refinement layer
Loaded AFTER main.css. Pixel-polish toward the Home / About / Contact
design frames + the floating "Contact Us" badge. Everything here is an
additive override so the base theme stays intact and reviewable.
========================================================================== */
/* --------------------------------------------------------------------------
1. Floating "Contact Us" spinning badge (global, all pages)
Two clinking wine glasses, "CONTACT US ·" text spinning around them.
-------------------------------------------------------------------------- */
.vd-contact-badge {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 60;
width: 128px;
height: 128px;
display: block;
color: var(--vd-cream);
filter: drop-shadow(0 8px 22px rgba(30, 8, 20, 0.28));
transition: transform var(--vd-dur) var(--vd-ease);
-webkit-tap-highlight-color: transparent;
}
.vd-contact-badge:hover { transform: scale(1.06); }
.vd-contact-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vd-contact-badge__disc { fill: #F74C25; }
.vd-contact-badge__glyph path { fill: #FED0BB; }
.vd-contact-badge__glyph .vd-badge-wine { fill: #730B3C; }
.vd-contact-badge__ring text {
font-family: var(--vd-font-sans);
font-weight: 700;
font-size: 10.5px; /* viewBox is 151 now, so smaller than before */
letter-spacing: 2px;
text-transform: uppercase;
fill: #FED0BB;
}
/* the fix */
.vd-contact-badge__ring {
transform-box: view-box;
transform-origin: 75px 75px; /* true centre of the 0 0 151 151 viewBox */
animation: vd-badge-spin 16s linear infinite;
}
@keyframes vd-badge-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
.vd-contact-badge { width: 92px; height: 92px; right: 16px; bottom: 16px; }
.vd-contact-badge__ring text { font-size: 17px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.vd-contact-badge__ring { animation: none; }
}
/* --------------------------------------------------------------------------
2. Section background helper (lime band sections on the home page)
-------------------------------------------------------------------------- */
.vd-section--accent { background: var(--vd-accent); color: var(--vd-ink); }
/* --------------------------------------------------------------------------
3. Pagination dots (testimonials / membership / rails)
-------------------------------------------------------------------------- */
.vd-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.vd-dots span {
width: 8px; height: 8px; border-radius: 50%;
background: var(--vd-ink-30);
}
.vd-dots span.is-active { background: var(--vd-ink); width: 22px; border-radius: 99px; }
/* --------------------------------------------------------------------------
4. Membership heading — repeated faded marquee like the design
-------------------------------------------------------------------------- */
.vd-membership-head { text-align: center; overflow: hidden; }
.vd-membership-head .vd-eyebrow { color: var(--vd-muted); display: block; margin-bottom: 20px; }
.vd-membership-head .vd-head-repeat span { font-weight: 300; }
/* --------------------------------------------------------------------------
5. Wine filter tabs spacing tweak under "A Wine of Occasion"
-------------------------------------------------------------------------- */
.vd-wines-tabs { margin-top: -8px; margin-bottom: 44px; }
.vd-wines-actions { display: flex; justify-content: center; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
/* small sale / new flag on wine cards (shows only if .vd-flag is present) */
.vd-wine-card { position: relative; }
.vd-flag {
position: absolute; top: 14px; left: 14px; z-index: 3;
display: inline-flex; align-items: center; gap: 5px;
height: 26px; padding: 0 12px; border-radius: var(--vd-radius-pill);
background: var(--vd-coral); color: #fff;
font-family: var(--vd-font-sans); font-weight: 700;
font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
}
.vd-flag--new { background: var(--vd-ink); }
/* --------------------------------------------------------------------------
6. Promo split — match design proportions (image ~40% / content ~60%)
-------------------------------------------------------------------------- */
@media (max-width: 1024px) { .vd-promo { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
7. Featured vineyards — "New Vind / Discover" block (home, above Get in Touch)
-------------------------------------------------------------------------- */
.vd-featured__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vd-gap); align-items: start; }
.vd-featured__head { margin: 0 0 20px; }
.vd-featured__label { font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: var(--vd-fs-page); line-height: 1; color: var(--vd-muted); margin: 0; }
.vd-featured__sub { font-family: var(--vd-font-sans); font-size: var(--vd-fs-body); color: var(--vd-muted); margin: 8px 0 0; }
.vd-featured__tile {
position: relative; border-radius: var(--vd-radius-lg); overflow: hidden;
aspect-ratio: 16 / 13; color: var(--vd-cream); display: flex; align-items: flex-end;
}
.vd-featured__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-featured__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.62)); }
.vd-featured__body { position: relative; z-index: 2; padding: 32px; }
.vd-featured__origin { display: flex; align-items: center; gap: 8px; font-family: var(--vd-font-sans); font-size: var(--vd-fs-sm); margin: 0 0 6px; opacity: 0.95; }
.vd-featured__name { font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: var(--vd-fs-page); line-height: 1.05; margin: 0; }
.vd-featured__excerpt { font-family: var(--vd-font-serif); font-style: italic; font-size: var(--vd-fs-h2); margin: 14px 0 0; font-weight:400; }
@media (max-width: 900px) { .vd-featured__grid { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
8. Header — match the design's minimal bar
(logo left · Join as vendor · Sign up · globe). No centre menu / cart on
desktop, exactly as the frames show. Mobile keeps the burger + full menu.
-------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.vd-header .vd-nav__menu { display: none; } /* design shows no centre nav */
.vd-header .vd-cart-link { display: none; } /* design shows no cart icon */
.vd-header .vd-nav { gap: 0; }
.vd-header__right { gap: 22px; }
}
/* Sign-up pill sits a touch tighter to match the frame */
.vd-header .vd-vendor-link { letter-spacing: 0.4px; }
/* --------------------------------------------------------------------------
9. Footer partners band — lime, with monogram + wordmark pattern
-------------------------------------------------------------------------- */
.vd-footer__partners {
background: var(--vd-accent);
border-bottom: 1px solid rgba(30, 8, 20, 0.12);
padding-block: 40px;
}
.vd-footer__partner-logos { gap: 56px; }
.vd-footer__partner { display: inline-flex; align-items: center; opacity: 0.9; }
.vd-footer__partner--firestone { font-family: var(--vd-font-serif); font-style: normal; font-weight: 500; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
.vd-footer__partner--lockwood { font-family: var(--vd-font-serif); font-style: italic; font-weight: 500; font-size: 24px; }
.vd-footer__partner--mono {
width: 38px; height: 38px; border-radius: 6px;
background: var(--vd-ink); color: var(--vd-accent);
align-items: center; justify-content: center;
font-family: var(--vd-font-serif); font-style: italic; font-size: 20px; font-weight: 600;
}
/* --------------------------------------------------------------------------
10. About — differentiator tab icons + minor copy alignment
-------------------------------------------------------------------------- */
.vd-about-tabs__btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
.vd-about-tabs__btn .vd-about-tabs__ico { display: inline-flex; }
/* --------------------------------------------------------------------------
11. Contact form — red required marks + phone country-code prefix
-------------------------------------------------------------------------- */
.vd-req { color: var(--vd-coral); font-weight: 700; }
.vd-phone { display: grid; }
.vd-phone select {
width: 100%; padding: 0 0 14px 10px; border: 1px solid transparent;
font-family: var(--vd-font-sans); font-size: var(--vd-fs-sm); color: var(--vd-ink);
}
.vd-contact-box .vd-field input,
.vd-contact-box .vd-field textarea,
.vd-contact-box .vd-phone select { border-color: transparent; }
.vd-contact-box .vd-field input:focus,
.vd-contact-box .vd-field textarea:focus,
.vd-contact-box .vd-phone select:focus { outline: 2px solid rgba(30,8,20,0.25); }
/* consent row styling inside contact form */
.vd-contact-box .wpcf7 .vd-option { font-size: var(--vd-fs-xs); color: var(--vd-ink-70); line-height: 1.4; border: none; background: transparent; padding: 0; margin-top: 16px; }
.vd-contact-box .wpcf7 .vd-field--check { margin-top: 20px; }
/* --------------------------------------------------------------------------
13. Footer menu columns — kill the bullet markers
(wp_nav_menu outputs even with the stripped, so list-style shows)
-------------------------------------------------------------------------- */
.vd-footer__col ul,
.vd-footer__col li { list-style: none; margin: 0; padding: 0; }
.vd-footer__col li { display: block; }
.vd-footer__col li a { display: inline-block; padding: 7px 0; }
/* --------------------------------------------------------------------------
14. Footer logo when it's the site logo image (not the text wordmark)
-------------------------------------------------------------------------- */
.vd-footer__logo--img { display: inline-block; margin-bottom: 28px; }
.vd-footer__logo--img img,
.vd-footer__logo--img .custom-logo { max-height: 64px; width: auto; height: auto; display: block; }
/* --------------------------------------------------------------------------
15. Partners marquee (right-to-left, seamless loop, pause on hover)
Replaces the static centred row when real Partner logos exist.
-------------------------------------------------------------------------- */
.vd-marquee {
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vd-marquee__track { display: flex; width: max-content; animation: vd-marquee 38s linear infinite; }
.vd-marquee__group { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.vd-marquee__item { display: inline-flex; align-items: center; }
.vd-marquee__logo { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }
@keyframes vd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vd-marquee__track { animation: none; } }
/* --------------------------------------------------------------------------
16. Contact Form 7 compatibility — makes CF7 markup inherit the theme's
field styling. Harmless if CF7 isn't installed.
-------------------------------------------------------------------------- */
.wpcf7 .vd-field input,
.wpcf7 .vd-field textarea,
.wpcf7 .vd-field select { width: 100%; }
/* phone row: country-code select + number, two columns */
.wpcf7 .vd-phone .wpcf7-form-control-wrap { display: block; margin: 0; }
.wpcf7 .vd-phone p {
display: grid;
grid-template-columns: 92px 1fr;
margin: 0;
}
/* Contact page form — white container with red/orange border on yellow background */
.vd-contact-box .wpcf7 .vd-form { background: var(--vd-white); border: 3px solid var(--vd-coral); border-radius: 24px; }
.vd-contact-box .wpcf7 .vd-field input,
.vd-contact-box .wpcf7 .vd-field select { border-bottom: 2px solid var(--vd-coral); background: var(--vd-white); }
.vd-contact-box .wpcf7 .vd-field input::placeholder,
.vd-contact-box .wpcf7 .vd-field textarea::placeholder { color: var(--vd-ink-50); }
.vd-contact-box .wpcf7 .vd-field input:focus,
.vd-contact-box .wpcf7 .vd-field select:focus { border-bottom: 2px solid var(--vd-coral); outline: none; }
.vd-contact-box .wpcf7 .vd-field textarea { border: 0; outline: none; }
.vd-contact-box .wpcf7 input[type="submit"] { background: var(--vd-coral); color: var(--vd-white); border: none; border-radius: 32px; padding: 16px 48px; font-weight: 700; font-size: var(--vd-fs-h3); cursor: pointer; width: 100%; transition: all var(--vd-dur); text-transform: uppercase; letter-spacing: 1px; }
.vd-contact-box .wpcf7 input[type="submit"]:hover { background: #ff6b47; transform: scale(1.02); }
.vd-contact-box .wpcf7 br { display: none; }
.vd-contact-box .wpcf7-spinner { display: none; }
/* footer newsletter row built from CF7 controls */
.vd-footer__news .wpcf7-form-control-wrap { flex: 1; margin: 0; }
.vd-footer__news .wpcf7-form-control-wrap input[type="email"] { background: transparent; border: 0; color: #fff; font-family: var(--vd-font-sans); font-size: var(--vd-fs-sm); font-weight: 600; width: 100%; }
.vd-footer__news .wpcf7-form-control-wrap input[type="email"]::placeholder { color: rgba(255,255,255,0.8); }
.vd-footer__news .wpcf7-form-control-wrap input[type="email"]:focus { outline: none; }
.vd-footer__news input[type="submit"] {
background: transparent; border: 0; color: #fff;
font-size: 22px; line-height: 1; width: auto; flex: 0 0 auto; padding: 0; cursor: pointer;
}
.wpcf7 .wpcf7-spinner { margin: 8px auto 0; }
.wpcf7 .wpcf7-not-valid-tip { color: #ffd9cf; font-size: var(--vd-fs-xs); }
.wpcf7-response-output { border-radius: var(--vd-radius-sm); font-size: var(--vd-fs-sm); }
/* --------------------------------------------------------------------------
17. Section heading marquee (replaces the static .vd-head-repeat)
Footer-style continuous scroll, full-bleed, generously spaced.
-------------------------------------------------------------------------- */
.vd-section-head--marquee { overflow: visible; } /* allow the full-bleed marquee out */
.vd-head-marquee {
width: 100vw;
margin-left: calc(50% - 50vw); /* break out of the container */
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vd-head-marquee__track { display: flex; width: max-content; animation: vd-head-marquee 45s linear infinite; }
.vd-head-marquee__row { display: flex; align-items: center; flex: 0 0 auto; }
.vd-head-marquee__row span {
font-family: var(--vd-font-serif);
font-style: italic;
font-weight: 300;
font-size: var(--vd-fs-hero);
line-height: 1.2;
color: var(--vd-ink-30);
white-space: nowrap;
padding: 0 60px; /* the "spacing" — tweak to spread more/less */
}
@keyframes vd-head-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vd-head-marquee__track { animation: none; } }
/* --------------------------------------------------------------------------
18. Vineyard "Pick your sip" carousel — active centre raised, sides faded+lower
-------------------------------------------------------------------------- */
.vd-vineyard { position: relative; }
.vd-vineyard__viewport { overflow: hidden; padding: 32px 0; }
.vd-vineyard-track {
display: flex; gap: 28px; position: relative;
transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform;
}
.vd-vineyard-slide { flex: 0 0 auto; width: min(420px, 78vw); cursor: pointer; }
.vd-vineyard-slide.is-active { cursor: default; }
.vd-vineyard-card {
position: relative; border-radius: var(--vd-radius-lg); overflow: hidden;
aspect-ratio: 600 / 680; display: flex; align-items: flex-end; color: var(--vd-cream);
opacity: .6; transform: translateY(28px);
transition: opacity .5s, transform .5s;
}
.vd-vineyard-slide.is-active .vd-vineyard-card { opacity: 1; transform: translateY(0); }
.vd-vineyard-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-vineyard-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.66)); }
.vd-vineyard-card__body { position: relative; z-index: 2; padding: 28px; width: 100%; }
.vd-vineyard-card__title { font-family: var(--vd-font-serif); font-style: italic; font-weight: 400; font-size: var(--vd-fs-subtitle); margin: 0; }
.vd-vineyard-card__desc, .vd-vineyard-card__cta { display: none; }
.vd-vineyard-slide.is-active .vd-vineyard-card__desc { display: block; margin: 0 0 18px; font-size: var(--vd-fs-sm); line-height: 1.5; max-width: 42ch; }
.vd-vineyard-slide.is-active .vd-vineyard-card__cta { display: inline-flex; }
.vd-vineyard__dots { margin-top: 28px; }
.vd-vineyard__dots .vd-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--vd-ink-30); cursor: pointer; transition: width .25s, background .25s; }
.vd-vineyard__dots .vd-dot.is-active { width: 22px; border-radius: 99px; background: var(--vd-ink); }
/* --------------------------------------------------------------------------
19. Product badges (sale % top-left, tag seal top-right) + wine origin
-------------------------------------------------------------------------- */
.vd-card__media { position: relative; }
.vd-badge-sale {
position: absolute; top: 14px; left: 14px; z-index: 4;
background: var(--vd-coral); color: #fff;
font-family: var(--vd-font-sans); font-weight: 700; font-size: 13px; line-height: 1;
letter-spacing: .3px; padding: 7px 14px; border-radius: 999px;
}
.vd-badge-seal {
position: absolute; top: 12px; right: 12px; z-index: 4;
width: 65px; display: block; pointer-events: none;
}
.vd-badge-seal svg { width: 100%; height: auto; display: block; }
.vd-badge-seal__text {
position: absolute; top: 0; left: 0; right: 0; height: 72%;
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 0 16px;
font-family: var(--vd-font-sans); font-weight: 700; font-size: 10px; line-height: 1.12;
color: #1E0814;
}
/* wine card: vineyard name above title + origin (flag · region, country) */
.vd-card__brand { font-family: var(--vd-font-sans); font-weight: 600; font-size: var(--vd-fs-sm); color: var(--vd-muted); margin: 0 0 4px; }
.vd-card__origin { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.vd-flag-emoji { font-size: 1.15em; line-height: 1; }
.vd-flag-emoji img.emoji {position: unset;}
/* single product: same treatment around the title */
.vd-single-brand { font-family: var(--vd-font-sans); font-weight: 600; color: var(--vd-muted); margin: 0 0 6px; }
.vd-single-brand a { color: inherit; text-decoration: none; }
.vd-single-brand a:hover { color: var(--vd-coral); }
.vd-single-origin { display: flex; align-items: center; gap: 8px; color: var(--vd-ink-70); margin: 6px 0 0; }
/* Woo loop/single need a positioning context for the overlay badges */
.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
/* --------------------------------------------------------------------------
20. Consistent carousel nav row: centered "All X" pill + arrows on the right
-------------------------------------------------------------------------- */
.vd-carousel-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 40px; }
.vd-carousel-nav__all { grid-column: 2; justify-self: center; }
.vd-carousel-nav__arrows { grid-column: 3; justify-self: end; display: flex; gap: 12px; }
@media (max-width: 700px) {
.vd-carousel-nav { grid-template-columns: 1fr auto; }
.vd-carousel-nav__all { grid-column: 1; justify-self: start; }
.vd-carousel-nav__arrows { grid-column: 2; }
}
/* Weekly Dose now scrolls as a rail (3-up on desktop). */
.vd-rail--article > * { width: min(380px, 82vw); }
/* --------------------------------------------------------------------------
21. Plan a Visit (Custom Tour) — match Figma: stepper on page bg, yellow
step card, white field cards, coral active step + full-width coral Next.
-------------------------------------------------------------------------- */
/* The form itself is no longer a card — the progress sits on the page bg. */
.vd-ct-form { background: transparent; padding: 0; }
/* Stepper: active/done circles + label go coral, active gets a soft ring. */
.vd-ct-progress__dot.is-active .vd-ct-progress__num,
.vd-ct-progress__dot.is-done .vd-ct-progress__num { background: var(--vd-coral); }
.vd-ct-progress__dot.is-active .vd-ct-progress__num { box-shadow: 0 0 0 6px rgba(239, 81, 48, 0.18); }
.vd-ct-progress__dot.is-active .vd-ct-progress__label { color: var(--vd-coral); }
/* Each step becomes the big yellow card. */
.vd-ct-step { background: var(--vd-accent); border-radius: var(--vd-radius-lg); padding: 40px clamp(20px, 4vw, 56px) 48px; }
/* Field groups inside the step are white cards. */
.vd-ct-step .vd-field { background: var(--vd-white); border-radius: var(--vd-radius-md); padding: 22px 24px; gap: 14px; }
.vd-ct-step .vd-field > label { font-size: var(--vd-fs-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--vd-ink); }
.vd-ct-step .vd-field input,
.vd-ct-step .vd-field select,
.vd-ct-step .vd-field textarea { background: var(--vd-white); }
/* Options become plain rows inside the white card (no nested cards). */
.vd-ct-step .vd-options .vd-option { border: 0; background: transparent; padding: 8px 0; }
.vd-ct-step .vd-options .vd-option:hover { border: 0; }
.vd-ct-step .vd-options .vd-option:has( input:checked ) { border: 0; background: transparent; }
.vd-ct-step .vd-option input { accent-color: var(--vd-coral); width: 18px; height: 18px; }
/* Nav: the primary (coral) button stretches full width like the design. */
.vd-ct-step .vd-ct-nav { margin-top: 28px; }
.vd-ct-step .vd-ct-nav .vd-btn--coral { flex: 1 1 auto; justify-content: center; }
/* Pax select: person icon on the left. */
.vd-ct-step select[name="pax"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23730B3C'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 16px center;
background-size: 18px;
padding-left: 46px;
}
/* --------------------------------------------------------------------------
22. Plan a Visit — membership perks, phone w/ country code, step-7 contact look
-------------------------------------------------------------------------- */
/* Bare consent / membership checkbox sits flat inside its white card. */
.vd-ct-step .vd-field--consent > .vd-option,
.vd-ct-step .vd-field--membership > .vd-option { border: 0; background: transparent; padding: 4px 0; }
.vd-ct-step .vd-field--consent > .vd-option:hover,
.vd-ct-step .vd-field--membership > .vd-option:hover { border: 0; }
.vd-ct-step .vd-option input { accent-color: var(--vd-coral); }
/* Membership perks box */
.vd-perks { background: #efeae3; border-radius: var(--vd-radius-md); padding: 22px 26px; }
.vd-perks__intro { font-weight: 600; color: var(--vd-ink); margin: 0 0 14px; }
.vd-perks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vd-perks__list li { display: flex; align-items: center; gap: 10px; font-family: var(--vd-font-sans); font-weight: 700; letter-spacing: 0.5px; font-size: var(--vd-fs-sm); color: var(--vd-coral); }
.vd-perks__star { color: var(--vd-coral); flex: 0 0 auto; }
.vd-perks__foot { margin: 18px 0 0; color: var(--vd-ink); font-size: var(--vd-fs-sm); }
/* Phone field: country-code select + number */
.vd-phone { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.vd-phone__cc { width: auto; }
/* Step 7 ("Consent & Submission") — contact-form look: one white card, coral dividers */
.vd-ct-step--consent .vd-form { background: var(--vd-white); border: 3px solid var(--vd-coral); border-radius: var(--vd-radius-md); padding: 20px 0; }
.vd-ct-step--consent .vd-field { background: transparent; border-radius: 0; padding: 0; gap:0; }
.vd-ct-step--consent .vd-field label { padding-left: 10px; }
.vd-ct-step--consent .vd-field:last-child { border-bottom: 0; }
.vd-ct-step--consent .vd-field input,
.vd-ct-step--consent .vd-field select,
.vd-ct-step--consent .vd-field .vd-phone__cc { padding: 0 0 14px 10px; border-color: transparent; border-bottom: 2px solid var(--vd-coral); background: transparent; }
.vd-ct-step--consent .vd-field input:focus,
.vd-ct-step--consent .vd-field select:focus { outline: 0; border-bottom: 2px solid var(--vd-coral); }
/* --------------------------------------------------------------------------
23. Checkout (override templates) — 2-col grid, carded sections, coral CTA
-------------------------------------------------------------------------- */
.vd-checkout-wrap { max-width: 1180px; }
.vd-checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; margin-top: 40px;}
@media (max-width: 900px) { .vd-checkout-grid { grid-template-columns: 1fr; } }
/* Cards */
.vd-co-card,
.vd-checkout-aside {
background: var(--vd-white); border-radius: var(--vd-radius-lg);
padding: 20px; margin-bottom: 24px;
}
.vd-co-card #billing_first_name_field, .vd-co-card #billing_last_name_field {
width: unset;
}
.vd-checkout-aside #order_review { margin-bottom: 0; background: none;}
.vd-checkout-aside .product-total, .vd-checkout-aside .cart-subtotal td, .vd-checkout-aside .order-total td { text-align: right;}
.vd-co-card__title,
.woocommerce-checkout #order_review_heading {
font-family: var(--vd-font-sans); font-weight: 700; font-size: var(--vd-fs-h2); margin: 0 0 18px;
}
#vd-order-notes-toggle { margin: 0; }
.vd-checkout-aside { position: sticky; top: 100px; }
@media (max-width: 900px) { .vd-checkout-aside { position: static; } }
/* Coupon */
.woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; border-radius: var(--vd-radius-md) var(--vd-radius-md) 0 0; }
.woocommerce-form-coupon-toggle .woocommerce-info a { text-decoration: underline; }
.woocommerce form.checkout_coupon { margin:0; border: 0; background: var(--vd-white); border-radius: 0 0 var(--vd-radius-md) var(--vd-radius-md);}
.woocommerce-checkout-form-coupon { margin:0; }
/* Fields */
.woocommerce-checkout .form-row { margin: 0 0 16px; padding:0 !important;}
.woocommerce-checkout .form-row label { display: block; font-size: var(--vd-fs-sm); font-weight: 700; margin-bottom: 6px; text-transform: capitalize;}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap:10px; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
width: 100%; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-sm);
padding: 12px 14px; background: var(--vd-white); min-height: 0; box-sizing: border-box;
font-size: var(--vd-fs-sm);
}
.woocommerce-checkout .select2-container .select2-selection span {padding:0;}
.woocommerce-checkout .form-row textarea { border-radius: var(--vd-radius); }
/* Order summary table */
.woocommerce-checkout #order_review table.shop_table { border: 0; width: 100%; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { padding: 10px 0; border: 0; background: none;}
.woocommerce-checkout .vd-co-thumb img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 12px; }
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td { padding-top: 16px; }
.woocommerce-checkout .order-total .amount { color: var(--vd-coral); font-size: var(--vd-fs-h2); }
/* Total row: line above + below. Needs to out-specify the `td { border:0 }`
rule above + border-collapse so the cell borders actually paint. */
.woocommerce-checkout #order_review table.shop_table { border-collapse: collapse; }
.woocommerce-checkout #order_review table.shop_table tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tr.order-total td {
border-top: 2px solid var(--vd-ink-30);
border-bottom: 2px solid var(--vd-ink-30);
}
/* Coupon "Apply" + place order */
.woocommerce-checkout .coupon .button { background: var(--vd-accent); color: var(--vd-ink); border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; }
.woocommerce-checkout #place_order {
width: 100%; background: var(--vd-coral) !important; color: #fff !important; border: 0; border-radius: 999px;
padding: 18px 24px; font-weight: 700; font-size: var(--vd-fs-h2);
text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; margin-top: 8px;
}
.woocommerce-checkout #place_order:hover { background: #e0431f !important; }
.woocommerce-checkout #place_order::after { content: "\2197"; margin-left: 10px; display: inline-block; }
/* Payment box: yellow method header */
.woocommerce-checkout #payment { background: var(--vd-white) !important; border-radius: 0 !important; margin-top: 8px; border: 0 !important;}
.woocommerce-checkout #payment ul.payment_methods { border: 0; margin: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method > label { display: block; background: var(--vd-accent); padding: 5px 15px; border-radius: var(--vd-radius-sm) var(--vd-radius-sm) 0 0; font-family: var(--vd-font-sans);
font-weight: 600;
font-size: var(--vd-fs-sm);
letter-spacing: 2px;
text-transform: uppercase;}
.woocommerce-checkout #payment div.payment_box { background: var(--vd-surface-2); margin: 0; border-radius: 0 0 var(--vd-radius-sm) var(--vd-radius-sm);}
.woocommerce-checkout #payment div.payment_box::before { display: none;}
.woocommerce-checkout #payment .wc-payment-form {padding: 0;}
/* Privacy Policy */
.woocommerce-privacy-policy-text {
font-size:var(--vd-fs-sm);
text-align: center;
}
/* Trust badges (under the button) */
.vd-co-trust { list-style: none; padding: 40px 0 0; display: grid; gap: 14px; width:100%; }
.vd-co-trust li { display: flex; gap: 10px; align-items: flex-start; }
.vd-co-trust__star { color: var(--vd-ink); flex: 0 0 auto; margin-top: 2px; }
.vd-co-trust strong { display: block; text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--vd-fs-sm); }
.vd-co-trust li > span:last-child { font-size: var(--vd-fs-body); color: var(--vd-ink); }
/* --------------------------------------------------------------------------
24. Thank-you / order-received page
-------------------------------------------------------------------------- */
/* Hide the default Woo order/customer tables — we render our own summary. */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order-overview { display: none; }
.vd-ty { max-width: 880px; margin: 0 auto; text-align: center; }
.vd-ty__check { width: 64px; height: 64px; border-radius: 50%; background: var(--vd-coral); display: grid; place-items: center; margin: 0 auto 24px; }
.vd-ty__title { font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: var(--vd-fs-page); margin: 0; }
.vd-ty__sub { color: var(--vd-muted); margin: 16px 0 0; line-height: 1.6; }
.vd-ty__card { background: var(--vd-white); border-radius: var(--vd-radius-lg); padding: clamp(24px, 4vw, 48px); margin-top: 40px; text-align: left; }
.vd-ty__card-title { font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: var(--vd-fs-page); text-align: center; margin: 0 0 28px; }
.vd-ty__panel { background: var(--vd-surface); border-radius: var(--vd-radius); padding: clamp(20px, 3vw, 36px); }
.vd-ty__order-no { font-family: var(--vd-font-sans); font-weight: 700; font-size: var(--vd-fs-h1); margin: 0 0 24px; }
.vd-ty__label { font-family: var(--vd-font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--vd-fs-xs); color: var(--vd-ink); margin: 18px 0 4px; }
.vd-ty__value { color: var(--vd-ink-70); margin: 0; }
.vd-ty__rule { height: 1px; background: var(--vd-ink-30); margin: 22px 0; }
.vd-ty__totals { margin: 0; }
.vd-ty__totals > div { display: flex; justify-content: space-between; padding: 5px 0; }
.vd-ty__totals dt, .vd-ty__totals dd { margin: 0; }
.vd-ty__total { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--vd-fs-h2); color: var(--vd-coral); }
.vd-ty__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 640px) { .vd-ty__addresses { grid-template-columns: 1fr; } }
.vd-ty__addr { background: var(--vd-surface); border-radius: var(--vd-radius); padding: clamp(20px, 3vw, 32px); }
.vd-ty__addr h3 { font-family: var(--vd-font-sans); font-weight: 700; font-size: var(--vd-fs-h2); margin: 0 0 16px; }
.vd-ty__cta { width: 100%; justify-content: center; margin-top: 28px; }
@media (max-width: 600px) {
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}
/* Checkout: toggle checkboxes inside card titles (Ship to different / Add notes) */
.woocommerce-checkout .vd-co-card__title label.checkbox { display: inline-flex; align-items: center; gap: 10px; font: inherit; margin: 0; cursor: pointer; text-transform: none; }
.woocommerce-checkout .vd-co-card__title input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--vd-coral); }