/* All styles scoped under .ondo-wrap to avoid theme conflicts. */
.ondo-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:var(--ondo-pad-y) var(--ondo-pad-x);
    display:grid;
    grid-template-columns:1.05fr 0.85fr;
    gap:56px;
    align-items:start;
    background:var(--ondo-bg);
    color:var(--ondo-ink);
    font-family:var(--ondo-font-serif);
    box-sizing:border-box;
    width:100%;
    overflow:hidden;               /* contain any bleed */
}
.ondo-wrap *,
.ondo-wrap *::before,
.ondo-wrap *::after{
    box-sizing:border-box;
    max-width:100%;
}
.ondo-wrap img,
.ondo-wrap svg{
    max-width:100%;
    height:auto;
}
.ondo-eyebrow{
    font-family:var(--ondo-font-sans);
    letter-spacing:.14em;
    font-size:12px;
    font-weight:600;
    color:var(--ondo-accent);
    text-transform:uppercase;
    margin:0 0 18px;
}
.ondo-heading{
    font-family:var(--ondo-font-heading, var(--ondo-font-serif));
    font-size:var(--ondo-heading-size);
    line-height:var(--ondo-heading-lh);
    letter-spacing:var(--ondo-heading-ls);
    font-weight:var(--ondo-heading-weight);
    margin:0 0 18px;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.ondo-sub{
    font-family:var(--ondo-font-sans);
    color:var(--ondo-ink-soft);
    font-size:var(--ondo-body-size);
    line-height:var(--ondo-body-lh);
    letter-spacing:var(--ondo-body-ls);
    max-width:46ch;
    margin:0 0 34px;
}
.ondo-tablist{
    border-top:1px solid var(--ondo-line);
    width:100%;
}
.ondo-tab{
    all:unset;
    /* `all:unset` above resets box-sizing to content-box, so re-declare it here
       or width:100% + padding overflows the column. */
    box-sizing:border-box;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    cursor:pointer;
    padding:var(--ondo-tab-pad) 20px;
    border-bottom:1px solid var(--ondo-line);
    font-family:var(--ondo-font-sans);
    transition:background var(--ondo-transition) ease,color var(--ondo-transition) ease,transform var(--ondo-transition) ease;
    border-radius:0;
    gap:12px;
    flex-wrap:wrap;                /* let content wrap on narrow widths */
}
.ondo-tab .ondo-left-inner{
    display:flex;
    align-items:baseline;
    gap:16px;
    min-width:0;
    flex:1 1 auto;
}
.ondo-tab .ondo-idx{
    font-family:var(--ondo-font-serif);
    font-style:italic;
    font-size:14px;
    color:var(--ondo-accent);
    min-width:22px;
    flex-shrink:0;
}
.ondo-tab .ondo-name{
    font-size:15px;
    font-weight:600;
    color:var(--ondo-ink);
    word-break:break-word;
}
.ondo-tab .ondo-desc{
    font-size:14px;
    color:var(--ondo-ink-soft);
    text-align:right;
    word-break:break-word;
    flex-shrink:1;
}
.ondo-tab[aria-selected="true"]{
    background:var(--ondo-tab-active-bg);
    border-radius:0;
    border-bottom-color:var(--ondo-tab-active-bg);
}
.ondo-tab[aria-selected="true"] .ondo-name{color:var(--ondo-tab-active-text);}
.ondo-tab[aria-selected="true"] .ondo-desc{color:var(--ondo-tab-active-text);opacity:.75;}
/* Pointer devices only — on touch, :hover sticks after a tap and the scaled
   tab spills out of the column. */
@media (hover:hover) and (pointer:fine){
    .ondo-tab:not([aria-selected="true"]):hover{
        background:var(--ondo-tab-hover);
        transform:scale(var(--ondo-hover-scale));
    }
}
.ondo-tab:focus-visible{outline:2px solid var(--ondo-accent);outline-offset:2px;}

.ondo-card{
    background:var(--ondo-panel);
    border:1px solid var(--ondo-line);
    border-radius:var(--ondo-card-radius);
    overflow:hidden;
    width:100%;
    scroll-margin-top:80px;        /* account for sticky headers when scrolling to it */
}
.ondo-stage{
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ondo-panel);
    padding:20px;
}
.ondo-vial-svg,
.ondo-vial-img{
    width:150px;
    height:auto;
    filter:drop-shadow(var(--ondo-card-shadow));
    transition:transform var(--ondo-transition) ease;
}
.ondo-vial-img{max-width:60%;width:auto;max-height:240px;object-fit:contain;}
.ondo-card-body{padding:28px 30px 30px;border-top:1px solid var(--ondo-line);}
.ondo-row-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
}
.ondo-prod-name{
    font-family:var(--ondo-font-sans);
    font-size:22px;letter-spacing:.02em;margin:0 0 12px;font-weight:700;
    word-break:break-word;
}
.ondo-price{
    font-family:var(--ondo-font-sans);
    font-weight:700;font-size:16px;white-space:nowrap;padding-top:2px;
}
.ondo-desc-text{
    font-family:var(--ondo-font-sans);
    font-size:14.5px;line-height:1.55;color:var(--ondo-ink);margin:0 0 16px;max-width:44ch;
}
.ondo-meta{
    font-family:var(--ondo-font-sans);
    font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--ondo-accent);text-transform:uppercase;margin:0 0 22px;
    word-break:break-word;
}
.ondo-add-btn{
    display:block;text-align:center;background:var(--ondo-btn-bg);color:var(--ondo-btn-text);
    font-family:var(--ondo-font-sans);
    font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:var(--ondo-btn-pad);border-radius:var(--ondo-btn-radius);
    text-decoration:none;cursor:pointer;transition:background var(--ondo-transition) ease;
    width:100%;
}
.ondo-add-btn:hover{background:var(--ondo-btn-bg-hover);color:var(--ondo-btn-text);}
/* Transient add-to-cart states. Purely additive — the button keeps its own
   colors, size and class so the design is unchanged at rest. */
.ondo-add-btn.is-loading{opacity:.65;cursor:progress;pointer-events:none;}
.ondo-add-btn.is-added{background:var(--ondo-btn-bg-hover);}
.ondo-add-btn.is-error{background:var(--ondo-accent);}

/* ==== Tablet ==== */
@media (max-width:1024px){
    .ondo-wrap{gap:36px;padding:48px 24px;}
}

/* ==== Mobile ==== */
@media (max-width:768px){
    .ondo-wrap{
        grid-template-columns:1fr;
        padding:32px 16px;
        gap:28px;
    }
    /* Scale down on narrow screens, but never past the admin's Heading Size
       (a hardcoded max here would silently ignore that setting). */
    .ondo-heading{font-size:min(var(--ondo-heading-size), max(28px, 7vw));}
    .ondo-tab{
        padding:14px;
        gap:4px;
        align-items:flex-start;
    }
    .ondo-tab .ondo-left-inner{gap:10px;flex-basis:100%;}
    .ondo-tab .ondo-name{font-size:14px;}
    .ondo-tab .ondo-desc{
        font-size:12.5px;
        /* Drop under the name and line up with it: idx width (22px) + gap (10px). */
        flex-basis:100%;
        text-align:left;
        padding-left:32px;
        line-height:1.45;
    }
    .ondo-card-body{padding:22px 20px 24px;}
    .ondo-prod-name{font-size:20px;}
    .ondo-stage{min-height:220px;}
    .ondo-vial-svg,.ondo-vial-img{width:130px;}
}

/* ==== Small mobile ==== */
@media (max-width:420px){
    .ondo-wrap{padding:24px 12px;}
    .ondo-tab{padding:12px 10px;}
    /* Description already stacks below the name at <=768px; just tighten the
       indent to match the narrower gap here. */
    .ondo-tab .ondo-left-inner{gap:8px;}
    .ondo-tab .ondo-desc{padding-left:30px;}
    .ondo-card-body{padding:20px 16px 22px;}
    .ondo-row-top{gap:8px;}
}