/* Vander Vloet Family Farm - interaction and detail layer.
   Everything structural is built with Elementor containers and widgets; this
   file only carries the states and refinements the free builder cannot express.
   Hover states are a client requirement, so they live here as one reviewable set. */

:root{
  --vv-navy:#14294B; --vv-navy-deep:#0E1E38; --vv-green:#24491F; --vv-green-h:#183512;
  --vv-gold:#F2A93B; --vv-gold-h:#FFC163; --vv-cream:#FBF8F1; --vv-cream-band:#F2EFE6;
  --vv-ink:#26303C; --vv-muted:#5A6472; --vv-label:#8C8574; --vv-rule:#E6E1D6;
  --vv-rule-soft:#EDE8DE; --vv-link-h:#1B5FA8; --vv-swatch:#E9E4D8;
  --vv-f-text:#C3CEE0; --vv-f-muted:#93A4C0; --vv-f-link:#A9B7CE; --vv-f-rule:#26395A;
  --vv-ease:180ms cubic-bezier(.2,.7,.3,1);
}

body{ background:var(--vv-cream); }

/* Square corners are a held rule across the whole system. */
.vv-square, .vv-square *, .elementor-button, .wpr-mega-menu input, input, select, textarea{ border-radius:0 !important; }

/* ---------- announcement bar ---------- */
.vv-announce .elementor-widget-heading .elementor-heading-title{ margin:0; }
@media (max-width:767px){
  .vv-announce{ text-align:center; }
  .vv-announce .vv-announce-sep{ display:none; }
}

/* ---------- header ---------- */
.vv-header{ position:relative; z-index:50; }
/* Elementor containers default to --width:100%, so the nav column claimed the
   whole row and pushed the logo and cart onto their own lines. */
.vv-header > .e-con-inner{ flex-wrap:nowrap !important; }
.vv-nav{ width:auto !important; flex:1 1 auto !important; min-width:0; }
.vv-header .vv-logo{ flex:0 0 auto !important; }
.vv-logo img{ transition:opacity var(--vv-ease); }
.vv-logo a:hover img{ opacity:.72; }

/* Primary navigation: blue with a gold underline on hover, per the brand. */
.vv-nav .wpr-nav-menu > li > a,
.vv-nav .wpr-mega-menu > li > a{
  position:relative;
  border-bottom:3px solid transparent;
  transition:color var(--vv-ease), border-color var(--vv-ease);
}
.vv-nav .wpr-nav-menu > li > a:hover,
.vv-nav .wpr-nav-menu > li.current-menu-item > a,
.vv-nav .wpr-mega-menu > li > a:hover,
.vv-nav .wpr-mega-menu > li.current-menu-item > a{
  color:var(--vv-link-h) !important;
  border-bottom-color:var(--vv-gold) !important;
}
.vv-nav .wpr-nav-menu li a .wpr-menu-item-hr-line,
.vv-nav .wpr-nav-menu li a .wpr-menu-item-vr-line{ display:none !important; }

/* Mega panel: a full-bleed white sheet anchored to the bottom of the header
   band. Royal's own full-width rule sets width:100vw with a negative left,
   which widened the document past the viewport, so the panel is positioned
   against .vv-header instead. */
.vv-header{ position:relative; }
.vv-nav .wpr-sub-mega-menu{
  top:100% !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  max-width:100vw;
  transform:none !important;
  background:#fff;
  border-top:1px solid var(--vv-rule);
  border-bottom:1px solid var(--vv-rule);
  box-shadow:0 24px 40px -20px rgba(20,41,75,.28);
}

/* Account link */
.vv-account a{ color:var(--vv-muted) !important; transition:opacity var(--vv-ease); }
.vv-account a:hover{ opacity:.72; }

/* Cart */
.vv-cart .elementor-button{ letter-spacing:.08em; }

/* ---------- buttons ---------- */
.elementor-button{ transition:background-color var(--vv-ease), color var(--vv-ease), border-color var(--vv-ease); }

/* ---------- link treatments ---------- */
/* Gold-underlined text link used for section "more" links. */
.vv-underlink .elementor-heading-title a,
.vv-underlink .elementor-heading-title{
  display:inline-block; padding-bottom:5px;
  border-bottom:2px solid var(--vv-gold);
  transition:color var(--vv-ease), border-color var(--vv-ease);
}
.vv-underlink:hover .elementor-heading-title,
.vv-underlink:hover .elementor-heading-title a{ color:var(--vv-green-h) !important; border-bottom-color:var(--vv-green); }

.vv-underlink-gold .elementor-heading-title,
.vv-underlink-gold .elementor-heading-title a{
  display:inline-block; padding-bottom:5px;
  border-bottom:2px solid var(--vv-gold);
  transition:color var(--vv-ease);
}
.vv-underlink-gold:hover .elementor-heading-title,
.vv-underlink-gold:hover .elementor-heading-title a{ color:var(--vv-gold) !important; }

/* Mega-menu links and tiles */
.vv-mega-link .elementor-heading-title a{ transition:color var(--vv-ease), padding-left var(--vv-ease); display:inline-block; }
.vv-mega-link:hover .elementor-heading-title a{ color:var(--vv-link-h) !important; padding-left:5px; }
.vv-mega-tile img{ transition:opacity var(--vv-ease), transform 420ms cubic-bezier(.2,.7,.3,1); }
.vv-mega-tile:hover img{ opacity:.86; transform:scale(1.04); }
.vv-mega-tile .elementor-widget-image{ overflow:hidden; }
.vv-mega-tile:hover .elementor-heading-title a{ color:var(--vv-link-h) !important; }

/* ---------- hero ---------- */
.vv-hero{ position:relative; }
.vv-hero h1{ text-wrap:balance; }
.vv-hero em{ font-style:italic; }

/* Card imagery fills the card width and crops to the set height, so a row of
   cards lines up regardless of the source photo's aspect ratio. */
.vv-card .elementor-widget-image,
.vv-mega-tile .elementor-widget-image{ width:100% !important; overflow:hidden; }
.vv-card .elementor-widget-image .elementor-widget-container,
.vv-mega-tile .elementor-widget-image .elementor-widget-container{ width:100%; }
/* Elementor wraps a linked image in an inline-block <a>, which shrink-wraps to
   the photo's own aspect ratio - so width:100% on the img resolved against the
   image rather than the card. The wrapper has to be a block first. */
.vv-card .elementor-widget-image a,
.vv-mega-tile .elementor-widget-image a{ display:block; width:100%; }
.vv-card .elementor-widget-image img,
.vv-mega-tile .elementor-widget-image img{
  width:100% !important; max-width:100%; display:block;
  object-fit:cover; object-position:center center;
}
.vv-card{ height:100%; }
/* The image keeps its own height; only the text box takes up the slack.
   Forcing height:100% on the text box collapses the image to nothing. */
.vv-card > .elementor-widget-image{ flex:0 0 auto; }

/* Nav items sit tighter so five of them plus the logo and cart hold one row
   on a 1280px laptop. */
.vv-nav .wpr-nav-menu > .menu-item{ margin-left:4px !important; margin-right:4px !important; }
.vv-nav .wpr-nav-menu > .menu-item > a{ white-space:nowrap; }
@media (max-width:1400px){
  .vv-nav .wpr-nav-menu > .menu-item{ margin-left:2px !important; margin-right:2px !important; }
  .vv-nav .wpr-nav-menu .wpr-menu-item{ padding-left:8px !important; padding-right:8px !important; }
}

/* ---------- product cards ---------- */
.vv-card{
  background:#fff;
  border:1px solid var(--vv-rule);
  transition:border-color var(--vv-ease), box-shadow var(--vv-ease), transform var(--vv-ease);
}
.vv-card:hover{
  border-color:var(--vv-green);
  box-shadow:0 18px 30px -18px rgba(20,41,75,.30);
  transform:translateY(-3px);
}
.vv-card a{ text-decoration:none; }

/* Royal product grid, dressed to match the design's card. */
.vv-grid .wpr-grid-item-inner{
  background:#fff;
  border:1px solid var(--vv-rule);
  transition:border-color var(--vv-ease), box-shadow var(--vv-ease), transform var(--vv-ease);
}
.vv-grid .wpr-grid-item:hover .wpr-grid-item-inner{
  border-color:var(--vv-green);
  box-shadow:0 18px 30px -18px rgba(20,41,75,.30);
  transform:translateY(-3px);
}
.vv-grid .wpr-grid-media-wrap img{ transition:transform 420ms cubic-bezier(.2,.7,.3,1); }
.vv-grid .wpr-grid-item:hover .wpr-grid-media-wrap img{ transform:scale(1.035); }

/* Price-per-pound line under a price. */
.vv-perlb{ display:block; margin-top:3px; color:var(--vv-label); font:700 12px/1.4 Lato,Helvetica,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- weight language ---------- */
.vv-weight-note{ margin:22px 0; border-top:1px solid var(--vv-rule); border-bottom:1px solid var(--vv-rule); padding:6px 0; }
.vv-weight-row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--vv-rule-soft);
  font:400 15px/1.4 Lato,Helvetica,Arial,sans-serif; color:var(--vv-muted);
}
.vv-weight-row:last-of-type{ border-bottom:0; }
.vv-weight-row strong{ color:var(--vv-navy); font-weight:700; }
.vv-weight-explain{ margin:12px 0 4px; font:400 14.5px/1.6 Lato,Helvetica,Arial,sans-serif; color:var(--vv-muted); }

.vv-cart-meta{ display:block; margin-top:4px; font:700 12px/1.4 Lato,Helvetica,Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--vv-label); }
.vv-cart-meta.vv-ok{ color:var(--vv-green); }
.vv-weight-total th, .vv-weight-total td{ border-top:1px solid var(--vv-rule) !important; }

.vv-authorise-note{
  background:#F6F2E8; border-left:4px solid var(--vv-green);
  padding:18px 22px; margin:0 0 24px;
  font:400 15px/1.65 Lato,Helvetica,Arial,sans-serif; color:var(--vv-ink);
}
.vv-authorise-note strong{ color:var(--vv-navy); }
.vv-line-note{
  background:#fff; border:1px solid var(--vv-rule); border-left:4px solid var(--vv-gold);
  padding:16px 20px; margin:0 0 22px;
  font:400 14.5px/1.6 Lato,Helvetica,Arial,sans-serif; color:var(--vv-muted);
}
.vv-line-note strong{ color:var(--vv-navy); }

/* ---------- footer ---------- */
.vv-footer a{ color:var(--vv-f-link) !important; transition:color var(--vv-ease), padding-left var(--vv-ease); }
.vv-footer a:hover{ color:#fff !important; padding-left:4px; }
.vv-footer .wpr-nav-menu{ display:block; }
.vv-footer .wpr-nav-menu li{ display:block; margin:0 0 12px; }
.vv-footer .wpr-nav-menu li a{
  padding:0 !important;
  font:400 14.5px/1.4 Lato,Helvetica,Arial,sans-serif;
  border:0 !important;
}
.vv-footer .wpr-nav-menu li a:hover{ background:transparent !important; }

/* Newsletter row */
.vv-sub input[type=email]{
  width:100%; background:transparent; border:1px solid var(--vv-f-input);
  padding:17px 20px; font:400 14.5px Lato,Helvetica,Arial,sans-serif; color:#fff;
}
.vv-sub input[type=email]::placeholder{ color:var(--vv-f-place); }
.vv-sub input[type=email]:focus{ outline:none; border-color:var(--vv-gold); }

/* ---------- text detail ---------- */
.vv-measure p{ max-width:66ch; }
.vv-lead p:last-child, .vv-body p:last-child{ margin-bottom:0; }
a{ transition:color var(--vv-ease); }

/* Empty-state panel used where the farm has yet to supply a catalogue. */
.vv-empty{
  border:1px dashed #C9BFA6;
  background:repeating-linear-gradient(45deg,#F7F4EC 0 12px,#F1ECE0 12px 24px);
}

/* WPForms, dressed to the brand. */
.vv-form .wpforms-field-label{
  font:900 11.5px/1.3 Lato,Helvetica,Arial,sans-serif !important;
  letter-spacing:.2em; text-transform:uppercase; color:var(--vv-label) !important;
}
.vv-form input[type=text], .vv-form input[type=email], .vv-form input[type=tel],
.vv-form input[type=url], .vv-form select, .vv-form textarea{
  border:1px solid var(--vv-rule) !important; border-radius:0 !important;
  background:#fff !important; padding:14px 16px !important;
  font:400 16px Lato,Helvetica,Arial,sans-serif !important; color:var(--vv-ink) !important;
  transition:border-color var(--vv-ease), box-shadow var(--vv-ease);
}
.vv-form input:focus, .vv-form select:focus, .vv-form textarea:focus{
  border-color:var(--vv-green) !important;
  box-shadow:0 0 0 3px rgba(36,73,31,.12) !important; outline:none !important;
}
.vv-form .wpforms-submit{
  background:var(--vv-green) !important; color:var(--vv-cream) !important;
  border:0 !important; border-radius:0 !important; padding:16px 34px !important;
  font:700 13.5px Lato,Helvetica,Arial,sans-serif !important;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--vv-ease);
}
.vv-form .wpforms-submit:hover{ background:var(--vv-green-h) !important; }

/* WooCommerce, minimally aligned to the brand rather than restyled wholesale. */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .woocommerce input.button{
  background:var(--vv-green) !important; color:var(--vv-cream) !important;
  border-radius:0 !important; font:700 13.5px Lato,Helvetica,Arial,sans-serif !important;
  letter-spacing:.08em; text-transform:uppercase; padding:14px 26px !important;
  transition:background-color var(--vv-ease);
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover,
.woocommerce input.button:hover{ background:var(--vv-green-h) !important; }
.woocommerce .price{ color:var(--vv-navy) !important; font-weight:700; }

/* Notice used when a basket would mix the two product lines. */
.woocommerce-error{
  border-top-color:var(--vv-green) !important; background:#F6F2E8 !important;
  color:var(--vv-ink) !important; border-radius:0 !important;
}

/* ---------- responsive ---------- */
/* Royal swaps its own desktop list for a burger at its tablet breakpoint, so
   .vv-nav must stay visible - hiding it removed the mobile menu entirely. */
@media (max-width:1024px){
  .vv-nav{ flex:0 0 auto !important; }
  .vv-header > .e-con-inner{ justify-content:space-between; }
}
@media (max-width:767px){
  .vv-footer-cols{ gap:34px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .vv-card:hover, .vv-grid .wpr-grid-item:hover .wpr-grid-item-inner{ transform:none; }
}