/* ============================================================
   Storefront interactions: tile action chips, cart drawer,
   and the product-detail lightbox.
   Loaded on every page from includes/header.php.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tile action chips (wishlist + quick add)
   Hidden until hover on pointer devices so browsing stays calm;
   always visible where there is no hover, which is keyed to the
   input device rather than a screen width so tablets work too.
   Targets are 44px to meet WCAG 2.2 AA (2.5.8).
   ------------------------------------------------------------ */
.tile-actions {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity .3s ease, right .3s ease;
}

/* Every card type that hosts .tile-actions must reveal it on hover. Adding a
   new tile surface means adding its class here. */
.shop-card:hover .tile-actions,
.shop-card:focus-within .tile-actions,
.h-arrival:hover .tile-actions,
.h-arrival:focus-within .tile-actions,
.h-sig-card:hover .tile-actions,
.h-sig-card:focus-within .tile-actions {
    opacity: 1;
    right: 10px;
}

.tile-chip {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 246, 231, .94);
    color: var(--brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 14px rgba(57, 37, 23, .16);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.tile-chip:hover { background: var(--maroon); color: var(--parchment); transform: scale(1.06); }
.tile-chip:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
.tile-chip.on { background: var(--maroon); color: var(--parchment); }
.tile-chip.on svg { fill: currentColor; }
.tile-chip[disabled] { opacity: .45; cursor: not-allowed; }
.tile-chip.is-busy { opacity: .6; pointer-events: none; }

/* Without hover the chips must be permanently reachable. */
@media (hover: none) {
    .tile-actions { opacity: 1; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tile-actions { transition: none; }
    .tile-chip { transition: none; }
    .tile-chip:hover { transform: none; }
}

/* ------------------------------------------------------------
   2. Cart drawer
   ------------------------------------------------------------ */
.cart-drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }
.cart-drawer.open { visibility: visible; pointer-events: auto; }

.cart-drawer-scrim {
    position: absolute; inset: 0;
    background: rgba(57, 37, 23, .42);
    opacity: 0;
    transition: opacity .35s ease;
}
.cart-drawer.open .cart-drawer-scrim { opacity: 1; }

.cart-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--parchment);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
.cart-drawer.open .cart-drawer-panel { transform: translateX(0); }

.cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--line);
}
.cart-drawer-title {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
    color: var(--ink); margin: 0;
}
.cart-drawer-close {
    background: none; border: 0; cursor: pointer;
    font-size: 1.8rem; line-height: 1; color: var(--muted);
    width: 44px; height: 44px;
}
.cart-drawer-close:hover { color: var(--maroon); }
.cart-drawer-close:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

.cart-drawer-note {
    margin: 0; padding: 12px 24px 0;
    font-family: var(--display); font-size: .72rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk);
}
.cart-drawer-note:empty { display: none; }

.cart-drawer-items {
    list-style: none; margin: 0;
    padding: 16px 24px; overflow-y: auto; flex: 1;
}
.cart-drawer-line { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-drawer-line:last-child { border-bottom: 0; }
.cart-drawer-thumb { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream); display: block; }
.cart-drawer-name { font-family: var(--serif); font-size: .98rem; color: var(--ink); margin: 0 0 4px; line-height: 1.35; }
.cart-drawer-name a { color: inherit; text-decoration: none; }
.cart-drawer-name a:hover { color: var(--maroon); }
.cart-drawer-qty { font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.cart-drawer-price { font-family: var(--serif); color: var(--maroon); }
.cart-drawer-empty { font-family: var(--sans); color: var(--muted); text-align: center; padding: 40px 0; }

.cart-drawer-foot { border-top: 1px solid var(--line); padding: 18px 24px 24px; }
.cart-drawer-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 6px;
}
.cart-drawer-total strong { color: var(--maroon); font-size: 1.2rem; }
.cart-drawer-meta { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: 0 0 14px; }
.cart-drawer-checkout { display: block; text-align: center; width: 100%; }
.cart-drawer-continue {
    display: block; text-align: center; margin-top: 8px;
    /* Padded to a 24px target height for WCAG 2.5.8. */
    padding: 12px 8px;
    font-family: var(--display); font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brown); text-decoration: none;
}
.cart-drawer-continue:hover { color: var(--maroon); }

@media (prefers-reduced-motion: reduce) {
    .cart-drawer-scrim, .cart-drawer-panel { transition: none; }
}

/* ------------------------------------------------------------
   3. Product lightbox
   Sarees at this price are bought on thread detail, so the main
   image opens full-screen rather than relying on hover zoom,
   which touch devices cannot use at all.
   ------------------------------------------------------------ */
.pdp-media.has-images { cursor: zoom-in; }
.pdp-media video { cursor: auto; }

.lightbox { position: fixed; inset: 0; z-index: 140; display: none; }
.lightbox.open { display: block; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(28, 18, 11, .92); }

.lightbox-figure {
    position: absolute; inset: 0;
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 72px;
}
.lightbox-img {
    /* Fill the figure and let object-fit letterbox, rather than relying on
       max-width/max-height, which left portrait images small on phones. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-out;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255, 246, 231, .92);
    border: 0; border-radius: 50%;
    width: 44px; height: 44px;
    color: var(--brown);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--maroon); color: var(--parchment); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox-count {
    position: absolute; bottom: 20px; left: 0; right: 0;
    text-align: center;
    font-family: var(--display); font-size: .72rem;
    letter-spacing: .18em; color: rgba(255, 246, 231, .75);
}

@media (max-width: 700px) {
    /* Reclaim the screen: keep clear of the close button up top and the
       counter below, but drop the wide side padding. */
    .lightbox-figure { padding: 56px 8px 40px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}


.price-tax-note{font-size:12px;color:var(--muted);margin:8px 0 18px}.pdp-details{border-block:1px solid var(--line);padding:14px 0;margin:20px 0}.pdp-details summary{cursor:pointer;font-weight:600}.pdp-details p{font-size:14px;line-height:1.7}.purchase-review{padding:22px;border:1px solid var(--line);margin:18px 0;background:var(--cream)}.purchase-review label{display:block;margin:12px 0}.purchase-review input,.purchase-review select,.purchase-review textarea{display:block;width:100%;max-width:650px}.purchase-review textarea{min-height:110px}.collection-intro{max-width:850px;line-height:1.8;margin:20px 0;color:var(--muted)}