/* Editorial pages reuse the Centre palette, type and spacing. */
/* .ehb-editorial { background: var(--ehb-surface-paper); } */
.ehb-editorial-hero {
    padding: 64px var(--ehb-gutter);
    background: var(--ehb-surface-blush);
}

.ehb-editorial-hero__inner {
    width: 100%;
    max-width: var(--ehb-content-width);
    margin-inline: auto;
}

/* same 1200px container as the breadcrumb bar */
.error404 .ehb-editorial-hero__inner {
    max-width: 1000px;
}

.ehb-editorial-hero h1 {
    max-width: 850px;
    margin: 14px 0 20px;
    font: 700 clamp(30px, 4vw, 48px)/1.15 var(--ehb-font-display);
    letter-spacing: -.025em;
}

.ehb-editorial-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ehb-brand-rose-plum);
}

.ehb-editorial-date {
    font-size: 13px;
    color: var(--ehb-text-muted);
}

.ehb-editorial-lead {
    max-width: 740px;
    font-size: 19px;
    line-height: 1.6;
}

.ehb-editorial-body {
    max-width: 808px;
    padding: 56px 24px;
    margin-inline: auto;
}

.ehb-editorial-body .entry-content {
    font-size: 17px;
    line-height: 1.75;
}

.ehb-editorial-body h2 {
    margin-top: 36px;
    font-size: 28px;
    line-height: 1.25;
}

.ehb-editorial-cover {
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 32px;
}

.ehb-editorial-note {
    padding: 24px;
    background: var(--ehb-surface-lilac);
    border-radius: 14px;
    margin-block: 32px;
    font-size: 14px;
}

.ehb-editorial-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-top: 28px;
}

.ehb-editorial-related {
    background: var(--ehb-surface-raised);
    padding: 56px var(--ehb-gutter);
}

.ehb-editorial-related>h2,
.ehb-editorial-related>div {
    max-width: var(--ehb-content-width);
    margin-inline: auto;
}

.ehb-editorial-related>h2,
.ehb-editorial-related>.ehb-section-head {
    margin-bottom: 28px;
}

.ehb-editorial-related>.ehb-section-head>h2 {
    margin: 0;
}

/* The glossary index is a non-alignfull query block, so it never got the section gutter:
   cards ran edge to edge while the page heading sat at --ehb-gutter. */
.entry-content .ehb-editorial-index {
    box-sizing: border-box;
    max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
    margin-inline: auto;
    padding-inline: var(--ehb-gutter);
}

.ehb-editorial-grid,
.ehb-editorial-index .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.ehb-editorial-card,
.ehb-editorial-index .wp-block-post {
    padding: 28px;
    background: var(--ehb-surface-paper);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: 14px;
    box-shadow: none;
}

.ehb-editorial-card h3,
.ehb-editorial-index h2 {
    font: 600 23px/1.3 var(--ehb-font-display);
    margin-block: 12px;
}

.ehb-editorial-index .wp-block-post-title a {
    display: block;
    line-height: inherit;
}

.ehb-editorial-index .wp-block-query-pagination {
    margin-top: 32px;
}

.ehb-missing-page .search-form,
.ehb-missing-page .woocommerce-product-search {
    max-width: 620px;
    margin-top: 28px;
}

.ehb-missing-page input[type=search] {
    max-width: 100%;
}

:is(.entry-content, .site-main) .ehb-product-grid .wp-block-post-title {
    height: auto;
    min-height: 0;
    overflow-wrap: anywhere;
}

:is(.entry-content, .site-main) .ehb-product-grid .wp-block-post-title a {
    display: block;
    line-height: inherit;
    height: auto;
}

.ehb-product-grid .wc-block-components-product-button {
    margin-top: auto;
}

.woocommerce ul.products li.product a.added_to_cart,
.woocommerce ul.products li.product .added_to_cart {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
}

.woocommerce ul.products li.product .product-details {
    flex: 1;
}

.woocommerce ul.products li.product .product-action-wrap {
    margin-top: auto;
}

.tinv-wishlist .tinvwl_add_to_wishlist_button {
    min-height: 36px;
    font-size: 13px;
    line-height: 20px;
    padding-block: 8px;
}

.ehb-product-grid .tinv-wraper {
    padding-inline: 16px;
}

.tinv-wishlist table {
    font-size: 14px;
}

.tinv-wishlist .product-thumbnail img {
    max-width: 80px;
    height: 100px;
    object-fit: contain;
}

/* Empty Cart uses the same native Query Loop product cards as merchandising. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    padding-top: 32px;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .ehb-product-grid {
    margin-top: 32px;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (min-width:768px) and (max-width:1023px) {
    .entry-content .ehb-concerns__track>* {
        flex-basis: 220px;
        width: 220px;
        max-width: 220px;
    }

    .entry-content .ehb-best-sellers .wp-block-post-template {
        gap: 16px;
    }

    .ehb-editorial-grid,
    .ehb-editorial-index .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:1023px) {
    /* --ehb-header-bottom: the sticky header's live bottom edge, 0 while it is hidden (catalog.js). */
    .ehb-catalog-results .kadence-shop-top-row {
        top: calc(var(--ehb-header-bottom, 64px) + var(--wp-admin--admin-bar--height, 0px));
        z-index: 10;
        flex-wrap: wrap;
    }

    .ehb-catalog-filter-drawer__body {
        max-height: calc(100dvh - 200px);
    }
}

@media (max-width:767px) {
    .ehb-editorial-hero {
        padding: 40px 16px;
    }

    .ehb-editorial-body {
        padding: 36px 16px;
    }

    .ehb-editorial-lead {
        font-size: 16px;
    }

    .ehb-editorial-body .entry-content {
        font-size: 16px;
    }

    .ehb-editorial-body h2 {
        font-size: 24px;
    }

    .ehb-editorial-grid,
    .ehb-editorial-index .wp-block-post-template {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ehb-editorial-card,
    .ehb-editorial-index .wp-block-post {
        padding: 24px;
    }

    .woocommerce-cart .wp-block-woocommerce-empty-cart-block .ehb-product-grid .wp-block-post-template {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
        padding: 0;
    }

    .woocommerce-cart .wp-block-woocommerce-empty-cart-block .ehb-product-grid .wp-block-post {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .woocommerce-cart .wp-block-woocommerce-empty-cart-block .ehb-product-grid .wp-block-post-title {
        font-size: 14px;
        line-height: 20px;
    }

    .tinv-wishlist .product-thumbnail img {
        max-width: 60px;
        height: 75px;
    }
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .ehb-product-grid .wc-block-components-product-button {
    display: flex;
    margin-top: auto;
}

/* Native wishlist controls positioned on the image, clear of the sale badge. */
.ehb-wishlist-image,
.woocommerce ul.products li.product {
    position: relative;
}

.ehb-wishlist-image>.tinv-wraper,
.woocommerce ul.products li.product>.tinv-wraper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
    padding: 0;
}

:is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: var(--ehb-surface-paper);
    color: var(--ehb-brand-rose-plum);
    box-shadow: 0 2px 8px #23142112;
}

:is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button::before {
    margin: 0;
    font-size: 24px;
}

:is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinvwl_add_to_wishlist_button:focus-visible {
    outline: 2px solid var(--ehb-brand-orchid);
    outline-offset: 3px;
}

.ehb-wishlist-image .wc-block-components-product-image {
    margin-bottom: 0;
}

.entry-content .tinv-wishlist:not(.tinv-wraper) {
    max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
    margin-inline: auto;
    padding: 32px var(--ehb-gutter);
}

/* Wishlist list uses the same 1200px container as the breadcrumb bar. */
.entry-content .tinv-wishlist table.tinvwl-table-manage-list {
    border-collapse: separate;
    border-spacing: 0 16px;
}

.entry-content .tinv-wishlist .tinv-header h2 {
    font: 700 28px/1.2 var(--ehb-font-display);
}

@media (max-width:767px) {
    .entry-content .tinv-wishlist table.tinvwl-table-manage-list thead {
        display: none;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list tbody {
        display: grid;
        gap: 16px;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list tr.wishlist_item {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) 32px;
        gap: 8px 12px;
        padding: 16px;
        border: 1px solid var(--ehb-line-subtle);
        border-radius: 14px;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list tr.wishlist_item td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-remove {
        grid-column: 3;
        grid-row: 1;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-name {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-price {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-stock {
        grid-column: 2 / 4;
        grid-row: 3;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td.product-action {
        grid-column: 1 / -1;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list .product-thumbnail img {
        width: 80px;
        max-width: 80px;
        height: 100px;
    }
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid li>.ehb-wishlist-image {
    padding-inline: 0;
}

.ehb-wishlist-image>.tinv-wraper,
.woocommerce ul.products li.product>.tinv-wraper {
    left: auto;
    width: 40px;
    height: 40px;
}

:is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button::before {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    line-height: 1;
    color: inherit;
}

.entry-content>.tinv-wishlist .tinv-header {
    margin-bottom: 24px;
}

.entry-content .ehb-wishlist-image>.tinv-wraper {
    position: absolute;
    inset: 10px 10px auto auto;
    width: 40px;
    height: 40px;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Reserve the top-right control area even when a merchandising label is long. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-wishlist-image .wp-block-woocommerce-product-sale-badge {
    max-width: calc(100% - 64px);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-wishlist-image .wc-block-components-product-sale-badge {
    max-width: 100%;
    white-space: normal;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-wishlist-image .wc-block-components-product-sale-badge span {
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-wishlist-image .wc-block-components-product-sale-badge--custom {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 58px;
    width: auto;
    max-width: none;
}

/* PDP heart: same 48px pill height as qty + Add to cart, centred on them. */
form.cart>.tinv-wraper {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    align-self: center;
}

form.cart>.tinv-wraper .tinvwl_add_to_wishlist_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ehb-line-subtle);
    border-radius: 999px;
}

form.cart>.tinv-wraper .tinvwl_add_to_wishlist_button::before {
    margin: 0;
}

/* Wishlist stock cell: one flex row so tick/cross and text share a baseline. */
.tinv-wishlist td.product-stock p.stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.tinv-wishlist td.product-stock p.stock i {
    margin: 0;
}

.tinv-wishlist td.product-stock p.stock span {
    display: inline;
    margin: 0;
    padding: 0;
}

form.cart>.tinv-wraper .tinvwl_add_to_wishlist-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* label stays for screen readers via aria-label */
form.cart>.tinv-wraper .tinvwl_add_to_wishlist_button {
    position: relative;
}

/* Wishlist table (>=768): headers share the cells' alignment, one-line CTA, quieter name links. */
@media (min-width: 768px) {
    .entry-content .tinv-wishlist table.tinvwl-table-manage-list th {
        text-align: left;
        font: 600 13px/1.4 var(--ehb-font-body);
        letter-spacing: 0;
        text-transform: none;
        color: var(--ehb-text-muted);
        padding: 0 14px 12px;
        border-bottom: 1px solid var(--ehb-line-subtle);
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list :is(th, td).product-action {
        text-align: right;
        white-space: nowrap;
    }

    .entry-content .tinv-wishlist table.tinvwl-table-manage-list td {
        vertical-align: middle;
    }

    .entry-content .tinv-wishlist td.product-name a {
        color: var(--ehb-text-ink);
        font-weight: 600;
        text-decoration: none;
    }

    .entry-content .tinv-wishlist td.product-name a:hover {
        color: var(--ehb-brand-magenta);
    }

    .entry-content .tinv-wishlist td.product-action .button {
        white-space: nowrap;
        width: auto;
        min-width: 160px;
    }

    .tinv-wishlist td.product-stock p.stock.in-stock i {
        color: var(--ehb-status-in-stock);
    }

    .tinv-wishlist td.product-stock p.stock.out-of-stock {
        color: var(--ehb-text-muted);
    }
}

/* PDP, out of stock: same pill anatomy as IN STOCK; wishlist as a quiet outline pill (no form.cart to sit in). */
.single-product div.summary .ehb-stock-badge--muted {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    background: var(--ehb-surface-raised);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: var(--ehb-radius-pill);
    font: 700 9px/11px var(--ehb-font-display);
    letter-spacing: .54px;
    text-transform: uppercase;
    color: var(--ehb-text-muted);
}

.single-product div.summary>.tinv-wraper {
    width: auto;
    margin: 0 0 16px;
    padding: 0;
}

.single-product div.summary>.tinv-wraper .tinvwl_add_to_wishlist_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid var(--ehb-line-subtle);
    border-radius: var(--ehb-radius-pill);
    font: 600 14px/1 var(--ehb-font-body);
    color: var(--ehb-brand-magenta);
    text-decoration: none;
}

.single-product div.summary>.tinv-wraper .tinvwl_add_to_wishlist_button::before {
    margin: 0;
}

.single-product div.summary>.tinv-wraper .tinvwl_add_to_wishlist_button:hover {
    background: var(--ehb-surface-blush);
}

/* Article hero, breadcrumb and body share the global site container. */
.single-post .ehb-editorial-body {
    max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
    padding-inline: var(--ehb-gutter);
}

.single-post .ehb-editorial-body>.ehb-editorial-cover {
    width: 100%;
}

@media (min-width: 1024px) {
    .single-post .ehb-editorial-body>.ehb-editorial-cover {
        aspect-ratio: 21 / 9;
    }
}

/* Reading column takes the room the 340px sidebar leaves, so the two always
   meet the container edges with one gap between them and none in the middle.
   Below 1024px the sidebar stacks under the article. */
.single-post .ehb-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

.single-post .ehb-editorial-main {
    min-width: 0;
}

.single-post .ehb-editorial-side {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-post .ehb-editorial-side__card {
    padding: 24px;
    border: 1px solid var(--ehb-line-subtle);
    border-radius: 14px;
    background: var(--ehb-surface-paper, #fff);
}

.single-post .ehb-editorial-side__card--shop {
    background: var(--ehb-surface-blush);
    border-color: transparent;
}

/* Card title = Figma Heading/H4 (Archivo SemiBold 16/22), body = Body/Small (Inter 14/22). The .single-content / Kadence heading rules
   are (0,2,1)+, so these carry the extra .ehb-editorial-side class. */
.single-post .ehb-editorial-side .ehb-editorial-side__card h2 {
    margin: 0 0 8px;
    font-family: var(--ehb-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ehb-text-ink);
}

.single-post .ehb-editorial-side .ehb-editorial-side__card p {
    margin: 0 0 16px;
    font: 400 14px/22px var(--ehb-font-body);
    color: var(--ehb-text-body);
}

.single-post .ehb-editorial-side__card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-post .ehb-editorial-side__card li {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--ehb-line-subtle);
    font: 500 14px/22px var(--ehb-font-body);
}

.single-post .ehb-editorial-side__card li:first-child {
    border-top: 0;
    padding-top: 0;
}

.single-post .ehb-editorial-side__card a:not(.ehb-btn) {
    color: var(--ehb-brand-magenta);
    text-decoration: none;
}

.single-post .ehb-editorial-side__card a:not(.ehb-btn):hover {
    text-decoration: underline;
}

.single-post .ehb-editorial-side .ehb-editorial-side__card .ehb-btn {
    display: flex;
    width: 100%;
    color: var(--ehb-text-on-dark);
    text-decoration: none;
}

.single-post .ehb-editorial-side__link {
    display: block;
    margin-top: 14px;
    font: 500 14px/22px var(--ehb-font-body);
}

@media (max-width: 1023px) {
    .single-post .ehb-editorial-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .single-post .ehb-editorial-side {
        position: static;
    }
}

/* Article cover: landscape crop of the featured image (source photos are portrait). */
.single-post .ehb-editorial-cover {
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 30%;
}

/* Article images: portrait photos sit in landscape wells, so each keeps its subject (face/product) in frame. Keyed by file name so it survives a new environment. */
.ehb-article-card__thumb img[src*="/healthy-ageing"],
.single-post .ehb-editorial-cover[src*="/healthy-ageing"] {
    object-position: 50% 29%;
}

.ehb-article-card__thumb img[src*="/bone-joint-health"],
.single-post .ehb-editorial-cover[src*="/bone-joint-health"] {
    object-position: 50% 43%;
}

.ehb-article-card__thumb img[src*="/skin-hair-nails"],
.single-post .ehb-editorial-cover[src*="/skin-hair-nails"] {
    object-position: 50% 34%;
}

.ehb-article-card__thumb img[src*="/heart-health"],
.single-post .ehb-editorial-cover[src*="/heart-health"] {
    object-position: 50% 56%;
}

.ehb-article-card__thumb img[src*="/dryness-hydration"],
.single-post .ehb-editorial-cover[src*="/dryness-hydration"] {
    object-position: 50% 9%;
}

.ehb-article-card__thumb img[src*="/pigmentation-brightening"],
.single-post .ehb-editorial-cover[src*="/pigmentation-brightening"] {
    object-position: 50% 17%;
}

.ehb-article-card__thumb img[src*="/sensitive-skin-care"],
.single-post .ehb-editorial-cover[src*="/sensitive-skin-care"] {
    object-position: 50% 17%;
}

.ehb-article-card__thumb img[src*="/mature-skin-anti-ageing"],
.single-post .ehb-editorial-cover[src*="/mature-skin-anti-ageing"] {
    object-position: 50% 39%;
}

.ehb-article-card__thumb img[src*="/supplement-label"],
.single-post .ehb-editorial-cover[src*="/supplement-label"] {
    object-position: 50% 45%;
}

.ehb-article-card__thumb img[src*="/multivitamin-organiser"],
.single-post .ehb-editorial-cover[src*="/multivitamin-organiser"] {
    object-position: 50% 10%;
}

.ehb-article-card__thumb img[src*="/breakfast-bowl"],
.single-post .ehb-editorial-cover[src*="/breakfast-bowl"] {
    object-position: 50% 50%;
}

.ehb-article-card__thumb img[src*="/supplement-and-water"],
.single-post .ehb-editorial-cover[src*="/supplement-and-water"] {
    object-position: 50% 60%;
}

/* Category/archive grid (Kadence post list) uses the same focal points; two more photos for the healthy-ageing group. */
.post-thumbnail-inner img[src*="/healthy-ageing"] {
    object-position: 50% 29%;
}

.post-thumbnail-inner img[src*="/bone-joint-health"] {
    object-position: 50% 43%;
}

.post-thumbnail-inner img[src*="/skin-hair-nails"] {
    object-position: 50% 34%;
}

.post-thumbnail-inner img[src*="/heart-health"] {
    object-position: 50% 56%;
}

.post-thumbnail-inner img[src*="/dryness-hydration"] {
    object-position: 50% 9%;
}

.post-thumbnail-inner img[src*="/pigmentation-brightening"] {
    object-position: 50% 17%;
}

.post-thumbnail-inner img[src*="/sensitive-skin-care"] {
    object-position: 50% 17%;
}

.post-thumbnail-inner img[src*="/mature-skin-anti-ageing"] {
    object-position: 50% 39%;
}

.post-thumbnail-inner img[src*="/supplement-label"] {
    object-position: 50% 45%;
}

.post-thumbnail-inner img[src*="/multivitamin-organiser"] {
    object-position: 50% 10%;
}

.post-thumbnail-inner img[src*="/breakfast-bowl"] {
    object-position: 50% 50%;
}

.post-thumbnail-inner img[src*="/supplement-and-water"] {
    object-position: 50% 60%;
}

.post-thumbnail-inner img[src*="/nmn-lab-tubes"] {
    object-position: 50% 45%;
}

.post-thumbnail-inner img[src*="/extract-amber-bottles"] {
    object-position: 50% 50%;
}

.ehb-article-card__thumb img[src*="/nmn-lab-tubes"],
.single-post .ehb-editorial-cover[src*="/nmn-lab-tubes"] {
    object-position: 50% 45%;
}

.ehb-article-card__thumb img[src*="/extract-amber-bottles"],
.single-post .ehb-editorial-cover[src*="/extract-amber-bottles"] {
    object-position: 50% 50%;
}

/* About page photos (image slots are ordinary core/image blocks, replaceable in the editor). */
.ehb-about-figure {
    margin: 0 0 28px;
}

.ehb-about-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--ehb-radius-lg);
}

@media (max-width: 767px) {
    .ehb-about-figure img {
        aspect-ratio: 16 / 9;
    }
}

.ehb-about-figure--banner img {
    aspect-ratio: 2 / 1;
    object-position: 50% 15%;
}

@media (max-width: 767px) {
    .ehb-about-figure--banner img {
        aspect-ratio: 4 / 3;
    }
}

/* Homepage reviews: staff-only reminder that the quotes are specimens. */
.ehb-sample-note {
    display: none;
}

body.admin-bar .ehb-sample-note {
    display: block;
    margin: 20px 0 0;
    padding: 10px 14px;
    border: 1px dashed var(--ehb-brand-rose-plum);
    border-radius: var(--ehb-radius-md);
    background: var(--ehb-surface-blush);
    color: var(--ehb-brand-rose-plum);
    font-size: 13px;
    line-height: 1.5;
}

/* Reviews rhythm (Figma): the section's own margin reset (.entry-content .ehb-review > *) would flatten it, so the gaps are restated at equal strength. */
.entry-content .ehb-review>.ehb-review__stars {
    margin-block: 0 12px;
}

.entry-content .ehb-review>.ehb-review__quote {
    margin-block: 0 20px;
}

.entry-content .ehb-review>.ehb-review__product {
    margin-block: 22px 0;
}

.entry-content .ehb-reviews__secondary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}

.entry-content .ehb-reviews__secondary>.ehb-review {
    margin: 0;
}


/* After add to cart the header cart count is the confirmation: no "View cart" link under ajax buttons or in the added-to-cart notice, on any product surface. */
a.added_to_cart,
.woocommerce-message a.button.wc-forward {
    display: none !important;
}

/* Cart cross-sells: sale badge top-left like every other card (WooCommerce block defaulted to top-right, over the wishlist heart). */
.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-sale-badge {
    position: absolute;
    top: var(--ehb-space-12);
    left: var(--ehb-space-12);
    right: auto;
    bottom: auto;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
    position: relative;
    inset: auto;
    float: none;
    display: inline-flex;
    width: max-content;
    margin: 0;
    white-space: nowrap;
}

/* Cards built from blocks (home, Shop landing, Centres, empty cart, cart cross-sells): the button sits on the card's bottom edge
   whatever the title length, so a two-line name in one card no longer leaves a blank strip under the buttons of the others. */
li.wp-block-post.product>.wc-block-components-product-button,
li.wp-block-post.product>.wp-block-woocommerce-product-button,
li.wc-block-product>.wc-block-components-product-button {
    margin-top: auto !important;
}

/* Classic ajax buttons: WooCommerce dims the button to 25% while adding, which reads as a flash. */
.woocommerce ul.products li.product a.button.loading {
    opacity: .7;
}

/* Block add-to-cart: after adding, WooCommerce un-hides an empty "View cart" span next to the button. Its 12px flex gap pushed the
   button up on click. We never show View cart, so the button is the only child that takes space. */
.wc-block-components-product-button {
    gap: 0;
}

.wc-block-components-product-button> :not(button):not(.ehb-button--outofstock) {
    display: none !important;
}

/* Best Sellers is two Query Loops (vitamins, skincare) side by side. As separate grids their cards were sized per pair, so a
   two-line title in one pair made those cards taller than the other pair. Flatten both loops into one four-column grid so all four
   cards share one row height. Below 768px the existing swipe track is kept. */
@media (min-width: 768px) {
    .entry-content .ehb-best-sellers.wp-block-columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .entry-content .ehb-best-sellers>.wp-block-column,
    .entry-content .ehb-best-sellers .ehb-product-grid,
    .entry-content .ehb-best-sellers .wp-block-post-template {
        display: contents;
    }
}

@media (min-width: 1024px) {
    .entry-content .ehb-best-sellers.wp-block-columns {
        gap: 32px;
    }
}

/* Reviews, Figma pass 2: the score's last line shares a baseline with the subtitle (WordPress put a 32px bottom margin on the title group,
   pushing the score below it); secondary cards keep the 28px card gap and the 24px quote line-height. */
.entry-content .ehb-reviews .ehb-reviews__head>* {
    margin-block: 0;
}

.entry-content .ehb-reviews__secondary {
    gap: 28px;
}

.entry-content .ehb-reviews__secondary .ehb-review>.ehb-review__quote {
    margin-block: 0 12px;
    line-height: 24px;
}

.entry-content .ehb-reviews .ehb-reviews__head {
    margin-bottom: var(--ehb-space-40);
}

/* Figma: 40px from header to cards */
.entry-content .ehb-reviews .ehb-reviews__body {
    margin-bottom: 0;
}

/* Figma: 104px section padding, no extra trailing margin */

/* ==========================================================================
   My Account
   ========================================================================== */
/* Same 1200px container as the breadcrumb bar (Kadence had left the block flush left with margin 0). */
.woocommerce-account .entry-content.single-content {
    max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
    margin-inline: auto;
    padding-inline: var(--ehb-gutter);
    box-sizing: border-box;
}

/* Lost / reset password forms use the same card as login. */
.woocommerce-account:not(.logged-in) form.lost_reset_password {
    background: var(--ehb-surface-paper);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: var(--ehb-radius-lg);
    padding: 36px 32px;
    box-shadow: 0 4px 20px rgba(36, 19, 32, .04);
    box-sizing: border-box;
}

.woocommerce-account .ehb-account-note {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--ehb-text-muted);
    text-align: center;
}

/* Addresses: WooCommerce floats each column to 48% inside our grid, which shrank the card to ~150px and broke the heading. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title :is(h2, h3) {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title a.edit {
    flex: 0 0 auto;
    padding: 4px 14px;
    border: 1px solid var(--ehb-line-strong);
    border-radius: var(--ehb-radius-pill);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title a.edit:hover {
    background: var(--ehb-surface-paper);
}

.woocommerce-account .woocommerce-Address address {
    overflow-wrap: anywhere;
}

/* Dashboard quick links */
.woocommerce-account .ehb-account-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}

.woocommerce-account a.ehb-account-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: var(--ehb-surface-raised);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: var(--ehb-radius-lg);
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.woocommerce-account a.ehb-account-card:hover {
    border-color: var(--ehb-brand-magenta);
    box-shadow: 0 4px 14px rgba(36, 19, 32, .06);
}

.woocommerce-account .ehb-account-card__title {
    font: 700 16px/24px var(--ehb-font-display);
    color: var(--ehb-text-ink);
}

.woocommerce-account .ehb-account-card__text {
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ehb-text-muted);
}

.woocommerce-account .ehb-account-help {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ehb-text-muted);
}

@media (max-width: 767px) {
    .woocommerce-account .ehb-account-cards {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-Address .woocommerce-Address-title {
        flex-wrap: wrap;
    }
}

/* Login + Register side by side: WooCommerce floats each column to 48% and the form inside picked up a second card. */
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
}

.woocommerce-account:not(.logged-in) #customer_login form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

.woocommerce-account:not(.logged-in) #customer_login h2 {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 32px;
}

.woocommerce-account:not(.logged-in) #customer_login {
    align-items: start;
}

.woocommerce-account:not(.logged-in) #customer_login::before,
.woocommerce-account:not(.logged-in) #customer_login::after {
    content: none;
    display: none;
}

/* clearfix pseudo-elements were taking grid cells */
.woocommerce-account .woocommerce-privacy-policy-text p {
    margin: 4px 0 18px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ehb-text-muted);
}

.woocommerce-account:not(.logged-in) #customer_login {
    align-items: stretch;
}

/* WooCommerce clearfix pseudo-elements become real flex/grid items here: they pushed the menu 40px right (via gap) and swapped the address cards. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
    content: none;
    display: none;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
    justify-content: flex-start;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title :is(h2, h3) {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Language switcher: a <details> menu, no script needed to open it. */
.ehb-lang__menu {
    position: relative;
}

.ehb-lang__menu>summary {
    list-style: none;
    cursor: pointer;
}

.ehb-lang__menu>summary::-webkit-details-marker {
    display: none;
}

.ehb-lang__menu>ul {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1000;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ehb-surface-paper);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: var(--ehb-radius-md);
    box-shadow: 0 8px 24px rgba(36, 19, 32, .14);
    text-transform: none;
    letter-spacing: 0;
}

.ehb-lang--footer .ehb-lang__menu>ul {
    top: auto;
    bottom: calc(100% + 8px);
}

.ehb-lang__menu>ul a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font: 500 14px/20px var(--ehb-font-body);
    color: var(--ehb-text-ink);
    text-decoration: none;
    white-space: nowrap;
}

.ehb-lang__menu>ul a:hover,
.ehb-lang__menu>ul a:focus-visible {
    background: var(--ehb-surface-blush);
}

.ehb-lang__menu>ul a[aria-current] {
    font-weight: 700;
    color: var(--ehb-brand-magenta);
}

.ehb-lang--header {
    z-index: 50;
}

/* own stacking level (it has a transform), so the menu opens over the logo row (z-index 1) */
#colophon .ehb-lang__menu>ul a {
    color: var(--ehb-text-ink);
}

#colophon .ehb-lang__menu>ul a[aria-current] {
    color: var(--ehb-brand-magenta);
}

#colophon .ehb-lang__menu>ul a:hover,
#colophon .ehb-lang__menu>ul a:focus-visible {
    color: var(--ehb-brand-magenta);
}

/* PDP gallery thumbnails (Figma 194:157): 4 equal cells across the 660px gallery, 14px gap, 100px high, 8px radius; the active cell has a 2px
   magenta border and the picture fills every cell. The selector repeats Woo's own chain (.woocommerce div.product div.images ...) because
   its defaults (margin-top:-32px, translate(-50%), 60x65px cells, 50% opacity) otherwise win and the strip overlaps the main image. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 0;
    overflow: visible;
    transform: none;
    left: auto;
    background: none;
    list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li:first-child {
    flex: 0 0 calc((100% - 42px) / 4);
    width: calc((100% - 42px) / 4);
    height: 100px;
    margin: 0;
    padding: 0;
    float: none;
    background: none;
    box-sizing: border-box;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
    background: var(--ehb-surface-raised);
    border: 1px solid var(--ehb-line-subtle);
    border-radius: 8px;
    opacity: 1;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 150ms ease;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    background: none;
    border: 2px solid var(--ehb-brand-magenta);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: var(--ehb-brand-magenta);
}

@media (max-width: 767px) {
    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
        gap: 10px;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }

    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li,
    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li:first-child {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        scroll-snap-align: start;
    }
}

/* Gallery slides after the first are square information graphics, not packshots: fill the 560px frame instead of the 300x382 packshot box. */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) {
    background: var(--ehb-surface-lilac);
}

:is(body.ehb-pdp--skincare,
    body.product_cat-skincare,
    body.product_cat-beauty,
    body.product_cat-beauty-skin,
    .single-product .product.product_cat-skincare,
    .single-product .product.ehb-product--skincare) .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) {
    background: var(--ehb-surface-blush);
}

:is(body.ehb-pdp--vitamins,
    body.product_cat-vitamins,
    .single-product .product.product_cat-vitamins,
    .single-product .product.ehb-product--vitamins) .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) {
    background: var(--ehb-surface-lilac);
}

@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
        height: auto;
        width: 100%;
    }
}

/* More than 4 images: one row, scroll sideways, 4 cells visible (Figma shows 4). */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li:first-child {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* Mobile product cards (Figma 210:440, 140px wide): the wishlist heart is 32px, not the 40px desktop size; Best Sellers' two loops share one row
   so all four cards are the same height. */
@media (max-width: 767px) {

    .ehb-wishlist-image>.tinv-wraper,
    .woocommerce ul.products li.product>.tinv-wraper,
    .entry-content .ehb-wishlist-image>.tinv-wraper {
        width: 32px;
        height: 32px;
        inset: 8px 8px auto auto;
    }

    :is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button {
        width: 32px;
        height: 32px;
    }

    :is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button::before {
        font-size: 18px;
    }

    .entry-content .ehb-best-sellers>.wp-block-column,
    .entry-content .ehb-best-sellers .ehb-product-grid,
    .entry-content .ehb-best-sellers .wp-block-post-template {
        display: contents;
    }

    .entry-content .ehb-best-sellers.wp-block-columns {
        align-items: stretch;
    }

    .entry-content .ehb-best-sellers li.wp-block-post {
        height: auto;
    }
}

/* Block cards: "incl. GST" is the 12px muted caption next to the 16px price (Figma 7:9 / 7:10), as on the classic cards. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-price .ehb-price-suffix {
    font: 400 12px/18px var(--ehb-font-body);
    color: var(--ehb-text-muted);
    margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {

    .ehb-wishlist-image>.tinv-wraper,
    .woocommerce ul.products li.product>.tinv-wraper,
    .entry-content .ehb-wishlist-image>.tinv-wraper {
        width: 32px;
        height: 32px;
        inset: 8px 8px auto auto;
    }

    :is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button {
        width: 32px;
        height: 32px;
    }

    :is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button::before {
        font-size: 18px;
    }
}

.ehb-price-suffix {
    white-space: nowrap;
}

/* "incl. GST" wraps as one unit, never "incl." / "GST" */
/* Block card price row: 8px column gap, so a wrapped "incl. GST" starts flush left (Figma 7:8: wrap, gap 0/8). */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

/* Woo's "li.product {height:100%}" sized each carousel card to its own content; let the row stretch them to one height. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li {
    height: auto;
}

/* ==========================================================================
   My Account — order view, address cards, address form, payment methods
   Same tokens as the rest of the account area; no icons, hierarchy comes from type, tone and spacing.
   ========================================================================== */
/* --- View order --- */
.woocommerce-account .woocommerce-MyAccount-content>p:first-of-type:has(mark) {
    margin: 0 0 28px;
    padding: 14px 18px;
    background: var(--ehb-surface-blush);
    border-radius: var(--ehb-radius-md);
    font-size: 14px;
    line-height: 22px;
    color: var(--ehb-text-body);
}

.woocommerce-account .woocommerce-MyAccount-content mark {
    background: none;
    padding: 0;
    font-weight: 700;
    color: var(--ehb-text-ink);
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
    display: inline-block;
    padding: 1px 10px;
    border-radius: var(--ehb-radius-pill);
    background: var(--ehb-brand-magenta);
    color: #fff;
    font-size: 12.5px;
    line-height: 20px;
}

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 30px;
}

.woocommerce-account table.woocommerce-table--order-details {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0 0 40px;
}

.woocommerce-account table.woocommerce-table--order-details thead th {
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid var(--ehb-line-subtle);
    font: 700 12px/16px var(--ehb-font-display);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--ehb-text-muted);
    text-align: left;
}

.woocommerce-account table.woocommerce-table--order-details thead th:last-child,
.woocommerce-account table.woocommerce-table--order-details td:last-child {
    text-align: right;
    white-space: nowrap;
}

.woocommerce-account table.woocommerce-table--order-details :is(tbody td, tfoot th, tfoot td) {
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--ehb-line-subtle);
    font-size: 14.5px;
    line-height: 22px;
    color: var(--ehb-text-body);
    background: none;
    vertical-align: top;
}

.woocommerce-account table.woocommerce-table--order-details tbody td.product-name a {
    font-weight: 600;
    color: var(--ehb-text-ink);
    text-decoration: none;
}

.woocommerce-account table.woocommerce-table--order-details tbody td.product-name a:hover {
    color: var(--ehb-brand-magenta);
}

.woocommerce-account table.woocommerce-table--order-details tfoot th {
    font-weight: 400;
    text-align: left;
    color: var(--ehb-text-muted);
}

.woocommerce-account table.woocommerce-table--order-details small.includes_tax,
.woocommerce-account table.woocommerce-table--order-details .shipped_via {
    display: block;
    font-size: 12.5px;
    color: var(--ehb-text-muted);
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::after {
    content: none;
    display: none;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
}

.woocommerce-account .woocommerce-customer-details address {
    padding: 18px 20px;
    background: var(--ehb-surface-blush);
    border: 0;
    border-radius: var(--ehb-radius-lg);
    font-style: normal;
    font-size: 14px;
    line-height: 24px;
    color: var(--ehb-text-body);
    overflow-wrap: anywhere;
}

.woocommerce-account .woocommerce-customer-details address p {
    margin: 8px 0 0;
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }
}

/* --- Address cards: the long "Edit Billing address" link squeezed the title onto two lines; title gets its own row, link sits under it --- */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
    flex-wrap: wrap;
    row-gap: 6px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title :is(h2, h3) {
    flex: 1 0 100%;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title a.edit {
    order: 2;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 13.5px;
    color: var(--ehb-brand-magenta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title a.edit:hover {
    background: none;
    color: var(--ehb-text-ink);
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    line-height: 24px;
}

/* --- Address form: the field wrapper only held floats, so Save address rode up over the last input --- */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper::after {
    content: none;
    display: none;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
    float: none;
    width: auto;
    margin: 0 0 18px;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-address-fields>p:last-child {
    margin: 12px 0 0;
}

.woocommerce-account .woocommerce-address-fields button[name="save_address"] {
    min-width: 220px;
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 40px;
    border-color: var(--ehb-line-strong);
    border-radius: var(--ehb-radius-md);
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection__rendered {
    padding-left: 14px;
    line-height: 38px;
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection__arrow {
    height: 38px;
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* --- Payment methods: quiet delete, primary add --- */
.woocommerce-account table.woocommerce-MyAccountPaymentMethods {
    width: 100%;
    margin: 0 0 24px;
    border: 0;
    border-collapse: collapse;
}

.woocommerce-account table.woocommerce-MyAccountPaymentMethods th {
    padding: 0 12px 10px 0;
    border: 0;
    border-bottom: 2px solid var(--ehb-line-subtle);
    font: 700 12px/16px var(--ehb-font-display);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--ehb-text-muted);
    text-align: left;
}

.woocommerce-account table.woocommerce-MyAccountPaymentMethods td {
    padding: 16px 12px 16px 0;
    border: 0;
    border-bottom: 1px solid var(--ehb-line-subtle);
    font-size: 14.5px;
    color: var(--ehb-text-ink);
    vertical-align: middle;
}

.woocommerce-account table.woocommerce-MyAccountPaymentMethods :is(th, td):last-child {
    padding-right: 0;
    text-align: right;
}

.woocommerce-account table.woocommerce-MyAccountPaymentMethods a.button {
    padding: 6px 16px;
    background: none;
    border: 1px solid var(--ehb-line-strong);
    border-radius: var(--ehb-radius-pill);
    box-shadow: none;
    font: 600 12.5px/20px var(--ehb-font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ehb-text-body);
}

.woocommerce-account table.woocommerce-MyAccountPaymentMethods a.button:hover {
    border-color: var(--ehb-brand-magenta);
    color: var(--ehb-brand-magenta);
    background: none;
}

.woocommerce-account .woocommerce-MyAccount-content>a.button[href*="add-payment-method"] {
    background: var(--ehb-brand-magenta);
    box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content>a.button[href*="add-payment-method"]:hover {
    background: var(--ehb-brand-rose-plum);
}

/* --- My Account nav: Kadence's .account-navigation-wrap carries a side border that ran down beside avatar + card --- */
.woocommerce-account .account-navigation-wrap {
    flex: 0 0 240px;
    width: 240px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
}

.woocommerce-account .account-navigation-wrap .kadence-account-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0 4px;
    border: 0;
}

.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation {
    flex: none;
    width: 100%;
}

@media (max-width: 767px) {
    .woocommerce-account .account-navigation-wrap {
        flex: none;
        width: 100%;
    }
}

/* --- Checkout: product photos with a white background (Skin Whitening) sat as a white box on the blush summary --- */
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    mix-blend-mode: multiply;
}

/* Payment accordion options keep Woo's own frame line under the label */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option::before,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option::before,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option::after {
    display: none;
}

/* Kadence positions the avatar absolutely and pads the name 50px to clear it; with our flex row the two overlapped */
.woocommerce-account .account-navigation-wrap .kadence-account-avatar {
    min-height: 0;
    margin-top: 0;
}

.woocommerce-account .account-navigation-wrap .kadence-customer-image,
.woocommerce-account .account-navigation-wrap .kadence-customer-image img {
    position: static;
}

.woocommerce-account .account-navigation-wrap .kadence-customer-image {
    flex: 0 0 auto;
    line-height: 0;
}

.woocommerce-account .account-navigation-wrap .kadence-account-avatar .kadence-customer-name {
    padding-left: 0;
}

/* --- Checkout: Express Checkout (Apple Pay / Google Pay). Woo pins the title over a border with position:absolute, so any
   note Stripe renders above it ("Final taxes charged…") collided with it. Plain stack instead: title, buttons, rule. --- */
.woocommerce-checkout .wc-block-components-express-payment--checkout {
    margin: -8px 0 32px;
}

/* sits right under the payment radios (Figma checkout-payment-block) */
.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container {
    position: static;
    display: block;
    margin: 0 0 12px;
    padding: 0;
    text-align: left;
}

.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
    margin: 0;
    padding: 0;
    font: 400 14px/22px var(--ehb-font-body);
    color: var(--ehb-text-body);
    background: none;
}

.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content::before,
.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content::after,
.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
    content: none;
    display: none;
}

/* Wallets sit under their label as a button-sized control, not a full-width bar: Stripe stretches the iframe to the
   container, so the container sets the width (Apple Pay's own minimum is 140px). */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons {
    gap: 12px;
    max-width: 240px;
    margin-inline: 0;
}

.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content p,
.woocommerce-checkout .wc-block-components-express-payment--checkout~p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ehb-text-muted);
}

.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
    display: none;
}

/* "Or continue below" made sense above the form, not under the payment options */
.woocommerce-checkout .wc-block-components-express-payment-continue-rule::before,
.woocommerce-checkout .wc-block-components-express-payment-continue-rule::after {
    border-color: var(--ehb-line-subtle);
}

/* Express buttons: Woo draws a blue focus frame + underline (li:after) that stays on the Google Pay button after a click,
   and the two wallets differed in height. Same 48px, same radius, no leftover frame. */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>div {
    height: 48px;
    min-height: 48px;
    border-radius: var(--ehb-radius-md);
    overflow: visible;
}

/* Stripe's iframe is 4px larger than the button on every side; clipping it cut the left/right outline */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li:after,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>div:after {
    display: none;
    content: none;
}

.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li:focus-within,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>div:focus-within {
    outline: 0;
    box-shadow: none;
}

/* PDP gallery (desktop/tablet): every slide the same 560px tall. The Wix infographics are full-bleed squares (photo + text),
   so they were 600–660px tall and the page below jumped on every thumbnail click. Contain them in the same blush well as the
   packshot. Thumb strip scrollbar off (the later `scrollbar-width: thin` rule brought it back). */
@media (min-width: 768px) {

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child),
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
        height: 560px;
        min-height: 560px;
        max-height: 560px;
    }

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 560px;
        aspect-ratio: auto;
        object-fit: contain;
    }
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    scrollbar-width: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
    background: var(--ehb-surface-blush);
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
    object-fit: contain;
    background: transparent;
}

/* PDP thumbs, final: ONE row of 96px squares at every width (wrapping made a 2-row block under the image). Swipe/scroll, no
   scrollbar; pdp.js sets --fade-l/--fade-r so the edge that has more images fades out. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--ehb-brand-magenta) var(--ehb-surface-blush);
    row-gap: 0;
    padding: 0 0 12px;
    cursor: grab;
    user-select: none;
}

@media (min-width: 768px) {

    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li,
    .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li:first-child {
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
        scroll-snap-align: start;
    }
}

.single-product .woocommerce-product-gallery {
    position: relative;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img {
    -webkit-user-drag: none;
}

/* Arrow text links ("→ Health & Wellness Centre") — one style everywhere: brand magenta, no underline at rest, underline on
   hover/focus, and no purple once visited. Only the hero variant styled its <a>; the section-head one fell back to the
   browser's underlined, visited-purple link. */
.entry-content .ehb-section-head__link a,
.entry-content .ehb-section-head__link a:visited,
.entry-content .ehb-page-hero__link a,
.entry-content .ehb-page-hero__link a:visited {
    color: var(--ehb-brand-magenta);
    text-decoration: none;
}

.entry-content .ehb-section-head__link a:hover,
.entry-content .ehb-section-head__link a:focus-visible,
.entry-content .ehb-page-hero__link a:hover,
.entry-content .ehb-page-hero__link a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Carousels, one system: prev/next pair in the section head (desktop), a thin magenta progress line under any row that scrolls,
   and edge fades so a partly visible card melts away inside its container. */
/* Arrows live over the row, on its left and right edges, and appear on hover or
   keyboard focus — healthpost.com.au's pattern. The row scrolls on its own
   (wheel, trackpad, touch, and pointer drag from carousel.js), so the buttons
   are a convenience, never the only way through. */
.ehb-carousel-wrapper {
    position: relative;
    width: 100%;
}

.ehb-section-head {
    position: relative;
}

.ehb-carousel-nav {
    position: absolute;
    inset-block-start: 0;
    inset-inline: max(0px, calc((100% - var(--ehb-content-width)) / 2));
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}

.ehb-carousel-wrapper.is-scrollable:hover .ehb-carousel-nav,
.ehb-carousel-wrapper.is-scrollable:focus-within .ehb-carousel-nav {
    opacity: 1;
}

/* Same 50px solid-orchid circle as .ehb-back-to-top (content.css, footer) —
   width/height, fill, hover and focus colours all matched so every floating
   round button on the site (back-to-top, contact stack, carousel arrows)
   reads as one system. Centred on the wrapper's full height (title/price/
   button included), not just the image band, so it sits mid-list rather than
   mid-photo. */
.ehb-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--ehb-brand-orchid);
    color: var(--ehb-text-on-dark, #fff);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 20px rgba(36, 19, 32, 0.18);
    transition: background 150ms ease, opacity 150ms ease;
}

.ehb-carousel-btn--prev {
    inset-inline-start: 0;
}

.ehb-carousel-btn--next {
    inset-inline-end: 0;
}

/* A dragged row must not leave text selected behind the cursor. */
.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

.ehb-carousel-btn:hover:not(:disabled) {
    background: var(--ehb-brand-rose-plum);
}

.ehb-carousel-btn:disabled {
    opacity: .35;
    cursor: default;
}

.ehb-carousel-btn:focus-visible {
    outline: 2px solid var(--ehb-surface-paper, #fff);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .ehb-carousel-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ehb-carousel-btn {
        transition: none;
    }
}

@media (min-width: 768px) {
    .entry-content .ehb-concerns .ehb-concerns__track {
        scroll-padding-inline-start: 0;
    }
}

/* Concern row, desktop: exactly four visible cards. A fifth item makes the
   same track overflow, so carousel.js supplies the standard Home arrows. */
@media (min-width: 1024px) {
    .entry-content .ehb-concerns .ehb-concerns__track>* {
        flex: 0 0 calc((100% - 72px) / 4);
        width: calc((100% - 72px) / 4);
        min-width: 0;
        max-width: calc((100% - 72px) / 4);
    }
}

/* Concern pages: the photo sits in the reading column, owner-replaceable (a normal image block). */
.ehb-editorial figure.ehb-concern-photo {
    margin: 32px 0;
}

.ehb-editorial figure.ehb-concern-photo {
    max-width: 640px;
}

.ehb-editorial figure.ehb-concern-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ehb-radius-lg);
}

/* Address autocomplete: the dropdown is WooCommerce's own; only the fallback note is ours. */
.ehb-address-note {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ehb-text-muted);
}

/* Woo's suggestion panel, dressed like the site's search suggestions (same card, radius, blush highlight). */
.wc-block-components-address-autocomplete-container .wc-block-components-address-autocomplete-suggestions {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--ehb-line-subtle);
    border-radius: 12px;
    background: var(--ehb-surface-paper);
    box-shadow: 0 12px 32px rgba(36, 19, 32, .12);
}

.wc-block-components-address-autocomplete-suggestions .suggestions-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-block-components-address-autocomplete-suggestions .wc-block-components-address-autocomplete-suggestion {
    padding: 10px 12px;
    border-radius: 8px;
    font: 400 14px/20px var(--ehb-font-body);
    color: var(--ehb-text-ink);
}

.wc-block-components-address-autocomplete-suggestions .wc-block-components-address-autocomplete-suggestion:hover,
.wc-block-components-address-autocomplete-suggestions .wc-block-components-address-autocomplete-suggestion[aria-selected="true"] {
    background: var(--ehb-surface-blush);
}

.wc-block-components-address-autocomplete-suggestions .wc-block-components-address-autocomplete-suggestion:focus-visible {
    outline: 2px solid var(--ehb-brand-magenta);
    outline-offset: -2px;
}

/* Woo marks the keyboard row with .active (WP-admin blue, white text); one extra class wins without !important. */
.wc-block-components-address-autocomplete-container .wc-block-components-address-autocomplete-suggestions .suggestions-list .wc-block-components-address-autocomplete-suggestion.active {
    background: var(--ehb-surface-blush);
    color: var(--ehb-text-ink);
}

/* My Account: notices that end in a button (empty orders: <div class="woocommerce-info">sentence <a class="button">Browse products</a></div>).
   The button was a floated, full-width pill that sat on top of the sentence; stack them in normal flow instead. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
    float: none;
    width: auto;
    margin: 0;
    padding-inline: 32px;
}

/* Lost password: Woo's .form-row-first floats to 47% width, leaving a half-width input inside the card. */
.woocommerce-account form.lost_reset_password .form-row {
    float: none;
    width: 100%;
}

/* Content placeholders are internal notes for staff (copywriter / legal), in Vietnamese: visitors do not see them. */
body:not(.logged-in) .ehb-placeholder-box {
    display: none;
}

/* Express wallets read as the last choice of the payment list: "Or pay with" (English only; other languages keep Woo's translated
   title), list-row spacing, muted 14px label like the radio descriptions. */
html[lang^="en"] .woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
    font-size: 0;
    line-height: 0;
}

html[lang^="en"] .woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title::before {
    content: "Or pay with";
    font: 400 14px/22px var(--ehb-font-body);
    color: var(--ehb-text-muted);
}

.woocommerce-checkout .wc-block-components-express-payment--checkout {
    margin: 4px 0 32px;
}

.woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container {
    margin-bottom: 10px;
}

/* Wallet buttons: the two Stripe buttons drew different outlines (Apple black, Google grey). Theme is now plain "light" (white,
   no outline) and the row draws one shared border, so both match the form fields. Woo wraps the buttons in <li> when there are
   several wallets and in <div> when there is one (Apple Pay only, since Google Pay was switched off), so both get the border;
   without it the white Apple Pay button read as a bare logo floating mid-page. */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>div {
    border: 1px solid var(--ehb-line-strong);
    overflow: hidden;
}

/* Google Pay paints its own 1px dark edge inside its iframe even in the plain theme; push the frame 2px past the row's clipped box so only the shared border shows. */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li>div,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>div>div {
    margin: -4px -2px;
}

/* Sign in / Create account. Returning customers come first: a white card, twice the weight; new customers get a quieter blush panel.
   Google is the first control in each (fastest way in), the email form follows a divider. */
.woocommerce-account:not(.logged-in) #customer_login {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}

.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    background: var(--ehb-surface-blush);
    border-color: transparent;
    box-shadow: none;
}

.woocommerce-account:not(.logged-in) #customer_login .u-column2 .woocommerce-form-register p:not(.form-row):not(.woocommerce-form-row) {
    margin: 0 0 14px;
    font: 400 14px/22px var(--ehb-font-body);
    color: var(--ehb-text-body);
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text p {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 19px;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register__submit,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__submit {
    margin-top: 16px;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font: 500 14px/20px var(--ehb-font-body);
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme input {
    accent-color: var(--ehb-brand-magenta);
}

.woocommerce-account:not(.logged-in) #customer_login .u-column2 .ehb-account-note {
    text-align: left;
}

.ehb-social-login {
    margin: 0 0 4px;
}

.ehb-social-login__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--ehb-text-muted);
}

.ehb-social-login__or::before,
.ehb-social-login__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ehb-line-subtle);
}

.woocommerce-account #customer_login .u-column2 .ehb-social-login__or::before,
.woocommerce-account #customer_login .u-column2 .ehb-social-login__or::after {
    background: var(--ehb-line-strong);
}

.ehb-social-login .nsl-container-buttons a {
    display: block;
    margin: 0;
    padding: 0;
}

.ehb-social-login .nsl-container .nsl-button.nsl-button-default {
    border: 1px solid var(--ehb-line-strong);
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
}

.ehb-social-login .nsl-container .nsl-button.nsl-button-default:hover {
    border-color: var(--ehb-brand-magenta);
}

@media (max-width: 860px) {
    .woocommerce-account:not(.logged-in) #customer_login {
        grid-template-columns: 1fr;
    }
}

/* Tabbed sign in / create account: one centred card, the two forms switch above it. */
.ehb-auth-tabs {
    display: flex;
    gap: 4px;
    width: min(480px, 100%);
    margin: 0 auto 24px;
    padding: 4px;
    border-radius: 999px;
    background: var(--ehb-surface-blush);
    box-sizing: border-box;
}

.ehb-auth-tabs button {
    flex: 1;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: 600 14px/20px var(--ehb-font-display);
    color: var(--ehb-text-body);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.ehb-auth-tabs button[aria-selected="true"] {
    background: var(--ehb-surface-paper);
    color: var(--ehb-text-ink);
    box-shadow: 0 1px 6px rgba(36, 19, 32, .10);
}

.ehb-auth-tabs button:focus-visible {
    outline: 2px solid var(--ehb-brand-magenta);
    outline-offset: 2px;
}

.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login {
    display: block;
    max-width: 480px;
    margin-inline: auto;
}

.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login .u-column1,
.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    background: var(--ehb-surface-paper);
    border: 1px solid var(--ehb-line-subtle);
    box-shadow: 0 4px 20px rgba(36, 19, 32, .04);
}

.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login .u-column2 .ehb-social-login__or::before,
.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login .u-column2 .ehb-social-login__or::after {
    background: var(--ehb-line-subtle);
}

.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* the tab already names the form */
.ehb-auth-tabbed .woocommerce-account:not(.logged-in) #customer_login [hidden] {
    display: none;
}

@media (max-width: 767px) {
    :is(.ehb-wishlist-image, .woocommerce ul.products li.product) .tinv-wraper .tinvwl_add_to_wishlist_button {
        min-height: 32px;
    }
}

/* Filter options with nothing behind them (count 0) stay visible but inert and muted, so nobody taps into an empty page. */
.ehb-filter-checkbox--empty {
    opacity: .45;
    cursor: not-allowed;
}

.ehb-filter-checkbox--empty input {
    pointer-events: none;
}

.ehb-empty-reset {
    margin: 20px 0 0;
}

/* PDP format / pack size: quiet spec pills, same vocabulary as the IN STOCK badge (Figma 6:29): 1px line/subtle, pill radius. */
.woocommerce div.product div.summary .ehb-pdp-pack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

.woocommerce div.product div.summary .ehb-pdp-pack div {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--ehb-line-subtle, #e7dce5);
    border-radius: 999px;
    background: var(--ehb-surface-raised, #fbf7fa);
}

.woocommerce div.product div.summary .ehb-pdp-pack dt {
    margin: 0;
    font: 400 12px/18px Inter, sans-serif;
    color: var(--ehb-text-muted, #6b5a65);
}

.woocommerce div.product div.summary .ehb-pdp-pack dd {
    margin: 0;
    font: 500 13px/18px Inter, sans-serif;
    color: var(--ehb-text-ink, #241320);
}

/* Narrow PDP buy row (qty + button + wishlist): 30px side padding left ~106px for the label, so ADD TO CART wrapped onto two lines. */
.woocommerce div.product div.summary form.cart .single_add_to_cart_button {
    white-space: nowrap;
}

@media (max-width: 479px) {
    .woocommerce div.product div.summary form.cart .single_add_to_cart_button {
        padding-inline: 12px;
    }
}

/* Concern pages, "Explore more in the … Centre" band: title + line + button read as one centred block (the button already was). */
.entry-content .ehb-concern-hub-link .ehb-section-head {
    align-items: center;
    text-align: center;
}

.entry-content .ehb-concern-hub-link .ehb-section-head>* {
    text-align: center;
    margin-inline: auto;
}

/* Text-only article card (Ingredient): the body carries its own top padding since there is no image above it. */
.ehb-pdp-article-card--text .ehb-pdp-article-card__body {
    padding-top: 24px;
}

/* ==========================================================================
   123website-core — Floating Buttons (Zalo / hotline / Messenger)
   Plugin default is a wide labelled pill (icon + visible text) in template colours (#ff5722 orange,
   #0068ff Facebook-blue) set as inline style per button — a labelled pill reads as a generic
   template on this brand, and stacked two- or three-deep it runs long down the corner of the
   screen. Restyled as compact circular icon buttons (the common floating-action-button convention),
   in the brand's one full-strength CTA colour. The label stays in the DOM as an accessible name —
   visually hidden, not display:none, so screen readers still announce it — and doubles as a native
   tooltip on hover/focus.
   ========================================================================== */
/* Sized to exactly one button: the others are position:absolute (below) so they don't add to this box. A plain
   flex column here left this element tall enough to cover every button whether shown or not — even a hidden
   button keeps pointer-events:none, but the *container* around it doesn't, so its empty space still intercepted
   clicks meant for whatever sits behind/above it (here, the back-to-top button). */
.c123-floating-stack {
    width: 50px !important;
    height: 50px !important;
}

/* Growing this only while hovered/open: the hover hitbox is otherwise just the 50px trigger, so moving the mouse
   up toward a revealed button crosses out of :hover before reaching it — the menu closes mid-move and the button
   above is never reachable. 290px covers every button this stack supports (up to 5, see the nth-last-child rules
   below); back-to-top sits below the trigger, not above it, so a taller hitbox here never reaches it. */
.c123-floating-stack:hover,
.c123-floating-stack:focus-within,
.c123-floating-stack.is-open {
    height: 290px !important;
}

.c123-floating-stack .c123-btn {
    width: 50px;
    height: 50px;
    padding: 0 !important;
    justify-content: center;
    background: var(--ehb-brand-orchid) !important;
    color: var(--ehb-text-on-dark) !important;
    box-shadow: 0 8px 20px rgba(36, 19, 32, 0.18);
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    bottom: 0;
}

/* Stack upward from the trigger, most-recently-added closest to it. Covers up to five buttons, comfortably more
   than a floating contact stack should ever hold. */
.c123-floating-stack .c123-btn:nth-last-child(2) {
    bottom: 60px;
}

.c123-floating-stack .c123-btn:nth-last-child(3) {
    bottom: 120px;
}

.c123-floating-stack .c123-btn:nth-last-child(4) {
    bottom: 180px;
}

.c123-floating-stack .c123-btn:nth-last-child(5) {
    bottom: 240px;
}

.c123-floating-stack .c123-btn:hover,
.c123-floating-stack .c123-btn:focus-visible {
    background: var(--ehb-brand-rose-plum) !important;
    transform: scale(1.05);
}

.c123-floating-stack .c123-btn .ico svg,
.c123-floating-stack .c123-btn .ico img {
    width: 20px;
    height: 20px;
}

/* Collapsed by default: only the trigger (last button, pinned to the corner) shows. The others reveal on hover
   (desktop) or a tap on the trigger (floating-buttons.js, for touch devices with no hover state). :focus-within
   covers keyboard users — tabbing onto a hidden button reveals the group in the same frame focus lands on it, so
   nothing is skipped. transform/opacity only, per the motion spec; reduced-motion drops the transition, not the
   function. */
.c123-floating-stack .c123-btn:not(:last-child) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.c123-floating-stack:hover .c123-btn:not(:last-child),
.c123-floating-stack:focus-within .c123-btn:not(:last-child),
.c123-floating-stack.is-open .c123-btn:not(:last-child) {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .c123-floating-stack .c123-btn:not(:last-child) {
        transition: none;
    }
}

/* Visually hidden, not display:none: keeps the label as the button's accessible name and browser tooltip. */
.c123-floating-stack .c123-btn .txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Back to top only appears after scrolling past one screen (floating-buttons.js), so reserving its 60px (50px +
   10px gap — the same 10px the contact stack uses between its own buttons, see nth-last-child below) above the
   contact stack permanently left a dead gap under the stack on a page you'd just opened. The stack now sits at the
   corner by default and steps up to make room only once back-to-top actually shows — same .is-visible timing/class
   the button itself uses, so the two move together. Its own hover-expand only ever goes further up from wherever it
   currently sits, away from back-to-top, so the two still can't collide meanwhile. */
.c123-floating-stack {
    bottom: 20px !important;
    transition: bottom 200ms ease;
}

.c123-floating-stack.ehb-has-back-to-top {
    bottom: 80px !important;
}

@media (prefers-reduced-motion: reduce) {
    .c123-floating-stack {
        transition: none;
    }
}

@media (max-width: 1023px) {
    body:has(.ehb-bottom-nav) .c123-floating-stack {
        bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.ehb-bottom-nav) .c123-floating-stack.ehb-has-back-to-top {
        bottom: calc(68px + 16px + 60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    .woocommerce-checkout:not(.woocommerce-order-received) .c123-floating-stack {
        bottom: calc(73px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .woocommerce-checkout:not(.woocommerce-order-received) .c123-floating-stack.ehb-has-back-to-top {
        bottom: calc(73px + 16px + 60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Product and cart pages: the sticky add-to-cart / proceed-to-checkout bar (.ehb-sticky-bar, 73px, same height as
	   the checkout one above) takes the bottom-nav's usual space there (show_bottom_nav() hides the nav on both),
	   but nothing previously offset the floating buttons for it — they sat on top of the bar instead of above it. */
    body:has(.ehb-sticky-bar:not([hidden])) .c123-floating-stack {
        bottom: calc(73px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.ehb-sticky-bar:not([hidden])) .c123-floating-stack.ehb-has-back-to-top {
        bottom: calc(73px + 16px + 60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   Back to top — theme's own button, anchored at the corner (the "end" of the
   floating column); the contact stack sits above it, see .c123-floating-stack
   above. Same 50px circle, same solid-orchid fill as the contact buttons, so
   the column reads as one system.
   ========================================================================== */
.ehb-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ehb-brand-orchid);
    color: var(--ehb-text-on-dark, #fff);
    box-shadow: 0 8px 20px rgba(36, 19, 32, 0.18);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.ehb-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.ehb-back-to-top:hover,
.ehb-back-to-top:focus-visible {
    background: var(--ehb-brand-rose-plum);
}

/* Mobile browsers show their own default tap-highlight and focus ring on a plain <button> when neither is styled —
   on some devices that renders as a visible amber/gold glow around the circle after a tap. The colour change above
   is already the tap feedback; suppress the OS default instead of layering a second, off-brand one on top. */
.ehb-back-to-top {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.ehb-back-to-top:focus-visible {
    outline: 2px solid var(--ehb-surface-paper, #fff);
    outline-offset: 2px;
}

/* Same bottom value as .c123-floating-stack's own mobile-nav / checkout-bar overrides above — kept in sync since
   the two share one column. */
@media (max-width: 1023px) {
    body:has(.ehb-bottom-nav) .ehb-back-to-top {
        bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) {
    .woocommerce-checkout:not(.woocommerce-order-received) .ehb-back-to-top {
        bottom: calc(73px + 16px + env(safe-area-inset-bottom, 0px));
    }

    /* Missed on the first pass: added the stack's sticky-bar offset above but not this button's own, so it stayed
	   at the base 20px on product/cart pages while the stack moved up — a mismatched gap and an overlap with the
	   bar rather than a 16px gap from it. */
    body:has(.ehb-sticky-bar:not([hidden])) .ehb-back-to-top {
        bottom: calc(73px + 16px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ehb-back-to-top {
        transition: none;
    }
}

/* --- Cookie banner (Complianz) vs the floating buttons --------------------
   Both are position:fixed in the bottom-right corner, and the plugin's own
   z-index wins, so the contact stack and back-to-top sat on top of the
   banner's Accept button — at 390px the stack covered the message text.
   The banner is a one-time interruption, so it takes the corner for as long
   as it is up and the floating controls step aside. :has() is already how
   footer.css reacts to the sticky header, so no new dependency.             */
@media (max-width: 767px) {
	body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-dismissed)) .c123-floating-stack,
	body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-dismissed)) .ehb-back-to-top {
		opacity: 0;
		pointer-events: none;
		transition: opacity 160ms ease;
	}
}

/* Banner as a small card, bottom-left (the floating buttons own bottom-right), instead of Complianz' 3-column bar
   stretched across 1440px: centred title over left text, the button parked at the far edge, an empty links row
   under it. One left-aligned column: title, message, buttons. On phones it spans the width above the bottom nav.
   The ID raises specificity over the plugin's generated banner CSS, which prints after the theme. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	left: 24px;
	right: auto;
	top: auto;
	/* !important only because Complianz' slideIn animation animates `bottom` to 0, and an animated value beats any
	   normal declaration. */
	bottom: 24px !important;
	transform: none;
	width: 400px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-lg);
	box-shadow: 0 12px 32px rgba(36, 19, 32, 0.16);
}

/* The display:flex above outranks the plugin's own `.cmplz-dismissed { display: none }`, so restate it. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 12px 32px rgba(36, 19, 32, 0.16);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 6px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links {
	display: none;
}

/* Complianz hides the title below 425px and sizes it to a centred grid cell; it is the card's heading at every width. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
	display: block;
	width: auto;
	margin: 0;
	justify-self: start;
	text-align: left;
	font: 600 16px/24px var(--ehb-font-body);
	color: var(--ehb-text-ink);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	display: block;
	margin: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	margin: 0;
	font: 400 14px/22px var(--ehb-font-body);
	color: var(--ehb-text-body);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	width: auto;
	margin-top: 12px;
}

/* Complianz' optout.css (AU, opt-out) ships Accept only and hides Decline, Preferences, the categories and Save
   preferences, expecting opt-out to happen on a cookie-statement page this site doesn't have. Reopened from the
   footer "Cookie settings" link, that left a shopper no way to turn anything off. Bring the plugin's own controls
   back (its JS already handles them): Decline + Preferences up front, categories + Save once Preferences is open. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	display: block;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories {
	display: block;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	display: none;
}

/* ≥1024px the plugin lays message and categories side by side at 49% each; in a 400px card they stack. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body {
	display: block;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body > div {
	width: auto;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 16px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	width: auto;
	min-width: 0;
	min-height: 40px;
	padding: 0 24px;
	font-size: 14px;
}

@media (max-width: 767px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		bottom: calc(73px + 12px + env(safe-area-inset-bottom, 0px)) !important;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex: 1 1 auto;
	}
}

/* The persistent "Cookie settings" tab shares the floating buttons' corner,
   and translated labels ("Cài đặt cookie") grow it back under the stack even
   after moving it aside. The footer "Cookie settings" link already reopens
   preferences at every width (consent.js clicks this tab, which still works
   while it is not displayed), so the tab itself is not shown. */
#cmplz-manage-consent .cmplz-manage-consent {
	display: none;
}

/* --- Article byline and contextual products (Response 010 §5.2) ---------
   Byline sits between the H1 and the updated date, in the same muted small
   type as the date so the hero keeps one heading. The credential is the link
   — it is what a reader would want to verify. */
.ehb-editorial-byline {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--ehb-text-ink);
}

.ehb-editorial-byline a {
	color: var(--ehb-brand-rose-plum);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ehb-article-products {
	margin-block: 40px 8px;
	padding-top: 32px;
	border-top: 1px solid var(--ehb-line-subtle);
}

.ehb-article-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 20px;
}

.ehb-editorial-body .ehb-article-products__title {
	margin: 0;
	font: 700 22px/1.25 var(--ehb-font-display);
}

.ehb-article-products__more {
	font-size: 14px;
	font-weight: 600;
	color: var(--ehb-brand-rose-plum);
}

.ehb-article-products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.ehb-article-products ul.products::before,
.ehb-article-products ul.products::after {
	content: none;
}

.ehb-article-products ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}

.ehb-editorial-body .ehb-article-products__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--ehb-text-muted);
}

/* Mobile: the same ~1.5-card swipe row as every other product strip on the
   site (--ehb-carousel-card, tokens.css) instead of a 2-column grid that left
   the third card alone on its own row. */
@media (max-width: 767px) {
	.ehb-article-products ul.products {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		padding-bottom: var(--ehb-space-8);
	}

	.ehb-article-products ul.products li.product {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		max-width: var(--ehb-carousel-card);
		scroll-snap-align: start;
	}
}

/* Yoast FAQ block (adds FAQPage to the schema graph) — same rhythm as the
   concern-page FAQ list (.ehb-faq-item in sections.css), without the
   accordion: Yoast renders every answer open. */
.ehb-editorial-body .schema-faq {
	margin-block: 32px;
	border-top: 1px solid var(--ehb-line-subtle);
}

.ehb-editorial-body .schema-faq-section {
	padding-block: 18px;
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.ehb-editorial-body .schema-faq-question {
	display: block;
	font: 600 17px/1.4 var(--ehb-font-display);
	color: var(--ehb-text-ink);
}

.ehb-editorial-body .schema-faq-answer {
	margin: 8px 0 0;
}

/* ==========================================================================
   Accessibility fixes from the 12/10/2026 axe + keyboard audit.
   ========================================================================== */

/* Magenta on the lilac surface is 4.39:1, just under 4.5 for small text. Rose-plum (brand palette) is 4.97:1. */
.ehb-shop-route--beauty p.ehb-shop-route__eyebrow,
.entry-content .ehb-shop-route--beauty p.ehb-shop-route__eyebrow,
.entry-content .ehb-page-hero--lilac .ehb-page-hero__link a,
.entry-content .ehb-page-hero--lilac .ehb-page-hero__link a:visited {
	color: var(--ehb-brand-rose-plum);
}

/* FiboSearch sets outline:none on its input and button, so keyboard focus in the header search was invisible.
   White ring: the search pill sits on the magenta header (white on magenta 5.3:1). */
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp:focus-within {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: var(--ehb-radius-pill);
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta);
	outline-offset: 2px;
}

/* Language switcher "EN ▾": 13–18px tall on phones → 24px target (WCAG 2.5.8). */
.ehb-lang__menu > summary {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}