/* Natural Carpet Company layer: J3 header/footer/homepage arrangement on the natural template. */

:root {
    --nc-nav-bg: #3a3f45;
    --nc-footer-bg: #f4f5f7;
    --nc-ink: #202324;
    --nc-muted-ink: #4b5159;
}

/* Header */
/* Sticky like the J3 .site-subnav: the logo row scrolls away and .nc-mainnav pins to the top.
   --nc-header-top-h is measured by template.js; 72px is the desktop fallback. */
.nc-header { position: sticky; top: calc(-1 * var(--nc-header-top-h, 72px)); z-index: 1030; background: #fff; }
.nc-header-top { border-bottom: 1px solid #e6e7ea; }
.nc-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 58px;
    padding-block: .35rem;
}
.nc-header-search { justify-self: start; width: 100%; max-width: 260px; }
.nc-header-search form { margin: 0; }
.nc-header-search .form-control,
.nc-mobilenav .form-control { font-size: .8125rem;}
.nc-logo { justify-self: center; display: block; }
.nc-logo img { display: block; width: auto; max-width: 100%; height: 60px; }
.nc-header-icons { justify-self: end; display: flex; align-items: center; gap: .5rem; }

.nc-icon-menu, .nc-header-icons ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nc-header-icons li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nc-ink);
    text-decoration: none;
}
.nc-header-icons li a [class^="fa-"], .nc-header-icons li a [class*=" fa-"] { font-size: 1.1rem; }
.nc-header-icons li a:hover, .nc-header-icons li a:focus-visible { color: var(--bs-primary); }

/* mod_j2commerce_advancedcart_toggle sits alongside the header-icons menu items
   (module output, not a menu link) — align its icon color/size/hover with its
   .nc-header-icons li a siblings rather than the plugin's own default look. */
.nc-header-icons .j2c-cart-toggle { padding: 0; color: var(--nc-ink); font-size: 1.1rem; }
.nc-header-icons .j2c-cart-toggle:hover, .nc-header-icons .j2c-cart-toggle:focus-visible { color: var(--bs-primary); }

/* The module's own default badge (top:0;right:0;transform:translate(25%,-25%);
   20x20px) assumes a much bigger button box (its usual home is a 44px .btn-icon).
   Here the icon-only button shrinks to the glyph's own ~17.6px box, so the
   unscaled badge fully covers it. Shrink + re-anchor the badge to poke out of
   the corner instead of sitting on top of the glyph. */
.nc-header-icons .j2c-cart-toggle .j2c-cart-toggle-badge {
    top: -6px;
    right: -6px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    font-size: .625rem;
    line-height: 1rem;
    transform: none;
}

/* Optional visible label (module param show_label): match the sibling
   .nc-header-icons li a text styling. Colour and hover/focus colour are not
   redeclared here — the label has no colour of its own, so it inherits the
   .j2c-cart-toggle / .j2c-cart-toggle:hover colour already set above. The
   icon keeps its 1.1rem size from .j2c-cart-toggle (font-size doesn't
   cascade to sibling spans), so only the label needs shrinking. */
.nc-header-icons .j2c-cart-toggle-label {
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nc-mainnav { background: var(--nc-nav-bg); }
.nc-mainnav ul { display: flex; justify-content: center; gap: 2.75rem; list-style: none; margin: 0; padding: 0; }
.nc-mainnav a {
    display: block;
    padding: .75rem 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}
.nc-mainnav a:hover, .nc-mainnav a:focus-visible, .nc-mainnav .active > a { color: #fff; text-decoration: underline; text-underline-offset: .35em; }
.nc-mainnav a:focus-visible, .nc-header a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--nc-ink); }

.nc-mobilenav ul { display: block; list-style: none; padding: 0; margin: 1rem 0 0; }
.nc-mobilenav li a { display: block; padding: .6rem 0; border-bottom: 1px solid #e6e7ea; color: var(--nc-ink); text-decoration: none; font-weight: 600; }

@media (max-width: 991.98px) {
    .nc-header-row { grid-template-columns: auto 1fr; }
    .nc-logo { justify-self: start; }
    .nc-logo img { height: auto; width: 100%; max-width: 230px; }
    .nc-logo { min-width: 0; }
    .nc-header-icons { gap: .25rem; }
    .nc-header-icons ul { gap: .85rem; }
    .nc-header-icons li a { font-size: 0; gap: 0; }
    .nc-header-icons li a [class^="fa-"], .nc-header-icons li a [class*=" fa-"] { font-size: 1.1rem; }
    .nc-header-icons .j2c-cart-toggle--labelled { gap: 0; }
    .nc-header-icons .j2c-cart-toggle-label { font-size: 0; }
}

/* Homepage hero */
.nc-hero { position: relative; overflow: hidden; background: var(--nc-ink); display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 42vw, 640px); }
.nc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.nc-hero-body { position: relative; z-index: 1; width: 100%; max-width: 48rem; text-align: center; color: #fff; padding: 3rem 1rem; }
.nc-eyebrow { font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: .25rem; color: #fff; }
.nc-hero-title { font-size: clamp(2rem, 4vw, 3rem); color: #fff; text-transform: uppercase; margin-bottom: .75rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* Image tiles (homepage + featured collections) */
.nc-tiles { background: var(--nc-footer-bg); padding: 4.5rem 1.5rem; }
.nc-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.03; color: #fff; text-decoration: none; background: var(--nc-ink); }
.nc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.nc-tile:hover img, .nc-tile:focus-visible img { transform: scale(1.04); }
.nc-tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.nc-tile-body { position: absolute; inset: auto 0 2rem; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.nc-tile-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.nc-tile-link { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }

/* Featured Collections */
.nc-featured { padding: 3.5rem 0 4.5rem; background: #fff; }
.nc-featured h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.nc-lead { max-width: 34rem; margin: .5rem auto 1.25rem; color: var(--nc-muted-ink); font-size: 1.05rem; }
.nc-tabs { gap: 3.5rem; margin: 2rem 0 1.5rem; border: 0; }
.nc-tabs .nav-link { border: 0; background: none; padding: .25rem 0; color: var(--nc-ink); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid transparent; border-radius: 0; }
.nc-tabs .nav-link.active, .nc-tabs .nav-link:hover { color: var(--nc-ink); border-bottom-color: var(--bs-primary); }
.nc-tile-collection { max-width: 360px; margin-inline: auto; }

/* Footer */
.nc-footer { background: var(--nc-footer-bg); color: var(--nc-ink); padding: 3.5rem 0 1.5rem; }

/* Size comes from the module's Header Class (Advanced tab, default h6) — never fixed here. */
.nc-footer .module-title { text-transform: uppercase; color: var(--nc-ink); margin-bottom: 1rem; }
.nc-footer ul { list-style: none; padding: 0; margin: 0; }
.nc-footer li a, .nc-footer p a:not(.btn) { display: inline-block; padding: .2rem 0; color: var(--nc-ink); font-size: .8125rem; letter-spacing: .04em; text-decoration: none; }
.nc-footer li a:hover, .nc-footer p a:not(.btn):hover { color: var(--bs-primary); text-decoration: underline; }
.nc-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #c9ccd1; font-size: .75rem; }

.nc-footer-contact li a [class*="fa-"] { width: 1.1em; margin-right: .35rem; color: var(--bs-primary); }
.nc-copyright, .nc-copyright p { margin: 0; color: var(--nc-muted-ink); }
.nc-copyright a { color: var(--nc-ink); font-weight: 600; }

/* Guests browse the catalog without pricing or ordering (J3 parity: "Request Access"). */
.nc-guest .j2commerce-product-price-container,
.nc-guest .j2commerce-price-sku-container,
.nc-guest .j2commerce-addtocart-form,
.nc-guest .j2commerce-product-wishlist { display: none !important; }
.nc-request-access { text-align: center; padding: 2.5rem 1rem; }

/* Collections tag view (J3 parity): 3-up full-bleed tiles, title over a dark gradient. */
.nc-collections { padding-block: 2.5rem 4rem; }
.nc-collections-heading { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.nc-collections-heading h2 { font-size: clamp(2rem, 4vw, 3rem); text-transform: none; letter-spacing: 0; margin-bottom: .75rem; color: var(--nc-ink); }
.nc-collections-intro p { font-size: 1.0625rem; line-height: 1.5; color: var(--nc-muted-ink); margin: 0; }
.nc-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 1140px; margin: 0 auto; padding: 0; }
.nc-collection-tile {
    position: relative;
    display: block;
    aspect-ratio: 8 / 7;
    overflow: hidden;
    background: #2b2e31;
    color: #fff;
    text-decoration: none;
    transition: transform .4s ease, box-shadow .4s ease;
}
.nc-collection-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-collection-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    padding: 1.5rem 1rem 1.75rem;
    text-align: center;
    background: linear-gradient(transparent 35%, rgba(0, 0, 0, .78));
}
.nc-collection-title { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.nc-collection-cta { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding-bottom: .25rem; border-bottom: 2px solid transparent; transition: border-color .3s ease; }
.nc-collection-tile:hover, .nc-collection-tile:focus-visible { color: #fff; transform: translateY(-5px); box-shadow: 0 11px 18px 0 rgba(133, 133, 133, .36); }
.nc-collection-tile:hover .nc-collection-cta, .nc-collection-tile:focus-visible .nc-collection-cta { border-bottom-color: #b11117; }
.nc-collection-tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
@media (max-width: 991.98px) { .nc-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .nc-collection-grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .nc-collection-tile, .nc-collection-cta { transition: none; } .nc-collection-tile:hover, .nc-collection-tile:focus-visible { transform: none; } }

/* J3 parity: Fontin Sans Bold wherever the J3 site used it (natural.css / custom.css) —
 * all headings, the main nav, banner/hero titles, home + collection tile titles,
 * product titles and filter headings. The face is bold-only, so no synthetic bolding. */
:root { --font-natural: 'FontinSansRgBold', Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.hero-title,
.nc-mainnav .mod-menu a,
.nc-mobilenav .mod-menu a,
.nc-tile-title,
.nc-collection-title,
.j2commerce-product-title,
.accordion-header .accordion-button {
    font-family: var(--font-natural);
    font-synthesis: none;
}

/* Stock Rugs / tag product list (J3 parity: www.j3.naturalcarpetcompany.com/stock-rugs) —
 * collapsed filter sidebar left, centered title + intro, 4-up image tiles with the corner flag,
 * red Fontin title with the color sub-title underneath. Markup: html/com_j2commerce/templates/
 * tag_bootstrap5/default.php + default_filters.php, html/layouts/.../list/tag/item_simple.php. */
.nc-stock-list { max-width: 1140px; margin: 0 auto; padding-block: 2.5rem 4rem; }
.nc-stock-heading { text-align: center; margin-bottom: 2.25rem; }
.nc-stock-heading h1 { font-size: 2.5rem; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--nc-ink, #202324); margin-bottom: 1.25rem; }
.nc-stock-intro p { font-size: 1.25rem; line-height: 1.6; color: #4f5659; margin: 0; }
.nc-stock-col { margin-bottom: 3rem; }
.nc-stock-item { text-align: center; }
.nc-stock-image { position: relative; }
.nc-stock-image-link { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.nc-stock-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; border: 0; transition: transform .3s ease; }
.nc-stock-image-link:hover .nc-stock-img { transform: scale(1.05); }
.nc-stock-flag { box-sizing: border-box; position: absolute; z-index: 1; left: 0; bottom: 0; width: 64px; height: 64px; display: flex; place-content: center; align-items: center; color: #fff; text-transform: uppercase; transform: translate(-8px, 6px) rotate(45deg); }
.nc-stock-flag::before { content: ""; position: absolute; top: 12px; left: -33%; z-index: -1; width: 200%; height: 200%; background: #197bbd; }
.nc-stock-flag-label { position: relative; left: 2px; padding: 6px 12px 8px; font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: .5px; text-align: center; user-select: none; }
.nc-stock-details { padding-top: 1rem; }
.nc-stock-link { display: block; color: inherit; text-decoration: none; }
.nc-stock-title { font-size: 1.25rem; line-height: 1.2; font-weight: 400; text-transform: capitalize; letter-spacing: 0; color: #b11117; margin: 0; }
.nc-stock-subtitle { font-family: "Open Sans", sans-serif; font-size: .875rem; line-height: 1.5; color: #343a40; margin: 0; }
.nc-stock-link:hover .nc-stock-title, .nc-stock-link:focus-visible .nc-stock-title { text-decoration: underline; }
.nc-stock-link:focus-visible, .nc-stock-image-link:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.nc-stock-pagination { border-top: 1px solid #e6e6e6; padding-top: 1rem; margin-top: 1rem; min-height: 2rem; }
/* Sidebar: one collapsed group per row, Fontin heading, +/− glyph — no counts, no active-filter header. */
.nc-stock-sidebar .filter-accordion .accordion-item { border: 0 !important; margin-bottom: 20px; background: transparent; }
.nc-stock-sidebar .filter-accordion .accordion-button { font-family: var(--font-natural); font-synthesis: none; font-weight: 400; font-size: 1.25rem; color: #585956; text-transform: capitalize; letter-spacing: 0; background: transparent; box-shadow: none; }
.nc-stock-sidebar .filter-accordion .accordion-button:not(.collapsed) { color: #585956; }
.nc-stock-sidebar .form-check-label { font-family: "Open Sans", sans-serif; font-size: .875rem; color: #222; }
@media (min-width: 992px) {
    .nc-stock-sidebar { padding-right: 40px; }
    .nc-stock-sidebar .filter-accordion .accordion-button { padding: 10px 0; min-height: 40px; }
}
@media (max-width: 991.98px) {
    .nc-stock-list { padding-block: 1.5rem 3rem; }
    .nc-stock-sidebar { margin-bottom: 1.5rem; }
    .nc-stock-sidebar .filter-accordion .accordion-item { margin-bottom: 12px; }
    .nc-stock-sidebar .filter-accordion .accordion-button { background: #f4f7fa; padding: 10px 16px; min-height: 50px; }
    .nc-stock-sidebar .filter-accordion .accordion-body { padding: .5rem 16px .75rem; }
    .nc-stock-heading h1 { font-size: 1.75rem; }
    .nc-stock-intro p { font-size: 1rem; line-height: 1.5; max-width: 327px; margin-inline: auto; }
    .nc-stock-col { margin-bottom: 1.5rem; }
    .nc-stock-title { font-size: 1rem; }
    .nc-stock-subtitle { font-size: .6875rem; line-height: 1.1; }
}
@media (prefers-reduced-motion: reduce) { .nc-stock-img { transition: none; } .nc-stock-image-link:hover .nc-stock-img { transform: none; } }
/* J3 aligns the first filter heading with the H1; the (empty until a filter is picked) active-filter row
 * and the section's own top padding pushed both down. */
.nc-stock-list { padding-top: 0; }
.nc-stock-sidebar #j2commerce-active-filters:not(:has(.filter-chip)) { display: none; }


#j2c-drawer-body .j2c-drawer-item-controls {display:none;}

/* Header search: the button stretches to the (smaller) header input instead of setting the group height. */
.nc-header-search .rl-findbar .input-group > .btn { padding-block: 0; font-size: 1rem; line-height: 1; }

/* Header search results modal (html/mod_j2commerce_findbar/bootstrap5/default.php + js/findbar-modal.js). */
.rl-findbar-modal .j2c-findbar__panel { max-height: none; }
/* Findbar: dark search button, and the input's hover/focus/active border in the same dark (not brand red). */
/* colors.css turns .btn-dark red on hover; here it keeps Bootstrap's dark hover/active tints (15% / 10% of #202324). */
.rl-findbar .input-group > .btn-dark { --bs-btn-hover-bg: #414445; --bs-btn-active-bg: #363939; --bs-btn-hover-border-color: var(--bs-dark); --bs-btn-active-border-color: var(--bs-dark); --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb); }
.rl-findbar .j2c-findbar__input:hover,
.rl-findbar .j2c-findbar__input:focus,
.rl-findbar .j2c-findbar__input:active { border-color: var(--bs-dark); box-shadow: none; }
/*.rl-findbar .j2c-findbar__input:focus-visible { outline-color: var(--bs-dark); }*/
/* Header launcher form has no clear button, so it drops the room findbar reserves for one. */
.rl-findbar--launcher .j2c-findbar__input { padding-right: .9rem; }
.j2c-findbar__inline-pager, .j2c-findbar__panel {border: none!important;}