/* ==========================================================================
   Aaradhyaa Tanaya — Collections / Shop-All page (luxury redesign)
   Page-scoped on purpose: loaded only when $page === 'collections', so
   nothing here can affect the homepage, product page, wishlist or cart.
   Reuses design tokens (--cream, --gold, --maroon, --ink, --serif, etc.)
   already defined in style.css — no palette is duplicated here.
   ========================================================================== */

/* ---- Masthead — full-bleed image with text overlay ----
   Image fills the entire section; text floats on the left behind a
   cream-to-transparent gradient so it stays legible at all widths. */
.shop-masthead {
    position: relative; overflow: hidden;
    background: var(--cream); border-bottom: 1px solid rgba(180,122,35,.18);
    min-height: clamp(260px, 32vw, 380px);
    display: flex; flex-direction: column; justify-content: center;
}
.shop-masthead-inner {
    display: block;
    padding: 60px 24px 64px;
}
.shop-masthead-text { max-width: 560px; position: relative; z-index: 1; }
.shop-breadcrumb { font-family: var(--display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.shop-breadcrumb a { color: var(--muted); text-decoration: none; }
.shop-breadcrumb a:hover { color: var(--maroon); }
.shop-eyebrow { font-family: var(--display); letter-spacing: .18em; font-size: .72rem; text-transform: uppercase; color: var(--maroon); margin: 0 0 8px; text-shadow: 0 1px 8px rgba(247,235,213,1), 0 0 20px rgba(247,235,213,.9); font-weight: 600; }
.shop-heading { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: clamp(3rem, 3.4vw, 3.5rem); line-height: 1.05; margin: 0 0 14px; text-shadow: 0 1px 8px rgba(247,235,213,.6); }
.shop-lede { font-family: var(--sans); font-size: 1.05rem; color: var(--ink); max-width: 480px; margin: 0; line-height: 1.6; text-shadow: 0 1px 6px rgba(247,235,213,.7); font-weight: 500; }

/* Image: absolute, fills the full section behind the text */
.shop-masthead-visual {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.shop-masthead-visual picture, .shop-masthead-visual img { display: block; width: 100%; height: 100%; }
.shop-masthead-visual img { object-fit: cover; object-position: center 65%; }
/* Left-to-right gradient: lighter cream so saree colours read true */
.shop-masthead-visual::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(247,235,213,.82) 0%,
        rgba(247,235,213,.65) 22%,
        rgba(247,235,213,.28) 42%,
        rgba(247,235,213,.04) 60%,
        rgba(247,235,213,0)   72%);
}
@media (max-width: 768px) {
    .shop-masthead-inner { padding: 40px 22px 44px; }
    .shop-heading { font-size: clamp(2.25rem, 8vw, 2.625rem); }
    .shop-masthead-visual::before {
        background: linear-gradient(180deg,
            rgba(247,235,213,.82) 0%,
            rgba(247,235,213,.70) 40%,
            rgba(247,235,213,.50) 65%,
            rgba(247,235,213,.25) 100%);
    }
}

/* ---- Quick collection tabs ---- */
.shop-tabs { border-bottom: 1px solid var(--line); background: var(--parchment); }
.shop-tabs-inner {
    display: flex; gap: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 16px 24px;
}
.shop-tabs-inner::-webkit-scrollbar { display: none; }
.shop-tabs a {
    font-family: var(--display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brown); text-decoration: none; white-space: nowrap; padding-bottom: 6px;
    border-bottom: 2px solid transparent; flex: 0 0 auto;
}
.shop-tabs a:hover { color: var(--maroon); }
.shop-tabs a.active { color: var(--maroon); border-bottom-color: var(--gold-dk); }

/* ---- Toolbar ---- */
.shop-section { padding: 28px 0 80px; }
.shop-toolbar {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    min-height: 58px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.shop-count { font-family: var(--sans); font-size: .88rem; color: var(--muted); }
.shop-filters-btn {
    display: inline-flex; align-items: center; gap: 8px; background: transparent; cursor: pointer;
    border: 1px solid var(--line); color: var(--ink); font-family: var(--display); font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; min-height: 44px;
}
.shop-filters-btn:hover { border-color: var(--gold-dk); color: var(--gold-dk); }
.shop-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.shop-sort select {
    font-family: var(--sans); font-size: .85rem; color: var(--ink); background: var(--parchment);
    border: 1px solid var(--line); padding: 9px 10px; min-height: 44px; cursor: pointer;
}
.shop-trustline { text-align: center; font-family: var(--display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; }

/* ---- Active filter chips ---- */
.shop-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; align-items: center; }
.shop-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--cream); color: var(--brown);
    border: 1px solid var(--gold); font-family: var(--sans); font-size: .78rem; padding: 6px 12px;
    text-decoration: none; border-radius: 2px;
}
.shop-chip:hover { border-color: var(--maroon); color: var(--maroon); }
.shop-chip-clear, .shop-clear-link {
    font-family: var(--display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--maroon); text-decoration: underline; text-underline-offset: 3px;
}
.shop-clear-link-lg { font-size: .78rem; display: inline-block; margin-top: 16px; }

/* ---- Layout: sidebar (desktop) / drawer (mobile) ---- */
.shop-layout { display: block; margin-top: 24px; }
.shop-filters { display: none; }
.shop-grid-wrap { width: 100%; }

@media (min-width: 1025px) {
    .shop-layout.filters-open { display: grid; grid-template-columns: 272px 1fr; gap: 36px; align-items: start; }
    .shop-layout.filters-open .shop-filters { display: block; position: sticky; top: 24px; }
    .shop-filters-head, .shop-filters-sticky { display: none; }
}

.shop-filters-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
    font-family: var(--display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.shop-filters-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; width: 44px; height: 44px; }
.shop-filters-close:hover { color: var(--maroon); }
.shop-filters-body { padding: 6px 20px 20px; overflow-y: auto; }

.shop-fgroup { border-bottom: 1px solid var(--line); padding: 16px 0; }
.shop-fgroup summary {
    cursor: pointer; list-style: none; font-family: var(--display); font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink); position: relative; padding-right: 20px;
}
.shop-fgroup summary::-webkit-details-marker { display: none; }
.shop-fgroup summary::after { content: '+'; position: absolute; right: 0; top: -2px; color: var(--gold-dk); font-size: 1.1rem; }
.shop-fgroup[open] summary::after { content: '\2212'; }
.shop-fgroup-body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.shop-check { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .88rem; color: var(--brown); cursor: pointer; min-height: 22px; }
.shop-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--maroon); cursor: pointer; flex: 0 0 auto; }
.shop-check:hover span { color: var(--maroon); }
.shop-check-swatch .shop-swatch-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }

.shop-filters-sticky { display: flex; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--parchment); }
.shop-filters-sticky .shop-clear-link { display: flex; align-items: center; padding: 0 6px; }
.shop-show-btn {
    flex: 1; background: var(--wine); color: var(--cream); border: 0; font-family: var(--display);
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: 14px; cursor: pointer; min-height: 44px;
}
.shop-show-btn:hover { background: var(--maroon); }

@media (max-width: 1024px) {
    .shop-layout.filters-open .shop-filters {
        display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
        background: var(--parchment); z-index: 60; box-shadow: -20px 0 50px rgba(57,37,23,.25);
        transform: translateX(0); animation: shopDrawerIn .22s ease;
    }
    .shop-filters-body { flex: 1; }
}
@keyframes shopDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Backdrop: driven purely by body.shop-no-scroll (set in JS exactly when the
   drawer is open on a viewport <=1024px) since the backdrop element is a
   page-level sibling, not a DOM sibling of .shop-layout. */
.shop-backdrop { display: none; position: fixed; inset: 0; background: rgba(57,37,23,.4); z-index: 55; }
@media (max-width: 1024px) {
    body.shop-no-scroll { overflow: hidden; }
    body.shop-no-scroll .shop-backdrop { display: block; }
}

/* ---- Product grid ---- */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 1279px) and (min-width: 1025px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) and (min-width: 769px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 768px) { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 340px) { .shop-grid { grid-template-columns: 1fr; } }

/* ---- Product card ---- */
.shop-card { position: relative; display: flex; flex-direction: column; }
.shop-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.shop-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .45s ease; }
.shop-card-img-primary { opacity: 1; z-index: 1; }
.shop-card-img-secondary { opacity: 0; z-index: 2; }
.shop-card:hover .shop-card-img-primary { opacity: 0; }
.shop-card:hover .shop-card-img-secondary { opacity: 1; }
.shop-card:hover .shop-card-img { transform: scale(1.03); }
.shop-card-placeholder { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(57,37,23,.12); }

.shop-badge {
    position: absolute; top: 14px; left: 14px; z-index: 4;
    font-family: var(--display); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 10px; color: var(--cream);
}
.shop-badge-new  { background: var(--espresso, var(--ink)); }
.shop-badge-save { background: var(--maroon); }
.shop-badge-out  { background: rgba(57,37,23,.82); }

.shop-card-view {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(87,15,37,.92); color: var(--cream);
    font-family: var(--display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: 0; transform: translateY(100%); transition: opacity .25s ease, transform .25s ease;
}
.shop-card:hover .shop-card-view { opacity: 1; transform: translateY(0); }

/* Tile action chips now live in assets/css/storefront.css (.tile-actions). */

.shop-card-body { padding: 16px 2px; }
.shop-card-weave { font-family: var(--display); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); margin: 0 0 6px; }
.shop-card-name {
    font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 6px; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
}
.shop-card-name a { color: inherit; text-decoration: none; }
.shop-card-spec { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: 0 0 8px; }
.shop-card-price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.shop-card-price .now { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--maroon); }
.shop-card-price .was { font-family: var(--sans); font-size: .82rem; color: var(--muted); text-decoration: line-through; }
.shop-card-stretch { position: absolute; inset: 0; z-index: 1; }

.shop-card.is-out .shop-card-img { filter: grayscale(30%) brightness(.9); }
.shop-card.is-out .shop-card-price .now { color: var(--muted); }
.shop-card.is-out .shop-card-view { display: none; }

@media (max-width: 768px) {
    .shop-card-name { font-size: 1rem; }
    .shop-card-view { display: none; } /* hover-only affordance; whole card is already a real link on touch */
}

/* ---- Empty state ---- */
.shop-empty { text-align: center; padding: 70px 20px; }
.shop-empty h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 1.6rem; margin: 0 0 10px; }
.shop-empty p { font-family: var(--sans); color: var(--muted); margin: 0; }