/* =============================================================================
   barakahgames.com — /shop

   Two products. A shop this small should not pretend to be a catalogue: no
   filters, no sort, no result count, no grid chrome. Adding one would make two
   items look thin.

   Chrome, the waitlist and the media slot come from site.css, which loads
   first. Everything here is this page's own — which is why .shop, .pcard,
   .price and .what can carry the meanings the mockup gives them without
   colliding with the homepage's versions of the same names.
   ============================================================================= */

/* The mockup runs its display sizes a step below the homepage's. The homepage
   carries one headline per section as its structure; this page is a list. */
h1{font-size:clamp(2.25rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}

img{display:block}

/* ---------- 1 · page head ----------

   THE ALIGNMENT RULE. The page head and the product row share one left edge at
   every width. Both are children of .wrap, which centres itself and supplies
   the gutter, so the edge is .wrap's left padding edge in both cases.

   The selector matters. `.pagehead div` would also match .wrap itself and
   override its max-width and auto margins — the head would stop centring while
   the product row kept centring. Below 1280 there is no leftover space so it
   looks fine; above it the two drift apart by half the overflow. Scope it to
   the child: `.pagehead .wrap > div`. */
.pagehead{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.25rem,5vw,3.5rem)}
.pagehead .wrap > div{display:flex;flex-direction:column;gap:1.125rem;max-width:44rem}
.pagehead p{max-width:34rem}

/* ---------- 2 · the two products ----------
   Two items do not need a grid system. Give them room and let the photographs
   do the comparing. The row is capped but NOT centred — it hangs off the same
   left edge as the head, which is the whole alignment. Do not add
   margin-inline: auto here. */
.shop{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,3.5rem);
  padding-bottom:clamp(3rem,7vw,5rem);max-width:54rem}
@media(min-width:760px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pcard{display:flex;flex-direction:column;gap:1.5rem;text-decoration:none;color:inherit}
.pcard .shot{background:var(--s-ground-2);border:var(--bg-hairline) solid var(--s-hair);
  border-radius:var(--bg-radius);aspect-ratio:4/5;overflow:hidden;
  transition:opacity .25s var(--bg-motion-ease)}
.pcard .shot img{width:100%;height:100%;object-fit:contain}
.pcard .shot picture{display:block;width:100%;height:100%}
/* A filled shot drops its frame — the photograph is already on white, so a
   border and a tint would only fence it in. And contain, never cover: cover
   crops the cast shadow and the box stops reading as an object on the page. */
.pcard .shot--filled{background:none;border-color:transparent;
  border-radius:var(--bg-radius-sharp)}
.pcard:hover .shot{opacity:.86}

/* Recentre the object inside its frame.

   COMPENSATION FOR THE FILES, NOT A DESIGN CHOICE. Both shop photographs are
   left-biased inside their own frames: the object's box sits 0.5% from the
   left and 10.4% (osc) or 7.4% (gift) from the right, putting its centre at
   45.0% and 46.5% of the frame instead of 50. The hero still life measures
   49.7% and is why that one never looked wrong.

   The amount is per file and comes from the section, because the two need
   different corrections and a shared number would leave one of them visibly
   off. The image is exactly 4:5 in a 4:5 slot, so `contain` leaves no slack
   for object-position and a translate is the only lever; the strip clipped off
   the right is well inside each file's white margin, so no part of the object
   is lost.

   Note this moves the object inside the photograph, not the photograph. The
   structural alignment — the page head and the product row sharing one left
   edge — is untouched and still measures 0.0px.

   DELETE THIS, and the nudge settings that feed it, when the photographs are
   re-rendered with the object centred. That re-render is wanted anyway:
   shop-01-osc-v2 has its cast shadow running off the left edge of the file,
   which is the same left-bias showing up as a defect rather than as a layout. */
.pcard .shot img{transform:translateX(var(--shot-nudge,0))}

.pfoot{display:flex;flex-direction:column;gap:.625rem;
  padding-top:1.125rem;border-top:var(--bg-hairline) solid var(--s-hair)}
.pfoot h2{font-family:var(--bg-font-body);font-weight:500;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink);line-height:1.5}
.pfoot .what{font-size:.9375rem;color:var(--s-ink-2);max-width:26rem}
.price{display:flex;align-items:baseline;gap:var(--bg-space-sm);margin-top:.1875rem}
.price b{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-size:1.25rem;color:var(--s-head);font-variant-numeric:tabular-nums}
.price .when{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--s-accent)}
.more{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-3);margin-top:.375rem}
.pcard:hover .more{color:var(--s-head)}

/* ---------- 3 · what is different ----------
   Centred on purpose. The head and the product row hang off the left edge;
   this band reads as a different kind of content and says so by its alignment. */
.diff{padding-block:clamp(3rem,7vw,5rem);border-top:var(--bg-hairline) solid var(--s-hair)}
.diff-head{max-width:44rem;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;gap:1.125rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.diff-head p{margin-inline:auto;max-width:34rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.25rem,5vw,4rem);
  max-width:64rem;margin-inline:auto}
@media(min-width:760px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.col h3{font-family:var(--bg-font-body);font-weight:500;font-size:.5625rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--s-accent);
  margin:0 0 var(--bg-space-xs)}
.col ul{list-style:none;margin:0;padding:0}
.col li{padding-block:.875rem;border-bottom:var(--bg-hairline) solid var(--s-hair);
  font-size:.9375rem;color:var(--s-ink-2);line-height:1.55}
.col li:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
.col li b{color:var(--s-ink);font-weight:500}

/* ---------- 4 · the close ---------- */
.close{padding-block:clamp(3.5rem,8vw,6rem);
  border-top:var(--bg-hairline) solid var(--s-hair);text-align:center}
.close-in{max-width:40rem;margin-inline:auto;display:flex;flex-direction:column;
  gap:1.375rem;align-items:center}
.close p{margin-inline:auto;max-width:34rem}
.close .pill{margin-inline:auto}
.promise{font-size:.875rem;color:var(--s-ink-3)}