/**
 * Small layout fixes (loaded after refine.css).
 *
 * 1. Carousels (rails): left edge lines up with the page content, right side
 * runs on to the edge of the screen so the next card peeks in.
 *
 * Applies to every rail inside a page container: homepage Activities +
 * Weekly Dose, "Other vineyards", and the "more like this" rails. The wine
 * page's related rail already had its own full-width version.
 */

/* How far the page content sits in from the screen edge (0 on screens narrower than the container). */
:root { --vd-bleed: max(0px, calc((100vw - var(--vd-container)) / 2)); }

/* The bleed must never cause a sideways page scroll. `clip` (unlike hidden) keeps the sticky header working. */
body { overflow-x: clip; }

.vd-container .vd-rail,
.vd-container .vy-other {
	margin-right: calc(-1 * (var(--vd-bleed) + var(--vd-pad, 0px))); /* carousels still run to the right edge */
}

/* Space after the last card: scrolled to the end, it lines up with the content's right edge. */
.vd-container .vd-rail::after,
.vd-container .vy-other::after {
	content: "";
	flex: 0 0 max(1px, calc(var(--vd-bleed) + var(--vd-pad, 0px) - var(--vd-gap, 24px)));
}

/* 2. Footer: more space between the contact block and the two link columns. */
.vd-footer__cols { margin-top: 56px; }
@media (max-width: 900px) { .vd-footer__cols { margin-top: 36px; } }

/* 3. Listing pages: dim the results while a filter loads (assets/js/filters.js). */
.vd-vy-browse .vd-shop-grid,
.vd-vy-browse .vd-vy-grid { transition: opacity .2s ease; }
.vd-vy-browse.is-loading .vd-shop-grid,
.vd-vy-browse.is-loading .vd-vy-grid,
.vd-vy-browse.is-loading .vd-vy-empty { opacity: .35; pointer-events: none; }

/* 4. Activity cards: price, date, place and winery in the same soft grey as the
      article card text (title stays dark). The flag replaces the pin icon. */
.vd-ev-card__meta li { color: var(--vd-muted); }
.vd-ev-card__meta .woocommerce-Price-amount,
.vd-ev-card__meta .amount,
.vd-ev-card__meta ins,
.vd-ev-card__meta bdi { color: inherit; }
.vd-ev-card__meta .vd-ev-flag { flex: 0 0 19px; width: 19px; text-align: center; font-size: 1.1em; }

/* --------------------------------------------------------------------------
   5. Cards look the same on every page (homepage = the reference).
      Card markup lives in template-parts/cards/; these rules undo the
      page-specific overrides that made them drift apart.
   -------------------------------------------------------------------------- */

/* 5a. WooCommerce's own listing styles shrink card titles to 1em and add a
       gap under images on the shop pages. Put them back to the card's own values. */
.woocommerce ul.products li.product .vd-card__title { padding: 0; margin: 0 0 6px; font-size: var(--vd-fs-h2); }
.woocommerce ul.products li.product .vd-ev-card__title { padding: 0; margin: 0 0 18px; font-size: var(--vd-fs-h3); }
.woocommerce ul.products li.product .vd-card__media img,
.woocommerce ul.products li.product .vd-ev-card__media img { margin: 0; height: 100%; box-shadow: none; }

/* 5b. Wine listing: same grid + card sizes as the homepage wine section
       (was 5 smaller cards per row with a smaller title and price). */
.woocommerce ul.products.vd-shop-grid--wine { grid-template-columns: repeat(4, 1fr) !important; gap: var(--vd-gutter); }
@media (max-width: 1024px) { .woocommerce ul.products.vd-shop-grid--wine { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .woocommerce ul.products.vd-shop-grid--wine { grid-template-columns: 1fr !important; } }
.vd-shop-grid--wine .vd-card__body { padding: 100px 22px 26px; margin-top: -80px; }
.vd-shop-grid--wine .vd-card__price { font-size: var(--vd-fs-h3); }

/* 5c. Vineyard card: title like the homepage vineyard title, supporting text
       in the same soft grey + regular weight as the article / activity cards. */
.vd-vy-card__name { font-weight: 400; }
.vd-vy-card__loc,
.vd-vy-card__desc { color: var(--vd-muted); font-weight: 400; }
.vd-vy-card__loc { font-size: var(--vd-fs-sm); }

/* "Other vineyards" rail now uses the same vineyard card. */
.vy-other { align-items: stretch; }
.vy-other > .vd-vy-card { flex: 0 0 auto; width: clamp(300px, 30vw, 400px); scroll-snap-align: start; }


/* 6. Footer: Terms / Privacy / Cookie moved under the subscribe box (left column). */
.vd-footer__legal-wrap { margin-top: 22px; max-width: 440px; font-size: var(--vd-fs-xs); /* same as the copyright line */ letter-spacing: .5px; text-transform: uppercase; font-weight: 600; }
.vd-footer__legal-wrap .vd-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.vd-footer__legal-wrap .vd-footer__legal li { list-style: none; }
.vd-footer__legal-wrap .vd-footer__legal li + li::before { content: "/"; opacity: .4; margin-inline: 8px; }
.vd-footer__legal-wrap a { color: inherit; text-decoration: none; }
.vd-footer__legal-wrap a:hover { text-decoration: underline; }

/* 7. Carousels can be dragged with the mouse (assets/js/drag.js). */
@media (hover: hover) and (pointer: fine) {
	.vd-rail, .vy-other, .vd-vineyard__viewport { cursor: grab; }
}
.vd-rail.is-dragging, .vy-other.is-dragging, .vd-vineyard__viewport.is-dragging,
.vd-rail.is-dragging *, .vy-other.is-dragging *, .vd-vineyard__viewport.is-dragging * { cursor: grabbing !important; user-select: none; }
.vd-rail.is-dragging, .vy-other.is-dragging { scroll-snap-type: none !important; scroll-behavior: auto; }
.vd-rail.is-dragging a, .vy-other.is-dragging a { pointer-events: none; }
.vd-vineyard__viewport { touch-action: pan-y; }   /* sideways swipes go to the slider, up/down still scrolls the page */
.vd-vineyard-track.is-dragging { transition: none !important; }

/* 8. Vineyards page featured vineyard: matches the blog's featured story. */
.vd-vym__overlay .vb-feature__label { margin-bottom: 14px; }
.vd-vym__loc { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; } /* same size as the blog's date / read time */
.vd-vym__feature .vd-btn__arrow { display: inline-block; transition: transform .5s var(--vd-ease); }
.vd-vym__feature:hover .vd-btn__arrow { transform: translateX(5px); }

/* Vineyard cards: same smooth lift + image zoom as the blog cards. */
.vd-vy-card:hover { transform: translateY(-4px); box-shadow: var(--vd-shadow-card); }
.vd-vy-card__media { display: block; overflow: hidden; }

/* 9. Vineyards page heading: title and intro centred on each other, like the blog page. */
.vd-vym__head { align-items: center; }
.vd-vym__intro { align-self: auto; margin: 0; }
/* --------------------------------------------------------------------------
   10. One hover feel for every image card and feature image, site-wide.
       The blog page is the reference: slow, smooth image zoom + gentle lift.
       Change these numbers here to change it everywhere (now and for new cards).
   -------------------------------------------------------------------------- */
:root {
	--vd-hover-zoom: 1.05;      /* how much the image grows */
	--vd-hover-zoom-dur: 1.2s;  /* how slowly it grows */
	--vd-hover-lift-dur: .5s;   /* how slowly a card lifts */
}

/* Image zoom */
.vd-card__media img,
.vd-ev-card__media img,
.vd-vy-card__media img,
.vd-vineyard-slide .vd-vineyard-card img,
.vd-featured__tile img,
.vd-vym__feature img,
.vb-card__media img,
.vb-feature img {
	transition: transform var(--vd-hover-zoom-dur) var(--vd-ease);
	will-change: transform;
}
.vd-card:hover .vd-card__media img,
.vd-ev-card:hover .vd-ev-card__media img,
.vd-vy-card:hover .vd-vy-card__media img,
.vd-vineyard-slide:hover .vd-vineyard-card img,
.vd-featured__tile:hover img,
.vd-vym__feature:hover img,
.vb-card:hover .vb-card__media img,
.vb-feature:hover img {
	transform: scale(var(--vd-hover-zoom));
}

/* Card lift (same speed everywhere) */
.vd-card,
.vd-ev-card,
.vd-vy-card,
.vb-card {
	transition: transform var(--vd-hover-lift-dur) var(--vd-ease), box-shadow var(--vd-hover-lift-dur) var(--vd-ease);
}
.vd-ev-card:hover { transform: translateY(-4px); }

/* Arrow on feature buttons slides right on hover */
.vd-featured__tile .vd-btn__arrow { display: inline-block; transition: transform .5s var(--vd-ease); }
.vd-featured__tile:hover .vd-btn__arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.vd-card__media img, .vd-ev-card__media img, .vd-vy-card__media img, .vd-vineyard-slide .vd-vineyard-card img,
	.vd-featured__tile img, .vd-vym__feature img, .vb-card__media img, .vb-feature img { transition: none; }
}

/* --------------------------------------------------------------------------
   11. Country flags on Windows
   Windows has no flag emojis (it shows "PT", "HK"…). This font only covers
   the flag characters, so everything else keeps its normal font.
   Flag artwork: Twemoji by Twitter, CC-BY 4.0. Font: country-flag-emoji-polyfill (MIT).
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Twemoji Country Flags";
	src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
	unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
	font-display: swap;
}
.vd-flag-emoji {
	font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-style: normal;
}
/* --------------------------------------------------------------------------
   12. "Our partners" strip: winery logos from the portal (inc/customizer.php)
   Square winery logos read small at the 40px used for wide wordmarks.
   On shop / product pages WooCommerce sets every image to "height: auto",
   which blew the logos up to full size — the ".vd-marquee img" rules below win.
   -------------------------------------------------------------------------- */
.vd-marquee img.vd-marquee__logo {
	height: 40px !important; width: auto !important; max-width: 200px !important;
	object-fit: contain; display: block; margin: 0;
}
.vd-marquee img.vd-marquee__logo--winery { height: 64px !important; max-width: 160px !important; }
.vd-marquee a.vd-marquee__item { transition: opacity .3s var(--vd-ease); }
.vd-marquee a.vd-marquee__item:hover { opacity: .7; }
@media (max-width: 600px) { .vd-marquee img.vd-marquee__logo--winery { height: 52px !important; } }

/* --------------------------------------------------------------------------
   13. Wine rails ("People who like this also like…"): every card the same
       height. An old "height: 100%" stopped the cards stretching to match
       the tallest one, so the white boxes ended at different heights.
   -------------------------------------------------------------------------- */
.vd-rail--wine { align-items: stretch; }
.vd-rail--wine > .vd-card { height: auto; align-self: stretch; }
.vd-rail--wine > .vd-card .vd-card__body { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   14. Country page — /country/portugal/ (taxonomy-product_country.php)
   -------------------------------------------------------------------------- */
.vd-ctry { padding-bottom: 40px; }
.vd-ctry .vd-container { padding-inline: var(--vd-gutter); }
.vd-ctry__head { padding-top: 72px; padding-bottom: 24px; text-align: center; }
.vd-ctry__eyebrow {
	margin: 0 0 10px; color: var(--vd-coral); font-weight: 700;
	font-size: var(--vd-fs-sm); text-transform: uppercase; letter-spacing: .08em;
}
.vd-ctry__title {
	display: inline-flex; align-items: center; gap: 18px; margin: 0;
	font-family: var(--vd-font-serif); font-style: italic; font-weight: 300;
	font-size: var(--vd-fs-hero); line-height: 1.05;
}
.vd-ctry__title .vd-flag-emoji { font-style: normal; font-size: .8em; }
.vd-ctry__intro { max-width: 60ch; margin: 16px auto 0; color: var(--vd-muted); font-size: var(--vd-fs-body); line-height: 1.5; }

.vd-ctry__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.vd-ctry__chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
	border: 1.5px solid var(--vd-border-soft); border-radius: var(--vd-radius-pill); background: var(--vd-white);
	color: var(--vd-ink); text-decoration: none; font-weight: 600; font-size: var(--vd-fs-sm);
	transition: border-color .3s var(--vd-ease), background .3s var(--vd-ease);
}
.vd-ctry__chip:hover { border-color: var(--vd-ink); }
.vd-ctry__chip.is-on { background: var(--vd-ink); border-color: var(--vd-ink); color: #fff; }
.vd-ctry__chip .vd-flag-emoji { font-size: 1.2em; }

.vd-ctry__sec { padding-top: 56px; }
.vd-ctry__sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vd-ctry__h2 { margin: 0; font-family: var(--vd-font-serif); font-style: italic; font-weight: 400; font-size: var(--vd-fs-page); line-height: 1.1; }
.vd-ctry__all {
	display: inline-flex; align-items: center; gap: 8px; color: var(--vd-ink); text-decoration: none;
	font-weight: 700; font-size: var(--vd-fs-sm); text-transform: uppercase; letter-spacing: .04em;
	border-bottom: 1.5px solid var(--vd-ink-30); padding-bottom: 2px; transition: border-color .3s var(--vd-ease);
}
.vd-ctry__all:hover { border-color: var(--vd-ink); }
.vd-ctry__all span { display: inline-block; transition: transform .5s var(--vd-ease); }
.vd-ctry__all:hover span { transform: translateX(4px); }
.vd-ctry__arrows { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.vd-ctry__empty { text-align: center; font-size: var(--vd-fs-body); }
.vd-ctry .vd-rail--wine > * { width: clamp(240px, 22vw, 300px); }

@media (max-width: 760px) {
	.vd-ctry__head { padding-top: 48px; }
	.vd-ctry__title { font-size: var(--vd-fs-page); gap: 12px; }
	.vd-ctry__h2 { font-size: var(--vd-fs-subtitle); }
	.vd-ctry__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--vd-gutter) * -1); padding: 0 var(--vd-gutter) 6px; scrollbar-width: none; }
	.vd-ctry__chips::-webkit-scrollbar { display: none; }
	.vd-ctry__chip { flex: none; }
}

/* Country chips on listing pages (?country=portugal) — under the filter tabs. */
.vd-vy-tabs.vd-ctry-filter { gap: 10px; margin-top: -16px; }
.vd-ctry-filter .vd-ctry__chip { padding: 8px 16px; }
@media (max-width: 760px) {
	.vd-vy-tabs.vd-ctry-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--vd-gutter) * -1); padding: 0 var(--vd-gutter) 6px; scrollbar-width: none; }
	.vd-ctry-filter::-webkit-scrollbar { display: none; }
	.vd-ctry-filter .vd-ctry__chip { flex: none; }
}

/* ==========================================================================
   15. Booking popups — typed guest number between − and +
   (Activities, Stays and Venues all use .vd-bk-step with an input)
   ========================================================================== */
.vd-bk-step { align-items: center; }
.vd-bk-step input.vd-bk-qty {
	width: 64px; height: 44px; box-sizing: border-box;
	padding: 0 4px; margin: 0;
	border: 1px solid var(--vd-border, #e3dadd); border-radius: 10px;
	background: var(--vd-white, #fff); color: var(--vd-ink);
	font-family: inherit; font-size: 1.2rem; font-weight: 700; text-align: center;
	-moz-appearance: textfield; appearance: textfield;
}
.vd-bk-step input.vd-bk-qty::-webkit-outer-spin-button,
.vd-bk-step input.vd-bk-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vd-bk-step input.vd-bk-qty:focus { outline: none; border-color: var(--vd-coral); box-shadow: 0 0 0 3px rgba(239, 81, 48, .18); }

/* ==========================================================================
   16. Pop-ups — centred on screen, over the header
   (booking pop-ups for Activities, Stays and Venues; the cart "Refresh prices"
   pop-up and the age check are already centred and sit higher still)
   ========================================================================== */
.vd-bk-ov { z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
.vd-bk-ov .vd-bk-modal { max-height: calc(100vh - 40px); }

/* ==========================================================================
   17. Booking card — "No dates open right now" (Activities)
   ========================================================================== */
.vd-bk-empty { margin-top: 16px; padding: 18px; border: 1px dashed var(--vd-border, #e3dadd); border-radius: 14px; background: var(--vd-surface, #faf6f3); }
.vd-bk-empty__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--vd-ink); }
.vd-bk-empty__text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--vd-muted); }
.vd-bk-empty__btn { display: block; margin-top: 16px; text-align: center; text-decoration: none; box-sizing: border-box; }

/* ==========================================================================
   18. Vineyard cards — title + description match the blog cards
   (blog.css .vb-card__title / .vb-card__ex). No "View vineyard" button:
   the whole card is the link.
   ========================================================================== */
.vd-vy-card { position: relative; }
.vd-vy-card .vd-vy-card__name { font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: 1.85rem; line-height: 1.15; margin: 0; }
.vd-vy-card .vd-vy-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.vd-vy-card .vd-vy-card__desc { margin: 0; color: var(--vd-muted); font-size: 1.125rem; font-weight: 550; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-vy-card:hover .vd-vy-card__name a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ==========================================================================
   19. Activity / venue cards on the listing pages = homepage cards.
   WooCommerce styles every list inside .products (margin + clearfix
   ::before/::after), which added empty rows to the card's info list.
   ========================================================================== */
.woocommerce .products .vd-ev-card__meta { margin: 0; padding: 0; list-style: none; }
.woocommerce .products .vd-ev-card__meta::before,
.woocommerce .products .vd-ev-card__meta::after { content: none; display: none; }
.woocommerce .products .vd-ev-card__meta li { margin: 0; }

/* ==========================================================================
   20. Activity / Venue / Stay listings: 4 cards per row
   (3 on narrower laptops; woocommerce.css takes it to 2 then 1 below 1024px)
   ========================================================================== */
.woocommerce ul.products.vd-shop-grid--event { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1280px) and (min-width: 1025px) {
	.woocommerce ul.products.vd-shop-grid--event { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   21. Space before the footer: Vineyards + Blog match Activity / Venue / Stay
   (those listings leave 64px under the card grid, then the section padding)
   ========================================================================== */
.vd-vy-browse .vd-vy-grid { margin-bottom: 64px; }

/* ==========================================================================
   22. Vineyard page facts (closer to the Figma): plain sans headings, lists
   joined by " / " with small icons, at most 3 lines then "…".
   ========================================================================== */
.vy-facts h3 { font-family: var(--vd-font-sans); font-style: normal; font-weight: 600; font-size: 1.3rem; color: var(--vd-muted); }
.vy-list { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.1rem; line-height: 1.9; }
.vy-list__item { white-space: nowrap; }
.vy-list__sep { color: var(--vd-muted); }
.vy-ic { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; color: var(--vd-ink); }

/* ==========================================================================
   23. Vineyard page — Photos (big photo left, 2 x 2 on the right; count as a
   small raised number after the title, like the Figma)
   ========================================================================== */
.vy-photos__title { display: flex; align-items: flex-start; gap: 6px; }
.vy-photos__count { font-size: .5em; line-height: 1; margin-top: .2em; font-style: italic; }
.vy-photos { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: var(--vd-radius-lg); overflow: hidden; }
.vy-photos a { border-radius: 0; display: block; }
.vy-photos a:first-child { grid-row: 1 / 3; }
.vy-photos--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.vy-photos--2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.vy-photos--2 a:first-child { grid-row: auto; }
.vy-photos--3 { grid-template-columns: 2fr 1fr; }
.vy-photos--4 a:last-child { grid-column: 2 / 4; }
@media (max-width: 700px) {
	.vy-photos, .vy-photos--2, .vy-photos--3 { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
	.vy-photos a:first-child { grid-column: 1 / -1; grid-row: auto; height: 220px; }
	.vy-photos a { height: 140px; }
	.vy-photos--4 a:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   24. Vineyard photos — "See all N photos" tile + full-screen viewer
   (assets/js/vy-photos.js)
   ========================================================================== */
.vy-photo { position: relative; cursor: zoom-in; }
.vy-photo--more { cursor: pointer; }
.vy-photo--more img { filter: blur(3px) brightness(.6); transform: scale(1.06); }
.vy-photo__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .3px; }
.vy-photo__more::after { content: "\2192"; }

.vy-lb { position: fixed; inset: 0; z-index: 10001; background: rgba(20, 8, 20, .94); color: #fff; display: flex; flex-direction: column; }
.vy-lb[hidden] { display: none; }
.vy-lb__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 18px; flex: 0 0 auto; }
.vy-lb__foot { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; height: 72px; }
.vy-lb__count { font-size: 1.1rem; font-weight: 600; letter-spacing: .5px; }
.vy-lb__tools { display: flex; gap: 10px; }
.vy-lb__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.vy-lb__btn svg { width: 22px; height: 22px; }
.vy-lb__btn:hover, .vy-lb__nav:hover { background: rgba(255,255,255,.2); }
.vy-lb__stage { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 76px; }
.vy-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; cursor: zoom-in; }
.vy-lb.is-zoomed .vy-lb__stage { overflow: auto; display: block; padding: 0; cursor: grab; }
.vy-lb.is-zoomed.is-dragging .vy-lb__stage { cursor: grabbing; }
.vy-lb.is-zoomed .vy-lb__img { max-width: none; max-height: none; border-radius: 0; cursor: inherit; }
.vy-lb.is-zoomed .vy-lb__nav { display: none; }
.vy-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 1.4rem; cursor: pointer; }
.vy-lb__nav--prev { left: 14px; }
.vy-lb__nav--next { right: 14px; }
@media (max-width: 700px) {
	.vy-lb__stage { padding: 0; }
	/* phone: ← 5 / 11 → together at the bottom */
	.vy-lb__nav { top: auto; bottom: 10px; transform: none; }
	.vy-lb__nav--prev { left: calc(50% - 110px); }
	.vy-lb__nav--next { right: calc(50% - 110px); }
}

/* ==========================================================================
   25. Vineyard page — "Other vineyards" photo carousel (name on the photo)
   ========================================================================== */
.vd-rail--vyphoto > * { width: clamp(280px, 30vw, 380px); }
.vy-ocard { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--vd-radius-lg); overflow: hidden; color: #fff; text-decoration: none; }
.vy-ocard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--vd-hover-lift-dur, .5s) var(--vd-ease, ease); }
.vy-ocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.vy-ocard:hover img { transform: scale(var(--vd-hover-zoom, 1.05)); }
.vy-ocard__title { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font-family: var(--vd-font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* ==========================================================================
   26. Side margins everywhere (phones, tablets and laptops up to ~1540px):
   page content and the footer never touch the screen edge. Same side space
   as the header logo (--vd-gutter: 16px on phones). Wide screens unchanged.
   Carousels still run off the right edge (section 1 above).
   ========================================================================== */
:root { --vd-pad: clamp(0px, calc(var(--vd-gutter) - (100vw - var(--vd-container)) / 2), var(--vd-gutter)); }
.vd-container { padding-inline: var(--vd-pad); }
@media (max-width: 600px) {
	:root { --vd-gutter: 16px; }
	/* Slimmer header on phones: less space around the logo. */
	.vd-header { padding: 10px var(--vd-gutter); }
	.vd-logo--img img,
	.vd-logo--img .custom-logo { max-height: 42px; width: auto; height: auto; }
	.vd-logo__mark { width: 48px; height: 30px; }
}

/* ==========================================================================
   27. Page tops follow the About page ("About Vinding"): the same big title
       and the same space above it — Vineyards, Blog, Wine, and the
       Activity / Venue / Stay "Of The Month" blocks. (Blog: assets/css/blog.css, .vb-intro.)
       About = 100px above a 72px title (tablet + phone: 120px, smaller title).
   ========================================================================== */
.vd-vy-archive > .vd-vym:first-child { padding-top: 92px; }   /* + the page's own 8px = 100px */
.vd-vy-archive > .vd-shop-intro:first-child { padding-top: 44px; } /* breadcrumb sits in the space; the title lines up with the others */
.vd-vym__title { font-size: var(--vd-fs-hero); line-height: 1.05; }
@media (max-width: 1024px) {
	.vd-vy-archive > .vd-vym:first-child { padding-top: 112px; }
	.vd-vy-archive > .vd-shop-intro:first-child { padding-top: 64px; }
	.vd-vym__title { font-size: var(--vd-fs-page); }
}
/* Space between the top block and the grey search band (shop pages had none). */
.vd-shop-archive.has-top .vd-vy-browse { margin-top: 40px; }

/* Wine page: big rounded photo under the title, like the About page. */
.vd-shop-intro .vd-breadcrumb { margin: 0 0 24px; }
.vd-shop-intro__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--vd-radius-lg); margin: 0; }
@media (max-width: 600px) { .vd-shop-intro__hero img { aspect-ratio: 4 / 3; } }
/* Search bars never push the button off a narrow phone. */
.vd-vy-search input, .vb-search input { min-width: 0; }
/* ==========================================================================
   28. About page title gets a description beside it (like Vineyards / Wine);
       vineyard page title = About size; cover + photos zoom like the cards.
   ========================================================================== */
.vd-page-title--split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.vd-page-title__text { margin: 0; color: var(--vd-ink); line-height: 1.7; }
@media (max-width: 760px) { .vd-page-title--split { grid-template-columns: 1fr; gap: 16px; } }

.vy-title { font-size: var(--vd-fs-hero); line-height: 1.05; }
@media (max-width: 1024px) { .vy-title { font-size: var(--vd-fs-page); } }

/* Cover opens the photo viewer; cover + photo tiles zoom gently on hover. */
.vy-hero__zoom { display: block; cursor: zoom-in; }
.vy-photo { overflow: hidden; }
.vy-hero__main img,
.vy-photo img { transition: transform var(--vd-hover-zoom-dur) var(--vd-ease), filter .4s ease; will-change: transform; }
.vy-hero__zoom:hover img,
.vy-photo:hover img { transform: scale(var(--vd-hover-zoom)); }
.vy-photo--more:hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .vy-hero__main img, .vy-photo img { transition: none; } }
/* "About the vineyard" card (wine, activity, stay, venue pages): the photo
   zooms on hover like the other cards. The photo is a background image, so a
   copy of it sits in ::before and that copy grows; the text stays still. */
a.vd-vineyard-card[style]::before {
	content: ""; position: absolute; inset: 0;
	background: inherit; background-size: cover; background-position: center;
	transition: transform var(--vd-hover-zoom-dur) var(--vd-ease); will-change: transform;
}
a.vd-vineyard-card[style]:hover::before { transform: scale(var(--vd-hover-zoom)); }
a.vd-vineyard-card[style] .vd-vineyard-learn { transition: transform .5s var(--vd-ease); }
a.vd-vineyard-card[style]:hover .vd-vineyard-learn { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { a.vd-vineyard-card[style]::before { transition: none; } }