/* journal-v5.html only (2026-10-13; copied from v4.css, v4.css untouched): the kept numbered changes after Deni's v4 review.
   Rules for removed changes (12, 14, 16, 17, 18, 20) are left in place but unused by the page.
   Section numbers below = the badge numbers on the page. */

/* ---------- review aid: number badges + legend ---------- */
.v4x{position:relative}
.v4b{position:absolute;z-index:6;top:-13px;left:-11px;display:block;width:30px;height:30px;border-radius:50%;background:#9C4728;color:#fff;font:700 15px/30px 'Inter',system-ui,sans-serif;font-style:normal;letter-spacing:0;text-align:center;text-transform:none;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.35);pointer-events:none;user-select:none}
.v4b--in{top:8px;left:8px}
.v4x:has(>.v4b--side){padding-left:38px}
.v4b--side{top:50%;left:0;transform:translateY(-50%)}
.v4-nobadges .v4b{display:none}
[id^="chg-"]{scroll-margin-top:120px}
@media (max-width:1023px){.v2-acc__btn{scroll-margin-top:5.5rem}} /* SB-211: the desktop html scroll-padding-top (v3.css) already clears the header; phones get it here */
.v4-leg{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;font-family:var(--font-body)}
@media (min-width:900px){.v4-leg{bottom:14px}}
.v4-leg__btn{min-height:40px;padding:.45rem .95rem;border:0;border-radius:999px;background:var(--dark);color:#fff;font:700 13px/1 var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
.v4-leg__btn:focus-visible,.v4-leg__x:focus-visible{outline:3px solid #9C4728;outline-offset:2px}
.v4-leg__panel{position:absolute;left:0;bottom:calc(100% + 8px);width:min(22rem,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:.8rem .9rem;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.3);font-size:13.5px;color:var(--dark)}
.v4-leg__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
.v4-leg__x{width:36px;height:36px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--dark)}
.v4-leg__tog{display:flex;align-items:center;gap:.45rem;padding:.35rem 0 .6rem;border-bottom:1px solid var(--hair);font-weight:600;cursor:pointer}
.v4-leg__tog input{width:18px;height:18px;accent-color:#9C4728}
.v4-leg__list{display:grid;gap:2px;margin:.4rem 0 0;padding:0;list-style:none}
.v4-leg__list a{display:flex;align-items:center;gap:.6rem;padding:.35rem .3rem;border-radius:6px;color:var(--dark);text-decoration:none}
.v4-leg__list a:hover,.v4-leg__list a:focus-visible{background:var(--cream)}
.v4-leg__n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#9C4728;color:#fff;font-size:12px;font-weight:700}
.v4-leg__list b{display:block;font-weight:600;line-height:1.25}
.v4-leg__list small{display:block;font-size:12px;color:var(--text-muted);line-height:1.25}
.v4-proto{display:inline-block;padding:1px 7px;border:1px solid #e3c46a;border-radius:999px;background:#fff3cf;color:#5f4300;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.5;vertical-align:middle;font-style:normal;text-transform:none}
.v4-h3{margin:0 0 .6rem;font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.15;color:var(--dark)}
.v4-h3 em{font-style:italic;font-weight:400}

/* ---------- 16. byline eyebrow + short H1 ---------- */
.v4-byline{width:fit-content}
.v4-h1 em{font-style:italic;font-weight:inherit;color:var(--terracotta-deep)}

/* ---------- 15. three benefit tiles ---------- */
.v4-tileswrap{margin-top:1.1rem}
.v4-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.v4-tiles li{display:grid;justify-items:center;align-content:start;gap:.35rem;padding:.7rem .4rem;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff;font-size:13px;font-weight:600;line-height:1.25;text-align:center;color:var(--dark)}
.v4-tiles__ic svg{display:block;width:26px;height:26px;color:var(--terracotta-deep)}

/* ---------- 12. price per week ---------- */
.v4-week{width:fit-content;margin:.3rem 0 0;font-size:13px;color:var(--text-muted)}

/* ---------- 17. name fields ---------- */
.v4-names{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;margin:1rem 0 0;padding:.7rem .9rem .75rem;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff;min-width:0}
.v4-names legend{padding:0 .3rem;font-size:14px;font-weight:600;color:var(--dark)}
.v4-names legend span{font-size:12px;font-weight:400;color:var(--text-muted)}
.v4-names label{display:grid;gap:.25rem;font-size:13px;font-weight:600;color:var(--dark)}
.v4-names input{box-sizing:border-box;width:100%;min-height:44px;padding:.4rem .6rem;border:1px solid #bfb3a3;border-radius:6px;background:#fff;font:400 16px/1.2 var(--font-body);color:var(--dark)}
.v4-names input:focus-visible{outline:3px solid var(--dark);outline-offset:1px}
.v4-names__prev{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--text-muted)}
.v4-names__prev b{color:var(--dark);font-weight:600}

/* ---------- 18. extras (prototype) ---------- */
.v4-extras{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;margin:.8rem 0 0;padding:.6rem .9rem .8rem;border:1px dashed #c9b9a5;border-radius:var(--r-md);min-width:0}
.v4-extras legend{padding:0 .3rem;font-size:14px;font-weight:600;color:var(--dark)}
.v4-extra{display:flex;align-items:flex-start;gap:.55rem;padding:.6rem .65rem;border:1px solid var(--hair);border-radius:8px;background:#fff;font-size:13.5px;cursor:pointer}
.v4-extra input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--terracotta-deep)}
.v4-extra b{display:block;color:var(--dark)}
.v4-extra small{display:block;font-size:12px;color:var(--text-muted)}
.v4-extra:has(input:checked){border-color:var(--terracotta-deep);box-shadow:0 0 0 1px var(--terracotta-deep)}

/* ---------- 6. fact line / 20. delivery placeholder ---------- */
.v4-fact{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.65rem 0 0;font-size:14px;font-weight:600;color:var(--dark)}
.v4-fact svg{flex:none;width:18px;height:18px;color:#5d6b53}
.v4-deliv{margin:.45rem 0 0;font-size:12.5px;line-height:1.4;color:var(--text-muted);text-align:center}

/* ---------- 14. what's included ---------- */
.v4-incl{margin:.8rem 0 0;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff}
.v4-incl summary{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:.6rem .9rem;font-weight:600;color:var(--dark);cursor:pointer;list-style:none}
.v4-incl summary::-webkit-details-marker{display:none}
.v4-incl summary::after{content:"";width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.v4-incl[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.v4-incl summary:focus-visible{outline:3px solid var(--dark);outline-offset:2px}
.v4-incl ul{display:grid;gap:.55rem;margin:0;padding:0 .9rem .5rem;list-style:none}
.v4-incl li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:.7rem;font-size:13.5px;line-height:1.3;color:var(--text)}
.v4-incl li img,.v4-incl__dots{display:block;width:44px;height:58px;object-fit:cover;border-radius:3px;box-shadow:0 1px 4px rgba(46,42,38,.3)}
.v4-incl__dots{background:#f6efe4 radial-gradient(circle,#9b8f80 1px,transparent 1.4px) 3px 3px/7px 7px}
.v4-incl li b{display:block;color:var(--dark)}
.v4-incl .note{margin:0;padding:0 .9rem .8rem;font-size:12px}

@media (max-width:860px){
  .pdp--g1 .v3-buyhead .v4-tileswrap{order:-11}
  .pdp--g1 .v4-names{order:-6}
  .pdp--g1 .v4-fact,.pdp--g1 .v4-deliv,.pdp--g1 .v4-incl,.pdp--g1 .v4-extras{order:-5}
}

/* ---------- 1. before/after slider ---------- */
.v4-baRow{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:1.2rem;margin-top:clamp(2rem,4vw,3.5rem);padding:clamp(1rem,2.5vw,1.8rem);border-radius:var(--r-lg);background:#fff;box-shadow:var(--v2-shadow)}
.v4-baRow__txt p{margin:0;color:var(--text);max-width:34rem}
@media (min-width:768px){.v4-baRow{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:2.5rem}}
.v4-ba{justify-self:center;width:min(100%,340px);margin:0}
.v4-ba__frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:6px;background:#e9e2d6;touch-action:pan-y}
.v4-ba__frame:has(.v4-ba__range:focus-visible){outline:3px solid var(--dark);outline-offset:3px}
.v4-ba__after,.v4-ba__before{position:absolute;inset:0;overflow:hidden}
.v4-ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.v4-ba img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none;transform-origin:0 0}
.v4-ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none;z-index:2}
.v4-ba__knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--dark);box-shadow:0 2px 10px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.v4-ba__knob svg{width:22px;height:22px}
.v4-ba__lbl{position:absolute;bottom:.6rem;z-index:2;padding:2px 8px;border-radius:3px;background:rgba(43,35,30,.8);color:#fff;font-size:12px;font-weight:600;pointer-events:none}
.v4-ba__lbl--l{left:.6rem}.v4-ba__lbl--r{right:.6rem}
.v4-ba .v4-ba__tag{left:auto;right:.6rem;top:.6rem}
.v4-ba__range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.v4-ba figcaption{margin-top:.5rem;font-size:13px;color:var(--text-muted);text-align:center}

/* ---------- 13. exploded planner diagram ---------- */
.v4-xpl{margin-top:clamp(1.6rem,3vw,2.6rem);padding:clamp(1rem,2.5vw,1.8rem);border-radius:var(--r-lg);background:#fff;box-shadow:var(--v2-shadow)}
.v4-xpl__head{max-width:40rem;margin-bottom:1.4rem}
.v4-xpl__head p{margin:0;color:var(--text-muted);font-size:var(--fs-small)}
.v4-xpl .v4-xpl__tag{left:auto;right:.8rem;top:.8rem}
.v4-xpl__stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
.v4-xpl__pg{display:grid;align-content:start;gap:.7rem;margin:0}
.v4-xpl__img{position:relative;aspect-ratio:991/1531;container-type:inline-size;border-radius:3px;background:#f6efe4;box-shadow:0 14px 26px -14px rgba(46,42,38,.65),0 0 0 1px rgba(46,42,38,.06)}
.v4-xpl__img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.v4-xpl__dot,.v4-xpl figcaption i{display:inline-grid;place-items:center;border-radius:50%;background:var(--dark);color:#fff;font-family:var(--font-body);font-style:normal;font-weight:700}
.v4-xpl__dot{position:absolute;z-index:2;width:24px;height:24px;font-size:12px;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35)}
.v4-xpl figcaption{font-size:13px;line-height:1.35;color:var(--text)}
.v4-xpl figcaption i{width:18px;height:18px;margin-right:.35rem;font-size:10px;vertical-align:1px}
.v4-xpl figcaption b{color:var(--dark);margin-right:.25rem}
.v4-xpl figcaption span{display:block;margin-top:.15rem}
@media (min-width:900px){
  .v4-xpl__stage{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem;padding:.6rem .4rem 0}
  .v4-xpl__pg:nth-child(odd) .v4-xpl__img{transform:rotate(-2.5deg) translateY(6px)}
  .v4-xpl__pg:nth-child(even) .v4-xpl__img{transform:rotate(2deg) translateY(-6px)}
  .v4-xpl__pg--cover .v4-xpl__img{transform:rotate(-4deg) translateY(10px)}
}

/* ---------- 4. repeated CTA ---------- */
.v4-rep{display:flex;justify-content:center;width:fit-content;max-width:100%;margin:clamp(1.6rem,3vw,2.4rem) auto 0}
.v4-rep .v4-rep__btn{width:auto;min-width:min(100%,20rem);min-height:52px;padding:.7rem 1.6rem}

/* ---------- 19. video placeholder ---------- */
.v4-video{display:grid;place-items:center;align-content:center;gap:.7rem;width:min(100%,40rem);aspect-ratio:16/9;margin:1rem auto 1.8rem;border:2px dashed #c9b9a5;border-radius:var(--r-lg);background:repeating-linear-gradient(135deg,#f6efe4 0 14px,#f0e6d7 14px 28px);color:var(--dark);text-align:center}
.v4-video__play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(46,42,38,.85);color:#fff}
.v4-video__play svg{width:30px;height:30px;margin-left:3px}
.v4-video__t{padding:0 1rem;font-size:15px}
.v4-video .v4-video__tag{position:absolute;top:.7rem;right:.7rem}
/* SB-212: the real clip takes the placeholder's box (same width, 16:9, radius); no dashed frame, no hatch */
.v4-video--clip{display:block;height:auto;object-fit:cover;border:0;background:#f6efe4}
.v4-vfig{margin:0;display:block}
.v5-door .v4-vfig .v4-video{margin:0}
.v4-vfig figcaption{margin-top:.5rem;font-size:13px;line-height:1.35;color:var(--text-muted);text-align:center}

/* ---------- 7. order-to-door timeline ---------- */
.v4-tl{margin-top:2rem;padding:clamp(1rem,2.5vw,1.6rem);border:1px solid var(--hair);border-radius:var(--r-lg);background:#fff}
.v4-tl__list{display:grid;gap:1.1rem;margin:.4rem 0 0;padding:0;list-style:none;counter-reset:tl}
.v4-tl__list li{position:relative;display:grid;gap:.15rem;min-height:2.4rem;padding-left:3.2rem;counter-increment:tl}
.v4-tl__list li::before{content:counter(tl);position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:2.3rem;height:2.3rem;border:2px solid var(--dark);border-radius:50%;background:#fff;color:var(--dark);font:700 1.05rem/1 var(--font-display)}
.v4-tl__list li:not(:last-child)::after{content:"";position:absolute;left:calc(1.15rem - 1px);top:2.3rem;bottom:-1.1rem;width:2px;background:var(--hair)}
.v4-tl__list b{font-size:15px;color:var(--dark)}
.v4-tl__list span{font-size:13.5px;color:var(--text-muted)}
/* v5: the timeline sits in one column beside the video (.v5-door), so it stays vertical at every width */

/* ---------- 8. comparison: our column as a tall tinted raised card (v5: made OBVIOUS after Deni could not see the v4 change) ---------- */
/* our column: terracotta header cap (taller than the other headers), tinted body, 3px brand border, deep side shadows, brand-colour ticks */
.v4-cmp .v2-us{position:relative;z-index:1;background:color-mix(in srgb,var(--terracotta) 15%,#fff);color:var(--dark);border-left:3px solid var(--terracotta-deep);border-right:3px solid var(--terracotta-deep);border-bottom-color:color-mix(in srgb,var(--terracotta) 28%,#fff);box-shadow:-22px 0 30px -18px rgba(120,52,26,.55),22px 0 30px -18px rgba(120,52,26,.55);font-weight:600}
.v4-cmp thead .v2-us{padding-top:2.4rem;padding-bottom:.9rem;background:var(--terracotta-deep);border-top:3px solid var(--terracotta-deep);color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em}
.v4-cmp thead .v2-us img{width:42px;height:60px;box-shadow:0 0 0 2px #fff,0 6px 14px -4px rgba(0,0,0,.5)}
.v4-cmp tbody tr:last-child .v2-us{padding-bottom:1.8rem;border-bottom:3px solid var(--terracotta-deep)}
.v4-cmp .v2-us .v2-yes{width:26px;height:26px;background-color:var(--terracotta-deep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")}
.v4-cmp .v2-us .v2-no::before{background:var(--text-muted)}
/* the other two columns: quieter */
.v4-cmp thead th:not(.v2-us){color:#756f69;font-weight:500}
.v4-cmp td:not(.v2-us) .v2-yes{background-color:#c9c3ba;width:20px;height:20px}
.v4-cmp td:not(.v2-us) .v2-no::before{background:#e6e0d8}

/* ---------- 9. guarantee as a full-bleed colour band ---------- */
.v4-guarband{overflow:hidden;background:#4f5d46;color:#fff}
.v4-guarband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.6);pointer-events:none}
.v4-guarband>.v2w{position:relative;z-index:1}
.v4-guarband .v2-kicker{color:#f3d9a8}
.v4-guarband .v2-guar__h{color:#fff}
.v4-guarband .v2-guar__p{color:rgba(255,255,255,.92)}
.v4-guarband .v2-guar__ic{color:#fff}
.v4-guarband .v2-guar__ic .v2-ic{background:#fff;color:var(--dark)}

/* ---------- 10. FAQ two columns + sticky card ---------- */
.v4-faq>.v4b{top:-36px;left:calc(var(--g) - 11px)}
.v4-faqcard{display:none;gap:.55rem;padding:1.1rem;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--warm-white);box-shadow:var(--v2-shadow);text-align:center}
.v4-faqcard__img{position:relative;width:62%;margin:0 auto .3rem;aspect-ratio:5.5/8.5;container-type:inline-size}
.v4-faqcard__img img,.v4-closer__img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px 6px 6px 2px;box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.4),0 14px 30px -14px rgba(46,42,38,.6)}
.v4-faqcard__img .v2-tag{font-size:11px}
.v4-faqcard__t{margin:0;font-family:var(--font-display);font-size:1.15rem;color:var(--dark)}
.v4-faqcard__p{margin:0;font-size:1.3rem;font-weight:700;color:var(--dark)}
.v4-faqcard .btn{width:100%;min-height:52px;padding-inline:.8rem;font-size:15px}
.v4-faqcard__f{margin:0;font-size:12.5px;color:var(--text-muted)}
@media (min-width:900px){
  .v4-faq{grid-template-columns:minmax(0,1fr) minmax(0,19rem);column-gap:3.5rem}
  .v4-faq .v2-faq__aside{position:static;grid-column:1;grid-row:1}
  .v4-faq .v2-acc{grid-column:1;grid-row:2}
  .v4-faqcard{display:grid;grid-column:2;grid-row:1 / span 2;position:sticky;top:6rem;align-self:start}
}

/* ---------- 5. final closer card ---------- */
.v4-closer{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:1.4rem;max-width:60rem;margin:0 auto;padding:clamp(1.2rem,3vw,2.4rem);border-radius:var(--r-lg);background:#fff;box-shadow:var(--v2-shadow)}
.v4-closer__img{position:relative;width:min(60%,15rem);margin:0 auto;aspect-ratio:5.5/8.5;container-type:inline-size}
.v4-closer__txt{display:grid;justify-items:start;gap:.8rem}
.v4-closer__txt .v2-h2{margin:0}
.v4-closer__p{margin:0;font-size:1.6rem;font-weight:700;color:var(--dark)}
.v4-closer__p span{margin-left:.4rem;font-size:14px;font-weight:400;color:var(--text-muted)}
.v4-closer .btn{width:min(100%,24rem)}
.v4-closer .v4-fact{justify-content:flex-start;margin:0}
@media (min-width:768px){.v4-closer{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2.6rem}.v4-closer__img{width:100%}}

/* ---------- 11. size cards ---------- */
.v4-size{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;max-width:40rem;margin:1.4rem auto 0}
@media (max-width:519px){.v4-size{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-size__card--us{grid-column:1/-1}}
.v4-size__card{padding:.9rem .6rem;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff;text-align:center}
.v4-size__card--us{border-color:var(--terracotta-deep);box-shadow:0 0 0 1px var(--terracotta-deep)}
.v4-size__card p{margin:0}
.v4-size__k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.v4-size__big{margin:.25rem 0 .15rem!important;font-family:var(--font-display);font-size:clamp(1rem,.85rem + .8vw,1.35rem);font-weight:700;line-height:1.15;color:var(--dark)}
.v4-size__cm{font-size:12.5px;line-height:1.3;color:var(--text-muted)}

/* ---------- 3. sticky bar ---------- */
.v4-sticky .btn{min-width:0}
@media (max-width:420px){.v4-sticky .v2-sticky__p{display:none}.v4-sticky .btn{flex:1 1 auto;font-size:15px}}

/* ---------- v5: 15 compact tiles directly below the main CTA ---------- */
.v5-tiles{margin-top:.7rem}
.v5-tiles .v4-tiles{gap:.4rem}
.v5-tiles .v4-tiles li{gap:.2rem;padding:.4rem .3rem;font-size:12px;font-weight:600}
.v5-tiles .v4-tiles__ic svg{width:20px;height:20px}

/* ---------- v5: 6 = two fact lines under the gift line ---------- */
.v5-facts{display:grid;gap:.3rem;margin:.75rem 0 0}
.v5-facts p{display:flex;align-items:center;gap:.45rem;margin:0;font-size:14px;font-weight:600;color:var(--dark)}
.v5-facts svg{flex:none;width:18px;height:18px;color:#5d6b53}

/* ---------- v5: 7 + 19 = one "From order to your door" block ---------- */
.v5-door{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center}
.v5-door .v4-tl{margin:0}
.v5-door .v4-tl .v2-h2{margin:0 0 1.2rem}
.v5-door .v4-video{width:100%;margin:0}
@media (min-width:900px){.v5-door{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem}}

@media (max-width:860px){.pdp--g1 .v5-tiles{order:-5}}
/* a11y gate 2026-10-16 (axe color-contrast, 9 nodes): the root muted grey #756F69 is 3.96-4.29:1 on this page's cream bands; #6a645e is >= 4.67:1 on all of them */
.v2-body{--text-muted:#6a645e}
/* SB-215: a gallery slot with no tag (the card images) leaves #stylemain-tag empty; do not draw an empty pill */
.extag:empty{display:none}
/* SB-216: a square card image inside the existing .v2-panel__fig card, capped so it never fills a desktop row */
.v5-cardfig{max-width:34rem;margin:1.6rem auto 0}
/* Photo controls stay on the photograph; the product choices keep their own space. */
.pdp--g1 .stylemain>.gallery-nav--sides{position:absolute;inset:0;display:block;padding:0;pointer-events:none;z-index:4}
.pdp--g1 .gallery-nav--sides>.cbtn{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:48px;min-height:48px;pointer-events:auto;background:var(--warm-white,var(--cream));color:var(--dark);border:1px solid var(--hair);box-shadow:none;opacity:.92}
.pdp--g1 .gallery-nav--sides>.cbtn--prev{left:8px}
.pdp--g1 .gallery-nav--sides>.cbtn--next{right:8px}
.pdp--g1 .gallery-nav--sides>.cbtn:hover,.pdp--g1 .gallery-nav--sides>.cbtn:focus-visible{opacity:1;transform:translateY(-50%);background:var(--cream)}
.pdp--g1 .gallery-nav--sides .gdots{display:none}
.pdp--g1 .gallery-nav--sides .gnav__count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* SB-244 (2026-10-25): reflow at mid widths and under browser zoom (Codex accessibility handoff).
   The hero kept a fixed 600px/560px gallery track from 861px up, so the purchase column got the
   leftovers (125px at 861, 270px at 1023) and its text spilled; the style names clipped at every width.
   1. The gallery and the purchase column share the row until the gallery can afford its fixed width. */
@media (min-width:861px){.pdp--g1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1024px){.pdp--g1{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (min-width:1280px){.pdp--g1{grid-template-columns:minmax(0,620px) minmax(0,1fr)}}
/* 2. The three benefits become rows when their box is too narrow for three columns (em: follows the text). */
.pdp--g1 .v4-tileswrap{container:v4tiles/inline-size}
@container v4tiles (max-width:21em){
  .pdp--g1 .v4-tiles{grid-template-columns:minmax(0,1fr)}
  .pdp--g1 .v4-tiles li{grid-template-columns:26px minmax(0,1fr);justify-items:start;align-items:center;column-gap:.6rem;padding:.5rem .75rem;text-align:left}
}
/* 3. Style names: swatch above the name, the name may wrap (it was nowrap and clipped by overflow:hidden). */
.pdp--g1 .v3-sel{container:v3sel/inline-size}
.pdp--g1 .v3-sel .cards--styles.cards--pic .rcard__body.rcard__body--sw{flex-direction:column;justify-content:center;gap:.25rem;padding:.35rem .25rem;white-space:normal}
.pdp--g1 .v3-sel .cards--styles.cards--pic .rcard__t{max-width:100%;text-align:center} /* a centred flex item sizes to its text; the cap lets a long name wrap */
/* the label sits beside its row only when the panel is wide enough to keep four names and five seasons whole */
@container v3sel (max-width:36em){.pdp--g1 .v3-sel .v3-sel__row{grid-template-columns:minmax(0,1fr)}}
/* very narrow panel (320px phones, or zoomed): two style columns, three season columns */
@container v3sel (max-width:20em){
  .pdp--g1 .v3-sel .cards--styles.cards--pic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp--g1 .gallery .v3-sel .seasons4,.pdp--g1 .gallery .v3-sel .seasons4.has-cov,.pdp--g1 .v3-sel .seasons4.has-cov{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pdp--g1 .gallery .v3-sel .seasons4.has-cov .tn,.pdp--g1 .v3-sel .seasons4.has-cov .tn{margin:0} /* three wide squares: the names need no borrowed 6px */
}
/* 4. FR comparison table at 320px (400% zoom of a 1280 window): "synchronisation" set a 337px min-content in a
   288px box. Hyphenate inside the cells below 360px only; the table keeps its columns and rows. */
@media (max-width:359px){.v2-cmp th,.v2-cmp td{-webkit-hyphens:auto;hyphens:auto}}
/* 5. Safety net for enlarged text: a single word wider than its line breaks instead of running out of its box.
   break-word never touches a line that fits, so the default size renders as before. */
.pdp--g1 .v3-buyhead h1,.pdp--g1 .v2-buy__sub,.pdp--g1 .v2-gift,.pdp--g1 .v4-tiles li,.pdp--g1 .v3-sel .v3-lbl,.pdp--g1 .v3-sel .rcard__t,.pdp--g1 .v3-sel .seasons4 .tn,#cta{overflow-wrap:break-word}
/* The first action starts a free preview; the product price remains in the price box and sticky bar. */
.v5-preview-entry{display:none}
.pdp--g1 .pricebox__p{font-size:1.125rem}
@media (max-width:860px){
  .v5-preview-entry{display:block;order:-14;margin:.75rem 0}
  .v5-preview-entry .btn{width:100%;white-space:normal}
}
.slide .v5-photo-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.slide .v5-photo-zoom:focus-visible{outline:3px solid var(--dark);outline-offset:-4px}
.slide .v5-photo-zoom:active{opacity:.9}

/* Approved illustrative examples, explicitly fictional on every viewport. No customer rating or sales feed. */
.entry-proof{padding-block:clamp(1.75rem,3vw,3rem);background:var(--cream);color:var(--dark);overflow:hidden;border-block:1px solid var(--hair)}
.entry-proof__head{max-width:var(--page);margin:0 auto 1.1rem;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.entry-proof h2{font-size:var(--fs-h2);text-wrap:balance}
.entry-proof__disclosure{max-width:65ch;margin:.35rem 0 0;font-size:.875rem;line-height:1.4;font-weight:400;color:var(--text)}
.entry-proof__disclosure strong{display:block;font-weight:700}
.entry-proof__controls{display:flex;flex:none;gap:.4rem}
.entry-proof button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:11px;border:1px solid var(--hair);border-radius:50%;background:var(--warm-white);font:inherit;color:var(--dark);cursor:pointer}
.entry-proof button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entry-proof button:hover{background:var(--cream-deep)}
.entry-proof button:active{transform:scale(.95)}
.entry-proof button:focus-visible,.entry-proof__viewport:focus-visible{outline:3px solid var(--terracotta-deep);outline-offset:3px}
.entry-proof__viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--text-muted) var(--cream);padding-bottom:.5rem}
.entry-proof__track{display:flex;width:max-content}
.entry-proof__group{display:flex;gap:1rem;padding:0 1rem 0 0;margin:0;list-style:none}
.entry-proof__card{flex:none;width:clamp(17rem,25vw,21rem);min-height:11rem;padding:1.25rem 1.4rem;border-radius:var(--r-lg);background:var(--warm-white)}
.entry-proof__person{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}
.entry-proof__avatar{display:block;width:48px;height:48px;flex:none;border-radius:50%;background-color:var(--cream-deep);background-image:url('img/product/entry-avatars-v2.webp');background-size:500% auto;background-position:0% 50%;background-repeat:no-repeat}
.entry-proof__avatar[data-portrait="2"]{background-position:25% 50%}
.entry-proof__avatar[data-portrait="3"]{background-position:50% 50%}
.entry-proof__avatar[data-portrait="4"]{background-position:75% 50%}
.entry-proof__avatar[data-portrait="5"]{background-position:100% 50%}
.entry-proof__stars{display:flex;gap:2px;margin-top:.3rem;color:var(--terracotta-deep)}
.entry-proof__stars svg{display:block;width:15px;height:15px;fill:currentColor}
.entry-proof__fiction,.entry-proof__owner{display:block;font-size:var(--fs-label);line-height:1.4;color:var(--text)}
.entry-proof__fiction{font-weight:700}
.entry-proof blockquote{margin:0;font-family:var(--font-display);font-size:1.25rem;line-height:1.35;color:var(--dark)}
@media(max-width:640px){.entry-proof__head{align-items:flex-start;flex-direction:column}.entry-proof__card{width:17.5rem}}
@media(prefers-reduced-motion:reduce){.entry-proof__group[aria-hidden="true"]{display:none}.entry-proof__pause{display:none!important}}

/* Review-only charitable-impact line below the primary Planner action. */
.planner-impact{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;margin:.85rem 0 0;padding:.8rem .95rem;background:var(--cream);border-radius:var(--r-md);color:var(--dark)}
.planner-impact[hidden]{display:none}
.planner-impact>img{width:50px;height:50px;object-fit:contain}
.planner-impact>div{display:grid;gap:.08rem}
.planner-impact strong{font-family:var(--font-display);font-size:1rem;font-weight:600}
.planner-impact span{font-size:.8rem;line-height:1.4}
.planner-impact small{font-size:.66rem;line-height:1.35;color:var(--text-muted)}