/* NanoReef revamp — navigation chrome, care guide, trust signals, motion.
   Loaded after the page's own styles, and deliberately scoped to nr-* classes
   so nothing here can collide with the shop, the checkout or Edit Site. */

:root{
  --nr-ink:#1d1630;
  --nr-mut:#6b6480;
  --nr-line:#e8e4f2;
  --nr-purple:#5b17c9;
  --nr-sea:#2f7fb8;
}

/* ══ Scroll chrome ══════════════════════════════════════════════════════ */
.nr-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9500;pointer-events:none;background:transparent}
.nr-progress i{display:block;height:100%;width:0;
  background:#5d1fb0;
  box-shadow:0 0 12px rgba(124,77,255,.55);transition:width .08s linear}

.nr-totop{position:fixed;right:18px;bottom:18px;z-index:9400;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(24,16,48,.86);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(10,6,24,.3);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s}
.nr-totop.show{opacity:1;transform:none;pointer-events:auto}
.nr-totop:hover{background:var(--nr-purple)}

/* The category bar tightens as you scroll. Background is never touched. */
.rf-subnav{transition:padding .25s ease,box-shadow .25s ease}
.rf-subnav.nr-shrunk{padding-top:.2rem;padding-bottom:.2rem;box-shadow:0 6px 20px rgba(20,12,45,.1)}
.rf-subnav.nr-shrunk .rf-subnav-inner a{font-size:.86rem}

/* ══ Search suggestions ═════════════════════════════════════════════════ */
.nr-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:300;display:none;
  background:#fff;border:1px solid var(--nr-line);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 46px rgba(20,12,45,.18)}
.nr-suggest.open{display:block}
.nr-sug{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .75rem;border:0;background:none;
  cursor:pointer;text-align:left;border-bottom:1px solid #f4f2fa}
.nr-sug:last-child{border-bottom:0}
.nr-sug:hover,.nr-sug.on{background:#f6f3ff}
.nr-sug img,.nr-sug-ph{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#f1eefb;flex:none}
.nr-sug-txt{flex:1;min-width:0}
.nr-sug-txt b{display:block;font-size:.9rem;color:var(--nr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-sug-txt small{color:var(--nr-mut);font-size:.74rem}
.nr-sug-price{font-weight:800;color:var(--nr-purple);font-size:.88rem;flex:none}
.nr-sug-none{padding:.9rem 1rem;color:var(--nr-mut);font-size:.86rem}

/* ══ Phone menu ═════════════════════════════════════════════════════════ */
.nr-menu-btn{display:none;flex-direction:column;gap:4px;width:40px;height:40px;border:0;border-radius:10px;
  background:#f3f0fb;cursor:pointer;align-items:center;justify-content:center}
.nr-menu-btn span{display:block;width:17px;height:2px;border-radius:2px;background:var(--nr-ink)}
@media(max-width:860px){ .nr-menu-btn{display:flex} }

/* Driven by a transition on a permanently-rendered panel rather than a keyframe
   on a display:none element: an animation on something that has only just been
   shown can settle back to its start frame, which left the sheet stranded off
   the left edge even though it had "opened". */
.nr-menu{position:fixed;inset:0;z-index:9600;background:rgba(10,6,24,0);visibility:hidden;
  transition:background .28s ease,visibility 0s linear .28s}
.nr-menu.open{visibility:visible;background:rgba(10,6,24,.5);backdrop-filter:blur(4px);
  transition:background .28s ease,visibility 0s}
.nr-menu-sheet{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);background:#fff;
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.22,.7,.2,1);box-shadow:8px 0 40px rgba(10,6,24,.3)}
.nr-menu.open .nr-menu-sheet{transform:none}
.nr-menu-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.15rem;
  border-bottom:1px solid var(--nr-line);font-size:1.05rem}
.nr-menu-x{border:0;background:#f3f0fb;width:32px;height:32px;border-radius:9px;cursor:pointer;font-weight:700}
/* The page carries a legacy bare  rule, which yanked this
   list out of the sheet and dropped it on top of the categories. Pinned here so
   no stray global selector can move it again. */
.nr-menu-links,.nr-menu-cats{display:flex;flex-direction:column;padding:.5rem;
  position:static!important;background:none!important;inset:auto!important;width:auto!important;
  height:auto!important;box-shadow:none!important;border:0!important;z-index:auto!important}
.nr-menu-cats{border-top:1px solid var(--nr-line);margin-top:.3rem;padding-top:.6rem}
.nr-menu-links button,.nr-menu-cats button{border:0;background:none;text-align:left;cursor:pointer;
  padding:.75rem .85rem;border-radius:10px;font:600 .95rem/1 "DM Sans",system-ui,sans-serif;color:var(--nr-ink)}
.nr-menu-cats button{font-weight:500;color:var(--nr-mut);font-size:.9rem}
.nr-menu-links button:hover,.nr-menu-cats button:hover{background:#f6f3ff}
.nr-menu-foot{margin-top:auto;padding:1rem;display:grid;gap:.5rem;border-top:1px solid var(--nr-line)}
.nr-menu-act{border:1px solid var(--nr-line);background:#f7f5fd;color:var(--nr-ink);border-radius:10px;
  padding:.8rem;font:700 .9rem/1 "DM Sans",system-ui,sans-serif;cursor:pointer}
.nr-menu-act.pri{background:var(--nr-purple);border-color:transparent;color:#fff}

/* ══ Result bar + empty state ═══════════════════════════════════════════ */
.nr-result-bar{max-width:1700px;margin:0 auto .9rem;padding:0 1.5rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;color:var(--nr-mut);font-size:.9rem;font-weight:600}
.nr-clear{border:1px solid var(--nr-line);background:#fff;color:var(--nr-mut);border-radius:999px;
  padding:.4rem .85rem;font:600 .8rem/1 "DM Sans",system-ui,sans-serif;cursor:pointer}
.nr-clear:hover{color:var(--nr-ink);border-color:#cdc6e6}
.nr-clear.pri{background:var(--nr-purple);color:#fff;border-color:transparent;margin-top:.8rem}
.nr-no-results{max-width:560px;margin:2.5rem auto;text-align:center;color:var(--nr-mut)}
.nr-no-results b{display:block;font-size:1.15rem;color:var(--nr-ink);margin-bottom:.3rem}

/* ══ Care badges on cards ═══════════════════════════════════════════════ */
.nr-care-badges{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0 .15rem}
.nr-cb{font:800 .62rem/1 "DM Sans",system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;
  padding:.28rem .46rem;border-radius:5px;white-space:nowrap}
.nr-cb.lvl-1{background:#e6f7ee;color:#116b3e}
.nr-cb.lvl-2{background:#fff4e0;color:#8a5a00}
.nr-cb.lvl-3{background:#fdeaea;color:#a51d1d}
.nr-cb.light{background:#eef4ff;color:#2f5ea8}
.nr-cb.group{background:#f3f0fb;color:#5b4a86}

/* ══ Trust signals ══════════════════════════════════════════════════════ */
.nr-stars{display:flex;align-items:center;gap:.35rem;margin:.2rem 0 .1rem}
.nr-star-row{letter-spacing:.5px;font-size:.82rem;color:#d8d3e6}
.nr-star-row .on{color:#f4a826}
.nr-star-n{font-size:.72rem;color:var(--nr-mut);font-weight:600}
.nr-sold{margin-top:.4rem;font-size:.72rem;font-weight:700;color:#116b3e}
.stock-badge.nr-real{font-weight:800}

.nr-ticker{max-width:1700px;margin:0 auto 1rem;padding:0 1.5rem;display:flex;align-items:center;gap:.55rem;
  font-size:.84rem;color:var(--nr-mut);font-weight:600}
.nr-tick-dot{width:8px;height:8px;border-radius:50%;background:#2fbf71;flex:none;
  box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:nrPulse 2.4s infinite}
@keyframes nrPulse{0%{box-shadow:0 0 0 0 rgba(47,191,113,.55)}70%{box-shadow:0 0 0 9px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.nr-tick-txt small{color:#6b6480;font-weight:500}
.nr-ticker.in .nr-tick-txt{animation:nrTickIn .5s ease}
@keyframes nrTickIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ══ Motion ═════════════════════════════════════════════════════════════ */
.nr-motion .product-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s ease,box-shadow .3s ease}
.nr-motion .product-card:hover{box-shadow:0 18px 40px rgba(30,20,60,.14)}

.nr-motion .rf-hero-img{translate:0 var(--nr-par,0px)}
.nr-motion .rf-hero-inner{translate:0 var(--nr-par,0px)}

.nr-bubbles{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.75}

.nr-fish-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.nr-fish{position:absolute;width:52px;opacity:.16;will-change:transform}
.nr-fish svg{width:100%;display:block}
.nr-fish.f1{top:18%;animation:nrSwim 48s linear infinite}
.nr-fish.f2{top:46%;width:34px;animation:nrSwim 66s linear infinite reverse;animation-delay:-12s}
.nr-fish.f3{top:68%;width:44px;animation:nrSwim 57s linear infinite;animation-delay:-28s}
.nr-fish.f4{top:84%;width:28px;animation:nrSwim 74s linear infinite reverse;animation-delay:-40s}
@keyframes nrSwim{
  0%{transform:translateX(-14vw) scaleX(1)}
  49.9%{transform:translateX(112vw) scaleX(1)}
  50%{transform:translateX(112vw) scaleX(-1)}
  100%{transform:translateX(-14vw) scaleX(-1)}
}

/* Everything above is off for anyone who asked for less movement. */
.nr-still .nr-still .nr-bubbles,.nr-still .nr-fish-layer,.nr-still @media (prefers-reduced-motion:reduce){
  .nr-progress i{transition:none}
  .nr-bubbles,.nr-fish-layer,.nr-menu-sheet{transition:none}
  .nr-tick-dot{animation:none}
}

/* The page's own content must sit above the ambience. */
.rf-hero,#shop,#care,#tank,.rf-ads,.site-footer,nav,.rf-subnav{position:relative;z-index:3}

/* ══ Coral page ═════════════════════════════════════════════════════════ */
.nr-pp-qty{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .8rem}
.nr-pp-qlab{font-size:.78rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.1em}
.nr-pp-qbox{display:flex;align-items:center;gap:.2rem;border:1.5px solid #ddd;border-radius:999px;padding:.2rem}
.nr-pp-qbox button{width:34px;height:34px;border:0;background:none;border-radius:50%;cursor:pointer;
  font:800 1.1rem/1 "DM Sans",system-ui,sans-serif;color:var(--nr-ink)}
.nr-pp-qbox button:hover{background:#f3f0fb}
.nr-pp-qbox span{min-width:28px;text-align:center;font-weight:800}

.nr-pp-share{width:100%;padding:.85rem;border:1.5px solid var(--nr-line);background:#fff;color:#555;
  border-radius:50px;font:600 .95rem/1 "DM Sans",system-ui,sans-serif;cursor:pointer;margin-bottom:1.4rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem}
.nr-pp-share:hover{border-color:#999;background:#f8f8f8}

.nr-lightbox{position:fixed;inset:0;z-index:12000;background:rgba(8,5,20,.9);display:grid;place-items:center;
  padding:2rem;cursor:zoom-out;opacity:0;transition:opacity .22s}
.nr-lightbox.in{opacity:1}
.nr-lightbox img{max-width:min(96vw,1200px);max-height:92vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.nr-lb-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.nr-lb-x:hover{background:rgba(255,255,255,.26)}

/* The phone buy bar. Hidden on desktop, where the panel is always on screen. */
.nr-pp-bar{display:none}
@media(max-width:768px){
  .nr-pp-bar{display:flex;align-items:center;gap:.8rem;position:absolute;left:0;right:0;bottom:0;z-index:20;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);
    border-top:1px solid var(--nr-line);box-shadow:0 -8px 24px rgba(20,12,45,.1)}
  .nr-pp-bar-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .nr-pp-bar-txt b{font-size:.86rem;color:var(--nr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nr-pp-bar-txt span{font-size:1rem;font-weight:800;color:var(--nr-purple)}
  .nr-pp-bar-btn{flex:none;border:0;border-radius:999px;padding:.8rem 1.3rem;background:var(--nr-purple);
    color:#fff;font:800 .92rem/1 "DM Sans",system-ui,sans-serif;cursor:pointer}
  .nr-pp-bar.sold .nr-pp-bar-btn{background:#b9b3c9}
  /* Room for the bar so it never sits on top of the last control. The page sets
     padding:.75rem!important on #ppGrid from a later <style> block, so this needs
     the extra id to win rather than just !important. */
  #productPage #ppGrid{padding-bottom:5.6rem!important}
}

/* ══ Coral page, restyled ═══════════════════════════════════════════════
   A light product page with a purple masthead, in the shape of a modern
   shop listing: photo left, everything you need to buy on the right.

   The site's palette is a dark reef-blue, and index.html forces
   `#productPage { background: var(--bg) !important }`. These rules carry the
   extra id needed to beat that, and only inside the coral page — the rest of
   the site keeps its dark theme untouched. */
#productPage#productPage{background:#fff!important;color:#17132a!important}

/* Masthead */
#productPage > div:first-child{background:var(--nr-purple)!important;border-bottom:0!important;
  box-shadow:0 2px 14px rgba(40,16,100,.22)!important;height:66px!important}
#productPage > div:first-child button,
#productPage > div:first-child span{color:#fff!important}
#productPage > div:first-child > span{font-weight:800!important;letter-spacing:.04em!important}
#productPage > div:first-child .nav-cart,#productPage > div:first-child .nav-account{
  background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.26)!important;
  border-radius:999px!important;padding:.42rem .85rem!important}
#productPage > div:first-child .nav-cart:hover,#productPage > div:first-child .nav-account:hover{
  background:rgba(255,255,255,.24)!important}

/* The promises strip. Only facts that are true of this shop. */
@media(max-width:900px){



}

/* Panels */
#ppGrid .nr-pp-right{background:#fff!important;border:1px solid #e9e5f5!important;
  box-shadow:0 4px 28px rgba(35,20,80,.07)!important;border-radius:18px!important}
#productPage .nr-about{background:#fff!important;border:1px solid #e9e5f5!important;
  border-radius:16px!important}
#productPage .nr-about h3{color:#17132a!important}
#productPage .nr-about p{color:#5f5872!important}
#ppGrid h3,#ppGrid h1{color:#17132a!important}
#ppGrid p,#ppAboutText{color:#5f5872!important}
.pp-main-image{border:1px solid #e9e5f5!important;background:#f6f4fc!important}

/* Name and price, set like a shop listing */
#ppTitle{font-size:2.35rem!important;font-weight:900!important;text-transform:uppercase!important;
  letter-spacing:-.005em!important;color:#17132a!important;line-height:1.08!important}
#ppGradeBadge{color:var(--nr-purple)!important;letter-spacing:.14em!important}
#ppFromPrice{font-size:2.3rem!important;font-weight:900!important;color:#17132a!important}
#ppFromPrice::after{content:" GBP";font-size:.95rem;font-weight:700;color:#8a8398;letter-spacing:.02em}
#ppStockBadge{font-weight:700!important}
#ppRatingSummary{color:#6b6480!important}

/* Quantity and Add to basket, side by side like the reference */
.nr-pp-buyrow{display:flex;gap:.7rem;align-items:stretch;margin:0 0 .7rem}
.nr-pp-buyrow .nr-pp-qbox{flex:none;border:1.5px solid #ddd7ef;border-radius:999px;padding:.2rem .25rem;
  display:flex;align-items:center;background:#fff}
.nr-pp-buyrow #ppAddBtn{flex:1;margin:0!important;border-radius:999px!important;
  border:1.5px solid #17132a!important;background:#fff!important;color:#17132a!important;
  text-transform:uppercase!important;letter-spacing:.06em!important;font-weight:800!important;
  font-size:.92rem!important;padding:1rem!important}
.nr-pp-buyrow #ppAddBtn:hover{background:#f4f2fb!important}
#ppBuyNowBtn{border-radius:999px!important;background:var(--nr-purple)!important;border:0!important;
  box-shadow:0 8px 22px rgba(91,23,201,.3)!important;font-weight:800!important;letter-spacing:.02em!important}
#ppBuyNowBtn:hover{background:#4a1690!important}
#ppWatchBtn{border-radius:999px!important;border:1.5px solid #ddd7ef!important;background:#fff!important;
  color:#4b4363!important}

/* Payment & security, under the photo */
.nr-pay{margin-top:1.1rem;background:#f7f5fd;border:1px solid #e9e5f5;border-radius:16px;padding:1.4rem 1.5rem}
.nr-pay h3{font-size:1.05rem!important;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  color:#17132a!important;margin:0 0 1rem}
.nr-pay h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#6b6480;margin:0 0 .6rem;font-weight:800}
.nr-pay-cards{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.nr-pay-card{display:inline-flex;align-items:center;height:30px;padding:0 .6rem;border-radius:6px;
  background:#fff;border:1px solid #e2ddf0;font:800 .66rem/1 "DM Sans",system-ui,sans-serif;
  letter-spacing:.04em;color:#3b3357}
.nr-pay p{margin:0;font-size:.82rem;line-height:1.6;color:#5f5872!important}
.nr-pay-lock{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:#116b3e;margin-bottom:.4rem;
  font-size:.8rem}


/* The dark theme sets color:var(--text) high up, which the pack rows inherit.
   Their own labels override it, but anything added inside them later would come
   out near-white on white — so the inherited colour is corrected here too. */
#productPage #ppGrid,#productPage .pp-pack,#productPage .pp-pack *{color:#17132a}
#productPage .pp-pack-desc,#productPage .pp-pack-price .per{color:#6b6480!important}
#productPage .pp-pack{border-color:#e4e0f0!important}
#productPage .pp-pack.selected{border-color:var(--nr-purple)!important;background:#f7f3ff!important}
#productPage .pp-pack.selected .pp-radio{border-color:var(--nr-purple)!important;background:var(--nr-purple)!important}
#productPage .pp-pack-price .save{color:var(--nr-purple)!important}

/* The zoom button on the coral photo. The markup sizes it inline at 36px with a
   16px glyph, which reads as decoration rather than something to press — these
   need !important to beat those inline styles. */
#productPage .pp-main-image button{width:54px!important;height:54px!important;top:16px!important;
  right:16px!important;background:rgba(255,255,255,.96)!important;
  box-shadow:0 4px 16px rgba(20,12,45,.22)!important;transition:transform .18s ease,background .18s ease}
#productPage .pp-main-image button svg{width:26px!important;height:26px!important;stroke-width:2.2!important}
#productPage .pp-main-image button:hover{transform:scale(1.08);background:#fff!important}
#productPage .pp-main-image button:active{transform:scale(.96)}
@media(max-width:768px){
  #productPage .pp-main-image button{width:46px!important;height:46px!important;top:12px!important;right:12px!important}
  #productPage .pp-main-image button svg{width:22px!important;height:22px!important}
}

/* ══ A much bigger coral photo ══════════════════════════════════════════
   The page pins the two columns at 480px and 460px, which left a lot of empty
   room either side on anything wider than a laptop. The photo column now takes
   whatever width is going, and the buy panel keeps a sensible fixed width.

   The cap is in vh, not px: the photo is square, so on a short, wide screen the
   limit has to come from the height or the bottom of it would be cut off. */
@media(min-width:900px){
  /* The card look (white panel, border, shadow) goes on wide screens: both shops
     this was modelled on separate the two halves with a single hairline and
     nothing else. The card stays on phones, where the columns stack. */
  #ppGrid .nr-pp-right{
    background:transparent!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;
    border-left:1px solid #ececec!important;
    padding:.25rem 0 0 2.6rem!important;
  }
  #ppGrid .nr-pp-left{padding-right:2.6rem!important;}
  /* Each column scrolls, and a scrollbar is only ever on one side, so the left
     column was losing 10px next to the centre line while the right lost its 10px
     out at the page edge. Reserving the gutter on both edges keeps the two halves
     true mirrors whether or not either is currently scrolling. */
  #ppGrid .nr-pp-left,#ppGrid .nr-pp-right{scrollbar-gutter:stable both-edges;}

  /* Hide the bars themselves. Both columns still scroll by wheel, trackpad, touch
     and keyboard; only the visible bar goes. The gutter rule above is kept rather
     than deleted: where scrollbar-width is not honoured, it is what keeps the two
     halves mirrored instead of one of them losing 10px to a bar. */
  #ppGrid .nr-pp-left,#ppGrid .nr-pp-right{scrollbar-width:none;}
  #ppGrid .nr-pp-left::-webkit-scrollbar,
  #ppGrid .nr-pp-right::-webkit-scrollbar{width:0;height:0;display:none;}

  #productPage #ppGrid{
    /* Two equal halves, so the join really is the middle of the page. The gap is
       zero because the divider lives on the right column's edge; each side gets
       its own padding to stand off the line. */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:0!important;
    padding:1.3rem 2rem 1.6rem!important;
    max-width:1800px!important;
  }
  #productPage .pp-main-image{
    max-width:100%!important;
    margin:0 auto 1rem!important;
  }
  /* The blocks under the photo shouldn't stretch past it. */
  #productPage .nr-about,#productPage #nrPay,#productPage #ppThumbs{
    max-width:100%;
  }
  #productPage .pp-thumb{width:84px!important;height:68px!important}
}

/* On a phone the page was two panes of fixed height, each scrolling on its own,
   so a square photo never fitted in the top one and was always cut off. One
   ordinary scrolling column instead: the photo gets the full width of the screen
   and everything else follows underneath, which is how a phone expects to read. */
@media(max-width:768px){
  #productPage #ppGrid{display:block!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;grid-template-rows:none!important}
  #productPage #ppGrid > div{height:auto!important;max-height:none!important;
    overflow:visible!important;min-height:0!important}
  /* The blocks are re-ordered in the DOM instead (see nr-product.js): using
     display:contents here collapsed the photo, because its square comes from an
     aspect-ratio that needs a real block box to resolve against. */
  #productPage #ppGrid .nr-pp-right{margin-top:.75rem}
  #productPage .pp-main-image{max-width:none!important;width:100%!important;margin:0 0 .8rem!important}
  #productPage .nr-about,#productPage #nrPay{max-width:none}
}

/* ── Scrollbars inside the product page ──────────────────────────────────
   The site-wide rule is a leftover of the old black-and-gold theme: an 11px
   bar with a near-black (#0c0b09) track. The product page is white, so that
   painted a solid black stripe down the inside edge of the details card the
   moment its content was long enough to scroll. Scoped override only, the
   rest of the site keeps the scrollbar it has. */
#productPage ::-webkit-scrollbar{width:10px;height:10px;}
#productPage ::-webkit-scrollbar-track{background:transparent;}
#productPage ::-webkit-scrollbar-thumb{background:#d7dce3;border-radius:10px;border:2px solid transparent;background-clip:content-box;}
#productPage ::-webkit-scrollbar-thumb:hover{background:#b6bec9;background-clip:content-box;}
#productPage ::-webkit-scrollbar-corner{background:transparent;}
#productPage,#productPage *{scrollbar-width:thin;scrollbar-color:#d7dce3 transparent;}

/* Secondary actions under the buy buttons. Both references keep these as quiet
   text, not as buttons the same size as "Add to basket". */
#productPage .nr-pp-mini{display:flex;align-items:center;justify-content:center;gap:1.4rem;
  margin:.9rem 0 .2rem;flex-wrap:wrap;}
/* These two are buttons carrying inline styles from the page markup, so every
   declaration here has to outrank them. */
#productPage .nr-pp-mini > *{all:unset!important;box-sizing:border-box!important;cursor:pointer!important;
  display:inline-flex!important;align-items:center!important;gap:.4rem!important;
  font:600 .85rem/1 "DM Sans",system-ui,sans-serif!important;color:#555!important;
  padding:.35rem .1rem!important;border-bottom:1px solid transparent!important;}
#productPage .nr-pp-mini > *:hover{color:#111!important;border-bottom-color:#111!important;}
#productPage .nr-pp-mini > *:focus-visible{outline:2px solid #5d1fb0;outline-offset:3px;}