/* ══════════════════════════════════════════════════════════════════════
   THE WORKSHOP  ·  page-scoped

   One product, shown the way the rest of the site shows a work: the
   studio shot in the full gilt frame, the supporting photographs in a
   plate strip that opens the same lightbox. The one departure from a
   plain content page is the buy action, which earns the site's one
   real button — the "Watch now" family's own gold-fills-on-hover
   treatment (procession.html .latestGo/.exGo), because this is the one
   page where a purchase, not a read, is the point.

   GILT is for the product photographs — .plateFrame for the studio hero,
   .workArt/.workIn for the supporting plates. Nothing here is furniture;
   there is no control-panel mockup to keep off the leaf.

   The lightbox/loupe below is the page's OWN — not the kit's shared
   #lightbox in gallery_base.html, which has no magnifier. A product this
   small (a bookmark, laser-cut) is worth letting people zoom into the
   grain of the cut, so the shop keeps its bespoke overlay, restyled in
   the room's own palette (--gold/--warm-gold/--rabbet) rather than the
   old styles.css tokens it used to carry.
   ══════════════════════════════════════════════════════════════════════ */

/* The head is a 620px measure standing above a full-width product row and
   plate strip, so it centres in the wrapper rather than parking left — the
   same rule .work and .sys follow. The product's own prose is NOT touched:
   there the grid column IS the measure. */
/* The old shop centred its hero text (.shop-hero-text), and this is the
   same thing in the new register: a short announcement standing over a
   full-width product row. The product's own column is NOT centred — the old
   page's centred price and button belonged to a single-column layout, and
   this one sets the info beside the art, where centring inside a narrow
   column would read as an accident. */
.shopHead{ max-width:620px; margin-inline:auto; text-align:center; }
.shopHead .pageEyebrow{ justify-content:center; }
.shopHead .prose{ max-width:none; }
.shopIntro{ margin-top:clamp(14px,2vh,22px); }

/* ── The seam ────────────────────────────────────────────────────
   The announcement ends and the listing begins, and the eye needs to be
   told. A hairline, a gold lozenge, a hairline — the manuscript mark the
   rest of the room uses for a rule, closed on a diamond so it reads as a
   deliberate break rather than a stray border. */
.shopSeam{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:clamp(30px,4.6vh,52px);
}
.shopSeam span{
  display:block; height:1px; width:min(160px,20vw);
}
.shopSeam span:first-child{
  background:linear-gradient(90deg, rgba(201,168,117,0), rgba(201,168,117,.5));
}
.shopSeam span:last-child{
  background:linear-gradient(90deg, rgba(201,168,117,.5), rgba(201,168,117,0));
}
.shopSeam i{
  display:block; flex:0 0 auto; width:5px; height:5px;
  transform:rotate(45deg);
  border:1px solid rgba(201,168,117,.7);
}

/* ── The product ─────────────────────────────────────────────────
   The studio shot and its supporting plates beside what is said and sold —
   one listing, not a listing followed by an afterthought. Capped at the
   kit's 1040 stage width and centred, so the row shares a middle with the
   620px announcement above it instead of sprawling to the wrapper's 1400.
   One column past the phone breakpoint, where it stacks like everything
   else in the room. */
.shopProduct{
  display:grid; gap:clamp(28px,4.5vw,64px);
  grid-template-columns:minmax(220px,380px) 1fr;
  align-items:start;
  max-width:1040px; margin-inline:auto;
  margin-top:clamp(32px,4.8vh,56px);
}
/* .workStage brings its own margin-top for a work sitting under a page
   head; here the product art opens the section, so that air is unwanted. */
.shopProductArt .workStage{ margin-top:0; }
.shopHeroPlate img{ cursor:zoom-in; }
/* hero.jpg is a portrait studio shot (about 3:4), not the kit's own
   500:279 stage aspect — the default would crop away most of the piece. */
.shopHeroPlate .plateCanvas{ aspect-ratio:3 / 4; }

.shopTitle{
  margin-top:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,2.6vw,42px); line-height:1.14;
  letter-spacing:-.005em; color:var(--warm-gold); text-wrap:balance;
}
.shopProse{ margin-top:clamp(14px,2vh,20px); }

.shopFacts{ margin-top:clamp(20px,3vh,28px); }

/* ── The buy action ──────────────────────────────────────────────
   The page's one prominent affordance, ruled off from the reading above
   it so it reads as the decision point rather than another paragraph. */
.shopBuy{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  margin-top:clamp(26px,4vh,40px);
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(201,168,117,.16);
}
.shopPrice{ display:flex; flex-direction:column; gap:4px; }
.shopPriceAmount{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,1.9vw,28px); letter-spacing:.01em;
  color:var(--warm-gold);
}
.shopPriceNote{
  font-family:var(--font-serif); font-size:12.5px; letter-spacing:.015em;
  color:rgba(139,155,180,.86);
}
.shopPriceNote a{
  color:var(--warm-gold);
  border-bottom:1px solid rgba(232,200,154,.55); padding-bottom:1px;
  text-decoration:none; transition:border-color .35s ease, color .35s ease;
}
.shopPriceNote a:hover{ color:#fff5e2; border-bottom-color:var(--warm-gold); }

/* The one real button on the site — same recipe as .latestGo/.exGo in
   the gallery proto: a gold hairline that fills solid gold on hover. */
.shopBuyBtn{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 34px;
  border:1px solid rgba(201,168,117,.5); background:rgba(201,168,117,.06);
  font-family:var(--font-serif); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.24em; color:var(--warm-gold);
  text-decoration:none; cursor:pointer;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.shopBuyBtn em{ font-style:normal; }
.shopBuyBtn:hover{ background:var(--gold); color:#0b0d11; border-color:var(--gold); }
.shopBuyBtn:active{ filter:brightness(.9); }
.shopBuyBtn:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }

/* ── The plate strip ─────────────────────────────────────────────
   The workshop bench and the lifestyle/in-hand/packaging shots. These are
   the product's other views, so they live under the hero in the art column
   — the gallery a listing is expected to have — rather than trailing the
   price and the buy button, where they read as a separate page. The kit's
   own .plateThumb crops to the 500:279 painting aspect; these are mostly
   portrait product photography, so the strip gets its own, gentler crop,
   and two across rather than the kit's auto-fill, which would slice them
   into slivers inside a 380px column. */
.shopStripLabel{
  margin-top:clamp(18px,2.6vh,26px); margin-bottom:0;
  font-size:9.5px; letter-spacing:.22em;
  color:rgba(201,168,117,.72);
}
.shopStrip{
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(10px,1.1vw,14px);
  margin-top:clamp(10px,1.4vh,14px);
}
.shopStrip .workIn{ aspect-ratio:3 / 4; }

/* ── The phone ───────────────────────────────────────────────────
   Matches the kit's own breakpoint so the two never disagree. */
@media (max-width: 860px), (hover: none){
  .shopProduct{ grid-template-columns:1fr; gap:30px; }
  .shopBuyBtn{ width:100%; justify-content:center; }
  /* The kit's phone rule sets .plateStrip to two across; the shop is
     already two, so the strip needs nothing here. */
}

/* ══════════════════════════════════════════════════════════════════════
   THE LOUPE LIGHTBOX  ·  the page's own, not the kit's shared #lightbox

   Same overlay/close/image recipe the reskinned .lightbox-overlay uses in
   content.css, restated under this page's own class names because it
   carries one behaviour the shared lightbox does not: click the open
   image to drop a magnifying loupe over it.
   ══════════════════════════════════════════════════════════════════════ */
.shop-lightbox{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center;
  padding:clamp(20px,5vh,64px) var(--edge);
  background:radial-gradient(130% 78% at 50% 42%,
    rgba(232,200,154,.045) 0%, rgba(232,200,154,0) 62%), var(--void);
}
.shop-lightbox.is-active{ display:flex; }
.shop-lightbox__image{
  max-width:100%; max-height:82vh; width:auto; height:auto; display:block;
  cursor:zoom-in;
  box-shadow:
    0 0 0 1px rgba(214,180,124,.28),
    0 0 0 4px var(--rabbet),
    0 50px 130px -40px rgba(0,0,0,.95);
}
.shop-lightbox__image.is-loupe-active{ cursor:crosshair; }
.shop-lightbox__close{
  position:fixed; z-index:5; width:48px; height:48px; border-radius:50%;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  right:calc(env(safe-area-inset-right, 0px) + 14px);
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.6); border:1px solid rgba(201,168,117,.3);
  color:rgba(240,232,220,.92); font-size:17px; line-height:1; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.shop-lightbox__close:hover{ background:rgba(201,168,117,.9); color:#0b0d11; }

/* The magnifier itself. Its width/height here are the pixel truth the
   inline loupe script's LOUPE_SIZE math depends on — the 720px breakpoint
   below must keep matching the script's own matchMedia query, or the
   circle drawn and the circle measured drift apart. */
.shop-loupe{
  position:fixed; width:260px; height:260px; border-radius:50%;
  border:1px solid rgba(201,168,117,.55);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.45),
    0 14px 36px rgba(0,0,0,.7),
    inset 0 0 18px rgba(0,0,0,.35);
  background-repeat:no-repeat; background-color:#08090d;
  pointer-events:none; z-index:10000; display:none;
}
@media (max-width: 720px){
  .shop-loupe{ width:200px; height:200px; }
}