/* ==========================================================================
   DESIGN TOKENS
   custom.css loads after style.css, so equal-specificity rules here win.
   style.css is never edited; every block below is additive and reversible.
   ========================================================================== */
:root {
    /* Brand */
    --c-accent: #d66362;
    --c-accent-deep: #b34a49;
    --c-gold: #ba9a56;
    --c-gold-2: #d1af65;

    /* Neutrals */
    --c-ink: #1b1d1e;
    --c-ink-2: #3d4143;
    --c-muted: #6b6f71;
    /* replaces #b1b4b6 (2.3:1, fails AA) — this is 5.2:1 on white */
    --c-line: #e6e8ea;
    --c-surface: #ffffff;
    --c-surface-2: #f6f8fa;

    /* Type */
    --fs-eyebrow: 13px;
    --ls-eyebrow: .18em;
    --fs-h2: clamp(28px, 3.4vw, 44px);
    --lh-prose: 1.75;
    --measure: 68ch;

    /* Rhythm */
    --space-section: 96px;
    --space-block: 64px;

    /* Surface */
    --radius: 14px;
    --shadow-1: 0 2px 8px rgba(16, 17, 18, .05);
    --shadow-2: 0 18px 44px -12px rgba(16, 17, 18, .22);
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   TYPOGRAPHY
   The site set Catamaran 800 uppercase with 3-5px tracking on nearly every
   element. When everything shouts, nothing reads as important. Wide tracking
   belongs on small caps only — large type gets tight tracking and scale
   contrast instead.
   ========================================================================== */

/* style.css has no bare h1/h2 size rule, so these fell through to Bootstrap 3 */
h1 {
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--c-ink);
}

h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--c-ink);
}

/* Eyebrow label — wide tracking is correct here */
header h1 {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    color: var(--c-accent);
}

/* The single biggest lever: de-track the big section headline (was 3px) */
header h2 {
    font-size: var(--fs-h2);
    letter-spacing: .01em;
    line-height: 1.08;
    color: var(--c-ink);
}

h3 {
    letter-spacing: .06em;
}

/* was 4px on 18px */
h4 {
    letter-spacing: .12em;
    color: var(--c-accent);
}

/* Prose */
body {
    color: var(--c-ink-2);
    line-height: 1.6;
}

p {
    line-height: var(--lh-prose);
}

/* Contrast fixes — #b1b4b6/#a3a6a8 on white fail WCAG AA */
.text-muted,
.author,
.latest-post .date,
.single-blog header .date {
    color: var(--c-muted);
}

/* 12px with 5px tracking is close to unreadable */
.btn {
    letter-spacing: .14em;
    font-size: 13px;
}

/* ==========================================================================
   STICKY HEADER (headhesive .banner--clone)
   style.css used rgba(24,25,26,.9), so page headings read straight through the
   nav while scrolling. Make it opaque, lift it off the page with a shadow, and
   shrink the logo in the docked state.
   ========================================================================== */
/* style.css sets the translucent background on `.navbar.banner--clone`, so the
   override has to match that specificity. */
.navbar.banner--clone {
    background: rgba(18, 20, 21, .97);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 10px 34px -12px rgba(0, 0, 0, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Vertically centre the docked header. The theme leaves the nav with a
   -15px margin-top (top-heavy) and a tall 80px logo. Give the logo and
   navbar-collapse a matching fixed height, flex-centre the logo, and zero the
   nav margin so its top:50% actually centres it in the same height. */
.navbar.banner--clone .navbar-header,
.navbar.banner--clone .navbar-collapse {
    height: 68px;
}

.navbar.banner--clone .logo {
    display: flex;
    align-items: center;
    height: 68px;
}

.navbar.banner--clone .logo-img {
    height: 46px;
    margin: 0;
}

/* Bootstrap's shipped .navbar-nav margin (-15px top) makes the absolutely
   positioned nav sit high; !important is warranted to beat the vendor rule so
   the nav's top:50% actually centres it. */
.navbar.banner--clone #menu-primary {
    margin: 0 !important;
}

/* ==========================================================================
   SECTION BACKGROUND PHOTOS
   The block-bg-*.jpg backdrops are small (1500x500 and 750x482) and
   style.css:271 renders them no-repeat at natural size from the top-left with
   no background-size. Any block taller than its image showed a band of flat
   .dark colour underneath — the black gap below "Water Collection" (and the
   same on the product-detail variants section). Scale them to cover instead.
   ========================================================================== */
div[class^='col'][style*="background-image"],
div[class^='container'][style*="background-image"] {
    background-size: cover;
    background-position: center center;
}

/* ==========================================================================
   FOOTER
   style.css positions .social absolute top:35px right:0, so the three icons
   stack in a cramped vertical column in the corner. Lay them out as a proper
   horizontal row of circular icon buttons under the contact details.
   ========================================================================== */
footer .social {
    position: static;
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 0;
}

footer .social li {
    margin: 0;
}

footer .social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

footer .social li a:hover {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: translateY(-3px);
}

footer h6 {
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    margin-bottom: 22px;
}

footer ul li a {
    color: rgba(255, 255, 255, .82);
    transition: color .25s var(--ease), padding-left .25s var(--ease);
}

footer ul li a:hover {
    color: #fff;
    padding-left: 4px;
}

footer .fa {
    color: var(--c-accent);
}

/* Trim the footer's dead space below the columns */
.wrapper footer .copyright {
    margin-top: 8px;
}

/* On mobile the theme centres the footer columns, so match the social row */
@media (max-width: 767px) {
    footer .social {
        justify-content: center;
    }
}

/* ==========================================================================
   HERO — inner pages
   One scrim covers all four; hero-contact.jpg is bright white and would
   otherwise swallow the white heading text.
   ========================================================================== */
#hero.single-page {
    position: relative;
}

#hero.single-page:before {
    content: '';
    position: absolute;
    inset: 0;
    /* Strong enough to carry white text over the bright/white product shots */
    background:
        radial-gradient(ellipse at 50% 55%, rgba(8, 10, 12, .55) 0%, rgba(8, 10, 12, .18) 70%),
        linear-gradient(180deg, rgba(8, 10, 12, .42) 0%, rgba(8, 10, 12, .38) 45%, rgba(8, 10, 12, .72) 100%);
}

/* style.css:390 sets position:relative + top:20% here — keep both */
#hero.single-page .container {
    position: relative;
    z-index: 1;
}

/* Already-dark hero art (black studio shot) doesn't need the flat scrim —
   it just flattens the image. Darken the text side only and let the product
   keep its contrast. */
#hero.single-page.hero-dark:before {
    background: linear-gradient(90deg,
            rgba(2, 2, 2, .88) 0%,
            rgba(2, 2, 2, .70) 42%,
            rgba(2, 2, 2, .25) 68%,
            rgba(2, 2, 2, 0) 100%);
}

/* Coral (#d66362) is a mid-tone and vanishes against the bright studio shots.
   Gold holds up over both the dark and the white heroes. */
#hero.single-page h1 {
    color: var(--c-gold-2);
    font-size: 15px;
    letter-spacing: var(--ls-eyebrow);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}

#hero.single-page h2 {
    letter-spacing: .16em;
    line-height: 1.14em;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   PRODUCT CARDS
   style.css:1508 faded the bottle to opacity:.1 on hover, which would erase
   the new studio photography. Replaced with a lift + scrim.
   ========================================================================== */
.product a:hover>img {
    transform: scale(1.04);
    opacity: 1;
}

.product-wrapper {
    border: 0;
    padding: 14px;
}

.product-wrapper .product {
    padding: 32px 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.product-wrapper .product:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2);
    border-color: #dfe3e6;
}

.product a {
    overflow: hidden;
    border-radius: calc(var(--radius) - 4px);
}

.product a>img {
    transition: transform .6s var(--ease);
}

/* Scrim sits on the anchor, not the span (style.css:1514 animates the span) */
.product a:after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(0deg, rgba(12, 20, 34, .55), rgba(12, 20, 34, .15));
    transition: opacity .4s var(--ease);
}

.product a:hover:after {
    opacity: 1;
}

/* Required, or the label hides behind the new scrim */
.product a>span {
    z-index: 2;
}

.product-wrapper .product h3 {
    color: var(--c-ink);
    letter-spacing: .06em;
    font-size: 16px;
    margin-top: 22px;
}

/* The source cutouts carried ~65% empty transparent canvas, so the bottle
   rendered tiny inside a large card. Artwork is now trimmed and normalised to
   a common height; render both at a fixed height so they read as a set
   (widths then differ naturally, which is correct). */
.products-grid .product {
    /* A ~1:3 bottle in a half-width card leaves dead air. Size the card to the
       product instead of stretching it across the column. */
    max-width: 430px;
    margin: 0 auto;
    padding: 40px 32px 32px;
}

/* Fixed image box. The catalogue mixes transparent cutouts with photos that
   have their own background (e.g. the jars shot), so constrain every product
   to the same box and let object-fit letterbox it rather than sizing by
   height alone — otherwise a landscape photo shrinks next to a tall bottle. */
.products-grid .product a {
    display: block;
    height: 340px;
}

.products-grid .product a>img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0;
}

.products-grid .product-wrapper {
    padding: 12px;
}

/* ==========================================================================
   PRODUCT DETAIL — main image
   style.css only constrains .product-img-wrap inside a mobile media query, so
   on desktop the image rendered at its natural size (the retrimmed cutouts are
   940px tall). Give it a fixed box and centre the image in both axes so tall
   cutouts and the landscape jars photo sit consistently.
   ========================================================================== */
.product-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 460px;
    text-align: center;
}

.product-img-wrap img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .product-img-wrap {
        height: 360px;
    }
}

/* Variant carousel (product-detail only): these are studio photos with a blue
   background, not cutouts, so present them as deliberate photo cards.
   Scoped to .variants-carousel — the homepage carousel shows transparent
   cutouts and must NOT get a card frame, or each bottle sits in an empty box. */
.variants-carousel .product.item a {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .10);
}

/* style.css caps product images at max-width:75% (sized for the transparent
   cutouts). These variant photos are full-bleed cards, so they must fill. */
.variants-carousel .product.item a>img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.owl-carousel .product.item h3 {
    margin-top: 20px;
    color: #fff;
}

/* Homepage carousel: transparent cutouts, no card frame. style.css caps them
   with max-width:75%, which constrains by WIDTH — so bottles with different
   aspect ratios ended up different heights and their labels didn't line up.
   Constrain by height instead and sit them on a shared baseline. */
.products-carousel .product.item a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 330px;
}

.products-carousel .product.item a>img {
    height: 330px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   NEWS TILES (homepage + news list)
   style.css rendered the photo at opacity:.15 as a faint watermark behind
   dark text — busy and hard to read at once. The photo (.background, 200%
   wide) and the overlay link (>a, 300% wide) also spilled into the
   neighbouring tile. Clipping the tile fixes the spill and lets each card
   own its image; a scrim then carries white text cleanly.
   ========================================================================== */
.latest-post {
    overflow: hidden;
    transition: box-shadow .45s var(--ease);
}

.latest-post .background,
.latest-post.odd .background {
    width: 100%;
    left: 0;
    right: 0;
    opacity: .52;
    transition: transform .8s var(--ease), opacity .45s var(--ease);
}

/* Scrim: ::after paints above .background (same z-index, later in DOM)
   but stays below the positioned .row content. */
.latest-post:after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 10, 12, .42) 0%, rgba(8, 10, 12, .62) 55%, rgba(8, 10, 12, .88) 100%);
}

.latest-post header h2,
.latest-post p,
.latest-post:hover header h2,
.latest-post:hover p {
    color: #fff;
}

.latest-post .date {
    color: var(--c-gold-2);
}

.latest-post a.underline {
    color: #fff;
}

.latest-post:hover .background {
    filter: none;
    opacity: .62;
    transform: scale(1.06);
}

/* ==========================================================================
   RHYTHM — was an inconsistent 60/100/120 mix
   .section-block is already in the markup but had no rule anywhere.
   ========================================================================== */
.section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

/* style.css declares .no-padding AFTER .section, so it wins there at equal
   specificity. Because this file loads later, the .section rule above would
   otherwise re-introduce padding on every `section no-padding` element
   (navbar, video hero, product grid...). Re-assert the modifiers explicitly. */
.section.no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.section.no-padding-bottom {
    padding-bottom: 0;
}

.section-block {
    padding: var(--space-block) 0;
}

/* Section imagery: the alternating blocks (incl. the raw HACCP certificate
   scan) sat flat on white with no framing, which read as unfinished. */
.section-block img.img-responsive {
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--c-line);
}

/* The HACCP certificate is a tall document scan. At full column width it
   dominated the block and read as a raw upload; mat it like a framed
   document instead. */
.section-block img[src*="haccp-certificate"] {
    max-height: 540px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    background: #fff;
}

/* ==========================================================================
   NEWS ARTICLE (news-detail)
   The theme floats the banner image left at 45% with a 10px white border and
   lets prose wrap around it — a dated blog look, and the article title was
   repeated (hero + here). Rebuild as a clean centred article: full-width
   rounded banner, then title, then prose at reading width.
   ========================================================================== */
.single-blog {
    max-width: 780px;
    margin: 0 auto;
    /* it's also a floated .col-sm-12, so auto margins can't centre it */
    float: none;
}

.single-blog img.banner {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 36px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

.single-blog header {
    max-width: 100%;
    margin: 0 0 22px;
}

.single-blog header .date {
    display: block;
    margin-bottom: 8px;
    color: var(--c-accent);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
}

.single-blog header h2 {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: 0;
}

.description-content {
    max-width: 100%;
    margin: 0;
    font-size: 17px;
    line-height: var(--lh-prose);
    color: var(--c-ink-2);
}

.description-content h2,
.description-content h3 {
    margin-top: 1.6em;
}

@media (max-width: 767px) {
    :root {
        --space-section: 56px;
        --space-block: 40px;
    }
}

/* Target the logo image directly */
.logo-img {
    width: auto;
    /* Allow width to scale with height */
    height: 85px;
    /* Increased height */
    display: block;
    /* Removes inline spacing */
    transition: transform 0.3s, box-shadow 0.3s;
    margin: 10px 0 5px 0;
    /* Minimize bottom breathing room */
}

/* The transition above had no matching :hover rule */
.logo:hover .logo-img {
    transform: translateY(-2px);
}

/* Ensure the logo link is clickable and not overlapped by the menu */
.logo {
    position: relative;
    z-index: 100;
    display: inline-block;
    cursor: pointer;
}

/* Ensure images inside CKEditor/description content are full width */
.description-content img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 25px auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Center the product detail tabs */
.tabs ul {
    justify-content: center;
}

.tabs ul li {
    width: auto !important;
}

.tabs ul li a {
    padding: 20px 40px !important;
}

/* CEO Message Section */
.ceo-message-section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
    background-color: #f9fbfd;
}

.ceo-message-card {
    background: #fff;
    padding: 80px 60px;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.ceo-photo {
    border: none;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 12px;
    overflow: hidden;
}

.ceo-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.ceo-text {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.9;
    color: #4a4a4a;
}

.ceo-quote {
    font-style: italic;
    color: #1b1d1e;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 35px;
    position: relative;
    padding-left: 25px;
    border-left: 5px solid #d66362;
}

.ceo-signature {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.signature-name {
    font-size: 26px;
    font-weight: 700;
    color: #1b1d1e;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.signature-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d66362;
}

@media (max-width: 991px) {
    .ceo-message-card {
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .ceo-photo {
        margin-bottom: 40px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .ceo-message-card {
        padding: 30px 20px;
    }
}