/* MyDigitCard — shared public-card styles.
   Identical for every theme; themed through CSS custom properties
   (--accent, --img-fit). Served as a static, cacheable file so it is
   downloaded once instead of inlined into every card page. */

/* ------------------------------------------------------------------
   Design tokens. Defined once, here, so a token can never resolve to
   two different fallbacks in two different rules (it used to: --text
   fell back to both #1f2433 and #15182b, --line to four values, and
   --muted to #888, which fails WCAG AA at 3.54:1 on white).

   Every value below is measured against white:
     --text     #0E1330  18.19:1  AAA
     --muted    #5B6178   6.13:1  AA
     --star     #D97706   3.19:1  passes the 3:1 minimum for icons
     --success  #15803D   5.02:1  AA, and white-on-it is AA for buttons
     --wa       #128C7E   4.14:1  WhatsApp brand, darker variant

   Themes override --accent (and may override any token) inside their own
   scope; nothing here is theme-specific.
   ------------------------------------------------------------------ */
:root{
    --text:#0E1330;
    --muted:#5B6178;
    --line:#E6E8F0;
    --card:#ffffff;
    --surface:#F7F8FC;
    --star:#D97706;
    --success:#15803D;
    --wa:#128C7E;
    --radius:16px;
    --btn-radius:12px;
}

.mdc-body{ --soft: color-mix(in srgb, var(--accent) 12%, transparent);
        --soft2: color-mix(in srgb, var(--accent) 7%, transparent); }
    .mdc-actions{ display:grid; grid-template-columns:repeat(var(--act-cols, 4),1fr); gap:8px; margin-top:18px; }
    .mdc-actions a{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px;
        border-radius:var(--btn-radius,12px); font-weight:600; font-size:11px; text-decoration:none;
        background:var(--soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); transition:.15s; }
    .mdc-actions a i{ font-size:17px; }
    .mdc-actions a:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
    .mdc-actions a.wa{ color:#16a34a; background:color-mix(in srgb,var(--success) 12%,transparent); border-color:color-mix(in srgb,var(--success) 24%,transparent); }
    .mdc-actions a.wa:hover{ background:var(--success); color:#fff; }
    /* Section chrome is token-driven: a theme can make sections flat, outlined,
       elevated, sharp or pill-shaped without touching the shared markup. This is
       what stops every theme from looking like the same card in a new colour. */
    .mdc-sec{
        margin-top:var(--sec-gap, 24px);
        background:var(--sec-bg, transparent);
        border:var(--sec-border, 0);
        border-radius:var(--sec-radius, 0);
        box-shadow:var(--sec-shadow, none);
        padding:var(--sec-pad, 0);
    }
    .mdc-sec h2{
        font-family:var(--h2-font, "Space Grotesk", sans-serif);
        font-weight:var(--h2-weight, 600);
        font-size:var(--h2-size, 12px);
        letter-spacing:var(--h2-track, .06em);
        text-transform:var(--h2-case, uppercase);
        color:var(--h2-color, var(--muted));
        justify-content:var(--h2-align, flex-start);
        margin-bottom:10px; display:flex; align-items:center; gap:7px; }
    .mdc-sec h2 i{ color:var(--accent); }
    .mdc-sec p{ color:var(--text); line-height:1.65; font-size:14px; white-space:pre-line; }
    .mdc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
    .mdc-meta span{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--accent); }
    .mdc-list{ display:grid; gap:8px; margin-top:8px; }
    .mdc-li{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
        border-radius:calc(var(--radius,16px) - 5px); text-decoration:none; color:var(--text); }
    .mdc-li .ic{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
        background:var(--soft); color:var(--accent); font-size:15px; }
    .mdc-li .tx{ min-width:0; font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
    .mdc-svc{ display:grid; gap:7px; margin-top:8px; }
    .mdc-svc div{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text); }
    .mdc-svc i{ color:var(--accent); margin-top:3px; font-size:13px; }
    .mdc-rev{ text-align:center; padding:20px; border-radius:var(--radius,16px); background:var(--soft2);
        border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); }
    .mdc-rev .stars{ color:var(--star); font-size:20px; letter-spacing:2px; }
    .mdc-stars-pick{ display:flex; gap:8px; font-size:32px; line-height:1; margin:4px 0 2px; }
    .mdc-stars-pick button{ background:none; border:none; padding:0; cursor:pointer; color:#d1d5db; transition:color .12s, transform .08s; }
    .mdc-stars-pick button.on{ color:var(--star); }
    .mdc-stars-pick button:active{ transform:scale(.9); }
    .mdc-upi-row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:2px 0 8px; }
    .mdc-upi-copy{ border:1px solid var(--accent); color:var(--accent); background:#fff; border-radius:8px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .mdc-upi-copy.ok{ background:var(--accent); color:#fff; }
    .mdc-rev .num{ font-family:"Space Grotesk"; font-weight:700; font-size:26px; color:var(--text); margin-top:6px; }
    .mdc-rev .cnt{ font-size:12px; color:var(--muted); margin-top:2px; }
    .mdc-rev a{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:9px 20px; border-radius:999px;
        background:var(--accent); color:#fff; font-weight:600; font-size:13px; text-decoration:none; }
    .mdc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .mdc-chips a{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; text-decoration:none;
        border:1px solid var(--line); color:var(--text); font-size:17px; transition:.15s; }
    .mdc-chips a:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
    .mdc-gal{ column-count:var(--gal-cols,3); column-gap:7px; }
    .mdc-gal img{ width:100%; height:auto; border-radius:calc(var(--radius,16px) - 7px); cursor:pointer; transition:.15s; display:block; margin:0 0 7px; break-inside:avoid; }
    .mdc-crop .mdc-gal{ column-count:unset; display:grid; grid-template-columns:repeat(var(--gal-cols,3),1fr); gap:7px; }
    .mdc-crop .mdc-gal img{ aspect-ratio:1/1; object-fit:cover; margin:0; }
    .mdc-gal img:hover{ transform:scale(.97); opacity:.92; }
    .mdc-map{ border:0; width:100%; height:200px; border-radius:calc(var(--radius,16px) - 5px); margin-top:4px; }
    .prod-enq{ flex:none; align-self:center; font-size:12px; font-weight:700; text-decoration:none; padding:7px 14px; border-radius:999px; background:var(--accent); color:#fff; white-space:nowrap; }
    .prod-enq:hover{ filter:brightness(1.08); }
    .prod-add{ flex:none; width:34px; height:34px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-size:14px; cursor:pointer; margin-left:6px; align-self:center; transition:transform .15s; }
    .prod-add.added{ transform:scale(1.25); }
    .mdc-order{ position:fixed; left:12px; right:12px; bottom:12px; z-index:9000; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0E1030; color:#fff; border-radius:16px; padding:11px 14px; box-shadow:0 14px 44px -12px rgba(0,0,0,.55); max-width:460px; margin:0 auto; }
    .mdc-order[hidden]{ display:none; }
    .mdc-order-info{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
    .mdc-order-btn{ background:#22A852; color:#fff; border:0; font-weight:700; font-size:14px; padding:11px 15px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; }
    .mdc-cart{ position:fixed; inset:0; z-index:9001; display:flex; align-items:flex-end; justify-content:center; }
    .mdc-cart[hidden]{ display:none; }
    .mdc-cart-back{ position:absolute; inset:0; background:rgba(8,10,25,.55); }
    .mdc-cart-sheet{ position:relative; width:100%; max-width:440px; background:var(--card); border-radius:20px 20px 0 0; padding:20px; max-height:82vh; overflow:auto; }
    @media(min-width:560px){ .mdc-cart{ align-items:center; } .mdc-cart-sheet{ border-radius:20px; } }
    .mdc-cart-head{ display:flex; justify-content:space-between; align-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; margin-bottom:8px; }
    .mdc-cart-head button{ border:0; background:#f0f0f5; width:30px; height:30px; border-radius:9px; font-size:18px; cursor:pointer; }
    .mdc-cart-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
    .mdc-cart-row .nm{ flex:1; font-size:14px; font-weight:600; }
    .mdc-cart-row .pr{ font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; }
    .mdc-qty{ display:flex; align-items:center; gap:9px; }
    .mdc-qty button{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:15px; cursor:pointer; line-height:1; }
    .mdc-qty b{ min-width:18px; text-align:center; }
    .mdc-cart-total{ display:flex; justify-content:space-between; font-weight:700; margin:14px 0; font-size:15px; }
    .mdc-cart-send{ width:100%; background:#22A852; color:#fff; border:0; font-weight:700; font-size:15px; padding:14px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
    .mdc-ok{ position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(8,10,25,.6); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s; }
    .mdc-ok.show{ opacity:1; }
    .mdc-ok-box{ width:100%; max-width:340px; background:var(--card); border-radius:22px; padding:32px 24px; text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); animation:mdcOccPop .5s cubic-bezier(.18,.9,.32,1.2); }
    .mdc-ok-ic{ width:66px; height:66px; margin:0 auto 14px; border-radius:50%; background:#12A67C; color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; }
    .mdc-ok-box h3{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--text); margin:0; }
    .mdc-ok-box p{ color:var(--text); opacity:.75; font-size:14px; margin:8px 0 20px; white-space:pre-line; }
    .mdc-ok-box button{ background:var(--accent); color:#fff; border:0; font-weight:700; font-size:14px; padding:11px 30px; border-radius:999px; cursor:pointer; }
    .mdc-penq{ position:fixed; inset:0; z-index:10002; display:flex; align-items:flex-end; justify-content:center; background:rgba(8,10,25,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s; }
    .mdc-penq.show{ opacity:1; }
    .mdc-penq[hidden]{ display:none; }
    .mdc-penq-back{ position:absolute; inset:0; }
    .mdc-penq-box{ position:relative; width:100%; max-width:420px; background:var(--card); border-radius:22px 22px 0 0; padding:24px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px rgba(0,0,0,.4); transform:translateY(18px); transition:transform .25s; }
    .mdc-penq.show .mdc-penq-box{ transform:translateY(0); }
    @media(min-width:560px){ .mdc-penq{ align-items:center; } .mdc-penq-box{ border-radius:22px; } }
    .mdc-penq-x{ position:absolute; top:14px; right:16px; width:30px; height:30px; border:0; background:#f0f0f5; border-radius:9px; font-size:18px; cursor:pointer; color:#555; }
    .mdc-penq-head{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
    .mdc-penq-prod{ display:flex; align-items:center; gap:12px; margin:10px 0 16px; }
    .mdc-penq-prod .im{ width:56px; height:56px; border-radius:12px; background:#eee center/cover no-repeat; flex:none; }
    .mdc-penq-prod b{ display:block; font-size:15px; }
    .mdc-penq-prod span{ color:var(--accent); font-weight:700; font-size:14px; }
    .mdc-penq-box input, .mdc-penq-box textarea{ width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:15px; margin-bottom:10px; font-family:inherit; }
    .mdc-penq-send{ width:100%; background:var(--accent); color:#fff; border:0; font-weight:700; font-size:15px; padding:13px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
    .mdc-penq-wa{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; color:#22A852; font-weight:700; font-size:14px; text-decoration:none; }
    .mdc-vid{ aspect-ratio:16/9; border-radius:calc(var(--radius,16px) - 6px); overflow:hidden; margin-top:10px; }
    .mdc-vid.vert{ aspect-ratio:9/16; max-width:320px; margin-left:auto; margin-right:auto; }
    .mdc-vid.v-instagram{ aspect-ratio:auto; width:100%; max-width:400px; height:640px; margin-left:auto; margin-right:auto; background:#fafafa; }
    .mdc-vid.v-instagram iframe{ height:640px; }
    .mdc-vid iframe{ width:100%; height:100%; border:0; }
    .mdc-vwatch{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; opacity:.85; }
    .mdc-vwatch:hover{ opacity:1; text-decoration:underline; }
    .mdc-cta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:24px; }
    .mdc-save,.mdc-share{ display:flex; align-items:center; justify-content:center; gap:8px; padding:13px;
        border-radius:var(--btn-radius,12px); font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:0; }
    .mdc-save{ background:var(--accent); color:#fff; }
    .mdc-share{ background:var(--success); color:#fff; }
    .mdc-save:hover,.mdc-share:hover{ filter:brightness(1.08); }
    .mdc-pay{ display:grid; gap:12px; margin-top:6px; }
    .mdc-pay-upi{ display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:var(--btn-radius,12px); background:var(--accent); color:#fff; font-weight:700; font-size:14px; text-decoration:none; }
    .mdc-upi-id{ text-align:center; font-size:13px; color:var(--muted); margin-top:-4px; }
    .mdc-qr{ width:170px; height:170px; object-fit:contain; margin:0 auto; display:block; border-radius:12px; background:#fff; padding:8px; border:1px solid var(--line); cursor:pointer; }
    .mdc-bank{ border:1px solid var(--line); border-radius:calc(var(--radius,16px) - 5px); overflow:hidden; }
    .mdc-bank div{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:13.5px; border-top:1px solid var(--line); }
    .mdc-bank div:first-child{ border-top:0; }
    .mdc-bank span{ color:var(--muted); }
    .mdc-bank b{ color:var(--text); font-weight:600; text-align:right; word-break:break-word; }
    .mdc-enq{ margin-top:24px; padding:18px; border-radius:var(--radius,16px); background:var(--soft2,color-mix(in srgb,var(--accent) 6%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 16%,transparent); }
    .mdc-enq select{ width:100%; margin-top:8px; padding:11px 13px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:14px; font-family:inherit; }
    .mdc-revsum{ font-weight:700; color:var(--text); margin-bottom:8px; }
    .mdc-rvitem{ padding:11px 0; border-top:1px solid var(--line); }
    .mdc-rvtop{ display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--text); }
    .mdc-rvtop span{ color:var(--star); letter-spacing:1px; }
    .mdc-rvitem p{ color:var(--text); opacity:.8; font-size:13.5px; margin-top:4px; }
    .mdc-enq input,.mdc-enq textarea{ width:100%; margin-top:8px; padding:11px 13px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:14px; font-family:inherit; }
    .mdc-enq button{ width:100%; margin-top:10px; padding:12px; border:0; border-radius:var(--btn-radius,12px); background:var(--accent); color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
    .mdc-enq-ok{ margin-top:10px; padding:11px 13px; border-radius:11px; background:color-mix(in srgb,var(--success) 14%,transparent); color:#15803d; font-size:13px; font-weight:600; }
    .mdc-qrwrap{ margin-top:14px; border:1px solid var(--line); border-radius:calc(var(--radius,16px) - 5px); overflow:hidden; }
    .mdc-qrwrap summary{ list-style:none; cursor:pointer; padding:13px 16px; font-weight:600; font-size:14px; color:var(--accent); display:flex; align-items:center; gap:9px; }
    .mdc-qrwrap summary::-webkit-details-marker{ display:none; }
    .mdc-qrbox{ padding:6px 16px 18px; text-align:center; }
    .mdc-qrbox #mdc-cardqr{ display:inline-block; padding:12px; background:#fff; border-radius:12px; border:1px solid var(--line); }
    .mdc-qrbox p{ margin-top:8px; font-size:12px; color:var(--muted); }
    /* Occasion popup */
    #mdc-occ{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(8,10,25,.62); backdrop-filter:blur(3px); }
    #mdc-occ.show{ display:flex; animation:mdcOccFade .35s ease; }
    @keyframes mdcOccFade{ from{ opacity:0 } to{ opacity:1 } }
    .mdc-occ-card{ position:relative; width:100%; max-width:340px; background:var(--card); border-radius:24px; padding:30px 24px 26px; text-align:center; overflow:hidden;
        box-shadow:0 30px 80px -20px rgba(0,0,0,.5); animation:mdcOccPop .5s cubic-bezier(.18,.9,.32,1.2); }
    @keyframes mdcOccPop{ from{ transform:scale(.8) translateY(20px); opacity:0 } to{ transform:none; opacity:1 } }
    .mdc-occ-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:90px; background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#ff7ad9)); }
    .mdc-occ-emoji{ position:relative; font-size:52px; line-height:1; animation:mdcOccBounce 1.8s ease-in-out infinite; }
    @keyframes mdcOccBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
    .mdc-occ-card h3{ position:relative; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:21px; color:var(--text); margin:14px 0 0; }
    .mdc-occ-card p{ position:relative; color:var(--text); opacity:.75; font-size:14px; line-height:1.55; margin:8px 0 0; white-space:pre-line; }
    .mdc-occ-img{ position:relative; width:100%; height:auto; border-radius:14px; margin-top:14px; object-fit:var(--img-fit,contain); max-height:220px; }
    .mdc-occ-cta{ position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:11px 22px; border-radius:999px; background:var(--accent); color:#fff; font-weight:700; font-size:14px; text-decoration:none; }
    .mdc-occ-x{ position:absolute; top:12px; right:14px; z-index:2; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.85); color:#333; font-size:18px; cursor:pointer; line-height:1; }
    .mdc-occ-confetti{ position:absolute; top:0; left:0; right:0; height:90px; overflow:hidden; }
    .mdc-occ-confetti i{ position:absolute; top:-12px; width:8px; height:8px; border-radius:2px; opacity:.9; animation:mdcConf 2.6s linear infinite; }
    @keyframes mdcConf{ to{ transform:translateY(110px) rotate(320deg); opacity:0 } }
    #mdc-lb{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
    #mdc-lb img{ max-width:94%; max-height:88vh; border-radius:8px; }
    #mdc-lb .x{ position:absolute; top:16px; right:22px; color:#fff; font-size:34px; cursor:pointer; line-height:1; }

/* ---------- Card header media (banner image OR intro video) ----------
   One shared rule so every theme gets the same behaviour. The video is
   lazy-loaded and only ever one embed, so it does not slow the card down. */
.mdc-hero-media{ position:relative; z-index:0; width:100%; overflow:hidden; background:var(--surface); }
.mdc-hero-banner img{ display:block; width:100%; height:100%; object-fit:cover; }
.mdc-hero-video{ aspect-ratio:16/9; background:#000; }
.mdc-hero-video.is-vertical{ aspect-ratio:9/16; max-height:70vh; }
.mdc-hero-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Public-card legal footer ---------- */
.mdc-legal{ max-width:460px; margin:0 auto; padding:22px 18px 30px; text-align:center; }
.mdc-legal p{ margin:0 0 6px; font-size:11.5px; line-height:1.6; color:var(--muted); }
.mdc-legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.mdc-legal a:hover{ color:var(--text); }
.mdc-legal-brand{ margin-top:10px; font-weight:600; }

/* ---------- Install as app / refresh ---------- */
.mdc-appbar{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; max-width:460px; margin:18px auto 0; padding:0 18px; }
.mdc-appbtn{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; }
.mdc-appbtn:hover{ color:var(--text); }
.mdc-appbtn[hidden]{ display:none; }


/* ---------- Banner placements, added across every theme ----------
   .mdc-hero-band  the theme already has a coloured header band; the banner
                   covers it, so the accent colour becomes the fallback.
   .mdc-hero-slot  the theme has none; the hero-slot partial bleeds the banner
                   out of the card's own padding and pins it to the top corners.
   Both render nothing at all when the owner has set no banner. */
.mdc-hero-band{ position:relative; overflow:hidden; }
.mdc-hero-band .mdc-hero-media{
    position:absolute; inset:0;
    height:100%;
    background:transparent;
    z-index:0;
}
.mdc-hero-band > :not(.mdc-hero-media){ position:relative; z-index:1; }
.mdc-hero-band .mdc-hero-video{ aspect-ratio:auto; }

.mdc-hero-slot .mdc-hero-media{
    height:var(--hero-h, 134px);
    background:transparent;
}
.mdc-hero-slot .mdc-hero-video{
    aspect-ratio:16/9;
    height:auto;
}


/* ---------- video: the two modes an iframe can't cover ---------- */
.mdc-vid.v-file{ position:relative; border-radius:var(--radius,12px); overflow:hidden; background:#000; }
.mdc-vid.v-file video{ display:block; width:100%; height:auto; max-height:70vh; }

.mdc-vlink{
    display:flex; align-items:center; gap:12px;
    margin-top:12px; padding:14px 16px;
    border:1px solid var(--line);
    border-radius:var(--radius,12px);
    background:var(--card);
    color:var(--text);
    text-decoration:none;
    transition:border-color .2s;
}
.mdc-vlink:hover{ border-color:var(--accent); }
.mdc-vlink-ico{
    flex:none; display:grid; place-items:center;
    height:40px; width:40px; border-radius:50%;
    background:var(--soft, color-mix(in srgb, var(--accent) 12%, transparent));
    color:var(--accent); font-size:16px;
}
.mdc-vlink-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mdc-vlink-txt b{ font-size:14px; font-weight:600; }
.mdc-vlink-txt small{ font-size:12px; color:var(--muted); }


/* ---------- "a newer version is available" ----------
   Offered, never imposed. Someone may be halfway through typing an enquiry, and
   silently reloading to fix a problem they never noticed would throw it away. */
.mdc-fresh{
    position:fixed;
    left:50%; bottom:18px;
    transform:translateX(-50%);
    z-index:9800;
    display:flex; align-items:center; gap:12px;
    max-width:calc(100vw - 28px);
    padding:11px 12px 11px 18px;
    border-radius:999px;
    background:rgba(14,19,48,.92);
    color:#fff;
    font-size:13px;
    backdrop-filter:blur(10px);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.7);
    animation:mdcFreshIn .3s cubic-bezier(.22,.61,.36,1);
}
.mdc-fresh span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdc-fresh button{
    flex:none;
    padding:7px 15px;
    border:0; border-radius:999px;
    background:#fff; color:#0E1330;
    font-size:13px; font-weight:600;
    cursor:pointer;
}
.mdc-fresh.is-out{
    opacity:0;
    transform:translate(-50%, 14px);
    transition:opacity .4s ease, transform .4s ease;
    pointer-events:none;
}
@keyframes mdcFreshIn{ from{ opacity:0; transform:translate(-50%, 16px) } }

@media (prefers-reduced-motion: reduce){
    .mdc-fresh{ animation:none }
    .mdc-fresh.is-out{ transition:none }
}


/* ============================================================
   PRODUCTS — a shop, not a to-do list.

   For most owners this section IS the business. It used to render as flat rows:
   a 58px thumbnail, a name, a price. That reads like an invoice. A grid of
   photos reads like a shop.

   Every image sits in a fixed 1:1 frame, so the grid never jumps as photos
   arrive. Layout shift on a product grid is what makes a shop feel broken on a
   slow connection — and slow connections are the normal case.

   Themes can set --prod-cols to override the column count.
   ============================================================ */

.mdc-prods{
    display:grid;
    grid-template-columns:repeat(var(--prod-cols, 2), minmax(0, 1fr));
    gap:12px;
    margin-top:12px;
}

.mdc-prod{
    display:flex; flex-direction:column;
    border:1px solid var(--line);
    border-radius:calc(var(--radius, 16px) - 2px);
    background:var(--card);
    overflow:hidden;
    color:inherit;
}

/* ---- the photo frame ---- */
.mdc-prod-shots{
    position:relative;
    aspect-ratio:1 / 1;            /* reserved BEFORE the image loads. No CLS. */
    background:color-mix(in srgb, var(--text) 5%, #fff);
    overflow:hidden;
}

.mdc-prod-track{
    display:flex;
    height:100%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.mdc-prod-track::-webkit-scrollbar{ display:none }

.mdc-prod-track img{
    flex:0 0 100%;
    width:100%; height:100%;
    object-fit:var(--img-fit, cover);
    scroll-snap-align:center;
}

.mdc-prod-dots{
    position:absolute; left:50%; bottom:8px;
    transform:translateX(-50%);
    display:flex; gap:4px;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(14,19,48,.45);
    backdrop-filter:blur(6px);
}
.mdc-prod-dots span{
    height:5px; width:5px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    transition:background .2s, width .2s;
}
.mdc-prod-dots span.is-on{ background:#fff; width:12px; border-radius:99px; }

.mdc-prod-count{
    position:absolute; top:8px; right:8px;
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(14,19,48,.55);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:11px; font-weight:600;
}

/* ---- the words ---- */
.mdc-prod-body{
    display:flex; flex-direction:column; gap:3px;
    padding:11px 12px 12px;
    flex:1;                        /* every card in a row ends level */
}
.mdc-prod-name{
    font-size:14px; font-weight:600;
    color:var(--text);
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;          /* two lines, then ellipsis — a long name
                                      must not push one card taller than the rest */
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.mdc-prod-price{
    font-size:14px; font-weight:700;
    color:var(--accent);
}
.mdc-prod-act{
    display:flex; gap:6px; align-items:center;
    margin-top:auto;               /* pins the button to the bottom of every card */
    padding-top:10px;
}
.mdc-prod-act .prod-enq{
    flex:1;
    display:block;
    padding:9px 10px;
    border-radius:var(--btn-radius, 10px);
    background:var(--accent);
    color:#fff;
    font-size:12.5px; font-weight:600;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.mdc-prod-act .prod-enq:hover{ filter:brightness(1.07) }
.mdc-prod-act .prod-add{
    flex:none;
    height:36px; width:36px;
    display:grid; place-items:center;
    border:1px solid var(--line);
    border-radius:var(--btn-radius, 10px);
    background:var(--card);
    color:var(--accent);
    cursor:pointer;
}

@media (max-width:360px){
    .mdc-prods{ grid-template-columns:1fr; }
}

/* ============================================================
   VIDEO FACADE

   A YouTube iframe is roughly a megabyte of player JavaScript before it paints
   one frame. Three videos on a card is three megabytes, on a phone, on Indian
   mobile data — and while it downloads the visitor stares at a blank rectangle.
   That is the "videos are slow and go blank when I scroll" bug.

   So the card ships a still image (~15 KB, appears instantly) with a play button
   on it. The player is only fetched when someone actually taps it. Nobody pays
   the megabyte until they want the video.
   ============================================================ */

.mdc-vtitle{ font-size:13px; font-weight:600; color:var(--text); margin-top:12px; }

.mdc-vfacade{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    margin-top:8px;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius, 14px);
    overflow:hidden;
    background:color-mix(in srgb, var(--text) 8%, #000);
    cursor:pointer;
}
.mdc-vfacade.vert{ aspect-ratio:9 / 16; max-width:290px; margin-left:auto; margin-right:auto; }

.mdc-vfacade img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.mdc-vfacade:hover img{ transform:scale(1.03) }

.mdc-vfacade-blank{
    position:absolute; inset:0;
    display:grid; place-items:center;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 55%, #000),
        color-mix(in srgb, var(--accent) 18%, #000));
    color:rgba(255,255,255,.6);
    font-size:13px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
}

.mdc-vfacade-play{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    height:58px; width:58px;
    display:grid; place-items:center;
    border-radius:50%;
    background:rgba(14,19,48,.7);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:19px;
    padding-left:3px;              /* optically centres the triangle */
    box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), background .22s;
}
.mdc-vfacade:hover .mdc-vfacade-play{
    transform:translate(-50%, -50%) scale(1.08);
    background:var(--accent);
}

/* once tapped, the facade becomes the player's frame */
.mdc-vfacade.is-live{ cursor:default; background:#000; }
.mdc-vfacade.is-live img,
.mdc-vfacade.is-live .mdc-vfacade-play,
.mdc-vfacade.is-live .mdc-vfacade-blank{ display:none }
.mdc-vfacade iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
}

@media (prefers-reduced-motion: reduce){
    .mdc-vfacade img,
    .mdc-vfacade-play{ transition:none }
    .mdc-vfacade:hover img{ transform:none }
}