/* =============================================
   TEMPRA THEME – main.css
   =============================================
   Table of Contents
   1.  Custom Properties (tokens)
   2.  Reset & Base
   3.  Typography
   4.  Utilities
   5.  Buttons
   6.  Layout / Container
   7.  Header – Primary Bar
   8.  Primary Navigation (desktop)
   9.  Secondary Navigation (pill buttons)
   10. Mobile Navigation (drawer)
   11. Hamburger Button
   12. Hero Section
   13. Intro Section
   14. Content Grid (4 cards)
   15. Recent Evidence Section
   16. Footer
   17. Generic Page / Single / Archive
   18. Accessibility
   19. Responsive Overrides
============================================= */

/* ─────────────────────────────────────────────
   1. Custom Properties
───────────────────────────────────────────── */
:root {
    /* Brand colours */
    --color-navy:        #1a2e7c;
    --color-navy-dark:   #122063;
    --color-navy-deeper: #0d1648;
    --color-orange:      #e8610a;
    --color-orange-dark: #c9520a;
    --color-red:         #cc2929;
    --color-red-dark:    #b52020;
    --color-yellow:      #f7c600;
    --color-white:       #ffffff;
    --color-off-white:   #f5f7fa;
    --color-text:        #1a1a2e;
    --color-text-light:  #555577;
    --color-border:      #dde3f0;

    /* Typography */
    --font-body:   'Montserrat', system-ui, -apple-system, sans-serif;
    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md:   1.125rem;  /* 18px */
    --font-size-lg:   1.375rem;  /* 22px */
    --font-size-xl:   1.75rem;   /* 28px */
    --font-size-2xl:  2.25rem;   /* 36px */
    --font-size-3xl:  3rem;      /* 48px */
    --line-height:    1.6;

    /* Spacing */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;

    /* Radius */
    --radius-sm:  0.375rem;
    --radius-md:  0.75rem;
    --radius-lg:  1.25rem;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.18);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Layout */
    --container-max:     1280px;
    --header-height:     80px;
    --secondary-height:  60px;
}

/* ─────────────────────────────────────────────
   2. Reset & Base
───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* ─────────────────────────────────────────────
   3. Typography
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: clamp(1.75rem, 4vw, var(--font-size-3xl)); }
h2 { font-size: clamp(1.375rem, 3vw, var(--font-size-2xl)); }
h3 { font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl)); }
h4 { font-size: var(--font-size-lg); }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

sup {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 1;
}

/* ─────────────────────────────────────────────
   4. Utilities
───────────────────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-reader-text:focus {
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    background: var(--color-navy);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    z-index: 9999;
    top: var(--space-sm);
    left: var(--space-sm);
    border-radius: var(--radius-sm);
}

.no-content {
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-2xl);
}

/* ─────────────────────────────────────────────
   5. Buttons
───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.7em 1.6em;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0);    box-shadow: none; }
.btn:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 2px;
}

/* Primary (dark blue) */
.btn--primary {
    background: var(--color-navy-dark);
    color: var(--color-white);
    border-color: var(--color-navy-dark);
}
.btn--primary:hover {
    background: var(--color-navy-deeper);
    border-color: var(--color-navy-deeper);
}

/* Danger (red-orange) */
.btn--danger {
    background: var(--color-red);
    color: var(--color-white);
    border-color: var(--color-red);
}
.btn--danger:hover {
    background: var(--color-red-dark);
    border-color: var(--color-red-dark);
}

/* Orange */
.btn--orange {
    background: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
}
.btn--orange:hover {
    background: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
}

/* Outline */
.btn--outline {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.btn--outline:hover {
    background: var(--color-navy);
    color: var(--color-white);
}

/* ─────────────────────────────────────────────
   6. Layout / Container
───────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.site-main {
    display: block;
}

/* ─────────────────────────────────────────────
   7. Header – Primary Bar
───────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.header-primary {
    background: var(--color-navy);
    height: var(--header-height);
}

.header-primary__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-lg);
}

/* Logos */
.header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo img {
    max-height: 58px;
    width: auto;
    display: block;
}

/* Desktop layout:
   Paracetamol LEFT · Nav CENTER · Fen RIGHT
   The DOM order matches the desktop order.
   On mobile we reorder via flexbox order property. */
.header-logo--paracetamol { order: 1; }
.primary-nav              { order: 2; }
.hamburger                { order: 3; }
.header-logo--fen         { order: 4; }

/* ─────────────────────────────────────────────
   8. Primary Navigation (desktop)
───────────────────────────────────────────── */
.primary-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    list-style: none;
}

.primary-nav__item {
    position: relative;
}

.primary-nav__link,
.primary-nav__list > li > a {
    display: block;
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 0.3em 0;
    position: relative;
    transition: color var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

/* Underline indicator */
.primary-nav__list > li > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-yellow);
    border-radius: 2px;
    transition: width var(--transition-base);
}

.primary-nav__list > li > a:hover::after,
.primary-nav__list > li.current-menu-item > a::after,
.primary-nav__list > li.current-menu-ancestor > a::after {
    width: 100%;
}

.primary-nav__list > li > a:hover,
.primary-nav__list > li.current-menu-item > a,
.primary-nav__list > li.current-menu-ancestor > a {
    color: var(--color-yellow);
}

/* Dropdown */
.primary-nav__list .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    transform: translateX(-50%) translateY(-8px);
    list-style: none;
    z-index: 100;
}

.primary-nav__item:hover > .sub-menu,
.primary-nav__item:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.primary-nav__list .sub-menu li a {
    display: block;
    padding: 0.6em 1.2em;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}

.primary-nav__list .sub-menu li a:hover {
    background: var(--color-off-white);
    color: var(--color-navy);
}

/* ─────────────────────────────────────────────
   9. Secondary Navigation (pill buttons)
───────────────────────────────────────────── */
.secondary-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    height: var(--secondary-height);
}

.secondary-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    /* Fade mask shows scrollable content on mobile */
    position: relative;
}

.secondary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    list-style: none;
    width: 100%;
    justify-content: space-around;
    padding: var(--space-sm) 0;
}

.secondary-nav__item {
    flex-shrink: 0;
}

.secondary-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1.3em;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.secondary-nav__link:hover {
    background: var(--color-orange-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(232, 97, 10, .35);
}

.secondary-nav__link:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}

/* Gotas product pages: blue pills */
.secondary-nav--gotas .secondary-nav__link {
    background: var(--color-navy);
}

.secondary-nav--gotas .secondary-nav__link:hover {
    background: var(--color-navy-dark);
    box-shadow: 0 4px 10px rgba(26, 46, 124, .35);
}

/* Fen product pages: orange pills – override .is-active navy that follows */
.secondary-nav--fen .secondary-nav__link,
.secondary-nav--fen .secondary-nav__link.is-active {
    background: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
}

.secondary-nav--fen .secondary-nav__link:hover,
.secondary-nav--fen .secondary-nav__link.is-active:hover {
    background: var(--color-orange-dark) !important;
    border-color: var(--color-orange-dark) !important;
    box-shadow: 0 4px 10px rgba(232, 97, 10, .35);
}

.secondary-nav__link.is-active {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

/* ─────────────────────────────────────────────
   10. Mobile Navigation (drawer)
───────────────────────────────────────────── */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: min(340px, 90vw);
    height: 100vh;
    background: var(--color-navy-dark);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
    padding-top: var(--header-height);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav__inner {
    padding: var(--space-xl) var(--space-lg);
}

.mobile-nav__list {
    list-style: none;
    margin-bottom: var(--space-xl);
}

.mobile-nav__list li {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.mobile-nav__list li a {
    display: block;
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: 700;
    padding: var(--space-md) var(--space-sm);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    text-decoration: none;
}

.mobile-nav__list li a:hover {
    color: var(--color-yellow);
    padding-left: var(--space-md);
}

.mobile-nav__list li.current-menu-item > a {
    color: var(--color-yellow);
}

/* Sub-menu in mobile */
.mobile-nav__list .sub-menu {
    list-style: none;
    padding-left: var(--space-lg);
    background: rgba(0,0,0,.15);
}

.mobile-nav__list .sub-menu li a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.6em var(--space-sm);
}

/* Secondary pills in mobile drawer */
.mobile-nav__secondary {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: var(--space-lg);
}

.mobile-nav__secondary-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.mobile-nav__secondary-list .secondary-nav__link {
    width: 100%;
    justify-content: flex-start;
}


/* ─────────────────────────────────────────────
   11. Hamburger Button
───────────────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.hamburger:hover  { background: rgba(255,255,255,.1); }
.hamburger:focus-visible { outline: 2px solid var(--color-yellow); }

.hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
    transform-origin: center;
}

/* Animated X state */
.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────
   12. Hero Section
   Single image — scales on all screen sizes.
   Legal copy is embedded in the image itself.
───────────────────────────────────────────── */
.hero {
    display: block;
    line-height: 0;   /* remove phantom gap below inline image */
    background: var(--color-navy-deeper);
    max-width: 1200px;
    margin: 0 auto;
}

.hero__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ─────────────────────────────────────────────
   13. Intro Section
───────────────────────────────────────────── */
.intro {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
    overflow: hidden; /* clips product images that overflow */
}

.intro__inner {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    gap: var(--space-lg);
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    position: relative;
}

/* Product images overflow slightly for visual depth */
.intro__product-image {
    position: relative;
}

.intro__product-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.15));
}

.intro__product-image--left img  { margin-left: auto; }
.intro__product-image--right img { margin-right: auto; }

.intro__tagline {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-md);
}

.intro__body {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.45;
    margin: 0;
}

/* ─────────────────────────────────────────────
   14. Content Grid (4 cards)
   Gallery style: max-width 1200px, 20px gaps.
   Images contain all text/design — display as-is.
───────────────────────────────────────────── */
.content-grid {
    padding: 20px;
    background: var(--color-white);
}

.content-grid__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-card {
    display: block;
    overflow: hidden;
    line-height: 0;
    border-radius: var(--radius-md);
    transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

.content-card:hover {
    opacity: .95;
    box-shadow: var(--shadow-lg);
}

.content-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
}

.content-card:hover img {
    transform: scale(1.02);
}

/* ─────────────────────────────────────────────
   15. Recent Evidence Section
───────────────────────────────────────────── */
.recent-evidence {
    padding: var(--space-3xl) 0;
    background: var(--color-off-white);
}

.evidence-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--color-navy);
    margin-bottom: var(--space-2xl);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-orange);
    margin: var(--space-md) auto 0;
    border-radius: 3px;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.evidence-card {
    background: transparent;
}

.evidence-card__img-link {
    display: block;
    text-decoration: none;
}

.evidence-card__thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 0;
    background: var(--color-border);
}

.evidence-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.evidence-card__img-link:hover .evidence-card__thumb img {
    transform: scale(1.04);
}

.evidence-card__thumb--placeholder {
    background: linear-gradient(135deg, var(--color-navy) 0%, #2340a0 100%);
    aspect-ratio: 4/3;
    border-radius: 0;
    margin-bottom: 0;
}

.evidence-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding-top: 12px;
}

.evidence-card__title a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.evidence-card__title a:hover {
    text-decoration: underline;
}

.no-content {
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    padding: var(--space-xl) 0;
}

/* ─────────────────────────────────────────────
   16. Product Pages – Gotas & Fen panel grids
   Same approach as homepage content cards:
   pure <img> in <a> links, text baked into images.
───────────────────────────────────────────── */

/* ── Product sections wrapper (1200px max-width) ── */
.product-sections {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-grid {
    display: grid;
    gap: 10px;
}

.product-grid--2col { grid-template-columns: 1fr 1fr; }
.product-grid--3col { grid-template-columns: 1fr 1fr 1fr; }

/* 3-col where middle cell is a vertical stack of two cards */
.product-grid--3col-split {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.product-card-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-card-stack .product-card {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.product-card-stack .product-card img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card-stack .product-card:hover img {
    transform: scale(1.02);
}

.product-card {
    display: block;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.02);
}

/* ─────────────────────────────────────────────
   20. Product Section Landing Pages
───────────────────────────────────────────── */

.section-hub__banner {
    background: var(--hub-color, var(--color-navy));
    padding: 32px 0 28px;
}

.section-hub__banner-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-hub__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.75);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .03em;
    transition: color var(--transition-fast);
}

.section-hub__back:hover { color: #fff; }

.section-hub__title {
    margin: 0;
    color: #fff;
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.section-hub__badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: .3em .9em;
    border-radius: var(--radius-pill);
    letter-spacing: .06em;
    text-transform: uppercase;
    align-self: flex-start;
}

.section-hub {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px 60px;
}

.section-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.section-hub__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
    font-size: var(--font-size-md);
}

.section-hub__card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.section-hub__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.section-hub__thumb {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-off-white);
}

.section-hub__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.section-hub__card:hover .section-hub__thumb img {
    transform: scale(1.04);
}

.section-hub__card-title {
    margin: 0;
    padding: 14px 16px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .section-hub__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .section-hub { padding: 0 12px 40px; margin-top: 24px; }
    .section-hub__title { font-size: var(--font-size-lg); }
}

/* Responsive */
@media (max-width: 768px) {
    .product-sections { padding: 0 12px; }
    .product-grid--2col,
    .product-grid--3col,
    .product-grid--3col-split { grid-template-columns: 1fr; }
    .product-card-stack { flex-direction: column; }
}

/* ─────────────────────────────────────────────
   17. IPP – Two-column document page (60 / 40)
───────────────────────────────────────────── */

/* Thin accent stripe at top (replaces the full banner for IPP) */
.ipp-page__stripe {
    height: 6px;
    width: 100%;
}

.ipp-page {
    padding: 52px 0 88px;
    background: #f7f8fc;
    min-height: 55vh;
}

.ipp-page__inner {
    max-width: 1100px;
}

/* Two-column grid */
.ipp-page__layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 64px;
    align-items: center;
}

/* ── Left column ──────────────────────────── */
.ipp-page__left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ipp-page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ipp-color, #1a2e7c);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    opacity: .75;
    transition: opacity .2s;
    align-self: flex-start;
}
.ipp-page__back:hover { opacity: 1; }

.ipp-page__title {
    margin: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: var(--ipp-color, #1a2e7c);
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.ipp-page__abbr {
    display: block;
    font-size: .45em;
    font-weight: 600;
    opacity: .65;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}

.ipp-page__intro {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text, #333);
    line-height: 1.7;
}

.ipp-page__intro--sm {
    font-size: .875rem;
    color: var(--color-text-light, #666);
}

.ipp-page__badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.ipp-page__badge {
    display: inline-block;
    padding: .3em .9em;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ipp-color, #1a2e7c);
    color: #fff;
}

.ipp-page__badge--light {
    background: transparent;
    border: 1.5px solid var(--ipp-color, #1a2e7c);
    color: var(--ipp-color, #1a2e7c);
}

.ipp-page__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
    font-size: var(--font-size-md);
}

/* ── Right column – document card(s) ───────── */
.ipp-page__right {
    display: flex;
    justify-content: center;
}

/* Stack wrapper – single or multiple cards */
.ipp-docs-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
}

/* When 2 cards, allow them to shrink a bit so both fit nicely */
.ipp-docs-stack--multi .ipp-doc__card {
    max-width: 300px;
}

.ipp-doc__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06);
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    max-width: 340px;
    transition: transform .22s ease, box-shadow .22s ease;
    border: 1px solid rgba(0,0,0,.05);
}

.ipp-doc__card:not(.ipp-doc__card--no-link):hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.07);
}

/* Cover: square-ish area at the top of the card */
.ipp-doc__cover {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #e8ecf7; /* light tint – safe fallback, no color-mix() needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ipp-doc__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ipp-doc__cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ipp-doc__pdf-icon {
    width: 72px;
    height: 90px;
    color: var(--ipp-color, #1a2e7c);
    opacity: .8;
}

/* Info footer of card */
.ipp-doc__info {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ipp-doc__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ipp-color, #1a2e7c);
    opacity: .65;
}

.ipp-doc__name {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--color-text, #1a1a2e);
    line-height: 1.35;
}

.ipp-doc__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 10px 20px;
    background: var(--ipp-color, #1a2e7c);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    border-radius: 30px;
    letter-spacing: .03em;
    align-self: flex-start;
    transition: opacity .18s;
}
.ipp-doc__card:hover .ipp-doc__cta { opacity: .85; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 768px) {
    .ipp-page__layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .ipp-page__right {
        justify-content: flex-start;
    }
    .ipp-doc__card {
        max-width: 100%;
        flex-direction: row;
        align-items: stretch;
    }
    .ipp-doc__cover {
        flex: 0 0 130px;
        aspect-ratio: unset;
        width: 130px;
    }
    .ipp-page {
        padding: 36px 0 60px;
    }
}

@media (max-width: 480px) {
    .ipp-doc__card {
        flex-direction: column;
    }
    .ipp-doc__cover {
        width: 100%;
        flex: none;
        aspect-ratio: 16 / 7;
    }
}

/* ─────────────────────────────────────────────
   18. Category Section Landing Pages
───────────────────────────────────────────── */

/* ── Compact header ───────────────────────── */
.cat-header {
    background: #fff;
    border-bottom: 1px solid #e8eaf0;
    padding: 36px 0 28px;
}

.cat-header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cat-header__text {
    flex: 1;
    min-width: 0;
}

.cat-header__title {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: var(--color-navy, #1a2e7c);
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.cat-header__subtitle {
    margin: 0;
    font-size: .9rem;
    color: var(--color-text-light, #666);
    line-height: 1.5;
    max-width: 520px;
}

.cat-header__pills {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.cat-header__pill {
    display: inline-flex;
    align-items: center;
    padding: .4em 1.1em;
    border-radius: 30px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    transition: opacity .18s;
}
.cat-header__pill:hover { opacity: .82; }

.cat-header__pill--gotas {
    background: #1a2e7c;
    color: #fff;
}
.cat-header__pill--fen {
    background: #e8610a;
    color: #fff;
}

/* ── Standard product sections ────────────── */
.cat-sections {
    padding: 0 0 72px;
    background: #f7f8fc;
}

.cat-product {
    margin-top: 40px;
}
.cat-product:first-child { margin-top: 32px; }

/* Coloured identity band */
.cat-product__band {
    background: var(--prod-color, #e8610a);
    padding: 16px 0;
}

.cat-product__band-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cat-product__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    flex: 1;
}

.cat-product__ingredient {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0,0,0,.15);
    padding: .25em .8em;
    border-radius: 20px;
}

.cat-product__see-all {
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid rgba(255,255,255,.6);
    padding: .3em .9em;
    border-radius: 20px;
    transition: background .18s, border-color .18s;
}
.cat-product__see-all:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

/* Card body */
.cat-product__body {
    padding-top: 28px;
    padding-bottom: 8px;
}

.cat-product__empty {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    padding: 24px 0 0;
}

.cat-product__grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ── IPP two-card layout ──────────────────── */
.cat-ipp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 48px 20px 72px;
    max-width: 880px;
    margin: 0 auto;
}

.cat-ipp-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cat-ipp-item__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--prod-color, #e8610a);
}

.cat-ipp-item__prod {
    font-size: .85rem;
    font-weight: 800;
    color: var(--prod-color, #e8610a);
}

.cat-ipp-item__ingredient {
    font-size: .72rem;
    color: var(--color-text-light, #777);
    margin-left: auto;
}

/* Stack for multiple IPP cards inside a category product column */
.cat-ipp-item__cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cat-ipp-item__cards-stack--multi .cat-ipp-item__card {
    max-width: 100%;
}

.cat-ipp-item__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    flex: 1;
}
.cat-ipp-item__card:not(.cat-ipp-item__card--empty):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
}

.cat-ipp-item__cover {
    aspect-ratio: 4 / 3;
    background: #eef0f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cat-ipp-item__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-ipp-item__info {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cat-ipp-item__label {
    margin: 0;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--prod-color);
    opacity: .7;
}

.cat-ipp-item__name {
    margin: 0;
    font-size: .88rem;
    font-weight: 800;
    color: var(--color-text, #1a1a2e);
    line-height: 1.35;
}

.cat-ipp-item__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--prod-color);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 20px;
    align-self: flex-start;
    letter-spacing: .03em;
}

.cat-ipp-item__soon {
    font-size: .78rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .cat-ipp-grid {
        grid-template-columns: 1fr;
        padding: 32px 16px 56px;
    }
    .cat-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .cat-header__pills {
        width: 100%;
    }
    .cat-product__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─────────────────────────────────────────────
   19. Footer
───────────────────────────────────────────── */
.site-footer {
    background: var(--color-navy-deeper);
    color: rgba(255,255,255,.75);
    padding: var(--space-2xl) 0 var(--space-lg);
}

.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.footer__brand .logo-text {
    margin-bottom: var(--space-md);
}

.footer__tagline {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    opacity: 0.75;
}

.footer__heading {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-md);
}

.footer__menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__menu a {
    color: rgba(255,255,255,.65);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__menu a:hover {
    color: var(--color-yellow);
}

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer__copyright {
    font-size: var(--font-size-xs);
    opacity: 0.55;
}

.footer__reckitt {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    opacity: 0.55;
}

.footer__legal {
    font-size: 0.625rem;
    opacity: 0.4;
    line-height: 1.5;
    margin-top: var(--space-md);
    max-width: 800px;
}

/* ─────────────────────────────────────────────
   17. Generic Page / Single / Archive
───────────────────────────────────────────── */
.page-wrapper {
    padding: var(--space-2xl) 0;
}

.page-header {
    background: var(--color-navy);
    color: var(--color-white);
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-2xl);
}

.page-header__title {
    color: var(--color-white);
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}

.page-header__subtitle {
    color: rgba(255,255,255,.7);
    margin-top: var(--space-sm);
    font-size: var(--font-size-md);
}

/* Post grid for archives */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.post-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.post-card__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-border);
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.post-card:hover .post-card__thumb img {
    transform: scale(1.05);
}

.post-card__body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-card__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.post-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-card__title a:hover { color: var(--color-navy); }

.post-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    flex: 1;
    margin-bottom: var(--space-md);
}

.post-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: auto;
}

/* Single post */
.single-content {
    max-width: 800px;
    margin: 0 auto;
}

.single-content img {
    border-radius: var(--radius-md);
    margin-block: var(--space-lg);
}

.single-content h2,
.single-content h3 { margin-block: var(--space-lg) var(--space-md); }

.single-content p { margin-bottom: var(--space-md); }

.single-content a {
    color: var(--color-navy);
    text-decoration: underline;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

/* ─────────────────────────────────────────────
   18. Accessibility
───────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 3px;
}

[aria-hidden="true"] { pointer-events: none; }

/* ─────────────────────────────────────────────
   19. Responsive Overrides
───────────────────────────────────────────── */

/* ── Large (≤1280px) ── */
@media (max-width: 900px) {
    .evidence-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Medium tablet (≤1024px) – switch to mobile nav ── */
@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
    }

    /* Hide desktop nav, show hamburger */
    .primary-nav { display: none; }
    .hamburger   { display: flex; }

    /* Logo order on mobile:
       DOM order: Paracetamol(1) · Nav(2) · Hamburger(3) · Fen(4)
       Mobile visual: Fen LEFT · Hamburger CENTER · Paracetamol RIGHT */
    .header-logo--paracetamol { order: 3; }
    .hamburger                { order: 2; }
    .header-logo--fen         { order: 1; }

    /* Logo sizes on tablet */
    .header-logo img { max-height: 48px; }

    /* Secondary nav: horizontal scroll on mobile/tablet */
    .secondary-nav {
        height: auto;
        padding: 0;
    }

    /* Fade mask on right edge signals more pills to scroll */
    .secondary-nav__inner::after {
        content: '';
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 48px;
        background: linear-gradient(to right, transparent, #fff);
        pointer-events: none;
        z-index: 1;
    }

    .secondary-nav__list {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 48px 10px 16px; /* right pad keeps last pill clear of fade */
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .secondary-nav__list::-webkit-scrollbar { display: none; }

    .secondary-nav__item { scroll-snap-align: start; }

    /* Hero image just scales — no extra rules needed */

    /* Grid: 2 cols on tablet */
    .post-grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer: 2 cols */
    .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ── Small (≤768px) ── */
@media (max-width: 768px) {
    :root { --header-height: 64px; }

    /* Slightly smaller logos */
    .header-logo img { max-height: 42px; }

    /* Intro: single column, hide decorative product images */
    .intro__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .intro__product-image { display: none; }

    /* Content grid: single column on mobile */
    .content-grid { padding: 16px; }
    .content-grid__inner { grid-template-columns: 1fr; gap: 16px; }

    /* Evidence: 2 col on small, then 1 col on mobile below */
    .evidence-grid { grid-template-columns: repeat(2, 1fr); }

    /* Post grid: 1 col */
    .post-grid { grid-template-columns: 1fr; }

    /* Footer: single column */
    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

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

/* ── XSmall (≤480px) ── */
@media (max-width: 480px) {
    .container { padding-inline: var(--space-md); }

    /* Evidence: single column on very small screens */
    .evidence-grid { grid-template-columns: 1fr; }

    /* Even smaller logos on very small phones */
    .header-logo img { max-height: 36px; }

    .secondary-nav__link {
        font-size: 0.75rem;
        padding: 0.45em 1em;
    }

    .content-card__title   { font-size: 1.1rem; }
    .content-card__content { padding: var(--space-lg); }

    .btn {
        font-size: 0.75rem;
        padding: 0.6em 1.2em;
    }

    /* Legal text a touch larger on small screens for readability */
    .hero__legal-text { font-size: 0.55rem; }
}

/* ─────────────────────────────────────────────
   Single Post Article Layout
   Uses CSS custom properties injected inline
   by single.php: --article-accent, --article-accent-light
───────────────────────────────────────────── */

/* ── Article Header Band ── */
.article-header {
    background: var(--article-accent, var(--color-navy));
    padding: 36px 0 32px;
}

.article-header__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.75);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s;
}
.article-header__back:hover { color: #fff; }

.article-header__badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 40px;
    width: fit-content;
}

.article-header__title {
    color: #fff;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    max-width: 800px;
}

.article-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: rgba(255,255,255,.7);
    font-size: 0.85rem;
}

.article-header__date,
.article-header__author {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Article Body ── */
.article-body {
    background: #fafafa;
    padding: 0 0 60px;
}

.article-body__inner {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 0;
}

/* ── Featured Image ── */
.article-featured-img {
    margin: 0 0 40px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

.article-featured-img__img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 480px;
    object-fit: cover;
}

/* ── Article Content (prose) ── */
.article-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 44px 52px;
    font-size: 1rem;
    line-height: 1.8;
    color: #222;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    color: var(--article-accent, var(--color-navy));
    margin-top: 2em;
    margin-bottom: .5em;
    line-height: 1.25;
}

.article-content h2 { font-size: 1.5rem; }
.article-content h3 { font-size: 1.2rem; }
.article-content h4 { font-size: 1rem; font-weight: 700; }

.article-content p { margin-bottom: 1.4em; }

.article-content a {
    color: var(--article-accent, var(--color-navy));
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-content a:hover { opacity: .8; }

.article-content ul,
.article-content ol {
    padding-left: 1.6em;
    margin-bottom: 1.4em;
}
.article-content li { margin-bottom: .4em; }

.article-content blockquote {
    border-left: 4px solid var(--article-accent, var(--color-navy));
    background: var(--article-accent-light, rgba(26,46,124,.06));
    margin: 1.6em 0;
    padding: 16px 24px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: .9rem;
}
.article-content th {
    background: var(--article-accent, var(--color-navy));
    color: #fff;
    padding: 10px 14px;
    text-align: left;
}
.article-content td {
    padding: 9px 14px;
    border-bottom: 1px solid #eee;
}
.article-content tr:nth-child(even) td { background: var(--article-accent-light, rgba(26,46,124,.04)); }

/* ── Tags ── */
.article-tags {
    margin-top: 28px;
    font-size: 0.85rem;
    color: #666;
}
.article-tags__label { font-weight: 700; margin-right: 4px; }
.article-tags a {
    color: var(--article-accent, var(--color-navy));
    text-decoration: none;
}
.article-tags a:hover { text-decoration: underline; }

/* ── Prev / Next Nav ── */
.article-nav {
    margin-top: 40px;
    border-top: 1px solid #e8e8e8;
    padding-top: 32px;
}

.article-nav .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.article-nav .nav-previous,
.article-nav .nav-next {
    flex: 1;
    max-width: 48%;
}

.article-nav .nav-next { text-align: right; }

.article-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
}
.article-nav a:hover {
    border-color: var(--article-accent, var(--color-navy));
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.article-nav .article-nav__dir {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--article-accent, var(--color-navy));
}

.article-nav .article-nav__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}

/* ── Back Footer Link ── */
.article-back-footer {
    margin-top: 32px;
    text-align: center;
}

.article-back-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--article-accent, var(--color-navy));
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid var(--article-accent, var(--color-navy));
    padding: 10px 22px;
    border-radius: 40px;
    transition: background .2s, color .2s;
}
.article-back-footer__link:hover {
    background: var(--article-accent, var(--color-navy));
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .article-content { padding: 32px 28px; }
}

@media (max-width: 600px) {
    .article-header { padding: 24px 0 20px; }
    .article-header__title { font-size: 1.5rem; }
    .article-content { padding: 24px 18px; font-size: 0.95rem; }
    .article-nav .nav-links { flex-direction: column; }
    .article-nav .nav-previous,
    .article-nav .nav-next { max-width: 100%; text-align: left; }
    .article-featured-img__img { max-height: 240px; }
}

/* ─────────────────────────────────────────────
   20. HCP Verification Gate
   Full-screen overlay shown on first visit.
   Dismissed by JS; returning visitors skip it.
───────────────────────────────────────────── */

/* Overlay – deep navy background */
.hcp-gate {
    display: none;               /* JS shows it when needed */
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--color-navy-deeper, #0d1648);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* JS adds this class to make it flex-visible */
.hcp-gate.is-visible {
    display: flex;
}

/* Blue card */
.hcp-gate__box {
    background: var(--color-navy, #1a2e7c);
    border-radius: 20px;
    padding: clamp(36px, 6vw, 60px) clamp(32px, 6vw, 68px);
    max-width: 540px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.1),
        0 32px 80px rgba(0, 0, 0, 0.5);
}

/* Dual logos – white logos read well on blue */
.hcp-gate__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.hcp-gate__logo {
    height: 48px;
    width: auto;
    display: block;
    /* Ensure white PNG logos pop against blue */
    filter: brightness(0) invert(1);
}

/* Thin divider between logos and text */
.hcp-gate__logos::after {
    content: '';
    display: block;
    /* decorative separator not needed – logos are self-contained */
}

/* Main statement */
.hcp-gate__title {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.55;
    margin: 0 0 12px;
}

/* Question */
.hcp-gate__question {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0 0 32px;
}

/* Button row */
.hcp-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Shared button base */
.hcp-gate__btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
    border: 2px solid transparent;
    line-height: 1.2;
}

/* YES – solid white, navy text */
.hcp-gate__btn--yes {
    background: #fff;
    color: var(--color-navy, #1a2e7c);
    border-color: #fff;
}
.hcp-gate__btn--yes:hover,
.hcp-gate__btn--yes:focus-visible {
    background: var(--color-off-white, #f0f4ff);
    border-color: var(--color-off-white, #f0f4ff);
    box-shadow: 0 4px 18px rgba(255, 255, 255, .25);
}

/* NO – ghost with white border */
.hcp-gate__btn--no {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.35);
}
.hcp-gate__btn--no:hover,
.hcp-gate__btn--no:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .hcp-gate__box {
        border-radius: 14px;
        padding: 32px 22px;
    }
    .hcp-gate__logo { height: 38px; }
}

/* ─────────────────────────────────────────────
   21. Editorial Single Post (.ep-*)
   Used by single.php for the redesigned
   article template (16:9 hero, golden-ratio
   prose, product card grid at bottom).
───────────────────────────────────────────── */

/* ── Article shell ── */
.ep-article {
    --ep-accent:       #1a2e7c;
    --ep-accent-light: rgba(26,46,124,.08);
    background: #fff;
}

/* ══ HERO ══════════════════════════════════ */

.ep-hero {
    width: 100%;
    max-width: 1200px;   /* never wider than 1200px */
    margin: 0 auto;
    background: #000;
}

/* 16:9 ratio box — capped at 480px tall so article text is
   visible without scrolling on typical laptop viewports */
.ep-hero__ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 480px;
    overflow: hidden;
}

/* Hero image – fills the ratio box */
.ep-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Fallback colour when no thumbnail */
.ep-hero__fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ep-accent) 0%, #0d1648 100%);
}

/* Subtle full overlay so white text reads against any photo */
.ep-hero__gradient {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

/* Caption block – centred in the middle of the image */
.ep-hero__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px) clamp(20px, 8vw, 100px);
    gap: 14px;
    text-align: center;
}

/* Product badge pill (e.g. "Tempra Gotas®") */
.ep-hero__badge {
    display: inline-block;
    background: var(--ep-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 40px;
    border: 2px solid rgba(255,255,255,.35);
}

/* Article title overlaid on hero */
.ep-hero__title {
    color: #fff;
    font-size: clamp(1.5rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0;
    max-width: 860px;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* ══ PROSE ═════════════════════════════════ */

.ep-prose {
    padding: clamp(40px, 6vw, 80px) 20px clamp(48px, 7vw, 96px);
}

/* Golden-ratio column: ~680px keeps ~75 chars/line at 1rem */
.ep-prose__inner {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.618;        /* golden ratio */
    color: var(--color-text, #1a1a2e);
}

/* Prose entry-content typography */
.ep-prose__inner h2,
.ep-prose__inner h3,
.ep-prose__inner h4 {
    color: var(--ep-accent);
    margin-top: 2.2em;
    margin-bottom: .6em;
    line-height: 1.25;
}

.ep-prose__inner h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.ep-prose__inner h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
.ep-prose__inner h4 { font-size: 1rem; font-weight: 700; }

.ep-prose__inner p { margin-bottom: 1.5em; }

.ep-prose__inner a {
    color: var(--ep-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ep-prose__inner a:hover { opacity: .75; }

.ep-prose__inner ul,
.ep-prose__inner ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}
.ep-prose__inner li { margin-bottom: .5em; }

.ep-prose__inner blockquote {
    border-left: 4px solid var(--ep-accent);
    background: var(--ep-accent-light);
    margin: 1.8em 0;
    padding: 16px 24px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #555;
}

.ep-prose__inner img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.2em 0;
    display: block;
}

.ep-prose__inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: .9em;
}
.ep-prose__inner th {
    background: var(--ep-accent);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-size: .85em;
    letter-spacing: .03em;
}
.ep-prose__inner td {
    padding: 9px 14px;
    border-bottom: 1px solid #eee;
}
.ep-prose__inner tr:nth-child(even) td {
    background: var(--ep-accent-light);
}

/* ── Tags ── */
.ep-tags {
    max-width: 680px;
    margin: 36px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #dde3f0);
    font-size: 0.85rem;
    color: #666;
}
.ep-tags .ep-tags__label {
    font-weight: 700;
    color: #444;
}
.ep-tags a {
    color: var(--ep-accent);
    text-decoration: none;
}
.ep-tags a:hover { text-decoration: underline; }

/* ── Back link ── */
.ep-back {
    max-width: 680px;
    margin: 28px auto 0;
}

.ep-back__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ep-accent);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    letter-spacing: .03em;
    transition: opacity .2s;
}
.ep-back__link:hover { opacity: .7; }
.ep-back__link svg {
    flex-shrink: 0;
    color: var(--ep-accent);
}

/* ══ MORE ARTICLES ══════════════════════════ */

.ep-more {
    --ep-accent: #1a2e7c;    /* overridden inline by single.php */
    background: var(--color-off-white, #f5f7fa);
    padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
}

.ep-more__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

.ep-more__heading {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: var(--ep-accent);
    margin: 0 0 clamp(20px, 3vw, 36px);
    letter-spacing: -.01em;
}

/* Responsive card grid: 4 → 3 → 2 → 1 */
.ep-more__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 24px);
}

/* ── Individual card ── */
.ep-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}
.ep-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* 16:9 image area */
.ep-card__img-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: var(--ep-accent);
}

.ep-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .3s ease;
}
.ep-card:hover .ep-card__img {
    transform: scale(1.04);
}

.ep-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ep-accent) 0%, rgba(0,0,0,.4) 100%);
}

.ep-card__title {
    padding: 14px 16px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.38;
    color: var(--color-text, #1a1a2e);
    flex: 1;
}

/* ── Responsive overrides for ep-* ── */
@media (max-width: 1024px) {
    .ep-more__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ep-hero__title { font-size: clamp(1.2rem, 5vw, 2rem); }
    .ep-more__grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ep-hero__caption {
        padding: 20px 16px;
        gap: 10px;
    }
    .ep-hero__title { font-size: clamp(1.1rem, 6vw, 1.5rem); }
    .ep-more__grid  { grid-template-columns: 1fr; }
    .ep-prose__inner { font-size: 1rem; }
}