/*
 * New Home Furniture — supplementary styles.
 *
 * The design's own stylesheet (style.min.css) is used verbatim and is never
 * edited. This file exists only for the handful of elements a *dynamic*
 * storefront needs that a static mockup never had:
 *
 *   .filters__form / .filters__actions   the filter rail is a real GET form
 *                                        and needs an Apply control
 *   .search__results                     live search suggestions
 *   .logo__img                           stores that upload a logo image
 *   .card__add-label                     the span the add-to-cart JS swaps
 *
 * Everything below reuses the design's own custom properties, so it inherits
 * the palette, radii and shadows rather than introducing new ones. It is
 * scoped under .nhf (the theme's body class) so it can never reach the
 * existing storefront.
 *
 * No !important, no overrides of design rules — additions only.
 */

/* The filter rail became a form; keep it inert so .filters' own padding and
   the .fgroup rhythm are unchanged. */
.nhf .filters__form {
    display: block;
    margin: 0;
}

.nhf .filters__actions {
    padding: 14px 0 6px;
    border-top: 1px solid var(--line-2);
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Search drawer
   --------------------------------------------------------------------------
   The design sized this drawer for a single line of "Popular:" chips, so it is
   capped at 170px. This theme puts live product results in it, which that cap
   clipped after roughly one row. The drawer grows to fit instead and the result
   list scrolls inside it. max-height (not height) is kept so the open/close
   transition still animates. */
.nhf .search[data-open="true"] {
    max-height: min(80vh, 760px);
}

.nhf .search__results {
    margin-top: 16px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.nhf .sresult {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    transition: background .18s ease;
}

.nhf .sresult:last-child { border-bottom: 0; }

.nhf .sresult:hover,
.nhf .sresult:focus-visible {
    background: var(--cream-2);
}

.nhf .sresult__img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    background: var(--cream);
}

.nhf .sresult__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nhf .sresult__name {
    font-size: 14px;
    line-height: 1.35;
    /* Product names run long; keep every row the same height so the list
       reads as a rhythm rather than a ragged stack. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nhf .sresult__price {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--gold-strong);
}

/* Footer row linking to the full results page. */
.nhf .sresult--all {
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-strong);
    background: var(--cream-2);
    position: sticky;
    bottom: 0;
}

.nhf .sresult--all .icon { width: 15px; height: 15px; }

.nhf .search__empty {
    margin-top: 16px;
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* A store's uploaded logo stands in for the design's wordmark lockup. */
.nhf .logo__img {
    display: block;
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

/* Inline so the button's icon + label stay on one line while the label text
   is swapped to "Adding…" / "Added". */
.nhf .card__add-label { display: inline; }

/* --------------------------------------------------------------------------
   Wide listing layout (collection + search)
   --------------------------------------------------------------------------
   The design's 1120px reading column leaves the shop grid only ~840px once the
   246px filter rail and its gap are taken out, which squeezes four cards down
   to ~193px each. On listing pages the page runs edge-to-edge instead, so the
   filter rail starts near the viewport edge and the cards absorb all the extra
   width.

   Scoped to <main> on purpose: the header and footer keep the site-wide
   container so the masthead stays aligned with every other page. The gutter is
   clamped rather than removed outright so nothing touches the viewport edge on
   small screens, where the container padding is the only thing holding the
   content off the bezel. */
.nhf.template-collection main .container,
.nhf.template-search main .container {
    max-width: none;
    padding-inline: clamp(16px, 2.4vw, 44px);
}

/* Four cards across a near-full-width row get wide enough that the fixed
   246px rail starts to look thin; give it a little more room in step. */
@media (min-width: 1440px) {
    .nhf.template-collection .shop-layout,
    .nhf.template-search .shop-layout {
        grid-template-columns: 280px 1fr;
    }
}

/* --------------------------------------------------------------------------
   Single-image product gallery
   --------------------------------------------------------------------------
   .gallery is a two-column grid (78px thumb rail + stage). A product with only
   one image renders no .gallery__thumbs, so the stage fell into the 78px rail
   and the main photo shrank to thumbnail size. When the stage is the only
   child it takes the whole row instead. */
.nhf .gallery__stage:only-child {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Mobile tap highlight
   --------------------------------------------------------------------------
   Mobile Safari/Chrome paint a translucent blue box over any tapped element
   that has a click handler — visible on the burger, nav links and the drawer.
   The design never suppressed it because a static mockup is never tapped. */
.nhf a,
.nhf button,
.nhf summary,
.nhf label,
.nhf [role="tab"],
.nhf [data-nav-open],
.nhf [data-nav-close] {
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Saved-for-later state on text buttons
   --------------------------------------------------------------------------
   .card__wish and .btn--wish both have an .is-on state in the design, but
   .linkbtn — the cart's "Save for later" — does not, so toggling it changed
   nothing on screen and the state was invisible after a reload. */
.nhf .linkbtn.is-on {
    color: var(--gold-strong);
}

.nhf .linkbtn.is-on .icon {
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   Mobile nav drawer sits under its own backdrop
   --------------------------------------------------------------------------
   .nav lives inside <header class="header">, which is position:sticky with
   z-index:60 and therefore opens a stacking context. The drawer's z-index:80
   is resolved *inside* that context, so against the root it still paints at
   60 — below the sibling .backdrop at z-index:70. The result is the backdrop
   tinting the drawer itself, which reads as a washed-out grey panel instead
   of the solid white one the design intends. (The design has this too; it is
   only visible once the drawer is actually opened.)

   Lifting the header above the backdrop while the drawer is open keeps the
   page dimmed and the drawer legible. Scoped with :has(), which the design
   already relies on for .payopt. */
.nhf .header:has(.nav[data-open="true"]) {
    z-index: 90;
}

/* --------------------------------------------------------------------------
   Text fields inside a .payopt card
   --------------------------------------------------------------------------
   `.payopt input` styles the radio as a 17px circle but is not scoped to the
   radio, so every text field inside .payopt__body picked it up too. It has the
   same specificity as `.field input` (0,2,0) and sits later in the stylesheet,
   so it won, and the checkout's new-address form collapsed into a column of
   17px pills. The design has the same rule and the same collapse in its own
   checkout; it is only visible once a text field is put in that card.

   :not([type="radio"]) lifts these to 0,3,0 so the radio keeps its circle and
   everything else gets the normal field treatment back. */
.nhf .payopt input:not([type="radio"]),
.nhf .payopt select,
.nhf .payopt textarea {
    appearance: auto;
    -webkit-appearance: auto;
    width: 100%;
    height: 46px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--ink);
    flex: initial;
}

.nhf .payopt textarea {
    height: auto;
    min-height: 130px;
    padding: 14px 15px;
    line-height: 1.6;
}

.nhf .payopt input:not([type="radio"]):focus,
.nhf .payopt select:focus,
.nhf .payopt textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(185, 141, 92, .13);
}

/* The 47px indent is sized for a one-line UPI field. A whole address form
   needs the width back on a phone. */
@media (max-width: 640px) {
    .nhf .payopt__body {
        padding-left: 18px;
    }
}

/* --------------------------------------------------------------------------
   Category-neutral decorative panels
   --------------------------------------------------------------------------
   The theme's 63 bundled photographs are all furniture, so they can only be
   used by a store that sells furniture. Everywhere a decorative photo used to
   be hardcoded, the markup now prints one only when the STORE supplied it —
   a category banner, a page image — and otherwise prints nothing at all.
   These rules make "nothing at all" look deliberate rather than broken. */

/* Page hero with no store image behind it. */
.nhf .phero--plain {
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, .10), transparent 60%),
        linear-gradient(135deg, var(--brown) 0%, var(--gold-strong) 100%);
}

/* The auth split-screen's photo column. */
.nhf .auth__media {
    background:
        radial-gradient(90% 120% at 20% 10%, rgba(255, 255, 255, .12), transparent 62%),
        linear-gradient(150deg, var(--brown) 0%, var(--gold-strong) 100%);
}

/* Its caption sat over a photo and needed the scrim; without one it can simply
   sit on the gradient. */
.nhf .auth__media:not(:has(img)) .auth__quote {
    background: none;
    backdrop-filter: none;
}

/* The 404 illustration column. */
.nhf .empty__media:not(:has(img)) {
    display: none;
}

/* --------------------------------------------------------------------------
   Product actions on a narrow phone
   --------------------------------------------------------------------------
   Add to Cart, Buy Now and the wishlist heart share one flex row. At 375px
   that leaves the two real buttons about 137px each once the 50px heart and
   the gaps are taken out, and "ADD TO CART" plus its icon does not fit — the
   label wrapped onto a second line and that button grew taller than Buy Now.

   Add to Cart keeps the first row with the heart, which is small enough to sit
   beside it; Buy Now takes the row below at full width, where the primary
   action is easier to hit anyway. */
@media (max-width: 430px) {
    .nhf .pdp__actions {
        flex-wrap: wrap;
    }

    .nhf .pdp__actions .btn--wish {
        order: 2;
    }

    .nhf .pdp__actions .btn--dark {
        order: 3;
        flex: 1 1 100%;
    }

    .nhf .pdp__actions .btn {
        white-space: nowrap;
    }
}