/* ==========================================================================
   SNUGGLES — product detail page
   Loaded after style.css and only on pdp.html. Everything shared (tokens,
   header, footer, buttons, headings) stays in style.css, untouched here; this
   file holds only what the PDP adds.

   Two Figma frames drive it: desktop "pdp" (1440 wide, node 692:1563) and
   mobile "iPhone 16 - 2" (393 wide, node 693:2049). Numbers are those frames'
   own. Desktop is the default, tablets included; the mobile composition takes
   over on phones only (up to 767), capped at 520px wide.
   ========================================================================== */

header .header__logo img.whitelogo{display: none;}
header .header__logo img.orange-logo{display: block;}
.nav-toggle__bars span{background-color: #000;}
   

/* =======================================================  SHARED BITS  ===== */
/* 54 on 42 in the desktop comp. */
.pdp-title{ line-height:1.2857; }

/* The three illustrated sections are absolute layouts in both comps. Each
   .pdp-abs carries its Figma coordinates in design px (--x --y --w --h,
   measured from the top-left of its stage) and --u turns a design px into a
   real one: 100cqi is the stage's width, --vw how many design px it spans.

   --u is declared on the stage but only resolved where it is used, so its cqi
   always measures the stage (the nearest container) from inside it. */
.pdp-stage{
  --vw:1440;
  --u:calc(100cqi / var(--vw));
  /* The unit text scales by. Artwork follows --u all the way down; copy stops
     shrinking at 0.72 of design size (a 768 iPad would otherwise set 16px copy
     at 8.5px). Above ~1040 and on phones it is simply --u. */
  --ut:max(var(--u), 0.72px);
  position:relative;
  width:100%; max-width:1440px; margin-inline:auto;
  /* Also a stacking context, so any blending inside can only see this box's
     own background — each stage paints the colour its section shows. */
  container-type:inline-size;
}
.pdp-abs{
  position:absolute; margin:0; max-width:none;
  left:  calc(var(--x) * var(--u));
  top:   calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height:calc(var(--h) * var(--u));
  transform:rotate(var(--r, 0deg)) scaleX(var(--sx, 1));
}
/* Text, and anything that has to stay with its text. It keeps --u for where
   its group sits (--ax/--ay, a design point) but sizes and spaces itself from
   there in --ut. So when --ut outruns --u on a tablet, a group grows away from
   its anchor: the left-hand callouts from their right edge, outward, never in
   over the bowl. Where --ut equals --u this is exactly .pdp-abs. */
.pdp-note__pill,
.pdp-note__copy,
.pdp-diet__note,
.pdp-diet__arrow,
.pdp-benefit__title,
.pdp-benefit__copy{
  left:  calc(var(--ax) * var(--u) + (var(--x) - var(--ax)) * var(--ut));
  top:   calc(var(--ay) * var(--u) + (var(--y) - var(--ay)) * var(--ut));
  width: calc(var(--w) * var(--ut));
  height:calc(var(--h) * var(--ut));
}
/* Text boxes: width from the comp, height from their own lines. */
.pdp-abs.pdp-note__copy,
.pdp-abs.pdp-bowl__scribble,
.pdp-abs.pdp-diet__its,
.pdp-abs.pdp-diet__balanced,
.pdp-abs.pdp-diet__note,
.pdp-abs.pdp-benefit__title,
.pdp-abs.pdp-benefit__copy{ height:auto; }
.pdp-abs.pdp-benefit__title{ width:auto; }

/* ===========================================================  PRODUCT  ===== */
.pdp-hero{ padding-block:104px 60px; background-color: #F7F3EC;}

/* 771 = thumbs 136 + 20 + stage 615; 30 to the 459 info column. The whole
   row is 1260 wide and sits on the left gutter, ending 60 short of the right
   one, exactly as the comp has it. */
.pdp-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 771fr) minmax(0, 459fr);
  column-gap:30px;
  align-items:start;
}

/* --- Gallery -------------------------------------------------------------- */
.pdp-gallery{
  display:grid;
  grid-template-columns:minmax(0, 136fr) minmax(0, 615fr);
  column-gap:20px;
  position: sticky;
  top: 10px;
}

/* Thumbs: a vertical Swiper as tall as the stage beside it — four 126px tiles
   and three 14px gaps in the comp. The column stretches to the grid row, and
   the Swiper fills the column. */
.pdp-thumbs{ position:relative; min-height:0; }
/* Absolute, so the column takes its height from the stage and adds nothing to
   the row. In flow, the slides Swiper had sized pushed the row taller, which
   Swiper then measured — a loop that settled on 167px tiles. */
.pdp-thumbs__swiper{ position:absolute; inset:0; }
.pdp-gallery__thumbs{ margin:0; padding:0; list-style:none; }
/* Before Swiper runs (or without JS), lay the tiles out the same way. */
.pdp-thumbs__swiper:not(.swiper-initialized) .swiper-wrapper{
  flex-direction:column; gap:14px;
}
.pdp-thumbs__swiper:not(.swiper-initialized) .swiper-slide{ flex:1 1 0; min-height:0; }

.pdp-thumb{
  position:relative; display:block;
  width:100%; height:100%; padding:0;
  border:1px solid transparent; border-radius:16px;
  background:#F3E9DD; overflow:hidden;
  transition:border-color .2s var(--ease);
}
.pdp-thumb:hover{ border-color:rgba(250,106,95,.45); }
.pdp-thumb.is-active{ border-color:var(--coral); }
/* Each crop is placed where Figma places it inside the tile. The two comps
   agree on these to within a pixel (136x126 and 110x102 are the same shape). */
.pdp-thumb__img{ position:absolute; max-width:none; }
.pdp-thumb__img--pack{
  left:26.47%; top:11.9%; width:47.79%; height:76.98%;
  object-fit:cover; object-position:top center;
}
.pdp-thumb__img--detail{
  left:8.82%; top:24.6%; width:80.88%; height:75.4%;
  object-fit:cover; object-position:top center;
}
.pdp-thumb__img--bowl{
  left:6.62%; top:30.16%; width:85.29%; height:61.11%;
  object-fit:cover;
}

/* Arrows: the shared .circle-btn. Swiper marks them -lock when every thumb
   already fits, and .circle-btn's own display would otherwise win over
   Swiper's display:none — style.css loads later at the same specificity. */
.pdp-thumbs__nav{ box-shadow:0 2px 10px rgba(56,56,56,.14); }
.pdp-thumbs__nav.swiper-button-lock{ display:none; }
.pdp-thumbs__nav.swiper-button-disabled{ opacity:.35; pointer-events:none; }
@media (min-width: 768px){
  /* A column, so the arrows sit on its top and bottom edge, turned 90deg. */
  .pdp-thumbs__nav{ left:50%; right:auto; }
  .pdp-thumbs__nav--prev{ top:6px; transform:translateX(-50%) rotate(90deg); }
  .pdp-thumbs__nav--next{ top:auto; bottom:6px; transform:translateX(-50%) rotate(90deg); }
  .pdp-thumbs__nav--prev:hover,
  .pdp-thumbs__nav--next:hover{ transform:translateX(-50%) rotate(90deg) scale(1.06); }
}

.pdp-gallery__stage{
  position:relative;
  aspect-ratio:615 / 547;
  border-radius:16px;
  background:#F3E9DD;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-gallery__main{
  /* position:absolute;  */
  max-width:none;
  object-fit:contain;
  transition:opacity .25s var(--ease);
  width: 80% !important;
  height: auto !important;
  max-height: 90% !important;
}
.pdp-gallery__main.is-swapping{ opacity:0; }
/* 313 x 455 at (149, 46) in the 615 x 547 stage. */
.pdp-gallery__main[data-kind="pack"]{
  left:24.23%; top:8.41%; width:50.89%; height:83.18%;
}
/* Not in the comp — sized so each fills the stage the way the pack does. */
.pdp-gallery__main[data-kind="detail"],
.pdp-gallery__main[data-kind="bowl"]{
  inset:0; margin:auto; width:80%; height:auto;
}

/* --- Info column ---------------------------------------------------------- */
.pdp-info{ padding-top:14px; }
.pdp-info__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:73px;
}
.pdp-info__names{ display:grid; gap:4px; min-width:0; }
.pdp-info__eyebrow{
  font-size:14px; font-weight:600; line-height:normal;
  color:var(--coral);
}
.pdp-info__title{
  font-family:var(--font-display); font-weight:400;
  font-size:28px; line-height:35px;
  color:var(--ink);
}
.pdp-share{
  flex:0 0 auto;
  display:block; width:48px; height:48px;
  padding:11px 12px 13px;                  /* icon sits at (12, 11) */
  border-radius:8px; background:#F3E9DD;
  transition:background-color .2s var(--ease);
}
.pdp-share:hover{ background:#EADCCB; }
.pdp-share img{ display:block; width:24px; height:24px; }
.pdp-share__msg{ font-size:12px; color:var(--teal); text-align:right; }
.pdp-share__msg:empty{ display:none; }

.pdp-info__copy{
  margin-top:24px;
  font-size:16px; font-weight:400; line-height:22px;
  color:var(--ink-soft);
}

.pdp-sizes{ margin-top:24px; display:grid; gap:8px; }
.pdp-sizes__label{
  font-size:12px; font-weight:500; line-height:14px;
  text-transform:uppercase; color:#9C9386;
}
.pdp-sizes__list{ display:flex; flex-wrap:wrap; gap:8px; }
.pdp-size{
  display:grid; place-items:center;
  min-width:50px; height:30px; padding-inline:14px;
  border:1px solid #BBB1A4; border-radius:24px;
  font-size:12px; font-weight:400; line-height:normal; color:var(--ink-soft);
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pdp-size:hover{ border-color:var(--ink-soft); }
.pdp-size[aria-checked="true"]{
  border-color:var(--coral); background:rgba(250,106,95,.08); color:var(--coral);
}

.pdp-info__cta{
  display:flex; width:100%; margin-top:24px;
  border-radius:25px; font-weight:600;
}

/* --- Accordion ------------------------------------------------------------ */
.pdp-accordion{ margin-top:27px; }
.pdp-acc{ border-top:1px solid rgba(204,204,204,.4); }
.pdp-acc:last-child{ border-bottom:1px solid rgba(204,204,204,.4); }
.pdp-acc__heading{ margin:0; font:inherit; }
.pdp-acc__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; height:55px; padding:0 1px 0 0;
  font-family:"Elms Sans", var(--font-ui);
  font-size:16px; font-weight:400; letter-spacing:-.32px;
  color:#000; text-align:left;
}
.pdp-acc__icon{
  flex:0 0 auto; width:24px; height:24px;
  background:url("../images/pdp/icon-plus-outline.svg") center / 100% 100% no-repeat;
  transition:transform .3s var(--ease);
}
.pdp-acc__toggle[aria-expanded="true"] .pdp-acc__icon{ transform:rotate(45deg); }
/* 0fr -> 1fr animates to the content's height without measuring it. Closed
   panels are also hidden, so their links are out of the tab order. */
.pdp-acc__panel{
  display:grid; grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .3s var(--ease), visibility 0s linear .3s;
}
.pdp-acc__panel.is-open{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows .3s var(--ease), visibility 0s;
}
.pdp-acc__panel > div{ min-height:0; overflow:hidden; }
/* No padding on the body itself: a 0fr track collapses content, not padding,
   so a padded body left every closed row 18px too tall. The gap lives on the
   last child instead, inside the part that collapses. */
.pdp-acc__body{ display:grid; gap:10px; }
.pdp-acc__body > :last-child{ margin-bottom:18px; }
.pdp-acc__body p{ font-size:14px; line-height:22px; color:var(--ink-soft); }



/* pdp benefit section */
.pdp .benefits{background-color: #fff;}



/* ===================================================  INSIDE THE BOWL  ===== */
.pdp-bowl{ padding-top:62px; background-color: #F7F3EC;}             /* title 62 below the section top */

/* The stage starts under the title (y 116 of the section) and ends on the
   foot of the husky, flush with the coral band. */
.pdp-bowl__stage{
  aspect-ratio:1440 / 656;
  background:var(--cream);                 /* the husky's darken blends on this */
}

.pdp-bowl__arc-top  { --x:593.89;  --y:62.495;  --w:375.031; --h:202.598; }
.pdp-bowl__ring     { --x:504.708; --y:93.998;  --w:448.947; --h:448.947; }
.pdp-bowl__plate{
  --x:511; --y:103; --w:417.394; --h:415.591;
  border-radius:50%; object-fit:cover;
  box-shadow:
    calc(-1.803 * var(--u))  calc(13.522 * var(--u))  calc(28.848 * var(--u)) rgba(69,69,69,.10),
    calc(-6.31 * var(--u))   calc(53.188 * var(--u))  calc(53.188 * var(--u)) rgba(69,69,69,.09),
    calc(-13.522 * var(--u)) calc(118.998 * var(--u)) calc(72.12 * var(--u))  rgba(69,69,69,.05),
    calc(-24.34 * var(--u))  calc(211.852 * var(--u)) calc(84.741 * var(--u)) rgba(69,69,69,.01);
}
.pdp-bowl__crumb    { --x:610.16;  --y:486.59;  --w:27.1945; --h:15.3255; }
/* The two side arcs are rotated in the comp; these are their unrotated boxes,
   centred where Figma centres them. */
.pdp-bowl__arc-left { --x:371.918; --y:228.54;  --w:311.716; --h:135.909; --r:-105deg; }
.pdp-bowl__arc-right{ --x:581.532; --y:327.955; --w:398.027; --h:234.46;  --r:135deg; }
.pdp-bowl__plus     { --w:36; --h:36; }
.pdp-bowl__plus--1  { --x:530; --y:111; }
.pdp-bowl__plus--2  { --x:953; --y:261; }
.pdp-bowl__plus--3  { --x:535; --y:481; }

/* Mobile-only: the numbered badges that pick a note. */
.pdp-bowl__badges{ display:none; }

/* On desktop the list is only a wrapper — its notes place themselves against
   the stage. It has to lose .pdp-abs's transform too: any transform makes an
   element the containing block of the absolute notes inside it. */
.pdp-bowl__notes{ margin:0; padding:0; list-style:none; }
.pdp-abs.pdp-bowl__notes{ position:static; transform:none; }
.pdp-note{ display:contents; }
.pdp-note__num{ display:none; }

.pdp-note__pill{
  --h:50;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--coral); color:var(--white);
  font-family:var(--font-ui); font-weight:600;
  font-size:calc(20 * var(--ut)); line-height:calc(24.571 * var(--ut));
  white-space:nowrap;
}
.pdp-note__pill--salmon { --x:168;  --y:102; --w:159; }
.pdp-note__pill--chicken{ --x:1003; --y:256; --w:237; }
.pdp-note__pill--biotics{ --x:222;  --y:445; --w:250; }

.pdp-note__copy{
  font-weight:500; color:var(--ink);
  font-size:calc(16 * var(--ut)); line-height:calc(20 * var(--ut));
}
.pdp-note__copy--salmon { --x:177;  --y:169; --w:232; }
.pdp-note__copy--chicken{ --x:1008; --y:319; --w:294; }
.pdp-note__copy--biotics{ --x:232;  --y:511; --w:230; }
/* Anchors: the left-hand notes hold their right edge (the side facing the
   bowl), the right-hand one its left edge; each pill holds its top. */
.pdp-note__pill--salmon, .pdp-note__copy--salmon { --ax:409;  --ay:102; }
.pdp-note__pill--biotics,.pdp-note__copy--biotics{ --ax:472;  --ay:445; }
.pdp-note__pill--chicken,.pdp-note__copy--chicken{ --ax:1003; --ay:256; }

/* Text first, husky over it: the husky blends darken, which leaves the coral
   scribble showing through its pale backdrop exactly as Figma draws it. */
.pdp-bowl__scribble{
  --x:1109.07; --y:514.87; --w:108; --r:-25.44deg;
  font-family:"Grape Nuts", cursive; font-weight:400;
  font-size:calc(25 * var(--u)); line-height:calc(24 * var(--u));
  color:var(--coral);
}
.pdp-bowl__arrow  { --x:1202.67; --y:542.44; --w:45.2591; --h:47.1852; --r:124.91deg; }
.pdp-bowl__husky  { --x:1186;    --y:380;    --w:254;     --h:276;     mix-blend-mode:darken; }
.pdp-bowl__sparkle{ --x:1225.43; --y:408.95; --w:15.7193; --h:14.9876; --r:-75deg; --sx:-1; }

/* =====================================================  BALANCED DIET  ===== */
.pdp-diet{ background:var(--coral); overflow:hidden; }
.pdp-diet__stage{
  aspect-ratio:1440 / 706;
  background:var(--coral);
}
/* Figma lays a white blurred disc over the coral with blend "overlay". Over a
   flat coral that resolves to one colour, #FFD4BE, so the desktop asset is that
   disc pre-coloured and drawn normally — no blending to lose in the stage. */
.pdp-diet__glow  { --x:17.97;   --y:-153.03; --w:1421;    --h:1421; }
.pdp-diet__husky { --x:410;     --y:266;     --w:620;     --h:440; object-fit:cover; }
.pdp-diet__bubble{ --x:546.048; --y:89.1;    --w:352.397; --h:210.283; }

.pdp-diet__thought{ margin:0; font:inherit; }
.pdp-diet__its,
.pdp-diet__balanced,
.pdp-diet__note{
  display:block; text-align:center; color:var(--white);
  font-family:"Fuzzy Bubbles", cursive;
}
.pdp-diet__its{
  --x:633.34; --y:142.42; --w:184.845;
  font-weight:700;
  font-size:calc(23.339 * var(--u)); line-height:calc(28.007 * var(--u));
}
.pdp-diet__balanced{
  --x:585.85; --y:170.84; --w:271.332;
  font-weight:700;
  font-size:calc(34.259 * var(--u)); line-height:calc(41.111 * var(--u));
}
.pdp-diet__note{
  --w:217;
  font-weight:400;
  font-size:calc(20 * var(--ut)); line-height:calc(28 * var(--ut));
}
/* Each note and its arrow scale about the note's top centre. */
.pdp-diet__note--l, .pdp-diet__arrow--l{ --ax:276.5;  --ay:355; }
.pdp-diet__note--r, .pdp-diet__arrow--r{ --ax:1159.7; --ay:442; }
.pdp-diet__note--l{ --x:168;    --y:355; }
.pdp-diet__note--r{ --x:1051.2; --y:442; }
.pdp-diet__arrow--l{ --x:309.05;  --y:406.44; --w:67.4813; --h:70.3521; --r:-124.91deg; --sx:-1; }
.pdp-diet__arrow--r{ --x:1055.19; --y:513.96; --w:67.4806; --h:70.3537; --r:103.04deg; }

/* ======================================================  BIG BENEFITS  ===== */
.pdp-benefits{ padding-top:60px; background-color: #F7F3EC;}         /* title 60 below the section top */
.pdp-benefits__stage{ aspect-ratio:1440 / 578; }

.pdp-benefits__dog{
  --x:352; --y:50; --w:429; --h:473;
  object-fit:cover;
  border-radius:calc(214.5 * var(--u)) calc(148 * var(--u)) 0 calc(143 * var(--u));
}
.pdp-benefits__shadow{ --x:773.996; --y:489; --w:228; --h:38; }
/* drop-shadow, not box-shadow: it follows the pack's outline rather than its
   transparent box. Blur halved, since drop-shadow takes a deviation. */
.pdp-benefits__pack{
  --x:772; --y:199; --w:224; --h:325;
  object-fit:contain;
  filter:
    drop-shadow(calc(2 * var(--u))  calc(7 * var(--u))   calc(8.5 * var(--u))  rgba(201,201,201,.10))
    drop-shadow(calc(9 * var(--u))  calc(29 * var(--u))  calc(15 * var(--u))   rgba(201,201,201,.09))
    drop-shadow(calc(21 * var(--u)) calc(64 * var(--u))  calc(20.5 * var(--u)) rgba(201,201,201,.05))
    drop-shadow(calc(38 * var(--u)) calc(114 * var(--u)) calc(24 * var(--u))   rgba(201,201,201,.01));
}

.pdp-benefits__list{ margin:0; padding:0; list-style:none; }
.pdp-benefit{ display:contents; }
.pdp-benefit__num{ display:none; }
.pdp-benefit__title{
  font-family:var(--font-display); font-weight:400;
  font-size:calc(16 * var(--ut)); line-height:normal;
  color:var(--ink-soft); white-space:nowrap;
}
.pdp-benefit__copy{
  --w:180.695;
  font-weight:400; color:var(--ink-soft);
  font-size:calc(14 * var(--ut)); line-height:calc(19 * var(--ut));
}
/* Left pair hold their right edge (towards the dog), right pair their left. */
.pdp-benefit--tl{ --ax:311;     --ay:102; }
.pdp-benefit--bl{ --ax:311;     --ay:358; }
.pdp-benefit--tr{ --ax:1090.89; --ay:102; }
.pdp-benefit--br{ --ax:1091;    --ay:385; }
.pdp-benefit__title.pdp-benefit--tl{ --x:130;     --y:102; }
.pdp-benefit__copy.pdp-benefit--tl { --x:130;     --y:129; }
.pdp-benefit__title.pdp-benefit--tr{ --x:1090.89; --y:102; }
.pdp-benefit__copy.pdp-benefit--tr { --x:1090.89; --y:129; }
.pdp-benefit__title.pdp-benefit--bl{ --x:130;     --y:358; }
.pdp-benefit__copy.pdp-benefit--bl { --x:130;     --y:385; }
.pdp-benefit__title.pdp-benefit--br{ --x:1091;    --y:385; }
.pdp-benefit__copy.pdp-benefit--br { --x:1091;    --y:412; }

.pdp-benefits__arrow    { --w:58.0141; --h:58.4044; }
.pdp-benefits__arrow--tl{ --x:322.57;  --y:151.19; --r:-124.91deg; --sx:-1; }
.pdp-benefits__arrow--tr{ --x:1007.43; --y:151.4;  --r:107.11deg; --h:58.4039; }
.pdp-benefits__arrow--bl{ --x:322.57;  --y:321.26; --r:-55.09deg; }
.pdp-benefits__arrow--br{ --x:1020.54; --y:321.26; --r:55.09deg;  --sx:-1; }

/* ============================================================  TABLET  ===== */
/* No tablet comp. Portrait iPads keep the desktop pieces but stack the product
   row: side by side the info column would be ~280px wide. */
@media (min-width: 768px) and (max-width: 1023.98px){
  .pdp-hero__grid{
    grid-template-columns:minmax(0, 1fr);
    row-gap:36px;
    max-width:771px; margin-inline:auto;
  }
}

@media screen and (max-width:1024px) {

  .pdp-gallery{position: static;}
}

/* ============================================================  MOBILE  ===== */
/* The 393-wide mobile comp, for phones only (below 768). iPads and up get the
   desktop composition, with --ut keeping its copy readable. */
@media (max-width: 767.98px){

  /* --- Product --- */
  .pdp-hero{ padding-block:95px 30px; }       /* stage at y 95, lines end 995 */
  .pdp-hero__grid{
    grid-template-columns:minmax(0, 1fr);
    row-gap:21px;                              /* thumbs 487 -> info 508 */
    max-width:520px; margin-inline:auto;
  }
  .pdp-gallery{ grid-template-columns:minmax(0, 1fr); row-gap:15px; }
  .pdp-gallery__stage{ order:-1; aspect-ratio:353 / 275; }
  /* 150 x 219 at (101, 28) in the 353 x 275 stage. */
  .pdp-gallery__main[data-kind="pack"]{
    left:28.61%; top:10.18%; width:42.49%; height:79.64%;
  }

  /* A row of three 110 x 102 tiles, 12 apart — back in flow, since here the
     row's height is the tiles'. */
  .pdp-thumbs__swiper{ position:relative; inset:auto; }
  .pdp-thumbs__swiper:not(.swiper-initialized) .swiper-wrapper{
    flex-direction:row; gap:12px;
  }
  .pdp-thumbs__swiper:not(.swiper-initialized) .swiper-slide{ flex:0 0 calc((100% - 24px) / 3); }
  .pdp-thumb{ height:auto; aspect-ratio:110 / 102; }
  .pdp-thumbs__nav--prev{ left:4px; }
  .pdp-thumbs__nav--next{ right:4px; }

  .pdp-info{ padding-top:0; }
  .pdp-info__title{ font-size:26px; }
  .pdp-info__copy{ font-size:14px; }
  .pdp-accordion{ margin-top:20px; }          /* first line at y 883 */

  /* --- Shared --- */
  .pdp-title{ line-height:1.3333; }           /* 40 on 30 */
  .pdp-stage{ --vw:393; max-width:520px; }

  /* --- Inside the bowl: stage starts under the 30 + 40 title --- */
  .pdp-bowl{ padding-top:30px; }
  .pdp-bowl__stage{ aspect-ratio:393 / 610; }

  .pdp-bowl__arc-top  { --x:132.747; --y:27.497;  --w:195.621; --h:107.598; }
  .pdp-bowl__ring     { --x:70.884;  --y:34.344;  --w:258.987; --h:258.987; }
  .pdp-bowl__plate    { --x:84.37;   --y:49.27;   --w:221.946; --h:220.988; }
  .pdp-bowl__crumb    { --x:137.1;   --y:253.24;  --w:14.46;   --h:8.149; }
  .pdp-bowl__arc-left { --x:8.514;   --y:118.023; --w:166.043; --h:69.059; }
  .pdp-bowl__arc-right{ --x:121.569; --y:168.646; --w:212.018; --h:124.92; }
  .pdp-bowl__plus,
  .pdp-bowl__sparkle{ display:none; }

  .pdp-bowl__badges{ display:block; }
  .pdp-badge{
    --w:32; --h:32;
    display:grid; place-items:center; padding:0;
    border-radius:50%;
    background:var(--white); box-shadow:inset 0 0 0 1px #D0C9C1;
    color:var(--coral);
    font-weight:500; font-size:calc(14 * var(--u)); line-height:calc(18 * var(--u));
    transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .pdp-badge.is-active{ background:var(--coral); box-shadow:none; color:var(--white); }
  .pdp-badge--1{ --x:99;  --y:35; }
  .pdp-badge--2{ --x:314; --y:146; }
  .pdp-badge--3{ --x:83;  --y:243; }

  /* One note at a time: pill (121 x 30 for "01 Salmon Oil") then its copy. */
  /* Hung from its bottom edge — note 01's, at y 375.5 of the 610 stage — so
     note 01 sits exactly where the comp has it (top 335) and a taller note
     grows upward into the free band under the arcs, not down into the husky. */
  .pdp-abs.pdp-bowl__notes{
    --x:20; --w:353;
    position:absolute; top:auto; height:auto;
    bottom:calc(234.5 * var(--u));
  }
  .pdp-note{ display:none; }
  /* The comp only draws note 01: copy beside the pill, 198 wide. Beside it only
     while it gets those 198px; the longer 02/03 pills leave ~135, and squeezed
     that thin the copy ran down onto the husky — so it drops under the pill
     and takes the full width instead. */
  .pdp-note.is-active{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    column-gap:calc(18 * var(--u)); row-gap:calc(8 * var(--u));
  }
  .pdp-note .pdp-abs{ position:static; width:auto; height:auto; transform:none; }
  .pdp-note .pdp-note__pill{
    flex:0 0 auto;
    height:calc(30 * var(--u)); margin-top:calc(4 * var(--u));
    /* 13 in front of the number; 16 after the label lands "01 Salmon Oil" on
       the comp's 121px with Intelo as the browser draws it. */
    padding:0 calc(16 * var(--u)) 0 calc(13 * var(--u));
    font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u));
  }
  .pdp-note__num{
    display:inline;
    margin-right:calc(11 * var(--u));
    font-weight:500; font-size:calc(12 * var(--u)); line-height:calc(18 * var(--u));
  }
  .pdp-note .pdp-note__copy{
    flex:1 1 calc(198 * var(--u)); min-width:0;
    font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u));
  }

  .pdp-bowl__scribble{
    --x:38.599; --y:425.788; --w:93.469;
    font-size:calc(20 * var(--u)); line-height:calc(24 * var(--u));
  }
  .pdp-bowl__arrow{ --x:99.77; --y:470.05; --r:150deg; }
  .pdp-bowl__husky{ --x:117;   --y:396;    --w:197; --h:214; }

  /* --- Balanced diet: glow is plain white on mobile (no overlay) --- */
  .pdp-diet__stage{ aspect-ratio:393 / 626; }
  .pdp-diet__glow  { --x:-293.99; --y:-40.99; --w:981;     --h:981; }
  .pdp-diet__husky { --x:20;      --y:376;    --w:353;     --h:250; }
  .pdp-diet__bubble{ --x:107.01;  --y:250;    --w:211.627; --h:126.283; }
  .pdp-diet__its{
    --x:155.62; --y:274; --w:111;
    font-size:calc(16 * var(--u)); line-height:calc(28.007 * var(--u));
  }
  .pdp-diet__balanced{
    --x:126.62; --y:291; --w:163;
    font-size:calc(22 * var(--u)); line-height:calc(41.111 * var(--u));
  }
  .pdp-diet__note--l { --x:179;    --y:46; }
  .pdp-diet__note--r { --x:-8.8;   --y:113; }
  .pdp-diet__arrow--l{ --x:320.06; --y:97.57; }
  .pdp-diet__arrow--r{ --x:-4.855; --y:185.22; }

  /* --- Big benefits: art up top, numbered list under it --- */
  .pdp-benefits{ padding-block:30px 46px; background:#F6F1EA; }
  .pdp-benefits__stop{ display:none; }        /* no full stop in the mobile title */
  .pdp-benefits__stage{ aspect-ratio:auto; }
  .pdp-benefits__art{ position:relative; aspect-ratio:393 / 300; }

  .pdp-benefits__dog   { --x:5;       --y:28.86;  --w:233.758; --h:257.734; }
  .pdp-benefits__shadow{ --x:233.116; --y:266.25; --w:127.876; --h:24.347; }
  .pdp-benefits__pack  { --x:233.85;  --y:109.85; --w:121.915; --h:177.294; }
  .pdp-benefits__arrows{ display:none; }

  /* Items 97 apart from y 320: 20 title + 7 + two 19px lines + 32 gap. */
  .pdp-benefits__list{
    display:grid; gap:32px;
    margin-top:20px; padding-inline:20px;
  }
  .pdp-benefit{
    display:grid; grid-template-columns:29px minmax(0, 1fr);
    align-items:start;
  }
  .pdp-benefit .pdp-abs{ position:static; width:auto; height:auto; transform:none; }
  .pdp-benefit__num{
    display:block; grid-row:1;
    font-size:14px; font-weight:500; line-height:18px; color:var(--coral);
  }
  .pdp-benefit .pdp-benefit__title{
    grid-column:2;
    font-size:16px; line-height:20px; white-space:normal;
  }
  .pdp-benefit .pdp-benefit__copy{
    grid-column:2;
    margin-top:7px; max-width:291px;
    font-size:14px; line-height:19px;
  }
}