/*
================================================================
Space Vanta Theme 2.0
Module: PDP Note band + selling points band
Path: public/pdp/note.css
Version: PDP-NOTE-100

Note: ingredients / nutrition / allergens / evidence as small tiles
(paper 44 / silver 34 / gunmetal 16 / blue 6). The allergen tile is
the dark one and goes first on a phone. Selling points: numbered
faces (paper 70 / silver 20 / blue 6).
================================================================
*/

.sv-product__details,
.sv-product__details *,
.sv-product__details *::before,
.sv-product__details *::after { box-sizing: border-box; }

.sv-product__details {
  --pd-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pd-cut: 12px;
  margin-top: clamp(48px, 6vw, 88px); scroll-margin-top: 100px;
  color: var(--svd-ink, #252321);
}
html .sv-product__details::before,
html .sv-product__details::after { content: none; display: none; }
html .sv-product__details-content { display: grid; gap: clamp(40px, 5vw, 72px); padding: 0; }
html .sv-product__details-content > * { margin: 0; }

/* shared section head: eyebrow / title / seam */
.sv-pdd__head, .sv-pdn__head { position: relative; padding-bottom: 16px; margin-bottom: 22px; }
.sv-pdd__eyebrow, .sv-pdn__eyebrow {
  display: block; margin-bottom: 8px;
  font-family: var(--pd-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--svd-seam, #1d6bff);
}
.sv-pdd__title, .sv-pdn__title { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.sv-pdd__seam, .sv-pdn__seam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(var(--svd-line), var(--svd-line)) 0 50% / 100% 1px no-repeat;
}
.sv-pdd__seam::after, .sv-pdn__seam::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 148px; height: 2px;
  background: var(--svd-seam-line); transform-origin: left; animation: svd-seam-in .9s cubic-bezier(.2,.8,.2,1) both;
}

/* ---------------- selling points ---------------- */

.sv-pdd__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px;
  counter-reset: pdd;
}
.sv-pdd__point {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 20px 18px 18px;
  counter-increment: pdd;
  background: var(--svd-paper); border: 1px solid var(--svd-line);
  clip-path: polygon(var(--pd-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pd-cut));
}
.sv-pdd__face {
  position: relative; width: 44px; height: 44px;
  background: var(--svd-face-light);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--svd-hair);
}
.sv-pdd__face::before {
  content: "0" counter(pdd);
  position: absolute; left: 7px; top: 6px;
  font-family: var(--pd-mono); font-size: 12px; font-weight: 700; color: var(--svd-g700);
}
.sv-pdd__face::after {   /* glowing seam on the cut corner */
  content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 2px;
  background: linear-gradient(90deg, rgba(125,173,222,0), #e5ffff 55%, #1d6bff);
  transform: translate(2px, -11px) rotate(-45deg); transform-origin: right bottom;
}
.sv-pdd__text { font-size: 15.5px; line-height: 1.55; font-weight: 600; padding-top: 2px; }

.sv-pdd__more { margin-top: 22px; border-top: 1px solid var(--svd-line); }
.sv-pdd__more-trigger {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; font-family: var(--pd-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.sv-pdd__more-trigger::-webkit-details-marker { display: none; }
.sv-pdd__more-trigger i {
  position: relative; width: 20px; height: 20px; border: 1.5px solid var(--svd-seam); transform: rotate(45deg);
  transition: background .2s ease;
}
.sv-pdd__more-trigger i::before, .sv-pdd__more-trigger i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: var(--svd-seam);
  transform: translate(-50%, -50%) rotate(-45deg); transition: transform .25s ease, background .2s ease;
}
.sv-pdd__more-trigger i::after { transform: translate(-50%, -50%) rotate(45deg); }
.sv-pdd__more[open] .sv-pdd__more-trigger i { background: var(--svd-seam); }
.sv-pdd__more[open] .sv-pdd__more-trigger i::before,
.sv-pdd__more[open] .sv-pdd__more-trigger i::after { background: #fff; }
.sv-pdd__more[open] .sv-pdd__more-trigger i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sv-pdd__more-trigger:hover i { background: rgba(29,107,255,.08); }
.sv-pdd__more-trigger:focus-visible { outline: 2px solid var(--svd-seam); outline-offset: 2px; }
.sv-pdd__body { padding: 4px 2px 8px; max-width: 76ch; font-size: 15px; line-height: 1.75; color: #3a352f; }
.sv-pdd__body img { max-width: 100%; height: auto; }
.sv-pdd__points:empty { display: none; }
.sv-pdd__points:empty + .sv-pdd__more { margin-top: 0; border-top: 0; }

/* ---------------- note: three boards ---------------- */

.sv-pdn { position: relative; min-width: 0; }
.sv-pdn[data-empty="true"] { display: none; }
.sv-pdn__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sv-pdn__board {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 16px 18px 18px; text-align: left; cursor: pointer;
  border: 0; border-radius: 0; color: var(--svd-ink, #252321); font: inherit;
  background: var(--svd-paper); box-shadow: inset 0 0 0 1px var(--svd-line);
  clip-path: polygon(var(--pd-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pd-cut));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
}
.sv-pdn__board::before { content: ""; position: absolute; left: var(--pd-cut); right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #dbd9da, #f1edea 50%, #c1bdbe); }
.sv-pdn__board::after { content: ""; position: absolute; left: var(--pd-cut); top: 0; width: 56px; height: 3px; background: var(--svd-seam-line); }
.sv-pdn__board:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--svd-seam, #1d6bff); }
.sv-pdn__board:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 3px; }

.sv-pdn__bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sv-pdn__glyph {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--svd-g800, #33363d);
  background: var(--svd-face-light); box-shadow: inset 0 0 0 1px var(--svd-hair, #fff); clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%);
}
.sv-pdn__glyph svg { width: 21px; height: 21px; }
.sv-pdn__board-t { flex: 1; min-width: 0; font-family: var(--pd-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.sv-pdn__board-go { position: relative; flex: none; width: 18px; height: 18px; }
.sv-pdn__board-go::before, .sv-pdn__board-go::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--svd-seam, #1d6bff); transition: transform .25s ease; }
.sv-pdn__board-go::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.sv-pdn__board-go::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.sv-pdn__board:hover .sv-pdn__board-go::after { transform: translate(-50%, -50%) rotate(90deg); }

/* what each board shows without opening it */
.sv-pdn__prev { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 14px; line-height: 1.4; }
.sv-pdn__k, .sv-pdn__ing em, .sv-pdn__count { font-family: var(--pd-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.sv-pdn__none { font-size: 13.5px; color: #8a8378; }
.sv-pdn__ok { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.sv-pdn__ok b { width: 9px; height: 9px; flex: none; background: var(--svd-ice, #e5ffff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sv-pdn__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pdn__tags i { font-style: normal; padding: 6px 11px; font-size: 13px; font-weight: 700; line-height: 1.2; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }

/* 1 · Allergens: the warning plate (gunmetal, hatched edge, ice text) */
.sv-pdn__board--allergens { background: var(--svd-face-deep); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); padding-left: 24px; }
.sv-pdn__board--allergens::before { background: linear-gradient(90deg, #525864, #616570 50%, #3f4553); }
.sv-pdn__board--allergens > .sv-pdn__bar + .sv-pdn__prev { margin-top: 0; }
.sv-pdn__board--allergens::selection { background: transparent; }
.sv-pdn__board--allergens .sv-pdn__glyph { color: var(--svd-ice, #e5ffff); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.sv-pdn__board--allergens .sv-pdn__k { color: var(--svd-edge, #7dadde); }
.sv-pdn__board--allergens .sv-pdn__prev { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sv-pdn__tags--warn i { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.sv-pdn__board--allergens .sv-pdn__none { color: rgba(255,255,255,.6); }
.sv-pdn__board--allergens:hover { box-shadow: inset 0 0 0 1px var(--svd-ice, #e5ffff); }
.sv-pdn__board--allergens .sv-pdn__board-go::before, .sv-pdn__board--allergens .sv-pdn__board-go::after { background: var(--svd-ice, #e5ffff); }
.sv-pdn__board--allergens > .sv-pdn__bar { position: relative; }
.sv-pdn__board--allergens::after { background: repeating-linear-gradient(135deg, rgba(229,255,255,.5) 0 2px, transparent 2px 7px); width: 14px; left: 0; top: var(--pd-cut); bottom: 0; height: auto; }

/* 2 · Ingredients & nutrition: a label sheet (ruled rows, mono values) */
.sv-pdn__board--label { background: var(--svd-paper); }
.sv-pdn__board--label .sv-pdn__prev { gap: 12px; }
.sv-pdn__rows { display: block; padding-top: 4px; border-top: 3px double #252321; }
.sv-pdn__rows > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--svd-line, #ddd6c9); font-size: 13.5px; }
.sv-pdn__rows em { font-style: normal; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pdn__rows b { font-family: var(--pd-mono); font-weight: 700; white-space: nowrap; }
.sv-pdn__ing { font-size: 13px; line-height: 1.5; color: var(--svd-muted, #5f574d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-pdn__ing em { margin-right: 6px; color: var(--svd-ink, #252321); }

/* 3 · Certified: seals + document sheets (silver metal face) */
.sv-pdn__board--certs { background: var(--svd-face-soft, #efebe8); }
.sv-pdn__board--certs .sv-pdn__glyph { color: #fff; background: var(--svd-face-steel, #485d7c); box-shadow: none; }
.sv-pdn__tags--cert i { color: #fff; background: var(--svd-face-steel, #485d7c); font-family: var(--pd-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sv-pdn__sheets { display: flex; align-items: flex-end; gap: 0; min-height: 70px; }
.sv-pdn__sheet {
  position: relative; display: block; width: 52px; height: 66px; margin-right: -14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #cfd5de, 4px 4px 0 #c9d0da;
  transform: translateY(calc(var(--i) * -3px)); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background-image: repeating-linear-gradient(0deg, #e5e9ef 0 1px, transparent 1px 9px);
}
.sv-pdn__sheet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.sv-pdn__sheet.has-img img { opacity: 1; }
.sv-pdn__count { margin: 0 0 4px 26px; align-self: flex-end; color: var(--svd-muted, #5f574d); }

/* nothing entered for this product: calm and dashed, still opens (the popup says so) */
.sv-pdn__board[data-has="0"] { background: transparent; color: var(--svd-muted, #5f574d); box-shadow: none; outline: 1px dashed #c9c4bb; outline-offset: -1px; }
.sv-pdn__board[data-has="0"]::before, .sv-pdn__board[data-has="0"]::after { display: none; }
.sv-pdn__board[data-has="0"] .sv-pdn__glyph { color: #a39d93; background: #efebe8; box-shadow: none; }
.sv-pdn__board[data-has="0"] .sv-pdn__none { color: #8a8378; }
.sv-pdn__board[data-has="0"] .sv-pdn__board-go::before, .sv-pdn__board[data-has="0"] .sv-pdn__board-go::after { background: var(--svd-seam, #1d6bff); }
.sv-pdn__board[data-has="0"]:hover { outline-color: var(--svd-seam, #1d6bff); background: #fff; }
.sv-pdn__foot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--svd-muted); }

/* ---------------- note: popup ---------------- */

body.sv-pdn-open { overflow: hidden; }
.sv-pdn-modal {
  --pd-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  position: fixed; inset: 0; z-index: 9998; visibility: hidden; pointer-events: none;
}
.sv-pdn-modal, .sv-pdn-modal *, .sv-pdn-modal *::before, .sv-pdn-modal *::after { box-sizing: border-box; }
.sv-pdn-modal[hidden] { display: none; }
.sv-pdn-modal.is-active { visibility: visible; pointer-events: auto; }
.sv-pdn-modal__overlay { position: absolute; inset: 0; background: rgba(31, 35, 43, .5); opacity: 0; transition: opacity .3s ease; }
.sv-pdn-modal.is-active .sv-pdn-modal__overlay { opacity: 1; }
.sv-pdn-modal__dialog {
  position: absolute; left: 50%; top: 50%; width: min(720px, calc(100vw - 56px));
  transform: translate(-50%, -46%); opacity: 0; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.sv-pdn-modal.is-active .sv-pdn-modal__dialog { transform: translate(-50%, -50%); opacity: 1; }
.sv-pdn-modal__plane {   /* the plate behind: hard offset, hatched, no blur */
  position: absolute; inset: 0; transform: translate(14px, 14px); opacity: 0; transition: opacity .3s ease .12s, transform .42s cubic-bezier(.2,.8,.2,1) .06s;
  background: repeating-linear-gradient(135deg, #aeb6c2 0 1px, transparent 1px 6px), #dfe3e9;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
.sv-pdn-modal.is-active .sv-pdn-modal__plane { opacity: 1; }
.sv-pdn-modal__sheet {
  position: relative; display: flex; flex-direction: column; min-height: min(460px, calc(100vh - 72px)); max-height: min(720px, calc(100vh - 72px)); background: var(--svd-paper, #fbf7f0);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
.sv-pdn-modal__head {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 20px 28px;
  background: var(--svd-face-deep, #313540); color: #fff;
}
.sv-pdn-modal__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }
.sv-pdn-modal__eyebrow { display: block; margin-bottom: 8px; font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-edge, #7dadde); }
.sv-pdn-modal__title { margin: 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.sv-pdn-modal__close {
  position: relative; flex: none; width: 38px; height: 38px; margin: 0; padding: 0; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 0; transition: border-color .2s, transform .25s;
}
.sv-pdn-modal__close i::before, .sv-pdn-modal__close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.sv-pdn-modal__close i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sv-pdn-modal__close:hover { border-color: var(--svd-ice, #e5ffff); transform: rotate(90deg); }
.sv-pdn-modal__close:focus-visible { outline: 2px solid var(--svd-ice, #e5ffff); outline-offset: 2px; }

.sv-pdn-modal__tabs { display: flex; gap: 0; padding: 0 12px 0 20px; background: var(--svd-face-soft, #efebe8); box-shadow: inset 0 -1px 0 var(--svd-line, #ddd6c9); overflow-x: auto; scrollbar-width: none; }
.sv-pdn-modal__tabs::-webkit-scrollbar { display: none; }
.sv-pdn-modal__tabs button {
  position: relative; flex: none; margin: 0; padding: 15px 16px 13px; cursor: pointer; border: 0; border-radius: 0; background: transparent; color: var(--svd-muted, #5f574d);
  font-family: var(--pd-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.sv-pdn-modal__tabs button::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--svd-seam, #1d6bff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); vertical-align: 1px; }
.sv-pdn-modal__tabs button[data-has="0"]::before { background: #c9c4bb; }
.sv-pdn-modal__tabs button:hover { color: var(--svd-ink, #252321); }
.sv-pdn-modal__tabs button.is-on { color: var(--svd-ink, #252321); background: var(--svd-paper, #fbf7f0); }
.sv-pdn-modal__tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }
.sv-pdn-modal__tabs button:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: -2px; }

.sv-pdn-modal__body { flex: 1; min-height: 0; padding: 24px 28px 28px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sv-pdn-modal__foot { padding: 12px 28px 14px; font-size: 12px; line-height: 1.55; color: var(--svd-muted, #5f574d); background: var(--svd-paper-2, #f7f2e8); border-top: 1px solid var(--svd-line, #ddd6c9); }

.sv-pdn-sub { margin: 0 0 12px; font-family: var(--pd-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--svd-g700, #43464e); }
.sv-pdn-sub:not(:first-child) { margin-top: 26px; }
.sv-pdn-chips, .sv-pdn-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-pdn-chips li {
  padding: 8px 13px; font-size: 14px; font-weight: 600; line-height: 1.2; background: var(--svd-face-light); box-shadow: inset 0 0 0 1px var(--svd-hair), 0 0 0 1px #d6d1c8;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
.sv-pdn-chips--warn li { background: var(--svd-face-deep); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sv-pdn-badges li {
  position: relative; padding: 8px 13px 8px 28px; font-family: var(--pd-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--svd-face-steel, #485d7c);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
.sv-pdn-badges li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: #e5ffff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sv-pdn-none { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; font-size: 14.5px; font-weight: 600; background: var(--svd-face-light); box-shadow: inset 2px 0 0 var(--svd-seam, #1d6bff); }
.sv-pdn-none i { width: 10px; height: 10px; flex: none; background: var(--svd-seam, #1d6bff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sv-pdn-facts { margin: 0; }
.sv-pdn-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--svd-line, #ddd6c9); font-size: 14.5px; }
.sv-pdn-facts > div:first-child { border-top: 0; padding-top: 0; }
.sv-pdn-facts dt { margin: 0; font-weight: 500; }
.sv-pdn-facts dd { margin: 0; font-family: var(--pd-mono); font-weight: 700; white-space: nowrap; }

.sv-pdn-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.sv-pdn-shots:first-child { margin-top: 0; }
.sv-pdn-shots li { min-width: 0; }
.sv-pdn-shot {
  position: relative; display: block; width: 100%; margin: 0; padding: 8px; border: 0; border-radius: 0; cursor: zoom-in;
  background: var(--svd-face-light); box-shadow: inset 0 0 0 1px var(--svd-hair), 0 0 0 1px #d6d1c8;
}
.sv-pdn-shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; background: #fff; }
.sv-pdn-shot__zoom { position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px; background: var(--svd-g900, #1f232b); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
.sv-pdn-shot__zoom::before, .sv-pdn-shot__zoom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.sv-pdn-shot__zoom::after { transform: translate(-50%, -50%) rotate(90deg); }
.sv-pdn-shot:hover { box-shadow: inset 0 0 0 1px var(--svd-seam), 0 0 0 1px var(--svd-seam); }
.sv-pdn-shot:focus-visible { outline: 2px solid var(--svd-seam); outline-offset: 3px; }
.sv-pdn-shot__cap { display: grid; gap: 3px; padding: 10px 2px 0; font-size: 13px; line-height: 1.45; }
.sv-pdn-shot__cap b { font-weight: 700; }
.sv-pdn-shot__cap span { color: var(--svd-muted, #5f574d); }
.sv-pdn-shot__cap em { font-style: normal; font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--svd-g600, #616570); }

.sv-pdn-empty { display: grid; place-items: center; gap: 14px; padding: 36px 12px; text-align: center; }
.sv-pdn-empty i { width: 40px; height: 40px; border: 1.5px dashed #aab3c1; transform: rotate(45deg); }
.sv-pdn-empty p { max-width: 34ch; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--svd-muted, #5f574d); }

.sv-pdn-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(31, 35, 43, .88); }
.sv-pdn-lightbox[hidden] { display: none; }
.sv-pdn-lightbox__img { max-width: min(960px, 100%); max-height: 100%; background: #fff; box-shadow: 0 0 0 1px #e5ffff; }
.sv-pdn-lightbox__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); background: var(--svd-g900, #1f232b); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

@media (max-width: 899px) {
  .sv-pdd__points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 749px) {
  .sv-product__details { margin-top: 32px; }
  html .sv-product__details-content { gap: 34px; }
  .sv-pdd__point { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 12px; }
  .sv-pdd__face { width: 36px; height: 36px; }
  .sv-pdd__face::before { left: 5px; top: 5px; font-size: 11px; }
  .sv-pdd__text { font-size: 14.5px; }

  /* boards: allergens full width, label + certified side by side */
  .sv-pdn__boards { gap: 10px; }
  .sv-pdn__board { padding: 14px 12px 14px; gap: 12px; }
  .sv-pdn__board--allergens { padding-left: 20px; }
  .sv-pdn__board:hover { transform: none; }
  .sv-pdn__glyph { width: 30px; height: 30px; }
  .sv-pdn__glyph svg { width: 18px; height: 18px; }
  .sv-pdn__board-t { font-size: 10.5px; letter-spacing: .06em; }
  .sv-pdn__rows > span { font-size: 12.5px; padding: 5px 0; }
  .sv-pdn__sheet { width: 44px; height: 56px; margin-right: -12px; }
  .sv-pdn__count { margin-left: 22px; }
  .sv-pdn__foot { margin-top: 12px; }

  /* popup: a bottom sheet */
  .sv-pdn-modal__dialog { left: 0; top: auto; bottom: 0; width: 100%; transform: translateY(100%); opacity: 1; }
  .sv-pdn-modal.is-active .sv-pdn-modal__dialog { transform: none; }
  .sv-pdn-modal__plane { display: none; }
  .sv-pdn-modal__sheet { min-height: min(58vh, 460px); max-height: 88vh; clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%); }
  .sv-pdn-modal__head { padding: 20px 16px 16px 20px; }
  .sv-pdn-modal__tabs { padding: 0 8px 0 12px; }
  .sv-pdn-modal__tabs button { padding: 14px 12px 12px; }
  .sv-pdn-modal__body { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .sv-pdn-modal__foot { padding: 10px 20px calc(12px + env(safe-area-inset-bottom)); }
  .sv-pdn-shots { grid-template-columns: minmax(0, 1fr); }
}
html[data-sv-motion="calm"] .sv-pdd__seam::after, html[data-sv-motion="calm"] .sv-pdn__seam::after,
html[data-sv-motion="calm"] .sv-pdn-modal__dialog, html[data-sv-motion="calm"] .sv-pdn-modal__plane { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sv-pdd__seam::after, .sv-pdn__seam::after, .sv-pdn-modal__dialog, .sv-pdn-modal__plane { animation: none !important; transition: none !important; } }

/* v005: no allergen tag = no Allergens board / pill / tab */
.sv-pdn__board[hidden], .sv-pdn-modal__tabs [hidden], .pdf__pill[hidden] { display: none; }
.sv-pdn-text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--svd-ink, #252321); overflow-wrap: anywhere; }

/* ================================================================
   PDP-NOTE-007  ·  balance, label-style popup, dedicated phone design
   ================================================================ */

/* ---------- desktop: the Note slot fills its row, no empty corners ---------- */
@media (min-width: 900px) {
  .pdb__slot--note { display: flex; flex-direction: column; }
  .pdb__slot--note > .sv-pdn { flex: 1; display: flex; flex-direction: column; }
  .sv-pdn__boards { flex: 1; grid-template-rows: auto minmax(0, 1fr); }
  .sv-pdn__board--label, .sv-pdn__board--certs { min-height: 200px; }
  .sv-pdn__prev { flex: 1; }
  .sv-pdn__sheets { margin-top: auto; }
  .sv-pdn__foot { margin-top: 14px; }
}

/* "May contain" = cross-contact: same shape as Contains, but hollow + hatched so the two never read alike */
.sv-pdn__tags--may i { color: rgba(255,255,255,.88); background: repeating-linear-gradient(135deg, rgba(229,255,255,.16) 0 1px, transparent 1px 6px); box-shadow: inset 0 0 0 1px rgba(229,255,255,.34); font-weight: 600; }
.sv-pdn-chips--may li { background: repeating-linear-gradient(135deg, rgba(137,140,149,.2) 0 1px, transparent 1px 6px), var(--svd-paper, #fbf7f0); box-shadow: inset 0 0 0 1px #aeb6c2; font-weight: 600; }
.sv-pdn__board--allergens .sv-pdn__prev { align-items: center; }
.sv-pdn__board--allergens .sv-pdn__k + .sv-pdn__tags { margin-right: 6px; }
.sv-pdn-sub small { margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--svd-muted, #5f574d); }

/* ---------- popup: faster, label-like ---------- */
.sv-pdn-modal__dialog { transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .16s ease; }
.sv-pdn-modal__overlay { transition: opacity .18s ease; }
.sv-pdn-modal__plane { transition: opacity .2s ease .04s, transform .26s cubic-bezier(.2,.8,.2,1); }
.sv-pdn-modal__dialog { width: min(760px, calc(100vw - 56px)); }
.sv-pdn-modal__body[data-panel] { animation: sv-pdn-in .2s ease both; }
@keyframes sv-pdn-in { from { opacity: .0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* images: the small file shows at once, the sharp one fades over it */
.sv-pdn-shot { min-height: 180px; display: grid; place-items: center; background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; }
.sv-pdn-shot img { background: transparent; opacity: 0; transition: opacity .18s ease; }
.sv-pdn-shot img.is-in { opacity: 1; background: #fff; }

/* nutrition rows in the popup read like a printed panel */
.sv-pdn-facts { border-top: 3px double #252321; padding-top: 10px; }
.sv-pdn-facts > div:first-child { padding-top: 0; }
.sv-pdn-facts > div:first-child dt, .sv-pdn-facts > div:first-child dd { font-weight: 800; }

/* certificates: issuer + reference, so a badge can be checked */
.sv-pdn-certs { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sv-pdn-certs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 14px; background: var(--svd-face-light); box-shadow: inset 2px 0 0 var(--svd-seam, #1d6bff), 0 0 0 1px #d6d1c8; }
.sv-pdn-certs b { grid-column: 1; font-size: 14.5px; font-weight: 700; }
.sv-pdn-certs span { grid-column: 1; font-size: 13px; color: var(--svd-muted, #5f574d); }
.sv-pdn-certs em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--pd-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--svd-g600, #616570); }

/* checked-on stamp + "ask us" */
.sv-pdn-modal__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 28px; background: var(--svd-face-soft, #efebe8); border-top: 1px solid var(--svd-line, #ddd6c9); }
.sv-pdn-modal__stamp { font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--svd-muted, #5f574d); }
.sv-pdn-modal__ask { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; background: var(--svd-face-steel, #485d7c); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); transition: background .2s ease; }
.sv-pdn-modal__ask:hover { background: var(--svd-seam, #1d6bff); }
.sv-pdn-modal__ask:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }

/* lightbox: tap = 2x, drag to pan (pinch also works) */
.sv-pdn-lightbox { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.sv-pdn-lightbox__img { cursor: zoom-in; margin: auto; }
.sv-pdn-lightbox.is-zoom { align-items: flex-start; justify-content: flex-start; }
.sv-pdn-lightbox.is-zoom .sv-pdn-lightbox__img { max-width: none; max-height: none; width: 210%; cursor: zoom-out; }

/* ---------- phone: a design of its own, not the desktop shrunk ---------- */
@media (max-width: 749px) {
  /* three rows (icon · title · one-line fact · chevron), allergens first and darkest */
  .sv-pdn__boards { display: flex; flex-direction: column; gap: 8px; }
  .sv-pdn__board {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; grid-template-areas: "g t go" "g p p";
    column-gap: 12px; row-gap: 5px; align-items: center; min-height: 68px; padding: 12px 14px 12px 12px;
  }
  .sv-pdn__board--allergens { padding-left: 20px; }
  .sv-pdn__bar { display: contents; }
  .sv-pdn__glyph { grid-area: g; align-self: start; width: 40px; height: 40px; }
  .sv-pdn__glyph svg { width: 22px; height: 22px; }
  .sv-pdn__board-t { grid-area: t; align-self: end; font-size: 11px; letter-spacing: .08em; }
  .sv-pdn__board-go { grid-area: go; align-self: center; }
  .sv-pdn__prev { grid-area: p; align-self: start; gap: 6px; font-size: 13px; }
  .sv-pdn__board:active { transform: scale(.992); }
  .sv-pdn__board--allergens .sv-pdn__prev { gap: 6px 8px; }
  .sv-pdn__tags i { padding: 5px 9px; font-size: 12.5px; }
  .sv-pdn__rows { padding-top: 2px; }
  .sv-pdn__rows > span:nth-child(n+3) { display: none; }
  .sv-pdn__ing { -webkit-line-clamp: 1; }
  .sv-pdn__sheets { min-height: 0; align-items: center; }
  .sv-pdn__sheet { width: 30px; height: 38px; margin-right: -8px; transform: none; box-shadow: 0 0 0 1px #cfd5de, 2px 2px 0 #c9d0da; }
  .sv-pdn__count { margin: 0 0 0 18px; align-self: center; }
  .sv-pdn__foot { margin-top: 12px; font-size: 12px; }

  /* the popup: a bottom sheet with a grip, three equal tabs, thumb-sized controls */
  .sv-pdn-modal__dialog { width: 100%; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .sv-pdn-modal__sheet { max-height: 92vh; min-height: min(62vh, 520px); }
  .sv-pdn-modal__head { padding: 22px 12px 14px 20px; }
  .sv-pdn-modal__head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 3px; margin-left: -20px; background: rgba(255,255,255,.34); }
  .sv-pdn-modal__title { font-size: 17px; }
  .sv-pdn-modal__close { width: 44px; height: 44px; }
  .sv-pdn-modal__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; overflow: visible; }
  .sv-pdn-modal__tabs button { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 6px; font-size: 10px; line-height: 1.25; letter-spacing: .05em; text-align: center; white-space: normal; }
  .sv-pdn-modal__tabs button::before { display: none; }
  .sv-pdn-modal__tabs button[data-has="0"] { opacity: .55; }
  .sv-pdn-modal__body { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .sv-pdn-chips li { padding: 9px 13px; font-size: 14.5px; }
  .sv-pdn-facts > div { padding: 12px 0; }
  .sv-pdn-certs li { grid-template-columns: minmax(0, 1fr); }
  .sv-pdn-certs em { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 3px; }
  .sv-pdn-shots { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sv-pdn-shot { min-height: 150px; }
  .sv-pdn-modal__meta { flex-direction: column; align-items: stretch; padding: 12px 18px; }
  .sv-pdn-modal__ask { justify-content: center; min-height: 48px; font-size: 14px; }
  .sv-pdn-modal__foot { padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
  .sv-pdn-lightbox { padding: 12px; }
  .sv-pdn-lightbox__close { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 48px; height: 48px; position: fixed; }
}

html[data-sv-motion="calm"] .sv-pdn-modal__body[data-panel] { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sv-pdn-modal__body[data-panel] { animation: none !important; } .sv-pdn-shot img { transition: none; } }


/* ================================================================
   PDP-NOTE-100  ·  five panels, designed allergen states
   ================================================================ */

/* ---------- boards: allergens full row, the rest two by two, an odd one spans ---------- */
.sv-pdn__board--allergens, .sv-pdn__board.is-wide { grid-column: 1 / -1; }
.sv-pdn__board[hidden] { display: none; }
@media (min-width: 900px) {
  .sv-pdn__boards { grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); }
}
.sv-pdn__board--materials { background: var(--svd-paper); }
.sv-pdn__board--report { background: var(--svd-face-soft, #efebe8); }
.sv-pdn__board--report .sv-pdn__glyph { color: #fff; background: var(--svd-face-steel, #485d7c); box-shadow: none; }
.sv-pdn__board--materials .sv-pdn__rows em { white-space: normal; }

/* ---------- allergens: three states, each with its own plate ---------- */
.sv-pdn__board--allergens .sv-pdn__prev { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* none declared: the quiet "all clear" plate (ice seam, check diamond) */
.sv-pdn__board--allergens[data-state="none"] .sv-pdn__ok { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.sv-pdn__board--allergens[data-state="none"] .sv-pdn__ok b { width: 12px; height: 12px; background: var(--svd-ice, #e5ffff); box-shadow: 0 0 0 3px rgba(229,255,255,.16); }
.sv-pdn__board--allergens[data-state="none"]::before { background: linear-gradient(90deg, #7dadde, #e5ffff 40%, #1d6bff 70%, transparent); }

/* nothing entered: dashed, light, and clearly NOT a clearance */
.sv-pdn__board--allergens[data-state="unset"] { background: transparent; color: var(--svd-ink, #252321); box-shadow: none; outline: 1px dashed #aab3c1; outline-offset: -1px; }
.sv-pdn__board--allergens[data-state="unset"]::before, .sv-pdn__board--allergens[data-state="unset"]::after { display: none; }
.sv-pdn__board--allergens[data-state="unset"] .sv-pdn__glyph { color: var(--svd-ink, #252321); background: #efebe8; box-shadow: none; }
.sv-pdn__board--allergens[data-state="unset"] .sv-pdn__board-go::before, .sv-pdn__board--allergens[data-state="unset"] .sv-pdn__board-go::after { background: var(--svd-seam, #1d6bff); }
.sv-pdn__board--allergens[data-state="unset"]:hover { outline-color: var(--svd-seam, #1d6bff); background: #fff; box-shadow: none; }
.sv-pdn__unset { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--svd-ink, #252321); }
.sv-pdn__unset b { width: 9px; height: 9px; flex: none; border: 1.5px dashed #6f7683; transform: rotate(45deg); }

/* popup: the three allergen plates */
.sv-pdn-clear, .sv-pdn-unset { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px 18px 18px; }
.sv-pdn-clear { color: #fff; background: var(--svd-face-deep, #313540); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); position: relative; }
.sv-pdn-clear::after { content: ""; position: absolute; left: 14px; right: 0; top: 0; height: 2px; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }
.sv-pdn-clear i { position: relative; width: 44px; height: 44px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%); }
.sv-pdn-clear i::before { content: ""; position: absolute; left: 14px; top: 11px; width: 10px; height: 18px; border: solid var(--svd-ice, #e5ffff); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sv-pdn-clear b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sv-pdn-clear span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.sv-pdn-unset { background: transparent; outline: 1px dashed #aab3c1; outline-offset: -1px; }
.sv-pdn-unset i { width: 40px; height: 40px; border: 1.5px dashed #8a93a2; transform: rotate(45deg) scale(.72); justify-self: center; }
.sv-pdn-unset b { display: block; font-size: 16px; font-weight: 800; }
.sv-pdn-unset span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--svd-muted, #5f574d); }
.sv-pdn-fixed { margin: 22px 0 0; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--svd-muted, #5f574d); background: var(--svd-face-soft, #efebe8); box-shadow: inset 2px 0 0 var(--svd-edge, #7dadde); }
.sv-pdn-fixed b { display: block; margin-bottom: 3px; font-family: var(--pd-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--svd-g700, #43464e); }

/* materials / care / test reports */
.sv-pdn-facts--text dd { white-space: normal; text-align: right; font-family: inherit; font-weight: 600; }
.sv-pdn-care { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-pdn-care li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; }
.sv-pdn-care li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; background: var(--svd-seam, #1d6bff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sv-pdn-certs--test li { box-shadow: inset 2px 0 0 var(--svd-steel, #485d7c), 0 0 0 1px #d6d1c8; }
.sv-pdn-certs--test em { text-align: right; }

/* tabs: 1-3 share the row, more than that scroll */
.sv-pdn-modal__tabs button[hidden] { display: none; }
.sv-pdn-modal__tabs[data-n="1"] { display: none; }

@media (max-width: 749px) {
  .sv-pdn-modal__tabs[data-n="2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-pdn-modal__tabs[data-n="4"], .sv-pdn-modal__tabs[data-n="5"] { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sv-pdn-modal__tabs[data-n="4"] button, .sv-pdn-modal__tabs[data-n="5"] button { flex: 0 0 auto; min-width: 112px; scroll-snap-align: start; }
  .sv-pdn-clear, .sv-pdn-unset { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 12px; }
  .sv-pdn-clear i { width: 38px; height: 38px; }
  .sv-pdn-clear i::before { left: 12px; top: 9px; }
  .sv-pdn__board--allergens[data-state="unset"] { padding-left: 14px; }
}