/**
 * Feline × Shoptet — Step template master overlay
 *
 * Global reset + tokens. Loads after Step main-12.css and admin colors.
 * Gantari is loaded via header-slot.html (no @import here).
 *
 * Palette: docs/design/tokens/
 * Deploy: npm run sync && python3 scripts/sftp-upload.py theme/dist/theme.css
 */

/* ==========================================================================
   :root — Feline primitives
   ========================================================================== */

:root {
  --feline-primary-100: #fde9e7;
  --feline-primary-200: #f9cbc7;
  --feline-primary-400: #b18982;
  --feline-primary-500: #866761;
  --feline-primary-600: #5d4742;
  --feline-neutral-black: #1a1a1a;
  --feline-neutral-white: #ffffff;
  --feline-grey-200: #e2e0df;

  /* Semantic aliases */
  --color-text-strong: var(--feline-neutral-black);
  --color-text-body: var(--feline-primary-600);
  --color-text-muted: var(--feline-primary-500);
  --color-text-on-dark: var(--feline-neutral-white);
  --color-text-on-dark-soft: var(--feline-primary-100);
  --color-text-accent: var(--feline-primary-400);
  --color-text-promo: var(--feline-primary-200);
  --color-surface-page: var(--feline-neutral-white);
  --color-surface-raised: var(--feline-primary-100);
  --color-surface-inverted: var(--feline-primary-500);
  --color-surface-dark: var(--feline-primary-600);
  --color-border-subtle: var(--feline-grey-200);
  --color-border-brand: var(--feline-primary-400);
  --color-border-strong: var(--feline-primary-600);
  --color-cta-primary: var(--feline-neutral-black);
  --color-cta-secondary: var(--feline-primary-400);
  --color-cta-ghost: transparent;

  /* Typography */
  --font-family: 'Gantari', var(--template-font, sans-serif);
  --text-display-size: 72px;
  --text-display-lh: 1;
  --text-display-tracking: -0.03em;
  --text-h1-size: 40px;
  --text-h1-lh: 48px;
  --text-h1-tracking: -0.05em;
  --text-h2-size: 40px;
  --text-h2-lh: 48px;
  --text-h2-tracking: -0.05em;
  --text-h3-size: 24px;
  --text-h3-lh: 32px;
  --text-body-lg-size: 18px;
  --text-body-lg-lh: 28px;
  --text-body-size: 16px;
  --text-body-lh: 24px;
  --text-sm-size: 14px;
  --text-sm-lh: 20px;
  --text-eyebrow-tracking: 0.1em;
  --text-button-tracking: 0.1em;

  /* Spacing & layout */
  --space-page-x: 64px;
  --space-section-y: 96px;
  --space-section-y-md: 64px;
  --space-grid-gap-3: 32px;
  --space-grid-gap-3-tight: 24px;
  --space-grid-gap-4: 48px;
  --space-card: 24px;
  --space-nav-gap: 24px;
  --space-header-icon-gap: 24px;
  --space-header-nav-icons: 32px;
  --content-max: 1152px;
  --content-shell-max: calc(var(--content-max) + 2 * var(--space-page-x));
  --header-height: 116px;
  --header-promo-height: 36px;
  --header-main-height: 80px;
  --header-mobile-bar-height: 60px;

  /* Header utility icons (Figma 12:462–12:470) */
  --feline-icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%20%3Cpath%20d%3D%22M16.6%2018L10.3%2011.7C9.8%2012.1%209.225%2012.4167%208.575%2012.65C7.925%2012.8833%207.23333%2013%206.5%2013C4.68333%2013%203.14583%2012.3708%201.8875%2011.1125C0.629167%209.85417%200%208.31667%200%206.5C0%204.68333%200.629167%203.14583%201.8875%201.8875C3.14583%200.629167%204.68333%200%206.5%200C8.31667%200%209.85417%200.629167%2011.1125%201.8875C12.3708%203.14583%2013%204.68333%2013%206.5C13%207.23333%2012.8833%207.925%2012.65%208.575C12.4167%209.225%2012.1%209.8%2011.7%2010.3L18%2016.6L16.6%2018ZM6.5%2011C7.75%2011%208.8125%2010.5625%209.6875%209.6875C10.5625%208.8125%2011%207.75%2011%206.5C11%205.25%2010.5625%204.1875%209.6875%203.3125C8.8125%202.4375%207.75%202%206.5%202C5.25%202%204.1875%202.4375%203.3125%203.3125C2.4375%204.1875%202%205.25%202%206.5C2%207.75%202.4375%208.8125%203.3125%209.6875C4.1875%2010.5625%205.25%2011%206.5%2011Z%22%20fill%3D%22%23b18982%22%2F%3E%20%3C%2Fsvg%3E");
  --feline-icon-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%20%3Cpath%20d%3D%22M8%208C6.9%208%205.95833%207.60833%205.175%206.825C4.39167%206.04167%204%205.1%204%204C4%202.9%204.39167%201.95833%205.175%201.175C5.95833%200.391667%206.9%200%208%200C9.1%200%2010.0417%200.391667%2010.825%201.175C11.6083%201.95833%2012%202.9%2012%204C12%205.1%2011.6083%206.04167%2010.825%206.825C10.0417%207.60833%209.1%208%208%208ZM0%2016V13.2C0%2012.6333%200.145833%2012.1125%200.4375%2011.6375C0.729167%2011.1625%201.11667%2010.8%201.6%2010.55C2.63333%2010.0333%203.68333%209.64583%204.75%209.3875C5.81667%209.12917%206.9%209%208%209C9.1%209%2010.1833%209.12917%2011.25%209.3875C12.3167%209.64583%2013.3667%2010.0333%2014.4%2010.55C14.8833%2010.8%2015.2708%2011.1625%2015.5625%2011.6375C15.8542%2012.1125%2016%2012.6333%2016%2013.2V16H0ZM2%2014H14V13.2C14%2013.0167%2013.9542%2012.85%2013.8625%2012.7C13.7708%2012.55%2013.65%2012.4333%2013.5%2012.35C12.6%2011.9%2011.6917%2011.5625%2010.775%2011.3375C9.85833%2011.1125%208.93333%2011%208%2011C7.06667%2011%206.14167%2011.1125%205.225%2011.3375C4.30833%2011.5625%203.4%2011.9%202.5%2012.35C2.35%2012.4333%202.22917%2012.55%202.1375%2012.7C2.04583%2012.85%202%2013.0167%202%2013.2V14ZM8%206C8.55%206%209.02083%205.80417%209.4125%205.4125C9.80417%205.02083%2010%204.55%2010%204C10%203.45%209.80417%202.97917%209.4125%202.5875C9.02083%202.19583%208.55%202%208%202C7.45%202%206.97917%202.19583%206.5875%202.5875C6.19583%202.97917%206%203.45%206%204C6%204.55%206.19583%205.02083%206.5875%205.4125C6.97917%205.80417%207.45%206%208%206Z%22%20fill%3D%22%23b18982%22%2F%3E%20%3C%2Fsvg%3E");
  --feline-icon-cart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2220%22%20viewBox%3D%220%200%2016%2020%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%20%3Cpath%20d%3D%22M2%2020C1.45%2020%200.979167%2019.8042%200.5875%2019.4125C0.195833%2019.0208%200%2018.55%200%2018V6C0%205.45%200.195833%204.97917%200.5875%204.5875C0.979167%204.19583%201.45%204%202%204H4V4C4%202.9%204.39167%201.95833%205.175%201.175C5.95833%200.391667%206.9%200%208%200C9.1%200%2010.0417%200.391667%2010.825%201.175C11.6083%201.95833%2012%202.9%2012%204V4H14C14.55%204%2015.0208%204.19583%2015.4125%204.5875C15.8042%204.97917%2016%205.45%2016%206V18C16%2018.55%2015.8042%2019.0208%2015.4125%2019.4125C15.0208%2019.8042%2014.55%2020%2014%2020H2ZM2%2018H14V6H12V8C12%208.28333%2011.9042%208.52083%2011.7125%208.7125C11.5208%208.90417%2011.2833%209%2011%209C10.7167%209%2010.4792%208.90417%2010.2875%208.7125C10.0958%208.52083%2010%208.28333%2010%208V6H6V8C6%208.28333%205.90417%208.52083%205.7125%208.7125C5.52083%208.90417%205.28333%209%205%209C4.71667%209%204.47917%208.90417%204.2875%208.7125C4.09583%208.52083%204%208.28333%204%208V6H2V18ZM6%204H10V4C10%203.45%209.80417%202.97917%209.4125%202.5875C9.02083%202.19583%208.55%202%208%202C7.45%202%206.97917%202.19583%206.5875%202.5875C6.19583%202.97917%206%203.45%206%204Z%22%20fill%3D%22%23b18982%22%2F%3E%20%3C%2Fsvg%3E");

  /* Radii, borders, shadows */
  --radius-pill: 999px;
  --radius-pill-full: 9999px;
  --radius-card: 0;
  --shadow-header: 0 8px 12px rgba(26, 26, 26, 0.06);
  --shadow-panel: 0 1px 1px rgba(0, 0, 0, 0.05);
  --border-subtle: 1px solid var(--feline-grey-200);
  --border-brand: 1px solid var(--feline-primary-400);
  --border-strong: 1px solid var(--feline-primary-600);

  /* Shoptet admin variable bridge */
  --color-primary: var(--feline-primary-400);
  --color-primary-hover: var(--feline-primary-600);
  --color-secondary: var(--feline-neutral-black);
  --color-secondary-hover: #343434;
  --color-tertiary: var(--feline-primary-100);
  --color-header-background: var(--feline-neutral-white);
  --template-font: 'Gantari', sans-serif;
  --template-headings-font: 'Gantari', sans-serif;
}

/* ==========================================================================
   Base elements
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-body);
  background-color: var(--color-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--template-headings-font, var(--font-family));
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0;
}

h1 {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-tracking);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
}

h3,
h4,
h5,
h6 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

p,
li,
dd,
td {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

a {
  color: var(--color-text-strong);
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   Buttons (global)
   ========================================================================== */

.btn,
.button,
.add-to-cart-button,
.btn-conversion,
.btn-primary,
.btn-secondary {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 17px 32px;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.btn-conversion,
.add-to-cart-button,
.btn-primary {
  background-color: var(--color-cta-primary);
  border-color: var(--color-cta-primary);
  color: var(--feline-neutral-white);
}

.btn-secondary {
  background-color: var(--color-cta-ghost);
  border-color: var(--color-border-strong);
  color: var(--feline-primary-600);
}

/* Compact outline CTA in product cards (Figma 12:404) */
.products .product .btn,
.products .product .add-to-cart-button,
.products .product .btn-cart,
.products .product .button,
.products-block > div .p .p-bottom > div .p-tools .btn,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart,
.products-block > div .p .p-bottom > div .p-tools .add-to-cart-button,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart.add-to-cart-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 24px;
  border: 1px solid var(--feline-primary-600);
  border-radius: var(--radius-pill);
  background-color: transparent;
  background-image: none;
  color: var(--feline-primary-600);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 600;
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: middle;
  box-shadow: none;
  overflow: visible;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.products .product .btn::before,
.products .product .btn::after,
.products .product .add-to-cart-button::before,
.products .product .add-to-cart-button::after,
.products .product .btn-cart::before,
.products .product .btn-cart::after,
.products-block > div .p .p-bottom > div .p-tools .btn::before,
.products-block > div .p .p-bottom > div .p-tools .btn::after {
  content: none;
  display: none;
}

.products-block > div .p .p-bottom > div .p-tools .pr-action {
  width: auto;
  display: inline-block;
  margin: 0;
}

@media (min-width: 1440px) {
  .products-block .p .p-bottom .p-tools .btn.btn-cart,
  .products-block > div .p .p-bottom > div .p-tools .btn.btn-cart {
    width: auto;
    height: auto;
    min-height: 36px;
  }
}

/* ==========================================================================
   Forms / inputs
   ========================================================================== */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
select,
textarea,
.form-control {
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-strong);
  background-color: var(--feline-neutral-white);
  border: 1px solid var(--feline-primary-500);
  border-radius: var(--radius-pill-full);
  min-height: 48px;
  padding: 14px 17px;
  box-sizing: border-box;
}

textarea {
  min-height: 96px;
  border-radius: var(--radius-card);
}

input::placeholder,
textarea::placeholder {
  color: var(--feline-primary-400);
  opacity: 1;
}

/* ==========================================================================
   Container gutter
   ========================================================================== */

.container,
.feline-content-rail {
  width: 100%;
  max-width: var(--content-shell-max);
  margin-inline: auto;
  padding-inline: var(--space-page-x);
  box-sizing: border-box;
}

/* ==========================================================================
   Header chrome (Figma 12:472)
   ========================================================================== */

#header {
  --_color-header-text: var(--feline-neutral-black);
  --color-header-background: var(--feline-neutral-white);
  display: flex;
  flex-direction: column;
  background-color: var(--feline-neutral-white);
  color: var(--color-text-strong);
  box-shadow: none;
}

/* Top promo bar (12:427) — Shoptet .site-msg.information (relocated into #header via slot JS) */
.feline-header-promo,
#header > .site-msg.information {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  background-color: var(--feline-primary-600);
  color: var(--feline-primary-200);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 600;
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-align: center;
  text-transform: uppercase;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.feline-header-promo {
  white-space: nowrap;
}

.feline-header-promo__dot {
  color: var(--feline-primary-400);
}

/* Undo Step toast (fixed bottom-left) + Shoptet main-3g.js inline bottom */
#header > .site-msg.information {
  position: static;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto;
  max-width: none;
  z-index: auto;
}

#header > .site-msg.information .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  padding: 0 28px 0 0;
  box-sizing: border-box;
}

/* Step #header .container clearfix — not for promo inner wrapper */
#header > .site-msg.information .container::before,
#header > .site-msg.information .container::after {
  display: none;
  content: none;
}

#header > .site-msg.information .text {
  flex: 1 1 auto;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* Shoptet .js-close-information-msg — keep dismiss cookie behavior */
#header > .site-msg.information .close {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.85;
}

#header > .site-msg.information .close::before {
  color: var(--feline-primary-200);
  font-size: 12px;
  line-height: 1;
}

#header > .site-msg.information .close:hover {
  opacity: 1;
}

#header > .site-msg.information .close:hover::before {
  color: var(--feline-neutral-white);
}

/* Hide duplicate toast until slot JS moves it into #header */
.overall-wrapper > .site-msg.information {
  visibility: hidden;
}

body.feline-promo-ready .overall-wrapper > .site-msg.information,
body.feline-promo-ready #header > .site-msg.information {
  visibility: visible;
}

body.feline-promo-ready .overall-wrapper > .site-msg.information {
  display: none;
}

/* Bender: static .feline-header-promo — hide relocated Shoptet toast (replaces old ::before guard) */
body:has(.feline-header-promo) #header > .site-msg.information {
  display: none;
}

/* White bar + shadow — full viewport; content rail stays on .navigation-wrapper */
#header .navigation-wrapper.container {
  position: relative;
  z-index: 0;
  background-color: transparent;
  box-shadow: none;
}

#header .navigation-wrapper.container::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--feline-neutral-white);
  box-shadow: var(--shadow-header);
  pointer-events: none;
}

#header .site-name {
  margin: 0;
  border: 0;
  font-weight: inherit;
}

#header .site-name img {
  display: block;
  width: 182px;
  height: 24px;
  max-width: 182px;
  max-height: 24px;
  object-fit: contain;
}

/* Feline utility icons (search, account, cart) — not hamburger; Step owns that glyph */
#header .navigation-buttons a[data-target='search']::before,
#header .top-nav-button-login::before,
#header .navigation-buttons a.cart-count::before {
  content: '';
  display: block;
  margin: 0;
  font-family: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#header .navigation-buttons a[data-target='search']::before {
  width: 18px;
  height: 18px;
  background-image: var(--feline-icon-search);
}

#header .top-nav-button-login::before {
  width: 16px;
  height: 16px;
  background-image: var(--feline-icon-user);
}

#header .navigation-buttons a.cart-count::before {
  width: 16px;
  height: 20px;
  background-image: var(--feline-icon-cart);
}

#header .navigation-buttons a[data-target='search'],
#header .top-nav-button-login,
#header .navigation-buttons a.cart-count {
  font-size: 0;
  color: var(--feline-primary-400);
  background: transparent;
}

#header .navigation-buttons a[data-target='cart'] i {
  background-color: var(--feline-neutral-black);
  color: var(--feline-neutral-white);
}

/* --------------------------------------------------------------------------
   Tablet — global token scale (inferred from docs/design/responsive.md)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  :root {
    /* Spacing */
    --space-page-x: 40px;
    --space-section-y: 80px;
    --space-section-y-md: 32px;
    --space-grid-gap-3: 24px;
    --space-grid-gap-3-tight: 20px;
    --space-grid-gap-4: 32px;
    --space-nav-gap: 16px;

    /* Typography */
    --text-display-size: 56px;
    --text-display-tracking: -0.04em;
    --text-h1-size: 36px;
    --text-h1-lh: 44px;
    --text-h2-size: 32px;
    --text-h2-lh: 40px;
    --text-h3-size: 22px;
    --text-h3-lh: 30px;
  }
}

/* --------------------------------------------------------------------------
   Mobile — global token scale + tap targets (inferred)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    /* Spacing — match #header .navigation-wrapper mobile gutter (16px) */
    --space-page-x: 16px;
    --space-section-y: 64px;
    --space-section-y-md: 24px;
    --space-grid-gap-3: 24px;
    --space-grid-gap-3-tight: 12px;
    --space-grid-gap-4: 24px;
    --space-card: 16px;
    --space-nav-gap: 16px;

    /* Typography */
    --text-display-size: 40px;
    --text-display-tracking: -0.05em;
    --text-h1-size: 32px;
    --text-h1-lh: 40px;
    --text-h2-size: 28px;
    --text-h2-lh: 36px;
    --text-h3-size: 20px;
    --text-h3-lh: 28px;
    --text-body-lg-size: 16px;
    --text-body-lg-lh: 24px;
  }

  .btn,
  .button,
  .add-to-cart-button,
  .btn-conversion,
  .btn-primary,
  .btn-secondary {
    padding: 14px 24px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Mobile — preserve Step mobile-header-v1 JS (slide nav, hamburger, menu-helper)
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /*
   * Promo (.site-msg.information) + white bar (navigation-wrapper).
   * Step positions .navigation-buttons top:0 against #header unless wrapper is relative.
   * Promo height must live on :root so .overall-wrapper (sibling of #header) reads the same value.
   */
  :root {
    --header-promo-height: 52px;
    --header-height: calc(var(--header-promo-height) + var(--header-mobile-bar-height));
  }

  body:not(:has(.site-msg.information)) {
    --header-promo-height: 0px;
  }

  .overall-wrapper {
    padding-top: var(--header-height) !important;
  }

  #header > .site-msg.information {
    flex-shrink: 0;
    min-height: var(--header-promo-height);
    box-sizing: border-box;
  }

  #header .navigation-wrapper.container {
    display: flex;
    align-items: center;
    flex: 0 0 var(--header-mobile-bar-height);
    width: 100%;
    max-width: none;
    min-height: var(--header-mobile-bar-height);
    height: var(--header-mobile-bar-height);
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
  }

  #header .site-name {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-basis: auto;
    flex-grow: 1;
    max-width: calc(100% - 12.5rem);
    padding: 0;
    margin: 0;
    text-align: left;
    justify-content: flex-start;
  }

  #header .site-name a,
  #header .site-name a span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
  }

  #header .site-name img {
    width: 140px;
    max-width: 100%;
    height: auto;
    max-height: 28px;
    margin: 0;
  }

  #header .navigation-buttons {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  #header .navigation-buttons a,
  #header .top-nav-button-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
  }

  /* Account lives in slide-out menu on mobile; keep bar to search + cart + menu */
  #header .top-nav-button-login {
    display: none;
  }

  /* Slide-out panel link typography only */
  #navigation .menu-level-1 > li > a,
  #navigation .menu-level-1 > li > a b {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--color-text-strong);
  }

  #header .navigation-buttons a[data-target='search']::before,
  #header .top-nav-button-login::before,
  #header .navigation-buttons a.cart-count::before {
    margin: 0;
  }
}

@media (max-width: 479px) {
  :root {
    --header-promo-height: 56px;
  }

  #header > .site-msg.information {
    font-size: 12px;
    line-height: 16px;
    padding: 8px 12px;
  }
}

/* --------------------------------------------------------------------------
   Desktop — Figma 12:430 horizontal nav
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  #header .navigation-wrapper.container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    min-height: var(--header-main-height);
  }

  #header .site-name {
    position: absolute;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    flex: none;
  }

  #header .site-name a,
  #header .site-name a span {
    display: flex;
    align-items: center;
  }

  #navigation {
    flex: 1 1 auto;
    overflow: visible;
  }

  #navigation .navigation-in {
    display: flex;
    align-items: center;
    width: 100%;
  }

  #navigation .menu-level-1 {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #navigation .menu-level-1 > li > a {
    display: flex;
    align-items: center;
    min-height: var(--header-main-height);
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    color: var(--color-text-strong);
    text-decoration: none;
    background: transparent;
  }

  #navigation .menu-level-1 > li > a b,
  #navigation .menu-level-1 > li > a span {
    font-weight: 600;
  }

  #navigation .menu-level-1 .submenu-arrow {
    display: none;
  }

  #navigation .navigationActions {
    display: none;
  }

  #header .menu-helper {
    display: none;
  }

  /* Step marks overflow items .splitted and hides them for menu-helper */
  #navigation .navigation-in ul li.splitted {
    visibility: visible;
  }

  /* Split nav: Ženy + Muži left, Věda + Magazín right */
  #navigation .menu-level-1 > li:nth-child(3) {
    margin-left: auto;
  }

  #navigation .menu-level-1 > li {
    display: flex;
    align-items: center;
  }

  #header .navigation-buttons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-header-icon-gap);
    margin: 0;
    padding: 0 0 0 var(--space-header-nav-icons);
    position: relative;
    right: auto;
    top: auto;
  }

  #header .navigation-buttons a,
  #header .top-nav-button-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    line-height: 1;
    border: 0;
  }

  #header .navigation-buttons a[data-target='navigation'] {
    display: none;
  }

  #header .navigation-buttons a[data-target='cart'] i {
    top: -2px;
    right: -8px;
    left: auto;
  }
}

/* ==========================================================================
   Footer (Figma 12:632)
   ========================================================================== */

#footer {
  background-color: var(--feline-neutral-white);
  color: var(--color-text-strong);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-page-x) 0;
  box-sizing: border-box;
  position: relative;
  border-top: 0;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  border-top: var(--border-subtle);
  pointer-events: none;
}

#footer > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#footer .container {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

#footer .container.footer-bottom {
  padding-inline: 0;
}

#footer .footer-rows,
#footer .footer-links-icons {
  display: contents;
}

#footer .custom-footer.row {
  --bs-gutter-x: 0;
  margin: 0;
  display: contents;
}

#footer .custom-footer [class*='col-'] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  float: none;
}

#footer .custom-footer {
  padding-top: 0;
}

#footer .custom-footer > div {
  padding-bottom: 0;
}

/* Brand column (12:569) */
#footer .custom-footer__banner6621 .banner,
#footer .custom-footer__banner6621 .banner-wrapper,
#footer .custom-footer__banner6621 .banner-wrapper > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  margin: 0;
  padding: 0;
}

#footer .custom-footer__banner6621 .banner {
  overflow: visible;
  min-height: 0;
}

#footer .custom-footer__banner6621 .banner-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

#footer .custom-footer__banner6621 img {
  width: 182px;
  height: 24px;
}

#footer .custom-footer__banner6621 p {
  max-width: 380px;
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-strong);
}

/* Column headings (footer/heading) */
#footer .pageElement__heading,
#footer .footer-links::before,
#footer .footer-icons::before {
  display: block;
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: var(--color-text-strong);
}

#footer .pageElement__heading {
  margin-bottom: 0;
}

#footer h3.pageElement__heading,
#footer .pageElement__heading span {
  font-family: var(--font-family);
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: normal;
}

#footer .pageElement__heading span {
  display: block;
}

#footer .footer-links::before {
  content: 'Nákup';
}

#footer .footer-icons::before {
  content: 'Sociální sítě';
}

/* Link columns */
#footer .custom-footer__articles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#footer .custom-footer__articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  justify-content: flex-start;
}

#footer .footer-links::before {
  margin-bottom: 0;
}

#footer .footer-links-icons ul.footer-links li.footer-link {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-links-icons ul.footer-links > li.footer-link:last-child {
  margin-bottom: 0;
}

#footer .custom-footer__articles li::before {
  content: none;
  display: none;
}

#footer .custom-footer__articles li {
  position: static;
  padding: 0;
}

#footer .custom-footer__articles a,
#footer .footer-links a {
  display: inline-block;
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-strong);
  text-decoration: none;
}

#footer .custom-footer__articles a:hover,
#footer .footer-links a:hover,
#footer .footer-icons a:hover {
  color: var(--feline-primary-500);
  text-decoration: underline;
}

/* Social icons (12:589) */
#footer .footer-icons {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 16px;
  align-items: center;
}

#footer .footer-icons::before {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

#footer .footer-icon {
  margin: 0;
}

#footer .footer-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-strong);
}

#footer .footer-icons img {
  width: auto;
  height: 20px;
  max-width: 23px;
  object-fit: contain;
}

/* Legal row (12:625) */
#footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: var(--space-section-y);
  padding-block: 0;
  border-top: var(--border-subtle);
  opacity: 0.7;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-strong);
}

#footer .footer-bottom span {
  margin: 0;
  width: auto;
  text-align: inherit;
}

#footer .copyright {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  opacity: 1;
  color: inherit;
  text-align: left;
}

#footer .copyright strong {
  font-weight: 400;
  color: inherit;
}

#footer .copyright .cookies-settings {
  margin-left: 0.35em;
  color: inherit;
}

#footer #signature {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  float: none;
  margin: 0;
  min-height: 0;
}

#footer a {
  min-height: 0;
}

#footer .feline-gc-signature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

#footer .feline-gc-signature:hover {
  text-decoration: none;
  opacity: 0.85;
}

#footer .feline-gc-signature img,
#footer .feline-gc-signature svg {
  display: block;
  width: auto;
  height: 18px;
}

/* Desktop — 5-col grid: brand span 2 | Nákup | O nás | Sociální sítě */
@media (min-width: 1024px) {
  #footer {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3);
    row-gap: 0;
  }

  #footer .custom-footer__banner6621 {
    grid-column: 1 / span 2;
    order: 1;
  }

  #footer .footer-links {
    grid-column: 3;
    order: 2;
    align-self: start;
  }

  #footer .custom-footer__articles {
    grid-column: 4;
    order: 3;
    align-self: start;
  }

  #footer .footer-icons {
    grid-column: 5;
    order: 4;
    align-self: start;
  }

  #footer .footer-bottom {
    grid-column: 1 / -1;
    order: 5;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3);
    align-items: center;
  }

  #footer .copyright {
    grid-column: 1 / span 4;
    flex: none;
  }

  #footer #signature {
    grid-column: 5;
    justify-self: end;
  }
}

/* Tablet — 2-col grid */
@media (min-width: 768px) and (max-width: 1023px) {
  #footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3);
    row-gap: var(--space-grid-gap-3);
  }

  #footer .custom-footer__banner6621 {
    grid-column: 1 / -1;
    order: 1;
  }

  #footer .footer-links {
    order: 2;
  }

  #footer .custom-footer__articles {
    order: 3;
  }

  #footer .footer-icons {
    order: 4;
  }

  #footer .footer-bottom {
    grid-column: 1 / -1;
    order: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3);
    align-items: center;
  }

  #footer .copyright {
    grid-column: 1;
    flex: none;
  }

  #footer #signature {
    grid-column: 2;
    justify-self: end;
  }
}

/* Mobile — 2-col grid: brand full width | Nákup + O nás | Sociální sítě span 2 */
@media (max-width: 767px) {
  #footer {
    --feline-footer-mobile-pt: 32px;
    --feline-footer-mobile-gap: 16px;
    --feline-footer-mobile-brand-links-gap: 8px;
    --feline-footer-mobile-link-gap: 4px;
    --feline-footer-mobile-col-gap: 20px;
    --feline-footer-mobile-social-heading-gap: 8px;
    --feline-footer-mobile-legal-py: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--feline-footer-mobile-col-gap);
    row-gap: var(--feline-footer-mobile-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: var(--feline-footer-mobile-pt);
    text-align: left;
    overflow-x: clip;
  }

  #footer .custom-footer__banner6621 {
    grid-column: 1 / -1;
    order: 1;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 32px;
    text-align: center;
  }

  #footer .custom-footer__banner6621 .banner {
    min-height: 0;
  }

  #footer .custom-footer__banner6621 .banner,
  #footer .custom-footer__banner6621 .banner-wrapper,
  #footer .custom-footer__banner6621 .banner-wrapper > span {
    align-items: center;
    gap: 16px;
    max-width: 100%;
  }

  #footer .custom-footer__banner6621 img {
    width: 136px;
    height: 18px;
  }

  #footer .custom-footer__banner6621 p {
    max-width: 100%;
    text-align: center;
  }

  #footer .footer-links {
    grid-column: 1;
    order: 2;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    justify-self: start;
  }

  #footer .custom-footer__articles {
    grid-column: 2;
    order: 3;
    min-width: 0;
    max-width: 100%;
    gap: var(--feline-footer-mobile-link-gap);
    text-align: left;
    justify-self: start;
  }

  #footer .custom-footer__articles ul,
  #footer .footer-links {
    align-items: flex-start;
    gap: var(--feline-footer-mobile-link-gap);
    min-width: 0;
    max-width: 100%;
  }

  #footer .custom-footer__articles a,
  #footer .footer-links a {
    overflow-wrap: anywhere;
  }

  #footer h3.pageElement__heading,
  #footer .pageElement__heading span {
    font-size: 20px;
    line-height: 32px;
  }

  #footer .pageElement__heading {
    margin-bottom: 0;
    text-align: left;
  }

  #footer .footer-links::before {
    text-align: left;
  }

  #footer .footer-icons {
    grid-column: 1 / -1;
    order: 4;
    min-width: 0;
    max-width: 100%;
    justify-content: start;
    justify-items: start;
    row-gap: var(--feline-footer-mobile-social-heading-gap);
  }

  #footer .footer-icons::before {
    text-align: left;
    margin-bottom: 0;
  }

  #footer .footer-bottom {
    grid-column: 1 / -1;
    order: 5;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: var(--feline-footer-mobile-gap);
    padding-block: var(--feline-footer-mobile-legal-py);
    text-align: center;
    line-height: normal;
  }

  #footer .copyright {
    flex: none;
    max-width: 100%;
    text-align: center;
    line-height: normal;
  }

  #footer #signature {
    justify-self: center;
    max-width: 100%;
  }
}

/* ==========================================================================
   Product card shell (Figma 2:356) — resets Step .products-block defaults
   ========================================================================== */

.products-block {
  margin-left: 0;
  margin-right: 0;
}

.columns-mobile-2 .products-block > div:nth-child(2n),
.columns-mobile-2 .products-block > div:nth-child(odd) {
  padding: 0;
}

.products .product {
  border: var(--border-brand);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--feline-neutral-white);
}

.products-block .product .p {
  border: 0;
  margin-bottom: 0;
}

/* Step aspect-ratio :before / hover :after on image link */
.products-block .product .p > a.image::before,
.products-block .product .p > a.image::after,
.products .product .image::before,
.products .product .image::after {
  content: none;
  display: none;
  float: none;
}

.products-block .product .p > a.image:hover img,
.products .product .image:hover img {
  opacity: 1;
}

.products .product .image {
  background-color: var(--feline-primary-100);
  padding: var(--space-card);
  text-align: left;
}

.products .product .image img {
  mix-blend-mode: normal;
}

/* Flags — pill badge; strip Step float / tail shapes */
.products .product .flags {
  float: none;
}

.products .product .flag {
  float: none;
  clear: none;
  max-width: none;
  margin: 0;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill-full);
  background-color: var(--feline-primary-400);
  color: var(--feline-neutral-white);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 700;
  line-height: var(--text-sm-lh);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  hyphens: none;
  opacity: 1;
  filter: none;
}

.products .product .flag::before,
.products .product .flag::after,
.products .product .flags::before,
.products .product .flags::after {
  content: none;
  display: none;
}

.products .product .p-in {
  text-align: left;
}

.products .product .p-in-in {
  text-align: left;
}

.products .product .name,
.products .product .productname,
.products .product h2,
.products-block > div .p .name,
.columns-mobile-2 .products-block > div .p .name {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: 600;
  color: var(--color-text-strong);
  text-align: left;
  text-transform: none;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  display: block;
}

.products .product .p-desc,
.products-block > div .p .p-bottom .p-desc {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-body);
  text-align: left;
}

.products-block .product .p-bottom,
.products-block > div .p .p-bottom,
.products-block > div .p .p-bottom.single-button {
  position: static;
  margin: 0;
  padding: 0;
}

.products-block .product .p-bottom > div {
  position: static;
}

.products-block .product .p-bottom > div::before,
.products-block .product .p-bottom > div::after {
  content: none;
  display: none;
}

.products-block .product .p-bottom .prices {
  position: static;
  bottom: auto;
  left: auto;
  text-align: left;
}

.products-block .product .p-bottom .p-tools,
.products-block > div .p .p-bottom > div .p-tools {
  position: static;
  bottom: auto;
  right: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

.products .product .price,
.products .product [data-micro='price'] {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text-strong);
  text-align: left;
}

.products .product .pr-list-unit {
  display: none;
}

/* ==========================================================================
   Inferred interactive states
   ========================================================================== */

a:hover {
  color: var(--feline-primary-500);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--feline-primary-400);
  outline-offset: 2px;
}

/* inferred */
.btn-conversion:hover,
.add-to-cart-button:hover,
.btn-primary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--feline-neutral-white);
}

/* inferred */
.btn-secondary:hover,
.products .product .btn:hover,
.products .product .add-to-cart-button:hover,
.products .product .btn-cart:hover,
.products-block > div .p .p-bottom > div .p-tools .btn:hover,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart:hover {
  background-color: var(--feline-primary-100);
  border-color: var(--feline-primary-600);
  color: var(--feline-primary-600);
}

/* inferred */
#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a:hover b {
  color: var(--feline-primary-600);
  text-decoration: none;
}

/* inferred */
#header .navigation-buttons a:hover,
#header .top-nav-button-login:hover {
  color: var(--feline-primary-400);
  background: transparent;
  opacity: 0.85;
}

/* inferred */
#footer a:hover {
  color: var(--feline-primary-500);
  text-decoration: underline;
}

/* inferred */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
  border-color: var(--feline-primary-600);
  outline: 2px solid var(--feline-primary-400);
  outline-offset: 2px;
}

/* inferred */
.btn:disabled,
.button:disabled,
.add-to-cart-button:disabled,
.btn-conversion:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Homepage column alignment (Step main-12.less — .index-content-wrapper)
   ========================================================================== */

/* Breakpoints must match Shoptet Step: 768 → 747px, 992 → 972px, 1200 → 1418px */
@media (min-width: 768px) {
  :root {
    --feline-homepage-column-max: 747px;
  }
}

@media (min-width: 992px) {
  :root {
    --feline-homepage-column-max: 972px;
  }
}

@media (min-width: 1200px) {
  :root {
    --feline-homepage-column-max: 1418px;
  }
}

/*
 * Same effective rail as .index-content-wrapper children (breakout + page padding).
 * Used on full-bleed bands (hero, benefits, header) so copy aligns with modules below.
 */
@media (min-width: 768px) {
  .type-index .feline-hero__inner,
  .type-index .benefitBanner.position--benefitHomepage,
  #header .navigation-wrapper.container {
    --feline-step-content-gutter: 20px;
    box-sizing: border-box;
    width: min(
      calc(100% + 2 * var(--feline-step-content-gutter)),
      calc(var(--feline-homepage-column-max) + 2 * var(--feline-step-content-gutter))
    );
    max-width: calc(var(--feline-homepage-column-max) + 2 * var(--feline-step-content-gutter));
    margin-inline: auto;
    padding-inline: var(--space-page-x);
  }
}

/* ==========================================================================
   Homepage hero carousel (Figma 1:1291) — text banner in Template Designer
   Markup: theme/banners/homepage/carousel-hlavni.html
   ========================================================================== */

/* Match .container--bannersBenefit / .index-content-wrapper — break out of Step `.content` gutter */
.type-index .content.wide > .banners-row {
  --feline-step-content-gutter: 20px;
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding: 0;
  box-sizing: border-box;
}

.type-index .wide-carousel {
  --feline-hero-image: url('/user/documents/hero-carousel-product.png');
  width: 100%;
  max-width: none;
}

.type-index .wide-carousel .carousel,
.type-index .wide-carousel .carousel-inner,
.type-index .wide-carousel .extended-banner-texts {
  width: 100%;
  max-width: none;
}

.type-index .wide-carousel .carousel-inner,
.type-index .wide-carousel .carousel-inner .item,
.type-index .wide-carousel .carousel-inner .item > a {
  min-height: 650px;
}

.type-index .wide-carousel .carousel-inner .item > a {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-raised);
  text-decoration: none;
  color: inherit;
}

.type-index .wide-carousel .carousel-inner .item > a > img {
  display: none;
}

.type-index .wide-carousel .extended-banner-texts {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 650px;
  box-sizing: border-box;
}

.type-index .feline-hero {
  --feline-hero-fade: var(--feline-primary-100);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 650px;
  width: 100%;
  padding-block: var(--space-section-y);
  padding-inline: 0;
  box-sizing: border-box;
  background-color: var(--color-surface-raised);
  overflow: hidden;
}

/* Product photo — multiply into peach bg, feathered left edge */
.type-index .feline-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 720px);
  z-index: 0;
  background-image: var(--feline-hero-image);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  pointer-events: none;
}

/* Seam fade — Figma 2:729 (496px fade at image boundary) */
.type-index .feline-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--feline-hero-fade) 0%,
    var(--feline-hero-fade) 34%,
    rgba(253, 233, 231, 0.98) 42%,
    rgba(253, 233, 231, 0.82) 48%,
    rgba(253, 233, 231, 0.5) 54%,
    rgba(253, 233, 231, 0.15) 62%,
    transparent 72%
  );
}

.type-index .feline-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--space-page-x);
}

.type-index .feline-hero__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 558px;
}

.type-index .feline-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.type-index .feline-hero__eyebrow {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: 700;
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.type-index .feline-hero__title {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-tracking);
  font-weight: 500;
  color: var(--color-text-strong);
}

.type-index .feline-hero__accent {
  color: var(--color-text-muted);
}

.type-index .feline-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-text-body);
}

.type-index .feline-hero__actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 16px;
}

.type-index .wide-carousel .extended-banner-texts .feline-hero__actions a.feline-btn {
  display: inline-flex;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/* Hero CTAs — Figma 12:131 Primary + 12:134 Outline (not generic .btn) */
.type-index .feline-hero__actions .feline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 16.5px 32px 17.5px;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.type-index .feline-hero__actions .feline-btn--primary {
  background-color: var(--feline-neutral-black);
  border-color: var(--feline-neutral-black);
  color: var(--feline-neutral-white);
}

.type-index .feline-hero__actions .feline-btn--outline {
  background-color: transparent;
  border-color: var(--feline-primary-600);
  color: var(--feline-primary-600);
}

.type-index .feline-hero__actions .feline-btn--primary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--feline-neutral-white);
  text-decoration: none;
}

.type-index .feline-hero__actions .feline-btn--outline:hover {
  background-color: var(--feline-primary-100);
  border-color: var(--feline-primary-600);
  color: var(--feline-primary-600);
  text-decoration: none;
}

.type-index .feline-hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 600;
  color: var(--color-text-body);
}

.type-index .feline-hero__stars {
  flex-shrink: 0;
  color: var(--color-text-accent);
}

@media (max-width: 1023px) {
  .type-index .wide-carousel .carousel-inner,
  .type-index .wide-carousel .carousel-inner .item,
  .type-index .wide-carousel .carousel-inner .item > a,
  .type-index .wide-carousel .extended-banner-texts,
  .type-index .feline-hero {
    min-height: 560px;
  }

  .type-index .feline-hero::before {
    width: 70%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
  }

  .type-index .feline-hero::after {
    background: linear-gradient(
      90deg,
      var(--feline-hero-fade) 0%,
      var(--feline-hero-fade) 28%,
      rgba(253, 233, 231, 0.95) 38%,
      rgba(253, 233, 231, 0.55) 50%,
      transparent 68%
    );
  }
}

@media (max-width: 767px) {
  .type-index .wide-carousel .carousel-inner,
  .type-index .wide-carousel .carousel-inner .item,
  .type-index .wide-carousel .carousel-inner .item > a,
  .type-index .wide-carousel .extended-banner-texts,
  .type-index .feline-hero {
    min-height: auto;
  }

  .type-index .banners-row,
  .type-index .wide-carousel,
  .type-index .wide-carousel .carousel {
    margin-top: 0;
  }

  .type-index .feline-hero {
    padding-block: 24px var(--space-section-y);
  }

  .type-index .feline-hero__inner {
    gap: 32px;
  }

  .type-index .feline-hero__main {
    max-width: none;
  }

  .type-index .feline-hero__main {
    gap: 24px;
  }

  .type-index .feline-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    height: 52%;
    background-position: center top;
    background-size: cover;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }

  .type-index .feline-hero::after {
    background: linear-gradient(
      180deg,
      var(--feline-hero-fade) 0%,
      var(--feline-hero-fade) 38%,
      rgba(253, 233, 231, 0.9) 48%,
      rgba(253, 233, 231, 0.35) 58%,
      transparent 68%
    );
  }

  .type-index .feline-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .type-index .feline-hero__actions .feline-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Homepage editorial card (Figma 2:706) — body text banner
   Markup: theme/banners/homepage/editorial-nevite.html
   Image: theme/assets/homepage-editorial-start.png → /user/documents/
   ========================================================================== */

.type-index .index-content-wrapper .banners-content.body-banners {
  --feline-step-content-gutter: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-section-y);
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding-inline: var(--space-page-x);
  padding-block: var(--space-section-y-md);
  box-sizing: border-box;
}

.type-index .banners-content.body-banners .banner-wrapper {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.type-index .banners-content.body-banners .banner-wrapper > a,
.type-index .banners-content.body-banners .banner-wrapper > span {
  display: block;
}

.type-index .feline-editorial {
  width: 100%;
}

.type-index .feline-editorial__card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 400px;
  background-color: var(--color-surface-raised);
  overflow: hidden;
}

.type-index .feline-editorial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  flex: 0 0 auto;
  width: auto;
  max-width: 576px;
  padding: 108px 64px;
  box-sizing: border-box;
  z-index: 1;
}

.type-index .feline-editorial__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.type-index .feline-editorial__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  font-weight: 600;
  color: var(--color-text-strong);
}

.type-index .feline-editorial__lead {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-body);
}

.type-index .feline-editorial__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.type-index .feline-editorial__media {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 400px;
}

.type-index .feline-editorial__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.type-index .feline-editorial .feline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 16.5px 32px 17.5px;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.type-index .feline-editorial .feline-btn--secondary {
  background-color: var(--feline-primary-400);
  border-color: var(--feline-primary-400);
  color: var(--feline-neutral-white);
}

.type-index .feline-editorial .feline-btn--secondary:hover {
  background-color: var(--feline-primary-600);
  border-color: var(--feline-primary-600);
  color: var(--feline-neutral-white);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .type-index .feline-editorial__content {
    padding: 64px 40px;
  }

  .type-index .index-content-wrapper .banners-content.body-banners {
    padding-inline: 40px;
  }
}

@media (max-width: 767px) {
  .type-index .index-content-wrapper .banners-content.body-banners {
    gap: var(--space-section-y);
    padding-inline: var(--space-page-x);
    padding-block: var(--space-page-x);
  }

  .type-index .feline-editorial__card {
    flex-direction: column;
    min-height: auto;
  }

  .type-index .feline-editorial__content {
    order: 1;
    flex: none;
    width: 100%;
    max-width: none;
    padding-block: 40px;
    padding-inline: var(--space-page-x);
    gap: 24px;
  }

  .type-index .feline-editorial__copy {
    gap: 16px;
  }

  .type-index .feline-editorial__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.05em;
  }

  .type-index .feline-editorial__media {
    order: 2;
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .type-index .feline-editorial__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .type-index .feline-editorial .feline-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Homepage goals bento (Figma 2:123) — body text banner
   Markup: theme/banners/homepage/goals-bento.html
   Icons: theme/assets/goal-icon-*.svg → /user/documents/ (Figma 2:748–2:775)
   ========================================================================== */

.type-index .feline-goals {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Figma 2:123 — section header → bento grid (64px desktop) */
  gap: var(--space-section-y-md);
  width: 100%;
}

.type-index .feline-goals__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
}

.type-index .feline-goals__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  font-weight: 600;
  color: var(--color-text-strong);
}

.type-index .feline-goals__lead {
  margin: 0;
  max-width: 672px;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-text-body);
}

.type-index .feline-goals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid-gap-3-tight);
  width: 100%;
}

.type-index .feline-goals__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 256px;
  background-color: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.type-index .feline-goals__card:hover,
.type-index .feline-goals__card:focus-visible {
  background-color: var(--feline-primary-500);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.type-index .feline-goals__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 40px 40px 0;
  box-sizing: border-box;
}

.type-index .feline-goals__icon-image {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.type-index .feline-goals__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 16px 40px 40px;
  box-sizing: border-box;
}

.type-index .feline-goals__card-title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: 600;
  color: var(--color-text-on-dark);
}

.type-index .feline-goals__card-lead {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-on-dark-soft);
}

@media (max-width: 1023px) {
  .type-index .feline-goals__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-index .feline-goals__card:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .type-index .feline-goals {
    gap: 32px;
  }

  .type-index .feline-goals__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.05em;
  }

  .type-index .feline-goals__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-grid-gap-3-tight);
  }

  .type-index .feline-goals__card:last-child:nth-child(3) {
    grid-column: auto;
  }

  .type-index .feline-goals__card {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    min-height: 0;
    padding: 24px;
    box-sizing: border-box;
  }

  .type-index .feline-goals__icon {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
  }

  .type-index .feline-goals__icon-image {
    width: 72px;
    height: 72px;
  }

  .type-index .feline-goals__body {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    gap: 4px;
  }
}

/* ==========================================================================
   Homepage product trio (Figma 2:210) — Shoptet homepage product group
   Module: homepage tab “Objevte sílu buněčné výživy” → #products-3
   ========================================================================== */

/* Match .banners-content.body-banners / .feline-goals content width */
.type-index .index-content-wrapper > .shp-tabs-wrapper.homepage-tabs-wrapper {
  --feline-step-content-gutter: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-section-y-md);
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding: var(--space-section-y-md) var(--space-page-x) var(--space-section-y);
  box-sizing: border-box;
}

.type-index .homepage-tabs-wrapper .shp-tabs-row {
  display: none;
}

/* Step .tab-content { padding-inline: 20px } — section gutter is on .homepage-tabs-wrapper */
.type-index .homepage-tabs-wrapper .tab-content,
.type-index .homepage-tabs-wrapper .tab-pane {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.type-index .homepage-tabs-wrapper .tab-pane .homepage-products-3,
.type-index .homepage-tabs-wrapper .tab-pane .products-block {
  margin: 0;
}

.type-index .homepage-tabs-wrapper .tab-pane {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-section-y-md);
}

/* Step .homepage-group-title { display: none } — show tab label as section H2 (Figma 2:213) */
.type-index .homepage-tabs-wrapper .homepage-group-title,
.type-index .homepage-tabs-wrapper .tab-pane > .homepage-group-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-family);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  font-weight: 600;
  text-align: center;
  text-transform: none;
  color: var(--color-text-strong);
}

.type-index .homepage-products-3.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid-gap-3);
  width: 100%;
  margin: 0;
  padding: 0;
}

.type-index .homepage-products-3 > .product {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.type-index .homepage-products-3 .product .p {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.type-index .homepage-products-3 .product .image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  height: 256px;
  min-height: 256px;
  margin: 0;
  padding: var(--space-card);
  box-sizing: border-box;
  overflow: hidden;
}

.type-index .homepage-products-3 .product .image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.type-index .homepage-products-3 .product .flags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}

.type-index .homepage-products-3 .product .p-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: var(--space-card);
  box-sizing: border-box;
}

.type-index .homepage-products-3 .product .name:hover {
  color: var(--feline-primary-600);
  text-decoration: none;
}

.type-index .homepage-products-3 .product .p-in-in .category,
.type-index .homepage-products-3 .product .p-in-in .categories,
.type-index .homepage-products-3 .product .manufacturer,
.type-index .homepage-products-3 .product .stars-wrapper,
.type-index .homepage-products-3 .product .stars,
.type-index .homepage-products-3 .product .rate-average,
.type-index .homepage-products-3 .product .rating {
  display: none;
}

.type-index .homepage-products-3 .product [data-micro='offer'] {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'desc desc'
    'price tools';
  column-gap: 8px;
  row-gap: 24px;
  align-items: center;
  width: 100%;
}

.type-index .homepage-products-3 .product .p-desc {
  grid-area: desc;
}

.type-index .homepage-products-3 .product .prices {
  grid-area: price;
  justify-self: start;
}

.type-index .homepage-products-3 .product .p-tools {
  grid-area: tools;
  justify-self: end;
}

.type-index .homepage-products-3 .product .price strong {
  font-weight: inherit;
}

.type-index .homepage-tabs-wrapper .homepage-group-footer,
.type-index .homepage-tabs-wrapper .products-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.type-index .homepage-tabs-wrapper .homepage-group-footer a,
.type-index .homepage-tabs-wrapper .products-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 16px 32px;
  border: 1px solid var(--feline-primary-600);
  border-radius: var(--radius-pill);
  background-color: var(--color-cta-ghost);
  color: var(--feline-primary-600);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 600;
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
}

.type-index .homepage-tabs-wrapper .homepage-group-footer a:hover,
.type-index .homepage-tabs-wrapper .products-footer a:hover {
  background-color: var(--feline-primary-100);
  color: var(--feline-primary-600);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .type-index .homepage-products-3.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .type-index .index-content-wrapper > .shp-tabs-wrapper.homepage-tabs-wrapper {
    gap: var(--space-grid-gap-3);
    padding-block: var(--space-section-y-md);
  }

  .type-index .homepage-tabs-wrapper .tab-pane {
    gap: var(--space-grid-gap-3);
  }

  .type-index .homepage-products-3.products {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-grid-gap-3);
  }

  .type-index .homepage-products-3.products > .product {
    width: auto;
    max-width: none;
  }

  .type-index .homepage-products-3 .product .image {
    height: 220px;
    min-height: 220px;
  }

  .type-index .homepage-products-3 .product [data-micro='offer'] {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'desc desc'
      'price tools';
    row-gap: 16px;
  }

  .type-index .homepage-products-3 .product .p-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ==========================================================================
   Homepage section order — About band before magazine (Figma 2:149 → 2:462)
   DOM: products → articles → footer banner; visual: products → about → articles
   ========================================================================== */

.type-index .index-content-wrapper {
  display: flex;
  flex-direction: column;
}

.type-index .index-content-wrapper > .banners-content.body-banners {
  order: 10;
}

.type-index .index-content-wrapper > .shp-tabs-wrapper.homepage-tabs-wrapper {
  order: 20;
}

.type-index .index-content-wrapper > .footer-banners {
  order: 30;
}

.type-index .index-content-wrapper > .homepage-blog-wrapper {
  order: 40;
}

.type-index .index-content-wrapper > .homepage-texts-wrapper {
  order: 50;
}

/* ==========================================================================
   Homepage magazine / articles (Figma 2:462)
   DOM: .homepage-blog-wrapper.blog-wrapper → .homepage-group-title + .news-item
   ========================================================================== */

.type-index .homepage-blog-wrapper.blog-wrapper {
  --feline-step-content-gutter: 20px;
  --feline-magazine-link-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M6%2012L10%208L6%204%22%20stroke%3D%22%235d4742%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-grid-gap-3);
  float: none;
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding: var(--space-section-y) var(--space-page-x);
  box-sizing: border-box;
}

.type-index .homepage-blog-wrapper.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.type-index .feline-magazine__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-grid-gap-3);
  width: 100%;
  margin: 0 0 16px;
}

.type-index .homepage-blog-wrapper > .homepage-group-title,
.type-index .feline-magazine__header > .homepage-group-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-family);
  font-size: 0;
  line-height: 0;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  color: transparent;
}

/* Admin module title is not editable — Figma 2:466 copy via CSS */
.type-index .homepage-blog-wrapper > .homepage-group-title::before,
.type-index .feline-magazine__header > .homepage-group-title::before {
  content: 'Z našeho magazínu o zdraví';
  display: block;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-text-strong);
}

.type-index .feline-magazine__all-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: 600;
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--feline-primary-600);
  white-space: nowrap;
}

.type-index .feline-magazine__all-link::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--feline-magazine-link-arrow) center / contain no-repeat;
}

.type-index .feline-magazine__all-link:hover,
.type-index .feline-magazine__all-link:focus-visible {
  color: var(--feline-primary-500);
  text-decoration: none;
}

.type-index .homepage-blog-wrapper .news-item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.type-index .homepage-blog-wrapper .news-item > a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-card);
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.type-index .homepage-blog-wrapper .news-item .image {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-align: initial;
  background-color: var(--feline-primary-100);
}

.type-index .homepage-blog-wrapper .news-item .image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

.type-index .homepage-blog-wrapper .news-item .text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  flex-grow: 0;
  min-width: 0;
}

.type-index .homepage-blog-wrapper .news-item .text .title {
  display: block;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-strong);
}

.type-index .homepage-blog-wrapper .news-item .text .title:hover,
.type-index .homepage-blog-wrapper .news-item > a:hover .text .title,
.type-index .homepage-blog-wrapper .news-item > a:focus-visible .text .title {
  color: var(--feline-primary-600);
  text-decoration: none;
}

.type-index .homepage-blog-wrapper .news-item .description,
.type-index .homepage-blog-wrapper .news-item .read-article,
.type-index .homepage-blog-wrapper .news-item time {
  display: none;
}

@media (min-width: 1024px) {
  .type-index .homepage-blog-wrapper.blog-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3);
    row-gap: var(--space-grid-gap-3);
  }

  .type-index .feline-magazine__header,
  .type-index .homepage-blog-wrapper > .homepage-group-title {
    grid-column: 1 / -1;
  }

  .type-index .feline-magazine__header,
  .type-index .homepage-blog-wrapper > .homepage-group-title {
    margin-bottom: 16px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .type-index .homepage-blog-wrapper.blog-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-grid-gap-3-tight);
    row-gap: var(--space-grid-gap-3-tight);
  }

  .type-index .feline-magazine__header,
  .type-index .homepage-blog-wrapper > .homepage-group-title {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .type-index .homepage-blog-wrapper.blog-wrapper {
    padding-block: var(--space-section-y-md);
    gap: var(--space-grid-gap-3);
  }

  .type-index .feline-magazine__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
  }

  .type-index .homepage-blog-wrapper > .homepage-group-title {
    margin-bottom: 16px;
  }

  .type-index .homepage-blog-wrapper > .homepage-group-title::before,
  .type-index .feline-magazine__header > .homepage-group-title::before {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.05em;
  }

  .type-index .homepage-blog-wrapper .news-item .text .title {
    font-size: 20px;
    line-height: 28px;
  }
}

/* ==========================================================================
   Blog / article listing (type-posts-listing)
   DOM: #newsWrapper.news-wrapper → .news-item
   ========================================================================== */

@media (max-width: 767px) {
  .type-posts-listing .news-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .type-posts-listing .news-wrapper .news-item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .type-posts-listing .news-wrapper .news-item .image {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   Homepage about / Edestin band (Figma 2:149) — footer text banner
   Markup: theme/banners/homepage/about-edestin.html
   Image: theme/assets/homepage-about-irena.png → /user/documents/
   ========================================================================== */

/* Brown band: full-viewport paint only. Content rail matches .homepage-tabs-wrapper. */
.type-index .index-content-wrapper > .footer-banners {
  --feline-step-content-gutter: 20px;
  position: relative;
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding: 0;
  box-sizing: border-box;
}

.type-index .index-content-wrapper > .footer-banners.row {
  --bs-gutter-x: 0;
  float: none;
  max-width: none;
  padding: 0;
}

.type-index .footer-banners .footer-banner {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.type-index .footer-banners .footer-banner > span {
  display: block;
}

.type-index .feline-about {
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.type-index .feline-about::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  min-width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-surface-inverted);
}

/* Same content rail as .homepage-tabs-wrapper: full breakout width + page padding */
.type-index .feline-about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 0;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--space-page-x);
  padding-block: var(--space-section-y);
}

.type-index .feline-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

.type-index .feline-about__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.type-index .feline-about__eyebrow {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: 600;
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-promo);
}

.type-index .feline-about__title {
  margin: 0;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-tracking);
  font-weight: 600;
  color: var(--color-text-on-dark);
}

.type-index .feline-about__lead {
  margin: 0;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-text-on-dark);
}

.type-index .feline-about__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.type-index .feline-about__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-on-dark);
}

.type-index .feline-about__check {
  flex-shrink: 0;
  color: var(--color-text-on-dark);
}

.type-index .feline-about .feline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 16.5px 32px 17.5px;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.type-index .feline-about .feline-btn--outline-on-dark {
  background-color: transparent;
  border-color: var(--color-text-on-dark-soft);
  color: var(--color-text-on-dark-soft);
}

.type-index .feline-about .feline-btn--outline-on-dark:hover {
  background-color: rgba(253, 233, 231, 0.12);
  border-color: var(--color-text-on-dark-soft);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

/* Figma 2:160 — photo card padding 40px; quote/attribution in flex flow below portrait */
.type-index .feline-about__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
  min-width: 0;
  min-height: 547px;
  padding: 40px;
  background-color: var(--color-surface-raised);
  overflow: hidden;
  box-sizing: border-box;
}

.type-index .feline-about__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 500px;
  pointer-events: none;
}

.type-index .feline-about__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Figma 2:198 — portrait fade into quote panel */
.type-index .feline-about__panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(253, 233, 231, 0) 0%,
    var(--feline-primary-100) 63.942%
  );
}

.type-index .feline-about__quote,
.type-index .feline-about__attribution {
  position: relative;
  z-index: 2;
}

.type-index .feline-about__quote {
  margin: 0;
  padding: 8px 0 8px 26px;
  border-left: 2px solid var(--feline-primary-400);
  box-sizing: border-box;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: 500;
  font-style: normal;
  color: var(--feline-primary-600);
}

.type-index .feline-about__attribution {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.type-index .feline-about__name {
  margin: 0;
  font-size: var(--text-body-lg-size);
  line-height: 25.6px;
  font-weight: 700;
  color: var(--feline-primary-600);
}

.type-index .feline-about__role {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: 21px;
  color: var(--feline-primary-500);
}

@media (max-width: 1023px) {
  .type-index .feline-about__inner {
    gap: 40px;
    padding-block: var(--space-section-y-md);
  }

  .type-index .feline-about__panel {
    min-height: 480px;
  }

  .type-index .feline-about__media {
    height: 420px;
  }
}

@media (max-width: 767px) {
  /* Match .banners-content.body-banners + .feline-editorial__content spacing */
  .type-index .index-content-wrapper > .footer-banners.row {
    padding-block: var(--space-page-x);
    padding-inline: 0;
  }

  .type-index .feline-about__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: none;
    width: 100%;
    padding: 0;
  }

  .type-index .feline-about__content {
    gap: 24px;
    padding-block: 40px;
    padding-inline: var(--space-page-x);
  }

  .type-index .feline-about__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.05em;
  }

  .type-index .feline-about__panel {
    min-height: 420px;
    padding: 32px var(--space-page-x) 40px;
  }

  .type-index .feline-about__media {
    height: 360px;
  }

  .type-index .feline-about__actions .feline-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Homepage trust / benefits strip (Figma 2:29) — Shoptet benefitBanner module
   Icons: theme/assets/benefit-icon-*.svg → SFTP /user/documents/ (Figma 2:34, 2:40, 2:46, 2:701)
   ========================================================================== */

/* Break out of Step `.content { padding-inline: 20px }` — full-bleed band; grid in content rail */
.type-index .container--bannersBenefit {
  --feline-step-content-gutter: 20px;
  width: calc(100% + 2 * var(--feline-step-content-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--feline-step-content-gutter));
  padding: 0;
  border-bottom: var(--border-subtle);
  background-color: var(--color-surface-page);
  box-sizing: border-box;
}

.type-index .benefitBanner.position--benefitHomepage {
  padding-inline: var(--space-page-x);
  padding-block: 40px 41px;

  --feline-benefit-icon-lab: url('/user/documents/benefit-icon-lab.svg');
  --feline-benefit-icon-leaf: url('/user/documents/benefit-icon-leaf.svg');
  --feline-benefit-icon-drop: url('/user/documents/benefit-icon-drop.svg');
  --feline-benefit-icon-flag: url('/user/documents/benefit-icon-flag.svg');

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(100px, auto);
  gap: var(--space-grid-gap-4);
  width: 100%;
  border-bottom: 0;
  background-color: transparent;
  box-sizing: border-box;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  flex: unset;
  width: auto;
  max-width: none;
  overflow: visible;
  text-align: center;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__picture {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__img {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__picture::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(1) .benefitBanner__picture {
  width: 24px;
  height: 24px;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(1) .benefitBanner__picture::before {
  width: 24px;
  height: 24px;
  background-image: var(--feline-benefit-icon-lab);
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(2) .benefitBanner__picture {
  width: 23px;
  height: 23px;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(2) .benefitBanner__picture::before {
  width: 23px;
  height: 23px;
  background-image: var(--feline-benefit-icon-leaf);
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(3) .benefitBanner__picture {
  width: 21px;
  height: 27px;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(3) .benefitBanner__picture::before {
  width: 21px;
  height: 27px;
  background-image: var(--feline-benefit-icon-drop);
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(4) .benefitBanner__picture {
  width: 27px;
  height: 27px;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(4) .benefitBanner__picture::before {
  width: 27px;
  height: 27px;
  background-image: var(--feline-benefit-icon-flag);
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__content {
  display: contents;
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__title {
  display: block;
  width: auto;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: 700;
  color: var(--color-text-strong);
}

.type-index .benefitBanner.position--benefitHomepage .benefitBanner__data {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: 400;
  color: var(--color-text-body);
}

@media (max-width: 1023px) {
  .type-index .benefitBanner.position--benefitHomepage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 767px) {
  .type-index .benefitBanner.position--benefitHomepage {
    padding-block: 24px;
  }
}