/*
Theme Name: Woodmart Child
Theme URI: https://haloevape.com
Description: Halo E-Vape Woodmart child theme.
Author: Halo E-Vape
Template: woodmart
Version: 1.1.0
Text Domain: woodmart-child
*/

/* Brand palette.
   The accent is the gold taken from the logo. Contrast measured with the WCAG
   formula decides where each shade may be used:
     --halo-gold      #D7AE43  2.09:1 on white, 7.86:1 on --halo-ink
                               so: button and badge BACKGROUNDS with dark text
     --halo-gold-ink  #96701A  4.54:1 on white, passes AA
                               so: link and price TEXT on light backgrounds
   Never put white text on --halo-gold; it fails at 2.09:1. */
:root {
    --halo-ink: #1c1f27;
    --halo-copy: #767676;
    --halo-line: #e8e8e8;
    --halo-soft: #f7f7f7;
    --halo-gold: #d7ae43;
    --halo-gold-hover: #c9a038;
    --halo-gold-ink: #96701a;
    --halo-gold-soft: #fdf7e8;
}

/* Reference layout foundation: restrained black, white and grey. */
body {
    color: var(--halo-copy);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.container,
.content-layout-wrapper,
.wd-content-layout {
    max-width: 1222px;
}

a,
button,
.button,
input,
select,
textarea {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
        box-shadow .2s ease, transform .2s ease;
}

/* Header: exact black centered 42px notice bar and clean 95px navigation. */
.whb-top-bar {
    background: #060606 !important;
}

.whb-top-bar-inner {
    justify-content: center;
}

.whb-top-bar .whb-column {
    justify-content: center;
}

.whb-top-bar .wd-header-text {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.whb-top-bar .wd-social-icons:empty,
.whb-top-bar .wd-social-icons:not(:has(a)) {
    display: none !important;
}

/* Reference measures 95px exactly, so use an inset line instead of a border,
   which would add a 96th pixel to the row height. */
.whb-general-header {
    background: #fff !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07);
}

.whb-general-header .wd-nav-main > li > a {
    color: var(--halo-ink);
    letter-spacing: .02em;
}

.whb-general-header .wd-nav-main > li:is(.current-menu-item, .current_page_item) > a,
.whb-general-header .wd-nav-main > li > a:hover {
    color: var(--halo-gold-ink);
}

.whb-sticked .whb-general-header {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

/* Page titles: reference site uses a compact white title, never a green/dark hero. */
.wd-page-title.page-title {
    min-height: 0;
    padding: 20px 0 !important;
    color: var(--halo-copy) !important;
    background-color: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--halo-line);
}

.wd-page-title .entry-title {
    color: var(--halo-ink) !important;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.2;
}

.wd-page-title .wd-breadcrumbs,
.wd-page-title .wd-breadcrumbs a,
.wd-page-title .wd-nav-product-cat a {
    color: var(--halo-copy) !important;
}

.wd-page-title .wd-nav-product-cat > li > a:hover,
.wd-page-title .wd-nav-product-cat > .current-cat > a {
    color: var(--halo-gold-ink) !important;
}

/* Shop and category archives: full-width three-column layout, as on the reference. */
.woodmart-archive-shop .content-layout-wrapper {
    display: block;
}

.woodmart-archive-shop .sidebar-container {
    display: none !important;
}

.woodmart-archive-shop .site-content {
    width: 100% !important;
    max-width: none !important;
}

.woodmart-archive-shop .shop-loop-head {
    margin-bottom: 30px;
    padding-bottom: 0;
}

.woodmart-archive-shop .wd-products {
    gap: 20px;
}

.woodmart-archive-shop .wd-product {
    min-width: 0;
}

/* Product thumbnails.
   The reference site serves 3:2 landscape catalogue images, which is what makes
   its cards 320px tall at a 283px width. Our catalogue images are square, so we
   present them in the same 3:2 box and use object-fit: contain to letterbox
   rather than crop, because our vape devices are tall and a hard 3:2 crop would
   cut them off. This keeps card height in step with the reference without
   touching the uploaded media or WooCommerce image settings. */
.wd-product .product-element-top,
.wd-product .wd-product-thumb {
    overflow: hidden;
    background: #fff;
}

.wd-product .product-image-link,
.wd-product .wd-product-img-link {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    background: #fff;
}

.wd-product .product-image-link img,
.wd-product .wd-product-img-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}

.wd-product:hover .product-image-link img,
.wd-product:hover .wd-product-img-link img {
    transform: scale(1.018);
}

.wd-product .wd-entities-title {
    margin-top: 12px;
    font-weight: 500;
}

/* Prices are body-size text on white, so they use the AA-compliant gold. */
.wd-product .price,
.wd-product .amount {
    color: var(--halo-gold-ink);
}

/* Sale badge: bright gold panel needs a dark label, not the theme's white. */
.product-label.onsale {
    background: var(--halo-gold);
    color: var(--halo-ink) !important;
}

/* ---------------------------------------------------------------------------
   Homepage. Structure comes from Elementor containers holding Woodmart
   widgets, so product and category data stays dynamic. These rules only
   handle spacing and card treatment to match the measured reference layout.
   --------------------------------------------------------------------------- */

/* Reference page title measures 93px tall with 20px padding; keep the gap
   between it and the first content block tight. */
body.home .wd-page-title.page-title {
    border-bottom: 0;
}

body.home .site-content > article {
    max-width: none;
}

/* Shop Now call to action, centred under the page title like the reference. */
.halo-cta {
    margin: 6px 0 18px;
    text-align: center;
}

.halo-cta-btn {
    display: inline-block;
    padding: 12px 32px;
    color: #fff !important;
    background: #111;
    font-family: var(--wd-title-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

.halo-cta-btn:hover {
    color: var(--halo-ink) !important;
    background: var(--halo-gold);
}

/* Category rows: pin to two columns at every width, 20px gap, like the
   reference. Woodmart drives its grid from CSS custom properties, so setting
   them here overrides the shortcode default without touching the parent theme. */
.halo-cat-row {
    margin-bottom: 20px;
}

.halo-cat-row .wd-cats {
    --wd-col-lg: 2;
    --wd-col-md: 2;
    --wd-col-sm: 2;
    --wd-gap-lg: 20px;
    --wd-gap-sm: 10px;
}

/* Product carousels: 4 across on desktop, 3 on tablet, 2 on phones, matching
   the reference measurements. */
.halo-carousel {
    margin-bottom: 14px;
}

/* The shortcode emits --wd-col-md:4; the reference uses 3 on tablet. Woodmart
   writes these as an inline style, so !important is required to override it. */
.halo-carousel .wd-carousel {
    --wd-col-lg: 4 !important;
    --wd-col-md: 3 !important;
    --wd-col-sm: 2 !important;
    --wd-gap-lg: 20px !important;
    --wd-gap-sm: 10px !important;
}

/* Light band behind the on-sale carousel, full bleed like the reference. */
.halo-band {
    position: relative;
    padding: 30px 0;
}

.halo-band::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    content: "";
    transform: translateX(-50%);
    background: #f9f9f9;
}

.halo-band > * {
    position: relative;
    z-index: 1;
}

/* Category cards: reference uses a square-ish image with the label below,
   a soft shadow and no rounded corners. */
.wd-cat .wd-cat-inner,
.wd-cat .wrapp-category,
.category-grid-item .wd-cat-inner,
.category-grid-item .wrapp-category {
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

.wd-cat .category-image-wrapp img,
.category-grid-item .category-image-wrapp img,
.wd-cat .wd-cat-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .45s ease;
}

.wd-cat:hover .category-image-wrapp img,
.category-grid-item:hover .category-image-wrapp img {
    transform: scale(1.025);
}

/* Label block sits under the image, left aligned, uppercase like the reference. */
.wd-cat .wd-cat-content,
.wd-cat .hover-mask,
.category-grid-item .hover-mask {
    padding: 18px 20px;
    text-align: left;
}

.wd-cat .wd-entities-title,
.category-grid-item .wd-entities-title {
    margin: 0;
    color: var(--halo-ink);
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wd-cat .wd-cat-count,
.category-grid-item .wd-cat-count {
    margin-top: 4px;
    font-size: 13px;
}

/* Carousel section titles: reference renders a compact left aligned h4 with a
   rule running to the right of the text. */
.wd-el-title.slider-title,
.wd-products-element > .wd-el-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--halo-ink);
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
}

.wd-el-title.slider-title::after,
.wd-products-element > .wd-el-title::after {
    flex: 1 1 auto;
    height: 1px;
    content: "";
    background: var(--halo-line);
}

/* Trust row: four bordered cards, matching the reference proportions. */
.halo-trust {
    margin: 10px 0;
}

.halo-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.halo-trust-card {
    padding: 24px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--halo-line);
    transition: box-shadow .2s ease, transform .2s ease;
}

.halo-trust-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.halo-trust-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--halo-gold-soft);
}

.halo-trust-ico svg {
    width: 26px;
    height: 26px;
    fill: var(--halo-gold-ink);
}

.halo-trust-card h3 {
    margin: 0 0 8px;
    color: var(--halo-ink);
    font-size: 16px;
}

.halo-trust-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Shared section heading used by the trust, contact, brand and FAQ blocks. */
.halo-sec-title {
    margin: 0 0 8px;
    color: var(--halo-ink);
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 700;
    text-align: center;
}

.halo-sec-sub {
    margin: 0 0 22px;
    font-size: 14px;
    text-align: center;
}

/* Get in Touch cards */
.halo-touch {
    max-width: 940px;
    margin: 10px auto;
}

.halo-touch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.halo-touch-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    color: inherit !important;
    background: #fff;
    border: 1px solid var(--halo-line);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.halo-touch-card:hover {
    transform: translateY(-2px);
    border-color: #d5d5d5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.halo-touch-ico {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--halo-gold-soft);
}

.halo-touch-ico svg {
    width: 22px;
    height: 22px;
    fill: var(--halo-gold-ink);
}

.halo-touch-body {
    display: block;
    min-width: 0;
}

.halo-touch-name {
    display: block;
    color: var(--halo-ink);
    font-family: var(--wd-title-font);
    font-size: 15px;
    font-weight: 600;
}

.halo-touch-desc {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 11px text needs 4.5:1, and --halo-gold-ink only reaches 4.24:1 on the soft
   gold panel, so this badge uses a deeper gold that measures 5.75:1. */
.halo-touch-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--halo-gold-soft);
    color: #7d5c10;
    font-size: 11px;
}

.halo-touch-hours {
    margin: 18px 0 0;
    font-size: 13px;
    text-align: center;
}

/* Shop by Brand: CSS-only tabs, no JavaScript, product grids stay dynamic. */
.halo-brands {
    margin: 10px 0;
    padding: 30px 0;
    background: var(--halo-soft);
}

.halo-tabs {
    max-width: 1192px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}

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

.halo-tab-label {
    display: inline-block;
    margin: 0 4px 18px;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    color: var(--halo-copy);
    font-family: var(--wd-header-el-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.halo-tab-label:hover {
    color: var(--halo-ink);
}

.halo-tab-radio:checked + .halo-tab-label {
    border-bottom-color: var(--halo-gold);
    color: var(--halo-ink);
}

.halo-tab-radio:focus-visible + .halo-tab-label {
    outline: 2px solid var(--halo-gold-ink);
    outline-offset: 2px;
}

.halo-tab-panels {
    text-align: left;
}

.halo-tab-panel {
    display: none;
}

/* Pair each radio with its panel by position. */
.halo-tab-radio:nth-of-type(1):checked ~ .halo-tab-panels > .halo-tab-panel:nth-child(1),
.halo-tab-radio:nth-of-type(2):checked ~ .halo-tab-panels > .halo-tab-panel:nth-child(2),
.halo-tab-radio:nth-of-type(3):checked ~ .halo-tab-panels > .halo-tab-panel:nth-child(3),
.halo-tab-radio:nth-of-type(4):checked ~ .halo-tab-panels > .halo-tab-panel:nth-child(4) {
    display: block;
}

.halo-tab-panel .wd-products {
    --wd-col-lg: 4 !important;
    --wd-col-md: 3 !important;
    --wd-col-sm: 2 !important;
}

/* Popular searches chips */
.halo-popular {
    max-width: 940px;
    margin: 10px auto;
}

.halo-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.halo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--halo-line);
    border-radius: 24px;
    background: #fff;
    color: var(--halo-ink) !important;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: border-color .2s ease, background-color .2s ease,
        transform .2s ease, box-shadow .2s ease;
}

.halo-chip-ico {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: var(--halo-gold-ink);
    opacity: .85;
}

.halo-chip:hover {
    transform: translateY(-1px);
    border-color: var(--halo-gold);
    background: var(--halo-gold-soft);
    box-shadow: 0 4px 12px rgba(150, 112, 26, .12);
}

/* FAQ accordion */
.halo-faq {
    max-width: 820px;
    margin: 0 auto;
}

.halo-faq-title {
    margin-bottom: 22px;
    color: var(--halo-ink);
    font-size: clamp(22px, 2vw, 26px);
    text-align: center;
}

.halo-faq details {
    margin-bottom: 10px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--halo-line);
}

.halo-faq summary {
    color: var(--halo-ink);
    font-family: var(--wd-title-font);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.halo-faq details[open] {
    border-color: #d5d5d5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.halo-faq details p {
    margin: 12px 0 0;
    line-height: 1.7;
}

/* Closing SEO block. The reference lays this out left aligned with a heading,
   an intro paragraph, a brand list with gold underlined names, then a row of
   grey guide chips. */
.halo-seo {
    max-width: 1000px;
    margin: 0 auto;
}

.halo-seo-title {
    margin: 0 0 12px;
    color: var(--halo-ink);
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 700;
}

.halo-seo-sub {
    margin: 26px 0 12px;
    color: var(--halo-ink);
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 700;
}

.halo-seo p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.halo-brand-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.halo-brand-list li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.7;
}

.halo-brand-list a {
    color: var(--halo-gold-ink) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.halo-brand-list a:hover {
    text-decoration-thickness: 2px;
}

.halo-brand-list span {
    color: var(--halo-copy);
}

.halo-guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.halo-guide-chip {
    display: inline-block;
    padding: 8px 14px;
    background: var(--halo-soft);
    border: 1px solid var(--halo-line);
    color: var(--halo-copy) !important;
    font-size: 13px;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.halo-guide-chip:hover {
    border-color: var(--halo-gold);
    background: var(--halo-gold-soft);
    color: var(--halo-gold-ink) !important;
}

@media (max-width: 768px) {
    .halo-seo-sub {
        margin-top: 20px;
    }

    .halo-guide-chip {
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* Content, product, account, cart and checkout pages share one visual system. */
body.page:not(.woocommerce-page):not(.home) .site-content > article {
    max-width: 960px;
    margin: 0 auto;
}

body.page:not(.home) .main-page-wrapper,
.single-product .main-page-wrapper,
.blog .main-page-wrapper,
.single-post .main-page-wrapper {
    padding-bottom: 70px;
}

.entry-content h2,
.entry-content h3,
.woocommerce h2,
.woocommerce h3 {
    color: var(--halo-ink);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    min-height: 44px;
    background: #fff;
    border-color: #dcdcdc;
    border-radius: 0;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--halo-gold-ink);
    box-shadow: 0 0 0 1px var(--halo-gold-ink);
}

.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    background: #fff;
    border-color: var(--halo-line);
}

.single-product .product-image-summary-wrap {
    padding-top: 45px;
}

.single-product .summary .product_title {
    color: var(--halo-ink);
    line-height: 1.2;
}

.single-product .woocommerce-tabs {
    margin-top: 55px;
    border-top: 1px solid var(--halo-line);
}

/* ---------------------------------------------------------------------------
   Footer: five columns of small type, matching the reference proportions.
   The footer bar background is white, so the dark logo asset is the correct one.
   --------------------------------------------------------------------------- */
.wd-footer {
    border-top: 1px solid var(--halo-line);
}

.wd-footer .footer-sidebar {
    padding-top: 46px;
    padding-bottom: 30px;
}

.halo-fcol p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.65;
}

.halo-fcol-title {
    margin: 0 0 14px;
    color: var(--halo-ink);
    font-family: var(--wd-title-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.halo-flinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.halo-flinks li {
    margin-bottom: 9px;
}

.halo-flinks a {
    color: var(--halo-copy) !important;
    font-size: 13px;
    line-height: 1.4;
}

.halo-flinks a:hover {
    color: var(--halo-gold-ink) !important;
}

.halo-fbrand-logo {
    display: inline-block;
    margin-bottom: 16px;
}

.halo-fbrand-logo img {
    width: auto;
    max-width: 200px;
    height: auto;
}

.halo-fbrand-email a {
    color: var(--halo-gold-ink) !important;
}

@media (max-width: 768px) {
    .wd-footer .footer-sidebar {
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .halo-fcol-title {
        margin-bottom: 10px;
    }

    .halo-flinks li {
        margin-bottom: 7px;
    }
}

/* ---------------------------------------------------------------------------
   Floating support launcher.
   The reference site runs a custom server-side AI chat plugin. We deliberately
   do not reproduce that: it needs an LLM backend and an API key. This is a
   self-contained launcher that opens real contact routes, loads no third party
   script and sends no visitor data anywhere. Geometry matches the reference
   (58px button, 18px inset, bottom right).
   --------------------------------------------------------------------------- */
.halo-support {
    --halo-support-bottom: calc(18px + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 400;
    right: 18px;
    bottom: var(--halo-support-bottom);
}

.halo-support-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* The launcher shows the support avatar. A photo carries its own contrast, so
   there is no text-on-gold problem here; the gold appears as the ring. */
.halo-support-btn {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-inline-start: auto;
    padding: 0;
    border: 2px solid var(--halo-gold);
    border-radius: 50%;
    background: var(--halo-ink);
    box-shadow: 0 14px 36px rgba(28, 31, 39, .3);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.halo-support-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.halo-support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(28, 31, 39, .38);
}

.halo-support-toggle:focus-visible + .halo-support-btn {
    outline: 3px solid var(--halo-gold-ink);
    outline-offset: 3px;
}

/* Panel header: avatar beside the title, like a real support conversation. */
.halo-support-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.halo-support-head-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--halo-gold);
    border-radius: 50%;
    object-fit: cover;
}

/* Closed state shows only the button; checked state reveals the panel. */
.halo-support-panel {
    display: none;
    width: min(340px, calc(100vw - 36px));
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--halo-line);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}

.halo-support-toggle:checked ~ .halo-support-panel {
    display: block;
}

.halo-support-head {
    padding: 14px 16px;
    background: #111;
    color: #fff;
}

.halo-support-head strong {
    display: block;
    font-size: 14px;
}

.halo-support-head > span > span {
    font-size: 12px;
    opacity: .72;
}

/* Panel body scrolls once the order lookup form is injected. */
.halo-support-panel {
    max-height: min(76vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.halo-support-list {
    padding: 8px;
    border-top: 1px solid var(--halo-line);
}

/* Order lookup and quick answers, injected by the shop-order-lookup plugin. */
.sol-host {
    padding: 12px 14px 4px;
}

.sol-host-title {
    margin: 0 0 8px;
    color: var(--halo-ink);
    font-family: var(--wd-title-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.sol-host-title:not(:first-child) {
    margin-top: 16px;
}

.sol-field {
    display: block;
    margin-bottom: 8px;
}

.sol-field > span {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
}

.sol-field input {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
}

/* Woodmart styles bare <button> elements, so this needs the extra specificity
   of the panel scope plus !important to keep the gold and its dark label. */
.halo-support-panel .sol-submit,
button.sol-submit {
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    color: var(--halo-ink) !important;
    background: var(--halo-gold) !important;
    border: 0;
    font-family: var(--wd-title-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.halo-support-panel .sol-submit:hover:not(:disabled),
button.sol-submit:hover:not(:disabled) {
    background: var(--halo-gold-hover) !important;
}

.sol-submit:disabled {
    opacity: .65;
    cursor: default;
}

.sol-result:empty {
    display: none;
}

.sol-result {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--halo-line);
    font-size: 13px;
}

.sol-result.is-error {
    border-color: #e6c9c9;
    background: #fdf6f6;
    color: #9a3232;
}

.sol-result.is-ok {
    border-color: #cfe6da;
    background: #f5fbf7;
}

.sol-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sol-badge {
    padding: 2px 9px;
    border-radius: 10px;
    background: #e9eef2;
    color: #3a4a55;
    font-size: 11px;
    text-transform: capitalize;
}

.sol-badge.sol-status-processing,
.sol-badge.sol-status-completed {
    background: #e2f3e9;
    color: #1e6a3d;
}

.sol-badge.sol-status-on-hold,
.sol-badge.sol-status-pending {
    background: #fdf2dd;
    color: #8a5b12;
}

.sol-badge.sol-status-cancelled,
.sol-badge.sol-status-failed,
.sol-badge.sol-status-refunded {
    background: #f7e4e4;
    color: #9a3232;
}

.sol-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0 0 8px;
}

.sol-meta dt {
    color: var(--halo-copy);
    font-size: 12px;
}

.sol-meta dd {
    margin: 0;
    color: var(--halo-ink);
    font-size: 12px;
}

.sol-items-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
}

.sol-items {
    margin: 0 0 8px;
    padding-left: 16px;
    font-size: 12px;
}

.sol-track {
    margin: 0 0 6px;
    font-size: 12px;
}

.sol-track-link {
    color: var(--halo-gold-ink) !important;
    text-decoration: underline;
}

.sol-guidance {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.sol-answers details {
    margin-bottom: 6px;
    padding: 8px 10px;
    border: 1px solid var(--halo-line);
}

.sol-answers summary {
    color: var(--halo-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sol-answers p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
}

.halo-support-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--halo-ink) !important;
    font-size: 13px;
}

.halo-support-list a:hover {
    background: var(--halo-soft);
}

.halo-support-list svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: var(--halo-gold-ink);
}

/* Keep clear of Woodmart's bottom toolbar so neither control is unreachable.
   The toolbar is present up to and including 1024px, not just on phones, so the
   offset has to lift at the same breakpoint the toolbar appears. */
@media (max-width: 1024px) {
    body.sticky-toolbar-on .halo-support {
        --halo-support-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 768px) {
    .halo-support-btn {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .halo-support-btn svg {
        width: 22px;
        height: 22px;
    }
}

@media print {
    .halo-support {
        display: none;
    }
}

/* Responsive behaviour mirrors the reference: two cards/products on mobile. */
@media (max-width: 1024px) {
    .halo-touch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .halo-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .whb-top-bar .whb-visible-lg {
        display: none !important;
    }

    .whb-top-bar .whb-hidden-lg {
        display: flex !important;
        width: 100%;
    }

    .whb-top-bar .wd-header-text {
        font-size: 10px;
        letter-spacing: .045em;
    }

    .wd-page-title.page-title {
        padding: 16px 0 !important;
    }

    .wd-cat .wd-cat-content,
    .wd-cat .hover-mask,
    .category-grid-item .hover-mask {
        padding: 12px 14px;
    }

    .wd-cat .wd-entities-title,
    .category-grid-item .wd-entities-title {
        font-size: 13px;
        letter-spacing: .04em;
    }

    .wd-el-title.slider-title,
    .wd-products-element > .wd-el-title {
        margin-bottom: 14px;
        font-size: 17px;
    }

    .halo-trust-card {
        padding: 18px 14px;
    }

    .halo-trust-ico {
        width: 46px;
        height: 46px;
        margin-bottom: 10px;
    }

    .halo-trust-ico svg {
        width: 22px;
        height: 22px;
    }

    .halo-trust-card h3 {
        font-size: 14px;
    }

    .halo-trust-card p {
        font-size: 12px;
    }

    .halo-faq details {
        padding: 14px 16px;
    }

    .halo-touch-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .halo-touch-card {
        padding: 14px 16px;
    }

    .halo-brands {
        padding: 22px 0;
    }

    .halo-tab-label {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .halo-tab-panel .wd-products {
        --wd-col-lg: 2 !important;
        --wd-col-md: 2 !important;
        --wd-col-sm: 2 !important;
    }

    .halo-chip {
        padding: 8px 13px;
        font-size: 12px;
    }

    .woodmart-archive-shop .shop-loop-head {
        margin-bottom: 20px;
    }
}

@media (max-width: 420px) {
    .halo-trust-grid {
        grid-template-columns: 1fr;
    }
}