/* 07 · product: the Product type (core/types-product.js), the phone-shaped selling card the user picked on for-two
   round 3 ("A crime drama for two": the layout, the buttons and the type). A wine ground with one soft glow, a taped
   Polaroid of the mark in a wine aura (soft by its own gradient, crisp at every edge, no blur filter), then the rose
   eyebrow, the big serif headline, one line and one pill door. It reads only the --product-* tokens (05-types.css);
   a satellite's mobile page and a product page's hybrid column are both this card. */

.rw-product{color-scheme:dark;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;
  min-height:var(--product-min-h,100svh);padding:var(--product-pad,22px 20px 28px);border-radius:var(--product-radius,0px);color:var(--product-ink);
  background:radial-gradient(70% 45% at 20% 18%,var(--product-glow),transparent 70%),var(--product-ground)}

/* the aura: a soft wine glow behind the photo, held to a circle, never past the card's edge */
.rw-product__aura{position:absolute;z-index:-1;right:2%;top:2%;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--product-accent) 34%,transparent),color-mix(in srgb,var(--product-glow) 30%,transparent) 50%,transparent 100%)}

/* the big print pressed on the ground behind the photo (behind: true), faint, cut by the card's edge */
.rw-product__behind{position:absolute;z-index:-1;left:-8%;top:2%;width:92%;pointer-events:none}
.rw-product__behind svg{display:block;width:100%;height:auto}
.rw-product__behind .rw-product__ridge{stroke-opacity:.35;stroke-width:2.8}

/* the Polaroid: paper, tape, the shot, an optional handwritten caption */
/* the detail pass (the user, 2026-10-13: "detail the site, develop detail"): paper grain on the print, a torn
   translucent tape with fibres, a darker inner edge to the photo, the print pressed twice, a handwritten caption.
   The grain is one still noise tile (an SVG turbulence, painted once, never animated), mixed in at a whisper */
.rw-product__photo{position:absolute;right:9%;top:6%;width:min(54%,300px);aspect-ratio:4/5;margin:0;padding:8px 8px 34px;rotate:5deg;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),var(--product-paper);
  box-shadow:0 14px 28px var(--product-shadow),0 1px 0 color-mix(in srgb,var(--product-paper) 60%,var(--product-shadow)) inset}
.rw-product__tape{position:absolute;left:30%;top:-9px;width:40%;height:18px;rotate:-3deg;opacity:.82;
  background:repeating-linear-gradient(90deg,transparent 0 3px,color-mix(in srgb,var(--product-paper) 30%,transparent) 3px 4px),
    color-mix(in srgb,var(--product-paper) 62%,var(--rose-band));
  clip-path:polygon(0 12%,4% 0,8% 14%,12% 2%,16% 10%,20% 0,100% 0,100% 88%,96% 100%,92% 86%,88% 98%,84% 88%,80% 100%,0 100%)}
.rw-product__shot{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--product-shot);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--product-shadow) 60%,transparent),inset 0 0 24px color-mix(in srgb,var(--product-shadow) 70%,transparent)}
.rw-product__echo .rw-product__ridge{stroke-opacity:.35;stroke-width:2}
.rw-product__mark{display:block;width:76%;height:100%;margin:0 auto}
.rw-product__mark--spatter{width:84%}
.rw-product__ridge{fill:none;stroke:var(--product-accent);stroke-width:3.4;stroke-linecap:round}
.rw-product__drop{fill:var(--product-accent)}
.rw-product__caption{position:absolute;left:12px;bottom:7px;rotate:-2deg;font:italic 600 15px "Segoe Print","Bradley Hand","Snell Roundhand",var(--f-display);color:var(--product-shot)}
/* the case line: typed like a file label under the words */
.rw-product__file{margin:0;font:600 11px var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--product-accent) 70%,var(--product-lede))}

/* the words: the "A crime drama for two" set */
.rw-product__words{position:relative;display:flex;flex-direction:column;gap:12px;max-width:34ch}
.rw-product__eyebrow{margin:0;font:600 12px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--product-accent)}
.rw-product__title{margin:0;font:700 clamp(40px,11vw,64px)/1.02 var(--f-display);color:var(--product-title);text-wrap:balance}
.rw-product__lede{margin:0;font-size:16px;line-height:1.45;color:var(--product-lede)}
/* the pill door: the kit's Button (cta), its tokens set to the card's rose */
.rw-product__door{align-self:flex-start;--btn-ground-a:var(--product-accent-soft);--btn-ground-b:var(--product-accent-soft);--btn-bloom:transparent;--btn-aura:transparent;
  --btn-edge:transparent;--btn-ink:var(--product-ground);--btn-hover-ink:var(--product-ground);--btn-radius:10px;--btn-pad-y:11px;--btn-pad-x:18px;--btn-size:15px}
/* two doors (the user's pick for for-two): the left one full colour; "Get it" on the right only a thin edge with
   inverted words, and under the hand it becomes the left one, so a hover irritates you into the click */
.rw-product__doors{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rw-product__door--alt{--btn-ground-a:var(--product-accent);--btn-ground-b:var(--product-accent)}
.rw-product__door--edge{--btn-ground-a:transparent;--btn-ground-b:transparent;--btn-edge:var(--product-accent-soft);--btn-ink:var(--product-accent-soft);
  --btn-hover-ink:var(--product-ground);transition:background-color .25s,color .25s,border-color .25s}
.rw-product__door--edge:hover,.rw-product__door--edge:focus-visible{--btn-ground-a:var(--product-accent);--btn-ground-b:var(--product-accent);--btn-edge:var(--product-accent);--btn-ink:var(--product-ground)}
/* one word of the title in the hand (the rose pack): the house hand, a touch larger, in the card's rose */
.rw-product__hand{font-family:var(--f-hand,"Segoe Print","Bradley Hand",cursive);font-weight:400;font-size:1.08em;color:var(--product-accent)}