/*
 * 4x6 photo prints v2 — sections 14–26 (occasions → mobile sticky bar), plus the
 * restyle of the shared internal-links partial that follows them. Tokens and
 * shared classes (.p46-container, .p46-eyebrow, .p46-card, .p46-btn, .p46-guide,
 * .p46-mini__* ...) come from photo-4x6-v2.css and -sections-a.css. Each block
 * quotes the MagicPath (GeneratedComponent.tsx, Tailwind 4) classes it
 * translates. Every selector is scoped under .p46-page.
 *
 * AA note (as in the foundation): small stone-400/500 and #9a7944-family text on
 * light panels uses --p46-muted / --p46-gold-text.
 */

/* ===========================================================================
   14. Occasions (TSX 616–625)
   grid grid-cols-2 gap-3 sm:grid-cols-4; second row mt-3
   =========================================================================== */

.p46-page .p46-occasions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.p46-page .p46-occasions__grid + .p46-occasions__grid {
    margin-top: 12px;
}

@media (min-width: 640px) {
    .p46-page .p46-occasions__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* overflow-hidden rounded-xl border border-stone-200 bg-white */
.p46-page .p46-occasions__card {
    overflow: hidden;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-md);
    background-color: #fff;
}

/* h-28 w-full object-cover */
.p46-page .p46-occasions__img {
    width: 100%;
    height: 112px;
    object-fit: cover;
}

/* p-3 (photo cards) / p-4 (text cards) */
.p46-page .p46-occasions__body {
    padding: 12px;
}

.p46-page .p46-occasions__card--text .p46-occasions__body {
    padding: 16px;
}

/* text-xs font-semibold */
.p46-page .p46-occasions__label {
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
}

/* ===========================================================================
   15. Ways to use your prints (TSX 627–636)
   grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5
   =========================================================================== */

.p46-page .p46-ways__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 640px) {
    .p46-page .p46-ways__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .p46-page .p46-ways__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* rounded-xl border border-stone-200 bg-white p-4 */
.p46-page .p46-ways__card {
    padding: 16px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-md);
    background-color: #fff;
}

/* text-xl text-[#9a7944] (decorative glyph) */
.p46-page .p46-ways__glyph {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    color: var(--p46-gold-text); /* AA: MagicPath's #9a7944 is 4.0:1 on white at 20px */
}

/* h4 has no colour class in MagicPath: inherits the page text colour */
.p46-page .p46-ways__card .p46-mini__title {
    color: inherit;
}

/* ===========================================================================
   16 + 17. Camera-roll banner and "20 ways" (TSX 637–640)
   mt-8 grid gap-4 lg:grid-cols-2. The row (.p46-roll) holds the camera-roll
   section and the seo-sections section. At lg the seo-sections box steps aside
   (display: contents) so its "20 ways" card fills the second column next to the
   banner and its keyword blocks run full width underneath.
   =========================================================================== */

.p46-page .p46-roll {
    display: grid;
    gap: 16px;
}

.p46-page .p46-seo {
    display: grid;
    gap: 16px;
}

@media (min-width: 1024px) {
    .p46-page .p46-roll {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p46-page .p46-roll > .p46-seo {
        display: contents;
    }

    .p46-page .p46-roll .p46-seo__grid {
        grid-column: 1 / -1;
    }
}

/* rounded-2xl bg-[#292c24] p-6 text-white */
.p46-page .p46-roll__card {
    padding: 24px;
}

/* mt-3 font-serif text-3xl */
.p46-page .p46-roll__title {
    margin-top: 12px;
    font-family: var(--p46-serif);
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
}

/* mt-3 text-xs leading-6 text-stone-300 */
.p46-page .p46-roll__text {
    margin-top: 12px;
    font-size: 12px;
    line-height: 24px;
    color: var(--p46-stone-300);
}

/* rounded-2xl border border-stone-200 bg-white p-6 */
.p46-page .p46-ways20 {
    padding: 24px;
}

/* mt-4 grid grid-cols-2 gap-x-4 gap-y-2 text-[10px] text-stone-600 */
.p46-page .p46-ways20__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 8px;
    margin-top: 16px;
    font-size: 10px;
    color: var(--p46-stone-600);
}

/* Existing keyword sections (no MagicPath block): the guide's card style. */
.p46-page .p46-seo__grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .p46-page .p46-seo__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .p46-page .p46-seo__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* font-serif text-xl text-stone-900 */
.p46-page .p46-seo__title {
    font-family: var(--p46-serif);
    font-size: 20px;
    line-height: 1.4;
    color: var(--p46-stone-900);
}

/* mt-2 text-xs leading-5 text-stone-600 */
.p46-page .p46-seo__body {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-600);
}

/* ===========================================================================
   18. Size guide (TSX 642–656)
   =========================================================================== */

/* rounded-2xl border border-stone-200 bg-[#f5f2eb] p-6;
   grid gap-4 sm:grid-cols-[.8fr_1.2fr] sm:items-center */
.p46-page .p46-size {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-card);
    background-color: var(--p46-sand);
}

@media (min-width: 640px) {
    .p46-page .p46-size {
        grid-template-columns: .8fr 1.2fr;
        align-items: center;
    }
}

/* mt-3 text-xs leading-5 text-stone-600 */
.p46-page .p46-size__text {
    margin-top: 12px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-600);
}

/* grid grid-cols-2 gap-2 sm:grid-cols-4 */
.p46-page .p46-size__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 640px) {
    .p46-page .p46-size__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* rounded-xl bg-white p-3 text-center */
.p46-page .p46-size__stat {
    padding: 12px;
    border-radius: var(--p46-radius-md);
    background-color: #fff;
    text-align: center;
}

/* strong block text-sm (text-xs for the metric pair) */
.p46-page .p46-size__stat strong {
    display: block;
    font-size: 14px;
    line-height: 1.4286;
}

.p46-page .p46-size__stat .p46-size__value--sm {
    font-size: 12px;
    line-height: 1.3333;
}

/* text-[9px] text-stone-500 */
.p46-page .p46-size__stat span {
    font-size: 9px;
    color: var(--p46-muted);
}

/* mt-5 rounded-2xl border border-stone-200 bg-white p-6 */
.p46-page .p46-size__life {
    margin-top: 20px;
    padding: 24px;
}

/* mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 */
.p46-page .p46-size__life-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

@media (min-width: 640px) {
    .p46-page .p46-size__life-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* rounded-xl bg-[#f7f4ec] p-3 */
.p46-page .p46-size__life-item {
    padding: 12px;
    border-radius: var(--p46-radius-md);
    background-color: var(--p46-paper);
}

/* strong block text-xs text-stone-900 */
.p46-page .p46-size__life-item strong {
    display: block;
    font-size: 12px;
    line-height: 1.3333;
    color: var(--p46-stone-900);
}

/* mt-1 block text-[10px] leading-4 text-stone-500 */
.p46-page .p46-size__life-item span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 16px;
    color: var(--p46-muted);
}

/* ===========================================================================
   19. You may also like (TSX 657–670) — the guide's last block
   =========================================================================== */

/* the guide section's pb-16 lg:pb-20 */
.p46-page .p46-guide--last {
    padding-bottom: 64px;
}

@media (min-width: 1024px) {
    .p46-page .p46-guide--last {
        padding-bottom: 80px;
    }
}

/* rounded-[24px] border border-stone-200 bg-white p-6 sm:p-8 */
.p46-page .p46-related {
    padding: 24px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-lg);
    background-color: #fff;
}

@media (min-width: 640px) {
    .p46-page .p46-related {
        padding: 32px;
    }
}

/* grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 */
.p46-page .p46-related__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 640px) {
    .p46-page .p46-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .p46-page .p46-related__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* block rounded-xl border border-stone-200 bg-[#faf9f6] p-4 text-xs font-semibold
   text-stone-900 hover:border-[#a4864f] */
.p46-page .p46-related__card {
    display: block;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-md);
    background-color: #faf9f6;
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: var(--p46-stone-900);
    transition: border-color .15s ease;
}

.p46-page .p46-related__card:hover {
    border-color: #a4864f;
    color: var(--p46-stone-900);
}

.p46-page .p46-related__name {
    display: block;
}

/* mt-2 block text-[10px] font-normal leading-4 text-stone-500 */
.p46-page .p46-related__desc {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 400;
    color: var(--p46-muted);
}

.p46-page .p46-related__price {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    color: var(--p46-gold-text);
}

.p46-page .p46-related__price s {
    margin-left: 4px;
    font-weight: 400;
    color: var(--p46-muted);
}

/* ===========================================================================
   20. Print quality, dark band (TSX 673–690)
   bg-[#292c24] py-16 text-white sm:py-20;
   grid gap-10 lg:grid-cols-[.85fr_1.15fr] lg:items-center
   =========================================================================== */

.p46-page .p46-quality {
    padding: 64px 0;
    background-color: var(--p46-ink);
    color: #fff;
}

@media (min-width: 640px) {
    .p46-page .p46-quality {
        padding: 80px 0;
    }
}

.p46-page .p46-quality__grid {
    display: grid;
    gap: 40px;
}

@media (min-width: 1024px) {
    .p46-page .p46-quality__grid {
        grid-template-columns: .85fr 1.15fr;
        align-items: center;
    }
}

/* mt-3 font-serif text-4xl leading-tight tracking-tight sm:text-5xl */
.p46-page .p46-quality__title {
    margin-top: 12px;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.025em;
}

@media (min-width: 640px) {
    .p46-page .p46-quality__title {
        font-size: 48px;
    }
}

/* mt-4 max-w-md text-sm leading-7 text-stone-300 */
.p46-page .p46-quality__body {
    max-width: 28rem;
    margin-top: 16px;
    font-size: 14px;
    line-height: 28px;
    color: var(--p46-stone-300);
}

/* grid gap-3 sm:grid-cols-3 */
.p46-page .p46-quality__points {
    display: grid;
    gap: 12px;
}

@media (min-width: 640px) {
    .p46-page .p46-quality__points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* rounded-2xl border border-white/15 bg-white/[.06] p-5 */
.p46-page .p46-quality__point {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--p46-radius-card);
    background-color: rgba(255, 255, 255, .06);
}

/* font-serif text-3xl text-[#d7bd88] */
.p46-page .p46-quality__num {
    font-family: var(--p46-serif);
    font-size: 30px;
    line-height: 1.2;
    color: var(--p46-gold-light);
}

/* mt-5 text-sm font-semibold */
.p46-page .p46-quality__point-title {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.4286;
    font-weight: 600;
}

/* mt-2 text-xs leading-5 text-stone-300 */
.p46-page .p46-quality__point-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-300);
}

/* ===========================================================================
   21. Paper & lamination (in place of "The finish makes a difference", TSX 692–695)
   mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24
   =========================================================================== */

.p46-page .p46-paper {
    padding: 64px 0;
}

@media (min-width: 1024px) {
    .p46-page .p46-paper {
        padding: 96px 0;
    }
}

/* mb-9 flex flex-wrap items-end justify-between gap-4 */
.p46-page .p46-paper__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

/* mt-3 font-serif text-4xl tracking-tight text-stone-900 sm:text-5xl */
.p46-page .p46-paper__title {
    margin-top: 12px;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.1111;
    letter-spacing: -.025em;
    color: var(--p46-stone-900);
}

@media (min-width: 640px) {
    .p46-page .p46-paper__title {
        font-size: 48px;
        line-height: 1;
    }
}

/* max-w-sm text-sm leading-6 text-stone-500 */
.p46-page .p46-paper__lede {
    max-width: 24rem;
    font-size: 14px;
    line-height: 24px;
    color: var(--p46-muted);
}

/* grid gap-4 md:grid-cols-3 */
.p46-page .p46-paper__grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .p46-page .p46-paper__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* group overflow-hidden rounded-[24px] border bg-white text-left transition;
   unselected: border-stone-200 hover:-translate-y-1 hover:shadow-lg */
.p46-page .p46-paper__card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-lg);
    background-color: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.p46-page .p46-paper__card--option:hover {
    transform: translateY(-4px);
    box-shadow: var(--p46-shadow-lg);
}

/* selected: border-[#a4864f] ring-2 ring-[#e1d2b2] */
.p46-page .p46-paper__card:has(.p46-paper__pick[aria-pressed="true"]) {
    border-color: #a4864f;
    box-shadow: 0 0 0 2px #e1d2b2;
    transform: none;
}

.p46-page .p46-paper__card:has(.p46-paper__pick:focus-visible) {
    outline: 2px solid var(--p46-ink);
    outline-offset: 2px;
}

/* relative h-56 overflow-hidden bg-stone-100 */
.p46-page .p46-paper__media {
    position: relative;
    height: 224px;
    overflow: hidden;
    background-color: var(--p46-stone-100);
}

/* h-full w-full object-cover transition duration-500 group-hover:scale-105 */
.p46-page .p46-paper__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.p46-page .p46-paper__card--option:hover .p46-paper__img {
    transform: scale(1.05);
}

/* absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1.5 text-[9px] font-semibold text-stone-700 */
.p46-page .p46-paper__tag {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 6px 12px;
    border-radius: var(--p46-radius-pill);
    background-color: rgba(255, 255, 255, .9);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--p46-stone-700);
}

/* p-5 */
.p46-page .p46-paper__body {
    padding: 20px;
}

/* flex items-center justify-between */
.p46-page .p46-paper__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* font-serif text-2xl text-stone-900 */
.p46-page .p46-paper__name {
    font-family: var(--p46-serif);
    font-size: 24px;
    line-height: 1.3333;
    color: var(--p46-stone-900);
}

/* flex h-7 w-7 items-center justify-center rounded-full border border-stone-300 text-xs text-[#9a7944] */
.p46-page .p46-paper__mark,
.p46-page .p46-paper__pick {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--p46-stone-300);
    border-radius: var(--p46-radius-pill);
    font-size: 12px;
    line-height: 1.3333;
    color: var(--p46-gold);
}

/* "✓" when chosen, "↗" otherwise, as in MagicPath */
.p46-page .p46-paper__pick::before {
    content: "↗";
    content: "↗" / "";
}

.p46-page .p46-paper__pick[aria-pressed="true"]::before {
    content: "✓";
    content: "✓" / "";
}

/* The whole card is the hit area (MagicPath's card is the button). */
.p46-page .p46-paper__pick::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.p46-page .p46-paper__pick:focus-visible {
    outline: 2px solid var(--p46-ink);
    outline-offset: 2px;
}

/* mt-2 text-xs leading-5 text-stone-500 */
.p46-page .p46-paper__text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-muted);
}

/* ===========================================================================
   22. From phone to photo album (TSX 697–702)
   border-y border-stone-200 bg-[#f4f1e9];
   grid gap-8 py-16 lg:grid-cols-[1fr_1fr] lg:items-center lg:py-20
   =========================================================================== */

.p46-page .p46-album {
    border-top: 1px solid var(--p46-stone-200);
    border-bottom: 1px solid var(--p46-stone-200);
    background-color: var(--p46-cream);
}

.p46-page .p46-album__grid {
    display: grid;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (min-width: 1024px) {
    .p46-page .p46-album__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* mt-3 font-serif text-4xl leading-tight tracking-tight text-stone-900 sm:text-5xl */
.p46-page .p46-album__title {
    margin-top: 12px;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.025em;
    color: var(--p46-stone-900);
}

@media (min-width: 640px) {
    .p46-page .p46-album__title {
        font-size: 48px;
    }
}

/* mt-4 max-w-lg text-sm leading-7 text-stone-600 */
.p46-page .p46-album__body {
    max-width: 32rem;
    margin-top: 16px;
    font-size: 14px;
    line-height: 28px;
    color: var(--p46-stone-600);
}

/* mt-6 flex flex-wrap gap-3; rounded-full border border-stone-300 bg-white px-4 py-2 text-xs text-stone-700 */
.p46-page .p46-album__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.p46-page .p46-album__chips li {
    padding: 8px 16px;
    border: 1px solid var(--p46-stone-300);
    border-radius: var(--p46-radius-pill);
    background-color: #fff;
    font-size: 12px;
    line-height: 1.3333;
    color: var(--p46-stone-700);
}

/* mt-8 rounded-full bg-[#292c24] px-6 py-3.5 text-xs font-semibold text-white */
.p46-page .p46-album__cta {
    gap: .3em;
    margin-top: 32px;
    padding: 14px 24px;
    font-size: 12px;
    line-height: 1.3333;
}

.p46-page .p46-album__media {
    position: relative;
}

/* h-[360px] w-full rounded-[28px] object-cover shadow-xl */
.p46-page .p46-album__img {
    width: 100%;
    height: 360px;
    border-radius: var(--p46-radius-xl);
    object-fit: cover;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

/* absolute -bottom-4 left-4 rounded-2xl bg-white px-5 py-4 shadow-xl sm:left-8 */
.p46-page .p46-album__badge {
    position: absolute;
    bottom: -16px;
    left: 16px;
    padding: 16px 20px;
    border-radius: var(--p46-radius-card);
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

@media (min-width: 640px) {
    .p46-page .p46-album__badge {
        left: 32px;
    }
}

/* text-[9px] font-bold uppercase tracking-[.16em] text-[#987847] */
.p46-page .p46-album__badge-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--p46-gold-text);
}

/* mt-1 font-serif text-xl text-stone-900 */
.p46-page .p46-album__badge-title {
    margin-top: 4px;
    font-family: var(--p46-serif);
    font-size: 20px;
    line-height: 1.4;
    color: var(--p46-stone-900);
}

/* ===========================================================================
   23. Customer stories (TSX 704–713)
   bg-[#f5f2eb]; mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8
   =========================================================================== */

.p46-page .p46-reviews {
    background-color: var(--p46-sand);
}

.p46-page .p46-reviews__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* mb-7 flex flex-wrap items-end justify-between gap-4 */
.p46-page .p46-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

/* mt-2 font-serif text-4xl tracking-tight text-stone-900 */
.p46-page .p46-reviews__title {
    margin-top: 8px;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.1111;
    letter-spacing: -.025em;
    color: var(--p46-stone-900);
}

/* grid gap-3 md:grid-cols-3 */
.p46-page .p46-reviews__grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .p46-page .p46-reviews__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* rounded-2xl border border-stone-200 bg-white p-5; the top keeps the star
   row's line box (text-sm, 20px), which is not drawn (no ratings in the data) */
.p46-page .p46-reviews__card {
    padding: 40px 20px 20px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-card);
    background-color: #fff;
}

/* rounded-full bg-white px-4 py-2 text-[10px] font-semibold text-stone-600 */
.p46-page .p46-reviews__label {
    padding: 8px 16px;
    border-radius: var(--p46-radius-pill);
    background-color: #fff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--p46-stone-600);
}

/* mt-3 text-xs leading-6 text-stone-600 */
.p46-page .p46-reviews__text {
    margin-top: 12px;
    font-size: 12px;
    line-height: 24px;
    color: var(--p46-stone-600);
}

/* mt-4 border-t border-stone-100 pt-3 text-xs font-semibold text-stone-900 */
.p46-page .p46-reviews__name {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--p46-stone-100);
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: var(--p46-stone-900);
}

/* ===========================================================================
   24. FAQ and "Need a hand?" (TSX 715–738)
   grid gap-10 py-16 lg:grid-cols-[.72fr_1.28fr] lg:py-24
   =========================================================================== */

.p46-page .p46-faq__grid {
    display: grid;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (min-width: 1024px) {
    .p46-page .p46-faq__grid {
        grid-template-columns: .72fr 1.28fr;
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

/* mt-3 font-serif text-4xl tracking-tight text-stone-900 sm:text-5xl */
.p46-page .p46-faq__title {
    margin-top: 12px;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.1111;
    letter-spacing: -.025em;
    color: var(--p46-stone-900);
}

@media (min-width: 640px) {
    .p46-page .p46-faq__title {
        font-size: 48px;
        line-height: 1;
    }
}

/* mt-4 text-sm leading-7 text-stone-500 */
.p46-page .p46-faq__lede {
    margin-top: 16px;
    font-size: 14px;
    line-height: 28px;
    color: var(--p46-muted);
}

/* mt-7 rounded-2xl bg-[#292c24] p-5 text-white */
.p46-page .p46-faq__help {
    margin-top: 28px;
    padding: 20px;
}

/* text-[9px] font-bold uppercase tracking-[.16em] text-[#d7bd88] */
.p46-page .p46-faq__help-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--p46-gold-light);
}

/* mt-2 font-serif text-2xl */
.p46-page .p46-faq__help-title {
    margin-top: 8px;
    font-family: var(--p46-serif);
    font-size: 24px;
    line-height: 1.3333;
}

/* mt-2 text-xs leading-5 text-stone-300 */
.p46-page .p46-faq__help-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-300);
}

/* mt-4 inline-block text-xs font-semibold text-[#e2c995] underline underline-offset-4 */
.p46-page .p46-faq__help-link,
.p46-page .p46-faq__help-link:hover,
.p46-page .p46-faq__help-link:focus {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: #e2c995;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.p46-page .p46-faq__help-link:focus-visible {
    outline-color: var(--p46-gold-light);
}

/* Quick answers (zeroClickBlocks; no MagicPath block): always visible. */
.p46-page .p46-faq__quick {
    margin-top: 28px;
}

.p46-page .p46-qa {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--p46-stone-200);
}

.p46-page .p46-qa__q {
    font-size: 14px;
    line-height: 1.4286;
    font-weight: 600;
    color: var(--p46-stone-900);
}

.p46-page .p46-qa__def {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-600);
}

.p46-page .p46-qa__list {
    margin-top: 8px;
    padding-left: 16px;
    list-style: disc;
    font-size: 11px;
    line-height: 18px;
    color: var(--p46-muted);
}

/* divide-y divide-stone-200 border-y border-stone-200 */
.p46-page .p46-faq__list {
    align-self: start;
    border-top: 1px solid var(--p46-stone-200);
    border-bottom: 1px solid var(--p46-stone-200);
}

/* py-4 */
.p46-page .p46-faq__item {
    padding: 16px 0;
}

.p46-page .p46-faq__item + .p46-faq__item {
    border-top: 1px solid var(--p46-stone-200);
}

/* cursor-pointer text-sm font-semibold text-stone-900 (Tailwind 4 preflight: display list-item) */
.p46-page .p46-faq__q {
    display: list-item;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4286;
    font-weight: 600;
    color: var(--p46-stone-900);
}

.p46-page .p46-faq__q:focus-visible,
.p46-page summary:focus-visible {
    outline: 2px solid var(--p46-ink);
    outline-offset: 2px;
}

/* pt-3 text-xs leading-6 text-stone-600 */
.p46-page .p46-faq__a {
    padding-top: 12px;
    font-size: 12px;
    line-height: 24px;
    color: var(--p46-stone-600);
}

/* ===========================================================================
   25. Final call to action (TSX 740–742)
   bg-[#292c24] px-4 py-16 text-center text-white sm:px-6 sm:py-20
   =========================================================================== */

.p46-page .p46-final {
    padding: 64px 0;
    background-color: var(--p46-ink);
    color: #fff;
    text-align: center;
}

@media (min-width: 640px) {
    .p46-page .p46-final {
        padding: 80px 0;
    }
}

/* text-[10px] font-bold uppercase tracking-[.22em] text-[#d7bd88] */
.p46-page .p46-final__eyebrow {
    letter-spacing: .22em;
}

/* mx-auto mt-4 max-w-2xl font-serif text-4xl leading-tight tracking-tight sm:text-6xl */
.p46-page .p46-final__title {
    max-width: 42rem;
    margin: 16px auto 0;
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.025em;
}

@media (min-width: 640px) {
    .p46-page .p46-final__title {
        font-size: 60px;
    }
}

/* em: font-normal text-[#d7bd88] */
.p46-page .p46-final__title em {
    font-weight: 400;
    color: var(--p46-gold-light);
}

/* mx-auto mt-5 max-w-lg text-sm leading-7 text-stone-300 */
.p46-page .p46-final__body {
    max-width: 32rem;
    margin: 20px auto 0;
    font-size: 14px;
    line-height: 28px;
    color: var(--p46-stone-300);
}

/* mt-8 rounded-full bg-[#ead9b7] px-8 py-4 text-sm font-bold text-[#292c24] transition hover:bg-white */
.p46-page .p46-final__cta {
    display: inline-block;
    margin-top: 32px;
    padding: 16px 32px;
    border-radius: var(--p46-radius-pill);
    background-color: var(--p46-cta-light);
    font-size: 14px;
    line-height: 1.4286;
    font-weight: 700;
    color: var(--p46-ink);
    transition: background-color .15s ease;
}

.p46-page .p46-final__cta:hover,
.p46-page .p46-final__cta:focus {
    background-color: #fff;
    color: var(--p46-ink);
}

.p46-page .p46-final__cta:focus-visible {
    outline-color: var(--p46-gold-light);
}

/* mt-4 text-[10px] text-stone-400 */
.p46-page .p46-final__price {
    margin-top: 16px;
    font-size: 10px;
    color: var(--p46-stone-400);
}

/* ===========================================================================
   26. Mobile sticky bar (TSX 746), below lg (lg:hidden)
   fixed inset-x-0 bottom-0 z-40 border-t border-stone-200 bg-white/95 p-3
   shadow-[0_-8px_30px_rgba(0,0,0,.08)] backdrop-blur
   =========================================================================== */

.p46-page .p46-sticky {
    display: none;
}

@media (max-width: 1023px) {
    .p46-page {
        padding-bottom: 80px;
    }

    .p46-page .p46-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--p46-stone-200);
        background-color: rgba(255, 255, 255, .95);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .08);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* mx-auto flex max-w-xl items-center justify-between gap-3 */
    .p46-page .p46-sticky__inner {
        display: flex;
        max-width: 36rem;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* text-[9px] font-bold uppercase tracking-wide text-stone-400 */
    .p46-page .p46-sticky__eyebrow {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .025em;
        text-transform: uppercase;
        color: var(--p46-muted);
    }

    /* font-serif text-xl text-stone-900 */
    .p46-page .p46-sticky__price {
        font-family: var(--p46-serif);
        font-size: 20px;
        line-height: 1.4;
        color: var(--p46-stone-900);
    }

    .p46-page .p46-sticky__price strong {
        font-weight: 400;
    }

    /* font-sans text-[10px] text-stone-500 */
    .p46-page .p46-sticky__qty {
        font-family: var(--p46-sans);
        font-size: 10px;
        color: var(--p46-muted);
    }

    /* rounded-full bg-[#292c24] px-5 py-3 text-xs font-semibold text-white */
    .p46-page .p46-sticky__cta {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
        border-radius: var(--p46-radius-pill);
        background-color: var(--p46-ink);
        font-size: 12px;
        line-height: 1.3333;
        font-weight: 600;
        color: #fff;
    }

    .p46-page a.p46-sticky__cta::after {
        content: "\00a0→";
        content: "\00a0→" / "";
    }

    .p46-page .p46-sticky__cta:hover,
    .p46-page .p46-sticky__cta:focus {
        background-color: var(--p46-ink-hover);
        color: #fff;
    }

    .p46-page .p46-sticky__cta:disabled {
        opacity: .5;
    }
}

/* ===========================================================================
   Shared internal links (partials.seo.contextual-links), kept after the
   sections and styled to match. Overrides the partial's own <style> (same
   class names, one more class of specificity).
   =========================================================================== */

.p46-page .pp-seo-context {
    padding: 64px 0;
    border-top: 1px solid var(--p46-stone-200);
    background: var(--p46-ivory);
}

.p46-page .pp-seo-context-inner {
    max-width: var(--p46-max);
    padding: 0 16px;
}

@media (min-width: 640px) {
    .p46-page .pp-seo-context-inner {
        padding: 0 24px;
    }
}

@media (min-width: 1024px) {
    .p46-page .pp-seo-context-inner {
        padding: 0 32px;
    }
}

.p46-page .pp-seo-context-head {
    margin-bottom: 20px;
    text-align: left;
}

.p46-page .pp-seo-context-head h2 {
    margin: 0;
    font-family: var(--p46-serif);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--p46-stone-900);
}

.p46-page .pp-seo-context-head h2::after {
    display: none;
}

.p46-page .pp-seo-context-head p {
    max-width: 42rem;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-muted);
}

.p46-page .pp-seo-context-grid {
    gap: 12px;
}

.p46-page .pp-seo-context-chip {
    padding: 12px 16px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-md);
    background: #fff;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: var(--p46-stone-900);
}

.p46-page .pp-seo-context-chip:hover {
    border-color: #a4864f;
    box-shadow: none;
    color: var(--p46-stone-900);
}

.p46-page .pp-seo-context-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--p46-radius-sm);
    background: var(--p46-sand);
    color: var(--p46-gold);
}

.p46-page .pp-seo-context-chip:hover .pp-seo-context-icon {
    background: var(--p46-ink);
    color: var(--p46-gold-light);
}

.p46-page .pp-seo-context-arrow,
.p46-page .pp-seo-context-chip:hover .pp-seo-context-arrow {
    color: var(--p46-gold);
}