/* ============================================================
   Tarina brand theme
   Laser engraving  |  Vantaa, Finland

   Ported from the website.html reference design:
     #5A3828  Walnut Brown (--brown)  - headings, links, accents
     #C9AC8F  Oak Sand     (--sand)   - numerals, highlights
     #4F5945  Deep Sage    (--forest) - solid buttons, footer
     #7C8067  Sage         (--sage)   - eyebrows, muted labels
     #F4EFE5  Linen Cream  (--cream)  - page background
     #2E2A24  ink                     - body copy
   Type: Cormorant Garamond (headings) + Montserrat (sub-headings) + Open Sans (body).
   Loaded after the base theme CSS so these rules win.
   ============================================================ */

:root {
    --forest: #4F5945;
    --brown: #5A3828;
    --sage: #7C8067;
    --sand: #C9AC8F;
    --cream: #F4EFE5;
    --cream-deep: #EEE6D8;
    --ink: #2E2A24;
    --white: #FFFDF9;
    --muted: rgba(46, 42, 36, .65);
    --line: rgba(79, 89, 69, .18);
    --shadow: 0 18px 48px rgba(67, 50, 38, .10);
    --radius: 26px;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Open Sans", -apple-system, "Segoe UI", sans-serif;
    --subhead: "Montserrat", "Open Sans", -apple-system, "Segoe UI", sans-serif;
    /* Header: one row (logo, menu, search, account, cart); shrinks on scroll */
    --logo-w: 220px;
    --wordmark-w: 230px;
    --header-row: 156px;
    --header-row-compact: 72px;
    /* Re-point the base theme variables at the brand palette */
    --primary-color: #4F5945;
    --secondary-color: #5A3828;
    --text-color: #2E2A24;
    --border-color: rgba(79, 89, 69, .18);
    --shadow-color: rgba(67, 50, 38, .10);
    /* Aliases kept for older rules */
    --tarina-forest: #4F5945;
    --tarina-brown: #5A3828;
    --tarina-sage: #7C8067;
    --tarina-sand: #C9AC8F;
    --tarina-cream: #F4EFE5;
    --tarina-ink: #2E2A24;
    --bs-body-font-family: "Open Sans", -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: #2E2A24;
    --bs-body-bg: #F4EFE5;
    --bs-link-color: #5A3828;
    --bs-link-color-rgb: 90, 56, 40;
    --bs-link-hover-color: #7D5A48;
    --bs-link-hover-color-rgb: 125, 90, 72;
}

html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    overflow-x: hidden;
}

a { color: var(--brown); text-decoration: none; transition: color .25s ease; }
a:hover, a:focus { color: #7D5A48; }

::selection { background: rgba(201, 172, 143, .45); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,
.section-title, .footer-title {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--brown);
    letter-spacing: -.02em;
}

h6, .h6 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

.display {
    font-size: clamp(3rem, 6.4vw, 6.4rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.section-title {
    font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
    line-height: 1.04;
    letter-spacing: -.03em;
    margin: 0;
    font-weight: 500 !important;
}

.section-title em, h1 em, h2 em, h3 em { font-style: italic; }

.eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--sage);
    margin-bottom: 12px;
}

p, .subcopy { line-height: 1.8; }
.subcopy { color: var(--muted); max-width: 650px; }
.text-muted { color: var(--muted) !important; }
.rule { height: 1px; background: var(--line); }

/* ---------- Buttons ---------- */
.solid-btn,
.pill-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px !important;
    padding: 13px 22px !important;
    font-family: var(--sans);
    font-size: .76rem !important;
    font-weight: 500 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: .25s ease;
    line-height: 1.2;
}

.solid-btn,
.btn-primary, .btn.btn-primary,
.btn-success, .btn-dark, .btn-tarina,
.buy-btn {
    border: 1px solid var(--forest) !important;
    background: var(--forest) !important;
    color: var(--cream) !important;
}

.solid-btn:hover, .solid-btn:focus,
.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-dark:hover, .btn-tarina:hover,
.buy-btn:hover {
    background: var(--forest) !important;
    border-color: var(--forest) !important;
    color: var(--cream) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(79, 89, 69, .18);
}

.pill-btn,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-secondary, .btn-light {
    border: 1px solid var(--forest) !important;
    background: transparent !important;
    color: var(--forest) !important;
}

.pill-btn:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-secondary:hover, .btn-light:hover {
    background: var(--forest) !important;
    color: var(--cream) !important;
    transform: translateY(-1px);
}

.btn-danger, .btn-outline-danger { border-color: #9B3D2E !important; }
.btn-danger { background: #9B3D2E !important; color: #fff !important; }
.btn-sm { padding: 8px 14px !important; font-size: .68rem !important; }
.btn-link { text-transform: none; letter-spacing: 0; color: var(--brown); }

.text-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--brown);
    padding: 14px 0;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-btn span { display: inline-block; transition: transform .25s ease; }
.text-btn:hover span { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    background: rgba(244, 239, 229, .9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(79, 89, 69, .10);
    transition: box-shadow .3s ease;
}

.site-header.is-compact { box-shadow: 0 10px 30px rgba(67, 50, 38, .06); }

.site-header-row {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    height: var(--header-row);
    padding: 0 clamp(18px, 3vw, 48px);
    transition: height .45s cubic-bezier(.7, 0, .18, 1);
}
.site-header.is-compact .site-header-row { height: var(--header-row-compact); }

/* Logo: round logo at the top; the wordmark fades in over it once the header shrinks */
.brand-word { position: relative; display: block; line-height: 0; }
.brand-word img { display: block; height: auto; }
.brand-word .brand-logo {
    width: var(--logo-w); max-width: 40vw;
    transition: width .45s cubic-bezier(.7, 0, .18, 1), opacity .3s ease;
}
.brand-word .brand-wordmark {
    position: absolute; left: 0; top: 50%;
    width: var(--wordmark-w); max-width: 40vw;
    transform: translateY(-50%) scale(.94); transform-origin: left center;
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.site-header.is-compact .brand-word .brand-logo { width: var(--wordmark-w); opacity: 0; }
.site-header.is-compact .brand-word .brand-wordmark { opacity: 1; transform: translateY(-50%) scale(1); }

.header-left { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.header-action { flex: 0 0 auto; margin-left: auto; display: flex; gap: 18px; align-items: center; }

.header-search {
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 6px 2px;
    width: clamp(140px, 14vw, 220px);
    color: var(--sage);
}

.header-search input {
    border: 0 !important;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: .82rem;
    color: var(--ink);
    padding: 4px 0;
}

.header-search input::placeholder { color: rgba(46, 42, 36, .45); }
.header-search:focus-within { border-color: var(--forest); }

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    padding: 6px 0;
}

.header-link:hover { opacity: 1; color: var(--brown); }

.cart-btn { position: relative; padding: 10px 16px !important; }

.cart-btn .count-num {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brown);
    color: var(--cream);
    font-size: .64rem;
    letter-spacing: 0;
}

.menu-btn {
    border: 0;
    background: transparent;
    font-size: 1.35rem;
    color: var(--forest);
    padding: 4px;
}

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 8px;
}

.dropdown-item { border-radius: 8px; font-size: .85rem; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cream-deep); color: var(--brown); }

/* Navigation: inline in the header row on desktop */
.main-nav-wrap { flex: 1 1 auto; min-width: 0; display: flex; }

.main-nav {
    display: flex;
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .nav-link {
    position: relative;
    display: inline-block;
    padding: 12px 0 !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem !important;
    font-weight: 400 !important;
    color: rgba(46, 42, 36, .68) !important;
}

.main-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 6px;
    height: 1px;
    background: var(--brown);
    transition: right .35s ease;
}

.main-nav .nav-link.active { color: var(--brown) !important; }
.main-nav .nav-link.active::after, .main-nav .nav-link:hover::after { right: 0; }
.main-nav .nav-link:hover { color: var(--brown) !important; }

.mobile-account { display: grid; gap: 4px; margin-top: 24px; }
.mobile-account a { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }

/* Keep content below the fixed header */
.site-main { padding-top: var(--header-row); min-height: 50vh; }

.tarina-alert,
.alert-success {
    border: 1px solid var(--line);
    background: var(--cream-deep);
    color: var(--forest);
    border-radius: 14px;
}

/* ---------- Home: hero ---------- */
.hero { padding: clamp(48px, 7vw, 110px) 0 clamp(40px, 5vw, 70px); }
.hero-copy .display { color: var(--brown); max-width: 720px; }
.hero-copy .lead { margin: 28px 0 34px; max-width: 560px; font-size: 1rem; line-height: 1.85; color: var(--muted); font-weight: 400; }
.hero-actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

.hero-banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: auto; }
.hero-banner .carousel, .hero-banner .carousel-inner { height: 100%; border-radius: var(--radius); }

.banner-slide {
    min-height: 480px;
    height: auto;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    position: relative;
}

.banner-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(46, 42, 36, .55));
    opacity: 1;
}

.banner-content {
    position: absolute;
    left: 32px; right: 32px; bottom: 32px; top: auto;
    transform: none;
    max-width: none;
    color: var(--cream);
    z-index: 1;
    padding: 0;
}

.banner-content h1, .banner-content h2, .banner-content h3 { color: var(--cream); font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: 10px; }
.banner-content p { color: rgba(244, 239, 229, .85); margin-bottom: 16px; }

.banner-badge {
    display: inline-block;
    background: transparent;
    color: var(--sand);
    padding: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .66rem;
    font-weight: 600;
}

.pill-btn-light { border-color: var(--cream) !important; color: var(--cream) !important; }
.pill-btn-light:hover { background: var(--cream) !important; color: var(--brown) !important; }

.hero-banner .carousel-indicators { justify-content: flex-end; margin: 0 28px 34px auto; }
.hero-banner .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--cream); }

/* ---------- Home: promises strip ---------- */
.info-section { padding: 0 0 20px; }

.info-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.info-item { display: flex; gap: 16px; align-items: center; padding: 26px 24px; border-left: 1px solid var(--line); }
.info-item:first-child { border-left: 0; padding-left: 0; }
.info-icon { width: 42px; flex: 0 0 42px; opacity: .8; }
.info-icon img { width: 100%; height: auto; }
.info-con h5 { font-size: 1.15rem; margin-bottom: 4px; color: var(--brown); }
.info-con p { font-size: .82rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- Product carousels + cards ---------- */
.section-header {
    display: flex !important;
    justify-content: space-between;
    align-items: end !important;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.custom-nav { display: flex; gap: 8px; }

.custom-nav button {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--forest);
    display: grid;
    place-items: center;
    transition: .25s ease;
}

.custom-nav button:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); }

.product-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
    min-width: 0;
}

.product-card:hover { box-shadow: none; transform: none; }

.product-card img,
.product-card .product-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 18px;
    background: #DDD2C0;
    transition: transform .6s ease;
}

.product-card .product-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #DDD2C0;
}

.product-card .product-image:hover img { transform: scale(1.03); }


.product-content { padding: 14px 2px 0; }
.product-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }

.product-card .product-title,
.product-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -.01em;
}

.product-card .product-title a, .product-title a { color: var(--brown); }
.product-card .product-title a:hover, .product-title a:hover { color: var(--forest); }

.product-card .brand,
.brand {
    display: inline-block;
    margin-top: 8px;
    font-size: .63rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 8px;
    color: var(--sage);
}

.brand:empty { display: none !important; }

.product-card .price, .price {
    font-size: .85rem;
    color: var(--forest);
    white-space: nowrap;
    font-weight: 400;
}

.product-card .price .new, .price .new, .new-price, .product-price { color: var(--forest); font-weight: 600; }
.product-card .price .old, .price .old, .old-price, .price-old { color: rgba(46, 42, 36, .45); text-decoration: line-through; font-weight: 400; margin-left: 4px; }

/* Product grids on listing pages */
.shop-grid { gap: 32px 20px; }

/* ---------- Offers ---------- */
.offer-section, .hot-deal-section { padding: 40px 0; margin: 0; }
.hot-deal-inner { background: transparent; padding: 0; }
.offer-img, .offer-block { display: block; border-radius: 22px; overflow: hidden; background: var(--cream-deep); }
.offer-img img, .offer-block img { width: 100%; transition: transform .6s ease; border-radius: 0; }
.offer-img:hover img, .offer-block:hover img { transform: scale(1.03); }

/* ---------- Story ---------- */
.story-section { padding: 90px 0; background: var(--cream-deep); margin-top: 40px; }
.story-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.story-big { font-size: clamp(2.3rem, 4.5vw, 5rem); line-height: 1.04; color: var(--forest); max-width: 560px; }
.story-langs { border-top: 1px solid rgba(79, 89, 69, .2); }
.lang-block { padding: 32px 0; border-bottom: 1px solid rgba(79, 89, 69, .2); display: grid; grid-template-columns: 110px 1fr; gap: 18px; }
.lang-code { color: var(--sage); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding-top: 8px; }
.lang-text { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.55; color: var(--brown); }
.brand-thought { margin-top: 54px; padding-top: 34px; border-top: 1px solid rgba(79, 89, 69, .22); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.brand-thought h3 { font-size: 2rem; color: var(--forest); }
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; color: var(--brown); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.flow span:not(:last-child)::after { content: "\2192"; margin-left: 10px; color: var(--sage); }

/* ---------- FAQ (home + FAQ page) ---------- */
.faq-section { padding: 86px 0 96px; }
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 23px 0;
    color: var(--ink);
}

.faq-q strong { font-weight: 500 !important; }
.faq-q i { font-style: normal; color: var(--sage); font-size: 1.2rem; transition: transform .25s ease; }
.faq-a { max-height: 0; overflow: hidden; color: var(--muted); line-height: 1.7; transition: max-height .35s ease, padding .35s ease; padding-right: 40px; }
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 22px; }
.faq-item.open .faq-q i { transform: rotate(45deg); }

/* Bootstrap accordions (FAQ page) */
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--brown); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.accordion-button { background: transparent; font-weight: 500; color: var(--ink); padding-left: 0; padding-right: 0; }
.accordion-body { padding-left: 0; color: var(--muted); }

/* ---------- Newsletter ---------- */
.newsletter-bar { background: var(--cream-deep); padding: 70px 0; color: var(--ink); border-top: 1px solid var(--line); }
.newsletter-txt h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; color: var(--forest); margin-bottom: 12px; }
.newsletter-txt p { color: var(--muted); margin: 0; font-size: .9rem; }

.newsletter-form {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent;
    padding: 10px 18px;
    outline: none;
    color: var(--ink);
}

/* ---------- Footer ---------- */
footer, .footer-main, .site-footer {
    background: var(--forest) !important;
    color: var(--cream);
    padding: 64px 0 28px;
}

.footer-grid { display: grid; grid-template-columns: 1.6fr .8fr .9fr; gap: 50px; }
.footer-title { font-family: var(--serif); font-size: 3rem; font-style: italic; color: var(--cream); line-height: 1; }
.footer-note { max-width: 430px; color: rgba(244, 239, 229, .73); line-height: 1.7; margin: 16px 0 22px; }
.footer-main .eyebrow { color: #D7C5AD; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .86rem; }
.footer-links li + li { margin: 0; }
.footer-main a, .footer-links a { color: rgba(244, 239, 229, .82); }
.footer-main a:hover, .footer-links a:hover { color: var(--cream); }
.footer-muted { color: rgba(244, 239, 229, .6); line-height: 1.6; }

.social-icon { display: flex; gap: 8px; }

.social-icon a {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(244, 239, 229, .25);
    background: transparent;
    color: var(--cream);
    transition: .25s ease;
}

.social-icon a:hover { background: var(--cream); color: var(--forest); }
.social-icon a i { font-size: .9rem; color: inherit; }

.footer-bottom {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid rgba(244, 239, 229, .17) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .72rem;
    color: rgba(244, 239, 229, .55);
}

.payment-icons { display: flex; gap: 8px; align-items: center; }

.payment-icons img {
    height: 26px;
    width: auto;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--cream);
    max-width: none;
}

/* ---------- Inner pages (listing, details, cart, checkout, account) ---------- */
.breadcrumb { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb .breadcrumb-item a { color: var(--sage); }
.breadcrumb-item.active { color: var(--brown); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sand); }

.brand-sidebar,
.dash-sidebar .sidebar-body,
.dash-content-body,
.card,
.product-specification .tab-content,
.counter-box {
    background: rgba(255, 255, 255, .25);
    border: 1px solid var(--line) !important;
    border-radius: 22px;
    box-shadow: none;
}

.card-header, .card-footer { background: transparent; border-color: var(--line); }
.brand-header a.all-brands { background: var(--forest); color: var(--cream); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.brand-list li { border-color: var(--line); }
.brand-list a { color: var(--ink); }
.brand-list a:hover, .brand-list a.active { color: var(--brown); background: rgba(201, 172, 143, .13); }
.brand-list a.active i, .brand-list a:hover i { color: var(--brown); }

.product-summary .product-info li span, .product-summary .product-info li label { color: var(--muted); }
.product-summary .product-price .new-price { font-family: var(--serif); font-size: 2rem; color: var(--forest); }

.product-specification .nav-tabs { border-color: var(--line); }
.product-specification .nav-link { color: var(--muted); border: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; }
.product-specification .nav-link.active { color: var(--brown); background: transparent; border-bottom: 1px solid var(--brown); }

.pagination .page-item .page-link {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--forest);
    border-radius: 999px !important;
    margin: 0 3px;
    min-width: 40px;
    text-align: center;
}

.pagination .page-item.active .page-link { background: var(--forest); border-color: var(--forest); color: var(--cream); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); border-color: var(--line); }
.table th { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); font-weight: 600; }

.dash-sidebar .sidebar-body .nav-link { color: var(--ink); border-radius: 12px; }
.dash-sidebar .sidebar-body .nav-link.active,
.dash-sidebar .sidebar-body .nav-link.active:hover { background: var(--forest); color: var(--cream); }
.dash-sidebar .sidebar-body .nav-link:hover { background: rgba(201, 172, 143, .15); color: var(--brown); }

.badge.bg-success { background: var(--forest) !important; }
.badge.bg-warning { background: var(--sand) !important; color: var(--ink) !important; }
.text-success { color: var(--forest) !important; }
.progress-bar.bg-warning, .star-rating, .fa-star { color: var(--sand); }
.progress-bar.bg-warning { background: var(--sand) !important; }

/* ---------- Forms ---------- */
.form-label, label {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 600;
}

.form-check-label { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink); font-weight: 400; }

.form-control, .form-select {
    border: 1px solid var(--line);
    background-color: rgba(255, 255, 255, .35);
    padding: 12px 14px;
    border-radius: 12px !important;
    color: var(--ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--forest) !important;
    background-color: rgba(255, 255, 255, .55);
    box-shadow: none !important;
}

.form-check-input:checked { background-color: var(--forest); border-color: var(--forest); }

.modal-content { background: var(--cream); border: 0; border-radius: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .2); }
.modal-header, .modal-footer { border-color: var(--line); }

.offcanvas { background: var(--cream); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991.98px) {
    :root {
        --logo-w: 165px;
        --wordmark-w: 180px;
        --header-row: 124px;
        --header-row-compact: 64px;
    }

    .main-nav-wrap { flex: 0 0 0; }
    .main-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .main-nav .nav-link { display: block; padding: 15px 0 !important; border-bottom: 1px solid var(--line); }
    .main-nav .nav-link::after { display: none; }
    .offcanvas-lg .offcanvas-body { flex-direction: column; }
    .offcanvas-header { border-bottom: 1px solid var(--line); }
    .header-search { width: 100%; }

    .story-intro, .faq-wrap { grid-template-columns: 1fr; gap: 40px; }
    .info-wrapper { grid-template-columns: 1fr; }
    .info-item, .info-item:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
    .info-item:first-child { border-top: 0; }
    .banner-slide { min-height: 380px; }
}

@media (max-width: 767.98px) {
    .brand-thought { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .story-section { padding: 64px 0; }
}

@media (max-width: 559.98px) {
    /* Smaller logo on phones so it doesn't collide with the wishlist and cart icons */
    :root { --logo-w: 126px; --wordmark-w: 140px; --header-row: 96px; --header-row-compact: 60px; }
    .lang-block { grid-template-columns: 1fr; gap: 8px; }
    .cart-btn { padding: 9px 12px !important; }
    .newsletter-form { flex-direction: column; border-radius: 22px; }
    .newsletter-form .solid-btn { width: 100%; }
}

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

@media print {
    .site-header, .newsletter-bar, footer { display: none !important; }
    .site-main { padding-top: 0; }
}

/* ---------- Menus show every option without an inner scrollbar ---------- */
.brand-list {
    max-height: none;
    overflow: visible;
}

@media (max-width: 991.98px) {
    /* Slide-out menu: compact rows so all links fit on short phone screens */
    .main-nav .nav-link { padding: 11px 0 !important; }
    .offcanvas-lg .offcanvas-body { padding-top: 12px; }
    .mobile-account { margin-top: 14px; }
    .mobile-account a { padding: 8px 0; }
}

@media (max-width: 991.98px) {
    /* backdrop-filter makes the header the containing block for position:fixed
       children, which clipped the slide-out menu to the header's height.
       Use a solid background on small screens so the menu spans the full screen. */
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--cream);
    }

    #mainMenu.offcanvas-lg { height: 100vh; height: 100dvh; }
}

/* ---------- Made to Order (/Contact) ---------- */
.mto-hero { padding: 40px 0 70px; }
.mto-top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.mto-top .section-title { color: var(--brown); }

.mto-ideas-card { background: var(--cream-deep); border-radius: var(--radius); padding: 34px; }
.mto-hint { font-size: .82rem; color: var(--muted); margin: 0 0 16px; }
.mto-ideas { display: flex; flex-wrap: wrap; gap: 8px; }

.idea {
    border: 1px solid rgba(79, 89, 69, .22);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: .76rem;
    color: var(--forest);
    background: rgba(244, 239, 229, .6);
    transition: .2s ease;
}

button.idea:hover { border-color: var(--forest); }
.idea.is-on { background: var(--forest); border-color: var(--forest); color: var(--cream); }
button.idea.is-on::before { content: "\2713  "; }

.mto-steps-section { padding: 0 0 70px; }
.mto-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.mto-step { padding: 26px 24px 8px 0; }
.mto-step + .mto-step { padding-left: 24px; border-left: 1px solid var(--line); }
.mto-step .no { font-family: var(--serif); font-size: 2.4rem; color: var(--sand); line-height: 1; }
.mto-step h4 { font-size: 1.25rem; margin: 14px 0 6px; }
.mto-step p { font-size: .86rem; color: var(--muted); line-height: 1.65; margin: 0; }

.mto-form-section { padding: 80px 0 100px; background: var(--cream-deep); }
.mto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }

.contact-line { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.6; }
.contact-line small {
    display: block;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .63rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.mto-form-card { background: var(--cream); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.mto-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mto-form .field { display: grid; gap: 7px; min-width: 0; }
.mto-form .full { grid-column: 1 / -1; }

.mto-form input, .mto-form select, .mto-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .45);
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink);
    outline: none;
}

.mto-form input:focus, .mto-form select:focus, .mto-form textarea:focus { border-color: var(--forest) !important; background: rgba(255, 255, 255, .7); }
.mto-form textarea { resize: vertical; min-height: 140px; }
.mto-form .solid-btn { justify-self: start; }
.form-note { font-size: .78rem; color: var(--muted); line-height: 1.6; margin: 0; }

.mto-thanks { padding: 20px 4px; }
.mto-thanks h3 { font-size: 2rem; margin-bottom: 12px; }
.mto-thanks p { color: var(--muted); }

[hidden] { display: none !important; }

@media (max-width: 991.98px) {
    .mto-top, .mto-grid { grid-template-columns: 1fr; gap: 40px; }
    .mto-steps { grid-template-columns: 1fr 1fr; }
    .mto-step:nth-child(3) { padding-left: 0; border-left: 0; }
    .mto-step:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 559.98px) {
    .mto-steps { grid-template-columns: 1fr; }
    .mto-step, .mto-step + .mto-step { padding-left: 0; border-left: 0; }
    .mto-step + .mto-step { border-top: 1px solid var(--line); }
    .mto-form { grid-template-columns: 1fr; }
    .mto-ideas-card { padding: 24px; }
}

/* Old theme centred the footer + newsletter on small screens; keep them left-aligned like the design */
.footer-social,
.footer-links li,
.footer-bottom p,
.newsletter-txt { text-align: left; }
.footer-social-icon, .social-icon { justify-content: flex-start; }

@media (max-width: 991.98px) {
    /* Stacked layout: the enquiry form comes before the studio details */
    .mto-form-card { order: -1; }
}

/* Clear the fixed header when jumping to the form */
#mtoForm { scroll-margin-top: 120px; }

/* Old theme fixed product images at 250px with a bottom margin, which broke the 4:5 shape
   and left a strip under every photo. Let the aspect-ratio drive the height. */
.product-card img,
.product-card .product-image img {
    height: auto;
    margin: 0;
}

/* Material page: description + empty state */
.category-details p { margin-bottom: 8px; max-width: 720px; }
.category-empty {
    margin-top: 8px;
    padding: 34px;
    border-radius: var(--radius);
    background: var(--cream-deep);
    max-width: 720px;
}
.category-empty h3 { font-size: 1.8rem; margin-bottom: 10px; }
.category-empty p { color: var(--muted); margin-bottom: 20px; }

/* ---------- Smaller product photos ---------- */
/* Cards: square instead of tall 4:5 */
.product-card img,
.product-card .product-image img { aspect-ratio: 1 / 1; }

/* Product page: cap the main photo instead of filling the whole column */
.product-images-wrapper .product-img {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    margin: 0 auto;
    display: block;
}

@media (max-width: 767.98px) {
    .product-images-wrapper .product-img { max-width: 340px; }
}

/* ---------- Walnut Brown accents ---------- */
/* Newsletter band: Walnut background, cream text (9:1), sits above the Deep Sage footer */
.newsletter-bar { background: var(--brown); border-top: 0; color: var(--cream); }
.newsletter-bar .eyebrow { color: var(--sand); }
.newsletter-txt h3 { color: var(--cream); }
.newsletter-txt p { color: rgba(244, 239, 229, .82); }
.newsletter-form { border-color: rgba(244, 239, 229, .35); background: rgba(244, 239, 229, .08); }
.newsletter-form input { color: var(--cream); }
.newsletter-form input::placeholder { color: rgba(244, 239, 229, .65); }
.newsletter-form .solid-btn {
    background: var(--cream) !important;
    border-color: var(--cream) !important;
    color: var(--brown) !important;
}
.newsletter-form .solid-btn:hover { background: var(--sand) !important; border-color: var(--sand) !important; box-shadow: none; }

/* Old theme gave .faq-section a cool grey-white; keep it on Linen Cream */
.faq-section { background: var(--cream); }

/* ---------- Main menu: Shop / Build Your Own / Gifting & B2B dropdowns ---------- */
.main-nav button.nav-link { background: none; border: 0; cursor: pointer; }
.nav-caret { font-size: .55rem; margin-left: 4px; vertical-align: 1px; transition: transform .25s ease; }
.nav-group { position: relative; }
.nav-group .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-panel {
    min-width: 250px;
    margin: 0 !important;
    padding: 10px;
}
.nav-panel .dropdown-item { white-space: normal; padding: 8px 12px; }
.nav-panel .dropdown-item.active { background: var(--cream-deep); color: var(--brown); }
.nav-panel .dropdown-item small { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }

@media (min-width: 992px) {
    .nav-panel { top: 100%; left: 50%; transform: translateX(-50%); }
    /* Open on hover too; the invisible bridge keeps it open while the pointer moves down */
    .nav-group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
    .nav-group:hover > .nav-panel { display: block; }
    .nav-group:hover .nav-caret { transform: rotate(180deg); }
    .nav-group:hover > .nav-link::after { right: 0; }
}

@media (max-width: 991.98px) {
    .main-nav button.nav-link { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
    .nav-panel {
        position: static !important;
        transform: none !important;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 4px 0 10px 12px;
    }
}

/* ---------- Welcome gift (replaces the newsletter offer) ---------- */
.welcome-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.welcome-bar .solid-btn { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--brown) !important; padding: 16px 30px; }
.welcome-bar .solid-btn:hover { background: var(--sand) !important; border-color: var(--sand) !important; box-shadow: none; transform: translateY(-2px); }
.welcome-signin { color: rgba(244, 239, 229, .85); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.welcome-signin:hover { color: var(--cream); }
.welcome-bar { position: relative; overflow: hidden; }
.welcome-bar .eyebrow { color: var(--sand) !important; }
.welcome-bar .newsletter-txt p { margin-top: 16px; font-size: 1.02rem; }

/* Mystery tag: sand gift tag with a big "?%", tilted, floating and glowing so it pops off the green */
.mystery-tag { position: relative; display: flex; justify-content: center; padding: 20px 0; text-decoration: none; }
.mystery-tag::before {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 340px; height: 340px; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(201, 172, 143, .35), transparent 65%); pointer-events: none;
}
.mystery-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: clamp(210px, 22vw, 270px); aspect-ratio: 1; border-radius: 32px;
    background: linear-gradient(145deg, #E2CDB4, var(--sand) 55%, #B8977A);
    color: var(--brown); box-shadow: 0 24px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
    transform: rotate(-6deg); animation: mysteryFloat 4.5s ease-in-out infinite;
    transition: transform .3s ease;
}
.mystery-tag:hover .mystery-card { animation-play-state: paused; transform: rotate(0deg) scale(1.04); }
.mystery-hole {
    position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
    background: var(--forest); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}
.mystery-num { font-family: var(--serif); font-size: clamp(5rem, 8vw, 7rem); line-height: .9; font-weight: 500; }
.mystery-num small { font-size: .5em; margin-left: 2px; }
.mystery-off { margin-top: 12px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--forest); }
.mystery-spark { position: absolute; color: var(--sand); font-size: 1.4rem; animation: mysteryTwinkle 2.4s ease-in-out infinite; }
.mystery-spark.s1 { top: 6%; left: 20%; }
.mystery-spark.s2 { top: 22%; right: 16%; font-size: 1rem; animation-delay: .8s; }
.mystery-spark.s3 { bottom: 10%; left: 28%; font-size: .9rem; animation-delay: 1.6s; }
@keyframes mysteryFloat {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-3deg) translateY(-10px); }
}
@keyframes mysteryTwinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .mystery-card, .mystery-spark { animation: none; }
}

.welcome-gift { padding: 36px 32px 32px; text-align: center; align-items: center; }
.welcome-gift .btn-close { position: absolute; top: 18px; right: 18px; }
.welcome-gift h3 { font-family: var(--serif); color: var(--brown); font-size: 2rem; margin: 0 0 22px; }
.gift-box {
    width: 190px; height: 150px;
    border: 1px solid var(--brown); border-radius: 22px;
    background: var(--brown); color: var(--cream);
    display: grid; place-items: center;
    cursor: pointer; transition: transform .3s ease, background .3s ease;
}
.gift-box:hover { transform: translateY(-3px) rotate(-1deg); }
.gift-box > span { display: grid; gap: 6px; grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
.gift-closed i { font-size: 2.6rem; color: var(--sand); }
.gift-box small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.gift-open { opacity: 0; transform: scale(.7); }
.gift-open strong { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.gift-box.is-open { background: var(--cream); color: var(--brown); }
.gift-box.is-open .gift-closed { opacity: 0; transform: scale(.7); }
.gift-box.is-open .gift-open { opacity: 1; transform: none; }
.gift-note { color: var(--muted); font-size: .85rem; margin: 20px 0 22px; }

.welcome-discount-row { color: var(--brown); font-weight: 600; }
.welcome-hint { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.welcome-hint i, .welcome-hint a { color: var(--brown); }

/* ---------- Colour balance (Oct 2026): more Walnut Brown alongside Deep Sage ----------
   Deep Sage stays the solid-button colour; Walnut takes the footer, small labels,
   outline buttons, hover states and dividers. The sign-up band switches to Deep Sage
   so the two dark blocks above the footer alternate. */
:root { --line: rgba(90, 56, 40, .16); }

footer, .footer-main, .site-footer { background: var(--brown) !important; }
.footer-main .eyebrow { color: #E2D3BF; }

.newsletter-bar { background: var(--forest); }
.newsletter-bar .eyebrow { color: #E2D3BF; }

.welcome-bar { padding: 30px 0 !important; }

/* Welcome card: rounded green card on the cream page, text left, envelope photo right blending into the green */
.welcome-card-wrap { background: var(--cream); padding: 24px clamp(14px, 1.6vw, 28px); }
.welcome-card {
    position: relative; overflow: hidden; border-radius: 22px;
    background: #485040; min-height: clamp(260px, 22vw, 400px);
    display: flex; align-items: center;
}
.welcome-card-img {
    position: absolute; top: 0; right: 0; height: 100%; width: 58%;
    object-fit: cover; object-position: left center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.welcome-card-copy { position: relative; z-index: 1; padding: clamp(32px, 4vw, 64px) clamp(28px, 6.5vw, 120px); max-width: 720px; color: var(--cream); }
.welcome-card-copy .eyebrow { color: var(--sand); letter-spacing: .24em; margin-bottom: 14px; }
.welcome-card-copy h3 {
    position: relative; display: inline-block;
    font-family: var(--serif); font-weight: 400; color: var(--cream);
    font-size: clamp(2.2rem, 3.7vw, 3.9rem); line-height: 1.04; margin: 0 0 14px;
}
.welcome-card-copy h3 em { position: relative; font-style: italic; color: var(--sand); }
/* three little strokes after "you." like a hand-drawn sparkle */
.welcome-spark {
    position: absolute; right: -34px; bottom: .32em; width: 22px; height: 26px;
    background:
        linear-gradient(var(--sand), var(--sand)) 4px 2px / 12px 2px no-repeat,
        linear-gradient(var(--sand), var(--sand)) 0 12px / 16px 2px no-repeat,
        linear-gradient(var(--sand), var(--sand)) 4px 22px / 12px 2px no-repeat;
    transform: rotate(-8deg);
}
.welcome-card-copy p { font-size: clamp(1rem, 1.3vw, 1.3rem); color: rgba(244, 239, 229, .92); margin: 0 0 clamp(18px, 2vw, 28px); }
.welcome-unlock {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 16px;
    padding: 17px 36px; border-radius: 999px; background: var(--cream); color: var(--brown);
    font-size: .95rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(244, 239, 229, .55), 0 10px 26px rgba(0, 0, 0, .22);
    animation: revealPulse 2.4s ease-out infinite; transition: transform .2s ease;
}
.welcome-unlock::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: skewX(-20deg); animation: revealShine 3.4s ease-in-out infinite;
}
.welcome-unlock:hover { color: var(--brown); transform: translateY(-2px); }
.welcome-unlock span { font-size: 1.15em; transition: transform .2s ease; }
.welcome-unlock:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .welcome-unlock, .welcome-unlock::after { animation: none; } }
@media (max-width: 767.98px) {
    .welcome-card { flex-direction: column; align-items: stretch; }
    .welcome-card-img { position: static; width: 100%; height: 180px; order: 2;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
    .welcome-card-copy { padding: 32px 24px 8px; }
    .welcome-spark { display: none; }
}
/* Slim band: tag, text and button in one row */
.welcome-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 36px; }
.welcome-bar .newsletter-txt .eyebrow { margin-bottom: 6px; }
.welcome-bar .newsletter-txt h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0; line-height: 1.2; }
.welcome-bar .newsletter-txt p { margin: 6px 0 0 !important; font-size: .92rem !important; }
.welcome-row .welcome-cta { margin-top: 0; flex-direction: column; align-items: flex-end; gap: 10px; }
/* "Reveal my discount": bigger, warm sand gradient, a soft pulsing glow and a light sweep across it */
.welcome-row .welcome-cta .solid-btn {
    position: relative; overflow: hidden;
    padding: 17px 34px !important; font-size: 1rem !important; font-weight: 700; letter-spacing: .14em;
    background: linear-gradient(135deg, #F4EFE5, #E2CDB4 55%, var(--sand)) !important; border: 0 !important;
    color: var(--brown) !important;
    box-shadow: 0 0 0 0 rgba(226, 205, 180, .6), 0 10px 26px rgba(0, 0, 0, .25);
    animation: revealPulse 2.2s ease-out infinite;
}
.welcome-row .welcome-cta .solid-btn i { font-size: 1.1em; margin-right: 4px; }
.welcome-row .welcome-cta .solid-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: skewX(-20deg); animation: revealShine 3.2s ease-in-out infinite;
}
.welcome-row .welcome-cta .solid-btn:hover { transform: translateY(-2px) scale(1.04); }
@keyframes revealPulse {
    0% { box-shadow: 0 0 0 0 rgba(226, 205, 180, .65), 0 10px 26px rgba(0, 0, 0, .25); }
    70% { box-shadow: 0 0 0 16px rgba(226, 205, 180, 0), 0 10px 26px rgba(0, 0, 0, .25); }
    100% { box-shadow: 0 0 0 0 rgba(226, 205, 180, 0), 0 10px 26px rgba(0, 0, 0, .25); }
}
@keyframes revealShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .welcome-row .welcome-cta .solid-btn, .welcome-row .welcome-cta .solid-btn::after { animation: none; }
}
.welcome-row .mystery-tag { padding: 6px; }
.welcome-row .mystery-tag::before { width: 200px; height: 200px; }
.welcome-row .mystery-card { width: 118px; border-radius: 18px; }
.welcome-row .mystery-hole { top: 9px; width: 10px; height: 10px; margin-left: -5px; }
.welcome-row .mystery-num { font-size: 3rem; }
.welcome-row .mystery-off { margin-top: 4px; font-size: .5rem; letter-spacing: .14em; }
.welcome-row .mystery-spark { font-size: .9rem; }
@media (max-width: 767.98px) {
    .welcome-row { grid-template-columns: auto 1fr; }
    .welcome-row .welcome-cta { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .welcome-row .mystery-card { width: 92px; }
    .welcome-row .mystery-num { font-size: 2.3rem; }
}

.eyebrow { color: var(--brown); }

.solid-btn:hover, .solid-btn:focus,
.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-dark:hover, .btn-tarina:hover,
.buy-btn:hover {
    background: var(--brown) !important;
    border-color: var(--brown) !important;
    box-shadow: 0 10px 22px rgba(90, 56, 40, .22);
}

.pill-btn,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-secondary, .btn-light {
    border-color: var(--brown) !important;
    color: var(--brown) !important;
}
.cart-btn .count-num { background: var(--brown); color: var(--cream); }

.site-header { border-bottom: 1px solid var(--line); }
.brand-header a.all-brands { background: var(--brown); }

/* ---------- Payment badges (Stripe: cards, Apple Pay, Google Pay, MobilePay) ---------- */
.stripe-pay .pay-icons { display: flex; gap: 10px; font-size: 1.7rem; color: var(--brown); margin-bottom: 8px; }
.payment-icons .pay-bank {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 4px 10px; border-radius: 6px;
    background: var(--cream); color: var(--brown);
    font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.payment-methods .form-check { margin-bottom: 10px; }
.payment-methods .payment-desc { font-size: .78rem; color: var(--muted); }
.payment-note { font-size: .76rem; color: var(--muted); margin: 6px 0 0; }
.payment-note i { color: var(--brown); }

/* ---------- Delivery options at checkout ---------- */
.checkout-subhead { font-family: var(--serif); color: var(--brown); font-size: 1.05rem; margin: 4px 0 12px; }
.delivery-methods .form-check { margin-bottom: 12px; }
.delivery-methods .form-check-label { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.delivery-methods .ship-price { margin-left: auto; font-weight: 600; color: var(--brown); }
.delivery-methods .delivery-extra { margin-top: 8px; }
.delivery-methods .delivery-extra select { font-size: .8rem; }
.delivery-methods input:disabled + label { opacity: .55; }
.delivery-methods .payment-desc { font-size: .78rem; color: var(--muted); }

/* ---------- Free-shipping nudge (cart and checkout) ---------- */
.free-ship-nudge { margin: 16px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream-deep); border: 1px solid var(--line); }
.free-ship-nudge p { margin: 0 0 8px; font-size: .84rem; color: var(--ink); line-height: 1.5; }
.free-ship-nudge p i, .free-ship-nudge strong { color: var(--brown); }
.free-ship-bar { height: 6px; border-radius: 999px; background: rgba(90, 56, 40, .14); overflow: hidden; }
.free-ship-bar span { display: block; height: 100%; background: var(--brown); border-radius: inherit; }
.free-ship-link { display: inline-block; margin-top: 8px; font-size: .78rem; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.free-ship-nudge.is-unlocked p { margin: 0; }
.free-ship-nudge.is-unlocked p i { color: var(--forest); }

/* ---------- Product page: Add to cart / Buy now ---------- */
.action-buttons .btn { min-height: 48px; }
.view-cart-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .85rem; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Personalisation, gallery and discount code ---------- */
.line-meta { font-size: .78rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.line-meta i { color: var(--brown); }
.product-option .form-label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brown); margin-bottom: 6px; }
.product-option .form-select, .product-option textarea { background-color: var(--white); border-color: var(--line); }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.product-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); cursor: pointer; opacity: .75; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb.is-active, .product-thumb:hover { opacity: 1; border-color: var(--brown); }
.discount-code { display: flex; gap: 8px; margin: 10px 0 4px; }
.discount-code .form-control { text-transform: uppercase; }
.discount-code .btn { padding: 6px 14px !important; white-space: nowrap; }

/* ---------- Section pages: "Got your own idea?" card under All Sections ---------- */
.idea-card {
    margin-top: 18px;
    padding: 22px 22px 24px;
    border-radius: 22px;
    background: var(--brown);
    color: var(--cream);
}
.idea-card .eyebrow { color: var(--sand); }
.idea-card h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--cream); margin: 6px 0 8px; }
.idea-card p { color: rgba(244, 239, 229, .85); font-size: .92rem; margin-bottom: 16px; }
.idea-card .solid-btn { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--brown) !important; }
.idea-card .solid-btn:hover, .idea-card .solid-btn:focus { background: var(--sand) !important; border-color: var(--sand) !important; }

/* ---------- Search page ---------- */
.search-header, .search-similar .section-header { display: block !important; text-align: left; margin-bottom: 26px; }
.search-header .section-title { margin: 4px 0 6px; }
.search-count { color: var(--muted); margin: 0; }
.search-similar { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.search-similar .section-header { margin-bottom: 22px; }

/* ---------- Mega menu: section name + tagline, then one column per group ---------- */
.mega-title { font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: var(--brown); }
.mega-intro p { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.mega-heading {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--brown);
    padding: 0 12px 8px;
}
.mega-panel .dropdown-item { font-size: .88rem; padding: 6px 12px; }

@media (min-width: 992px) {
    /* Links fill the row's height so each panel opens right under the header and stays open on the way down */
    .main-nav-wrap .offcanvas-body { height: var(--header-row); }
    .site-header.is-compact .main-nav-wrap .offcanvas-body { height: var(--header-row-compact); }
    .main-nav { height: 100%; align-items: stretch; }
    .main-nav > li { display: flex; align-items: center; }
    .main-nav .nav-group { position: static; }
    .main-nav .nav-link { white-space: nowrap; }
    .mega-panel {
        left: 50% !important;
        transform: translateX(-50%);
        width: min(1180px, 94vw);
        padding: 32px 30px 30px;
        border-radius: 0 0 22px 22px;
        border: 1px solid var(--line);
        border-top: 0;
    }
    .mega-panel.show, .nav-group:hover > .mega-panel { display: flex !important; gap: 34px; }
    .mega-intro { flex: 0 0 230px; padding-right: 10px; border-right: 1px solid var(--line); }
    .mega-cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 24px; }
}

@media (max-width: 991.98px) {
    .mega-intro { display: none; }
    .mega-col { margin-bottom: 10px; }
    .mega-heading { font-size: .95rem; padding: 6px 0 4px; }
    .mega-panel .dropdown-item { padding: 6px 0; }
}

/* Section page sidebar: column headings and links to the other main sections */
.side-heading {
    padding: 14px 22px 6px;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brown);
    font-weight: 600;
}
.side-other { padding: 14px 22px 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.side-other a { color: var(--forest); font-size: .9rem; }
.side-other a i { font-size: .7rem; margin-left: 4px; }

.no-walkins { font-style: italic; font-size: .9em; opacity: .85; }

/* ---------- Wishlist and back-in-stock ---------- */
.wishlist-link { position: relative; font-size: 1.05rem; padding: 6px 4px; color: var(--brown); }
.wishlist-count {
    position: absolute; top: -2px; right: -8px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--brown); color: var(--cream);
    font-size: .65rem; line-height: 18px; text-align: center; font-family: var(--sans, inherit);
}
.wishlist-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 8px 2px;
    background: none; border: 0; color: var(--brown); font-size: .92rem; cursor: pointer;
}
.wishlist-btn i { font-size: 1.1rem; transition: transform .2s ease; }
.wishlist-btn:hover i { transform: scale(1.12); }
.wishlist-btn.is-saved i { color: var(--brown); }

.notify-box { margin-top: 6px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(201, 172, 143, .12); }
.notify-title { font-family: var(--serif); font-size: 1.15rem; color: var(--brown); }
.notify-box p { margin: 6px 0 12px; color: var(--muted); font-size: .9rem; }
.notify-form { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-form .form-control { flex: 1 1 220px; border-radius: 999px; }
.notify-form .btn { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.notify-done { color: var(--forest); font-size: .92rem; }

.wishlist-card { position: relative; }
.wishlist-remove {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: rgba(255, 253, 249, .92); color: var(--brown); cursor: pointer;
}
.wishlist-action { display: inline-block; margin-top: 8px; font-size: .85rem; color: var(--forest); }
.wishlist-action.is-out { color: var(--brown); }

/* ---- Pop-up messages (toastr) in brand colours ---- */
#toast-container > div {
    opacity: 1; border-radius: 14px; padding: 15px 18px 15px 52px;
    font-family: var(--sans); font-size: .9rem; line-height: 1.45;
    box-shadow: var(--shadow); background-position: 18px center;
}
#toast-container > div:hover { box-shadow: 0 18px 48px rgba(67, 50, 38, .2); }
#toast-container > .toast-success { background-color: var(--forest); color: var(--cream); }
#toast-container > .toast-error { background-color: var(--brown); color: var(--cream); }
#toast-container > .toast-info { background-color: var(--white); color: var(--brown); border: 1px solid var(--sand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Ccircle cx='12' cy='12' r='11' fill='%235A3828'/%3E%3Crect x='11' y='10' width='2' height='8' fill='%23F4EFE5'/%3E%3Ccircle cx='12' cy='7' r='1.3' fill='%23F4EFE5'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-warning { background-color: var(--sand); color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Cpath d='M12 2 23 21H1z' fill='%232E2A24'/%3E%3Crect x='11' y='9' width='2' height='6' fill='%23C9AC8F'/%3E%3Ccircle cx='12' cy='17.5' r='1.2' fill='%23C9AC8F'/%3E%3C/svg%3E") !important; }
#toast-container .toast-close-button { color: inherit; text-shadow: none; opacity: .7; }
#toast-container .toast-progress { background-color: var(--cream); opacity: .35; }
#toast-container > .toast-warning .toast-progress,
#toast-container > .toast-info .toast-progress { background-color: var(--brown); }

/* Share buttons on the product page: the footer's cream social icons were invisible on the cream page */
.share-icons .social-icon a { color: var(--brown); border-color: var(--line); }
.share-icons .social-icon a:hover { color: var(--cream); background: var(--forest); border-color: var(--forest); }

/* Home hero: full-width photo (engraved log slice on the right), text on the plain wall to the left */
.hero-photo {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    min-height: clamp(520px, 54vw, 880px);
    background: #F3E9DA;
}
.hero-photo-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 60% center;
}
.hero-photo .container { position: relative; z-index: 1; }
.hero-photo-copy { max-width: min(42vw, 680px); padding: 48px 0 56px; }
.hero-photo-copy .eyebrow { color: var(--brown); letter-spacing: .22em; font-size: clamp(.7rem, .95vw, .9rem); margin-bottom: clamp(14px, 1.6vw, 24px); }
.hero-photo-copy .display {
    font-family: var(--serif); font-weight: 400; color: var(--brown);
    font-size: clamp(2.6rem, 5.3vw, 6rem); line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.hero-photo-copy .display em { font-style: italic; }
.hero-photo-copy .lead {
    margin: clamp(18px, 2.2vw, 34px) 0 clamp(26px, 3vw, 44px);
    max-width: 640px; font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.6; font-weight: 400; color: rgba(46, 42, 36, .72);
}
.hero-photo-copy .solid-btn { padding: 18px 38px; letter-spacing: .14em; }
.hero-photo-copy .text-btn { color: var(--brown); letter-spacing: .14em; font-weight: 600; }

/* Home page (desktop): the photo runs up behind a see-through header; each header item sits on a
   small cream pill so it stays readable over the photo. Once the page scrolls the header is solid again. */
@media (min-width: 992px) {
    body.is-home .site-main { padding-top: 0; }
    /* Same height as before (the photo's own shape, so it isn't cropped); the header just sits over its top */
    /* Text starts just under the header so it is the first thing seen, not centred lower down */
    /* Never taller than the screen, and the photo lifted a little, so the whole wood disc shows on arrival */
    body.is-home .hero-photo { align-items: flex-start; min-height: 0; height: clamp(520px, min(54vw, 100vh), 880px); }
    body.is-home .hero-photo-img { object-position: 60% 30%; }
    body.is-home .hero-photo-copy { padding: calc(var(--header-row) + clamp(16px, 2.5vw, 40px)) 0 24px; }
    body.is-home .hero-photo-copy .text-btn {
        padding: 15px 24px; border-radius: 999px;
        background: rgba(244, 239, 229, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    body.is-home .site-header:not(.is-compact) {
        background: transparent; border-bottom-color: transparent;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link,
    body.is-home .site-header:not(.is-compact) .header-search,
    body.is-home .site-header:not(.is-compact) .header-link,
    body.is-home .site-header:not(.is-compact) .menu-btn {
        background: rgba(244, 239, 229, .86);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(67, 50, 38, .08);
    }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link { padding: 9px 16px !important; }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link::after { display: none; }
    body.is-home .site-header:not(.is-compact) .header-search { padding: 8px 16px; border-bottom: 0; }
    body.is-home .site-header:not(.is-compact) .header-link { padding: 9px 14px; }
    /* Cart pill looks like the other pills over the photo; the brown count keeps it easy to find */
    body.is-home .site-header:not(.is-compact) .cart-btn {
        background: rgba(244, 239, 229, .86) !important; border-color: transparent !important;
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 14px rgba(67, 50, 38, .08);
    }
}

@media (max-width: 991.98px) {
    /* Phones and tablets: the same look stacked: text on the warm wall, the photo rising up underneath it and
       fading into the wall at its top edge, cropped to the wood disc */
    .hero-photo { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: #F6EEE2; }
    .hero-photo .container { order: 1; }
    .hero-photo-img {
        position: static; order: 2; height: auto;
        aspect-ratio: 4 / 5; max-height: 560px; margin-top: -90px;
        object-position: 85% center;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    }
    .hero-photo-copy { max-width: none; padding: 36px 0 0; }
    .hero-photo-copy .text-btn {
        padding: 13px 20px; border-radius: 999px;
        background: rgba(244, 239, 229, .9);
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .hero-photo-img { aspect-ratio: 16 / 10; }
}

/* Home "Our story": story left, engraved portrait right (the hero's photo is right too, so the page has a rhythm).
   Same cream as the page and no dividing lines; the photo's edges dissolve into the cream. Text in the two brand greens. */
.story-split { background: transparent; padding: clamp(36px, 4vw, 64px) 0 clamp(48px, 5vw, 80px); }
.story-split .story-split-copy { max-width: 720px; }
.story-split .story-row { max-width: none; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 96px); align-items: start; }
.story-row-head h2 { margin-bottom: 0; }
.story-row-text { padding-top: clamp(0px, 2.6vw, 44px); }
.story-row-text p { margin-bottom: 16px; }
.story-row-text .story-more { margin-top: 10px; }
@media (max-width: 767.98px) {
    .story-split .story-row { grid-template-columns: 1fr; gap: 24px; }
    .story-row-text { padding-top: 0; }
}
.story-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.story-split-photo img {
    display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-composite: intersect;
}
.story-split-copy { max-width: 580px; }
.story-split-copy .eyebrow { color: var(--sage); letter-spacing: .2em; margin-bottom: clamp(18px, 2vw, 30px); }
.story-split-copy h2 {
    font-family: var(--serif); font-weight: 400; color: var(--forest);
    font-size: clamp(1.9rem, 2.9vw, 3.1rem); line-height: 1.18; letter-spacing: -.01em; margin: 0 0 clamp(26px, 3vw, 40px);
}
.story-split-copy h2 em { font-style: italic; color: var(--sage); }
.story-split-copy p { font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.8; color: rgba(79, 89, 69, .9); margin: 0 0 22px; }
.story-more {
    display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; padding-bottom: 10px;
    font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--forest);
    background: linear-gradient(currentColor, currentColor) left bottom / 7.4em 1px no-repeat;
}
.story-more:hover { color: var(--sage); }
.story-more span { font-size: 1.1rem; transition: transform .2s ease; }
.story-more:hover span { transform: translateX(4px); }
@media (max-width: 767.98px) {
    .story-split-inner { grid-template-columns: 1fr; }
    .story-split-photo { order: -1; max-width: 420px; margin: 0 auto; }
}

/* The hero photo melts into the page cream at its bottom edge instead of stopping on a hard line */
@media (min-width: 992px) {
    .hero-photo { background: var(--cream); }
    .hero-photo-img {
        -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    }
}

/* Phones and tablets: logo in the middle of the header, menu button left, wishlist and cart right */
@media (max-width: 991.98px) {
    .site-header-row { position: relative; }
    .header-left .brand-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .site-header.is-compact .brand-word .brand-wordmark { left: 50%; transform: translate(-50%, -50%) scale(1); }
    .brand-word .brand-wordmark { left: 50%; transform: translate(-50%, -50%) scale(.94); transform-origin: center; }
}
.search-btn { font-size: 1.05rem; }
.mobile-search {
    display: flex; align-items: center; gap: 10px;
    margin: 0 clamp(18px, 3vw, 48px) 12px; padding: 6px 6px 6px 16px;
    background: var(--white); border: 1px solid var(--line); border-radius: 999px;
}
.mobile-search[hidden] { display: none; }
.mobile-search i { color: var(--muted); }
.mobile-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 1rem; color: var(--ink); }
.mobile-search button {
    border: 0; border-radius: 999px; padding: 8px 16px;
    background: var(--forest); color: var(--cream); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 559.98px) {
    :root { --logo-w: 104px; --wordmark-w: 106px; }
    .header-action { gap: 10px; }
}

/* Desktop widths where the cream header pills would run into each other: tighter pills and gaps */
@media (min-width: 992px) and (max-width: 1499.98px) {
    body.is-home .site-header:not(.is-compact) .main-nav { gap: 10px; }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link { padding: 8px 13px !important; }
    body.is-home .site-header:not(.is-compact) .header-action { gap: 10px; }
    body.is-home .site-header:not(.is-compact) .header-search { width: clamp(120px, 11vw, 180px); padding: 8px 14px; }
    body.is-home .site-header:not(.is-compact) .header-link { padding: 8px 12px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.is-home .site-header:not(.is-compact) .site-header-row { gap: 10px; }
    body.is-home .site-header:not(.is-compact) .main-nav { gap: 6px; }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link { padding: 8px 10px !important; }
    body.is-home .site-header:not(.is-compact) .header-action { gap: 8px; }
    body.is-home .site-header:not(.is-compact) .header-search { width: 100px; padding: 8px 12px; }
}


/* ============================================================
   Home seasons: one line of season links + one moving row of
   square product photos (Diwali, Christmas, New Year together)
   ============================================================ */
.seasons-section { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.seasons-head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.seasons-head .eyebrow { margin: 0; color: var(--forest); }
.season-links { display: flex; gap: 22px; flex-wrap: wrap; }
.season-links a {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
    border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.season-links a:hover { color: var(--forest); border-bottom-color: var(--forest); }

.season-track {
    display: flex; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
}
.season-track::-webkit-scrollbar { display: none; }
.season-card { flex: 0 0 auto; width: clamp(150px, 15vw, 210px); min-width: 0; color: var(--ink); }
.season-card:hover { color: var(--ink); }
.season-img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream-deep); }
.season-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.season-card:hover .season-img img { transform: scale(1.04); }
.season-name {
    display: block; margin: 12px 12px 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.season-price { display: block; margin: 4px 12px 0; font-size: .78rem; color: var(--muted); }

/* Our story copy */
.story-big em { color: var(--brown); }
.story-copy p { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.6; color: var(--brown); margin: 0 0 22px; }
.story-copy .story-sign { font-style: italic; color: var(--forest); padding-top: 22px; border-top: 1px solid rgba(79, 89, 69, .22); margin: 8px 0 0; }

/* Quieter home typography: lighter serif, smaller headline, more air */
.hero-frame .hero-copy .display { font-size: clamp(2.4rem, 4.4vw, 4.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; }
.hero-frame .hero-copy .lead { font-size: .95rem; }
.story-section { background: transparent; border-top: 1px solid var(--line); margin-top: 0; }
.story-big { font-size: clamp(1.9rem, 3.2vw, 3.2rem); font-weight: 400; }
.story-copy p { font-size: clamp(1rem, 1.4vw, 1.2rem); }

/* Narrow desktops: tighter header so everything stays on one line */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header-row { gap: 18px; }
    .main-nav { gap: 16px; }
    .header-action { gap: 14px; }
    .header-search { width: 120px; }
    :root { --logo-w: 180px; --wordmark-w: 180px; }
    .header-label { display: none; }
}

/* ============================================================
   Shop fixes (25 Oct 2026)
   ============================================================ */

/* ---------- Section sidebar: search box, distinct column headings ---------- */
.side-search {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 16px 6px; padding: 9px 14px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--white);
    color: var(--sage);
}
.side-search:focus-within { border-color: var(--forest); }
.side-search input { border: 0; outline: none; background: transparent; width: 100%; font-size: .85rem; color: var(--ink); }
.side-search input::placeholder { color: rgba(46, 42, 36, .45); }

.side-heading { padding: 16px 16px 4px; }
.side-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 8px 12px; border: 0;
    border-left: 3px solid var(--forest);
    border-radius: 0 10px 10px 0;
    background: rgba(201, 172, 143, .28);
    color: var(--brown); text-align: left; text-transform: uppercase;
    font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    cursor: pointer;
}
.side-toggle:hover { background: rgba(201, 172, 143, .42); }
.side-toggle i { font-size: .7rem; transition: transform .25s ease; }
.side-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.brand-list[hidden] { display: none !important; }

/* ---------- Product lists: sorting and filters ---------- */
.list-tools {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin: 0 0 24px; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .35);
}
.list-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.list-tool { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--muted); }
.list-tool > span:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.list-tool .form-select { width: auto; min-width: 170px; }
.list-clear { font-size: .8rem; color: var(--brown); text-decoration: underline; }
.list-count { font-size: .78rem; color: var(--muted); }
.list-empty { padding: 40px 0; text-align: center; color: var(--muted); }

/* Out of stock on product cards */
.product-card-img { position: relative; display: block; }
.stock-badge {
    position: absolute; left: 10px; top: 10px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--brown); color: var(--cream);
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}
.product-card.is-sold-out img { filter: grayscale(.45); opacity: .8; }
.notify-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--forest);
}
.notify-link:hover { color: var(--brown); }

/* ---------- Product page: quantity - and + ---------- */
.qty-stepper {
    position: relative;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: 999px; overflow: visible; background: var(--white);
}
.qty-stepper .qty-step {
    width: 40px; border: 0; background: transparent; color: var(--forest); font-size: .8rem;
}
.qty-stepper .qty-step:first-child { border-radius: 999px 0 0 999px; }
.qty-stepper .qty-step:last-child { border-radius: 0 999px 999px 0; }
.qty-stepper .qty-step:hover:not(:disabled) { background: var(--cream-deep); }
.qty-stepper .qty-step:disabled { color: rgba(46, 42, 36, .25); cursor: not-allowed; }
.qty-stepper .quantity-input {
    width: 56px; border: 0 !important; border-radius: 0; background: transparent !important;
    -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper .quantity-input::-webkit-outer-spin-button,
.qty-stepper .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper.is-disabled { opacity: .5; }

/* ---------- Hover messages on things that are greyed out ---------- */
/* Disabled controls get no hover, so the message sits on a wrapper with data-tip */
.btn-tip { position: relative; display: block; }
.btn-tip:not([data-tip=""]) .btn:disabled { pointer-events: none; }
[data-tip]:not([data-tip=""]) { position: relative; }
[data-tip]:not([data-tip=""])::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20;
    width: max-content; max-width: 280px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--ink); color: var(--cream);
    font-size: .76rem; line-height: 1.4; text-align: center; text-transform: none; letter-spacing: 0; font-weight: 400;
    transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
[data-tip]:not([data-tip=""]):hover::after,
[data-tip]:not([data-tip=""]):focus-within::after,
[data-tip]:not([data-tip=""]):focus::after { opacity: 1; transform: translate(-50%, 0); }
.delivery-option.is-unavailable { cursor: help; }
.delivery-option.is-unavailable::after { left: 40%; }

/* ---------- Checkout: radio buttons that are easy to see ---------- */
.checkout-sec .form-check-input[type="radio"] {
    width: 1.15em; height: 1.15em; margin-top: .2em;
    border: 2px solid var(--forest); background-color: var(--white);
    cursor: pointer;
}
.checkout-sec .form-check-input[type="radio"]:checked {
    background-color: var(--forest); border-color: var(--forest);
    box-shadow: inset 0 0 0 3px var(--white);
    background-image: none;
}
.checkout-sec .form-check-input[type="radio"]:focus { box-shadow: 0 0 0 3px rgba(79, 89, 69, .2); }
.checkout-sec .form-check-input[type="radio"]:checked:focus { box-shadow: inset 0 0 0 3px var(--white), 0 0 0 3px rgba(79, 89, 69, .2); }
.checkout-sec .form-check-input[type="radio"]:disabled { border-color: rgba(46, 42, 36, .3); border-style: dashed; background-color: transparent; }
.checkout-sec .payment-methods .form-check-label,
.checkout-sec .delivery-methods .form-check-label { color: var(--ink); }

/* ---------- Checkout: order lines with photo, link and quantity ---------- */
.order-edit-link { display: inline-block; margin: -4px 0 6px; font-size: .78rem; color: var(--forest); }
.order-row.order-line { align-items: flex-start; gap: 12px; }
.order-thumb { flex: 0 0 52px; }
.order-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; display: block; }
.order-line-info { flex: 1 1 auto; min-width: 0; }
.order-line-name { display: block; color: var(--brown); font-weight: 600; }
.order-line-name:hover { color: var(--forest); text-decoration: underline; }
.order-qty {
    display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 2px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--white);
}
.order-qty button { width: 28px; height: 26px; border: 0; background: transparent; color: var(--forest); font-size: .7rem; border-radius: 999px; }
.order-qty button:hover:not(:disabled) { background: var(--cream-deep); }
.order-qty span { min-width: 20px; text-align: center; font-size: .82rem; font-weight: 600; }

/* ---------- Main menu: smoother, clearer hover ---------- */
@media (min-width: 992px) {
    .main-nav .nav-link::after { height: 2px; }
    .mega-panel { animation: megaIn .22s ease both; }
    @keyframes megaIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
    .mega-panel .dropdown-item {
        position: relative; display: block; padding: 7px 28px 7px 12px; border-radius: 10px;
        transition: background .2s ease, color .2s ease, padding .2s ease;
    }
    .mega-panel .dropdown-item::after {
        content: "\2192"; position: absolute; right: 12px; top: 7px;
        opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; color: var(--brown);
    }
    .mega-panel .dropdown-item:hover { background: rgba(201, 172, 143, .22); color: var(--brown); padding-left: 16px; }
    .mega-panel .dropdown-item:hover::after { opacity: 1; transform: none; }
    .mega-heading { border-bottom: 1px solid var(--line); margin: 0 12px 8px; padding: 0 0 8px; }
    /* Build Your Own: each link with its description */
    .mega-col.is-described .dropdown-item { padding-top: 10px; padding-bottom: 10px; }
    .mega-col.is-described .mega-link-title { display: block; font-weight: 600; color: var(--brown); }
    .mega-panel .dropdown-item small { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.45; color: var(--muted); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mega-panel { animation: none; } }

/* Checkboxes on checkout and product lists: as visible as the radio buttons */
.checkout-sec .form-check-input[type="checkbox"],
.list-tools .form-check-input[type="checkbox"] { width: 1.1em; height: 1.1em; border: 2px solid var(--forest); background-color: var(--white); cursor: pointer; }
/* Ticked: green box with a white tick (the white background above was hiding the ticked state) */
.checkout-sec .form-check-input[type="checkbox"]:checked,
.list-tools .form-check-input[type="checkbox"]:checked {
    background-color: var(--forest);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}

/* ---------- Product lists: Filter button and its panel ---------- */
.list-tools { display: block; }
.list-tools-row { justify-content: flex-start; }
.list-tools .list-count { margin-left: auto; }
.filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border: 1px solid var(--forest); border-radius: 999px;
    background: transparent; color: var(--forest);
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.filter-btn:hover, .filter-btn[aria-expanded="true"] { background: var(--forest); color: var(--cream); }
.filter-btn.is-on { border-width: 2px; }
.filter-count {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--brown); color: var(--cream); font-size: .64rem; letter-spacing: 0;
}
.filter-panel {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 28px;
    margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line);
}
.filter-panel[hidden] { display: none; }
.filter-title { margin-bottom: 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brown); font-weight: 600; }
.filter-option { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.filter-option .form-check-input { margin: 0; width: 1.1em; height: 1.1em; border: 2px solid var(--forest); background-color: var(--white); }
.filter-option small { flex-basis: 100%; padding-left: 1.6em; color: var(--muted); font-size: .74rem; }
.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price .form-control { width: 84px; }
.filter-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }

/* ---------- "Are you sure?" dialog ---------- */
.confirm-modal .modal-content { border-radius: 22px; }
.confirm-modal .modal-body { padding: 26px 24px 10px; font-family: var(--serif); font-size: 1.2rem; color: var(--brown); }
.confirm-modal .modal-footer { border: 0; padding: 10px 24px 22px; gap: 8px; }

/* ---------- "Verify you're human" ---------- */
.human-check {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 12px 0 16px; padding: 12px 16px; max-width: 360px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--white);
}
.human-check label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-size: .9rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.human-check .form-check-input { width: 1.3em; height: 1.3em; margin: 0; border: 2px solid var(--forest); cursor: pointer; }
.human-check-icon { color: var(--sage); font-size: 1.2rem; }
.human-check[data-state="working"] .human-check-icon { animation: humanPulse 1s ease-in-out infinite; }
.human-check[data-state="done"] { border-color: var(--forest); background: rgba(79, 89, 69, .07); }
.human-check[data-state="done"] .human-check-icon { color: var(--forest); }
.human-check[data-state="error"] .human-check-text { color: #9b2c2c; }
@keyframes humanPulse { 50% { opacity: .35; } }
.notify-box .human-check { margin-bottom: 0; }
.human-check .form-check-input:disabled { opacity: 1; }
.human-check .form-check-input:checked { background-color: var(--forest); border-color: var(--forest); }

/* Footer bottom bar: copyright, then FAQ and the legal pages */
.footer-legal { display: grid; gap: 8px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-legal-links a { color: rgba(244, 239, 229, .7); }
.footer-legal-links a[lang] { margin-left: -12px; }

/* ---------- Sign in, sign up, password: walnut story panel + form ---------- */
.page-login, .page-register {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    max-width: 1080px; margin: clamp(28px, 5vw, 64px) auto; padding: 0;
    border-radius: 28px; overflow: hidden;
    background: var(--white); border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(67, 50, 38, .10);
}
.page-login > script, .page-register > script { display: none; }
.auth-brand {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: clamp(32px, 4vw, 56px);
    background: var(--brown); color: var(--cream);
}
/* Reversed logo (cream on Walnut) straight on the panel; its background is the panel colour */
.auth-brand-logo { display: block; width: min(100%, 380px); height: auto; }
.auth-brand-wordmark { display: none; }
.auth-brand .eyebrow { color: var(--sand); margin-bottom: 12px; }
.auth-brand-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.2; color: var(--cream); margin: 0 0 26px; }
.auth-brand-title em { color: var(--sand); }
.auth-brand-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: .9rem; color: rgba(244, 239, 229, .85); }
.auth-brand-list i { width: 22px; color: var(--sand); }

.page-login .auth-right, .page-register .auth-right { padding: clamp(28px, 4vw, 52px); background: transparent; }
.page-login .auth-card, .page-register .auth-card {
    max-width: none; padding: 0; background: transparent; box-shadow: none; border-radius: 0;
}
.page-login .card-head, .page-register .card-head { text-align: left; margin-bottom: 24px; }
.page-login .card-head .eyebrow, .page-register .card-head .eyebrow { margin-bottom: 8px; color: var(--sage); }
.page-login .card-head h3, .page-register .card-head h3 {
    font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--brown); margin-bottom: 6px;
}
.page-login .card-head p, .page-register .card-head p { color: var(--muted); font-size: .9rem; }
.page-login .form-label, .page-register .form-label { color: var(--sage); }
.page-login .form-control, .page-register .form-control { background: var(--cream); border-color: var(--line); border-radius: 12px; }
.page-login .btn-primary-custom, .page-register .btn-primary-custom {
    background: var(--forest); border-radius: 999px !important; font-family: var(--sans);
    text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; padding: 14px 22px;
}
.page-login .btn-primary-custom:hover, .page-register .btn-primary-custom:hover { background: var(--brown); box-shadow: 0 8px 22px rgba(90, 56, 40, .25); }
.page-login .forgot-link, .auth-footer-txt a { color: var(--brown); }
.auth-footer-txt { text-align: left; color: var(--muted); }
.page-login .human-check, .page-register .human-check { max-width: none; background: var(--cream); }
@media (max-width: 860px) {
    .page-login, .page-register { grid-template-columns: 1fr; margin: 20px 16px; }
    .auth-brand { padding: 28px 24px; }
    .auth-brand { padding: 8px 16px; }
    .auth-brand-logo { display: none; }
    .auth-brand-wordmark { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; }
    .auth-brand-title { font-size: 1.5rem; margin-bottom: 0; }
    .auth-brand-list { display: none; }
}

/* ---------- Footer: social icons under Connect ---------- */
.footer-links + .footer-social { margin-top: 18px; }

/* ---------- Menu panels: brand colours instead of white ---------- */
@media (min-width: 992px) {
    .mega-panel { background: var(--cream-deep); border-color: rgba(90, 56, 40, .14) !important; box-shadow: 0 24px 50px rgba(67, 50, 38, .14); }
    .mega-intro { border-right-color: rgba(90, 56, 40, .16); }
    .mega-title { color: var(--brown); }
    .mega-heading { color: var(--forest); border-bottom-color: rgba(90, 56, 40, .16); }
    .mega-panel .dropdown-item { color: var(--ink); }
    .mega-panel .dropdown-item:hover, .mega-panel .dropdown-item:focus, .mega-panel .dropdown-item.active { background: var(--sand); color: var(--brown); }
    .mega-panel .dropdown-item:hover small { color: var(--brown); }
}

/* Footer: reversed logo on Walnut in place of the text title */
.footer-logo { display: block; width: auto; margin-bottom: 0; line-height: 0; } /* old theme fixed it at 160px */
.footer-logo img { width: 320px; max-width: 100%; height: auto; margin: -16px 0 4px -28px; }

/* ---------- Phone numbers: country code + number ---------- */
.phone-field { display: flex; gap: 8px; width: 100%; }
.phone-field .phone-cc { flex: 0 1 auto; width: auto; min-width: 150px; max-width: 55%; padding-right: 28px; }
.phone-field .phone-local { flex: 1 1 auto; min-width: 0; }
.input-group > .phone-field { flex: 1 1 auto; }
.page-login .phone-cc, .page-register .phone-cc { background-color: var(--cream); border-color: var(--line); border-radius: 12px; }
/* Greyed-out quantity buttons pass the hover to their box, which says why */
.qty-box button:disabled, .order-qty button:disabled, .qty-stepper .qty-step:disabled { pointer-events: none; opacity: .4; }
.qty-box .qty-input { -moz-appearance: textfield; appearance: textfield; }
.qty-box .qty-input::-webkit-outer-spin-button, .qty-box .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stock-note { display: block; margin-top: 4px; font-size: .74rem; color: var(--muted); }
.order-line .stock-note { display: inline-block; margin-left: 8px; }

/* ============================================================
   Type balance (27 Oct 2026): serif headings, Open Sans for everything else,
   with the small UI text (menu, buttons, footer) raised so the page reads evenly.
   ============================================================ */
body { font-size: 1rem; line-height: 1.65; }
.main-nav .nav-link { font-size: .86rem !important; letter-spacing: .14em; }
.header-link, .header-link .header-label { font-size: .84rem; letter-spacing: .12em; }
.header-search input { font-size: .95rem; }
.cart-btn { font-size: .86rem !important; letter-spacing: .12em; }
.solid-btn, .text-btn, .pill-btn { font-size: .86rem; letter-spacing: .14em; }
.hero-photo-copy .solid-btn, .hero-photo-copy .text-btn { font-size: .9rem; }
.eyebrow { font-size: .8rem; letter-spacing: .2em; }
.mega-panel .dropdown-item { font-size: .96rem; }
.mega-heading { font-size: 1.2rem; }
.mega-panel .dropdown-item small { font-size: .84rem; }
.story-more { font-size: .9rem; }
.footer-main .eyebrow { font-size: .8rem; letter-spacing: .2em; margin-bottom: 16px; }
.footer-links a { font-size: 1rem; }
.footer-links li { margin-bottom: 6px; }
.footer-note { font-size: 1.08rem; font-family: var(--serif); font-style: italic; }
.footer-legal span { font-size: .88rem; }
@media (max-width: 991.98px) {
    .main-nav .nav-link { font-size: .95rem !important; }
}
/* Narrower desktops: keep the larger menu text on one line without overlapping the search */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-label { display: none; }
    .main-nav .nav-link { font-size: .8rem !important; letter-spacing: .1em; }
    .header-search { width: clamp(110px, 10vw, 150px) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-nav .nav-link { font-size: .76rem !important; letter-spacing: .06em; }
    .header-search { width: 96px !important; }
}

/* Final type (28 Oct 2026, owner approved the home page trial): Cormorant Garamond headings, Montserrat
   sub-headings (eyebrows), everywhere. brand-fonts.css scales Cormorant up 15%, so sizes stay as set.
   Cormorant is light, so headings set at 400 are drawn at 500, and it needs little negative tracking. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display, .section-title, .footer-title,
.hero-photo-copy .display, .story-split-copy h2, .welcome-card-copy h3, .auth-brand-title,
.page-login .card-head h1, .page-login .card-head h2, .page-register .card-head h1, .page-register .card-head h2,
.about-story h1, .about-story h2 {
    font-weight: 500; letter-spacing: -.005em;
}
.hero-photo-copy .display { line-height: 1.02; }
.story-split-copy h2 { line-height: 1.1; }
.welcome-card-copy h3 { line-height: 1; }
h1 em, h2 em, h3 em, .display em, .section-title em { font-weight: 500; }
.eyebrow, .footer-main .eyebrow, .welcome-card-copy .eyebrow, .hero-photo-copy .eyebrow, .story-split-copy .eyebrow {
    font-family: var(--subhead); font-weight: 600; letter-spacing: .26em;
}
/* Hero line "Designed & engraved in Finland" in normal case, not capitals */
.hero-photo-copy .eyebrow { text-transform: none; letter-spacing: .04em; font-size: clamp(.95rem, 1.1vw, 1.1rem); font-weight: 500; }

/* About page: one continuous story column, in the two greens, with the engraved frame photo set into it */
.about-story { max-width: 720px; margin: 0 auto; padding: clamp(8px, 2vw, 32px) 0 clamp(24px, 4vw, 56px); color: rgba(79, 89, 69, .92); }
.about-story .eyebrow { color: var(--sage); margin: 0 0 18px; }
.about-story h1 {
    font-family: var(--serif); font-weight: 400; color: var(--forest);
    font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 clamp(28px, 3vw, 44px);
}
.about-story h1 em { font-style: italic; color: var(--sage); }
.about-story h2 {
    font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--forest);
    font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.2; margin: clamp(36px, 4vw, 56px) 0 14px;
}
.about-story p { font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.85; margin: 0 0 18px; }
.about-story .about-lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.6; color: var(--forest); }
.about-photo { margin: clamp(32px, 4vw, 56px) auto; max-width: 460px; text-align: center; }
.about-photo img {
    display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
.about-photo figcaption { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--sage); }
.about-story .about-sign {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--sage);
    margin: clamp(40px, 4vw, 60px) 0 24px;
}
.about-story .about-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.about-story .about-find { margin-top: clamp(40px, 4vw, 60px); font-size: .9rem; color: rgba(79, 89, 69, .75); line-height: 1.7; }
.about-story .about-find a { color: var(--forest); }
/* About page, wide layout: story text beside the photo, the four chapters in one row, then the close */
.about-story.about-wide { max-width: none; }
.about-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.about-intro .about-photo { margin: 0 auto; max-width: 400px; }
.about-intro h1 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.about-chapters {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px);
    margin-top: clamp(40px, 5vw, 72px);
}
.about-chapters h2 { margin: 0 0 10px; font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
.about-chapters p { font-size: 1rem; line-height: 1.75; margin: 0; }
.about-close { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: clamp(40px, 5vw, 72px); }
.about-close .about-sign { margin: 0 0 18px; }
.about-close .about-find { margin: 0; text-align: right; }
@media (max-width: 991.98px) {
    .about-intro { grid-template-columns: 1fr; }
    .about-chapters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .about-chapters { grid-template-columns: 1fr; }
    .about-close .about-find { text-align: left; }
}
.free-ship-local { margin: 10px 0 0; font-size: .9rem; }
.free-ship-local i { margin-right: 6px; color: var(--forest); }
/* Free-delivery box: one row per delivery type, each with its own limit and bar */
.free-ship-nudge .free-ship-title { margin: 0 0 10px; font-weight: 600; color: var(--brown); }
.free-ship-row { margin-bottom: 12px; }
.free-ship-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; font-size: .86rem; color: var(--ink); }
.free-ship-row-head small { color: var(--muted); font-size: .78rem; margin-left: 4px; }
.free-ship-status { white-space: nowrap; font-weight: 600; color: var(--brown); font-size: .84rem; }
.free-ship-row.is-free .free-ship-status { color: var(--forest); }
.free-ship-row.is-free .free-ship-bar span { background: var(--forest); }
.free-ship-where { display: block; margin-top: 4px; font-size: .74rem; color: var(--muted); }
.free-ship-nudge .free-ship-link { margin-top: 0; }
/* MobilePay and Klarna have no icon font; small brand-coloured word pills */
.stripe-pay .pay-icons { align-items: center; flex-wrap: wrap; }
.pay-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.pay-mobilepay { background: #5A78FF; color: #fff; }
.pay-klarna { background: #FFB3C7; color: #17120F; }
/* Payment badges in their real brand colours (Views/Shared/_PaymentBadges), same size everywhere */
.payment-icons { flex-wrap: wrap; }
.pay-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    height: 28px; min-width: 46px; padding: 0 8px; border-radius: 6px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .12);
    font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.payment-icons .pay-badge img { height: 16px !important; width: auto !important; max-width: none !important; margin: 0 !important; background: none !important; padding: 0 !important; }
.pay-badge-mobilepay { background: #5A78FF; border-color: #5A78FF; color: #fff; }
.pay-badge-apple { background: #000; border-color: #000; color: #fff; font-size: .82rem; }
.pay-badge-apple i { font-size: .95rem; margin-right: 1px; }
.pay-badge-google { color: #5F6368; font-weight: 500; font-size: .82rem; }
.pay-badge-google svg { width: 14px; height: 14px; margin-right: 3px; }
.pay-badge-klarna { background: #FFB3C7; border-color: #FFB3C7; color: #17120F; font-size: .82rem; }
.stripe-pay .pay-icons { gap: 6px; font-size: inherit; }
.payment-icons .pay-badge img[alt="Visa"] { height: 24px !important; }
.payment-icons .pay-badge img[alt="Mastercard"] { height: 20px !important; }
.final-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--cream-deep); border: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); }
.final-total strong { font-family: var(--serif); font-size: 1.5rem; color: var(--brown); white-space: nowrap; }
.final-total small { display: block; font-size: .78rem; }
/* Amounts: plain, upright figures that are easy to read (the serif's old-style numbers dip below the line) */
.final-total strong { font-family: var(--sans); font-weight: 700; font-size: 1.45rem; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
body { font-variant-numeric: lining-nums; }
/* Pop-up messages centred on the screen, bigger and easier to read */
#toast-container.toast-center {
    position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%); width: min(92vw, 440px); z-index: 2000;
}
#toast-container.toast-center > div {
    width: 100%; margin: 0 0 10px; padding: 18px 46px 18px 58px; border-radius: 14px;
    font-size: 1.05rem; line-height: 1.45; font-weight: 600; opacity: 1;
    box-shadow: 0 24px 60px rgba(46, 42, 36, .28); background-position: 20px center;
}
#toast-container.toast-center .toast-close-button { position: absolute; top: 10px; right: 12px; font-size: 1.3rem; }
/* The field a message points at gets a clear red outline until it is changed */
.checkout-form .form-control.is-invalid { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); background-image: none; }

/* ============================================================
   Brand colours only (28 Oct 2026). Bootstrap's blue/red/green defaults and the old theme's
   red and teal hovers are re-pointed at the palette: Deep Sage #4F5945 (actions, success),
   Walnut #5A3828 (links, warnings and errors), Sage #7C8067, Oak Sand #C9AC8F, Linen Cream.
   ============================================================ */
:root {
    --bs-primary: #4F5945; --bs-primary-rgb: 79, 89, 69;
    --bs-secondary: #7C8067; --bs-secondary-rgb: 124, 128, 103;
    --bs-success: #4F5945; --bs-success-rgb: 79, 89, 69;
    --bs-info: #7C8067; --bs-info-rgb: 124, 128, 103;
    --bs-warning: #C9AC8F; --bs-warning-rgb: 201, 172, 143;
    --bs-danger: #5A3828; --bs-danger-rgb: 90, 56, 40;
    --bs-link-color: #5A3828; --bs-link-color-rgb: 90, 56, 40;
    --bs-link-hover-color: #4F5945; --bs-link-hover-color-rgb: 79, 89, 69;
    --bs-focus-ring-color: rgba(79, 89, 69, .25);
    --bs-form-valid-color: #4F5945; --bs-form-valid-border-color: #4F5945;
    --bs-form-invalid-color: #5A3828; --bs-form-invalid-border-color: #5A3828;
    --bs-primary-text-emphasis: #4F5945; --bs-primary-bg-subtle: #EEE6D8; --bs-primary-border-subtle: #C9AC8F;
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: #4F5945; --bs-btn-border-color: #4F5945; --bs-btn-color: #F4EFE5;
    --bs-btn-hover-bg: #5A3828; --bs-btn-hover-border-color: #5A3828; --bs-btn-hover-color: #F4EFE5;
    --bs-btn-active-bg: #5A3828; --bs-btn-active-border-color: #5A3828; --bs-btn-active-color: #F4EFE5;
    --bs-btn-disabled-bg: #7C8067; --bs-btn-disabled-border-color: #7C8067;
    --bs-btn-focus-shadow-rgb: 79, 89, 69;
}
.btn-outline-primary {
    --bs-btn-color: #4F5945; --bs-btn-border-color: #4F5945;
    --bs-btn-hover-bg: #4F5945; --bs-btn-hover-border-color: #4F5945; --bs-btn-hover-color: #F4EFE5;
    --bs-btn-active-bg: #4F5945; --bs-btn-active-border-color: #4F5945; --bs-btn-active-color: #F4EFE5;
    --bs-btn-focus-shadow-rgb: 79, 89, 69;
}
.btn { --bs-btn-focus-shadow-rgb: 79, 89, 69; }
.place-order, .checkout-sec .place-order { background: var(--brown) !important; color: var(--cream) !important; }
.place-order:hover, .place-order:focus, .checkout-sec .place-order:hover { background: var(--forest) !important; color: var(--cream) !important; }
.place-order:disabled { background: var(--sage) !important; }
.cart-total .btn-primary-custom:hover, .btn-primary-custom:hover { background: var(--forest) !important; border-color: var(--forest) !important; color: var(--cream) !important; }

/* Focus rings, ticked boxes, dropdowns, accordion, close buttons */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--sage) !important; box-shadow: 0 0 0 .2rem rgba(79, 89, 69, .2) !important;
}
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--forest); border-color: var(--forest); }
.dropdown-menu { --bs-dropdown-link-active-bg: #4F5945; --bs-dropdown-link-active-color: #F4EFE5; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--forest); color: var(--cream); }
.nav-link:focus-visible, .btn-close:focus { box-shadow: 0 0 0 .2rem rgba(79, 89, 69, .25); }
.accordion {
    --bs-accordion-active-color: #5A3828; --bs-accordion-active-bg: #EEE6D8;
    --bs-accordion-btn-focus-border-color: #7C8067; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(79, 89, 69, .2);
}

/* Helper texts: success in Deep Sage, warnings and errors in Walnut */
.text-success { color: var(--forest) !important; }
.text-danger, p.help-block, .help-block, .field-validation-error, small.required { color: var(--brown) !important; }
.text-primary { color: var(--forest) !important; }
.text-info { color: var(--sage) !important; }
.text-warning-emphasis { color: var(--brown) !important; }
.bg-primary { background-color: var(--forest) !important; }
.bg-success { background-color: var(--forest) !important; }
.bg-danger { background-color: var(--brown) !important; }
.badge.bg-danger, .badge.bg-primary { color: var(--cream) !important; }
.alert-success { --bs-alert-color: #4F5945; --bs-alert-bg: #EEE6D8; --bs-alert-border-color: #C9AC8F; }
.alert-danger, .alert-warning { --bs-alert-color: #5A3828; --bs-alert-bg: #EEE6D8; --bs-alert-border-color: #C9AC8F; }
.alert-info, .alert-primary { --bs-alert-color: #4F5945; --bs-alert-bg: #F4EFE5; --bs-alert-border-color: #C9AC8F; }
/* Field marked by a checkout warning: Walnut outline instead of red */
.checkout-form .form-control.is-invalid { border-color: var(--brown) !important; box-shadow: 0 0 0 3px rgba(90, 56, 40, .18) !important; }


/* ============================================================
   Delivery-area bar above the header (only while parcels are off).
   It folds away when the header shrinks on scroll.
   ============================================================ */
:root { --announce-h: 34px; }
.announce-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--announce-h); overflow: hidden;
    padding: 0 16px;
    background: var(--forest, #4F5945); color: #F4EFE5;
    font-family: 'Montserrat', sans-serif; font-size: .8rem; letter-spacing: .02em;
    text-align: center; white-space: nowrap;
    transition: height .45s cubic-bezier(.7, 0, .18, 1), opacity .3s ease;
}
.announce-bar strong { font-weight: 600; color: #E9D8B8; }
.announce-bar i { font-size: .85rem; opacity: .85; }
.site-header.is-compact .announce-bar { height: 0; opacity: 0; }
body.has-announce .site-main { padding-top: calc(var(--header-row) + var(--announce-h)); }
@media (min-width: 992px) {
    body.has-announce.is-home .site-main { padding-top: 0; }
    body.has-announce.is-home .hero-photo-copy { padding-top: calc(var(--header-row) + var(--announce-h) + clamp(16px, 2.5vw, 40px)); }
}
@media (max-width: 575.98px) {
    :root { --announce-h: 30px; }
    .announce-bar { font-size: .72rem; gap: 5px; padding: 0 10px; }
    .announce-bar i { display: none; }
}

/* ============================================================
   Personalisation reminders: empty engraving text, photo/logo
   the customer emails after ordering (Product.NeedsCustomerImage)
   ============================================================ */
.engraving-missing {
    margin-top: 8px; padding: 9px 12px; border-radius: 10px;
    background: #F8E9DF; color: var(--brown, #5A3828); font-size: .86rem; line-height: 1.45;
}
.engraving-missing i { margin-right: 4px; }
.photo-needed {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border-radius: 12px;
    background: var(--cream-deep, #EEE6D8); color: var(--brown, #5A3828); font-size: .88rem; line-height: 1.5;
}
.photo-needed > i { font-size: 1.3rem; margin-top: 2px; color: var(--forest, #4F5945); }
.photo-needed strong { display: block; color: var(--forest, #4F5945); }
.photo-needed a { color: var(--brown, #5A3828); text-decoration: underline; }
.line-meta.line-todo { color: var(--brown, #5A3828); font-weight: 600; }
.still-needed {
    max-width: 760px; margin: 0 auto 24px; padding: 18px 20px; border-radius: 16px;
    background: var(--cream-deep, #EEE6D8); border-left: 5px solid var(--brown, #5A3828); color: var(--brown, #5A3828);
}
.still-needed h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--forest, #4F5945); }
.still-needed p { margin: 0 0 6px; }
.still-needed .btn { margin: 8px 12px 4px 0; width: auto; }
.still-needed small { display: block; color: #6b6257; }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.photo-upload-btn { padding: 8px 14px !important; font-size: .78rem !important; }
.photo-chosen { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--forest, #4F5945); font-weight: 600; }
.photo-chosen img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #E5DCCB); }
.photo-needed .engraving-missing { margin-top: 10px; }
.still-upload { padding: 10px 0; border-bottom: 1px solid rgba(90, 56, 40, .15); }
.still-upload:last-of-type { border-bottom: 0; }
.still-upload .btn { margin: 4px 10px 4px 0; }
/* Header pills over the home photo: one height, one shape and one text style for menu, search,
   account, wishlist and cart (they used to be 31-49px tall with three different text sizes) */
@media (min-width: 992px) {
    body.is-home .site-header:not(.is-compact) {
        --pill-h: 42px;
    }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link,
    body.is-home .site-header:not(.is-compact) .header-action .header-search,
    body.is-home .site-header:not(.is-compact) .header-link,
    body.is-home .site-header:not(.is-compact) .cart-btn {
        height: var(--pill-h) !important; min-height: var(--pill-h);
        display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
        padding-top: 0 !important; padding-bottom: 0 !important;
        font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase;
        border: 0 !important; border-radius: 999px !important; line-height: 1;
        background: rgba(244, 239, 229, .86) !important;
        box-shadow: 0 4px 14px rgba(67, 50, 38, .08);
    }
    body.is-home .site-header:not(.is-compact) .main-nav .nav-link { padding-left: 18px !important; padding-right: 18px !important; }
    body.is-home .site-header:not(.is-compact) .header-link,
    body.is-home .site-header:not(.is-compact) .cart-btn { padding-left: 16px !important; padding-right: 16px !important; min-width: var(--pill-h); }
    body.is-home .site-header:not(.is-compact) .header-action .header-search { padding-left: 16px !important; padding-right: 16px !important; border-bottom: 0 !important; }
    body.is-home .site-header:not(.is-compact) .header-action .header-search input {
        font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; height: auto; padding: 0; background: transparent;
    }
    body.is-home .site-header:not(.is-compact) .header-action .header-search input::placeholder { text-transform: uppercase; letter-spacing: .14em; }
    body.is-home .site-header:not(.is-compact) .header-action .header-search i,
    body.is-home .site-header:not(.is-compact) .header-link i,
    body.is-home .site-header:not(.is-compact) .cart-btn i { font-size: .95rem; }
    body.is-home .site-header:not(.is-compact) .cart-btn .count-num { letter-spacing: 0; }
}@media (min-width: 992px) and (max-width: 1199.98px) {
    body.is-home .site-header:not(.is-compact) .header-action .header-search { width: 128px !important; min-width: 128px; flex-shrink: 0; padding-left: 14px !important; padding-right: 12px !important; }
    body.is-home .site-header:not(.is-compact) .header-action .header-search input { min-width: 0; width: 100%; }
    body.is-home .site-header:not(.is-compact) .header-action .header-search input,
    body.is-home .site-header:not(.is-compact) .header-action .header-search input::placeholder { letter-spacing: .06em; }
}
/* ---------- Section / category list heading ----------
   The shared .section-header rule bottom-aligns its children, which right-aligned a stacked (column) title on phones.
   Stacked headers line up left with the breadcrumb; the product list puts its Sections pill beside the title's first line. */
.section-header.flex-column { align-items: flex-start !important; }
.section-header.list-head { flex-wrap: nowrap; align-items: baseline !important; gap: 14px; }
.list-head .section-title { min-width: 0; overflow-wrap: anywhere; }
.list-sections-btn {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 6px 16px; border: 1px solid var(--forest); border-radius: 999px;
    background: transparent; color: var(--forest);
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.list-sections-btn:hover, .list-sections-btn:focus-visible { background: var(--forest); color: var(--cream); }

/* ---------- Phone menu: same sections and columns as the desktop panel, folded ----------
   Each column heading is a row that opens its links (the column holding the current page starts open).
   Links look the same in every column: the desktop descriptions are left out, as stacked they made Seasonal much longer than the rest. */
.mega-caret { display: none; }
@media (max-width: 991.98px) {
    .nav-panel { padding: 0 0 6px 14px; }
    .mega-col { margin: 0; border-bottom: 1px solid var(--line); }
    .mega-col:last-child { border-bottom: 0; }
    .mega-heading {
        display: flex; justify-content: space-between; align-items: center;
        padding: 13px 0; margin: 0; cursor: pointer;
        font-family: var(--sans); font-size: 1rem; color: var(--brown);
    }
    .mega-heading:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
    .mega-caret { display: inline-block; font-size: .7rem; color: var(--sage); transition: transform .2s ease; }
    .mega-col.is-open .mega-caret { transform: rotate(180deg); }
    .mega-col .dropdown-item { display: none; }
    .mega-col.is-open .dropdown-item { display: block; }
    .mega-col.is-open .dropdown-item:last-child { margin-bottom: 8px; }
    .mega-panel .dropdown-item { padding: 8px 0 8px 14px; font-size: .95rem; color: var(--ink); background: transparent; }
    .mega-panel .dropdown-item.active { color: var(--brown); font-weight: 600; background: transparent; }
    .mega-panel .dropdown-item small { display: none; }
}
@media (max-width: 991.98px) {
    .mega-col.is-single .mega-heading { cursor: default; padding-bottom: 4px; }
    .mega-col.is-single .mega-caret { display: none; }
}