/*
  ============================================================
  STYLESHEET: shop.css
  Stick With Sam — Shop Page
  ============================================================
  HOW TO USE:
  Link this file in shop.html with:
    <link rel="stylesheet" href="shop.css"/>

  CONTENTS:
  1.  CSS Variables (colour tokens)
  2.  Reset & Base
  3.  Background
  4.  Navigation
  5.  Hero Banner
  6.  Search & Filter Bar
  7.  Product Grid
  8.  Product Card
  9.  Product Modal
  10. Cart Drawer
  11. Toast Notifications
  12. Responsive Breakpoints
  ============================================================
*/


/* ============================================================
   1. CSS VARIABLES
   All colours, glass effects and shadows are defined here.
   Change these to retheme the entire page at once.
   ============================================================ */
:root {
    /* Brand colours — pulled from the purple gradient bg */
    --purple-deep:    #1a0a2e;       /* darkest bg tone                  */
    --purple-mid:     #5a1a8a;       /* mid purple for gradients          */
    --purple-bright:  #9b3fd4;       /* primary accent / buttons          */
    --purple-light:   #c49ef5;       /* light accent, hover states        */
    --pink:           #d45fba;       /* secondary accent                  */
    --pink-light:     #e890d4;       /* lighter pink for gradients        */
    --gold:           #F5C842;       /* price, stars, highlights          */
    --gold-dim:       rgba(245, 200, 66, 0.18); /* gold tint backgrounds  */

    /* Glassmorphism layers */
    --glass:          rgba(255, 255, 255, 0.06);  /* very subtle glass    */
    --glass-mid:      rgba(255, 255, 255, 0.12);  /* card backgrounds     */
    --glass-strong:   rgba(255, 255, 255, 0.20);  /* nav, prominent glass */
    --border:         rgba(255, 255, 255, 0.15);  /* default borders      */
    --border-bright:  rgba(255, 255, 255, 0.28);  /* highlighted borders  */

    /* Typography colours */
    --text:           #f0e8ff;                    /* primary text         */
    --text-soft:      #c8b8e8;                    /* secondary text       */
    --muted:          rgba(200, 180, 230, 0.6);   /* placeholder / meta   */

    /* Shadows & glows */
    --shadow:         0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-hover:   0 18px 50px rgba(0, 0, 0, 0.45);
    --glow:           0 0 40px rgba(155, 63, 212, 0.28);
    --glow-strong:    0 0 60px rgba(155, 63, 212, 0.4);
}


/* ============================================================
   2. RESET & BASE
   Zero out browser defaults, set box-sizing and font.
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    color: var(--text);
    overflow-x: hidden;
    /* Fallback bg colour in case the image hasn't loaded yet */
    background: var(--purple-deep);
}


/* ============================================================
   3. BACKGROUND
   The purple gradient image covers the full page.
   A dark overlay sits on top to keep text legible.
   ============================================================ */
.bg-wrap {
    position: fixed;
    inset: 0;          /* shorthand for top/right/bottom/left: 0 */
    z-index: 0;        /* sits behind everything else             */
}

.bg-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.78;     /* slightly dimmed so the overlay works    */
}

/* Dark gradient overlay — keeps text readable on the bright bg */
.bg-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            160deg,
            rgba(26, 10, 46, 0.60) 0%,
            rgba(60, 10, 90,  0.38) 40%,
            rgba(26, 10, 46, 0.72) 100%
    );
}


/* ============================================================
   5. HERO BANNER
   Short centered header at the top of the shop page.
   ============================================================ */
.hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 9rem 1.5rem 2.5rem;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem); /* fluid type: scales with viewport */
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 0.75rem;
}

/* Italic coloured word inside the headline */
.hero h1 em {
    color: var(--purple-light);
    font-style: italic;
}

.hero p {
    font-size: 0.95rem;
    color: var(--text-soft);
    max-width: 420px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
    font-weight: 300;
}


/* ============================================================
   6. SEARCH & FILTER BAR
   Sits between the hero and the product grid.
   ============================================================ */
.shop-controls {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 1160px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    flex-wrap: wrap;   /* wraps to next line on smaller screens      */
}

/* Pill-shaped search input */
.search-wrap {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass-strong);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 0.55rem 1.1rem;
}

.search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    width: 100%;
}

.search-wrap input::placeholder { color: var(--muted); }

/* Filter pill tabs row */
.filter-tabs {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tab {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--glass-mid);
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab:hover {
    background: var(--glass-strong);
    color: var(--text);
    border-color: var(--border-bright);
}

/* Active tab — gold fill */
.tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--purple-deep); /* dark text on gold for contrast       */
    font-weight: 600;
}


/* ============================================================
   7. PRODUCT GRID
   CSS Grid — auto-fills columns that are at least 220px wide.
   More columns appear automatically on wider screens.
   ============================================================ */
.shop-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.4rem;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}


/* ============================================================
   8. PRODUCT CARD
   Each sticker is a glass card with image, name, price, stars,
   a wishlist button, and an Add to Cart button.
   ============================================================ */
.product-card {
    background: var(--glass-mid);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    /* Cards animate in on render — delay staggered in JS */
    animation: fadeUp 0.5s ease both;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover), var(--glow);
    border-color: rgba(155, 63, 212, 0.45);
}

/* Staggered entrance animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Square image area at the top of each card */
.card-img-wrap {
    position: relative;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;    /* keeps it square regardless of width        */
    background: linear-gradient(135deg,
    rgba(90,  26, 138, 0.45),
    rgba(212, 95, 186, 0.25)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    transition: background 0.3s;
}

.card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.card-img-wrap:hover {
    background: linear-gradient(135deg,
    rgba(110, 40, 160, 0.55),
    rgba(220, 110, 195, 0.35)
    );
}

/* Category badge — top left of image */
.badge-tag {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(20, 5, 38, 0.72);  /* dark pill on image          */
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 3px 9px;
    color: var(--text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Gold for limited edition */
.badge-tag.limited {
    background: var(--gold);
    color: var(--purple-deep);
    border-color: var(--gold);
}

/* Purple for holographic / new */
.badge-tag.new {
    background: var(--purple-bright);
    color: #fff;
    border-color: var(--purple-bright);
}

/* Wishlist heart button — top right of image */
.wish-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(20, 5, 38, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-bright);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
    color: var(--muted);
}

.wish-btn:hover {
    background: var(--glass-strong);
    transform: scale(1.12);
}

/* Active = item is wishlisted */
.wish-btn.active { color: var(--pink-light); }

/* Text area below the image */
.card-body { padding: 1rem 1rem 0.85rem; }

.card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* "Long name…" if it overflows           */
    cursor: pointer;
}

.card-name:hover { color: var(--purple-light); }

/* Price and type on the same row */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.card-price {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gold);
}

.card-type {
    font-size: 0.72rem;
    color: var(--muted);
}

/* Star rating row */
.card-stars {
    display: flex;
    gap: 2px;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.card-stars .s       { color: rgba(200, 180, 230, 0.3); } /* empty star */
.card-stars .s.on    { color: var(--gold); }               /* filled star */

/* Add to Cart button */
.btn-cart {
    width: 100%;
    padding: 0.6rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 14px rgba(155, 63, 212, 0.3);
}

.btn-cart:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Turns green briefly when item is added */
.btn-cart.added {
    background: linear-gradient(90deg, #4aaa78, #2e8a5e);
}


/* ============================================================
   9. PRODUCT MODAL
   Full detail overlay — opens when a card is clicked.
   Two-column layout: image gallery left, info right.
   ============================================================ */

/* Dark blurred overlay behind the modal */
.modal-overlay {
    display: none;              /* hidden by default; JS adds .open   */
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(10, 2, 22, 0.72);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-overlay.open { display: flex; }

/* The modal box itself */
.modal {
    background: rgba(30, 10, 55, 0.82);
    backdrop-filter: blur(32px);
    border: 1px solid var(--border-bright);
    border-radius: 28px;
    max-width: 820px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6), var(--glow-strong);
    animation: modalIn 0.3s ease;
    position: relative;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.94) translateY(18px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ✕ close button */
.modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}

.modal-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Two-column layout inside the modal */
.modal-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ── Left column: image gallery ── */
.modal-gallery { padding: 2rem; }

/* Large main image */
.modal-main-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(135deg,
    rgba(90, 26, 138, 0.5),
    rgba(212, 95, 186, 0.3)
    );
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem;
    margin-bottom: 0.85rem;
}

/* Thumbnail strip below main image */
.modal-thumbs { display: flex; gap: 0.6rem; }

.thumb {
    width: 58px; height: 58px;
    border-radius: 10px;
    background: linear-gradient(135deg,
    rgba(90, 26, 138, 0.4),
    rgba(212, 95, 186, 0.25)
    );
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.thumb.active      { border-color: var(--gold); }
.thumb:hover       { border-color: var(--purple-light); }

/* ── Right column: product info ── */
.modal-info { padding: 2rem 2rem 2rem 0.5rem; }

/* Category tag pill */
.modal-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--gold-dim);
    color: var(--gold);
    border: 1px solid rgba(245, 200, 66, 0.3);
    border-radius: 99px;
    padding: 3px 11px;
    margin-bottom: 0.7rem;
}

.modal-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.modal-artist {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

/* Star rating row
.modal-stars {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-stars span       { font-size: 1rem; color: rgba(200,180,230,0.3); }
.modal-stars span.on    { color: var(--gold); }
.modal-stars .rating-text {
    font-size: 0.78rem;
    color: var(--muted);
    margin-left: 6px;
}*/

.modal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 1rem;
}

.modal-desc {
    font-size: 0.83rem;
    color: var(--text-soft);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* "SIZE" / "QUANTITY" labels */
.option-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
}

/* Size chip selector */
.size-opts { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }

.size-opt {
    padding: 5px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--glass-mid);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}

.size-opt:hover        { border-color: var(--purple-light); color: var(--text); }
.size-opt.active       { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }

/* Quantity stepper */
.qty-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.qty-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    font-size: 1.1rem;
    color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.qty-btn:hover { background: rgba(255, 255, 255, 0.25); }

.qty-val {
    font-weight: 600;
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
    color: var(--text);
}

/* Action buttons row (Add to Cart + Wishlist) */
.modal-actions { display: flex; gap: 0.75rem; }

.btn-modal-cart {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 6px 20px rgba(155, 63, 212, 0.4);
}

.btn-modal-cart:hover { opacity: 0.85; transform: translateY(-1px); }

.btn-modal-wish {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--glass-strong);
    border: 1.5px solid var(--border-bright);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    color: var(--muted);
}

.btn-modal-wish:hover  { background: rgba(255, 255, 255, 0.22); }
.btn-modal-wish.active { color: var(--pink-light); }

/* Detail chips row (material, size, etc.) */
.details-row {
    border-top: 1px solid var(--border);
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.details-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
}

.detail-chip {
    display: inline-block;
    font-size: 0.72rem;
    background: var(--glass-mid);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 3px 10px;
    color: var(--text-soft);
    margin: 2px 3px 2px 0;
}


/* ============================================================
   10. CART DRAWER
   Slides in from the right. Contains item list + total.
   ============================================================ */
.cart-drawer {
    position: fixed;
    top: 0; right: -400px; /* hidden off-screen by default           */
    height: 100vh;
    width: 360px;
    z-index: 600;
    background: rgba(20, 5, 38, 0.88);
    backdrop-filter: blur(32px);
    border-left: 1px solid var(--border-bright);
    box-shadow: -12px 0 60px rgba(0, 0, 0, 0.5);
    transition: right 0.32s ease;
    display: flex;
    flex-direction: column;
}

/* .open class added by JS to slide the drawer in */
.cart-drawer.open { right: 0; }

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.cart-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--text);
}

.cart-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.2s;
}

.cart-close:hover { color: var(--text); }

/* Scrollable list of items */
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Individual cart item row */
.cart-item {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    background: var(--glass-mid);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem;
    transition: border-color 0.2s;
}

.cart-item:hover { border-color: rgba(155, 63, 212, 0.35); }

.cart-item-img {
    font-size: 1.8rem;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(90,26,138,0.3), rgba(212,95,186,0.2));
    border-radius: 10px;
    flex-shrink: 0;
}

.cart-item-info { flex: 1; }

.cart-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.cart-item-price {
    font-size: 0.78rem;
    color: var(--gold);
    font-weight: 500;
}

.cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    transition: color 0.2s;
}

.cart-item-remove:hover { color: var(--pink-light); }

/* Footer: total + checkout */
.cart-footer {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cart-total-label { font-size: 0.85rem; color: var(--muted); }

.cart-total-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.btn-checkout {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 6px 20px rgba(155, 63, 212, 0.4);
}

.btn-checkout:hover { opacity: 0.88; }

.cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.7;
}


/* ============================================================
   11. TOAST NOTIFICATIONS
   Small pill messages that appear briefly at the bottom.
   JS creates and removes them automatically.
   ============================================================ */
.toast-wrap {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none; /* clicks pass through to the page below   */
}

.toast {
    background: rgba(30, 10, 55, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-bright);
    border-radius: 99px;
    padding: 0.6rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow), var(--glow);
    /* Fades in then fades out automatically */
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2s both;
}

@keyframes toastIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }


/* ============================================================
   12. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet / small desktop */
@media (max-width: 680px) {
    /* Modal stacks vertically on small screens */
    .modal-inner        { grid-template-columns: 1fr; }
    .modal-info         { padding: 0 1.5rem 1.5rem; }
    .modal-gallery      { padding-bottom: 0.5rem; }
    /* Cart drawer goes full width */
    .cart-drawer        { width: 100%; }
}

/* Mobile */
@media (max-width: 480px) {
    nav { padding: 0.85rem 1.25rem; gap: 0.75rem; }
    nav a.nav-link  { display: none; } /* hide text links, keep icons */
    .btn-nav-cta    { display: none; }
    .hero           { padding-top: 6rem; }
}


/* ============================================================
   COLLECTION DROPDOWN
   ============================================================ */
.shop-controls {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.collection-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.collection-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.collection-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.collection-select {
    appearance: none;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 0.55rem 2.5rem 0.55rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    outline: none;
    min-width: 240px;
    transition: border-color 0.2s, background 0.2s;
}

.collection-select:focus {
    border-color: var(--purple-bright);
    background: rgba(255, 255, 255, 0.15);
}

/* Dropdown option colours — browser limited but this helps */
.collection-select option {
    background: #1a0a2e;
    color: var(--text);
}

.select-arrow {
    position: absolute;
    right: 0.85rem;
    color: var(--muted);
    font-size: 0.8rem;
    pointer-events: none;
}

/* Collection heading below the dropdown */
.collection-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--text);
    font-weight: 700;
}

.collection-heading em {
    font-style: italic;
    color: var(--purple-light);
}


/* ============================================================
   COMING SOON PANEL
   ============================================================ */
.coming-soon-panel {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 2rem auto 4rem;
    padding: 0 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.cs-emoji {
    font-size: 4rem;
    display: block;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.cs-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text);
    line-height: 1.2;
}

.cs-desc {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.75;
    max-width: 420px;
    font-weight: 300;
}

.cs-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--gold-dim);
    color: var(--gold);
    border: 1px solid rgba(245, 200, 66, 0.3);
    border-radius: 99px;
    padding: 4px 14px;
}

.cs-hint {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.6;
}

.modal-qty-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.qty-btn:hover { background: rgba(255, 255, 255, 0.22); }

.qty-val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    min-width: 20px;
    text-align: center;
}

.btn-add-modal {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 6px 24px rgba(155, 63, 212, 0.4);
}

.btn-add-modal:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.modal-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.detail-chip {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-soft);
}

.card-finish {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}

/* ── CART DRAWER OVERRIDES ── */
#cart-drawer .ci-remove {
    width: 24px !important;
    height: 24px !important;
    min-width: unset !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
    transition: color 0.2s, background 0.2s !important;
}

#cart-drawer .ci-remove:hover {
    color: var(--red) !important;
    background: var(--red-dim) !important;
    border-color: var(--red) !important;
}

#cart-drawer .ci-controls button {
    width: 24px !important;
    height: 24px !important;
    min-width: unset !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#cart-drawer .ci-controls button:hover {
    background: rgba(255,255,255,0.18) !important;
}

/* Fix the cart item layout so remove button stays inside the card */
#cart-drawer .cart-item {
    display: grid !important;
    grid-template-columns: 56px 1fr auto !important;
    gap: 0.75rem !important;
    align-items: start !important;
    padding: 0.85rem !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    margin-bottom: 0.5rem !important;
   background: var(--red-dim) !important;
}

/* Cart footer — total + checkout button */
.cart-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

#cart-total {
    color: var(--gold);
    font-size: 1rem;
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: 0.78rem;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 6px 20px rgba(155, 63, 212, 0.4);
    border: none;
}

.btn-checkout:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

#cart-drawer .cart-header button {
    width: 32px !important;
    height: 32px !important;
    min-width: unset !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text) !important;
    font-size: 0.9rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
}

#cart-drawer .cart-header button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

#cart-drawer .cart-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.25rem 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#cart-drawer .cart-header h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1rem !important;
    color: var(--text) !important;
    margin: 0 !important;
}