/* Style Emras — Products page hero (hand + product on the left, copy on the right).
   The hand is a real photo cut-out. Products rest ON its palm: each product sits behind the hand layer so the
   palm's own contour hides the base, a contact shadow is clipped to the skin, and the lighting is added with masked
   layers (never a big box-shadow). Layout is deliberately physical (left/right) and the section is forced
   direction:rtl, so the hand, the products and the copy keep their places whatever the page language is.
   ---------------------------------------------------------------------------------------------------------- */

.se-ph {
  --rig-w: min(62vw, 810px);            /* the hand: ~12% smaller than before so it reads as a real hand, not a close-up */
  --rig-h: calc(var(--rig-w) * 657 / 1328);
  /* hand-abaya.png (1328×657): the resting spot in the palm, calibrated against a real marked-up screenshot (not
     eyeballed) — the fingertip (1321,146) and the highest point of the hand (709,80) were located precisely in
     both the source photo and the screenshot, which gave a direct pixel-for-pixel mapping to solve for exactly
     where the marked spot falls on the source photo: x ≈ 73%, y ≈ 26%. That's very close to the site's original
     anchor (70.4%, 23.6%) — the anchor itself was never far off; it was each product's own --sink (below) that
     was miscalibrated and made every product float well above this spot instead of sitting in it. */
  --palm-x: 72%;
  --palm-y: 27%;
  --rest: 3deg;       /* the skin under the product falls away toward the fingertips (about 11° over the thumb), so the product leans with it */
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(640px, calc(100svh - var(--nav-height, 73px)), 800px);
  overflow: hidden;
  isolation: isolate;
  direction: rtl;
}

/* ---------- backdrop ---------- */
.se-ph-bg, .se-ph-floor { position: absolute; pointer-events: none; }
.se-ph-bg {
  inset: -3%;
  z-index: -2;
  background:
    radial-gradient(48% 60% at 30% 44%, rgba(255, 255, 255, .78), transparent 70%),
    radial-gradient(36% 46% at 88% 12%, rgba(192, 142, 78, .18), transparent 72%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.se-ph-floor {
  inset-inline: 0;
  bottom: 0;
  height: 190px;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--brand-dark) 7%, transparent) 100%);
}
.se-ph-floor::before {   /* the edge of the surface the products stand on */
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-dark) 22%, transparent) 20%, color-mix(in srgb, var(--brand-dark) 22%, transparent) 80%, transparent);
}
html[data-theme="dark"] .se-ph-bg {
  background:
    radial-gradient(46% 58% at 30% 44%, rgba(32, 124, 156, .24), transparent 70%),   /* cool key light behind the palm */
    radial-gradient(36% 44% at 88% 12%, rgba(192, 142, 78, .13), transparent 72%),   /* warm gold accent, top right */
    radial-gradient(100% 70% at 50% 128%, rgba(0, 0, 0, .6), transparent 62%),        /* vignette under the shelf */
    linear-gradient(180deg, #0d212e 0%, #091823 52%, #060f16 100%);
}
html[data-theme="dark"] .se-ph-floor { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .38) 100%); }
html[data-theme="dark"] .se-ph-floor::before {
  background: linear-gradient(90deg, transparent, rgba(227, 195, 147, .22) 20%, rgba(227, 195, 147, .22) 80%, transparent);
}

/* ---------- stage: rig (hand + products) and copy ---------- */
.se-ph-main { position: relative; flex: 1 1 auto; min-height: 430px; }

.se-ph-rig {
  position: absolute;
  z-index: 3;
  width: var(--rig-w);
  height: var(--rig-h);
  left: calc(var(--rig-w) * -.2);       /* the embroidered sleeve enters from the screen edge */
  top: calc(50% - var(--rig-h) * .36);
  pointer-events: none;
}
.se-ph-breath { position: absolute; inset: 0; animation: sePhBreath 6s ease-in-out infinite; }
.se-ph-rig-in { position: absolute; inset: 0; }
@keyframes sePhBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* hand + light + contact shadow travel together; the sleeve dissolves into the background toward the bottom */
/* the body box is a little larger than the hand so the fade mask never cuts the hand's own soft shadow */
.se-ph-body {
  --bp: 44px;
  position: absolute;
  inset: calc(var(--bp) * -1) calc(var(--bp) * -1) calc(var(--bp) * -1) 0;
  z-index: 1;      /* the "back" copy of the hand: wrist, thumb, the palm itself — everything a resting product should cover */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 56%, rgba(0, 0, 0, .55) 74%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0, #000 56%, rgba(0, 0, 0, .55) 74%, transparent 92%);
}
.se-ph-body-in { position: absolute; left: 0; top: var(--bp); width: calc(100% - var(--bp)); height: calc(100% - var(--bp) * 2); }
.se-ph-hand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 9px 12px rgba(18, 30, 42, .15));
}
html[data-theme="dark"] .se-ph-hand { filter: brightness(.94) contrast(1.03) drop-shadow(0 12px 16px rgba(0, 0, 0, .42)); }

/* the "front" copy of the hand — same photo, same box, pixel-for-pixel aligned with .se-ph-body above, but masked
   to a vertical split: transparent from the wrist up to --hand-front-edge (so the product shows through there,
   unobstructed), solid from --hand-front-edge to the fingertips. --hand-front-edge is written in px by
   sizeHandFront() in products-hero.js, from the CURRENT product's own real right edge (+ a small margin), so the
   split always sits just past whichever product is showing — never over it — at any screen size or product width.
   The 42% default is only what paints for the instant before that JS runs. */
.se-ph-hand-front {
  --bp: 44px;
  position: absolute;
  inset: calc(var(--bp) * -1) calc(var(--bp) * -1) calc(var(--bp) * -1) 0;
  z-index: 3;
  pointer-events: none;
}
.se-ph-hand-front img {
  position: absolute;
  left: 0;
  top: var(--bp);
  width: calc(100% - var(--bp));
  height: calc(100% - var(--bp) * 2);
  display: block;
  filter: drop-shadow(0 9px 12px rgba(18, 30, 42, .15));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--hand-front-edge, 42%), #000 calc(var(--hand-front-edge, 42%) + 3%), #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, transparent var(--hand-front-edge, 42%), #000 calc(var(--hand-front-edge, 42%) + 3%), #000 100%);
}
html[data-theme="dark"] .se-ph-hand-front img { filter: brightness(.94) contrast(1.03) drop-shadow(0 12px 16px rgba(0, 0, 0, .42)); }
/* masked layer: it only ever paints on the skin */
.se-ph-shade {   /* a whisper of volume: the photo already has real shading, this only ties it to the scene light */
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-mask: url("../images/product/hand-abaya.webp") center / 100% 100% no-repeat;
          mask: url("../images/product/hand-abaya.webp") center / 100% 100% no-repeat;
  background:
    linear-gradient(180deg, rgba(255, 226, 190, .10) 0%, transparent 40%, rgba(70, 40, 26, .12) 100%);
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .se-ph-shade {
  background: linear-gradient(180deg, rgba(255, 214, 170, .06) 0%, rgba(6, 12, 17, .08) 30%, rgba(6, 12, 17, .34) 100%);
  mix-blend-mode: normal;
}
/* There used to be a second masked layer here (.se-ph-contact) — a small ellipse drawn on the skin under
   whichever product was current, sized/positioned live by JS per product. Removed outright rather than just
   dimmed: the .se-ph-item-in::after gradient below already darkens each product's OWN lower edge where it
   meets the palm (a real per-product contact cue, baked into the product layer itself), which is what actually
   reads as "resting on the hand" — the separate shadow-on-skin element was redundant on top of that, and its
   JS sizing ran off a delayed GSAP .call() that could replay with a stale product's dimensions when a rotation
   was interrupted quickly, which is what produced a visibly wrong-sized/mispositioned shadow. Removing it
   removes that failure mode entirely instead of patching it. */

/* products: each one is centred on the palm contact point and rests tilted with the palm */
.se-ph-products { position: absolute; inset: 0; z-index: 2; }   /* above the back-of-hand layer, below the front-of-hand layer */
.se-ph-item {
  /* per product: --w width (share of the hand image), --sink how far the base sinks behind the thumb pad
     (% of the product''s own height), --rot the lean; --ps scales every product on small screens */
  --w: 21.5%; --sink: 2.5%; --rot: var(--rest);
  position: absolute;
  left: var(--palm-x);
  top: var(--palm-y);
  width: calc(var(--w) * var(--ps, 1));
  transform: translate(-50%, calc(-100% + var(--sink) * var(--sk, 1))) rotate(var(--rot));   /* static: centred on the contact point */
  transform-origin: 50% 100%;
  opacity: 0;
}
.se-ph-item.is-current { opacity: 1; }
.se-ph-item-in { position: relative; transform-origin: 50% 100%; }             /* the one GSAP animates */
.se-ph-item img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .26)); }
/* ambient occlusion: where the product meets the skin its lower edge falls into shade (drawn inside the product's own silhouette) */
.se-ph-item-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(30, 18, 10, .22) 92%, rgba(30, 18, 10, .34) 100%);
  -webkit-mask-image: var(--img);
          mask-image: var(--img);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}
html[data-theme="dark"] .se-ph-item-in::after { background: linear-gradient(180deg, transparent 64%, rgba(2, 8, 12, .38) 90%, rgba(2, 8, 12, .55) 100%); }
/* --sink is a % of the PRODUCT'S OWN height (not the hand's), so a small shared value doesn't work across
   items whose heights vary this much (a standing roll vs. a flat food-service pack) — and it deliberately
   ISN'T the same value for every item even where heights are close (the two cups): each product was judged on
   its own, against how deep a real object of that shape/weight would actually settle into this palm, not from
   one generic "resting" transform copied five times. Solved directly against the live page.

   All five source photos were also re-cropped down to their own real opaque content (a small ~6% margin, no
   more) — the client's photos each carried a very different amount of empty canvas padding around the actual
   product, so the same --w on two "same size" photos could render one product much smaller than the other
   even though the numbers matched. Cropping first means --w now controls the actual visible product size
   directly and predictably, instead of half of it disappearing into invisible margin.

   --w itself is picked by an EQUAL-FOOTPRINT rule, not eyeballed per item: every product's rendered silhouette
   should cover roughly the same on-screen AREA as the tissue box (the agreed size reference), whatever its own
   aspect ratio is — a tall narrow cup and a short wide box can occupy the same footprint without ever sharing
   a width or height. Since width×height = w² / ratio for a box sized by --w with aspect ratio (crop width /
   crop height), holding that product equal to the reference's own area gives:
       w_i = w_reference × sqrt(ratio_i / ratio_reference)
   Reusable if a photo is swapped again later: re-measure the new file's own cropped width/height (its
   PNG's own pixel size, after trimming to real content the same way as the other four), then re-solve that
   one line — no need to re-tune every other product's number by eye.

   Reference raised from 19% to 27% (all five scaled up by the same ×1.421 factor, so the equal-footprint
   ratios between products are untouched) — the 19% pass was proportionally consistent but read as too small
   against the reference photo of the product filling the palm; this is a real size increase, not a re-derivation.
   Reference: tissue box --w 27%, ratio 728/414 = 1.758.

   Items 0 and 4 also get their own --palm-x/--palm-y here, overriding the shared one above — direct instruction
   that these two specifically should rest ON the fingers, not in the cupped palm hollow the other three share.
   Found by sampling hand-abaya.png's own opaque pixels directly (not eyeballed): around x=1180, y=145 in the
   native 1328×657 photo sits on the flatter part of the fingers themselves, past where the palm's hollow ends,
   short of the fingertips — ~89%/22% of the photo. --sink/--rot re-tuned against this new anchor live rather
   than assumed to carry over from the old one, since the local surface angle here isn't the same as the palm
   hollow's. --sink specifically had to go up a second time (9%→20% box, 15%→24% sofra) — the old values were
   tuned for the palm-hollow anchor's own geometry and, moved onto the fingers without adjustment, left a real
   visible gap between the product's base and the finger surface (still looked like it was floating just above
   them, not resting on them). Confirmed by measuring the hand photo's own opaque pixels directly under the
   product, not by eye alone. */
.se-ph-item[data-ph="0"] { --w: 27%;   --sink: 20%; --rot: -8deg; --palm-x: 87%; --palm-y: 22%; }
/* roll: standing cylinder, ratio 697/829 = 0.841 → w = 27×sqrt(0.841/1.758) ≈ 18.7%. Untouched by this pass —
   explicitly not part of this round's changes. */
.se-ph-item[data-ph="1"] { --w: 18.7%; --sink: 4%;  --rot: 1deg; }
/* paper cup: ratio 549/768 = 0.715 → w = 27×sqrt(0.715/1.758) ≈ 17.2%. Now the size REFERENCE for the plastic
   cup below, instead of the tissue box — its own scale was confirmed correct as-is. */
.se-ph-item[data-ph="2"] { --w: 17.2%; --sink: 4%;  --rot: 3deg; }
/* plastic cup: client replaced this with a new source photo (background removed, no more baked-in ground
   shadow). The new file's real content only filled a 515×673 box inside a much bigger 1024×819 canvas — first
   pass here sized --w off that CONTENT ratio while the served file still had the full padded canvas, which
   silently broke the equal-footprint math: --w scales the whole rendered box (canvas included), so the cup
   rendered at roughly half the intended size, which is exactly the "too small" this produced. Fixed at the
   source, not by fudging the CSS number: re-cropped the file down to its own real content (getbbox() + ~6%
   margin, same pipeline as every other item here) so the canvas ratio and content ratio are the same thing
   again — 575×753 after crop. Sized off the PAPER CUP now, not the tissue box, per direct instruction that the
   paper cup's scale is the one that reads correctly: ratio 575/753 = 0.764 → w = 17.2×sqrt(0.764/0.715) ≈ 17.8%. */
/* plastic cup: photo replaced by the plain clear cup (no logo), cropped with the same ~6% margins as before. Its canvas
   is a little taller/narrower than the old one (ratio 0.7227 vs 0.7636), so --w went 17.8% -> 16.9% to keep the cup
   exactly as tall on screen as it was; --sink/--rot unchanged. */
.se-ph-item[data-ph="3"] { --w: 16.9%; --sink: 4%;  --rot: 3deg; }
/* food-service roll: lies flat and wide rather than standing. Client has since replaced this photo AGAIN with a
   perfectly level shot (no diagonal tilt baked in, unlike the original), specifically so CSS --rot has full,
   clean control over the final angle instead of fighting a pre-tilted source. Re-cropped to real content + ~6%
   margin the same way as every item here (979×292 this time — shorter than the old diagonal version, since a
   level cylinder's own bounding box is naturally flatter). Still sized off the tissue box:
   ratio 979/292 = 3.353 → w = 27×sqrt(3.353/1.758) ≈ 37.3%. */
.se-ph-item[data-ph="4"] { --w: 37.3%; --sink: 24%; --rot:-8deg; --palm-x: 87%; --palm-y: 22%; }
/* Orientation fix for items 0 and 4 only (the first and last products) — reworked after direct correction.
   The first pass here traced a pixel-exact angle off a marked-up screenshot and applied it as a NEGATIVE --rot
   (top of the product tilted toward the finger side). That was backwards: --rot pivots around the item's own
   base (transform-origin: 50% 100%), so a negative angle here doesn't just tilt the top — it also drops the
   BASE's wrist-side corner down while lifting the finger-side corner up and away, which read as the product
   sinking into the cupped hollow of the palm instead of resting up on the fingers, the exact opposite of what
   was wanted. Client also replaced the sofra photo with a perfectly level shot specifically to make this easier
   to get right (see above). Fixed as a POSITIVE --rot instead — drops the finger-side base corner down onto the
   fingers and lifts the wrist-side corner, which is what actually reads as "resting on the fingers." Landed on
   these two values (5deg box, 6deg sofra) by testing candidates live against the running page rather than
   re-deriving another exact angle from a sketch — client was explicit the reference was approximate, not a
   blueprint. Deliberately NOT applied to items 1–3. */
/* ---------- copy ---------- */
.se-ph-main > .container { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; margin-inline: auto; left: 0; right: 0; pointer-events: none; }
.se-ph-copy { pointer-events: auto; }
.se-ph-copy { width: min(440px, 100%); text-align: start; }
.se-ph-title { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800; line-height: 1.3; margin: .5rem 0 .8rem; color: var(--brand-dark); }
.se-ph-title span { color: var(--accent-gold); }
.se-ph-copy p { color: var(--muted); max-width: 400px; margin-bottom: 1.6rem; }
html[data-theme="dark"] .se-ph-title { color: #f1ece2; }
html[data-theme="dark"] .se-ph-copy p { color: #a7b8c6; }

.se-ph-now {
  display: inline-flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-gold) 65%, transparent);
}
.se-ph-now small { font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.se-ph-now a { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.25rem; font-weight: 800; color: var(--brand-dark); text-decoration: none; }
.se-ph-now a i { color: var(--accent-gold); transition: transform .25s ease; }
.se-ph-now a:hover i { transform: translateX(-4px); }
html[data-theme="dark"] .se-ph-now a { color: #f1ece2; }
html[data-theme="dark"] .se-ph-now small { color: #8ea1b1; }

/* ---------- shelf: the five products, they double as the selector ---------- */
.se-ph-shelf-wrap { position: relative; z-index: 4; padding: 0 0 1.4rem; }
.se-ph-shelf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.se-ph-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .3rem .4rem .6rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  position: relative;
  transition: color .3s ease;
}
.se-ph-tab img { height: 68px; width: auto; max-width: 100%; object-fit: contain; opacity: .62; transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .16)); }
/* Explicit grounding shadow under each shelf thumbnail, independent of the product's own silhouette. The
   filter: drop-shadow() above traces each image's real alpha shape, so a wide flat product (the table-roll
   pack) already reads as sitting on a surface, but a tall narrow one (a cup, a standing roll) mostly just
   gets a blurred copy of itself offset downward — no distinct "resting on something" cue. This flat ellipse
   is anchored to the wrapper (the image's own rendered box), not to any one product's shape, so it reads the
   same "grounded" way for all five without a per-product rule — sized as a % of the wrapper so it scales
   with the shelf's own responsive image height automatically. */
.se-ph-tab-img { position: relative; display: inline-block; line-height: 0; }
.se-ph-tab-img::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 60%;
  height: 8px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(20, 20, 20, .30), rgba(20, 20, 20, .12) 60%, transparent 78%);
  opacity: .8;
  pointer-events: none;
  transition: opacity .3s ease;
}
html[data-theme="dark"] .se-ph-tab-img::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 60%, transparent 78%); }
.se-ph-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.se-ph-tab:hover img { opacity: .9; transform: translateY(-4px); }
.se-ph-tab.is-active { color: var(--brand-dark); }
/* The active tab is the one currently resting on the palm, so its own shelf slot reads as genuinely EMPTY
   (not just dimmed/highlighted like before) — the product "left" the row to be held. Only opacity changes,
   never display or width/height, so the slot's own box (and the row's layout) never moves: the gap this
   leaves is a reserved, stable space, not a collapse. The gold underline (::after, below) is what now marks
   "this one is current," since the thumbnail itself intentionally isn't there to do that job anymore. */
.se-ph-tab.is-active img { opacity: 0; transform: none; }
.se-ph-tab.is-active .se-ph-tab-img::after { opacity: 0; }
.se-ph-tab.is-active::after { transform: scaleX(1); }
.se-ph-tab:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; border-radius: 10px; }
html[data-theme="dark"] .se-ph-tab { color: #8ea1b1; }
html[data-theme="dark"] .se-ph-tab.is-active { color: #f1ece2; }
html[data-theme="dark"] .se-ph-tab img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }

/* ---------- 992–1199: a little tighter so the palm never reaches the copy ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .se-ph { --rig-w: min(58vw, 640px); }
  .se-ph-copy { width: min(390px, 100%); }
}

/* ---------- phones & tablets: same composition, recomposed ----------
   The arm enters from the left edge and the palm lands in the left ~60%; the copy stays beside it (right), never under it. */
@media (max-width: 991.98px) {
  .se-ph { --rig-w: clamp(300px, min(78vw, 78svh), 560px); min-height: 0; }
  /* the stage is sized from the hand, so the tallest product (which stands above the palm) always fits */
  .se-ph-main { min-height: max(250px, calc(var(--rig-h) + 40px)); }
  .se-ph-rig { left: calc(var(--rig-w) * -.28); top: calc(50% - var(--rig-h) * .4); }
  .se-ph-copy { width: 39%; margin-inline-start: 0; }
  .se-ph-title { font-size: clamp(1.15rem, 5.2vw, 2rem); margin: .3rem 0 .5rem; }
  .se-ph-copy .section-eyebrow { font-size: .68rem; }
  .se-ph-copy p { font-size: clamp(.68rem, 2.6vw, .95rem); margin-bottom: .9rem; }
  .se-ph-now { padding-top: .6rem; }
  .se-ph-now small { font-size: .66rem; }
  .se-ph-now a { font-size: clamp(.9rem, 3.6vw, 1.15rem); }
  .se-ph-floor { height: 140px; }
  .se-ph-shelf-wrap { padding-bottom: 1rem; }
  .se-ph-shelf { overflow-x: auto; scroll-snap-type: x proximity; gap: .4rem; padding-bottom: .2rem; scrollbar-width: none; }
  .se-ph-shelf::-webkit-scrollbar { display: none; }
  .se-ph-tab { flex: 0 0 74px; scroll-snap-align: center; font-size: .72rem; }
  .se-ph-tab img { height: 46px; }
}
/* tablets: room for a larger hand with more of the embroidered sleeve showing */
@media (min-width: 768px) and (max-width: 991.98px) {
  .se-ph { --rig-w: min(70vw, 680px); }
  .se-ph-rig { left: calc(var(--rig-w) * -.28); }
  .se-ph-copy { width: 36%; }
  .se-ph-title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
  .se-ph-copy p { font-size: .95rem; }
  .se-ph-now a { font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
  /* phones: the hand is scaled so the embroidered cuff stays in view (arm enters from the edge, never a bare wrist) and the fingertips stop before the copy;
     products are scaled up so they still read on the smaller palm. --sk is left at its default (1): --sink is a % of
     each product's own height, so it already scales correctly with --ps without a separate multiplier — the old 2.1
     value was only compensating for the broken anchor above and would double-apply the fix on top of it.
     --ps dropped from 1.35 to 0.95 in the same pass that raised every item's base --w by ×1.421 (see the item
     block above) — --ps multiplies the ALREADY-larger base, so keeping the old 1.35 here would have compounded
     into products roughly 90% bigger than desktop's own increase intended, almost certainly overflowing the
     rig on a phone. 0.95 keeps the on-screen mobile size close to what it was before that base increase. */
  .se-ph { --ps: .95; --rig-w: clamp(236px, 74vw, 400px); }
  .se-ph-rig { left: calc(var(--rig-w) * -.2); }
  .se-ph-copy p { display: none; }
  .se-ph-copy { width: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .se-ph-breath { animation: none; }
  .se-ph-tab img, .se-ph-tab::after, .se-ph-now a i { transition: none; }
}