/* ==== DESIGN TOKENS (change the brand look in one place) ================ */
    :root {
      --rose:#ff5f8f; --rose-deep:#b84a6b; --gold:#d9b45b;
      --cream:#fff7fa; --blush:#ffe3ee; --ink:#2a1a20; --muted:#8a7079;
      --line:#f0dbe3; --white:#fff;
      --radius:18px; --shadow:0 14px 40px rgba(184,74,107,.12);
      --maxw:1200px;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { font-family:'Poppins',sans-serif; color:var(--ink); background:var(--cream); line-height:1.55; }
    h1,h2,h3 { font-family:'Playfair Display',serif; }
    a { text-decoration:none; color:inherit; }
    img { display:block; max-width:100%; height:auto; }
    /* never let a product image overflow its card tile */
    .thumb { overflow:hidden; }
    .thumb img { max-width:100%; max-height:100%; }
    .container { width:92%; max-width:var(--maxw); margin:0 auto; }
    button { font-family:inherit; cursor:pointer; border:none; }

    /* ==== TOP PROMO BAR ==================================================== */
    .promo { background:linear-gradient(90deg,var(--rose),var(--rose-deep)); color:#fff;
      font-size:.82rem; padding:8px 0; letter-spacing:.3px; overflow:hidden; }
    /* scrolling news ticker (two copies for a seamless loop) */
    .ticker { display:inline-flex; white-space:nowrap; animation:ticker 28s linear infinite; }
    .promo:hover .ticker { animation-play-state:paused; }
    .ticker .ti { padding-right:44px; }
    @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }

    /* ==== HEADER (logo, search, cart) ===================================== */
    .header { position:sticky; top:0; z-index:50; background:rgba(255,247,250,.92);
      backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .header-in { display:flex; align-items:center; gap:24px; padding:16px 0; }
    /* brand block: logo chip + name + motto */
    .brand { display:flex; align-items:center; gap:10px; }
    /* transparent chip — no black box behind the logo */
    .brand-logo { width:46px; height:46px; border-radius:11px; background:transparent; flex-shrink:0;
      display:grid; place-items:center; overflow:hidden; }
    /* logo always fits fully (never cropped) */
    .brand-logo img, .brand-logo svg { width:100%; height:100%; object-fit:contain; padding:5px; }
    .brand-text { display:flex; flex-direction:column; justify-content:center; }
    .logo { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; line-height:1.1;
      padding-bottom:1px;   /* room so the gradient descenders aren't clipped */
      background:linear-gradient(135deg,var(--rose),var(--gold));
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .motto { font-size:.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
      line-height:1.3; margin-top:2px; white-space:nowrap; }
    /* search box grows to fill the space between logo and cart */
    .search { flex:1; display:flex; align-items:center; gap:8px; background:#fff;
      border:1px solid var(--line); border-radius:999px; padding:9px 14px; max-width:460px; }
    .search input { border:none; outline:none; width:100%; font-size:.9rem; background:transparent; }
    /* clear (×) button — shown by JS only when there is text typed */
    .search-clear { display:none; background:var(--blush); color:var(--rose-deep);
      width:22px; height:22px; border-radius:50%; font-size:1rem; line-height:1; flex-shrink:0; }
    .search-clear.show { display:grid; place-items:center; }
    /* hamburger button — hidden on desktop, shown on mobile */
    .burger { display:none; flex-direction:column; gap:5px; background:none; padding:6px; }
    .burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

    /* nav menu: inline links on desktop */
    .nav-menu { display:flex; align-items:center; gap:22px; }
    .nav-menu a { font-size:.9rem; color:var(--ink); white-space:nowrap; }
    .nav-menu a:hover { color:var(--rose); }
    .nav-menu .nav-cta { background:var(--ink); color:#fff; padding:8px 16px; border-radius:999px; }
    .nav-menu .nav-cta:hover { background:var(--rose); color:#fff; }

    /* signed-in status (name · location) on the right */
    .auth-status { font-size:.76rem; color:var(--rose-deep); cursor:pointer; max-width:170px;
      text-align:right; line-height:1.25; }
    .auth-status small { color:var(--muted); }

    .cart-btn { position:relative; background:#fff; border:1px solid var(--line); color:#fff;
      width:48px; height:48px; border-radius:50%; display:grid; place-items:center; transition:transform .2s; flex-shrink:0; }
    .cart-btn:hover { transform:scale(1.08); }
    /* little red bubble showing item count */
    .cart-count { position:absolute; top:-4px; right:-4px; background:var(--rose);
      color:#fff; font-size:.7rem; font-weight:600; min-width:20px; height:20px;
      border-radius:999px; display:grid; place-items:center; padding:0 5px; }

    /* ==== HERO BANNER (compact, mobile-first) ============================ */
    .hero { background:radial-gradient(ellipse at 80% 20%, var(--blush), var(--cream) 70%);
      padding:26px 0 22px; overflow:hidden; }
    .hero-in { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
    .hero-text { flex:1; min-width:240px; }
    .hero h1 { font-size:clamp(1.5rem,3.8vw,2.3rem); line-height:1.12; margin-bottom:8px; }
    .hero h1 span { background:linear-gradient(135deg,var(--rose),var(--gold));
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .hero p { color:var(--rose-deep); margin-bottom:14px; max-width:380px; font-size:.9rem; }
    /* trust line under the hero CTA — instant credibility (buying psychology) */
    .hero-trust { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;
      font-size:.82rem; color:var(--muted); }
    .hero-trust b { color:var(--ink); }
    .btn { display:inline-block; padding:13px 30px; border-radius:999px; font-weight:500; font-size:.92rem;
      transition:transform .25s, box-shadow .25s; }
    .btn-primary { background:linear-gradient(135deg,var(--rose),var(--rose-deep)); color:#fff;
      box-shadow:0 10px 24px rgba(255,95,143,.38); }
    .btn-primary:hover { transform:translateY(-3px); }
    /* floating decorative product bubbles on the right of the hero */
    /* --- 3D rotating product showcase (right side of hero) --------------
       A ring of product images spinning in 3D. Images come from the products
       you add in the admin (renderHero3D). PNGs with transparency look best. */
    .hero-3d { flex:1; min-width:240px; height:300px; display:flex; align-items:center; justify-content:center;
      perspective:1200px; position:relative; }
    .ring { position:relative; width:190px; height:250px; transform-style:preserve-3d;
      animation:spin3d 20s linear infinite; }
    /* keeps spinning even when the cursor is over it (no pause) */
    .ring .item { position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; }
    .ring .item img { width:190px; height:250px; object-fit:contain;
      filter:drop-shadow(0 14px 22px rgba(184,74,107,.38)); }
    .ring .item .tile { width:175px; height:230px; border-radius:20px; display:grid; place-items:center;
      font-size:3.6rem; box-shadow:0 14px 26px rgba(184,74,107,.3); }
    /* smaller ring for phones */
    .ring.ring-sm { width:112px; height:150px; }
    .ring.ring-sm .item img { width:112px; height:150px; }
    .ring.ring-sm .item .tile { width:104px; height:140px; font-size:2.4rem; border-radius:16px; }
    @keyframes spin3d { from{ transform:rotateY(0deg);} to{ transform:rotateY(360deg);} }
    /* soft glow floor under the ring */
    .hero-3d::after { content:''; position:absolute; width:190px; height:28px; bottom:16px;
      background:radial-gradient(ellipse, rgba(184,74,107,.22), transparent 70%); filter:blur(4px); }
    /* showcase video (plays first, then the ring appears) */
    .hero-video { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .hero-video video, .hero-video iframe { width:100%; height:100%; max-width:420px; max-height:280px;
      border-radius:18px; object-fit:cover; border:0; box-shadow:0 16px 34px rgba(184,74,107,.28); }

    /* ==== SHOP: filter tabs + product grid =============================== */
    .shop { padding:60px 0 90px; }
    .shop-head { text-align:center; margin-bottom:36px; }
    .shop-head h2 { font-size:2.2rem; margin-bottom:6px; }
    .shop-head p { color:var(--muted); }
    /* category filter buttons */
    .filters { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
    .filter { background:#fff; border:1px solid var(--line); padding:9px 20px; border-radius:999px;
      font-size:.86rem; color:var(--ink); transition:.2s; }
    .filter:hover { border-color:var(--rose); }
    .filter.active { background:var(--ink); color:#fff; border-color:var(--ink); }

    .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:20px; }
    .card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
      display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
    .card:hover { transform:translateY(-8px); box-shadow:0 24px 54px rgba(184,74,107,.18); }
    /* product "image": a coloured tile with an emoji placeholder.
       TO USE REAL PHOTOS: replace the .thumb <div> with <img src="..."> in
       the renderProducts() template below. */
    .thumb { aspect-ratio:1; display:grid; place-items:center; font-size:3.6rem; position:relative; overflow:hidden; }
    .thumb .badge, .thumb .off { z-index:2; }   /* keep tags above the photo */
    .badge { position:absolute; top:12px; left:12px; background:#fff; color:var(--rose-deep);
      font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; }
    .card-body { padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
    .card-cat { font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
    .card-name { font-size:1.05rem; font-weight:600; font-family:'Poppins'; }
    .card-notes { font-size:.8rem; color:var(--muted); flex:1; }
    .card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
    .price { font-weight:600; color:var(--rose-deep); font-size:1.05rem; }
    .add { background:var(--rose); color:#fff; width:38px; height:38px; border-radius:50%;
      font-size:1.3rem; display:grid; place-items:center; transition:.2s; }
    .add:hover { background:var(--rose-deep); transform:scale(1.1); }
    .empty { text-align:center; color:var(--muted); padding:50px; grid-column:1/-1; }

    /* ==== TRUST STRIP ===================================================== */
    .trust { background:var(--blush); padding:40px 0; }
    .trust-grid { display:flex; justify-content:space-around; gap:20px; flex-wrap:wrap; text-align:center; }
    .trust-item { max-width:220px; }
    .trust-item .i { font-size:1.8rem; margin-bottom:8px; }
    .trust-item h4 { font-family:'Poppins'; font-size:.95rem; margin-bottom:4px; }
    .trust-item p { font-size:.82rem; color:var(--muted); }

    /* ==== FOOTER ========================================================== */
    footer { background:var(--ink); color:#e9d6dd; padding:40px 0; text-align:center; }
    footer .logo { display:inline-block; margin-bottom:10px; }
    footer p { font-size:.85rem; color:#b79aa4; }

    /* ==== CART DRAWER (slides in from the right) ========================== */
    .overlay { position:fixed; inset:0; background:rgba(42,26,32,.5); opacity:0; pointer-events:none;
      transition:.3s; z-index:90; }
    .overlay.show { opacity:1; pointer-events:all; }
    .drawer { position:fixed; top:0; right:0; height:100%; width:400px; max-width:90vw; background:#fff;
      z-index:100; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; }
    .drawer.open { transform:translateX(0); }
    .drawer-head { padding:22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
    .drawer-head h3 { font-size:1.3rem; }
    .close { background:none; font-size:1.5rem; color:var(--muted); line-height:1; }
    .drawer-body { flex:1; overflow-y:auto; padding:10px 22px; }
    /* one row per cart line */
    .line { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
    .line-thumb { width:60px; height:60px; border-radius:12px; display:grid; place-items:center; font-size:1.8rem; flex-shrink:0; }
    .line-info { flex:1; }
    .line-info .n { font-weight:500; font-size:.92rem; }
    .line-info .p { color:var(--rose-deep); font-size:.85rem; }
    .qty { display:flex; align-items:center; gap:10px; margin-top:6px; }
    .qty button { width:26px; height:26px; border-radius:8px; background:var(--blush); color:var(--rose-deep); font-size:1rem; }
    .qty span { min-width:20px; text-align:center; font-size:.9rem; }
    .remove { background:none; color:var(--muted); font-size:.75rem; text-decoration:underline; align-self:flex-start; margin-top:4px; }
    .drawer-foot { border-top:1px solid var(--line); padding:20px 22px; }
    .row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:.9rem; }
    .row.total { font-size:1.15rem; font-weight:600; color:var(--ink); margin:12px 0 16px; }
    .drawer-foot .btn-primary { width:100%; text-align:center; }
    .cart-empty { text-align:center; color:var(--muted); padding:60px 20px; }

    /* ==== CHECKOUT MODAL ================================================== */
    .modal { position:fixed; inset:0; z-index:110; display:none; place-items:center; padding:20px; }
    .modal.open { display:grid; }
    .modal-box { background:#fff; border-radius:22px; max-width:440px; width:100%; padding:30px;
      max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.3); }
    .modal-box h3 { font-size:1.5rem; margin-bottom:6px; }
    .modal-box .sub { color:var(--muted); font-size:.86rem; margin-bottom:20px; }
    .field { margin-bottom:14px; }
    .field label { display:block; font-size:.82rem; margin-bottom:6px; font-weight:500; }
    .field input, .field textarea { width:100%; padding:12px 14px; border:1px solid var(--line);
      border-radius:12px; font-family:inherit; font-size:.9rem; outline:none; }
    .field input:focus, .field textarea:focus { border-color:var(--rose); }
    .pay-note { background:var(--blush); border-radius:12px; padding:12px 14px; font-size:.82rem;
      color:var(--rose-deep); margin-bottom:18px; }
    /* payment method options */
    .pay-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
      border-radius:10px; margin-bottom:8px; font-size:.88rem; cursor:pointer; }
    .pay-opt input { accent-color:var(--rose); }

    /* ==== TOAST (little "added to cart" popup) ============================ */
    .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120px);
      background:var(--ink); color:#fff; padding:13px 24px; border-radius:999px; font-size:.88rem;
      z-index:120; transition:transform .35s ease; }
    .toast.show { transform:translateX(-50%) translateY(0); }

    /* cart abandonment reminder popup (bottom-right) */
    .cart-remind { position:fixed; right:18px; bottom:18px; z-index:125; width:290px; max-width:90vw;
      background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px;
      box-shadow:0 18px 44px rgba(184,74,107,.25); transform:translateY(140%); transition:transform .4s ease; }
    .cart-remind.show { transform:translateY(0); }
    .cart-remind #cartRemindText { font-size:.9rem; color:var(--ink); }
    .cart-remind-close { position:absolute; top:8px; right:12px; background:none; font-size:1.2rem; color:var(--muted); }

    /* ==== PRODUCT DETAIL PAGE (full-screen overlay) ====================== */
    .detail { position:fixed; inset:0; z-index:115; background:var(--cream);
      overflow-y:auto; display:none; }
    .detail.open { display:block; }
    .detail-box { max-width:1000px; margin:0 auto; padding:24px 20px 80px; }
    .detail-back { background:#fff; border:1px solid var(--line); border-radius:999px;
      padding:10px 20px; font-size:.9rem; margin:10px 0 24px; display:inline-flex; align-items:center; gap:8px; }
    .detail-back:hover { border-color:var(--rose); }
    .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
    /* --- gallery: thumbnails on the LEFT, main image on the right --- */
    .gallery { display:flex; gap:12px; align-items:flex-start; }
    .gallery .main-photo { order:2; flex:1; border-radius:22px; aspect-ratio:1; display:grid; place-items:center;
      font-size:7rem; box-shadow:var(--shadow); overflow:hidden; background:#fff; position:relative; cursor:zoom-in; }
    /* image fills the square (square uploads = no crop, no empty sides) */
    .gallery .main-photo img { width:100%; height:100%; object-fit:cover; }
    .thumbs { order:1; display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
    .thumb-btn { width:66px; height:66px; border-radius:12px; display:grid; place-items:center;
      font-size:1.7rem; cursor:pointer; border:2px solid transparent; overflow:hidden; transition:.2s; background:#fff; }
    .thumb-btn img { width:100%; height:100%; object-fit:contain; padding:4px; }
    .thumb-btn.active { border-color:var(--rose); }        /* highlight selected photo */
    /* --- info column --- */
    .detail-info h2 { font-size:2rem; margin:4px 0 8px; }
    .detail-info .price { font-size:1.5rem; margin-bottom:16px; }
    .detail-info > p { color:var(--ink); margin-bottom:22px; }
    .detail-section { border-top:1px solid var(--line); padding:18px 0; }
    .detail-section h4 { font-family:'Poppins'; font-size:.95rem; margin-bottom:8px; }
    .detail-section p { font-size:.9rem; color:var(--muted); }
    .detail-section ul { list-style:none; }
    .detail-section li { display:flex; justify-content:space-between; font-size:.88rem;
      padding:6px 0; border-bottom:1px dashed var(--line); }
    .detail-section li span:first-child { color:var(--muted); }
    .detail-section li span:last-child { font-weight:500; }
    /* video box: real embed OR a dashed placeholder if no video is set */
    .video-box { border-radius:16px; overflow:hidden; background:#000; aspect-ratio:16/9; }
    .video-box iframe, .video-box video { width:100%; height:100%; border:none; display:block; }
    .video-empty { border:2px dashed var(--line); border-radius:16px; padding:30px; text-align:center;
      color:var(--muted); font-size:.85rem; }
    /* buy row: quantity stepper + add button */
    .detail-buy { display:flex; align-items:center; gap:16px; margin-top:24px; }
    .stepper { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
      border-radius:999px; padding:8px 16px; }
    .stepper button { width:28px; height:28px; border-radius:8px; background:var(--blush);
      color:var(--rose-deep); font-size:1.1rem; }
    .detail-buy .btn-primary { flex:1; text-align:center; }

    /* hover zoom-pan: the inner wrapper scales up and follows the cursor (JS),
       so you can move the mouse to see every part of the full image */
    .gallery .main-photo .ph-inner { display:grid; place-items:center; width:100%; height:100%;
      transition:transform .12s ease-out; }

    /* ==== SIGN IN / SIGN UP — full page ================================ */
    .auth-page { position:fixed; inset:0; z-index:118; background:radial-gradient(ellipse at 70% 15%, var(--blush), var(--cream) 70%);
      display:none; overflow-y:auto; }
    .auth-page.open { display:block; }
    .auth-inner { max-width:440px; margin:0 auto; padding:22px 20px 60px; min-height:100%; }
    .auth-card { background:var(--white); border:1px solid var(--line); border-radius:22px; padding:30px 26px;
      box-shadow:var(--shadow); margin-top:24px; }
    .auth-brand { text-align:center; margin-bottom:18px; display:flex; flex-direction:column; }
    .auth-brand .logo { font-size:1.9rem; }
    .auth-brand .motto { font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:3px; }
    .auth-card h2 { text-align:center; font-size:1.5rem; margin-bottom:4px; }
    .auth-card .sub { text-align:center; color:var(--muted); font-size:.88rem; margin-bottom:20px; }

    /* ==== ORDER PAGE ==================================================== */
    .order-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px;
      margin-bottom:16px; box-shadow:var(--shadow); max-width:640px; }
    .order-card h4 { font-family:'Poppins'; font-size:1rem; margin-bottom:10px; }
    .order-items { list-style:none; margin-bottom:12px; }
    .order-items li { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
    .order-actions { display:flex; gap:12px; flex-wrap:wrap; max-width:640px; }
    .order-actions .btn { flex:1; text-align:center; }

    /* ==== STAR RATING (CSS width trick shows half stars accurately) ====== */
    .stars { position:relative; display:inline-block; font-size:1rem; line-height:1;
      color:#e7d6dc; letter-spacing:2px; }
    .stars::before { content:"★★★★★"; }
    .stars i { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:#f5b301; }
    .stars i::before { content:"★★★★★"; }
    .rating-row { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); margin:2px 0 10px; }
    .card-rating { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
    .card-rating .stars { font-size:.8rem; }

    /* ==== LIVE SOCIAL PROOF line on the detail page ===================== */
    .live { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      background:#fff4f8; border:1px solid var(--line); border-radius:12px;
      padding:10px 14px; font-size:.82rem; color:var(--rose-deep); margin-bottom:20px; }
    .live-dot { width:9px; height:9px; border-radius:50%; background:#2ecc71;
      box-shadow:0 0 0 0 rgba(46,204,113,.6); animation:pulse 1.6s infinite; }
    @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,.55);} 70%{box-shadow:0 0 0 8px rgba(46,204,113,0);} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0);} }

    /* ==== CART MASCOT (the little girl that reacts to your cart) ========= */
    /* base states: sad by default, happy when .happy is added */
    .mascot .m-happy, .mascot .cheek { opacity:0; transition:opacity .35s ease; }
    .mascot .m-sad,  .mascot .tear   { opacity:1; transition:opacity .35s ease; }
    .mascot.happy .m-happy, .mascot.happy .cheek { opacity:1; }
    .mascot.happy .m-sad,  .mascot.happy .tear   { opacity:0; }
    .mascot .tear { animation:teardrop 3s ease-in-out infinite; }
    @keyframes teardrop { 0%,60%{ transform:translateY(0); opacity:.9;} 80%{opacity:.4;} 100%{ transform:translateY(4px); opacity:0;} }
    /* a happy little bounce when something is added */
    .mascot.laugh { animation:laugh .6s ease; }
    @keyframes laugh { 0%,100%{ transform:none;} 25%{ transform:scale(1.18) rotate(-6deg);} 60%{ transform:scale(1.12) rotate(6deg);} }
    /* size in the header button vs. the drawer banner */
    .cart-btn .mascot { width:34px; height:34px; }
    .mascot-banner .mascot { width:86px; height:86px; }

    .mascot-banner { display:flex; align-items:center; gap:14px; padding:16px 22px;
      background:linear-gradient(180deg,var(--blush),#fff); border-bottom:1px solid var(--line); }
    .bubble { position:relative; background:#fff; border:1px solid var(--line);
      border-radius:14px; padding:10px 14px; font-size:.85rem; color:var(--ink); flex:1; }
    /* little speech-bubble tail pointing at the mascot */
    .bubble::before { content:''; position:absolute; left:-7px; top:20px;
      width:12px; height:12px; background:#fff; border-left:1px solid var(--line);
      border-bottom:1px solid var(--line); transform:rotate(45deg); }
    /* if you supply real mascot photos, they render as circular images */
    .mascot-img { border-radius:50%; object-fit:cover; }

    /* ==== BUYING-PSYCHOLOGY BITS ======================================== */
    /* discount ribbon on the product image corner */
    .off { position:absolute; top:12px; right:12px; background:var(--rose); color:#fff;
      font-size:.7rem; font-weight:600; padding:4px 9px; border-radius:999px; }
    /* struck-through original price shown next to the sale price */
    .compare { color:var(--muted); text-decoration:line-through; font-size:.85rem; margin-left:6px; }
    .price-wrap { display:flex; align-items:baseline; }
    /* low-stock / urgency pill */
    .stock-pill { display:inline-flex; align-items:center; gap:6px; background:#fff2f0;
      color:#d9480f; font-size:.8rem; font-weight:500; padding:6px 12px; border-radius:999px;
      border:1px solid #ffd8cc; margin-bottom:14px; }
    /* 3-line social proof block on the detail page */
    .live { display:flex; flex-direction:column; gap:6px;
      background:#fff4f8; border:1px solid var(--line); border-radius:12px;
      padding:12px 14px; font-size:.83rem; color:var(--rose-deep); margin-bottom:20px; }
    .live-row { display:flex; align-items:center; gap:8px; }
    .live-row strong { color:var(--ink); }
    .live-dot { width:9px; height:9px; border-radius:50%; background:#2ecc71;
      box-shadow:0 0 0 0 rgba(46,204,113,.6); animation:pulse 1.6s infinite; flex-shrink:0; }
    @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,.55);} 70%{box-shadow:0 0 0 8px rgba(46,204,113,0);} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0);} }
    /* free-delivery progress nudge in the cart (loss-aversion trigger) */
    .nudge { margin:12px 22px 0; background:linear-gradient(90deg,var(--blush),#fff);
      border:1px dashed var(--rose); border-radius:12px; padding:10px 14px; font-size:.82rem; color:var(--rose-deep); }
    .nudge.free { border-style:solid; border-color:#2ecc71; color:#1e874b; background:#eafaf0; }

    /* ==== EXPANDED FOOTER =============================================== */
    .foot-grid { display:grid; grid-template-columns:2fr 1fr 1.3fr; gap:40px; margin-bottom:34px; text-align:left; }
    footer .logo { font-size:1.8rem; }
    footer h4 { font-family:'Poppins'; font-weight:600; font-size:.95rem; margin-bottom:14px; color:#fff; }
    footer ul { list-style:none; }
    footer li { margin-bottom:9px; font-size:.88rem; }
    footer a { color:#c9b3bc; transition:color .2s; }
    footer a:hover { color:var(--rose); }
    .socials { display:flex; gap:10px; margin-top:6px; }
    .socials a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
      display:grid; place-items:center; font-size:1.1rem; transition:background .2s, transform .2s; }
    .socials a:hover { background:var(--rose); transform:translateY(-3px); }
    /* buyer disclaimer note above the copyright line */
    .foot-note { text-align:center; font-size:.82rem; color:#d8c3cc; max-width:640px;
      margin:0 auto 18px; line-height:1.6; background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 18px; }
    .foot-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:20px; text-align:center;
      font-size:.8rem; color:#a58c96; }

    /* ==== ADMIN PANEL =================================================== */
    /* floating button (bottom-left) that opens the admin panel */
    .admin-fab { position:fixed; left:18px; bottom:18px; z-index:105;
      background:var(--ink); color:#fff; border-radius:999px; padding:11px 18px;
      font-size:.85rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:7px; }
    .admin-fab:hover { transform:translateY(-2px); }
    /* full-screen admin overlay */
    .admin { position:fixed; inset:0; z-index:130; background:rgba(42,26,32,.55);
      display:none; overflow-y:auto; padding:30px 16px; }
    .admin.open { display:block; }
    .admin-inner { max-width:840px; margin:0 auto; background:#fff; border-radius:20px;
      padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
    .admin-inner h2 { font-size:1.6rem; margin-bottom:4px; }
    .admin-inner .muted { color:var(--muted); font-size:.85rem; margin-bottom:18px; }
    .admin-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
    .admin-tab { background:var(--cream); border:1px solid var(--line); border-radius:999px;
      padding:8px 18px; font-size:.85rem; }
    .admin-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
    .admin-panel { display:none; } .admin-panel.active { display:block; }
    /* settings + product form fields */
    .afield { margin-bottom:12px; }
    .afield label { display:block; font-size:.78rem; font-weight:500; margin-bottom:5px; color:var(--muted); }
    .afield input, .afield select, .afield textarea { width:100%; padding:10px 12px;
      border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:.88rem; outline:none; }
    .afield input:focus, .afield select:focus, .afield textarea:focus { border-color:var(--rose); }
    .agrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    /* product list rows */
    .arow { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line);
      border-radius:12px; margin-bottom:8px; }
    .arow .ath { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-size:1.4rem; flex-shrink:0; }
    .arow .ainfo { flex:1; min-width:0; }
    .arow .ainfo b { font-size:.9rem; } .arow .ainfo small { color:var(--muted); display:block; }
    .abtn { border-radius:8px; padding:7px 12px; font-size:.8rem; font-weight:500; }
    .abtn-edit { background:var(--blush); color:var(--rose-deep); }
    .abtn-del { background:#ffe3e0; color:#d9480f; }
    .abtn-toggle { background:#eef1f4; color:#3a4a5a; }
    .abtn-pin { background:#eae4ff; color:#5346ff; }
    /* on/off switch in the categories list */
    .switch { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); cursor:pointer; }
    .switch input { width:34px; height:19px; -webkit-appearance:none; appearance:none; background:#d9c7cf;
      border-radius:999px; position:relative; cursor:pointer; transition:background .2s; outline:none; }
    .switch input:checked { background:#2ecc71; }
    .switch input::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px;
      background:#fff; border-radius:50%; transition:transform .2s; }
    .switch input:checked::after { transform:translateX(15px); }
    .abtn-primary { background:var(--rose); color:#fff; padding:11px 20px; border-radius:10px; }
    .abtn-ghost { background:#fff; border:1px solid var(--line); padding:11px 20px; border-radius:10px; }
    /* dashboard */
    .dash-ranges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
    .dash-ranges button { background:var(--cream); border:1px solid var(--line); border-radius:999px;
      padding:6px 14px; font-size:.8rem; }
    .dash-ranges button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
    .dash-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
    .kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
    .kpi .v { font-size:1.25rem; font-weight:700; color:var(--ink); }
    .kpi .l { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
    .kpi.good .v { color:#1e874b; } .kpi.bad .v { color:#d9480f; }
    .dash-table { width:100%; border-collapse:collapse; font-size:.84rem; }
    .dash-table th, .dash-table td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); }
    .dash-table th { color:var(--muted); font-weight:600; }
    .dash-table td.num, .dash-table th.num { text-align:right; }

    .admin-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
    .admin-close { position:absolute; }
    /* the product add/edit form must sit ABOVE the admin panel (z-index 130),
       otherwise Edit opens the form hidden behind the panel. */
    #prodModal { z-index:140; }
    /* uploaded/added photo thumbnails in the product form */
    .photo-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
    .photo-thumb { position:relative; width:62px; height:62px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
    .photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .photo-thumb button { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
      background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; line-height:1; display:grid; place-items:center; padding:0; }
    /* editable details rows in the product form */
    .detail-row { display:flex; gap:8px; margin-bottom:8px; }
    .detail-row .dk { flex:0 0 40%; } .detail-row .dv { flex:1; }
    .detail-row .abtn-del { flex:0 0 auto; }
    /* per-product stat rows */
    .stat-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
    .stat-row > span { flex:0 0 118px; font-size:.84rem; color:var(--muted); }
    .stat-row .stat-mode { flex:0 0 92px; }
    .stat-row .stat-val { flex:1; }

    /* ==== RESPONSIVE ===================================================== */
    @media (max-width:720px){
      /* mobile header: burger + logo + cart on row 1, search full-width row 2 */
      .header-in { flex-wrap:wrap; gap:10px; }
      .burger { display:flex; }
      .brand { margin-right:auto; }        /* pushes cart to the right */
      .logo { font-size:1.3rem; }
      .motto { font-size:.52rem; letter-spacing:1.5px; }
      .search { order:5; flex-basis:100%; max-width:none; }  /* search drops to its own row */

      /* nav menu becomes a dropdown panel toggled by the hamburger */
      .nav-menu { position:absolute; top:100%; left:0; width:100%;
        flex-direction:column; align-items:flex-start; gap:0;
        background:#fff; border-top:1px solid var(--line); box-shadow:var(--shadow);
        padding:6px 5%; max-height:0; overflow:hidden; transition:max-height .3s ease; }
      .nav-menu.open { max-height:320px; padding:14px 5%; }
      .nav-menu a { width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
      .nav-menu .nav-cta { border:none; text-align:center; margin-top:10px; }

      .hero-3d { height:210px; }            /* smaller ring; full animation visible (not clipped) */
      .hero { padding:20px 0 16px; }
      .detail-grid { grid-template-columns:1fr; gap:24px; }
      .gallery .main-photo { font-size:5rem; }
      .foot-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; }
    }
    @media (max-width:400px){
      .grid { grid-template-columns:1fr 1fr; gap:12px; }  /* force 2 tidy columns */
      .thumb { font-size:2.6rem; }
    }

    /* ==== CUSTOMER ACCOUNT / PROFILE PAGE ================================== */
    .account-page { position:fixed; inset:0; z-index:119; background:radial-gradient(ellipse at 70% 10%, var(--blush), var(--cream) 70%);
      display:none; overflow-y:auto; }
    .account-page.open { display:block; }
    .account-inner { max-width:640px; margin:0 auto; padding:22px 20px 70px; min-height:100%; }
    .account-head { display:flex; align-items:center; gap:14px; margin:18px 0 8px; }
    .acc-avatar { width:58px; height:58px; border-radius:50%; background:linear-gradient(150deg,var(--rose),var(--rose-deep));
      display:grid; place-items:center; font-size:1.7rem; color:#fff; flex-shrink:0; }
    .account-id h2 { font-size:1.5rem; line-height:1.2; }
    .acc-username { font-size:.85rem; color:var(--muted); }
    #accSignOut { margin-left:auto; }
    .btn-ghost { background:transparent; border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:12px; font-weight:600; }
    .acc-section { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px 18px; margin-top:16px; box-shadow:var(--shadow); }
    .acc-section > h3 { font-size:1.15rem; margin-bottom:14px; }
    .acc-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
    .acc-tab { background:var(--blush); color:var(--rose-deep); border-radius:999px; padding:7px 16px; font-weight:600; font-size:.85rem; }
    .acc-tab.active { background:linear-gradient(90deg,var(--rose),var(--rose-deep)); color:#fff; }
    .acc-orders .empty, .acc-wishlist .empty { color:var(--muted); font-size:.9rem; padding:8px 0; }
    .ord-card { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
    .ord-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
    .ord-top b { font-size:.95rem; }
    .ord-badge { font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--blush); color:var(--rose-deep); }
    .ord-meta { font-size:.8rem; color:var(--muted); margin-top:4px; }
    .ord-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
    .ord-btn { font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:10px; border:1px solid var(--line); background:var(--cream); color:var(--ink); }
    .ord-btn.primary { background:linear-gradient(90deg,var(--rose),var(--rose-deep)); color:#fff; border:none; }
    .acc-wishlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
    .wish-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; position:relative; background:var(--cream); }
    .wish-card .wthumb { aspect-ratio:1; display:grid; place-items:center; font-size:2.4rem; overflow:hidden; }
    .wish-card .wthumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .wish-card .wbody { padding:8px 10px; }
    .wish-card .wname { font-size:.82rem; font-weight:600; line-height:1.25; }
    .wish-card .wprice { font-size:.82rem; color:var(--rose-deep); font-weight:700; }
    .wish-card .wact { display:flex; gap:6px; margin-top:6px; }
    .wish-card .wact button { flex:1; font-size:.72rem; font-weight:600; padding:6px 4px; border-radius:8px; }
    .wish-add { background:linear-gradient(90deg,var(--rose),var(--rose-deep)); color:#fff; }
    .wish-rm { background:var(--blush); color:var(--rose-deep); }
    .acc-form .field { margin-bottom:12px; }
    .acc-form label { display:block; font-size:.82rem; font-weight:600; margin-bottom:5px; }
    .acc-form input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink); font-family:inherit; }
    .acc-toggle { display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-weight:600; font-size:.92rem; }
    .acc-toggle input { width:20px; height:20px; accent-color:var(--rose); }
    .acc-links { display:flex; flex-direction:column; gap:2px; margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
    .acc-links a { padding:10px 4px; font-size:.9rem; border-bottom:1px solid var(--line); }
    .acc-links a:last-child { border-bottom:none; }
    .acc-brand { text-align:center; margin-top:26px; }
    .acc-brand-name { font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--rose-deep); }
    .acc-brand-motto { font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:2px; }
    .policy-body { white-space:pre-wrap; line-height:1.7; font-size:.95rem; color:var(--ink); margin-top:14px;
      background:var(--white); border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow:var(--shadow); }

    /* wishlist heart on product cards — bottom-right so it never covers the
       top badges (Bestseller/pinned top-left, discount % top-right) */
    .thumb .wish { position:absolute; bottom:8px; right:8px; z-index:3; width:32px; height:32px; border-radius:50%;
      background:rgba(255,255,255,.9); display:grid; place-items:center; font-size:1rem; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .thumb .wish.on { background:var(--rose); }

    /* ==== DARK MODE (toggled from Account settings) ======================= */
    body.theme-dark {
      --cream:#161016; --white:#211a26; --blush:#2c2030; --ink:#f4e9f0; --muted:#b6a1ae;
      --line:#3a2c3a; --shadow:0 14px 40px rgba(0,0,0,.45);
    }
    body.theme-dark .header { background:rgba(22,16,22,.92); }
    body.theme-dark .promo { filter:brightness(.92); }