/*
Theme Name:   Salient Child – Crabbie's
Theme URI:    https://crabbies.otelli.co.uk/
Description:  Child theme for Salient with the Crabbie's one-page components (WPBakery elements under the "Crabbie's" tab). Built by Otelli.
Author:       Otelli Limited
Author URI:   https://otelli.co.uk/
Template:     salient
Version:      1.0.0
Text Domain:  salient-child
*/

/* Component styles live in assets/css/crabbies.css */

/* ==========================================================================
   Crabbie's – extras for the native Salient build
   Only the details Salient has no setting for. Classes are added through each
   row's "Extra Class Name" / element "Extra Class Name" field (crb-n-*).
   ========================================================================== */

:root {
	--crb-cream: #f9f6e9;
	--crb-gold: #cca866;
	--crb-gold-2: #e3be63;
	--crb-label: #f8f2cf;
	--crb-display: 'Marcellus', 'Times New Roman', serif;
	--crb-condensed: 'Smythe', 'Marcellus', serif;
	--crb-serif: 'EB Garamond', Georgia, serif;
	--crb-caps: 'Josefin Sans', Arial, sans-serif;
	--crb-n-wrap: 1180px;
	--crb-n-gutter: max(24px, calc((100vw - var(--crb-n-wrap)) / 2));
}
/* Large desktops: let the content area grow with the screen so big type still has room. */
@media (min-width: 1600px) { :root { --crb-n-wrap: min(76vw, 1760px); } }

/* Shared type ------------------------------------------------------------ */
#ajax-content-wrap .crb-n-eyebrow { font-family: var(--crb-display); font-size: clamp(14px, 1.2vw, 22px); letter-spacing: .2em; text-transform: uppercase; color: var(--crb-cream); margin-bottom: .2em; padding: 0; }
#ajax-content-wrap .crb-n-eyebrow--dark { font-family: var(--crb-caps); color: #3b4335; letter-spacing: .28em; font-size: clamp(13px, 1.05vw, 19px); }
#ajax-content-wrap .crb-n-eyebrow--bronze { color: #ab8234; }
#ajax-content-wrap .crb-n-eyebrow--gold { color: var(--crb-gold); font-size: clamp(14px, 1.1vw, 18px); }
/* Headings use Salient's Animated Text element (split_line_heading); el_class crb-a-* sets the type. */
#ajax-content-wrap .crb-a-h1 h1 { font-family: var(--crb-display); font-size: clamp(38px, 5vw, 104px); line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; color: var(--crb-cream); margin: 0; padding: 0; max-width: 10em; }
#ajax-content-wrap .crb-a-h1 { margin: .1em 0 .3em; }
#ajax-content-wrap .crb-a-h2 h2 { font-family: var(--crb-display); font-size: clamp(30px, 3.2vw, 64px); line-height: 1.12; letter-spacing: .07em; text-transform: uppercase; margin: 0; padding: 0; }
#ajax-content-wrap .crb-a-h2 { margin: .1em 0 .5em; }
.crb-n-story .crb-a-h2 h2 { color: #1f2a1e; }
#ajax-content-wrap .crb-n-tagline { font-family: var(--crb-caps); font-size: clamp(13px, 1.15vw, 22px); letter-spacing: .25em; text-transform: uppercase; color: var(--crb-cream); padding-bottom: .6em; }
#ajax-content-wrap .crb-n-lead, #ajax-content-wrap .crb-n-body { font-family: var(--crb-serif); font-size: clamp(17px, 1.25vw, 24px); line-height: 1.5; }
#ajax-content-wrap .crb-n-body { color: #3b4335; }

/* Hero ------------------------------------------------------------------- */
/* Height comes from the row's Min Height setting (80vh); border-box keeps the row padding inside it,
   and the copy is centred vertically (bottom-aligned under the bottle on phones/portrait tablets). */
#ajax-content-wrap .crb-n-hero { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
#ajax-content-wrap .crb-n-btn a { font-family: var(--crb-display) !important; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(15px, 1vw, 22px) !important; }
@media (max-width: 690px) {
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, rgba(10, 62, 35, .95) 0%, rgba(10, 62, 35, .6) 45%, rgba(10, 62, 35, 0) 75%) !important; opacity: 1 !important; }
	#ajax-content-wrap .crb-n-hero { justify-content: flex-end; }
}

/* Stats strip ------------------------------------------------------------ */
.crb-n-stats .crb-n-stat + .crb-n-stat { border-left: 1.5px solid rgba(204, 168, 102, .6); }
.crb-n-stats img.crb-n-icon { width: clamp(46px, 3.6vw, 76px) !important; height: auto; margin: 0 auto 8px; }
#ajax-content-wrap .crb-n-stats .crb-n-number { font-size: clamp(38px, 3vw, 62px); line-height: 1; color: var(--crb-gold); margin: 0 0 6px; }
#ajax-content-wrap .crb-n-stat-title, #ajax-content-wrap .crb-n-number { font-family: var(--crb-condensed); font-size: clamp(22px, 2.1vw, 44px); line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; color: var(--crb-cream); margin: 4px 0 2px; }
#ajax-content-wrap .crb-n-stat-text { font-family: var(--crb-condensed); font-size: clamp(14px, 1.05vw, 21px); line-height: 1.15; text-transform: uppercase; letter-spacing: .07em; color: var(--crb-cream); padding: 0 12px; }
@media (max-width: 690px) {
	.crb-n-stats .crb-n-stat + .crb-n-stat { border-left: 0; }
	.crb-n-stats .crb-n-stat:nth-child(even) { border-left: 1.5px solid rgba(204, 168, 102, .6); }
	.crb-n-stats .crb-n-stat:nth-child(n+3) { margin-top: 28px; }
}

/* Story ------------------------------------------------------------------ */
.crb-n-story .crb-n-story-text > .vc_column-inner { padding: clamp(56px, 6vw, 110px) clamp(24px, 4vw, 64px) clamp(56px, 6vw, 110px) var(--crb-n-gutter) !important; }
@media (min-width: 1000px) {
	.crb-n-story .crb-n-castle .column-image-bg-wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
}

/* Range ------------------------------------------------------------------ */
/* The shelf is the custom "Crabbie's Range" element (styles in assets/css/crabbies.css). */
.crb-n-range > .row_col_wrap_12 .wpb_wrapper > .crb-embed { margin: 0; }

/* Perfect serve ---------------------------------------------------------- */
.crb-n-serve .crb-n-serve-text > .vc_column-inner { padding: clamp(40px, 5vw, 90px) max(24px, 5vw) !important; }
#ajax-content-wrap .crb-n-serve-lead { font-family: var(--crb-display); font-size: clamp(19px, 1.8vw, 36px); line-height: 1.2; letter-spacing: .04em; color: #3c473e; max-width: 18em; }
.crb-n-serve .crb-a-h2 h2 { color: #27352b; }

/* Process ---------------------------------------------------------------- */
.crb-n-process .crb-n-process-text > .vc_column-inner { padding: clamp(56px, 7vw, 110px) clamp(24px, 4vw, 56px) clamp(56px, 7vw, 110px) var(--crb-n-gutter) !important; }
#ajax-content-wrap .crb-a-steeped { margin: .1em 0 .5em; }
#ajax-content-wrap .crb-a-steeped .crb-n-steeped { font-family: var(--crb-display); text-transform: uppercase; font-size: clamp(40px, 5vw, 100px); line-height: 1.02; color: var(--crb-cream); letter-spacing: .02em; margin: 0; padding: 0; }
#ajax-content-wrap .crb-a-steeped .crb-n-weeks { font-family: var(--crb-display); text-transform: uppercase; font-size: clamp(60px, 7.6vw, 160px); line-height: 1; color: #d2b66c; white-space: nowrap; margin: 0; padding: 0; }
#ajax-content-wrap .crb-n-process-text p:not(.crb-n-eyebrow):not(.crb-n-weeks) { font-family: var(--crb-serif); font-size: clamp(16px, 1.1vw, 22px); line-height: 1.45; color: #fff; max-width: 40em; }
#ajax-content-wrap .crb-n-process .crb-n-eyebrow { color: #cdb66a; }

/* Contact ---------------------------------------------------------------- */
#ajax-content-wrap .crb-a-contact { margin: .1em 0 .35em; text-align: center; }
#ajax-content-wrap .crb-a-contact h2 { font-family: var(--crb-display); font-size: clamp(42px, 6vw, 120px); line-height: 1.05; letter-spacing: .045em; text-transform: uppercase; color: #fff; margin: 0; padding: 0; }
#ajax-content-wrap .crb-n-contact-intro { font-family: var(--crb-serif); font-size: clamp(17px, 1.2vw, 23px); line-height: 1.45; color: #fff; }
.crb-n-contact .crb-n-details { margin-top: clamp(24px, 3vw, 44px); }
.crb-n-contact .crb-n-detail + .crb-n-detail { border-left: 1px solid rgba(255, 255, 255, .5); }
#ajax-content-wrap .crb-n-detail-label { font-family: var(--crb-display); font-size: clamp(14px, 1.1vw, 22px); letter-spacing: .16em; text-transform: uppercase; color: #c3b48a; padding-bottom: .3em; }
#ajax-content-wrap .crb-n-detail-value, #ajax-content-wrap .crb-n-detail-value a { font-family: var(--crb-display); font-size: clamp(16px, 1.15vw, 23px); line-height: 1.35; color: #fff; }
#ajax-content-wrap .crb-n-detail-value a:hover { color: var(--crb-gold-2); }
@media (max-width: 690px) {
	.crb-n-contact .crb-n-detail + .crb-n-detail { border-left: 0; margin-top: 20px; }
}

/* Footer ----------------------------------------------------------------- */
.crb-n-footer img.crb-n-footer-logo { width: clamp(150px, 12vw, 230px) !important; }
#ajax-content-wrap .crb-n-footer-links { font-family: var(--crb-caps); font-size: clamp(12px, .8vw, 15px); letter-spacing: .1em; text-transform: uppercase; }
#ajax-content-wrap .crb-n-footer-links a { color: #fff; }
#ajax-content-wrap .crb-n-footer-links span { margin: 0 14px; opacity: .8; }
#ajax-content-wrap .crb-n-footer-note { font-family: var(--crb-caps); font-size: 12px; letter-spacing: .06em; color: var(--crb-gold); padding-top: 10px; }
#ajax-content-wrap .crb-n-footer-copy { font-family: var(--crb-caps); font-size: clamp(12px, .8vw, 15px); color: var(--crb-cream); text-align: right; }
@media (max-width: 999px) {
	#ajax-content-wrap .crb-n-footer-copy { text-align: center; }
	.crb-n-footer img.crb-n-footer-logo { margin: 0 auto 16px; }
}

/* Header – Salient handles layout; this only sets the condensed nav face */
#header-outer #top nav > ul > li > a { font-family: var(--crb-condensed) !important; text-transform: uppercase; letter-spacing: .08em; }

/* Salient's equal-height script writes an inline min-height on empty columns
   (matching the text column), so photo/video columns get their height here. */
.crb-n-castle > .vc_column-inner { min-height: clamp(260px, 44vw, 900px) !important; }
.crb-n-serve-photo > .vc_column-inner { min-height: clamp(320px, 40vw, 820px) !important; }
.crb-n-video > .vc_column-inner { min-height: clamp(300px, 52vw, 1100px) !important; }
@media (max-width: 999px) {
	#ajax-content-wrap .crb-n-story-text > .vc_column-inner { padding-bottom: 8px !important; }
	.crb-n-castle > .vc_column-inner { min-height: 56vw !important; }
	.crb-n-serve-photo > .vc_column-inner { min-height: 72vw !important; }
	.crb-n-video > .vc_column-inner { min-height: 72vw !important; }
}

/* Header – logo sits in a tab that hangs below the bar, as in the design.
   Salient still controls the header itself (colours, menu, resize on scroll). */
#header-outer #top #logo { background: #213520; padding: 12px 22px 16px; margin: 0 0 -60px; border-radius: 0 0 24px 24px; transition: margin .3s, padding .3s; }
#header-outer #top #logo img { height: 92px !important; width: auto; transition: height .3s; }
#header-outer.small-nav #top #logo { margin: 0 0 -10px; padding: 6px 14px 8px; }
#header-outer.small-nav #top #logo img { height: 50px !important; }
@media (max-width: 999px) {
	#header-outer #top #logo { padding: 8px 14px 10px; margin: 0 0 -30px; border-radius: 0 0 16px 16px; }
	#header-outer #top #logo img { height: 56px !important; }
	#header-outer.scrolled-down #top #logo { margin-bottom: 0; padding: 4px 10px; background: transparent; }
	#header-outer.scrolled-down #top #logo img { height: 40px !important; }
}

/* Tablet (single-column layout, 691–999px): vw-based sizes run small here, so set them directly. */
@media (min-width: 691px) and (max-width: 999px) {
	#ajax-content-wrap .crb-a-h1 h1 { font-size: 56px; }
	#ajax-content-wrap .crb-a-h2 h2 { font-size: 44px; }
	#ajax-content-wrap .crb-a-steeped .crb-n-steeped { font-size: 62px; }
	#ajax-content-wrap .crb-a-steeped .crb-n-weeks { font-size: 96px; }
	#ajax-content-wrap .crb-a-contact h2 { font-size: 76px; }
	#ajax-content-wrap .crb-n-eyebrow { font-size: 16px; }
	#ajax-content-wrap .crb-n-tagline { font-size: 16px; }
	#ajax-content-wrap .crb-n-lead, #ajax-content-wrap .crb-n-body, #ajax-content-wrap .crb-n-contact-intro { font-size: 20px; }
	#ajax-content-wrap .crb-n-process-text p:not(.crb-n-eyebrow):not(.crb-n-weeks) { font-size: 19px; }
	#ajax-content-wrap .crb-n-serve-lead { font-size: 26px; max-width: 22em; }
	#ajax-content-wrap .crb-n-stat-title, #ajax-content-wrap .crb-n-number { font-size: 30px; }
	#ajax-content-wrap .crb-n-stats .crb-n-number { font-size: 44px; }
	#ajax-content-wrap .crb-n-stat-text { font-size: 16px; }
	#ajax-content-wrap .crb-n-detail-label { font-size: 16px; }
	#ajax-content-wrap .crb-n-detail-value, #ajax-content-wrap .crb-n-detail-value a { font-size: 18px; }
}
/* Portrait tablets: copy sits under the bottle with a bottom-up overlay, as on phones. */
@media (min-width: 691px) and (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, rgba(10, 62, 35, .95) 0%, rgba(10, 62, 35, .6) 40%, rgba(10, 62, 35, 0) 70%) !important; opacity: 1 !important; }
	#ajax-content-wrap .crb-n-hero { justify-content: flex-end; }
}
/* Slightly larger reading sizes on desktop. */
@media (min-width: 1000px) {
	#ajax-content-wrap .crb-n-lead { font-size: clamp(19px, 1.45vw, 28px); }
	#ajax-content-wrap .crb-n-process-text p:not(.crb-n-eyebrow):not(.crb-n-weeks) { font-size: clamp(17px, 1.2vw, 23px); }
}

/* One content edge for the whole page: the header bar and every row's content (Salient's
   .container) line up with the text in the full-width sections, using the same gutter. */
@media (min-width: 1000px) { :root { --crb-n-gutter: max(40px, calc((100vw - var(--crb-n-wrap)) / 2)); } }
#header-outer #top > .container,
#ajax-content-wrap .container-wrap > .container.main-content { max-width: none !important; width: 100% !important; padding-left: var(--crb-n-gutter) !important; padding-right: var(--crb-n-gutter) !important; box-sizing: border-box; }
@media (max-width: 999px) {
	.crb-n-serve .crb-n-serve-text > .vc_column-inner { padding-left: var(--crb-n-gutter) !important; padding-right: var(--crb-n-gutter) !important; }
}

/* ==========================================================================
   Client amends – 19 Oct 2026
   ========================================================================== */
/* Brand green #015806 everywhere the design uses green (rows are set in the builder; these
   cover the logo tab and the Range element, which have their own backgrounds). */
#header-outer #top #logo { background: #015806; }
#ajax-content-wrap .crb-range { background: #015806; }

/* Hero: "The World's Favourite" reads as the first line of the headline, not a small label. */
#ajax-content-wrap .crb-n-hero .crb-n-eyebrow { font-family: var(--crb-display); font-size: clamp(19px, 2.75vw, 58px); line-height: 1.05; letter-spacing: .16em; color: var(--crb-cream); margin: 0; padding: 0; }
#ajax-content-wrap .crb-n-hero .crb-a-h1 { margin-top: .05em; }
@media (min-width: 691px) and (max-width: 999px) { #ajax-content-wrap .crb-n-hero .crb-n-eyebrow { font-size: 31px; } }
@media (max-width: 690px) {
	#ajax-content-wrap .crb-n-hero .crb-n-eyebrow { font-size: 19px; letter-spacing: .12em; }
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, rgba(1, 58, 4, .95) 0%, rgba(1, 58, 4, .6) 45%, rgba(1, 58, 4, 0) 75%) !important; }
}
@media (min-width: 691px) and (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, rgba(1, 58, 4, .95) 0%, rgba(1, 58, 4, .6) 40%, rgba(1, 58, 4, 0) 70%) !important; }
}
/* Phones: keep the bottle and glass in view of the wider hero photo. */
@media (max-width: 999px) { #ajax-content-wrap .crb-n-hero .row-bg { background-position: 76% 30% !important; } }

/* Contact + footer: all text white (Salient dims links to 70%). */
#ajax-content-wrap .crb-n-contact a,
#ajax-content-wrap .crb-n-footer a { color: #fff !important; opacity: 1 !important; }
#ajax-content-wrap .crb-n-footer-links span { opacity: 1; color: #fff; }
#ajax-content-wrap .crb-n-footer-copy { color: #fff; }

/* New logo is wider and shorter than the old one, so give it a little more height in the tab. */
#header-outer #top #logo img { height: 108px !important; }
#header-outer.small-nav #top #logo img { height: 52px !important; }
@media (max-width: 999px) {
	#header-outer #top #logo img { height: 62px !important; }
	#header-outer.scrolled-down #top #logo img { height: 42px !important; }
}
#ajax-content-wrap .crb-n-hero .wpb_text_column.crb-n-hero-eyebrow { margin-bottom: .35em !important; }
/* Phones / portrait tablets: show the photo less zoomed – bottle and glass across the top, copy on green below. */
@media (max-width: 690px), (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .row-bg { background-size: auto 62% !important; background-position: 92% 0 !important; background-color: #012f04 !important; }
}
@media (max-width: 690px), (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, #012f04 0%, #012f04 34%, rgba(1, 47, 4, .7) 44%, rgba(1, 47, 4, 0) 55%) !important; opacity: 1 !important; }
}

/* Phones / portrait tablets: the fade sits low so the bottle and glass stay clear; a soft shadow keeps the headline readable where it overlaps the photo. */
@media (max-width: 690px), (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .crb-n-eyebrow, #ajax-content-wrap .crb-n-hero .crb-a-h1 h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
}
@media (max-width: 690px), (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero { padding-bottom: 28px !important; }
}

/* Mobile menu (Salient full-screen): solid brand green and the same condensed caps as the desktop nav. */
#slide-out-widget-area-bg.fullscreen-alt,
#slide-out-widget-area-bg.fullscreen-alt .bg-inner { background-color: #015806 !important; }
#slide-out-widget-area-bg.fullscreen-alt.open { opacity: 1 !important; }
#slide-out-widget-area.fullscreen-alt .menu li a,
#slide-out-widget-area.fullscreen-alt .off-canvas-menu-container li a { font-family: var(--crb-condensed) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .08em; font-size: 34px !important; line-height: 1.5 !important; color: var(--crb-cream) !important; }

/* Range on phones: less empty space between the title and the bottles. */
@media (max-width: 699px) {
	#ajax-content-wrap .crb-range { --crb-bottle-max: 300px; }
}

/* Range on phones: no jump on load. The first bottle starts centred (so the browser has nothing
   to snap to after the images load) and the slide-up reveal is off inside the swipe row. */
@media (max-width: 699px) {
	#ajax-content-wrap .crb-range .crb-range__track { padding-left: 21vw; padding-right: 21vw; }
	.crb-js #ajax-content-wrap .crb-range .crb-product[data-crb-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Phones: smaller headline so the copy sits below the bottle and glass and the fade can come back. */
@media (max-width: 690px) {
	#ajax-content-wrap .crb-n-hero .crb-a-h1 h1 { font-size: 31px; }
	#ajax-content-wrap .crb-n-hero .crb-n-eyebrow { font-size: 16px; }
}
/* Portrait tablets keep the previous fade – the 20 Oct headline/fade change is phones only. */
@media (min-width: 691px) and (max-width: 999px) and (orientation: portrait) {
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, #012f04 0%, #012f04 30%, rgba(1, 47, 4, .55) 38%, rgba(1, 47, 4, 0) 46%) !important; }
}
/* Phones: zoom the photo out so more of it shows either side and it ends above the headline. */
@media (max-width: 690px) {
	#ajax-content-wrap .crb-n-hero .row-bg { background-size: auto 48% !important; background-position: 96% 0 !important; }
	#ajax-content-wrap .crb-n-hero .row-bg-overlay { background: linear-gradient(0deg, #012f04 0%, #012f04 50%, rgba(1, 47, 4, .6) 57%, rgba(1, 47, 4, .25) 63%, rgba(1, 47, 4, 0) 68%) !important; }
}

/* ==========================================================================
   Standard pages (Privacy & Cookies Policy, Terms of Use…) – readable column in the brand type.
   ========================================================================== */
body.page:not(.home) .container-wrap { padding-top: clamp(120px, 11vw, 170px) !important; padding-bottom: clamp(60px, 7vw, 110px); background: #fff; }
body.page:not(.home) #ajax-content-wrap .container-wrap > .container.main-content { max-width: calc(820px + 2 * var(--crb-n-gutter)) !important; margin: 0 auto; }
body.page:not(.home) .main-content h1 { font-family: var(--crb-display); font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; color: #015806; margin: 0 0 .3em; }
body.page:not(.home) .main-content h2 { font-family: var(--crb-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: .04em; color: #015806; margin: 1.8em 0 .5em; }
body.page:not(.home) .main-content p,
body.page:not(.home) .main-content li { font-family: var(--crb-serif); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; color: #2b3328; }
body.page:not(.home) .main-content p { padding-bottom: 1em; }
body.page:not(.home) .main-content ul { margin: 0 0 1.4em 1.2em; }
body.page:not(.home) .main-content li { list-style: disc; margin-bottom: .35em; }
body.page:not(.home) .main-content a { color: #015806; text-decoration: underline; }
body.page:not(.home) .main-content em { color: #6b7366; }

/* ==========================================================================
   Age gate (markup in functions.php, logic in crabbies.js)
   ========================================================================== */
.crb-age { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
	background: radial-gradient(ellipse at 50% 35%, #016e08 0%, #015806 45%, #013304 100%); }
html.crb-age-ok .crb-age { display: none !important; }
html.crb-age-locked, html.crb-age-locked body { overflow: hidden !important; }
.crb-age__panel { width: 100%; max-width: 520px; text-align: center; color: #f9f6e9; animation: crb-age-in .6s ease-out both; }
@keyframes crb-age-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.crb-age__logo { display: block; width: clamp(170px, 40vw, 240px); height: auto; margin: 0 auto 26px; }
.crb-age .crb-age__title { font-family: var(--crb-display); font-size: clamp(28px, 5vw, 42px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: #f9f6e9; margin: 0 0 .4em; }
.crb-age .crb-age__desc { font-family: var(--crb-serif); font-size: clamp(17px, 2.2vw, 20px); line-height: 1.45; color: #f9f6e9; margin: 0 auto 22px; max-width: 26em; padding: 0; }
.crb-age__fields { display: flex; justify-content: center; gap: 12px; border: 0; margin: 0; padding: 0; }
.crb-age__field { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--crb-caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #cca866; }
.crb-age .crb-age__field input { width: 76px; height: 60px; padding: 0 !important; border: 2px solid rgba(249, 246, 233, .55) !important; border-radius: 10px !important; background: rgba(0, 0, 0, .18) !important; color: #fff !important;
	font-family: var(--crb-display); font-size: 26px !important; text-align: center; letter-spacing: .06em; box-shadow: none !important; transition: border-color .2s; }
.crb-age .crb-age__field--year input { width: 112px; }
.crb-age .crb-age__field input::placeholder { color: rgba(249, 246, 233, .4); }
.crb-age .crb-age__field input:focus { outline: none; border-color: #e3be63 !important; }
.crb-age .crb-age__error { min-height: 1.5em; margin: 14px 0 6px; padding: 0; font-family: var(--crb-serif); font-size: 17px; line-height: 1.4; color: #ffd58a; }
.crb-age .crb-age__btn { display: inline-block; min-width: 220px; padding: 15px 30px 13px; border: 2px solid #e3be63; border-radius: 999px; background: transparent; color: #e3be63;
	font-family: var(--crb-display); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s; }
.crb-age .crb-age__btn:hover, .crb-age .crb-age__btn:focus-visible { background: #e3be63; color: #013304; outline: none; }
.crb-age .crb-age__btn[disabled] { opacity: .45; cursor: not-allowed; background: transparent; color: #e3be63; }
.crb-age .crb-age__small { margin: 22px 0 0; padding: 0; font-family: var(--crb-caps); font-size: 12px; line-height: 1.6; letter-spacing: .06em; color: rgba(249, 246, 233, .85); }
.crb-age .crb-age__small + .crb-age__small { margin-top: 6px; color: #cca866; }
.crb-age .crb-age__small a { color: inherit; text-decoration: underline; }
.crb-age.is-leaving { transition: opacity .45s ease; opacity: 0; pointer-events: none; }
@media (max-width: 420px) {
	.crb-age__fields { gap: 8px; }
	.crb-age .crb-age__field input { width: 64px; height: 54px; font-size: 22px !important; }
	.crb-age .crb-age__field--year input { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .crb-age__panel { animation: none; } .crb-age.is-leaving { transition: none; } }
/* Age gate button: Salient paints submit buttons with the accent colour, which hid the label – force the outline style back. */
html body .crb-age .crb-age__btn { background: transparent !important; color: #e3be63 !important; border: 2px solid #e3be63 !important; box-shadow: none !important; margin-top: 10px !important; border-radius: 999px !important; }
html body .crb-age .crb-age__btn:hover,
html body .crb-age .crb-age__btn:focus-visible { background: #e3be63 !important; color: #013304 !important; }
html body .crb-age .crb-age__btn[disabled] { background: transparent !important; color: #e3be63 !important; opacity: .45 !important; }
html body .crb-age .crb-age__error { display: block; min-height: 1.5em; margin: 18px 0 8px !important; }