/* HomTex: quick UX fixes on top of Profitbuy (mobile first). */

/* ---------- Mobile header: search row + language switch ---------- */
.ht-lang { font-size: 13px; }
.ht-lang a { color: rgba(0, 0, 0, 0.6); padding: 0 2px; }
.ht-lang a.active { color: rgba(0, 0, 0, 0.87); font-weight: 700; }

@media only screen and (max-width: 992px) {
    .nav-wrapper { height: auto; }
    .nav-wrapper .container { position: relative; }
    body { padding-top: 112px; }
    .ht-lang { position: absolute; top: 0; right: 64px; height: 56px; line-height: 56px; }
    .ht-msearch-row { line-height: normal; padding-bottom: 8px; }
    .ht-msearch { position: relative; margin: 0; }
    .ht-msearch input[type="search"] {
        box-sizing: border-box; width: 100%; height: 44px; margin: 0;
        padding: 0 48px 0 14px; font-size: 16px; /* 16px: no iOS zoom on focus */
        border: 1px solid #ddd; border-radius: 12px; background: #fff; box-shadow: none;
    }
    .ht-msearch input[type="search"]:focus { border-color: #9e9e9e; box-shadow: none; }
    .ht-msearch button {
        position: absolute; top: 0; right: 0; width: 48px; height: 44px; line-height: 44px;
        border: 0; background: transparent; color: #555; padding: 0; cursor: pointer;
    }
}

/* ---------- Product page ---------- */
/* Mobile: photo first, then title, then price/buy, then details. */
@media only screen and (max-width: 992px) {
    .product-wrapper { display: flex; flex-direction: column; }
    .product-wrapper > .ht-p-gallery { order: 1; }
    .product-wrapper > .ht-p-title { order: 2; }
    .product-wrapper > .ht-p-buy { order: 3; }
    .product-wrapper > .ht-p-info { order: 4; }
    .product-wrapper > .ht-p-title h1 { font-size: 1.6rem; line-height: 1.25; margin: 0.5rem 0 0; }
    .product-wrapper > .ht-p-title .addition-wrapper { display: none; }

    /* compact quantity stepper next to the button */
    .add2cart .qty-wrapper {
        display: inline-flex; align-items: center; vertical-align: middle;
        box-sizing: border-box; width: 128px; margin-top: 1rem; border: 1px solid #ddd; border-radius: 10px; background: #fff;
    }
    .add2cart .qty-wrapper .qty-minus,
    .add2cart .qty-wrapper .qty-plus {
        width: 40px; height: 46px; line-height: 46px; margin: 0; padding: 0;
        background: none !important; box-shadow: none !important; color: #333;
    }
    .add2cart .qty-wrapper .qty-minus i,
    .add2cart .qty-wrapper .qty-plus i { font-size: 22px; line-height: 46px; }
    .add2cart .qty-wrapper input[type="text"] {
        width: 44px; height: 46px; margin: 0; padding: 0; border: 0; box-shadow: none;
        text-align: center; font-size: 16px; background: transparent;
    }
    .add2cart .submit-wrapper {
        display: inline-block; vertical-align: middle;
        width: calc(100% - 140px); margin: 1rem 0 0 8px;
    }
    .add2cart .submit-wrapper input[type="submit"] { height: 48px; line-height: 48px; border-radius: 10px; }
}

/* Delivery / payment / returns next to the buy button */
.ht-service { margin-top: 1rem; border: 1px solid #ececec; border-radius: 12px; padding: 0 12px; background: #fff; }
.ht-service-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #f0f0f0; line-height: 1.35; }
.ht-service-row:first-child { border-top: 0; }
.ht-service-row i.material-icons { color: #2e7d32; font-size: 22px; flex-shrink: 0; }
.ht-service-row b { display: block; font-weight: 600; color: #333; }
.ht-service-row span { color: #666; font-size: 13px; }
.ht-service-row a { color: inherit; text-decoration: underline; text-decoration-color: #ccc; }

/* Sticky buy bar (mobile) */
.ht-sticky-buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(110%); transition: transform .2s ease;
}
.ht-sticky-buy.is-visible { transform: translateY(0); }
.ht-sticky-buy .ht-sb-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ht-sticky-buy .ht-sb-now { font-weight: 700; font-size: 18px; color: #333; white-space: nowrap; }
.ht-sticky-buy .ht-sb-old { font-size: 12px; color: #999; text-decoration: line-through; white-space: nowrap; }
.ht-sticky-buy .ht-sb-btn { flex: 1; height: 48px; border-radius: 10px; font-weight: 700; margin: 0; }
body.ht-has-sticky-buy { padding-bottom: 72px; }
@media only screen and (min-width: 993px) {
    .ht-sticky-buy { display: none !important; }
    body.ht-has-sticky-buy { padding-bottom: 0; }
}

/* ---------- Badges (bdg plugin) ---------- */
/* z-index 9999 from the plugin put badges above the fixed header while scrolling */
.badge_ { z-index: 5; }
/* The badge text is one value for both languages ("Скидка"); show Ukrainian on UA pages */
html[lang="uk"] .badge_.desc span { font-size: 0; }
html[lang="uk"] .badge_.desc span::after { content: "Знижка"; font-size: 1rem; }

/* ---------- Home page ---------- */
.ht-home-cats { margin-bottom: 1rem; }
.ht-home-h { margin: 0 0 12px; font-size: 1.5rem; font-weight: 500; }
.ht-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ht-cat-grid li { margin: 0; padding: 0; list-style: none; }
.ht-cat-grid li.ht-cat-wide { grid-column: span 2; }
.ht-cat-grid a { position: relative; display: block; height: 130px; border-radius: 14px; overflow: hidden; background: #f1ebe3; }
.ht-cat-grid li.ht-cat-wide a { height: 170px; }
.ht-cat-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-cat-grid span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px;
    background: linear-gradient(to top, rgba(20, 16, 12, .72), rgba(20, 16, 12, 0));
    color: #fff; font-weight: 500; font-size: 15px; line-height: 1.2;
}
.ht-cat-grid li.ht-cat-wide span { font-size: 19px; }
.ht-all-cats {
    display: block; width: 100%; height: 46px; margin-top: 10px; border-radius: 12px;
    border: 1px solid #ddd; background: #fff; color: #333; font-size: 15px; font-weight: 500; cursor: pointer;
}
@media only screen and (min-width: 993px) {
    .ht-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .ht-cat-grid a { height: 200px; }
    .ht-cat-grid li.ht-cat-wide { grid-row: span 2; }
    .ht-cat-grid li.ht-cat-wide a { height: 416px; }
    .ht-cat-grid li.ht-cat-wide span { font-size: 24px; padding: 40px 20px 18px; }
}

.ht-home-usp ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ht-home-usp li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; list-style: none; border: 1px solid #eee; border-radius: 12px; background: #fff; line-height: 1.3; }
.ht-home-usp i.material-icons { color: #2e7d32; font-size: 22px; flex-shrink: 0; }
.ht-home-usp b { display: block; font-weight: 600; font-size: 14px; color: #333; }
.ht-home-usp span { font-size: 13px; color: #666; }
@media only screen and (min-width: 993px) {
    .ht-home-usp ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* product carousels: 2 cards per view on phones (owl config), make the cards fit */
@media only screen and (max-width: 480px) {
    .product-list.carousel .pl-item-info h5 { font-size: 14px; line-height: 1.3; }
    .product-list.carousel .price { font-size: 1.1em; }
    .product-list.carousel .compare-at-price { font-size: 0.85em; margin-right: 4px; }
    .product-list.carousel input[type="submit"],
    .product-list.carousel input[type="button"] { font-size: 12px; padding: 0 6px; }
}

/* ---------- Catalog menu: mobile pane ---------- */
.tree-wrapper.hide-on-large-only { display: none; } /* old "Категорії" bar: catalog lives in the burger menu now */
.ht-burger { display: flex !important; align-items: center; gap: 4px; padding-right: 8px; }
.ht-burger-label { font-size: 15px; font-weight: 500; line-height: 56px; }

.mobile-nav-wrapper .mobile-nav-block-wrapper.ht-mm {
    width: 100%; max-width: 480px; padding: 0 16px 32px; background: #fbf8f4; color: #222;
}
.ht-mm-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    height: 56px; margin: 0 -16px 8px; padding: 0 8px 0 16px; background: #fff; border-bottom: 1px solid #eee;
}
.ht-mm-title { font-size: 20px; font-weight: 600; }
.ht-mm-close { width: 44px; height: 44px; border: 0; background: transparent; color: #333; cursor: pointer; padding: 0; }
.mobile-nav-wrapper .ht-mm ul.ht-mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; padding: 0; }
.mobile-nav-wrapper .ht-mm ul.ht-mm-tiles li { border: 0; line-height: normal; color: inherit; background: none; }
.mobile-nav-wrapper .ht-mm ul.ht-mm-tiles li:hover { background: none; }
.ht-mm-tiles li.ht-mm-wide { grid-column: span 2; }
.mobile-nav-wrapper .ht-mm .ht-mm-tile {
    position: relative; display: block; width: 100%; height: 104px; padding: 0; margin: 0; border: 0; border-radius: 14px;
    overflow: hidden; background: #e4ece5; text-align: left; cursor: pointer; white-space: normal;
}
.ht-mm-tiles li.ht-mm-wide .ht-mm-tile { height: 132px; }
.ht-mm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-mm-tile span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2;
    background: linear-gradient(to top, rgba(20, 16, 12, .75), rgba(20, 16, 12, 0));
}
.ht-mm-tiles li.ht-mm-noimg .ht-mm-tile span { background: none; color: #1f3d2c; top: 0; display: flex; align-items: flex-end; }
.ht-mm-tiles li.ht-mm-wide .ht-mm-tile span { font-size: 18px; }

.mobile-nav-wrapper .ht-mm a.ht-mm-sale, .mobile-nav-wrapper .ht-mm a.ht-mm-row, .ht-mm-back {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; padding: 0 4px;
    color: #222; font-size: 16px; text-decoration: none; border-bottom: 1px solid #ece6dd; white-space: normal;
}
.mobile-nav-wrapper .ht-mm a.ht-mm-sale { padding: 0 14px; margin-bottom: 4px; border: 0; border-radius: 12px; background: #f8e5e0; color: #9a2f1e; font-weight: 600; }
.ht-mm-row i.material-icons, .ht-mm-sale i.material-icons { color: #999; font-size: 22px; }
.ht-mm-sale i.material-icons { color: #9a2f1e; }
.ht-mm-back {
    width: calc(100% + 32px); margin: -8px -16px 8px; padding: 0 12px; justify-content: flex-start; border: 0; border-bottom: 1px solid #eee;
    background: #fff; font-size: 18px; font-weight: 600; cursor: pointer;
}
.mobile-nav-wrapper .ht-mm a.ht-mm-cat { font-weight: 600; }
.ht-mm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 14px; border-bottom: 1px solid #ece6dd; }
.mobile-nav-wrapper .ht-mm .ht-mm-chips a {
    display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid #ddd3c6; border-radius: 999px;
    background: #fff; color: #222; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.ht-mm-h { margin: 24px 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b635b; }
.ht-mm-contact { margin: 20px 0 4px; }
.mobile-nav-wrapper .ht-mm a.ht-mm-phone { font-size: 20px; font-weight: 600; color: #222; text-decoration: none; }
.ht-mm-lang { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: #6b635b; }
.mobile-nav-wrapper .ht-mm .ht-mm-lang a { padding: 6px 12px; border: 1px solid #ddd3c6; border-radius: 8px; color: #222; text-decoration: none; }
.mobile-nav-wrapper .ht-mm .ht-mm-lang a.active { background: #222; border-color: #222; color: #fff; }

/* ---------- Catalog menu: desktop mega menu ---------- */
.ht-mega-wrapper { position: relative; z-index: 900; background: #f5f5f5; border-bottom: 1px solid rgba(51, 51, 51, 0.12); }
.ht-mega-wrapper .container { position: relative; }
.ht-mega { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ht-mega-item { position: static; margin: 0; list-style: none; }
.ht-mega-link {
    display: block; height: 52px; line-height: 52px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: #222; font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.ht-mega-link:hover, .ht-mega-item.is-open > .ht-mega-link, .ht-mega-item:hover > .ht-mega-link { color: #2e5a45; border-bottom-color: #2e5a45; }
.ht-mega-item.is-active > .ht-mega-link { color: #2e5a45; }
.ht-mega-sale .ht-mega-link { color: #b83a26; font-weight: 600; }
.ht-mega-panel {
    position: absolute; left: 0.75rem; right: 0.75rem; top: 100%; display: flex; gap: 32px; padding: 28px 28px 32px;
    background: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 24px 48px rgba(34, 31, 28, .16);
    visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .12s;
}
.ht-mega-item:hover > .ht-mega-panel, .ht-mega-item.is-open > .ht-mega-panel, .ht-mega-item:focus-within > .ht-mega-panel {
    visibility: visible; opacity: 1; transition-delay: .12s, .12s; /* small hover intent delay */
}
.ht-mega-cols { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 32px; align-content: start; }
.ht-mega-cat { display: block; margin-bottom: 8px; color: #222; font-size: 16px; font-weight: 600; }
.ht-mega-col ul { margin: 0; padding: 0; list-style: none; }
.ht-mega-col li { margin: 0; list-style: none; }
.ht-mega-col li a { display: block; padding: 5px 0; color: #444; font-size: 15px; }
.ht-mega-col a:hover { color: #2e5a45; }
.ht-mega-all { display: inline-block; margin-top: 6px; color: #2e5a45; font-weight: 600; }
.ht-mega-promo { position: relative; flex: 0 0 280px; min-height: 260px; border-radius: 16px; overflow: hidden; background: #f1ebe3; }
.ht-mega-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-mega-promo span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff; font-size: 18px; font-weight: 600;
    background: linear-gradient(to top, rgba(20, 16, 12, .75), rgba(20, 16, 12, 0));
}

/* links and buttons in the bar must look the same (theme styles nav links) */
.ht-mega-wrapper .ht-mega .ht-mega-link { display: block; height: 52px; line-height: 52px; margin: 0; padding: 0 14px; }
/* group without subcategories: plain list of categories */
.ht-mega-cols.ht-mega-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.ht-mega-flat .ht-mega-cat { margin: 0; padding: 10px 0; font-weight: 500; border-bottom: 1px solid #f0ebe4; }
.ht-mega-promo { min-height: 220px; }
.ht-mega-item.ht-mega-sale { position: relative; }
.ht-mega-panel.ht-mega-small { left: auto; right: 0; width: 300px; padding: 16px 20px; border-radius: 0 0 14px 14px; }
.ht-mega-small .ht-mega-cols.ht-mega-flat { grid-template-columns: 1fr; }

/* ---------- Category filters ---------- */
.ht-plbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.ht-plcount { color: #6b635b; font-size: 14px; }
.ht-filter-open {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
    background: #222; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ht-filter-open i.material-icons { font-size: 20px; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
@media only screen and (max-width: 992px) {
    .ht-chips.ht-quick { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-right: -0.75rem; padding-right: 0.75rem; scrollbar-width: none; }
    .ht-chips.ht-quick::-webkit-scrollbar { display: none; }
}
.ht-chip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 38px; padding: 0 14px; border: 1px solid #ddd3c6;
    border-radius: 999px; background: #fff; color: #222 !important; font-size: 14px; white-space: nowrap; text-decoration: none;
}
.ht-chip.is-on { background: #222; border-color: #222; color: #fff !important; }
.ht-chip i.material-icons { font-size: 16px; }
.ht-reset { display: inline-flex; align-items: center; height: 38px; padding: 0 6px; font-size: 14px; text-decoration: underline; }

/* long value lists in the filter */
.filters .filter-content label.ht-fmore { display: none; }
.filters .filter-content.ht-fall label.ht-fmore { display: block; }
.filters .filter-content label.ht-fhide { display: none !important; }
.ht-fmore-btn { margin: 6px 0 2px; padding: 0; border: 0; background: none; color: #2e5a45; font-weight: 600; cursor: pointer; }
.filters input.ht-fsearch {
    box-sizing: border-box; width: 100%; height: 40px; margin: 0 0 8px; padding: 0 12px; font-size: 16px;
    border: 1px solid #ddd; border-radius: 10px; background: #fff; box-shadow: none;
}

/* mobile filter sheet */
.sidebar-group.ht-fmoved { display: none; }
.ht-fsheet[hidden] { display: none; }
.ht-fsheet { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .4); }
.ht-fsheet-box { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.ht-fsheet-head {
    display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px;
    border-bottom: 1px solid #eee; font-size: 20px; font-weight: 600; flex-shrink: 0;
}
.ht-fsheet-close { width: 44px; height: 44px; border: 0; background: none; color: #333; cursor: pointer; padding: 0; }
.ht-fsheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.ht-fsheet-body .filters { padding: 0; }
.ht-fsheet-body .filters .filter-param { border-bottom: 1px solid #f0ebe4; padding: 4px 0 8px; }
.ht-fsheet-body .filters h5.collapsible { margin: 0; padding: 14px 0; font-size: 16px; font-weight: 600; cursor: pointer; }
.ht-fsheet-body .filters .filter-content label { display: block; padding: 9px 0; font-size: 15px; line-height: 1.3; }
.ht-fsheet-body .filters .filter-param.controls { display: none; } /* sheet has its own buttons */
.ht-fsheet-foot {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee; flex-shrink: 0;
}
.ht-fsheet-reset { padding: 0 8px; color: #333; text-decoration: underline; white-space: nowrap; }
.ht-fsheet-apply { flex: 1; height: 48px; border: 0; border-radius: 10px; background: #ff8c18; color: #fff; font-size: 15px; font-weight: 700; margin: 0; cursor: pointer; }
.ht-fsheet-apply:hover { background: #d56b00; }
body.ht-fsheet-open { overflow: hidden; }
@media only screen and (min-width: 993px) {
    .ht-fsheet { display: none !important; }
}
.ht-mega-wrapper .ht-mega-sale .ht-mega-link { color: #b83a26; border-bottom-color: transparent; }
.ht-mega-wrapper .ht-mega-sale:hover > .ht-mega-link, .ht-mega-wrapper .ht-mega-sale.is-open > .ht-mega-link { color: #b83a26; border-bottom-color: #b83a26; }

/* "by size" links in the mega menu */
.ht-mega-col ul.ht-mega-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ht-mega-col ul.ht-mega-sizes li a {
    display: inline-block; padding: 5px 10px; border: 1px solid #e3dcd2; border-radius: 999px; font-size: 13px; color: #333; line-height: 1.2;
}
.ht-mega-col ul.ht-mega-sizes li a:hover { border-color: #2e5a45; color: #2e5a45; }
/* captions above the "by size" / "by fabric" chip rows */
.ht-mega-col .ht-mega-ftitle { margin: 10px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8178; }
.ht-mm-fchips { align-items: center; }
.ht-mm-ftitle { flex: 0 0 100%; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8178; }
/* vector logo: keep proportions when the header squeezes it */
a#logo img#logo-image { height: auto; }

/* ---------- Batch 9: top bar, footer, bottom navigation ---------- */
.ht-topbar {
    background: #1d4a33; color: #f1ede6; text-align: center;
    font-size: 13px; line-height: 1.35; padding: 7px 12px;
}

.globalfooter { background: #1d2a23; color: #e6dfd3; }
.ht-footer { padding: 28px 0 20px; }
.ht-footer a { color: #e6dfd3; text-decoration: none; }
.ht-footer a:hover { color: #fff; text-decoration: underline; }
.ht-f-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-bottom: 20px; border-bottom: 1px solid #34433a; }
.ht-footer a.ht-f-phone { font-size: 22px; font-weight: 600; color: #fff; }
.ht-f-hours { font-size: 14px; color: #b8b0a4; }
.ht-f-social { display: flex; gap: 8px; margin-left: auto; }
.ht-footer .ht-f-social a {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
    border: 1px solid #4a5a50; border-radius: 999px; font-size: 14px;
}
.ht-footer .ht-f-social a:hover { background: #2b3a31; text-decoration: none; }
.ht-f-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 20px 0; }
.ht-f-head {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: 0 0 10px; background: none; border: 0; color: #fff;
    font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: default;
}
.ht-f-head i { display: none; }
.ht-f-list { list-style: none; margin: 0; padding: 0; }
.ht-f-list li { padding: 4px 0; font-size: 14px; line-height: 1.4; color: #b8b0a4; }
.ht-f-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    padding-top: 16px; border-top: 1px solid #34433a; font-size: 13px; color: #b8b0a4;
}
.ht-f-pay .payments-wrapper { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.ht-f-pay .payments-logo { background-color: #fff; border-radius: 4px; }
.ht-f-counters { height: 0; overflow: hidden; }
@media only screen and (min-width: 993px) {
    .ht-footer { padding-bottom: 72px; } /* room for the fixed desktop pane (bookmarks / compare / cart) */
}

@media only screen and (max-width: 992px) {
    .ht-footer { padding: 22px 0 16px; }
    .ht-footer .container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; width: 100%; }
    .ht-f-social { margin-left: 0; width: 100%; }
    .ht-f-cols { display: block; padding: 0; }
    .ht-f-col { border-bottom: 1px solid #34433a; }
    .ht-f-head { min-height: 52px; padding: 0; cursor: pointer; }
    .ht-f-head i { display: inline-block; transition: transform .15s ease; }
    .ht-f-col.is-open .ht-f-head i { transform: rotate(45deg); }
    .ht-f-list { display: none; padding-bottom: 12px; }
    .ht-f-col.is-open .ht-f-list { display: block; }
    .ht-f-list li a { display: inline-block; padding: 6px 0; }
    .ht-f-bottom { border-top: 0; }
    .ht-f-pay { display: none; }
}

.ht-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 980;
    display: flex; background: #fff; border-top: 1px solid #ece6dd;
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(34, 31, 28, .06);
}
.ht-tabbar .ht-tab {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 52px; padding: 4px 0; float: none; width: auto; height: auto; line-height: 1.1;
    font-size: 11px; font-weight: 500; color: #6b635b; text-decoration: none; background: none; text-transform: none;
}
.ht-tabbar .ht-tab i.material-icons { font-size: 24px; line-height: 1; color: inherit; }
.ht-tabbar .ht-tab.is-on { color: #1d4a33; }
.ht-tab-n {
    position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #b83a26; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
body.ht-has-tabbar { padding-bottom: 60px; }
@media only screen and (min-width: 993px) {
    .ht-tabbar { display: none !important; }
    body.ht-has-tabbar { padding-bottom: 0; }
}

/* ---------- Batch 10: product page ---------- */
.ht-p-code { font-size: 13px; color: #8a8178; margin-bottom: 4px; }
.ht-mgal { position: relative; margin: 0 -12px; }
.ht-mgal-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ht-mgal-track::-webkit-scrollbar { display: none; }
.ht-mgal-item { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; }
.ht-mgal-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ht-mgal-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
.ht-mgal-dots span { width: 6px; height: 6px; border-radius: 6px; background: #d9cfc2; transition: width .15s ease; }
.ht-mgal-dots span.is-on { width: 18px; background: #1d4a33; }
.ht-mgal-n {
    position: absolute; top: 10px; right: 22px; padding: 3px 8px; border-radius: 999px;
    background: rgba(34, 31, 28, .6); color: #fff; font-size: 12px; line-height: 1.3;
}
#product-description.ht-clamp { max-height: 300px; overflow: hidden; position: relative; }
#product-description.ht-clamp::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.ht-more {
    display: block; width: 100%; height: 44px; margin: 8px 0 4px; border: 1px solid #ddd3c6; border-radius: 10px;
    background: #fff; color: #1d4a33; font: inherit; font-weight: 600; cursor: pointer;
}
@media only screen and (max-width: 992px) {
    .ht-p-gallery .ht-has-mgal .product-gallery { display: none; }
    /* buy box: price, then qty + add to cart in one row, 1-click full width */
    .ht-p-buy .add2cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .ht-p-buy .add2cart .price-wrapper { flex: 0 0 100%; }
    .ht-p-buy .add2cart .qty-wrapper { flex: 0 0 auto; margin: 0; }
    .ht-p-buy .add2cart .submit-wrapper { flex: 1 1 auto; margin: 0; }
    .ht-p-buy .add2cart .submit-wrapper input[type="submit"] { width: 100%; height: 48px; margin: 0; }
    .ht-p-buy .storequickorder-button { display: block; width: 100%; height: 46px; margin: 10px 0 0; }
}

/* ---------- Batch 11: category page ---------- */
.ht-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.ht-subcat {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 14px 4px 4px;
    border: 1px solid #ece6dd; border-radius: 999px; background: #fff; color: #222; font-size: 14px;
    line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.ht-subcat:not(:has(img)) { padding-left: 14px; }
.ht-subcat img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ht-subcat:hover { border-color: #c9bfb2; text-decoration: none; }
.ht-subcat.is-on { background: #1d4a33; border-color: #1d4a33; color: #fff; }
@media only screen and (max-width: 992px) {
    .ht-subcats { flex-wrap: nowrap; overflow-x: auto; margin: 4px -12px 8px; padding: 0 12px; scrollbar-width: none; }
    .ht-subcats::-webkit-scrollbar { display: none; }
}

.ht-loadmore-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0 8px; clear: both; }
.ht-loadmore-info { font-size: 13px; color: #8a8178; }
.ht-loadmore {
    width: 100%; max-width: 360px; height: 48px; border: 1px solid #ddd3c6; border-radius: 12px; background: #fff;
    color: #222; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.ht-loadmore:hover { border-color: #1d4a33; color: #1d4a33; }
.ht-loadmore.is-loading { opacity: .6; cursor: progress; }

.ht-faq { margin-top: 1rem; }
.ht-faq h2 { margin: 0 0 8px; font-size: 22px; }
.ht-faq details { border-top: 1px solid #ece6dd; }
.ht-faq details:last-child { border-bottom: 1px solid #ece6dd; }
.ht-faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
    cursor: pointer; list-style: none; font-weight: 600; font-size: 15px;
}
.ht-faq summary::-webkit-details-marker { display: none; }
.ht-faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: #8a8178; }
.ht-faq details[open] summary::after { content: "−"; }
.ht-faq details p { margin: 0 0 14px; color: #555; line-height: 1.55; }

/* ---------- Batch 12: home size helper + brands ---------- */
.ht-size { background: #e4ece5; border-radius: 16px; padding: 22px 20px; margin: 1rem 0; }
.ht-size-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #1d4a33; }
.ht-size-head h2 { margin: 4px 0 14px; font-size: 24px; line-height: 1.2; }
.ht-size-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ht-size-tab {
    height: 40px; padding: 0 16px; border: 1px solid #c9d6cb; border-radius: 999px; background: #fff;
    color: #222; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.ht-size-tab.is-on { background: #1d4a33; border-color: #1d4a33; color: #fff; }
.ht-size-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ht-size-panel[hidden] { display: none; }
.ht-size-opt {
    display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px;
    background: #fff; border-radius: 12px; color: #222; text-decoration: none; line-height: 1.25;
}
.ht-size-opt b { font-size: 16px; font-weight: 600; }
.ht-size-opt span { font-size: 13px; color: #6b635b; }
.ht-size-opt:hover { box-shadow: 0 0 0 2px #1d4a33 inset; text-decoration: none; }
.ht-size-help { margin: 14px 0 0; font-size: 14px; color: #3a342f; }
.ht-size-help a { color: #1d4a33; font-weight: 600; white-space: nowrap; }
@media only screen and (max-width: 600px) {
    .ht-size { padding: 18px 16px; }
    .ht-size-head h2 { font-size: 21px; }
    .ht-size-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ht-brands { margin-top: 1rem; }
.ht-brands-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ht-brands-head h2 { margin: 0; font-size: 22px; }
.ht-brands-head a { font-size: 14px; font-weight: 600; color: #1d4a33; white-space: nowrap; }
.ht-brands-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-brands-list a {
    display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid #ece6dd; border-radius: 999px;
    background: #fff; color: #222; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.ht-brands-list a:hover { border-color: #1d4a33; color: #1d4a33; text-decoration: none; }
@media only screen and (max-width: 600px) {
    .ht-brands-list { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scrollbar-width: none; }
    .ht-brands-list::-webkit-scrollbar { display: none; }
}

/* ---------- Batch 13: global style (mockup 2026) ----------
   Onest font, warm background, green brand colour, bright orange only for "buy" buttons,
   rounded cards and buttons, no uppercase on buttons.
   "html body" prefix: the theme colour CSS is inlined after this file, so equal specificity would lose. */
:root {
    --ht-bg: #faf7f2;
    --ht-ink: #221f1c;
    --ht-muted: #6b635b;
    --ht-line: #ece6dd;
    --ht-green: #1d4a33;
    --ht-green-2: #2e6b4c;
    --ht-buy: #d9530c;
    --ht-buy-hover: #c04709;
    --ht-buy-active: #a83e08;
}
html, html body { background-color: var(--ht-bg); }
html body, html body input, html body button, html body select, html body textarea, html body optgroup,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
    font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html body { color: var(--ht-ink); }
html body h1, html body .category-name { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
html body h2 { font-weight: 600; letter-spacing: -0.01em; }
html body a:hover { color: var(--ht-green); }

/* blocks and cards */
html body .fill-background { border-radius: 14px; border-color: var(--ht-line); }
html body ul.product-list > li { border-color: var(--ht-line); }
html body .product-list.colored.carousel li:first-child:hover,
html body ul.product-list.colored > li:hover { box-shadow: inset 0 0 0 1px #c9d6cb; border-color: #c9d6cb; }
html body ul.product-list h5, html body ul.product-list h5 span { color: var(--ht-ink); font-weight: 400; }
html body ul.product-list a:hover h5, html body ul.product-list a:hover h5 span { color: var(--ht-green); }
html body ul.product-list .price, html body .price { color: var(--ht-ink); }
html body .breadcrumbs a { color: var(--ht-green-2); }

/* header */
html body .nav-wrapper { background-color: #fff; box-shadow: none; border-bottom: 1px solid var(--ht-line); }

/* buttons: primary = buy (bright orange), others = outlined green */
html body input[type="button"], html body input[type="submit"], html body .button {
    border-radius: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none;
}
html body input[type="button"]:hover, html body input[type="submit"]:hover, html body .button:hover { box-shadow: none; }
html body input[type="button"].second-type, html body input[type="submit"].second-type, html body .button.second-type {
    background-color: var(--ht-buy); color: #fff;
}
html body input[type="button"].second-type:hover, html body input[type="submit"].second-type:hover, html body .button.second-type:hover {
    background-color: var(--ht-buy-hover); color: #fff;
}
html body input[type="button"].second-type:active, html body input[type="submit"].second-type:active, html body .button.second-type:active {
    background-color: var(--ht-buy-active);
}
html body input[type="button"].storequickorder-button {
    background-color: #fff; color: var(--ht-green); border: 1px solid #c9d6cb;
}
html body input[type="button"].storequickorder-button:hover {
    background-color: #f1f6f2; color: var(--ht-green); border-color: var(--ht-green);
}

/* form controls */
html body input[type=text], html body input[type=email], html body input[type=tel], html body input[type=number],
html body input[type=search], html body input[type=password], html body textarea, html body select {
    border-radius: 10px; box-shadow: none; border: 1px solid #ddd3c6; background-color: #fff;
}

/* filters (desktop sidebar) */
html body .sidebar-group .sidebar-title { background-color: var(--ht-green); color: #fff; }
html body .ui-slider .ui-slider-handle { background: var(--ht-green); border-color: var(--ht-green); }
html body .ui-slider .ui-slider-range { background: #c9d6cb; }
html body .sidebar-group .sidebar-title.second-type { background-color: var(--ht-green); color: #fff; }
html body .filter-slider .ui-slider-handle.ui-state-default { background: var(--ht-green); border-color: var(--ht-green); }
html body .ht-mega-wrapper { background-color: #fff; }
html body .globalheader .mobile-nav-button i.material-icons { color: var(--ht-green); }

/* ---------- Batch 14: home hero (replaces the slider) ---------- */
.ht-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 0 0 1rem; }
.ht-hero-main, .ht-hero-tile {
    position: relative; display: block; overflow: hidden; border-radius: 18px; background: #f1ebe3; color: #fff; text-decoration: none;
}
.ht-hero-main { min-height: 480px; }
.ht-hero-main img, .ht-hero-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ht-hero-main:hover img, .ht-hero-tile:hover img { transform: scale(1.03); }
.ht-hero-main::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(25, 20, 15, .66) 0%, rgba(25, 20, 15, .2) 60%, rgba(25, 20, 15, 0) 100%);
}
.ht-hero-text { position: absolute; z-index: 1; left: 40px; bottom: 40px; max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.ht-hero-title { font-size: 40px; font-weight: 600; line-height: 1.07; letter-spacing: -0.03em; color: #fff; }
.ht-hero-sub { font-size: 17px; line-height: 1.45; color: #f3efe8; }
.ht-hero-btn {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px;
    border-radius: 12px; background: #fff; color: #221f1c; font-weight: 600; font-size: 16px;
}
.ht-hero-btn i { font-size: 20px; }
.ht-hero-main:hover .ht-hero-btn { background: #f1f6f2; color: #1d4a33; }
.ht-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.ht-hero-tile { min-height: 200px; }
.ht-hero-tile span {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px;
    padding: 40px 20px 18px; background: linear-gradient(to top, rgba(20, 16, 12, .72), rgba(20, 16, 12, 0));
    font-size: 20px; font-weight: 600; line-height: 1.2; color: #fff;
}
.ht-hero-tile small { font-size: 13px; font-weight: 500; opacity: .9; }
@media only screen and (max-width: 992px) {
    .ht-hero { grid-template-columns: 1fr; }
    .ht-hero-side { display: none; } /* category tiles follow right below on phones */
    .ht-hero-main { min-height: 440px; }
    .ht-hero-main::after { background: linear-gradient(to top, rgba(25, 20, 15, .8) 0%, rgba(25, 20, 15, .15) 65%, rgba(25, 20, 15, 0) 100%); }
    .ht-hero-text { left: 20px; right: 20px; bottom: 22px; gap: 12px; }
    .ht-hero-title { font-size: 30px; line-height: 1.1; }
    .ht-hero-sub { font-size: 15px; }
}

/* header: phone with work hours under it */
.ht-hphone { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.25; }
html body .ht-hphone a { font-size: 22px; font-weight: 600; color: var(--ht-ink); text-decoration: none; white-space: nowrap; }
html body .ht-hphone a:hover { color: var(--ht-green); }
.ht-hphone span { font-size: 13px; color: var(--ht-muted); }

/* ---------- SEO texts (category description, home text) ---------- */
html body .ht-seo { max-width: 820px; font-size: 15px; line-height: 1.65; color: #3a342f; }
html body .ht-seo h2 { margin: 1.4em 0 .5em; font-size: 22px; line-height: 1.25; color: var(--ht-ink); }
html body .ht-seo h3 { margin: 1.2em 0 .4em; font-size: 18px; line-height: 1.3; color: var(--ht-ink); }
html body .ht-seo > :first-child, html body .ht-seo > div:first-child > :first-child { margin-top: 0; }
html body .ht-seo p { margin: 0 0 .8em; }
html body .ht-seo ul { margin: 0 0 1em; padding-left: 1.2em; }
html body .ht-seo li { margin: 0 0 .35em; }
html body .ht-seo a { color: var(--ht-green); text-decoration: underline; text-decoration-color: #c9d6cb; }
html body .ht-seo.ht-clamp { max-height: 360px; overflow: hidden; position: relative; }
html body .ht-seo.ht-clamp::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--ht-bg));
}
html body .ht-seo + .ht-more { max-width: 360px; }
@media only screen and (max-width: 600px) {
    html body .ht-seo h2 { font-size: 20px; }
    html body .ht-seo h3 { font-size: 17px; }
}
html body .ht-seo h2, html body .ht-seo h3 { font-weight: 600; }
html body .ht-home-seo { margin-top: 1.5rem; }

/* cart: "customers also bought" without long product descriptions */
html body .related .summary, html body .related .pl-item-info-expandable .summary { display: none; }

/* cart / checkout: the main step buttons use the "buy" colour */
html body input[type="submit"][name="checkout"],
html body .checkout-step input[type="submit"],
html body input[type="submit"].large {
    background-color: var(--ht-buy); color: #fff; border-radius: 12px; height: 52px; padding: 0 24px; font-size: 17px;
}
html body input[type="submit"][name="checkout"]:hover,
html body .checkout-step input[type="submit"]:hover,
html body input[type="submit"].large:hover { background-color: var(--ht-buy-hover); color: #fff; }

/* one-page checkout (order.html): confirm button in the buy colour */
html body #js-order-form .js-submit-order-button {
    background-color: var(--ht-buy); color: #fff; border-radius: 12px; height: 52px; padding: 0 28px; font-size: 17px; font-weight: 600; box-shadow: none; text-transform: none;
}
html body #js-order-form .js-submit-order-button:hover { background-color: var(--ht-buy-hover); color: #fff; }
html body #js-order-form .wa-input, html body #js-order-form .wa-select, html body #js-order-form .wa-textarea {
    box-sizing: border-box; width: 100%; min-height: 46px; border: 1px solid #ddd3c6; border-radius: 10px; background-color: #fff;
    font-size: 16px; padding: 0 12px; box-shadow: none;
}
html body #js-order-form .wa-textarea { padding: 10px 12px; min-height: 90px; }
html body #js-order-form .wa-input:focus, html body #js-order-form .wa-select:focus, html body #js-order-form .wa-textarea:focus {
    border-color: var(--ht-green); outline: none; box-shadow: 0 0 0 3px rgba(29, 74, 51, .12);
}
html body #js-order-form .wa-input.ht-invalid { border-color: #b83a26; box-shadow: 0 0 0 3px rgba(184, 58, 38, .12); }
.ht-phone-err { margin-top: 6px; font-size: 13px; color: #b83a26; }