/* Theme Name: ZeroY Starter
   Author: UBLASH Team
   Description: UBLASH Tender Pink & Cocoa Brown B2B Theme
*/

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text-body);
    background-color: var(--color-background);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-dark-cocoa);
    line-height: 1.2;
    margin-top: 0;
    font-weight: 400;
}

/* Title inside the product media box: same look as a heading, without putting a
   second heading (and a duplicate of the product name) above the <h1>. */
.media-box-title {
    font-family: var(--font-heading);
    color: var(--color-dark-cocoa);
    line-height: 1.2;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 10px;
}

a {
    color: var(--color-dark-cocoa);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-berry-pink);
}

/* ================= Header Navigation ================= */
.site-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 1px 0 rgba(75, 48, 45, 0.03), 0 8px 28px rgba(75, 48, 45, 0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--space-container);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.sub-heading {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-berry-pink);
    margin-bottom: 8px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo .logo-mark {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    letter-spacing: 0.05em;
    color: var(--color-dark-cocoa);
    line-height: 1;
}

.brand-logo .logo-tag {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    background: var(--color-bg-blossom-pink);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1;
}

/* ---------- Top level items ---------- */
.main-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 2px;
    flex-wrap: nowrap;
}

/* The items fill the height of the header row (and the link stays centred
   inside them), so the pointer never crosses dead space on its way from a
   top-level label down into the panel hanging below the header. */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.005em;
    color: var(--color-dark-cocoa);
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* The Contact item is the header's way into the inquiry page, so its label
   carries the brand accent while keeping the row height and hit area of every
   other item. It is written before the hover rule below so the interactive
   states still win on their own. */
.nav-item-contact > .nav-link {
    color: var(--color-berry-pink);
}

.nav-link:hover,
.nav-item:focus-within > .nav-link {
    background: var(--color-bg-cherry-milk);
    color: var(--color-berry-pink);
}

.nav-item.is-open > .nav-link {
    background: var(--color-bg-blossom-pink);
    color: var(--color-raspberry);
}

.caret {
    width: 7px;
    height: 7px;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    margin-top: -3px;
    opacity: 0.65;
    transition: transform 0.24s ease, opacity 0.18s ease;
}

.nav-link:hover .caret {
    opacity: 1;
}

.nav-item:hover .caret,
.nav-item:focus-within .caret,
.nav-item.is-open .caret {
    transform: rotate(225deg);
    margin-top: 2px;
}

/* ---------- Mobile trigger ---------- */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    display: block;
    width: 14px;
    height: 2px;
    background: var(--color-dark-cocoa);
    border-radius: 2px;
    position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bar::before { top: -5px; }
.nav-toggle-bar::after { top: 5px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234B302D' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 28px 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.lang-select:hover, .lang-select:focus {
    border-color: var(--color-berry-pink);
    box-shadow: 0 0 0 2px rgba(200, 92, 122, 0.15);
}

/* ---------- Panels: shared shell ---------- */
.nav-dropdown,
.mega-panel {
    display: none;
    position: absolute;
    background: var(--color-bg-white);
    border: 1px solid rgba(75, 48, 45, 0.07);
    border-radius: 18px;
    box-shadow: 0 22px 56px rgba(75, 48, 45, 0.16), 0 2px 6px rgba(75, 48, 45, 0.04);
    white-space: normal;
    z-index: 40;
    animation: ublashPanelIn 0.2s ease both;
}

@keyframes ublashPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Invisible bridges so the pointer can travel from the top-level link down into
   the panel without the panel closing on the way. Both panel types hang from
   the header container (.header-inner) at top: calc(100% + 12px), and the nav
   items stretch to that container's content box, so the dead strip between the
   two is always the container's 10px bottom padding plus that 12px offset: 22px.
   The bridge covers 24px, which leaves a 2px margin for rounding and still
   stops short of the clickable label. */
.mega-panel::before,
.nav-dropdown-groups::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
}

.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown,
.nav-item.is-open > .nav-dropdown,
.nav-item.has-mega:hover > .mega-panel,
.nav-item.has-mega:focus-within > .mega-panel,
.nav-item.is-open > .mega-panel,
/* is-hover-open is set by the header script: the grouped panels hang from the
   right edge of the header container, so a panel does not always sit directly
   under its own label and the pointer needs a moment to travel sideways into
   it. The class holds the panel open for that moment. */
.nav-item.is-hover-open > .nav-dropdown,
.nav-item.is-hover-open > .mega-panel {
    display: block;
}

/* The grouped panels align to the right edge of the header container, so a
   panel can never run off the viewport no matter which item opens it. */
.nav-item.has-dropdown {
    position: static;
}

.nav-dropdown-groups {
    left: auto;
    right: 0;
    top: calc(100% + 12px);
    padding: 24px;
    display: none;
    gap: 26px;
}

.nav-item.has-dropdown:hover > .nav-dropdown-groups,
.nav-item.has-dropdown:focus-within > .nav-dropdown-groups,
.nav-item.has-dropdown.is-open > .nav-dropdown-groups,
.nav-item.is-hover-open > .nav-dropdown-groups {
    display: flex;
}

.menu-group {
    min-width: 215px;
    max-width: 270px;
}

.menu-group + .menu-group {
    border-left: 1px solid var(--color-border-light);
    padding-left: 30px;
}

/* The packaging dropdown lists one family per cell, so four families read
   sideways in two columns instead of running down the panel as one long list.
   The two tracks are fixed rather than auto-fit: at a narrower width the cells
   shrink and their labels wrap, so the grid never collapses back into the single
   column this was meant to replace. */
.nav-dropdown-groups .menu-group-families {
    min-width: 480px;
    max-width: 660px;
}

/* The Private Label panel leads with the brand-line pages (the page itself, then
   how a partnership runs and what production files cost), whose descriptions
   need a little more room than a plain grouped column gives them; the packaging
   family library fills the rest. */
.nav-dropdown-groups .menu-group-private-label {
    min-width: 250px;
    max-width: 320px;
}

.menu-list.menu-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 6px 26px;
}

/* The right-hand cells carry the same divider the grouped panels use between
   their columns, so the two columns read as two. */
.menu-family-grid > .menu-family:nth-child(even) {
    border-left: 1px solid var(--color-border-light);
    padding-left: 26px;
}

.menu-group-title {
    margin: 0 0 14px;
    padding-bottom: 9px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    border-bottom: 1px solid var(--color-border-light);
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.menu-row a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-row a:hover,
.menu-row a:focus {
    background: var(--color-bg-cherry-milk);
    transform: translateX(3px);
}

.menu-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-bg-blossom-pink);
    color: var(--color-berry-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.menu-row a:hover .menu-row-icon {
    background: var(--color-berry-pink);
    color: #ffffff;
    transform: scale(1.1);
}

.menu-row-content {
    flex: 1;
}

.menu-row-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-dark-cocoa);
}

.menu-row a:hover .menu-row-label {
    color: var(--color-berry-pink);
}

.menu-row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-milk-chocolate);
}

.menu-row-meta {
    display: block;
    margin-top: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-berry-pink);
}

.menu-see-all {
    display: inline-block;
    align-self: flex-start;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2px;
}

.menu-see-all:hover {
    color: var(--color-berry-pink);
    border-bottom-color: var(--color-berry-pink);
}

/* Box types sit under their family: indented to the family label (28px icon
   plus the 12px gap), quieter than the family row itself. */
.menu-sub-list {
    list-style: none;
    margin: 2px 0 8px;
    padding: 0 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.menu-sub-row a {
    display: block;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-milk-chocolate);
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-sub-row a:hover,
.menu-sub-row a:focus {
    background: var(--color-bg-cherry-milk);
    color: var(--color-berry-pink);
}

/* ---------- Mega menu ---------- */
.nav-item.has-mega {
    position: static;
}

.mega-panel {
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    width: 100%;
    padding: 0;
}

.mega-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr 0.95fr;
    gap: 34px;
    padding: 30px 32px 26px;
}

/* About Us carries one group per link column (the company, its audience groups
   and support) beside its promo card, so no column runs short next to a long
   one; the places a brand line is launched and run live in the Private Label
   panel instead, and are not listed in two panels. */
.mega-panel-wide .mega-inner {
    grid-template-columns: 1fr 1fr 1fr 0.9fr;
    gap: 28px;
}

/* The Products panel holds the category cards beside the promo card. */
.mega-inner-products {
    grid-template-columns: minmax(0, 1fr) 360px;
}

/* A category is a card, not a link row: its own icon tile, the name, the
   quantity it starts at and the line its category page opens with. Two columns
   of cards fill the panel, where one plain column ran a short line down a very
   wide space and every row carried the same tray symbol. */
.menu-list.menu-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.menu-card > a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 13px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-card > a:hover,
.menu-card > a:focus {
    background: var(--color-bg-cherry-milk);
    border-color: var(--color-cta-line);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.menu-card-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-bg-blossom-pink);
    color: var(--color-berry-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.menu-card > a:hover .menu-card-tile,
.menu-card > a:focus .menu-card-tile {
    background: var(--color-berry-pink);
    color: #ffffff;
}

.menu-card-body {
    flex: 1;
    min-width: 0;
}

/* Name, then the quantity it starts at, then the line the page opens with: the
   chip takes a line of its own rather than competing with the name for the
   width of the card, so every card in a row reads the same way. */
.menu-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.menu-card > a:hover .menu-row-label,
.menu-card > a:focus .menu-row-label {
    color: var(--color-berry-pink);
}

.menu-card-body .menu-row-desc {
    margin-top: 5px;
}

/* The quantity a category starts at reads as a chip, so the eye finds it in
   every card without reading the line beside it. */
.menu-card-moq {
    flex-shrink: 0;
    padding: 3px 9px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    background: var(--color-bg-cherry-milk);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-berry-pink);
    transition: all 0.2s ease;
}

.menu-card > a:hover .menu-card-moq,
.menu-card > a:focus .menu-card-moq {
    background: var(--color-bg-blossom-pink);
    border-color: var(--color-cta-line);
}

/* The card's own quiet invitation: it is there when the pointer is on the card
   and stays out of the way of the text until it is. */
.menu-card-go {
    align-self: center;
    flex-shrink: 0;
    color: var(--color-soft-taupe);
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s ease;
}

.menu-card > a:hover .menu-card-go,
.menu-card > a:focus .menu-card-go {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-berry-pink);
}

.mega-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mega-col .menu-group-title {
    margin-bottom: 12px;
}

/* A column that carries two groups needs the gap the plain margin does not give
   the second group's title above the list it follows. */
.mega-col .menu-list + .menu-group-title {
    margin-top: 20px;
}

.mega-promo {
    border-left: 1px solid var(--color-border-light);
    padding-left: 34px;
    justify-content: flex-start;
}

.promo-card {
    background: linear-gradient(158deg, var(--color-bg-cherry-milk) 0%, var(--color-bg-blossom-pink) 100%);
    border: 1px solid rgba(200, 92, 122, 0.16);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.promo-card-alt {
    background: linear-gradient(158deg, var(--color-bg-soft-cream) 0%, var(--color-butter-cream) 100%);
    border-color: rgba(75, 48, 45, 0.1);
}

.promo-eyebrow {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
}

.promo-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.28rem;
    line-height: 1.22;
    color: var(--color-dark-cocoa);
}

.promo-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-mocha-brown);
}

.promo-card .btn {
    margin-top: 4px;
}

.promo-link {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(75, 48, 45, 0.28);
}

.promo-link:hover {
    color: var(--color-berry-pink);
    text-decoration-color: currentColor;
}

/* A control that opens the enquiry dialog is a button, because that is what the
   dialog behaviour binds (template-parts/lead-dialog-trigger.php prints it), and
   these rules keep the look it wore as a link or as a chip. */
button.btn,
button.promo-link {
    font-family: inherit;
    line-height: inherit;
}

button.promo-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Without scripting no dialog can open, so the controls that need one step aside
   and the <noscript> link beside each of them is the way through. */
@media (scripting: none) {
    [data-dialog-open] {
        display: none;
    }
}

/* The Products panel's own promo card: its heading row opens with a symbol
   beside the eyebrow, so the card starts with more than a line of small caps.
   The Solutions panel's card (promo-card-alt) keeps the plain eyebrow. */
.promo-card-products {
    height: 100%;
}

.promo-card-products .promo-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The card fills its column and keeps its action at the foot of it, so the
   right side of the panel ends level with the cards instead of stopping early
   and leaving a bare strip of white under it. */
.promo-card-products .btn {
    margin-top: auto;
}

.promo-tile {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(200, 92, 122, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-berry-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    padding: 14px 32px;
    background: var(--color-bg-soft-cream);
    border-top: 1px solid var(--color-border-light);
    border-radius: 0 0 17px 17px;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--color-milk-chocolate);
}

/* Each claim in the foot carries its own symbol — what an order starts at, what
   comes free and how fast the first reply is — instead of three identical dots
   that said nothing about the words next to them. */
.mega-foot-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mega-foot-icon {
    flex-shrink: 0;
    color: var(--color-berry-pink);
}

.mega-foot a {
    margin-left: auto;
    color: var(--color-berry-pink);
    font-weight: 700;
}

.mega-foot a:hover {
    color: var(--color-raspberry);
}

/* ---------- Mobile navigation ---------- */
@media (max-width: 1240px) {
    .nav-toggle {
        display: inline-flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 20px 24px;
        background: var(--color-bg-white);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 22px 56px rgba(75, 48, 45, 0.16);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .main-nav.is-open {
        display: flex;
    }

    /* Panels are static here, so the item stacks the link above its panel again
       instead of laying the two out side by side. */
    .nav-item {
        display: block;
        border-bottom: 1px solid var(--color-border-light);
    }

    .nav-link {
        justify-content: space-between;
        width: 100%;
        padding: 15px 4px;
        border-radius: 0;
        font-size: 0.95rem;
    }

    .nav-link:hover,
    .nav-item.is-open > .nav-link {
        background: transparent;
        color: var(--color-berry-pink);
    }

    .nav-item.has-mega {
        position: relative;
    }

    .nav-dropdown,
    .mega-panel {
        position: static;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        animation: none;
    }

    .mega-panel::before,
    .nav-dropdown-groups::before {
        display: none;
    }

    .nav-item.is-open > .nav-dropdown,
    .nav-item.is-open > .nav-dropdown-groups,
    .nav-item.is-open > .mega-panel {
        display: block;
    }

    .nav-dropdown-groups {
        flex-direction: column;
        gap: 20px;
        padding: 2px 0 20px;
    }

    .menu-group {
        min-width: 0;
        max-width: none;
    }

    .menu-group + .menu-group {
        border-left: none;
        padding-left: 0;
    }

    /* Collapsed nav: the family grid keeps its two columns and its max-width,
       and drops the desktop minimum so it fits the panel width. */
    .nav-dropdown-groups .menu-group-families {
        min-width: 0;
    }

    .menu-row a {
        padding: 11px 13px;
        background: var(--color-bg-cherry-milk);
    }

    .menu-row-desc {
        -webkit-line-clamp: 3;
    }

    .mega-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 14px 0 20px;
    }

    /* The wide panel's own column rule is the more specific one, so the
       collapsed nav needs to say so too, or its columns stay side by side. */
    .mega-panel-wide .mega-inner {
        grid-template-columns: 1fr;
    }

    /* One column of category cards in the collapsed drawer. */
    .mega-inner-products .menu-list.menu-cat-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .mega-promo {
        border-left: none;
        padding-left: 0;
    }

    .mega-foot {
        padding: 16px 0;
        background: transparent;
        border-top: 1px solid var(--color-border-light);
        border-radius: 0;
        margin-bottom: 16px;
    }

    .mega-foot a {
        margin-left: 0;
    }
}

/* The family grid keeps both columns down to phone widths, so the cells give up
   padding rather than dropping a column: labels and box names wrap instead. */
@media (max-width: 640px) {
    .menu-list.menu-family-grid {
        gap: 6px 16px;
    }

    .menu-family-grid > .menu-family:nth-child(even) {
        padding-left: 16px;
    }

    .menu-family-grid .menu-row a {
        gap: 9px;
        padding: 9px 8px;
    }

    .menu-family-grid .menu-sub-list {
        padding-left: 18px;
    }

    .menu-family-grid .menu-sub-row a {
        padding: 5px 6px;
    }

    /* Phone widths: the card gives up padding and its arrow rather than any of
       the text it holds. */
    .menu-card > a {
        gap: 10px;
        padding: 12px;
    }

    .menu-card-go {
        display: none;
    }
}

/* ================= Icons & Playful Touches ================= */
.ub-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.btn-icon {
    margin-right: 7px;
}
.sub-icon {
    margin-right: 6px;
    vertical-align: -2px;
}
.tag-icon {
    margin-right: 5px;
    vertical-align: -2px;
}

/* --- WhatsApp call-to-action chip ---------------------------------------
   Sits under the inquiry submit button on the contact, sample and quote
   forms. Deep berry gradient marks the fast channel as the highlighted
   action while staying inside the pink and cocoa palette. */
.wa-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    text-align: center;
    background: var(--color-cta-tint);
    border: 1px solid var(--color-cta-line);
    border-radius: var(--radius-pill);
}
.wa-cta-chip .wa-cta-prompt {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-cta-ink);
}
.wa-cta-chip--sm {
    padding: 10px 14px;
    gap: 6px;
}
.wa-cta-chip--sm .wa-cta-prompt {
    font-size: 0.82rem;
}
.wa-cta-chip--center {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Response-time promise shown under a submit button, so the reply window
   reads as a commitment rather than small print. */
.reply-promise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    margin: 14px auto 0;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 1px solid var(--color-cta-line);
    box-shadow: 0 3px 12px rgba(178, 69, 100, 0.12);
    color: var(--color-dark-cocoa);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.reply-promise strong {
    color: var(--color-cta-ink);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.reply-promise .ub-icon {
    color: var(--color-cta-ink);
}
.wa-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    border: none;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 3px 12px var(--color-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--color-cta-shadow);
}
.wa-cta-button--lg {
    padding: 12px 26px;
    font-size: 0.94rem;
}

/* Pointing-hand hint placed just before a call-to-action button.
   The base glyph points up, so it is rotated to point right, at the button. */
.wa-point-hint {
    color: var(--color-cta-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: wa-point-nudge 1.6s ease-in-out infinite;
}
.wa-point-hint .ub-icon {
    transform: rotate(90deg);
}
@keyframes wa-point-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-point-hint { animation: none; }
}
.stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ffffff 0%, var(--color-bg-cherry-milk) 100%);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-berry-pink);
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(200, 92, 122, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-card:hover .stat-icon-wrap {
    transform: translateY(-4px) scale(1.12) rotate(6deg);
    background: linear-gradient(135deg, var(--color-bg-blossom-pink) 0%, #FFF0F5 100%);
    color: var(--color-raspberry);
    box-shadow: 0 8px 20px rgba(169, 63, 99, 0.22);
}

/* Playful badge hover animations */
.hero-badge {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(75, 48, 45, 0.08);
}
.badge-dot {
    animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.75; }
}

/* Micro-interactions for buttons - Aligned with lashmanufacturers.com signature berry rose */
.btn:hover .btn-icon {
    transform: scale(1.18);
}
.btn-primary {
    background: linear-gradient(135deg, #C25975 0%, #A83857 100%);
    box-shadow: 0 4px 14px rgba(194, 89, 117, 0.25);
    color: #ffffff !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #B54A67 0%, #942E4B 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(194, 89, 117, 0.35);
}

.btn-nav-sample {
    padding: 10px 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #B24564 0%, #942E4B 100%) !important;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px rgba(178, 69, 100, 0.3) !important;
}
.btn-nav-sample:hover {
    background: linear-gradient(135deg, #9C3853 0%, #7E243D 100%) !important;
    box-shadow: 0 6px 18px rgba(178, 69, 100, 0.4) !important;
}

/* The header's Get Samples control: its wrapper keeps the control on the header
   row exactly where the link sat, and holds the sample dialog the control opens. */
.header-sample-root {
    display: flex;
    align-items: center;
}

/* Vivid Accents & Card Tweaks */
.gateway-card {
    position: relative;
    overflow: hidden;
}
.gateway-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-berry-pink), var(--color-butter-cream), var(--color-lilac-milk));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gateway-card:hover::after {
    opacity: 1;
}

.product-item-card {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.product-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(200, 92, 122, 0.12);
    border-color: var(--color-border);
}

.step-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-top: 3px solid transparent;
}
.steps-flow .step-card:nth-child(1) { border-top-color: var(--color-berry-pink); }
.steps-flow .step-card:nth-child(2) { border-top-color: var(--color-soft-coral); }
.steps-flow .step-card:nth-child(3) { border-top-color: var(--color-butter-cream); }
.steps-flow .step-card:nth-child(4) { border-top-color: var(--color-sage-milk); }
.steps-flow .step-card:nth-child(5) { border-top-color: var(--color-lilac-milk); }

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(75, 48, 45, 0.1);
}
.step-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ================= Buttons ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.btn-primary {
    background: var(--color-dark-cocoa);
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--color-berry-pink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 92, 122, 0.3);
}

.btn-sm {
    padding: 9px 18px;
    font-size: 0.85rem;
}

.btn-secondary {
    background: var(--color-bg-white);
    color: var(--color-dark-cocoa);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-berry-pink);
    color: var(--color-berry-pink);
}

/* ================= Shared Cards & Layout ================= */
.ublash-page {
    max-width: var(--space-container);
    margin: 50px auto 90px;
    padding: 0 24px;
}

.ublash-container {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-soft);
}

.page-intro {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-intro h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin: 0;
    color: var(--color-dark-cocoa);
}

.planning-badge {
    background: var(--color-butter-cream);
    color: var(--color-dark-cocoa);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
}

.page-summary p {
    font-size: 1.15rem;
    color: var(--color-mocha-brown);
    line-height: 1.7;
    margin: 0;
}

/* ================= Footer ================= */
.site-footer {
    background: #2E1B19; /* Deep cocoa luxury base */
    color: #D9C3BD;
    padding: 70px 24px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: var(--space-container);
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand .brand-logo .logo-mark {
    color: #FFFFFF;
}

.footer-brand .brand-logo .logo-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #FFD9E5;
}

.brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 18px 0;
    color: #BA9F97;
    max-width: 320px;
}

.footer-contact-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pill-tag {
    font-size: 0.8rem;
    color: #FFD9E5;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    display: inline-block;
    width: fit-content;
}

.column-title {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: #BA9F97;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #FFD9E5;
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #8C6A63;
    flex-wrap: wrap;
    gap: 16px;
}

.legal-nav a {
    color: #8C6A63;
}

.legal-nav a:hover {
    color: #FFD9E5;
}

.sep {
    margin: 0 8px;
}

/* ================= Category fact bar ================= */
.cat-fact-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 auto 34px;
    max-width: 900px;
}

.cat-fact {
    flex: 1 1 200px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-soft);
}

.cat-fact-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-milk-chocolate);
    margin-bottom: 5px;
}

.cat-fact-value {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    line-height: 1.45;
}

.cat-fact-docs {
    flex: 1 1 100%;
    background: var(--color-bg-soft-cream);
}
.archive-products-page {
    max-width: var(--space-container);
    margin: 40px auto 80px;
    padding: 0 24px;
}
.archive-header-banner {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.archive-header-banner h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    margin-bottom: 14px;
}
.archive-header-banner p {
    color: var(--color-milk-chocolate);
    font-size: 1.1rem;
    line-height: 1.6;
}
.category-nav-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.cat-pill {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    transition: all 0.2s ease;
}
.cat-pill:hover,
.cat-pill.active {
    background: var(--color-dark-cocoa);
    color: #ffffff;
    border-color: var(--color-dark-cocoa);
}
.archive-products-page .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 960px) {
    .archive-products-page .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .archive-products-page .products-grid {
        grid-template-columns: 1fr;
    }
}
/* ============ Category page: lash-style directory column ============ */
/* The directory sits beside the grid on a category that holds styles; a
   category whose products carry no style keeps the grid at full width. The
   grid drops to two columns beside the column, and the site's own breakpoints
   below 960px take over again. */
.cat-layout {
    position: relative;
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (min-width: 961px) {
    .cat-layout .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 960px) {
    .cat-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.cat-directory {
    padding: 20px 18px 14px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
@media (min-width: 961px) {
    .cat-directory {
        position: sticky;
        top: 96px;
        /* A long directory scrolls inside the column instead of growing past the
           viewport, where the entries at its end could not be reached. */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}
.cat-directory-title {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-dark-cocoa);
}
.cat-directory-note {
    margin: 0 0 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-milk-chocolate);
}
.cat-directory-list,
.cat-directory-products {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cat-directory-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-dark-cocoa);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.cat-directory-link:hover,
.cat-directory-link:focus-visible {
    background: var(--color-bg-cherry-milk);
    color: var(--color-berry-pink);
}
.cat-directory-link[aria-current="true"] {
    background: var(--color-dark-cocoa);
    color: #ffffff;
}
.cat-directory-count {
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-milk-chocolate);
}
.cat-directory-link[aria-current="true"] .cat-directory-count {
    color: var(--color-bg-tender-pink);
}
.cat-directory-products {
    margin: 2px 0 10px 14px;
    padding-left: 12px;
    border-left: 1px solid var(--color-border-light);
}
.cat-directory-products a {
    display: block;
    padding: 4px 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-mocha-brown);
    text-decoration: none;
}
.cat-directory-products a:hover,
.cat-directory-products a:focus-visible {
    color: var(--color-berry-pink);
}
.cat-style-note {
    margin: 0 0 18px;
    padding: 10px 18px;
    background: var(--color-bg-soft-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--color-mocha-brown);
}
.cat-style-note a,
.cat-style-reset {
    font-weight: 700;
}
/* The filter's state control: the directory's own links are the visible control,
   so the select the behaviour reads is kept out of sight and out of the tab
   order. It stays in the document, which is where the behaviour finds it, and it
   is taken out of the flow, because as a grid child of .cat-layout it would take
   a column and push the directory and the grid out of place. */
.cat-directory-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.cat-style-reset {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ublash-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 8px;
}
.ublash-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-white);
    color: var(--color-dark-cocoa);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ublash-pagination a.page-numbers:hover,
.ublash-pagination a.page-numbers:focus-visible {
    background: var(--color-bg-tender-pink);
    border-color: var(--color-berry-pink);
    color: var(--color-berry-pink);
}
.ublash-pagination .page-numbers.current {
    background: var(--color-dark-cocoa);
    border-color: var(--color-dark-cocoa);
    color: #ffffff;
}
.ublash-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    min-width: 20px;
}
@media (max-width: 640px) {
    .ublash-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}
/* Product card image slot: every listing card reserves a square (1:1) media area
   at its top, because the product photography is shot square - a tray photo is
   about as wide as it is tall - and the wider 4:3 slot this used to reserve cut
   the top and bottom off every one of them. The product's own main photo fills
   it; otherwise a soft branded placeholder holds the space so the grid keeps its
   rhythm and rows stay aligned before images are uploaded. */
.archive-products-page .product-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 18px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-cherry-milk) 0%, #FFF5F8 100%);
}
.archive-products-page .product-card-media-link {
    display: block;
    width: 100%;
    height: 100%;
}
.archive-products-page .product-card-image,
.archive-products-page .product-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.archive-products-page .product-card-media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-berry-pink);
    opacity: 0.35;
}
/* Hover zoom: the picture grows from the point the pointer is on - that point
   stays under the cursor - and it is a hard cut, so there is no transition. The
   element carrying data-hover-zoom is always the picture itself, inside a
   container that clips (the product frame, the card media box, the packaging
   figure or the homepage tile), so the enlarged picture can never spill into the
   layout beside it. assets/js/image-zoom.js does nothing but write the pointer's
   position into --zoom-x / --zoom-y; the factor and the effect live here, and
   :hover alone still scales from the centre when JavaScript does not run. */
[data-hover-zoom] {
    --zoom-x: 50%;
    --zoom-y: 50%;
    transform-origin: var(--zoom-x) var(--zoom-y);
}
[data-hover-zoom]:hover {
    transform: scale(1.15);
}

/* The packaging picture is the one main photo whose column does not clip, so it
   gets a clipping figure here: the picture keeps its own border and radius, and
   the figure holds the grown picture inside the column. */
.packaging-media-photo {
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* The hover zoom is decoration, so it is dropped for visitors who ask for less
   motion: every marked picture stays at its resting size. */
@media (prefers-reduced-motion: reduce) {
    [data-hover-zoom]:hover {
        transform: none;
    }
}
.archive-products-page .product-item-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}
.archive-products-page .product-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.archive-products-page .product-sku {
    color: var(--color-milk-chocolate);
}
.archive-products-page .product-moq {
    color: var(--color-berry-pink);
    background: var(--color-bg-blossom-pink);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.archive-products-page .product-title {
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--color-dark-cocoa);
}
.archive-products-page .product-highlight {
    font-size: 0.9rem;
    color: var(--color-milk-chocolate);
    margin-bottom: 20px;
    line-height: 1.5;
}
.archive-products-page .product-specs {
    border-top: 1px dashed var(--color-border-light);
    padding-top: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
}
.archive-products-page .spec-row {
    display: flex;
    justify-content: space-between;
}
.archive-products-page .spec-name {
    color: var(--color-milk-chocolate);
}
.archive-products-page .spec-val {
    color: var(--color-dark-cocoa);
    font-weight: 500;
    text-align: right;
}
.archive-products-page .price-highlight {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f9ebf0;
}
.archive-products-page .price-val {
    font-weight: 700;
    color: var(--color-berry-pink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
}
.product-footer {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.product-footer .btn {
    flex: 1 1 0;
}

/* ---------- Header WhatsApp Button ---------- */
.header-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 2px 8px var(--color-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header-wa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--color-cta-shadow);
}
/* ---------- Header: keep the whole bar inside the viewport ---------- */
/* Below the width where the full nav still fits, the WhatsApp button keeps its
   icon and drops the label (the link still carries an aria-label and a title),
   so the action cluster stops widening the page. */
@media (max-width: 1240px) {
    .header-wa-text {
        display: none;
    }
    .header-wa-btn {
        padding: 7px 10px;
    }
}

/* Narrow tablets and phones: the action cluster moves onto its own line under
   the logo, which keeps every control visible without a sideways scrollbar. */
@media (max-width: 700px) {
    .header-inner {
        flex-wrap: wrap;
        padding: 10px 16px;
        row-gap: 8px;
    }

    .header-actions {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .lang-select {
        padding: 7px 24px 7px 10px;
        font-size: 0.76rem;
    }
}

/* Very small phones: the WhatsApp icon leaves the bar (the number stays in the
   footer and on the contact page) and the logo keeps its mark only, so the bar
   stays two tidy lines instead of three. */
@media (max-width: 360px) {
    .header-wa-btn {
        display: none;
    }

    .brand-logo .logo-tag {
        display: none;
    }
}

/* ---------- Footer Contact Interactive Buttons ---------- */
.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}
.footer-contact-btn--wa {
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-contact-btn--wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}
.footer-contact-btn--mail {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-dark-cocoa) !important;
    border: 1px solid var(--color-border);
}
.footer-contact-btn--mail:hover {
    background: #ffffff;
    color: var(--color-berry-pink) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Contact Page Email Action Button ---------- */
.email-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-dark-cocoa) !important;
    background: var(--color-bg-cherry-milk);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}
.email-cta-button:hover {
    background: #ffffff;
    color: var(--color-berry-pink) !important;
    border-color: var(--color-berry-pink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 92, 122, 0.15);
}

/* ---------- Contact page: named sales managers ---------- */
.contact-managers {
    margin: 0 0 44px;
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-border-light);
}
.contact-managers-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-berry-pink);
    margin-bottom: 10px;
}
/* Centred and stacked, like the client-feedback header below: eyebrow, title,
   then the intro paragraph, all inside one narrow centred column. */
.contact-managers-top {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}
.contact-managers-title {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.25;
    color: var(--color-dark-cocoa);
    margin: 0 0 14px;
    text-wrap: balance;
}
.contact-managers-lead {
    font-size: 0.95rem;
    line-height: 1.68;
    color: var(--color-mocha-brown);
    margin: 0 auto;
    max-width: 660px;
}
.managers-grid {
    display: grid;
    /* min(320px, 100%) keeps the single card inside the container's own padding on
       a narrow phone instead of overflowing it. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 26px;
}
.manager-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 26px;
    box-shadow: var(--shadow-soft);
}
/* The portrait plate holds the manager's photo; until that file exists it shows
   the initials on the brand's own pink wash. It fills the card up to 200px, so a
   phone gets a full-width square and a desktop card a generous, even portrait. */
.manager-photo {
    width: 100%;
    max-width: 200px;
    /* Square, whatever the source photo's proportions. */
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(200, 92, 122, 0.2);
    border-radius: 28px;
    background: linear-gradient(158deg, var(--color-bg-cherry-milk) 0%, var(--color-bg-blossom-pink) 100%);
}
.manager-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.manager-photo-initials {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-berry-pink);
}
.manager-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.manager-name {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--color-dark-cocoa);
}
.manager-name-role {
    display: block;
    margin-top: 5px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-berry-pink);
}
.manager-bio {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-mocha-brown);
}
.manager-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.manager-facts li {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    background: var(--color-bg-soft-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
}
/* Both cards keep their action at the foot, so the pair lines up whatever the
   bios weigh. */
.manager-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
}
.manager-actions .wa-cta-button,
.manager-actions .email-cta-button {
    width: 100%;
    justify-content: center;
}

/* ---------- Contact page: client feedback (06) ---------- */
/* Moved from the homepage: the band now sits inside this page's white card,
   so it carries its own rounded frame and side padding. Every inner size,
   grid and hover below is the homepage's own. */
.testimonials-section {
    background: var(--color-bg-tender-pink);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin: 0 0 44px;
}
.testimonials-section .section-container {
    max-width: none;
    margin: 0 auto;
    padding: 40px 28px;
}
.testimonials-section .section-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}
.testimonials-section .section-header.text-center {
    text-align: center;
    justify-content: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.testimonials-section .section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0;
}
.testimonials-section .section-header p {
    color: var(--color-milk-chocolate);
    margin: 10px 0 0;
}
.testimonials-section .sub-icon,
.testimonials-section .fact-icon {
    vertical-align: -2px;
    flex: 0 0 auto;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 34px;
}
@media (max-width: 1100px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.testimonial-card {
    /* A screenshot is a phone-shaped picture, so the frame follows the picture
       instead of cropping it: nothing of a client's message is hidden. */
    display: block;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-bg-blossom-pink);
    box-shadow: 0 16px 34px rgba(75, 48, 45, 0.12);
}
.testimonial-card:focus-visible {
    outline: 2px solid var(--color-berry-pink);
    outline-offset: 2px;
}
.testimonial-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-md) - 6px);
}
.testimonial-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 0.84rem;
    color: var(--color-milk-chocolate);
}
@media (prefers-reduced-motion: reduce) {
    .testimonial-card { transition: none; }
    .testimonial-card:hover { transform: none; }
}

/* A screenshot is a link to its own full-size file, so assets/js/photo-viewer.js
   enlarges it in footer.php's site-wide .photo-viewer dialog the way every other
   picture on the site already works, and the click still opens the file without
   JavaScript. */

/* ---------- Global Floating Quick Action Dock ---------- */
.ublash-float-dock {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}
.ublash-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.ublash-float-btn--wa {
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.ublash-float-btn--wa:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px var(--color-cta-shadow);
}
.ublash-float-btn--mail {
    background: #ffffff;
    color: var(--color-dark-cocoa) !important;
    border: 1px solid var(--color-border);
}
.ublash-float-btn--mail:hover {
    transform: translateY(-3px) scale(1.03);
    color: var(--color-berry-pink) !important;
    border-color: var(--color-berry-pink);
    box-shadow: 0 8px 24px rgba(200, 92, 122, 0.2);
}
@media (max-width: 640px) {
    .ublash-float-dock {
        right: 14px;
        bottom: 16px;
        gap: 8px;
    }
    .ublash-float-label {
        display: none;
    }
    .ublash-float-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}


/* Product page FAQ, rendered from the product_faq repeater. */
.product-faq-section {
    margin-top: 50px;
}

.product-faq-section > h2 {
    margin: 4px 0 18px;
}

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

.product-faq-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.product-faq-item > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-dark-cocoa);
    list-style: none;
}

.product-faq-item > summary::-webkit-details-marker {
    display: none;
}

.product-faq-item > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: var(--color-raspberry);
}

.product-faq-item[open] > summary::after {
    content: "\2013";
}

.product-faq-item > p {
    margin: 12px 0 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--color-dark-cocoa);
}

/* Product page heading outline: the page used to run H1 straight to H3, so the
   section headings are <h2> now. These keep the sizes they had before. */
.single-product-page h2 {
    font-size: 1.17em;
}

.sample-policy-box h3 {
    font-size: 1rem;
}

/* ---------------------------------------------------------------
   The site-wide picture viewer (assets/js/photo-viewer.js).
   A picture the templates mark zoomable is printed as a link to its own full
   size file, so it enlarges even without JavaScript; the link takes the
   picture's place without moving it, and the dialog footer.php prints is the
   stage the script opens. A content picture that is not a link of its own is
   made a control by that script and carries .photo-zoomable.
   --------------------------------------------------------------- */
.photo-zoom,
.photo-zoomable {
    cursor: zoom-in;
}
.photo-zoom {
    display: block;
    max-width: 100%;
}
.photo-zoom:focus-visible,
.photo-zoomable:focus-visible {
    outline: 2px solid var(--color-berry-pink);
    outline-offset: 3px;
}
/* The three slots whose picture fills a box: the link takes the box's own size,
   so the picture keeps covering it the way it did before it was wrapped. */
.story-media > .photo-zoom,
.pack-option-media > .photo-zoom,
.product-steps-media > .photo-zoom {
    width: 100%;
    height: 100%;
}
.photo-viewer {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(94vw, 1100px);
    max-height: 94vh;
}
.photo-viewer::backdrop {
    background: rgba(46, 27, 25, 0.72);
    backdrop-filter: blur(8px);
}
.photo-viewer-img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
}
.photo-viewer-caption {
    margin: 12px 0 0;
    color: #FFFFFF;
    font-size: 0.95rem;
    text-align: center;
}
.photo-viewer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    color: var(--color-milk-chocolate);
    font-size: 0;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}
.photo-viewer-close::before {
    content: "\00d7";
    font-size: 24px;
    line-height: 1;
}
.photo-viewer-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.photo-viewer-btn {
    font: inherit;
    font-size: 0.9rem;
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    color: var(--color-milk-chocolate);
    cursor: pointer;
}
.photo-viewer-btn:hover {
    border-color: var(--color-berry-pink);
    color: var(--color-berry-pink);
}

/* ================= Foil & finish swatches (private label page) ================= */
/*
 * The four foil and finish swatches on the private label page. A flat fill
 * reads as paint, so each one is drawn as metal instead: a lit edge and a
 * shadowed edge across the circle, a specular highlight where the light lands,
 * a thin rim, and a tinted shadow underneath. Champagne gold and rose gold are
 * foil — bright band, darker band, bright band; holographic is a prism, so it
 * is a full hue sweep rather than a two-colour blend; matte black keeps only
 * the small glossy sheen its spot UV highlights would catch.
 */
.foil-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 1px solid rgba(75, 48, 45, 0.14);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(0, 0, 0, 0.28),
        0 2px 7px var(--foil-glow, rgba(75, 48, 45, 0.2));
}

.foil-swatch--gold {
    --foil-glow: rgba(168, 127, 27, 0.42);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, #A87F1B 0%, #F7E7A6 18%, #E3C86A 34%, #A87F1B 52%, #EFD98F 68%, #FFF7D6 82%, #C9A227 100%);
}

.foil-swatch--rose {
    --foil-glow: rgba(169, 95, 91, 0.42);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, #9E5C58 0%, #F7D9CD 18%, #D89A8C 34%, #A95F5B 52%, #EDB9A8 68%, #FBE9DF 82%, #B76E79 100%);
}

.foil-swatch--holo {
    --foil-glow: rgba(119, 190, 214, 0.45);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 38%),
        conic-gradient(from 210deg, #FFB3C7, #FFE08A, #8EF0D0, #7CC7FF, #B79CFF, #FF9AD5, #FFB3C7);
}

/* Matte is the one finish that does not mirror the light, so its highlight is
   dimmer and its rim softer; the pair of small specular spots is the spot UV. */
.foil-swatch--matte {
    background:
        radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 70% 74%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 20%),
        linear-gradient(135deg, #4A4A4A 0%, #232323 38%, #101010 62%, #2B2B2B 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5),
        0 2px 7px rgba(28, 28, 28, 0.42);
}

/* ------------------------------------------------------------------
   About page - key metrics strip
   Six metrics, so the grid divides evenly: one column on phones,
   2 x 3 on tablets and 3 x 2 on desktop. (The old single rule used
   a 220px auto-fit track, which put four cards on the first row and
   left two empty slots beside the last two.)
   ------------------------------------------------------------------ */
.ublash-metrics-panel {
    margin-bottom: 48px;
    padding: 32px 30px;
    background: var(--color-bg-tender-pink);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ublash-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
}

.ublash-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: var(--radius-sm);
    padding: 26px 22px 24px;
    box-shadow: var(--shadow-soft);
}

.ublash-metric-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1.05;
    color: var(--color-dark-cocoa);
    text-wrap: balance;
}

.ublash-metric-label {
    margin-top: 8px;
    max-width: 22ch;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-berry-pink);
    text-wrap: balance;
}

.ublash-metric-text {
    margin: 9px 0 0;
    max-width: 34ch;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--color-mocha-brown);
}

@media (min-width: 620px) {
    .ublash-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .ublash-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .ublash-metrics-panel {
        padding: 36px 34px;
    }
}

@media (max-width: 480px) {
    .ublash-metrics-panel {
        padding: 22px 18px;
    }

    .ublash-metric {
        padding: 22px 18px 20px;
    }
}

/* ------------------------------------------------------------------
   Header search
   A 38px icon button in the header actions opens the search bar that
   sits under the header row (bundled disclosure behaviour, so the
   panel is hidden until its trigger is pressed).
   ------------------------------------------------------------------ */
.header-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-dark-cocoa);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.header-search-btn:hover,
.header-search-btn[aria-expanded="true"] {
    color: var(--color-berry-pink);
    border-color: var(--color-berry-pink);
}

.header-search-btn:focus-visible {
    outline: 2px solid var(--color-berry-pink);
    outline-offset: 2px;
}

.header-search-panel {
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border-light);
}

.header-search-form {
    max-width: var(--space-container);
    margin: 0 auto;
    padding: 14px 20px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 18px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-dark-cocoa);
    background: var(--color-bg-soft-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.header-search-input::placeholder {
    color: var(--color-mocha-brown);
    opacity: 0.7;
}

.header-search-input:focus {
    outline: none;
    border-color: var(--color-berry-pink);
    box-shadow: 0 0 0 3px rgba(75, 48, 45, 0.08);
}

.header-search-submit {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .header-search-form {
        flex-wrap: wrap;
        padding: 12px 16px 14px;
    }

    .header-search-input {
        flex: 1 1 100%;
    }

    .header-search-submit {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------
   Search results (search.php)
   Compact rows: thumbnail, kind, linked title, short summary. Replaces
   index.php's default output, which printed each match's whole body
   under a bare heading.
   ------------------------------------------------------------------ */
.search-page {
    max-width: var(--space-container);
    margin: 0 auto;
    padding: 40px 20px 64px;
}

.search-head {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 22px;
    margin-bottom: 26px;
}

.search-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    margin: 0 0 8px;
}

.search-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.25;
    color: var(--color-dark-cocoa);
    margin: 0 0 6px;
    text-wrap: balance;
}

.search-total {
    font-family: var(--font-body);
    font-size: 0.94rem;
    color: var(--color-mocha-brown);
    margin: 0 0 18px;
}

.search-again {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-again-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.search-again-input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 11px 18px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-dark-cocoa);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.search-again-input:focus {
    outline: none;
    border-color: var(--color-berry-pink);
}

.search-list {
    display: grid;
    gap: 16px;
}

.search-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.search-item-media {
    position: relative;
    flex: 0 0 132px;
    width: 132px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-cherry-milk) 0%, #FFF5F8 100%);
}

.search-item-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.search-item-media .pack-card-media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-berry-pink);
    opacity: 0.35;
}

.search-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.search-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.search-item-kind {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    background: var(--color-bg-tender-pink);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
}

.search-item-terms {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-milk-chocolate);
}

.search-item-terms a {
    color: inherit;
    text-decoration: none;
}

.search-item-terms a:hover {
    color: var(--color-berry-pink);
}

.search-item-title {
    font-family: var(--font-heading);
    font-size: 1.16rem;
    line-height: 1.35;
    margin: 0 0 6px;
}

.search-item-title a {
    color: var(--color-dark-cocoa);
    text-decoration: none;
}

.search-item-title a:hover {
    color: var(--color-berry-pink);
}

.search-item-summary {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-mocha-brown);
    margin: 0 0 10px;
}

.search-item-cta {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-berry-pink);
    text-decoration: none;
}

.search-item-cta:hover {
    text-decoration: underline;
}

.search-empty {
    background: var(--color-bg-soft-cream);
    border-radius: var(--radius-md);
    padding: 34px 26px;
    text-align: center;
}

.search-empty-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-dark-cocoa);
    margin: 0 0 8px;
}

.search-empty-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-mocha-brown);
    margin: 0 0 18px;
}

.search-empty-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 620px) {
    .search-page {
        padding: 26px 16px 48px;
    }

    .search-item {
        flex-direction: column;
        gap: 14px;
    }

    .search-item-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 180px;
    }

    .search-again-input,
    .search-again .btn {
        flex: 1 1 100%;
    }
}