/* 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: 1200px;
    margin-inline: auto;
}

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

.ehb-editorial-grid,
.ehb-editorial-index .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 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 .added_to_cart {
    display: inline-block;
    padding: 8px 0;
    font: 600 13px/20px var(--ehb-font-body);
    color: var(--ehb-brand-orchid);
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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-catalog-results .kadence-shop-top-row {
        top: calc(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, reading column and breadcrumb share the 1200px container's left edge. */
.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 (760px) on the container's left edge with the cover and hero; a 340px sidebar fills the right so the
   page no longer leaves 440px empty. Below 1024px the sidebar stacks under the article. */
.single-post .ehb-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(0, 340px);
    justify-content: space-between;
    gap: 48px;
    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) {
    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-blush);
}

@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;
}

.woocommerce-checkout .wc-block-components-express-payment__event-buttons {
    gap: 12px;
}

.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;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
}

@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: block;
    height: 6px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track {
    background: var(--ehb-surface-blush);
    border-radius: 3px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
    background: var(--ehb-brand-magenta);
    border-radius: 3px;
}

.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. */
.ehb-carousel-wrapper {
    position: relative;
    width: 100%;
}

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

.ehb-carousel-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 8px;
}

.ehb-carousel-btn {
    width: 40px;
    height: 40px;
    padding: 0 0 3px;
    border: 1px solid var(--ehb-line-strong);
    border-radius: 50%;
    background: var(--ehb-surface-paper);
    color: var(--ehb-brand-magenta);
    font: 400 26px/1 var(--ehb-font-body);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.ehb-carousel-btn:hover:not(:disabled) {
    background: var(--ehb-brand-magenta);
    border-color: var(--ehb-brand-magenta);
    color: #fff;
}

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

.ehb-carousel-btn:focus-visible {
    outline: 2px solid var(--ehb-brand-magenta);
    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;
    }
}

/* snap flush with the heading, not 120px in */

.ehb-hub-grid,
.ehb-product-grid {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
}

/* Concern row, desktop: exactly four cards fill the container (same 278px as the four-up skin row), so nothing is cut mid-card; the
   arrows and progress line say there are more. Below 1024px cards keep their fixed width and the edge fades. */
@media (min-width: 1024px) {
    .entry-content .ehb-concerns .ehb-concerns__track:has(:nth-child(5))>* {
        flex: 0 0 calc((100% - 72px) / 4);
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 1023px) {
    .ehb-concerns__track {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
    }
}

/* 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. */
.woocommerce-checkout .wc-block-components-express-payment__event-buttons>li {
    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 {
    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; margin: 0 0 20px; 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.
   ========================================================================== */
.c123-floating-stack {
	width: auto !important;
	align-items: flex-end;
	gap: 10px !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: relative;
}

.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;
}

/* 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;
}

/* Mobile/tablet: the bottom nav (68px) and, on checkout, the sticky Place Order bar (73px) are fixed at the same
   corner — without this the floating stack sits on top of them instead of above. */
@media (max-width: 1023px) {
	body:has(.ehb-bottom-nav) .c123-floating-stack {
		bottom: calc(68px + 16px + 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;
	}
}