/*
Theme Name: Ramslin
Theme URI: https://ramslin.hr
Description: Ramslin storefront child theme, built on GeneratePress.
Author: code404
Template: generatepress
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.2
Version: 1.1.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

:root {
  /* light */
  --ramslin-sage: #AEDCC0;
  --ramslin-moss: #607466;
  --ramslin-ink: #343E3D;
  --ramslin-body: #4C5A53;
  --ramslin-muted: #7C8B82;
  --ramslin-faint: #9AA79F;
  --ramslin-accent: #3C6E4F;
  --ramslin-accent-dark: #2E573D;
  --ramslin-ground: #FBFCFA;
  --ramslin-surface: #FFFFFF;
  --ramslin-wash: #EFF5EE;
  --ramslin-wash-deep: #E4EEE4;
  --ramslin-line: #E2EAE2;
  --ramslin-line-soft: #EDF2EC;

  /* error / invalid — used by assets/css/commerce.css */
  --ramslin-error: #A6453B;
  --ramslin-error-line: #E8D3D0;
  --ramslin-error-wash: #FCF2F1;

  /* night */
  --ramslin-night: #141917;
  --ramslin-night-2: #1B221F;
  --ramslin-night-3: #232C28;
  --ramslin-night-text: #EAF0EB;
  --ramslin-night-dim: #A7B4AB;
  --ramslin-night-faint: #75837B;
  --ramslin-night-line: rgba(174, 220, 192, .16);

  /* type */
  --ramslin-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ramslin-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* layout */
  --ramslin-width: 1140px;
  --ramslin-gutter: clamp(20px, 4vw, 40px);
  --ramslin-section: clamp(76px, 9vw, 136px);
  --ramslin-radius: 3px;
  --ramslin-header-h: 76px;
}

/* === 02  FONTS ======================================================== */
/*
   Self-hosted, subset to latin + the Croatian diacritics. No Google Fonts
   request: faster, and no visitor data leaves the site. A font-weight RANGE
   is what marks a file as variable — one file serves every weight in it.
*/

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-italic-300.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dmsans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* === 03  GENERATEPRESS OVERRIDES ====================================== */
/*
   Undoes the parent's container stack so a band can paint edge to edge.
   ID-scoped on purpose: one ID is (1,0,0) and outranks any class stack
   GeneratePress builds, so nothing here needs !important. The IDs come from
   inc/class-html-attributes.php and are part of GP's public contract.
*/

.ramslin-landing #page,
.ramslin-landing #content,
.ramslin-landing #primary,
.ramslin-landing #main {
  display: block;        /* beats main.css:1176 .site-content{display:flex} */
  width: 100%;
  max-width: 100%;       /* beats main.css:1180 .grid-container{max-width:1200px} */
  margin: 0;             /* beats main.css:1238 .separate-containers .site-main{margin:20px} */
  padding: 0;
  min-width: 0;
}

/* Without this every band is separated by a 20px strip of page background —
   including the hero and the trust bar, which must read as one dark surface. */
.ramslin-landing #main > * {
  margin-bottom: 0;      /* beats main.css:1188 .site-main > *{margin-bottom:20px} */
}

/* PHP-independent fallback: if the body class ever fails to land, the presence of
   the hero is enough to release the container. */
#page:has(.ramslin-hero),
#content:has(.ramslin-hero),
#primary:has(.ramslin-hero),
#main:has(.ramslin-hero) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* The design's measure is 1140px; GeneratePress defaults to 1200px. The token wins
   at runtime. This matters for the header too, which is constrained by
   .inside-header.grid-container — a 60px disagreement would misalign the brand mark
   against the hero headline below it. */
.grid-container {
  max-width: var(--ramslin-width);   /* beats main.css:1180 */
}

/* === 04  BASE ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ramslin-ground);
  color: var(--ramslin-body);
  font-family: var(--ramslin-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ramslin-ink);
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--ramslin-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--ramslin-sage);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The header is fixed and html has smooth scrolling, so without this every
   in-page jump (#velicine, #zasto, #iskustva, #pitanja) lands with its heading
   tucked underneath the header. */
[id] { scroll-margin-top: calc(var(--ramslin-header-h) + 12px); }

.ramslin-wrap {
  max-width: var(--ramslin-width);
  margin-inline: auto;
  padding-inline: var(--ramslin-gutter);
}

.ramslin-sec { padding-block: var(--ramslin-section); }

/* Icon sprite container. Never display:none — several engines refuse to resolve a
   <use> into a display:none subtree and every icon silently disappears. Zero-size
   plus overflow:hidden is the safe idiom. */
.ramslin-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* === 05  TYPE ========================================================= */

.ramslin-h1 {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: clamp(2.9rem, 1.7rem + 4.6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.026em;
}

.ramslin-h2 {
  font-family: var(--ramslin-font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.018em;
}

.ramslin-h3 {
  font-family: var(--ramslin-font-display);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.28;
  letter-spacing: -.008em;
}

.ramslin-h4 {
  font-family: var(--ramslin-font-body);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -.004em;
}

.ramslin-em {
  font-family: var(--ramslin-font-display);
  font-style: italic;
  font-weight: 300;
}

.ramslin-lede { font-size: 1.14rem; line-height: 1.6; }
.ramslin-measure { max-width: 56ch; }

/* Eyebrow with a hairline lead-in — the section marker for the page. */
.ramslin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ramslin-font-body);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ramslin-moss);
}

.ramslin-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.ramslin-eyebrow--center { justify-content: center; }
.ramslin-eyebrow--night { color: var(--ramslin-sage); }

/* === 06  BUTTONS ====================================================== */

.ramslin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--ramslin-font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--ramslin-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Every variant routes its text colour through --btn-fg and restates it for
   :hover/:focus.
   GeneratePress declares `a:hover,a:focus,a:active{color:var(--contrast)}` at (0,1,1),
   which outranks a variant class at (0,1,0). A variant that sets colour only in its
   base rule therefore loses it the instant it is hovered — which turned the
   outline-light button's white label to GP's dark text against a dark band, and would
   have done the same to the primary button's white label on dark green.
   Declaring it once here at (0,2,0) closes the whole class of bug rather than
   patching each variant as it is noticed. */
.ramslin-btn { color: var(--btn-fg, inherit); }

.ramslin-btn:hover,
.ramslin-btn:focus {
  color: var(--btn-fg, inherit);
  text-decoration: none;
}

.ramslin-btn--primary { --btn-fg: #fff; background: var(--ramslin-accent); }
.ramslin-btn--primary:hover { background: var(--ramslin-accent-dark); }

.ramslin-btn--ghost {
  --btn-fg: var(--ramslin-ink);
  background: transparent;
  border-color: var(--ramslin-line);
}
.ramslin-btn--ghost:hover { border-color: var(--ramslin-moss); background: var(--ramslin-wash); }

/* Sage inverts to the brand green on hover rather than lightening. The mockup's
   #C6E9D4 is only Δlum 0.11 from the resting sage, which is below what registers as
   feedback; the inversion is Δlum 0.51 and still passes AA at 5.94:1. It also reuses
   the primary CTA colour, so hovering reads as "this is the commit action". */
.ramslin-btn--sage { --btn-fg: #1E2A24; background: var(--ramslin-sage); }
.ramslin-btn--sage:hover,
.ramslin-btn--sage:focus {
  --btn-fg: #fff;
  background: var(--ramslin-accent);
}

.ramslin-btn--outline-light {
  --btn-fg: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
}
.ramslin-btn--outline-light:hover {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .07);
}

.ramslin-btn--sm { padding: 11px 21px; font-size: .87rem; }
.ramslin-btn--block { width: 100%; }

/* === 07  HEADER ======================================================= */
/*
   Solid is the BASE state and transparent is the modifier — the inverse of the
   mockup. Ported literally, a transparent-by-default header would be invisible on
   every inner page, which has no dark hero under it. Every colour is a custom
   property, so each skin is one small block rather than twenty duplicated rules.
*/

.ramslin-header {
  --hdr-bg: rgba(251, 252, 250, .9);
  --hdr-line: var(--ramslin-line);
  --hdr-blur: saturate(180%) blur(12px);
  --hdr-fg: var(--ramslin-body);
  --hdr-fg-strong: var(--ramslin-ink);
  --hdr-mark: var(--ramslin-moss);
  --hdr-cta-bg: var(--ramslin-accent);
  --hdr-cta-fg: #fff;
  --hdr-cta-bg-hover: var(--ramslin-accent-dark);
  --hdr-cta-fg-hover: #fff;

  position: fixed;          /* beats main.css:777 .site-header{position:relative} */
  inset: 0 0 auto;
  z-index: 60;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  transition: background-color .25s ease, border-color .25s ease;
}

/* Transparent only while over the hero, not scrolled, and not showing the menu. */
.ramslin-header--overlay:not(.is-stuck):not(:has(#site-navigation.toggled)) {
  --hdr-bg: transparent;
  --hdr-line: transparent;
  --hdr-blur: none;
  --hdr-fg: rgba(255, 255, 255, .82);
  --hdr-fg-strong: #fff;
  --hdr-mark: var(--ramslin-sage);
  --hdr-cta-bg: var(--ramslin-sage);
  --hdr-cta-fg: #1E2A24;
  --hdr-cta-bg-hover: var(--ramslin-accent);
  --hdr-cta-fg-hover: #fff;
}

/* The header is fixed, so every page except the landing one must reserve its height. */
body { padding-top: var(--ramslin-header-h); }
body.ramslin-landing { padding-top: 0; }

.site-header .ramslin-header__inner {
  display: flex;            /* beats main.css:811 */
  align-items: center;
  gap: 24px;
  min-height: var(--ramslin-header-h);
  max-width: var(--ramslin-width);
  margin-inline: auto;
  padding: 0 var(--ramslin-gutter);   /* beats main.css:781 .inside-header{padding:20px 40px} */
}

.ramslin-brand {
  order: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.ramslin-brand:hover { text-decoration: none; }
.ramslin-brand__mark { flex: none; color: var(--hdr-mark); transition: color .25s ease; }
.ramslin-brand__name {
  font-family: var(--ramslin-font-display);
  font-size: 1.42rem;
  font-weight: 400;
  color: var(--hdr-fg-strong);
  letter-spacing: .015em;
  transition: color .25s ease;
}

#site-navigation { order: 1; margin-left: 0; }   /* beats main.css:828 .nav-float-right #site-navigation{margin-left:auto} */
.ramslin-header__actions { order: 2; display: flex; align-items: center; gap: 14px; }
.site-header .mobile-menu-control-wrapper { order: 3; margin-left: 0; }

/* GeneratePress paints the nav with its own opaque background via dynamic CSS —
   `.main-navigation,.main-navigation ul ul{background-color:var(--base-3)}`. Left
   alone that renders as a solid light block floating in the middle of a transparent
   header. The header owns its background; the nav must not paint one. The toggled
   mobile panel gets its surface back explicitly in the 900px block below.

   GeneratePress renders TWO elements carrying .main-navigation inside the header: the
   real nav (#site-navigation) and a separate .mobile-menu-control-wrapper holding the
   hamburger. Both match GP's background rule, so targeting only #site-navigation left
   the wrapper painting an empty white rectangle in the middle of the header. */
.ramslin-header .main-navigation,
.ramslin-header .inside-navigation {
  background: transparent;   /* beats generate-style inline .main-navigation (0,1,0) */
}

#site-navigation .inside-navigation { padding: 0; }
#primary-menu > ul { display: flex; align-items: center; gap: 30px; }

.main-navigation .main-nav ul li a {
  padding: 6px 0;           /* beats main.css:547 padding-left/right:20px; line-height:60px */
  line-height: 1.4;
  font-size: .94rem;        /* beats main.css:533 .main-navigation a{font-size:15px} */
  border-bottom: 1px solid transparent;
  transition: color .25s ease;
}

/* Colour is set at (0,3,3) to match GeneratePress's own current-item rule, which its
   dynamic CSS emits as
     .main-navigation .main-nav ul li[class*="current-menu-"] > a{color:var(--accent)}
   A plain `.main-navigation .main-nav ul li a` is (0,2,3) and loses to it.
   This is not an edge case on this site: every header link is a same-page anchor
   (#velicine, #zasto, …), so WordPress marks ALL of them current-menu-item on the
   front page and the entire nav renders in GP's accent instead of the header skin. */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--hdr-fg);     /* beats generate-style inline current-item rule (0,3,3) */
}

/* Hover has to be matched at (0,4,3), because GeneratePress emits
     .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a{color:var(--accent)}
   which outranks a plain `… li > a:hover` at (0,3,3). Both the current and
   non-current branches are restated so the colour holds either way. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus {
  color: var(--hdr-fg-strong);
  border-bottom-color: var(--ramslin-sage);
  text-decoration: none;
}

.ramslin-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ramslin-radius);
  color: var(--hdr-fg-strong);
  transition: color .25s ease, background-color .25s ease;
}
/* GeneratePress declares `a:hover,a:focus,a:active{color:var(--contrast)}` at (0,1,1),
   which outranks a bare `.ramslin-cart` at (0,1,0). Any header link that sets a colour
   but no hover colour therefore loses it on hover — the cart icon turned GP's dark text
   colour and disappeared against the hero. Every interactive element in the header
   restates its colour for :hover and :focus. */
.ramslin-cart:hover,
.ramslin-cart:focus {
  color: var(--hdr-fg-strong);
  background: rgba(127, 127, 127, .12);
  text-decoration: none;
}

.ramslin-brand:hover .ramslin-brand__name,
.ramslin-brand:focus .ramslin-brand__name { color: var(--hdr-fg-strong); }
.ramslin-brand:hover .ramslin-brand__mark,
.ramslin-brand:focus .ramslin-brand__mark { color: var(--hdr-mark); }

.ramslin-cart__count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--hdr-cta-bg);
  color: var(--hdr-cta-fg);
  font-size: .63rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

/* The header CTA follows the header skin, so it needs its own hover rather than the
   global sage one: on the SOLID header the button is already accent green, and the
   global invert would be a no-op there. Each skin therefore names its own hover pair —
   sage inverts to accent, accent deepens to accent-dark.
   This rule also has to exist because the header's resting rule below is (0,2,0) and
   sits later in the file than the global `.ramslin-btn--sage:hover`, so it would
   otherwise win the hover state and nothing would change. */
.ramslin-header .ramslin-btn--sage {
  --btn-fg: var(--hdr-cta-fg);
  background: var(--hdr-cta-bg);
}
.ramslin-header .ramslin-btn--sage:hover,
.ramslin-header .ramslin-btn--sage:focus {
  --btn-fg: var(--hdr-cta-fg-hover);
  background: var(--hdr-cta-bg-hover);
}

.site-header button.menu-toggle {
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 1;
  color: var(--hdr-fg-strong);
}

@media (max-width: 900px) {
  /* Below 900px GeneratePress wraps the header and gives #site-navigation
     flex-basis:100% (inline dynamic CSS, inc/css-output.php:1186-1192) so the menu can
     drop open BELOW the bar. Three corrections, all measured in a browser:

     1. order:10 on the nav. The desktop order puts it between the brand (0) and the
        cart (2) / hamburger (3); a 100%-wide item there broke the line straight after
        the brand, dropping cart and hamburger to a second row on the left and growing
        the header from 76px to 126px on every page.
     2. row-gap:0, and the first row pinned to the header height via the brand. The
        24px `gap` also applies between wrapped rows, so even the empty menu row
        pushed the bar's contents 24px off centre.
     3. No top margin on the open panel. main.css:1541 adds 1.5em there, which opened a
        strip between bar and panel and pushed the panel 24px past the max-height
        below, which assumes it starts at the header height. */
  .site-header .ramslin-header__inner {
    flex-direction: row;    /* beats main.css:1580 .inside-header{flex-direction:column} */
    text-align: left;
    row-gap: 0;
    align-content: flex-start;
  }
  .ramslin-brand { min-height: var(--ramslin-header-h); }
  #site-navigation { order: 10; }
  #masthead #site-navigation.toggled { margin-top: 0; }   /* beats main.css:1541 .has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em} */

  /* GeneratePress hides the menu below this breakpoint with
       .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul
     which is (0,6,1). The desktop rule above is `#primary-menu > ul` at (1,0,1), and a
     single ID outranks any number of classes — so without this the nav stayed visible
     on phones and tablets *alongside* the hamburger. Restated here with two IDs so the
     hide wins. */
  #site-navigation:not(.toggled) #primary-menu > ul { display: none; }

  #site-navigation.toggled .main-nav {
    background: var(--ramslin-surface);
    border-top: 1px solid var(--ramslin-line);
    max-height: calc(100svh - var(--ramslin-header-h));
    overflow-y: auto;
  }
  #site-navigation.toggled #primary-menu > ul { display: block; }
  .main-navigation.toggled .main-nav ul li a {
    display: block;
    padding: 14px var(--ramslin-gutter);
    color: var(--ramslin-body);
  }
}

@media (max-width: 640px) {
  .ramslin-header__actions .ramslin-btn { display: none; }
}

/* === 08  HERO ========================================================= */
/*
   Full viewport, dark. svh rather than vh: on mobile, vh measures the EXPANDED
   viewport, so browser chrome crops the call to action off the bottom.
*/

.ramslin-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 132px 116px;
  background: var(--ramslin-night);
}

.ramslin-hero__bg { position: absolute; inset: 0; z-index: -2; }
.ramslin-hero__bg picture { display: block; width: 100%; height: 100%; }
.ramslin-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 64%;
}

/* Three stacked gradients, not one. This is what makes white type legible over a
   photograph and what pushes the bottle's own branding toward illegibility. */
.ramslin-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 25, 23, .92) 0%, rgba(20, 25, 23, .42) 20%, rgba(20, 25, 23, 0) 40%),
    linear-gradient(90deg, rgba(20, 25, 23, .96) 0%, rgba(20, 25, 23, .86) 34%, rgba(20, 25, 23, .30) 62%, rgba(20, 25, 23, .08) 100%),
    linear-gradient(180deg, rgba(30, 45, 36, .30) 0%, rgba(20, 25, 23, .70) 100%);
}

.ramslin-hero__copy { max-width: 34rem; }
.ramslin-hero__title { color: #fff; margin-block: 20px 24px; }
.ramslin-hero__lede {
  color: var(--ramslin-night-dim);
  font-size: 1.16rem;
  line-height: 1.6;
  max-width: 44ch;
}

.ramslin-hero__ticks {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ramslin-hero__ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 1.01rem;
  line-height: 1.45;
  color: var(--ramslin-night-text);
}
.ramslin-hero__ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ramslin-sage);
}

.ramslin-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 38px;
}
.ramslin-hero__from { font-size: .9rem; color: var(--ramslin-night-dim); }
.ramslin-hero__from b,
.ramslin-hero__from .amount {
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Scroll cue — the only motion on the page. */
.ramslin-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .5);
  font-size: .66rem;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.ramslin-scrollcue:hover { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ramslin-scrollcue i {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--ramslin-sage), transparent);
  animation: ramslin-cue 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes ramslin-cue {
  0%, 100% { transform: scaleY(.35); opacity: .5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@media (max-width: 640px) {
  .ramslin-hero { min-height: 88svh; padding-block: 112px 92px; }
}

/* === 09  TRUST BAR ==================================================== */
/*
   Stays dark so the hero resolves before the page opens into light. It must sit
   flush against the hero — the only intended separation is the hairline below.
   The margin that would otherwise appear between them is zeroed in block 03.
*/

.ramslin-trust {
  background: var(--ramslin-night-2);
  border-top: 1px solid var(--ramslin-night-line);
  padding-block: 24px;
}

.ramslin-trust__inner {
  list-style: none;
  /* margin-block, NOT the margin shorthand. This element also carries .ramslin-wrap,
     which centres it with margin-inline:auto — and a `margin: 0` here would reset that
     back to zero, leaving the 1140px box flush left while its contents stayed centred
     inside it. The strip then reads noticeably off-centre against every other band. */
  margin-block: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
  justify-content: center;
  align-items: center;
}

.ramslin-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .83rem;
  color: var(--ramslin-night-dim);
}

.ramslin-trust svg {
  flex: none;
  color: var(--ramslin-sage);
}

/* === 10  SIZES & PRICES =============================================== */
/*
   The first light band, and the decision moment of the page.
*/

.ramslin-sizes__head { text-align: center; margin-bottom: 48px; }
.ramslin-sizes__head .ramslin-h2 { margin-block: 14px 14px; }
.ramslin-sizes__head p {
  color: var(--ramslin-muted);
  margin-inline: auto;
  max-width: 52ch;
}

.ramslin-sizes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  background: var(--ramslin-surface);
  overflow: hidden;
}

.ramslin-size {
  display: flex;
  flex-direction: column;
  padding: 34px 26px 28px;
  border-right: 1px solid var(--ramslin-line);
  position: relative;
}
.ramslin-size:last-child { border-right: 0; }

.ramslin-size__vol {
  font-family: var(--ramslin-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ramslin-ink);
  line-height: 1;
}

.ramslin-size__price {
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--ramslin-ink);
  line-height: 1.1;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.022em;
}

.ramslin-size__unit {
  font-size: .83rem;
  color: var(--ramslin-muted);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.ramslin-size__spacer { flex: 1; min-height: 26px; }

/* The popular size borrows the hero's darkness — one tie-back, not a theme. */
.ramslin-size--popular {
  background: var(--ramslin-night);
  border-right-color: var(--ramslin-night);
}
.ramslin-size--popular .ramslin-size__vol,
.ramslin-size--popular .ramslin-size__price { color: #fff; }
.ramslin-size--popular .ramslin-size__unit { color: var(--ramslin-night-dim); }

.ramslin-size__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1E2A24;
  background: var(--ramslin-sage);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}

/* A four-column price grid is unusable on a phone, so the two breakpoints the design
   specifies for this band ship with it rather than waiting for the responsive pass. */
@media (max-width: 1000px) {
  .ramslin-sizes__grid { grid-template-columns: repeat(2, 1fr); }
  .ramslin-size:nth-child(2) { border-right: 0; }
  .ramslin-size:nth-child(-n+2) { border-bottom: 1px solid var(--ramslin-line); }
}

@media (max-width: 640px) {
  .ramslin-sizes__grid { grid-template-columns: 1fr; }
  .ramslin-size { border-right: 0; border-bottom: 1px solid var(--ramslin-line); }
  .ramslin-size:last-child { border-bottom: 0; }
}

/* === 11  WHY ========================================================== */
/*
   Sits on the surface colour with hairlines above and below, so it reads as a panel
   against the page ground rather than as another full-width stripe.
*/

.ramslin-why {
  background: var(--ramslin-surface);
  border-block: 1px solid var(--ramslin-line);
}

.ramslin-why__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
  margin-bottom: clamp(52px, 6vw, 84px);
}
.ramslin-why__top .ramslin-h2 { margin-block: 14px 20px; }

.ramslin-why__stat {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-top: 26px;
  margin-top: 28px;
  border-top: 1px solid var(--ramslin-line);
}
.ramslin-why__stat b {
  font-family: var(--ramslin-font-display);
  font-size: 3.4rem;
  font-weight: 300;
  color: var(--ramslin-accent);
  line-height: 1;
  letter-spacing: -.03em;
}
.ramslin-why__stat span {
  font-size: .97rem;
  color: var(--ramslin-muted);
  line-height: 1.45;
}

.ramslin-why__img {
  border-radius: var(--ramslin-radius);
  aspect-ratio: 5/4;
  object-fit: cover;
  width: 100%;
}

.ramslin-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 42px);
}

.ramslin-fact {
  padding-top: 20px;
  border-top: 1px solid var(--ramslin-line);
}
.ramslin-fact svg {
  display: block;
  color: var(--ramslin-sage);
  margin-bottom: 16px;
}
.ramslin-fact h4 { margin-bottom: 8px; }
.ramslin-fact p {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ramslin-muted);
}

/* The band's own breakpoints ship with it: a two-up split and a four-column fact row
   are both unusable on a phone. */
@media (max-width: 1000px) {
  .ramslin-why__top { grid-template-columns: 1fr; }
  .ramslin-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ramslin-facts { grid-template-columns: 1fr; }
}

/* === 12  ORIGIN STORY ================================================= */
/*
   The second dark band, and the first full-bleed one that is not at the top of the
   page. It paints its own background edge to edge and depends on block 03 having
   released GeneratePress's container for every child of <main>.
*/

.ramslin-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ramslin-night);
  color: var(--ramslin-night-text);
  padding-block: clamp(88px, 11vw, 150px);
}

.ramslin-story__bg { position: absolute; inset: 0; z-index: -2; }
.ramslin-story__bg picture { display: block; width: 100%; height: 100%; }
.ramslin-story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* Two gradients, not the hero's three: one horizontal wash to keep the left-hand
   copy legible, one vertical to seat the band. */
.ramslin-story__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 25, 23, .95) 0%, rgba(20, 25, 23, .88) 38%, rgba(20, 25, 23, .42) 68%, rgba(20, 25, 23, .22) 100%),
    linear-gradient(180deg, rgba(20, 25, 23, .55) 0%, rgba(20, 25, 23, .30) 40%, rgba(20, 25, 23, .72) 100%);
}

.ramslin-story__copy { max-width: 38rem; }
.ramslin-story__copy .ramslin-h2 { color: #fff; margin-block: 16px 22px; }
.ramslin-story__copy p {
  color: var(--ramslin-night-dim);
  font-size: 1.06rem;
}
.ramslin-story__copy p + p { margin-top: 15px; }

.ramslin-quote {
  margin: 38px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--ramslin-night-line);
}
.ramslin-quote blockquote {
  margin: 0;
  font-family: var(--ramslin-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  line-height: 1.4;
  color: #fff;
  letter-spacing: -.01em;
}
.ramslin-quote figcaption {
  margin-top: 16px;
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ramslin-night-faint);
}

/* === 13  REVIEWS + PARTNERS =========================================== */
/*
   Sits on the wash tint, with the cards in surface white on top of it. That contrast
   is what makes them read as cards — the band is deliberately not the page ground.
*/

.ramslin-reviews { background: var(--ramslin-wash); }

.ramslin-reviews__head { text-align: center; margin-bottom: 54px; }
.ramslin-reviews__head .ramslin-h2 { margin-block: 14px 14px; }
.ramslin-reviews__head p { color: var(--ramslin-muted); }

.ramslin-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.6vw, 34px);
}

.ramslin-review {
  background: var(--ramslin-surface);
  border: 1px solid var(--ramslin-line);
  border-radius: var(--ramslin-radius);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}

.ramslin-review__stars {
  display: flex;
  gap: 3px;
  color: var(--ramslin-moss);
  margin-bottom: 16px;
}

.ramslin-review h3 { font-size: 1.06rem; margin-bottom: 12px; }

/* flex:1 pushes the attribution to the bottom, so cards of unequal copy length still
   line their footers up across the row. */
.ramslin-review p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ramslin-body);
  flex: 1;
}

.ramslin-review footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ramslin-line-soft);
  font-size: .87rem;
  font-weight: 500;
  color: var(--ramslin-ink);
}

.ramslin-partners {
  margin-top: clamp(52px, 6vw, 76px);
  padding-top: 40px;
  border-top: 1px solid var(--ramslin-line);
}
.ramslin-partners p {
  text-align: center;
  color: var(--ramslin-muted);
  font-size: .9rem;
  margin-bottom: 28px;
}

.ramslin-partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 60px);
}
.ramslin-partners__row img {
  max-height: 34px;
  width: auto;
  opacity: .5;
  filter: grayscale(100%);
  transition: opacity .2s, filter .2s;
}
.ramslin-partners__row img:hover { opacity: 1; filter: grayscale(0); }

@media (max-width: 1000px) {
  .ramslin-reviews__grid { grid-template-columns: 1fr; }
}

/* === 14  FAQ ========================================================== */
/*
   Native <details>. No JavaScript: the element is already keyboard operable and
   announced correctly, so the CSS only hides the default marker and draws a chevron.
*/

.ramslin-faq__grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.ramslin-faq__head .ramslin-h2 { margin-block: 14px 16px; }
.ramslin-faq__head p {
  color: var(--ramslin-muted);
  font-size: .97rem;
}

.ramslin-faq__list { border-top: 1px solid var(--ramslin-line); }
.ramslin-faq details { border-bottom: 1px solid var(--ramslin-line); }

.ramslin-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  cursor: pointer;
  list-style: none;              /* standard marker */
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--ramslin-ink);
}
/* Both rules are required — engines disagree, and omitting either leaves a stray
   triangle beside the chevron in one of them. */
.ramslin-faq summary::-webkit-details-marker { display: none; }

.ramslin-faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--ramslin-moss);
  border-bottom: 1.5px solid var(--ramslin-moss);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.ramslin-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.ramslin-faq details > div {
  padding: 0 0 24px;
  max-width: 62ch;
}
.ramslin-faq details p {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ramslin-muted);
}
.ramslin-faq details p + p { margin-top: 11px; }
.ramslin-faq details ul {
  margin: 10px 0 0;
  padding-left: 19px;
  font-size: .94rem;
  color: var(--ramslin-muted);
  line-height: 1.7;
}

@media (max-width: 1000px) {
  .ramslin-faq__grid { grid-template-columns: 1fr; }
}

/* === 15  CLOSING CTA ================================================== */
/*
   The loop back to the hero, and the third dark band. No bottom margin or border:
   the footer sits flush beneath it and the two read as one continuous dark close.
*/

.ramslin-cta {
  position: relative;
  background: var(--ramslin-night);
  color: var(--ramslin-night-text);
  padding-block: clamp(80px, 10vw, 132px);
  overflow: hidden;
}

.ramslin-cta__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.ramslin-cta .ramslin-h2 { color: #fff; margin-block: 16px 18px; }
.ramslin-cta p { color: var(--ramslin-night-dim); max-width: 44ch; }

.ramslin-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
}

.ramslin-cta__note {
  margin-top: 22px;
  font-size: .85rem;
  color: var(--ramslin-night-faint);
}

/* drop-shadow, not box-shadow: the product shot has a transparent background, so the
   shadow must follow the bottle's silhouette rather than its bounding box. */
.ramslin-cta__media img {
  width: 100%;
  border-radius: var(--ramslin-radius);
  filter: drop-shadow(0 26px 56px rgba(0, 0, 0, .5));
}

@media (max-width: 1000px) {
  .ramslin-cta__grid { grid-template-columns: 1fr; }
}

/* === 16  FOOTER ======================================================= */
/*
   Dark, and continuous with the closing CTA above it — the CTA is deliberately given
   no bottom margin so the two read as one close. Carries the seller identification
   the live site currently omits.

   No container override needed: GeneratePress renders its footer element after #page
   closes (footer.php:25), so it is already full-bleed.
*/

.ramslin-footer {
  background: var(--ramslin-night-2);
  color: var(--ramslin-night-dim);
  padding-block: clamp(56px, 6vw, 80px) 0;
}

.ramslin-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 48px;
}

.ramslin-footer .ramslin-brand { margin-bottom: 18px; }
.ramslin-footer .ramslin-brand__mark { color: var(--ramslin-sage); }
.ramslin-footer .ramslin-brand__name { color: #fff; }

.ramslin-footer__brand p {
  font-size: .92rem;
  line-height: 1.6;
  max-width: 34ch;
  color: var(--ramslin-night-faint);
}

.ramslin-footer__contact {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .92rem;
}
.ramslin-footer__contact a { color: var(--ramslin-night-dim); }
.ramslin-footer__contact a:hover { color: var(--ramslin-sage); }

/* Was an inline style attribute in the mockup. */
.ramslin-footer__place { color: var(--ramslin-night-faint); }

.ramslin-footer h4 {
  font-size: .71rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  margin-bottom: 18px;
}

.ramslin-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ramslin-footer ul a { font-size: .93rem; color: var(--ramslin-night-faint); }
.ramslin-footer ul a:hover { color: var(--ramslin-sage); }

.ramslin-footer__legal {
  border-top: 1px solid var(--ramslin-night-line);
  padding-block: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
}
.ramslin-footer__legal p {
  font-size: .81rem;
  color: var(--ramslin-night-faint);
  line-height: 1.6;
}

.ramslin-pay {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ramslin-pay span {
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ramslin-night-dim);
  border: 1px solid var(--ramslin-night-line);
  border-radius: 2px;
  padding: 5px 9px;
}

/* Reads as unfinished, not as content. Removed when the client supplies the company
   registration details — a launch blocker tracked in REBUILD_PLAN. */
.ramslin-todo {
  color: var(--ramslin-sage);
  border-bottom: 1px dotted var(--ramslin-moss);
  font-style: normal;
}

@media (max-width: 640px) {
  .ramslin-footer__grid { grid-template-columns: 1fr; }
}

/* === 17  RESPONSIVE =================================================== */
/*
   Only the cross-band leftovers. Each band already ships the breakpoints that belong
   to it, next to the rules they modify — deliberately, so no band was ever unusable
   on a phone while waiting for this pass.

   ORDER MATTERS HERE. Several selectors below also appear in earlier 640px blocks.
   Because this block sits at the end of the file, its 1000px rules would otherwise
   beat those earlier 640px rules on a narrow viewport, where BOTH queries match. The
   1000px section therefore comes first, and the 640px section afterwards restates
   anything the wider query would otherwise capture.
*/

@media (max-width: 1000px) {
  .ramslin-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Product shot leads when the CTA stacks — the image is the argument at this size. */
  .ramslin-cta__media {
    order: -1;
    max-width: 340px;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Restated after the 1000px rule above, which would otherwise win here. */
  .ramslin-footer__grid { grid-template-columns: 1fr; }

  /* The hero's horizontal wash does nothing on a narrow screen — the copy spans the
     full width — so the mobile scrim is a vertical pair instead of the desktop trio. */
  .ramslin-hero__scrim {
    background:
      linear-gradient(180deg, rgba(20, 25, 23, .94) 0%, rgba(20, 25, 23, .6) 28%, rgba(20, 25, 23, .55) 56%, rgba(20, 25, 23, .92) 100%),
      linear-gradient(180deg, rgba(30, 45, 36, .28) 0%, rgba(20, 25, 23, .6) 100%);
  }

  .ramslin-footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }

  /* There is no room below the fold to cue a scroll on a phone, and the hero is
     already 88svh. */
  .ramslin-scrollcue { display: none; }
}

/* === 18  REDUCED MOTION =============================================== */
/*
   The only block in this project permitted to use !important, and the reason the rest
   of the stylesheet avoids it.

   The blanket selector is intentional: it disables any transition or animation added
   later without anyone having to remember this block exists. animation-iteration-count
   matters as much as the durations — without it an infinite animation simply restarts
   very fast instead of stopping.

   scroll-behavior is included because a smooth jump to #velicine is motion too, and
   BASE sets it to smooth.
*/

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}