/*
 * 4x6 photo prints v2 — sections 1–13 (announcement → six steps), except the
 * configurator, which lives in photo-4x6-v2.css. Tokens and shared classes
 * (.p46-container, .p46-eyebrow, .p46-card, .p46-btn, .p46-tick ...) come from
 * photo-4x6-v2.css. Each block quotes the MagicPath classes it translates.
 */

/* ===========================================================================
   1. Announcement bar (TSX 435)
   bg-[#292c24] px-4 py-2 text-center text-[10px] font-semibold tracking-[.14em]
   text-[#f4ead7] sm:flex sm:items-center sm:justify-center sm:gap-7
   =========================================================================== */

.p46-page .p46-announce {
    padding: 8px 16px;
    background-color: var(--p46-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    color: #f4ead7;
}

/* hidden text-[#c8ad79] sm:inline */
.p46-page .p46-announce__sep {
    display: none;
    color: #c8ad79;
}

@media (min-width: 640px) {
    .p46-page .p46-announce {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
    }

    .p46-page .p46-announce__sep {
        display: inline;
    }
}

/* ===========================================================================
   2. Breadcrumb (TSX 454–455)
   container pt-5; flex items-center gap-2 text-[11px] text-stone-400;
   links hover:text-stone-700; current font-semibold text-stone-600
   =========================================================================== */

.p46-page .p46-crumbs-wrap {
    padding-top: 20px;
}

.p46-page .p46-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--p46-muted);
}

.p46-page .p46-crumbs a:hover {
    color: var(--p46-stone-700);
}

.p46-page .p46-crumbs [aria-current="page"] {
    font-weight: 600;
    color: var(--p46-stone-600);
}

/* The shared partial prints "›"; the design separates with "/". */
.p46-page .p46-crumbs .pp-breadcrumb-sep {
    margin: 0;
    font-size: 0;
    color: var(--p46-muted);
}

.p46-page .p46-crumbs .pp-breadcrumb-sep::before {
    content: "/";
    font-size: 11px;
}

/* ===========================================================================
   3. Hero grid + hero (TSX 457–477)
   grid gap-9 pb-12 pt-7 lg:grid-cols-[minmax(0,1fr)_430px] lg:gap-12 lg:pb-16 lg:pt-10
   =========================================================================== */

.p46-page .p46-hero-grid {
    display: grid;
    gap: 36px;
    padding-top: 28px;
    padding-bottom: 48px;
}

@media (min-width: 1024px) {
    .p46-page .p46-hero-grid {
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: 48px;
        padding-top: 40px;
        padding-bottom: 64px;
    }
}

.p46-page .p46-hero {
    min-width: 0;
}

/* inline-flex items-center gap-2 rounded-full border border-[#e4dccb] bg-white px-3 py-1.5
   text-[10px] font-bold uppercase tracking-[.16em] text-[#8e7042] */
.p46-page .p46-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #e4dccb;
    border-radius: var(--p46-radius-pill);
    background-color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8e7042;
}

/* h-1.5 w-1.5 rounded-full bg-[#aa8b54] */
.p46-page .p46-hero__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--p46-radius-pill);
    background-color: #aa8b54;
}

/* mt-5 max-w-3xl font-serif text-5xl leading-[.98] tracking-[-.045em] text-[#252820]
   sm:text-6xl xl:text-[68px]; em font-normal text-[#9a7b48] */
.p46-page .p46-hero__title {
    max-width: 48rem;
    margin-top: 20px;
    font-family: var(--p46-serif);
    font-size: 48px;
    line-height: .98;
    letter-spacing: -.045em;
    color: #252820;
}

.p46-page .p46-hero__title em {
    font-weight: 400;
    color: var(--p46-gold-2);
}

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

@media (min-width: 1280px) {
    .p46-page .p46-hero__title {
        font-size: 68px;
    }
}

/* mt-5 max-w-xl text-base leading-7 text-stone-600 sm:text-lg */
.p46-page .p46-hero__sub {
    max-width: 36rem;
    margin-top: 20px;
    font-size: 16px;
    line-height: 28px;
    color: var(--p46-stone-600);
}

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

/* mt-6 flex flex-wrap gap-x-5 gap-y-3 */
.p46-page .p46-hero__ticks {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 12px;
    margin-top: 24px;
}

/* mt-6 grid gap-3 rounded-[22px] border border-[#e3d6bd] bg-[#f7f4ec] p-4
   sm:grid-cols-[1fr_auto] sm:items-center sm:p-5 */
.p46-page .p46-hero-offer {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #e3d6bd;
    border-radius: 22px;
    background-color: var(--p46-paper);
}

@media (min-width: 640px) {
    .p46-page .p46-hero-offer {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 20px;
    }
}

/* flex flex-wrap items-center gap-2 */
.p46-page .p46-hero-offer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* text-[9px] font-bold uppercase tracking-[.17em] text-[#8c7047] */
.p46-page .p46-hero-offer__eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--p46-gold-text);
}

/* rounded-full bg-[#292c24] px-2.5 py-1 text-[9px] font-bold text-[#f0dfbb] */
.p46-page .p46-hero-offer__save {
    padding: 4px 10px;
    border-radius: var(--p46-radius-pill);
    background-color: var(--p46-ink);
    font-size: 9px;
    font-weight: 700;
    color: #f0dfbb;
}

/* mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1 */
.p46-page .p46-hero-offer__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
    margin-top: 8px;
}

/* font-serif text-4xl tracking-tight text-[#292c24] */
.p46-page .p46-hero-offer__sell {
    font-family: var(--p46-serif);
    font-size: 36px;
    line-height: 1.1111;
    letter-spacing: -.025em;
    color: var(--p46-ink);
}

/* text-sm text-stone-400 line-through */
.p46-page .p46-hero-offer__list {
    font-size: 14px;
    line-height: 1.4286;
    color: var(--p46-muted);
}

/* text-[11px] font-semibold text-[#80633c] */
.p46-page .p46-hero-offer__per {
    font-size: 11px;
    font-weight: 600;
    color: #80633c;
}

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

/* flex items-center justify-center gap-2 rounded-full bg-[#292c24] px-5 py-3 text-xs font-semibold text-white */
.p46-page .p46-hero-offer__cta {
    display: flex;
    padding: 12px 20px;
    font-size: 12px;
    line-height: 1.3333;
}

/* relative mt-9 grid min-h-[330px] grid-cols-[1.25fr_.75fr] gap-3 sm:min-h-[410px] sm:gap-4 */
.p46-page .p46-hero__photos {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 12px;
    min-height: 330px;
    margin-top: 36px;
}

@media (min-width: 640px) {
    .p46-page .p46-hero__photos {
        gap: 16px;
        min-height: 410px;
    }
}

/* relative overflow-hidden bg-[#e9e4d9]; main rounded-[28px] shadow-sm; small rounded-[24px] */
.p46-page .p46-hero__photo {
    position: relative;
    overflow: hidden;
    background-color: #e9e4d9;
}

.p46-page .p46-hero__photo--main {
    border-radius: var(--p46-radius-xl);
    box-shadow: var(--p46-shadow-sm);
}

.p46-page .p46-hero__photo--small {
    border-radius: var(--p46-radius-lg);
}

/* h-full w-full object-cover; main min-h-[330px] sm:min-h-[410px] */
.p46-page .p46-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p46-page .p46-hero__img--main {
    min-height: 330px;
}

@media (min-width: 640px) {
    .p46-page .p46-hero__img--main {
        min-height: 410px;
    }
}

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

@media (min-width: 640px) {
    .p46-page .p46-hero__stack {
        gap: 16px;
    }
}

/* absolute bottom-4 left-4 rounded-2xl bg-white/90 px-4 py-3 shadow-lg backdrop-blur */
.p46-page .p46-hero__badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 12px 16px;
    border-radius: var(--p46-radius-card);
    background-color: rgba(255, 255, 255, .9);
    box-shadow: var(--p46-shadow-lg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* text-[9px] font-bold uppercase tracking-[.16em] text-[#927344] */
.p46-page .p46-hero__badge-eyebrow {
    display: block;
    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-hero__badge-size {
    display: block;
    margin-top: 4px;
    font-family: var(--p46-serif);
    font-size: 20px;
    line-height: 1.4;
    color: var(--p46-stone-900);
}

/* text-[10px] text-stone-500 */
.p46-page .p46-hero__badge-cm {
    display: block;
    font-size: 10px;
    color: var(--p46-muted);
}

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

/* mt-5 flex flex-wrap items-center gap-4 text-xs text-stone-500 */
.p46-page .p46-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.3333;
    color: var(--p46-muted);
}

/* flex items-center gap-1.5 text-[#a17e43]; strong text-stone-800 */
.p46-page .p46-hero__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a17e43;
}

.p46-page .p46-hero__rating strong {
    color: var(--p46-stone-800);
}

/* h-4 w-px bg-stone-300 */
.p46-page .p46-hero__rule {
    width: 1px;
    height: 16px;
    background-color: var(--p46-stone-300);
}

/* aside: h-fit lg:sticky lg:top-6 */
.p46-page .p46-hero-grid__aside {
    height: fit-content;
    align-self: start;
}

@media (min-width: 1024px) {
    .p46-page .p46-hero-grid__aside {
        position: sticky;
        top: 24px;
    }
}

/* mt-4 flex items-center gap-3 rounded-2xl border border-stone-200 bg-white px-4 py-3 */
.p46-page .p46-ship-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-card);
    background-color: #fff;
    font-size: 10px;
    line-height: 16px;
    color: var(--p46-stone-600);
}

.p46-page .p46-ship-note strong {
    color: var(--p46-stone-800);
}

/* text-xl text-[#9a7944] */
.p46-page .p46-ship-note__icon {
    font-size: 20px;
    line-height: 1.4;
    color: var(--p46-gold);
}

/* ===========================================================================
   5. Trust strip (TSX 515–519)
   border-y border-stone-200 bg-white; grid grid-cols-2 gap-5 py-6 sm:grid-cols-4
   =========================================================================== */

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

.p46-page .p46-trust__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 24px;
}

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

.p46-page .p46-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#e4d8bf]
   font-serif text-sm text-[#9a7944] */
.p46-page .p46-trust__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e4d8bf;
    border-radius: var(--p46-radius-pill);
    font-family: var(--p46-serif);
    font-size: 14px;
    line-height: 1.4286;
    color: var(--p46-gold);
}

/* text-xs font-semibold text-stone-900 */
.p46-page .p46-trust__title {
    display: block;
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: var(--p46-stone-900);
}

/* mt-0.5 text-[10px] text-stone-500 */
.p46-page .p46-trust__desc {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--p46-muted);
}

/* ===========================================================================
   6. Upload hundreds. Review a few. (TSX 521–528)
   grid gap-10 py-16 lg:grid-cols-[.8fr_1.2fr] lg:gap-16 lg:py-24
   =========================================================================== */

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

@media (min-width: 1024px) {
    .p46-page .p46-bulk {
        grid-template-columns: .8fr 1.2fr;
        gap: 64px;
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

/* max-w-lg */
.p46-page .p46-bulk__copy {
    max-width: 32rem;
}

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

.p46-page .p46-bulk__title em {
    font-weight: 400;
    color: var(--p46-gold-2);
}

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

/* mt-5 text-sm leading-7 text-stone-600 */
.p46-page .p46-bulk__body {
    margin-top: 20px;
    font-size: 14px;
    line-height: 28px;
    color: var(--p46-stone-600);
}

/* mt-7 space-y-4, with inline-flex ticks */
.p46-page .p46-bulk__ticks {
    margin-top: 28px;
}

.p46-page .p46-bulk__ticks > :not(:last-child) {
    margin-bottom: 16px;
}

/* mt-8 rounded-full border border-stone-300 px-5 py-3 text-xs font-semibold text-stone-800;
   the arrow is inline text after one space */
.p46-page .p46-bulk__cta {
    gap: .3em;
    margin-top: 32px;
    padding: 12px 20px;
    font-size: 12px;
    line-height: 1.3333;
}

/* rounded-[30px] border border-stone-200 bg-white p-4 shadow-[0_20px_70px_rgba(51,46,33,.07)] sm:p-6 */
.p46-page .p46-workspace {
    padding: 16px;
    border: 1px solid var(--p46-stone-200);
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 0 20px 70px rgba(51, 46, 33, .07);
}

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

/* flex flex-wrap items-center justify-between gap-3 border-b border-stone-100 pb-4 */
.p46-page .p46-workspace__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--p46-stone-100);
}

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

/* mt-1 text-sm font-semibold text-stone-900 */
.p46-page .p46-workspace__batch {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4286;
    font-weight: 600;
    color: var(--p46-stone-900);
}

/* ml-1 rounded-full bg-[#f2eee5] px-2 py-1 text-[9px] font-medium text-[#82643a] */
.p46-page .p46-workspace__count {
    margin-left: 4px;
    padding: 4px 8px;
    border-radius: var(--p46-radius-pill);
    background-color: #f2eee5;
    font-size: 9px;
    font-weight: 500;
    color: #82643a;
}

/* rounded-full bg-emerald-50 px-3 py-1.5 text-[9px] font-semibold text-emerald-700 */
.p46-page .p46-workspace__status {
    padding: 6px 12px;
    border-radius: var(--p46-radius-pill);
    background-color: var(--p46-emerald-50);
    font-size: 9px;
    font-weight: 600;
    color: var(--p46-emerald-700);
}

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

@media (min-width: 640px) {
    .p46-page .p46-workspace__grid {
        gap: 12px;
    }
}

/* relative aspect-[4/5] overflow-hidden rounded-xl bg-stone-100 */
.p46-page .p46-workspace__tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--p46-radius-md);
    background-color: var(--p46-stone-100);
}

.p46-page .p46-workspace__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* absolute bottom-1 left-1 right-1 rounded-full bg-amber-100/95 px-1 py-1 text-center text-[8px] font-semibold text-amber-800 */
.p46-page .p46-workspace__flag {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    padding: 4px;
    border-radius: var(--p46-radius-pill);
    background-color: rgba(254, 243, 198, .95);
    font-size: 8px;
    font-weight: 600;
    text-align: center;
    color: var(--p46-amber-800);
}

/* absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 text-[9px] text-white */
.p46-page .p46-workspace__ok {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--p46-radius-pill);
    background-color: var(--p46-emerald-500);
    font-size: 9px;
    color: #fff;
}

/* mt-5 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-[#f7f4ec] p-4 */
.p46-page .p46-workspace__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    border-radius: var(--p46-radius-card);
    background-color: var(--p46-paper);
}

/* text-xs font-semibold text-stone-800 */
.p46-page .p46-workspace__foot-title {
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 600;
    color: var(--p46-stone-800);
}

/* mt-1 text-[10px] text-stone-500 */
.p46-page .p46-workspace__foot-text {
    margin-top: 4px;
    font-size: 10px;
    color: var(--p46-muted);
}

/* rounded-full bg-white px-3 py-2 text-[10px] font-semibold text-[#83653a] */
.p46-page .p46-workspace__pill {
    padding: 8px 12px;
    border-radius: var(--p46-radius-pill);
    background-color: #fff;
    font-size: 10px;
    font-weight: 600;
    color: #83653a;
}

/* ===========================================================================
   7–13. "The complete 4×6 photo print guide" (TSX 530–614)
   One MagicPath section (py-16 lg:py-20) whose blocks are mt-8 apart; here each
   block is its own section. The first carries the top padding; the guide's
   bottom padding (pb-16 lg:pb-20) belongs to the last guide block (Task 7).
   =========================================================================== */

.p46-page .p46-guide {
    padding-top: 32px;
}

.p46-page .p46-guide--first {
    padding-top: 64px;
}

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

/* mb-8 max-w-3xl */
.p46-page .p46-guide__intro {
    max-width: 48rem;
    margin-bottom: 32px;
}

/* mt-3 font-serif text-4xl tracking-tight text-stone-900 sm:text-5xl */
.p46-page .p46-guide__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-guide__title {
        font-size: 48px;
        line-height: 1;
    }
}

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

/* mb-5 */
.p46-page .p46-guide__head {
    margin-bottom: 20px;
}

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

.p46-page .p46-guide__note--ink {
    color: var(--p46-stone-600);
}

/* ---- 7. Offer card: grid gap-4 lg:grid-cols-3 ----------------------------- */

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

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

/* mt-4 space-y-2 text-xs leading-5 text-stone-600; strong text-stone-900 */
.p46-page .p46-offer__list {
    margin-top: 16px;
    font-size: 12px;
    line-height: 20px;
    color: var(--p46-stone-600);
}

.p46-page .p46-offer__list > :not(:last-child) {
    margin-bottom: 8px;
}

.p46-page .p46-offer__list strong {
    color: var(--p46-stone-900);
}

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

/* mt-4 flex flex-wrap gap-2; rounded-full bg-[#f5f2eb] px-3 py-1.5 text-[10px] */
.p46-page .p46-offer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.p46-page .p46-offer__chips li {
    padding: 6px 12px;
    border-radius: var(--p46-radius-pill);
    background-color: var(--p46-sand);
    font-size: 10px;
}

/* mt-2 font-serif text-3xl */
.p46-page .p46-offer__price {
    margin-top: 8px;
    font-family: var(--p46-serif);
    font-size: 30px;
    line-height: 1.2;
}

/* mt-1 text-xs text-stone-300 */
.p46-page .p46-offer__for {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3333;
    color: var(--p46-stone-300);
}

/* mt-3 text-sm text-[#e2c995]; line-through text-stone-400 */
.p46-page .p46-offer__was {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4286;
    color: #e2c995;
}

.p46-page .p46-offer__was s {
    color: var(--p46-stone-400);
}

/* mt-3 text-[10px] leading-5 text-stone-300 */
.p46-page .p46-offer__fine {
    margin-top: 12px;
    font-size: 10px;
    line-height: 20px;
    color: var(--p46-stone-300);
}

/* ---- 8. Why ours: overflow-x-auto; table w-full min-w-[560px] text-left text-xs ---- */

.p46-page .p46-why__scroll {
    overflow-x: auto;
}

.p46-page .p46-why__table {
    width: 100%;
    min-width: 560px;
    font-size: 12px;
    line-height: 1.3333;
    text-align: left;
}

/* Two columns here (MagicPath has three), so below sm both fit at 50% each
   instead of pushing the budget column out of view. */
@media (max-width: 639px) {
    .p46-page .p46-why__table {
        min-width: 0;
        table-layout: fixed;
    }
}

/* border-b border-stone-200 text-[10px] uppercase tracking-wide text-stone-400 */
.p46-page .p46-why__table thead tr {
    border-bottom: 1px solid var(--p46-stone-200);
    font-size: 10px;
    letter-spacing: .025em;
    text-transform: uppercase;
    color: var(--p46-muted);
}

/* py-3 pr-4 */
.p46-page .p46-why__table th,
.p46-page .p46-why__table td {
    padding: 12px 16px 12px 0;
}

.p46-page .p46-why__table th:last-child,
.p46-page .p46-why__table td:last-child {
    padding-right: 0;
}

/* border-b border-stone-100 (not the last row) */
.p46-page .p46-why__table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--p46-stone-100);
}

.p46-page .p46-why__ours {
    font-weight: 600;
}

.p46-page .p46-why__mark {
    display: inline-block;
    width: 14px;
    margin-right: 6px;
    color: var(--p46-emerald-700);
}

.p46-page .p46-why__mark--no {
    color: var(--p46-muted);
}

/* mt-4 text-[10px] leading-5 text-stone-400 */
.p46-page .p46-why__foot {
    margin-top: 16px;
    font-size: 10px;
    line-height: 20px;
    color: var(--p46-muted);
}

/* ---- 9. Resolution: grid gap-4 md:grid-cols-2 ----------------------------- */

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

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

/* overflow-hidden rounded-2xl border border-stone-200 bg-white; HD border-[#b99b67] */
.p46-page .p46-res__card {
    overflow: hidden;
    border: 1px solid var(--p46-stone-200);
    border-radius: var(--p46-radius-card);
    background-color: #fff;
}

.p46-page .p46-res__card--hd {
    border-color: var(--p46-gold-num);
}

/* h-52 w-full object-cover */
.p46-page .p46-res__img {
    width: 100%;
    height: 208px;
    object-fit: cover;
}

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

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

.p46-page .p46-res__card--hd .p46-res__tag {
    color: var(--p46-gold-text);
}

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

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

/* ---- 10. Close-up: grid grid-cols-2 gap-3 sm:grid-cols-3; rounded-xl bg-white p-4 ---- */

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

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

.p46-page .p46-close__item {
    padding: 16px;
    border-radius: var(--p46-radius-md);
    background-color: #fff;
}

/* mt-4 text-[9px] leading-4 text-stone-500 */
.p46-page .p46-close__foot {
    margin-top: 16px;
    font-size: 9px;
    line-height: 16px;
    color: var(--p46-muted);
}

/* ---- 11 + 12. Specs and delivery: mt-8 grid gap-4 sm:grid-cols-2 --------- */

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

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

/* mt-4 space-y-3 text-xs; flex justify-between gap-3; label text-stone-500, value strong text-stone-900 */
.p46-page .p46-specs__list {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.3333;
}

.p46-page .p46-specs__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

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

.p46-page .p46-specs__row dt {
    color: var(--p46-muted);
}

.p46-page .p46-specs__row dd {
    font-weight: 700;
    color: var(--p46-stone-900);
}

/* mt-3 text-[9px] leading-4 text-stone-400 */
.p46-page .p46-specs__foot {
    margin-top: 12px;
    font-size: 9px;
    line-height: 16px;
    color: var(--p46-muted);
}

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

/* mt-5 rounded-xl border border-white/15 bg-white/[.06] p-4 */
.p46-page .p46-delivery__box {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--p46-radius-md);
    background-color: rgba(255, 255, 255, .06);
}

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

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

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

/* mt-3 text-[9px] leading-4 text-stone-400 */
.p46-page .p46-delivery__foot {
    margin-top: 12px;
    font-size: 9px;
    line-height: 16px;
    color: var(--p46-stone-400);
}

/* ---- 13. Steps: grid grid-cols-2 gap-3 md:grid-cols-3; rounded-xl bg-[#f5f2eb] p-4 ---- */

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

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

.p46-page .p46-steps__item {
    padding: 16px;
    border-radius: var(--p46-radius-md);
    background-color: var(--p46-sand);
}

/* h4 mt-2 text-xs font-semibold (no colour class: inherits the page text colour) */
.p46-page .p46-steps__item .p46-mini__title {
    color: inherit;
}

/* ---- "Your photos are ready" (partials.photo-4x6-v2.your-photos) ----------
   Only when the customer is back from the crop editor with photos: the photos
   themselves, the pack and price, and Add to cart, before the hero. */
.p46-page .p46-yp { padding: 8px 0 20px; }

.p46-page .p46-yp__inner {
    padding: 20px;
    border: 1px solid #d8c9a6;
    border-radius: 24px;
    background: var(--p46-paper);
    box-shadow: 0 20px 50px -24px rgba(51, 46, 33, .35);
}

.p46-page .p46-yp__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #007a55;
}

.p46-page .p46-yp__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #007a55;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0;
}

.p46-page .p46-yp__title {
    margin: 8px 0 0;
    font-family: var(--p46-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--p46-stone-900);
}

.p46-page .p46-yp__lead { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--p46-stone-600); }

/* A row of the customer's photos; scrolls sideways on a phone. */
.p46-page .p46-yp__strip {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 16px -20px 0;
    padding: 4px 20px 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.p46-page .p46-yp__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 2 / 3;
    border: 3px solid #fff;
    border-radius: 10px;
    background: var(--p46-stone-100);
    box-shadow: 0 6px 14px -6px rgba(28, 25, 23, .35);
    overflow: hidden;
    scroll-snap-align: start;
}
.p46-page .p46-yp__thumb--landscape { width: 132px; aspect-ratio: 3 / 2; }
.p46-page .p46-yp__thumb img { display: block; width: 100%; height: 100%; }

.p46-page .p46-yp__qty {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(41, 44, 36, .88);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.p46-page .p46-yp__more { border-style: dashed; border-color: #c9b78f; background: #fff; box-shadow: none; }
.p46-page .p46-yp__more a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--p46-ink);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}
.p46-page .p46-yp__more a span { font-size: 11px; font-weight: 600; color: var(--p46-stone-600); }

.p46-page .p46-yp__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid #e3d9c3;
}

.p46-page .p46-yp__counts { margin: 0; font-size: 15px; font-weight: 600; color: var(--p46-stone-900); }
.p46-page .p46-yp__pack { margin: 2px 0 0; font-size: 13px; color: var(--p46-stone-600); }
.p46-page .p46-yp__change { font-weight: 600; color: var(--p46-ink); text-decoration: underline; text-underline-offset: 2px; }

.p46-page .p46-yp__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.p46-page .p46-yp__price strong { font-family: var(--p46-serif); font-size: 30px; font-weight: 400; line-height: 1; color: var(--p46-stone-900); }
.p46-page .p46-yp__price s { font-size: 14px; color: var(--p46-stone-500); }

.p46-page .p46-yp__notice { margin: 12px 0 0; }

.p46-page .p46-yp__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
}

/* Sized here: the site's style.css gives every button 100 x 40px. */
.p46-page .p46-yp__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 16px 24px;
    border: 0;
    border-radius: var(--p46-radius-pill);
    background: var(--p46-ink);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
.p46-page .p46-yp__cta:hover:not(:disabled) { background: var(--p46-ink-hover); }
.p46-page .p46-yp__cta:disabled { opacity: .6; cursor: progress; }
.p46-page .p46-yp__cta:focus-visible,
.p46-page .p46-yp__edit:focus-visible,
.p46-page .p46-yp__change:focus-visible,
.p46-page .p46-yp__more a:focus-visible { outline: 3px solid var(--p46-ink); outline-offset: 3px; }

.p46-page .p46-yp__edit {
    align-self: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--p46-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 640px) {
    .p46-page .p46-yp__inner { padding: 28px 32px; }
    .p46-page .p46-yp__title { font-size: 32px; }
    .p46-page .p46-yp__strip { margin: 20px -32px 0; padding: 4px 32px 8px; scrollbar-width: none; }
    .p46-page .p46-yp__thumb { width: 104px; }
    .p46-page .p46-yp__thumb--landscape { width: 156px; }
    .p46-page .p46-yp__actions { flex-direction: row; align-items: center; }
    .p46-page .p46-yp__cta { width: auto; min-width: 280px; }
}