/* Cellar Light — self-hosted webfonts + design layer. Generated: fonts from
   Google Fonts (SIL OFL), subset to latin/latin-ext/cyrillic/cyrillic-ext. */

/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/cormorantgaramond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/webfonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Cellar Light — design layer for Pochatok EtCetera
   --------------------------------------------------------------------------
   Loaded AFTER style.css. The Molla theme accent has already been swapped to
   bordeaux inside style.css itself; this file carries the typography, the
   two-register light/dark structure and the product card.

   Two things to know before editing:
     * the theme sets html{font-size:62.5%}, so 1rem = 10px here;
     * Cormorant Garamond ships old-style (text) figures by default, which
       render prices as lowercase-height digits. Every element showing a
       number therefore forces lining figures explicitly.
   ========================================================================== */

:root {
  --cellar:       #241A20;  /* dark ground: hero, story bands, footer */
  --cellar-deep:  #171114;
  --stone:        #FBF7F4;  /* light ground: catalogue, product pages */
  --bordeaux:     #6E1B32;  /* primary action */
  --bordeaux-dk:  #511325;
  --candle:       #B4682F;  /* the glow — sparing, one per screen */
  --vine:         #4F6249;  /* in stock, delivery confirmed */
  --ink:          #241A20;
  --ink-soft:     #6B5F63;
  --ink-faint:    #9C8F94;
  --hairline:     #E7DDD8;
  --hairline-sk:  #F1EAE6;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Lining, tabular figures wherever a number is shown. Without this Cormorant
   sets 100 as old-style digits that read as IOO. */
.product-price,
.product-price *,
.cart-count,
.product-specs td,
.price-col, .total-col,
.cellar-hero .title,
.page-title,
.entry-meta time {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--stone);
}

h1, h2, h3, h4,
.product-title,
.entry-title,
.page-title,
.title,
.title-lg,
.intro-title,
.banner-title,
.checkout-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.page-title       { font-size: 4.4rem; line-height: 1.1; }
.title, .title-lg { font-size: 3.2rem; line-height: 1.15; }
.product-details .product-title { font-size: 3.4rem; line-height: 1.15; }

/* Functional text stays in the sans — a serif setting form labels reads as
   costume rather than considered. */
.widget-title,
.checkout-title,
label, .btn, .form-control,
.breadcrumb, .toolbox, .product-action,
input, select, textarea {
  font-family: var(--font-body);
}
.widget-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.btn, .btn-product, .btn-primary, .btn-outline-primary-2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .09em;
  border-radius: 2px;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.btn-primary {
  background-color: var(--bordeaux);
  border-color: var(--bordeaux);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bordeaux-dk);
  border-color: var(--bordeaux-dk);
  color: #fff;
}

/* Button labels.

   The theme colours the span inside .btn-product a mid grey (#666), and
   for the card variants it uses the accent colour via
   .product.product-7 .btn-product span — which after the accent swap became
   bordeaux text on a bordeaux button, i.e. invisible. Those selectors carry
   specificity 0,3,1, so matching it here is what actually wins. */
.btn-product span,
.btn-product:hover span,
.btn-product:focus span {
  color: inherit;
  border: 0;
}
.product .product-action .btn-product span,
.product .product-action .btn-product:hover span,
.product .product-action .btn-product:focus span,
.product-details-action .btn-product span,
.product-details-action .btn-product:hover span,
.product-details-action .btn-product:focus span {
  color: #fff;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Product card
   --------------------------------------------------------------------------
   A real card: white ground, hairline border, consistent inner padding. The
   price/stock row previously sat flush against the card outer edge while
   everything else was centred, which is what made it look like it had escaped
   the card.
   -------------------------------------------------------------------------- */

.product {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  text-align: left;
  padding: 0;
  margin-bottom: 3rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .28s ease, box-shadow .28s ease;
}
.product:hover {
  border-color: #D9C9C4;
  box-shadow: 0 6px 22px rgba(36, 26, 32, .07);
}

.product .product-media {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--hairline-sk);
  margin: 0;
  padding: 1.6rem 1.6rem 0;
}
.product .product-media img { margin: 0 auto; }

.product .product-body {
  padding: 1.8rem 1.8rem 0;
  text-align: left;
  flex: 1 1 auto;
}

.product .product-origin {
  display: block;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}

.product .product-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;      /* uppercase is for names that do not matter */
  margin: 0 0 .5rem;
}
.product .product-title a { color: var(--ink); }
.product .product-title a:hover { color: var(--bordeaux); }

.product .product-note {
  display: block;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  min-height: 3.9rem;        /* keeps cards aligned when a note is short */
}

.product .product-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
}

.product .product-price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.product .product-price .new-price { color: var(--bordeaux); }
.product .product-price .old-price {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink-faint);
  text-decoration: line-through;   /* the theme drops this inside .product */
}

.product .product-stock {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--vine);
  white-space: nowrap;
}
.product .product-stock.is-out { color: var(--ink-faint); }

/* Always visible: a hover-reveal action does not exist on touch. */
.product .product-action {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.product .product-action .btn-product {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;                 /* theme puts 20px side margins here */
  min-height: 4.6rem;
  padding: 1.2rem 1rem;
  background: var(--bordeaux);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product .product-action .btn-product:hover,
.product .product-action .btn-product:focus {
  background: var(--bordeaux-dk);
  color: #fff;
}
.product .product-action .btn-product[disabled] {
  background: #7A6E6A;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   4. Two-register grounds
   -------------------------------------------------------------------------- */

.page-content, .products { background: var(--stone); }

.cellar-band {
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(180, 104, 47, .22), transparent 58%),
    linear-gradient(var(--cellar), var(--cellar-deep));
  background-size: cover;
  background-position: center;
  color: #EDE2E0;
  padding: 7rem 0;
}
.cellar-band h1, .cellar-band h2, .cellar-band h3,
.cellar-band .title { color: #F3E9E7; font-weight: 400; }
.cellar-band p { color: #B7A6A9; }
.cellar-band .cellar-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C79A80;
  margin-bottom: 1.2rem;
}
.cellar-band em { font-style: italic; color: #E8A87C; }

.cellar-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 11rem 0;
  position: relative;
}
.cellar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,14,17,.86) 0%, rgba(20,14,17,.58) 45%, rgba(20,14,17,0) 78%);
}
.cellar-hero > .container { position: relative; z-index: 1; }
.cellar-hero .title { font-size: 5.4rem; }
.cellar-hero p { max-width: 52rem; font-size: 1.6rem; }

/* Mid-page band — replaces the two small side banners that used to sit beside
   the carousel. */
.cellar-strip {
  background:
    linear-gradient(90deg, rgba(20,14,17,.92) 0%, rgba(20,14,17,.62) 55%, rgba(20,14,17,.30) 100%),
    var(--cellar);
  background-size: cover;
  background-position: center;
  color: #EDE2E0;
  padding: 5.5rem 0;
  margin: 7rem 0 0;
}
.cellar-strip .title {
  font-size: 3.4rem;
  color: #F3E9E7;
  font-weight: 400;
  margin-bottom: 1rem;
}
.cellar-strip p { color: #B7A6A9; max-width: 46rem; margin-bottom: 0; }
.cellar-strip .btn-outline-white {
  display: inline-block;
  border: 1px solid rgba(237,226,224,.5);
  color: #F3E9E7;
  padding: 1.2rem 2.6rem;
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
}
.cellar-strip .btn-outline-white:hover {
  background: #F3E9E7;
  color: var(--cellar);
  border-color: #F3E9E7;
}

.footer-dark { background: var(--cellar); }

/* --------------------------------------------------------------------------
   5. Spacing — the theme is dense; more air reads calm rather than discount
   -------------------------------------------------------------------------- */

.page-content { padding-top: 4.5rem; padding-bottom: 6rem; }

/* Breathing room between a dark band and whatever follows it. */
.cellar-hero + .container,
.cellar-band + .container { padding-top: 6.5rem; }

.heading { margin-bottom: 4rem; }
.heading .title { margin-bottom: 0; }

.product-details-top { margin-bottom: 5rem; }
.category-intro { margin-top: 6rem; }
.product-specs, .product-reviews, .related-wines { margin-top: 6rem; }
.more-container { margin-top: 1rem; }

.breadcrumb-nav { background: transparent; border: 0; }
.breadcrumb { font-size: 1.2rem; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   6. Product detail page
   -------------------------------------------------------------------------- */

.product-details .product-price {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
/* The theme new-price is a salmon red that belongs to no palette here. */
.product-details .product-price .new-price { color: var(--bordeaux); }
.product-details .product-price .old-price {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink-faint);
  text-decoration: line-through;
}

.product-availability { font-size: 1.35rem; margin-bottom: .4rem; }
.product-delivery { font-size: 1.3rem; color: var(--ink-faint); }

.product-details-action .btn-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24rem;
  min-height: 4.8rem;
  margin: 0;
  padding: 1.4rem 2.6rem;
  background: var(--bordeaux);
  color: #fff;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product-details-action .btn-product:hover,
.product-details-action .btn-product:focus {
  background: var(--bordeaux-dk);
  color: #fff;
}
.product-details-action .btn-product[disabled] {
  background: #7A6E6A;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. Specification table
   --------------------------------------------------------------------------
   Had no cell padding at all, so text sat flush against the striped band, and
   86px rows made eleven attributes scroll for no reason.
   -------------------------------------------------------------------------- */

.product-specs table {
  font-size: 1.35rem;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.product-specs th,
.product-specs td {
  padding: 1.1rem 1.6rem;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--hairline-sk);
  line-height: 1.5;
  height: auto;
}
.product-specs th {
  width: 34%;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: .03em;
  text-align: left;
  white-space: nowrap;
}
.product-specs td { color: var(--ink); font-weight: 500; }
.product-specs tbody tr:last-child th,
.product-specs tbody tr:last-child td { border-bottom: 0; }
.product-specs .table-striped tbody tr:nth-of-type(odd) { background-color: #F6EFEB; }
.product-specs .table-striped tbody tr:nth-of-type(even) { background-color: transparent; }

@media (max-width: 575px) {
  .product-specs th { width: 42%; white-space: normal; }
  .product-specs th, .product-specs td { padding: .9rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   8. Reviews
   -------------------------------------------------------------------------- */

.ratings-container .ratings-text { font-size: 1.3rem; color: var(--ink-soft); }
.product-reviews summary { font-weight: 600; color: var(--bordeaux); }

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */

a, .btn, .product-image, .product-title a { transition-duration: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .page-title  { font-size: 3.2rem; }
  .title, .title-lg { font-size: 2.6rem; }
  .product-details .product-title { font-size: 2.6rem; }
  .cellar-band { padding: 4.5rem 0; }
  .cellar-hero { padding: 6rem 0; }
  .cellar-hero .title { font-size: 3.4rem; }
  .cellar-hero::before {
    background: linear-gradient(180deg, rgba(20,14,17,.80) 0%, rgba(20,14,17,.74) 100%);
  }
  .cellar-strip { padding: 4rem 0; margin-top: 5rem; }
  .cellar-strip .title { font-size: 2.6rem; }
  .cellar-hero + .container,
  .cellar-band + .container { padding-top: 4.5rem; }
  .product .product-note { min-height: 0; }
  .product-details-action .btn-product { min-width: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Semantic colours
   --------------------------------------------------------------------------
   Bootstrap's .text-success green (#28A745) and the theme's error red
   (#E02B27) are both off-palette and were showing on the product, contacts
   and checkout pages. Re-point them at the vine/bordeaux family so success
   and error still read as themselves without importing another accent.
   -------------------------------------------------------------------------- */

.text-success { color: var(--vine) !important; }
.text-danger  { color: #A3282B !important; }
.text-muted   { color: var(--ink-faint) !important; }

.required,
label .required,
.checkout-form-list .required { color: #A3282B; }

.alert-success {
  background: #EEF2EC;
  border-color: #CBD8C6;
  color: #33452F;
}
.alert-danger {
  background: #F8EDED;
  border-color: #E4C9C9;
  color: #7A2226;
}

/* Toast tick, aligned to the vine family rather than a stray mint. */
.cart-toast__tick { color: #9DC7A6; }

/* Form fields: match the card hairline instead of the theme's cool grey. */
.form-control {
  border-color: var(--hairline);
  color: var(--ink);
  border-radius: 2px;
}
.form-control:focus {
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 2px rgba(110, 27, 50, .12);
}