/* ========== OWC Scotch — full layout/styles (fonts matched + tidy spacing) ========== */

/* ---- Base / typography ---- */
@charset "utf-8";
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  overflow-x:hidden;
  color:#000;
  font-family:'Abel', sans-serif;     /* display / headings / nav */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:100%;
  line-height:1.45;
}
img{ display:block; max-width:100%; height:auto; }

/* Global link styling (content + CTAs – nav/footer override as needed) */
a{
  color:#8f022c;                     /* wine accent */
  text-decoration:none;
}
a:hover,
a:focus{
  color:#8f022c;                     /* match navbar hover accent */
  text-decoration:underline;
}

/* ---- Vertical rhythm tokens ---- */
:root{
  --space-1:.5rem;   /* 8px */
  --space-2:1rem;    /* 16px */
  --space-3:1.5rem;  /* 24px */
  --space-4:2rem;    /* 32px */
  --overlay-bar-h:44px;

  /* shared vertical spacing + dynamic nav offset */
  --section-gap:.75rem;       /* gap between blocks */
  --nav-offset:4.5rem;        /* safe fallback, overwritten via JS */
}

/* Headline scales */
.title{
  font-family:'Abel',sans-serif;
  font-size:350%;
  margin:0 0 var(--space-2);
}
.title2{
  font-family:'Abel',sans-serif;
  font-size:250%;
  margin:0 0 var(--space-2);
}
.title3{
  font-family:'Abel',sans-serif;
  font-size:230%;
  margin:var(--space-1) 0 var(--space-2);
  font-weight:800;
}

/* Motto & text blocks */
.motto{
  font-family:'Abel',sans-serif;
  text-align:center;
  font-size:200%;
  opacity:.8;
  margin:0 0 var(--space-2);
}
.motto-title{
  font-family:'Abel',sans-serif;
  text-align:center;
  font-size:130%;
  opacity:.8;
  min-height:80px;
  max-height:80px;
  overflow:hidden;
}
.motto-title-wine{
  font-family:'Abel',sans-serif;
  text-align:center;
  font-size:130%;
  opacity:.8;
  min-height:120px;
  max-height:120px;
  overflow:hidden;
}

/* Body text classes — Open Sans + modern justification */
.txt{
  font-family:'Open Sans',sans-serif;
  text-align:justify;
  margin:0;
  line-height:1.7;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}
.txt-center{ text-align:center; }

/* Intro / feature copy — slightly larger */
.txt-place{
  font-family:'Open Sans',sans-serif;
  margin: var(--space-2) 0 var(--space-2);
  font-size:115%;
  line-height:1.7;
}

/* Trade / partner copy */
.txt-trade{
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  line-height:1.7;
}

/* Buttons / badges */
.bigbutt{
  display:inline-block; background-color:rgba(191,191,191,.80);
  border-radius:4px; border:2px solid rgba(191,191,191,1);
  width:100%; min-width:100%; text-align:center; color:#0b0b0b;
  font-size:150%; line-height:.9; padding:5px 0; box-shadow:3px 3px 5px rgba(0,0,0,.30);
  margin:var(--space-2) 0; text-decoration:none;
}
.bigbutt:hover{
  background-color:rgba(191,191,191,1);
  color:#8f022c;                 /* use accent on hover */
  text-decoration:inherit;
}

/* Utility */
.full-bleed{ width:100%; height:auto; display:block; }

/* ---- Background wrappers ---- */
.landing{ background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-position:top center; }
.bbg-whisky{ background-image:url(../assets/buy-whisky-bg.jpg); }
.bbg-red { background-image:url(../assets/red-wine-bg.jpg); }
.bbg-white { background-image:url(../assets/white-wine-bg.jpg); }
.bbg-rose { background-image:url(../assets/rose-wine-bg.jpg); }
.bbg4 { background-image:url(../assets/sparkling-wine-bg.jpg); }
@media (max-width:768px){ .bbg-whisky{ background-image:url(../assets/wine-bg-3-small.jpg); } }
@media (max-width:576px){ .bbg-whisky{ background-image:url(../assets/wine-bg-3-small.jpg); } }

/* ---- Content containers ---- */
.row-padding{ padding-left:35px; padding-right:35px; }

/* first content row: offset by fixed navbar + same gap as between blocks */
.row-top{
  margin-top: calc(var(--nav-offset) + var(--section-gap));
}

.row-white-2{
  background:rgba(255,255,255,.75);
  padding: var(--space-3) var(--space-4); /* more breathing room left/right */
  margin-bottom: var(--section-gap);
  border-radius:3px; box-shadow:3px 3px 5px rgba(0,0,0,.30);
}
.row-white-3{
  background:#fff;
  padding: var(--space-3) var(--space-4); /* match row-white-2 */
  margin: 0 .5% var(--section-gap);
  border-radius:3px; box-shadow:3px 3px 5px rgba(0,0,0,.30);
}
.row-white-2 > :first-child,
.row-white-3 > :first-child{ margin-top:0; }
.row-white-2 > :last-child,
.row-white-3 > :last-child{ margin-bottom:0; }

/* ===================================================================== */
/* ============ HANDPICKED & SPONSORED — same width, tight gap ========= */
/* ===================================================================== */
.handpicked-sponsored{ align-items:flex-start; }

.sponsored-padding-noLine{
  display:grid;                 /* consistent structure in each tile */
  grid-template-rows:auto auto auto; /* title / text / banner */
  row-gap:.5rem;
}
.sponsored-padding-noLine .motto{ margin:0; text-align:left; }
.sponsored-padding-noLine .txt{ margin:0; }
.sponsored-padding-noLine a{ display:block; width:100%; } /* full-width link */

/* Banner image: true full-width, no borders/backgrounds */
.block-img{
  width:100%;
  height:auto;
  display:block;
  border:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}

/* ===================================================================== */
/* ====================== NAVBAR (Bootstrap 5) ========================= */
/* ===================================================================== */
#mainNav{
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  padding:0;
  width:auto;
  margin:0.75rem 0.75rem 0;
  z-index:1000;
  font-size:108%;
}
#mainNav .container-fluid{
  padding:0.45rem 0.75rem;
}
#mainNav .navbar-toggler{
  margin-left:auto;
  margin-top:.25rem;
  margin-bottom:.25rem;
  padding:.5rem .6rem;
  border:1px solid rgba(0,0,0,.15);
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
#mainNav .navbar-toggler:focus{
  box-shadow:0 0 0 .15rem rgba(0,0,0,.06);
  outline:0;
}
#mainNav .navbar-collapse{
  width:100%;
}

/* Mobile brand (outside collapse) */
#mainNav .navbar-brand{
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.16em;
  color:#0b0b0b;
  margin:0;
  padding:0;
}
#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:focus{
  color:#8f022c;
  text-decoration:none;
}

/* ---- Desktop nav layout (>= lg) ---- */
#mainNav .navbar-nav{
  display:flex;
  width:100%;
  margin-left:0 !important;
  justify-content:stretch;      /* columns fill full width */
  align-items:stretch;
}
#mainNav .navbar-nav .nav-item{
  position:relative;
  flex:1 1 0;                   /* equal-width columns: logo + 5 links */
  text-align:center;
}

/* vertical dividers between items (logo → first link included) */
#mainNav .navbar-nav .nav-item + .nav-item{
  border-left:1px solid rgba(0,0,0,.12);
}

/* links */
#mainNav .navbar-nav .nav-link{
  display:block;
  width:100%;
  padding:.75rem 0;
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.16em;
  color:#0b0b0b;
  text-decoration:none;
  line-height:1;
  text-align:center;
  transition:opacity .15s ease, color .15s ease, background-color .15s ease;
}
#mainNav .navbar-nav .nav-link.nav-link-brand{
  font-weight:800; /* logo bold in desktop grid */
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link:focus{
  color:#8f022c;                /* accent */
  opacity:1;
  text-decoration:none;
  background-color:transparent;
}

/* neutralise any active state – no visual "current page" indicator */
#mainNav .navbar-nav .nav-link.active{
  color:#0b0b0b;
  font-weight:400;
  border-bottom:none;
}

/* dropdowns */
#mainNav .dropdown-menu{
  width:100%;
  min-width:100%;
  left:0;
  right:0;
  margin-top:.35rem;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
#mainNav .dropdown-item{
  white-space:nowrap;
  padding:.5rem .75rem;
  font-size:105%;
}

/* ease letter-spacing slightly on narrower desktops */
@media (max-width:1199.98px){
  #mainNav .navbar-nav .nav-link{
    letter-spacing:.12em;
  }
}

/* ---- Mobile nav (collapsed) ---- */
@media (max-width:991.98px){
  #mainNav .navbar-nav{
    display:block;
    width:auto;
  }
  #mainNav .navbar-nav .nav-item{
    flex:none;
    text-align:left;
    border-left:0;              /* no vertical dividers in mobile list */
  }

  /* hide the desktop-brand nav item inside the dropdown on mobile */
  #mainNav .navbar-nav .nav-item-brand{
    display:none;
  }

  #mainNav .navbar-nav .nav-link{
    padding:.6rem 1rem;
    width:100%;
    text-align:left;
  }
  #mainNav .navbar-collapse{
    padding:.85rem 0;
    border-top:1px solid rgba(0,0,0,.06);
  }
  #mainNav .navbar-nav{
    padding:.35rem 0;
  }
  #mainNav .nav-item.dropdown .dropdown-menu{
    position:static;
    float:none;
    width:100%;
    min-width:0;
    margin:.25rem 0 .5rem 0;
    border:0;
    box-shadow:none;
    transform:none !important;
  }
  #mainNav .dropdown-item{
    padding:.45rem 1rem;
  }
}

/* ===================================================================== */
/* ===================== CATEGORY HEADERS ============================== */
/* ===================================================================== */
.category-header{
  display:inline-block;
  background-color:rgba(191,191,191,.80);
  border-radius:4px; border:2px solid rgba(191,191,191,1);
  width:100%; text-align:center; color:#ffffff; font-size:100%; line-height:.9;
  padding-bottom: var(--space-2); box-shadow:3px 3px 5px rgba(0,0,0,.30);
  margin: var(--space-2) 0; text-decoration:none;
  -webkit-transform:perspective(1px) translateZ(0);
  transform:perspective(1px) translateZ(0);
  transition: box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.category-header:hover{
  text-decoration:none;
  color:#8f022c;                /* use navbar accent */
  background-color:rgba(191,191,191,1);
  box-shadow:4px 6px 16px rgba(0,0,0,.28);
}
.category-header-lg{ font-size:160%; }
.category-header-md{ font-size:150%; }
.btn-img{ margin-bottom: var(--space-2); }

/* Overlay variant (TYPE1 effect) */
.category-header--overlay{
  background:transparent; border:0; padding:0; margin: var(--space-3) 0;
  display:block; position:relative; border-radius:8px; overflow:hidden;
  box-shadow:3px 3px 5px rgba(0,0,0,.30); color:#fff;
  -webkit-transform:perspective(1px) translateZ(0);
  transform:perspective(1px) translateZ(0);
  transition: box-shadow .25s ease;
  padding-bottom: var(--overlay-bar-h);
}
.category-header--overlay:hover{ box-shadow:4px 6px 16px rgba(0,0,0,.28); }
.category-header--overlay .btn-img{ display:block; width:100%; height:auto; margin:0; transition: transform .35s ease; }
.category-header--overlay:hover .btn-img{ transform: scale(1.02); }
.category-header--overlay .ch-label{
  position:absolute; left:0; right:0; bottom:0; height: var(--overlay-bar-h);
  padding: 0 14px; display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1; letter-spacing:.5px; font-size:1rem; color:#fff;
  background:rgba(191,191,191,.85); overflow:hidden;
}
.category-header--overlay.category-header-lg .ch-label{ font-size:1.1rem; }
.category-header--overlay .ch-label::before{
  content:""; position:absolute; inset:0; background:rgba(191,191,191,1);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s ease; z-index:0;
}
.category-header--overlay .ch-label > span{
  position:relative;
  z-index:1;
  transition:color .35s ease;
}
.category-header--overlay:hover .ch-label::before{ transform:scaleX(1); }
.category-header--overlay:hover .ch-label > span{
  color:#8f022c;                /* use navbar accent */
}

/* 4-up grid helpers for TASTING CORNER */
.cat4-grid .category-header--overlay{ margin:0; }   /* tighten gaps inside grid */

/* ===================================================================== */
/* ===================== PRODUCT GRID (unified) ======================== */
/* ===================================================================== */
.products-row{ display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
.product-item{ padding-left:8px; padding-right:8px; margin-bottom:16px; width:100%; display:flex; }
@media (min-width:768px){ .product-item{ width:50%; } }
@media (min-width:992px){ .product-item{ width:25%; } }

.owc-card{ display:flex; flex-direction:column; width:100%; background:#fff; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* Image frame */
.owc-thumb{ position:relative; width:100%; background:#fff; border-radius:6px; margin:0 0 8px 0; overflow:hidden; }
.owc-thumb::before{ content:""; display:block; padding-top:133.333%; min-height:240px; }
@media (min-width:992px){ .owc-thumb::before{ min-height:300px; } }
@media (min-width:1200px){ .owc-thumb::before{ min-height:320px; } }
.owc-thumb > a{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; line-height:0; }
.owc-thumb img{ max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain; object-position:center; }

/* Discount badge */
.sale-badge{ position:absolute; left:8px; top:8px; z-index:2; background:#c62828; color:#fff; font-weight:700; font-size:12px; line-height:1; padding:4px 6px; border-radius:4px; }

/* Card text */
.owc-title{
  font-family:'Abel',sans-serif;
  margin:0 0 6px 0;
  text-align:center;
  line-height:1.2;
  color:#333;
  font-weight:700;
}
.owc-price{
  font-family:'Open Sans',sans-serif;
  margin:0;
  text-align:center;
  line-height:1.4;
}
.owc-price .now{ color:#c62828; font-weight:700; display:inline-block; }
.owc-price .was{ text-decoration:line-through; color:#666; display:inline-block; margin-left:6px; }

/* ===================================================================== */
/* =========================== Footer ================================== */
/* ===================================================================== */
footer{
  background-color:#0b0b0b;
  width:100%;
  padding:22px 0 20px;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 35px;
  text-align:center;
}
.footer-grid{
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap:8px 96px;
  justify-content:center;
  align-content:start;
  margin-bottom:8px;
  text-align:center;
}
.footer-link{
  font-family:'Open Sans',sans-serif;
  display:block;
  padding:4px 0;
  color:#fff;
  letter-spacing:.5px;
  text-decoration:none;
}
.footer-link:hover,
.footer-link:focus{
  color:#8f022c;                 /* use navbar accent */
  text-decoration:none;
}

.footer-divider{
  border:0;
  border-top:1px solid rgba(255,255,255,.25);
  max-width:900px;
  margin:8px auto 6px;
}

.footer-meta{
  font-family:'Open Sans',sans-serif;
  margin:6px 0 0;
  text-align:center;
  color:#bbb;
  font-size:90%;
  line-height:1.6;
}
.footer-meta .footer-link{
  display:inline;
  padding:0 6px;
  white-space:nowrap;
}
.footer-meta .footer-link:hover{
  color:#8f022c;                 /* use navbar accent */
}

/* Responsive footer grid */
@media (max-width:991.98px){
  .footer-grid{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    column-gap:48px;
  }
}
@media (max-width:575.98px){
  .footer-inner{ padding:0 20px; }
  .footer-grid{ grid-template-columns: 1fr; gap:6px 24px; }
}

/* ---- Mobile tweaks ---- */
@media (max-width:767px){
  .row-padding{ padding-left:35px; padding-right:35px; }
  .row-white-2, .row-white-3{ padding-top:20px; padding-bottom:20px; }
}

/* ===================================================================== */
/* ======================== TYPE2 (logo + copy) ======================== */
/* ===================================================================== */
.type2-intro{ display: flow-root; margin: 0 0 var(--space-3); }
.type2-intro::after{ content:""; display:block; clear:both; }
.type2-logo{ float:left; width:228px; margin:0 var(--space-3) var(--space-2) 0; }
.type2-logo img{ width:100%; height:auto; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.type2-copy{
  font-family:'Open Sans',sans-serif;
  text-align:justify;
  font-size:115%;
  max-width:none;
  line-height:1.7;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}
.type2-copy p{ margin:0 0 var(--space-2); }
.type2-copy p:last-child{ margin-bottom:0; }
@media (min-width:1400px){ .type2-logo{ width:246px; } }
@media (max-width:991.98px){ .type2-logo{ width:198px; margin-right:var(--space-2); } }
@media (max-width:767.98px){
  .type2-logo{ float:none; width:auto; max-width:286px; margin:0 auto var(--space-2); }
}

/* Motto subline */
.motto small{
  display:block; font-size:.60em; color:rgba(0,0,0,.8); font-weight:400; letter-spacing:.3px; margin-top:.25rem;
}
@media (max-width:767.98px){ .motto small{ font-size:.65em; } }

/* ===================================================================== */
/* ==================== Footer newsletter/signup messages ============== */
/* ===================================================================== */
.footer-newsletter{
  background:transparent;
  border-radius:0;
  padding:0 0 18px;
  margin:0 0 18px;
  box-shadow:none;
  text-align:left;
}
.footer-newsletter-title{
  font-family:'Abel',sans-serif;
  font-size:150%;
  margin:0 0 4px;
  color:#fff;
}
.footer-newsletter-text{
  font-family:'Open Sans',sans-serif;
  font-size:90%;
  margin:0 0 10px;
  color:#ddd;
}

/* form layout */
.footer-newsletter-form .form-label{
  font-family:'Open Sans',sans-serif;
  font-size:80%;
  color:#eee;
}
.footer-newsletter-form .form-control,
.footer-newsletter-form .form-check-input{
  font-size:90%;
  border-radius:4px;
}
.footer-newsletter-form .form-check-label{
  font-family:'Open Sans',sans-serif;
  font-size:80%;
  color:#ddd;
}
.footer-newsletter-consent{
  margin-bottom:8px;
}
.footer-newsletter-fields{
  margin-top:4px;
}
.footer-newsletter-form .btn{
  font-family:'Abel',sans-serif;
  letter-spacing:.08em;
}

/* brand the button to match the wine accent */
.footer-newsletter-form .btn-primary{
  background-color:#8f022c;
  border-color:#8f022c;
}
.footer-newsletter-form .btn-primary:hover,
.footer-newsletter-form .btn-primary:focus{
  background-color:#a30332;
  border-color:#a30332;
}

/* success / error feedback (base style) */
.footer-newsletter-message{
  margin-top:10px;
  font-size:95%;
  font-weight:600;
}
.footer-newsletter-message--ok{
  color:#c8e6c9;   /* bright green – pops on dark footer */
}
.footer-newsletter-message--error{
  color:#ff8a80;   /* bright red – pops on dark footer */
}

/* honeypot field – visually hidden but in DOM */
.footer-newsletter-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:575.98px){
  .footer-newsletter{
    padding:0 0 16px;
  }
}

/* ===================================================================== */
/* =============== Contact form status (light background) ============== */
/* ===================================================================== */

/* Contact form labels & checkboxes: match intro text styling */
#contact-form-section .contact-form .form-label,
#contact-form-section .contact-form .form-check-label{
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  line-height:1.7;
  margin-bottom:.25rem;
}
#contact-form-section .contact-form .form-check-label{
  margin-left:.25rem;
}

/* Contact submit button: accent colour + full width (same as fields) */
#contact-form-section .contact-form .btn-primary{
  display:block;
  width:100%;
  background-color:#8f022c;
  border-color:#8f022c;
}
#contact-form-section .contact-form .btn-primary:hover,
#contact-form-section .contact-form .btn-primary:focus{
  background-color:#a30332;
  border-color:#a30332;
}

/* On the contact page the status sits on a light card, so use darker colours */
#contact-form-section .footer-newsletter-message{
  margin-top:12px;
  font-size:100%;
  font-weight:600;
}
#contact-form-section .footer-newsletter-message--ok{
  color:#2e7d32;   /* strong green on white */
}
#contact-form-section .footer-newsletter-message--error{
  color:#c62828;   /* strong red on white */
}