/*
Theme Name: Best Kona Coffee
Theme URI: https://bestkona.coffee/
Author: Makana Digital
Author URI: https://bestkona.coffee/
Description: A curated affiliate storefront for Hawaii's finest Kona coffee brands. Custom WordPress theme featuring brand category pages, a coffee comparison tool, blog, and concierge-style product showcases for Koa Coffee, Hula Daddy, Hawaii Coffee Company, Big Island Coffee Roasters and Kona Earth.
Version: 1.0.1
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: best-kona-coffee
Tags: custom-menu, featured-images, blog, e-commerce, two-columns, right-sidebar
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root{
    --green:        #2f5132;
    --green-dark:   #243f27;
    --green-deep:   #1d3320;
    --gold:         #c79a3b;
    --gold-dark:    #a87f2c;
    --gold-soft:    #d9bd7e;
    --cream:        #f7f0e1;
    --cream-2:      #fbf6ea;
    --card:         #fdfaf2;
    --brown:        #2a1c10;
    --brown-2:      #3a2817;
    --brown-soft:   #6b4423;
    --price:        #9a5b27;
    --ink:          #2c2419;
    --ink-soft:     #6a5e4c;
    --line:         #e4d9c2;
    --white:        #ffffff;

    --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --body:   'EB Garamond', Georgia, 'Times New Roman', serif;

    --wrap:   1180px;
    --radius: 10px;
    --shadow: 0 8px 28px rgba(40, 28, 12, .10);
    --shadow-sm: 0 3px 12px rgba(40, 28, 12, .08);
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Full-width guard: defeats any leftover "boxed layout" rule (e.g. a
   body{max-width:…} from a previous theme's Additional CSS or a plugin). */
html,body{ width:auto !important; max-width:100% !important; }
body{
    margin:0 !important;
    font-family:var(--body);
    font-size:19px;
    line-height:1.65;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
.site-header,.site-content,.site-footer,.hero,.section,.brand-hero{ width:100%; max-width:100%; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green); text-decoration:none; transition:color .2s ease, opacity .2s ease; }
a:hover{ color:var(--gold-dark); }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
h3{ font-size:1.45rem; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.3em; }
hr{ border:none; border-top:1px solid var(--line); margin:2.5rem 0; }
blockquote{
    margin:1.6rem 0; padding:.6rem 1.4rem;
    border-left:4px solid var(--gold); background:var(--cream-2);
    font-style:italic; color:var(--ink-soft);
}
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.text-center{ text-align:center; }

/* =========================================================================
   3. BUTTONS
   ========================================================================= */
.btn{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--body); font-size:1rem; font-weight:600; letter-spacing:.01em;
    padding:.85em 1.6em; border-radius:8px; cursor:pointer;
    border:1px solid transparent; transition:all .2s ease; line-height:1;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--green-dark); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-gold{ background:var(--gold); color:var(--brown); }
.btn-gold:hover{ background:var(--gold-dark); color:#fff; }
.btn-block{ display:flex; width:100%; justify-content:center; }
.btn .chev{ font-size:.85em; }

/* =========================================================================
   4. ORNAMENTAL FLOURISH (gold hibiscus divider)
   ========================================================================= */
.flourish{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); margin:0 0 .4rem; }
.flourish::before,.flourish::after{ content:""; height:1px; width:64px; background:linear-gradient(90deg,transparent,var(--gold)); }
.flourish::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.flourish .bloom{ font-size:1.1rem; line-height:1; }
.eyebrow{
    font-family:var(--body); text-transform:uppercase; letter-spacing:.28em;
    font-size:.78rem; font-weight:600; color:var(--gold-dark); text-align:center; margin-bottom:.4rem;
}

/* =========================================================================
   5. HEADER
   ========================================================================= */
.site-header{
    position:sticky; top:0; z-index:120;
    background:var(--cream);
    border-bottom:1px solid var(--line);
}
.site-header.scrolled{ box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px; max-width:1300px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand a{ display:flex; align-items:center; gap:10px; }
.brand .logo-text{
    font-family:var(--serif); font-weight:700; font-size:1.7rem; color:var(--green-deep); white-space:nowrap;
}
.brand .hibiscus{ width:30px; height:30px; flex:0 0 auto; }
.brand .tagline{ display:none; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav ul{ list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:0; }
.main-nav a{
    font-family:var(--body); font-size:1.06rem; font-weight:500; color:var(--ink);
    padding:.5em .9em; border-radius:6px; display:inline-flex; align-items:center; gap:.35em;
}
.main-nav a:hover,.main-nav .current-menu-item>a{ color:var(--green); background:rgba(47,81,50,.06); }
.main-nav .menu-item-has-children>a::after{ content:"\25BE"; font-size:.6em; opacity:.7; }
.main-nav .sub-menu{
    position:absolute; min-width:220px; background:#fff; border:1px solid var(--line);
    border-radius:10px; box-shadow:var(--shadow); padding:8px; margin-top:10px;
    opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease; z-index:50;
}
.main-nav .menu-item-has-children{ position:relative; }
.main-nav .menu-item-has-children:hover>.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav .sub-menu li{ display:block; }
.main-nav .sub-menu a{ display:block; padding:.55em .8em; }

.header-tools{ display:flex; align-items:center; gap:14px; }
.header-tools .tool{ background:none; border:none; cursor:pointer; color:var(--ink); padding:6px; display:inline-flex; }
.header-tools .tool svg{ width:22px; height:22px; }
.header-tools .tool:hover{ color:var(--green); }
.cart-count{ font-size:.7rem; background:var(--green); color:#fff; border-radius:999px; padding:1px 6px; margin-left:-6px; align-self:flex-start; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }

/* search bar (toggled) */
.header-search{ display:none; border-top:1px solid var(--line); background:var(--cream-2); }
.header-search.open{ display:block; }
.header-search form{ display:flex; gap:10px; max-width:760px; margin:0 auto; padding:16px 24px; }
.header-search input[type=search]{ flex:1; padding:.75em 1em; border:1px solid var(--line); border-radius:8px; font-family:var(--body); font-size:1rem; }

/* =========================================================================
   6. HERO
   ========================================================================= */
.hero{
    position:relative; color:#fff; overflow:hidden;
    background:#1c2a1d center/cover no-repeat;
    background-attachment:fixed;
    min-height:560px; display:flex; align-items:center;
}
.hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(15,28,16,.78) 0%, rgba(15,28,16,.45) 48%, rgba(15,28,16,.12) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:90px 24px; width:100%; }
.hero-content{ max-width:620px; }
.hero h1{ color:#fff; margin-bottom:.2em; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.hero .hero-rule{ display:flex; align-items:center; gap:12px; color:var(--gold-soft); margin:.4rem 0 1.2rem; }
.hero .hero-rule::before,.hero .hero-rule::after{ content:""; height:1px; width:80px; background:var(--gold-soft); opacity:.8; }
.hero p.lead{ font-size:1.3rem; color:#f3ecdc; max-width:460px; margin-bottom:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* =========================================================================
   7. SECTIONS
   ========================================================================= */
.section{ padding:72px 0; }
.section.alt{ background:var(--cream-2); }
.section-head{ text-align:center; margin-bottom:48px; }
.section-head h2{ margin-bottom:0; }
.section-head p.sub{ color:var(--ink-soft); max-width:620px; margin:.7rem auto 0; }

/* =========================================================================
   8. PRODUCT CARDS / GRID
   ========================================================================= */
.product-grid{
    display:grid; gap:22px;
    grid-template-columns:repeat(5,1fr);
}
.product-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.product-grid.cols-3{ grid-template-columns:repeat(3,1fr); }

.product-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease; position:relative;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.product-card .media{ position:relative; padding:22px 18px 8px; text-align:center; }
.product-card .media img{ margin:0 auto; max-height:200px; width:auto; }
.product-card .badge{
    position:absolute; top:12px; left:12px; z-index:3;
    font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.02em;
    color:#fff; padding:.34em .7em; border-radius:6px; text-transform:none;
}
.badge--bestseller{ background:var(--brown-soft); }
.badge--kona{ background:var(--green); }
.badge--artisan{ background:var(--green); }
.badge--farm{ background:#2f5132; }
.badge--reserve{ background:var(--gold-dark); }

.product-card .body{ padding:4px 18px 20px; display:flex; flex-direction:column; flex:1; text-align:center; }
.product-card .brand-line{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.15rem; }
.product-card h3{ font-size:1.18rem; margin:0 0 .4rem; line-height:1.2; }
.product-card h3 a{ color:var(--ink); }
.product-card h3 a:hover{ color:var(--green); }
.product-card .desc{ font-size:.98rem; color:var(--ink-soft); margin-bottom:1rem; }
.product-card .price{ font-family:var(--serif); font-weight:700; color:var(--price); font-size:1.25rem; margin:auto 0 .9rem; }
.product-card .price .from{ font-family:var(--body); font-weight:400; font-size:.8rem; color:var(--ink-soft); margin-right:.25em; }
.product-card .btn{ margin-top:auto; }

/* =========================================================================
   9. "WHAT MAKES KONA SPECIAL" FEATURES
   ========================================================================= */
.features{
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
    background:linear-gradient(to right, #faf3eb 0%, #fdfaf3 100%); border-radius:16px; padding:30px 18px;
    position:relative;
}
.feature{ text-align:center; padding:8px 14px; position:relative; }
.feature + .feature::before{ content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background:var(--line); }
.feature img{ width:120px; height:120px; object-fit:contain; margin:0 auto 10px; }
.feature h4{ font-size:1.2rem; margin-bottom:.3rem; }
.feature p{ font-size:.96rem; color:var(--ink-soft); margin:0; }

/* =========================================================================
   10. COMPARISON TABLE
   ========================================================================= */
.compare-wrap{ overflow-x:auto; border-radius:12px; box-shadow:var(--shadow-sm); }
table.compare{
    width:100%; border-collapse:collapse; background:var(--card); min-width:680px;
    font-size:1rem;
}
table.compare thead th{
    background:var(--green); color:#fff; font-family:var(--body); font-weight:600;
    text-align:left; padding:14px 18px; font-size:1rem;
}
table.compare tbody td{ padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink); }
table.compare tbody tr:nth-child(even){ background:var(--cream-2); }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare .company{ font-weight:600; display:flex; align-items:center; gap:10px; }
table.compare .company .bean{ color:var(--brown-soft); }
table.compare td strong{ color:var(--green-dark); }

/* =========================================================================
   11. BRAND / CATEGORY HEADER
   ========================================================================= */
.brand-hero{
    background:var(--brown) center/cover no-repeat; color:#fff; position:relative; overflow:hidden;
    padding:70px 0;
}
.brand-hero::after{ content:""; position:absolute; inset:0; background:rgba(26,18,10,.55); }
.brand-hero .wrap{ position:relative; z-index:2; }
.brand-hero h1{ color:#fff; margin-bottom:.3rem; }
.brand-hero .lead{ color:#f0e8d6; max-width:680px; font-size:1.18rem; }
.brand-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; font-size:.95rem; color:#e7dcc4; }
.brand-meta span{ display:inline-flex; align-items:center; gap:.4em; }
.brand-disclosure{
    background:var(--cream-2); border:1px solid var(--line); border-radius:10px;
    padding:14px 18px; font-size:.92rem; color:var(--ink-soft); margin:0 0 30px;
}
.brand-disclosure strong{ color:var(--ink); }

/* =========================================================================
   12. BLOG
   ========================================================================= */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; }
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.post-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.post-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--cream-2); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .pc-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.post-meta{ font-size:.84rem; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; }
.post-card h3{ font-size:1.35rem; margin-bottom:.5rem; }
.post-card h3 a{ color:var(--ink); }
.post-card .excerpt{ color:var(--ink-soft); font-size:1rem; margin-bottom:1rem; }
.post-card .read-more{ margin-top:auto; font-weight:600; color:var(--green); }

/* single post */
.single-hero{ text-align:center; max-width:780px; margin:0 auto 30px; }
.single-hero .post-meta{ text-align:center; }

/* single post header band */
.single-top{ background:var(--cream-2); border-bottom:1px solid var(--line); padding:40px 0 34px; }
.single-top .breadcrumbs{ margin-bottom:14px; }
.single-top .breadcrumbs .sep{ margin:0 .5em; color:var(--gold-dark); }
.single-top .post-meta{ font-size:.82rem; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.5rem; }
.single-top h1{ max-width:880px; margin:0; }

.entry-cover{ border-radius:14px; overflow:hidden; margin:0 0 36px; box-shadow:var(--shadow); }
.entry-content{ font-size:1.12rem; }
.entry-content h2{ margin-top:1.8em; }
.entry-content h3{ margin-top:1.5em; }
.entry-content img{ border-radius:10px; margin:1.6rem auto; }
.entry-content figure{ margin:1.6rem 0; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content iframe{ width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; margin:1.6rem 0; display:block; }

/* inline CTA inside the article column */
.cta-banner--inline{ margin:44px 0 0; padding:40px 30px; text-align:center; }
.cta-banner--inline h2{ font-size:1.8rem; }
.cta-banner--inline p{ font-size:1.05rem; }

/* previous / next post navigation */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px; }
.post-nav > div a{
    display:flex; flex-direction:column; gap:.3rem; height:100%;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 20px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.post-nav > div a:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.post-nav .pn-next{ text-align:right; }
.post-nav .pn-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-dark); }
.post-nav .pn-title{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.25; }

/* sidebar */
.single .sidebar,
.blog .sidebar,
.archive .sidebar{ position:sticky; top:96px; }
.sidebar .widget{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:26px; }
.sidebar .widget-title{ font-size:1.2rem; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:2px solid var(--gold-soft); }
.sidebar ul{ list-style:none; padding:0; margin:0; }
.sidebar li{ padding:.4rem 0; border-bottom:1px solid var(--line); }
.sidebar li:last-child{ border-bottom:none; }
.sidebar a{ color:var(--ink); }
.sidebar a:hover{ color:var(--green); }
.widget-cta{ background:var(--green); color:#fff; text-align:center; }
.widget-cta .widget-title{ color:#fff; border-color:rgba(255,255,255,.3); }
.widget-cta p{ color:#e9f0e9; font-size:.98rem; }

/* =========================================================================
   13. PAGE / CONTENT
   ========================================================================= */
.page-hero{ text-align:center; padding:64px 0 10px; }
.page-hero .lead{ color:var(--ink-soft); font-size:1.25rem; max-width:660px; margin:0 auto; }
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ margin-top:1.6em; }

/* About value cards */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; box-shadow:var(--shadow-sm); }
.value-card .ico{ font-size:1.9rem; color:var(--gold-dark); margin-bottom:.4rem; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
.contact-info .ci-item{ display:flex; gap:14px; margin-bottom:22px; }
.contact-info .ci-item .ci-ico{ color:var(--green); flex:0 0 auto; margin-top:3px; }
.contact-info h4{ margin:0 0 .15rem; font-size:1.1rem; }
.contact-info p{ margin:0; color:var(--ink-soft); }
.contact-form label{ display:block; font-weight:600; margin-bottom:.35rem; font-size:.98rem; }
.contact-form input,.contact-form textarea{
    width:100%; padding:.8em 1em; border:1px solid var(--line); border-radius:8px;
    font-family:var(--body); font-size:1rem; margin-bottom:1.1rem; background:#fff;
}
.contact-form textarea{ min-height:150px; resize:vertical; }

/* =========================================================================
   14. SUBSCRIPTION / CTA BANNER
   ========================================================================= */
.cta-banner{
    background:var(--green) center/cover; color:#fff; text-align:center;
    border-radius:18px; padding:56px 30px; position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:#e9f0e9; max-width:620px; margin:0 auto 1.6rem; font-size:1.18rem; }

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.site-footer{ background:#1d140e; color:#e7dcc4; padding:60px 0 0; margin-top:0; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; align-items:start; }
.footer-brand .logo-text{ font-family:var(--serif); font-size:1.8rem; color:#fff; margin-bottom:.5rem; display:block; }
.footer-brand p{ color:#c9bca0; max-width:300px; }
.footer-social{ display:flex; gap:12px; margin-top:14px; }
.footer-social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#e7dcc4; }
.footer-social a:hover{ background:var(--gold); color:var(--brown); border-color:var(--gold); }
.footer-social svg{ width:18px; height:18px; }
.footer-col h4{ color:#fff; font-size:1.05rem; letter-spacing:.04em; margin-bottom:1rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:.55rem; }
.footer-col a{ color:#c9bca0; }
.footer-col a:hover{ color:var(--gold-soft); }
.footer-emblem{ text-align:center; }
.footer-emblem img{ width:218px; margin:0 auto; border-radius:50%; opacity:.95; }
.footer-bottom{
    margin-top:48px; border-top:1px solid rgba(255,255,255,.12);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:22px 0 30px; font-size:.88rem; color:#a99a7d;
}

/* =========================================================================
   16. PAGINATION / MISC
   ========================================================================= */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a,.pagination span{ padding:.55em .95em; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-weight:600; }
.pagination .current{ background:var(--green); color:#fff; border-color:var(--green); }
.pagination a:hover{ background:var(--cream-2); }
.breadcrumbs{ font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }
.breadcrumbs a{ color:var(--green); }
.tag-list{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.tag-list a{ background:var(--cream-2); border:1px solid var(--line); padding:.3em .8em; border-radius:999px; font-size:.85rem; color:var(--ink-soft); }

/* =========================================================================
   17. RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
    .product-grid{ grid-template-columns:repeat(3,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .footer-emblem{ grid-column:1 / -1; order:5; margin-top:10px; }
}
@media (max-width:900px){
    .main-nav,.header-tools .desktop-only{ display:none; }
    .nav-toggle{ display:block; }
    .main-nav.open{
        display:block; position:absolute; top:100%; left:0; right:0;
        background:var(--cream); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:10px 16px;
    }
    .main-nav.open ul{ flex-direction:column; align-items:stretch; gap:0; }
    .main-nav.open .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:12px; }
    .layout{ grid-template-columns:1fr; }
    .single .sidebar,.blog .sidebar,.archive .sidebar{ position:static; top:auto; margin-top:20px; }
    .post-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
    .features{ grid-template-columns:repeat(2,1fr); }
    .feature + .feature::before{ display:none; }
    .contact-grid{ grid-template-columns:1fr; }
    .value-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
    body{ font-size:18px; }
    .section{ padding:52px 0; }
    .product-grid,.product-grid.cols-4,.product-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
    .post-grid,.post-grid.cols-3{ grid-template-columns:1fr; }
    .post-nav{ grid-template-columns:1fr; }
    .post-nav .pn-next{ text-align:left; }
    .hero{ min-height:480px; }
    .hero p.lead{ font-size:1.15rem; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-bottom{ justify-content:center; text-align:center; }
}
@media (max-width:460px){
    .product-grid,.product-grid.cols-4,.product-grid.cols-3,.features{ grid-template-columns:1fr; }
    .brand .logo-text{ font-size:1.4rem; }
}