:root{
      --gold:#c9a14a;
      --gold-2:#e1c57a;
      --black:#111111;
      --ink:#1c1c1c;
      --muted:#6c6c6c;
      --bg:#ffffff;
      --soft:#f7f6f3;
      --line: rgba(17,17,17,.10);
      --shadow: 0 18px 50px rgba(0,0,0,.10);
      --shadow2: 0 12px 30px rgba(0,0,0,.08);
      --radius: 18px;
    }

    html,body{height:100%}
    body{
      font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: radial-gradient(1200px 700px at 20% -10%, rgba(201,161,74,.14), transparent 55%),
                  radial-gradient(1200px 700px at 100% 0%, rgba(201,161,74,.10), transparent 55%),
                  var(--bg);
      overflow-x:hidden;
    }

    .brand-serif{font-family:"Playfair Display", serif}
    .gold{color:var(--gold)}
    .btn-gold{
      --bs-btn-bg: var(--gold);
      --bs-btn-border-color: var(--gold);
      --bs-btn-hover-bg: #b78f3c;
      --bs-btn-hover-border-color:#b78f3c;
      --bs-btn-active-bg:#a78033;
      --bs-btn-active-border-color:#a78033;
      --bs-btn-color:#111;
      --bs-btn-hover-color:#111;
      --bs-btn-active-color:#111;
      box-shadow: 0 12px 30px rgba(201,161,74,.25);
      border-radius: 999px;
      font-weight: 600;
    }
    .btn-outline-gold{
      border: 1px solid rgba(201,161,74,.55);
      color: var(--ink);
      border-radius: 999px;
      font-weight: 600;
      background: rgba(255,255,255,.65);
      backdrop-filter: blur(10px);
    }
    .btn-outline-gold:hover{
      background: rgba(201,161,74,.12);
      border-color: rgba(201,161,74,.85);
      color: var(--ink);
    }

    .nav-glass{
      background: rgba(255,255,255,.70);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }

    .logo-wrap{
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color:var(--ink);
    }
    .logo-badge{
      width:40px;height:40px;border-radius:999px;
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(225,197,122,.9), transparent 60%),
        radial-gradient(16px 16px at 70% 60%, rgba(201,161,74,.9), transparent 60%),
        linear-gradient(135deg, #1b1b1b, #0f0f0f);
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
      position:relative;
      overflow:hidden;
    }
    .logo-badge:after{
      content:"TM";
      position:absolute; inset:0;
      display:grid; place-items:center;
      font-weight:800;
      color: var(--gold-2);
      letter-spacing:.04em;
      font-size: 14px;
    }

    .hero{
      padding: 70px 0 35px;
      position:relative;
    }
    .hero-card{
      border-radius: calc(var(--radius) + 6px);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-visual{
      min-height: 340px;
      background:
        radial-gradient(700px 420px at 20% 30%, rgba(201,161,74,.35), transparent 55%),
        radial-gradient(700px 420px at 80% 70%, rgba(201,161,74,.18), transparent 55%),
        linear-gradient(135deg, #141414, #0c0c0c);
      position:relative;
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow2);
    }
    .hero-visual .floating{
      position:absolute;
      width: 240px; height: 240px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(225,197,122,.95), rgba(201,161,74,.22) 55%, rgba(201,161,74,0) 70%);
      filter: blur(0px);
      animation: floaty 8s ease-in-out infinite;
      opacity:.9;
    }
    .hero-visual .floating.two{
      width: 190px; height: 190px;
      left: 55%;
      top: 48%;
      animation-duration: 10s;
      opacity:.75;
    }
    .hero-visual .floating.one{left:-30px; top: 22%;}
    @keyframes floaty{
      0%,100%{transform: translate(0,0) scale(1)}
      50%{transform: translate(18px,-14px) scale(1.05)}
    }

    .hero-pattern{
      position:absolute; inset:0;
      background:
        radial-gradient(2px 2px at 22% 22%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(2px 2px at 82% 72%, rgba(255,255,255,.18), transparent 60%);
      opacity:.7;
    }

    .chip{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius: 999px;
      background: rgba(201,161,74,.10);
      border: 1px solid rgba(201,161,74,.18);
      font-weight: 600;
      color: var(--ink);
    }
    .chip .dot{
      width:10px;height:10px;border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 0 6px rgba(201,161,74,.12);
    }

    .section-pad{padding: 55px 0}
    .section-title{
      display:flex; align-items:end; justify-content:space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .section-title h2{
      font-family:"Playfair Display", serif;
      font-weight: 700;
      letter-spacing: .01em;
      margin:0;
    }
    .soft-card{
      border-radius: var(--radius);
      background: rgba(255,255,255,.85);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
    }

    .filters{
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .pill{
      padding:10px 14px;
      border-radius: 999px;
      border:1px solid rgba(17,17,17,.12);
      background: rgba(255,255,255,.65);
      backdrop-filter: blur(10px);
      cursor:pointer;
      user-select:none;
      transition: .18s ease;
      font-weight: 600;
      color: var(--ink);
    }
    .pill.active{
      border-color: rgba(201,161,74,.55);
      background: rgba(201,161,74,.12);
    }
    .pill:hover{transform: translateY(-1px);}

    .product-card{
      border-radius: var(--radius);
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      overflow:hidden;
      transition: .20s ease;
      height:100%;
    }
    .product-card:hover{transform: translateY(-3px);}
    .thumb{
      height: 220px;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(900px 320px at 25% 30%, rgba(201,161,74,.35), transparent 55%),
        radial-gradient(900px 320px at 78% 75%, rgba(201,161,74,.15), transparent 55%),
        linear-gradient(135deg, #151515, #0b0b0b);
      position:relative;
      overflow:hidden;
    }
    .thumb .fabric{
      position:absolute; inset:-40px -60px;
      background:
        repeating-linear-gradient(115deg,
          rgba(201,161,74,.18) 0px, rgba(201,161,74,.18) 8px,
          rgba(255,255,255,.08) 8px, rgba(255,255,255,.08) 16px
        );
      transform: rotate(-8deg);
      opacity:.75;
      mix-blend-mode: screen;
      animation: shimmer 7.5s ease-in-out infinite;
    }
    @keyframes shimmer{
      0%,100%{transform: rotate(-8deg) translateX(0)}
      50%{transform: rotate(-8deg) translateX(28px)}
    }
    .thumb .badge-top{
      position:absolute; top:14px; left:14px;
      padding:8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(12px);
      font-weight: 700;
      font-size: 12px;
      color: var(--ink);
    }
    .thumb .badge-top span{color: var(--gold)}
    .thumb .wishlist{
      position:absolute; top:14px; right:14px;
      width:40px;height:40px;border-radius:999px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(12px);
      cursor:pointer;
      transition: .15s ease;
    }
    .thumb .wishlist:hover{transform: scale(1.04);}

    .price{
      font-weight: 800;
      letter-spacing: .01em;
    }
    .muted{color:var(--muted)}
    .mini{font-size: 13px}

    .search-wrap{
      border-radius: 999px;
      border: 1px solid rgba(17,17,17,.12);
      background: rgba(255,255,255,.70);
      backdrop-filter: blur(10px);
      padding: 10px 14px;
      display:flex; align-items:center; gap:10px;
    }
    .search-wrap input{
      border:0; outline:0; background:transparent;
      width:100%;
    }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(201,161,74,.45), transparent);
      margin: 16px 0;
    }

    footer{
      background: linear-gradient(180deg, #121212, #0b0b0b);
      color: rgba(255,255,255,.86);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    footer a{color: rgba(255,255,255,.86); text-decoration:none}
    footer a:hover{color: var(--gold-2)}
    .footer-badge{
      width:46px;height:46px;border-radius:999px;
      background: linear-gradient(135deg, #1b1b1b, #0f0f0f);
      border: 1px solid rgba(255,255,255,.10);
      display:grid; place-items:center;
      color: var(--gold-2);
      font-weight: 900;
      letter-spacing:.04em;
    }

    .offcanvas{
      border-left: 1px solid var(--line);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(16px);
    }

    .toast{
      border-radius: 14px;
      border: 1px solid rgba(17,17,17,.10);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow2);
    }

    .skeleton{
      background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02), rgba(0,0,0,.06));
      background-size: 200% 100%;
      animation: sk 1.2s infinite;
      border-radius: 12px;
    }
    @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}