:root{
    --bg:#06080f;
    --bg-soft:#0a0e1a;
    --gold:#c9a866;
    --gold-light:#dcc08a;
    --gold-bright:#f0dcb0;
    --ink:#f2efe8;
    --ink-soft:#a4a8b8;
    --ink-faint:#6a7088;
    --line:rgba(255,255,255,0.06);
    --line-strong:rgba(255,255,255,0.1);
    --glass:rgba(255,255,255,0.03);
    --glass-border:rgba(255,255,255,0.08);
    --header-h:52px;
    --max-w:440px;
  }
  *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 8px);
    overscroll-behavior-y:none;
    -webkit-text-size-adjust:100%;
    touch-action:pan-y;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Vazirmatn', sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
    min-height:100svh;
    touch-action:pan-y;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }

  p, h1, h2, h3 {
    -webkit-user-select:text;
    user-select:text;
  }

  img{
    max-width:100%;
    display:block;
    pointer-events:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }

  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:0.45;
    background-image:
      radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,0.5), transparent 60%),
      radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,0.3), transparent 60%),
      radial-gradient(1.5px 1.5px at 38% 12%, rgba(255,255,255,0.35), transparent 60%),
      radial-gradient(1px 1px at 51% 78%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(1.5px 1.5px at 64% 34%, rgba(255,255,255,0.35), transparent 60%),
      radial-gradient(1px 1px at 77% 8%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.35), transparent 60%);
    background-repeat:no-repeat;
  }

  body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,102,0.06), transparent 60%),
      radial-gradient(ellipse 40% 30% at 0% 50%, rgba(201,168,102,0.02), transparent 60%),
      radial-gradient(ellipse 40% 30% at 100% 80%, rgba(201,168,102,0.02), transparent 60%);
  }

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; border:none; background:none; color:inherit; cursor:pointer; touch-action:manipulation;}

  /* ============ HEADER ============ */
  .site-header{
    position:fixed;
    top:0; right:0; left:0;
    height:var(--header-h);
    z-index:90;
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    background:rgba(6,8,15,0.65);
    border-bottom:1px solid transparent;
    transition:background 0.4s ease, border-color 0.4s ease;
  }
  .site-header.scrolled{
    background:rgba(6,8,15,0.92);
    border-bottom-color:var(--line);
  }
  .header-inner{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 20px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .header-brand{
    display:flex;
    align-items:center;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:18px;
    letter-spacing:0.06em;
    background:linear-gradient(180deg, #f5e0a8 0%, #dcbb75 40%, #b8934a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .site-header.scrolled .header-brand{opacity:1; transform:translateY(0);}

  .header-nav{
    display:flex;
    gap:4px;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
  }
  .site-header.scrolled .header-nav{opacity:1; transform:translateY(0);}
  .header-nav a{
    padding:8px 12px;
    font-size:11px;
    color:var(--ink-soft);
    border-radius:999px;
    transition:color 0.3s ease;
  }
  .header-nav a.active{color:var(--gold);}
  @media (max-width:400px){ .header-nav{display:none;} }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:calc(var(--header-h) + 16px) 20px 24px;
    overflow:hidden;
    text-align:center;
  }

  .hero-content{
    position:relative;
    z-index:2;
    max-width:420px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .hero-ornament-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:32px;
  }
  .ornament-line{
    width:70px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0.7;
    flex-shrink:0;
  }
  .ornament-diamond{
    width:9px;
    height:9px;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    transform:rotate(45deg);
    box-shadow:
      0 0 10px rgba(201,168,102,0.7),
      0 0 20px rgba(201,168,102,0.35);
    position:relative;
    flex-shrink:0;
  }
  .ornament-diamond::before{
    content:'';
    position:absolute;
    inset:-7px;
    border:1px solid rgba(201,168,102,0.35);
    transform:rotate(45deg);
  }

  .hero-logo{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    margin-bottom:24px;
  }
  .logo-text{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    letter-spacing:0.06em;
    line-height:1;
    font-size:clamp(70px, 22vw, 130px);
    background:linear-gradient(180deg, #f5e0a8 0%, #dcbb75 30%, #b8934a 55%, #8a6a28 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  }
  .logo-sub{
    font-family:'Vazirmatn', sans-serif;
    font-weight:400;
    letter-spacing:0.05em;
    color:#dcc08a;
    opacity:0.85;
    line-height:1.4;
    font-size:clamp(8.5px, 2.3vw, 12px);
  }

  .hero-title{
    font-size:13px;
    font-weight:300;
    color:var(--ink-soft);
    line-height:1.7;
    margin-top:8px;
  }
  .hero-title .accent{
    color:var(--gold-light);
    font-weight:400;
  }

  .hero-rule{
    width:36px;
    height:1px;
    margin:20px auto;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .hero-tagline{
    font-size:11px;
    color:var(--ink-faint);
    font-weight:300;
    letter-spacing:0.04em;
  }

  .hero-scroll-cue{
    position:absolute;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .scroll-cue-line{
    width:1px;
    height:32px;
    background:linear-gradient(to bottom, var(--gold-light), transparent);
    position:relative;
    overflow:hidden;
  }
  .scroll-cue-line::after{
    content:'';
    position:absolute;
    top:-100%;
    left:0; right:0;
    height:100%;
    background:linear-gradient(to bottom, transparent, var(--gold-bright), transparent);
    animation:scrollLine 2.4s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%{top:-100%;}
    100%{top:100%;}
  }

  /* ============ PRODUCT PAGE ============ */
  .product-page{
    min-height:100svh;
    padding:calc(var(--header-h) + 12px) 20px 16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    border-top:1px solid var(--line);
  }
  .product-page:first-of-type{border-top:none;}

  .cat-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .cat-bg::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 60% 60% at 50% 40%, rgba(201,168,102,0.07), transparent 70%),
      radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,168,102,0.03), transparent 70%);
  }
  .cat-bg-fade{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(to bottom, var(--bg) 0%, transparent 25%, transparent 75%, var(--bg) 100%),
      radial-gradient(ellipse 90% 80% at 50% 50%, transparent 35%, var(--bg) 95%);
  }

  .product-content{
    position:relative;
    z-index:2;
    max-width:var(--max-w);
    width:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .product-header{
    text-align:center;
    max-width:340px;
    width:100%;
  }
  .product-title{
    font-size:20px;
    font-weight:500;
    color:var(--ink);
    line-height:1.25;
    letter-spacing:-0.01em;
    margin-bottom:4px;
  }
  .product-subtitle{
    font-size:11px;
    color:var(--ink-faint);
    font-weight:300;
    line-height:1.7;
    max-width:290px;
    margin:0 auto;
  }

  /* ============ PRODUCT MEDIA ============ */
  .product-media{
    --ring-color: rgba(201,168,102,0.4);
    --glow-color: rgba(201,168,102,0.32);
    --glow-color-mid: rgba(201,168,102,0.15);
    position:relative;
    width:290px;
    height:290px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ring-color);
    transition:border-color 0.6s ease;
    flex-shrink:0;
    isolation:isolate;
    -webkit-touch-callout:none;
    user-select:none;
  }

  .product-media::before{
    content:'';
    position:absolute;
    inset:-60px;
    border-radius:50%;
    background:radial-gradient(circle,
      var(--glow-color) 0%,
      transparent 55%);
    pointer-events:none;
    z-index:-2;
    transition:background 0.7s ease;
    filter:blur(28px);
    opacity:0.85;
  }

  .product-media::after{
    content:'';
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:1px solid var(--ring-color);
    opacity:0.22;
    pointer-events:none;
    transition:opacity 0.4s ease, border-color 0.6s ease;
  }

  .product-img-wrap{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 50% 50%,
        var(--glow-color) 0%,
        var(--glow-color-mid) 40%,
        rgba(10,14,26,0.65) 75%,
        rgba(8,11,20,0.98) 100%);
    transition:background 0.7s ease;
    -webkit-touch-callout:none;
    user-select:none;
  }

  .product-img-wrap::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 25%,
        rgba(255,255,255,0.09) 0%,
        transparent 40%),
      radial-gradient(circle at 50% 85%,
        rgba(0,0,0,0.25) 0%,
        transparent 50%);
    pointer-events:none;
    z-index:2;
  }

  .product-img-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,
      var(--glow-color-mid) 0%,
      transparent 60%);
    pointer-events:none;
    z-index:1;
    mix-blend-mode:screen;
    opacity:0.6;
  }

  .product-img{
    position:relative;
    z-index:3;
    width:74%;
    height:74%;
    object-fit:contain;
    object-position:center center;
    display:block;
    filter:drop-shadow(0 4px 16px rgba(0,0,0,0.45));
    pointer-events:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }

  .product-spec{
    width:290px;
    display:flex;
    flex-direction:column;
    transition:opacity 0.25s ease;
  }
  .product-spec.fade{opacity:0;}
  .spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    font-size:11px;
  }
  .spec-row:last-child{border-bottom:none;}
  .spec-row .spec-label{
    color:var(--ink-faint);
    font-weight:400;
  }
  .spec-row .spec-value{
    color:var(--ink-soft);
    font-weight:500;
  }
  .spec-row .code-value{
    color:var(--ink-soft);
    font-weight:500;
    letter-spacing:0.02em;
    direction:ltr;
  }
  .spec-row.price-row{
    padding-top:12px;
    margin-top:4px;
    border-top:1px solid var(--line-strong);
  }
  .spec-row.price-row .spec-value{
    color:var(--gold);
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
    font-weight:600;
  }

  .product-colors{
    width:290px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
  }
  .colors-label{
    font-size:10px;
    letter-spacing:0.18em;
    color:var(--ink-faint);
    text-transform:uppercase;
    font-weight:500;
  }

  /* ============ گرید رنگ‌ها ============ */
  .colors-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    align-items:center;
  }

  /* ساختار دو ردیفی برای محصولات ۷ رنگه */
  .colors-grid.cols-7{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
    justify-content:center;
    width:100%;
  }

  .colors-row-top,
  .colors-row-bottom{
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
  }

  .swatch{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.12);
    padding:0;
    position:relative;
    transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    touch-action:manipulation;
    flex-shrink:0;
  }
  .swatch:hover{
    transform:scale(1.06);
    border-color:rgba(255,255,255,0.3);
  }
  .swatch.active{
    transform:scale(1.1);
    box-shadow:
      0 0 0 3px var(--bg),
      0 0 0 4.5px var(--gold);
    border-color:transparent;
  }

  .swatch-pill{
    width:auto;
    height:auto;
    border-radius:999px;
    padding:12px 24px;
    font-size:11px;
    background:var(--glass);
    border:1.5px solid var(--glass-border);
    color:var(--ink-soft);
    transition:all 0.3s ease;
    cursor:pointer;
    touch-action:manipulation;
  }
  .swatch-pill:hover{
    color:var(--ink);
    border-color:var(--line-strong);
  }
  .swatch-pill.active{
    border-color:var(--gold);
    color:var(--gold-light);
    background:rgba(201,168,102,0.08);
  }

  footer{
    position:relative;
    padding:40px 20px 32px;
    text-align:center;
    overflow:hidden;
    border-top:1px solid var(--line);
  }
  footer::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201,168,102,0.08), transparent 70%);
    pointer-events:none;
  }
  footer .foot-inner{
    position:relative;
    z-index:2;
    max-width:var(--max-w);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .foot-logo{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    letter-spacing:0.06em;
    line-height:1;
    font-size:clamp(48px, 15vw, 72px);
    background:linear-gradient(180deg, #f5e0a8 0%, #dcbb75 30%, #b8934a 55%, #8a6a28 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    margin:0 auto 24px;
    display:block;
  }
  .foot-note{
    color:var(--ink-faint);
    font-size:10px;
    letter-spacing:0.03em;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  @media (max-height:750px){
    .product-media{width:250px; height:250px;}
    .product-media::before{inset:-50px;}
    .swatch{width:38px; height:38px;}
    .product-content{gap:16px;}
    .spec-row{padding:6px 0;}
    .product-spec, .product-colors{width:260px;}
  }
  @media (max-height:670px){
    .product-media{width:210px; height:210px;}
    .product-media::before{inset:-40px;}
    .swatch{width:36px; height:36px;}
    .product-spec, .product-colors{width:230px;}
    .product-content{gap:12px;}
    .spec-row{padding:5px 0; font-size:10.5px;}
    .product-title{font-size:18px;}
    .logo-text{font-size:clamp(56px, 18vw, 90px);}
  }