/* Storefront pages that sit outside the one-page home layout (shop, cart, checkout, account). */

.inner-spacer { height: var(--header-h, 90px); }

.page-head { padding: 2.2rem 0 1.4rem; }
.page-head h1 { font-family: var(--ff-head); color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; }
.page-head p { color: var(--muted); margin: .4rem 0 0; }

.store-section { padding: 1rem 0 4rem; }
.store-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; }
.store-card h2, .store-card h3 { font-family: var(--ff-head); font-size: 1.15rem; color: var(--ink); margin-bottom: 1rem; }

.shop-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .shop-layout { grid-template-columns: 1fr; } }
.shop-side .list-group-item { border: 0; padding: .45rem 0; background: none; color: var(--body); }
.shop-side .list-group-item.active { color: var(--navy-800); font-weight: 600; background: none; }

.product-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 767.98px) { .product-page { grid-template-columns: 1fr; } }
.product-page__media { background: var(--tint); border-radius: 16px; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.product-page__media img { width: 100%; height: 100%; object-fit: cover; }
.product-page__media.is-contain img { object-fit: contain; padding: 1rem; background: #fff; }
.product-page__price { font-family: var(--ff-head); font-size: 1.8rem; color: var(--navy-800); }
.product-page__price small { color: var(--muted); font-size: 1rem; }
.product-page__price s { color: var(--muted); font-size: 1.1rem; margin-left: .5rem; }
.product-page .qv-specs { margin: 1rem 0; }

.cart-table img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.cart-table td { vertical-align: middle; }

.summary-row { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--body); }
.summary-row.total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .8rem; font-weight: 700; color: var(--ink); font-size: 1.1rem; }

.pay-option { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; cursor: pointer; }
.pay-option input { margin-top: .3rem; }
.pay-option:has(input:checked) { border-color: var(--navy-700); background: var(--tint); }

.auth-card { max-width: 440px; margin: 0 auto; }
.status-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; background: var(--tint); color: var(--navy-800); text-transform: capitalize; }
.status-badge.paid, .status-badge.delivered { background: #e3f6ea; color: #17673a; }
.status-badge.failed, .status-badge.cancelled { background: #fde8e8; color: #9b1c1c; }

.cms-content { max-width: 820px; color: var(--body); line-height: 1.75; }
.cms-content h2, .cms-content h3 { font-family: var(--ff-head); color: var(--ink); margin-top: 1.6rem; }

/* ---- Shop & category pages ---- */
.shop-banner { position: relative; background-size: cover; background-position: center; color: #fff; }
.shop-banner__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,15,44,.82), rgba(5,15,44,.35)); }
.shop-banner__inner { position: relative; padding: 3.2rem 12px 3rem; }
.shop-banner h1 { font-family: var(--ff-head); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: .4rem 0 .5rem; color: #fff; }
.shop-banner p { max-width: 560px; margin: 0; color: rgba(255,255,255,.88); }
.shop-crumbs { font-size: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; opacity: .9; }
.shop-crumbs a { color: #fff; text-decoration: none; }
.shop-crumbs a:hover { text-decoration: underline; }

/* Grows with the number of categories: fits its content, wraps onto more rows, never scrolls out of sight. */
.shop-tabs { display: flex; flex-wrap: wrap; gap: .4rem; width: fit-content; max-width: 100%; overflow: visible; border-radius: 28px; margin: 1.6rem 0 1rem; }
.shop-tabs .pill { text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.pill__n { font-size: .72rem; opacity: .7; }

.shop-side { position: sticky; top: calc(var(--header-h, 90px) + 12px); }
@media (max-width: 991.98px) { .shop-side { position: static; } }
.shop-filters { display: flex; flex-direction: column; gap: 1rem; }
.shop-filters__title { font-family: var(--ff-head); font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.shop-filters__group { display: flex; flex-direction: column; gap: .35rem; }
.shop-filters__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.shop-filters .shop-search { width: 100%; }
.shop-filters .form-select, .shop-filters .form-control { width: 100%; }
.shop-filters__price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.shop-filters__stock { margin: 0; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.shop-filters__stock .form-check-input { margin: 0; float: none; }
.shop-filters__actions { display: flex; align-items: center; gap: .5rem; }
.shop-filters__actions .btn-navy { flex: 1; }
.shop-count { color: var(--muted); font-size: .9rem; margin: .4rem 0 1.2rem; }
.shop-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.shop-empty i { font-size: 2.2rem; }

/* Anchors reached from another page (e.g. /about#why) must clear the fixed header. */
#about, #why, #contact { scroll-margin-top: var(--header-h, 90px); }

/* Fail-safe for non-home pages: if the page script ever fails, fade-in sections still appear after 4s
   instead of staying invisible. (The home page keeps its own scroll-reveal behaviour.) */
@keyframes nk-reveal-failsafe { to { opacity: 1; transform: none; } }
body.page-inner [data-reveal]:not(.is-in) { animation: nk-reveal-failsafe .4s ease 4s forwards; }

/* Product image is a link to the product page */
.p-media__link { display: block; width: 100%; height: 100%; }