:root{
    --ink:#1a1523;
    --ink-soft:#5b5468;
    --paper:#ffffff;
    --mist:#f6f4fb;
    --line:#e7e3f0;
    --violet:#2c1157;
    --violet-2:#3d1c78;
    --lilac:#7c5cff;
    --lilac-soft:#efe9ff;
    --gold:#e0455f;
    --radius:14px;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Söhne',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  body.modal-open{overflow:hidden;}
  h1,h2,h3{
    font-family:Georgia,'Iowan Old Style','Times New Roman',serif;
    font-weight:400;
    margin:0;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* ================================================================
     SECTION-REVEAL ANIMATION
     Every top-level section carries the "reveal" class. It starts
     slightly lower + transparent, and an IntersectionObserver (see
     the bottom <script>) adds "in-view" the first time it scrolls
     into the viewport, which triggers this transition once.
     ================================================================ */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:13px 26px;border-radius:9px;font-size:0.95rem;font-weight:500;
    border:1px solid transparent;transition:transform .15s ease, background .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--violet);color:#fff;}
  .btn-primary:hover{background:var(--violet-2);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-light{background:#fff;color:var(--violet);}
  .btn-light:hover{background:var(--lilac-soft);}
  .btn-outline-inverse{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
  .btn-outline-inverse:hover{border-color:#fff;}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 0;
  }
  .brand{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-family:Georgia,serif;}
  .brand-mark{
    width:30px;height:30px;border-radius:8px;background:var(--violet);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.8rem;font-family:inherit;
  }
  .nav-links{display:flex;gap:34px;font-size:0.95rem;color:var(--ink-soft);}
  .nav-links a:hover{color:var(--ink);}
  .nav-right{display:flex;align-items:center;gap:18px;}
  .custom-order-link{
    font-size:0.9rem;color:var(--violet);border:1px solid var(--lilac-soft);background:var(--lilac-soft);
    padding:9px 16px;border-radius:99px;transition:background .15s ease, border-color .15s ease;
  }
  .custom-order-link:hover{background:#e3d9ff;border-color:var(--lilac);}
  .menu-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--ink);}

  /* ----- Google Sign-In / profile avatar (auth area in the header) ----- */
  .auth-area{display:flex;align-items:center;}
  .user-avatar{
    width:36px;height:36px;border-radius:50%;object-fit:cover;cursor:pointer;
    border:2px solid var(--lilac-soft);transition:border-color .15s ease, transform .15s ease;
  }
  .user-avatar:hover{border-color:var(--lilac);transform:scale(1.05);}

  /* ---------- Hero ---------- */
  .hero{padding:74px 0 60px;background:linear-gradient(180deg,#fbfaff 0%,#ffffff 65%);}
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
  .badge{
    display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;
    background:var(--lilac-soft);color:var(--violet-2);font-size:0.82rem;margin-bottom:22px;
  }
  .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--lilac);}
  .hero h1{font-size:3.1rem;line-height:1.12;color:var(--ink);}
  .hero h1 em{font-style:italic;color:var(--lilac);}
  .hero p.lede{
    margin-top:20px;max-width:46ch;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;
  }
  .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
  .stats{display:flex;gap:40px;margin-top:52px;flex-wrap:wrap;}
  .stat b{display:block;font-size:1.5rem;font-family:Georgia,serif;color:var(--ink);}
  .stat span{font-size:0.82rem;color:var(--ink-soft);}

  .hero-gallery{position:relative;}
  .gallery-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
  }
  .gallery-grid .g-item{
    border-radius:16px;overflow:hidden;background:var(--mist);
    display:flex;align-items:center;justify-content:center;
  }
  /* Same "shimmer behind, fade in once loaded" treatment used everywhere
     else on the page — without this, these <img> tags render progressively
     top-to-bottom as they download, which looks unfinished/janky. */
  .gallery-grid img{
    width:100%;height:auto;object-fit:contain;
    opacity:0;transition:opacity .45s ease;
  }
  .gallery-grid img.loaded{opacity:1;}
  .g-tall{aspect-ratio:1/1;}
  .gallery-note{
    position:absolute;bottom:-16px;right:20px;background:#fff;border:1px solid var(--line);
    padding:8px 16px;border-radius:99px;font-size:0.78rem;color:var(--ink-soft);
    box-shadow:0 8px 24px rgba(20,10,45,0.08);display:flex;align-items:center;gap:8px;
  }
  .gallery-note::before{content:"";width:6px;height:6px;border-radius:50%;background:#26b96b;display:inline-block;}

  /* ---------- How it works ---------- */
  .how{background:var(--mist);padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .section-head{text-align:center;max-width:560px;margin:0 auto 52px;}
  .section-head h2{font-size:2.1rem;}
  .section-head p{color:var(--ink-soft);margin-top:12px;font-size:1rem;}
  .how-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:center;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .steps.stacked{grid-template-columns:1fr;gap:30px;}
  .step-index{font-family:Georgia,serif;font-size:2rem;color:#cfc6e8;margin-bottom:14px;}
  .step h3{font-size:1.1rem;font-family:inherit;font-weight:600;margin-bottom:10px;}
  .step p{color:var(--ink-soft);font-size:0.94rem;line-height:1.6;}
  .step-row{display:flex;gap:18px;align-items:flex-start;}
  .step-row .step-index{margin-bottom:0;flex-shrink:0;width:44px;}
  .step-row .step-copy h3{margin-bottom:6px;}

  .how-video{position:relative;}
  .video-frame{
    position:relative;border-radius:16px;overflow:hidden;background:#0f0a1e;
    aspect-ratio:16/10;box-shadow:0 18px 40px rgba(30,15,60,0.14);
  }
  .video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
  .video-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:72px;height:72px;border-radius:50%;background:var(--violet);color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;font-size:0;
    box-shadow:0 10px 30px rgba(44,17,87,0.4);transition:transform .2s ease, background .2s ease, opacity .2s ease;
  }
  .video-play::before{
    content:"";width:0;height:0;margin-left:4px;
    border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid #fff;
  }
  .video-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--violet-2);}
  .video-play.hidden{opacity:0;pointer-events:none;}
  .video-frame::after{
    content:"";position:absolute;inset:0;background:rgba(15,10,30,0.18);
    transition:opacity .2s ease;pointer-events:none;
  }
  .video-frame.playing::after{opacity:0;}
  .video-note{
    margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:0.82rem;color:var(--ink-soft);
  }
  .video-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lilac);display:inline-block;}

  /* ---------- Catalog ---------- */
  .catalog{padding:84px 0 20px;}
  .catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px;}
  .catalog-head h2{font-size:2rem;max-width:20ch;}
  .catalog-head p{color:var(--ink-soft);margin-top:10px;max-width:44ch;font-size:0.96rem;}
  .filters{display:flex;gap:10px;flex-wrap:wrap;}
  .filter-pill{
    padding:8px 16px;border-radius:99px;border:1px solid var(--line);font-size:0.85rem;color:var(--ink-soft);
    background:#fff;transition:all .15s ease;
  }
  .filter-pill.active{background:var(--violet);border-color:var(--violet);color:#fff;}
  .filter-pill:not(.active):hover{border-color:var(--ink);color:var(--ink);}

  .card-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px;
  }
  .p-card{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
    display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;
    cursor:pointer;
  }
  .p-card:hover{box-shadow:0 18px 40px rgba(30,15,60,0.1);transform:translateY(-3px);}
  .p-card:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;}
  .p-media{
    position:relative;width:100%;aspect-ratio:7/10;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    /* Shimmer placeholder shown behind every image until it finishes loading
       (see ".shimmer-bg" below) — this replaces the flat "--mist" color so
       the box never looks empty/dead while the real photo streams in. */
    background:var(--mist);
  }
  /* Images start invisible and fade in only once fully loaded (the "loaded"
     class is added by the img's onload handler in JS). This avoids the
     jarring "renders top-to-bottom while downloading" look of a raw <img>. */
  .p-media img{
    width:100%;height:100%;object-fit:contain;object-position:center;
    opacity:0;transition:opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .p-media img.loaded{opacity:1;}
  .p-card:hover .p-media img{transform:scale(1.04);}
  .p-flag{
    position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:99px;
    font-size:0.7rem;color:#fff;font-weight:600;
  }
  .flag-best{background:#e0455f;}
  .flag-top{background:#7c5cff;}
  .flag-new{background:#26b96b;}
  .flag-trend{background:#e08a1c;}
  .flag-premium{background:#c99a2e;}
  .flag-popular{background:#2c8ce0;}
  .p-tag{
    position:absolute;top:12px;right:12px;background:rgba(20,10,40,0.55);color:#fff;
    padding:4px 10px;border-radius:99px;font-size:0.68rem;
  }
  .p-dots{
    position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;
  }
  .p-dots span{width:5px;height:5px;border-radius:50%;background:rgba(20,10,40,0.25);transition:background .2s ease, transform .2s ease;}
  .p-dots span.on{background:#fff;box-shadow:0 0 0 1px rgba(20,10,40,0.3);transform:scale(1.2);}
  .p-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
  .p-cat{font-size:0.72rem;letter-spacing:.03em;color:var(--lilac);}
  .p-top-row{display:flex;justify-content:space-between;align-items:baseline;}
  .p-name{font-family:Georgia,serif;font-size:1.15rem;}
  .p-rating{font-size:0.8rem;color:var(--ink-soft);white-space:nowrap;}
  /* Homepage card descriptions are clamped to exactly 2 lines and given a
     matching min-height, so every card reads a short, uniform "bit about"
     the character no matter how long the real description is — a short
     one-liner and a long paragraph both take up the same amount of card
     space. The FULL, untruncated description only appears once the visitor
     opens the character's full-screen modal (see .char-modal-desc, which
     has no clamp at all). */
  .p-desc{
    font-size:0.88rem;color:var(--ink-soft);line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:3em;
  }
  .p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
  .p-tags span{
    font-size:0.7rem;color:var(--ink-soft);background:var(--mist);
    padding:4px 9px;border-radius:6px;border:1px solid var(--line);
  }
  .p-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
  .p-price b{font-size:1.05rem;}
  .p-price small{display:block;color:var(--ink-soft);font-size:0.75rem;}
  .p-order{
    background:var(--violet);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-size:0.84rem;
    position:relative;z-index:2;transition:background .15s ease;
  }
  .p-order:hover{background:var(--violet-2);}

  /* ================================================================
     SKELETON LOADING STATE
     Shown in the catalog grid while we wait for Firestore to respond.
     Each skeleton card mimics the real .p-card layout (image box +
     a few text bars) so the page doesn't "jump" once real cards render.
     The shimmer effect is a moving gradient sweep, driven by the
     "shimmerSweep" keyframe animation below.
     ================================================================ */
  @keyframes shimmerSweep{
    0%{background-position:-400px 0;}
    100%{background-position:400px 0;}
  }
  .shimmer-bg{
    background:linear-gradient(90deg, var(--mist) 25%, #ececf5 37%, var(--mist) 63%);
    background-size:800px 100%;
    animation:shimmerSweep 1.4s ease-in-out infinite;
  }
  .skeleton-card{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
    display:flex;flex-direction:column;
  }
  .skeleton-media{width:100%;aspect-ratio:7/10;}
  .skeleton-body{padding:18px;display:flex;flex-direction:column;gap:10px;}
  .skeleton-line{height:12px;border-radius:6px;}
  .skeleton-line.w-40{width:40%;}
  .skeleton-line.w-70{width:70%;}
  .skeleton-line.w-90{width:90%;}
  .skeleton-line.w-50{width:50%;}

  /* ---------- Pricing ---------- */
  .pricing{background:var(--mist);padding:88px 0;border-top:1px solid var(--line);}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;}
  .price-card{
    background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 28px;
    display:flex;flex-direction:column;
  }
  .price-card.hi{
    background:var(--violet);color:#fff;border-color:var(--violet);
    box-shadow:0 24px 48px rgba(44,17,87,0.28);transform:translateY(-10px);
  }
  .price-eyebrow{font-size:0.75rem;letter-spacing:.05em;color:var(--lilac);text-transform:uppercase;}
  .price-card.hi .price-eyebrow{color:#c9b8ff;}
  .price-amount{font-family:Georgia,serif;font-size:2.4rem;margin:10px 0 4px;}
  .price-amount span{font-size:1rem;font-family:inherit;color:var(--ink-soft);}
  .price-card.hi .price-amount span{color:#d8ccff;}
  .price-desc{font-size:0.88rem;color:var(--ink-soft);margin-bottom:22px;}
  .price-card.hi .price-desc{color:#d8ccff;}
  .price-feats{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;}
  .price-feats li{display:flex;gap:10px;font-size:0.88rem;align-items:flex-start;}
  .price-feats li::before{content:"✓";color:var(--lilac);font-weight:700;}
  .price-card.hi .price-feats li::before{color:#c9b8ff;}

  /* ---------- Testimonials ---------- */
  .testimonials{padding:88px 0;}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .t-card{
    background:var(--mist);border-radius:16px;padding:28px;border:1px solid var(--line);
    display:flex;flex-direction:column;gap:18px;
  }
  .t-quote-mark{font-family:Georgia,serif;font-size:2.4rem;color:#cfc6e8;line-height:1;}
  .t-text{font-size:0.94rem;line-height:1.6;color:var(--ink);}
  .t-person{display:flex;align-items:center;gap:12px;}
  .t-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;}
  .t-name{font-size:0.88rem;font-weight:600;}
  .t-role{font-size:0.78rem;color:var(--ink-soft);}

  /* ---------- CTA ---------- */
  .cta{background:var(--violet);color:#fff;text-align:center;padding:86px 0;}
  .cta h2{font-size:2.4rem;max-width:16ch;margin:0 auto;line-height:1.18;}
  .cta p{color:#d8ccff;margin-top:16px;font-size:1rem;}
  .cta-buttons{display:flex;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap;}

  /* ---------- Footer ---------- */
  footer{background:#0f0a1e;color:#c9c2dd;padding:64px 0 26px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .foot-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:Georgia,serif;font-size:1.1rem;margin-bottom:14px;}
  .foot-tag{font-size:0.85rem;color:#8a80a8;max-width:32ch;line-height:1.6;}
  .foot-col h4{font-size:0.8rem;color:#fff;margin-bottom:16px;font-weight:600;}
  .foot-col a{display:block;font-size:0.86rem;color:#a79fc2;margin-bottom:11px;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:0.78rem;color:#8a80a8;flex-wrap:wrap;gap:10px;}

  /* ---------- Character full-screen modal (SPA-style page transitions) ---------- */
  .char-modal{
    position:fixed;inset:0;z-index:200;background:rgba(15,10,30,0);
    display:none;align-items:flex-start;justify-content:center;
    padding:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:background .32s ease;
  }
  .char-modal.visible{background:rgba(15,10,30,0.62);}
  .char-modal-panel{
    background:#fff;width:100%;min-height:100%;
    display:flex;flex-direction:column;
    opacity:0;transform:translateY(28px) scale(0.98);
    transition:opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
  }
  .char-modal.visible .char-modal-panel{opacity:1;transform:translateY(0) scale(1);}
  .char-modal-panel.page-fade{opacity:0;transform:translateY(10px);transition:opacity .18s ease, transform .18s ease;}
  .char-modal-top{
    position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
    padding:18px 24px;background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .char-modal-close{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
    font-size:1.1rem;display:flex;align-items:center;justify-content:center;color:var(--ink);
    transition:transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .char-modal-close:hover{border-color:var(--ink);transform:rotate(90deg);}
  .char-modal-share{
    font-size:0.82rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;
    padding:8px 14px;background:#fff;transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .char-modal-share:hover{border-color:var(--ink);color:var(--ink);}
  .char-modal-share.copied{background:var(--lilac-soft);border-color:var(--lilac);color:var(--violet-2);}
  .char-modal-body{
    flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:0;max-width:1180px;margin:0 auto;width:100%;
  }
  .char-modal-media{
    background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:40px 40px 24px;min-height:420px;position:relative;gap:18px;
  }
  /* Same "fade in only once loaded" treatment as the catalog cards. */
  .char-modal-media img{
    max-width:100%;max-height:60vh;width:auto;height:auto;object-fit:contain;border-radius:12px;
    opacity:0;transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  .char-modal-media img.loaded{opacity:1;}
  .char-modal-media img.fade-out{opacity:0;transform:scale(0.98);}
  .gallery-stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;}
  .gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
    background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:var(--ink);box-shadow:0 6px 18px rgba(20,10,45,0.12);z-index:3;
    transition:transform .15s ease, background .15s ease;
  }
  .gallery-nav:hover{background:var(--violet);color:#fff;transform:translateY(-50%) scale(1.08);}
  .gallery-prev{left:6px;}
  .gallery-next{right:6px;}
  .gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .gallery-thumb{
    width:56px;height:56px;border-radius:9px;overflow:hidden;border:2px solid transparent;
    background:var(--mist);cursor:pointer;flex-shrink:0;opacity:0.65;
    transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
  }
  .gallery-thumb:hover{opacity:1;transform:translateY(-2px);}
  .gallery-thumb img{width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .3s ease;}
  .gallery-thumb img.loaded{opacity:1;}
  .gallery-thumb.active{border-color:var(--violet);opacity:1;}
  .char-modal-info{padding:44px 44px 20px;}
  .char-modal-cat{font-size:0.78rem;letter-spacing:.03em;color:var(--lilac);}
  .char-modal-name{font-size:2.3rem;margin-top:8px;}
  .char-modal-meta{color:var(--ink-soft);font-size:0.9rem;margin-top:6px;}
  .char-modal-rating{margin-top:14px;font-size:0.9rem;color:var(--ink-soft);}
  .char-modal-desc{margin-top:22px;color:var(--ink-soft);font-size:0.98rem;line-height:1.7;max-width:48ch;}
  .char-modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
  .char-modal-tags span{
    font-size:0.78rem;color:var(--ink-soft);background:var(--mist);padding:6px 12px;
    border-radius:7px;border:1px solid var(--line);
  }
  .char-modal-buybar{
    margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
  .char-modal-price b{font-size:1.5rem;font-family:Georgia,serif;}
  .char-modal-price small{display:block;color:var(--ink-soft);font-size:0.8rem;margin-top:2px;}
  .char-modal-actions{display:flex;gap:12px;flex-wrap:wrap;}

  .char-modal-related{
    max-width:1180px;margin:0 auto;width:100%;padding:36px 44px 60px;border-top:1px solid var(--line);
  }
  .char-modal-related h3{font-size:1.2rem;font-weight:600;font-family:inherit;margin-bottom:18px;}
  .related-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .related-card{
    border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;
    transition:box-shadow .2s ease, transform .2s ease;
    animation:relIn .4s cubic-bezier(.22,1,.36,1) backwards;
  }
  .related-card:nth-child(1){animation-delay:.05s;}
  .related-card:nth-child(2){animation-delay:.1s;}
  .related-card:nth-child(3){animation-delay:.15s;}
  .related-card:nth-child(4){animation-delay:.2s;}
  @keyframes relIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
  .related-card:hover{box-shadow:0 14px 30px rgba(30,15,60,0.1);transform:translateY(-4px);}
  .related-media{background:var(--mist);aspect-ratio:7/10;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .related-media img{width:100%;height:100%;object-fit:contain;transition:opacity .3s ease, transform .4s ease;opacity:0;}
  .related-media img.loaded{opacity:1;}
  .related-card:hover .related-media img{transform:scale(1.05);}
  .related-body{padding:12px 14px 16px;}
  .related-name{font-family:Georgia,serif;font-size:1rem;}
  .related-price{color:var(--ink-soft);font-size:0.82rem;margin-top:4px;}

  @media (max-width:860px){
    .char-modal-body{grid-template-columns:1fr;}
    .char-modal-media{padding:24px 24px 16px;min-height:280px;}
    .char-modal-info{padding:28px 22px 10px;}
    .char-modal-name{font-size:1.7rem;}
    .char-modal-related{padding:26px 22px 50px;}
    .related-row{grid-template-columns:1fr 1fr;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .hero h1{font-size:2.5rem;}
    .how-grid{grid-template-columns:1fr;gap:40px;}
    .steps{grid-template-columns:1fr 1fr;}
    .card-grid{grid-template-columns:1fr 1fr;}
    .price-grid{grid-template-columns:1fr;}
    .price-card.hi{transform:none;}
    .t-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:720px){
    .nav-links{
      position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
      padding:18px 32px;gap:16px;border-bottom:1px solid var(--line);display:none;
    }
    .nav-links.open{display:flex;}
    .menu-toggle{display:block;}
    .wrap{padding:0 20px;}
    .hero{padding:48px 0 40px;}
    .hero h1{font-size:2.1rem;}
    .stats{gap:26px;}
    .gallery-grid{gap:10px;}
    .catalog-head{flex-direction:column;align-items:flex-start;}
    .card-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;gap:30px;}
    .cta h2{font-size:1.8rem;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-bottom{flex-direction:column;}
    #navCustomOrder{display: none;}
    #signInBtn{display: none;}
    header{
        padding: 20px;
    }
.btn {
   
    padding: 13px 20px!important;
  
  }
@media (max-width:389px){
    .btn {
   
    padding: 13px 10px!important;
    font-size: 10px!important;
  
  }
}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .char-modal, .char-modal-panel, .char-modal-media img, .gallery-nav, .gallery-thumb,
    .related-card, .p-media img, .p-card, .char-modal-close, .reveal, .shimmer-bg{
      transition:none !important;animation:none !important;
    }
    /* With reduced motion, sections should just be visible immediately
       rather than staying stuck at opacity:0 with no animation to reveal them. */
    .reveal{opacity:1;transform:none;}
  }