/* ==========================================================================
   TerzaPower Pen 20mg — theme + unique sections (loads product_page_base.css)
   Teal biotech. Shared primitives are in the base; here: palette + hero grid,
   count-up stats, dual-mechanism, effects bento, titration timeline.
   ========================================================================== */

.pdp-page.theme-pen {
    --pdp-bg: #04211d;
    --pdp-bg2: #061a17;
    --pdp-ink: #eafaf5;
    --pdp-muted: #8fb3ab;
    --pdp-accent: #12d9a3;
    --pdp-accent2: #2fe4ff;
    --pdp-accent-ink: #04231e;
    --pdp-line: rgba(255,255,255,.08);
    --pdp-card: rgba(255,255,255,.035);
    --pdp-glass: rgba(9,34,30,.55);
    --pdp-alt-mid: #052723;
    --pdp-hero-bg:
        radial-gradient(120% 80% at 80% 10%, rgba(18,217,163,.16), transparent 60%),
        radial-gradient(90% 70% at 10% 90%, rgba(47,228,255,.10), transparent 55%),
        linear-gradient(180deg, var(--pdp-bg2), var(--pdp-bg));
    --pdp-cta-bg:
        radial-gradient(90% 120% at 100% 0%, rgba(18,217,163,.14), transparent 55%),
        linear-gradient(180deg, #052723, var(--pdp-bg));
}

/* hero motif */
.theme-pen .tzp-hero-grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--pdp-line) 1px, transparent 1px), linear-gradient(90deg, var(--pdp-line) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(80% 60% at 60% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(80% 60% at 60% 40%, #000 40%, transparent 100%); opacity: .6; }
.theme-pen .tzp-hero-glow { position: absolute; z-index: -1; width: 60vmax; height: 60vmax; right: -10vmax; top: -18vmax; background: radial-gradient(circle, rgba(18,217,163,.22), transparent 62%); filter: blur(6px); animation: tzp-pulse 9s ease-in-out infinite; }
@keyframes tzp-pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.theme-pen .tzp-hero-media::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(18,217,163,.30), transparent 65%); filter: blur(10px); }
.theme-pen .tzp-pen { position: relative; width: 100%; max-width: 560px; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); animation: tzp-float 7s ease-in-out infinite; }
@keyframes tzp-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
.theme-pen .tzp-scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--pdp-muted); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.theme-pen .tzp-scroll-hint span { width: 22px; height: 34px; border: 1px solid var(--pdp-line); border-radius: 12px; position: relative; }
.theme-pen .tzp-scroll-hint span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--pdp-accent); transform: translateX(-50%); animation: tzp-scroll 1.6s ease-in-out infinite; }
@keyframes tzp-scroll { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* dual mechanism */
.theme-pen .tzp-mech { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.theme-pen .tzp-node { position: relative; padding: 30px; border-radius: 20px; border: 1px solid var(--pdp-line); background: linear-gradient(160deg, rgba(18,217,163,.08), rgba(255,255,255,.02)); overflow: hidden; }
.theme-pen .tzp-node h3 { font-size: 1.35rem; margin: 0 0 8px; }
.theme-pen .tzp-node p { color: var(--pdp-muted); line-height: 1.55; margin: 0; }
.theme-pen .tzp-node .tag { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pdp-accent2); font-weight: 700; }
.theme-pen .tzp-node--merge { grid-column: 1 / -1; text-align: center; background: linear-gradient(120deg, rgba(18,217,163,.14), rgba(47,228,255,.10)); }
.theme-pen .tzp-node--merge h3 { font-size: 1.6rem; }

/* stats / counters */
.theme-pen .tzp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.theme-pen .tzp-stat { padding: 34px 26px; border-radius: 20px; background: var(--pdp-card); border: 1px solid var(--pdp-line); text-align: center; }
.theme-pen .tzp-stat .num { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 850; letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, var(--pdp-accent), var(--pdp-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-pen .tzp-stat .num .pfx { font-size: .5em; vertical-align: super; }
.theme-pen .tzp-stat .lbl { margin-top: 12px; font-weight: 700; }
.theme-pen .tzp-stat .src { margin-top: 6px; color: var(--pdp-muted); font-size: .82rem; }

/* effects bento */
.theme-pen .tzp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.theme-pen .tzp-effect { padding: 24px; border-radius: 18px; background: var(--pdp-card); border: 1px solid var(--pdp-line); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.theme-pen .tzp-effect:hover { transform: translateY(-4px); border-color: rgba(18,217,163,.5); background: rgba(18,217,163,.06); }
.theme-pen .tzp-effect .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(18,217,163,.12); color: var(--pdp-accent); margin-bottom: 14px; }
.theme-pen .tzp-effect h4 { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }

/* titration timeline */
.theme-pen .tzp-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 34px; }
.theme-pen .tzp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--pdp-line); }
.theme-pen .tzp-track::after { content: ""; position: absolute; left: 0; top: 15px; height: 2px; width: var(--tzp-fill, 0%); background: linear-gradient(90deg, var(--pdp-accent), var(--pdp-accent2)); transition: width 1.4s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 14px var(--pdp-accent); }
.theme-pen .tzp-step { position: relative; text-align: center; padding-top: 34px; }
.theme-pen .tzp-step .knob { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--pdp-bg); border: 2px solid var(--pdp-accent); }
.theme-pen .tzp-step.is-opt .knob { border-style: dashed; opacity: .7; }
.theme-pen .tzp-step .mg { font-weight: 800; font-size: 1.05rem; }
.theme-pen .tzp-step .wk { color: var(--pdp-muted); font-size: .76rem; margin-top: 2px; }
.theme-pen .tzp-titration-note { margin-top: 26px; color: var(--pdp-muted); font-size: .92rem; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
    .theme-pen .tzp-pen, .theme-pen .tzp-hero-glow { animation: none !important; }
}
@media (max-width: 900px) {
    .theme-pen .tzp-mech { grid-template-columns: 1fr; }
    .theme-pen .tzp-stats { grid-template-columns: 1fr; }
    .theme-pen .tzp-bento { grid-template-columns: 1fr 1fr; }
    .theme-pen .tzp-track { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; }
    .theme-pen .tzp-track::before, .theme-pen .tzp-track::after { display: none; }
    .theme-pen .tzp-step { padding: 12px 0 12px 34px; text-align: left; display: flex; gap: 12px; align-items: baseline; }
    .theme-pen .tzp-step .knob { top: 16px; left: 0; transform: none; }
}
@media (max-width: 520px) {
    .theme-pen .tzp-bento { grid-template-columns: 1fr; }
}