/*
 * Shared product detail layout.
 *
 * Both product families use this file so a prescription formulation and a
 * purchasable supplement present with the same structure and rhythm — only the
 * commerce block and the sections themselves differ.
 */

.af-pdp {
    background: #f7f9fd;
    min-height: 60vh;
    overflow-x: clip;
    padding: 3.5rem 0 5.5rem;
}

.af-pdp-back {
    display: inline-block;
    font-size: .85rem;
    font-weight: 750;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

/* ------------------------------------------------------------------ hero ---*/

.af-pdp-hero {
    align-items: start;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.af-pdp-gallery {
    background: #eef5ff;
    border-radius: 24px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.25rem;
}

.af-pdp-gallery img {
    background: #fff;
    border-radius: 14px;
    height: 260px;
    object-fit: contain;
    width: 100%;
}

/* A single image should fill the frame rather than sit in half of it. */
.af-pdp-gallery--single {
    grid-template-columns: 1fr;
}

.af-pdp-gallery--single img {
    height: 380px;
}

.af-pdp-title {
    color: var(--v2-ink, #121b31);
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-weight: 850;
    letter-spacing: -.05em;
    line-height: 1.05;
    margin: .35rem 0 .85rem;
}

.af-pdp-lede {
    color: var(--v2-muted, #5c6675);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1.4rem;
    max-width: 60ch;
}

/* --------------------------------------------------------------- commerce ---*/

.af-pdp-commerce {
    border-top: 1px solid #dce3ee;
    margin-top: 1.5rem;
    padding-top: 1.35rem;
}

.af-pdp-price {
    color: var(--v2-ink, #121b31);
    font-size: 1.4rem;
    font-weight: 850;
    margin: 0;
}

.af-pdp-price s {
    color: #6a7282;
    font-size: 1rem;
    font-weight: 650;
    margin-left: .45rem;
}

.af-pdp-status {
    font-size: .82rem;
    font-weight: 780;
    margin: .35rem 0 0;
}

.af-pdp-status.is-available { color: #24733e; }
.af-pdp-status.is-unavailable { color: #9d3f32; }

/* The prescription counterpart to the price block. Same slot, same weight, so
   the two page types stay visually parallel. */
.af-pdp-rx {
    align-items: center;
    color: var(--aleafiaa-blue, #2a3484);
    display: flex;
    font-size: 1.15rem;
    font-weight: 850;
    gap: .5rem;
    margin: 0;
}

.af-pdp-rx-note {
    color: var(--v2-muted, #5c6675);
    font-size: .85rem;
    font-weight: 650;
    margin: .35rem 0 0;
}

/* A non-prescription product shows a price where the Rx badge would sit, so it
   carries the same visual weight in the same position. */
.af-pdp-price {
    color: var(--aleafiaa-blue, #2a3484);
    font-size: 1.4rem;
    font-weight: 850;
    margin: 0;
}

.af-pdp-availability {
    color: var(--aleafiaa-green, #4c9a2a);
    font-size: .85rem;
    font-weight: 700;
    margin: .35rem 0 0;
}

.af-pdp-subtitle {
    color: var(--v2-muted, #5c6675);
    font-size: 1rem;
    font-weight: 650;
    margin: -.35rem 0 .75rem;
}

.af-pdp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.4rem;
}

/* ------------------------------------------------------------------ facts ---*/

.af-pdp-facts {
    background: #fff;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 18px;
    margin-top: 1.5rem;
    overflow: hidden;
}

.af-pdp-facts dl {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) 1fr;
    margin: 0;
}

.af-pdp-facts dt,
.af-pdp-facts dd {
    border-top: 1px solid #eef1f6;
    margin: 0;
    padding: .7rem .95rem;
}

.af-pdp-facts dt {
    background: #fafbfe;
    color: var(--v2-muted, #5c6675);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.af-pdp-facts dd {
    color: var(--v2-ink, #121b31);
    font-size: .9rem;
    font-weight: 650;
    overflow-wrap: break-word;
}

.af-pdp-facts dl > dt:first-of-type,
.af-pdp-facts dl > dt:first-of-type + dd {
    border-top: 0;
}

/* --------------------------------------------------------------- sections ---*/

.af-pdp-sections {
    display: grid;
    gap: 1.25rem;
    margin-top: 3.25rem;
}

.af-pdp-section {
    background: #fff;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 20px;
    padding: 1.75rem;
}

.af-pdp-section > h2 {
    color: var(--v2-ink, #121b31);
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: -.02em;
    margin: 0 0 .9rem;
}

.af-pdp-body {
    color: #3d4759;
    font-size: .95rem;
    line-height: 1.75;
    max-width: 74ch;
}

.af-pdp-body :is(p, ul, ol) { margin: 0 0 .9rem; }
.af-pdp-body :is(p, li) { overflow-wrap: break-word; }
.af-pdp-body :last-child { margin-bottom: 0; }
.af-pdp-body :is(h2, h3, h4) {
    color: var(--v2-ink, #121b31);
    font-size: 1rem;
    font-weight: 800;
    margin: 1.4rem 0 .6rem;
}
.af-pdp-body ul, .af-pdp-body ol { padding-left: 1.2rem; }
.af-pdp-body li { margin-bottom: .35rem; }
.af-pdp-body strong { color: var(--v2-ink, #121b31); }

/* Wide regulatory tables scroll inside their own box rather than the page. */
.af-pdp-body table {
    display: block;
    overflow-x: auto;
    width: 100%;
}

.af-pdp-packs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-pdp-packs li {
    background: #f4f7fd;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    padding: .4rem .8rem;
}

.af-pdp-variants {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-pdp-variants li {
    background: #f9fbff;
    border: 1px solid var(--v2-line, #e0e6ef);
    border-radius: 12px;
    font-size: .82rem;
    padding: .7rem .8rem;
}

.af-pdp-variants span {
    color: var(--v2-muted, #5c6675);
    display: block;
    margin-top: .2rem;
}

/* ------------------------------------------------------------- disclaimer ---*/

.af-pdp-disclaimer {
    background: #fbf7ef;
    border: 1px solid #ecdfc6;
    border-radius: 18px;
    color: #6b5426;
    display: flex;
    font-size: .85rem;
    gap: .8rem;
    line-height: 1.6;
    margin-top: 1.25rem;
    padding: 1.15rem 1.3rem;
}

.af-pdp-disclaimer i { margin-top: .15rem; }
.af-pdp-disclaimer p { margin: 0 0 .5rem; }
.af-pdp-disclaimer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ responsive ---*/

@media (max-width: 991.98px) {
    .af-pdp-hero { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 575.98px) {
    .af-pdp { padding: 2.5rem 0 3.5rem; }
    .af-pdp-gallery { grid-template-columns: 1fr; padding: 1rem; }
    .af-pdp-gallery img,
    .af-pdp-gallery--single img { height: 250px; }
    .af-pdp-section { padding: 1.35rem; }
    .af-pdp-facts dl { grid-template-columns: 1fr; }
    .af-pdp-facts dt { border-top: 1px solid #eef1f6; padding-bottom: .2rem; }
    .af-pdp-facts dd { border-top: 0; padding-top: .2rem; }
    .af-pdp-facts dl > dt:first-of-type + dd { border-top: 0; }
    .af-pdp-actions .v2-button { flex: 1 1 100%; }
}