/* ============================================================
   SHOP — extends site.css, inherits all design tokens.
   No new colours, no new fonts. Purely layout for commerce.
   ============================================================ */

.shop-hero{padding:72px 0 48px;background:var(--paper)}
.shop-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.shop-hero__copy h1{font-size:clamp(38px,5vw,64px);letter-spacing:-.03em;line-height:1.04;margin-bottom:20px}
.shop-hero__copy .lede{max-width:52ch;margin-bottom:28px}
.shop-hero__proof{display:flex;gap:36px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--rule)}
.shop-hero__proof div strong{display:block;font-size:26px;font-weight:800;color:var(--brand-purple);letter-spacing:-.02em}
.shop-hero__proof div span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.shop-hero__photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-2)}
.shop-hero__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Product grid ---------- */
.shop-main{padding:16px 0 96px;background:var(--paper)}
.shop-group{margin-bottom:64px}
.shop-group__head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.shop-group__head h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0}
.shop-group__head span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;align-items:stretch}

/* ============================================================
   PRODUCT CARD
   Image slot is a FIXED 640 x 420 (3:2). Supply artwork at
   1280 x 840 for retina. Images never move — no zoom, no pan.
   Depth comes from a real stacked shadow + a lifted edge.
   ============================================================ */
.pcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid rgba(72,1,105,.16);border-radius:0;overflow:hidden;position:relative;
  /* Every card the same height, asked for directly.
     The image is a fixed 3:2 slot and every card in a row is the same width,
     so the picture is already identical. Fixing the height of everything
     BELOW it therefore fixes the card - and does it without pinning a pixel
     height on the card itself, which would have to change at every breakpoint
     as the image gets taller or shorter.
     Measured before this: 11 cards, four different heights, 606-653px. */
  /* The shared card depth, from site.css. shop.css loads after it, so a
     literal shadow here silently beat the site-wide rule and left product
     cards on the old, shallower one. */
  box-shadow:var(--card-3d);
  transition:transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms cubic-bezier(.2,.7,.3,1), border-color 260ms;
}
.pcard:hover{
  transform:translateY(-10px);
  border-color:var(--gold);
  box-shadow:var(--card-3d-hover);
}
/* glossy highlight along the top edge — static, no sweep */
.pcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:44%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay;
}

/* FIXED image slot — 3:2, images are static */
.pcard__media{
  position:relative;display:block;width:100%;aspect-ratio:3/2;flex:0 0 auto;
  overflow:hidden;background:var(--cream);
}
.pcard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:none !important;transition:none !important;   /* never zoom */
}
.pcard:hover .pcard__media img{transform:none !important}
/* thin gold rule separating image from body */
.pcard__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);z-index:2;
}
.pcard__flag{
  position:absolute;top:0;left:0;z-index:3;background:var(--gold);color:var(--ink);
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:8px 14px;border-radius:0;
}
/* Fixed, not flexible. --pcard-body is the sum of the parts below: the kicker
   line whether or not a product has one, two lines of title, three lines of
   description, and the price row. .pcard__foot keeps margin-top:auto, so a
   card with no kicker puts the slack above the price rather than changing
   height. */
:root{--pcard-body:252px}
.pcard__body{
  padding:22px 24px 0;display:flex;flex-direction:column;
  height:var(--pcard-body);flex:0 0 auto;min-height:0;
}
.pcard__kicker{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--brand-purple);font-weight:800;margin-bottom:9px}
.pcard__title{
  font-size:18.5px;font-weight:700;line-height:1.34;letter-spacing:-.01em;
  margin-bottom:10px;color:var(--ink);
  /* Two lines' worth, whether the title needs one or two. */
  min-height:calc(2 * 1.34em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.34em);padding-bottom:2px;
}
.pcard__desc{
  font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:2px;
  /* Three lines' worth, clamped at three, so short and long copy occupy the
     same space and the price sits at the same height on every card. */
  min-height:calc(3 * 1.6em);
}
.pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
/* The rating line only renders when a product has one, which left cards
   without a rating 27px shorter than their neighbours. The price column
   reserves the space either way. */
.pcard__foot > div:first-child{min-height:calc(28px + 6px + 1.2em)}
.pcard__price{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.pcard__price s{font-size:15px;font-weight:500;color:var(--faint);margin-left:8px}
.pcard__price .free{font-size:20px;color:var(--brand-purple)}
.pcard__rating{font-size:12px;color:var(--gold-deep);margin-top:6px;display:block;font-weight:700}
.pcard__actions{display:flex;flex-direction:column;gap:9px;padding:18px 24px 24px;position:relative;z-index:6}
.pcard .btn{width:100%;justify-content:center}
.pcard__learn{text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-purple);text-decoration:underline;text-underline-offset:3px}
.pcard__learn:hover{color:var(--gold-deep)}

/* ---------- Trust strip ---------- */
.trust{background:var(--cream);padding:36px 0;margin-bottom:64px}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.trust__item{display:flex;gap:13px;align-items:flex-start}
.trust__item svg{flex-shrink:0;color:var(--brand-purple);margin-top:2px}
.trust__item strong{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.trust__item span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- Demo banner ---------- */
.demobar{background:var(--ink);color:#fff;text-align:center;padding:11px 20px;font-size:13px;letter-spacing:.02em;position:relative;z-index:60}
.demobar strong{color:#fff;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11px;background:var(--brand-purple);padding:4px 9px;border-radius:2px;margin-right:10px}

/* ---------- Modal (checkout + booking + notices) ---------- */
.mdl{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.mdl.is-open{display:flex}
.mdl__scrim{position:absolute;inset:0;background:rgba(17,17,17,.55);backdrop-filter:blur(3px)}
.mdl__panel{position:relative;background:var(--paper);border-radius:var(--radius);width:min(520px,100%);max-height:88vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.24);animation:mdlIn 260ms cubic-bezier(.2,.7,.3,1)}
@keyframes mdlIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mdl__panel{animation:none}}
.mdl__head{padding:26px 28px 18px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mdl__head h3{font-size:21px;letter-spacing:-.02em;margin:0 0 5px}
.mdl__head p{font-size:13.5px;color:var(--muted);margin:0}
.mdl__x{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-size:17px;line-height:1;color:var(--muted);background:none;cursor:pointer}
.mdl__x:hover{background:var(--cream);color:var(--ink)}
.mdl__body{padding:24px 28px}
.mdl__foot{padding:0 28px 28px}
.mdl__line{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14.5px;border-bottom:1px solid var(--rule)}
.mdl__line:last-of-type{border-bottom:0}
.mdl__line span:first-child{color:var(--muted)}
.mdl__line span:last-child{font-weight:600;color:var(--ink)}
.mdl__line.total{padding-top:16px;margin-top:6px;border-top:2px solid var(--ink);border-bottom:0}
.mdl__line.total span{font-size:19px;font-weight:800;color:var(--ink)}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:7px}
.fld input,.fld select{width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);font:inherit;font-size:15px;color:var(--ink);background:var(--paper)}
.fld input:focus,.fld select:focus{outline:2px solid var(--brand-purple);outline-offset:1px;border-color:transparent}
.mdl .btn{width:100%;justify-content:center}
.mdl__note{font-size:12px;color:var(--muted);text-align:center;margin-top:13px;line-height:1.55}
.mdl__ok{text-align:center;padding:12px 0 4px}
.mdl__ok .tick{width:60px;height:60px;border-radius:50%;background:var(--cream);color:var(--brand-purple);display:grid;place-items:center;margin:0 auto 18px}
.mdl__ok h4{font-size:22px;letter-spacing:-.02em;margin-bottom:9px}
.mdl__ok p{font-size:14.5px;color:var(--muted);margin:0 auto;max-width:38ch}

/* ---------- Booking calendar ---------- */
.bk{display:grid;grid-template-columns:1fr 190px;gap:22px}
.bk__cal{border:1px solid var(--rule);border-radius:var(--radius);padding:16px}
.bk__nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bk__nav strong{font-size:15px;letter-spacing:-.01em}
.bk__nav button{width:28px;height:28px;border:1px solid var(--rule);border-radius:var(--radius);background:none;cursor:pointer;color:var(--muted);line-height:1}
.bk__nav button:hover:not(:disabled){background:var(--cream);color:var(--brand-purple)}
.bk__nav button:disabled{opacity:.3;cursor:not-allowed}
.bk__dow,.bk__days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk__dow span{text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:7px;font-weight:700}
.bk__day{aspect-ratio:1;border:0;background:none;border-radius:var(--radius);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.bk__day:hover:not(:disabled){background:var(--cream)}
.bk__day:disabled{color:rgba(17,17,17,.26);cursor:not-allowed}
.bk__day.is-sel{background:var(--brand-purple);color:#fff;font-weight:700}
.bk__slots{display:flex;flex-direction:column;gap:7px}
.bk__slots p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:3px}
.bk__slot{padding:9px;border:1px solid var(--rule);border-radius:var(--radius);background:none;font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink)}
.bk__slot:hover{border-color:var(--brand-purple);color:var(--brand-purple)}
.bk__slot.is-sel{background:var(--brand-purple);border-color:var(--brand-purple);color:#fff;font-weight:600}
.bk__empty{font-size:13px;color:var(--muted);line-height:1.5;padding-top:22px}

/* ---------- Legal pages ---------- */
.legal{padding:64px 0 96px;background:var(--paper)}
.legal__inner{max-width:760px}
.legal h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;margin-bottom:10px}
.legal .updated{font-size:13px;color:var(--muted);margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.legal h2{font-size:20px;letter-spacing:-.01em;margin:36px 0 12px}
.legal p,.legal li{font-size:15px;line-height:1.72;color:var(--muted);margin-bottom:13px}
.legal ul{padding-left:20px;margin-bottom:18px}
.legal a{color:var(--brand-purple);text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .shop-hero__inner{grid-template-columns:1fr;gap:36px}
  .shop-hero{padding:44px 0 32px}
  .bk{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr}
  .mdl{padding:0;align-items:flex-end}
  .mdl__panel{width:100%;max-height:92vh;border-radius:var(--radius) var(--radius) 0 0}
  .shop-hero__proof{gap:24px}
}

/* ---------- Product detail page ---------- */
.pdp{padding:40px 0 24px;background:var(--paper)}
.pdp__back{display:inline-block;font-size:13.5px;color:var(--muted);margin-bottom:32px}
.pdp__back:hover{color:var(--brand-purple)}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.pdp__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--cream);box-shadow:var(--shadow-2)}
.pdp__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pdp__copy h1{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08;margin:6px 0 12px}
.pdp__rating{font-size:13px;color:var(--muted);margin-bottom:14px}
.pdp__copy .lede{margin-bottom:14px}
.pdp__buybox{margin-top:28px;padding:24px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--cream)}
.pdp__price{font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px;line-height:1}
.pdp__price s{font-size:18px;font-weight:500;color:var(--muted);margin-left:10px;opacity:.75}
.pdp__price .free{color:var(--brand-purple)}
.pdp__buybox .btn{width:100%;justify-content:center}
.pdp__reassure{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.pdp__missing{padding:64px 0;text-align:center}
.pdp__missing h1{font-size:32px;margin-bottom:10px}
.pdp__missing p{margin:0 auto 22px}

.pdp__extra{background:var(--paper);padding-bottom:88px}
.pdp__block{padding-top:44px;margin-top:20px;border-top:1px solid var(--rule)}
.pdp__block h2{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;margin-bottom:22px}
.pdp__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:13px}
.pdp__list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--muted)}
.pdp__list svg{flex-shrink:0;color:var(--brand-purple);margin-top:3px}
.pdp__reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.rcard{margin:0;padding:26px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.rcard h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:12px 0 10px;color:var(--ink)}
.rcard blockquote{margin:0 0 18px}
.rcard q{font-size:14.5px;line-height:1.66;color:var(--muted);quotes:none}
.rcard figcaption{display:flex;align-items:center;gap:11px;padding-top:15px;border-top:1px solid var(--rule)}
.rcard figcaption img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.rcard figcaption span{font-size:14px;font-weight:700;color:var(--ink)}

@media (max-width:900px){
  .pdp__grid{grid-template-columns:1fr;gap:32px}
}
.pdp__media.is-contain{background:var(--cream);display:grid;place-items:center}
.pdp__media.is-contain img{object-fit:contain;padding:28px}
.pcard__media.is-contain{background:var(--cream)}
.pcard__media.is-contain img{object-fit:contain;padding:18px}

/* ---------- Contact page ---------- */
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.cform .fld textarea{width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:0;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);resize:vertical}
.cform .fld textarea:focus{outline:2px solid var(--brand-purple);outline-offset:1px;border-color:transparent}
.cform .btn{width:100%;justify-content:center;margin-top:6px}
.cform__note{font-size:12px;color:var(--faint);text-align:center;margin-top:13px}
.cgrid__side{display:flex;flex-direction:column;gap:16px}
.cbox{border:1px solid var(--rule);border-left:4px solid var(--gold);padding:22px 24px;background:var(--paper)}
.cbox h3{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brand-purple);margin-bottom:9px}
.cbox p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.cbox a{color:var(--ink);border-bottom:1px solid var(--gold)}
.cbox a:hover{color:var(--brand-purple)}
.cbox .btn{margin-top:14px}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;gap:34px}}

/* ---------- Sample badge ---------- */
.pcard__sample{
  position:absolute;top:0;right:0;z-index:3;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 11px;
}

/* ---------- Marie Achebe Art — its own environment ---------- */
.artzone{background:var(--ink);padding:96px 0;position:relative;overflow:hidden}
.artzone::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(200,148,52,.14),transparent 62%);pointer-events:none;
}
.artzone .container{position:relative;z-index:1}
.artzone__head{max-width:620px;margin-bottom:44px}
.artzone__head h2{color:var(--paper);font-size:clamp(30px,3.8vw,50px);line-height:1.08;margin:12px 0 16px}
.artzone__head h2 em{color:var(--gold-light);font-style:italic}
.artzone__head p{color:rgba(255,255,255,.78)}
.artzone .eyebrow{color:var(--gold-light)}
.artzone .eyebrow.with-line::before{background:var(--gold)}
.artzone .pcard{background:var(--paper)}

/* ---------- Meet Marie block ---------- */
.meetm{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.meetm__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.meetm__copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin:12px 0 18px}
.meetm__copy p{margin-bottom:15px}
@media (max-width:900px){ .meetm{grid-template-columns:1fr;gap:30px} }

/* ============================================================
   THE PRODUCT PAGE — one column, read top to bottom
   ============================================================
   Rebuilt to the two references the owner supplied. It was a two-column
   layout: picture left, everything stacked down the right. That is a shop
   listing shape - useful when you are comparing things - and the wrong shape
   for a sales page, where somebody reads one argument in order and the
   pictures are part of the argument rather than a thumbnail beside it.

   Narrow and phone-shaped at every width, because that is what the references
   do and because it keeps the line length readable without a max-width fight.
   ============================================================ */
.pdp--stack{padding:26px 0 84px;background:var(--paper)}
.pdp__col{max-width:640px;margin:0 auto;padding:0 var(--gutter)}

.pdp--stack .pdp__back{
  display:inline-flex;align-items:center;min-height:32px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-purple);text-decoration:none;
}
.pdp--stack .pdp__back:hover{color:var(--purple-deep)}

/* The banner. A photograph fills it; a flat mark or artwork is shown whole
   rather than cropped into, which is the same rule the rest of the site uses.

   The deeper token, deliberately. --card-3d is the shared resting depth; the
   hero is the one block on a product page that carries the whole page, and it
   read flat beside the cards under it. --card-3d-hover is the same five-layer
   stack one step further out (62px to 92px, 92px to 130px).

   It is static: this is the hover value used at rest, not a hover. Product
   images never move - no zoom, no pan, no lift on pointer - so a depth that
   only appeared on hover would never appear at all.

   --card-3d itself is untouched. It is shared by .pcard, .prose iframe,
   .prose video and the site-wide card group, so deepening it here would have
   moved every one of them as well. */
.pdp__hero{
  width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--cream);
  margin:14px 0 28px;border:1px solid rgba(72,1,105,.16);
  box-shadow:var(--card-3d-hover);
}
.pdp__hero img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__hero.is-contain{background:var(--cream)}
.pdp__hero.is-contain img{object-fit:contain}

.pdp__head h1{
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,44px);line-height:1.08;letter-spacing:-.02em;
  font-weight:400;color:var(--ink);margin:10px 0 6px;
}
.pdp__head .pdp__rating{font-size:13px;color:var(--gold-deep);font-weight:700;margin-bottom:8px}
.pdp--stack .pdp__price{
  font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-top:10px;
}
.pdp--stack .pdp__price s{font-size:18px;font-weight:500;color:var(--faint);margin-left:10px}
.pdp--stack .pdp__price .free{color:var(--brand-purple)}

.pdp__lede{
  font-size:17.5px;line-height:1.6;color:var(--ink);margin:22px 0 0;font-weight:500;
}
.pdp__prose{margin-top:22px;max-width:none}
/* An image dropped into the description sits full width, like the rest.

   The shadow is the same token the description's own video and embed already
   carry (.prose video, .prose iframe in site.css), so an image and a video
   dropped into the same description read as the same kind of block. Images
   were the only one of the three without it, which is what "the second
   description image is plain" was looking at. */
.pdp__prose img{width:100%;height:auto;display:block;margin:22px 0;box-shadow:var(--card-3d)}
/* An image inside a table cell is part of a data table, not a free-standing
   block. A 62px shadow under one lifts a cell out of the grid it belongs to,
   so it is exempted.

   Nothing on the site matches this today - the one table in a description
   (AADA) holds text cells - so it is a guard rather than a fix: the editor
   can put an image in a cell, and this is what should happen when it does.
   It out-ranks the rule above on specificity alone - (0,1,2) against (0,1,1),
   one more element - so its position in the file is not load-bearing. */
.pdp__prose table img{box-shadow:none}

/* Extra images and video, stacked in the order they were arranged. */
.pdp__media-stack{display:grid;gap:26px;margin:30px 0 0}
.pdp__media-item{margin:0}
.pdp__media-item img,
.pdp__media-item video{
  width:100%;height:auto;display:block;
  border:1px solid rgba(72,1,105,.16);box-shadow:var(--card-3d);
}
/* 16:9 without the iframe collapsing to nothing, which is what an iframe with
   no height does. */
.pdp__video{
  position:relative;width:100%;padding-top:56.25%;
  border:1px solid rgba(72,1,105,.16);box-shadow:var(--card-3d);background:var(--ink);
}
.pdp__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pdp__media-item figcaption{
  margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted);
}

.pdp__included{margin-top:36px}
.pdp__included h2{
  font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:14px;
}

/* One button, the width of the column, at the end of the argument. */
.pdp__buy{margin-top:38px}
.btn--buy{
  display:flex;width:100%;justify-content:center;align-items:center;gap:10px;
  padding:20px 26px;font-size:13.5px;letter-spacing:.14em;
}
.pdp__buy form{margin:0}
.pdp--stack .pdp__reassure{
  margin-top:12px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center;
}

@media (max-width:640px){
  .pdp__hero{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;border-left:0;border-right:0}
}