/* Styles for Shopify-specific markup, layered on top of style.css (the design shared with the static site) */

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 700; }
.skip-link:focus { top: 8px; }
#MainContent:focus { outline: none; }

/* The staggered entrance must never leave the menu invisible: with "backwards" fill the items
   keep their hidden start frame if the animation does not run (reduced motion, restored page…). */
.main-nav li, .header-actions .icon-btn { animation-fill-mode: none; }

/* Navigation with drop-down and mega menus (same shape as the client's other shop) */
.main-nav > ul { align-items: center; }
.nav-has-menu { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--navy); cursor: pointer; }
.nav-trigger .ic { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.nav-trigger[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-trigger:hover, .nav-trigger.is-active { color: var(--teal-600); }
.nav-badge { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--teal); color: #fff; font-family: var(--font-head); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }
.nav-members { display: inline-flex; align-items: center; }

.nav-menu { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 60; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(11, 37, 69, .14); transform: translate(-50%, -6px); opacity: 0; transition: opacity .18s ease, transform .22s var(--ease-out); }
.nav-menu ul { display: grid; gap: 2px; }
.nav-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; line-height: 1.2; color: var(--ink); border-bottom: 0; }
.nav-menu a:hover { background: var(--teal-50, #e8f6fb); color: var(--navy); }
/* the navbar's sliding underline belongs to the top level only */
.nav-menu a::before, .nav-menu a::after, .mega a::before, .mega a::after { content: none; display: none; }
.nav-has-menu.is-open .nav-menu { opacity: 1; transform: translate(-50%, 0); }

/* the mega menu spans the whole header, so it is positioned against the header, not the menu item */
.site-header { position: relative; }
.nav-has-mega { position: static; }
.mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: 26px 0 30px; border-top: 1px solid var(--line); background: #fff; box-shadow: 0 24px 44px rgba(11, 37, 69, .12); opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s var(--ease-out); }
.nav-has-menu.is-open .mega { opacity: 1; transform: none; }
.mega__inner { display: grid; gap: 18px; justify-items: center; }
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 16px; width: 100%; }
.mega__card { display: grid; gap: 8px; justify-items: center; text-align: center; }
.mega__media { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #e9eae8; transition: transform .3s var(--ease-out), box-shadow .3s; }
.mega__media img { width: 100%; height: 100%; object-fit: contain; }
.mega__media .ic { width: 40px; height: 40px; color: var(--teal-600); }
.mega__card:hover .mega__media { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 37, 69, .14); }
.mega__label { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.mega__card:hover .mega__label { color: var(--teal-600); }
.mega__cta { min-height: 44px; padding-inline: 26px; }
/* the Type menu holds fewer cards, so they stay the same size instead of stretching */
.mega__grid--type { grid-template-columns: repeat(4, minmax(0, 190px)); justify-content: start; }
.mega--narrow .mega__inner { justify-items: start; }

@media (max-width: 1180px) {
  .mega { padding: 18px 0 22px; }
  .mega__grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
}
@media (max-width: 1024px) {
  /* inside the phone menu the sub-menus simply stack */
  .site-header .nav-menu, .site-header .mega { position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; opacity: 1; transform: none; background: transparent; }
  .site-header .mega__inner { display: block; }
  .site-header .mega__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
  .site-header .nav-menu[hidden], .site-header .mega[hidden] { display: none; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 10px 0; font-size: 16px; }
  .nav-menu a { padding: 8px 0; }
  .mega__cta { width: 100%; }
}

/* ---------- Home banner ----------
   The client's banner already has the benefit list printed on it, so the HTML list is hidden
   and the picture is anchored to its right edge where that list sits. */
.hero__benefits { display: none; }
/* the whole banner is shown (vial, pen and the printed list), never cropped */
.hero__art {
  width: 62%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  background-color: #e9f3fa;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%);
}
@media (max-width: 1024px) {
  .hero__art { width: 58%; background-position: center right; }
}
@media (max-width: 600px) {
  /* text and banner are one block: the picture starts right under the text and its top edge
     fades into the same background, so there is no seam between them */
  .hero { grid-template-areas: "eyebrow eyebrow" "title title" "lead lead" "art art" "actions actions" "badges badges"; padding-bottom: 6px; }
  .hero__art {
    grid-column: 1 / -1;
    width: auto;
    background-size: cover;
    background-color: transparent;
    aspect-ratio: 3 / 1;
    min-height: 0;
    margin: 0 calc(var(--gutter) * -1);
    border-radius: 0;
    background-size: cover;
    background-position: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
  .hero__inner { padding-bottom: 0; }
  .hero__lead { margin-top: 10px; margin-bottom: 0; }
  .hero__actions { margin-top: 10px; }
}

/* easier to tap on phones: the product name gets a proper hit area */
.pcard__name a { display: inline-block; padding: 4px 0; }
@media (max-width: 600px) {
  .pcard__name a { padding: 6px 0; }
  .hero__eyebrow { font-size: 11.5px; }
  /* two products per row on phones */
  .shop-grid, .product-grid, .product-grid--3, .product-grid--4, .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .ccard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard__name { margin-top: 8px; font-size: 14px; line-height: 1.3; }
  .pcard__meta { font-size: 12px; }
  .pcard__price { font-size: 15px; gap: 6px; }
  .pcard__price s { font-size: 12px; }
  .ccard__title { font-size: 15px; }
  .ccard__count { font-size: 12.5px; }
  /* the list view stays one per row, as a wide row */
  .shop-grid.is-list { grid-template-columns: 1fr !important; }
}

/* ---------- Shop / collection pages (laid out like the client's other shop) ---------- */
.crumbs { background: var(--teal); color: #fff; font-size: 14px; }
.crumbs .home-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; }
.crumbs a { color: #fff; opacity: .92; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { opacity: .85; }

.shop { padding-block: 26px 40px; }
.shop__title { margin-bottom: 8px; font-family: var(--font-head); font-size: clamp(30px, 4vw, 52px); font-weight: 800; text-align: center; color: var(--navy); }
.shop__title em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--teal-600); }
.shop__intro { max-width: 900px; margin: 0 auto 18px; text-align: center; color: var(--ink); font-size: 15px; }
.shop__intro p { margin: 0 auto 6px; }

.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 20px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.shop-bar__filter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--navy); cursor: pointer; border-radius: 999px; }
.shop-bar__filter:hover { background: var(--teal-50, #eaf6fb); }
.shop-bar__filter .ic { width: 18px; height: 18px; }
.shop-bar__right { display: flex; align-items: center; gap: 16px; }
.layout-toggle { display: flex; gap: 2px; }
.layout-toggle button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.layout-toggle button.is-active { background: var(--teal-50, #eaf6fb); color: var(--teal-600); }
.layout-toggle .ic { width: 18px; height: 18px; }
.shop-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.shop-sort label { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.shop-sort .select { min-height: 38px; width: auto; min-width: 180px; border: 0; background-color: transparent; font-size: 14.5px; font-weight: 600; color: var(--navy); }

.shop-filters { display: grid; gap: 18px; margin-bottom: 22px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.shop-filters[hidden] { display: none; }
.shop-filters__group { margin: 0; padding: 0; border: 0; }
.shop-filters__group h2, .shop-filters__group legend { margin-bottom: 10px; font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.shop-filters__links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink); background: #fff; }
.chip:hover { border-color: var(--teal); color: var(--teal-600); }
.chip.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
.shop-filters .form-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 18px; }
.shop-filters__actions { display: flex; gap: 10px; }

/* cards: badges, round quick view, Add to cart over the picture on hover */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.pcard { position: relative; text-align: center; padding: 0 0 6px; border: 0; background: none; box-shadow: none; }
.pcard__frame { position: relative; }
.pcard__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; height: auto; max-height: none; overflow: hidden; border-radius: 12px; background: #e9eae8; }
.pcard__link { display: block; width: 100%; height: 100%; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pcard__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.pcard__badge--best { background: var(--navy); }
.pcard__badge--sale { background: var(--teal); }
.pcard__badge--member { background: #6b7f92; }
.pcard__badge .ic { width: 12px; height: 12px; }
.pcard--member .member-tag { display: none; }
.pcard__quick { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .25s var(--ease-out), background-color .2s; }
.pcard__quick .ic { width: 18px; height: 18px; }
.pcard__quick:hover { background: var(--teal-600); }
.pcard__action { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .28s var(--ease-out); }
.pcard__action-btn { display: block; width: 100%; min-height: 46px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--teal); font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff; text-align: center; cursor: pointer; transition: background-color .2s; }
.pcard__action-btn:hover { background: var(--teal-600); }
.pcard__action-btn[disabled] { background: #9fb0bf; cursor: not-allowed; }
.pcard:hover .pcard__quick, .pcard:focus-within .pcard__quick,
.pcard:hover .pcard__action, .pcard:focus-within .pcard__action { opacity: 1; transform: none; }
.pcard__name { margin-top: 12px; font-size: 16px; }
.pcard__meta { color: var(--muted); }
.pcard__price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; }
.pcard__price s { color: var(--muted); font-weight: 500; font-size: 14px; }
.pcard__price-now.is-sale { color: #c0392b; }
.pcard__price--locked { justify-content: center; }
@media (hover: none) {
  /* no mouse: the buttons are always visible */
  .pcard__quick, .pcard__action { opacity: 1; transform: none; }
}

/* collection cards ("You'll love this too") */
.suggested { padding-block: 40px 56px; background: linear-gradient(180deg, #f6fbfe 0%, #fff 100%); }
.suggested__title { margin-bottom: 26px; font-family: var(--font-head); font-size: clamp(26px, 3vw, 42px); font-weight: 800; text-align: center; color: var(--navy); }
.suggested__title em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--teal-600); }
.ccard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.ccard { display: grid; gap: 6px; justify-items: center; text-align: center; }
.ccard__media { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #e9eae8; transition: transform .3s var(--ease-out), box-shadow .3s; }
.ccard__media img { width: 100%; height: 100%; object-fit: contain; }
.ccard__media .ic { width: 44px; height: 44px; color: var(--teal-600); }
.ccard:hover .ccard__media { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 37, 69, .13); }
.ccard__title { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--navy); }
.ccard:hover .ccard__title { color: var(--teal-600); }
.ccard__count { font-size: 14px; color: var(--muted); }

/* list layout */
.shop-grid.is-list { grid-template-columns: 1fr; }
.shop-grid.is-list .pcard { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 20px; text-align: left; padding: 14px; }
.shop-grid.is-list .pcard__badges { top: 16px; left: 16px; }
.shop-grid.is-list .pcard__media { margin: 0; }
.shop-grid.is-list .pcard__price { justify-content: flex-start; }
.shop-grid.is-list .pcard__form, .shop-grid.is-list .pcard > .btn { width: auto; min-width: 190px; }

.load-more { display: grid; justify-items: center; gap: 10px; margin-top: 30px; }
.load-more__btn { min-width: 200px; }
.load-more__count { font-size: 14px; color: var(--muted); }

/* quick view window */
.quick-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(6, 22, 43, .55); opacity: 0; transition: opacity .25s ease; }
.quick-modal.is-open { opacity: 1; }
.quick-modal[hidden] { display: none; }
.quick-modal__panel { position: relative; width: min(920px, 100%); max-height: 90vh; overflow: auto; padding: 26px; border-radius: 16px; background: #fff; transform: translateY(10px) scale(.98); transition: transform .3s var(--ease-out); }
.quick-modal.is-open .quick-modal__panel { transform: none; }
.quick-modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef4f8; color: var(--navy); cursor: pointer; }
.quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.quick__media { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #e9eae8; }
.quick__media img { width: 100%; height: 100%; object-fit: contain; }
.quick__title { font-size: clamp(20px, 2vw, 26px); font-weight: 800; color: var(--navy); }
.quick__meta { margin: 4px 0 10px; color: var(--muted); }
.quick__price { margin-bottom: 6px; font-size: 22px; color: var(--navy); }
.quick__price s { margin-right: 6px; font-size: 15px; color: var(--muted); }
.quick__stock { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--teal-700, #0a7fa0); }
.quick__stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.quick__desc { margin-bottom: 14px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.quick__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 700px) {
  .quick { grid-template-columns: 1fr; }
  .shop-bar { flex-wrap: wrap; border-radius: 16px; }
  .shop-bar__right { width: 100%; justify-content: space-between; }
  .shop-grid.is-list .pcard { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
}

/* Collection sidebar links (the static site used buttons) */
.cat-list a { display: block; padding: 6px 16px; border-left: 2px solid var(--line-strong); border-radius: 0 6px 6px 0; font-size: 15px; color: var(--ink); transition: background-color .15s, color .15s, padding .25s var(--ease-out), border-color .2s; }
.cat-list a:hover { padding-left: 22px; color: var(--teal-600); }
.cat-list a.is-active { border-left-color: var(--teal); background: var(--teal-50); color: var(--navy); font-weight: 500; }
.collection-filters { display: grid; gap: 14px; }
.filter-group { margin: 0; padding: 0; border: 0; }
.filter-count { color: var(--muted); font-size: 13px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs .input { min-height: 40px; }
.collection-filters .btn, .filters .collection-filters .btn { width: 100%; margin-top: 0; }
.sort-form { margin: 0; }
.results .select { width: 240px; min-height: 38px; font-size: 14px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 600; color: var(--navy); }
.pagination a:hover { border-color: var(--teal); }
.pagination .is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
.pagination .ic { width: 16px; height: 16px; color: var(--teal-600); }

/* Product cards */
.pcard__form { margin-top: auto; }
.pcard__form .btn { width: 100%; }
.pcard > .btn-outline { width: 100%; min-height: 36px; margin-top: auto; }
/* Square studio photos (same shots as the client's other shop) get a square box and fill it */
.pcard .pcard__media, .listing--shop .pcard__media, .pcard--compact .pcard__media { height: auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; }
.pcard__media img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.pcard__price--locked { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.pcard__price--locked .ic { width: 16px; height: 16px; }
.member-tag--inline { position: static; margin-left: 6px; vertical-align: middle; }

/* Rich text (product descriptions, pages, FAQ answers) */
.rte, .faq-answer, .about-story__text { line-height: 1.55; color: var(--ink); }
.rte h2, .rte h3 { margin: 18px 0 8px; font-size: 18px; }
.rte p, .about-story__text p { margin: 0 0 10px; max-width: 680px; }
.about-story__text p { margin-top: 12px; font-size: 19px; line-height: 1.33; }
.rte ul, .rte ol { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.rte a, .faq-answer a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.rte img { height: auto; border-radius: 8px; }
.faq-answer p { padding: 12px 20px 16px; font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .4s var(--ease-out); }
.faq-item.is-open .faq-answer p { opacity: 1; transform: none; transition-delay: .12s; }
.tabs__panel.rte > :first-child { margin-top: 0; }
/* Product details, laid out as cards (built from the description by theme.js) */
/* Product details: intro text plus accordion rows (built from the description by theme.js) */
.pcopy { display: grid; gap: 10px; margin-top: 4px; }
.pcopy__lead { padding: 4px 2px 8px; }
.pcopy__lead p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.pcopy__section { margin: 14px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--teal); font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: var(--navy); }
.pacc__item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.pacc__item[open] { border-color: #bfe3f3; box-shadow: 0 8px 22px rgba(11, 37, 69, .06); }
.pacc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--navy); }
.pacc__item summary::-webkit-details-marker { display: none; }
.pacc__item summary:hover { color: var(--teal-600); }
.pacc__item summary .ic { flex: none; width: 18px; height: 18px; color: var(--teal-600); transition: transform .3s var(--ease-out); }
.pacc__item[open] summary .ic { transform: rotate(180deg); }
.pacc__body { padding: 0 20px 18px; animation: np-rise-sm .35s var(--ease-out); }
.pacc__body p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pacc__body p:last-child { margin-bottom: 0; }
.pacc__body ul, .pcopy__lead ul { margin: 2px 0 8px; padding: 0; list-style: none; display: grid; gap: 7px; }
.pacc__body ul li, .pcopy__lead ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pacc__body ul li::before, .pcopy__lead ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #e3f4fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aa2c7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19.5 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pacc__body ol { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.pcopy__note { margin-top: 6px; padding: 12px 16px; border-radius: 10px; background: #eef7fc; font-size: 13.5px; color: var(--muted); }
/* the source text underlines its own headings; only real links stay underlined */
.pcopy u:not(:has(a)), .pcopy span[style*="underline"] { text-decoration: none !important; }
.pcopy a { text-decoration: underline; text-underline-offset: 3px; }

/* price, stock and the sticky buy bar */
.pdp__save { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 6px; background: var(--teal); font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; vertical-align: middle; }
.pdp__stock { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 14.5px; color: #0a7fa0; }
.pdp__stock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.pdp__stock .dot--out { background: #c0392b; }
.shopify-payment-button { margin-top: 10px; }
.shopify-payment-button__button--unbranded { min-height: 48px; border-radius: 8px; background: var(--navy); font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(11, 37, 69, .1); transform: translateY(100%); transition: transform .3s var(--ease-out); }
.buybar.is-in { transform: none; }
.buybar[hidden] { display: none; }
.buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buybar__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.buybar__product img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #e9eae8; }
.buybar__name { font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.buybar__price { font-size: 14px; color: var(--muted); }
.buybar__add { min-height: 44px; padding-inline: 26px; }
.pcopy__video { display: inline-flex; align-items: center; gap: 8px; margin: 2px 8px 2px 0; padding: 7px 14px; border-radius: 999px; background: var(--navy); color: #fff !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background-color .2s, transform .25s var(--ease-out); }
.pcopy__video:hover { background: var(--teal-600); transform: translateY(-1px); }
.pcopy__play { font-size: 10px; }
.pcopy details { margin: 8px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fcfeff; }
.pcopy summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.pcopy strong, .pcopy b { color: var(--navy); }
@media (max-width: 600px) {
  .pcopy { grid-template-columns: 1fr; gap: 10px; }
  .pcopy__block { padding: 14px 16px; }
}

/* product text copied from the other shop: keep its own headings and collapsible blocks readable */
.tabs__panel[data-keep-whole] h1, .tabs__panel[data-keep-whole] h2 { margin: 20px 0 8px; font-size: 21px; font-weight: 800; color: var(--navy); }
.tabs__panel[data-keep-whole] h3, .tabs__panel[data-keep-whole] h4 { margin: 16px 0 6px; font-size: 17px; font-weight: 700; color: var(--navy); }
.tabs__panel[data-keep-whole] details { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tabs__panel[data-keep-whole] summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.tabs__panel[data-keep-whole] hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.tabs__panel[data-keep-whole] img { max-width: 100%; height: auto; }
.tabs__panel[data-keep-whole] table { width: 100%; border-collapse: collapse; }
.tabs__panel[data-keep-whole] td, .tabs__panel[data-keep-whole] th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* Product page */
/* the photo fills the whole picture box (the photos are square studio shots) */
.gallery__main { aspect-ratio: 1 / 1; background: #e9eae8; }
.gallery__main img.product-photo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.variant-field { max-width: 320px; margin: 4px 0 12px; }
.pdp__info .members-gate { margin: 14px 0 6px; }
.pdp__add .ic { width: 22px; height: 22px; }

/* Members gate */
.members-gate { display: grid; justify-items: start; gap: 10px; padding: 24px; border-radius: 12px; background: var(--sky-50); }
.members-gate > .ic { width: 30px; height: 30px; color: var(--teal-600); }
.members-gate h2 { font-size: 22px; }
.members-gate p { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-forgot { margin-top: -4px; font-size: 14px; }
.auth-forgot a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.form-error ul { margin: 0; padding-left: 18px; list-style: disc; }

/* Members join card (new customer accounts: email code, no password) */
.auth-card__title { font-size: clamp(22px, 2vw, 28px); font-weight: 800; }
.auth-card__lead { margin: 8px 0 18px; color: var(--ink); }
.auth-steps { display: grid; gap: 12px; margin-bottom: 22px; }
.auth-steps li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.auth-steps__num { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); font-family: var(--font-head); font-weight: 800; }
.auth-actions { display: grid; gap: 10px; }
.auth-actions .btn { min-height: 50px; font-size: 15px; }
.auth-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.auth-note .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.member-bar .btn { min-height: 40px; }
.member-profile { margin-bottom: 18px; padding: 0; overflow: hidden; }
.member-profile .form-success { margin: 14px; }
.member-profile__details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none; color: var(--navy); }
.member-profile__details summary::-webkit-details-marker { display: none; }
.member-profile__details summary .ic { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.member-profile__details[open] summary .ic { transform: rotate(180deg); }
.member-profile__details .form-grid, .member-profile__details .form-error { margin: 0 18px 18px; }
.member-profile__details .btn { justify-self: start; }

/* Cart */
.cart-foot { display: flex; flex-wrap: wrap; gap: 12px; }
.js-cart .cart-update { display: none; }
.cart-note { margin: 0 0 16px; }
.summary__row span:last-child { text-align: right; }
.drawer-note { margin: 4px 0 14px; }
.toast.is-error .ic { color: #ff9b9f; }
.toast.is-error a { display: none; }
.bundle-card__form { grid-area: cta; justify-self: end; margin: 0; }
.bundle-card__art img { height: 100%; width: auto; max-width: 110px; object-fit: contain; }
.bundle-card__art--single { height: 92px; }
.bundle-card__art--single img { max-width: 170px; }
.drawer-item__prop, .cart-row__prop { margin-top: 3px; font-size: 13px; color: var(--ink); }
.drawer-item__prop b, .cart-row__prop b { font-weight: 600; color: var(--navy); }
.pdp__includes { margin-top: 8px; font-size: 15px; color: var(--ink); }
.pdp__includes b { color: var(--navy); }
@media (max-width: 600px) { .bundle-card__art--single { height: 70px; } .bundle-card__art--single img { max-width: 130px; } }

/* Product row (NovaNAD+ Range on the home page) */
.prow { padding-block: 34px 6px; }
.prow--tint { margin-top: 26px; padding: 26px clamp(16px, 2.4vw, 32px) 30px; border-radius: 14px; background: linear-gradient(180deg, #f3fafd 0%, #ffffff 100%); }
.prow .product-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
@media (max-width: 600px) { .prow--tint { margin-top: 18px; padding-inline: 12px; } }

/* FAQ page */
.faq-body--nav { padding-block: 26px 0; }
.faq-group { padding-block: 22px 0; }
.faq-group:last-of-type { padding-bottom: 20px; }
.faq-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.faq-group__head h2 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; text-transform: uppercase; }
.faq-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--navy); white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease-out); }
.faq-chip:hover { border-color: var(--teal); transform: translateY(-2px); }
.faq-group { scroll-margin-top: 90px; }
.support-band { padding-block: 30px 60px; background: linear-gradient(180deg, #f6fbfe 0%, #fff 100%); }
.support-band .support-card { max-width: 760px; margin: 0 auto; }

/* Testing page sections share one background */
.testing-body--top { padding-bottom: 0; }
.testing-body--mid { padding-block: 0; }
.testing-body--end { padding-top: 0; }

/* Pages, customers, search, 404, collections */
.page-content { padding-block: 32px 56px; }
.customer-page { padding-block: 40px 64px; background: linear-gradient(180deg, #f6fbfe 0%, #fff 100%); }
.customer-card { max-width: 560px; margin: 0 auto; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.customer-card--wide { max-width: 980px; }
.customer-card h1 { margin-bottom: 14px; font-size: 26px; }
.customer-card h2 { margin: 22px 0 10px; font-size: 18px; }
.customer-card p { color: var(--ink); }
.table-scroll { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.orders-table th, .orders-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.orders-table th { color: var(--navy); font-weight: 700; }
.link-underline { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.main-404 { display: grid; justify-items: center; gap: 12px; padding: 90px 20px; text-align: center; }
.main-404 h1 { font-size: clamp(30px, 4vw, 46px); }
.search-bar { flex-wrap: wrap; }
.search-bar h1 { font-size: 24px; }
.search-box--page { width: min(420px, 100%); }
.list-title { margin-bottom: 18px; font-size: 28px; }
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.collection-tile { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: box-shadow .25s, transform .25s var(--ease-out); }
.collection-tile:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.collection-tile__media { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 50% 40%, #fff, #e3f1f9); }
/* photos fill the box and scale down inside it, whatever their original size */
.collection-tile__media img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: none; object-fit: contain; transition: transform .4s var(--ease-out); }
.collection-tile:hover .collection-tile__media img { transform: scale(1.05); }
.collection-tile__media .ic { width: 40px; height: 40px; color: var(--teal-600); }
.collection-tile__title { font-weight: 700; color: var(--navy); }
.collection-tile__count { font-size: 13px; color: var(--muted); }
.article { max-width: 780px; }
.article h1 { font-size: clamp(28px, 3vw, 40px); }
.article__meta { margin: 8px 0 18px; color: var(--muted); }
.article__image { margin-bottom: 20px; border-radius: 10px; }
.footer-policies { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding-block: 0 18px; font-size: 12.5px; color: var(--muted); }
.footer-policies a:hover { color: var(--teal-600); }
.blog-layout--shopify { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.password-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: linear-gradient(160deg, #051326 0%, #0a2342 65%, #0b2b52 100%); }
.password-card { width: min(460px, 100%); padding: 28px; border-radius: 14px; background: #fff; }

@media (max-width: 860px) {
  .results .select { width: 100%; }
  .bundle-card__form { justify-self: stretch; }
  .faq-body--nav .faq-groups { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Phones: product cards ----------
   Two per row, the button under the picture (not covering the product), smaller badges.
   Kept at the end of the file so these win over the desktop card rules above. */
@media (max-width: 600px) {
  .pcard__action { position: static; margin-top: 8px; opacity: 1; transform: none; }
  .pcard__action-btn { min-height: 36px; padding: 8px 10px; font-size: 12.5px; }
  .pcard__quick { top: 6px; right: 6px; width: 30px; height: 30px; opacity: 1; transform: none; }
  .pcard__quick .ic { width: 15px; height: 15px; }
  .pcard__badges { top: 6px; left: 6px; gap: 4px; }
  .pcard__badge { padding: 2px 6px; font-size: 9px; border-radius: 5px; }
  .pcard__badge .ic { width: 10px; height: 10px; }
  .pcard__name { margin-top: 8px; font-size: 13.5px; line-height: 1.3; }
  .pcard__name a { padding: 4px 0; }
  .pcard__meta { font-size: 11.5px; }
  .pcard__price { margin-top: 2px; font-size: 14.5px; gap: 6px; }
  .pcard__price s { font-size: 11.5px; }
  .mega__label { font-size: 13px; }
}


/* ---------- Logo: the client's own artwork, sized by height so the lockup never distorts ---------- */
.site-header .logo, .foot .logo, .password-card .logo { display: inline-flex; flex: none; line-height: 0; }
.logo__img { display: block; width: auto; height: 46px; transition: transform .35s var(--ease-out); }
.logo--sm .logo__img { height: 40px; }
.password-card .logo__img { height: 52px; }
.logo:hover .logo__img { transform: translateY(-1px); }
@media (max-width: 860px) { .logo__img { height: 38px; } .logo--sm .logo__img { height: 34px; } }
@media (max-width: 600px) { .logo__img { height: 31px; } .logo--sm .logo__img { height: 30px; } }

/* ---------- Product gallery: extra photos stacked under the main one ----------
   The other shop gives the photos half the page with a square main image, which is
   what makes the stacked second photo read at a usable size. */
.page-body--product .pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; }
.page-body--product .gallery__main { aspect-ratio: 1 / 1; border-radius: 10px; }
.gallery__stack { display: flex; gap: 14px; margin-top: 14px; }
.gallery__extra { display: block; width: 34%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #eef1f1; }
.gallery__extra img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- "You'll also love these": Pens / Vials / Extras ---------- */
.related__tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 22px; }
.related__tabs button {
  padding: 8px 22px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--muted);
  border-left: 1px solid var(--line); border-radius: 999px; transition: background-color .2s, color .2s;
}
.related__tabs button:first-child { border-left: 0; }
.related__tabs button:hover { color: var(--navy); }
.related__tabs button.is-active { background: #eaf4f8; color: var(--navy); }

@media (max-width: 860px) {
  /* the two-column rule above is stronger than the base mobile rule, so it is undone here */
  .page-body--product .pdp__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gallery__extra { width: 42%; }
}

/* ---------- "Independently tested" and "How to use" blocks ----------
   The two bands the client's other shop carries under the buy box. */
.pfeat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 26px; }
/* the certificate, shown on a soft panel like a document on a desk */
.pfeat__doc { margin: 0; display: grid; place-items: center; padding: 26px; border-radius: 14px; background: #eef3f6; }
/* the certificate is a portrait page, so it is capped by height rather than width */
.pfeat__doc img { max-width: 100%; max-height: 620px; width: auto; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 10px 28px rgba(11, 37, 69, .16); }
.pfeat__thumb { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #eef3f6; }
/* YouTube serves a 4:3 thumbnail, so it is cropped back to the video's own shape */
.pfeat__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pfeat__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(11, 34, 57, .28); transition: background-color .25s; }
.pfeat__play .ic { width: 54px; height: 54px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.pfeat__thumb:hover .pfeat__play { background: rgba(11, 34, 57, .14); }
.pfeat__panel { padding: 30px 32px; border-radius: 14px; background: linear-gradient(150deg, #5bb9c9 0%, #3da3b8 100%); color: #fff; }
.pfeat__panel--plain { background: #fff; border: 1px solid var(--line); color: var(--ink); padding: 26px 28px; }
/* Watch Video sits on the teal panel, so it is the light button */
.pfeat__panel .pfeat__watch { background: #fff; color: var(--teal-600); }
.pfeat__panel .pfeat__watch:hover { background: #eaf7fa; color: var(--navy); }
.pfeat__panel--plain .pfeat__watch { background: var(--teal); color: #fff; }
.pfeat__kicker { font-family: var(--font-head); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; color: rgba(255, 255, 255, .92); }
.pfeat__panel--plain .pfeat__kicker { color: var(--teal-600); }
.pfeat__panel h2 { font-size: 27px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 12px; color: inherit; }
.pfeat__panel p { font-size: 15.5px; line-height: 1.6; margin: 0; color: inherit; }
.pfeat__watch { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; min-height: 42px; padding: 0 20px; }
.pfeat__watch .ic { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .pfeat { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  .pfeat__doc { padding: 18px; }
  .pfeat__panel { padding: 22px 20px; }
  .pfeat__panel h2 { font-size: 22px; }
}

/* ---------- Compounds / Protocol / Shipping / Extra Info ----------
   Matches the section block on the client's other shop, including the Share row. */
.psect { display: grid; gap: 10px; margin: 22px 0 6px; }
.psect__item { border-radius: 10px; }
.psect__item summary { font-size: 14px; letter-spacing: .2px; padding: 13px 18px; }
.psect__item .pacc__body { padding: 0 18px 16px; }
.psect__item .pacc__body p { font-size: 14.5px; }
.compound { margin-bottom: 12px; }
.compound__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--navy); }
.compound__pct { color: var(--teal-600); }
.compound__bar { margin-top: 7px; height: 6px; border-radius: 4px; background: #e3eef5; overflow: hidden; }
.compound__bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5bb9c9, #0aa2c7); }
.psect__pdf { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.psect__pdf .ic { width: 17px; height: 17px; flex: none; }
.psect__pdf:hover { color: var(--navy); }
.psect__share { display: flex; align-items: center; gap: 12px; padding: 4px 2px 0; font-size: 14px; color: var(--muted); }
.psect__share a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); transition: border-color .2s, color .2s, transform .25s var(--ease-out); }
.psect__share a:hover { border-color: var(--teal-600); color: var(--teal-600); transform: translateY(-2px); }
.psect__share .ic { width: 16px; height: 16px; }

/* ---------- Product page: "You'll also love these" runs full width ----------
   It used to sit in a 348px right rail. The description is far taller than two
   small cards, so every product page had a ~1400px empty column beside it.
   Laid out like the other shop: a centred heading over a row of four full
   product cards, no box around them. */
.pdp { grid-template-columns: minmax(0, 1fr); }
.related { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.related .related__title { margin-bottom: 18px; font-family: var(--font-head); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.15; text-align: center; color: var(--navy); }
.related .related__title em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--teal-600); }
.related__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 22px; }
@media (max-width: 1180px) { .related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } }

/* ---------- Top bar as a strip that slides on its own ----------
   Same idea and the same direction as the product row: three copies in one rail,
   moved by a third of its width, so the loop has no seam. On a phone this also
   means every item can be read, instead of the last ones being hidden. */
/* display:block is needed: the base .topbar__track is display:contents, which generates no
   box, so there would be nothing for overflow:hidden to clip and the rail would widen the page */
.topbar__track--moving { display: block; flex: 1 1 0%; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.topbar__track--moving .topbar__rail { display: flex; width: max-content; animation: topbar-slide 30s linear infinite; }
.topbar__track--moving .topbar__group { display: flex; align-items: center; gap: 38px; padding-right: 38px; }
.topbar__track--moving .topbar__group--dup { display: flex; }
.topbar__track--moving:hover .topbar__rail { animation-play-state: paused; }
@keyframes topbar-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.3333%, 0, 0); } }
/* every item shows while it is moving, at any width */
.topbar__track--moving .topbar__item,
.topbar--labs .topbar__track--moving .topbar__item { display: inline-flex !important; }
@media (max-width: 860px) {
  .topbar__track--moving .topbar__group { gap: 26px; padding-right: 26px; }
  .topbar__track--moving .topbar__rail { animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) {
  /* no automatic movement: the strip can be swiped instead */
  .topbar__track--moving .topbar__rail { animation: none; width: auto; }
  .topbar__track--moving { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .topbar__track--moving .topbar__group--dup { display: none; }
}

/* ---------- Home: the product row as a strip that slides on its own ----------
   Three copies of the cards sit in one track; moving it a third of its width lands
   exactly on the next copy, so the loop has no seam. It pauses under the pointer and
   while anything inside has focus, so the buttons stay usable. */
.prow__marquee { overflow: hidden; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.prow__track { display: flex; width: max-content; animation: prow-slide 48s linear infinite; }
.prow__set { display: flex; gap: 22px; padding-right: 22px; }
.prow__set > * { flex: 0 0 258px; width: 258px; }
.prow__marquee:hover .prow__track, .prow__marquee:focus-within .prow__track { animation-play-state: paused; }
@keyframes prow-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.3333%, 0, 0); } }
/* the other way: start a copy to the left and travel back, so the loop is just as seamless */
.prow__track--right { animation-name: prow-slide-right; }
@keyframes prow-slide-right { from { transform: translate3d(-33.3333%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (max-width: 860px) {
  .prow__set { gap: 14px; padding-right: 14px; }
  .prow__set > * { flex: 0 0 190px; width: 190px; }
  .prow__track { animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) {
  /* no automatic movement: the same strip, swiped by hand */
  .prow__track { animation: none; width: auto; }
  .prow__marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .prow__set:not(:first-child) { display: none; }
  .prow__set > * { scroll-snap-align: start; }
}

/* ---------- Product page: "Your Questions, Answered." ----------
   One column of accordions under the related products, like the other shop. */
.pfaq { margin-top: 46px; }
.pfaq__title { font-family: var(--font-head); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.12; text-align: center; color: var(--navy); }
.pfaq__title em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--teal-600); }
.pfaq__all { margin: 8px 0 22px; text-align: center; font-size: 14.5px; }
.pfaq__all a { color: var(--muted); }
.pfaq__all a:hover { color: var(--teal-600); }
.faq-cols.pfaq__list { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 860px; margin-inline: auto; }

/* ---------- Instructions: "How To Guides" ----------
   Same shape as the other shop: centred heading, one tab per guide, then the video
   thumbnail beside the guide title and a Watch Video button. */
.page-body--guides { padding-block: 8px 54px; }
.guides__title { margin-bottom: 20px; font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.12; text-align: center; color: var(--navy); }
.guides__title em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--teal-600); }
.guides__tabs { margin-bottom: 28px; }
.guide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.guide__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #e9eae8; }
.guide__media img { width: 100%; height: 100%; object-fit: cover; }
.guide__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--teal-600); box-shadow: 0 10px 24px rgba(11, 37, 69, .25); transition: transform .25s var(--ease-out), background-color .2s; }
.guide__play .ic { width: 24px; height: 24px; margin-left: 3px; }
.guide__media:hover .guide__play { transform: scale(1.08); background: #fff; }
.guide__copy { text-align: center; }
.guide__eyebrow { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.guide__name { margin: 10px 0 14px; font-family: var(--font-head); font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.1; color: var(--navy); }
.guide__text { max-width: 46ch; margin-inline: auto; color: var(--muted); }
.guide__watch { margin-top: 20px; gap: 8px; }
.guide__watch .ic { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .guides__tabs { margin-bottom: 20px; }
}

/* ---------- Breadcrumb band: never touching the content below ---------- */
.crumbs { margin-bottom: 0; }
.crumbs + .page-body, .crumbs + .shop, .page-body--product { padding-top: 26px; }
.page-body--product .breadcrumb { display: none; }
.pcopy__play { display: inline-grid; place-items: center; }

/* ---------- Footer, laid out like the client's other shop ---------- */
.site-footer--labs { background: linear-gradient(160deg, #5bb9c9 0%, #3da3b8 45%, #2b8ca5 100%); color: #fff; }
.foot { padding-block: 34px 26px; }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.foot .logo, .foot .logo__word, .foot .logo__sub { color: #fff; }
.foot .logo__plus { color: #ffffff; }
.foot__socials { display: flex; gap: 10px; }
.foot__socials a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; transition: background-color .2s, transform .25s var(--ease-out); }
.foot__socials a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.foot__socials .ic { width: 17px; height: 17px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding-block: 26px 8px; }
.foot__col h2 { margin-bottom: 12px; font-family: var(--font-head); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.foot__col ul { display: grid; gap: 7px; }
.foot__col a { font-size: 14.5px; color: rgba(255, 255, 255, .92); }
.foot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); }
.foot__tag { font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.foot__copy { font-size: 13px; color: rgba(255, 255, 255, .82); }
/* "Formulated in the European Union" with the EU flag, bottom of the footer */
.foot__eu { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #fff; }
.foot__eu .ic { flex: none; width: 36px; height: 24px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.foot__eu .ic svg { width: 100%; height: 100%; display: block; }
/* card logos (Visa, Mastercard, Amex, Apple Pay) next to the copyright */
.foot__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.foot__pay li { display: flex; }
.foot__pay svg { width: 38px; height: 24px; display: block; border-radius: 4px; background: #fff; }
@media (max-width: 860px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 480px) {
  .foot__top { justify-content: center; }
  .foot__base { justify-content: center; text-align: center; }
}

/* ---------- Top bar frozen (header setting topbar_marquee off): no ticker on any screen ----------
   style.css turns the bar into a scrolling ticker on phones regardless of the setting; a frozen bar
   instead shows its first two items, centred (just the first on narrow phones, where two don't fit). */
@media (max-width: 600px) {
  .topbar--static .topbar__inner { justify-content: center; gap: 14px; }
  .topbar--static .topbar__track, .topbar--static .topbar__rail, .topbar--static .topbar__group { display: contents; animation: none; }
  .topbar--static .topbar__group--dup { display: none !important; }
  .topbar--static.topbar--labs .topbar__group .topbar__item { font-size: 10.5px; }
  .topbar--static.topbar--labs .topbar__group .topbar__item:nth-child(n+3) { display: none; }
  .topbar--static.topbar--labs .currency { display: none; }
}
@media (max-width: 440px) {
  .topbar--static.topbar--labs .topbar__group .topbar__item:nth-child(n+2) { display: none; }
}