/* ==========================================================================
   Pot & Plants Nursery — editorial botanical theme
   File: public/themes/shop/nursery-theme/custom.css
   Loaded from: packages/Webkul/Shop/src/Resources/views/components/layouts/index.blade.php

   NOTE: inline <style> tags are stripped by Vue's template compiler on this
   storefront (see HANDOFF.txt §3). All custom CSS must live in this file.
   Tailwind utility classes not already in the compiled app.css do nothing —
   so everything here is plain CSS against real selectors.
   ========================================================================== */

:root {
    /* Surfaces */
    --np-cream:        #faf8f3;
    --np-cream-deep:   #f2eee4;
    --np-white:        #ffffff;

    /* Brand greens */
    --np-forest:       #14532d;
    --np-forest-deep:  #0e3d21;
    --np-forest-soft:  #e8efe6;

    /* Botanical neutrals */
    --np-sage:         #8a9a7b;
    --np-sage-light:   #c7d0bc;
    --np-sage-hair:    #dfe4d7;

    /* Text */
    --np-ink:          #1b211c;
    --np-muted:        #5f6a5f;

    /* Accent — used only for price / sale, never decoration */
    --np-clay:         #b4653a;

    /* Type */
    --np-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
    --np-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Rhythm — editorial layouts breathe */
    --np-gutter:    clamp(20px, 5vw, 64px);
    --np-max:       1240px;
    --np-max-text:  62ch;

    /* Editorial detailing: small radii, near-flat shadows */
    --np-radius:    3px;
    --np-radius-lg: 6px;
    --np-shadow:    0 1px 2px rgba(27, 33, 28, .04), 0 8px 24px -12px rgba(27, 33, 28, .12);
    --np-ease:      cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Base — typography + page surface
   The fonts are already linked in <head>; the old stylesheet never used them.
   -------------------------------------------------------------------------- */

body {
    font-family: var(--np-body);
    color: var(--np-ink);
    background-color: var(--np-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* main is hard-coded bg-white in the layout; cream reads warmer */
main#main {
    background-color: var(--np-cream) !important;
}

h1, h2, h3, h4,
.np-display {
    font-family: var(--np-display);
    font-weight: 400;      /* DM Serif ships one weight — never fake-bold it */
    letter-spacing: -.01em;
    color: var(--np-ink);
}

/* Eyebrow label — the editorial signature: small, spaced, uppercase */
.np-eyebrow {
    font-family: var(--np-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--np-sage);
    margin: 0 0 18px;
    display: block;
}

/* Hairline rule used to separate editorial blocks */
.np-rule {
    border: 0;
    border-top: 1px solid var(--np-sage-hair);
    margin: 0;
}

*:focus-visible {
    outline: 2px solid var(--np-forest);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   1b. Header logo — fixes the half-cut logo on phones
   ..........................................................................
   Bagisto's header markup sets width="131" height="29" as HTML attributes on
   the logo <img>, but Tailwind's preflight declares `img { height: auto }` —
   and a real CSS declaration always beats a presentational attribute hint.
   The uploaded logo is 192x140, so the browser computed 131 x 95px. The
   MOBILE header anchor is `class="flex max-h-[30px] items-center"`, so that
   95px image was clipped to 30px — the "half cut logo" on phones. Desktop has
   no cap, so there it just rendered oversized.

   Fix the image itself rather than the attributes: cap the HEIGHT and let the
   width follow, so any future logo of any aspect ratio also behaves.
   Selector matches all three instances (mobile header, desktop bottom bar and
   the mobile drawer header) without touching the Blade views.
   -------------------------------------------------------------------------- */

img[src*="/storage/channel/"] {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 30px;          /* == the mobile anchor's max-h-[30px] */
    object-fit: contain;
}

@media (min-width: 1024px) {
    /* Desktop bottom bar is 78px tall — a 46px logo sits comfortably. */
    img[src*="/storage/channel/"] {
        max-width: 200px;
        max-height: 46px;
    }
}

/* --------------------------------------------------------------------------
   2. Hero — full-bleed photograph, cream serif headline
   -------------------------------------------------------------------------- */

.np-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(460px, 68vh, 720px);
    padding: var(--np-gutter);
    padding-block-end: clamp(48px, 7vw, 96px);
    background-color: var(--np-forest-deep);   /* shows while the photo loads */
    overflow: hidden;
}

.np-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.np-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    display: block;
}

/* Two-stop scrim: keeps the serif legible without flattening the photo.
   Strengthened after a real-device check — the first line ("Grow something")
   is cream, and it landed on the brightest, lightest part of the photo, so it
   washed out and read as invisible. The bottom two-thirds are now noticeably
   darker while the top stays open so the photograph is still a photograph.
   Do not lighten these values without re-checking the headline on a phone in
   daylight. */
.np-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            rgba(11, 46, 26, .84) 0%,
            rgba(11, 46, 26, .74) 30%,
            rgba(12, 52, 29, .52) 58%,
            rgba(14, 61, 33, .24) 82%,
            rgba(14, 61, 33, .10) 100%);
}

.np-hero__inner {
    width: 100%;
    max-width: var(--np-max);
    margin-inline: auto;
}

.np-hero .np-eyebrow {
    color: var(--np-sage-light);
    margin-bottom: 22px;
    text-shadow: 0 1px 10px rgba(9, 38, 21, .55);
}

.np-hero__title {
    font-family: var(--np-display);
    color: var(--np-cream);
    font-size: clamp(44px, 8.5vw, 92px);
    line-height: .98;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    max-width: 18ch;
    text-wrap: balance;
    /* Belt and braces with the scrim above: a soft shadow guarantees the
       cream first line separates from the foliage even where the photo is
       lightest. Deliberately soft and wide so it reads as depth, not as an
       outline. */
    text-shadow:
        0 1px 2px rgba(9, 38, 21, .45),
        0 2px 24px rgba(9, 38, 21, .55);
}

/* The second line is set in italic — the one flourish in the whole design */
.np-hero__title em {
    font-style: italic;
    color: var(--np-sage-light);
}

.np-hero__lede {
    font-family: var(--np-body);
    color: rgba(250, 248, 243, .92);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 300;
    line-height: 1.65;
    max-width: 48ch;
    margin: 0 0 36px;
    text-shadow: 0 1px 12px rgba(9, 38, 21, .5);
}

/* Underline-arrow link — replaces the pill button */
.np-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--np-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--np-cream);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(250, 248, 243, .45);
    transition: border-color .3s var(--np-ease), gap .3s var(--np-ease);
}

.np-link-arrow::after {
    content: "→";
    font-size: 17px;
    line-height: 1;
    transition: transform .3s var(--np-ease);
}

.np-link-arrow:hover {
    border-bottom-color: var(--np-cream);
    gap: 18px;
}

.np-link-arrow:hover::after { transform: translateX(2px); }

/* Dark-on-light variant for use inside cream sections */
.np-link-arrow--ink {
    color: var(--np-forest);
    border-bottom-color: var(--np-sage-light);
}

.np-link-arrow--ink:hover { border-bottom-color: var(--np-forest); }

/* --------------------------------------------------------------------------
   3. Section shell — shared by every editorial block
   -------------------------------------------------------------------------- */

.np-section {
    padding: clamp(56px, 8vw, 112px) var(--np-gutter);
}

.np-section--cream { background-color: var(--np-cream-deep); }
.np-section--forest { background-color: var(--np-forest); }

.np-section__inner {
    max-width: var(--np-max);
    margin-inline: auto;
}

.np-section__head {
    max-width: var(--np-max);
    margin: 0 auto clamp(40px, 5vw, 72px);
}

/* Head aligned left by default — editorial layouts rarely centre */
.np-section__title {
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.08;
    margin: 0;
    max-width: 24ch;
    text-wrap: balance;
}

.np-section__lede {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--np-muted);
    max-width: var(--np-max-text);
    margin: 18px 0 0;
}

/* Head with a "view all" pushed to the far edge */
.np-section__head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.np-section--forest .np-section__title { color: var(--np-cream); }
.np-section--forest .np-section__lede  { color: rgba(250, 248, 243, .74); }
.np-section--forest .np-eyebrow        { color: var(--np-sage-light); }

/* --------------------------------------------------------------------------
   4. Collections — numbered cards, tall 4:5 photography
   -------------------------------------------------------------------------- */

.np-collection-grid {
    max-width: var(--np-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 48px) clamp(16px, 2.5vw, 36px);
}

/* 9 top-level categories → a clean 3×3 at desktop, 2-up on phones.
   (4 columns would leave an orphan row of one.) */
@media (min-width: 700px) { .np-collection-grid { grid-template-columns: repeat(3, 1fr); } }

.np-collection {
    display: block;
    text-decoration: none;
    color: inherit;
    padding-top: 16px;
    border-top: 1px solid var(--np-sage-hair);
    transition: border-color .35s var(--np-ease);
}

.np-collection:hover { border-top-color: var(--np-forest); }

.np-collection__num {
    font-family: var(--np-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--np-sage);
    display: block;
    margin-bottom: 14px;
    transition: color .35s var(--np-ease);
}

.np-collection:hover .np-collection__num { color: var(--np-forest); }

.np-collection__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--np-forest-soft);
    border-radius: var(--np-radius);
}

.np-collection__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--np-ease);
}

.np-collection:hover .np-collection__media img { transform: scale(1.045); }

.np-collection__name {
    font-family: var(--np-display);
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.2;
    margin: 18px 0 5px;
    color: var(--np-ink);
}

.np-collection__meta {
    display: block;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--np-muted);
}

/* --------------------------------------------------------------------------
   5. Values strip — replaces the emoji badge row + duplicated trust row
   -------------------------------------------------------------------------- */

.np-values {
    background-color: var(--np-cream-deep);
    border-block: 1px solid var(--np-sage-hair);
    padding: clamp(44px, 6vw, 80px) var(--np-gutter);
}

.np-values__grid {
    max-width: var(--np-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 760px) {
    .np-values__grid { grid-template-columns: repeat(4, 1fr); }
    .np-value + .np-value {
        border-top: 0;
        border-inline-start: 1px solid var(--np-sage-hair);
        padding-inline-start: clamp(20px, 2.5vw, 40px);
    }
    .np-value { padding-inline-end: clamp(20px, 2.5vw, 40px); }
}

.np-value { padding-block: 26px; }

.np-value + .np-value { border-top: 1px solid var(--np-sage-hair); }

/* Line-art SVG icons, not emoji */
.np-value__icon {
    width: 26px;
    height: 26px;
    display: block;
    margin-bottom: 18px;
    color: var(--np-forest);
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.np-value__title {
    font-family: var(--np-display);
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--np-ink);
}

.np-value__copy {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--np-muted);
    margin: 0;
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   5b. Story band — full-bleed photograph beside editorial copy.
   Closes the homepage. Image is a real <img> (not a CSS background) so it can
   be lazy-loaded and given an alt attribute.
   -------------------------------------------------------------------------- */

.np-story {
    background-color: var(--np-cream);
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 900px) {
    .np-story { grid-template-columns: 1.05fr 1fr; }
}

.np-story__media {
    position: relative;
    overflow: hidden;
    background-color: var(--np-forest-soft);
    aspect-ratio: 16 / 11;
}

@media (min-width: 900px) {
    .np-story__media { aspect-ratio: auto; min-height: 520px; }
}

.np-story__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.np-story__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 6vw, 96px) var(--np-gutter);
}

@media (min-width: 900px) {
    .np-story__body { padding-inline: clamp(40px, 5vw, 88px); }
}

.np-story__title {
    font-family: var(--np-display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--np-ink);
    margin: 14px 0 0;
}

.np-story__title em {
    font-style: italic;
    color: var(--np-forest);
}

.np-story__copy {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--np-muted);
    max-width: 46ch;
    margin: 20px 0 0;
}

.np-story__facts {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--np-sage-hair);
}

.np-story__facts li {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--np-sage-hair);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--np-muted);
}

.np-story__facts b {
    flex: none;
    min-width: 8.5ch;
    font-family: var(--np-display);
    font-weight: 400;
    font-size: 15px;
    color: var(--np-forest);
}

.np-story .np-link-arrow { margin-top: 30px; }

/* --------------------------------------------------------------------------
   6. Product cards — CSS ONLY.
   The card is a shared Vue x-template (id="v-product-card-template") that also
   powers category pages, search and homepage carousels, and it carries live
   add-to-cart / wishlist handlers. It is NOT edited. Everything below hooks
   onto classes the template already emits:
       .action-items        badge overlay + add-to-cart row
       .secondary-button    the Add To Cart button
       .shimmer             image wrapper
       v-product-ratings    ratings pill
   -------------------------------------------------------------------------- */

/* Card root: .group + rounded-md, inside a product grid */
[class*="grid-cols-3"] > .group,
.group.rounded-md {
    border-radius: var(--np-radius) !important;
    background-color: transparent !important;
}

/* Image well: force a 4:5 editorial crop (template ships ~1:1 + 9px) */
.group .shimmer::after,
.group v-shimmer-image::after {
    padding-bottom: 125% !important;
}

.group .shimmer,
.group v-shimmer-image {
    background-color: var(--np-forest-soft) !important;
    border-radius: var(--np-radius) !important;
}

.group .shimmer img {
    object-fit: cover;
}

/* The template paints the badge overlay black — remove it */
.group .action-items.bg-black {
    background-color: transparent !important;
}

/* Badges: squared, quiet, editorial — not red/blue pills */
.group .action-items p[class*="bg-red-600"] {
    background-color: var(--np-clay) !important;
    border-radius: var(--np-radius) !important;
    font-family: var(--np-body);
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px !important;
}

.group .action-items p[class*="bg-navyBlue"] {
    background-color: var(--np-forest) !important;
    border-radius: var(--np-radius) !important;
    font-family: var(--np-body);
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px !important;
}

/* Info panel: the template slides it up on hover to reveal the actions, which
   hides price/cart until the user guesses to hover. Pin it flat instead. */
.group > [class*="translate-y-9"] {
    margin-top: 14px !important;
    transform: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
}

/* Product name → serif, generous line height */
.group > [class*="translate-y-9"] > p:first-of-type,
.group > [class*="translate-y-9"] > p.break-words {
    font-family: var(--np-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    color: var(--np-ink);
    max-width: 100% !important;
}

/* Price row */
.group > [class*="translate-y-9"] > div[class*="flex-wrap"] {
    font-family: var(--np-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--np-forest);
    letter-spacing: .01em;
}

/* Struck-through compare-at price, if Bagisto emits one */
.group > [class*="translate-y-9"] span.line-through,
.group > [class*="translate-y-9"] .line-through {
    color: var(--np-muted) !important;
    font-weight: 300 !important;
    font-size: 13px !important;
}

/* Ratings pill: flatten it */
.group v-product-ratings {
    border-radius: var(--np-radius) !important;
    background-color: rgba(250, 248, 243, .92) !important;
    border-color: transparent !important;
    font-family: var(--np-body);
}

/* Action row: template keeps it at opacity-0 until hover and hides it entirely
   below md, so phones get no add-to-cart on cards at all. Always show it, but
   styled as a quiet editorial link rather than a filled button. */
.group .action-items[class*="justify-between"] {
    opacity: 1 !important;
    display: flex !important;
    margin-top: 6px;
    gap: 10px;
}

.group .secondary-button {
    font-family: var(--np-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--np-forest) !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--np-sage-light) !important;
    border-radius: 0 !important;
    padding: 0 0 6px !important;
    width: auto !important;
    max-width: none !important;
    text-align: start;
    transition: border-color .3s var(--np-ease), color .3s var(--np-ease);
}

.group .secondary-button:hover:not(:disabled) {
    border-bottom-color: var(--np-forest) !important;
    background-color: transparent !important;
}

.group .secondary-button:disabled {
    color: var(--np-muted) !important;
    border-bottom-color: var(--np-sage-hair) !important;
    cursor: not-allowed;
}

/* Wishlist / compare icons in the action row */
.group .action-items[class*="justify-between"] span[role="button"] {
    padding: 0 !important;
    font-size: 18px !important;
    color: var(--np-muted);
    transition: color .25s var(--np-ease);
}

.group .action-items[class*="justify-between"] span[role="button"]:hover {
    color: var(--np-forest);
}

/* Product grid: wider editorial gutters, uncap the 291px card width */
[class*="grid-cols-3"][class*="gap-8"] {
    gap: clamp(28px, 3.4vw, 56px) clamp(18px, 2.4vw, 40px) !important;
}

.group [class*="max-w-[291px]"],
.group [class*="max-h-[300px]"] {
    max-width: 100% !important;
    max-height: none !important;
}

/* --------------------------------------------------------------------------
   7. Header — cream, hairline rule, letter-spaced nav
   -------------------------------------------------------------------------- */

header.shadow-gray {
    background-color: var(--np-cream) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--np-sage-hair);
}

/* Inner bar already carries a border-b; collapse it so we don't double-rule */
header.shadow-gray > div > div[class*="min-h-[78px]"] {
    border-bottom-color: transparent !important;
}

header.shadow-gray a,
header.shadow-gray nav a {
    color: var(--np-ink) !important;
    transition: color .25s var(--np-ease);
}

header.shadow-gray a:hover,
header.shadow-gray nav a:hover {
    color: var(--np-forest) !important;
}

/* Top-level category links read as an editorial nav */
header.shadow-gray nav a {
    font-family: var(--np-body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Search field — square it off, cream well */
header.shadow-gray input[type="text"],
header.shadow-gray input[type="search"] {
    background-color: var(--np-white) !important;
    border: 1px solid var(--np-sage-hair) !important;
    border-radius: var(--np-radius) !important;
    font-family: var(--np-body);
    font-size: 13.5px;
}

header.shadow-gray input::placeholder { color: var(--np-muted); }

header.shadow-gray input[type="text"]:focus,
header.shadow-gray input[type="search"]:focus {
    border-color: var(--np-sage) !important;
    outline: none;
}

/* Mobile bar matches */
header.shadow-gray > div[class*="lg:hidden"] {
    background-color: var(--np-cream) !important;
    box-shadow: none !important;
}

/* Dropdown panels (mega-menu) on cream */
header.shadow-gray .bg-white,
header.shadow-gray [class*="bg-white"] {
    background-color: var(--np-cream) !important;
}

/* --------------------------------------------------------------------------
   8. Footer — deep forest anchor
   -------------------------------------------------------------------------- */

footer {
    margin-top: 0 !important;
    background-color: var(--np-forest) !important;
}

footer,
footer p,
footer a,
footer li,
footer span,
footer div {
    color: rgba(250, 248, 243, .82) !important;
}

footer h1, footer h2, footer h3, footer h4,
footer .text-navyBlue {
    font-family: var(--np-display) !important;
    color: var(--np-cream) !important;
}

/* The newsletter headline ships as text-3xl italic leading-[45px] */
footer [class*="text-3xl"][class*="italic"] {
    font-family: var(--np-display) !important;
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 30px) !important;
    line-height: 1.25 !important;
    color: var(--np-cream) !important;
    max-width: 20ch !important;
}

/* Column headings */
footer .font-medium,
footer .font-semibold,
footer .font-bold {
    font-family: var(--np-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--np-sage-light) !important;
}

footer a:hover {
    color: var(--np-white) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Newsletter input on dark */
footer input[type="email"],
footer input[type="text"] {
    background-color: rgba(250, 248, 243, .08) !important;
    border: 1px solid rgba(199, 208, 188, .28) !important;
    border-radius: var(--np-radius) !important;
    color: var(--np-cream) !important;
    font-family: var(--np-body);
}

footer input::placeholder { color: rgba(250, 248, 243, .5) !important; }

/* Copyright strip ships as bg-[#F1EADF] */
footer [class*="bg-[#F1EADF]"] {
    background-color: var(--np-forest-deep) !important;
    border-top: 1px solid rgba(199, 208, 188, .18);
}

footer [class*="bg-[#F1EADF]"] * {
    color: rgba(250, 248, 243, .6) !important;
    font-size: 12.5px !important;
}

/* Mobile footer accordions */
footer [class*="border-[#e9decc]"] {
    border-color: rgba(199, 208, 188, .22) !important;
}

/* --------------------------------------------------------------------------
   8b. Contact band — injected into the core footer above the copyright bar.
   Real address, phones and email. Site-wide.
   -------------------------------------------------------------------------- */

.np-contact {
    background-color: var(--np-forest-deep);
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding: clamp(34px, 4.5vw, 60px) var(--np-gutter);
}

.np-contact__inner {
    max-width: var(--np-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 760px) {
    .np-contact__inner { grid-template-columns: 1.2fr 1fr 1.3fr; gap: clamp(28px, 4vw, 64px); }
}

.np-contact__label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--np-sage-light);
    margin-bottom: 14px;
}

.np-contact__addr {
    font-style: normal;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
    margin: 0;
}

.np-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.np-contact__list li + li { margin-top: 7px; }

.np-contact__list a,
.np-contact__map {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    transition: border-color .25s var(--np-ease), color .25s var(--np-ease);
    word-break: break-word;
}

.np-contact__list a:hover,
.np-contact__list a:focus-visible,
.np-contact__map:hover,
.np-contact__map:focus-visible {
    color: var(--np-white);
    border-bottom-color: var(--np-white);
}

.np-contact__map {
    display: inline-block;
    margin-top: 14px;
    font-size: 12.5px;
    letter-spacing: .04em;
}

.np-contact__note {
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, .60);
    margin: 16px 0 0;
    max-width: 40ch;
}

/* --------------------------------------------------------------------------
   9. Buttons — site-wide (cart, checkout, account, forms)
   -------------------------------------------------------------------------- */

.primary-button {
    font-family: var(--np-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    background-color: var(--np-forest) !important;
    color: var(--np-cream) !important;
    border: 1px solid var(--np-forest) !important;
    border-radius: var(--np-radius) !important;
    padding: 15px 32px !important;
    transition: background-color .28s var(--np-ease), color .28s var(--np-ease);
}

.primary-button:hover:not(:disabled) {
    background-color: var(--np-forest-deep) !important;
    border-color: var(--np-forest-deep) !important;
}

/* Outline variant everywhere except inside a product card, which is handled
   above as a text link */
:not(.group) > .secondary-button {
    font-family: var(--np-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    background-color: transparent !important;
    color: var(--np-forest) !important;
    border: 1px solid var(--np-sage-light) !important;
    border-radius: var(--np-radius) !important;
    transition: border-color .28s var(--np-ease);
}

:not(.group) > .secondary-button:hover {
    border-color: var(--np-forest) !important;
    background-color: transparent !important;
}

/* Bagisto puts rounded-2xl on the PDP cart buttons — square them */
.primary-button[class*="rounded-2xl"],
.secondary-button[class*="rounded-2xl"] {
    border-radius: var(--np-radius) !important;
}

/* --------------------------------------------------------------------------
   10. Product detail page
   -------------------------------------------------------------------------- */

/* Gallery well */
main#main .aspect-square {
    background-color: var(--np-forest-soft);
    border-radius: var(--np-radius);
    overflow: hidden;
}

/* Product title: the largest serif on the page after the hero.
   ..........................................................................
   `:not(.np-hero__title)` is LOAD-BEARING. The homepage hero <h1> also lives
   inside <main id="main">, so without the exclusion this rule's
   `color: var(--np-ink) !important` beat `.np-hero__title { color: cream }`
   and the hero headline rendered dark ink on a dark photo — invisible. The
   italic <em> ("beautiful.") stayed visible because `main#main h1` does not
   match the child <em>, which is exactly the tell: if one half of a headline
   is visible and the other is not, look for an `!important` on the parent
   element selector, not at the scrim. */
main#main h1:not(.np-hero__title) {
    font-family: var(--np-display) !important;
    font-size: clamp(28px, 3.6vw, 42px) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em;
    color: var(--np-ink) !important;
    max-width: 26ch;
}

/* Belt and braces: re-assert the hero headline at a specificity that beats
   any future `main#main h1` rule someone adds without reading the above. */
main#main h1.np-hero__title {
    color: var(--np-cream) !important;
    font-size: clamp(44px, 8.5vw, 92px) !important;
    line-height: .98 !important;
    max-width: 18ch;
}

main#main h1.np-hero__title em {
    color: var(--np-sage-light) !important;
}

/* Body copy inside description / tabs */
main#main .container p,
main#main .container li {
    font-family: var(--np-body);
    font-weight: 300;
    line-height: 1.75;
    color: var(--np-muted);
}

main#main .container h2,
main#main .container h3 {
    font-family: var(--np-display) !important;
    font-weight: 400 !important;
    color: var(--np-ink) !important;
}

/* Tabs (description / reviews) */
#review-tab,
[id$="-tab"] {
    font-family: var(--np-body) !important;
}

main#main .border-b.border-zinc-200 {
    border-bottom-color: var(--np-sage-hair) !important;
}

/* Quantity changer */
main#main [class*="border-zinc-200"][class*="rounded"] {
    border-color: var(--np-sage-hair) !important;
}

/* Colour swatches keep their own colours; just square the ring */
main#main .rounded-full[class*="h-[30px]"] {
    box-shadow: 0 0 0 1px var(--np-sage-hair);
}

/* --------------------------------------------------------------------------
   11. Listing pages — breadcrumbs, toolbar, filters, pagination
   -------------------------------------------------------------------------- */

/* Breadcrumb trail */
nav[aria-label="Breadcrumb"] a,
.breadcrumb a,
main#main ol[class*="flex"] a {
    font-family: var(--np-body);
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--np-muted) !important;
    text-decoration: none;
}

nav[aria-label="Breadcrumb"] a:hover,
main#main ol[class*="flex"] a:hover {
    color: var(--np-forest) !important;
}

/* Category page heading */
main#main .container > h1,
main#main .container > h2 {
    font-family: var(--np-display) !important;
    font-weight: 400 !important;
}

/* Filter sidebar + toolbar chrome */
main#main select,
main#main input[type="text"],
main#main input[type="email"],
main#main input[type="number"],
main#main textarea {
    font-family: var(--np-body);
    border-radius: var(--np-radius) !important;
    border-color: var(--np-sage-hair) !important;
    background-color: var(--np-white);
}

main#main select:focus,
main#main input:focus,
main#main textarea:focus {
    border-color: var(--np-sage) !important;
    outline: none;
}

/* Pagination */
main#main [class*="rounded"][class*="bg-navyBlue"] {
    background-color: var(--np-forest) !important;
    border-radius: var(--np-radius) !important;
}

/* Any remaining navyBlue text from the default theme */
.text-navyBlue { color: var(--np-forest) !important; }

/* Bagisto's warm-orange section backgrounds → cream */
.bg-lightOrange { background-color: var(--np-cream-deep) !important; }

/* --------------------------------------------------------------------------
   12. Motion + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .np-collection:hover .np-collection__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Legacy compat
   The previous homepage used .nursery-* classes. The new home/index.blade.php
   uses .np-*. These rules keep the old markup on-palette if any cached page or
   CMS block still renders it, so there is no broken intermediate state.
   -------------------------------------------------------------------------- */

.nursery-hero {
    background-color: var(--np-forest-deep) !important;
    padding: clamp(64px, 9vw, 112px) var(--np-gutter) !important;
    text-align: start !important;
}

.nursery-hero h1 {
    font-family: var(--np-display);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 72px);
    line-height: 1.02;
    color: var(--np-cream);
}

.nursery-hero p { color: rgba(250, 248, 243, .8); font-weight: 300; }

.nursery-hero a.nursery-btn {
    background-color: transparent;
    color: var(--np-cream);
    border-bottom: 1px solid rgba(250, 248, 243, .45);
    border-radius: 0;
    padding: 0 0 8px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nursery-badges,
.nursery-trust { background-color: var(--np-cream-deep) !important; }

.nursery-cat-card {
    background-color: var(--np-white) !important;
    border: 1px solid var(--np-sage-hair);
    border-radius: var(--np-radius) !important;
}

.nursery-cat-card h3,
.nursery-trust-grid h3 {
    font-family: var(--np-display);
    font-weight: 400;
}

/* Emoji icons in the legacy markup — hide rather than show 💩 for Manures */
.nursery-cat-card .icon,
.nursery-badge .badge-icon { display: none !important; }

