/*
Theme Name: Granny's Hugs Quilts
Theme URI: https://grannys-hugs.com
Author: Ward
Description: Storefront theme modeled on the Missouri Star Quilt Co. shopping experience — announcement bar, search-first header, department nav with dropdowns, daily deal, product carousels, and a slide-out cart drawer.
Version: 3.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grannys-hugs
*/

/* ============================================
   Fonts
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================
   Design tokens
   ============================================ */
:root {
    --teal: #17999e;
    --teal-dark: #0f7e83;
    --teal-tint: #e4f4f4;
    --sale-red: #d9434f;
    --sale-pink: #e0526e;
    --gold: #f0b429;
    --ink: #2b2723;
    --ink-soft: #5c554d;
    --ink-faint: #8b8378;
    --paper: #ffffff;
    --paper-warm: #faf7f1;
    --line: #e6e0d6;
    --rose: #c4918a;
    --sage: #8a9174;
    --brown: #9b6040;
    --shadow-soft: 0 2px 8px rgba(43, 39, 35, 0.08);
    --shadow-lift: 0 10px 30px rgba(43, 39, 35, 0.14);
    --font-display: 'Dancing Script', cursive;
    --font-serif: 'Lora', serif;
    --font-ui: 'Nunito', sans-serif;
    --max-width: 1240px;
    --radius: 10px;
}

/* ============================================
   Base
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-dark); text-decoration: none; }
a:hover { color: var(--teal); }

h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 800; line-height: 1.25; color: var(--ink); }

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

body.drawer-open { overflow: hidden; }

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-primary.is-added { background: var(--sage); }

.btn-outline { background: transparent; color: var(--teal-dark); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal-tint); color: var(--teal-dark); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper-warm); color: var(--ink); }

.btn-block { display: block; width: 100%; margin-top: 10px; }

/* Legacy hook used by old templates */
.hero-btn {
    display: inline-block;
    background: var(--teal);
    color: #fff;
    font-weight: 800;
    padding: 12px 28px;
    border-radius: 999px;
}
.hero-btn:hover { background: var(--teal-dark); color: #fff; }

/* ============================================
   Announcement + utility bars
   ============================================ */
.announce-bar {
    background: var(--teal);
    color: #fff;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 16px;
}
.announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.utility-bar {
    background: var(--paper-warm);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.utility-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.utility-welcome {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--brown);
}
.utility-links { display: flex; gap: 16px; }
.utility-links a, .utility-account a { color: var(--ink-soft); font-weight: 700; }
.utility-links a:hover, .utility-account a:hover { color: var(--teal-dark); }
.utility-account { margin-left: auto; display: flex; gap: 16px; }

/* ============================================
   Main header
   ============================================ */
.main-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.main-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ink);
    cursor: pointer;
    padding: 6px;
}

.header-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-brand img { width: 64px; height: 64px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--brown);
}
.brand-sub {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--teal-dark);
}

.header-search {
    flex: 1;
    display: flex;
    max-width: 560px;
    border: 2px solid var(--teal);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.header-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink);
    min-width: 0;
}
.header-search button {
    border: none;
    background: var(--teal);
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
}
.header-search button:hover { background: var(--teal-dark); }

.header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.header-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
}
.header-cart:hover { color: var(--teal-dark); }

.cart-icon-wrap { position: relative; }
.cart-count {
    position: absolute;
    top: -7px;
    right: -11px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sale-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 19px;
    text-align: center;
}
.cart-count.is-empty { background: var(--ink-faint); }

/* ============================================
   Department navigation
   ============================================ */
.main-navigation {
    background: var(--paper);
    border-bottom: 3px solid var(--teal);
}
.nav-list {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 12px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.nav-list > li { position: relative; }
.nav-list > li > a {
    display: block;
    padding: 12px 15px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}
.nav-list > li > a:hover { color: var(--teal-dark); }
.nav-sale { color: var(--sale-red) !important; }

.caret {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    margin-left: 5px;
}

.dropdown {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--teal);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}
.has-dropdown:hover > .dropdown,
.has-dropdown.is-open > .dropdown,
.has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown a {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}
.dropdown a:hover { background: var(--teal-tint); color: var(--teal-dark); }

/* ============================================
   Hero slider
   ============================================ */
.hero-slider { position: relative; }
.hero-slides { position: relative; min-height: 480px; overflow: hidden; }
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide--teal {
    background:
        radial-gradient(circle at 82% 25%, rgba(255,255,255,0.22) 0 60px, transparent 61px),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,0.14) 0 100px, transparent 101px),
        linear-gradient(120deg, var(--teal-dark), var(--teal) 55%, #4dbdc1);
}
.hero-slide--rose {
    background:
        radial-gradient(circle at 85% 30%, rgba(255,255,255,0.2) 0 70px, transparent 71px),
        linear-gradient(120deg, #a06a63, var(--rose) 60%, #e0b7b1);
}
.hero-slide--plum {
    background:
        radial-gradient(circle at 80% 65%, rgba(255,255,255,0.16) 0 90px, transparent 91px),
        linear-gradient(120deg, #4e3a55, #7c5f86 60%, #a98cb3);
}

.hero-slide-inner {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    color: #fff;
}
.hero-kicker {
    font-family: var(--font-display);
    font-size: 26px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.92);
}
.hero-slide h2 {
    color: #fff;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 900;
    max-width: 620px;
    margin-bottom: 12px;
}
.hero-sub {
    max-width: 520px;
    font-size: 17px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
}
.hero-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.hero-dots button.is-active { background: #fff; }

/* ============================================
   Daily deal
   ============================================ */
.daily-deal { padding: 46px 0 10px; }
.daily-deal-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 34px;
    align-items: center;
    background: var(--paper-warm);
    border: 2px dashed var(--teal);
    border-radius: 16px;
    padding: 30px;
}
.deal-media { position: relative; }
.deal-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background-color: var(--line);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-soft);
}
.deal-badge {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 2;
    background: var(--sale-pink);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}
.deal-kicker {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--teal-dark);
    margin-bottom: 4px;
}
.deal-title { font-size: clamp(22px, 3vw, 32px); margin-bottom: 10px; }
.deal-prices { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.deal-prices .price-sale { font-size: 30px; }

.deal-countdown { display: flex; gap: 12px; margin-bottom: 22px; }
.deal-countdown div {
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
    padding: 8px 0;
    width: 66px;
    text-align: center;
}
.deal-countdown strong { display: block; font-size: 22px; font-weight: 900; }
.deal-countdown span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.deal-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================
   Product rows / cards / grid
   ============================================ */
.product-row { padding: 44px 0; }
.product-row--tinted { background: var(--teal-tint); }

.row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.row-head h2, .section-title { font-size: clamp(22px, 3vw, 30px); }
.row-link { font-weight: 800; font-size: 14.5px; white-space: nowrap; }

/* New Arrivals / Best Sellers rows. Each card is a third of the content width,
   matching the shop grid, so three are in view and the rest scroll. Cards were
   215px before, which put six tiny tiles on screen next to the full-size shop
   cards. calc() rather than a fixed px so it tracks the container. */
.product-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 18px) / 3);
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}
.product-scroller > * { scroll-snap-align: start; }
@media (max-width: 900px) {
    .product-scroller { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (max-width: 560px) {
    .product-scroller { grid-auto-columns: 100%; }
}

/* Three products per row, so each card (and its square photo) is about a
   third of the content width. Fixed 3 rather than auto-fill: auto-fill packed
   in 5-6 narrow cards on a wide screen and the fabric was too small to judge.
   Steps down to 2 and then 1 so the photo never gets cramped on small screens. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .product-grid { grid-template-columns: 1fr; }
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.product-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.product-media { position: relative; display: block; }
.product-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sale-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--sale-pink);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
}

.product-info { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-title { font-size: 15px; font-weight: 700; line-height: 1.35; min-height: 2.6em; }
.product-rating { font-size: 13px; color: var(--ink-faint); }
.star { color: #d8d2c6; }
.star.is-on { color: var(--gold); }
.review-count { margin-left: 3px; }

.product-prices { margin-bottom: 8px; }
.price { font-size: 18px; font-weight: 900; color: var(--ink); }
.price-sale { font-size: 18px; font-weight: 900; color: var(--sale-red); }
.price-was { font-size: 14px; color: var(--ink-faint); text-decoration: line-through; margin-left: 6px; }
.product-stock { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin: -2px 0 8px; }
.product-stock.is-out { color: var(--sale-red); }

/* Shopper-facing description on the product card, clamped to three lines. */
.product-desc {
    font-size: 13px;
    color: var(--ink-faint);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-add { margin-top: auto; padding: 10px 18px; font-size: 14px; }

/* ============================================
   Category grid
   ============================================ */
.category-section { padding: 44px 0; background: var(--paper-warm); }
.category-section .section-title { text-align: center; margin-bottom: 26px; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px;
}
.category-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 12px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.category-tile:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
    border-color: var(--teal);
    color: var(--teal-dark);
}
.cat-emoji { font-size: 30px; line-height: 1; }
.category-tile--sale { border-color: var(--sale-pink); color: var(--sale-red); }

/* ============================================
   Blog / tutorials section
   ============================================ */
.blog-section { padding: 44px 0; }
/* Like the product rows, the blog section only appears when there are posts to list. */
.blog-section:not(:has(.blog-card)) { display: none; }
.blog-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
/* The post-query loop wraps the cards in a .wp-block-query div; let that wrapper
   dissolve so each .blog-card becomes a direct grid item and they flow across. */
.blog-posts > .wp-block-query {
    display: contents;
}
.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.blog-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.blog-card h3 { font-size: 17px; margin-bottom: 8px; }
.blog-card h3 a { color: var(--ink); }
.blog-card h3 a:hover { color: var(--teal-dark); }
.excerpt { font-size: 14px; color: var(--ink-soft); }
.blog-more { text-align: center; margin-top: 24px; }
.blog-more a, .blog-section-title { font-weight: 800; }

/* ============================================
   Story section
   ============================================ */
.story-section { padding: 50px 0 64px; background: var(--paper-warm); }
.story-inner {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: center;
}
.story-photo img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: var(--shadow-lift);
}
.story-copy h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.story-copy p { font-family: var(--font-serif); font-size: 16.5px; color: var(--ink-soft); margin-bottom: 14px; }
.story-signoff {
    font-family: var(--font-display) !important;
    font-size: 34px !important;
    color: var(--brown) !important;
}

/* ============================================
   Shop page
   ============================================ */
.shop-page { padding: 40px 0 64px; }
.shop-head { margin-bottom: 24px; }
.shop-head h1 { font-size: clamp(26px, 4vw, 38px); }
.shop-sub { color: var(--ink-soft); margin-top: 4px; }
.shop-search-clear {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}
.shop-search-clear:hover { border-color: var(--teal); color: var(--teal-dark); }
.shop-search-clear span { font-size: 15px; line-height: 1; }
.shop-search-clear[hidden] { display: none; }

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.shop-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-filters button {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}
.shop-filters button:hover { border-color: var(--teal); color: var(--teal-dark); }
.shop-filters button.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.shop-filters .filter-sale { color: var(--sale-red); }
.shop-filters .filter-sale.is-active { background: var(--sale-red); border-color: var(--sale-red); color: #fff; }

.shop-sort { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.shop-sort select {
    margin-left: 8px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.shop-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ============================================
   Cart drawer
   ============================================ */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 39, 35, 0.5);
    z-index: 90;
}
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(420px, 100vw);
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.28s ease;
    box-shadow: -12px 0 40px rgba(43, 39, 35, 0.2);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.cart-drawer-head h2 { font-size: 20px; }
.cart-close { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 4px; }
.cart-close:hover { color: var(--ink); }

.cart-shipbar { padding: 14px 20px; background: var(--teal-tint); }
.cart-shipbar p { font-size: 13.5px; margin-bottom: 8px; }
.ship-track { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
.ship-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--teal);
    transition: width 0.35s ease;
}
.ship-fill.is-full { background: var(--sage); }

.cart-items { flex: 1; overflow-y: auto; padding: 10px 20px; }

.cart-line {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.cart-line-img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
}
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.cart-line-price { font-size: 13.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.cart-line-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}
.cart-line-total { font-weight: 900; font-size: 15px; }
.cart-line-remove {
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-faint);
    text-decoration: underline;
    cursor: pointer;
}
.cart-line-remove:hover { color: var(--sale-red); }

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.qty-stepper button {
    width: 30px;
    height: 28px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 800;
    color: var(--teal-dark);
    cursor: pointer;
}
.qty-stepper button:hover { background: var(--teal-tint); }
.qty-val {
    min-width: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.cart-empty { text-align: center; padding: 46px 10px; color: var(--ink-soft); }
.cart-empty p { margin-bottom: 16px; }

.cart-drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; }
.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 4px;
}
.cart-note { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 12px; }
.cart-viewcart { display: block; margin-bottom: 10px; }
.cart-checkout { display: block; width: 100%; }

/* ============================================
   Product details popup
   ============================================ */
.details-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 39, 35, 0.5);
    z-index: 90;
}
.details-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    opacity: 0;
    pointer-events: none;
    width: min(720px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 48px));
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    z-index: 100;
    padding: 20px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.details-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.details-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0;
}
.details-close:hover { color: var(--ink); background: var(--paper-warm); }

.details-body { display: flex; gap: 28px; }
.details-media { position: relative; flex: 0 0 260px; }
.details-media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.details-info { flex: 1; min-width: 0; padding-top: 4px; }
.details-cat {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 4px;
}
.details-title { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.details-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 12px 0 18px; }
.details-no-desc { color: var(--ink-faint); font-style: italic; }

@media (max-width: 620px) {
    .details-body { flex-direction: column; gap: 16px; }
    .details-media { flex-basis: auto; }
}

/* ============================================
   Cart page
   ============================================ */
.cart-page { padding: 40px 0 64px; }
.cart-page h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 20px; }
.cart-page-shipbar { border-radius: var(--radius); margin-bottom: 26px; }
.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 34px;
    align-items: start;
}
.cart-line--page .cart-line-img { width: 96px; height: 96px; }
.cart-line--page .cart-line-title { font-size: 16px; }

.cart-summary {
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 20px;
}
.cart-summary h2 { font-size: 20px; margin-bottom: 16px; }
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding: 7px 0;
}
.summary-total {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 14px;
    font-size: 17px;
    font-weight: 800;
}

/* ============================================
   Auth pages (login / register)
   ============================================ */
.auth-page { padding: 50px 0 72px; background: var(--paper-warm); }

/* Two-panel split: decorative cottage panel + form */
.auth-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    max-width: 940px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

/* Decorative side — quilt-patch texture + Dancing Script welcome */
.auth-aside {
    position: relative;
    color: #fff;
    background:
        radial-gradient(circle at 82% 20%, rgba(255,255,255,0.16) 0 70px, transparent 71px),
        radial-gradient(circle at 90% 78%, rgba(255,255,255,0.10) 0 110px, transparent 111px),
        linear-gradient(150deg, var(--teal-dark), var(--teal) 60%, #4dbdc1);
}
.auth-aside--rose {
    background:
        radial-gradient(circle at 85% 22%, rgba(255,255,255,0.18) 0 80px, transparent 81px),
        linear-gradient(150deg, #a06a63, var(--rose) 60%, #e0b7b1);
}
.auth-aside::after {
    /* subtle patchwork stitch grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.5;
    pointer-events: none;
}
.auth-aside-inner { position: relative; z-index: 1; padding: 48px 40px; }
.auth-kicker {
    font-family: var(--font-display);
    font-size: 26px;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 2px;
}
.auth-display {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 16px;
}
.auth-aside-text { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.92); margin-bottom: 22px; }
.auth-aside-text strong { color: #fff; }
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.auth-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.auth-perks span { font-size: 20px; flex-shrink: 0; }

/* Form side */
.auth-panel { padding: 44px 40px; }
.auth-panel-title { font-size: 24px; margin-bottom: 18px; }
.auth-error {
    background: #fbe9eb;
    border: 1px solid var(--sale-red);
    color: var(--sale-red);
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.auth-form label {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink-soft);
    margin-bottom: 14px;
}
.auth-form-row { display: flex; gap: 12px; }
.auth-form-row label { flex: 1; }
.auth-optional { font-weight: 600; color: var(--ink-faint); }
.auth-form input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.auth-form .btn-block { margin-top: 6px; }
.auth-alt { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 18px; }
.auth-alt a { font-weight: 800; }

@media (max-width: 760px) {
    .auth-split { grid-template-columns: 1fr; max-width: 460px; }
    .auth-aside-inner { padding: 34px 30px; }
    .auth-perks { display: none; }
    .auth-panel { padding: 32px 30px; }
}

/* ============================================
   Product Manager (/shop-admin/)
   ============================================ */
.admin-page { padding: 40px 0 64px; }
.admin-guard {
    max-width: 440px;
    margin: 30px auto;
    text-align: center;
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
}
.admin-guard p { margin-bottom: 16px; color: var(--ink-soft); }

.admin-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 34px;
    align-items: start;
}

.admin-form {
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 20px;
}
.admin-form h2 { font-size: 19px; margin-bottom: 16px; }
.admin-form label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-soft);
    margin-bottom: 12px;
}
.admin-form input[type="text"], .admin-form input[type="number"], .admin-form select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 12px;
    font-family: var(--font-ui);
    font-size: 14.5px;
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 8px;
    background: #fff;
    outline: none;
}
.admin-form input:focus, .admin-form select:focus { border-color: var(--teal); }
.admin-form input[readonly] { background: var(--paper-warm); color: var(--ink-faint); }
.admin-form-row { display: flex; gap: 10px; }
.admin-form-row label { flex: 1; }

.admin-checks { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-check { display: flex !important; align-items: center; gap: 6px; margin-bottom: 0 !important; }
.admin-check input { width: auto; margin: 0; }

.admin-swatch {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 16px;
}
.admin-swatch legend { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); padding: 0 6px; }
.admin-colors { display: flex; gap: 6px; margin-top: 4px; }
.admin-colors input[type="color"] {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 2px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.admin-preview {
    border-radius: 8px;
    border: 1px solid var(--line);
    margin-top: 10px;
}
.admin-form-actions { display: flex; gap: 10px; }

.admin-list-wrap h2 { font-size: 19px; margin-bottom: 14px; }
.admin-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 10px;
}
.admin-row img { border-radius: 6px; flex-shrink: 0; }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-main strong { display: block; font-size: 14.5px; }
.admin-row-meta { font-size: 12.5px; color: var(--ink-faint); }
.admin-row-meta s { color: var(--ink-faint); }
.admin-row-tags { display: flex; gap: 5px; }
.admin-tag {
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--teal-tint);
    color: var(--teal-dark);
    border-radius: 999px;
    padding: 3px 9px;
}
.admin-tag--deal { background: #fbe9eb; color: var(--sale-red); }
.admin-row-actions { display: flex; gap: 8px; }

.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.btn-danger { background: transparent; color: var(--sale-red); border-color: var(--sale-red); }
.btn-danger:hover { background: #fbe9eb; color: var(--sale-red); }

@media (max-width: 900px) {
    .admin-grid { grid-template-columns: 1fr; }
    .admin-form { position: static; }
}

/* ============================================
   Customer account page
   ============================================ */
.account-page { padding: 44px 0 64px; background: var(--paper-warm); }
.account-header { margin-bottom: 6px; }
.account-kicker {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--teal-dark);
    margin-bottom: -2px;
}
.account-display {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
    margin-bottom: 6px;
}
.account-sub { color: var(--ink-soft); font-size: 15px; }
.account-sub a { font-weight: 800; }

.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.account-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 28px 28px 30px;
}
.account-card h2 {
    font-size: 20px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--teal-tint);
}
.account-card .auth-form input[readonly] { background: var(--paper-warm); color: var(--ink-faint); }
.account-card .btn-block { margin-top: 4px; }

.auth-success {
    background: #edfaef;
    border: 1px solid #00a32a;
    color: #0a7d2c;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    max-width: 640px;
}
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }

/* ============================================
   Toast
   ============================================ */
.gh-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    background: var(--ink);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: 999px;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 120;
    max-width: min(90vw, 480px);
    text-align: center;
}
.gh-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ============================================
   Footer
   ============================================ */
.site-footer { border-top: 3px solid var(--teal); }

.footer-newsletter { background: var(--teal); color: #fff; }
.footer-newsletter-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 34px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}
.newsletter-copy h2 { color: #fff; font-size: clamp(20px, 3vw, 26px); margin-bottom: 4px; }
.newsletter-copy p { color: rgba(255, 255, 255, 0.9); font-size: 15px; }
.newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; }
.newsletter-form input {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    min-width: 0;
}
.newsletter-form .btn-primary { background: var(--ink); }
.newsletter-form .btn-primary:hover { background: #000; }

.footer-main { background: var(--paper-warm); }
.footer-columns {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 44px 20px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
    gap: 30px;
}
.footer-col h3 {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--ink-soft); font-size: 14.5px; }
.footer-col a:hover { color: var(--teal-dark); }

.footer-col-brand img { margin-bottom: 10px; }
.footer-tagline {
    font-family: var(--font-display);
    font-size: 21px;
    color: var(--brown);
    margin-bottom: 14px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
}
.footer-social a:hover { color: var(--teal-dark); border-color: var(--teal); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom { background: var(--ink); color: rgba(255, 255, 255, 0.75); }
.footer-bottom-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.footer-payments { display: flex; gap: 8px; }
.pay-badge {
    background: #fff;
    color: var(--ink);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 3px 8px;
}

/* ============================================
   Legacy content templates (blog, page, search)
   ============================================ */
.content-section {
    max-width: 880px;
    margin: 0 auto;
    padding: 44px 20px 64px;
}
.content-section .entry-title, .content-section h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 14px; }
.entry-meta { color: var(--ink-faint); font-size: 14px; margin-bottom: 22px; }
.post-content, .entry-content { font-family: var(--font-serif); font-size: 17px; color: var(--ink-soft); }
.post-content p, .entry-content p { margin-bottom: 18px; }
.post-content h2, .entry-content h2,
.post-content h3, .entry-content h3 { font-family: var(--font-ui); color: var(--ink); margin: 28px 0 12px; }
.post-content img, .entry-content img { border-radius: var(--radius); margin: 20px 0; }
.post-content a, .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.blog-post .wp-post-image { border-radius: var(--radius); margin-bottom: 22px; }
.content-section .blog-posts { margin-top: 10px; }

/* ============================================
   Contact form (wtm64/contact-form block)
   ============================================ */
.wtm64-contact-form-wrap { max-width: 480px; margin-top: 24px; }
.wtm64-contact-form .cf-field { margin-bottom: 16px; }
.wtm64-contact-form label {
    display: block;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink-soft);
    margin-bottom: 5px;
}
.wtm64-contact-form input,
.wtm64-contact-form textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 8px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wtm64-contact-form input:focus,
.wtm64-contact-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.wtm64-contact-form .cf-submit {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--teal);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease;
}
.wtm64-contact-form .cf-submit:hover { background: var(--teal-dark); }
.contact-feedback {
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.contact-feedback.contact-success { background: var(--teal-tint); color: var(--teal-dark); }
.contact-feedback.contact-error { background: #fbe4e6; color: var(--sale-red); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1000px) {
    .footer-columns { grid-template-columns: 1fr 1fr 1fr; }
    .footer-col-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .utility-links { display: none; }

    .menu-toggle { display: block; }

    .main-header-inner { flex-wrap: wrap; gap: 12px; }
    .header-brand { order: 1; }
    .menu-toggle { order: 0; }
    .header-actions { order: 2; margin-left: auto; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; }

    .main-navigation { display: none; border-bottom: 1px solid var(--line); }
    .main-navigation.toggled { display: block; }
    .nav-list { flex-direction: column; padding: 6px 0; }
    .nav-list > li > a { padding: 12px 22px; }
    .dropdown {
        position: static;
        opacity: 1;
        visibility: hidden;
        transform: none;
        display: none;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--teal-tint);
        margin-left: 22px;
        border-radius: 0;
    }
    .has-dropdown.is-open > .dropdown { display: block; visibility: visible; }

    .daily-deal-card { grid-template-columns: 1fr; }
    .deal-media { max-width: 320px; }
    .story-inner { grid-template-columns: 1fr; text-align: center; }
    .story-photo { max-width: 260px; margin: 0 auto; }
    .cart-page-grid { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
}

@media (max-width: 560px) {
    .hero-slides { min-height: 420px; }
    .brand-name { font-size: 24px; }
    .header-brand img { width: 48px; height: 48px; }
    .header-cart > span:last-child { display: none; }
    .deal-countdown div { width: 58px; }
    .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* Admin link in the utility bar — only rendered for accounts that can use the
   admin tool, so it doubles as a signal that you are signed in as staff. */
.utility-account .utility-admin-link {
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--teal, #2b7a78);
    color: #fff;
}
.utility-account .utility-admin-link:hover { background: var(--teal-dark, #205e5c); color: #fff; }

/* Close Account card — visually separated from the routine account forms so
   the destructive action is not one more identical box to click through. */
.account-card-danger { border: 1px solid #e6c9c9; background: #fdf7f7; }
.account-card-danger h2 { color: #a12b2b; }
.account-card-danger .account-note { font-size: 14px; color: #6b5b5b; margin-bottom: 14px; line-height: 1.6; }
.account-card-danger .account-confirm { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.account-card-danger .account-confirm input { width: auto; }
.btn-danger { background: #a12b2b; color: #fff; }
.btn-danger:hover { background: #841f1f; color: #fff; }

/* ── Two-tier navigation ─────────────────────────────────────────────
   .main-navigation carries the site bar on every page; .shop-navigation is
   the department row and is only emitted inside the shop. */
.shop-navigation { background: var(--cream, #faf6f0); border-top: 1px solid rgba(0,0,0,.06); }
.shop-navigation .nav-list {
    display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center;
    list-style: none; margin: 0 auto; padding: 10px 16px; max-width: 1280px;
}
.shop-navigation .nav-list a { font-size: 14px; text-decoration: none; color: var(--ink, #33302e); padding: 4px 0; }
.shop-navigation .nav-list a:hover { color: var(--teal-dark, #205e5c); }
.main-navigation .nav-list a.is-current { color: var(--teal-dark, #205e5c); font-weight: 700; }

/* ── Landing page: the site's own pages ─────────────────────────────── */
.feature-section { padding: 48px 0; }
.feature-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-card {
    background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px;
    padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.feature-card h3 { margin: 0; font-size: 19px; }
.feature-card h3 a { color: var(--ink, #33302e); text-decoration: none; }
.feature-card h3 a:hover { color: var(--teal-dark, #205e5c); }
.feature-card p { margin: 0; color: #6b6560; font-size: 14px; line-height: 1.6; }
.feature-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--teal, #2b7a78); text-decoration: none; }
.feature-more:hover { color: var(--teal-dark, #205e5c); }

/* Shop pagination — 20 products per page (see theme.js initShopPage). */
.shop-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 4px;
}
.shop-pagination .page-btn {
    min-width: 42px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}
.shop-pagination .page-btn:hover:not([disabled]):not(.is-active) {
    border-color: var(--teal);
    color: var(--teal-dark);
}
.shop-pagination .page-btn.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    cursor: default;
}
.shop-pagination .page-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
.shop-pagination .page-gap {
    padding: 8px 2px;
    color: var(--ink-faint);
    font-weight: 800;
}

/* Groups the Show-per-page and Sort selectors together on the right of the
   shop toolbar so space-between keeps them beside each other, not spread. */
.shop-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}