/* 7-Eleven PROJECT SCREEN, PHASE 2 — the PDP breakpoint accordion.
   INTRO-1 ONLY (index.html). Every rule is scoped under .se-project-screen,
   the wrapper that exists only in this document, on the same isolation contract as
   css/pellmell-intro-7e.css and css/pellmell-intro-7e-fill.css: the portfolio index-portfolio-archived.html has no such
   element, so nothing here can reach the portfolio's own 7-Eleven row.

   WHAT THIS IS. The nav strip above runs its sweep ONE cycle; a dark stage then wipes
   bottom-to-top over the white 7-Eleven card, a desktop product page slides up into it,
   and the three breakpoints fold between each other like an accordion. This file owns
   the stage, the three screens and their rest geometry. It owns NO motion beyond the
   armed/closed start state — every tween is js/pellmell-intro-7e-pdp.js.

   SOURCE — three sibling 1093x600 frames in Figma LrUdy5WZmi3n2gkRz9SEC2:
     2303:8424 "Desktop"  screen 2305:8425  1024   x 420  @ x 34.50, y 90
     2305:8526 "Tablet"   screen 2305:8527   768   x 420  @ x162.50, y 97.14
     2299:7920 "MOBILE"   screen 2336:1772   236.62x 420  @ x428.19, y 90
   Read as a spec, not traced: no frame is placed as an image.

   PRODUCT PHOTOGRAPHY — IN ALL THREE BREAKPOINTS. It was absent everywhere until
   2026-08-16, and this header used to record that absence as deliberate; both the absence
   and the claim about it are gone. Every screen now carries the pack FRONT on its primary.

   NO PRIMARY HAS A PLATE FILL. The pack is a cut-out on transparency and `cover` scales it
   to the box HEIGHT, cropping the sides, so the corners are never painted by the image —
   what shows through them is the hero on desktop/tablet and .pdp-m-body on mobile. All
   three boxes are the same 0.767 ratio (199.485x260, 199.485x260, 138.254x180.195), so the
   crop is identical everywhere.

   THE RAIL IS DESKTOP AND TABLET ONLY — mobile pages its gallery with five dots instead —
   and its slots DO keep their #F7F7F5. Primary and thumbnails are deliberately different
   treatments; do not unify them on the assumption that one of them was missed.

   THE ONE FACT THE WHOLE ACCORDION RESTS ON. All three screens are 420 tall and
   horizontally centred on an identical stage. Their ONLY geometric difference is width.
   That is why the fold is a pure width animation on a single centred window with the
   three layouts cross-fading inside it — the breakpoints are not three objects moving
   past each other, they are one viewport being resized, which is what a breakpoint set
   actually means.

   ========================================================================= */

/* =========================================================================
   THE STAGE
   Occupies the EXACT painted box of .se-screen — left 35.26, bottom 0,
   800 x 438 scaled 1.50685 = 1205.48 x 660 — so the wipe replaces the white
   card pixel for pixel rather than covering a differently-sized area.

   INTERNAL UNITS ARE FIGMA UNITS, SCALED 1.1, AND 1.1 IS EXACT ON THE AXIS THAT
   MATTERS: 600 x 1.1 = 660, the card's painted height. On width it is 1093 x 1.1
   = 1202.3 against the card's 1205.48 — 3.18px narrow, 0.26%. Taken as a uniform
   1.1 rather than a non-uniform (1.102909, 1.1) because distorting the type to
   close a 3px gap is the worse trade; the screens are centred, so the residue
   shows up as 1.59px of extra dark margin per side and nothing else.

   RADIUS 52.8, NOT FIGMA'S 17.6, AND THAT IS DELIBERATE. Figma's stage rect
   2298:3923 carries a 16px corner (17.6 at 1.1). This box is the same box the
   white card occupies, and the card family — #heroCard 1203.97, the EF stack,
   .se-screen's own 35.04 x 1.50685 — all paint 52.8. A 17.6 corner arriving
   mid-animation where a 52.8 corner was would read as the card changing shape.
   Matched to the family for the same reason css/pellmell-intro-7e.css:113 gives.
   Easily reverted: one number.

   CLIPPED SHUT AT REST. inset(100% 0 0 0) leaves the visible band between a top
   edge at 100% and a bottom edge at 100% — zero height, pinned to the BOTTOM, so
   the wipe opens by walking the top inset to 0 and the fill grows upward. This is
   also the no-JS state: nothing arms it, so the stage never appears and the
   shipped white 7-Eleven card is what ships.
   ========================================================================= */
.se-project-screen .pdp-stage {
  position: absolute;
  left: 35.26px;
  bottom: 0;
  width: 1205.48px;
  height: 660px;
  background: #191919;
  /* 52.8 -> 10 (user, 2026-08-24): matches the FOOTER. This box is authored at RENDER
     scale (its 1205.48 width is already the painted width), so 10 here paints 10 — no
     division, unlike .se-screen / .ef-screen (1.50685) and .bw-screen (1.1). */
  border-radius: 10px;
  overflow: hidden;
  z-index: 3;                    /* over .se-screen, under nothing else in the panel */
  clip-path: inset(100% 0 0 0);
  pointer-events: none;          /* the screens are decorative; never eat a click */
}

/* =========================================================================
   THE WINDOW — the accordion itself.
   Sized in FIGMA px (1024 / 768 / 236.62) and scaled 1.1 as a whole, so the JS
   animates a plain `width` in the same units the design is specified in and never
   has to convert. Height is constant 420 in all three frames, so the fold is
   horizontal only.

   THE TRANSFORM ORDER IS LOAD-BEARING. `translate(-50%, -50%) scale(1.1)` applies
   right-to-left: scale first, about the element's own centre (which leaves that
   centre where it was), then translate by half the UNSCALED box. Combined with
   left/top 50% that parks the window's centre exactly on the stage's centre and
   KEEPS it there as width animates — the fold stays centred for free, with no
   compensating x tween. Swapping the two functions would translate by half the
   scaled box and drift the window off-centre by 5% of its width.
   ========================================================================= */
.se-project-screen .pdp-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1024px;                 /* desktop at rest; GSAP drives this */
  height: 420px;
  transform: translate(-50%, -50%) scale(1.1);
  border-radius: 17.635px;       /* desktop at rest; GSAP drives this too */
  overflow: hidden;
  /* TRANSPARENT, NOT #F7F7F5. At every RESTING breakpoint the screen inside is exactly
     as wide as the window, so nothing shows through and the two are indistinguishable.
     Mid-fold that used to be untrue on two folds; as of the 2026-08-17 fluid-width fix
     (js/pellmell-intro-7e-pdp.js, the `to.key === 'mobile'` call) it is untrue on ONE.
     Tablet -> mobile no longer opens a gap at all — the phone fills the window for the
     whole of that fold — but mobile -> desktop still does: the phone holds 236.62 while
     the window opens past it, and a filled background there painted a pale frame around
     the phone, the window announcing itself as an object. Transparent hands that gap back
     to the dark stage, so the fold reads as the stage opening away from the screen. */
  background: transparent;
}

/* Each screen keeps its OWN natural width and stays centred, so the window crops it
   symmetrically as the fold narrows. That symmetric crop is what makes a width tween
   read as an accordion rather than as a panel sliding out of frame.
   opacity 0 at rest: the JS raises exactly one. */
.se-project-screen .pdp-screen {
  position: absolute;
  top: 0;
  left: 50%;
  height: 420px;
  transform: translateX(-50%);
  opacity: 0;
  font-family: 'Roboto', sans-serif;
  color: #191919;
  -webkit-font-smoothing: antialiased;
}
.se-project-screen .pdp-screen--desktop { width: 1024px; }
.se-project-screen .pdp-screen--tablet  { width: 768px; }
.se-project-screen .pdp-screen--mobile  { width: 236.62px; }

/* Shared leaf: the orange availability dot. Same shape in all three breakpoints,
   different size, so only the size is restated downstream. */
.se-project-screen .pdp-dot {
  display: block;
  background: #f17730;
  border: 0.714px solid #f17730;
  border-radius: 1.429px;
  flex: none;
}

/* Every icon leaf is sized EXPLICITLY from its Figma box, never `auto` and never by a
   shared descendant rule — the seven assets have unlike aspect ratios (the pin is
   21.45x28.58, the hamburger 24.97x15.52, the search arrow square) and one global size
   would stretch five of them. */
.se-project-screen .pdp-screen img { display: block; }


/* =========================================================================
   DESKTOP — 1024 x 420, Figma 2305:8425 (REVISED 2026-08-16, node 2313:9056)

   THE REVISION MOVED DESKTOP ONTO TABLET'S SCALE. Header 52.906 -> 48 with the
   smaller icon set; thumbnails 70.017 -> 52.513 and the primary plate
   265.98x339.55 -> 199.485x260, i.e. the identical image block tablet already had;
   and the type dropped from 17.147/45.725/17.147 to tablet's 12.86/34.294/12.86.
   The text column WIDENED, 510.82 -> 406.87, which is what the smaller image block
   pays for. CART + SHOP left the hero's top-right corner and joined the eyebrow row,
   and the cart went from an unlabelled white plate to a labelled button with the bag
   glyph and its "0" badge.

   WHAT THAT MEANS FOR THIS FILE: desktop and tablet now share EVERY vertical position
   in the text column (eyerow at abs y 104.058, title +35.08, spec +79.08, desc
   +106.94) and every type size. They differ in exactly three things — column width
   406.87 vs 346, the header's x positions, and the strip, which stays a horizontal
   three-cell row on desktop against tablet's stacked cells. The shared values are
   NOT folded into a common rule: the two screens are separate ports on purpose (see
   the file header), and a shared block would silently move one when the other is
   revised again, which is the trap this project has already recorded.

   UNCHANGED by the revision: the hero/plate palette, and the strip's own geometry
   (2313:8897 is child-for-child identical to the 2305:8477 it replaced).
   ========================================================================= */
.se-project-screen .pdp-d-header {
  position: relative;
  height: 48px;
  background: #ffffff;
}
/* Every header leaf is centred on y=24 in the frame — the menu icon lands at 18.178
   with height 11.642, the logo at 9.113 with 29.773, the icons at 13.283 with 21.434,
   all three midpoints exactly 24.0 — so they are centred here rather than each
   carrying its own measured top. Only x is positional. */
/* ── THE HEADER ROW: SYMMETRIC INSETS, LOGO ON THE AXIS, GAPS GIVE (user, 2026-08-17) ──
   "Keep the logo on the centre axis and make the row's left and right insets symmetric —
   the gaps either side of the logo give."

   THERE ARE THREE THINGS THIS ROW CAN WANT AND IT CAN ONLY HAVE TWO: logo centred, gaps
   equal, insets symmetric. The flanking elements are 18.729 and 95.38 — a 5.1x difference —
   so fixing any two forces the third. The frame itself picked GAPS EQUAL + INSETS SYMMETRIC
   and paid for it with an off-centre logo (352.597 / 352.599 gaps, 85 / 85 insets, logo
   32.15 left of centre). This build picks LOGO CENTRED + INSETS SYMMETRIC, so the gaps are
   what give: 394.011 left against 317.361 right. That is the design, not a slip.

   THE INSET IS THE MEAN OF THE FRAME'S TWO VISIBLE ONES — (91.174 + 85.000) / 2 = 88.087.
   Both are the frame's, and they were never equal to the EYE: the frame wraps the hamburger
   in a 31.079 box at x=85 with the glyph at 6.175 inside it, so the ink starts at 91.174
   while the icon group's ink ends at 939.0, i.e. 85.0 from the right. The wrapper is not
   rendered here (only the bare glyph is), so a symmetry measured on boxes would be invisible
   and a symmetry measured on ink is what the brief is asking for. Meaning both leaves move,
   by 3.087, rather than one side absorbing the correction.

   THE ICONS ARE RIGHT-ANCHORED, NOT PLACED (see .pdp-d-icons) — that is what makes the
   symmetry hold by CONSTRUCTION. The group's width is text-driven (the "Find a store" label
   is type, not a box), so a `left` computed from an assumed 95.38 would drift the right inset
   by whatever the label actually measures. */
.se-project-screen .pdp-d-menu {
  position: absolute;
  left: 88.355px;                /* the mean VISIBLE inset; the frame's own is 91.174 */
  top: 50%;
  transform: translateY(-50%);
}
.se-project-screen .pdp-d-menu img { width: 18.729px; height: 11.642px; }
/* CENTRED BY CONSTRUCTION, AND A DELIBERATE DEVIATION FROM THE FRAME (user, 2026-08-17:
   "should be centred on all three screens ... anchor it on the shared centre the fold
   already runs on rather than tweening it").

   WHAT IT WAS: `left: 468.676px`, carried verbatim from 2313:9004, with a comment noting
   that 468.676 + 11.172 = 479.85 against a 512 midpoint and calling the 32.15px offset the
   frame's own. That was true and is still true — the frame places the logo inside an
   854-wide inset row and off that row's centre too — so this is a correction of the guide,
   not a port of it. Tablet is the same story at 38.33px (see .pdp-t-logo). MOBILE was
   already centred in the frame AND by construction here, which is the tell that the wide
   two are a slip rather than an intent: 2336:1774 sits at 112.109 + 6.2 = 118.31, exactly
   half of 236.62.

   WHY 50% RATHER THAN A NUMBER. The header is the full width of its screen, every screen is
   `left: 50%; translateX(-50%)` inside the window, and the window is centred on the stage by
   xPercent — so one `left: 50%` puts the logo on the very axis the fold contracts along.
   That is what makes it hold still through the whole fold: the desktop element's width tweens
   1024 -> 768 and a percentage tracks it for free. THE MORPH'S `left` TWEEN ON THIS ELEMENT
   IS GONE (js/pellmell-intro-7e-pdp.js) — leaving it would drive the logo to a hard 334.502
   and reintroduce exactly the drift this removes. Nothing tweens the logo now. */
.se-project-screen .pdp-d-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22.344px;
  height: 29.773px;
}
/* `right`, NOT `left`, AND THAT IS THE LOAD-BEARING PART OF THE SYMMETRY. This group's width
   is not a number — "Find a store" is type at 8.573px, so the group measures whatever the
   font renders. The frame calls it 95.38 and a `left: 840.532` computed from that would put
   the right inset wherever the label happened to land, silently, on any font swap or metric
   change. Anchored to the right edge the inset IS 88.087 by definition, matching .pdp-d-menu's
   left, and the label is free to measure what it measures.
   It also means the morph tweens `right` (88.087 -> 40), so the group tracks the screen's own
   right edge as the width contracts instead of being re-placed against a moving frame. */
.se-project-screen .pdp-d-icons {
  position: absolute;
  right: 87.819px;               /* + 0.536 of avatar ink inset = 88.355, matching the menu */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8.573px;
}
.se-project-screen .pdp-d-store {
  display: flex;
  align-items: center;
  gap: 2.143px;
}
.se-project-screen .pdp-d-store img { width: 16.086px; height: 21.434px; }
.se-project-screen .pdp-d-store-label {
  font-weight: 500;
  font-size: 8.573px;
  color: #000000;
  text-decoration: underline;
  white-space: nowrap;
}
.se-project-screen .pdp-d-profile { width: 21.434px; height: 21.434px; }

/* HERO. 420 - 48 = 372. The content block is absolutely placed rather than centred:
   the revision's 259.883-tall content sits at hero-y 56.058, which is NOT the centred
   value (372 - 259.883) / 2 = 56.059 — it is, to a rounding hair, so `align-items:
   center` would land it correctly, but the frame states the offset and the tablet's
   equivalent block is genuinely off-centre, so both are positioned the same way. */
.se-project-screen .pdp-d-hero {
  position: relative;
  height: 372px;
  background: #ede9e2;
}
.se-project-screen .pdp-d-content {
  position: absolute;
  left: 158.989px;
  top: 56.058px;
  width: 706.022px;
  height: 259.883px;
  display: flex;
}
.se-project-screen .pdp-d-image {
  display: flex;
  gap: 12.86px;
  flex: none;
}
.se-project-screen .pdp-d-thumbs {
  display: flex;
  flex-direction: column;
  gap: 3.215px;
  /* align-self, because .pdp-d-image is a flex row and its default `stretch` was giving
     this column the PRIMARY's 260 instead of its own 163.968. Invisible — the rail has no
     background and its slots pack from the top either way — but the frame states the
     column's height, and a box that only looks right is the kind of thing the next person
     measures and believes. */
  align-self: flex-start;
}
.se-project-screen .pdp-d-thumbs i {
  position: relative;
  box-sizing: border-box;
  width: 52.513px;
  height: 52.513px;
  background: #f7f7f5;
  border-radius: 2.143px;
  overflow: hidden;
}
/* THE KEYLINE IS A REAL BORDER AGAIN, AND ONLY BECAUSE SLOT 1 STOPPED PLACING ITS SHOT.
   It was an inset box-shadow for two revisions, to keep a border from shifting an
   absolutely-positioned child by its own width — an absolute child resolves against the
   PADDING box, so a bordered slot would have offset its image while the unbordered ones
   sat correct. 2331:1985 removes that conflict: this slot now CENTRES its shot (the frame
   makes it a flex box rather than placing the image at an offset), and centring is
   immune — the border eats 0.5 from each side and the 38 stays in the middle either way.
   The arithmetic agrees with the frame: 0.5 + (51.513 - 38) / 2 = 7.256, which is the
   offset 2331:1985 states. Back to a border, since that is what the frame has. */
.se-project-screen .pdp-d-thumbs i.is-current {
  border: 0.5px solid #191919;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-project-screen .pdp-d-thumbs img { display: block; object-fit: cover; }
/* Slot 1 is CENTRED by its slot; slots 2 and 3 are PLACED at stated offsets. That split is
   the frame's own, not a convenience — which is why the positioning is per-slot rather
   than one shared rule. */
.se-project-screen .pdp-d-thumbs i.is-current img { position: static; width: 38px; height: 38px; }
.se-project-screen .pdp-d-thumbs i:not(.is-current) img { position: absolute; }
.se-project-screen .pdp-d-thumbs i:nth-child(3) img { left: 4.986px; top: 4.984px; width: 42.54px; height: 42.54px; }
/* THE INGREDIENTS CROP IS NOT CENTRED, AND `cover` ALONE GETS IT WRONG. The source is
   portrait 465x519 going into a landscape 46.5x39.872 box, so cover scales it to the WIDTH
   and leaves 12.027 of overflow to place. Plain cover centres that, showing 11.6%-88.4% of
   the panel. The frame places it at top -23.2% of a 130.17%-tall image, i.e. 9.250 above
   the box, which is 9.250 / 12.027 = 76.91% of the available travel — noticeably lower,
   trading whitespace at the top for a sliver of the barcode at the bottom.
   Read off 2327:1693's own crop, not inferred: an earlier pass assumed centred cover here
   and was simply wrong about it. */
.se-project-screen .pdp-d-thumbs i:nth-child(2) img {
  left: 3.213px;
  top: 6.141px;
  width: 46.5px;
  height: 39.872px;
  object-position: 50% 76.91%;
}
/* NO FILL — the pack sits straight on the hero (2313:8840, re-pulled 2026-08-16; the
   primary's corners sample #EDE9E2, the hero's own colour, where they used to sample the
   plate's #F7F7F5). This box is now purely a crop window.

   THE THUMBNAIL PLATES DID NOT CHANGE WITH IT and must not be "tidied" to match: their
   slots still sample #F7F7F5 in the same pull. Only the primary lost its fill.

   Why it shows at all: the pack is a cut-out on transparency, and `cover` on a square
   source in a 199.485x260 portrait box scales to the HEIGHT and crops the sides, so the
   corners are never painted by the image. They used to hand through to the plate; now
   they hand through to the hero. */
.se-project-screen .pdp-d-primary {
  position: relative;
  width: 199.485px;
  height: 260px;
  overflow: hidden;
}
.se-project-screen .pdp-d-primary img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 299.152 (text column x) - 264.858 (image block width) = 34.294 — the same gutter
   tablet uses, since the image block is now the same block. */
.se-project-screen .pdp-d-text {
  margin-left: 34.294px;
  width: 406.87px;
  height: 259.883px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.se-project-screen .pdp-d-details { display: flex; flex-direction: column; }
.se-project-screen .pdp-d-eyerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 31.08px;
}
.se-project-screen .pdp-d-eyebrow {
  margin: 0;
  height: 31.08px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12.86px;
}
/* y 35.08 and 79.08 within a 94.08-tall group: the eyerow ends at 31.08, so the title
   carries a 4px top gap and then occupies exactly 40, and the spec exactly 15. Set as
   fixed heights with matching line-heights rather than padding, because the frame
   states box heights and Roboto's `normal` leading would otherwise decide them. */
.se-project-screen .pdp-d-title {
  margin: 4px 0 0;
  height: 40px;
  font-weight: 500;
  font-size: 34.294px;
  line-height: 40px;
  white-space: nowrap;
}
.se-project-screen .pdp-d-spec {
  margin: 4px 0 0;
  height: 15px;
  font-weight: 300;
  font-size: 12.86px;
  line-height: 15px;
}
/* 12.86 gap below the 94.08-tall title group, then a 79.717 box whose 69 of text sits
   on 5.358 of padding. WIDTH 346, NOT the column's 406.87 — the revision widened the
   column but held the measure, so the copy wraps to the same four lines tablet does. */
.se-project-screen .pdp-d-desc {
  margin: 12.86px 0 0;
  padding: 5.358px 0;
  width: 346px;
  font-weight: 500;
  font-size: 12.86px;
  line-height: 17.147px;
}

/* THE STRIP. Three #F7F7F5 cells on a 2px gutter, the gutter showing the hero's
   #EDE9E2 through.

   THE CELL WIDTHS ARE NOW PINNED, REVERSING THIS BLOCK'S EARLIER REASONING, AND THE
   REASON IS THE MORPH. They were content-driven on the argument that Figma's
   183.86 / 88.72 / 130.29 are measured results of this content rather than authored
   values, so pinning them could only fight the text metrics. That holds for a static
   render. It cannot hold for an animated one: the desktop->tablet fold now CONTRACTS
   this bar to tablet's 110 / 98 / 136, and a tween needs a from-value. A cell whose
   width is decided by its contents has no from-value to leave.

   So the numbers are pinned, and the objection is answered structurally instead: both
   sets of contents are absolutely positioned inside the cell (.pdp-d-own / .pdp-d-alt
   below), so no measure votes on the width in either direction and there is nothing
   left for the pin to fight. `overflow: hidden` then makes the plate a window onto its
   own contents, which is what lets the bar contract past what the desktop row would
   otherwise occupy.

   Verified against the frame: each cell is exactly its inner content frame + the 8px
   padding either side — 183.86 - 16 = 167.860 (2313:8900), 88.72 - 16 = 72.720
   (2313:8916), 130.294 - 16 = 114.294 (2313:8929) — so the pinned totals still come to
   the column's 406.874 with the two 2px gutters. */
.se-project-screen .pdp-d-strip {
  display: flex;
  gap: 2px;
  height: 54px;
}
/* flex: none is LOAD-BEARING. The strip stretches to .pdp-d-text, which the morph
   narrows 406.87 -> 346; with the default `flex: 0 1 auto` the cells would flex-shrink
   to fit as the column closed, which is the browser fighting the very tween that is
   contracting them — two different width authorities on the same three boxes. */
.se-project-screen .pdp-d-cell {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: none;
  background: #f7f7f5;
}
.se-project-screen .pdp-d-cell--avail { width: 183.860px; }
.se-project-screen .pdp-d-cell--qty   { width: 88.720px; }
.se-project-screen .pdp-d-cell--cart  { width: 130.294px; }

/* BOTH INTERIORS, STACKED IN THE SAME PLATE. .pdp-d-own is the desktop row, .pdp-d-alt
   the tablet stack; the morph dissolves one into the other while the plate contracts
   around them. Vertically centred rather than positioned, because every one of the six
   inner frames — desktop's three at y 12.710/12.711/12.711 over heights 28.580/28.578/
   28.578, tablet's three at y 8 over height 38 — has its midpoint at exactly 27.0, the
   cell's own half-height. One rule covers all six.

   THE DESKTOP TRIPLE USED TO READ 14.141/12.711/12.711 over 25.718/28.578/28.578: the
   availability pill was shorter than the other two and sat lower to compensate. The
   2313:9056 re-pull levelled it (see .pdp-d-check), so the three are now one height at one
   y — this rule is unchanged, but it holds for a simpler reason than it was written for.

   The 4px gap is the frame's on all three desktop cells (opt 0-73 to check at 77; label
   0-30 to stepper at 34; label 0-22 to button at 26). */
.se-project-screen .pdp-d-own,
.se-project-screen .pdp-d-alt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.se-project-screen .pdp-d-own { left: 8px; gap: 4px; }
/* .pdp-d-alt's left is TABLET's padding, not desktop's, because it is the tablet cell's
   interior: 8 on the availability cell (2305:8593 x=8), 8.573 on the other two
   (2305:8605 / 2305:8618). It starts hidden and the morph fades it up. */
.se-project-screen .pdp-d-alt { opacity: 0; }
.se-project-screen .pdp-d-cell--avail .pdp-d-alt { left: 8px; }

/* ── THE AVAILABILITY CELL IS NOT A CROSSFADE ANY MORE (user, 2026-08-17) ─────────────
   Its interiors MORPH — the plate slides left and grows while pick-up | delivery glides
   right across the front of it. The motion is js/pellmell-intro-7e-pdp.js `buildAvail`;
   these three rules are the rest state that makes it possible, and each is load-bearing.

   1. THE TABLET PLATE IS VISIBLE AT BOTH BREAKPOINTS, so it is exempt from the `opacity: 0`
      above. It is not "the tablet copy fading in" here — held at height 28.578 it lands on
      12.711..41.289, which IS the desktop pill's box, so one element serves both frames and
      simply changes shape between them.
   2. THE DESKTOP PILL IS RETIRED IN CONSEQUENCE. Keeping it would paint a second identical
      button directly over the plate at progress 0. The element and its .pdp-d-check rule
      stay in place — they are the desktop spec, and restoring them is deleting this one
      declaration — but nothing renders them while the plate is doing the job.
   3. THE OPT LEADS, so .pdp-d-own is raised above .pdp-d-alt. Source order puts the plate
      last, i.e. on top, which would drag the button over the very element the brief has
      gliding on its forefront. */
.se-project-screen .pdp-d-cell--avail .pdp-d-alt  { opacity: 1; }
.se-project-screen .pdp-d-cell--avail .pdp-d-own  { z-index: 1; }
.se-project-screen .pdp-d-cell--avail .pdp-d-check { display: none; }
.se-project-screen .pdp-d-cell--qty   .pdp-d-alt { left: 8.573px; }
.se-project-screen .pdp-d-cell--cart  .pdp-d-alt { left: 8.573px; gap: 4.287px; }
/* nowrap is LOAD-BEARING since the 2026-08-16 revision. The cells are content-driven,
   and the text column came down 510.82 -> 406.87, which left the availability cell
   tight enough that "pick up" broke onto a second line and pushed the cell taller than
   its 54. The frame sets these three labels on one line. */
/* NO `gap` ON THIS ROW, AND THE MISSING GAP IS A FIX. It carried `gap: 4px` on top of
   the per-leaf margins below, so every one of the three joints was spaced twice: 6
   against the frame's 2 at the dot, 6 against 2 at the delivery label, 6 against 4 at
   the bar. The run measured 82.16 where 2313:8901 states 73.

   That 9px was never visible on its own — it pushed the availability cell wide, the
   three cells then totalled more than the 406.87 column, and the default `flex: 0 1
   auto` quietly shrank them back to fit while their contents overflowed their own
   plates. Invisible, because the overflow landed on the 2px gutters. It stopped being
   invisible when the fold started contracting these plates for real (the cells are
   pinned and clipped now, see .pdp-d-strip), which turned the spill into a clipped
   right border on the Check availability pill.

   The frame's three joints are 2 / 4 / 2, and the margins alone state them:
   dot 6 + 2 + "pick up" 28 + 4 + bar 2 + 2 + "delivery" 29 = 73. */
.se-project-screen .pdp-d-opt {
  display: flex;
  align-items: center;
  font-size: 8.573px;
  color: #f17730;
  white-space: nowrap;
}
.se-project-screen .pdp-d-opt .pdp-dot { width: 6px; height: 6px; margin-right: 2px; }
.se-project-screen .pdp-d-pick { font-weight: 500; }
.se-project-screen .pdp-d-bar,
.se-project-screen .pdp-d-del  { font-weight: 300; }
.se-project-screen .pdp-d-bar  { margin: 0 2px 0 4px; }
/* RE-PULLED 2026-08-17 from 2313:9056. Three changes, and they are one change: the pill
   was an outline, and it is now a plate like the other two on the row.

     was (2313:8912, previous pull)   now
     border   0.714 dashed #F17730    none
     fill     none                    10% #F17730 — the same fill .pdp-d-stepper carries
     height   25.718 (y 14.141)       28.580 (y 12.710)

   THE HEIGHT IS THE PART THAT IS EASY TO GET WRONG. It is not an independent number: the
   frame now states 28.580 here against 28.578 on the stepper and the add button, i.e. the
   three are the same height and the 0.002 is rounding noise in the export. So this carries
   28.578 — the value the other two already carry — because "every button on this row is the
   same height" is the actual instruction, and writing 28.580 would encode the noise as if
   it were a spec and leave the row 0.002 uneven forever.

   DROPPING THE BORDER IS ALSO A WIDTH FIX, unasked-for but not optional. The pill is
   content-driven, so the 0.714 border was adding 1.428 to the run: 78 + 11.432 + 1.428 =
   90.860 against the frame's 89.431. Without it, 78 + 2 x 5.716 = 89.432 — the frame's own
   number, from the same padding that was already there.

   The vertical padding goes with it. Height is explicit now, so 7.145 top and bottom would
   be a second authority on the same box; the flex centring below places the 10px line the
   way .pdp-d-add and .pdp-d-stepper place theirs. */
.se-project-screen .pdp-d-check {
  display: flex;
  align-items: center;
  height: 28.578px;
  padding: 0 5.716px;
  background: rgba(241, 119, 48, 0.1);
  border-radius: 2.858px;
  font-weight: 500;
  font-size: 10px;
  line-height: 10px;
  color: #f17730;
  white-space: nowrap;
}
.se-project-screen .pdp-d-deal,
.se-project-screen .pdp-d-price {
  font-weight: 500;
  font-size: 8.573px;
  color: #f17730;
  white-space: nowrap;
}
.se-project-screen .pdp-d-stepper {
  display: flex;
  align-items: center;
  gap: 2.858px;
  height: 28.578px;
  padding: 0 5.716px;
  background: rgba(241, 119, 48, 0.1);
  border-radius: 2px;
  font-size: 8.573px;
  color: #f17730;
}
.se-project-screen .pdp-d-stepper span { padding: 0 1.429px; font-weight: 500; }
.se-project-screen .pdp-d-stepper b    { padding: 0 1.429px; font-weight: 700; }
.se-project-screen .pdp-d-add {
  display: flex;
  align-items: center;
  height: 28.578px;
  padding: 0 17.147px;
  background: #f17730;
  border-radius: 2.858px;
  font-weight: 500;
  font-size: 8.573px;
  color: #ffffff;
  white-space: nowrap;
}

/* CART + SHOP, now on the eyebrow row (Figma 2313:8956) rather than floating over the
   hero's top-right corner as 2305:8515 did. The pair is 107.932 wide: a 53.584 CART
   plate, a 3px gutter, and a 51.348 SHOP. Both 31.079 tall, matching the eyerow.
   IDENTICAL to the tablet pair 2313:8980 — same widths, same type, same glyphs — so
   the only thing that differs between the two breakpoints here is where the row puts
   it, which the eyerow's space-between already handles. */
.se-project-screen .pdp-d-cartshop {
  display: flex;
  align-items: center;
  gap: 3px;
}
.se-project-screen .pdp-d-cartbtn,
.se-project-screen .pdp-d-shopbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31.079px;
  border-radius: 2.143px;
  font-weight: 500;
  font-size: 8.573px;
  color: #191919;
  white-space: nowrap;
}
/* 8.56 + label 21 + gap 2.14 + bag 13.32 + 8.56 = 53.584 exactly, so centring with the
   gap reproduces the frame without stating the padding twice. */
.se-project-screen .pdp-d-cartbtn {
  width: 53.584px;
  gap: 2.144px;
  background: #f7f7f5;
}
.se-project-screen .pdp-d-shopbtn {
  width: 51.348px;
  gap: 0;
  background: #faa22d;
}
/* THE SHOP ARROW, AND WHY IT CARRIES PADDING WHERE NO OTHER ICON DOES.
   icon-arrow-shop.svg (2026-08-17, from the 7-Eleven project's Assets folder) replaces
   icon-search.svg on all three SHOP buttons. Same glyph the frame shows, but CROPPED
   DIFFERENTLY, and that difference is the whole reason this is not a one-line src swap:

     asset                  viewBox        ink bbox        ink / box
     icon-search.svg (old)  16.2682 sq     10.20 x 7.55     63% x 46%
     Figma's own export     12.2011 sq      8.00 x 8.00     65.6% both
     icon-arrow-shop.svg    1200    sq   1080.05 sq         90.0% both

   Dropped into the frame's 12.201 box at face value, a 90%-ink asset renders the arrow at
   10.98 against the frame's 8.00 — 37% oversized. So the FOOTPRINT stays the frame's box
   (2313:8971 / 2313:8995, both 12.201 square) and `padding` gives back the margin the
   tighter crop is missing: 12.201 - 2 x 1.656 = 8.889 of content, x 0.900 ink = 8.000, the
   frame's number exactly.

   THE PADDING IS ON WIDTH BECAUSE THE RESET IS border-box (css/pellmell-intro.css:341).
   Under content-box these numbers would have to be written the other way round — 8.889 of
   width plus the padding — and the footprint would silently grow to 12.201 + 3.312. Verified
   against the frame's own render: the arrow's ink measures 8px square on the 1:1 board.

   Nothing here relies on the old export's `preserveAspectRatio="none"`. This asset has no
   such attribute, so it scales uniformly and centres itself — which is why the mobile rule
   below could stop stretching it. */
.se-project-screen .pdp-d-shopbtn img { width: 12.201px; height: 12.201px; padding: 1.656px; }

/* The bag carries its count INSIDE it — Figma stacks the "0" over the vector in one
   grid cell (2313:8964), exactly as the mobile 7NOW badge does — so the digit is
   absolutely centred on the glyph rather than set beside it. Same 8.294x9.99 asset. */
.se-project-screen .pdp-d-bag {
  position: relative;
  display: block;
  width: 13.32px;
  height: 10.293px;
}
.se-project-screen .pdp-d-bag img {
  position: absolute;
  left: 2.513px;
  top: 0;
  width: 8.294px;
  height: 9.99px;
}
/* THE DIGIT IS PLACED AS THE FRAME'S OWN TEXT BOX, not as a padded copy of the glyph box.
   Reported 2026-08-17: "the zero in the cart icon isn't centred — it reads top-aligned."
   It was, by 0.87px on a bag 10.293 tall.

   The old rule took the VECTOR's box (2.513 / 0 / 8.294 x 9.99) and pushed the digit down
   with `padding-top: 1.4` to clear the bag's handle — a guess at a number the frame already
   states. 2313:8966 puts the "0" at 2.575 / 2.836 / 8.171 x 7.457, whose centre is 6.5645;
   the padded box centred its digit at (9.99 + 1.4) / 2 = 5.695. Hence 0.87 high, which on a
   glyph whose visible body is only ~7px reads as pinned to the top rather than as slightly
   off.

   Taking the frame's box outright removes the guess AND the `box-sizing` it needed: with no
   padding there is nothing for the border-box reset to subtract, and `align-items: center`
   centres the line box in exactly the box the designer drew. 2.836 is also, not by accident,
   where the bag's handle meets its body in the asset (icon-cart.svg's path turns at 2.74259)
   — the frame's text box starts just below the handle, which is what the old padding was
   reaching for by hand.

   IDENTICAL ON TABLET (2313:8990, same four numbers) and structurally the same on mobile,
   though .pdp-m-cartbtn b is positioned against the 23.68 button rather than the bag box and
   measures correct as it stands — see the note there. */
.se-project-screen .pdp-d-bag b {
  position: absolute;
  left: 2.575px;
  top: 2.836px;
  width: 8.171px;
  height: 7.457px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 6px;
  color: #ffffff;
}


/* =========================================================================
   TABLET — 768 x 420, Figma 2305:8527 (REVISED 2026-08-16, node 2313:9056)

   Now that desktop has come down onto this scale, the two share every vertical
   position and every type size in the text column. What still MAKES this a distinct
   breakpoint: the text column is 346 against desktop's 406.87, the header sits in a
   688-wide inset rather than 854, and — the real one — each strip cell stacks its
   contents in two rows instead of laying them out horizontally.

   The revision also moved the header's own leaves (the hamburger lost its 31.079
   wrapper and is placed bare; the logo moved 6.2px left) and put the CART label and
   bag into what had been an empty white plate.
   ========================================================================= */
.se-project-screen .pdp-t-header {
  position: relative;
  height: 48px;
  background: #ffffff;
}
/* Centred on y=24 like desktop's: the bare icon lands at 18.179 with height 11.642,
   the logo at 9.113 with 29.773, the icons at 13.283 with 21.434 — all midpoint 24.0. */
/* TABLET NEEDED NO CORRECTION AT ALL, and that is the tell that the ink basis is the right
   one. Its hamburger is placed BARE in the frame (no 31.079 wrapper, unlike desktop's), so
   the frame's own insets are already 40.0 / 40.0 measured on ink — symmetric to four decimals.
   The mean of two equal numbers is the number, so both leaves keep the frame's values and
   only the logo moved. Gaps give the same way desktop's do: 314.099 / 237.447. */
.se-project-screen .pdp-t-menu {
  position: absolute;
  left: 40.268px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.se-project-screen .pdp-t-menu img { width: 18.729px; height: 11.642px; }
/* Centred, on the same axis and for the same reason as .pdp-d-logo — which is also the
   element that PAINTS this breakpoint (the `carrier` map), so the two must agree or the
   tablet beat would jump between the morphed desktop and the authored tablet. The frame
   states 334.502 here: 334.502 + 11.172 = 345.67 against 768 / 2 = 384.0, i.e. 38.33px
   left of centre, a wider miss than desktop's 32.15. */
.se-project-screen .pdp-t-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22.344px;
  height: 29.773px;
}
/* Right-anchored for the same reason desktop's is — see .pdp-d-icons. 40 is the frame's own
   inset (632.619 + 95.38 = 727.999 against a 767.999 screen), now stated as the inset it
   always was rather than as a left edge derived from a text-driven width. */
.se-project-screen .pdp-t-icons {
  position: absolute;
  right: 39.732px;               /* + 0.536 of avatar ink inset = 40.268, matching the menu */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8.573px;
}
.se-project-screen .pdp-t-store {
  display: flex;
  align-items: center;
  gap: 2.143px;
}
.se-project-screen .pdp-t-store img { width: 16.086px; height: 21.434px; }
.se-project-screen .pdp-t-store-label {
  font-weight: 500;
  font-size: 8.573px;
  color: #000000;
  text-decoration: underline;
  white-space: nowrap;
}
.se-project-screen .pdp-t-profile { width: 21.434px; height: 21.434px; }

.se-project-screen .pdp-t-hero {
  position: relative;
  height: 372px;
  background: #ede9e2;
}
.se-project-screen .pdp-t-content {
  position: absolute;
  left: 40px;
  top: 56.058px;
  width: 688px;
  height: 259.883px;
  display: flex;
}
.se-project-screen .pdp-t-image {
  display: flex;
  gap: 12.86px;
  flex: none;
}
.se-project-screen .pdp-t-thumbs {
  display: flex;
  flex-direction: column;
  gap: 3.215px;
  /* align-self, because .pdp-t-image is a flex row and its default `stretch` was giving
     this column the PRIMARY's 260 instead of its own 163.968. Invisible — the rail has no
     background and its slots pack from the top either way — but the frame states the
     column's height (2313:8835), and a box that only looks right is the kind of thing the
     next person measures and believes. */
  align-self: flex-start;
}
/* A RESTATEMENT OF DESKTOP'S AGAIN. For one revision 2329:1897 was its own thing — four
   slots, an orange-tinted selection, a 1px keyline and a nutrition panel drawn from live
   text — and 2331:1987 puts it back: three slots, child-for-child identical to 2313:8835.
   Restated rather than shared, per the file header, which is what made both the divergence
   and this reversal a local edit each time. Every value and every reason is desktop's;
   see .pdp-d-thumbs for the border-vs-shadow history and the ingredients crop. */
.se-project-screen .pdp-t-thumbs i {
  position: relative;
  box-sizing: border-box;
  width: 52.513px;
  height: 52.513px;
  background: #f7f7f5;
  border-radius: 2.143px;
  overflow: hidden;
}
.se-project-screen .pdp-t-thumbs i.is-current {
  border: 0.5px solid #191919;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-project-screen .pdp-t-thumbs img { display: block; object-fit: cover; }
.se-project-screen .pdp-t-thumbs i.is-current img { position: static; width: 38px; height: 38px; }
.se-project-screen .pdp-t-thumbs i:not(.is-current) img { position: absolute; }
.se-project-screen .pdp-t-thumbs i:nth-child(3) img { left: 4.986px; top: 4.984px; width: 42.54px; height: 42.54px; }
.se-project-screen .pdp-t-thumbs i:nth-child(2) img {
  left: 3.213px;
  top: 6.141px;
  width: 46.5px;
  height: 39.872px;
  object-position: 50% 76.91%;
}

.se-project-screen .pdp-t-primary {
  position: relative;
  width: 199.485px;
  height: 260px;
  overflow: hidden;
}
.se-project-screen .pdp-t-primary img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 299.152 (text column x) - 264.858 (image block width) = 34.294 */
.se-project-screen .pdp-t-text {
  margin-left: 34.294px;
  width: 346px;
  height: 259.883px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.se-project-screen .pdp-t-details { display: flex; flex-direction: column; }
.se-project-screen .pdp-t-eyerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 31.08px;
}
.se-project-screen .pdp-t-eyebrow {
  margin: 0;
  height: 31.08px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12.86px;
}
.se-project-screen .pdp-t-cartshop {
  display: flex;
  align-items: center;
  gap: 3px;
}
/* The pair is now identical to desktop's (2313:8980 vs 2313:8956): the plate carries a
   CART label and the bag badge, and SHOP grew 46.348 -> 51.348 as its label went
   6.43 -> 8.573. */
.se-project-screen .pdp-t-cartbtn,
.se-project-screen .pdp-t-shopbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31.079px;
  border-radius: 2.143px;
  font-weight: 500;
  font-size: 8.573px;
  color: #191919;
  white-space: nowrap;
}
.se-project-screen .pdp-t-cartbtn {
  width: 53.584px;
  gap: 2.144px;
  background: #f7f7f5;
}
.se-project-screen .pdp-t-shopbtn {
  width: 51.348px;
  background: #faa22d;
}
/* Desktop's box and desktop's padding — 2313:8995 is 12.201 square like 2313:8971. See the
   crop-vs-footprint note on .pdp-d-shopbtn img for where 1.656 comes from. */
.se-project-screen .pdp-t-shopbtn img { width: 12.201px; height: 12.201px; padding: 1.656px; }
.se-project-screen .pdp-t-bag {
  position: relative;
  display: block;
  width: 13.32px;
  height: 10.293px;
}
.se-project-screen .pdp-t-bag img {
  position: absolute;
  left: 2.513px;
  top: 0;
  width: 8.294px;
  height: 9.99px;
}
/* 2313:8990 — the same four numbers as desktop's 2313:8966. See .pdp-d-bag b for why the
   frame's text box replaced the padded glyph box. */
.se-project-screen .pdp-t-bag b {
  position: absolute;
  left: 2.575px;
  top: 2.836px;
  width: 8.171px;
  height: 7.457px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 6px;
  color: #ffffff;
}
/* y 35.08 and 79.08 in a 94.08 group — the same 4px gaps desktop now uses. */
.se-project-screen .pdp-t-title {
  margin: 4px 0 0;
  height: 40px;
  font-weight: 500;
  font-size: 34.294px;
  line-height: 40px;
  white-space: nowrap;
}
.se-project-screen .pdp-t-spec {
  margin: 4px 0 0;
  height: 15px;
  font-weight: 300;
  font-size: 12.86px;
  line-height: 15px;
}
.se-project-screen .pdp-t-desc {
  margin: 12.86px 0 0;
  padding: 5.358px 5.358px 5.358px 0;
  width: 346px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 12.86px;
  line-height: 17.147px;
}

/* Cell widths ARE authored at this breakpoint (110 / 98 / 136 + two 1.072 gutters =
   346), unlike desktop's content-driven cells — the stacked contents no longer
   determine the width, so the frame's numbers are the spec. */
.se-project-screen .pdp-t-strip {
  display: flex;
  gap: 1.072px;
  height: 54px;
}
.se-project-screen .pdp-t-cell {
  background: #f7f7f5;
  height: 54px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.se-project-screen .pdp-t-cell--avail { width: 110px; padding: 0 8px; }
.se-project-screen .pdp-t-cell--qty   { width: 98px;  padding: 0 8.573px; }
.se-project-screen .pdp-t-cell--cart  { width: 136px; padding: 0 8.573px; gap: 4.287px; }
/* RE-PULLED 2026-08-17 from 2313:9056, same change as .pdp-d-check: the 0.536 dashed
   #F17730 outline is gone and the plate carries 10% #F17730 instead — which is what
   .pdp-t-qtybox two cells over has carried all along, so the row is now three fills.

   NOTHING HAPPENS TO THE HEIGHT HERE, and that is the finding rather than an omission.
   2305:8593 was already 38 at y 8, as are the qtybox (2337:1977) and the add row
   (2337:1990) — tablet's three were level before the revision, and only desktop's pill was
   the odd one out. So "every button on that row is the same height" costs a height change
   on desktop and none here.

   Dropping the border is the same width fix it is on desktop: 83.287 + 2 x 4.287 lands the
   frame's 91.860 exactly, where the two 0.536 edges had been making it 92.932.

   THIS RULE ALSO REPAINTS THE MORPH'S LANDING. .pdp-d-alt reuses .pdp-t-check verbatim
   inside the desktop cell (see the markup note at index.html:931), so the
   desktop->tablet fold picks the new fill up here rather than needing its own edit — which
   is the whole reason that sharing was allowed against this file's separate-ports rule. */
.se-project-screen .pdp-t-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 4.287px;
  background: rgba(241, 119, 48, 0.1);
  border-radius: 2.143px;
  box-sizing: border-box;
  color: #f17730;
}
/* 500, up from 400 (2305:8597 is Roboto Medium as of the 2026-08-17 re-pull). The label is
   Medium at ALL THREE breakpoints now, which is worth stating here because it did NOT take
   three edits: desktop's .pdp-d-check was already 500, so only this rule and .pdp-m-check
   moved. If a future pull changes the weight again, those are the two places that drift. */
.se-project-screen .pdp-t-check-top {
  height: 18px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 10px;
}
.se-project-screen .pdp-t-check-bot {
  height: 12px;
  display: flex;
  align-items: center;
  font-size: 10px;
  white-space: nowrap;
}
.se-project-screen .pdp-t-check-bot .pdp-dot {
  width: 4px;
  height: 4px;
  border-width: 0.536px;
  border-radius: 1.072px;
  margin-right: 4.287px;
}
.se-project-screen .pdp-t-check-bot b    { font-weight: 700; }
.se-project-screen .pdp-t-check-bot span { font-weight: 300; }
.se-project-screen .pdp-t-qtybox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 38px;
  background: rgba(241, 119, 48, 0.1);
  border-radius: 2px;
  color: #f17730;
}
.se-project-screen .pdp-t-deal {
  height: 18px;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
}
.se-project-screen .pdp-t-stepper {
  height: 12px;
  display: flex;
  align-items: center;
  gap: 2.143px;
}
.se-project-screen .pdp-t-stepper span { padding: 0 1.072px; font-weight: 400; font-size: 8px; }
.se-project-screen .pdp-t-stepper b    { padding: 0 1.072px; font-weight: 700; font-size: 10px; }
.se-project-screen .pdp-t-price {
  font-weight: 500;
  font-size: 10px;
  color: #f17730;
  white-space: nowrap;
}
.se-project-screen .pdp-t-add {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12.86px;
  background: #f17730;
  border-radius: 2.143px;
  font-weight: 500;
  font-size: 10px;
  color: #ffffff;
  white-space: nowrap;
}


/* =========================================================================
   MOBILE — 236.62 x 420, Figma 2336:1772
   The real re-layout. The thumbnail COLUMN becomes a five-dot pager under the image,
   the two-column hero collapses to one, the description is dropped outright, price
   moves up onto the title line, the strip splits into two rows across a hairline, and
   a 7NOW bar appears that neither wider breakpoint carries.
   ========================================================================= */
.se-project-screen .pdp-m-header {
  position: relative;
  height: 26.64px;
  background: #ffffff;
  border-radius: 8.88px 8.88px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8.88px;
  box-sizing: border-box;
}
/* MOBILE'S INSETS ARE MEASURED TO INK, NOT BOXES, and here that matters twice over. Both
   flanking leaves carry dead space their boxes hide: this one is a 17.249 tap box around a
   10.3945 glyph (3.4275 each side, from the flex centring), and icon-profile-mobile.svg is a
   24.42 box around a 10.8225 avatar (6.7988 each side, extracted from the path rather than
   assumed). So the frame's 8.881 / 8.7 — which LOOK symmetric — are visibly 12.309 / 15.499,
   a 3.19px lean to the left that no box measurement would ever show.
   Mean 13.904, so both leaves move out by 1.595 and the ink sits symmetric.

   top is 50% now rather than the frame's 4.699. At the 26.64 rest height those agree to
   0.004 (the frame's value IS the centred one), but the header contracts 48 -> 26.64 across
   the tablet->mobile fold now (js, `hdr`), and a fixed top would strand this glyph near the
   top of the bar for the whole of it. */
.se-project-screen .pdp-m-menu {
  position: absolute;
  left: 10.476px;                /* 13.904 inset - 3.428 of flex padding = glyph ink at 13.904 */
  top: 50%;
  transform: translateY(-50%);
  width: 17.249px;
  height: 17.249px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-project-screen .pdp-m-menu img { width: 10.394px; height: 6.461px; }
.se-project-screen .pdp-m-logo { width: 12.401px; height: 16.524px; }
.se-project-screen .pdp-m-profile {
  /* 7.105 rather than the frame's 8.7 — the BOX sits 7.105 out so the AVATAR inside it lands
     at the row's 13.904 inset, matching the hamburger's ink on the left. The asset carries
     6.7988 of dead space each side (path extents, not assumed), which is the whole reason the
     box value and the visible value differ; see the ink note on .pdp-m-menu. */
  position: absolute;
  right: 7.105px;
  top: 50%;
  transform: translateY(-50%);
  width: 24.42px;
  height: 13.875px;
}

.se-project-screen .pdp-m-body {
  height: 393.36px;
  background: #f7f7f5;
  padding: 11.84px 17.76px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.se-project-screen .pdp-m-gallery {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.92px;
}
/* NO FILL, and the #EDE9E2 it used to carry is gone rather than recoloured. 2336:1798 has
   no background of its own now — it is an image box — so what shows around the cut-out
   pack is .pdp-m-body's #F7F7F5. Same treatment as the other two primaries, and the box
   has the same 0.767 aspect (138.254/180.195 = 199.485/260), so `cover` crops the square
   source identically at all three breakpoints. */
.se-project-screen .pdp-m-primary {
  position: relative;
  width: 138.254px;
  height: 180.195px;
  overflow: hidden;
}
.se-project-screen .pdp-m-primary img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.se-project-screen .pdp-m-dots {
  display: flex;
  align-items: center;
  gap: 8.88px;
}
.se-project-screen .pdp-m-dots i {
  width: 5.92px;
  height: 5.92px;
  background: #ede9e2;
}
.se-project-screen .pdp-m-dots i.is-current { background: #f17730; }

.se-project-screen .pdp-m-prod {
  display: flex;
  flex-direction: column;
  gap: 2.22px;
}
.se-project-screen .pdp-m-details {
  background: #ede9e2;
  border-radius: 2.96px;
  padding: 0 11.84px 5.92px;
  display: flex;
  flex-direction: column;
}
.se-project-screen .pdp-m-eyebrow {
  margin: 2.96px 5.92px 0;
  height: 20.817px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 8px;
}
.se-project-screen .pdp-m-titlerow {
  margin: 0 5.92px 2.96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 10px;
}
/* HEIGHT IS PINNED, AND THAT IS BOTH THE FRAME'S NUMBER AND A LOAD-BEARING ONE.
   2336:1816 and 2336:1833 are each 29.6 tall, which is what 2.96 of padding either side of a
   23.68 row comes to — so stating it changes nothing at rest. What it changes is mid-fold:
   the tablet->mobile morph grows .pdp-m-add to 38 so it can hand over from tablet's button at
   matching size (js `buy`), and an auto-height strip would take that 38 as its own content
   height, push .pdp-m-prod up by 14.32, and drag the rule, the first strip and the title with
   it — a whole block shifting to accommodate one button that is only briefly oversized.
   Pinned, the button simply overhangs its row while it is large, which nothing can see. */
.se-project-screen .pdp-m-strip {
  margin: 0 5.92px;
  padding: 2.96px 0;
  height: 29.6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Figma 2336:1832 exports this as a 177.6-wide vector. It is a hairline, so it is a
   border here — an <img> would resample to a grey smear at this scale. */
.se-project-screen .pdp-m-rule {
  margin: 5.92px 0;
  border-top: 0.56px solid rgba(25, 25, 25, 0.1);
}
.se-project-screen .pdp-m-opt {
  display: flex;
  align-items: center;
  gap: 1.11px;
  font-size: 8px;
  color: #f17730;
}
.se-project-screen .pdp-m-opt .pdp-dot {
  width: 3.33px;
  height: 3.33px;
  border-width: 0.397px;
  border-radius: 0.793px;
  margin-right: 1.11px;
}
.se-project-screen .pdp-m-pick { font-weight: 500; }
.se-project-screen .pdp-m-bar  { font-weight: 300; font-size: 8.88px; margin: 0 1.11px; }
.se-project-screen .pdp-m-del  { font-weight: 300; }
.se-project-screen .pdp-m-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75.48px;
  height: 23.68px;
  /* #F7F7F5, not the 10% #F17730 the other steppers and plates carry — the same
     near-white as .pdp-m-body and the 7NOW bar's .pdp-m-cartbtn, so on the beige
     #EDE9E2 plate this reads as a raised light button rather than a tinted one. */
  background: #f7f7f5;
  /* 2, not the 1.11 this carried before, and not the 1.11 its neighbours still carry.
     2336:1883 states `rounded-[2px]` while .pdp-m-stepper's plate is unchanged — so the two
     mobile plates genuinely differ by 0.89 now. Read off the same node as the fill and the
     weight, in the same pull; if it looks like a typo next to the 1.11s around it, that is
     the design, not a slip. */
  border-radius: 2px;
  /* 500, up from 400 — 2336:1885 is Roboto Medium, matching tablet and desktop. */
  font-weight: 500;
  font-size: 8px;
  color: #f17730;
}
.se-project-screen .pdp-m-qty {
  display: flex;
  align-items: center;
  gap: 4.44px;
}
.se-project-screen .pdp-m-deal {
  font-weight: 400;
  font-size: 8px;
  color: #f17730;
  white-space: nowrap;
}
.se-project-screen .pdp-m-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.19px;
  height: 17.76px;
  padding: 0 3.172px;
  background: rgba(241, 119, 48, 0.1);
  border-radius: 1.11px;
  font-size: 8px;
  color: #f17730;
}
.se-project-screen .pdp-m-stepper span { padding: 0 0.595px; font-weight: 400; }
.se-project-screen .pdp-m-stepper b    { padding: 0 0.595px; font-weight: 700; }
.se-project-screen .pdp-m-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75.48px;
  height: 23.68px;
  background: #f17730;
  border-radius: 1.11px;
  font-weight: 400;
  font-size: 8px;
  color: #ffffff;
}

/* Figma nests three boxes here — 7now (py 1.48 px 11.84) > strip (py 2.96 px 8.88) >
   row (h 29.97, pl 4.44). Flattened to one padded row: 1.48+2.96 = 4.44 vertical,
   11.84+8.88 = 20.72 horizontal, +4.44 more on the left for the row's own inset.
   Height 4.44*2 + 29.97 = 38.85, the frame's own. */
.se-project-screen .pdp-m-7now {
  background: #ede9e2;
  border-radius: 2.96px;
  height: 38.85px;
  padding: 4.44px 20.72px 4.44px 25.16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.se-project-screen .pdp-m-7now-logo { width: 38.295px; height: 8.88px; }
.se-project-screen .pdp-m-7now-btns {
  display: flex;
  align-items: center;
  gap: 4.44px;
}
/* The badge is the cart glyph with its count set INSIDE it (Figma stacks them in one
   grid cell), so the "0" is absolutely centred over the leaf rather than beside it. */
.se-project-screen .pdp-m-cartbtn {
  position: relative;
  width: 23.68px;
  height: 23.68px;
  background: #f7f7f5;
  border-radius: 1.11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-project-screen .pdp-m-cartbtn img { width: 8.294px; height: 9.99px; }
.se-project-screen .pdp-m-cartbtn b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -28%);
  font-weight: 600;
  font-size: 6px;
  color: #ffffff;
}
.se-project-screen .pdp-m-shopbtn {
  display: flex;
  align-items: center;
  height: 23.68px;
  padding: 0 8px;
  background: #faa22d;
  border-radius: 2px;
  font-weight: 400;
  font-size: 8px;
  color: #191919;
}
/* 6.263 SQUARE, not the 6.263 x 7.588 this carried before. 7.588 is the frame's WRAPPER
   (2336:1881); the arrow inside it is 6.263 square (2336:1882), so the old rule was handing
   a square glyph a box 21% too tall. It got away with it because the old export declared
   `preserveAspectRatio="none"` and simply stretched; this asset preserves ratio, so the same
   rule would now letterbox instead — visibly off-centre rather than subtly tall.
   The button's height is fixed at 23.68 and its flex centring places the icon, so dropping
   1.325 of box height moves no layout.
   Padding by the same arithmetic as desktop: 6.263 - 2 x 0.85 = 4.563 of content, x 0.900
   ink = 4.107 — and the frame's own render measures the arrow at ~4px. */
.se-project-screen .pdp-m-shopbtn img { width: 6.263px; height: 6.263px; padding: 0.85px; }


/* =========================================================================
   REDUCED MOTION
   The JS bails before arming anything, so the stage keeps its clipped-shut rest
   state and the white 7-Eleven card is what is seen. `display: none` as
   belt-and-braces, on the same reasoning as css/pellmell-intro-7e-fill.css:64 —
   if a state change ever left the stage unclipped it must still not be visible.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .se-project-screen .pdp-stage { display: none; }
}