/* ==========================================================================
   HyperCommerce banner theme - sticky sky header + editorial hero
   Loaded only when general_settings.banner_design = 'hypercommerce'.
   Every selector is hc- prefixed so the default theme is untouched.
   ========================================================================== */

.hc-shell,
.hc-hero {
    --hc-navy: #032d63;
    --hc-navy-deep: #01234f;
    --hc-blue: #014396;
    --hc-ink: #2b3a56;
    --hc-line: rgba(3, 45, 99, 0.16);
    --hc-pad: 24px;
    --hc-sans: "Inter", "Jost", "Segoe UI", Roboto, sans-serif;
    --hc-display: "Montserrat", "Jost", "Segoe UI", sans-serif;
    --hc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   Shell - the whole sky-backed header stack (top bar + header + category nav)
   Fixed rather than sticky: body carries overflow-x:hidden, which kills
   position:sticky in Chromium. A spacer holds the space in the flow instead.
   -------------------------------------------------------------------------- */
.hc-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-image: var(--hc-strip, url("../images/top-banner-bg.webp"));
    /* "100% auto" scales the strip by width only, which is exactly the scale
       the hero plate gets from its own cover (the hero box carries the plate's
       1600/630 ratio). So the artwork keeps its proportions AND lines up across
       the seam. Anchoring bottom keeps the strip's last row - the row that
       continues into the plate - flush with the shell's bottom edge.
       (The old "100% 100%" stretched a 10:1 strip into a 2:1 box, which
       squashed the olive tree into vertical streaks.) */
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #b9d5ec;
    transition: box-shadow 0.3s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hc-shell.is-compact {
    box-shadow: 0 6px 26px rgba(3, 45, 99, 0.13);
}

.hc-shell-spacer {
    display: block;
}

/* style.css offsets #content by a hard-coded 122px to clear the default
   theme's fixed header. This theme reserves that space with the spacer above,
   which measures the real header height, so the static offset must go. */
#content {
    padding-top: 0;
}

/* Set by the script while it measures the expanded height on resize, so the
   momentary expand/collapse is not animated. */
.hc-shell.hc-no-transition,
.hc-shell.hc-no-transition * {
    transition: none !important;
}

.hc-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--hc-pad);
}

.hc-shell a {
    text-decoration: none;
    color: inherit;
}

.hc-shell svg {
    display: block;
    flex: none;
}

/* style.css resets every list item on the site to `display: inline-block`, so
   this header's dropdowns laid their rows out side by side instead of stacked -
   the subcategory menu came out as a single wide strip. Each of these is a
   vertical list. (The deliver panel only looked right by accident: its chips
   happen to be too wide to share a 268px line.) */
.hc-cat__menu li,
.hc-deliver__menu li {
    display: block;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.hc-topbar {
    font-size: 12px;
    color: var(--hc-navy);
}

.hc-topbar > .hc-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
}

.hc-topbar__side {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hc-lang,
.hc-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hc-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--hc-navy);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hc-phone:hover,
.hc-lang:hover {
    color: var(--hc-blue);
}

/* Only rendered in the logo row at phone widths */
.hc-lang--mobile {
    display: none;
}

.hc-follow {
    font-weight: 500;
    opacity: 0.85;
}

.hc-social {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-social a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--hc-navy);
    transition: transform 0.2s ease, color 0.2s ease;
}

.hc-social a:hover {
    transform: translateY(-2px);
    color: var(--hc-blue);
}

/* --------------------------------------------------------------------------
   Main header row - logo / deliver-to / search / account / cart
   -------------------------------------------------------------------------- */
.hc-header > .hc-container {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.hc-logo {
    flex: none;
    display: block;
}

.hc-logo img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* Deliver-to chip */
.hc-deliver {
    position: relative;
    flex: none;
}

.hc-deliver__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--hc-navy);
    font-family: var(--hc-sans);
    text-align: left;
    line-height: 1.15;
}

.hc-deliver__label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
    font-weight: 600;
}

.hc-deliver__value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-deliver__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 268px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--hc-line);
    box-shadow: 0 18px 44px rgba(3, 45, 99, 0.18);
    padding: 8px;
    list-style: none;
    margin: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.hc-deliver.is-open .hc-deliver__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hc-deliver__menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    border-radius: 9px;
    font-family: var(--hc-sans);
    font-size: 13px;
    color: var(--hc-ink);
    cursor: pointer;
}

.hc-deliver__menu button:hover,
.hc-deliver__menu button[aria-selected="true"] {
    background: #eef4fd;
    color: var(--hc-navy);
    font-weight: 600;
}

.hc-deliver__fee {
    flex: none;
    font-size: 12px;
    opacity: 0.7;
}

/* Search */
.hc-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 740px;
}

.hc-search form {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    height: 46px;
    padding: 0 8px 0 18px;
    box-shadow: 0 6px 20px rgba(3, 45, 99, 0.09);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

.hc-search form:focus-within {
    background: #fff;
    box-shadow: 0 8px 26px rgba(3, 45, 99, 0.17);
}

.hc-search__icon {
    color: #6b7c94;
    margin-right: 10px;
}

.hc-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    font-family: var(--hc-sans);
    font-size: 14px;
    color: var(--hc-ink);
}

.hc-search input::placeholder {
    color: #8494ab;
}

.hc-search__btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--hc-blue);
    cursor: pointer;
    transition: background 0.2s ease;
}

.hc-search__btn:hover {
    background: #e9f1fd;
}

/* Live search results dropdown */
.hc-shell .search_result:not(:empty) {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--hc-line);
    box-shadow: 0 20px 50px rgba(3, 45, 99, 0.2);
    padding: 6px;
    z-index: 30;
}

/* The ajax partial (frontEnd/layouts/ajax/search.blade.php) wraps its results
   in .search_product, which style.css takes out of flow so it can overlay the
   default theme's header. Here the panel above IS the overlay, so the wrapper
   has to be an ordinary in-flow block: left absolute it contributes no height,
   the panel collapses to its own 6px of padding, and the suggestions show up
   as nothing but a scrollbar sliver. */
.hc-shell .search_result .search_product {
    position: static;
    width: auto;
    border: 0;
    background: none;
    z-index: auto;
}

.hc-shell .search_result .search_product ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-shell .search_result .search_product li {
    border-bottom: 1px solid var(--hc-line);
    border-radius: 10px;
}

/* The partial nests <a> around <li>, and parsers differ on which one ends up
   last inside the <ul> - so drop the trailing rule from either shape. */
.hc-shell .search_result .search_product li:last-child,
.hc-shell .search_result .search_product > ul > *:last-child li {
    border-bottom: 0;
}

.hc-shell .search_result .search_product li:hover {
    background: #eef4fd;
}

/* Account + cart */
.hc-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hc-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 62px;
    padding: 6px 8px;
    border-radius: 12px;
    color: var(--hc-navy);
    font-family: var(--hc-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s ease;
}

.hc-action:hover {
    background: rgba(255, 255, 255, 0.55);
    color: var(--hc-blue);
}

.hc-action__badge {
    position: absolute;
    top: 1px;
    right: 10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hc-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}

/* Mobile-only burger */
.hc-burger {
    display: none;
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--hc-navy);
    cursor: pointer;
    place-items: center;
}

/* Mobile-only search row */
.hc-msearch {
    display: none;
    position: relative;
    padding-bottom: 10px;
}

.hc-msearch form {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    height: 42px;
    padding: 0 6px 0 16px;
    box-shadow: 0 6px 18px rgba(3, 45, 99, 0.1);
}

.hc-msearch input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-family: var(--hc-sans);
    font-size: 14px;
    color: var(--hc-ink);
}

.hc-msearch button {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--hc-blue);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Category nav - icon + label, collapses to label-only on scroll
   -------------------------------------------------------------------------- */
.hc-catnav {
    position: relative;
}

.hc-catnav__list {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hc-catnav__list::-webkit-scrollbar {
    display: none;
}

/* When the rail overflows, fade its trailing edge into the sky so the last
   label reads as "more to scroll" rather than as a clipped word. Toggled by
   the script, and dropped again once the rail is scrolled to the end. */
.hc-catnav__list.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
}

.hc-cat {
    flex: none;
    position: relative;
}

.hc-cat > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 10px;
    border-radius: 14px;
    color: var(--hc-navy);
    font-family: var(--hc-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease,
        padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hc-cat > a:hover {
    background: rgba(255, 255, 255, 0.5);
}

.hc-cat__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    transform-origin: 50% 100%;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease,
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hc-cat__icon img,
.hc-cat__icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* Category thumbnails are photographs, not flat icons - a rounded crop keeps
   the rail tidy instead of leaving ragged product shots floating in the row. */
.hc-cat__icon img {
    border-radius: 9px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.6);
}

.hc-cat__label {
    position: relative;
    display: block;
    padding-bottom: 5px;
}

.hc-cat.is-active > a {
    color: var(--hc-navy-deep);
}

.hc-cat.is-active .hc-cat__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--hc-navy-deep);
    transform: translateX(-50%);
}

/* collapsed state */
.hc-shell.is-compact .hc-cat__icon {
    height: 0;
    opacity: 0;
    transform: scale(0.45) translateY(8px);
    margin-bottom: -6px;
}

.hc-shell.is-compact .hc-cat > a {
    padding-top: 4px;
    padding-bottom: 8px;
}

.hc-shell.is-compact .hc-catnav__list {
    padding-bottom: 2px;
}

/* subcategory dropdown */
.hc-cat__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translate(-50%, -6px);
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(3, 45, 99, 0.19);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 25;
}

.hc-cat:hover > .hc-cat__menu,
.hc-cat:focus-within > .hc-cat__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.hc-cat__menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--hc-ink);
    white-space: nowrap;
}

.hc-cat__menu a:hover {
    background: #eef4fd;
    color: var(--hc-navy);
}

.hc-cat__sub > a {
    font-weight: 600;
}

.hc-cat__child {
    list-style: none;
    margin: 0 0 4px;
    padding: 0 0 0 12px;
}

.hc-cat__child a {
    padding: 5px 12px;
    font-size: 12.5px;
    opacity: 0.85;
}

/* Subcategory flyouts are moved into this host by the script. The rail is a
   horizontal scroller and also carries a mask-image while it can still scroll;
   both of those clip absolutely positioned descendants, so a menu nested in a
   rail item could never hang below the rail. The host lives on <body> rather
   than in the shell because the shell takes a transform on phones, which would
   make it the containing block for anything fixed inside it. */
.hc-catnav__flyouts {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 1200;
}

/* Coordinates come from the script, so the centring translate that the nested
   version used has to go - only the slide-in offset is left. */
.hc-catnav__flyouts .hc-cat__menu {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-6px);
}

.hc-catnav__flyouts .hc-cat__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Hero
   The plate is 1600x630. Holding that aspect ratio makes every percentage
   below map onto the artwork exactly, at any viewport width.
   -------------------------------------------------------------------------- */
.hc-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 630;
    max-height: 760px;
    min-height: 360px;
    overflow: hidden;
    background-color: #cfe1f0;
    isolation: isolate;
}

.hc-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hc-hero__inner {
    display: flex;
    align-items: center;
    height: 100%;
    /* Extra bottom padding lifts the block above the optical centre, matching
       the reference composition (block centre sits at ~38% of the plate). */
    padding-bottom: 11%;
}

.hc-hero__content {
    width: 100%;
    max-width: 27%;
    margin-left: 20.6%;
}

.hc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.62em 1.2em;
    border: 1.5px solid var(--hc-blue);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--hc-navy);
    font-family: var(--hc-sans);
    font-size: clamp(9px, 0.82vw, 14px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.hc-hero__badge svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.hc-hero__title {
    margin: 0.42em 0 0;
    font-family: var(--hc-display);
    font-size: clamp(28px, 4.25vw, 78px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--hc-navy);
}

.hc-hero__script {
    margin: 0.12em 0 0;
    font-family: var(--hc-serif);
    font-style: italic;
    font-size: clamp(20px, 2.88vw, 54px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--hc-navy);
}

.hc-hero__text {
    margin: 0.9em 0 0;
    max-width: 17em;
    font-family: var(--hc-sans);
    font-size: clamp(12px, 1.06vw, 19px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--hc-ink);
}

.hc-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1.5em;
    padding: 0.85em 1.6em;
    border-radius: 0.5em;
    background: var(--hc-blue);
    color: #fff;
    font-family: var(--hc-sans);
    font-size: clamp(12px, 1vw, 18px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(1, 67, 150, 0.28);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.hc-hero__cta:hover {
    background: var(--hc-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(1, 67, 150, 0.34);
}

.hc-hero__cta svg {
    width: 1em;
    height: 1em;
}

/* Scrim only needed once the text sits over artwork (small screens) */
.hc-hero__scrim {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 255, 255, 0.5) 38%,
        rgba(255, 255, 255, 0) 66%
    );
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Very wide - the plate crops vertically, so pull the text in a little */
@media (min-width: 1800px) {
    .hc-hero__content {
        max-width: 30%;
        margin-left: 18%;
    }
}

@media (max-width: 1199px) {
    .hc-deliver__value {
        max-width: 110px;
    }
    .hc-logo img {
        height: 34px;
    }
    .hc-hero__content {
        max-width: 34%;
        margin-left: 17%;
    }
}

/* Tablet - drop the deliver-to chip, search keeps the row */
@media (max-width: 991px) {
    .hc-shell,
    .hc-hero {
        --hc-pad: 18px;
    }
    .hc-deliver,
    .hc-topbar__side--left .hc-phone {
        display: none;
    }
    .hc-hero {
        min-height: 340px;
    }
    .hc-hero__content {
        max-width: 44%;
        margin-left: 8%;
    }
}

/* Mobile - burger + logo + cart on row one, search on row two */
@media (max-width: 767px) {
    .hc-shell,
    .hc-hero {
        --hc-pad: 14px;
    }

    /* Phone plate: the same scene, but reaching further down (it carries the
       whole olive tree rather than the sliver that fits in the desktop strip)
       and extended upward with sky so it stays taller than the header down to
       320px. Painted by width like the desktop one, so the tree keeps its
       proportions and sits at the right edge instead of being blown up. */
    .hc-shell {
        background-image: var(--hc-strip-m, url("../images/top-banner-bg-mobile.webp"));
    }

    /* --- Header --------------------------------------------------------
       One row of logo + delivery location + language, then the search row,
       then the rail - matching the reference app.

       The socials bar, the burger, and the account/cart icons all come out
       here. None of them is lost: this site carries a persistent bottom bar
       (Category / Message / Home / Cart / Account) that already covers the
       burger, cart and account, so repeating them only ate the row that the
       location chip needs. */
    .hc-topbar,
    .hc-burger,
    .hc-actions,
    .hc-search {
        display: none;
    }

    .hc-msearch {
        display: block;
        padding-bottom: 8px;
    }
    .hc-msearch form {
        height: 44px;
        border-radius: 24px;
        padding: 0 8px 0 16px;
    }
    .hc-msearch input {
        font-size: 14px;
    }

    .hc-header__row {
        min-height: 46px;
        gap: 10px;
        padding-top: 6px;
        padding-bottom: 2px;
    }
    .hc-logo img {
        height: 28px;
        max-width: 128px;
    }

    /* The location chip is the point of this row on phones, so it returns
       (the 991px rule above drops it for tablets). */
    .hc-deliver {
        display: block;
    }
    .hc-deliver__label {
        display: none;
    }
    .hc-deliver__value {
        font-size: 13.5px;
        max-width: 40vw;
    }
    /* The chip sits just right of the logo, so hanging the panel off it -
       either edge - pushes it off screen. Drop the chip as the positioning
       context and measure the panel from the header row instead, so it spans
       the row and can't overflow whatever the logo's width turns out to be. */
    .hc-deliver {
        position: static;
    }
    .hc-header__row {
        position: relative;
    }
    .hc-deliver__menu {
        top: calc(100% + 6px);
        left: var(--hc-pad);
        right: var(--hc-pad);
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hc-lang--mobile {
        display: inline-flex;
        margin-left: auto;
        font-size: 13px;
    }

    /* --- Category rail -------------------------------------------------
       Icons stay put here. Collapsing them is desktop behaviour; the
       reference keeps them visible on phones. */
    .hc-catnav__list {
        gap: 0;
        padding-bottom: 6px;
    }
    .hc-cat > a {
        gap: 6px;
        padding: 2px 10px 6px;
        font-size: 12.5px;
    }
    .hc-cat__icon,
    .hc-shell.is-compact .hc-cat__icon {
        width: 32px;
        height: 32px;
        opacity: 1;
        transform: none;
        margin-bottom: 0;
    }
    .hc-cat__icon img,
    .hc-cat__icon svg {
        width: 30px;
        height: 30px;
    }
    .hc-shell.is-compact .hc-cat > a {
        padding-top: 2px;
        padding-bottom: 6px;
    }
    /* Hover dropdowns are unreachable on touch - the drawer covers this */
    .hc-cat__menu {
        display: none;
    }

    /* Stuck state: the logo row slides up out of view so the search and the
       rail stay reachable without a 160px bar eating the screen.
       --hc-shift is measured by the script and already negative. */
    .hc-shell.is-compact {
        transform: translateY(var(--hc-shift, 0px));
    }

    /* --- Hero ---------------------------------------------------------
       Sized by device WIDTH, not viewport height. aspect-ratio keeps the
       banner proportional on every phone, and every type size below is a
       vw value, so the whole composition scales as one piece the way the
       reference does - instead of a 74vh slab whose height swung wildly
       between a short phone and a tall one while the text stayed put. */
    .hc-hero {
        aspect-ratio: 16 / 10;
        height: auto;
        min-height: 0;
        /* Landscape safety net: a width-driven ratio must never push the
           banner past most of a short screen. cover crops instead. */
        max-height: 78vh;
    }
    .hc-hero__media {
        background-size: cover;
        background-position: 72% center;
    }
    /* Light wash under the top-left corner so the copy holds up over sky */
    .hc-hero__scrim {
        display: block;
        background: linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.34) 34%,
            rgba(255, 255, 255, 0) 62%
        );
    }
    .hc-hero__inner {
        align-items: flex-start;
        padding-top: 7%;
        padding-bottom: 0;
    }
    .hc-hero__content {
        max-width: 74%;
        margin-left: 0;
    }
    /* The reference drops the badge and the paragraph at this size and
       keeps title / script / button, which is what fits honestly here. */
    .hc-hero__badge,
    .hc-hero__text {
        display: none;
    }
    .hc-hero__title {
        margin-top: 0;
        font-size: clamp(15px, 5.6vw, 30px);
        line-height: 1.04;
    }
    .hc-hero__script {
        font-size: clamp(12px, 4.3vw, 23px);
    }
    .hc-hero__cta {
        margin-top: 1.1em;
        padding: 0.78em 1.35em;
        font-size: clamp(10px, 3.2vw, 16px);
        box-shadow: 0 6px 16px rgba(1, 67, 150, 0.26);
    }
}

/* Large phones and small tablets: 16/10 is right for a 320-480 handset but
   turns into a wall of sky by 600px, so the banner widens back out as the
   viewport grows and meets the desktop ratio cleanly at 768. */
@media (min-width: 521px) and (max-width: 767px) {
    .hc-hero {
        aspect-ratio: 2.35 / 1;
    }
    .hc-hero__inner {
        padding-top: 5%;
    }
    .hc-hero__content {
        max-width: 58%;
    }
}

/* Narrow phones: drop the action labels so the header row keeps its shape */
@media (max-width: 400px) {
    .hc-action span {
        display: none;
    }
    .hc-action {
        min-width: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-shell *,
    .hc-hero * {
        transition-duration: 0.01ms !important;
    }
}