/* =========================================================
   Bernstein Woo — base: tokens, reset, typography, layout
   ========================================================= */

:root {
  /* Brand palette (measured from the reference design) */
  --color-black:            #111111;
  --color-black-light:      #414141;
  --color-white:            #ffffff;
  --color-gray:             #666666;
  --color-gray-medium:      #c5c5c5;
  --color-gray-light:       #e5e5e5;
  --color-gray-ultra-light: #f5f5f5;
  --color-blue:             #005a70;
  --color-blue-border:      #587e88;
  --color-blue-light:       #abc8cf;
  --color-green:            #46b810;
  --color-gold:             #fdc55b;
  --color-orange:           #fdc55b;
  --color-red:              #f22c00;
  --color-red-discount:     #cc0000;
  --color-red-badge:        #b90909;

  /* Layout */
  --container-max:   1516px;
  --container-pad:   16px;
  --header-bar-h:    64px;
  --header-nav-h:    56px;
  --header-height:   64px;

  /* Motion */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --dur:             0.3s;

  /* Elevation */
  --shadow-menu:     0 12px 32px rgba(17, 17, 17, 0.12);
}

@media only screen and (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --header-bar-h:  80px;
    --header-nav-h:  64px;
    --header-height: 144px;
  }
}

@media only screen and (min-width: 1400px) {
  :root { --container-pad: 48px; }
}

/* ---------- Reset ---------- */

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

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

body {
  margin: 0;
  font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

img, picture, video, svg { max-width: 100%; }
img { height: auto; border: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* ---------- Accessibility helpers ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-to-content:focus {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 1000;
  width: auto; height: auto;
  padding: 12px 20px;
  clip: auto;
  clip-path: none;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: var(--shadow-menu);
}

/* ---------- Typography scale (matches the reference system) ---------- */

.f-64 { font-size: 40px; line-height: 1.25; }
.f-48 { font-size: 32px; line-height: 1.25; }
.f-32 { font-size: 24px; line-height: 1.25; }
.f-24 { font-size: 18px; line-height: 1.25; }
.f-18 { font-size: 16px; }
.f-16 { font-size: 16px; }
.f-14 { font-size: 14px; }
.f-12 { font-size: 12px; }
.f-11 { font-size: 11px; }

@media only screen and (min-width: 768px) {
  .f-24 { font-size: 20px; }
  .f-18 { font-size: 18px; }
}

@media only screen and (min-width: 1200px) {
  .f-64 { font-size: 48px; }
}

@media only screen and (min-width: 1400px) {
  .f-64 { font-size: 64px; }
  .f-48 { font-size: 48px; }
  .f-32 { font-size: 32px; }
  .f-24 { font-size: 24px; }
}

.w-regular { font-weight: 400; }
.w-medium  { font-weight: 500; }
.w-bold    { font-weight: 700; }
.upper     { text-transform: uppercase; }
.spaced    { letter-spacing: 0.08em; }
.t-center  { text-align: center; }
.c-gray    { color: var(--color-gray); }
.c-blue    { color: var(--color-blue); }

/* Rule-prefixed heading used by the showcase / banner blocks */
.f-32--deco { position: relative; padding-left: 40px; }
.f-32--deco::before {
  content: "";
  position: absolute;
  top: 14px; left: 0;
  width: 32px; height: 2px;
  background-color: var(--color-black);
}

@media only screen and (min-width: 1400px) {
  .f-32--deco { padding-left: 120px; }
  .f-32--deco::before { top: 19px; width: 96px; }
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container--text { max-width: 930px; }
.container--flush { padding-left: 0; padding-right: 0; }

.section { position: relative; }
.section + .section { margin-top: 48px; }

@media only screen and (min-width: 992px) {
  .section + .section { margin-top: 80px; }
}

/* Section heading: title left, "view all" link right */
.heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.heading__text { min-width: 0; }
.heading__text p { margin: 4px 0 0; color: var(--color-gray); }

@media only screen and (min-width: 992px) {
  .heading { margin-bottom: 32px; }
}

/* ---------- Media wrappers ---------- */

.media { display: block; position: relative; overflow: hidden; }
.media img { display: block; width: 100%; }

.media--cover { height: 100%; }
.media--cover img { width: 100%; height: 100%; object-fit: cover; }

.media--square { aspect-ratio: 1 / 1; }
.media--background { background-color: var(--color-gray-ultra-light); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 32px;
  border: 1px solid transparent;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn--primary {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover { background-color: var(--color-black-light); border-color: var(--color-black-light); color: var(--color-white); }

.btn--secondary {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}
.btn--secondary:hover { background-color: transparent; color: var(--color-white); }

.btn--outline {
  background-color: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}
.btn--outline:hover { background-color: var(--color-black); color: var(--color-white); }

.btn--outline-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn--outline-light:hover { background-color: var(--color-white); color: var(--color-black); }

.btn--block { width: 100%; }

/* Underlined text link with animated rule — used by "See all offers" */
.text-link {
  position: relative;
  display: inline-block;
  color: var(--color-blue);
  white-space: nowrap;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.text-link:hover::after { transform: scaleX(0); transform-origin: right center; }

.text-link--reverse::after { transform: scaleX(0); transform-origin: right center; }
.text-link--reverse:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Icons ---------- */

.icon { display: block; flex: none; fill: none; }
.icon--stroke { stroke: currentColor; }

/* ---------- Rich text ---------- */

.richtext h1 { font-size: 32px; line-height: 1.25; }
.richtext h2 { font-size: 24px; line-height: 1.25; }
.richtext h3 { font-size: 18px; line-height: 1.25; }
.richtext h4 { font-size: 16px; }
.richtext h5, .richtext h6 { font-size: 16px; }
.richtext h2, .richtext h3, .richtext h4 { margin: 1.5em 0 0.5em; }
.richtext h2:first-child, .richtext h3:first-child { margin-top: 0; }
.richtext ul { margin: 0 0 1em; padding-left: 20px; list-style: disc; }
.richtext li { margin-bottom: 0.35em; }
.richtext a { color: var(--color-blue); text-decoration: underline; }

@media only screen and (min-width: 768px) {
  .richtext h3 { font-size: 20px; }
  .richtext h4 { font-size: 18px; }
}

@media only screen and (min-width: 1400px) {
  .richtext h1 { font-size: 48px; }
  .richtext h2 { font-size: 32px; }
  .richtext h3 { font-size: 24px; }
}

.richtext--gray { color: var(--color-gray); }
.richtext--gray h1, .richtext--gray h2, .richtext--gray h3 { color: var(--color-black); }