/* ============================================================
   PlastiPouch — 3D look (prototype)
   Image-based depth: pre-rendered products, CSS perspective tilt,
   idle float, scroll parallax. No WebGL, nothing heavy.
   ============================================================ */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Hero ---------- */

.hero3d { padding: 72px 0 56px; position: relative; overflow: hidden; }
.hero3d .hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
.hero3d h1 { font-size: clamp(40px, 4.6vw, 60px); margin-bottom: 22px; line-height: 1.04; }
.hero3d .h1-line { display: block; white-space: nowrap; }
@media (max-width: 420px) { .hero3d .h1-line { white-space: normal; } }
.hero3d .lede { margin-bottom: 30px; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cat-chips a {
  font-family: "Instrument Sans", sans-serif; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.55); transition: background .2s, border-color .2s;
}
.cat-chips a:hover { background: #fff; border-color: var(--ink); }

/* The stage: a soft "glass" card the product floats in */
.stage {
  position: relative; aspect-ratio: 4 / 4.4; border-radius: 28px; perspective: 1100px;
  background:
    radial-gradient(70% 55% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #fbfbf8 0%, #ecebe3 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px -40px rgba(18,36,28,.45), 0 0 0 1px var(--line-soft);
  overflow: hidden; touch-action: pan-y; user-select: none;
}
.stage::before { /* foil halo behind the product */
  content: ""; position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 210deg, #c9cdd5, #f4f6f9, #a9aebb, #eef0f4, #b9bdc7, #f4f6f9, #c9cdd5);
  opacity: .55; filter: blur(2px);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59.5%, #000 61%, transparent 62.5%);
          mask: radial-gradient(circle, transparent 58%, #000 59.5%, #000 61%, transparent 62.5%);
}
.stage::after { /* glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%);
}

.stage-tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.stage-item {
  position: absolute; left: 50%; top: 46%; height: 70%; transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden; transform-style: preserve-3d;
}
.stage-item.on { opacity: 1; visibility: visible; }
.stage-depth { height: 100%; will-change: transform; }
.stage-float { height: 100%; will-change: transform; display: grid; grid-template-rows: 100%; justify-items: center; }
.stage-float img.on { opacity: 1; }
.stage-float img { grid-area: 1 / 1; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 30px 28px rgba(18,36,28,.22)) drop-shadow(0 6px 8px rgba(18,36,28,.12)); pointer-events: none; }
.stage-shadow {
  position: absolute; left: 50%; bottom: 13%; width: 38%; height: 5%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(18,36,28,.32), rgba(18,36,28,0)); border-radius: 50%; will-change: transform, opacity;
}

/* Little spec tags floating at a different depth than the product */
.stage-tag {
  position: absolute; z-index: 2; font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 24px -14px rgba(18,36,28,.35); white-space: nowrap; transition: opacity .35s;
}
.stage-tag.t1 { left: 6%; top: 24%; }
.stage-tag.t2 { right: 6%; top: 52%; }

.stage-head { position: absolute; left: 22px; top: 20px; right: 22px; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stage-head .code { font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); }
.stage-head .name { font-family: "Instrument Sans", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.stage-head .count { font-family: "Instrument Sans", sans-serif; font-size: 12px; color: var(--muted); }

.stage-foot { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.swatches { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.swatches .lbl { font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s; }
.sw:hover { transform: scale(1.12); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.arrows { display: flex; gap: 8px; }
.arrows button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.7);
  font-size: 17px; cursor: pointer; color: var(--ink); transition: background .2s, transform .15s;
}
.arrows button:hover { background: #fff; transform: translateY(-1px); }
/* intro: the products play through once, then the controls fade in */
.stage-foot { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility .7s; }
.stage.intro .stage-foot { opacity: 0; visibility: hidden; transform: translateY(10px); }
.stage-progress { position: absolute; left: 22px; right: 22px; bottom: 22px; height: 2px; border-radius: 2px; background: var(--line-soft); z-index: 3; overflow: hidden; transition: opacity .5s; }
.stage-progress span { display: block; height: 100%; background: var(--pine); transform-origin: left center; transform: scaleX(0); }
.stage:not(.intro) .stage-progress { opacity: 0; }
.stage-note { display: block; text-align: right; font-size: 11px; color: var(--muted); opacity: .75; margin-top: 2px; }
.stage-hint { position: absolute; right: 22px; top: 48px; z-index: 3; font-size: 12px; color: var(--muted); opacity: .8; }

/* ---------- Categories (bento) ---------- */

.cats { padding-top: 40px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 18px; }
.tile {
  position: relative; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; perspective: 900px;
  background: linear-gradient(160deg, #fbfbf8, #ecebe3); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 #fff inset; transition: box-shadow .25s, border-color .25s;
}
.tile:hover { box-shadow: var(--shadow); border-color: var(--line); }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.dark { background: radial-gradient(80% 70% at 70% 40%, #24654c 0%, #144232 75%); color: #eef1ec; }
.bento .tile:not(.big) .tile-art img { height: 64%; top: 6%; }
.tile.dark .tile-txt p, .tile.dark .tile-txt .meta { color: rgba(238,241,236,.72); }
.tile-txt { position: absolute; left: 22px; bottom: 20px; right: 22px; z-index: 2; }
.tile-txt h3 { font-size: 22px; margin-bottom: 4px; }
.tile.big .tile-txt h3 { font-size: 30px; }
.tile-txt p { font-size: 14px; color: var(--muted); line-height: 1.45; max-width: 34ch; }
.tile-txt .meta { display: block; margin-top: 8px; font-family: "Instrument Sans", sans-serif; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); }
.tile-art { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.tile-art img { position: absolute; height: 72%; width: auto; max-width: none; right: 8%; top: 8%; filter: drop-shadow(0 22px 20px rgba(18,36,28,.22)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile.big .tile-art img { height: 66%; right: 50%; top: 6%; transform: translateX(50%); }
.tile.big .tile-art img.back { height: 52%; right: 16%; top: 14%; transform: rotate(8deg); opacity: .95; }
.tile:hover .tile-art img.front { transform: translateX(50%) translateY(-6px) rotate(-2deg); }
.tile:not(.big):hover .tile-art img { transform: translateY(-6px) rotate(-3deg); }
.tile .soon {
  position: absolute; right: 18px; top: 18px; font-family: "Instrument Sans", sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted);
}
.tile .ghost-art { position: absolute; right: 22px; top: 40px; width: 42%; aspect-ratio: 1.3; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 34px; opacity: .55; }

/* ---------- Bought together (scroll parallax) ---------- */

.together { position: relative; overflow: hidden; padding-top: 0; }
.cats { padding-bottom: 64px; }
.together-card {
  position: relative; border-radius: 30px; overflow: hidden; min-height: 560px; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center;
  background: radial-gradient(70% 80% at 72% 50%, #2a6b52 0%, #144232 70%); color: #eef1ec;
}
.together-copy { padding: 56px; position: relative; z-index: 2; }
.together-copy .eyebrow { color: #cfe3d7; }
.together-copy .eyebrow::before { background: #cfe3d7; }
.together-copy h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; }
.together-copy p { color: rgba(238,241,236,.78); max-width: 42ch; margin-bottom: 26px; }
.together-copy .btn-primary { background: #f4f4ef; color: var(--ink); }
.together-scene { position: relative; height: 100%; min-height: 560px; }
.together-scene img { position: absolute; width: auto; max-width: none; filter: drop-shadow(0 34px 30px rgba(0,0,0,.35)); will-change: transform; }
.together-scene .s-box { height: 52%; left: 4%; top: 30%; }
.together-scene .s-pouch { height: 60%; left: 28%; top: 16%; z-index: 2; }
.together-scene .s-bottle { height: 60%; left: 62%; top: 26%; z-index: 3; }
.together-scene .s-tube { height: 42%; left: 79%; top: 16%; z-index: 1; transform: rotate(14deg); }

/* ---------- Product spec facts ---------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px dashed var(--line); margin-top: 44px; }
.facts div { padding: 22px 24px; border-right: 1px dashed var(--line); }
.facts div:last-child { border-right: 0; }
.facts b { display: block; font-family: "Instrument Sans", sans-serif; font-size: 24px; letter-spacing: -.02em; }
.facts span { font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.proto-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; max-width: 300px; font-size: 13px; line-height: 1.45;
  background: var(--ink); color: #eef1ec; padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow);
}
.proto-note button { background: none; border: 0; color: #cfe3d7; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; margin-left: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .together-card { grid-template-columns: 1fr; }
  .together-scene { min-height: 380px; }
  .together-copy { padding: 40px 32px 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts div:nth-child(2) { border-right: 0; }
  .facts div:nth-child(-n+2) { border-bottom: 1px dashed var(--line); }
}
@media (max-width: 820px) {
  .hero3d { padding-top: 40px; }
  .hero3d .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .stage { max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .tile.big, .tile.wide { grid-column: auto; }
  .tile.big { grid-row: span 2; }
  .stage-tag { display: none; }
  .stage-item { top: 53%; height: 60%; }
  .stage-shadow { bottom: 15%; }
  .stage-head .name { font-size: 17px; }
  .together-copy { padding: 32px 22px 0; }
  .together-scene { min-height: 300px; margin-top: 24px; }
  .tile.big .tile-art img { height: 52%; top: 5%; }
  .tile.big .tile-art img.back { height: 42%; top: 9%; right: 10%; }
  .tile:not(.big) .tile-art img { height: 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-art img, .sw, .arrows button { transition: none; }
}

/* ---------- Telehealth: kit ---------- */
.tele-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
.kit-hero { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(18,36,28,.45), 0 0 0 1px var(--line-soft); background: var(--paper-deep); }
.kit-hero img { width: 100%; height: 100%; object-fit: cover; }
.kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 290px; gap: 18px; }
.kit-tile.wide { grid-column: span 2; }
.kit-tile .tile-art img { height: 52%; right: 9%; top: 6%; }
.kit-tile.wide .tile-art img { height: 76%; right: 6%; top: 6%; }
.kit-tile .tile-txt p { max-width: 26ch; }

.glp-card {
  position: relative; border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; min-height: 480px;
  background: radial-gradient(70% 90% at 75% 45%, #137a7a 0%, #0b5d5e 45%, #073f40 100%); color: #eef4f2;
}
.glp-copy { padding: 56px; position: relative; z-index: 2; }
.glp-copy .eyebrow { color: #f0c9a8; }
.glp-copy .eyebrow::before { background: #f0c9a8; }
.glp-copy h2 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 20px; }
.glp-list { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; color: rgba(238,244,242,.85); }
.glp-list li { display: flex; align-items: center; gap: 12px; }
.glp-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #e3a77d; flex: none; }
.glp-copy .btn-primary { background: #f4f4ef; color: var(--ink); }
.glp-art { position: relative; height: 100%; display: grid; place-items: center; padding: 30px 30px 30px 0; }
.glp-art img { width: 100%; max-width: 620px; height: auto; filter: drop-shadow(0 40px 34px rgba(0,0,0,.35)); will-change: transform; }

.product-media.cut { background: linear-gradient(160deg, #fbfbf8, #ecebe3); }
.product-media.cut img { object-fit: contain; padding: 22px; filter: drop-shadow(0 22px 20px rgba(18,36,28,.22)); }

@media (max-width: 980px) {
  .kit-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
  .glp-card { grid-template-columns: 1fr; }
  .glp-copy { padding: 40px 32px 0; }
  .glp-art { padding: 10px 24px 30px; }
}
@media (max-width: 820px) { .tele-hero { grid-template-columns: 1fr; } .kit-hero { max-width: 520px; width: 100%; margin-inline: auto; } }
@media (max-width: 560px) {
  .kit-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .kit-tile .tile-art img, .kit-tile.wide .tile-art img { height: 48%; top: 5%; right: 8%; }
  .kit-tile.wide { grid-column: auto; }
}
.sw-pill { font: 600 11px "Instrument Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.sw-pill[aria-pressed="true"] { background: var(--ink); color: #f4f4ef; border-color: var(--ink); }

/* ---------- Stage: wide products, per-variant sizing ---------- */
.stage-float img { align-self: center; }
.stage-item.wide { height: auto; width: 80%; }
.stage-item.wide .stage-float { height: auto; grid-template-rows: auto; }
.stage-item.wide .stage-float img { width: 100%; height: auto; }

/* ---------- Telehealth: verticals ---------- */
.hero3d.tele h1 { font-size: clamp(36px, 4.4vw, 56px); }
.vert-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vert-chips a, .vert-chips span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.55); }
.vert-chips a:hover { background: #fff; border-color: var(--ink); }
.vert-chips.plain { margin-top: 18px; }
.vert-chips.plain span { background: transparent; font-weight: 500; }
.vert { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; padding: 36px 0; border-top: 1px dashed var(--line); }
.vert.flip .vert-copy { order: 2; }
.vert-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tint, var(--pine)); }
.vert-copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 10px 0 12px; max-width: 20ch; }
.vert-copy p { color: var(--muted); max-width: 44ch; }
.vert-link { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--pine); text-decoration: none; }
.vert-art { position: relative; height: 400px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(70% 75% at 50% 45%, color-mix(in srgb, var(--tint, #1c5741) 14%, #ffffff), #ecebe3); border: 1px solid var(--line-soft); }
.vert-art img { position: absolute; width: auto; max-width: none; filter: drop-shadow(0 26px 24px rgba(18,36,28,.25)); will-change: transform; }
.vert-art .a1 { height: 72%; left: 10%; top: 12%; }
.vert-art .a2 { height: 70%; left: 40%; top: 16%; z-index: 2; }
.vert-art .a3 { height: 52%; left: 66%; top: 34%; z-index: 3; }
.vert-art .a3.low { height: 36%; top: 50%; left: 62%; }
.vert-art img.wide { height: auto; }
.vert-art .a1.wide { width: 62%; left: 8%; top: 14%; }
.vert-art .a2.wide { width: 46%; left: 44%; top: 46%; }
#v-glp1 .vert-art .a1.wide { width: 64%; left: 18%; top: 9%; }
#v-ed .vert-art .a1.wide { width: 52%; left: 5%; top: 9%; }
#v-ed .vert-art .a2.wide { width: 40%; left: 30%; top: 56%; z-index: 3; }
#v-ed .vert-art .a3 { height: 50%; left: 66%; top: 14%; z-index: 2; }
#v-strips .vert-art .a1 { left: 14%; } #v-strips .vert-art .a2 { left: 54%; height: 62%; top: 20%; }
@media (max-width: 900px) {
  .vert { grid-template-columns: 1fr; gap: 22px; }
  .vert.flip .vert-copy { order: 0; }
  .vert-art { height: 320px; }
}
@media (max-width: 560px) { .vert-art { height: 260px; } }

/* ---------- Category tiles with two products ---------- */
.bento .tile:not(.big) .tile-art.pair img { top: auto; }
.tile-art.pair .f { height: 62% !important; right: 7%; top: 6% !important; z-index: 2; }
.tile-art.pair .b { height: 50% !important; right: 34%; top: 14% !important; z-index: 1; opacity: .97; }
.tile.wide .tile-art.pair .f { right: 6%; }
.tile.wide .tile-art.pair .b { right: 24%; height: 56% !important; top: 10% !important; }
.tile:not(.big):hover .tile-art.pair .b { transform: translateY(-4px) rotate(2deg); }

/* ---------- Specs as chips under the product name (never over the product) ---------- */
.stage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stage-chips .stage-tag { position: static; z-index: auto; font-size: 10.5px; padding: 6px 10px; border-radius: 999px; box-shadow: none; background: rgba(255,255,255,.7); border: 1px solid var(--line-soft); }
.stage-item { top: 55%; height: 60%; }
.stage-item.wide { width: 72%; }
.stage-shadow { bottom: 11%; }
@media (max-width: 560px) { .stage-chips .stage-tag { display: inline-block; } .stage-item { top: 57%; height: 52%; } }

/* ---------- Telehealth: vertical tiles ---------- */
.verts .tile-txt .vk { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); margin-bottom: 4px; }
.verts .tile.dark .vk { color: #cfe3d7; }
.verts .tile-art img { top: auto; right: auto; }
#v-glp1 .v1 { width: 50%; height: auto !important; right: 4% !important; top: 8% !important; }
#v-ed .v1 { width: 29%; height: auto !important; right: 27% !important; top: 6% !important; }
#v-ed .v2 { width: 25%; height: auto !important; right: 5% !important; top: 22% !important; z-index: 2; }
#v-hair .v1, #v-skin .v1, #v-strips .v1 { height: 50% !important; right: 34% !important; top: 7% !important; }
#v-hair .v2, #v-skin .v2, #v-strips .v2 { height: 50% !important; right: 8% !important; top: 9% !important; z-index: 2; }
#v-skin .v2 { height: 34% !important; top: 22% !important; }
#v-strips .v1 { height: 40% !important; top: 12% !important; }
#v-strips .v2 { height: 46% !important; }
#v-more { background: radial-gradient(80% 70% at 70% 40%, #24654c 0%, #144232 75%); }
@media (max-width: 560px) {
  #v-glp1 .v1 { width: 70%; } #v-ed .v1 { width: 52%; right: 30% !important; } #v-ed .v2 { width: 42%; }
}

/* the halo follows the product now that the specs sit under the name */
.stage::before { top: 55%; }
@media (max-width: 560px) { .stage::before { top: 57%; width: 64%; } }

/* ---------- Products dropdown ---------- */
.has-mega { position: relative; }
.has-mega .caret { font-size: 10px; margin-left: 2px; display: inline-block; transition: transform .2s; }
.has-mega:hover .caret, .has-mega:focus-within .caret { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); padding-top: 18px; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 70; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-inner { width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; border-radius: 20px; background: #fbfbf8; border: 1px solid var(--line-soft); box-shadow: 0 30px 60px -30px rgba(18,36,28,.45); }
.nav-links .mega-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; opacity: 1; text-decoration: none; transition: background .15s; }
.nav-links .mega-item:hover { background: #fff; }
.mega-img { width: 54px; height: 54px; flex: none; border-radius: 12px; background: linear-gradient(160deg, #fff, #ecebe3); display: grid; place-items: center; }
.mega-img img { max-height: 46px; max-width: 46px; width: auto; filter: drop-shadow(0 6px 6px rgba(18,36,28,.2)); }
.mega-item b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mega-item small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.nav-links .mega-all { grid-column: 1 / -1; text-align: center; padding: 10px; border-top: 1px dashed var(--line); margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--pine); opacity: 1; }
@media (max-width: 720px) {
  .has-mega .caret { display: none; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 6px 14px; }
  .mega-inner { width: auto; display: block; padding: 0; border: 0; background: none; box-shadow: none; }
  .nav-links .mega-item { padding: 9px 0; border-radius: 0; border-bottom: 1px dashed var(--line-soft); font-size: 15px; }
  .mega-img, .mega-item small { display: none; }
  .mega-item b { font-weight: 500; font-size: 15px; }
  .nav-links .mega-all { display: none; }
}

/* ---------- Products overview + category pages ---------- */
.crumb { display: inline-block; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 18px; }
.crumb:hover { color: var(--pine); }
.cat-hero h1 { font-size: clamp(38px, 4.4vw, 56px); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 330px; gap: 18px; }
.cat-tile .tile-txt p { max-width: 30ch; }
.cat-tile .explore { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--pine); }
.cat-tile.dark .explore { color: #cfe3d7; }
.cat-tile .tile-art.pair .f { height: 54% !important; right: 8%; top: 7% !important; }
.cat-tile .tile-art.pair .b { height: 44% !important; right: 36%; top: 12% !important; }
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pcard { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--line-soft); background: #fbfbf8; overflow: hidden; }
.pcard-art { position: relative; height: 300px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line-soft); }
.pcard-art .tile-art { display: flex; align-items: center; justify-content: center; gap: 6%; padding: 7% 8% 6%; }
.pcard-art .tile-art img { position: static; height: 86%; width: auto; max-width: 46%; object-fit: contain; }
.pcard-art.trio .tile-art img { height: 62%; max-width: 30%; }
.pcard-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard-body h3 { font-size: 23px; }
.pcard-body p { color: var(--muted); font-size: 15px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.pcard-cta { align-self: flex-start; margin-top: 6px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.choice { padding: 26px; border-radius: 22px; border: 1px solid var(--line-soft); background: #fbfbf8; }
.choice .vk { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); }
.choice h3 { font-size: 22px; margin: 8px 0; }
.choice p { color: var(--muted); font-size: 15px; }
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .pgrid { grid-template-columns: 1fr; } .choice-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; } .pcard-art { height: 240px; } }
/* layout fixes */
.crumb { display: block; width: max-content; }
.cat-grid { grid-auto-rows: 360px; }
.cat-tile .tile-art.pair .f { height: 46% !important; right: 8%; top: 6% !important; }
.cat-tile .tile-art.pair .b { height: 38% !important; right: 34%; top: 10% !important; }
.cat-tile .tile-art.solo .f { position: absolute; height: 48%; width: auto; right: 12%; top: 6%; filter: drop-shadow(0 22px 20px rgba(18,36,28,.22)); }
.cat-tile.wide-row { grid-column: 1 / -1; grid-row: auto; min-height: 0; height: auto; }
.cat-tile.wide-row .tile-txt { position: static; padding: 34px 36px; display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: center; }
.cat-tile.wide-row .tile-txt h3 { grid-column: 1; } .cat-tile.wide-row .tile-txt p { grid-column: 1; max-width: 60ch; }
.cat-tile.wide-row .tile-txt .meta { grid-column: 1; }
.cat-tile.wide-row .explore { grid-column: 2; grid-row: 1 / span 3; font-size: 16px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(207,227,215,.4); }
.pcard-body .code { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pine); }
.pgrid .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
.pgrid .pcard:last-child:nth-child(odd) .pcard-art { width: 50%; height: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line-soft); }
.pgrid .pcard:last-child:nth-child(odd) .pcard-body { justify-content: center; }
@media (max-width: 980px) { .pgrid .pcard:last-child:nth-child(odd) { flex-direction: column; } .pgrid .pcard:last-child:nth-child(odd) .pcard-art { width: auto; min-height: 0; height: 300px; border-right: 0; border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 560px) { .cat-tile.wide-row .tile-txt { grid-template-columns: 1fr; } .cat-tile.wide-row .explore { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; } }
.cat-grid { grid-auto-rows: auto; }
.cat-tile:not(.wide-row) { height: 360px; }
@media (max-width: 560px) { .cat-tile:not(.wide-row) { height: 300px; } }

/* ---------- Telehealth "Don't see yours?": centered in its box (all sizes) ---------- */
#v-more .tile-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px; }
#v-more .tile-txt p { margin-inline: auto; }

/* ---------- Phones: product area on top, text underneath, so they never overlap ---------- */
@media (max-width: 600px) {
  .bento, .kit-grid, .cat-grid { grid-auto-rows: auto !important; }
  .bento .tile, .kit-grid .tile, .cat-grid .tile { height: auto !important; grid-row: auto !important; display: flex; flex-direction: column; }
  .bento .tile .tile-art, .kit-grid .tile .tile-art, .cat-grid .tile .tile-art { position: relative; inset: auto; height: 230px; flex: none; }
  .bento .tile .tile-txt, .kit-grid .tile .tile-txt, .cat-grid .tile:not(.wide-row) .tile-txt { position: static; padding: 0 22px 22px; }
  /* products sit centred in their own area */
  .bento .tile-art img, .kit-grid .tile-art img, .cat-grid .tile-art img { top: 8% !important; height: 84% !important; width: auto !important; }
  .bento .tile-art img:only-child, .kit-grid .tile-art img:only-child, .cat-grid .tile-art img:only-child { right: 50% !important; left: auto !important; transform: translateX(50%); }
  .bento .tile-art.pair .f, .cat-grid .tile-art.pair .f, .bento .tile.big .tile-art .front { right: 14% !important; left: auto !important; transform: none; }
  .bento .tile-art.pair .b, .cat-grid .tile-art.pair .b, .bento .tile.big .tile-art .back { right: 44% !important; left: auto !important; height: 70% !important; top: 15% !important; transform: rotate(-4deg); }
  .kit-grid .tile-art .v1 { right: 42% !important; left: auto !important; }
  .kit-grid .tile-art .v2 { right: 8% !important; left: auto !important; height: 70% !important; top: 18% !important; }
  /* wide pieces (bag + card, pouch + sachet) size by width instead */
  #v-glp1 .tile-art .v1 { height: auto !important; width: 82% !important; right: 9% !important; top: 10% !important; }
  #v-ed .tile-art .v1 { height: auto !important; width: 58% !important; right: 36% !important; top: 12% !important; }
  #v-ed .tile-art .v2 { height: auto !important; width: 46% !important; right: 6% !important; top: 34% !important; }
  .bento .tile.big .tile-art { height: 280px; }
  /* boxes with no product image just hold the text */
  .tile .ghost-art, .tile .soon { display: none; }
  .bento .tile:not(:has(.tile-art)) .tile-txt, #v-more .tile-txt { padding: 26px 22px; }
  #v-more .tile-txt { position: static; }
  .bento .tile-txt h3, .kit-grid .tile-txt h3, .cat-grid .tile-txt h3 { margin-top: 2px; }
}
@media (max-width: 600px) {
  #v-glp1 .tile-art .v1 { transform: none; }
  #v-hair .tile-art .v1, #v-skin .tile-art .v1, #v-strips .tile-art .v1 { height: 78% !important; top: 11% !important; right: 50% !important; }
  #v-hair .tile-art .v2, #v-skin .tile-art .v2, #v-strips .tile-art .v2 { height: 78% !important; top: 11% !important; right: 16% !important; }
  #v-skin .tile-art .v2 { height: 52% !important; top: 30% !important; right: 10% !important; }
  #v-strips .tile-art .v1 { height: 62% !important; top: 18% !important; right: 46% !important; }
  #v-strips .tile-art .v2 { height: 72% !important; top: 12% !important; right: 12% !important; }
}
@media (max-width: 600px) { #v-glp1 .tile-art .v1 { width: 72% !important; right: 14% !important; top: 5% !important; } }

/* ============================================================
   Cards: the product gets its own area and the text its own,
   so text can never sit on a product at any screen width.
   (Overrides the earlier per-card positioning.)
   ============================================================ */
.bento .tile, .kit-grid .tile, .cat-grid .tile:not(.wide-row) { display: flex; flex-direction: column; }
.bento .tile .tile-art, .kit-grid .tile .tile-art, .cat-grid .tile:not(.wide-row) .tile-art { position: relative !important; inset: auto !important; flex: 1 1 auto; min-height: 120px; height: auto; }
.bento .tile .tile-txt, .kit-grid .tile .tile-txt, .cat-grid .tile:not(.wide-row) .tile-txt { position: relative !important; inset: auto; left: auto; right: auto; bottom: auto; padding: 0 22px 20px; margin-top: auto; flex: none; }
/* wide cards: text left, product right */
.bento .tile.wide, .kit-grid .tile.wide { flex-direction: row-reverse; align-items: stretch; }
.bento .tile.wide .tile-art, .kit-grid .tile.wide .tile-art { flex: 1 1 54%; }
.bento .tile.wide .tile-txt, .kit-grid .tile.wide .tile-txt { flex: 0 0 44%; align-self: flex-end; padding: 0 0 22px 22px; }

/* one product: centred in its area */
.bento .tile-art img, .kit-grid .tile-art img, .cat-grid .tile-art img { position: absolute !important; top: 8% !important; bottom: auto !important; height: 84% !important; width: auto !important; max-width: none; margin: 0 auto; left: 0 !important; right: 0 !important; transform: none; }
/* two products: back one left, front one right */
.bento .tile-art.pair .b, .cat-grid .tile-art.pair .b, .bento .tile.big .tile-art .back, .kit-grid .tile-art .v1:not(:only-child) { left: 6% !important; right: auto !important; height: 74% !important; top: 14% !important; margin: 0; }
.bento .tile-art.pair .f, .cat-grid .tile-art.pair .f, .bento .tile.big .tile-art .front, .kit-grid .tile-art .v2 { left: auto !important; right: 6% !important; height: 84% !important; top: 8% !important; margin: 0; z-index: 2; }
.bento .tile.big .tile-art .back { left: 18% !important; }
.bento .tile.big .tile-art .front { right: 18% !important; }
/* flat / wide pieces size by width */
#v-glp1 .tile-art .v1 { height: auto !important; width: 90% !important; top: 50% !important; transform: translateY(-50%); left: 0 !important; right: 0 !important; margin: 0 auto; }
#v-ed .tile-art .v1 { height: auto !important; width: 60% !important; top: 8% !important; left: 2% !important; right: auto !important; }
#v-ed .tile-art .v2 { height: auto !important; width: 46% !important; top: 38% !important; right: 2% !important; left: auto !important; }
#v-skin .tile-art .v2 { height: 56% !important; top: 30% !important; }
#v-strips .tile-art .v1 { height: 64% !important; top: 18% !important; }
/* hover: lift without losing the centring */
.tile:not(.big):hover .tile-art img, .tile:hover .tile-art img.front { transform: translateY(-6px); }
#v-glp1:hover .tile-art .v1 { transform: translateY(calc(-50% - 6px)); }
/* the "+" placeholder and the centred dark box keep their own layout */
.bento .tile:not(:has(.tile-art)) { justify-content: flex-end; }
#v-more .tile-txt { position: absolute !important; inset: 0 !important; margin: 0; padding: 28px; }

@media (max-width: 980px) {
  .bento .tile.wide, .kit-grid .tile.wide { flex-direction: column; }
  .bento .tile.wide .tile-txt, .kit-grid .tile.wide .tile-txt { flex: none; align-self: stretch; padding: 0 22px 20px; }
  .bento, .kit-grid { grid-auto-rows: auto !important; }
  .bento .tile, .kit-grid .tile { height: auto !important; grid-row: auto !important; }
  .bento .tile .tile-art, .kit-grid .tile .tile-art { flex: none; height: 230px; }
  .bento .tile.big .tile-art { height: 300px; }
}
@media (max-width: 600px) {
  #v-more .tile-txt { position: static !important; padding: 26px 22px; }
}
@media (max-width: 980px) {
  #v-glp1 .tile-art .v1 { width: auto !important; height: 86% !important; top: 7% !important; transform: none; left: 0 !important; right: 0 !important; margin: 0 auto; }
  #v-glp1:hover .tile-art .v1 { transform: translateY(-6px); }
  #v-ed .tile-art .v1 { width: auto !important; height: 76% !important; top: 6% !important; left: 4% !important; right: auto !important; }
  #v-ed .tile-art .v2 { width: auto !important; height: 52% !important; top: 42% !important; right: 4% !important; left: auto !important; }
}
@media (max-width: 600px) {
  #v-glp1 .tile-art .v1 { height: 80% !important; top: 10% !important; }
  #v-ed .tile-art .v1 { height: 66% !important; }
  #v-ed .tile-art .v2 { height: 44% !important; top: 48% !important; }
}
/* pairs sit together near the middle of their area */
.bento .tile:not(.big):not(.wide) .tile-art.pair .b, .cat-grid .tile-art.pair .b, .kit-grid .tile:not(.wide) .tile-art .v1:not(:only-child) { left: 16% !important; }
.bento .tile:not(.big):not(.wide) .tile-art.pair .f, .cat-grid .tile-art.pair .f, .kit-grid .tile:not(.wide) .tile-art .v2 { right: 16% !important; }
.bento .tile.wide .tile-art.pair .b { left: 14% !important; } .bento .tile.wide .tile-art.pair .f { right: 10% !important; }
.bento .tile.big .tile-art .back { left: 12% !important; height: 66% !important; top: 16% !important; }
.bento .tile.big .tile-art .front { right: 12% !important; height: 80% !important; top: 8% !important; }
@media (max-width: 600px) {
  .bento .tile:not(.big) .tile-art.pair .b, .cat-grid .tile-art.pair .b, .kit-grid .tile:not(.wide) .tile-art .v1:not(:only-child) { left: 12% !important; }
  .bento .tile:not(.big) .tile-art.pair .f, .cat-grid .tile-art.pair .f, .kit-grid .tile:not(.wide) .tile-art .v2 { right: 12% !important; }
}
.bento .tile.big .tile-art img.front { transform: none; }
.bento .tile.big:hover .tile-art img.front { transform: translateY(-6px) rotate(-2deg); }
/* desktop: the three small vertical boxes use the shared pair layout */
#v-hair .tile-art .v1, #v-strips .tile-art .v1 { height: 74% !important; top: 14% !important; }
#v-hair .tile-art .v2, #v-strips .tile-art .v2 { height: 84% !important; top: 8% !important; }
#v-skin .tile-art .v1 { height: 84% !important; top: 8% !important; }
#v-skin .tile-art .v2 { height: 56% !important; top: 34% !important; }
#v-strips .tile-art .v1 { height: 62% !important; top: 20% !important; }
@media (max-width: 980px) {
  .bento .tile.wide .tile-art, .kit-grid .tile.wide .tile-art { flex: none; height: 230px; }
}
@media (max-width: 980px) {
  .tile .ghost-art, .tile .soon { display: none; }
  .bento .tile:not(:has(.tile-art)) .tile-txt { padding: 26px 22px; }
  .bento .tile.big .tile-art .back, .bento .tile.wide .tile-art.pair .b { left: 22% !important; }
  .bento .tile.big .tile-art .front, .bento .tile.wide .tile-art.pair .f { right: 22% !important; }
}
@media (max-width: 600px) {
  .bento .tile.big .tile-art .back, .bento .tile.wide .tile-art.pair .b { left: 10% !important; }
  .bento .tile.big .tile-art .front, .bento .tile.wide .tile-art.pair .f { right: 10% !important; }
}
@media (max-width: 980px) { .cat-grid .tile:not(.wide-row) .tile-art { flex: none; height: 220px; } .cat-tile:not(.wide-row) { height: auto !important; } }
@media (max-width: 600px) { .cat-grid .tile:not(.wide-row) .tile-art { height: 230px; } }

/* single product in a card: always centred (overrides an older phone-only rule that pushed it left) */
.bento .tile-art img:only-child, .kit-grid .tile-art img:only-child, .cat-grid .tile-art img:only-child { left: 0 !important; right: 0 !important; margin: 0 auto !important; transform: none; }
.bento .tile:not(.big):hover .tile-art img:only-child, .cat-grid .tile:hover .tile-art img:only-child { transform: translateY(-6px); }

/* "All on one order" panel: products sit lower, clear of the button */
.together-scene .s-box { top: 38%; }
.together-scene .s-pouch { top: 24%; }
.together-scene .s-bottle { top: 34%; }
.together-scene .s-tube { top: 24%; }
@media (max-width: 980px) { .together-scene { margin-top: 40px; min-height: 400px; } }
@media (max-width: 560px) { .together-scene { margin-top: 56px; min-height: 340px; } }
.together-scene .s-tube { top: 30%; }
@media (max-width: 560px) {
  .together-scene { min-height: 400px; }
  .together-scene .s-box { height: 48%; top: 36%; }
  .together-scene .s-pouch { height: 56%; top: 22%; }
  .together-scene .s-bottle { height: 54%; top: 32%; }
  .together-scene .s-tube { height: 40%; top: 22%; }
}

/* ============================================================
   Phones (v27)
   ============================================================ */

/* Hero on phones: eyebrow + headline, then the product showcase, then the intro text and buttons —
   so the first thing a visitor sees is the products, not a wall of text. Desktop keeps the two columns. */
@media (max-width: 820px) {
  .hero3d .hero-grid { row-gap: 0; }
  .hero3d .hero-grid > div:first-child { display: contents; }
  .hero3d .hero-grid .crumb { order: 0; justify-self: start; }
  .hero3d .hero-grid .eyebrow { order: 1; }
  .hero3d .hero-grid h1 { order: 2; }
  .hero3d .hero-grid .stage { order: 3; margin: 2px 0 28px; }
  .hero3d .hero-grid .lede { order: 4; }
  .hero3d .hero-grid .hero-actions { order: 5; }
}

/* "03 / 05" never breaks onto two lines */
.stage-head .count { white-space: nowrap; flex: none; }

/* iPhone Safari can draw a CSS drop-shadow as a grey box when the image hasn't finished decoding,
   and only fixes it when something forces a redraw (a tap). Shadows switch on once each image has
   decoded (main.js adds .ld), and phones skip the GPU layers the mouse tilt needs. */
:is(.stage-float, .tile-art, .together-scene, .glp-art, .product-media.cut, .vert-art, .mega-img) img:not(.ld) { filter: none !important; }
@media (hover: none) {
  .stage-tilt, .stage-depth, .stage-float, .tile-art, .stage-shadow, .together-scene img, .glp-art img, .vert-art img { will-change: auto; }
  .stage-tilt, .stage-item, .tile-art { transform-style: flat; }
}

/* Telehealth verticals on phones: the two products in each card sit closer together (the GLP-1 kit card is untouched) */
@media (max-width: 600px) {
  .kit-grid .tile:not(.wide) .tile-art .v1:not(:only-child) { left: 21% !important; }
  .kit-grid .tile:not(.wide) .tile-art .v2, #v-hair .tile-art .v2, #v-skin .tile-art .v2 { right: 21% !important; }
  #v-strips .tile-art .v1:not(:only-child) { left: 15% !important; } #v-strips .tile-art .v2 { right: 15% !important; }
}
/* ED card on phones: the square Halden sachet a touch larger next to the bag */
@media (max-width: 600px) {
  #v-ed .tile-art .v1 { height: 62% !important; top: 8% !important; left: 6% !important; }
  #v-ed .tile-art .v2 { height: 50% !important; top: 40% !important; right: 7% !important; }
}

/* Showcase products are pinned to the exact centre of the card. Before, they were centred by a grid whose width
   came from the images' own sizes — which Safari works out differently from Chrome, leaving some products
   (jars, the folding carton, the brochure) sitting to the right on iPhones. */
.stage-float { position: relative; display: block; }
.stage-float img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* The range: bigger product pictures (phone and desktop) */
.pcard-art { height: 340px; }
.pgrid .pcard-art .tile-art { padding: 5% 6% 4%; gap: 4%; }
.pgrid .pcard-art .tile-art img { height: 92%; max-width: 48%; }
.pgrid .pcard-art .tile-art img:only-child { max-width: 82%; }
.pgrid .pcard-art.trio .tile-art img { height: 76%; max-width: 31%; }
@media (max-width: 560px) {
  .pcard-art { height: 300px; }
  .pgrid .pcard-art .tile-art { padding: 6% 5% 5%; }
}

/* Phone menu: tapping a product no longer slides the list to the left before the page opens
   (the desktop dropdown's centring shift was kicking in on tap) */
@media (max-width: 720px) {
  .has-mega:hover .mega, .has-mega:focus-within .mega { transform: none; transition: none; }
}

/* Products overview: with seven categories, "Don't see it?" fills the empty space next to the last category */
.cat-grid .cat-tile.wide-row.fill { grid-column: span 2; }
@media (max-width: 980px) { .cat-grid .cat-tile.wide-row.fill { grid-column: span 1; } .cat-grid .cat-tile.wide-row.fill .tile-txt { grid-template-columns: 1fr; } .cat-grid .cat-tile.wide-row.fill .explore { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; } }
@media (max-width: 560px) { .cat-grid .cat-tile.wide-row.fill { grid-column: 1 / -1; } }
.cat-grid .cat-tile.wide-row.fill { display: flex; align-items: center; }
.cat-grid .cat-tile.wide-row.fill .tile-txt { flex: 1; }

/* Tablets: the Products list inside the ☰ menu, same as phones (see style.css "Tablets") */
@media (min-width: 721px) and (max-width: 1100px) {
  .has-mega .caret { display: none; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 6px 14px; }
  .has-mega:hover .mega, .has-mega:focus-within .mega { transform: none; transition: none; }
  .mega-inner { width: auto; display: block; padding: 0; border: 0; background: none; box-shadow: none; }
  .nav-links .mega-item { padding: 9px 0; border-radius: 0; border-bottom: 1px dashed var(--line-soft); font-size: 15px; }
  .mega-img, .mega-item small { display: none; }
  .mega-item b { font-weight: 500; font-size: 15px; }
  .nav-links .mega-all { display: none; }
}

/* iPhone Safari draws a shadowed image that is also slightly see-through as a grey box: the back product in each
   tile pair was at 95–97% opacity. Fully opaque now (the difference was invisible anyway). */
.tile-art.pair .b, .tile.big .tile-art img.back { opacity: 1; }

/* Telehealth and product pages: the hero ends right under the showcase card, so cropping it cut the card's shadow
   off in a hard line (the home page has the stats row underneath). Crop sideways only. */
.hero3d.tele, .hero3d.cat-hero { overflow: hidden; overflow: clip visible; }
/* ED card on phones: bag and sachet a little closer together */
@media (max-width: 600px) {
  #v-ed .tile-art .v1 { left: 11% !important; }
  #v-ed .tile-art .v2 { right: 14% !important; top: 36% !important; }
}