/*
Theme Name: House of Maple & Lily Lifestyle
Theme URI: https://mapleandlily.ca
Author: Md Sabuz Mia
Author URI: https://www.linkedin.com/in/md-sabuz-mia-705b1179/
Description: A modern, fully responsive WooCommerce e-commerce theme built for House of Maple & Lily Lifestyle — "A World of Fashion, A House of Belonging." Fully customizable text, images and colors through the WordPress Customizer, with full support for free page builders (Elementor) and the native Gutenberg block editor. Designed for mobile, tablet and desktop.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hofmaplelily
Tags: e-commerce, woocommerce, two-columns, right-sidebar, custom-logo, custom-menu, custom-colors, featured-images, full-width-template, block-styles, wide-blocks, translation-ready
WC requires at least: 6.0
WC tested up to: 9.0

House of Maple & Lily Lifestyle theme, by Md Sabuz Mia, is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   1. Design tokens (CSS variables)
   These map to the brand logo: maple-orange, holly-green,
   maroon ribbon. All are overridable from the Customizer.
   ========================================================= */
:root {
    --hml-primary: #7c1d1d;        /* maroon ribbon */
    --hml-primary-dark: #5e1414;
    --hml-accent: #e8542a;         /* maple orange */
    --hml-accent-dark: #c8431d;
    --hml-green: #2e9e6f;          /* holly green */
    --hml-green-dark: #21795380;
    --hml-ink: #1c1410;            /* near-black text */
    --hml-muted: #6c6258;
    --hml-cream: #faf6f1;          /* soft background */
    --hml-cream-2: #f1e9df;
    --hml-white: #ffffff;
    --hml-border: #e7ddd1;
    --hml-success: #2e9e6f;
    --hml-radius: 14px;
    --hml-radius-sm: 8px;
    --hml-shadow: 0 10px 30px rgba(28, 20, 16, 0.08);
    --hml-shadow-lg: 0 24px 60px rgba(28, 20, 16, 0.14);
    --hml-container: 1200px;
    --hml-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --hml-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
    --hml-transition: 0.25s ease;
}

/* =========================================================
   2. Reset / base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x: clip stops the off-canvas mobile menu (position:fixed, pushed
   off-screen to the right) from widening the page / allowing a sideways drag.
   `clip` is used instead of `hidden` so it does not break the sticky header. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--hml-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--hml-ink);
    background: var(--hml-white);
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--hml-primary);
    text-decoration: none;
    transition: color var(--hml-transition);
}
a:hover, a:focus { color: var(--hml-accent); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hml-font-head);
    line-height: 1.18;
    color: var(--hml-ink);
    margin: 0 0 0.5em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); }

p { margin: 0 0 1.2em; }

ul, ol { padding-left: 1.3em; }

blockquote {
    margin: 1.5em 0;
    padding: 1em 1.4em;
    border-left: 4px solid var(--hml-accent);
    background: var(--hml-cream);
    border-radius: var(--hml-radius-sm);
    font-style: italic;
}

code, pre {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background: var(--hml-cream-2);
    border-radius: 6px;
}
code { padding: 0.15em 0.4em; }
pre { padding: 1em; overflow: auto; }

hr { border: 0; border-top: 1px solid var(--hml-border); margin: 2.5em 0; }

:focus-visible { outline: 3px solid var(--hml-accent); outline-offset: 2px; }

/* =========================================================
   3. Layout helpers
   ========================================================= */
.hml-container {
    width: 100%;
    max-width: var(--hml-container);
    margin-inline: auto;
    padding-inline: 22px;
}

.hml-section { padding-block: clamp(48px, 7vw, 96px); }
.hml-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.hml-section--cream { background: var(--hml-cream); }
.hml-section--ink { background: var(--hml-ink); color: var(--hml-cream); }
.hml-section--ink h1,
.hml-section--ink h2,
.hml-section--ink h3 { color: #fff; }

.hml-center { text-align: center; }
.hml-eyebrow {
    display: inline-block;
    font-family: var(--hml-font-body);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--hml-accent);
    margin-bottom: 0.8rem;
}
.hml-lead { font-size: 1.15rem; color: var(--hml-muted); max-width: 640px; }
.hml-center .hml-lead { margin-inline: auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hml-ink);
    color: #fff;
    padding: 12px 20px;
    z-index: 9999;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* =========================================================
   4. Buttons
   ========================================================= */
.hml-btn,
.hml-content .wp-block-button__link,
button, input[type="submit"], input[type="button"], .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--hml-font-body);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1;
    padding: 0.95em 1.8em;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--hml-primary);
    color: #fff;
    cursor: pointer;
    transition: transform var(--hml-transition), background var(--hml-transition), box-shadow var(--hml-transition);
}
.hml-btn:hover,
button:hover, input[type="submit"]:hover, .button:hover {
    background: var(--hml-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--hml-shadow);
}
.hml-btn--accent { background: var(--hml-accent); }
.hml-btn--accent:hover { background: var(--hml-accent-dark); }
.hml-btn--ghost {
    background: transparent;
    color: var(--hml-ink);
    border-color: var(--hml-ink);
}
.hml-btn--ghost:hover { background: var(--hml-ink); color: #fff; }
.hml-section--ink .hml-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hml-section--ink .hml-btn--ghost:hover { background: #fff; color: var(--hml-ink); }
.hml-btn--lg { padding: 1.1em 2.4em; font-size: 1.05rem; }

/* =========================================================
   5. Top bar
   ========================================================= */
.hml-topbar {
    background: var(--hml-ink);
    color: var(--hml-cream);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.hml-topbar .hml-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}
.hml-topbar a { color: var(--hml-cream); }
.hml-topbar a:hover { color: var(--hml-accent); }
.hml-topbar__msg { display: flex; align-items: center; gap: 8px; }
.hml-topbar__links { display: flex; align-items: center; gap: 18px; }

/* =========================================================
   6. Header / navigation
   ========================================================= */
.hml-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--hml-border);
}
.hml-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}
.hml-brand { display: flex; align-items: center; gap: 12px; }
.hml-brand img { max-height: 68px; width: auto; image-rendering: -webkit-optimize-contrast; }
.hml-brand__text { display: flex; flex-direction: column; }
.hml-brand__title {
    font-family: var(--hml-font-body);   /* Inter — modern sans */
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hml-primary);
}
.hml-brand__tagline {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hml-muted);
}

.hml-primary-nav { display: flex; align-items: center; }
.hml-primary-nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.hml-primary-nav a {
    display: block;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hml-ink);
    border-radius: 999px;
}
.hml-primary-nav a:hover,
.hml-primary-nav .current-menu-item > a {
    color: var(--hml-accent);
    background: var(--hml-cream);
}
.hml-primary-nav .sub-menu {
    position: absolute;
    background: #fff;
    box-shadow: var(--hml-shadow-lg);
    border-radius: var(--hml-radius-sm);
    padding: 8px;
    min-width: 210px;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--hml-transition);
    z-index: 50;
}
.hml-primary-nav li { position: relative; }
.hml-primary-nav li:hover > .sub-menu,
.hml-primary-nav li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.hml-primary-nav .sub-menu a { padding: 8px 12px; }

.hml-header__actions { display: flex; align-items: center; gap: 10px; }
.hml-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;                 /* reset inherited button padding so the icon stays visible */
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--hml-cream);
    color: var(--hml-ink);
    border: none;
    position: relative;
    cursor: pointer;
    line-height: 0;
}
.hml-icon-btn svg { display: block; }
.hml-icon-btn:hover { background: var(--hml-accent); color: #fff; }
.hml-cart-count,
.hml-wish-count {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hml-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.hml-wish-count.is-empty { display: none; }

/* Mobile menu toggle */
.hml-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    padding: 0;                 /* reset inherited button padding */
    flex: 0 0 auto;
    background: var(--hml-cream);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.hml-nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: var(--hml-ink);
    margin-inline: auto;
    transition: transform var(--hml-transition), opacity var(--hml-transition);
}
.hml-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hml-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hml-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search dropdown panel */
.hml-search-panel {
    background: #fff;
    border-bottom: 1px solid var(--hml-border);
    box-shadow: var(--hml-shadow);
    padding-block: 18px;
    position: sticky;
    top: 78px;
    z-index: 150;
    animation: hml-slide-down 0.25s ease;
}
.hml-search-panel[hidden] { display: none; }
.hml-search-panel .hml-search-form { max-width: 720px; margin-inline: auto; }
@keyframes hml-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   7. Hero
   ========================================================= */
.hml-hero {
    position: relative;
    background:
        linear-gradient(135deg, rgba(28,20,16,0.78), rgba(124,29,29,0.55)),
        var(--hml-ink);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.hml-hero__inner {
    display: grid;
    align-items: center;
    min-height: clamp(440px, 70vh, 680px);
    padding-block: clamp(60px, 9vw, 120px);
}
.hml-hero__content { max-width: 660px; }
.hml-hero h1 { color: #fff; margin-bottom: 0.4em; }
.hml-hero p { font-size: 1.2rem; color: rgba(255,255,255,0.9); margin-bottom: 1.8em; }
.hml-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hml-hero .hml-eyebrow { color: var(--hml-accent); }

/* =========================================================
   8. Cards / grids
   ========================================================= */
.hml-grid { display: grid; gap: 28px; }
.hml-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hml-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hml-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hml-card {
    background: #fff;
    border: 1px solid var(--hml-border);
    border-radius: var(--hml-radius);
    overflow: hidden;
    transition: transform var(--hml-transition), box-shadow var(--hml-transition);
    display: flex;
    flex-direction: column;
}
.hml-card:hover { transform: translateY(-6px); box-shadow: var(--hml-shadow-lg); }
.hml-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hml-cream-2); }
.hml-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hml-card:hover .hml-card__media img { transform: scale(1.06); }
.hml-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hml-card__title { font-size: 1.25rem; margin: 0; }
.hml-card__body p { color: var(--hml-muted); margin: 0; flex: 1; }
.hml-card__link {
    margin-top: 8px;
    font-weight: 700;
    color: var(--hml-accent);
    display: inline-flex; align-items: center; gap: 6px;
}

/* Collection tile (overlay style) */
.hml-collection {
    position: relative;
    border-radius: var(--hml-radius);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background: var(--hml-cream-2);
}
.hml-collection img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.hml-collection::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,20,16,0.85), rgba(28,20,16,0) 60%);
}
.hml-collection:hover img { transform: scale(1.08); }
.hml-collection__content { position: relative; z-index: 2; padding: 24px; }
.hml-collection__content h3 { color: #fff; margin: 0 0 4px; }
.hml-collection__content span { font-size: 0.9rem; opacity: 0.85; }

/* Feature / value props */
.hml-feature { text-align: center; padding: 8px; }
.hml-feature__icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--hml-cream);
    color: var(--hml-accent);
    font-size: 1.6rem;
}
.hml-feature h3 { font-size: 1.15rem; }
.hml-feature p { color: var(--hml-muted); font-size: 0.96rem; }

/* =========================================================
   9. Testimonials
   ========================================================= */
.hml-quote {
    background: #fff;
    border: 1px solid var(--hml-border);
    border-radius: var(--hml-radius);
    padding: 30px;
    box-shadow: var(--hml-shadow);
}
.hml-quote__stars { color: var(--hml-accent); margin-bottom: 12px; letter-spacing: 2px; }
.hml-quote p { font-size: 1.05rem; font-style: italic; }
.hml-quote__author { font-weight: 700; color: var(--hml-primary); font-style: normal; }

/* =========================================================
   10. Founder / about split
   ========================================================= */
.hml-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hml-split__media img { border-radius: var(--hml-radius); box-shadow: var(--hml-shadow-lg); }
.hml-signature { font-family: var(--hml-font-head); font-style: italic; font-size: 1.3rem; color: var(--hml-primary); }

/* =========================================================
   11. Newsletter / CTA band
   ========================================================= */
.hml-newsletter { text-align: center; }
.hml-newsletter form {
    display: flex; gap: 10px; max-width: 520px; margin: 24px auto 0; flex-wrap: wrap;
    justify-content: center;
}
.hml-newsletter input[type="email"] {
    flex: 1; min-width: 240px;
    padding: 0.95em 1.2em;
    border-radius: 999px;
    border: 2px solid var(--hml-border);
    font-size: 1rem;
}

/* =========================================================
   12. Forms (contact / career)
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
input[type="file"], select, textarea {
    width: 100%;
    padding: 0.85em 1em;
    border: 2px solid var(--hml-border);
    border-radius: var(--hml-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    color: var(--hml-ink);
    background: #fff;
    transition: border-color var(--hml-transition), box-shadow var(--hml-transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--hml-accent);
    box-shadow: 0 0 0 4px rgba(232,84,42,0.12);
}
textarea { min-height: 150px; resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.hml-form-row { margin-bottom: 18px; }
.hml-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* =========================================================
   13. Content (single / page)
   ========================================================= */
.hml-content-wrap { padding-block: clamp(40px, 6vw, 80px); }
.hml-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; }
.hml-layout--full { grid-template-columns: 1fr; }
/* Sidebar on the LEFT (used on shop/product archives) */
.hml-layout--left { grid-template-columns: 300px minmax(0,1fr); }
.hml-layout--left .hml-sidebar { order: -1; margin-top: 0; }

.hml-content { font-size: 1.05rem; }
.hml-content > * { margin-bottom: 1.2em; }
.hml-content img { max-width: 100%; height: auto; border-radius: var(--hml-radius-sm); }
.hml-content figure { margin: 0 0 1.4em; }
.hml-content figure img { display: block; }
.hml-content figcaption { font-size: 0.85rem; color: var(--hml-muted); text-align: center; margin-top: 8px; }
.hml-content :where(.alignwide) { width: min(100%, 1040px); margin-inline: auto; }
.hml-content :where(.alignfull) { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* ---- Modern single post ---- */
.hml-single { max-width: 760px; margin-inline: auto; }
.hml-single .hml-meta { margin-bottom: 18px; }
.hml-single__featured {
    margin: 6px 0 36px;
    border-radius: var(--hml-radius);
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(0,0,0,0.35);
}
.hml-single__featured img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    border-radius: 0;
}
.hml-single p { line-height: 1.85; }
.hml-single :where(h2, h3, h4) { margin-top: 1.6em; line-height: 1.3; }
.hml-single blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--hml-accent);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--hml-muted);
}

/* Tags as pills */
.hml-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hml-border); }
.hml-tags a {
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.82rem;
    border: 1px solid var(--hml-border);
    border-radius: 999px;
    color: var(--hml-muted);
    transition: all 0.2s ease;
}
.hml-tags a:hover { background: var(--hml-accent); border-color: var(--hml-accent); color: #fff; }

/* Prev / next post navigation */
.hml-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 760px;
    margin: 48px auto;
}
.hml-post-nav > div { display: flex; }
.hml-post-nav a {
    display: block;
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--hml-border);
    border-radius: var(--hml-radius-sm);
    color: var(--hml-ink);
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.2s ease;
}
.hml-post-nav a span {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hml-muted);
    margin-bottom: 4px;
}
.hml-post-nav a:hover { border-color: var(--hml-accent); box-shadow: 0 10px 24px -18px rgba(0,0,0,0.45); }
.hml-post-nav__next { margin-left: auto; }
.hml-post-nav__next a { text-align: right; }

.hml-page-header {
    background: var(--hml-cream);
    text-align: center;
    padding-block: clamp(40px, 6vw, 72px);
    border-bottom: 1px solid var(--hml-border);
}
.hml-breadcrumbs { font-size: 0.85rem; color: var(--hml-muted); margin-top: 10px; }
.hml-breadcrumbs a { color: var(--hml-muted); }
.hml-breadcrumbs a:hover { color: var(--hml-accent); }

/* Posts list — clean, borderless cards */
.hml-post-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.hml-post-card__media {
    display: block;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: var(--hml-radius-sm);
}
.hml-post-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.hml-post-card:hover .hml-post-card__media img { transform: scale(1.04); }
.hml-post-card__body { padding: 16px 0 0; }
.hml-post-card__date {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--hml-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 10px;
}
.hml-post-card__title {
    font-family: var(--hml-font-head);
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 0 0 14px;
}
.hml-post-card__title a { color: var(--hml-ink); text-decoration: none; }
.hml-post-card__title a:hover { color: var(--hml-accent); }
.hml-post-card__continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hml-ink);
    text-decoration: none;
}
.hml-post-card__continue span { transition: transform 0.2s ease; }
.hml-post-card__continue:hover { color: var(--hml-accent); }
.hml-post-card__continue:hover span { transform: translateX(4px); }
.hml-meta { font-size: 0.82rem; color: var(--hml-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* =========================================================
   14. Sidebar / widgets
   ========================================================= */
.hml-sidebar .widget {
    background: #fff;
    border: 1px solid var(--hml-border);
    border-radius: var(--hml-radius);
    padding: 24px;
    margin-bottom: 28px;
}
.hml-sidebar .widget-title { font-size: 1.1rem; margin-bottom: 14px; }
.hml-sidebar ul { list-style: none; padding: 0; margin: 0; }
.hml-sidebar li { padding: 6px 0; border-bottom: 1px solid var(--hml-border); }
.hml-sidebar li:last-child { border-bottom: none; }

/* =========================================================
   15. FAQ accordion
   ========================================================= */
.hml-accordion { max-width: 820px; margin-inline: auto; }
.hml-accordion__group { margin-bottom: 36px; }
.hml-accordion__group > h3 { display: flex; align-items: center; gap: 10px; }
.hml-faq {
    border: 1px solid var(--hml-border);
    border-radius: var(--hml-radius-sm);
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}
.hml-faq summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.hml-faq summary::-webkit-details-marker { display: none; }
.hml-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--hml-accent); transition: transform var(--hml-transition); }
.hml-faq[open] summary::after { transform: rotate(45deg); }
.hml-faq__body { padding: 0 22px 20px; color: var(--hml-muted); }

/* =========================================================
   16. Footer
   ========================================================= */
/* Light footer — soft cream background with dark text for readability. */
.hml-footer { background: var(--hml-cream); color: var(--hml-muted); border-top: 1px solid var(--hml-border); }
.hml-footer a { color: var(--hml-ink); }
.hml-footer a:hover { color: var(--hml-accent); }
.hml-footer__top { padding-block: clamp(60px, 7vw, 104px); }
.hml-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; }
/* Nudge the menu columns down so they sit balanced against the tall logo.
   Multi-column layout only — on stacked mobile the columns shouldn't be offset. */
@media (min-width: 681px) {
    .hml-footer__col:not(.hml-footer__col--brand) { padding-top: 60px; }
}
.hml-footer h4 { color: var(--hml-ink); font-family: var(--hml-font-body); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.hml-footer ul { list-style: none; padding: 0; margin: 0; }
.hml-footer li { margin-bottom: 10px; }
.hml-footer .hml-brand__title { color: var(--hml-ink); }
.hml-footer .hml-brand__tagline { color: var(--hml-muted); }
/* Footer logo — sits naturally on the light footer (no chip needed). */
/* Block-level flex pins the logo to the left edge (aligned with the "Ethical" text below). */
.hml-footer__brand { display: flex; justify-content: flex-start; margin-bottom: 6px; }
.hml-footer__col--brand { text-align: left; }
.hml-footer__logo-link { display: block; width: 100%; line-height: 0; margin-bottom: 0; }
/* Scoped to .hml-footer to beat the header's `.hml-brand img { max-height:68px }`
   rule (the footer brand reuses the .hml-brand class), so the logo can fill the column. */
.hml-footer .hml-footer__logo {
    width: 100%; height: auto; max-height: none;
    background: none;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}
/* Legacy "plain" modifier kept as a no-op so old markup still renders fine. */
.hml-footer__logo--plain {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.hml-social { display: flex; gap: 12px; margin-top: 18px; }
.hml-social a {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--hml-ink);
}
.hml-social a:hover { background: var(--hml-accent); color: #fff; }
.hml-footer__bottom {
    border-top: 1px solid var(--hml-border);
    padding-block: 22px;
    font-size: 0.85rem;
}
.hml-footer__bottom .hml-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Payment badges */
.hml-pay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hml-pay span {
    background: rgba(0,0,0,0.06);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* =========================================================
   17. Pagination & misc
   ========================================================= */
.hml-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.hml-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--hml-border);
    color: var(--hml-ink); font-weight: 600;
}
.hml-pagination .page-numbers.current,
.hml-pagination .page-numbers:hover { background: var(--hml-primary); color: #fff; border-color: var(--hml-primary); }

.hml-badge {
    display: inline-block;
    background: var(--hml-green);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hml-badge--accent { background: var(--hml-accent); }
.hml-badge--maroon { background: var(--hml-primary); }

.hml-fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hml-fade-up.is-visible { opacity: 1; transform: none; }

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--hml-muted); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* =========================================================
   18. Responsive
   ========================================================= */
@media (max-width: 1024px) {
    .hml-footer__grid { grid-template-columns: 1fr 1fr; }
    .hml-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hml-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .hml-layout { grid-template-columns: 1fr; }
    .hml-sidebar { margin-top: 24px; }
    /* On phones/tablets show products first, sidebar/filters below */
    .hml-layout--left .hml-sidebar { order: 1; margin-top: 24px; }
    .hml-split { grid-template-columns: 1fr; }
    .hml-split__media { order: -1; }

    /* Stop the header's backdrop-filter from trapping the fixed menu drawer. */
    .hml-header, .hml-container, .hml-header__inner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
    }
    .hml-nav-toggle { display: flex; }
    .hml-primary-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(86vw, 360px);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 90px 22px 40px;
        box-shadow: var(--hml-shadow-lg);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 400;
    }
    .hml-primary-nav.is-open { transform: translateX(0); }

    /* Force EVERY menu level to a full-width vertical list so all items show. */
    .hml-primary-nav ul,
    .hml-primary-nav .menu,
    .hml-primary-nav #primary-menu {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .hml-primary-nav li {
        display: block !important;
        width: 100%;
    }
    .hml-primary-nav a {
        display: block;
        width: 100%;
        padding: 14px 16px;
        border-radius: var(--hml-radius-sm);
    }
    /* Sub-menus always expanded (no hover/tap needed) on mobile. */
    .hml-primary-nav .sub-menu {
        display: block !important;
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; min-width: 0; padding-left: 14px; background: var(--hml-cream);
        margin-top: 4px;
    }
    /* Close (×) button inside the slide-in panel */
    .hml-nav-close {
        display: block;
        position: absolute;
        top: 18px; right: 18px;
        width: 40px; height: 40px;
        font-size: 28px; line-height: 1;
        background: var(--hml-cream);
        color: var(--hml-ink);
        border: none; border-radius: 50%;
        cursor: pointer;
        z-index: 1;
    }
    .hml-nav-backdrop {
        position: fixed; inset: 0; background: rgba(28,20,16,0.5);
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 150;
    }
    .hml-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Close button is hidden only on desktop (where the menu is inline). */
@media (min-width: 1025px) {
    .hml-nav-close { display: none; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .hml-grid--2, .hml-grid--3, .hml-grid--4 { grid-template-columns: 1fr; }
    .hml-footer__grid { grid-template-columns: 1fr; }
    .hml-form-grid { grid-template-columns: 1fr; }
    .hml-topbar__msg { font-size: 0.74rem; }
    .hml-topbar__links { display: none; }
    .hml-brand__tagline { display: none; }
    .hml-hero p { font-size: 1.05rem; }
    .hml-footer__bottom .hml-container { flex-direction: column; text-align: center; }
}

/* ---- Tablet refinements ---- */
@media (max-width: 1024px) {
    .hml-header__inner { min-height: 68px; }
    .hml-brand img { max-height: 56px; }
    .hml-brand__title { font-size: 1rem; letter-spacing: 0.05em; }
    .hml-section { padding-block: clamp(40px, 6vw, 72px); }
}

/* ---- Small-screen safety: keep wide content from breaking layout ---- */
@media (max-width: 768px) {
    .hml-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hml-content img { height: auto; }
    .hml-breadcrumbs { font-size: 0.78rem; }
    /* Stop any wide/full-aligned block from causing horizontal scroll */
    .hml-content :where(.alignfull) { width: 100%; margin-left: 0; transform: none; }
    .hml-single__featured { margin-bottom: 24px; }
    .hml-single__featured img { max-height: 280px; }
    .hml-post-nav { grid-template-columns: 1fr; margin-block: 32px; }
    .hml-post-nav__next a { text-align: left; }
}

/* ---- Phones ---- */
@media (max-width: 420px) {
    .hml-container { padding-inline: 16px; }
    h1 { font-size: 1.85rem; }
    .hml-hero__cta { flex-direction: column; align-items: stretch; }
    .hml-hero__cta .hml-btn { width: 100%; }
    .hml-header__actions { gap: 6px; }
    .hml-icon-btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .hml-fade-up { opacity: 1; transform: none; }
}

/* =========================================================
   Promo Popup
   ========================================================= */
.hml-popup[hidden] { display: none; }
.hml-popup {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.hml-popup-open { overflow: hidden; }
.hml-popup__overlay { position: absolute; inset: 0; background: rgba(28, 20, 16, 0.6); }
.hml-popup__box {
    position: relative;
    background: #fff;
    border-radius: var(--hml-radius);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow: auto;
    box-shadow: var(--hml-shadow-lg);
    animation: hml-popup-in 0.25s ease;
}
@keyframes hml-popup-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.hml-popup__close {
    position: absolute;
    top: 10px; right: 12px;
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--hml-ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.hml-popup__close:hover { background: var(--hml-accent); color: #fff; }
.hml-popup__media img { display: block; width: 100%; height: auto; }
.hml-popup__body { padding: 26px 28px 30px; text-align: center; }
.hml-popup__title { margin: 0 0 12px; }
.hml-popup__text { color: var(--hml-muted); margin-bottom: 20px; line-height: 1.6; }
.hml-popup__btn { display: inline-block; }

@media (max-width: 480px) {
    .hml-popup__body { padding: 20px; }
}