/* Webfonts, hosted with the theme (assets/fonts/, see README there): Inter
   (body/UI), Playfair Display (headings), Arimo (prices). Each comes as Latin,
   Latin-ext and a tiny currency file (₹ and the other currency signs), so
   prices no longer pull in a whole Latin-ext font. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20C1-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-currency.woff2') format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C0
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20C1-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-italic-currency.woff2') format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C0
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20C1-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-currency.woff2') format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C0
}

@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20C1-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-currency.woff2') format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C0
}

@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20C1-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'Arimo';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/arimo-italic-currency.woff2') format('woff2');
  unicode-range: U+20A0-20AB, U+20AD-20C0
}

:root {
  --navy: #2e3563;
  --teal: #66c3d0;
  --red: #e31e24;
  --ivory: #fcf4f4;
  --page: #fcf4f4;
  --gold: #c9a876;
  --yellow: #fdc700;
  --gray2: #e5e7eb;
  --gray4: #99a1af;
  --muted: #5f6673;
  --fd: 'Playfair Display', serif;
  --fb: 'Inter', sans-serif
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: var(--fb);
  background: var(--page);
  color: var(--navy)
}

/* Global custom scrollbar — navy pill thumb */
html {
  scrollbar-color: #2e3563 transparent
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  -webkit-appearance: none;
  background: transparent
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece {
  background: transparent
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: #2e3563;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 40px
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: #1c2247
}

*::-webkit-scrollbar-corner {
  background: transparent
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0
}

.no-sb,
.mscroll,
.rail,
.tabs,
.d-nav {
  scrollbar-width: none
}

html {
  scroll-padding-top: 175px
}

/* lock page scroll behind overlays so only one scroller is ever active */
html.ovl-open,
body.ovl-open,
html.fdrawer-open,
body.fdrawer-open {
  overflow: hidden !important
}

.mfp-pane {
  scrollbar-width: none
}

.mfp-pane::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none
}

.no-sb::-webkit-scrollbar,
.mscroll::-webkit-scrollbar,
.rail::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.d-nav::-webkit-scrollbar {
  display: none
}

a {
  color: var(--navy);
  text-decoration: none
}

a:hover {
  color: var(--red)
}

img {
  max-width: 100%
}

.container-bs {
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 5.2vw, 100px);
  max-width: 1920px
}

/* Responsive header visibility rules */
@media (min-width: 601px) {
  .only-m {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .only-d {
    display: none !important;
  }
}

.rail {
  display: flex;
  gap: clamp(20px, 2.4vw, 48px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  cursor: grab
}

/* overflow-x:auto forces overflow-y to auto too, which clips the card box-shadow
   and the upward-opening variant dropdown. Pad the scroll box on both axes so
   they have room (mirrors the reference's pb-3/pb-4 rail utility): at least the
   card shadow's 20px below, and 16px each side so the first and last cards'
   shadows show too. The side padding is taken back out with a negative
   margin (and scroll-padding, so snapping keeps it), so the cards stay put. */
.prod-rail,
.cook-rail {
  padding: clamp(12px, 1.2vw, 20px) 16px clamp(20px, 1.6vw, 28px);
  margin-left: -16px;
  margin-right: -16px;
  scroll-padding-inline: 16px
}

.railwrap {
  position: relative
}

.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(44px, 3vw, 56px);
  height: clamp(44px, 3vw, 56px);
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--navy);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(46, 53, 99, .25);
  transition: background .2s, color .2s
}

.rail-arrow:hover {
  background: var(--navy);
  color: #fff
}

.rail-arrow.prev {
  left: auto;
  right: calc(100% + 10px)
}

.rail-arrow.next {
  left: calc(100% + 10px);
  right: auto
}

@media (max-width:1100px) {
  .rail-arrow {
    width: 38px;
    height: 38px;
    font-size: 18px
  }
}

@media (max-width:600px) {
  .rail-arrow {
    display: none
  }
}

@media (min-width:601px) {
  .prod-rail .pcw {
    width: calc((100% - 3*clamp(20px, 2.4vw, 48px))/4)
  }
}

/* Optimized product rail sizing for 1600px and 1920px screens */
@media (min-width:1600px) {
  .prod-rail .pcw {
    width: calc((100% - 4 * clamp(20px, 2vw, 40px)) / 5);
    max-width: 310px;
  }
}

@media (min-width:1920px) {
  .prod-rail .pcw {
    width: calc((100% - 4 * clamp(24px, 2.2vw, 44px)) / 5);
    max-width: 325px;
  }
}

/* Laptops and desktops (a mouse or trackpad): six cards a row, so they're
   smaller (scaled to fit below, with the phone rails). The gap and the width
   come from one value, so the row ends on a whole card. Tablets keep four. */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
  .rail.prod-rail {
    --rg: clamp(20px, 2.4vw, 44px);
    gap: var(--rg)
  }

  .rail.prod-rail .pcw {
    width: calc((100% - 5 * var(--rg)) / 6);
    max-width: none
  }
}

.rail.dragging {
  cursor: grabbing;
  scroll-snap-type: none
}

.rail::-webkit-scrollbar {
  display: none
}

.rail>* {
  scroll-snap-align: start;
  flex-shrink: 0
}

.sec-head {
  text-align: center;
  padding: clamp(22px, 3vw, 48px) 0 28px;
  scroll-margin-top: 175px
}

.sec-head+.container-bs,
.sec-head+div>.container-bs:first-child {
  padding-top: 0
}

.sec-head+.tabs-outer {
  padding-top: 0
}

.sec-head h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 44px);
  margin: 0;
  color: #0f172a;
  scroll-margin-top: 175px
}

.sec-head h2 .hl-teal {
  /* color: var(--teal); */
  color: #0f172a;
}

.sec-head h2 .hl-navy {
  color: #0f172a
}

.sec-head .bar {
  width: clamp(120px, 10vw, 180px);
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: 10px auto 0
}

.sec-head p {
  font-size: clamp(12px, .9vw, 17px);
  color: var(--muted);
  margin: 8px 0 0
}

.sec-head.dark h2 {
  color: #fff
}

.sec-head.dark p {
  color: rgba(255, 255, 255, .75)
}

/* On navy sections the two-tone helper's .hl-navy words must be white (the
   reference leaves them plain so they inherit the dark-section white), not the
   #0f172a used on light sections. */
.sec-head.dark h2 .hl-navy,
.sec-head.dark h2 .hl-navy .hl-teal {
  color: #fff
}


/* Header — desktop */
.d-topbar {
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  padding: 14px clamp(16px, 5.2vw, 100px)
}

header.only-d {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff
}

.d-topbar .logo,
.d-topbar .custom-logo {
  height: clamp(44px, 3.6vw, 64px);
  width: auto;
  object-fit: contain
}

.d-topbar .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0
}

/* the logo keeps its size on narrow screens (it was squeezed to 51px wide at
   768px); the search box gives way instead */
.d-topbar .custom-logo-link,
.d-topbar a:has(>.logo) {
  flex-shrink: 0
}

.deliver {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 14px;
  padding: 0 22px;
  height: 48px;
  box-sizing: border-box;
  min-width: clamp(200px, 16vw, 300px);
  background: rgba(249, 250, 251, .6);
  cursor: pointer;
  white-space: nowrap
}

.deliver b {
  font-size: 15px;
  line-height: 1.3
}

.deliver small {
  display: block;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted)
}

@property --shine-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg
}

.deliver::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2.5px solid transparent;
  background: conic-gradient(from var(--shine-a, 0deg), #8a6d3f 0deg, #c9a876 60deg, #f5d98a 120deg, #fff6dc 160deg, #f5d98a 200deg, #e31e24 250deg, #ff6b6b 275deg, #e31e24 300deg, #c9a876 330deg, #8a6d3f 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: shineSpin 2.4s linear infinite;
  pointer-events: none
}

@keyframes shineSpin {
  to {
    --shine-a: 360deg
  }
}

.deliver {
  text-align: left
}

.deliver i {
  color: var(--red);
  font-size: 23px;
  flex-shrink: 0
}

@media (max-width:1150px) {
  .d-topbar .deliver {
    min-width: 0;
    flex-shrink: 1
  }

  .d-topbar .deliver span small,
  .d-topbar .deliver span b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
  }

  /* lets the words shorten with "…" instead of running into the search box */
  .d-topbar .deliver span {
    min-width: 0;
    overflow: hidden
  }
}

/* Tablets: the pin alone (it still opens the pincode box), so the search box
   has room; the words ran over it at 768px. */
@media (min-width:601px) and (max-width:1023px) {
  .d-topbar .deliver {
    flex-shrink: 0;
    width: 48px;
    padding: 0;
    justify-content: center
  }

  .d-topbar .deliver span {
    display: none
  }
}

.d-search-wrap {
  flex: 1;
  min-width: 230px;
  position: relative;
  z-index: 1100
}

.d-search-wrap:focus-within,
.d-search-wrap:has(.search-panel.open) {
  z-index: 1200
}

.d-search-wrap .d-search {
  flex: none;
  width: 100%
}

.d-search .ph,
.m-search .ph {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left
}

.d-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--navy)
}

.d-search input::placeholder {
  color: rgb(106, 114, 130)
}

/* The open panel is exactly as wide as the search bar above it, edge to edge, at
   every screen size: it hangs from the bar's own box (.d-search-wrap is the bar). */
.search-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  width: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 2px 2px 24px rgba(0, 0, 0, .18);
  padding: 24px clamp(16px, 2.2vw, 30px) 28px;
  z-index: 1250;
  max-height: min(560px, 74vh);
  overflow-y: auto;
  box-sizing: border-box
}

.search-panel.open {
  display: block
}

.sp-close {
  position: absolute;
  right: 24px;
  top: 24px;
  font-size: 26px;
  color: var(--navy);
  cursor: pointer
}

.sp-h {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--navy);
  margin: 0 0 17px
}

.sp-h:not(:first-child) {
  margin-top: 22px
}

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 17px 9px
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 115px;
  box-sizing: border-box;
  border: none;
  box-shadow: inset 0 0 0 1px var(--teal);
  background: rgb(254, 254, 254);
  border-radius: 333px;
  padding: 7px 18px 9px;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--navy);
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s
}

.chip:hover {
  background: rgba(102, 195, 208, .14);
  color: var(--navy)
}

.chip.on {
  background: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  color: #fff
}

.sp-h2 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--navy);
  margin: 0 0 6px;
  display: inline-block;
  border-bottom: 2px solid var(--red);
  padding-bottom: 4px
}

.sp-h2:not(:first-child) {
  margin-top: 26px
}

.sp-cat {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-top: 14px
}

.sp-cat img {
  width: 102px;
  height: 99px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09)
}

.sp-cat span {
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1;
  color: var(--navy);
  font-weight: 500;
  text-transform: capitalize
}

.sp-prods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px 40px;
  margin-top: 14px;
  align-items: start
}

/* In the dropdown the columns follow the panel's width: one on a narrow bar, up to three on a wide one. */
.search-panel .sp-prods {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(230px, calc((100% - 80px) / 3))), 1fr))
}

.sp-prod {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none
}

.sp-prod img {
  width: 102px;
  height: 99px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09);
  flex-shrink: 0
}

.sp-prod span {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.2;
  color: var(--navy);
  font-weight: 500;
  text-transform: capitalize
}

.sp-viewall {
  display: block;
  text-align: center;
  margin-top: 22px;
  font-family: var(--fb);
  font-size: 16px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}

.sp-results {
  display: none
}

.search-panel.results .sp-default {
  display: none
}

.search-panel.results .sp-results {
  display: block
}

.d-search {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--navy);
  border-radius: 16px;
  height: 48px;
  padding: 9px 56px 9px 16px;
  background: rgba(249, 250, 251, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  color: rgb(106, 114, 130);
  font-family: var(--fb);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box
}

.d-search>i {
  font-size: 26px;
  color: var(--navy);
  flex-shrink: 0
}

.hicons {
  display: flex;
  gap: clamp(18px, 2.2vw, 38px);
  align-items: flex-start
}

.hicon:hover {
  opacity: .72
}

.hicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 22px;
  justify-content: flex-start;
  gap: 3px;
  text-align: center;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  text-decoration: none
}

/* Cart (button.hicon) and the mega-menu close are <button>s — strip the native
   grey button chrome so they match the <a> icons / plain close X. */
button.hicon {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit
}

.mm-close {
  background: none;
  border: none;
  padding: 0
}

.hicon:hover {
  color: var(--navy)
}

.hicon i {
  font-size: 22px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px
}

.hicon i.iconoir-gift::before {
  transform: translateY(-1px) scale(1.06)
}

.hicon i.iconoir-chat-bubble-question::before {
  transform: translateY(-2px) scale(1.04)
}

.hicon .ic-img {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: none;
  flex: none;
  object-fit: contain;
  display: block
}

.hicon small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin-top: 6px;
  white-space: nowrap
}

.hicon .bdg {
  position: absolute;
  top: -5px;
  right: calc(50% - 14px);
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px
}

.d-navwrap {
  position: relative;
  z-index: 100
}

/* Every item shows its drop-down arrow. Spacing tightens on laptop widths so
   the row still fits from 1280px up; "safe center" lets a narrower screen
   scroll instead of clipping the first item. */
.d-nav {
  background: #fff;
  border-top: 1px solid var(--gray2);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: clamp(8px, 3.4vw - 26px, 44px);
  padding: 13.5px clamp(16px, 5.2vw - 36px, 100px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .05);
  position: relative;
  z-index: 5;
  scrollbar-width: none
}

.d-nav::-webkit-scrollbar {
  display: none
}

.d-nav a,
.d-nav-link {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: clamp(13px, .85vw, 17px);
  gap: 5px;
  padding: 8px 12px 8px 16px;
  border-radius: 999px;
  color: var(--navy);
  text-decoration: none;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center
}

@media (max-width:1080px) {
  .d-nav {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px
  }

  .d-nav a,
  .d-nav-link {
    gap: 4px;
    padding: 8px 8px 8px 11px;
    font-size: 12.5px
  }
}

@media (max-width:760px) {

  .d-nav a,
  .d-nav-link {
    padding: 8px 6px 8px 9px;
    font-size: 11.5px
  }

  .d-nav {
    gap: 5px
  }
}

@media (max-width:690px) {
  .d-nav {
    gap: 4px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: var(--gray2) transparent
  }

  .d-nav a,
  .d-nav-link {
    padding: 8px 6px 8px 8px;
    font-size: 11px
  }

  .d-nav::-webkit-scrollbar {
    display: block;
    height: 4px
  }

  .d-nav::-webkit-scrollbar-thumb {
    background: var(--gray2);
    border-radius: 99px
  }

  .d-nav::-webkit-scrollbar-track {
    background: transparent
  }
}

.d-nav a.on,
.d-nav-link.on {
  background: var(--navy);
  color: var(--ivory)
}

/* The arrow takes the item's text colour: navy normally, ivory when active. */
.d-nav a i,
.d-nav-link i {
  display: inline-block;
  font-size: 1.05em;
  vertical-align: -2px;
  color: inherit
}

.megamenu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 24px 44px rgba(0, 0, 0, .28);
  border-radius: 0 0 22px 22px;
  --mmH: clamp(280px, 26vw, 380px);
  min-height: var(--mmH);
  align-items: stretch;
  overflow: hidden;
  z-index: 40
}

.megamenu.open {
  display: flex
}

.mm-hero {
  position: relative;
  flex: 0 0 auto;
  width: var(--mmH);
  align-self: stretch;
  background: var(--navy);
  overflow: hidden
}

.mm-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.mm-body {
  flex: 1;
  position: relative;
  padding: clamp(20px, 2vw, 38px) clamp(20px, 2vw, 38px) clamp(16px, 1.4vw, 28px) clamp(24px, 2.4vw, 48px)
}

.mm-close {
  position: absolute;
  right: 24px;
  top: 12px;
  font-size: 24px;
  color: var(--navy);
  cursor: pointer
}

.mm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 2.2vw, 40px);
  row-gap: clamp(16px, 1.5vw, 28px);
  max-width: 1150px
}

@media (min-width:1600px) {
  .mm-grid {
    max-width: 1380px;
    column-gap: clamp(24px, 2.5vw, 48px);
    row-gap: clamp(18px, 1.8vw, 32px);
  }
}

@media (min-width:1920px) {
  .mm-grid {
    max-width: 1600px;
    column-gap: clamp(28px, 3vw, 56px);
    row-gap: clamp(20px, 2vw, 36px);
  }
}

.mm-item {
  position: relative;
  display: block;
  height: 86px;
  text-decoration: none
}

.mm-item .disc {
  position: absolute;
  left: 15px;
  top: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: background .15s
}

.mm-item .disc span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.mm-item .disc img {
  width: 52px;
  height: 52px;
  object-fit: contain
}

.mm-item .disc img[src=""],
.mm-item .disc img:not([src]) {
  display: none;
}

.mm-item .pill {
  position: absolute;
  left: 0;
  top: 26px;
  right: 0;
  min-height: 60px;
  border-radius: 10px;
  background: var(--teal);
  box-shadow: 0 1px 15px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  padding: 6px 34px 6px 90px;
  transition: background .15s
}

.mm-item .pill b {
  flex: 1;
  text-align: center;
  font-weight: 400;
  font-size: clamp(14px, .95vw, 18px);
  line-height: 1.2;
  color: var(--navy);
  transition: color .15s
}

/* Always-on arrow, pinned to the pill's right end. It sits inside the label
   so it takes the label's colour, including any Additional CSS override. */
.mm-item .pill i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1;
  transition: transform .15s
}

.mm-item:hover .disc,
.mm-item:hover .pill {
  background: var(--red)
}

.mm-item:hover .pill b {
  color: #fff
}

.mm-item:hover .pill i {
  transform: translate(2px, -50%)
}

.mm-viewall {
  position: absolute;
  right: 28px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(13px, .85vw, 16px);
  font-weight: 500;
  color: var(--navy);
  text-decoration: underline
}

/* Header — mobile */
.m-head {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-bottom: 14px
}

.m-loc {
  padding: 12px 16px 0
}

.m-loc b {
  font-family: var(--fb);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px
}

.m-loc span {
  display: block;
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  margin-top: 1px
}

/* The location pill, burger and cart are <button>s (a11y) where the reference
   used <div>/<i>; strip the native chrome so they lay out like the reference.
   .m-search keeps its own border/background, so it is intentionally not reset. */
.m-loc,
.m-burger,
.m-row .icons button {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer
}

.m-loc {
  display: block;
  width: 100%;
  text-align: left
}

.m-burger,
.m-row .icons button {
  padding: 0
}

.m-row .icons>button {
  position: relative;
  display: inline-flex;
  align-items: center
}

.m-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 0
}

.m-row .logo,
.m-row .custom-logo {
  height: 32px;
  width: auto;
  object-fit: contain
}

.m-row .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0
}

/* padding-right pulls the icon group in by the badge's overhang (right:-8px) so
   the rightmost badge lines up with the search bar's right edge, not past it. */
.m-row .icons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 8px
}

.m-row .icons>span,
.m-row .icons>a {
  position: relative;
  display: inline-flex
}

.m-row i {
  font-size: 23px;
  color: var(--navy)
}

.m-row .icons i {
  font-size: 20px
}

.m-row .ic-img {
  width: auto;
  height: 21px;
  object-fit: contain;
  display: block
}

.m-row .bdg {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center
}

.m-search {
  width: calc(100% - 32px);
  margin: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--navy);
  border-radius: 14px;
  height: 40px;
  padding: 0 16px 0 14px;
  background: rgba(249, 250, 251, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  color: rgb(74, 85, 101);
  font-family: var(--fb);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden
}

.m-search>i {
  font-size: 19px;
  color: var(--navy);
  flex-shrink: 0
}

.m-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--navy)
}

.m-search input::placeholder {
  color: rgb(74, 85, 101)
}

/* Hero */
/* min-height (not a fixed height) so the banner grows if the inner content is
   taller than the viewport-based height — otherwise the Shop Now CTA gets
   clipped at intermediate widths like 1440px. The image (inset:0) still fills. */
.hero {
  position: relative;
  background: var(--ivory);
  overflow: hidden;
  min-height: clamp(440px, 45.8vw, 880px)
}

.hero .img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: right center;
  transition: opacity .6s ease
}

.hero .img.fading {
  opacity: 0
}

.hero .fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ivory) 8%, rgba(252, 244, 244, .72) 22%, rgba(252, 244, 244, 0) 34%)
}

.hero .inner {
  position: relative;
  min-height: clamp(440px, 45.8vw, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 1.8vw, 34px);
  padding: clamp(24px, 3vw, 48px) clamp(20px, 5.2vw, 100px);
  max-width: 62%
}

.hero .inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(820px, 96%);
  background: linear-gradient(90deg, rgba(252, 244, 244, .98) 0%, rgba(252, 244, 244, .96) 42%, rgba(252, 244, 244, .82) 64%, rgba(252, 244, 244, 0) 100%);
  z-index: 0;
  pointer-events: none;
  filter: blur(2px)
}

.hero .inner>* {
  position: relative;
  z-index: 1
}

.hero h1 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.4;
  margin: 0
}

.hero h1 .t {
  color: var(--teal)
}

.hero-sub {
  max-width: 520px;
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.5;
  color: var(--text-body, #4b5563);
  margin: 0.5px 0 0
}

.hero .feats {
  display: flex;
  gap: clamp(16px, 1.35vw, 26px);
  flex-wrap: wrap;
  align-items: center;
  margin: clamp(10px, 1.2vw, 22px) 0 clamp(20px, 2.8vw, 54px)
}

.hero .feats span {
  display: flex;
  gap: 11px;
  align-items: center;
  font-family: var(--fd);
  font-size: clamp(15px, 1.15vw, 22px);
  color: var(--navy)
}

.hero .feats span.div {
  border-right: 1px solid var(--red);
  padding-right: clamp(16px, 1.35vw, 26px)
}

.hero .feats .ic {
  width: clamp(32px, 2vw, 40px);
  height: clamp(32px, 2vw, 40px);
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.hero .feats .ic img {
  width: 60%;
  height: 60%;
  object-fit: contain
}

/* The whole banner is a link to its slide's category (hero.php #heroLink):
   above the picture, under the button, the dots and the scroll arrow. Only the
   button takes a click in the words' layer; the rest passes to the link. */
.hero-link {
  position: absolute;
  inset: 0;
  z-index: 1
}

/* The page still scrolls up and down over the banner; sideways is its swipe. */
.hero {
  touch-action: pan-y
}

.hero .inner {
  z-index: 2;
  pointer-events: none
}

.hero .inner .hero-cta,
.hero .inner .hero-cta * {
  pointer-events: auto
}

.hero-dots {
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  gap: 6px;
  justify-content: center
}

.hero-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--navy);
  opacity: .9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background .35s ease, width .35s ease, opacity .35s ease
}

.hero-dots span.on {
  width: 22px;
  background: var(--red);
  opacity: 1
}

/* Scroll-down cue — clear indication the page continues below the banner. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 3.2vw, 48px);
  transform: translateX(-50%);
  width: clamp(36px, 2.8vw, 46px);
  height: clamp(36px, 2.8vw, 46px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .75);
  background: rgba(46, 53, 99, .38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  animation: heroScrollBounce 1.6s ease-in-out infinite
}

.hero-scroll i {
  font-size: clamp(19px, 1.6vw, 24px)
}

.hero-scroll:hover {
  background: var(--red);
  border-color: var(--red)
}

@keyframes heroScrollBounce {

  0%,
  100% {
    transform: translate(-50%, 0)
  }

  50% {
    transform: translate(-50%, 6px)
  }
}

.btn-pill {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: clamp(46px, 3.6vw, 68px);
  padding: 0 clamp(22px, 2vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 500;
  font-family: var(--fb);
  cursor: pointer
}

.btn-pill:hover {
  background: #c81920;
  color: #fff
}

/* Animated plate/pan icon — enlarged, scales down on phones (overflow:visible
   so its steam/fish animation isn't clipped by the pill). */
.btn-pill .hero-pan {
  width: 34px;
  height: auto;
  flex-shrink: 0;
  overflow: visible
}

@media (max-width:600px) {
  .btn-pill .hero-pan {
    width: 30px
  }
}

/* Artwork banners (hero.php .is-art: the headline is baked into every slide's
   image) — no text-backing gradients or HTML headline over the art. */
.hero.is-art .fade,
.hero.is-art .inner::before,
.hero.is-art h1,
.hero.is-art .hero-sub,
.hero.is-art .feats {
  display: none
}

/* Desktop: keep the art's own 1920x750 shape at every width so it never
   stretches or squashes, but never let it run past the first screen — on short
   screens it is trimmed evenly top and bottom, at most ~7% each side, well clear
   of the banner text (--hero-top is the header height, set by hero.php). The
   Shop now button stays in the same spot on every slide's art: 8% up from the
   bottom of the full image (lifting clear of the edge whenever the art is
   trimmed), centred 23.5% across, under the banner words. The five banners'
   headlines centre between 21% and 25.2% across; 23.5% is their average. */
@media (min-width:601px) {
  .hero.is-art {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1920 / 750;
    max-height: max(calc(100vh - var(--hero-top, 150px)), 33.2vw);
    container-type: size
  }

  .hero.is-art .img {
    object-fit: cover;
    object-position: center
  }

  .hero.is-art .inner {
    position: absolute;
    inset: 0;
    min-height: 0;
    max-width: none;
    padding: 0 0 max(18px, calc(50cqh - 16.40625cqw));
    justify-content: flex-end;
    align-items: flex-start
  }

  .hero.is-art .hero-cta {
    margin-left: 23.5%;
    transform: translateX(-50%)
  }

  .hero.is-art .btn-pill {
    height: clamp(34px, 3.6vw, 68px);
    padding: 0 clamp(16px, 2vw, 40px);
    font-size: clamp(13px, 1.25vw, 24px)
  }

  .hero.is-art .btn-pill .hero-pan {
    width: clamp(24px, 2.4vw, 34px)
  }
}

/* Stats */
.stats {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2.6vw, 50px);
  padding: clamp(22px, 2.4vw, 44px) clamp(16px, 3.1vw, 60px);
  position: relative;
  isolation: isolate;
  overflow: hidden
}

/* the figures sit together in the middle, the waves at the ends */
.stats>.wave-live:first-child {
  margin-right: auto
}

.stats>.wave-live:last-child {
  margin-left: auto
}

/* a soft light that follows the pointer across the band (bs-app.js sets --mx/--my) */
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(clamp(220px, 24vw, 460px) circle at var(--mx, 50%) var(--my, 50%), rgba(102, 195, 208, .2), transparent 70%);
  opacity: 0;
  transition: opacity .45s ease
}

.stats.is-lit::before {
  opacity: 1
}

.stats .wave-live {
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1.45);
  transform-origin: center
}

@keyframes waveFlow {
  0% {
    transform: translateX(-8px)
  }

  50% {
    transform: translateX(8px)
  }

  100% {
    transform: translateX(-8px)
  }
}

.wave-live path {
  animation: waveFlow 2.4s ease-in-out infinite
}

.wave-live path:nth-child(2) {
  animation-delay: .25s
}

.wave-live path:nth-child(3) {
  animation-delay: .5s
}

@keyframes truckDrive {

  0%,
  100% {
    transform: translateX(-4px)
  }

  50% {
    transform: translateX(4px)
  }
}

.truck-drive {
  animation: truckDrive 1.1s ease-in-out infinite
}

@keyframes cityPulse {

  0%,
  100% {
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-4px) scale(1.06)
  }
}

.city-live {
  animation: cityPulse 2s ease-in-out infinite
}

@keyframes pinDrop {
  0% {
    transform: translateY(-6px)
  }

  15% {
    transform: translateY(0)
  }

  30% {
    transform: translateY(-3px)
  }

  45%,
  100% {
    transform: translateY(0)
  }
}

.pin-drop {
  animation: pinDrop 1.8s ease-in-out infinite;
  transform-origin: bottom center
}

@keyframes boxBob {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  30% {
    transform: translateY(-5px) rotate(-6deg)
  }

  60% {
    transform: translateY(0) rotate(4deg)
  }

  80% {
    transform: translateY(-1px) rotate(0)
  }
}

.box-bob {
  animation: boxBob 2.2s ease-in-out infinite
}

@keyframes medalSwing {

  0%,
  100% {
    transform: rotate(-10deg)
  }

  50% {
    transform: rotate(10deg)
  }
}

.medal-swing {
  animation: medalSwing 2.4s ease-in-out infinite;
  transform-origin: 50% 0
}

@keyframes fishSwim {

  0%,
  100% {
    transform: translateX(-3px) rotate(-4deg)
  }

  50% {
    transform: translateX(3px) rotate(4deg)
  }
}

.fish-swim {
  animation: fishSwim 1.8s ease-in-out infinite
}

@media (max-width:600px) {
  .stats .wave-live {
    display: none
  }

  .stats {
    justify-content: center
  }
}

.stat {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1.35vw, 26px);
  min-width: clamp(92px, 10vw, 190px)
}

/* the pill lit on hover, drawn round the figure without taking up room */
.stat::before {
  content: '';
  position: absolute;
  inset: calc(-1 * clamp(8px, .8vw, 14px)) calc(-1 * clamp(14px, 1.5vw, 28px)) calc(-1 * clamp(8px, .8vw, 14px)) calc(-1 * clamp(8px, .8vw, 14px));
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  transition: background-color .3s ease, box-shadow .3s ease
}

.stat .stx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(3px, .5vw, 9px)
}

.stat .circ {
  position: relative;
  width: clamp(50px, 5.4vw, 104px);
  height: clamp(50px, 5.4vw, 104px);
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease
}

.stat .circ i {
  font-size: clamp(26px, 2.7vw, 52px);
  color: var(--navy)
}

/* a sonar ring: one figure after another, then all three again (none on hover) */
.stat .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--teal);
  opacity: 0;
  pointer-events: none;
  animation: statRipple 5.4s cubic-bezier(.2, .6, .3, 1) infinite;
  animation-delay: calc(var(--i, 0) * 1.8s)
}

@keyframes statRipple {
  0% {
    transform: scale(1);
    opacity: .6
  }

  30%,
  100% {
    transform: scale(1.6);
    opacity: 0
  }
}

.stat b {
  font-size: clamp(24px, 2.7vw, 52px);
  color: var(--teal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: text-shadow .3s ease
}

.stat small {
  font-size: clamp(11px, 1.25vw, 24px);
  color: #fff;
  margin-top: clamp(3px, .4vw, 8px)
}

/* read out once, as the final figure, while the visible one counts up */
.stat .stat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

/* the whole figure, pill and all, is the link (its ::after covers it) */
.stat .stat-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: clamp(1px, .2vw, 4px);
  font-size: clamp(11px, .85vw, 16px);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .25s ease
}

.stat .stat-go::after {
  content: '';
  position: absolute;
  inset: calc(-1 * clamp(8px, .8vw, 14px)) calc(-1 * clamp(14px, 1.5vw, 28px)) calc(-1 * clamp(8px, .8vw, 14px)) calc(-1 * clamp(8px, .8vw, 14px));
  border-radius: 999px
}

.stat .stat-go i {
  font-size: 1.15em;
  transition: transform .25s ease
}

.stat .stat-go:focus-visible {
  outline: none
}

.stat:has(.stat-go:focus-visible)::before {
  box-shadow: inset 0 0 0 2px var(--teal)
}

@media (hover:hover) {
  .stat:hover::before {
    background-color: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(102, 195, 208, .35)
  }

  /* hover: just the oval round the figure; the icon lifts, no rings round it */
  .stat:hover .circ {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28)
  }

  .stat:hover .ring {
    animation: none;
    opacity: 0
  }

  .stat:hover b {
    text-shadow: 0 0 22px rgba(102, 195, 208, .6)
  }

  .stat:hover .stat-go {
    opacity: 1
  }

  .stat:hover .stat-go i {
    transform: translateX(3px)
  }
}

/* bs-app.js: below the fold, the figures rise in one by one as the band comes into view */
.stats.reveal .stat {
  opacity: 0;
  transform: translateY(18px)
}

.stats.reveal .stat-div {
  transform: scaleY(0)
}

.stats.reveal.in .stat {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 140ms)
}

.stats.reveal.in .stat-div {
  transform: none;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1) .2s
}

.stat-div {
  position: relative;
  width: 2px;
  height: clamp(96px, 8.5vw, 150px);
  border-radius: 2px;
  background: var(--teal);
  opacity: 1
}

.stat-div::before,
.stat-div::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal)
}

.stat-div::before {
  top: -10px
}

.stat-div::after {
  bottom: -10px
}

/* tablets: three stacked columns, as on phones but larger; the row of
   circle-beside-words ran into the waves here */
@media (min-width:601px) and (max-width:1099px) {
  .stats {
    justify-content: center;
    align-items: stretch;
    gap: clamp(16px, 3vw, 32px);
    padding: 28px 24px 24px
  }

  .stats .wave-live {
    display: none
  }

  .stat {
    flex: 0 1 220px;
    flex-direction: column;
    gap: 12px;
    min-width: 0
  }

  .stat::before,
  .stat .stat-go::after {
    inset: -10px -12px;
    border-radius: 22px
  }

  .stat .stx {
    align-items: center;
    text-align: center
  }

  .stat .circ {
    width: 62px;
    height: 62px
  }

  .stat .circ i {
    font-size: 31px
  }

  .stat b {
    font-size: 30px
  }

  .stat small {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 2px
  }

  .stat .stat-go {
    font-size: 12.5px
  }

  .stat-div {
    height: auto;
    margin: 10px 0
  }
}

/* The strip's waves, icons and ripples run whatever the device's "reduce
   motion" setting, as the band always has: the owner wants them seen, and
   Windows with "Animation effects" off reports reduce motion. */

/* Product card — figma M: Product card 245x371, all sizes in cqw of card width */
.pcw {
  width: clamp(212px, 15vw, 290px);
  flex-shrink: 0;
  container-type: inline-size
}

.pcard {
  /* the teal strip under the photo, in step with the card's width; at least
     17px, room for its 12px words */
  --strip: max(17px, 7.5cqw);
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12.24cqw;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(11, 31, 59, .10)
}

.plp-grid .pcard {
  min-height: calc(100cqw*430/336);
  height: 100%
}

/* The photo box is square, the card's full width, with the teal strip under
   it: most product photos are square too, so they show whole, edge to edge.
   Every photo fills the box (a photo that isn't square loses a little at the
   edges). bs-app.js bsFit() reads the photo's edges: a pack or product shot on
   a plain backdrop is fitted in whole on its own backdrop colour (.is-plain),
   so the box is still filled, then zoomed and centred on the product; a border
   baked into a photo is left out (.is-trim). */
.pcard .imgw {
  position: relative;
  height: calc(100cqw + var(--strip));
  flex-shrink: 0
}

/* "25% off" badge (bigsams_discount_badge / offBadge), shown only on sale items.
   Cards show no star rating. */
.pcard .poff {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  height: auto;
  min-height: 8.98cqw;
  line-height: 1;
  padding: 1cqw 12px;
  font-family: Arimo, sans-serif;
  font-size: clamp(11px, 4.9cqw, 15px)
}

.pcard .pfav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18)
}

.pcard .pfav i {
  font-size: 15px;
  color: var(--red)
}

.pcard .pfav.on {
  background: var(--red)
}

.pcard .pfav.on i {
  color: #fff
}

.pcard .pfav:active {
  transform: scale(.88)
}

.pcard .imgw .band {
  position: absolute;
  inset: 0;
  background: var(--teal);
  border-radius: 12.24cqw
}

.pcard .imgw .band span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--strip);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  text-align: center;
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px
}

.pcard .imgw img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100cqw;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border-radius: 12.24cqw
}

.pcard .imgw img.is-plain,
.pcard .imgw img.is-trim,
.ccard>img.is-trim,
.rf-card a>img.is-trim,
.rf-hero-card a>img.is-trim {
  object-fit: contain;
  object-position: center
}

/* Thumbnails (product page, cart, search, orders, wishlist): a pack shot is
   shown in whole on its own backdrop colour (bsFit); any other photo fills. */
img.bs-thumb.is-plain,
.pdp-thumbs img.is-plain {
  object-fit: contain !important
}

/* The photo's frame (the card's photo link): clips a photo pcardFit() has
   zoomed onto its product, and shows the photo's backdrop colour round it. */
.pcard .imgw > a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100cqw;
  overflow: hidden;
  border-radius: 12.24cqw;
  background: #fff
}

.plp-grid .pcard .imgw > a {
  border-radius: min(8.93cqw, 26px)
}

/* Hover photo (bs-app.js): a layer holding the 2nd photo, over the main photo
   (z-index 2 on desktop) and under the discount badge and heart (3). */
.pcard .imgw-alt {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease
}

.pcard .imgw-alt.on {
  opacity: 1
}

.pcard .bd {
  position: relative;
  padding: 3.27cqw 4.94cqw 5.4cqw;
  display: flex;
  flex-direction: column;
  flex: 1
}

.pcard .ttl {
  display: flex;
  align-items: flex-start;
  gap: 6px
}

.pcard .ttl h6 {
  flex: 1;
  min-width: 0;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  min-height: calc(1.35em*2);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.pcard .ttl h6 a {
  color: inherit;
  text-decoration: none;
  font: inherit
}

.plp-grid .pcard .ttl h6 {
  -webkit-line-clamp: 3
}

.plp-grid .pcard .ttl h6 {
  min-height: 0
}

.pcard .prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(14px, 1.2em);
  column-gap: 6px;
  row-gap: 1px;
  align-items: start;
  align-content: center;
  margin-top: 11px;
  padding-top: 0;
  height: auto;
  min-height: clamp(44px, 17cqw, 66px);
  flex-shrink: 0
}

.plp-grid .pcard .prow {
  margin-top: auto;
  padding-top: 14px;
  grid-template-rows: auto minmax(12px, 1.2em)
}

.pcard .prow .pr {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center
}

.pcard .prow .pr .mrp2 {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  margin-left: 2px
}

.pcard .prow .mrp2 {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  line-height: 1;
  font-family: Arimo, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #99A1AF;
  text-decoration: line-through;
  white-space: nowrap
}

.pcard .prow .addw {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  margin-left: 0
}

.pcard .pc-varrow {
  margin-top: 16px
}

.pcard .prow {
  margin-top: 1px
}

.pcard .prow {
  grid-template-rows: auto;
  align-items: center
}

.pcard .prow .addw {
  grid-row: 1
}

.plp-grid .pcard .prow {
  grid-template-rows: auto minmax(12px, 1.2em)
}

.pcard.oos {
  position: relative;
  background: #fff
}

.pcard.oos .oos-veil {
  position: absolute;
  inset: 0;
  background: rgba(118, 126, 138, .34);
  z-index: 2;
  pointer-events: none
}

.pcard.oos .addw>.btn-add,
.pcard.oos .addw>.qty {
  display: none
}

.pcard.oos .poff,
.pcard.oos .pfav {
  z-index: 4
}

.pcard.oos .prow .addw {
  grid-column: 1/3;
  justify-self: end;
  margin-right: calc(12px - 4.94cqw)
}

.pcard.oos .oos-txt {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  height: 13.06cqw;
  min-height: 34px;
  width: auto;
  min-width: 0;
  font-family: var(--fb);
  font-weight: 600;
  /* smaller and a deeper red than the brand red, so it doesn't shout */
  font-size: clamp(12px, 5cqw, 15px);
  line-height: 1.15;
  color: #9b1c1f;
  white-space: nowrap
}

.pcard.oos .prow .pr {
  overflow: visible
}

.pcard .pr {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 5px;
  min-width: 0;
  line-height: 1
}

.pcard .pr b {
  flex: 0 0 auto;
  line-height: 1
}

.pcard .pr b {
  font-family: Arimo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  white-space: nowrap
}

.pcard .pr {
  gap: 0 4px
}

.pcard .pr .off {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--red);
  white-space: nowrap
}

.btn-add {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: clamp(38px, 2.9vw, 52px);
  width: clamp(84px, 6.4vw, 118px);
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: none
}

/* The theme's steppers. Not WooCommerce's own quantity box (input.qty, on the
   /cart/ page), which would otherwise turn into a red blob. */
.qty:not(input) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  height: clamp(38px, 2.9vw, 52px);
  width: clamp(84px, 6.4vw, 118px);
  padding: 0 10px;
  box-sizing: border-box
}

.qty button {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px
}

.qty .mn i {
  font-size: 1.15em
}

/* Every stepper's − and + (QTY_MN / QTY_PL in bs-app.js): drawn at the size
   and weight of the old characters, centred exactly in their button. */
.qi {
  display: block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round
}

.pcard .btn-add {
  height: 13.06cqw;
  width: 34.5cqw;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 6.12cqw;
  box-shadow: none
}

.pcard .qty {
  height: 13.06cqw;
  width: 34.5cqw;
  padding: 0 3cqw
}

.pcard .qty button {
  font-size: 6.5cqw
}

@keyframes confettiPop {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5)
  }
}

.confetti-bit {
  position: fixed;
  border-radius: 1.5px;
  pointer-events: none;
  z-index: 2000;
  animation: confettiPop .62s cubic-bezier(.2, .8, .3, 1) forwards
}

.pcard .qty b {
  font-size: 5.5cqw
}

/* Product card — inline variant pill (pack size / pieces), cart-picker vocabulary */
.pcw {
  position: relative
}

.pcw:has(.pc-var-w.open) {
  z-index: 20
}

.pcard.var-open {
  overflow: visible
}

.pc-varrow {
  display: flex;
  align-items: center;
  margin-top: 6px;
  min-height: 28px;
  min-width: 0
}

.plp-grid .pcw {
  display: flex
}

/* min-width:0 down the flex chain lets the pill shrink inside the card instead
   of overflowing on long variant labels (e.g. Marinated Bluefin Tuna Sashimi);
   the label span ellipsizes and the chevron stays fully visible. */
.pc-var-w {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0
}

.pc-var {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 11px 4px 14px;
  font-family: var(--fb);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background .15s
}

.pc-var .pc-var-lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pc-var i {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  transition: transform .2s
}

.pc-var:hover {
  background: #4fb3c1
}

.pc-var-w.open .pc-var {
  background: var(--navy)
}

.pc-var-w.open .pc-var i {
  transform: rotate(180deg)
}

.pc-var-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 60;
  min-width: 176px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 53, 99, .55) transparent;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(11, 31, 58, .22);
  padding: 7px
}

.pc-var-menu::-webkit-scrollbar {
  width: 4px
}

.pc-var-menu::-webkit-scrollbar-thumb {
  background: rgba(46, 53, 99, .55);
  border-radius: 99px
}

.pc-var-w.open .pc-var-menu {
  display: flex
}

.pc-var-w.up .pc-var-menu {
  top: auto;
  bottom: calc(100% + 6px)
}

.pc-var-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 34px;
  flex-shrink: 0;
  padding: 0 13px;
  border: none;
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s
}

.pc-var-opt>span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pc-var-opt b {
  flex-shrink: 0;
  font-family: Arimo, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap
}

.pc-var-opt:hover {
  background: #f4fbfc
}

.pc-var-opt.on {
  background: var(--teal);
  color: #fff
}

/* Real WooCommerce variations can have long descriptive names (e.g. "100g
   (5-7 pieces) - Marinade Packed Separately"). Cap the menu width and let the
   label wrap to two lines instead of stretching the dropdown across the card;
   the price stays pinned to the right. The pill itself keeps its ellipsis. */
.pc-var-menu {
  max-width: min(300px, 84vw)
}

.pc-var-opt {
  height: auto;
  min-height: 34px;
  align-items: center;
  border-radius: 12px;
  padding-top: 6px;
  padding-bottom: 6px
}

.pc-var-opt>span {
  white-space: normal;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip
}

@media (max-width:600px) {
  .plp-grid .pc-var {
    font-size: 11px;
    line-height: 18px;
    padding: 3px 9px 3px 11px
  }

  .plp-grid .pc-var i {
    font-size: 13px
  }

  .plp-grid .pc-varrow {
    min-height: 24px;
    margin-top: 5px
  }
}

/* Image magnifier (bs-magnifier) */
.pdp-main {
  cursor: zoom-in
}

.pdp-main.mag-active {
  cursor: none
}

.mag-lens {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(46, 53, 99, .35);
  background-repeat: no-repeat;
  background-color: #e9eaed;
  opacity: 0;
  transition: opacity .16s ease
}

.mag-ov {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(10, 13, 28, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease
}

.mag-ov.open {
  opacity: 1
}

.mag-x {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  top: clamp(12px, 2vw, 28px);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 2
}

.mag-x:hover {
  background: var(--red);
  color: #fff
}

/* Gallery arrows + "2 / 4" counter (only when the product has several images) */
.mag-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  z-index: 2
}

.mag-nav.prev {
  left: clamp(10px, 2vw, 28px)
}

.mag-nav.next {
  right: clamp(10px, 2vw, 28px)
}

.mag-nav:hover {
  background: var(--red);
  color: #fff
}

.mag-count {
  position: absolute;
  top: clamp(12px, 2vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  line-height: 44px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  pointer-events: none;
  z-index: 2
}

@media (max-width: 600px) {
  .mag-nav {
    width: 40px;
    height: 40px;
    font-size: 20px
  }
}

.mag-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in
}

.mag-stage.zoomed {
  cursor: grab
}

.mag-stage.zoomed:active {
  cursor: grabbing
}

.mag-stage img {
  max-width: 92vw;
  max-height: 86vh;
  /* on short screens 86vh reaches up under the "2 / 6" counter and close button,
     so keep the image clear of their 44px band (plus a gap) at the top and bottom */
  max-height: min(86dvh, calc(100dvh - 2 * (clamp(12px, 2vw, 28px) + 52px)));
  object-fit: contain;
  transform-origin: center;
  transition: transform .22s ease;
  user-select: none;
  -webkit-user-drag: none
}

.mag-stage.zoomed img {
  transition: none
}

.mag-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 2.4vw, 30px);
  text-align: center;
  font-family: var(--fb);
  font-size: 13px;
  color: rgba(255, 255, 255, .7)
}

@media (hover:hover) and (pointer:fine) {
  .mag-hint {
    display: none
  }
}

.pdp-main .pdp-sale,
.pdp-main .pdp-wish,
.pdp-main .pdp-zoom,
.pdp-main .pdp-dots {
  z-index: 4
}

/* Best sellers */
.bsell {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: 6px 0 20px
}

.bsell .scroll-dots span {
  background: #fff
}

.bsell .container-bs {
  position: relative;
  z-index: 1
}

/* A homepage tab whose category has no products yet. */
.bsell .bsell-empty {
  flex: 1 0 100%;
  padding: 48px 16px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  opacity: .8
}

.welc .wm,
.promise-sec .wm,
section>.wm {
  height: auto
}

.tabs-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 18px
}

.tab-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(58, 66, 112), rgb(41, 48, 92));
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25)
}

.tab-arrow i {
  font-size: 24px
}

.tab-arrow:disabled {
  opacity: .35;
  cursor: default
}

@media (min-width:601px) {
  .tab-arrow {
    display: none
  }
}

.tabs {
  position: relative;
  display: flex;
  gap: 6px;
  max-width: 100%;
  background: linear-gradient(180deg, rgb(58, 66, 112), rgb(41, 48, 92));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 7px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .25)
}

.tab-slider {
  display: none
}

.tabs::-webkit-scrollbar {
  display: none
}

.tabs button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  border: none;
  border-radius: 999px;
  padding: clamp(9px, .7vw, 13px) clamp(14px, 1.1vw, 22px);
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(15px, 1vw, 19px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease, padding .35s ease, gap .35s ease, box-shadow .35s ease
}

.tabs button.on {
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  gap: 8px;
  padding-left: clamp(18px, 1.4vw, 26px);
  padding-right: clamp(18px, 1.4vw, 26px);
  /* no deeper than the bar's 7px padding, or the bar cuts it off */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .22)
}

.tabs button img {
  width: 0;
  height: 28px;
  object-fit: contain;
  opacity: 0;
  transition: width .35s ease, opacity .35s ease
}

.tabs button.on img {
  width: 28px;
  opacity: 1
}

.tabs button i {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .35s ease, opacity .35s ease
}

.tabs button.on i {
  width: 1.05em;
  opacity: 1
}

/* Range */
.rcard {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  width: clamp(300px, 26vw, 409px);
  height: clamp(344px, 30vw, 468px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 24px;
  box-sizing: border-box;
  --rpad: clamp(10px, .9vw, 16px);
  padding: var(--rpad);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  transition: box-shadow .35s, transform .35s;
  flex-shrink: 0;
  scroll-snap-align: start
}

/* Opens on hover only with a mouse or trackpad: a touch tablet keeps a
   tapped (or scrolled-over) card "hovered", which left it stuck open, so
   there it opens on a tap, as on phones (.tap-open, bs-app.js).
   .rc-shut: closed with its × while the pointer is still on it, until the
   pointer leaves. */
@media (min-width:601px) and (hover:hover) and (pointer:fine) {
  .rcard:not(.rc-shut):hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, .20);
    transform: translateY(-6px)
  }

  .rcard:not(.rc-shut):hover .rwash {
    opacity: 1
  }

  .rcard:not(.rc-shut):hover .subs {
    max-height: none;
    flex: 1 1 0;
    min-height: 0;
    opacity: 1;
    overflow-y: auto;
    /* 6px of room round the pills for their shadow, which this scroll box
       would otherwise cut; the margin takes it back so they stay put */
    margin: 26px -6px 0;
    padding: 6px 12px 14px 6px;
    pointer-events: auto;
    align-self: stretch
  }

  .rcard:not(.rc-shut):hover .lbl {
    top: var(--rpad);
    padding-top: clamp(8px, .7vw, 12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: calc(100% - 20px);
    overflow: hidden;
    border-radius: 18px
  }

  .rcard:not(.rc-shut):hover .lbl h5 {
    align-self: flex-start;
    width: auto
  }
}

.rcard.tap-open {
  box-shadow: 0 20px 44px rgba(0, 0, 0, .20)
}

@media (max-width:600px) {
  .rcard.tap-open {
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .16)
  }
}

.rcard.tap-open .rwash {
  opacity: 1
}

.rcard.tap-open .subs {
  max-height: none;
  flex: 1 1 0;
  min-height: 0;
  opacity: 1;
  overflow-y: auto;
  margin: 26px -6px 0;
  padding: 6px 12px 14px 6px;
  pointer-events: auto;
  align-self: stretch
}

.rcard.tap-open .lbl {
  top: var(--rpad);
  padding-top: clamp(8px, .7vw, 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-height: calc(100% - 20px);
  overflow: hidden;
  border-radius: 18px
}

.rcard.tap-open .lbl h5 {
  align-self: flex-start;
  width: auto
}

/* × to close an open card (bs-app.js), top right, shown only while it's open */
.rcard .rclose {
  position: absolute;
  top: clamp(14px, 1.3vw, 22px);
  right: clamp(14px, 1.3vw, 22px);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s
}

.rcard .rclose i {
  font-size: 18px
}

.rcard.tap-open .rclose {
  opacity: 1;
  pointer-events: auto
}

/* the name keeps clear of the × */
.rcard.tap-open .lbl h5 {
  max-width: calc(100% - 40px)
}

@media (min-width:601px) and (hover:hover) and (pointer:fine) {
  .rcard:not(.rc-shut):hover .rclose {
    opacity: 1;
    pointer-events: auto
  }

  .rcard:not(.rc-shut):hover .lbl h5 {
    max-width: calc(100% - 40px)
  }
}

@media (min-width:601px) {
  .range-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 44px);
    overflow: visible;
    justify-content: center;
    max-width: 1315px;
    margin: 0 auto
  }

  .range-rail .rcard {
    width: 100%;
    max-width: 409px;
    height: auto;
    aspect-ratio: 409/468
  }
}

@media (min-width:1600px) {
  .range-rail {
    max-width: 1480px;
    gap: clamp(24px, 2.6vw, 52px);
  }

  .range-rail .rcard {
    max-width: 460px;
  }
}

@media (min-width:1920px) {
  .range-rail {
    max-width: 1680px;
    gap: clamp(28px, 3vw, 60px);
  }

  .range-rail .rcard {
    max-width: 520px;
  }
}

/* Laptops and desktops: the same three cards a little smaller, each 24% of
   the screen's width (about 12% down; their words and photos scale with
   them). Tablets and phones as they were. */
@media (min-width:1200px) {
  .range-rail {
    grid-template-columns: repeat(3, 24vw)
  }

  .range-rail .rcard {
    max-width: none
  }
}

/* The photo box sits inside the card's padding by the same rule as the name
   strip (.lbl), so the two always end on the same line. (height: 100% of a
   card sized by its aspect-ratio came out a padding too tall in Safari, so
   on an iPad the photo showed below the name.) */
.rimg {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden
}

.rcard>.rimg {
  position: absolute;
  inset: var(--rpad);
  width: auto;
  height: auto
}

.rimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px
}

/* Hover / tap tint: strong enough for the name and pills to read over any photo */
.rwash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .9);
  border-radius: 24px;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 1
}

/* Name strip: mostly white so the navy name reads over dark photos too */
.rcard .lbl {
  position: absolute;
  left: var(--rpad);
  right: var(--rpad);
  bottom: var(--rpad);
  max-height: calc(100% - 20px);
  overflow: hidden;
  padding: 5.4cqw 6.4cqw 9.8cqw;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0 0 18px 18px;
  pointer-events: none;
  z-index: 2
}

.rcard .subs {
  display: flex;
  flex-wrap: wrap;
  /* rows keep their natural height when the open card has room to spare
     (short lists would otherwise stretch each pill to fill it) */
  align-content: flex-start;
  align-items: flex-start;
  gap: max(8px, 2.9cqw);
  max-height: 0;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  transition: max-height 1s, opacity .4s, margin-top .45s
}

.rcard .subs::-webkit-scrollbar {
  width: 8px;
  background: transparent
}

.rcard .subs::-webkit-scrollbar-track,
.rcard .subs::-webkit-scrollbar-track-piece {
  background: transparent
}

.rcard .subs::-webkit-scrollbar-thumb {
  background-color: #2e3563;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px
}

.rcard .subs::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0
}

.rcard .spill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--navy);
  font-weight: 400;
  font-size: max(12px, 3.9cqw);
  border-radius: 999px;
  padding: max(7px, 2.9cqw) max(14px, 5.4cqw);
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  text-decoration: none;
  pointer-events: auto
}

.rcard .spill:hover {
  background: var(--red);
  color: #fff
}

.rcard .lbl h5 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 8.3cqw;
  line-height: 1.15;
  margin: 0;
  color: var(--navy);
  display: inline-block
}

.rcard .lbl h5::after {
  content: "";
  display: block;
  height: .73cqw;
  min-height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin-top: 2cqw
}

.rcard .lbl .bar {
  display: none
}

.no-sb::-webkit-scrollbar {
  display: none
}

.no-sb {
  scrollbar-width: none
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px
}

/* The prototypes used Bootstrap's .text-center to centre "View All"; Bootstrap
   isn't loaded, so define the utility here. Range gets the reference's spacing. */
.text-center {
  text-align: center
}

.text-white,
.text-white:hover {
  color: #fff !important
}

.range .text-center {
  padding: 8px 0 clamp(24px, 3vw, 48px)
}

/* the section has no View All link, so it carries its own bottom spacing */
.range {
  padding-bottom: clamp(48px, 5vw, 96px)
}

/* ===== Side cart (pixel-matched to React) ===== */
.scart-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none
}

.scart-wrap.open {
  visibility: visible;
  pointer-events: auto
}

.scart-ov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .3s ease
}

.scart-wrap.open .scart-ov {
  opacity: 1
}

.scart {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 520px;
  max-width: 100%;
  background: var(--page);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1)
}

.scart-wrap.open .scart {
  transform: none
}

.scart-hdr {
  background: #fff;
  flex-shrink: 0
}

.scart-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 14px
}

.scart-title {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy)
}

.scart-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px
}

.scart-sub a {
  color: var(--navy);
  font-weight: 600
}

.scart-x {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--navy);
  cursor: pointer;
  line-height: 1
}

.scart-save {
  background: linear-gradient(90deg, var(--teal) 0%, rgb(240, 253, 244) 100%);
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy)
}

.scart-body {
  flex: 1;
  overflow-y: auto
}

.scart-itemshd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px
}

.scart-itemshd .ih-t {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy)
}

.scart-itemshd a {
  font-size: 13px;
  color: var(--navy);
  text-decoration: underline
}

.scart-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 20px 16px
}

.scart-rows::-webkit-scrollbar {
  width: 6px
}

.scart-rows::-webkit-scrollbar-thumb {
  background: rgba(11, 31, 58, .22);
  border-radius: 99px
}

.crow {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #fff;
  border: .8px solid rgb(232, 234, 240);
  border-radius: 16px;
  padding: 10px;
  height: 124px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(46, 53, 99, .06)
}

.crow>img {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  align-self: center;
  border-radius: 14px;
  object-fit: cover
}

.crow .ci {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 3px 2px 0
}

.crow .ci-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start
}

.crow .ci-title {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  line-height: 18.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.crow .ci-del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgb(241, 245, 249);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09)
}

.crow .ci-del i {
  font-size: 15px;
  color: var(--navy)
}

.ci-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  margin-top: 4px;
  flex-wrap: nowrap;
  min-width: 0
}

/* cart pack-size / quantity variant picker */
.ci-var-w {
  position: relative;
  display: inline-flex;
  flex-shrink: 0
}

.ci-var {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 2px 8px 2px 10px;
  font-family: var(--fb);
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s
}

.ci-var i {
  font-size: 12px;
  line-height: 1;
  transition: transform .2s
}

.ci-var:hover {
  background: #4fb3c1
}

.ci-var-w.open .ci-var {
  background: var(--navy)
}

.ci-var-w.open .ci-var i {
  transform: rotate(180deg)
}

.ci-var-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 172px;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(11, 31, 58, .22);
  padding: 6px
}

.crow:has(.ci-var-w.open),
.mci:has(.ci-var-w.open) {
  z-index: 60
}

.ci-var-w.open {
  z-index: 60
}

.ci-var-w.up .ci-var-menu {
  top: auto;
  bottom: calc(100% + 6px)
}

.ci-var-w.open .ci-var-menu {
  display: flex
}

.ci-var-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s
}

.ci-var-opt b {
  flex-shrink: 0;
  font-family: Arimo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap
}

.ci-var-opt:hover {
  background: #f4fbfc
}

.ci-var-opt.on {
  background: var(--teal);
  color: #fff
}

.crow .ci-pieces {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgb(102, 195, 208);
  color: #fff;
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 400
}

.crow .ci-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  gap: 10px
}

.crow .ci-price {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.crow .ci-price b {
  font-size: 15px;
  font-weight: 700;
  line-height: 22.5px;
  color: var(--navy)
}

.crow .ci-price s {
  font-size: 12px;
  line-height: 18px;
  color: rgb(107, 114, 128);
  text-decoration: line-through
}

.dstep {
  display: flex;
  align-items: center;
  border: .8px solid rgb(232, 234, 240);
  border-radius: 10px;
  overflow: hidden;
  height: 28px;
  background: rgb(241, 245, 249);
  box-shadow: none
}

.dstep button {
  width: 30px;
  height: 100%;
  background: var(--red);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.dstep b {
  min-width: 28px;
  text-align: center;
  background: rgb(241, 245, 249);
  color: var(--navy);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700
}

.scart-pad {
  padding: 0 20px 18px
}

.scard {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(46, 53, 99, .06)
}

.scart-coupon {
  padding: 12px
}

.cp-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy)
}

.cp-hd i {
  font-size: 17px;
  color: var(--teal)
}

.cp-dd {
  position: relative;
  margin-top: 10px
}

.cp-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--gray2);
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
  background: var(--page);
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--fb)
}

.cp-btn.has {
  color: var(--navy);
  font-weight: 600
}

.cp-btn i {
  font-size: 18px;
  color: var(--navy)
}

.cp-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  border: 1px solid var(--gray2);
  z-index: 10;
  overflow: hidden
}

.cp-menu.open {
  display: block
}

.cp-menu .cpi {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gray2);
  cursor: pointer;
  font-size: 13px
}

.cp-menu .cpi:last-child {
  border-bottom: none
}

.cp-menu .cpi.sel {
  background: var(--page)
}

.cp-menu .cpi b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy)
}

.cp-menu .cpi small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px
}

.cp-applied {
  display: none;
  margin-top: 12px;
  font-size: 14px
}

.cp-applied.show {
  display: block
}

.cp-ap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.cp-ap+.cp-ap {
  margin-top: 8px
}

.cp-ap .rm {
  flex: none
}

.cp-applied .ok {
  color: var(--teal);
  font-weight: 600
}

.cp-applied .rm {
  color: var(--red);
  font-weight: 600;
  cursor: pointer
}

.scart-pair {
  padding: 20px 0 16px;
  overflow: hidden
}

.pair-hd {
  text-align: center;
  padding: 0 0 4px
}

.pair-t {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 27px;
  color: var(--navy)
}

.pair-t .teal {
  color: var(--teal)
}

.pair-bar {
  width: 160px;
  height: 3px;
  background: var(--red);
  border-radius: 20px;
  margin: 10px auto 0
}

.pair-sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: 12px
}

.pair-rail {
  display: flex;
  gap: 16px;
  padding: 16px 24px 8px;
  overflow-x: auto
}

.pcardw {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(46, 53, 99, .10)
}

.pcardw .pimg {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0
}

.pcardw .pimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pcardw .pinfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.pcardw .pt {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.3
}

.pcardw .pbot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px
}

.pcardw .pbot b {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy)
}

.pcardw .padd {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 40px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none
}

.pair-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 8px 0 0
}

.pair-rail .pcardw {
  width: 260px;
  padding: 10px;
  gap: 10px
}

.pair-rail .pcardw .pimg {
  width: 80px;
  height: 80px
}

.pair-rail .pcardw .pt {
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.pair-rail .pcardw .pbot b {
  font-size: 15px
}

.pair-rail .pcardw .padd {
  height: 32px;
  padding: 0 16px;
  font-size: 12px
}

.pair-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--navy);
  transition: width .3s
}

.pair-dots span.on {
  width: 18px;
  background: var(--red)
}

.scart-sumhd {
  padding: 18px 20px 8px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy)
}

.scart-sum {
  display: flex;
  flex-direction: column;
  padding: 0 20px
}

.sum-row {
  background: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray2)
}

.sum-row .sr-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px
}

.sum-top {
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--gray2)
}

.sum-bot {
  border-radius: 0 0 14px 14px;
  padding: 16px 22px
}

.sum-row .sr-l {
  font-size: 17px;
  color: var(--navy)
}

.sum-row span {
  font-size: 17px;
  color: var(--navy)
}

.sum-dash {
  font-size: 22px;
  color: var(--muted)
}

.sum-disc {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--teal) !important
}

.sr-free {
  font-size: 13px;
  color: var(--teal)
}

.sr-freeval {
  font-size: 17px;
  font-weight: 700;
  color: var(--teal) !important
}

.sum-total {
  background: var(--navy);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-top: 12px
}

.sum-total span:first-child {
  font-size: 16px;
  font-weight: 600
}

.sum-total span:last-child {
  font-size: 22px;
  font-weight: 600
}

.scart-secure {
  text-align: center;
  padding: 18px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px
}

.scart-secure i {
  font-size: 18px;
  color: var(--teal)
}

.scart-foot {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--gray2);
  box-shadow: 0 -6px 20px rgba(46, 53, 99, .12);
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.scart-foot .sf-l {
  font-size: 14px;
  color: var(--muted)
}

.scart-foot .sf-v {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 23px;
  color: var(--navy)
}

.scart-foot .sf-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 54px;
  flex: 0 0 auto;
  padding: 0 42px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer
}

.scart-foot .sf-btn:hover {
  background: #c81920
}

.mscroll::-webkit-scrollbar {
  width: 0;
  height: 0
}

.mscroll {
  scrollbar-width: none
}

/* ===== Mobile side cart (React MSideCart) ===== */
.mcart-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none
}

.mcart-wrap.open {
  visibility: visible;
  pointer-events: auto
}

.mcart-wrap .scart-ov {
  opacity: 0;
  transition: opacity .3s ease
}

.mcart-wrap.open .scart-ov {
  opacity: 1
}

.mcart {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(100%);
  width: 402px;
  max-width: 100%;
  background: var(--page);
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1)
}

.mcart-wrap.open .mcart {
  transform: none
}

.mcart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  padding: 14px 18px
}

.mcart-bar img {
  height: 32px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 2px 4px
}

.mcart-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600
}

.mcart-secure i {
  font-size: 17px;
  color: var(--teal)
}

.mcart-hd {
  background: #fff;
  padding: 14px 16px 12px
}

.mcart-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.mcart-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy)
}

.mcart-x {
  font-size: 24px;
  color: var(--navy);
  cursor: pointer
}

.mcart-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.mcart-sub a {
  color: var(--navy);
  font-weight: 600
}

.mcart-save {
  background: linear-gradient(90deg, var(--teal) 0%, rgb(240, 253, 244) 100%);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy)
}

.mcart-itemshd {
  padding: 14px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.mcart-itemshd .ih-t {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy)
}

.mcart-itemshd a {
  font-size: 13px;
  color: var(--navy);
  text-decoration: underline
}

.mcart-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 14px 16px
}

.mcart-rows::-webkit-scrollbar {
  width: 5px
}

.mcart-rows::-webkit-scrollbar-thumb {
  background: rgba(11, 31, 58, .22);
  border-radius: 99px
}

.mci {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: #fff;
  border: .8px solid rgb(232, 234, 240);
  border-radius: 16px;
  padding: 8px;
  height: 120px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(46, 53, 99, .06)
}

.mci>img {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  align-self: center;
  border-radius: 14px;
  object-fit: cover
}

.mci .in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 3px 2px 0
}

.mci .top {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.mci .t {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  line-height: 18.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.mci .del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgb(241, 245, 249);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09)
}

.mci .del i {
  font-size: 15px;
  color: var(--navy)
}

.mci .pieces {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgb(102, 195, 208);
  color: #fff;
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 400
}

.mci .bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  gap: 8px
}

.mci .pr {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.mci .pr b {
  font-size: 15px;
  font-weight: 700;
  line-height: 22.5px;
  color: var(--navy)
}

.mci .pr s {
  font-size: 12px;
  line-height: 18px;
  color: rgb(107, 114, 128);
  text-decoration: line-through
}

.mstep {
  display: flex;
  align-items: center;
  border: .8px solid rgb(232, 234, 240);
  border-radius: 10px;
  overflow: hidden;
  height: 31.6px;
  background: rgb(241, 245, 249)
}

.mstep button {
  width: 30px;
  height: 100%;
  background: var(--red);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.mstep b {
  min-width: 28px;
  text-align: center;
  background: rgb(241, 245, 249);
  color: var(--navy);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700
}

.mcart-pad {
  padding: 0 14px 16px
}

.mcard {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06)
}

.mcart-coupon {
  padding: 18px
}

.mcart-pair {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding-bottom: 16px
}

.mcart-pair .rp-wm {
  position: absolute;
  z-index: 0;
  width: 150px;
  height: auto;
  opacity: .12;
  pointer-events: none
}

.mpair-in {
  position: relative;
  z-index: 1
}

.mpair-hd {
  text-align: center;
  padding: 16px 0 6px
}

.mpair-t {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 22px;
  color: #fff
}

.mpair-t .teal {
  color: var(--teal)
}

.mpair-bar {
  width: 100px;
  height: 2px;
  background: var(--red);
  border-radius: 20px;
  margin: 8px auto 0
}

.mpair-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
  margin-top: 6px
}

.mpair-rail {
  display: flex;
  gap: 12px;
  padding: 12px 12px 6px;
  overflow-x: auto
}

.mpcard {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2)
}

.mpcard .pimg {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0
}

.mpcard .pimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mpcard .pinfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.mpcard .pt {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.3
}

.mpcard .pbot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px
}

.mpcard .pbot b {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy)
}

.mpcard .padd {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 32px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none
}

/* Pair it up: a product already in the cart reads "Added" */
.pcardw .padd.added,
.mpcard .padd.added {
  background: var(--navy);
  cursor: default
}

.mpair-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 6px 0 0
}

.mpair-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  transition: width .3s
}

.mpair-dots span.on {
  width: 18px;
  background: var(--red)
}

.mcart-sumhd {
  padding: 18px 14px 6px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy)
}

.mcart-sum {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 14px 0
}

.msum-row {
  background: #fff;
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.msum-row .sr-l {
  font-size: 14px;
  color: var(--navy)
}

.msum-row .sr-sub {
  font-size: 12px;
  color: var(--muted)
}

.msum-row span {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy)
}

.msum-row .sum-dash {
  font-size: 18px;
  font-weight: 400;
  color: var(--muted)
}

.msum-row .sum-disc {
  font-size: 15px;
  color: var(--teal)
}

.msum-row .sr-free {
  font-size: 12px;
  color: var(--teal)
}

.msum-row .sr-freeval {
  font-size: 15px;
  color: var(--teal)
}

.msum-total {
  background: var(--navy);
  border-radius: 14px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff
}

.msum-total span:first-child {
  font-size: 15px;
  font-weight: 600
}

.msum-total span:last-child {
  font-size: 21px;
  font-weight: 600
}

.mcart-secure2 {
  text-align: center;
  padding: 20px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px
}

.mcart-secure2 i {
  font-size: 18px;
  color: var(--teal)
}

.mcart-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--gray2);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.mcart-foot .sf-l {
  font-size: 12px;
  color: var(--muted)
}

.mcart-foot .sf-v {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy)
}

.mcart-checkout {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  padding: 0 26px;
  height: 46px;
  cursor: pointer
}

.mcart-checkout:hover {
  background: #c81920
}

@media (min-width:601px) {

  .mcart-wrap,
  .mcart-wrap.open {
    display: none;
    visibility: hidden
  }
}

@media (max-width:600px) {

  .scart-wrap,
  .scart-wrap.open {
    display: none;
    visibility: hidden
  }
}

/* cart rows stagger in when the drawer opens, newly added row flashes */
.scart-wrap.open .crow,
.mcart-wrap.open .mci {
  animation: cartRowIn .34s cubic-bezier(.2, .7, .3, 1) both
}

.scart-wrap.open .crow:nth-child(2),
.mcart-wrap.open .mci:nth-child(2) {
  animation-delay: .05s
}

.scart-wrap.open .crow:nth-child(3),
.mcart-wrap.open .mci:nth-child(3) {
  animation-delay: .1s
}

.scart-wrap.open .crow:nth-child(n+4),
.mcart-wrap.open .mci:nth-child(n+4) {
  animation-delay: .14s
}

@keyframes cartRowIn {
  from {
    opacity: 0;
    transform: translateX(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.scart-wrap.open .crow.just-added,
.mcart-wrap.open .mci.just-added {
  animation: cartRowIn .34s cubic-bezier(.2, .7, .3, 1) both, cartFlash 1.1s ease .3s 1
}

@keyframes cartFlash {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(227, 30, 36, 0)
  }

  35% {
    box-shadow: 0 0 0 2px rgba(227, 30, 36, .55)
  }
}

@media (prefers-reduced-motion:reduce) {

  .scart-wrap.open .crow,
  .mcart-wrap.open .mci,
  .scart-wrap.open .crow.just-added,
  .mcart-wrap.open .mci.just-added {
    animation: none
  }
}

.scroll-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 44px) 0
}

.scroll-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  transition: background .35s ease, width .35s ease, border-radius .35s ease
}

.scroll-dots span.on {
  background: var(--red);
  width: 26px;
  border-radius: 999px
}

/* Cooking */
.cook {
  position: relative;
  background: var(--navy);
  padding: 2px 0 24px;
  overflow: hidden
}

.cook .scroll-dots span:not(.on) {
  background: #fff
}

.cook .row-c {
  gap: clamp(20px, 2.1vw, 32px);
  padding-top: 0
}

.cook .scroll-dots {
  height: 34px
}

.cook .text-center.pt-3 {
  padding-top: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px
}

.cook-rail {
  --rail-gap: clamp(16px, 1.8vw, 24px);
  gap: var(--rail-gap);
}

.cook-rail .ccard {
  width: calc((100% - 3 * var(--rail-gap)) / 4);
  max-width: calc((100% - 3 * var(--rail-gap)) / 4);
  flex: 0 0 calc((100% - 3 * var(--rail-gap)) / 4);
}

.ccard {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  scroll-snap-align: start
}

.ccard>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ccard .ccard-link {
  position: absolute;
  inset: 0;
  z-index: 1
}

.ccard .cshade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(20, 25, 55, 0) 0%, rgba(20, 25, 55, .86) 100%);
  pointer-events: none
}

.ccard .cinfo {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px
}

.ccard .cinfo h6 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 24px);
  color: #fff;
  margin: 0
}

.ccard .cmeta {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 10px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(13px, 1vw, 15px)
}

.ccard .cmeta span {
  display: flex;
  gap: 6px;
  align-items: center
}

.ccard .cmeta i {
  font-size: 1.2em
}

.ccard .fav {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: background .2s, transform .12s;
  z-index: 10
}

.ccard .fav:active {
  transform: scale(.88)
}

.ccard .fav i {
  font-size: 16px;
  color: var(--red)
}

.ccard .fav.on {
  background: var(--red)
}

.ccard .fav.on i {
  color: #fff
}

/* Welcome */
.welc {
  position: relative;
  background: linear-gradient(180deg, var(--page), #d6dae0);
  padding: 2px 0 clamp(40px, 4vw, 90px);
  overflow: hidden
}

.welc .bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  pointer-events: none;
  z-index: 0
}

.welc .sec-head {
  position: relative;
  z-index: 1
}

.welc .card-w {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: clamp(28px, 3.3vw, 48px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: clamp(28px, 3.9vw, 56px);
  align-items: center
}

@media (min-width:1600px) {
  .welc .card-w {
    max-width: 1480px;
    grid-template-columns: minmax(0, 580px) 1fr;
  }
}

@media (min-width:1920px) {
  .welc .card-w {
    max-width: 1680px;
    grid-template-columns: minmax(0, 640px) 1fr;
    padding: clamp(40px, 3.5vw, 60px);
  }
}

/* at its own shape, so none of it is cut */
.welc-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px
}

.welc-body {
  text-align: left
}

.welc-body p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 18px
}

/* the words in bold in the client's copy */
.welc-body p strong {
  font-weight: 700;
  color: var(--navy)
}

/* the product names, linked to their categories */
.welc-body p a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s
}

.welc-body p a:hover {
  color: #2a8d9b
}

.welc .welc-btn {
  gap: 14px;
  padding: 0 28px;
  margin: 12px auto 0;
  display: flex;
  width: fit-content
}

/* tablets: the photo whole above the words (beside them, the words' narrow
   column made it a tall sliver) */
@media (min-width:601px) and (max-width:1199px) {
  .welc .card-w {
    grid-template-columns: 1fr
  }
}

@media (max-width:600px) {
  .welc .card-w {
    grid-template-columns: 1fr;
    /* within the page's 16px+ side margin, which the section cuts at */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08)
  }
}

.btn-navy {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: clamp(44px, 3.2vw, 60px);
  padding: 0 clamp(22px, 1.8vw, 34px);
  font-size: clamp(15px, 1.1vw, 21px);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center
}

.btn-navy:hover {
  background: #242a52;
  color: #fff
}

@keyframes dishRise {
  0% {
    transform: translateY(36px);
    opacity: 0
  }

  10% {
    transform: translateY(0);
    opacity: 1
  }

  92% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(36px);
    opacity: 0
  }
}

@keyframes fishDrop {

  0%,
  14% {
    transform: translateY(-72px);
    opacity: 0
  }

  30% {
    transform: translateY(4px);
    opacity: 1
  }

  35% {
    transform: translateY(0);
    opacity: 1
  }

  92% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-72px);
    opacity: 0
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(10px)
  }

  25% {
    opacity: .95
  }

  70% {
    opacity: .95
  }

  100% {
    opacity: 0;
    transform: translateY(-16px)
  }
}

@keyframes steamGate {

  0%,
  36% {
    opacity: 0
  }

  40%,
  88% {
    opacity: 1
  }

  92%,
  100% {
    opacity: 0
  }
}

.grill-base {
  animation: dishRise 4.8s ease-in-out infinite
}

.grill-leg {
  animation: fishDrop 4.8s ease-in infinite
}

.grill-steam {
  animation: steamGate 4.8s linear infinite
}

.grill-steam path {
  animation: steamRise 1.4s ease-in-out infinite
}

/* Welcome band's Know more grill (welcome.php): the fish drops onto the grate,
   then the flames light and the steam rises, on one 3.2s loop. */
.gr-fish {
  animation: grillDrop 3.2s ease-in infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%
}

@keyframes grillDrop {

  0%,
  10% {
    transform: translateY(-46px);
    opacity: 0
  }

  28% {
    transform: translateY(4px);
    opacity: 1
  }

  34% {
    transform: translateY(0);
    opacity: 1
  }

  90% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-46px);
    opacity: 0
  }
}

.gr-flame {
  animation: flameGate 3.2s linear infinite
}

.gr-flame path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flameFlicker 1.1s ease-in-out infinite
}

.gr-flame path:nth-child(2) {
  animation-delay: .2s
}

.gr-flame path:nth-child(3) {
  animation-delay: .4s
}

.gr-steam {
  animation: steamGate 3.2s linear infinite
}

.gr-steam path {
  animation: steamRise 1.4s ease-in-out infinite
}

.gr-steam path:nth-child(2) {
  animation-delay: .25s
}

.gr-steam path:nth-child(3) {
  animation-delay: .5s
}

@keyframes flameGate {

  0%,
  34% {
    opacity: 0
  }

  38%,
  88% {
    opacity: 1
  }

  92%,
  100% {
    opacity: 0
  }
}

@keyframes flameFlicker {

  0%,
  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1
  }

  50% {
    transform: scaleY(1.18) translateY(-2px);
    opacity: .8
  }
}

.grill-steam path:nth-child(2) {
  animation-delay: .25s
}

.grill-steam path:nth-child(3) {
  animation-delay: .5s
}

/* Promise */
.promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, clamp(140px, 10vw, 190px)));
  gap: clamp(16px, 2.2vw, 38px);
  padding: 0 0 clamp(22px, 2vw, 38px);
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
  justify-items: center
}

@media (min-width:1600px) {
  .promise {
    max-width: 840px;
    grid-template-columns: repeat(3, minmax(0, clamp(180px, 12vw, 240px)));
    gap: clamp(24px, 2.5vw, 48px);
  }
}

@media (min-width:1920px) {
  .promise {
    max-width: 960px;
    grid-template-columns: repeat(3, minmax(0, clamp(200px, 13vw, 270px)));
    gap: clamp(30px, 3vw, 56px);
  }
}

.pmc {
  width: 100%;
  aspect-ratio: 223/262;
  container-type: inline-size;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
  overflow: hidden;
  padding: clamp(14px, 1.4vw, 26px) clamp(10px, 1vw, 18px) clamp(18px, 1.8vw, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.pmc img {
  width: 92%;
  height: auto;
  max-height: 62cqw;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 1;
  min-height: 0
}

.pmc .bar {
  width: 44px;
  height: 2px;
  border-radius: 20px;
  background: var(--teal);
  margin: 8px auto 0;
  flex-shrink: 0
}

.pmc h6 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 10cqw;
  color: var(--red);
  margin: 6px 0 4px;
  line-height: 1.25;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0
}

/* Footer */
footer {
  background: var(--navy);
  color: #fff;
  padding: clamp(28px, 2.8vw, 44px) 0 90px
}

footer h6 {
  font-weight: 700;
  font-size: clamp(14px, .95vw, 18px);
  margin: 0
}

footer a {
  display: block;
  font-size: clamp(12px, .85vw, 15px);
  color: rgba(255, 255, 255, .8);
  padding: 6px 0
}

footer a:hover {
  color: var(--teal)
}

.socials {
  display: flex;
  gap: 12px
}

.ftr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.ftr-logo {
  background: #fff;
  border-radius: 12px;
  padding: 8px 14px;
  display: inline-flex
}

.ftr-logo img {
  height: clamp(38px, 3vw, 48px);
  width: auto
}

.socials span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.socials i {
  font-size: 19px
}

.pay-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding: 0 14px
}

.pay-icons span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, .14);
  font-family: var(--fb);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .1px
}

.pay-icons img {
  height: 20px;
  width: auto;
  display: block
}

.pay-icons img.upi-ic {
  height: 34px;
  margin: -7px 0
}

.pay-icons img.rupay-ic {
  height: 26px;
  margin: -3px 0
}

.pay-icons img.amex-ic {
  height: 32px;
  margin: -6px 0
}

.ftr-sec {
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.ftr-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: clamp(30px, 4vw, 60px)
}

.ftr-cols .ftr-sec {
  border-top: none
}

.ftr-cols .hd h6 {
  margin-bottom: 14px
}

.shop-links {
  columns: 3;
  column-gap: 30px
}

.ftr-sec .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer
}

.ftr-sec .hd i {
  font-size: 18px
}

.ftr-links {
  padding-bottom: 14px
}

/* "Pair it up with" (cart drawers, account pages): why an Add didn't work */
.padd-err {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #b23a40
}

/* The four promises above the copyright: an icon each in a teal ring, on a
   softly lit card that lifts and lights its icon on hover. Four a row; two
   a row on tablets and phones. */
.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 26px
}

.trust>div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 1.2vw, 20px) clamp(14px, 1.4vw, 22px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  transition: transform .25s ease, border-color .25s ease, background .25s ease
}

.trust>div:hover {
  transform: translateY(-2px);
  border-color: rgba(102, 195, 208, .45);
  background: linear-gradient(135deg, rgba(102, 195, 208, .16), rgba(255, 255, 255, .04))
}

.trust i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .16);
  box-shadow: inset 0 0 0 1px rgba(102, 195, 208, .35);
  color: var(--teal);
  font-size: 22px;
  transition: background .25s ease, color .25s ease
}

.trust>div:hover i {
  background: var(--teal);
  color: var(--navy)
}

.trust span {
  min-width: 0
}

.trust b {
  display: block;
  font-family: var(--fb);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff
}

.trust small {
  display: block;
  margin-top: 3px;
  font-size: clamp(11px, .8vw, 13px);
  line-height: 1.35;
  color: rgba(255, 255, 255, .7)
}

@media (max-width:1024px) {
  .trust {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.copy {
  text-align: center;
  font-size: clamp(11px, .8vw, 14px);
  color: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 20px;
  padding-top: 16px
}

/* The floating WhatsApp button, as on bigsams.in: a 60px round green button with
   the WhatsApp logo (live's picture is a green gradient with a white logo; this
   is the same drawn in CSS), in the bottom-right corner at every width,
   growing a little under the pointer. Kept under the cart drawer and popups
   (z-index 60), which live's 9999 floats over. */
.chat-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: linear-gradient(135deg, #3fae46 0%, #80c168 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  transition: transform .3s ease
}

.chat-btn:hover,
.chat-btn:focus-visible {
  transform: scale(1.1)
}

@media (prefers-reduced-motion: reduce) {
  .chat-btn {
    transition: none
  }
}

@keyframes fishDrop {

  0%,
  14% {
    transform: translateY(-72px);
    opacity: 0
  }

  30% {
    transform: translateY(4px);
    opacity: 1
  }

  35% {
    transform: translateY(0);
    opacity: 1
  }

  92% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-72px);
    opacity: 0
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(10px)
  }

  25% {
    opacity: .95
  }

  70% {
    opacity: .95
  }

  100% {
    opacity: 0;
    transform: translateY(-16px)
  }
}

@keyframes steamGate {

  0%,
  36% {
    opacity: 0
  }

  40%,
  88% {
    opacity: 1
  }

  92%,
  100% {
    opacity: 0
  }
}

.pan-dish {
  animation: dishRise 4.8s ease-in-out infinite
}

.pan-fish {
  animation: fishDrop 4.8s ease-in infinite
}

.pan-steam {
  animation: steamGate 4.8s linear infinite
}

.pan-steam path {
  animation: steamRise 1.4s ease-in-out infinite
}

.pan-steam path:nth-child(2) {
  animation-delay: .25s
}

.pan-steam path:nth-child(3) {
  animation-delay: .5s
}

.btn-pill svg {
  overflow: visible
}

.btn-pill svg g {
  transform-box: view-box;
  transform-origin: 50% 50%
}

/* Side menu (mobile) */
.smenu-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 2000;
  display: none
}

.smenu {
  position: fixed;
  left: -370px;
  top: 0;
  bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--page);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .25);
  transition: left .3s
}

.smenu.open {
  left: 0
}

.smenu .top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px
}

.smenu .srch {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--navy);
  border-radius: 14px;
  height: 40px;
  padding: 0 14px;
  background: rgba(249, 250, 251, .5);
  font-size: 12px;
  color: #4a5565
}

.smenu .srch input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fb);
  font-size: 12px;
  color: var(--navy)
}

.smenu .srch .smenu-clear {
  color: var(--gray4);
  font-size: 18px;
  cursor: pointer
}

.smenu .list {
  flex: 1;
  overflow-y: auto
}

.scat .hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray2)
}

.scat.open .hd {
  background: #fff;
  border: 1px solid var(--gray2);
  border-bottom: none
}

.scat .ph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--navy);
  padding: 2px;
  background: #fff;
  flex-shrink: 0
}

.scat .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.scat .hd b {
  flex: 1;
  font-size: 18px;
  color: #1e2d6b
}

/* down arrow = opens the row's sub-links (flips up while open); right = a link */
.scat .arr {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--navy);
  transition: transform .2s ease
}

.scat.open .arr.iconoir-nav-arrow-down {
  transform: rotate(180deg)
}

.scat .subs {
  display: none;
  position: relative;
  padding: 2px 16px 16px 40px;
  background: #fff;
  border: 1px solid var(--gray2);
  border-top: none
}

.scat.open .subs {
  display: block
}

.scat .subs::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 2px;
  bottom: 16px;
  border-left: 1px dashed var(--navy)
}

.scat .subs a {
  display: block;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 16px;
  color: #1e2d6b;
  font-weight: 500;
  margin-bottom: 2px
}

.scat .subs a.on {
  background: var(--gray2);
  font-weight: 600
}

/* Responsive rules */
.only-m {
  display: none
}

@media (max-width:600px) {
  .only-d {
    display: none
  }

  .only-m {
    display: block
  }

  .tabs-outer {
    justify-content: flex-start
  }

  .hero .inner {
    max-width: 100%;
    justify-content: center;
    padding-top: 0
  }

  .hero .img {
    width: 100%
  }

  .hero .fade {
    background: linear-gradient(90deg, var(--ivory) 14%, rgba(252, 244, 244, .55) 30%, rgba(252, 244, 244, 0) 46%)
  }

  /* The wide text-backing gradient dominates the banner on mobile — narrow it to
     ~half so the overall gradient covers ~45-50% (per the design), keeping the
     left-aligned heading readable. */
  .hero .inner::before {
    width: 50%
  }

  /* No Shop now button on the phone banners: the whole banner is its link
     instead (the link, stretched unseen over the banner, under the dots). */
  .hero .hero-cta {
    position: static
  }

  .hero .btn-pill,
  .hero .btn-pill:hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0;
    color: transparent
  }

  .hero .btn-pill .hero-pan {
    display: none
  }

  /* Only the dots themselves stop a tap; the rest of their row is the link. */
  .hero-dots {
    z-index: 3;
    pointer-events: none
  }

  .hero-dots span {
    pointer-events: auto
  }

  /* Square phone banners (hero.php 'mimg') carry their own text: show the whole
     artwork, with just the dots on top. */
  .hero.has-m {
    min-height: 0;
    aspect-ratio: 1 / 1
  }

  .hero.has-m .img {
    object-fit: cover;
    object-position: center
  }

  .hero.has-m .fade,
  .hero.has-m .inner::before,
  .hero.has-m h1,
  .hero.has-m .hero-sub,
  .hero.has-m .feats,
  .hero.has-m .hero-scroll,
  .hero-dots .no-m {
    display: none
  }

  .hero.has-m .inner {
    position: absolute;
    inset: 0;
    min-height: 0;
    max-width: none;
    padding: 0
  }

  /* three columns, each figure stacked: icon, number, label, link */
  .stats {
    gap: 6px;
    padding: 20px 8px 16px;
    justify-content: center;
    align-items: stretch
  }

  .stat {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 6px 2px 8px
  }

  /* the tap area and focus pill stay inside the column */
  .stat::before,
  .stat .stat-go::after {
    inset: 0;
    border-radius: 16px
  }

  .stat .stx {
    align-items: center;
    text-align: center;
    gap: 3px
  }

  .stat .circ {
    width: 46px;
    height: 46px
  }

  .stat .circ i {
    font-size: 23px
  }

  .stat b {
    font-size: 21px
  }

  .stat small {
    font-size: 11px;
    margin-top: 1px;
    line-height: 1.3
  }

  /* inline, so a long link wraps under itself in the narrow column */
  .stat .stat-go {
    display: inline;
    white-space: normal;
    font-size: 10.5px;
    line-height: 1.3;
    margin-top: 3px;
    text-wrap: balance
  }

  .stat .stat-go i {
    display: inline-block;
    vertical-align: -.2em
  }

  .stat-div {
    height: auto;
    margin: 10px 0;
    opacity: .5
  }

  .stat-div::before,
  .stat-div::after {
    display: none
  }

  .promise {
    grid-template-columns: repeat(2, 1fr)
  }

  .cook .row-c {
    justify-content: flex-start
  }

  /* the desktop four-across rule also sets max-width and flex-basis, which
     otherwise squeeze the card to a quarter of the rail (72px on a 375px phone) */
  .cook-rail .ccard {
    width: 160px;
    max-width: none;
    flex: 0 0 160px
  }

  .cook .row-c {
    gap: 22px;
    padding-top: 0
  }

  .ccard {
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25)
  }

  .ccard .cshade {
    height: 68%;
    background: linear-gradient(180deg, rgba(20, 25, 55, 0), rgba(20, 25, 55, .9))
  }

  .ccard .cinfo {
    left: 11px;
    right: 11px;
    bottom: 11px
  }

  .ccard .cinfo h6 {
    font-family: var(--fb);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2
  }

  .ccard .cmeta {
    gap: 12px;
    margin-top: 6px;
    font-size: 11px
  }

  .ccard .fav {
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px
  }

  .ccard .fav i {
    font-size: 15px
  }

  /* mobile product card ~ React 0.82 scale */
  .pcw {
    width: 276px
  }

  .prod-rail,
  .cook-rail {
    gap: 30px !important
  }

  /* range cards */
  .rcard {
    width: 236px;
    height: 268px;
    --rpad: 9px;
    padding: var(--rpad);
    border-radius: 22px;
    border: none;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, .1)
  }

  .rimg,
  .rcard .rimg {
    border-radius: 15px
  }

  .rcard .lbl {
    padding: 14px 16px 18px;
    border-radius: 0 0 15px 15px
  }

  .rcard .lbl h5 {
    font-size: 24px
  }

  .rcard .lbl .bar {
    width: 66px
  }

  .rcard .spill {
    font-size: 12px;
    padding: 7px 14px
  }

  .rwash,
  .rcard .rwash {
    border-radius: 22px
  }

  /* explore range rail: room for the cards' shadow (an open card's reaches
     12px below, 8px each side), taken back out by the margin */
  #rangeRail,
  .range-rail {
    gap: 30px;
    padding: 6px 10px 14px;
    margin: -6px -10px -14px;
    scroll-padding-inline: 10px
  }

  /* quality promise 3-col */
  .promise {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    padding: 14px 12px 44px;
    max-width: none;
    margin: 0
  }

  .pmc {
    aspect-ratio: auto;
    padding: 8px 6px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08)
  }

  .pmc img {
    width: 100%;
    height: 64px;
    object-fit: contain;
    border-radius: 12px
  }

  .pmc .bar {
    width: 32px;
    height: 2px;
    margin: 6px auto 0
  }

  .pmc h6 {
    font-size: 10.5cqw;
    color: var(--red);
    margin-top: 5px;
    line-height: 1.2;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis
  }
}

@media (min-width:601px) {
  .promise {
    grid-template-columns: repeat(3, 1fr)
  }

  .ftr-links {
    display: block !important
  }

  .ftr-sec .hd {
    cursor: default
  }

  .ftr-sec .hd i {
    display: none
  }
}

@media (max-width:600px) {
  .ftr-cols {
    grid-template-columns: 1fr;
    gap: 0
  }

  .shop-links {
    columns: 2
  }

  .ftr-cols .ftr-sec {
    border-top: 1px solid rgba(255, 255, 255, .14)
  }

  .ftr-cols .hd h6 {
    margin-bottom: 0
  }

  .ftr-top {
    flex-wrap: wrap;
    border-bottom: none;
    padding-bottom: 12px;
    margin-bottom: 0
  }

  .trust {
    gap: 10px
  }

  /* the icon over the words, so the titles keep to one line */
  .trust>div {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 14px;
    text-align: center
  }

  .trust i {
    width: 38px;
    height: 38px;
    font-size: 18px
  }

  .trust b {
    font-size: 13px
  }

  .trust small {
    font-size: 11px
  }
}

/* Phone header: a compact delivery line, a rule under it, then a bigger logo.
   (.m-head only shows below 600px; the desktop header is untouched.) */
@media (max-width:600px) {
  .m-loc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    padding: 9px 16px 10px;
    border-bottom: 1px solid rgba(46, 53, 99, .12)
  }

  .m-loc .m-loc-pin {
    grid-row: 1 / span 2;
    font-size: 20px;
    color: var(--red)
  }

  .m-loc b {
    font-size: 14px;
    line-height: 1.25;
    gap: 4px;
    min-width: 0
  }

  .m-loc b i {
    font-size: 14px
  }

  .m-loc span {
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted);
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .m-row {
    padding-top: 10px
  }

  .m-row .logo,
  .m-row .custom-logo {
    height: clamp(34px, 11.4vw, 46px)
  }

  .m-search {
    margin-top: 12px
  }
}

@media (max-width:430px) {
  .pcw {
    width: 236px
  }
}

@media (max-width:360px) {
  .hero h1 {
    font-size: 25px
  }

  .pcw {
    width: 224px
  }
}

@media (max-width:330px) {
  .m-row .icons {
    gap: 12px
  }

  .hero h1 {
    font-size: 23px
  }

  .pcw {
    width: 210px
  }

  .rcard {
    width: 210px
  }
}

/* Product rails on phones (homepage, product page, recipe, Buy again): two
   and a half cards to a screen. The dots and the homepage tab bar shrink to
   match (below). */
@media (max-width:600px) {
  .rail.prod-rail {
    gap: 12px !important;
    padding-bottom: 16px
  }

  /* The rail shows its content box plus the 16px of shadow room on the right:
     2.5 cards and 2 gaps. */
  .rail.prod-rail .pcw,
  .buy-again .rail.prod-rail .pcw {
    width: calc((100% - 8px) / 2.5)
  }
}

/* Product cards in rails, smaller than the 236px-wide card they were drawn
   for: 2.5 to a phone screen, six a row on laptops and desktops. The card
   keeps its design, only smaller. Its photo, Add button and corners already
   scale with the card (cqw); the sizes it fixes in px are restated here in
   --u, one px of the 236px card (never more, so a wider card is as drawn).
   Words never go below about the phone category page's sizes (title 10px),
   so they stay readable. */
@media (max-width:600px), (min-width:1025px) and (hover:hover) and (pointer:fine) {
  .prod-rail .pcard {
    --u: min(calc(100cqw / 236), 1px)
  }

  .prod-rail .pcard .poff {
    top: calc(12 * var(--u));
    left: calc(12 * var(--u));
    padding: 1cqw calc(12 * var(--u));
    font-size: max(9px, 4.9cqw)
  }

  .prod-rail .pcard .pfav {
    top: calc(12 * var(--u));
    right: calc(12 * var(--u));
    width: max(22px, calc(30 * var(--u)));
    height: max(22px, calc(30 * var(--u)));
    padding: 0
  }

  .prod-rail .pcard .pfav i {
    font-size: max(11px, calc(15 * var(--u)))
  }

  .prod-rail .pcard .imgw .band span {
    padding: 0 calc(8 * var(--u))
  }

  .prod-rail .pcard .ttl {
    gap: calc(6 * var(--u))
  }

  .prod-rail .pcard .ttl h6 {
    font-size: max(10px, calc(14 * var(--u)))
  }

  .prod-rail .pcard .pc-varrow {
    margin-top: calc(16 * var(--u));
    min-height: max(18px, calc(28 * var(--u)))
  }

  .prod-rail .pcard .pc-var {
    gap: calc(6 * var(--u));
    padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
    font-size: max(9px, calc(13 * var(--u)));
    line-height: max(13px, calc(20 * var(--u)))
  }

  .prod-rail .pcard .pc-var i {
    font-size: max(10px, calc(15 * var(--u)))
  }

  /* one row, price beside Add, as on the full-size card */
  .prod-rail .pcard .prow {
    column-gap: calc(6 * var(--u));
    margin-top: calc(11 * var(--u));
    min-height: max(24px, calc(44 * var(--u)))
  }

  .prod-rail .pcard .pr {
    gap: 0 calc(4 * var(--u))
  }

  .prod-rail .pcard .prow .mrp2,
  .prod-rail .pcard .pr .off {
    font-size: max(9px, calc(12 * var(--u)))
  }

  .prod-rail .pcard .pr b {
    font-size: max(12px, calc(18 * var(--u)))
  }

  .prod-rail .pcard .btn-add,
  .prod-rail .pcard .qty {
    height: max(24px, 13.06cqw);
    width: max(52px, 34.5cqw);
    padding: 0 calc(6 * var(--u))
  }

  .prod-rail .pcard .btn-add {
    font-size: max(10px, 6.12cqw)
  }

  .prod-rail .pcard .qty button {
    font-size: max(11px, 6.5cqw)
  }

  .prod-rail .pcard .qty b {
    font-size: max(10px, 5.5cqw)
  }

  .prod-rail .pcard.oos .oos-txt {
    min-height: max(24px, calc(34 * var(--u)));
    font-size: max(10px, 5cqw)
  }

  .prod-rail .pcard.oos .prow .addw {
    margin-right: calc(12 * var(--u) - 4.94cqw)
  }

  /* the smaller heart and Add button keep a finger-sized tap area, unseen */
  .prod-rail .pcard .pfav::after,
  .prod-rail .pcard .btn-add::after {
    content: '';
    position: absolute;
    inset: -8px
  }

  .prod-rail .pcard .btn-add {
    position: relative
  }
}

@media (max-width:600px) {
  /* scroll dots, in step with the smaller cards */
  .scroll-dots {
    gap: 6px;
    padding: 12px 0
  }

  .scroll-dots span {
    width: 6px;
    height: 6px
  }

  .scroll-dots span.on {
    width: 18px
  }

  /* homepage tab bar: wider, smaller tabs, so the chosen tab, the next and
     half the one after show */
  /* all sized with the screen (tabs 13px on a 390px phone), so it's 2.5 tabs on every phone */
  .tabs-outer {
    gap: 1vw;
    padding: 0 0 12px
  }

  .tab-arrow {
    width: 8.2vw;
    height: 8.2vw
  }

  .tab-arrow i {
    font-size: 4.6vw
  }

  .tabs {
    flex: 1 1 auto;
    min-width: 0;
    gap: .5vw;
    padding: 1vw 1.3vw
  }

  .tabs button {
    padding: 1.55vw 2.6vw;
    font-size: 3.35vw
  }

  .tabs button.on {
    gap: 1.3vw;
    padding-left: 3.1vw;
    padding-right: 3.1vw
  }

  .tabs button img {
    height: 5vw
  }

  .tabs button.on img {
    width: 5vw
  }
}

/* Mobile search overlay — M: Search Page default/typed */
.msearch-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--page);
  z-index: 1300;
  overflow-y: auto
}

.msearch-ov.open {
  display: block
}

.msearch-bar {
  position: sticky;
  top: 0;
  background: var(--page);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  z-index: 2
}

.msearch-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 37px;
  border: 1px solid var(--navy);
  border-radius: 14px;
  background: rgba(249, 250, 251, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  padding: 0 16px 0 10px;
  box-sizing: border-box
}

.msearch-field>i {
  font-size: 19px;
  color: var(--navy);
  flex-shrink: 0
}

.msearch-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 12px;
  color: var(--navy)
}

.msearch-field input::placeholder {
  color: rgb(74, 85, 101)
}

.msearch-close {
  font-size: 22px;
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0
}

.msearch-body {
  padding: 16px 19px 40px
}

.ms-h {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--navy);
  margin: 0 0 14px
}

.ms-h:not(:first-child) {
  margin-top: 22px
}

.ms-h2 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--navy);
  margin: 0 0 6px;
  display: inline-block;
  border-bottom: 2px solid var(--red);
  padding-bottom: 4px
}

.ms-h2:not(:first-child) {
  margin-top: 20px
}

.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.msearch-body .chip {
  height: 32px;
  font-size: 12px;
  padding: 7px 18px 8px
}

.ms-cat {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-top: 12px
}

.ms-cat img {
  width: 70px;
  height: 61px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09);
  flex-shrink: 0
}

.ms-cat span {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1;
  color: var(--navy);
  font-weight: 500;
  text-transform: capitalize
}

.ms-prods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px
}

.ms-prod {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none
}

.ms-prod img {
  width: 70px;
  height: 61px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .09);
  flex-shrink: 0
}

.ms-prod span {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.2;
  color: var(--navy);
  font-weight: 500;
  text-transform: capitalize
}

@media (min-width:601px) {
  .msearch-ov {
    display: none !important
  }
}

/* Live REST results are rendered with the desktop .sp-* markup; make them fit
   the mobile overlay — single column with small thumbs. */
#msearchBody .sp-prods {
  grid-template-columns: 1fr;
  gap: 16px
}

#msearchBody .sp-prod img,
#msearchBody .sp-cat img {
  width: 70px;
  height: 61px
}

#msearchBody .sp-h,
#msearchBody .sp-h2 {
  font-size: 16px
}

/* ===== PLP ===== */
.plp-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(180px, 18vw, 260px);
  padding: clamp(24px, 3vw, 44px) clamp(16px, 5.2vw, 100px);
  display: flex;
  align-items: center
}

.plp-hero>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .62
}

.plp-hero .fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(174, 214, 220, .82) 12%, rgba(174, 214, 220, .42) 40%, rgba(174, 214, 220, 0) 60%)
}

@media (max-width:600px) {
  .plp-hero {
    min-height: 150px;
    padding: 20px 16px
  }

  .plp-hero>img {
    opacity: .35
  }

  .plp-hero .fade {
    background: rgba(255, 255, 255, .55)
  }

  .plp-hero h1,
  .plp-hero h1 span,
  .plp-hero p {
    position: relative;
    z-index: 2
  }

  .plp-hero .inner {
    max-width: 100%
  }

  .plp-hero h1,
  .plp-hero h1 span {
    color: var(--navy)
  }

  .plp-hero p {
    color: var(--navy)
  }
}

.plp-hero .inner {
  position: relative;
  z-index: 2;
  max-width: 560px
}

.plp-hero h1 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.1;
  margin: 0
}

.plp-hero h1 span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: plpType .26s ease forwards
}

@keyframes plpType {
  0% {
    opacity: 0;
    transform: translateY(10px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.plp-hero .bar {
  width: var(--barw, 150px);
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: 10px 0 18px
}

.plp-hero p {
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 500;
  color: var(--navy);
  max-width: 480px;
  margin: 0
}

/* no description under the title: the title and its bar sit in the middle of the band */
.plp-hero-plain .bar {
  margin-bottom: 0
}

/* Category with a "Listing page banner": the picture already has the title
   and description in it, so it is shown whole (its phone version on phones),
   and the h1 is kept for screen readers and search engines only. */
.plp-hero.is-banner {
  display: block;
  min-height: 0;
  padding: 0
}

.plp-hero.is-banner picture {
  display: block
}

.plp-hero.is-banner img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1
}

.plp-hero.is-banner h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

.plp-body {
  display: flex;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(24px, 2.6vw, 34px) clamp(16px, 5.2vw, 100px) 50px;
  align-items: flex-start
}

.fcol {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.fchk {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 2px 0
}

.fbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid var(--gray4);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center
}

.fbox i {
  font-size: 10px;
  color: #fff;
  display: none
}

.fchk.on .fbox {
  border: none;
  background: var(--teal)
}

.fchk.on .fbox i {
  display: block
}

.fchk>span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy)
}

/* Same gap as the list it sits in: 10px in the sidebar, 20px in the phone sheet */
.cat-more-list {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.view-all-cats-btn {
  background: transparent;
  border: none;
  padding: 6px 0;
  margin-top: 4px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-align: left;
  display: inline-block;
  transition: color 0.2s ease;
}

.view-all-cats-btn:hover {
  color: var(--navy);
  text-decoration: underline;
}

.feat-col {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.feat-row {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer
}

.feat-row.on .fbox {
  border: none;
  background: var(--teal)
}

.feat-row.on .fbox i {
  display: block
}

.feat-ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.feat-ic i {
  font-size: 21px;
  color: var(--teal)
}

.feat-tx {
  flex: 1
}

.feat-tx b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy)
}

.feat-tx small {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px
}

.plp-main {
  flex: 1;
  min-width: 0
}

.plp-crumb-top {
  padding: 20px clamp(16px, 5.2vw, 100px) 20px;
  font-size: 12px;
  color: var(--muted)
}

.plp-crumb-top .bc a {
  color: var(--teal);
  text-decoration: none
}

.plp-crumb-top .bc b {
  color: var(--navy);
  font-weight: 600
}

.plp-sort {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gray2);
  border-radius: 10px;
  padding: 10px 44px 10px 16px;
  font-size: 15px;
  font-family: var(--fb);
  color: var(--navy);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e3563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  cursor: pointer
}

.plp-count {
  font-size: 15px;
  color: var(--navy);
  font-weight: 600;
  margin: 0;
  white-space: nowrap
}

/* The filters, above the grid: Category, Price and Features dropdowns of tick
   boxes on the left (each button shows how many are ticked), the result count
   and sort on the right. Phones keep the filter sheet (.mfp) instead. */
.plp-bar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 0 0 clamp(18px, 1.6vw, 26px)
}

.plp-dds {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px
}

.plp-bar-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto
}

.pdd {
  position: relative
}

.pdd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--gray2);
  border-radius: 10px;
  background: #fff;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .15s
}

.pdd-btn:hover,
.pdd.open .pdd-btn,
.pdd.has .pdd-btn {
  border-color: var(--teal)
}

.pdd-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px
}

.pdd-btn>i:first-child {
  font-size: 16px;
  color: var(--teal)
}

.pdd-btn .pdd-arr {
  font-size: 14px;
  transition: transform .2s
}

.pdd.open .pdd-arr {
  transform: rotate(180deg)
}

.pdd-n {
  display: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center
}

.pdd.has .pdd-n {
  display: inline-block
}

/* A dropdown shows its whole list at once, in columns of up to seven (fewer
   rows when that evens them out). plp-app.js fitMenu() sets the rows (--rows),
   adding rows where the screen is too narrow for the columns, and keeps the
   open list inside the screen; it only scrolls inside when a short screen
   can't hold it. */
.pdd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2;
  width: max-content;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gray2) transparent;
  padding: 16px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(11, 31, 59, .16), 0 2px 6px rgba(11, 31, 59, .06)
}

.pdd-menu[hidden] {
  display: none
}

.pdd-menu>.fcol,
.pdd-menu>.feat-col {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 7), auto);
  gap: 10px 28px
}

/* every category in the columns: no "View All" here (the phone sheet keeps it) */
.pdd-menu .cat-more-list {
  display: contents !important
}

.pdd-menu .view-all-cats-btn {
  display: none
}

.pdd-menu .fchk,
.pdd-menu .feat-row {
  border-radius: 6px
}

.pdd-menu .fchk:focus-visible,
.pdd-menu .feat-row:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

.pdd-menu .fchk>span:last-child {
  white-space: nowrap
}

.pdd-menu>.feat-col {
  gap: 12px 28px
}

.pdd-menu .feat-tx small {
  white-space: nowrap
}

.pdd-menu .feat-ic {
  width: 34px;
  height: 34px
}

.pdd-menu .feat-tx b {
  font-size: 14px
}

.pdd-menu .feat-tx small {
  font-size: 12px
}

/* A dropdown's header: its name and a × to close it (stays put if a short
   screen makes the list scroll) */
.pdd-hd {
  position: sticky;
  top: -16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -16px -20px 14px;
  padding: 10px 10px 10px 20px;
  background: #fff;
  border-bottom: 1px solid var(--gray2)
}

.pdd-hd b {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy)
}

.pdd-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s
}

.pdd-x:hover {
  background: #f3f4f6
}

.pdd-x:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px
}

/* The filters in use, under the bar: a chip each (its dropdown's icon, its
   name, a × to take it off), then Clear All. Phones: one row that scrolls
   sideways. */
.plp-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: -6px 0 clamp(16px, 1.4vw, 22px)
}

.plp-chips[hidden] {
  display: none
}

.plp-chips-lbl {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap
}

.plp-chips-list {
  display: contents
}

.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: rgba(102, 195, 208, .12);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s
}

.pchip>i:first-child {
  font-size: 14px;
  color: var(--teal)
}

.pchip>i:last-child {
  font-size: 14px;
  opacity: .65
}

.pchip:hover {
  background: rgba(102, 195, 208, .26)
}

.pchip:hover>i:last-child {
  opacity: 1;
  color: var(--red)
}

.pchip:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

.plp-clear-all {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap
}

.plp-clear-all:hover {
  text-decoration: underline
}

@media (max-width:600px) {
  .plp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -8px calc(-1 * clamp(16px, 5.2vw, 100px)) 16px;
    padding: 0 clamp(16px, 5.2vw, 100px) 2px;
    scrollbar-width: none
  }

  .plp-chips::-webkit-scrollbar {
    display: none
  }

  .plp-chips-lbl {
    display: none
  }

  .pchip,
  .plp-clear-all {
    flex-shrink: 0
  }

  .pchip {
    height: 30px;
    font-size: 12px
  }
}

.plp-bar .plp-sort {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0
}

.plp-sort:focus,
.pmb-sort:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px
}

/* Rows sit further apart than columns: the card's drop shadow reaches 35-60px
   below it, so a row gap under ~40px let it run into the next row's cards. */
/* The grid has the page's full width (the filters are dropdowns above it):
   tablets four cards a row held landscape, three upright; big touch screens
   five; laptops and desktops six, further below with the cards' sizes;
   phones two. */
.plp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 2.4vw, 40px);
  row-gap: clamp(40px, 3.6vw, 56px)
}

@media (max-width:900px) {
  .plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (min-width:1251px) {
  .plp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }
}

.plp-grid .pcw {
  width: 100%;
  max-width: 372px;
  justify-self: center
}

/* No products for the filters ticked: one message across the whole grid */
.plp-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(32px, 4vw, 64px) 16px;
  text-align: center;
  color: var(--navy)
}

.plp-empty i {
  font-size: 34px;
  color: var(--teal)
}

.plp-empty p {
  margin: 0;
  font-size: 16px;
  font-weight: 500
}


.plp-more {
  text-align: center;
  padding: 38px 0 6px
}

.plp-more a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: clamp(18px, 1.4vw, 24px);
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer
}

.plp-spin {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(11, 31, 58, .15);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: plpspin .7s linear infinite
}

@keyframes plpspin {
  to {
    transform: rotate(360deg)
  }
}

/* coupon banner */
.coupon-wrap {
  padding: clamp(20px, 2vw, 32px) clamp(16px, 5.2vw, 150px)
}

.coupon {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 50px);
  background: linear-gradient(90deg, rgba(102, 195, 208, .20) 0%, var(--ivory) 42%, var(--ivory) 60%, rgba(201, 168, 118, .22) 100%);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 60px);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(46, 53, 99, .10);
  flex-wrap: nowrap
}

.coupon .cwm {
  position: absolute;
  left: -30px;
  bottom: -40px;
  width: 240px;
  opacity: .12;
  pointer-events: none
}

.coupon .notch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--page)
}

.coupon .notch.l {
  left: -26px
}

.coupon .notch.r {
  right: -26px
}

.coupon .cleft {
  flex-shrink: 0;
  position: relative;
  padding-left: 40px
}

.coupon .cbig {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  background: linear-gradient(90deg, #e31e24, #66c3d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.coupon .csub {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--navy);
  margin-top: 10px
}

.coupon .cmid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-left: auto
}

.coupon .code {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 34px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .09)
}

.coupon .code .lbl2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.08;
  color: var(--navy);
  letter-spacing: 1px
}

.coupon .code .sep {
  align-self: stretch;
  border-left: 2px dashed var(--gray4)
}

.coupon .code .val {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--navy);
  letter-spacing: 2px
}

.coupon .cterms {
  font-size: 17px;
  color: var(--muted)
}

/* The small print, just under the terms. */
.coupon .cfine {
  margin-top: -8px;
  font-size: 13px;
  color: var(--muted)
}

.coupon .cimg {
  flex-shrink: 0;
  position: relative;
  width: 118px;
  height: 118px;
  margin-right: 60px
}

.coupon .cimg img {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14)
}

@media (max-width:600px) {
  .plp-body {
    flex-direction: column;
    align-items: stretch
  }

  .plp-main {
    width: 100%
  }

  .plp-count {
    display: none
  }

  .plp-bar {
    display: none
  }

  .fside-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    /* over the sticky phone header (.m-head, 1000), as is the sheet */
    z-index: 1040;
    display: none
  }

  .plp-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 32px
  }

  .coupon {
    justify-content: center;
    text-align: center;
    gap: 16px
  }

  .coupon .cleft {
    padding-left: 0;
    min-width: 0
  }

  .coupon .cimg {
    margin-right: 0
  }

  .coupon .cmid {
    margin-left: 0
  }
}

@media (max-width:1000px) {
  .coupon {
    justify-content: center;
    gap: 20px;
    padding: clamp(24px, 3vw, 36px) clamp(18px, 2.5vw, 32px)
  }

  .coupon .cleft {
    padding-left: 0;
    min-width: 0
  }

  .coupon .cmid {
    margin-left: auto;
    min-width: 0
  }

  .coupon .cimg {
    margin-right: 0
  }
}

@media (max-width:600px) {
  .coupon {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "a c" "b c";
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
    /* 16px: room for the code box's and photo's shadows (the strip clips) */
    padding: 18px 16px;
    text-align: left
  }

  .coupon .cleft {
    grid-area: a;
    padding-left: 0;
    min-width: 0;
    position: relative;
    z-index: 2
  }

  .coupon .cmid {
    grid-area: b;
    align-items: flex-start;
    margin-left: 0;
    min-width: 0;
    position: relative;
    z-index: 2
  }

  .coupon .cimg {
    grid-area: c;
    align-self: center;
    margin-right: 0;
    position: relative;
    z-index: 2
  }

  .coupon .cbig {
    font-size: 22px
  }

  .coupon .csub {
    font-size: 14px;
    margin-top: 2px
  }

  .coupon .cimg,
  .coupon .cimg img {
    width: 90px;
    height: 90px
  }

  .coupon .cimg img {
    border-width: 3px
  }

  .coupon .code {
    padding: 8px 12px;
    gap: 10px;
    border-radius: 12px;
    max-width: 100%
  }

  .coupon .code .lbl2 {
    font-size: 10px
  }

  .coupon .code .val {
    font-size: 15px;
    letter-spacing: 1px
  }

  .coupon .cterms {
    font-size: 10.5px
  }

  .coupon .cfine {
    margin-top: -6px;
    font-size: 9.5px
  }
}

@media (max-width:560px) {
  .plp-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 32px
  }
}

@media (max-width:600px) {
  .pcard .ttl h6 {
    font-size: 14px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em*3)
  }

  .pcard .pc-varrow {
    margin-top: 16px
  }

  .pcard .prow {
    margin-top: 11px
  }

  .pcard .bd {
    padding-bottom: 5.4cqw
  }

  .plp-grid .pcard .ttl h6 {
    font-size: 11px;
    display: block;
    overflow: visible;
    -webkit-line-clamp: none
  }

  .pcard .imgw .band span,
  .plp-grid .pcard .imgw .band span {
    height: var(--strip);
    min-height: 0;
    padding: 0 8px;
    line-height: 1.2
  }
}

.plp-mbar {
  display: none
}

@media (max-width:600px) {
  .plp-mbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px clamp(16px, 4vw, 24px) 6px
  }

  .pmb-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 14px;
    background: var(--page);
    width: auto;
    height: 34px;
    padding: 0 10px;
    justify-content: center;
    color: var(--navy)
  }

  .pmb-filter i:first-child {
    font-size: 17px
  }

  .pmb-filter i:last-child {
    font-size: 10px
  }

  .pmb-count {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #737b8c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .pmb-sort {
    width: auto;
    flex-shrink: 0;
    border-radius: 14px;
    height: 34px;
    font-size: 14px;
    padding: 6px 34px 6px 12px
  }

  .psm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 12px;
    font-family: var(--fb);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--navy);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2
  }

  .psm-head i {
    font-size: 22px;
    cursor: pointer;
    color: var(--navy)
  }

  .psm-apply {
    display: block;
    width: 100%;
    margin-top: 16px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 12px;
    height: 42px;
    font-weight: 600;
    font-size: 14px
  }

  body.fdrawer-open {
    overflow: hidden
  }
}

/* Mobile filter panel — figma "MobileFilterPanel" 402x983 */
.mfp {
  display: none
}

@media (max-width:600px) {
  .mfp {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 88dvh;
    max-height: 88dvh;
    z-index: 1050;
    background: var(--page);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .18);
    transform: translateY(105%);
    transition: transform .3s ease;
    overflow: hidden
  }

  .mfp.open {
    transform: translateY(0)
  }

  .mfp-top {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 14px 10px;
    background: var(--page);
    border-bottom: .8px solid #E5E7EB
  }

  .mfp-top a {
    font-family: var(--fb);
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #E31E24;
    text-decoration: underline
  }

  .mfp-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch
  }

  .mfp-tabs {
    width: 170px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E7EB;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .03);
    background: var(--page)
  }

  .mfp-tab {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 46px;
    flex-shrink: 0;
    padding: 0 5px;
    border: 1px solid #E5E7EB;
    border-width: 0 0 1px;
    background: transparent;
    font-family: var(--fb);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1E2D6B;
    text-align: left
  }

  .mfp-tab.on {
    background: #fff;
    font-weight: 600
  }

  .mfp-tab i {
    font-size: 18px;
    color: #66C3D0;
    flex-shrink: 0;
    width: 20px;
    text-align: center
  }

  .mfp-tab .rs {
    font-family: Arimo, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #66C3D0;
    width: 20px;
    text-align: center;
    flex-shrink: 0
  }

  .mfp-pane {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 9px 14px 16px 22px
  }

  .mfp-sec {
    display: none
  }

  .mfp-sec.on {
    display: block
  }

  .mfp .fchk {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0;
    cursor: pointer
  }

  .mfp .feat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    cursor: pointer
  }

  .mfp #mCatList,
  .mfp #mFeatList,
  .mfp #mPriceList {
    display: flex;
    flex-direction: column;
    gap: 20px
  }

  .mfp .fbox {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1.6px solid #D1D5DB;
    background: var(--page);
    display: flex;
    align-items: center;
    justify-content: center
  }

  .mfp .fbox i {
    font-size: 11px;
    color: var(--page);
    display: none
  }

  .mfp .fchk.on .fbox,
  .mfp .feat-row.on .fbox {
    border-color: #2E3563;
    background: #2E3563
  }

  .mfp .fchk.on .fbox i,
  .mfp .feat-row.on .fbox i {
    display: block
  }

  .mfp .fchk>span:last-child {
    font-family: var(--fb);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #6B7280;
    white-space: nowrap
  }

  .mfp .fchk[data-all]>span:last-child,
  .mfp .fchk.on>span:last-child {
    font-weight: 600;
    color: #1E2D6B
  }

  .mfp .feat-row .feat-ic {
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(102, 195, 208, .16);
    align-items: center;
    justify-content: center;
    flex-shrink: 0
  }

  .mfp .feat-row .feat-ic i {
    font-size: 15px;
    color: #66C3D0
  }

  .mfp .feat-row .feat-tx b {
    display: block;
    font-family: var(--fb);
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #1E2D6B
  }

  .mfp .feat-row .feat-tx small {
    display: block;
    font-family: var(--fb);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #6B7280
  }

  .mfp-foot {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 10px 18px 14px;
    background: var(--page)
  }

  .mfp-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 30px;
    background: #E31E24;
    color: var(--page);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .1);
    font-family: var(--fb);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 20px;
    letter-spacing: .3px
  }

  .mfp-btn.ghost {
    background: #fff;
    color: #E31E24
  }
}

/* PLP product card — figma "Desktop card component" 336x507 (cqw of card width) */
.plp-grid .pcard {
  min-height: 0;
  height: auto;
  border-radius: min(8.93cqw, 26px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .10), 0 30px 50px -20px rgba(0, 0, 0, .18)
}

.plp-grid .pcard .imgw .band {
  border-radius: min(8.93cqw, 26px)
}

.plp-grid .pcard .imgw .band span {
  height: var(--strip);
  min-height: 0;
  padding: 0 10px;
  left: 0;
  right: 0;
  bottom: 0
}

.plp-grid .pcard .imgw img {
  border-radius: min(8.93cqw, 26px)
}


.plp-grid .pcard .bd {
  padding: clamp(10px, 4.5cqw, 16px) clamp(12px, 6cqw, 20px) clamp(12px, 6cqw, 18px)
}

.plp-grid .pcard .prow {
  min-height: min(17cqw, 48px);
  grid-template-rows: auto;
  align-items: center;
  padding-top: 3px
}

.plp-grid .pcard .ttl {
  margin-bottom: 5px
}

.plp-grid .pc-varrow {
  margin-top: auto
}

.plp-grid .pcard .prow .addw {
  align-self: center;
  grid-row: 1
}

.plp-grid .pcard.oos .prow .addw {
  grid-column: 1/3;
  grid-row: 1
}

.plp-grid .pcard .pr {
  flex-wrap: nowrap;
  align-items: center
}

.plp-grid .pcard .pr .mrp2 {
  flex: 0 0 auto;
  margin-left: 2px;
  align-self: center
}

.plp-grid .pcard .ttl h6 {
  flex: 1;
  min-width: 0;
  width: 100%;
  font-family: var(--fb);
  /* semibold and a size up, so the names stand out */
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  min-height: 0
}

@media (min-width:601px) {
  .plp-grid .pcard .ttl h6 {
    min-height: calc(1.35em*3)
  }
}

.plp-grid .pcard .poff {
  min-height: 9.52cqw;
  height: auto;
  line-height: 1;
  border-radius: 2.38cqw;
  padding: 3px 2.4cqw;
  font-size: clamp(11px, 4.9cqw, 15px)
}

.plp-grid .pcard .pr b {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(14px, 7cqw, 18px);
  line-height: 1.1
}

.plp-grid .pcard .pr .off {
  font-family: var(--fb);
  font-weight: 400;
  font-size: clamp(10px, 4.6cqw, 12px);
  color: var(--navy)
}

.plp-grid .pcard .prow .mrp2 {
  font-family: var(--fb);
  font-weight: 300;
  font-size: clamp(10px, 4.6cqw, 12px);
  color: #99a1af;
  text-decoration: line-through
}

.plp-grid .pcard .pr {
  gap: 0 3px
}

.plp-grid .pcard .pr .off {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

.plp-grid .pcard .btn-add,
.plp-grid .pcard .qty {
  width: min(calc(34cqw + 10px), 132px);
  min-width: 78px;
  height: auto;
  min-height: min(14.88cqw, 38px);
  line-height: 1;
  padding: 6px 6px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(11px, 5.95cqw, 16px);
  box-shadow: none
}

.plp-grid .pcard .qty button {
  font-size: clamp(12px, 6.8cqw, 17px)
}

.plp-grid .pcard .qty b {
  font-size: clamp(11px, 5.95cqw, 16px);
  font-weight: 600
}

@media (min-width:601px) {

  .plp-grid .pcard .btn-add,
  .plp-grid .pcard .qty {
    min-height: min(18cqw, 38px);
    padding: 7px 6px
  }

  .plp-grid .pcard.oos .oos-txt {
    min-height: min(18cqw, 38px)
  }
}

@media (max-width:600px) {
  .plp-grid .pcard .prow {
    align-items: center
  }

  .plp-grid .pcard .prow .addw {
    align-self: center
  }

  .plp-grid .pcard .btn-add,
  .plp-grid .pcard .qty {
    width: auto;
    min-width: 64px;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px
  }

  .plp-grid .pcard.oos .oos-txt {
    min-height: 34px;
    font-size: clamp(11px, 5.5cqw, 13px)
  }

  .plp-grid .pcard .qty button {
    font-size: 14px
  }

  .plp-grid .pcard .qty b {
    font-size: 13px
  }

  .plp-grid .pcard .qty {
    padding: 0 8px
  }

  .plp-grid .pcard .qty button {
    flex: 0 0 18px;
    width: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1
  }

  .plp-grid .pcard .qty b {
    flex: 1;
    min-width: 0;
    text-align: center
  }

  .plp-grid .pcard .qty .mn i {
    font-size: 1em;
    vertical-align: 0
  }
}

/* Category pages on laptops and desktops (a mouse or trackpad): six cards a
   row. The card keeps the look it had at
   195px wide (four a row beside the old filter column), only smaller: its
   photo, Add button and corners already scale with the card (cqw); the sizes
   it fixes in px are restated here in --u, one px of that 195px card (never
   more, so a wider card is as it was). Words stay at least the homepage
   cards' sizes (title 10px). */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
  .plp-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(16px, 1.6vw, 32px);
    row-gap: clamp(30px, 2.8vw, 54px)
  }

  .plp-grid .pcw {
    max-width: none
  }

  .plp-grid .pcard {
    --u: min(calc(100cqw / 195), 1px)
  }

  .plp-grid .pcard .poff {
    top: calc(12 * var(--u));
    left: calc(12 * var(--u));
    padding: calc(3 * var(--u)) 2.4cqw;
    font-size: clamp(max(9px, calc(11 * var(--u))), 4.9cqw, 15px)
  }

  .plp-grid .pcard .pfav {
    top: calc(12 * var(--u));
    right: calc(12 * var(--u));
    width: max(22px, calc(30 * var(--u)));
    height: max(22px, calc(30 * var(--u)));
    padding: 0
  }

  .plp-grid .pcard .pfav i {
    font-size: max(11px, calc(15 * var(--u)))
  }

  .plp-grid .pcard .imgw .band span {
    padding: 0 calc(10 * var(--u))
  }

  .plp-grid .pcard .bd {
    padding: clamp(calc(10 * var(--u)), 4.5cqw, 16px) clamp(calc(12 * var(--u)), 6cqw, 20px) clamp(calc(12 * var(--u)), 6cqw, 18px)
  }

  .plp-grid .pcard .ttl {
    gap: calc(6 * var(--u));
    margin-bottom: calc(5 * var(--u))
  }

  .plp-grid .pcard .ttl h6 {
    font-size: max(11px, calc(14 * var(--u)))
  }

  .plp-grid .pcard .pc-varrow {
    min-height: max(18px, calc(28 * var(--u)))
  }

  .plp-grid .pcard .pc-var {
    gap: calc(6 * var(--u));
    padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
    font-size: max(9px, calc(13 * var(--u)));
    line-height: max(13px, calc(20 * var(--u)))
  }

  .plp-grid .pcard .pc-var i {
    font-size: max(10px, calc(15 * var(--u)))
  }

  .plp-grid .pcard .prow {
    padding-top: calc(3 * var(--u));
    column-gap: calc(6 * var(--u))
  }

  .plp-grid .pcard .pr {
    gap: 0 calc(3 * var(--u))
  }

  .plp-grid .pcard .pr .off,
  .plp-grid .pcard .prow .mrp2 {
    font-size: clamp(max(9px, calc(10 * var(--u))), 4.6cqw, 12px)
  }

  .plp-grid .pcard .pr b {
    font-size: clamp(max(11px, calc(14 * var(--u))), 7cqw, 18px)
  }

  .plp-grid .pcard .btn-add,
  .plp-grid .pcard .qty {
    min-width: calc(78 * var(--u));
    padding: calc(7 * var(--u)) calc(6 * var(--u));
    font-size: clamp(max(9.5px, calc(11 * var(--u))), 5.95cqw, 16px)
  }

  .plp-grid .pcard .qty button {
    font-size: clamp(max(10px, calc(12 * var(--u))), 6.8cqw, 17px)
  }

  .plp-grid .pcard .qty b {
    font-size: clamp(max(9.5px, calc(11 * var(--u))), 5.95cqw, 16px)
  }

  .plp-grid .pcard.oos .oos-txt {
    font-size: clamp(max(10px, calc(12 * var(--u))), 5.2cqw, 15px)
  }

  .plp-grid .pcard.oos .prow .addw {
    margin-right: calc(12 * var(--u) - 4.94cqw)
  }
}

/* ===== My Account — figma "D: My Accounts" / "M: My orders" ===== */
.acct-wrap {
  padding: clamp(20px, 2vw, 38px) 0 clamp(40px, 4vw, 76px)
}

.acct-inner {
  padding: 0 clamp(16px, 5.2vw, 100px)
}

.acct-title {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 40px);
  color: var(--navy);
  margin: 0 0 clamp(16px, 1.6vw, 30px)
}

.acct-body {
  display: flex;
  gap: clamp(20px, 2.3vw, 44px);
  align-items: flex-start
}

.acct-side {
  width: clamp(260px, 25vw, 484px);
  flex-shrink: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  overflow: hidden
}

.acct-side-hd {
  background: var(--navy);
  padding: clamp(24px, 2.2vw, 40px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.acct-avatar {
  width: clamp(66px, 6vw, 110px);
  height: clamp(66px, 6vw, 110px);
  border-radius: 50%;
  background: #fff;
  border: 2.4px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(26px, 2.5vw, 48px);
  color: var(--navy)
}

.acct-name {
  margin-top: 12px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(16px, 1.1vw, 20px);
  color: #fff
}

.acct-email {
  margin-top: 4px;
  font-family: var(--fb);
  font-size: clamp(12px, .83vw, 15px);
  color: rgba(255, 255, 255, .6)
}

.acct-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0
}

.acct-nav button,
.acct-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  border: none;
  background: transparent;
  border-left: 4px solid transparent;
  padding: 16px 32px;
  font-family: var(--fb);
  font-size: clamp(14px, .9vw, 16px);
  color: #555;
  cursor: pointer;
  text-align: left;
  text-decoration: none
}

.acct-nav button i,
.acct-nav a i {
  font-size: 22px;
  color: #999
}

.acct-nav button.on,
.acct-nav a.on {
  background: rgba(46, 53, 99, .08);
  border-left-color: var(--teal);
  color: var(--navy);
  font-weight: 600
}

.acct-nav button.on i,
.acct-nav a.on i {
  color: var(--teal)
}

.acct-nav button:hover:not(.on),
.acct-nav a:hover:not(.on) {
  background: #f7f7f7;
  color: #555
}

.acct-tabbar {
  display: none
}

@media (max-width:1000px) {
  .acct-side {
    display: none
  }
}

@media (min-width:1001px) {
  .acct-tabbar {
    display: none !important
  }
}

.acct-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.acct-panel {
  display: none
}

.acct-panel.on {
  display: block
}

.acct-ord-hd {
  text-align: center;
  padding: 0 0 clamp(12px, 1.5vw, 24px)
}

.acct-ord-hd h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 44px);
  color: var(--navy);
  margin: 0
}

.acct-ord-hd h2 .hl-teal {
  /* color: var(--teal); */
  color: var(--navy);
}

.acct-ord-hd .bar {
  width: 100px;
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: 10px auto 0
}

.acct-ord-hd p {
  margin: 8px 0 0;
  font-family: var(--fb);
  font-size: clamp(13px, .9vw, 15px);
  color: var(--muted)
}

.acct-ord-hd.dark h2 {
  color: #fff
}

.acct-ord-hd.dark p {
  color: #fff
}

.ord-list {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.ord-card {
  border-radius: 20px;
  background: #fafafa;
  border: .8px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  padding: clamp(16px, 1.4vw, 26px)
}

.ord-top {
  display: flex;
  gap: 16px;
  align-items: center
}

.ord-thumbs {
  display: flex;
  flex-shrink: 0
}

.ord-thumbs img {
  width: clamp(36px, 3.4vw, 58px);
  height: clamp(36px, 3.4vw, 58px);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px #fff;
  border-left: 2px solid #fff;
  margin-left: -14px
}

.ord-thumbs img:first-child {
  border-left: none
}

.ord-thumbs img:first-child {
  margin-left: 0
}

.ord-meta {
  min-width: 0
}

.ord-num {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(15px, 1vw, 17px);
  color: var(--navy)
}

.ord-meta small {
  display: block;
  margin-top: 4px;
  font-family: var(--fb);
  font-size: clamp(11px, .78vw, 13px);
  color: #888;
  text-wrap: pretty
}

.ord-status {
  flex-shrink: 0;
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: #e8f5eb;
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(11px, .78vw, 13px);
  color: #3d9b4f;
  white-space: nowrap
}

.ord-status.delivered {
  background: #e6effc;
  color: #2f6fd1
}

.ord-status.cancelled {
  background: #fde8e8;
  color: var(--red)
}

.ord-info {
  margin-top: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 40px;
  font-family: var(--fb);
  font-size: clamp(12px, .83vw, 14px);
  color: #999
}

.ord-info span {
  white-space: nowrap
}

.ord-info span b {
  font-weight: 600;
  color: #666;
  margin-right: 4px
}

.ord-items {
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px
}

.ord-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb);
  font-size: clamp(12px, .83vw, 14px);
  color: #1a1a1a;
  white-space: nowrap
}

.ord-item .qty {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #888
}

.ord-foot {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ord-total {
  font-family: var(--fb);
  font-size: clamp(12px, .83vw, 14px);
  color: #999
}

.ord-total b {
  color: var(--navy);
  font-weight: 700
}

.ord-inv {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(13px, .9vw, 14px);
  color: var(--navy);
  cursor: pointer
}

.ord-inv:hover {
  background: #d8dbe0
}

.acct-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  padding: clamp(24px, 2.5vw, 48px)
}

.acct-card-hd {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(20px, 1.35vw, 26px);
  color: var(--navy);
  margin: 0 0 clamp(20px, 2vw, 40px)
}

.acct-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.fld.wide {
  grid-column: span 1
}

.fld label {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  color: #333
}

.fld label .req {
  color: var(--red)
}

.fld input,
.fld select {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  background: #f5f5f5;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
  padding: 0 16px;
  font-family: var(--fb);
  font-size: 15px;
  color: #333
}

.acct-update {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  margin-top: 28px;
  align-self: center;
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  height: 54px;
  padding: 0 40px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer
}

.acct-update:hover {
  filter: brightness(1.06)
}

.fld.full {
  grid-column: 1/-1
}

.fld small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: -2px
}

.acct-personal .acct-pw {
  margin-top: clamp(24px, 2.4vw, 38px);
  padding-top: clamp(22px, 2.2vw, 32px);
  border-top: 1px solid #ececec
}

.acct-sub-hd {
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(15px, 1vw, 18px);
  color: var(--navy);
  margin: 0 0 clamp(16px, 1.6vw, 22px)
}

.acct-personal .acct-update {
  margin-top: clamp(24px, 2.4vw, 36px);
  align-self: flex-start
}

.acct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 0
}

.acct-empty i {
  font-size: 40px;
  color: var(--teal)
}

.acct-empty p {
  font-family: var(--fb);
  color: var(--muted);
  margin: 0
}

.acct-empty .acct-update {
  margin-top: 14px
}

/* Manage Address — saved-address tiles (woocommerce/myaccount/my-address.php) */
.addr-lede {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--muted);
  margin: calc(-1 * clamp(8px, 1vw, 20px)) 0 clamp(18px, 1.6vw, 26px)
}

.addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px
}

.addr-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 20px;
  background: #fafafa;
  border: .8px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  padding: clamp(16px, 1.4vw, 26px)
}

.addr-card.is-empty {
  background: #fff;
  border: 1.5px dashed #d9dce1;
  box-shadow: none
}

.addr-hd {
  display: flex;
  align-items: center;
  gap: 12px
}

.addr-ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: rgba(102, 195, 208, .16);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px
}

.addr-hd h3 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(15px, 1vw, 18px);
  color: var(--navy);
  margin: 0
}

.addr-card address {
  font-family: var(--fb);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  flex: 1
}

.addr-card.is-empty address {
  color: var(--muted)
}

.addr-edit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(13px, .9vw, 14px);
  color: var(--navy);
  text-decoration: none
}

.addr-edit:hover {
  background: #d8dbe0;
  color: var(--navy)
}

/* Add / edit address form — Woo's .form-row markup given the .fld look */
.addr-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none
}

.addr-back:hover {
  color: var(--navy)
}

.woocommerce .acct-address-form form .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.woocommerce .acct-address-form form .form-row {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: auto;
  float: none;
  margin: 0;
  padding: 0
}

.woocommerce .acct-address-form form .form-row-first,
.woocommerce .acct-address-form form .form-row-last {
  grid-column: span 1
}

/* Woo's float clearfix pseudo-elements would become grid / flex items. */
.woocommerce .acct-address-form form .woocommerce-address-fields__field-wrapper::before,
.woocommerce .acct-address-form form .woocommerce-address-fields__field-wrapper::after,
.woocommerce .acct-address-form form .form-row::before,
.woocommerce .acct-address-form form .form-row::after {
  content: none;
  display: none
}

.woocommerce .acct-address-form form .form-row label {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  margin: 0
}

.woocommerce .acct-address-form form .form-row .required {
  color: var(--red);
  text-decoration: none;
  border: 0;
  visibility: visible
}

.woocommerce .acct-address-form form .form-row .optional {
  color: var(--muted);
  font-weight: 400
}

.woocommerce .acct-address-form form .woocommerce-input-wrapper {
  display: block
}

.woocommerce .acct-address-form form .form-row input.input-text,
.woocommerce .acct-address-form form .form-row select,
.woocommerce .acct-address-form form .form-row textarea,
.woocommerce .acct-address-form form .select2-container .select2-selection--single {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  background: #f5f5f5;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
  padding: 0 16px;
  font-family: var(--fb);
  font-size: 15px;
  color: #333
}

.woocommerce .acct-address-form form .form-row textarea {
  height: auto;
  min-height: 96px;
  padding: 14px 16px
}

.woocommerce .acct-address-form form .form-row input.input-text:focus,
.woocommerce .acct-address-form form .form-row select:focus,
.woocommerce .acct-address-form form .select2-container--focus .select2-selection--single,
.woocommerce .acct-address-form form .select2-container--open .select2-selection--single {
  outline: 2px solid var(--teal);
  outline-offset: 1px
}

.woocommerce .acct-address-form form .select2-container {
  width: 100% !important
}

.woocommerce .acct-address-form form .select2-container .select2-selection--single {
  display: flex;
  align-items: center
}

.woocommerce .acct-address-form form .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: #333
}

.woocommerce .acct-address-form form .select2-container .select2-selection__arrow {
  height: 54px;
  right: 10px
}

/* A single shipping country renders as plain text rather than a select. */
.woocommerce .acct-address-form form .form-row strong {
  font-family: var(--fb);
  font-size: 15px;
  color: #333
}

.woocommerce .acct-address-form form .form-row.woocommerce-invalid input.input-text,
.woocommerce .acct-address-form form .form-row.woocommerce-invalid .select2-selection {
  box-shadow: 0 0 0 1.5px var(--red)
}

.acct-address-form .acct-update {
  margin-top: clamp(24px, 2.4vw, 36px)
}

.buy-again {
  display: none
}

.ba-trust {
  display: flex;
  gap: 12px;
  padding: 16px
}

.ba-t {
  flex: 1;
  background: #f9f9f9;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px
}

.ba-t .ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--teal);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px
}

.ba-t b {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 11px;
  color: #222
}

.ba-t small {
  font-family: var(--fb);
  font-size: 10px;
  color: #999
}

.ord-loader {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--muted)
}

.ord-loader.on {
  display: flex
}

.ord-loader .spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--gray2);
  border-top-color: var(--teal);
  animation: ordspin .7s linear infinite
}

@keyframes ordspin {
  to {
    transform: rotate(360deg)
  }
}

.ord-more {
  margin-top: 8px;
  border: 1.5px solid var(--teal);
  background: #fff;
  color: var(--navy);
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 32px;
  border-radius: 999px;
  cursor: pointer
}

.ord-more:hover {
  background: var(--teal);
  color: #fff
}

.ord-more:disabled {
  opacity: .6;
  cursor: default
}

#ordMoreWrap {
  margin-top: 20px;
  color: var(--navy)
}

#ordMoreWrap.disabled {
  pointer-events: none;
  opacity: .5
}

.acct-trust-wrap {
  padding: clamp(20px, 2vw, 38px) 0
}

.acct-trust {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06)
}

.at-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px
}

.at-item .ic {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--teal);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px
}

.at-item b {
  display: block;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  color: #222
}

.at-item small {
  display: block;
  margin-top: 2px;
  font-family: var(--fb);
  font-size: 12px;
  color: #999
}

@keyframes atTruck {

  0%,
  100% {
    transform: translateX(-3px)
  }

  50% {
    transform: translateX(3px)
  }
}

@keyframes atCard {

  0%,
  100% {
    transform: rotate(0)
  }

  25% {
    transform: rotate(-8deg)
  }

  75% {
    transform: rotate(8deg)
  }
}

@keyframes atHeadset {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.12)
  }
}

.at-item:nth-child(1) .ic i {
  animation: atTruck 1.2s ease-in-out infinite
}

.at-item:nth-child(2) .ic i {
  animation: atCard 1.8s ease-in-out infinite
}

.at-item:nth-child(3) .ic i {
  animation: atHeadset 1.4s ease-in-out infinite
}

.pairup-sec {
  margin-top: 36px;
  padding-bottom: 30px !important
}

.pairup-sec .sec-head {
  padding: 30px 0 20px
}

.pairup-sec .sec-head h2 {
  font-size: clamp(18px, 1.8vw, 28px)
}

.pairup-sec .sec-head p {
  font-size: clamp(11px, .8vw, 13px)
}

.pairup-rail {
  display: flex;
  gap: 16px;
  padding: 0 0 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch
}

.pairup-rail::-webkit-scrollbar {
  display: none
}

.pairup-sec .rp-dots {
  padding-top: 22px
}

/* A shorter band than the others, so its drawing is a little smaller. */
.rel-prods.pairup-sec .rp-wm {
  width: clamp(150px, 15vw, 300px)
}

.pairup-rail .pcardw {
  width: 230px;
  padding: 12px;
  gap: 12px
}

.pairup-rail .pcardw .pimg {
  width: 76px;
  height: 76px
}

.pairup-rail .pcardw .pt {
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.pairup-rail .pcardw .pt a {
  color: inherit;
  font: inherit;
  text-decoration: none
}

.pairup-rail .pcardw .pbot b {
  font-size: 15px
}

.pairup-rail .pcardw .padd {
  height: 32px;
  padding: 0 16px;
  font-size: 12px
}

/* Scroll dots on navy sections (pairup / related) — inactive dots must be
   white or they vanish against the navy background; the active dot stays red. */
.rel-prods .scroll-dots span:not(.on) {
  background: #fff
}

.sugg-card {
  position: relative;
  width: 168px;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: .8px solid #e8eaf0;
  box-shadow: 0 2px 10px rgba(46, 53, 99, .07)
}

.sugg-card .simg {
  position: relative;
  height: 110px;
  background: var(--teal);
  overflow: hidden
}

.sugg-card .simg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sugg-card .off {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 6px
}

.sugg-card .sbd {
  padding: 8px 8px 10px
}

.sugg-card h6 {
  margin: 0;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sugg-card .sprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 8px
}

.sugg-card .sprice b {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy)
}

.sugg-card .sprice span {
  font-family: var(--fb);
  font-size: 11px;
  color: #6b7280;
  text-decoration: line-through
}

.sugg-card .sadd {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: .8px solid var(--red);
  background: transparent;
  color: var(--red);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer
}

.sugg-card .sadd:hover {
  background: var(--red);
  color: #fff
}

@media (max-width:1000px) {
  .acct-body {
    flex-direction: column;
    align-items: stretch
  }

  .acct-tabbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 16px;
    scrollbar-width: none;
    min-width: 0;
    width: 100%
  }

  .acct-tabbar::-webkit-scrollbar {
    display: none
  }

  .acct-tabbar button,
  .acct-tabbar a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: .8px solid var(--teal);
    background: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--fb);
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none
  }

  .acct-tabbar a i {
    font-size: 16px
  }

  .acct-tabbar button.on,
  .acct-tabbar a.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .12)
  }

  .acct-form {
    grid-template-columns: 1fr
  }

  .woocommerce .acct-address-form form .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr
  }

  .woocommerce .acct-address-form form .form-row-first,
  .woocommerce .acct-address-form form .form-row-last {
    grid-column: 1/-1
  }

  .buy-again {
    display: block;
    background: var(--navy);
    padding: 24px 0 4px;
    margin-top: 24px;
    position: relative;
    overflow: hidden
  }

  .buy-again .prod-rail .pcw {
    width: 200px
  }

  .acct-trust {
    gap: 8px;
    padding: 14px 10px
  }

  .at-item {
    gap: 4px
  }

  .at-item .ic {
    width: 36px;
    height: 36px;
    font-size: 18px
  }

  .at-item b {
    font-size: 10.5px
  }

  .at-item small {
    font-size: 9px;
    margin-top: 0
  }
}

@media (max-width:600px) {
  .acct-title {
    padding: 0 4px
  }

  .ord-meta small {
    font-size: 10.5px
  }

  .ord-top {
    flex-wrap: wrap;
    align-items: flex-start
  }

  .ord-thumbs {
    order: 1
  }

  .ord-status {
    order: 2;
    margin-left: auto;
    align-self: center
  }

  .ord-meta {
    order: 3;
    flex: 0 0 100%;
    margin-top: 10px
  }

  .ord-info {
    flex-direction: column;
    gap: 6px
  }
}

/* ===== Recipes — figma "D/M: Listing Recipe Page" ===== */
.rf-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0;
  margin-top: 0
}

.crumb-w {
  background: #fff;
  padding-bottom: clamp(14px, 1.2vw, 22px)
}

.rf-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 4vw, 96px);
  align-items: center
}

.rf-hero-txt h1 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(30px, 3.3vw, 64px);
  color: #fff;
  margin: 0;
  line-height: 1.12
}

.rf-hero-txt .bar {
  width: clamp(90px, 8vw, 160px);
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: clamp(12px, 1.2vw, 22px) 0
}

.rf-hero-txt .lead {
  font-size: clamp(15px, 1vw, 20px);
  color: rgba(255, 255, 255, .85);
  margin: 0 0 clamp(10px, 1vw, 18px)
}

.rf-hero-txt .desc {
  font-size: clamp(13px, .85vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
  margin: 0
}

.rf-hero-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 1024/480
}

/* the link is the photo's frame (bs-app.js bsFit()) */
.rf-hero-card>a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%
}

.rf-hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rf-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(15, 15, 40, .62) 16%, rgba(15, 15, 40, .35) 55%, rgba(15, 15, 40, .12) 84%)
}

.rf-badge {
  position: absolute;
  left: 20px;
  top: 20px;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 4px 14px;
  border-radius: 999px
}

.rf-fav {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28)
}

.rf-fav.sm {
  width: 30px;
  height: 30px;
  font-size: 15px;
  right: 12px;
  top: 12px
}

.rf-fav:hover {
  background: #fff
}

.rf-fav.on {
  background: var(--red);
  color: #fff
}

.rf-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 28px 26px
}

.rf-cap h3 {
  font-size: clamp(18px, 1.4vw, 26px);
  color: #fff;
  font-weight: 700;
  margin: 0
}

.rf-cap p {
  font-size: clamp(13px, .85vw, 16px);
  color: rgba(255, 255, 255, .8);
  margin: 8px 0
}

.rf-meta {
  display: flex;
  gap: 24px
}

.rf-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, .8vw, 14px);
  color: rgba(255, 255, 255, .85)
}

.rf-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(16px, 2vw, 32px) 0
}

.rf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--fb);
  background: #fff;
  border: .8px solid var(--gray2);
  color: var(--navy);
  cursor: pointer
}

.rf-pill.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff
}

.rf-pico {
  width: 15px;
  height: 15px;
  flex-shrink: 0
}

.rf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px
}

@media (min-width:1600px) {
  .rf-grid {
    gap: 42px;
  }
}

@media (min-width:1920px) {
  .rf-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 36px;
  }
}

.rf-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 1/1
}

.rf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rf-cshade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  background: linear-gradient(0deg, rgba(46, 53, 99, .9) 0%, rgba(46, 53, 99, .5) 40%, rgba(0, 0, 0, 0) 100%)
}

.rf-cinfo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 14px
}

.rf-cinfo h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.35
}

.rf-cmeta {
  display: flex;
  gap: 14px;
  padding-top: 8px
}

.rf-cmeta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85)
}

.rf-more-wrap {
  padding: clamp(28px, 3.4vw, 52px) 0
}

.container-bs:has(.rf-grid) {
  padding-bottom: clamp(28px, 3.4vw, 52px)
}

/* ===== Recipe Detail — figma "D/M: Detail Recipe Page" ===== */
.rd-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 42vw, 702px)
}

.rd-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rd-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 15, 40, .62) 0%, rgba(15, 15, 40, .4) 55%, rgba(15, 15, 40, .12) 100%)
}

.rd-hero-in {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 5vw, 88px) clamp(16px, 5.2vw, 100px) clamp(30px, 3.2vw, 60px)
}

.rd-hero-in h1 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.28;
  color: #fff;
  margin: 0
}

.rd-hero-in .bar {
  width: clamp(90px, 10vw, 180px);
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: clamp(12px, 1.4vw, 22px) 0
}

.rd-desc {
  max-width: 700px;
  font-size: clamp(14px, 1.1vw, 20px);
  line-height: 1.65;
  color: #e5e7f0;
  margin: 0 0 clamp(20px, 2.2vw, 40px)
}

.rd-meta {
  display: flex;
  gap: clamp(8px, 1vw, 16px);
  flex-wrap: wrap
}

.rd-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f6fa;
  border: .8px solid #eaecf5;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: clamp(11px, .85vw, 15px)
}

.rd-pill i {
  color: var(--teal);
  font-size: 1.4em
}

.rd-pill b {
  font-family: var(--fb);
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--navy);
  text-transform: uppercase
}

.rd-body {
  padding: clamp(30px, 4vw, 80px) 0
}

.rd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px)
}

.rd-h2 {
  margin: 0 0 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start
}

.rd-h2 h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 40px);
  color: var(--navy);
  margin: 0
}

.rd-h2 .bar {
  align-self: stretch;
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin-top: 12px
}

.rd-ing {
  list-style: none;
  margin: 0 0 clamp(20px, 2vw, 32px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
  padding: clamp(20px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px)
}

.rd-ing li {
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.5;
  color: #374151;
  position: relative;
  padding-left: 20px
}

.rd-ing li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy)
}

/* a sub-heading inside the list, e.g. "Ingredients for sesame crust:" */
.rd-ing li.rd-ing-sub {
  margin-top: 6px;
  padding-left: 0;
  font-weight: 700;
  color: var(--navy)
}

.rd-ing li.rd-ing-sub::before {
  display: none
}

.rd-tip {
  display: flex;
  gap: 18px;
  background: #e3f6f8;
  border: .8px solid rgba(102, 195, 208, .19);
  border-radius: 20px;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
  margin-bottom: clamp(30px, 4vw, 60px)
}

.rd-tip-wrap {
  display: flex;
  justify-content: center;
  padding-top: clamp(20px, 2.5vw, 36px)
}

.rd-tip-wrap .rd-tip {
  max-width: 640px;
  margin-bottom: 0
}

.rd-tip-ic {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #3fb3c4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  position: relative
}

.rd-tip-ic::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 24deg, rgba(253, 199, 0, .85) 24deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%, #000 90%, transparent 92%);
  mask: radial-gradient(circle, transparent 52%, #000 55%, #000 90%, transparent 92%);
  opacity: 0;
  animation: bulbRays 2.4s ease-in-out infinite;
  pointer-events: none
}

.rd-tip-ic i {
  animation: bulbGlow 2.4s ease-in-out infinite;
  position: relative;
  z-index: 1
}

@keyframes bulbGlow {

  0%,
  100% {
    color: rgba(255, 255, 255, .85);
    filter: drop-shadow(0 0 0 rgba(253, 199, 0, 0))
  }

  8% {
    color: var(--yellow);
    filter: drop-shadow(0 0 12px rgba(253, 199, 0, 1)) drop-shadow(0 0 3px #fff)
  }

  55% {
    color: var(--yellow);
    filter: drop-shadow(0 0 10px rgba(253, 199, 0, .95)) drop-shadow(0 0 2px #fff)
  }

  80% {
    color: rgba(255, 255, 255, .85);
    filter: drop-shadow(0 0 0 rgba(253, 199, 0, 0))
  }
}

@keyframes bulbRays {

  0%,
  100% {
    opacity: 0;
    transform: scale(.55)
  }

  10% {
    opacity: 1;
    transform: scale(1)
  }

  55% {
    opacity: .85;
    transform: scale(1.05)
  }

  80% {
    opacity: 0;
    transform: scale(.9)
  }
}

.rd-tip b {
  font-size: clamp(15px, 1.1vw, 20px);
  color: var(--navy)
}

.rd-tip p {
  margin: 6px 0 0;
  font-size: clamp(13px, .9vw, 18px);
  line-height: 1.65;
  color: #374151
}

.rd-nutri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px)
}

.rd-nc {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 10px 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-height: 97px;
  min-width: 0
}

.rd-nc i,
.rd-nc img {
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--teal);
  width: 1.3em;
  height: 1.3em;
  object-fit: contain
}

.rd-nc img {
  width: 1.2em;
  height: 1.2em
}

.rd-nc b {
  font-family: var(--fb);
  font-weight: 800;
  font-size: clamp(14px, 1.15vw, 18px);
  color: var(--navy);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  white-space: nowrap
}

.rd-nc b small {
  font-weight: 400;
  font-size: .5em;
  color: #9ca3af
}

.rd-nc span {
  font-size: clamp(9px, .7vw, 10.5px);
  font-weight: 600;
  color: #6b7280
}

.rd-steps {
  display: flex;
  flex-direction: column
}

.rd-step {
  display: flex;
  gap: 20px
}

.rd-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #4a5392);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  position: relative
}

.rd-step:not(:last-child) .rd-num::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 50%;
  width: 2px;
  height: calc(100% + 12px);
  background: linear-gradient(180deg, rgba(46, 53, 99, .21), rgba(102, 195, 208, .21));
  transform: translateX(-50%)
}

.rd-stepcard {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  padding: 16px 22px;
  margin-bottom: 12px
}

.rd-stepcard b {
  display: block;
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--navy)
}

.rd-stepcard p {
  margin: 6px 0 0;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.65;
  color: #6b7280
}

.rd-products {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding-bottom: clamp(20px, 2.4vw, 40px)
}

.rd-products .sec-head h2,
.rd-products .sec-head h2 .hl-teal {
  color: #fff;
}

.rd-products #rdProdDots span:not(.on) {
  background: #fff
}


.rd-one-prod {
  display: flex;
  flex-wrap: nowrap;
  gap: 36px;
  padding: 0 0 clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  cursor: grab
}

.rd-one-prod .pcw {
  padding-bottom: 6px
}

#rdOneProdDots {
  padding-top: 0
}

.rd-one-prod::-webkit-scrollbar {
  display: none
}

.rd-one-prod>* {
  scroll-snap-align: start;
  flex-shrink: 0
}

.rd-one-prod .pcw {
  width: 280px;
  max-width: 280px
}

.rd-related {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: unset;
  gap: 24px;
  padding-bottom: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  cursor: grab
}

.rd-related::-webkit-scrollbar {
  display: none
}

.rd-related .rf-card {
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start
}

.rf-card a {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  width: 100%;
  height: 100%
}

@media (max-width:1000px) {
  .rd-cols {
    grid-template-columns: 1fr
  }

  .rd-nutri {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width:600px) {
  .rd-hero-in h1 {
    font-size: 28px
  }

  .rd-desc {
    font-size: 13px;
    line-height: 1.55;
    max-width: 100%
  }

  .rd-desc br {
    display: none
  }

  .rd-meta {
    gap: 8px
  }

  .rd-pill {
    padding: 8px 10px;
    font-size: 10px;
    border-radius: 8px
  }

  .rd-ing {
    border-radius: 18px;
    padding: 16px;
    gap: 10px
  }

  .rd-ing li {
    font-size: 13px
  }

  .rd-nutri {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
  }

  .rd-nc {
    padding: 8px 4px;
    border-radius: 12px
  }

  .rd-related {
    gap: 14px
  }

  .rd-related .rf-card {
    width: 180px
  }

  .rd-one-prod {
    gap: 14px
  }

  .rd-one-prod .pcw {
    width: 200px;
    max-width: 200px
  }
}

@media (max-width:1200px) {
  .rf-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:900px) {
  .rf-hero-in {
    grid-template-columns: 1fr
  }

  .rf-hero-txt {
    text-align: center;
    order: 1
  }

  .rf-hero-txt .bar {
    margin-left: auto;
    margin-right: auto
  }

  .rf-hero-card {
    order: 2
  }
}

@media (max-width:600px) {
  .rf-hero {
    padding: 28px 0
  }

  .rf-hero-txt {
    text-align: center
  }

  .rf-hero-txt h1 {
    font-size: 32px;
    line-height: 1.3
  }

  .rf-hero-txt .bar {
    width: 114px;
    margin: 6px auto 10px
  }

  .rf-hero-txt .lead {
    font-size: 14px;
    margin-bottom: 0
  }

  .rf-hero-txt .desc {
    display: none
  }

  .rf-hero-in {
    gap: 18px
  }

  .rf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .rf-card {
    border-radius: 20px
  }

  .rf-cinfo h4 {
    font-size: 13px
  }

  .rf-cmeta span {
    font-size: 11px
  }

  .rf-pills {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 14px 16px;
    gap: 8px;
    min-width: 0
  }

  .rf-pill {
    padding: 8px 16px;
    font-size: 14px;
    flex-shrink: 0
  }

  .rf-hero-card {
    border-radius: 20px;
    aspect-ratio: 362/200
  }

  .rf-cap {
    padding: 0 16px 14px
  }

  .rf-cap h3 {
    font-size: 20px
  }

  .rf-cap p {
    font-size: 13px;
    margin: 6px 0
  }

  .rf-meta {
    gap: 16px
  }

  .rf-meta span {
    font-size: 12px
  }

  .rf-badge {
    left: 14px;
    top: 14px;
    font-size: 11px;
    padding: 3px 10px
  }

  .rf-fav {
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    font-size: 16px
  }

  .rf-fav.sm {
    width: 30px;
    height: 30px;
    font-size: 13px;
    right: 10px;
    top: 10px
  }
}

/* ===== PDP — figma "Product D Page" (1546 design scaled to 1920) ===== */
.pdp-crumb {
  padding: clamp(14px, 1.2vw, 22px) clamp(16px, 5.2vw, 100px) clamp(8px, .7vw, 12px);
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted)
}

.pdp-crumb a {
  color: #1f7a88;
  text-decoration: underline;
  text-underline-offset: 2px
}

.pdp-crumb a:hover {
  color: var(--red)
}

.pdp-crumb span {
  color: var(--navy);
  font-weight: 600
}

.pdp-top {
  display: flex;
  gap: clamp(24px, 4.5vw, 86px);
  align-items: flex-start;
  padding: clamp(6px, .6vw, 12px) clamp(16px, 5.2vw, 100px) 0
}

.pdp-gal {
  --tw: clamp(200px, 19vw, 370px);
  --aw: clamp(30px, 2.2vw, 42px);
  position: sticky;
  top: var(--pdp-sticky-top, 180px);
  align-self: flex-start;
  width: min(clamp(280px, 39.5vw, 750px), calc(100dvh - var(--pdp-sticky-top, 180px) - 96px));
  flex-shrink: 0;
  isolation: isolate;
  margin-bottom: clamp(24px, 3.2vw, 60px)
}

.pdp-main {
  position: relative;
  width: 100%;
  /* square, like most product photos, so they show whole (bs-app.js bsFit() places the rest) */
  aspect-ratio: 1/1;
  border-radius: clamp(18px, 1.8vw, 35px);
  overflow: hidden;
  background: #e9eaed;
  z-index: 1
}

.pdp-main>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.pdp-main>img.is-plain,
.pdp-main>img.is-trim {
  object-fit: contain
}

.pdp-thumbs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

/* Thumb strip sizes to its images (so 1–2 photos don't leave a half-empty box);
   arrows are hidden by JS (.no-arrows) whenever the strip doesn't overflow. */
.pdp-thumbs-wrap>.pdp-thumbs {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none
}

.pdp-thumbs-wrap.no-arrows .pdp-arrow {
  display: none !important
}

.pdp-thumbs-wrap>.pdp-thumbs::-webkit-scrollbar {
  display: none
}

.pdp-arrow {
  display: none
}

@media (min-width:601px) {
  .pdp-thumbs-wrap .pdp-arrow {
    display: flex;
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    width: var(--aw);
    height: var(--aw);
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--navy);
    align-items: center;
    justify-content: center;
    font-size: clamp(15px, 1.15vw, 20px);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    z-index: 4;
    transition: background .2s, color .2s
  }

  .pdp-thumbs-wrap .pdp-arrow:hover {
    background: var(--navy);
    color: #fff
  }

  .pdp-thumbs-wrap .pdp-arrow:active {
    transform: translateY(-50%) scale(.92)
  }

  .pdp-thumbs-wrap .pdp-arrow.prev {
    right: calc(50% + var(--tw)/2 + clamp(8px, .7vw, 14px));
    left: auto
  }

  .pdp-thumbs-wrap .pdp-arrow.next {
    left: calc(50% + var(--tw)/2 + clamp(8px, .7vw, 14px));
    right: auto
  }
}

@media (max-width:600px) {
  .pdp-thumbs-wrap .pdp-arrow {
    display: flex;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--navy);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(11, 31, 58, .15);
    cursor: pointer;
    font-size: 16px
  }

  .pdp-thumbs-wrap .pdp-arrow:active {
    transform: scale(.9)
  }
}

.pdp-sale {
  position: absolute;
  left: clamp(12px, 1.3vw, 25px);
  top: clamp(12px, 1.3vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(130px, 10.2vw, 196px);
  height: clamp(40px, 3.2vw, 62px);
  padding: 0 clamp(14px, 1.1vw, 21px);
  border-radius: 999px;
  background: var(--teal);
  border: .8px solid rgba(255, 255, 255, .2);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 20px);
  color: #fff
}

@media (max-width:600px) {
  .pdp-sale {
    min-width: 0;
    height: 26px;
    padding: 0 10px;
    font-size: 10px;
    left: 8px;
    top: 8px
  }
}

.pdp-wish {
  position: absolute;
  right: clamp(12px, 1.3vw, 25px);
  top: clamp(12px, 1.3vw, 25px);
  width: clamp(32px, 2.2vw, 42px);
  height: clamp(32px, 2.2vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--red);
  font-size: clamp(16px, 1.15vw, 22px);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(11, 31, 58, .15)
}

.pdp-wish.on {
  background: var(--red);
  color: #fff
}

.pdp-zoom {
  position: absolute;
  right: clamp(12px, 1.3vw, 25px);
  top: calc(clamp(12px, 1.3vw, 25px) + clamp(32px, 2.2vw, 42px) + 10px);
  width: clamp(32px, 2.2vw, 42px);
  height: clamp(32px, 2.2vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--red);
  /* same icon size as the wishlist heart above it */
  font-size: clamp(16px, 1.15vw, 22px);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(11, 31, 58, .15)
}

.pdp-zoom:hover {
  background: var(--red);
  color: #fff
}

.pdp-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(14px, 1.4vw, 27px);
  display: flex;
  gap: clamp(6px, .55vw, 11px)
}

.pdp-dots span {
  width: clamp(8px, .68vw, 13px);
  height: clamp(8px, .68vw, 13px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background .35s ease
}

.pdp-dots span.on {
  background: var(--red)
}

.pdp-thumbs {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: fit-content;
  max-width: var(--tw, clamp(200px, 19vw, 370px));
  height: auto;
  min-height: 0;
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 0 0 .8px var(--navy), 0 4px 14px rgba(0, 0, 0, .18);
  background: #fff;
  display: flex;
  align-items: center;
  padding: clamp(10px, 1vw, 10px);
  /* snapping keeps the padding, so the first photo's shadow isn't cut */
  scroll-padding-inline: clamp(10px, 1vw, 10px);
  gap: clamp(10px, 1vw, 16px);
  scrollbar-width: none;
  z-index: 3
}

.pdp-thumbs::-webkit-scrollbar {
  display: none
}

.pdp-thumbs img {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: clamp(50px, 4.5vw, 80px);
  height: clamp(50px, 4.5vw, 80px);
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: .72;
  transition: opacity .15s
}

.pdp-thumbs img.on,
.pdp-thumbs img:hover {
  opacity: 1
}

.pdp-info {
  flex: 1;
  min-width: 0
}

.pdp-htop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px
}

.pdp-htop h1 {
  margin: 0;
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(20px, 1.67vw, 32px);
  line-height: 1.3;
  color: var(--navy)
}

.pdp-rate {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  width: clamp(46px, 3.2vw, 60px);
  height: clamp(20px, 1.5vw, 28px);
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  justify-content: center;
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(12px, .85vw, 15px)
}

.pdp-rate i {
  color: var(--yellow);
  font-size: clamp(11px, .85vw, 15px)
}

.pdp-desc {
  margin: clamp(10px, 1vw, 20px) 0 0;
  max-width: 100%;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  text-wrap: pretty
}

.pdp-desc a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline
}

.pdp-desc a:hover {
  color: var(--red)
}

/* The description as written: its paragraphs and lists, the Origin line on
   its own. Read More swaps the opening lines for the whole of it. */
.pdp-desc p,
.pdp-desc ul,
.pdp-desc ol {
  margin: 0 0 8px
}

.pdp-desc li + li {
  margin-top: 2px
}

.pdp-desc li p {
  margin: 0
}

.pdp-desc-full > :last-child,
.pdp-desc .pdp-desc-short {
  margin-bottom: 0
}

.pdp-desc b,
.pdp-desc strong {
  font-weight: 600
}

.pdp-desc .pdp-origin {
  display: block
}

.pdp-desc [hidden] {
  display: none
}

.pdp-addon {
  margin-top: clamp(14px, 1.4vw, 27px);
  max-width: 100%;
  border-radius: clamp(12px, 1.05vw, 20px);
  background: #e9eaed;
  padding: clamp(10px, .75vw, 14px) clamp(12px, 1.3vw, 25px) clamp(14px, 1.05vw, 20px)
}

.ao-h {
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 20px);
  line-height: 1.5;
  color: var(--navy)
}

.ao-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 23px);
  margin-top: clamp(8px, .73vw, 14px)
}

.ao-chip,
.vn-chip {
  height: clamp(42px, 3.2vw, 61px);
  padding: 0 clamp(14px, 1.2vw, 23px);
  border: none;
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 20px);
  color: var(--navy);
  cursor: pointer;
  transition: background .18s, color .18s
}

.ao-chip b {
  font-weight: 700
}

.ao-chip:hover,
.vn-chip:hover {
  background: #f4fbfc
}

.ao-chip.on,
.vn-chip.on {
  background: var(--teal);
  color: var(--navy)
}

.pdp-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 38px);
  width: 100%;
  max-width: 100%;
  margin-top: clamp(18px, 1.9vw, 36px)
}

.pp-row {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, .83vw, 16px)
}

.pp-row b {
  font-family: var(--fb);
  font-weight: 700;
  font-size: clamp(19px, 1.56vw, 30px);
  line-height: 1;
  color: var(--navy)
}

.pp-row .mrp {
  font-family: var(--fb);
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 20px);
  color: #99a1af;
  text-decoration: line-through
}

.pp-row .off {
  font-family: var(--fb);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 25px);
  color: var(--red)
}

.pdp-price small {
  display: block;
  margin-top: 1px;
  font-family: var(--fb);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, .99vw, 19px);
  color: #62748e
}

.pdp-addw {
  flex-shrink: 0
}

.pdp-addw .btn-add {
  width: clamp(120px, 17vw, 245px);
  height: clamp(48px, 4.06vw, 60px);
  border-radius: 999px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.56vw, 22px)
}

.pdp-addw .qty {
  width: clamp(120px, 17vw, 245px);
  height: clamp(48px, 4.06vw, 60px);
  border-radius: 999px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.56vw, 22px);
  box-shadow: none
}

.pdp-addw .qty {
  padding: 0 clamp(16px, 1.6vw, 26px)
}

.pdp-addw .qty button {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1
}

.pdp-addw .qty b {
  font-size: clamp(16px, 1.56vw, 22px);
  font-weight: 600
}

/* Out of stock: in the Add button's place, as tall as it and hard to miss. */
.pdp-addw .oos-txt {
  display: inline-flex;
  align-items: center;
  height: clamp(48px, 4.06vw, 60px);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 30px);
  color: var(--red);
  white-space: nowrap
}

.pdp-add {
  flex-shrink: 0;
  width: clamp(150px, 24vw, 346px);
  height: clamp(48px, 4.06vw, 60px);
  border: .8px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.56vw, 22px);
  cursor: pointer;
  box-shadow: none;
  transition: filter .18s
}

.pdp-add:hover {
  filter: brightness(1.07)
}

.pdp-acc {
  --acc-pad: clamp(14px, 1.25vw, 24px);
  --acc-icon: clamp(34px, 2.8vw, 54px);
  --acc-gap: clamp(12px, 1.25vw, 24px);
  max-width: 100%;
  margin-top: clamp(12px, 1vw, 19px);
  border: .8px solid var(--navy);
  border-radius: clamp(11px, .99vw, 19px);
  overflow: hidden;
  background: transparent
}

.pdp-acc .acc-hd {
  display: flex;
  align-items: center;
  gap: var(--acc-gap);
  width: 100%;
  min-height: clamp(52px, 4.27vw, 82px);
  padding: clamp(8px, .73vw, 14px) var(--acc-pad);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left
}

.pdp-acc .acc-hd img {
  width: var(--acc-icon);
  height: var(--acc-icon);
  object-fit: contain;
  flex-shrink: 0;
  display: block
}

.pdp-acc .acc-hd span {
  flex: 1;
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 25px);
  color: var(--navy);
  text-decoration: underline
}

.pdp-acc .acc-hd i {
  font-size: clamp(16px, 1.15vw, 22px);
  color: var(--navy);
  transition: transform .25s
}

.pdp-acc.open .acc-hd i {
  transform: rotate(180deg)
}

/* The words line up with the header's: past its padding, icon and gap. */
.pdp-acc .acc-bd {
  display: none;
  padding: 0 var(--acc-pad) clamp(14px, 1.15vw, 22px) calc(var(--acc-pad) + var(--acc-icon) + var(--acc-gap))
}

.pdp-acc.open .acc-bd {
  display: block
}

.pdp-acc .acc-bd p,
.pdp-acc .acc-bd ul,
.pdp-acc .acc-bd ol {
  margin: 0 0 10px;
  font-family: var(--fb);
  font-size: clamp(13px, 1.05vw, 20px);
  line-height: 1.5;
  color: var(--navy)
}

/* A product's own storage instructions are mostly a short list: each bullet
   starts right under the heading's first letter, its words just after. */
.pdp-acc .acc-bd ul,
.pdp-desc ul {
  list-style: none;
  padding-left: 0
}

.pdp-acc .acc-bd ul > li,
.pdp-desc ul > li {
  position: relative;
  padding-left: 1.1em
}

.pdp-acc .acc-bd ul > li::before,
.pdp-desc ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .57em;
  width: .36em;
  height: .36em;
  border-radius: 50%;
  background: currentColor
}

.pdp-acc .acc-bd ol,
.pdp-desc ol {
  padding-left: 0;
  list-style-position: inside
}

.pdp-acc .acc-bd li + li {
  margin-top: 4px
}

.pdp-acc .acc-bd li p {
  margin: 0
}

.pdp-acc .acc-bd > :last-child {
  margin-bottom: 0
}

.pdp-feats-wrap {
  position: relative;
  margin-top: clamp(16px, 1.6vw, 30px);
  max-width: 100%;
  width: 100%;
}

.pdp-feats-wrap.has-slider {
  padding: 0;
}

.pdp-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
  width: 100%;
  max-width: 100%;
}

.pdp-feat {
  position: relative;
  width: 100%;
  min-height: clamp(130px, 10.5vw, 202px);
  height: auto;
  border-radius: clamp(14px, 1.25vw, 24px);
  background: #e9eaed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.6vw, 28px) clamp(10px, 1vw, 20px);
  box-sizing: border-box;
}

.pdp-feats-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(32px, 2.5vw, 40px);
  height: clamp(32px, 2.5vw, 40px);
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #d0d7de;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}

.pdp-feats-nav:hover {
  background: var(--teal, #00a896);
  color: #ffffff;
  border-color: var(--teal, #00a896);
}

.pdp-feats-nav.disabled {
  opacity: 0;
  visibility: hidden;
  cursor: default;
  pointer-events: none;
}

.pdp-feats-prev {
  left: 0;
}

.pdp-feats-next {
  right: 0;
}

.pdp-feat>img {
  width: clamp(70px, 6.2vw, 118px);
  height: clamp(70px, 6.2vw, 118px);
  object-fit: contain;
  flex-shrink: 0
}

.pdp-feat .bar {
  width: clamp(46px, 3.9vw, 75px);
  height: 2px;
  border-radius: 20px;
  background: var(--teal);
  margin: clamp(10px, 1vw, 19px) 0 clamp(8px, .8vw, 15px);
  flex-shrink: 0
}

.pdp-feat small {
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 19px);
  line-height: 1.3;
  text-align: center;
  color: #c4161c;
  white-space: nowrap
}

.cook-insp {
  position: relative;
  z-index: 5;
  background: var(--page);
  padding: clamp(48px, 4.5vw, 88px) 0 clamp(24px, 2.5vw, 48px);
  overflow: hidden
}

.cook-insp .sec-head h2 {
  color: var(--navy)
}

.cook-insp .sec-head h2 .hl-teal {
  /* color: var(--teal); */
  color: #0f172a;
}

.cook-insp .cook-rail {
  --rail-gap: clamp(16px, 1.8vw, 24px);
  gap: var(--rail-gap);
  padding-top: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch
}

.cook-insp .cook-rail .ccard {
  width: calc((100% - 3 * var(--rail-gap)) / 4);
  max-width: calc((100% - 3 * var(--rail-gap)) / 4);
  flex: 0 0 calc((100% - 3 * var(--rail-gap)) / 4);
}

/* Cooking Inspirations on laptops and desktops (a mouse or trackpad), on the
   homepage and product pages: five cards a row, so they're smaller. The card
   keeps its look: its words, icons and spacing are in cqw of the card, as
   drawn at 284px wide (four a row), never above those sizes. Tablets and
   phones are as they were. */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
  .cook-rail .ccard,
  .cook-insp .cook-rail .ccard {
    width: calc((100% - 4 * var(--rail-gap)) / 5);
    max-width: calc((100% - 4 * var(--rail-gap)) / 5);
    flex: 0 0 calc((100% - 4 * var(--rail-gap)) / 5);
    container-type: inline-size;
    border-radius: clamp(16px, 1.4vw, 24px)
  }

  .ccard .cinfo {
    left: min(22px, 7.75cqw);
    right: min(22px, 7.75cqw);
    bottom: min(22px, 7.75cqw)
  }

  .ccard .cinfo h6 {
    font-size: clamp(14px, 6.73cqw, 24px)
  }

  .ccard .cmeta {
    gap: min(22px, 7.75cqw);
    margin-top: min(10px, 3.5cqw);
    font-size: clamp(11px, 4.81cqw, 15px)
  }

  .ccard .cmeta svg {
    width: 1.32em;
    height: 1.32em
  }

  .ccard .fav {
    top: min(16px, 5.63cqw);
    right: min(16px, 5.63cqw);
    width: clamp(26px, 12cqw, 34px);
    height: clamp(26px, 12cqw, 34px)
  }

  .ccard .fav i {
    font-size: clamp(13px, 5.63cqw, 16px)
  }
}

.cook-insp .view-all {
  color: var(--navy)
}

.cook-insp .view-all:hover {
  color: var(--red)
}

.rel-prods {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding-bottom: clamp(28px, 2.8vw, 44px);
  margin-top: clamp(20px, 2vw, 38px)
}

/* The salmon-plate drawing behind every navy band (Bestsellers, Cooking
   Inspirations, Related Products, Pair it up, a recipe's products): one in the top
   left corner, one in the bottom right, the same size and strength, sized by the
   screen so they read on a phone and on a wide monitor alike, and always behind the
   cards and words. */
.bsell .rp-wm,
.cook .rp-wm,
.rel-prods .rp-wm,
.rd-products .rp-wm,
.rf-hero .rp-wm {
  position: absolute;
  z-index: 0;
  width: clamp(160px, 19vw, 400px);
  height: auto;
  opacity: .14;
  pointer-events: none
}

.rp-wm1 {
  left: clamp(-130px, -5vw, -50px);
  top: clamp(-100px, -4vw, -36px)
}

.rp-wm2 {
  right: clamp(-130px, -5vw, -50px);
  bottom: clamp(-110px, -5vw, -40px);
  transform: rotate(180deg)
}

/* The Recipes hero has its words down the left and its photo on the right, so the
   drawing is smaller and sits right in the corners, clear of both. */
.rf-hero {
  --wm: clamp(220px, 19vw, 380px)
}

.rf-hero .rp-wm {
  width: calc(var(--wm) * .7)
}

.rf-hero .rp-wm1 {
  left: calc(var(--wm) * -.35);
  top: calc(var(--wm) * -.35)
}

.rf-hero .rp-wm2 {
  right: calc(var(--wm) * -.3);
  bottom: calc(var(--wm) * -.3)
}

@media (max-width:700px) {
  .rf-hero .rp-wm {
    opacity: .12
  }
}

.cook>.container-bs,
.rel-prods>.container-bs,
.rd-products>.container-bs,
.rd-products>.sec-head {
  position: relative;
  z-index: 1
}

.rel-prods .sec-head {
  position: relative;
  z-index: 2
}

@media (max-width:700px) {
  .bsell .rp-wm,
  .cook .rp-wm,
  .rel-prods .rp-wm,
  .rd-products .rp-wm {
    width: 150px;
    opacity: .12
  }

  .rp-wm1 {
    left: -50px;
    top: -30px
  }

  .rp-wm2 {
    right: -60px;
    bottom: -40px
  }
}

.rel-prods .sec-head h2 {
  color: #fff
}

.rel-prods .sec-head h2 .hl-teal {
  color: var(--teal)
}

.rel-prods .sec-head p {
  color: #fff;
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 25px)
}

.rel-prods .container-bs {
  position: relative;
  z-index: 2
}

.rp-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, .62vw, 12px);
  padding-top: clamp(18px, 1.7vw, 32px)
}

.rp-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background .35s ease, width .35s ease, border-radius .35s ease
}

.rp-dots span.on {
  background: var(--red);
  width: 26px;
  border-radius: 999px
}

.deliver,
.m-loc {
  cursor: pointer
}

.loc-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 1400;
  align-items: center;
  justify-content: center
}

.loc-ov.open {
  display: flex
}

.loc-modal {
  background: #fff;
  border-radius: 20px;
  width: min(94vw, 440px);
  padding: 26px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

.loc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.loc-hd b {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy)
}

.loc-x {
  cursor: pointer;
  font-size: 20px;
  color: var(--muted)
}

.loc-x:hover {
  color: var(--red)
}

.loc-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px
}

.loc-inp-row {
  display: flex;
  gap: 10px;
  margin-top: 18px
}

.loc-inp-row input {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  padding: 0 16px;
  font-size: 15px;
  outline: none
}

.loc-inp-row input:focus {
  border-color: var(--teal)
}

.loc-inp-row button {
  height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer
}

.loc-inp-row button:hover {
  background: #c81920
}

/* "Use my current location" (bs-app.js initLocModal) */
.loc-detect {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  background: rgba(102, 195, 208, .1);
  color: var(--navy);
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background .2s
}

.loc-detect:hover {
  background: rgba(102, 195, 208, .2)
}

.loc-detect:disabled {
  cursor: progress;
  opacity: .8
}

.loc-gps {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round
}

.loc-gps .dot {
  fill: var(--red);
  stroke: none
}

.loc-detect.busy .loc-gps {
  animation: locSeek 1s ease-in-out infinite
}

@keyframes locSeek {
  50% {
    transform: scale(.82);
    opacity: .55
  }
}

.loc-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted)
}

.loc-or::before,
.loc-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb
}

.loc-or+.loc-inp-row {
  margin-top: 12px
}

.loc-msg {
  margin-top: 16px
}

.loc-checking {
  font-size: 13.5px;
  color: var(--muted)
}

/* credit OpenStreetMap's terms ask for, under a found location */
.loc-credit {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted)
}

.loc-err {
  color: var(--red);
  font-size: 13.5px
}

.loc-found {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--page);
  border-radius: 14px;
  padding: 14px 16px
}

.loc-found i {
  color: var(--red);
  font-size: 20px;
  flex-shrink: 0
}

.loc-found span {
  flex: 1;
  min-width: 0
}

.loc-found b {
  display: block;
  font-size: 15px;
  color: var(--navy)
}

.loc-found small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.loc-found button {
  flex-shrink: 0;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer
}

@media (max-width:600px) {
  .loc-modal {
    width: 92vw;
    padding: 22px 18px
  }
}

/* Clear-cart confirmation dialog (sits above the open cart drawer). */
.bs-confirm-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, .55);
  align-items: center;
  justify-content: center;
  padding: 20px
}

.bs-confirm-ov.open {
  display: flex
}

.bs-confirm {
  background: #fff;
  border-radius: 18px;
  width: min(94vw, 384px);
  padding: 28px 24px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  text-align: center
}

.bs-confirm-t {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--navy)
}

.bs-confirm-btns {
  display: flex;
  gap: 12px;
  margin-top: 24px
}

.bs-confirm-btns button {
  flex: 1;
  height: 46px;
  border-radius: 999px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter .15s, background .15s, color .15s
}

.bs-confirm-no {
  background: #fff;
  border: 1.5px solid var(--gray2);
  color: var(--navy)
}

.bs-confirm-no:hover {
  border-color: var(--navy)
}

.bs-confirm-yes {
  border: none;
  background: var(--red);
  color: #fff
}

.bs-confirm-yes:hover {
  filter: brightness(1.06)
}

@media (max-width:600px) {
  .bs-confirm-btns {
    flex-direction: column
  }

  /* stacked, flex:1's 0% basis would override the 46px height */
  .bs-confirm-btns button {
    flex: none
  }
}

@media (max-width:1100px) {
  .pdp-top {
    flex-direction: column
  }

  .pdp-gal {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 560px
  }

  .pdp-info {
    width: 100%
  }
}

@media (max-width:600px) {
  .pdp-crumb {
    font-size: 12px;
    padding: 16px 16px;
    white-space: normal;
    line-height: 1.5;
    text-wrap: pretty
  }

  .pdp-top {
    padding: 6px 16px 0;
    gap: 18px
  }

  .pdp-htop h1 {
    font-size: 17px
  }

  .pdp-desc {
    font-size: 14px;
    margin-top: 8px
  }

  .pdp-addon {
    padding: 10px 12px 12px;
    border-radius: 12px
  }

  .ao-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .ao-chip,
  .vn-chip {
    height: 38px;
    padding: 0 10px;
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .pdp-buy {
    flex-direction: row;
    align-items: center;
    margin-top: 14px;
    gap: 12px
  }

  .pdp-add,
  .pdp-addw .btn-add,
  .pdp-addw .qty {
    width: 100%;
    max-width: 220px;
    height: 44px;
    font-size: 15px;
    padding: 0 26px;
    border-radius: 22px
  }

  .pdp-addw {
    flex: 1;
    display: flex;
    justify-content: flex-end
  }

  .pdp-addw .oos-txt {
    height: 44px;
    font-size: 20px
  }

  .pdp-acc .acc-hd span {
    font-size: 13px
  }

  .pdp-feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 0 6px;
    max-width: 100%;
  }

  .pdp-feat {
    width: 100%;
    height: auto;
    min-height: 105px;
    min-width: 0;
    padding: 10px 4px;
    border-radius: 14px;
  }

  .pdp-main {
    aspect-ratio: 1/1
  }

  .pdp-thumbs {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    flex: 1;
    min-width: 0;
    padding: 6px;
    scroll-padding-inline: 6px;
    gap: 6px;
    border-radius: 14px
  }

  /* a shadow that fits the strip's 6px padding */
  .pdp-thumbs img {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18)
  }

  .pdp-thumbs-wrap {
    position: relative;
    z-index: 2;
    margin-top: -31px;
    padding: 0 6px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto
  }

  .pdp-gal {
    margin-bottom: 2px
  }

  .rel-prods .sec-head {
    padding: clamp(22px, 6vw, 32px) 16px clamp(28px, 6vw, 36px)
  }

  .cook-insp .sec-head {
    padding: clamp(22px, 6vw, 32px) 16px clamp(12px, 3vw, 18px)
  }

  .cook-insp {
    padding-top: 16px;
    padding-bottom: 8px
  }

  .cook-insp .scroll-dots {
    padding: 12px 0 4px
  }

  .cook-insp .text-center.pt-3 {
    padding-top: 8px !important;
    padding-bottom: 0;
    margin-bottom: 6px
  }

  .cook-insp .sec-head {
    padding-top: 0;
    padding-bottom: 14px
  }

  .rel-prods {
    padding-top: 8px
  }

  .rp-dots {
    padding-top: 16px;
    padding-bottom: 4px
  }

  .cook-insp .cook-rail .ccard {
    width: 160px;
    max-width: none;
    flex: 0 0 160px
  }

  /* the phone cards have a shadow (8px above); give it room */
  .cook-insp .cook-rail {
    padding-top: 10px;
    margin-top: -10px
  }

  .cook-insp .view-all {
    font-size: 15px
  }
}

@media (max-width:600px) {
  .rew-wrap {
    padding-top: 14px
  }

  .rew-wrap .acct-title {
    font-size: 22px;
    margin-bottom: 14px
  }

  .acct-card {
    padding: 20px 18px;
    border-radius: 16px
  }

  .acct-card-hd {
    font-size: 17px;
    margin-bottom: 16px
  }
}

.faq-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: clamp(22px, 2.6vw, 44px) 0 clamp(26px, 3vw, 52px)
}

.faq-hero .faq-hero-in h1 .hl-teal {
  color: var(--navy);
}

.faq-board {
  display: block;
  width: 100%;
  max-width: clamp(520px, 68vw, 1000px);
  height: auto;
  margin: 0 auto clamp(4px, .8vw, 12px)
}

.faq-hero-in {
  position: relative;
  z-index: 2;
  text-align: center
}

.faq-hero-in h1 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 54px);
  color: var(--navy);
  margin: 0
}

.faq-hero-in h1 .hl-teal {
  color: var(--teal)
}

.faq-hero-in .bar {
  width: 75px;
  height: 2px;
  border-radius: 20px;
  background: var(--red);
  margin: 14px auto 0
}

.faq-hero-in p {
  max-width: none;
  white-space: nowrap;
  margin: 14px auto 0;
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.65;
  color: #4b5563
}

.faq-hero-in p a {
  color: var(--teal);
  text-decoration: underline
}

.faq-hero-in p a:hover {
  color: var(--red)
}

.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: clamp(20px, 2vw, 30px) auto 0;
  background: #fff;
  border: 1.5px solid var(--gray2);
  border-radius: 999px;
  height: clamp(48px, 3.4vw, 56px);
  padding: 0 22px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22)
}

.faq-search i {
  font-size: 21px;
  color: var(--navy);
  flex-shrink: 0
}

.faq-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--navy)
}

.faq-wrap {
  padding: clamp(22px, 2.4vw, 44px) 0 clamp(40px, 4vw, 76px)
}

.faq-inner {
  padding: 0 clamp(16px, 5.2vw, 100px)
}

.faq-pills {
  justify-content: flex-start;
  padding: 0 0 clamp(20px, 2vw, 32px)
}

.faq-pills .rf-pill {
  white-space: nowrap;
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px
}

.faq-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px);
  gap: clamp(20px, 2.2vw, 40px);
  align-items: start
}

@media (min-width:1600px) {
  .faq-body {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
  }
}

@media (min-width:1920px) {
  .faq-body {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 60px;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.faq-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  overflow: hidden;
  transition: box-shadow .25s
}

.faq-item.open {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .11)
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: clamp(16px, 1.3vw, 22px) clamp(18px, 1.5vw, 26px);
  cursor: pointer
}

.faq-cat {
  flex-shrink: 0;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(15, 118, 110, .09);
  border-radius: 999px;
  padding: 5px 10px
}

.faq-qt {
  flex: 1;
  min-width: 0;
  font-family: var(--fb);
  font-weight: 600;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.45;
  color: var(--navy);
  text-wrap: pretty
}

.faq-qt mark {
  background: rgba(245, 197, 66, .42);
  color: inherit;
  border-radius: 3px
}

.faq-ic {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--red);
  transition: transform .3s
}

.faq-item.open .faq-ic {
  transform: rotate(45deg)
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr
}

.faq-a-in {
  overflow: hidden;
  padding: 0 clamp(18px, 1.5vw, 26px)
}

.faq-item.open .faq-a-in {
  padding-bottom: clamp(18px, 1.5vw, 24px)
}

.faq-a-in p {
  margin: 0;
  font-size: clamp(13px, .93vw, 16px);
  line-height: 1.7;
  color: #374151;
  text-wrap: pretty
}

.faq-a-in p mark {
  background: rgba(245, 197, 66, .42);
  color: inherit;
  border-radius: 3px
}

.faq-src {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted)
}

.faq-none {
  text-align: center;
  padding: 44px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07)
}

.faq-none i {
  font-size: 34px;
  color: var(--red)
}

.faq-none p {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  margin: 10px 0 4px
}

.faq-none span {
  font-size: 13px;
  color: var(--muted)
}

.faq-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: clamp(120px, 12vw, 180px)
}

.faq-cert-card,
.faq-help-card {
  background: none;
  border: 1.5px solid var(--gray2);
  border-radius: 16px;
  box-shadow: none;
  padding: clamp(20px, 1.7vw, 28px)
}

.faq-cert-card h3,
.faq-help-card h3 {
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin: 0 0 6px
}

.faq-cert-card p,
.faq-help-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px
}

.faq-certs {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.faq-cert {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--navy);
  font-weight: 500
}

.faq-cert i {
  font-size: 18px;
  color: var(--teal);
  flex-shrink: 0
}

.faq-help-card {
  text-align: center
}

.faq-help-card>i {
  font-size: 30px;
  color: var(--teal)
}

.faq-help-card h3 {
  color: var(--navy);
  margin-top: 10px
}

.faq-help-card p {
  color: var(--muted)
}

.faq-help-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 999px;
  background: #25d366;
  color: #0b3b21;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none
}

.faq-help-cta:hover {
  background: #1eb958;
  color: #0b3b21
}

.faq-help-alt {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline
}

.faq-help-alt:hover {
  color: var(--navy)
}

@media (max-width:900px) {
  .faq-body {
    grid-template-columns: 1fr
  }

  .faq-aside {
    position: static
  }
}

@media (max-width:600px) {
  .faq-board {
    max-width: 100%
  }

  .faq-hero {
    padding: 14px 0 20px
  }

  .faq-board {
    max-width: 100%;
    margin-bottom: 2px
  }

  .faq-hero-in h1 {
    font-size: 23px;
    line-height: 1.25
  }

  .faq-hero-in .bar {
    width: 56px;
    height: 2px;
    margin-top: 10px
  }

  .faq-hero-in p {
    font-size: 12px;
    white-space: normal;
    max-width: 320px;
    margin-top: 10px;
    text-wrap: pretty
  }

  .faq-wrap {
    padding: 16px 0 34px
  }

  .faq-inner {
    padding: 0 16px
  }

  .faq-pills {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px
  }

  .faq-pills::-webkit-scrollbar {
    display: none
  }

  .faq-pills .rf-pill {
    height: 32px;
    padding: 0 13px;
    font-size: 12px;
    flex-shrink: 0
  }

  .faq-body {
    gap: 22px
  }

  .faq-list {
    gap: 10px
  }

  .faq-item {
    border-radius: 14px
  }

  .faq-q {
    flex-wrap: wrap;
    gap: 7px 10px;
    padding: 13px 44px 13px 15px;
    position: relative
  }

  .faq-cat {
    order: 1;
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: .03em
  }

  .faq-qt {
    order: 3;
    flex: 1 0 100%;
    font-size: 13.5px;
    line-height: 1.4
  }

  .faq-ic {
    order: 2;
    position: absolute;
    top: 13px;
    right: 15px;
    font-size: 18px
  }

  .faq-a-in {
    padding: 0 15px
  }

  .faq-item.open .faq-a-in {
    padding-bottom: 15px
  }

  .faq-a-in p {
    font-size: 12.5px;
    line-height: 1.65
  }

  .faq-src {
    font-size: 11px;
    margin-top: 8px
  }

  .faq-none {
    padding: 34px 18px
  }

  .faq-none i {
    font-size: 30px
  }

  .faq-none p {
    font-size: 14px
  }

  .faq-none span {
    font-size: 12.5px
  }

  .faq-aside {
    gap: 12px
  }

  .faq-cert-card,
  .faq-help-card {
    padding: 18px 16px;
    border-radius: 14px
  }

  .faq-cert-card h3,
  .faq-help-card h3 {
    font-size: 15px
  }

  .faq-cert-card p,
  .faq-help-card p {
    font-size: 12.5px;
    margin-bottom: 14px
  }

  .faq-cert {
    font-size: 12.5px
  }

  .faq-cert i {
    font-size: 17px
  }

  .faq-help-card>i {
    font-size: 26px
  }

  .faq-help-cta {
    height: 42px;
    font-size: 13.5px
  }

  .faq-help-alt {
    font-size: 12.5px
  }
}

.wish-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(50px, 6vw, 90px) 0
}

.wish-empty i {
  font-size: 48px;
  color: var(--red)
}

.wish-empty p {
  font-family: var(--fb);
  color: var(--muted);
  margin: 0;
  font-size: 16px
}

.wish-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px
}

.wish-sum-l {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--muted)
}

.wish-sum-l b {
  color: var(--navy);
  font-size: 17px
}

.wish-sum-r {
  display: flex;
  gap: 12px
}

.wish-add-all {
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  height: 44px;
  padding: 0 24px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer
}

.wish-actions-m {
  display: none
}

.wish-add-all:hover {
  filter: brightness(1.06)
}

.wish-clear-all {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer
}

.wish-clear-all:hover {
  border-color: var(--red);
  color: var(--red)
}

.wish-pills {
  justify-content: flex-start;
  padding: 0 0 clamp(16px, 1.6vw, 26px)
}

.wish-pills .rf-pill {
  white-space: nowrap
}

/* Every card is as tall as the tallest one (a two-line name, an On Offer tag),
   so the list reads as an even grid at every width. */
.wish-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px
}

.wish-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  padding: 8px 16px 8px 8px;
  min-width: 0
}

.wish-row-imgw {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  align-self: center
}

.wish-row-imgw .imgw-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease
}

.wish-row-imgw .imgw-alt.on {
  opacity: 1
}

/* The frame (.wish-row-imgw) sets the size and the photo always fills it edge
   to edge. Scoped under .wish-row so it outranks WooCommerce's
   `.woocommerce-page img{height:auto}` on the account page, which otherwise let
   any non-square product image (small uploads, or ones added before the
   744x744 card size existed) keep its own shape and leave a gap in the frame. */
.wish-row .wish-row-imgw img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover
}

.wish-row-info {
  flex: 1;
  min-width: 0
}

.wish-row-info h6 {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.wish-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px
}

.wish-row-meta .added {
  font-size: 12px;
  color: var(--muted)
}

.wish-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a
}

.wish-row-price {
  margin-top: 6px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px
}

.wish-row-price .off {
  color: #16a34a;
  font-size: 12px;
  font-weight: 600
}

.ci-addons {
  flex: 1;
  font-size: 11px;
  color: var(--teal);
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.wish-row-price .mrp {
  color: var(--muted);
  font-size: 12px;
  text-decoration: line-through;
  font-weight: 400
}

.wish-row-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0
}

@media (min-width:701px) {
  /* The same 12px round the photo on the top, bottom and left. */
  .wish-row {
    position: relative;
    align-items: stretch;
    padding: 12px 16px 12px 12px
  }

  .wish-row-info {
    padding-right: 180px;
    min-height: 92px;
    display: flex;
    flex-direction: column
  }

  .wish-row-info .wish-row-price {
    margin-top: auto
  }

  .wish-row-actions {
    position: absolute;
    right: 16px;
    bottom: 12px;
    align-items: flex-end
  }
}

@media (max-width:1000px) {
  .wish-list {
    grid-template-columns: 1fr
  }
}

.wish-row-actions .addw .btn-add {
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  height: 38px;
  width: 112px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap
}

.wish-row-actions .addw .btn-add:hover {
  filter: brightness(1.06)
}

.wish-row-actions .qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: var(--red);
  border-radius: 999px;
  height: 38px;
  width: 112px;
  padding: 0 14px;
  box-sizing: border-box
}

.wish-row-actions .qty button {
  border: none;
  background: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  width: 16px
}

.wish-row-fav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0
}

.wish-row-fav i {
  font-size: 17px;
  color: #fff
}

.wish-row-fav:hover {
  filter: brightness(1.08)
}

.wish-nomatch {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px
}

.wish-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 12px 12px 12px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 1500
}

.wish-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto
}

.wish-toast button {
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 999px;
  height: 32px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer
}

.wish-toast button:hover {
  background: rgba(255, 255, 255, .28)
}

/* The note when a visit finds the shopper's pincode (bs-app.js autoLocate): white,
   so it shows over the navy bands too; on phones a card above the WhatsApp button */
.loc-toast {
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 10px 10px 16px;
  gap: 12px;
  border: 1px solid rgba(46, 53, 99, .12);
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
  color: var(--navy)
}

.loc-toast>i {
  flex: none;
  font-size: 20px;
  color: #3aa9ba
}

.loc-toast span {
  min-width: 0;
  line-height: 1.35
}

.loc-toast b {
  display: block;
  font-weight: 700
}

.loc-toast small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted)
}

.loc-toast button {
  flex: none;
  background: var(--navy)
}

.loc-toast button:hover {
  background: #242a52
}

@media (max-width:600px) {
  .loc-toast {
    left: 12px;
    right: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    border-radius: 16px;
    font-size: 13.5px;
    transform: translateY(20px)
  }

  .loc-toast.show {
    transform: none
  }
}

/* An Add to cart that didn't go through (bs-app.js addFailed): the same white
 note, with a red mark */
.cart-toast {
  padding-right: 20px
}

.cart-toast>i {
  color: #b23a40
}

/* "Use my current location" with only a rough position: say so */
.loc-rough {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e6;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7a5200
}

@media (max-width:700px) {
  .wish-list {
    grid-template-columns: 1fr
  }

  .wish-row {
    position: relative;
    padding: 10px;
    gap: 12px;
    align-items: stretch
  }

  .wish-row-imgw {
    width: 112px;
    height: 112px
  }

  .wish-row-info {
    padding: 2px 34px 44px 0;
    min-height: 112px
  }

  .wish-row-info h6 {
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .wish-row-meta {
    margin-top: 3px
  }

  .wish-row-meta .added {
    font-size: 11px
  }

  .wish-row-price {
    margin-top: 4px;
    font-size: 14px
  }

  .ci-addons {
    flex: 1;
    font-size: 11px;
    color: var(--teal);
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .wish-row-price .mrp {
    font-size: 12px
  }

  .wish-row-price .off {
    font-size: 11px
  }

  .wish-row-actions {
    position: static;
    display: block
  }

  .wish-row-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px
  }

  .wish-row-fav i {
    font-size: 14px
  }

  .wish-row-actions .addw {
    position: absolute;
    right: 10px;
    bottom: 10px
  }

  .wish-row-actions .addw .btn-add,
  .wish-row-actions .qty {
    height: 32px;
    width: 104px;
    font-size: 12px
  }

  .wish-summary {
    flex-direction: column;
    align-items: flex-start
  }

  .wish-sum-r.only-d {
    display: none
  }

  .wish-actions-m {
    display: flex;
    width: 100%;
    margin-top: 20px;
    gap: 10px
  }

  .wish-actions-m .wish-add-all,
  .wish-actions-m .wish-clear-all {
    flex: 1
  }
}

/* Product-card shadow — re-assert the reference values. Site plugins (the
   Elementor kit / Woo product widget) inject a heavier drop-shadow onto the
   card and/or its .pcw wrapper; these !important rules keep every card matching
   the HTML reference: soft shadow in rails, the two-layer shadow in the PLP. */
.pcw {
  box-shadow: none !important
}

.pcw>.pcard {
  box-shadow: 0 4px 16px rgba(11, 31, 59, .10) !important
}

/* --u: smaller with the card on laptops and desktops (the category grid's
   card sizes); 1px everywhere else */
.plp-grid .pcw>.pcard {
  box-shadow: 0 calc(10 * var(--u, 1px)) calc(25 * var(--u, 1px)) rgba(0, 0, 0, .10), 0 calc(30 * var(--u, 1px)) calc(50 * var(--u, 1px)) calc(-20 * var(--u, 1px)) rgba(0, 0, 0, .18) !important
}

/* ===== Login / Register (logged-out My Account) — themed to match the
   account cards. Two identical .acct-card cards, .fld-style inputs, red pill
   buttons. Scoped under #customer_login to beat WooCommerce's default CSS. */
/* plugin-injected bits (math captcha input, privacy text) — theme them so they
   don't look raw next to the styled fields. */
#customer_login form p {
  font-family: var(--fb);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px
}

#customer_login input:not(.input-text):not([type=checkbox]):not([type=submit]) {
  height: 42px;
  width: 110px;
  max-width: 100%;
  border: 1.5px solid var(--gray2);
  border-radius: 10px;
  padding: 0 12px;
  font-family: var(--fb);
  font-size: 15px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  vertical-align: middle
}

#customer_login .input-text {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  background: #f5f5f5;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
  padding: 0 16px;
  font-family: var(--fb);
  font-size: 15px;
  color: #333;
  outline: none;
  box-sizing: border-box
}

#customer_login .input-text:focus {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .08), inset 0 0 0 1.5px var(--teal)
}

#customer_login .fld label {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  color: #333
}

#customer_login .fld label .req {
  color: var(--red)
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 20px
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: 14px;
  color: #555;
  cursor: pointer
}

.auth-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer
}

.auth-lost {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--red);
  text-decoration: none
}

.auth-lost:hover {
  text-decoration: underline
}

.auth-note {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px
}

#customer_login .acct-update {
  width: 100%;
  margin-top: auto;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 54px;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: none
}

#customer_login .acct-update:hover {
  filter: brightness(1.06)
}
.su-switch a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none
}

.su-switch a:hover {
  text-decoration: underline
}

/* ===== Login + signup (logged-out My Account; signup is ?action=register) —
   one .acct-card surface split into a navy brand panel and the form. Inputs, labels and the
   red pill button come from the #customer_login rules above. */
.su-shell {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  overflow: hidden
}

.su-brand {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: clamp(28px, 3.2vw, 60px)
}

/* soft teal glow, bottom-right */
.su-brand::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 195, 208, .28), rgba(102, 195, 208, 0) 70%);
  pointer-events: none
}

.su-title {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 14px
}

.su-lede {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 clamp(24px, 2.4vw, 40px);
  max-width: 420px
}

.su-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px
}

.su-perks li {
  display: flex;
  align-items: flex-start;
  gap: 14px
}

.su-perks .ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 195, 208, .16);
  color: var(--teal);
  font-size: 20px
}

.su-perks b {
  display: block;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin: 2px 0 3px
}

.su-perks small {
  display: block;
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7)
}

.su-main {
  padding: clamp(24px, 3.2vw, 60px);
  display: flex;
  flex-direction: column
}

.su-main .acct-card-hd {
  margin-bottom: 6px
}

.su-switch {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 clamp(20px, 2vw, 28px)
}

.su-main form {
  display: flex;
  flex-direction: column
}

.su-main .fld {
  margin-bottom: 18px
}

.su-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px
}

.su-opt {
  color: var(--muted);
  font-weight: 400
}

#customer_login .fld small {
  font-family: var(--fb);
  margin-top: 0
}

/* +91 prefix inside the mobile field */
.su-tel {
  position: relative
}

.su-cc {
  position: absolute;
  left: 0;
  top: 0;
  height: 54px;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-right: 1px solid var(--gray2);
  pointer-events: none
}

#customer_login .su-tel .input-text {
  padding-left: 72px
}

/* password + show/hide; Woo's strength meter lands after the input */
.su-pw {
  position: relative
}

#customer_login .su-pw .input-text {
  padding-right: 56px
}

.su-eye {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.su-eye:hover {
  color: var(--navy)
}

.su-eye:focus-visible,
.su-switch a:focus-visible,
#customer_login .acct-update:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

#customer_login .woocommerce-password-strength {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none
}

#customer_login .woocommerce-password-strength.short,
#customer_login .woocommerce-password-strength.bad {
  color: var(--red)
}

#customer_login .woocommerce-password-strength.good {
  color: #b7791f
}

#customer_login .woocommerce-password-strength.strong {
  color: #15803d
}

#customer_login .woocommerce-password-hint {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 4px
}

.su-main .acct-update {
  margin-top: 8px
}

/* login's form is shorter than the brand panel — centre it in its column */
.su-login .su-main {
  justify-content: center
}

.su-login .auth-row {
  margin-top: 0
}

#customer_login .acct-update:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none
}

@media (max-width:900px) {
  .su-shell {
    grid-template-columns: 1fr;
    max-width: 560px;
    border-radius: 16px
  }

  .su-brand {
    padding: 24px 20px 26px
  }

  .su-title {
    font-size: 26px;
    margin: 8px 0 8px
  }

  .su-lede {
    font-size: 14px;
    margin-bottom: 18px
  }

  /* compact perk chips in one row, icon over label; drop the descriptions */
  .su-perks {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 12px
  }

  .su-perks li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px
  }

  .su-perks .ic {
    width: 34px;
    height: 34px;
    font-size: 17px
  }

  .su-perks b {
    font-size: 13px;
    margin: 0
  }

  .su-perks small {
    display: none
  }

  .su-main {
    padding: 24px 20px 28px
  }
}

@media (max-width:520px) {
  .su-row {
    grid-template-columns: 1fr
  }
}

/* Elementor popups (e.g. the 25% off welcome popup): the close button's x takes
   the page's navy text colour and vanished on the navy popup, so it gets a white
   round backing that shows on any popup. A close-button colour set on a popup in
   Elementor still wins (its rules are more specific). */
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-close-button:hover {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

/* ===== About Us and Our Team (page-about-us.php, page-our-team.php) =====
   A banner (wide photo behind a navy fade), the bar of sections (sticks under
   the header from tablets up; about-app.js sets --ab-top and marks the section
   being read), then sections alternating the page colour, white and navy.
   Every photo fills its box (cropped, never stretched or blurred). */
.ab-crumb {
  background: transparent;
  padding-bottom: clamp(10px, .9vw, 16px)
}

.ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(280px, 30vw, 480px);
  background: var(--navy)
}

.ab-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center
}

.ab-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(46, 53, 99, .95) 0%, rgba(46, 53, 99, .86) 34%, rgba(46, 53, 99, .35) 64%, rgba(46, 53, 99, .05) 100%)
}

.ab-hero-in {
  padding-top: clamp(40px, 4.5vw, 80px);
  padding-bottom: clamp(40px, 4.5vw, 80px)
}

.ab-hero h1 {
  margin: 0;
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 76px);
  line-height: 1.08;
  color: #fff
}

.ab-hero p {
  max-width: 34em;
  margin: 18px 0 0;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88)
}

.ab-bar {
  width: 72px;
  height: 3px;
  margin: 16px 0 0;
  border-radius: 3px;
  background: var(--red)
}

/* the bar of sections */
.ab-nav {
  position: sticky;
  top: var(--ab-top, 140px);
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--gray2);
  box-shadow: 0 8px 20px rgba(11, 31, 59, .06)
}

.ab-nav-in {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  /* room above and below the tabs */
  padding: clamp(14px, 1.2vw, 22px) clamp(16px, 5.2vw, 100px)
}

.ab-nav-in::-webkit-scrollbar {
  display: none
}

/* centred while they fit, scrolling from the first when they don't */
.ab-nav a:first-child {
  margin-left: auto
}

.ab-nav a:last-child {
  margin-right: auto
}

.ab-nav a {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s
}

.ab-nav a:hover {
  background: rgba(102, 195, 208, .16)
}

.ab-nav a.on {
  background: var(--navy);
  color: #fff
}

.ab-nav a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

/* sections */
.ab-sec {
  padding: clamp(52px, 6.4vw, 112px) 0;
  /* html's scroll-padding-top (175px) already clears the header: room for
     the bar of sections */
  scroll-margin-top: 56px
}

.ab-band-white {
  background: #fff
}

.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center
}

.ab-split-rev {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
}

.ab-h2 {
  margin: 0;
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(30px, 2.7vw, 48px);
  line-height: 1.15;
  color: var(--navy)
}

.ab-text {
  margin-top: clamp(18px, 1.7vw, 28px);
  font-family: var(--fb);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  color: #475467
}

.ab-text p {
  margin: 0 0 1em
}

.ab-text p:last-child {
  margin-bottom: 0
}

.ab-text a {
  color: #2a8d9b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}

.ab-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(18px, 1.6vw, 30px)
}

/* History: the photo, with a teal block behind it */
.ab-history-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  margin: 0 clamp(14px, 1.4vw, 24px) clamp(14px, 1.4vw, 24px) 0
}

.ab-history-media::before {
  content: '';
  position: absolute;
  inset: clamp(14px, 1.4vw, 24px) calc(-1 * clamp(14px, 1.4vw, 24px)) calc(-1 * clamp(14px, 1.4vw, 24px)) clamp(14px, 1.4vw, 24px);
  z-index: -1;
  border-radius: clamp(18px, 1.6vw, 30px);
  background: rgba(102, 195, 208, .28)
}

/* key facts / sourcing points */
.ab-facts {
  list-style: none;
  margin: clamp(24px, 2.2vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.ab-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(11, 31, 59, .08);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy)
}

.ab-band-white .ab-facts li {
  background: var(--page);
  box-shadow: none
}

.ab-facts i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .2);
  color: #2a8d9b;
  font-size: 20px
}

/* Quality: one wide photo over two square ones */
.ab-mosaic,
.ab-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 16px)
}

.ab-mosaic img,
.ab-collage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: clamp(14px, 1.3vw, 24px)
}

.ab-mosaic img:first-child,
.ab-collage img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9
}

/* Our Team on About Us: the people picked for it, in balanced rows */
.ab-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.ab-head .ab-bar {
  margin-left: auto;
  margin-right: auto
}

.ab-head p {
  margin: 16px 0 0;
  font-family: var(--fb);
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--muted)
}

.ab-people {
  /* --cols a row (page-about-us.php: up to five in one row, more in rows as
     even as they go); a shorter last row is centred. Cards are at most 264px
     whatever --cols is, narrower where the row needs it. */
  --cols: 4;
  --pg: clamp(14px, 1.8vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pg);
  max-width: calc(var(--cols) * 264px + (var(--cols) - 1) * var(--pg));
  margin: clamp(30px, 3.2vw, 56px) auto 0
}

.ab-person {
  display: block;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--pg)) / var(--cols));
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(46, 53, 99, .1);
  background: #fff;
  /* the photos' white backdrops meet the card's: the edge and shadow draw it */
  box-shadow: 0 10px 28px rgba(11, 31, 59, .1);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease
}

.ab-person:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(11, 31, 59, .14)
}

.ab-person figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eef1f5
}

.ab-person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .4s ease
}

.ab-person:hover img {
  transform: scale(1.04)
}

.ab-person-tx {
  display: block;
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(46, 53, 99, .08)
}

.ab-person-tx b {
  display: block;
  font-family: var(--fd);
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 600;
  color: var(--navy)
}

.ab-person-tx span {
  display: block;
  margin-top: 4px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #2a8d9b
}

.ab-cta {
  margin-top: clamp(30px, 3.2vw, 52px);
  text-align: center
}

.ab-cta .btn-navy {
  gap: 10px;
  text-decoration: none
}

/* Institutional Sales: the navy band */
.ab-inst {
  background: var(--navy)
}

.ab-inst .ab-h2 {
  color: #fff
}

.ab-inst .ab-text {
  color: rgba(255, 255, 255, .84)
}

.ab-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin-top: clamp(24px, 2.2vw, 34px);
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: background .2s, color .2s
}

.ab-dl:hover {
  background: var(--teal);
  color: #fff
}

.ab-dl i {
  font-size: 18px
}

.ab-dl small {
  font-size: 12px;
  font-weight: 500;
  opacity: .6
}

/* CSR: the partner, and six photos */
.ab-partner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(24px, 2.2vw, 34px);
  padding: 12px 22px 12px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(11, 31, 59, .08);
  text-decoration: none
}

.ab-partner img {
  width: 56px;
  height: 56px;
  object-fit: contain
}

.ab-partner small {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  color: var(--muted)
}

.ab-partner b {
  display: block;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy)
}

.ab-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, .8vw, 14px)
}

.ab-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: clamp(12px, 1vw, 18px)
}

/* Our Team page: the first person large, the rest two to a row */
.tm-card {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "photo head" "photo bio";
  column-gap: clamp(18px, 2vw, 32px);
  align-items: start;
  padding: clamp(14px, 1.3vw, 22px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(11, 31, 59, .08);
  scroll-margin-top: 64px
}

.tm-card figure {
  grid-area: photo;
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: #eef1f5
}

.tm-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top
}

.tm-head {
  grid-area: head;
  padding-top: 6px
}

.tm-card h2 {
  margin: 0;
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.2;
  color: var(--navy)
}

.tm-role {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(102, 195, 208, .18);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #2a8d9b
}

.tm-bio {
  grid-area: bio;
  margin-top: 16px;
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.7;
  color: #475467
}

.tm-bio p {
  margin: 0 0 .8em
}

.tm-bio p:last-child {
  margin-bottom: 0
}

.tm-lead {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  column-gap: clamp(24px, 3.4vw, 64px);
  margin-bottom: clamp(20px, 2vw, 36px);
  padding: clamp(16px, 1.8vw, 30px)
}

.tm-lead .tm-head {
  padding-top: clamp(8px, 1.6vw, 32px)
}

.tm-lead h2 {
  font-size: clamp(30px, 2.8vw, 48px)
}

.tm-lead .tm-bio {
  max-width: 44em;
  font-size: clamp(15px, 1.1vw, 18px)
}

.tm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 36px)
}

/* the target of a link from About Us */
.tm-card:target {
  box-shadow: 0 0 0 3px var(--teal), 0 10px 30px rgba(11, 31, 59, .12)
}

@media (max-width:1100px) {
  .tm-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .tm-grid .tm-card {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr)
  }
}

@media (max-width:1024px) {
  /* the words run further across the photo here: a deeper fade under them */
  .ab-hero::before {
    background: linear-gradient(90deg, rgba(46, 53, 99, .95) 0%, rgba(46, 53, 99, .86) 50%, rgba(46, 53, 99, .5) 80%, rgba(46, 53, 99, .3) 100%)
  }

  .ab-split,
  .ab-split-rev {
    grid-template-columns: minmax(0, 1fr)
  }

  .ab-history-media {
    aspect-ratio: 16 / 10
  }

  .ab-mosaic,
  .ab-collage,
  .ab-gallery {
    max-width: 760px
  }

  .tm-lead {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr)
  }

  .ab-person-tx {
    padding: 12px 12px 14px
  }

  .ab-person-tx b {
    font-size: 15px
  }

  .ab-person-tx span {
    font-size: 12px
  }
}

@media (max-width:600px) {
  .ab-crumb {
    padding-bottom: 8px
  }

  .ab-hero {
    align-items: flex-end;
    min-height: 320px
  }

  .ab-hero-img {
    object-position: center
  }

  .ab-hero::before {
    background: linear-gradient(180deg, rgba(46, 53, 99, .35) 0%, rgba(46, 53, 99, .82) 55%, rgba(46, 53, 99, .95) 100%)
  }

  .ab-hero-in {
    padding-top: 28px;
    padding-bottom: 28px
  }

  .ab-nav {
    position: static
  }

  .ab-sec,
  .tm-card {
    scroll-margin-top: 12px
  }

  .ab-nav-in {
    padding: 12px 16px
  }

  .ab-nav a {
    padding: 8px 14px;
    font-size: 13px
  }

  .ab-sec {
    padding: 44px 0
  }

  .ab-history-media {
    aspect-ratio: 4 / 3
  }

  .ab-facts {
    grid-template-columns: minmax(0, 1fr)
  }

  .ab-people {
    --pg: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    /* out to the screen's edges: .container-bs's own side padding */
    --gut: clamp(16px, 5.2vw, 100px);
    margin-left: calc(-1 * var(--gut));
    margin-right: calc(-1 * var(--gut));
    padding: 4px var(--gut) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gut);
    scrollbar-width: none
  }

  .ab-people::-webkit-scrollbar {
    display: none
  }

  .ab-person {
    flex: 0 0 44%;
    scroll-snap-align: start;
    border-radius: 16px
  }

  .ab-person-tx {
    padding: 12px
  }

  .ab-person-tx span {
    font-size: 12px
  }

  .ab-dl {
    width: 100%;
    justify-content: center
  }

  .ab-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px
  }

  .ab-gallery img {
    border-radius: 10px
  }

  /* photo beside the name; the story under both */
  .tm-card,
  .tm-lead,
  .tm-grid .tm-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "photo head" "bio bio";
    column-gap: 14px;
    padding: 14px;
    border-radius: 18px
  }

  .tm-head,
  .tm-lead .tm-head {
    align-self: center;
    padding-top: 0
  }

  .tm-card h2,
  .tm-lead h2 {
    font-size: 21px
  }

  .tm-role {
    font-size: 12px
  }

  .tm-bio,
  .tm-lead .tm-bio {
    margin-top: 14px;
    font-size: 14px
  }

  .tm-grid {
    gap: 14px
  }

  .tm-lead {
    margin-bottom: 14px
  }
}

/* ===== Text pages (page.php: Shipping & Returns, Terms of Use, Privacy…) =====
   A title band, then the page's words on a white card; "On this page" (its
   section headings) sticks beside the card on laptops and desktops and folds
   above it on tablets and phones. */
.pg-crumb {
  background: transparent;
  padding-bottom: 0
}

.pg-hero {
  padding: clamp(18px, 2.4vw, 40px) 0 clamp(26px, 3vw, 48px);
  text-align: center
}

.pg-hero h1 {
  max-width: 22em;
  margin: 0 auto;
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1.15;
  color: var(--navy)
}

.pg-bar {
  width: 72px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: var(--red)
}

.pg-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: clamp(48px, 5vw, 96px)
}

.pg-wrap.has-toc {
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  align-items: start
}

.pg-wrap:not(.has-toc) .pg-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto
}

/* On this page */
.pg-toc {
  position: sticky;
  top: 164px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(11, 31, 59, .06)
}

.pg-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 10px;
  list-style: none;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer
}

.pg-toc summary::-webkit-details-marker {
  display: none
}

.pg-toc summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease
}

.pg-toc[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg)
}

.pg-toc ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pgtoc
}

.pg-toc li {
  counter-increment: pgtoc
}

.pg-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.4;
  color: #475467;
  text-decoration: none;
  transition: background .2s ease, color .2s ease
}

.pg-toc a::before {
  content: counter(pgtoc);
  flex-shrink: 0;
  min-width: 18px;
  font-weight: 600;
  color: #2a8d9b
}

.pg-toc a:hover,
.pg-toc a.on {
  background: rgba(102, 195, 208, .14);
  color: var(--navy)
}

/* The words */
.pg-card {
  min-width: 0;
  padding: clamp(24px, 3.2vw, 56px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(11, 31, 59, .07);
  font-family: var(--fb);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.8;
  color: #475467;
  overflow-wrap: anywhere
}

.pg-card>:first-child {
  margin-top: 0
}

.pg-card h2 {
  margin: 2em 0 .7em;
  padding-top: 1.5em;
  border-top: 1px solid var(--gray2);
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(21px, 1.7vw, 28px);
  line-height: 1.25;
  color: var(--navy)
}

.pg-card>h2:first-child {
  padding-top: 0;
  border-top: 0
}

.pg-card h2 strong,
.pg-card h2 b {
  font-weight: inherit;
  color: inherit
}

.pg-card h3 {
  margin: 1.6em 0 .5em;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--navy)
}

.pg-card p {
  margin: 0 0 1em
}

.pg-card strong,
.pg-card b {
  font-weight: 600;
  color: var(--navy)
}

.pg-card a {
  font-weight: 500;
  color: #2a8d9b;
  text-decoration: underline;
  text-underline-offset: 3px
}

.pg-card ul,
.pg-card ol {
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none
}

.pg-card ul li {
  position: relative;
  margin-bottom: .55em;
  padding-left: 26px
}

.pg-card ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(102, 195, 208, .18)
}

.pg-card ol {
  counter-reset: pgol
}

.pg-card ol li {
  position: relative;
  margin-bottom: .55em;
  padding-left: 34px;
  counter-increment: pgol
}

.pg-card ol li::before {
  content: counter(pgol);
  position: absolute;
  left: 0;
  top: .25em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .18);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: #2a8d9b
}

.pg-card table {
  width: 100%;
  margin: 0 0 1.2em;
  border-collapse: collapse;
  font-size: .92em
}

.pg-card th,
.pg-card td {
  padding: 10px 12px;
  border: 1px solid var(--gray2);
  text-align: left;
  vertical-align: top
}

.pg-card th {
  background: #f7f8fa;
  color: var(--navy)
}

.pg-card img {
  max-width: 100%;
  height: auto;
  border-radius: 12px
}

@media (max-width:1024px) {
  .pg-wrap.has-toc {
    grid-template-columns: minmax(0, 1fr)
  }

  .pg-toc {
    position: static;
    max-height: none;
    overflow: visible
  }

  .pg-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px
  }
}

@media (max-width:600px) {
  .pg-hero {
    padding: 12px 0 22px
  }

  .pg-toc {
    padding: 14px 16px;
    border-radius: 16px
  }

  .pg-toc summary {
    padding-bottom: 0
  }

  .pg-toc[open] summary {
    padding-bottom: 10px
  }

  .pg-toc ol {
    grid-template-columns: minmax(0, 1fr)
  }

  .pg-card {
    padding: 22px 18px;
    border-radius: 18px;
    font-size: 15px
  }
}

/* ===== Password screens (woocommerce/myaccount/form-lost-password.php,
   lost-password-confirmation.php, form-reset-password.php): the login page's
   .su-shell, with the three reset steps over the form. */
.su-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: 0;
  list-style: none
}

.su-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap
}

.su-steps li+li::before {
  content: '';
  width: clamp(14px, 1.8vw, 28px);
  height: 2px;
  border-radius: 2px;
  background: var(--gray2)
}

.su-steps li.done+li::before {
  background: var(--teal)
}

.su-steps .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f3f6;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted)
}

.su-steps .n i {
  font-size: 13px
}

.su-steps .on {
  font-weight: 600;
  color: var(--navy)
}

.su-steps .on .n {
  background: var(--navy);
  color: #fff
}

.su-steps .done .n {
  background: rgba(102, 195, 208, .2);
  color: #2a8d9b
}

.su-back {
  margin: 18px 0 0;
  text-align: center
}

.su-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none
}

.su-back a:hover {
  color: var(--red)
}

.su-back i {
  font-size: 16px
}

/* "Check your email" */
.su-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 2px 0 16px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .16);
  box-shadow: inset 0 0 0 1px rgba(102, 195, 208, .35);
  font-size: 30px;
  color: #2a8d9b
}

#customer_login .su-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  text-decoration: none
}

.su-note {
  margin: 16px 0 0;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--muted);
  text-align: center
}

.su-note a {
  font-weight: 600;
  color: var(--red);
  text-decoration: none
}

.su-note a:hover {
  text-decoration: underline
}

/* WooCommerce adds its own show-password button to password fields; ours
   (.su-eye) is the one to keep */
.su-pw .show-password-input {
  display: none !important
}

/* Account details: change password */
.acct-pw-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--muted)
}

.acct-pw-note i {
  font-size: 16px;
  color: #2a8d9b
}

.acct-pw .su-pw input {
  padding-right: 56px
}

.acct-pw .woocommerce-password-strength {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  text-align: left
}

.acct-pw .woocommerce-password-strength.short,
.acct-pw .woocommerce-password-strength.bad {
  color: var(--red)
}

.acct-pw .woocommerce-password-strength.good {
  color: #b7791f
}

.acct-pw .woocommerce-password-strength.strong {
  color: #15803d
}

.acct-pw .woocommerce-password-hint {
  display: block;
  margin-top: 4px;
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted)
}

@media (max-width:600px) {
  /* only the current step's name */
  .su-steps li:not(.on) .t {
    display: none
  }
}

/* ===== WooCommerce's messages, everywhere (added to cart, coupon applied, a
   wrong password, checkout errors…): a white card with a coloured edge and
   icon — teal when something worked, navy for information, a soft red for a
   problem. Styles only, so every message keeps WooCommerce's markup. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  --nc: #2a8d9b;
  --ni: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 12.5L10 15.5L17 8.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  position: relative;
  width: auto;
  margin: 0 0 18px;
  padding: 14px 18px 14px 52px;
  border: 1px solid rgba(46, 53, 99, .08);
  border-left: 4px solid var(--nc);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(11, 31, 59, .06);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  text-align: left;
  list-style: none
}

body .woocommerce-info {
  --nc: var(--navy);
  --ni: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 11.5V16.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 7.51L12.01 7.49889" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

body .woocommerce-error {
  --nc: #b23a40;
  --ni: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 7L12 13" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.01L12.01 16.9989" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 18px;
  width: 21px;
  height: 21px;
  background: var(--nc);
  -webkit-mask: var(--ni) center / contain no-repeat;
  mask: var(--ni) center / contain no-repeat;
  font-family: inherit
}

body .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none
}

body .woocommerce-error li+li {
  margin-top: 6px
}

body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button),
body .woocommerce-error a:not(.button) {
  font-weight: 600;
  color: var(--nc);
  text-decoration: underline;
  text-underline-offset: 2px
}

body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
  float: right;
  margin: -3px 0 -3px 16px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-decoration: none
}

body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body .woocommerce-error .button:hover {
  background: var(--teal);
  color: #fff
}

@media (max-width:600px) {
  body .woocommerce-message,
  body .woocommerce-info,
  body .woocommerce-error {
    padding: 12px 14px 12px 46px;
    font-size: 13px
  }

  body .woocommerce-message::before,
  body .woocommerce-info::before,
  body .woocommerce-error::before {
    top: 13px;
    left: 15px;
    width: 19px;
    height: 19px
  }

  body .woocommerce-message .button,
  body .woocommerce-info .button,
  body .woocommerce-error .button {
    display: inline-block;
    float: none;
    margin: 8px 0 0
  }
}

/* ===== Saved recipes (inc/saved-recipes.php) */
/* "Save recipe" on a recipe's page, under the facts */
.rd-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin-top: clamp(14px, 1.4vw, 22px);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease
}

.rd-save i {
  font-size: 18px
}

.rd-save:hover {
  filter: brightness(1.06)
}

.rd-save.on {
  background: #fff;
  color: var(--red)
}

.rd-save:focus-visible,
.wish-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px
}

/* the message after saving, with a link to them */
.rs-toast a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap
}

.rs-toast a:hover {
  background: rgba(255, 255, 255, .28);
  color: #fff
}

/* Wishlist page: Products / Recipes */
.wish-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  padding: 4px;
  border: 1px solid rgba(46, 53, 99, .1);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(11, 31, 59, .06)
}

.wish-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease
}

.wish-tab i {
  font-size: 18px;
  color: #2a8d9b
}

.wish-tab .n {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f1f3f6;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: var(--navy)
}

.wish-tab[aria-selected="true"] {
  background: var(--navy);
  color: #fff
}

.wish-tab[aria-selected="true"] i {
  color: #fff
}

.wish-tab[aria-selected="true"] .n {
  background: rgba(255, 255, 255, .18);
  color: #fff
}

.wish-panel[hidden] {
  display: none
}

.wish-empty-sub {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--muted)
}

@media (max-width:600px) {
  .wish-tabs {
    display: flex
  }

  .wish-tab {
    flex: 1 1 0;
    padding: 0 12px;
    font-size: 14px
  }

  .rd-save {
    height: 42px;
    padding: 0 18px;
    font-size: 13px
  }
}

/* ===== About Us with a finished banner (inc/about-pages.php): the picture
   has the words, so it is shown whole (its phone version on phones) and the
   h1 is kept for screen readers and search engines only. */
.ab-hero.is-banner {
  display: block;
  min-height: 0;
  background: var(--navy)
}

.ab-hero.is-banner::before {
  content: none
}

.ab-hero.is-banner picture {
  display: block
}

.ab-hero.is-banner img {
  display: block;
  width: 100%;
  height: auto
}

.ab-hero.is-banner h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

/* Quality & Responsible Sourcing's top photo: 4:3, so the filleting photo
   keeps the people and the fish (16:9 cut both) */
.ab-quality .ab-mosaic img:first-child {
  aspect-ratio: 4 / 3
}

/* ===== Explore our Range: "Shop all" leads each card's list */
.rcard .spill.spill-all {
  background: var(--navy);
  font-weight: 600;
  color: #fff
}

.rcard .spill.spill-all:hover {
  background: var(--red);
  color: #fff
}

/* ===== Live search: "View All", a blue underlined link (not a button), centred
   right under the products */
.sp-all {
  display: block;
  width: fit-content;
  margin: 18px auto 4px;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #2563eb;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease
}

.sp-all:hover,
.sp-all:focus-visible {
  background: none;
  color: #1e40af
}

/* ===== Listing page Category dropdown: a group a menu section, its name in
   bold over its sub-categories (archive-product.php). plp-app.js fitMenu()
   sets --gcols. */
.pdd-menu>.fcol.fgrps {
  grid-auto-flow: row;
  grid-template-rows: none;
  grid-template-columns: repeat(var(--gcols, 4), max-content);
  align-items: start;
  gap: 22px 36px
}

.fgrp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0
}

.fgrp-hd {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray2)
}

.fgrp-hd>span:last-child,
b.fgrp-hd {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy)
}

@media (max-width:1024px) {
  /* the phone and tablet sheet: the groups one under another */
  .mfp #mCatList {
    gap: 22px
  }

  .mfp .fgrp {
    gap: 16px
  }

  .mfp .fgrp-hd>span:last-child {
    font-weight: 700;
    color: var(--navy)
  }
}

/* ===== The WhatsApp logo (bigsams_whatsapp_icon()) */
.wa-ic {
  display: block;
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0
}

.chat-btn .wa-ic {
  width: 34px;
  height: 34px
}

.faq-help-cta .wa-ic {
  width: 22px;
  height: 22px
}

/* ===== PDP slideshow (assets/js/pdp-app.js): the fade between photos */
#pdpHero {
  transition: opacity .25s ease
}

#pdpHero.pdp-fading {
  opacity: 0
}

@media (prefers-reduced-motion: reduce) {
  #pdpHero {
    transition: none
  }
}

/* ===== Contact Us (an Elementor page; inc/staging-cleanup.php put its banner
   in): the banner fills the top section, the phone version on phones; the
   old title stays for screen readers only. */
.bs-contact-hero,
.bs-contact-hero>.elementor-container,
.bs-contact-hero .elementor-widget-wrap {
  padding: 0 !important;
  max-width: none !important
}

.bs-contact-hero {
  background: var(--navy) !important
}

.bs-contact-hero .elementor-widget {
  margin: 0 !important
}

.bs-contact-banner img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto
}

.bs-contact-banner.bs-cb-phone {
  display: none
}

@media (max-width:600px) {
  .bs-contact-banner.bs-cb-desktop {
    display: none
  }

  .bs-contact-banner.bs-cb-phone {
    display: block
  }
}

.bs-contact-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

/* ===== Accessibility: the small notes under prices read against the page */
.pp-note {
  color: #4b5563
}

/* ===== Contact Us (page-contact-us.php; inc/contact-page.php) */
.ct-head {
  max-width: 720px;
  margin: 0 auto clamp(28px, 3vw, 52px);
  text-align: center
}

.ct-head .ab-bar {
  margin-left: auto;
  margin-right: auto
}

.ct-head p {
  margin: 16px 0 0;
  font-family: var(--fb);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
  color: var(--muted)
}

.ct-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none
}

.ct-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(46, 53, 99, .08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(11, 31, 59, .07);
  transition: transform .25s ease, box-shadow .25s ease
}

.ct-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(11, 31, 59, .12)
}

.ct-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .18);
  box-shadow: inset 0 0 0 1px rgba(102, 195, 208, .4);
  font-size: 26px;
  color: #1f7a88
}

.ct-card h3 {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 600;
  color: var(--navy)
}

.ct-card address {
  font-family: var(--fb);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
  color: #475467
}

.ct-v {
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  overflow-wrap: anywhere;
  text-decoration: none
}

.ct-v:hover {
  color: var(--red)
}

.ct-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px
}

.ct-link:hover {
  color: #1e40af
}

.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(20px, 2.6vw, 44px);
  align-items: stretch
}

.ct-grid-one {
  grid-template-columns: minmax(0, 760px);
  justify-content: center
}

.ct-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 44px);
  border: 1px solid rgba(46, 53, 99, .08);
  border-radius: 24px;
  background: var(--page)
}

.ct-panel .ab-h2 {
  font-size: clamp(26px, 2.2vw, 38px)
}

.ct-formbox {
  margin-top: clamp(20px, 2vw, 32px)
}

.ct-mapbox {
  flex: 1 1 auto;
  min-height: 320px;
  margin-top: clamp(20px, 2vw, 32px);
  overflow: hidden;
  border-radius: 16px;
  background: #e9eef3
}

.ct-mapbox iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0
}

.ct-mappanel .ct-link {
  align-self: flex-start;
  margin-top: 14px;
  padding-top: 0
}

.ct-workcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(28px, 4vw, 64px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(11, 31, 59, .08)
}

.ct-worktx {
  max-width: 820px
}

.ct-workbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none
}

/* The enquiry form (Formidable), in the site's inputs: two to a row, the message,
   file and send across the card. Formidable's own style sets these through
   variables and plain rules; these are more specific. */
.ct-formbox .frm_forms {
  --form-width: 100%;
  --field-height: 48px;
  --field-font-size: 15px;
  --border-color: #d6dbe4;
  --border-color-active: #66c3d0;
  --text-color: #2e3563;
  --label-color: #2e3563;
  --bg-color: #fff;
  --bg-color-active: #fff;
  --submit-bg-color: #e31e24;
  --submit-hover-bg-color: #c4161c;
  --submit-border-color: #e31e24;
  --submit-text-color: #fff;
  --submit-height: 50px;
  --submit-border-radius: 999px;
  --required-color: #c4161c;
  width: 100% !important;
  max-width: none !important
}

.ct-formbox .frm_forms fieldset {
  margin: 0;
  padding: 0;
  border: 0
}

.ct-formbox .frm_fields_container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px
}

.ct-formbox .frm_fields_container>* {
  grid-column: 1 / -1
}

.ct-formbox .frm_fields_container>#frm_field_7_container,
.ct-formbox .frm_fields_container>#frm_field_8_container,
.ct-formbox .frm_fields_container>#frm_field_9_container,
.ct-formbox .frm_fields_container>#frm_field_11_container {
  grid-column: span 1
}

.ct-formbox .frm_form_field {
  margin: 0 !important;
  min-width: 0
}

.ct-formbox .frm_primary_label {
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-family: var(--fb);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--navy) !important
}

.ct-formbox .frm_required {
  color: #c4161c
}

.ct-formbox .with_frm_style input[type=text],
.ct-formbox .with_frm_style input[type=email],
.ct-formbox .with_frm_style input[type=tel],
.ct-formbox .with_frm_style input[type=number],
.ct-formbox .with_frm_style select,
.ct-formbox .with_frm_style textarea {
  width: 100% !important;
  max-width: none !important;
  height: 48px;
  padding: 0 16px !important;
  border: 1.5px solid #d6dbe4 !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  font-family: var(--fb);
  font-size: 15px !important;
  color: var(--navy) !important;
  transition: border-color .2s ease, box-shadow .2s ease
}

.ct-formbox .with_frm_style textarea {
  height: auto;
  min-height: 130px;
  padding: 12px 16px !important
}

.ct-formbox .with_frm_style input:focus,
.ct-formbox .with_frm_style select:focus,
.ct-formbox .with_frm_style textarea:focus {
  border-color: #66c3d0 !important;
  box-shadow: 0 0 0 3px rgba(102, 195, 208, .25) !important;
  outline: 0
}

.ct-formbox .frm_dropzone,
.ct-formbox .dz-clickable {
  border: 1.5px dashed #b9c2d0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  font-family: var(--fb)
}

.ct-formbox .frm_submit {
  margin: 4px 0 0 !important
}

.ct-formbox .frm_submit button,
.ct-formbox .frm_submit input[type=submit],
.ct-formbox .frm_button_submit {
  min-width: 190px;
  height: 50px;
  padding: 0 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  font-family: var(--fb);
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer;
  transition: background .2s ease
}

.ct-formbox .frm_submit button:hover,
.ct-formbox .frm_submit input[type=submit]:hover,
.ct-formbox .frm_button_submit:hover {
  background: #c4161c !important
}

.ct-formbox .frm_error,
.ct-formbox .frm_error_style {
  font-family: var(--fb);
  font-size: 13px;
  color: #b23a40
}

.ct-formbox .frm_message {
  padding: 16px 18px;
  border-left: 4px solid #2a8d9b;
  border-radius: 14px;
  background: #fff;
  font-family: var(--fb);
  color: var(--navy)
}

@media (max-width:1100px) {
  .ct-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .ct-grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

@media (max-width:760px) {
  .ct-workcard {
    flex-direction: column;
    align-items: flex-start
  }

  .ct-formbox .frm_fields_container {
    grid-template-columns: minmax(0, 1fr)
  }

  .ct-formbox .frm_fields_container>#frm_field_7_container,
  .ct-formbox .frm_fields_container>#frm_field_8_container,
  .ct-formbox .frm_fields_container>#frm_field_9_container,
  .ct-formbox .frm_fields_container>#frm_field_11_container {
    grid-column: 1 / -1
  }
}

@media (max-width:600px) {
  .ct-cards {
    grid-template-columns: minmax(0, 1fr)
  }

  .ct-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px
  }

  .ct-ic {
    margin-bottom: 0
  }

  .ct-card address,
  .ct-card .ct-v,
  .ct-card .ct-link {
    flex-basis: 100%
  }

  .ct-mapbox,
  .ct-mapbox iframe {
    min-height: 260px
  }

  .ct-workbtn {
    width: 100%;
    justify-content: center
  }
}

/* ===== Accessibility, round 3: small text on the listing and product cards */
.pcard .imgw .band span,
.plp-grid .pcard .imgw .band span {
  color: var(--navy)
}

.pc-var {
  color: var(--navy)
}

.pc-var-w.open .pc-var {
  color: #fff
}

.pcard .prow .mrp2,
.plp-grid .pcard .pr .mrp2 {
  color: #6b7280
}

.plp-mbar .pmb-count {
  color: #4b5563
}

.plp-crumb-top .bc a {
  color: #1f7a88;
  text-decoration: underline;
  text-underline-offset: 2px
}

.coupon .cwm {
  height: auto
}

/* ===== Contact Us: each card acts as a whole; the send button matches the site's pills */
.ct-card {
  position: relative
}

.ct-go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit
}

.ct-go:focus-visible {
  outline: 0
}

.ct-go:focus-visible::after {
  outline: 3px solid #2563eb;
  outline-offset: 3px
}

.ct-card:hover .ct-v {
  color: var(--red)
}

.ct-card:hover .ct-link {
  color: #1e40af
}

.ct-copy {
  position: absolute;
  top: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(46, 53, 99, .14);
  border-radius: 50%;
  background: #fff;
  color: #1f7a88;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease
}

.ct-copy:hover,
.ct-copy:focus-visible,
.ct-copy.done {
  border-color: #1f7a88;
  background: #1f7a88;
  color: #fff
}

.ct-copy.done svg {
  display: none
}

.ct-copy.done::before {
  content: "";
  width: 16px;
  height: 8px;
  margin-top: -3px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg)
}

.ct-copied {
  position: absolute;
  top: calc(clamp(14px, 1.4vw, 20px) + 42px);
  right: clamp(14px, 1.4vw, 20px);
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1f7a88;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  pointer-events: none
}

.ct-copied:empty {
  display: none
}

.ct-worktx .ab-text a {
  color: #2563eb
}

.ct-worktx .ab-text a:hover {
  color: #1e40af
}

/* Formidable's own button rule (height: auto, 14px, its own padding) is more
   specific than the ones above, so the button came out short and tight, and
   centred under fields that sit to the left. */
.ct-formbox .frm_forms .frm_submit {
  margin: 8px 0 0 !important;
  text-align: left !important
}

.ct-formbox .frm_forms .frm_submit button,
.ct-formbox .frm_forms .frm_submit input[type=submit],
.ct-formbox .frm_forms .frm_button_submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 200px;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 44px !important;
  line-height: 1 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .01em
}

@media (max-width:600px) {
  .ct-formbox .frm_forms .frm_submit button,
  .ct-formbox .frm_forms .frm_submit input[type=submit],
  .ct-formbox .frm_forms .frm_button_submit {
    width: 100% !important
  }
}

/* ===== Phones: the teal "90 min Delivery" strip under a product photo. The cards are
   about 130px wide there, and the strip's 12px words were wider than the card's own
   title; its words and height now follow the card's width (tablets and desktop keep
   12px and the 17px strip). */
@media (max-width:600px) {
  .pcard {
    --strip: max(12px, 7.5cqw)
  }

  .pcard .imgw .band span,
  .plp-grid .pcard .imgw .band span {
    padding: 0 6px;
    font-size: clamp(8px, 6.4cqw, 12px)
  }
}

/* ===== Phone header: the location pin is alive. It is drawn heavier than the
   other icons so its movement reads: it hops, tilts and lands, rests a moment and
   goes again. Only the icon moves (no box, no ring); shoppers whose device asks for
   less motion get the still pin. */
@media (max-width:600px) {
  .m-loc .m-loc-pin {
    font-size: 22px;
    align-self: center
  }

  .m-loc .m-loc-pin::before {
    transform-origin: 50% 100%;
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><circle cx="12" cy="10" r="2.3" fill="currentColor"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><circle cx="12" cy="10" r="2.3" fill="currentColor"/></svg>')
  }
}

@media (max-width:600px) and (prefers-reduced-motion: no-preference) {
  .m-loc .m-loc-pin::before {
    animation: mLocPin 2.8s ease-in-out infinite
  }
}

@keyframes mLocPin {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  12% {
    transform: translateY(-5px) rotate(-8deg)
  }

  24% {
    transform: translateY(0) rotate(5deg) scaleY(.93)
  }

  34% {
    transform: translateY(-2px) rotate(-3deg)
  }

  44% {
    transform: translateY(0) rotate(0)
  }
}

/* ===== Search dropdown on a narrow bar (the panel is as wide as the bar): the chips
   drop their minimum width so two fit side by side instead of one to a row. */
@media (max-width:1250px) {
  .search-panel .sp-chips {
    gap: 12px 8px
  }

  .search-panel .chip {
    min-width: 0;
    padding: 7px 14px 9px
  }
}

/* ===== The WhatsApp button, gently alive: it floats up and down a few pixels, a soft
   green ring breathes out from it, and every few seconds the logo gives a little
   shake. It holds still under the pointer, and for anyone whose device asks for
   less motion. (The float uses the separate "translate" property, so the
   grow-on-hover transform above still works.) */
@media (prefers-reduced-motion: no-preference) {
  .chat-btn {
    animation: bsChatFloat 3.4s ease-in-out infinite
  }

  .chat-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: bsChatHalo 3.4s ease-out infinite
  }

  .chat-btn .wa-ic {
    transform-origin: 50% 60%;
    animation: bsChatShake 6.8s ease-in-out infinite
  }

  .chat-btn:hover,
  .chat-btn:focus-visible,
  .chat-btn:hover::after,
  .chat-btn:hover .wa-ic {
    animation-play-state: paused
  }
}

@keyframes bsChatFloat {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -7px
  }
}

@keyframes bsChatHalo {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 174, 70, .4)
  }

  70%,
  100% {
    box-shadow: 0 0 0 16px rgba(63, 174, 70, 0)
  }
}

@keyframes bsChatShake {

  0%,
  78%,
  100% {
    transform: rotate(0)
  }

  81% {
    transform: rotate(-14deg)
  }

  84% {
    transform: rotate(12deg)
  }

  87% {
    transform: rotate(-9deg)
  }

  90% {
    transform: rotate(6deg)
  }

  93% {
    transform: rotate(0)
  }
}

/* ===== Product cards: the Add button keeps a proper size, and a struck-through price
   drops to a line of its own when there isn't room for it beside the price (it used
   to run on under the Add button). The price row is already as tall as the button, so
   the card's layout doesn't change. */
.pcard .prow .pr,
.plp-grid .pcard .pr {
  flex-wrap: wrap;
  align-content: center;
  row-gap: 2px
}

.pcard .prow .pr .mrp2,
.plp-grid .pcard .pr .mrp2 {
  margin-left: 0
}

/* Sized by the card's own width (cqw), with a floor, so a narrow card (a phone, or a
   tablet showing five across) keeps room for the price beside the button. */
.prod-rail .pcard .btn-add,
.prod-rail .pcard .qty {
  height: max(28px, 15cqw);
  width: max(56px, 38cqw)
}

.prod-rail .pcard .btn-add {
  font-size: max(12px, 6.4cqw)
}

.prod-rail .pcard .qty button {
  font-size: max(13px, 6.8cqw)
}

.prod-rail .pcard .qty b {
  font-size: max(12px, 5.8cqw)
}

/* Tablet widths: the rail cards are narrow (about 150px) but kept the 18px price, which
   left no room beside the Add button. The price now follows the card's width there. */
@media (min-width:601px) and (max-width:1024px) {
  .prod-rail .pcard .pr b {
    font-size: clamp(12px, 8.2cqw, 18px)
  }
}

/* ===== Phones only: a bigger Add button on the product cards. Everything is sized by the
   card's own width (cqw) with a floor, and the price steps down to leave room beside the
   button (the struck-through price already drops under it). Tablets and desktop are not
   touched. */
@media (max-width:600px) {

  /* Rails (Home, Related Products, Buy again): 2.5 cards to a screen */
  .prod-rail .pcard .bd {
    padding-left: 4cqw;
    padding-right: 4cqw
  }

  .prod-rail .pcard .prow {
    column-gap: 2px
  }

  .prod-rail .pcard .btn-add,
  .prod-rail .pcard .qty {
    width: clamp(52px, 48cqw, 80px);
    height: clamp(30px, 25cqw, 36px)
  }

  .prod-rail .pcard .btn-add {
    font-size: clamp(12.5px, 9.6cqw, 15px)
  }

  .prod-rail .pcard .qty button {
    font-size: clamp(14px, 10cqw, 16px)
  }

  .prod-rail .pcard .qty b {
    font-size: clamp(12.5px, 9.4cqw, 15px)
  }

  .prod-rail .pcard .pr b {
    font-size: clamp(10.5px, 9cqw, 13px)
  }

  /* Listing grid: two cards across */
  .plp-grid .pcard .btn-add,
  .plp-grid .pcard .qty {
    min-width: max(60px, 44cqw);
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px
  }

  .plp-grid .pcard .qty button {
    font-size: 14px
  }

  .plp-grid .pcard .qty b {
    font-size: 13px
  }

  .plp-grid .pcard .pr b {
    font-size: clamp(10.5px, 7.6cqw, 13px)
  }
}

/* Listing grid on the narrowest phones (320px): the card's side padding gives a little
   so the price still fits beside the bigger Add button. */
@media (max-width:600px) {
  .plp-grid .pcard .bd {
    padding-left: clamp(8px, 6cqw, 20px);
    padding-right: clamp(8px, 6cqw, 20px)
  }
}

/* ===== Points & Rewards (template-parts/account/rewards.php; assets/js/rewards-app.js) */
.pts {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 28px)
}

.pts [hidden] {
  display: none !important
}

.pts-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  padding: clamp(22px, 2.4vw, 40px)
}

.pts-h {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--fb);
  font-size: clamp(19px, 1.4vw, 24px);
  font-weight: 700;
  color: var(--navy)
}

/* The balance */
.pts-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(24px, 2.8vw, 44px);
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #3a4380 0%, var(--navy) 55%, #232a55 100%);
  box-shadow: 0 10px 30px rgba(46, 53, 99, .25)
}

.pts-hero .rp-wm {
  position: absolute;
  z-index: 0;
  width: clamp(180px, 20vw, 320px);
  height: auto;
  opacity: .1;
  pointer-events: none
}

.pts-hero-main,
.pts-stats {
  position: relative;
  z-index: 1
}

.pts-hero-main {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px)
}

.pts-coin {
  flex: none;
  width: clamp(64px, 6vw, 92px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .28))
}

.pts-coin svg {
  display: block;
  width: 100%;
  height: auto
}

.pts-hi {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, .75)
}

.pts-num {
  display: flex;
  align-items: baseline;
  gap: 10px
}

.pts-num b {
  font-family: var(--fb);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em
}

.pts-num span {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 600;
  color: var(--teal)
}

.pts-worth {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .9)
}

.pts-worth b {
  color: #fff
}

.pts-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.pts-stat {
  min-width: 150px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14)
}

.pts-stat small {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72)
}

.pts-stat b {
  display: block;
  margin-top: 4px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 700
}

.pts-tier-bar {
  display: block;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2)
}

.pts-tier-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--teal)
}

.pts-tier em {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  color: rgba(255, 255, 255, .75)
}

/* How to earn + Redeem */
.pts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  align-items: start
}

.pts-grid>.pts-card:only-child {
  grid-column: 1 / -1
}

.pts-earn-list,
.pts-fixed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none
}

.pts-earn-list li {
  display: flex;
  align-items: center;
  gap: 16px
}

.pts-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(102, 195, 208, .18);
  box-shadow: inset 0 0 0 1px rgba(102, 195, 208, .4);
  font-size: 26px;
  color: #1f7a88
}

.pts-earn-tx {
  min-width: 0
}

.pts-earn-tx b {
  display: block;
  font-family: var(--fb);
  font-size: 16px;
  color: var(--navy)
}

.pts-earn-tx span {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted)
}

.pts-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted)
}

.pts-note i {
  flex: none;
  font-size: 18px;
  color: #1f7a88
}

.pts-sub {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted)
}

.pts-sub b {
  color: var(--navy)
}

.pts-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy)
}

.pts-amount {
  display: flex;
  align-items: center;
  gap: 10px
}

.pts-amount input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 12px;
  border: 1.5px solid #d6dbe4;
  border-radius: 14px;
  background: #fff;
  font-family: var(--fb);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--navy);
  appearance: textfield;
  -moz-appearance: textfield
}

.pts-amount input::-webkit-outer-spin-button,
.pts-amount input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none
}

.pts-amount input:focus {
  border-color: #66c3d0;
  box-shadow: 0 0 0 3px rgba(102, 195, 208, .25);
  outline: 0
}

.pts-step {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid #d6dbe4;
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s, border-color .15s
}

.pts-step:hover {
  border-color: #66c3d0;
  background: rgba(102, 195, 208, .12)
}

.pts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px
}

.pts-chips button {
  height: 36px;
  padding: 0 18px;
  border: 1.5px solid rgba(102, 195, 208, .7);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s
}

.pts-chips button:hover {
  background: rgba(102, 195, 208, .16)
}

.pts-result {
  margin: 16px 0;
  font-size: 15px;
  color: var(--muted)
}

.pts-result b {
  margin-left: 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red)
}

.pts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease
}

.pts-btn:hover {
  background: #c4161c
}

.pts-btn:disabled {
  background: #d1d5db;
  color: #fff;
  cursor: not-allowed
}

.pts-btn.is-loading {
  opacity: .7;
  cursor: progress
}

.pts-btn.ghost {
  border: 1.5px solid rgba(46, 53, 99, .3);
  background: #fff;
  color: var(--navy)
}

.pts-btn.ghost:hover {
  background: rgba(46, 53, 99, .06)
}

.pts-btn.ghost.done {
  border-color: #1f7a88;
  background: #1f7a88;
  color: #fff
}

.pts-btn.small {
  height: 38px;
  padding: 0 18px;
  font-size: 14px
}

#ptsGo {
  width: 100%
}

.pts-confirm {
  padding: 16px;
  border-radius: 16px;
  background: #fff8f3;
  border: 1px dashed rgba(227, 30, 36, .4)
}

.pts-confirm p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy)
}

.pts-confirm div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.pts-confirm .pts-btn {
  height: 44px;
  padding: 0 24px;
  font-size: 15px
}

.pts-msg {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--navy)
}

.pts-msg.err {
  color: #c4161c
}

.pts-fixed {
  margin-top: 22px
}

.pts-fixed li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #eceef2;
  border-radius: 14px
}

.pts-empty {
  margin: 0;
  padding: 18px;
  border-radius: 14px;
  background: var(--page);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted)
}

/* Coupons */
.pts-coupon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none
}

.pts-coupon {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1.5px dashed rgba(46, 53, 99, .28);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(102, 195, 208, .16), #fff 45%)
}

.pts-coupon-v {
  flex: none;
  min-width: 78px;
  text-align: center
}

.pts-coupon-v b {
  display: block;
  font-family: var(--fb);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy)
}

.pts-coupon-v small {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

.pts-coupon-m {
  flex: 1;
  min-width: 0
}

.pts-code {
  display: inline-block;
  max-width: 100%;
  padding: 5px 12px;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: #f1f3f7;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--navy)
}

.pts-coupon-m small {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted)
}

.pts-coupon-a {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px
}

/* Activity */
.pts-rows {
  margin: 0;
  padding: 0;
  list-style: none
}

.pts-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eceef2
}

.pts-row:last-child {
  border-bottom: 0
}

.pts-row-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px
}

.pts-row-ic.pos {
  background: #e8f7ee;
  color: #16a34a
}

.pts-row-ic.neg {
  background: #fdecec;
  color: #c4161c
}

.pts-row-tx {
  flex: 1;
  min-width: 0
}

.pts-row-tx b {
  display: block;
  font-size: 15px;
  color: var(--navy)
}

.pts-row-tx small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere
}

.pts-row-pts {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  text-align: right
}

.pts-row-pts small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted)
}

.pts-row-pts.pos {
  color: #16a34a
}

.pts-row-pts.neg {
  color: #c4161c
}

.pts-more {
  margin: 18px auto 0;
  display: flex
}

.pts-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer
}

.pts-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.pts-switch-ui {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: #cfd5de;
  transition: background .2s
}

.pts-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s
}

.pts-switch input:checked+.pts-switch-ui {
  background: #1f7a88
}

.pts-switch input:checked+.pts-switch-ui::after {
  transform: translateX(18px)
}

.pts-switch input:focus-visible+.pts-switch-ui {
  outline: 3px solid #2563eb;
  outline-offset: 2px
}

.pts-off {
  text-align: center
}

.pts-off i {
  display: block;
  margin-bottom: 8px;
  font-size: 40px;
  color: var(--red)
}

.pts-off h2 {
  margin: 0 0 6px;
  font-family: var(--fb);
  font-size: 22px;
  color: var(--navy)
}

.pts-off p {
  margin: 0;
  color: var(--muted)
}

.pts-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  max-width: 88vw;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--navy);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .25s, transform .25s
}

.pts-toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.pts-toast.err {
  background: #c4161c
}

@media (max-width:900px) {
  .pts-grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

@media (max-width:700px) {
  .pts-hero {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px
  }

  .pts-stats {
    width: 100%
  }

  .pts-stat {
    flex: 1 1 130px;
    min-width: 0
  }

  .pts-card {
    border-radius: 18px
  }

  .pts-coupon {
    flex-wrap: wrap;
    gap: 12px 16px
  }

  .pts-coupon-a {
    flex-direction: row;
    width: 100%
  }

  .pts-coupon-a .pts-btn {
    flex: 1
  }

  .pts-btn {
    padding: 0 22px
  }

  .pts-confirm .pts-btn {
    flex: 1
  }
}

/* Points & Rewards, polish: the tiles line their numbers up, the pill stays on one
   line on a phone, and the coupon buttons don't wrap. */
.pts-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.pts-coupon-a .pts-btn {
  white-space: nowrap
}

@media (max-width:700px) {
  .pts-coin {
    width: 56px
  }

  .pts-worth {
    padding: 5px 12px;
    font-size: 13px;
    white-space: nowrap
  }

  .pts-stat {
    padding: 12px 14px
  }

  .pts-coupon-a .pts-btn {
    padding: 0 10px
  }
}

/* Points & Rewards: used / expired coupons, and the coin */
.pts-coupons-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: clamp(14px, 1.4vw, 22px)
}

.pts-coupons-hd .pts-h {
  margin: 0
}

.pts-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #f1f3f7
}

.pts-tab {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s
}

.pts-tab.on {
  background: #fff;
  box-shadow: 0 1px 4px rgba(46, 53, 99, .18);
  color: var(--navy)
}

.pts-tab:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px
}

.pts-coupon.past {
  border-style: solid;
  border-color: #e2e5eb;
  background: #f7f8fa
}

.pts-coupon.past .pts-coupon-v b {
  color: #6b7280
}

.pts-coupon.past .pts-code {
  background: #eceef2;
  color: #6b7280;
  text-decoration: line-through
}

.pts-badge {
  flex: none;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em
}

.pts-badge.used {
  background: #e8f7ee;
  color: #15803d
}

.pts-badge.expired {
  background: #fdecec;
  color: #b91c1c
}

.pts-badge.returned {
  background: #eaf2ff;
  color: #1d4ed8
}

/* The gold coin: a slow flip with a little float, and a soft glow that breathes */
@media (prefers-reduced-motion: no-preference) {
  .pts-coin {
    animation: ptsCoinFloat 4.6s ease-in-out infinite
  }

  .pts-coin svg {
    animation: ptsCoinFlip 4.6s cubic-bezier(.45, .05, .25, 1) infinite;
    transform-origin: 50% 50%
  }
}

@keyframes ptsCoinFlip {

  0%,
  58%,
  100% {
    transform: rotateY(0)
  }

  82% {
    transform: rotateY(360deg)
  }
}

@keyframes ptsCoinFloat {

  0%,
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .28)) drop-shadow(0 0 0 rgba(246, 196, 83, 0))
  }

  50% {
    transform: translateY(-4px);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .24)) drop-shadow(0 0 14px rgba(246, 196, 83, .55))
  }
}

@media (max-width:700px) {
  .pts-coupons-hd {
    align-items: flex-start
  }

  .pts-tabs {
    width: 100%
  }

  .pts-tab {
    flex: 1;
    padding: 0 10px;
    font-size: 13px
  }

  .pts-coupon.past .pts-badge {
    margin-left: auto
  }
}

/* Points & Rewards: say where the points went when they are already in coupons */
.pts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px
}

.pts-pills .pts-worth {
  margin-top: 0
}

.pts-wait {
  border: 1px solid rgba(246, 196, 83, .6);
  background: rgba(246, 196, 83, .2);
  color: #fff;
  text-decoration: none
}

.pts-wait:hover,
.pts-wait:focus-visible {
  background: rgba(246, 196, 83, .34);
  color: #fff
}

@media (max-width:700px) {
  .pts-wait {
    white-space: normal
  }
}

/* Points & Rewards: three boxes under the balance (earned, turned into coupons, left to redeem) */
.pts-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 440px;
  max-width: 600px
}

.pts-stat {
  min-width: 0
}

.pts-stat.pts-left {
  border-color: rgba(102, 195, 208, .7);
  background: rgba(102, 195, 208, .18)
}

.pts-stat.pts-left b {
  color: #fff
}

.pts-stat.pts-tier {
  grid-column: 1 / -1
}

@media (max-width:700px) {
  .pts-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-basis: 100%;
    max-width: none
  }

  .pts-stat.pts-left {
    grid-column: 1 / -1
  }
}

/* Cart drawers: a field to type or paste a coupon code, then the picker */
.cp-form {
  display: flex;
  gap: 8px;
  margin-top: 10px
}

.cp-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--gray2);
  border-radius: 10px;
  background: #fff;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy)
}

.cp-input::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted)
}

.cp-input:focus {
  border-color: #66c3d0;
  box-shadow: 0 0 0 3px rgba(102, 195, 208, .25);
  outline: 0
}

.cp-apply {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .2s
}

.cp-apply:hover {
  background: #c4161c
}

.cp-apply:disabled {
  opacity: .65;
  cursor: progress
}

.cp-msg {
  display: none;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c4161c
}

.cp-msg.show {
  display: block
}

.cp-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted)
}

.cp-or::before,
.cp-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray2)
}

.cp-grp {
  padding: 8px 12px 6px;
  background: var(--page);
  border-bottom: 1px solid var(--gray2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted)
}

.cp-menu {
  max-height: 260px;
  overflow-y: auto
}

/* The loyalty plugin's points popup (cart and checkout "Click Here"), in the site's look */
.alertify .ajs-dimmer {
  background: #1f2547 !important;
  opacity: .62 !important
}

.alertify .ajs-dialog {
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(31,37,71,.35) !important;
  font-family: var(--fb)
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) {
  max-width: min(780px,94vw) !important;
  padding: 30px 30px 8px !important
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-header {
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-commands {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 3
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-commands button.ajs-close {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%232e3563' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat !important;
  cursor: pointer
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-commands button.ajs-close:hover {
  background-color: #e5e7eb !important
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-body .ajs-content {
  padding: 0 !important
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-footer {
  margin: 0 !important;
  padding: 6px 0 22px !important;
  border: 0 !important;
  background: transparent !important
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-footer .ajs-button {
  min-width: 110px;
  height: 44px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s
}

.alertify .ajs-dialog:has(.wlr-myaccount-page) .ajs-footer .ajs-button:hover {
  background: #c4161c !important
}

.alertify .wlr-myaccount-page {
  padding: 2px 0 0 !important;
  align-items: stretch;
  color: var(--navy);
  font-family: var(--fb)
}

.alertify .wlr-myaccount-page .wlr-heading-container {
  max-width: none;
  justify-content: flex-start
}

.alertify .wlr-myaccount-page .wlr-heading {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--fd);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy)
}

.alertify .wlr-myaccount-page .wlr-text-color {
  color: var(--navy) !important
}

.alertify .wlr-myaccount-page .wlr-points-container {
  margin-bottom: 24px;
  gap: 0
}

.alertify .wlr-myaccount-page #wlr-points {
  gap: 12px;
  flex-wrap: nowrap
}

.alertify .wlr-myaccount-page #wlr-available-points,
.alertify .wlr-myaccount-page #wlr-redeemed-points,
.alertify .wlr-myaccount-page #wlr-used-rewards {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 16px;
  gap: 6px;
  border: 0 !important;
  border-radius: 16px;
  background: var(--page) !important;
  box-shadow: none
}

.alertify .wlr-myaccount-page #wlr-available-points {
  background: var(--navy) !important
}

.alertify .wlr-myaccount-page #wlr-available-points .wlr-text-color,
.alertify .wlr-myaccount-page #wlr-available-points p {
  color: #fff !important
}

.alertify .wlr-myaccount-page #wlr-points i {
  width: auto !important;
  height: auto !important;
  font-size: 30px;
  line-height: 1
}

.alertify .wlr-myaccount-page .wlr-theme-color-apply {
  color: #3aa9ba !important
}

.alertify .wlr-myaccount-page #wlr-available-points .wlr-theme-color-apply {
  color: #8fd8e2 !important
}

.alertify .wlr-myaccount-page #wlr-available-points-heading,
.alertify .wlr-myaccount-page #wlr-redeemed-points-heading,
.alertify .wlr-myaccount-page #wlr-used-rewards-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3
}

.alertify .wlr-myaccount-page #wlr-available-point-value,
.alertify .wlr-myaccount-page #wlr-redeemed-point-value,
.alertify .wlr-myaccount-page #wlr-used-reward-value-count {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1
}

.alertify .wlr-myaccount-page .wlr-points-container p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4
}

.alertify .wlr-myaccount-page #wlr-used-rewards select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--gray2) !important;
  border-radius: 999px;
  background: #fff !important;
  font-size: 12px;
  font-weight: 600
}

.alertify .wlr-myaccount-page .wlr-user-reward-titles {
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 14px;
  padding: 4px;
  border-radius: 999px;
  background: var(--page)
}

.alertify .wlr-myaccount-page .wlr-my-rewards-title {
  padding: 9px 20px;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  transition: background .2s
}

.alertify .wlr-myaccount-page .wlr-my-rewards-title h4 {
  font-size: 15px;
  font-weight: 600
}

.alertify .wlr-myaccount-page .wlr-my-rewards-title.active {
  background: var(--navy) !important
}

.alertify .wlr-myaccount-page .wlr-my-rewards-title.active i,
.alertify .wlr-myaccount-page .wlr-my-rewards-title.active h4 {
  color: #fff !important
}

.alertify .wlr-myaccount-page .wlr-your-reward {
  margin: 0 0 18px
}

.alertify .wlr-myaccount-page .wlr-customer-reward {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px
}

.alertify .wlr-myaccount-page .wlr-reward-card,
.alertify .wlr-myaccount-page .wlr-coupons-content {
  min-height: 0;
  border: 1px solid var(--gray2) !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(46,53,99,.06)
}

.alertify .wlr-myaccount-page .wlr-reward-card {
  padding: 0 16px 16px
}

.alertify .wlr-myaccount-page .wlr-reward-card .wlr-card-container {
  margin-top: 14px !important
}

.alertify .wlr-myaccount-page .wlr-reward-type-name {
  border: 0 !important;
  border-radius: 0 15px 0 12px;
  background: var(--page) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize
}

.alertify .wlr-myaccount-page .wlr-your-reward .wlr-icon,
.alertify .wlr-myaccount-page .wlr-card-icon .wlr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  background: rgba(102,195,208,.2);
  font-size: 26px
}

.alertify .wlr-myaccount-page .wlr-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy)
}

.alertify .wlr-myaccount-page .wlr-description {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted) !important
}

.alertify .wlr-myaccount-page .wlr-button {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--red) !important;
  transition: background .2s
}

.alertify .wlr-myaccount-page .wlr-button:hover {
  background: #c4161c !important
}

.alertify .wlr-myaccount-page .wlr-action-text {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700
}

.alertify .wlr-myaccount-page .wlr-point-conversion-section {
  padding: 10px;
  border-color: var(--gray2) !important;
  border-radius: 12px
}

.alertify .wlr-myaccount-page .wlr-point-conversion-section .wlr-input-point-section {
  padding: 0
}

.alertify .wlr-myaccount-page .wlr-point-conversion-section .wlr-input-point-conversion,
.alertify .wlr-myaccount-page .wlr-point-conversion-section .wlr-point-label-content {
  border-color: var(--gray2) !important
}

.alertify .wlr-myaccount-page .wlr-point-conversion-section .wlr-input-point-section input {
  width: 64px;
  font-size: 15px;
  font-weight: 700;
  text-align: center
}

.alertify .wlr-myaccount-page .wlr-coupons-list {
  gap: 14px
}

.alertify .wlr-myaccount-page .wlr-coupons-content {
  align-items: stretch;
  justify-content: flex-start;
  padding: 16px 18px
}

.alertify .wlr-myaccount-page .wlr-coupon-card-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px
}

.alertify .wlr-myaccount-page .wlr-title-icon {
  flex: 1 1 220px;
  width: auto;
  align-items: center
}

.alertify .wlr-myaccount-page .wlr-code-button {
  flex: 0 1 250px;
  width: auto;
  gap: 10px
}

.alertify .wlr-myaccount-page .wlr-code {
  overflow: hidden;
  border: 1.5px dashed #66c3d0 !important;
  border-radius: 10px;
  background: #eef9fb !important
}

.alertify .wlr-myaccount-page .wlr-code .wlr-coupon-code {
  border-radius: 0;
  background: transparent !important
}

.alertify .wlr-myaccount-page .wlr-code .wlr-coupon-code span {
  color: var(--navy) !important;
  font-weight: 700;
  letter-spacing: .03em
}

.alertify .wlr-myaccount-page .wlr-code .wlr-coupon-copy-icon {
  border: 0 !important;
  border-radius: 0;
  background: #66c3d0 !important;
  color: #fff !important
}

.alertify .wlr-myaccount-page .wlr-coupons-list .wlr-theme-color-apply {
  font-size: 14px
}

.alertify .wlr-myaccount-page .wlr-norecords-container {
  padding: 26px 16px
}

.alertify .wlr-myaccount-page .wlr-norecords-container i {
  font-size: 46px;
  color: #3aa9ba !important
}

.alertify .wlr-myaccount-page .wlr-norecords-container h4 {
  margin: 6px 0 !important;
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 700
}

.alertify .wlr-myaccount-page .wlr-norecords-container p {
  margin: 0;
  font-size: 14px;
  color: var(--muted) !important
}

@media (max-width:600px) {
  .alertify .ajs-dialog:has(.wlr-myaccount-page) {
    padding: 24px 16px 4px !important
  }

  .alertify .wlr-myaccount-page #wlr-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px
  }

  .alertify .wlr-myaccount-page #wlr-available-points {
    flex: 1 1 100%
  }

  .alertify .wlr-myaccount-page #wlr-redeemed-points,
  .alertify .wlr-myaccount-page #wlr-used-rewards {
    flex: 1 1 calc(50% - 5px);
    padding: 14px 12px
  }

  .alertify .wlr-myaccount-page #wlr-available-point-value,
  .alertify .wlr-myaccount-page #wlr-redeemed-point-value,
  .alertify .wlr-myaccount-page #wlr-used-reward-value-count {
    font-size: 26px
  }

  .alertify .wlr-myaccount-page .wlr-points-container p {
    font-size: 12.5px
  }

  .alertify .wlr-myaccount-page .wlr-user-reward-titles {
    flex-direction: row;
    align-items: center
  }

  .alertify .wlr-myaccount-page .wlr-my-rewards-title {
    padding: 9px 16px
  }

  .alertify .wlr-myaccount-page .wlr-customer-reward {
    grid-template-columns: 1fr
  }

  .alertify .wlr-myaccount-page .wlr-heading {
    font-size: 22px
  }

}

/* The loyalty plugin's messages on the cart and checkout pages */
.wlr-message-info {
  margin: 0 0 14px !important;
  padding: 12px 18px !important;
  gap: 14px;
  border: 1px solid rgba(102,195,208,.6) !important;
  border-radius: 14px !important;
  background: #eef9fb !important;
  color: var(--navy) !important;
  font-family: var(--fb);
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4
}

.wlr-message-info i {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1;
  color: #3aa9ba !important
}

.wlr-message-info p {
  margin: 0 !important
}

.wlr-message-info a,
#wlr-reward-link {
  color: var(--red) !important;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer
}

.wlr-message-info .wlr-button,
#wlr_point_apply_discount_button {
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700
}

/* Cart page: the coupon form. The home page's coupon banner shares the class name, so it was
   drawn as that banner and squeezed; here it is a field and a button, like the cart drawer's. */
.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  float: none;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  text-align: left
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--gray2);
  border-radius: 10px;
  background: #fff;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy)
}

.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted)
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
  border-color: #66c3d0;
  box-shadow: 0 0 0 3px rgba(102,195,208,.25);
  outline: 0
}

.woocommerce-cart table.cart td.actions .coupon .button {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .2s
}

.woocommerce-cart table.cart td.actions .coupon .button:hover {
  background: #c4161c
}

/* 404 page (404.php, template-parts/global/404-scene.php): a navy band exactly one
   screen tall under the header (--nf-top, set by 404.php), the sea moving at its
   foot; the words and the Shop button beside a drumstick grilling. Under it, a row
   of aisle links, then the Bestsellers on their own light-teal band. The grilling
   and the sea always move (gently); the words' rise and the drumstick's drop-in
   only when the visitor's device allows motion. */
.nf-hero {
  --nf-avail: calc(100vh - var(--nf-top, 150px));
  --nf-wave: clamp(46px, 6.4vw, 104px);
  --nf-pt: clamp(14px, 3.5vh, 44px);
  --nf-pb: clamp(8px, 2vh, 22px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--nf-avail);
  padding: var(--nf-pt) 0 calc(var(--nf-wave) + var(--nf-pb));
  background: radial-gradient(90% 120% at 18% 10%, #3a4380 0%, var(--navy) 50%, #232953 100%);
  color: #fff
}

@supports (height: 100svh) {
  .nf-hero {
    --nf-avail: calc(100svh - var(--nf-top, 150px))
  }
}

.nf-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 64px);
  width: 100%;
  max-width: 1720px
}

.nf-code {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(64px, min(10vw, 18vh), 184px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff
}

.nf-code span {
  display: inline-block;
  color: var(--teal)
}

.nf-copy .bar {
  width: clamp(90px, 8vw, 150px);
  height: 2px;
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  border-radius: 20px;
  background: var(--red)
}

.nf-title {
  max-width: 30em;
  margin: clamp(18px, 2.8vh, 28px) 0 0;
  font-family: var(--fb);
  font-size: clamp(16px, min(1.35vw, 2.6vh), 23px);
  font-weight: 600;
  line-height: 1.55;
  color: #fff
}

.nf-title span {
  font-weight: 400;
  color: rgba(255, 255, 255, .8)
}

.nf-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vh, 32px)
}

.nf-btns .btn-pill {
  text-decoration: none
}

/* The scene: as big as its column, never taller than the band leaves room for */
.nf-art {
  justify-self: center;
  width: 100%;
  max-width: 760px
}

.nf-art svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--nf-avail) - var(--nf-pt) - var(--nf-pb) - var(--nf-wave) - 8px);
  overflow: visible
}

.nf-art * {
  transform-box: fill-box
}

.nf-art .nf-leg,
.nf-art .nf-fireglow,
.nf-art .nf-sparks path,
.nf-art .nf-specks circle,
.nf-art .nf-smoke path {
  transform-origin: 50% 50%
}

.nf-art .nf-fl,
.nf-art .nf-flare,
.nf-art .nf-leg-in {
  transform-origin: 50% 100%
}

.nf-art .nf-drips path {
  transform-origin: 50% 0
}

/* only while it cooks: the embers, the drips and the sizzling fat */
.nf-art .nf-embers circle,
.nf-art .nf-drips path,
.nf-art .nf-specks circle {
  opacity: 0
}

.nf-art .nf-shine {
  opacity: .75
}

/* The sea at the band's foot: two swells drifting past each other, in place */
.nf-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--nf-wave)
}

/* The aisles: one light row of links, not a section of its own */
.nf-aisles {
  padding: clamp(18px, 2.2vw, 32px) 0 clamp(28px, 3.4vw, 52px)
}

.nf-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1240px;
  margin: 0 auto
}

.nf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 7px;
  border: 1px solid rgba(46, 53, 99, .12);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.nf-chip:hover,
.nf-chip:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 6px 16px rgba(46, 53, 99, .1);
  transform: translateY(-2px);
  color: var(--navy)
}

.nf-chip-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--page)
}

.nf-chip-ic img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* the drawings come on white: let the circle's tint show through */
  mix-blend-mode: multiply
}

/* Bestsellers on their own light-teal band with rounded top corners: apart from
   the aisle row above, and not navy like the footer below */
.nf-sellers {
  border-radius: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0 0;
  background: linear-gradient(180deg, #e3f3f6 0%, #eef8fa 55%, #f6fbfc 100%);
  box-shadow: inset 0 1px 0 rgba(102, 195, 208, .35)
}

.nf-sellers .bsell {
  background: transparent;
  padding-bottom: clamp(24px, 3vw, 48px)
}

.nf-sellers .bsell .rp-wm {
  display: none
}

.nf-sellers .bsell .sec-head.dark h2,
.nf-sellers .bsell .sec-head.dark h2 .hl-navy,
.nf-sellers .bsell .sec-head.dark h2 .hl-teal {
  color: #0f172a
}

.nf-sellers .bsell .sec-head.dark p,
.nf-sellers .bsell .bsell-empty {
  color: var(--muted)
}

.nf-sellers .bsell .scroll-dots span {
  background: var(--navy)
}

.nf-sellers .bsell .scroll-dots span.on {
  background: var(--red)
}

@media (max-width:900px) {
  .nf-in {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(4px, 1.5vh, 14px);
    text-align: center
  }

  .nf-art {
    order: -1;
    max-width: 620px
  }

  /* the words below are measured (--nf-copy, set by 404.php) */
  .nf-art svg {
    max-height: max(180px, calc(var(--nf-avail) - var(--nf-pt) - var(--nf-pb) - var(--nf-wave) - var(--nf-copy, 230px) - 24px))
  }

  .nf-copy .bar,
  .nf-title {
    margin-left: auto;
    margin-right: auto
  }

  .nf-btns {
    justify-content: center
  }
}

@media (max-width:600px) {
  .nf-hero {
    --nf-pt: clamp(8px, 1.6vh, 18px);
    --nf-pb: 4px
  }

  .nf-art {
    max-width: none
  }

  .nf-code {
    font-size: clamp(56px, min(17vw, 9vh), 72px)
  }

  .nf-copy .bar {
    margin-top: 14px
  }

  .nf-title {
    margin-top: 14px
  }

  .nf-btns {
    margin-top: 18px
  }

  /* the Shop button at its own width, centred, not across the screen */
  .nf-btns .btn-pill {
    padding: 0 30px
  }

  /* one swipeable row on phones */
  .nf-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none
  }

  .nf-chips::-webkit-scrollbar {
    display: none
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nf-copy>* {
    animation: nfRise .7s cubic-bezier(.2, .8, .2, 1) both
  }

  .nf-copy>:nth-child(2) {
    animation-delay: .06s
  }

  .nf-copy>:nth-child(3) {
    animation-delay: .12s
  }

  .nf-copy>:nth-child(4) {
    animation-delay: .18s
  }

  .nf-art svg {
    animation: nfArtIn 1s cubic-bezier(.2, .8, .2, 1) .1s both
  }

  .nf-code span {
    animation: nfBob 3.2s ease-in-out infinite
  }

  .nf-art .nf-leg-in {
    animation: nfLegIn 1s .35s both
  }
}

/* The grilling and the sea: gentle loops that play on every device, even one set
   to reduce motion (the client wants them seen; they never flash or jump) */
.nf-art .nf-sparks path {
  animation: nfTwinkle 3s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

.nf-art .nf-fireglow {
  animation: nfGlow 1.6s ease-in-out infinite alternate
}

.nf-art .nf-coals {
  animation: nfCoals 1.3s ease-in-out infinite alternate
}

.nf-art .nf-fl {
  animation: nfFlame .9s ease-in-out infinite alternate
}

.nf-art .nf-flames>g:nth-child(1) .nf-fl {
  animation-duration: .8s
}

.nf-art .nf-flames>g:nth-child(2) .nf-fl {
  animation-duration: 1s;
  animation-delay: -.3s
}

.nf-art .nf-flames>g:nth-child(3) .nf-fl {
  animation-duration: .85s;
  animation-delay: -.55s
}

.nf-art .nf-flames .nf-fl:nth-child(2) {
  animation-direction: alternate-reverse
}

/* a drip falls from the meat, the flame under it flares */
.nf-art .nf-drips path {
  animation: nfDrip 3.2s ease-in infinite;
  animation-delay: var(--d, 0s)
}

.nf-art .nf-flames>g:nth-child(1) {
  animation: nfFlare 3.2s ease-out infinite
}

.nf-art .nf-flames>g:nth-child(3) {
  animation: nfFlare 3.2s ease-out 1.6s infinite
}

.nf-art .nf-embers circle {
  animation: nfEmber 2.8s ease-out infinite;
  animation-delay: var(--d, 0s)
}

.nf-art .nf-smoke path {
  animation: nfSmoke 3.4s ease-out infinite;
  animation-delay: var(--d, 0s)
}

.nf-art .nf-leg {
  animation: nfSizzle .5s ease-in-out 1.4s infinite alternate
}

.nf-art .nf-shine {
  animation: nfShine 2.2s ease-in-out infinite alternate
}

.nf-art .nf-specks circle {
  animation: nfSpeck 1.2s ease-out infinite;
  animation-delay: var(--d, 0s)
}

/* three swells drifting past each other, and the foam riding the front one */
.nf-wave-b {
  animation: nfSwellBack 15s linear infinite
}

.nf-wave-m {
  animation: nfSwellMid 10s linear infinite
}

.nf-wave-f {
  animation: nfSwellFront 7s linear infinite
}

@keyframes nfRise {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes nfArtIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes nfBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-.05em)
  }
}

@keyframes nfTwinkle {

  0%,
  100% {
    transform: scale(.55);
    opacity: .35
  }

  50% {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes nfGlow {
  from {
    opacity: .65;
    transform: scale(.94)
  }

  to {
    opacity: 1;
    transform: scale(1.06)
  }
}

@keyframes nfCoals {
  from {
    opacity: .75
  }

  to {
    opacity: 1
  }
}

@keyframes nfFlame {
  from {
    transform: scale(.94, .9) skewX(-3deg)
  }

  to {
    transform: scale(1.04, 1.1) skewX(3deg)
  }
}

/* a drop gathers under the meat, hangs, falls through the grate into the coals */
@keyframes nfDrip {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0
  }

  12% {
    transform: translateY(0) scale(1);
    opacity: 1
  }

  30% {
    transform: translateY(1px) scale(.9, 1.25);
    opacity: 1
  }

  44% {
    transform: translateY(38px) scale(.8, 1.1);
    opacity: 1
  }

  48%,
  100% {
    transform: translateY(42px) scale(.4);
    opacity: 0
  }
}

/* and the flame it lands in flares */
@keyframes nfFlare {

  0%,
  44% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.14, 1.42)
  }

  58% {
    transform: scale(1.04, 1.12)
  }

  68%,
  100% {
    transform: scale(1)
  }
}

@keyframes nfEmber {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  12% {
    opacity: 1
  }

  70% {
    opacity: .8
  }

  100% {
    transform: translate(var(--x, 0px), -118px) scale(.3);
    opacity: 0
  }
}

@keyframes nfSmoke {
  0% {
    transform: translate(0, 14px) scale(.8, .7);
    opacity: 0
  }

  25% {
    opacity: .85
  }

  100% {
    transform: translate(var(--sx, 0px), -44px) scale(1.5, 1.2);
    opacity: 0
  }
}

/* the drumstick is set down on the grate once, with a bounce */
@keyframes nfLegIn {
  0% {
    transform: translateY(-160px);
    opacity: 0;
    animation-timing-function: cubic-bezier(.55, 0, 1, .45)
  }

  15% {
    opacity: 1
  }

  60% {
    transform: translateY(5px);
    animation-timing-function: cubic-bezier(.2, .7, .4, 1)
  }

  76% {
    transform: translateY(-12px);
    animation-timing-function: cubic-bezier(.5, 0, .75, 0)
  }

  90% {
    transform: translateY(1px)
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

/* then it just sizzles there */
@keyframes nfSizzle {
  from {
    transform: translateY(0) scale(1)
  }

  to {
    transform: translateY(-.8px) scale(1.008, .994)
  }
}

@keyframes nfShine {
  from {
    opacity: .4
  }

  to {
    opacity: .95
  }
}

@keyframes nfSpeck {
  0% {
    transform: translateY(0) scale(.2);
    opacity: 0
  }

  30% {
    opacity: .95
  }

  100% {
    transform: translateY(-8px) scale(1.3);
    opacity: 0
  }
}

/* each swell is two humps long, so moving it one hump loops without a seam */
@keyframes nfSwellFront {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-720px)
  }
}

@keyframes nfSwellBack {
  from {
    transform: translateX(-720px)
  }

  to {
    transform: translateX(0)
  }
}

@keyframes nfSwellMid {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-360px, 5px)
  }

  100% {
    transform: translate(-720px, 0)
  }
}