/* =========================================================
   Best Ever Medical — Single Product Template Styles
   Loads ONLY on single product pages (is_singular('product'))
   via functions.php conditional enqueue.
   ========================================================= */

/* --- Hero --- */
.sp-hero {
    min-height: 85vh;
    padding: 150px 5vw 80px 5vw;
    display: flex; align-items: center; position: relative; z-index: 10;
    /* The static site never sets box-sizing on .sp-hero, so it uses
       the browser default (content-box): max-width caps the content
       only, and the 5vw side padding is added ON TOP of that,
       legitimately rendering wider than 1400px. Elementor applies a
       global box-sizing: border-box reset to everything in its scope
       (including this section), under which max-width caps the WHOLE
       box, padding included — so the same 1400px value caps the
       total width instead, leaving noticeably less room for content.
       Compensating here (+10vw = 5vw padding on each side) restores
       the original's effective content width under border-box. */
    max-width: calc(1400px + 10vw);
    margin: 0 auto;
}
.sp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; width: 100%; align-items: center; }
.sp-hero-left { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }

.sp-brand { font-size: 11px; font-weight: 700; color: var(--white); background-color: var(--card-gold); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; display: inline-block; padding: 6px 14px; border: 1px solid var(--card-gold); border-radius: 4px; opacity: 0; transform: translateY(20px); }
.sp-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(50px, 7vw, 90px); line-height: 0.95; font-weight: 400; margin: 0 0 30px 0; color: var(--text-dark); letter-spacing: -0.02em; opacity: 0; transform: translateY(30px); }
.sp-desc { font-size: clamp(16px, 2vw, 20px); line-height: 1.6; color: #475569; font-weight: 300; margin: 0 0 40px 0; max-width: 500px; opacity: 0; transform: translateY(30px); }

.sp-stats {
    /* Explicit 3-column grid instead of flex-wrap. The static site
       uses flex with no fixed per-item width, so whether 3 stats fit
       on one row depends on exact available width and each stat's
       text length — fragile across 20 different products with
       varying content. A fixed 3-column grid guarantees the layout
       you want (Category / Key Ingredient / Duration always in one
       row, each wrapping internally as needed) regardless of text
       length or minor width differences between products or browsers. */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px;
    border-top: 1px solid rgba(0,0,0,0.08); padding-top: 30px; width: 100%;
    opacity: 0; transform: translateY(30px);
}
.stat-item { display: flex; flex-direction: column; gap: 5px; }
.stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 600; }
.stat-val { font-size: 16px; font-weight: 500; color: var(--text-dark); }

.sp-hero-right { position: relative; height: 70vh; border-radius: 0; background: radial-gradient(circle at center, rgba(230, 176, 34, 0.12) 0%, transparent 65%); border: none; overflow: visible; opacity: 0; transform: scale(0.95); display: flex; align-items: center; justify-content: center; }
.sp-hero-img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.05); }

/* --- Advantages Bar --- */
.sp-advantages { padding: 80px 5vw; background: var(--bg-cream); border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); position: relative; z-index: 10; }
.adv-grid { display: flex; justify-content: space-between; max-width: 1400px; margin: 0 auto; flex-wrap: wrap; gap: 40px; }
.adv-item { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; min-width: 200px; border-left: 1px solid rgba(0,0,0,0.08); padding-left: 30px; }
.adv-icon { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-style: italic; color: var(--card-gold); line-height: 1; font-weight: 400; }
.adv-text { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--text-dark); line-height: 1.4; }

/* --- Science / Technical Features --- */
.sp-science { padding: 140px 5vw; background-color: var(--primary-dark); color: var(--white); position: relative; z-index: 10; }
.science-container { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.sci-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; font-weight: 300; margin: 0 0 20px 0; color: var(--white); }
.sci-header p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); font-weight: 300; }

.sci-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.sci-block { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 30px; }
.sci-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--card-gold); margin-bottom: 25px; font-weight: 600; }

.sci-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sci-list li {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.5vw, 28px); padding: 25px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
    display: flex; align-items: flex-start; gap: 20px; font-weight: 400; letter-spacing: 0.01em;
    transition: color 0.3s ease, padding-left 0.4s ease; cursor: default;
}
.sci-list li:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.sci-list li:hover { color: var(--white); padding-left: 15px; }
.sci-list-num { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--card-gold); font-weight: 600; padding-top: 8px; }

/* --- Clinical Protocols --- */
.sp-protocol { padding: 140px 5vw; background: var(--bg-cream); position: relative; z-index: 10; }
.proto-container { max-width: 1300px; margin: 0 auto; display: flex; gap: 8vw; align-items: flex-start; }
.proto-left { flex: 0 0 35%; position: sticky; top: 140px; }
.proto-left h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; font-weight: 400; color: var(--text-dark); margin: 0 0 20px 0; }
.proto-left p { font-size: 16px; color: #64748b; line-height: 1.6; }

.proto-right { flex: 1; display: flex; flex-direction: column; gap: 80px; }
.proto-group h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; color: var(--primary-dark); margin: 0 0 30px 0; padding-bottom: 15px; }

.step-list { display: flex; flex-direction: column; gap: 0; counter-reset: protocol-counter; border-top: 1px solid rgba(0,0,0,0.08); }
.step-card { background: transparent; padding: 40px 0; border: none; border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; gap: 40px; align-items: flex-start; transition: padding-left 0.4s ease, border-color 0.4s ease; border-radius: 0; opacity: 0; transform: translateY(20px); }
.step-card:hover { transform: none; padding-left: 30px; border-color: var(--primary-dark); }
.step-num { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: #cbd5e1; background: transparent; width: auto; height: auto; border-radius: 0; line-height: 0.8; transition: color 0.4s; display: block; }
.step-card:hover .step-num { color: var(--primary-dark); font-style: italic; }
.step-num::before { counter-increment: protocol-counter; content: "0" counter(protocol-counter); }
.step-text { font-size: 18px; color: var(--text-dark); line-height: 1.6; padding-top: 0; font-weight: 300; }

/* --- Before / After --- */
.sp-ba { padding: 100px 5vw; background: var(--white); position: relative; z-index: 10; }
.ba-container { max-width: 1400px; margin: 0 auto; }
.ba-header { text-align: center; margin-bottom: 80px; }
.ba-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; font-weight: 400; color: var(--text-dark); margin: 0; }

.ba-grid { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.ba-card { border-radius: 20px; overflow: hidden; background: #f8fafc; border: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,0.04); }

.ba-slider { position: relative; width: 100%; height: 500px; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; }
.ba-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-img.before { z-index: 1; filter: grayscale(100%) contrast(0.85) brightness(1.1); }
.ba-img.after { z-index: 2; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--white); z-index: 3; transform: translateX(-50%); pointer-events: none; }
.ba-handle-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.ba-handle-circle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; }
.ba-tag { position: absolute; bottom: 15px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dark); z-index: 4; pointer-events: none; }
.ba-tag.tag-before { left: 15px; }
.ba-tag.tag-after { right: 15px; }

.ba-info { padding: 25px; text-align: center; }
.ba-info h4 { font-size: 18px; font-family: 'Cormorant Garamond', serif; font-weight: 600; margin: 0 0 5px 0; color: var(--primary-dark); }
.ba-info p { font-size: 13px; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 1px; }

/* --- FAQ --- */
.sp-faq { padding: 120px 5vw; background: var(--bg-cream); position: relative; z-index: 10; border-top: 1px solid rgba(0,0,0,0.08); }
.faq-container { max-width: 900px; margin: 0 auto; }
.faq-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 4vw, 54px); text-align: center; margin: 0 0 60px 0; font-weight: 400; }

.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08) !important; transition: border-color 0.4s ease; }
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,0.08) !important; }
.faq-item:hover { border-color: rgba(12, 77, 41, 0.3) !important; }

.faq-question {
    width: 100%; background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--text-dark) !important; display: flex; justify-content: space-between; align-items: center;
    padding: 40px 0 !important; margin: 0; border-radius: 0 !important; text-align: left;
    font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3vw, 32px); font-weight: 400;
    text-transform: none; letter-spacing: -0.01em; transition: color 0.4s ease; cursor: pointer;
}
.faq-question:hover { color: var(--primary-dark) !important; }
.faq-item.active .faq-question { color: var(--primary-dark) !important; font-style: italic; }

.faq-toggle { width: 44px; height: 44px; border-radius: 50% !important; background: transparent; color: var(--text-dark); border: 1px solid rgba(0,0,0,0.08) !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 20px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s, color 0.4s, border-color 0.4s; }
.faq-item.active .faq-toggle { transform: rotate(45deg); background: var(--primary-dark) !important; color: var(--white) !important; border-color: var(--primary-dark) !important; }
.faq-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; }

.faq-answer-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.active .faq-answer-wrapper { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { margin: 0 0 40px 0; font-size: 17px; line-height: 1.6; color: #475569; max-width: 90%; font-weight: 300; }

/* --- Book a Call CTA --- */
.sp-cta-section {
    padding: 100px 5vw; text-align: center;
    /* Background matches mega-footer-block on purpose (see custom.css)
       so the CTA section and footer below it read as one continuous
       block — hardcoded to the literal value rather than
       var(--footer-bg): this codebase has repeatedly hit cases where
       a CSS custom property silently fails to resolve inside the
       Elementor shortcode widget's DOM subtree specifically (see the
       --border-color fix earlier in this file for the same pattern),
       so the literal value sidesteps that entirely regardless of cause. */
    background: #062e17;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* Rounded top corners + the -20px/overflow:hidden combo are the
       exact same technique .mega-footer-block uses (custom.css) —
       applied here too so the rounding visibly begins at the TOP of
       the CTA section (transitioning from the cream page above),
       rather than only appearing where the footer starts below it. */
    border-top-left-radius: 60px; border-top-right-radius: 60px;
    margin-top: -20px; position: relative; z-index: 95; overflow: hidden;
    box-sizing: border-box;
}
.sp-cta-container { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.giant-cta-text { font-family: 'Cormorant Garamond', serif; font-size: clamp(50px, 14vw, 180px); line-height: 0.9; margin: 0 0 20px 0; text-align: center; font-weight: 300; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sp-cta-subtitle { font-size: clamp(16px, 2vw, 18px); color: rgba(255,255,255,0.7); margin-bottom: 40px; text-align: center; max-width: 600px; }
.sp-cta-btn { background: var(--white); color: var(--primary-dark); padding: 18px 44px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block; }
.sp-cta-btn:hover, .sp-cta-btn:visited, .sp-cta-btn:focus { color: var(--primary-dark) !important; }
.sp-cta-btn:hover { background: var(--card-gold); color: var(--white) !important; transform: translateY(-2px); }

/* --- Book a Call inquiry form (ported from static site, unprefixed
   classes matching the original exactly since these don't clash with
   anything else in this stylesheet) --- */
.cta-form { width: 100%; max-width: 800px; display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; }
.form-group { flex: 1 1 calc(50% - 20px); display: flex; flex-direction: column; position: relative; }
.form-group.full { flex: 1 1 100%; }
.form-input {
    background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--white) !important; font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 15px 0;
    outline: none !important; box-shadow: none !important; border-radius: 0 !important;
    transition: border-color 0.3s ease; width: 100%; box-sizing: border-box;
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-input:focus { border-bottom-color: var(--card-gold) !important; }
.submit-wrapper { width: 100%; display: flex; justify-content: flex-end; margin-top: 20px; }
.btn-submit {
    width: 72px !important; height: 72px !important; border-radius: 50% !important; background: var(--white) !important;
    color: var(--primary-dark) !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; box-sizing: border-box !important;
    display: flex !important; align-items: center; justify-content: center; transition: background 0.3s; cursor: pointer;
}
.btn-submit svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }

/* --- Mobile Responsive --- */
@media (max-width: 1024px) {
    .sp-hero { padding-top: 150px; min-height: auto; }
    .sp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .sp-hero-right { height: 400px; }
    .adv-item { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px; flex: 1 1 100%; }
    .science-container, .proto-container { grid-template-columns: 1fr; display: flex; flex-direction: column; gap: 40px; }
    .proto-left { position: relative; top: 0; }
    .sci-list li { flex-direction: column; gap: 5px; }
    .step-card { flex-direction: column; gap: 20px; padding: 30px 0; }
    .step-card:hover { padding-left: 0; }
    .ba-slider { height: 350px; }
    .form-group { flex: 1 1 100%; }
    .sp-cta-section { border-top-left-radius: 40px; border-top-right-radius: 40px; }
}

/* Phone-specific breakpoint — matches the static site's second
   breakpoint, which .ba-slider also uses there (350px height applies
   at 768px in the reference; ours already applies it a bit earlier,
   at 1024px, above — a harmless minor deviation, kept for a smoother
   transition on mid-size tablets). sp-title needed porting here since
   it wasn't covered by the 1024px breakpoint at all in the original. */
@media (max-width: 768px) {
    .sp-title { font-size: 42px !important; }
    /* Grid columns don't reflow automatically like flex-wrap did —
       a fixed 3-column grid needs an explicit override here, or
       three equal columns would be too cramped to read on a phone.
       Full single-column stack matches the pattern already used for
       every other section on mobile (advantages, steps, form). */
    .sp-stats { grid-template-columns: 1fr; gap: 20px; }
}