/*
 * TEMPORARY -- the ?qa=all review view, winter 2026.
 *
 * Says plainly that this is not the page a shopper gets, so a screenshot of
 * it is never mistaken for one. Remove with the `qa` field on Listing.
 */
.qa-note {
  max-width: var(--container, 1440px);
  margin: 16px auto 0;
  padding: 10px 16px;
  box-sizing: border-box;
  border: 1px dashed var(--gold-500, #d4a017);
  border-radius: var(--r-md, 8px);
  background: var(--gold-50, #fff7e0);
  color: var(--ink-700, #3a4a5c);
  font-size: 13px;
  line-height: 1.5;
}
.qa-note code {
  font-size: 12px;
  background: rgba(15, 44, 74, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ===== Inter ==========================================================
   The site's typeface, which every stylesheet names and nothing here used to
   load. On a machine with Inter installed the pages looked right; everywhere
   else they fell back to the system font, while Magento's cart and account
   pages -- which do load it -- showed Inter. So the same visitor saw two
   typefaces depending on which renderer drew the page.

   Declared exactly as Magento_Theme::header/fonts.phtml declares it: one face
   across the variable font's weight range. Keep the two in step.
   ===================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== What the theme assumes is already there ======================= */

/*
 * pnp.css is the last of several stylesheets on a Magento page: Luma's
 * styles-m.css and styles-l.css load first and carry the page skeleton, and
 * pnp.css only adjusts it. This app loads pnp.css alone, on purpose -- Luma's
 * base fights this header hard enough to blow the logo up to four times its
 * size and collapse the search field -- so the few skeleton rules pnp.css
 * genuinely depends on are restated here.
 *
 * The centring is the one that shows. styles-l.css gives `.page-main` auto
 * side margins and a 20px gutter; pnp.css only narrows the max-width. Without
 * the base, every page below the header sat against the left edge of the
 * window with the whole remainder as empty gutter on the right.
 */
.page-main {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/*
 * Except where the page already has a gutter of its own. `.container` carries
 * 24px, so a page built from containers was getting 44 and sat 20px to the
 * right of the header logo -- close enough to look like a mistake rather than
 * a margin, which is exactly what it was.
 */
.page-main:has(> .container) {
  padding-left: 0;
  padding-right: 0;
}

/*
 * A page that opens with its own title -- a Sanity page, or a Magento CMS
 * page -- has nothing between the nav bar and that title, so the heading sat
 * on the header's bottom edge with no air at all. The designed content pages
 * open with `.page-hero`, which pads 44px; this is the same measure, so the
 * two kinds of page begin at the same height.
 *
 * Keyed on the title being the first child, which is what makes it safe: a
 * listing, the home page and a product each open with a band of their own and
 * none of them matches this.
 */
main.page-main > .page-title:first-child { margin-top: 44px; }
/* And the foot, which was 16px from the footer for the same reason. */
main.page-main:has(> .page-title:first-child) { padding-bottom: 56px; }

@media (max-width: 880px) {
  main.page-main > .page-title:first-child { margin-top: 28px; }
  main.page-main:has(> .page-title:first-child) { padding-bottom: 40px; }
}

/*
 * Breadcrumbs are a <ul>, and Luma's base turns its markers off. Without that
 * every crumb arrived with a bullet in front of it, beside the "/" separator
 * the theme draws -- two separators, one of them wrong.
 */
.breadcrumbs .items,
.breadcrumbs ol,
.breadcrumbs ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/*
 * Styles for the parts of this storefront Magento has no markup for.
 *
 * Everything the theme already covers is left to the theme: the header
 * actions, the buy box and the product grid all emit Magento's own class names
 * so pnp.css styles them, and duplicating those rules here would mean two
 * places to change and one of them forgotten. What is left is the three things
 * that exist only in this app -- the search type-ahead, the slide-out basket,
 * and the validation messages on the buy box.
 *
 * The custom properties come from pnp.css, which loads first.
 */

/* ===== Buy box validation =========================================== */

/*
 * The message sits under the control it is about, and the control is marked
 * as well -- a red sentence alone leaves a shopper scrolling a page of eight
 * dropdowns looking for which one it means.
 */
.field.-invalid > .control select,
.field.-invalid > .control input,
.swatch-attribute.-invalid .swatch-attribute-options {
  border-color: var(--red-600, #c43d3d);
  box-shadow: 0 0 0 3px var(--red-50, #fbeaea);
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red-600, #c43d3d);
}

.field-error::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red-600, #c43d3d);
  color: var(--white, #fff);
  font-size: 11px;
  font-weight: 700;
}

.buybox__errors {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--red-600, #c43d3d);
  border-left-width: 4px;
  border-radius: var(--r-sm, 6px);
  background: var(--red-50, #fbeaea);
  color: var(--ink-900, #0c1721);
  font-size: 13.5px;
}

.buybox__errors p {
  margin: 0 0 6px;
  font-weight: 700;
}

.buybox__errors ul {
  margin: 0;
  padding-left: 18px;
}

.buybox__errors button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--navy-800, #163b62);
  text-decoration: underline;
  cursor: pointer;
}

.buybox__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-600, #4f6173);
}

.buybox__note.-error {
  color: var(--red-600, #c43d3d);
  font-weight: 600;
}

/* A single column once there is no room for two. */
@media (max-width: 720px) {
  .suggest__cols {
    grid-template-columns: 1fr;
  }

  .suggest__side {
    border-right: 0;
    border-bottom: 1px solid var(--border, #e1e6ec);
  }
}

/* ===== Pages and articles in the search results ===================== */

.pagehits {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e1e6ec);
}

.pagehits__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900, #0f2c4a);
}

.pagehits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.pagehits__item {
  max-width: 68ch;
}

.pagehits__link {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-800, #163b62);
  text-decoration: none;
}

.pagehits__link:hover {
  text-decoration: underline;
}

.pagehits__kind {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--ink-100, #eef2f6);
  color: var(--ink-600, #4f6173);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.pagehits__excerpt {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-600, #4f6173);
}

/* ===== Swatch values no remaining variant can reach ================== */

/*
 * Drawn, not removed. A palette that shrank as choices were made would move
 * under the cursor and hide the fact that a combination exists at all -- the
 * shopper needs to see that the colour is there and that this pack size does
 * not come in it.
 */
.mageworx-swatch-option.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/*
 * Greyed and drained of colour, with no slash across it. The usual diagonal
 * would be unreadable here: these swatches are two-tone photographs split
 * corner to corner, so a line drawn corner to corner reads as part of the
 * picture rather than as a mark against it.
 */

/* ===== Listings that update in place ================================ */

/*
 * While the new listing is in flight the old one stays on screen, faded and
 * inert, rather than being replaced by nothing. A shopper who has just ticked
 * a box should see the box ticked and the results catching up, not a blank
 * column and a jump to the top of the page.
 */
.listing {
  position: relative;
}

.listing--busy .column.main,
.listing--busy .sidebar:not(:has(.filter--open)) {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
}

/*
 * Except while the rail is the panel. Below 900px the filters come in over
 * the page, and fading the thing the shopper is looking at turns it
 * translucent -- the products they just filtered showing through the
 * checkboxes they used. The fade is for a rail beside the results, not for
 * one covering them.
 */

/* Only the results are inert; the rail keeps working so a second filter can
   be ticked before the first has landed. */
.listing--busy .column.main {
  pointer-events: none;
}

/* A thread of progress across the top of the results, for the case where the
   fade alone is too quiet to notice. */
.listing--busy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 5;
  background: linear-gradient(
    90deg,
    transparent,
    var(--orange-500, #e87722),
    transparent
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: listing-progress 900ms ease-in-out infinite;
}

@keyframes listing-progress {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listing--busy::before {
    animation: none;
    background: var(--orange-500, #e87722);
  }
}

/* ===== Recently viewed =============================================== */

/*
 * A quiet strip, not a second product grid: it is a way back to something the
 * shopper has already decided about, so it sits below the tabs and competes
 * with nothing above it.
 */
.seen {
  margin: 48px auto 8px;
  padding-block: 28px 4px;
  border-top: 1px solid var(--border, #e1e6ec);
}

.seen__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900, #0f2c4a);
}

.seen__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.seen__card {
  display: grid;
  gap: 7px;
  color: var(--ink-800, #1a2632);
  text-decoration: none;
}

.seen__card img,
.seen__blank {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ink-50, #f6f8fb);
  border: 1px solid var(--border, #e1e6ec);
  border-radius: var(--r-md, 10px);
}

.seen__card:hover img,
.seen__card:hover .seen__blank {
  border-color: var(--navy-700, #1c4a78);
}

.seen__name {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seen__price {
  font-size: 13.5px;
  font-weight: 700;
}

/* ===== Lead capture forms =========================================== */

/*
 * These were a framed Magento page until now, so the theme has no rules for
 * them at all. Laid out on a two-column grid that fields opt into, because the
 * catalogue request form asks for a postal address and a full-width line per
 * field turns that into a very long page.
 */
.leadform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  max-width: 720px;
  margin: 24px 0 0;
}

.leadform__field {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  align-content: start;
}

.leadform__field.-half {
  grid-column: span 1;
}

.leadform__label,
.leadform__group legend {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-800, #1a2632);
}

.leadform__label span,
.leadform__group legend span {
  color: var(--red-600, #c43d3d);
}

.leadform input[type='text'],
.leadform input[type='email'],
.leadform input[type='tel'],
.leadform textarea,
.leadform select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--border-strong, #c9d1da);
  border-radius: var(--r-md, 10px);
  background: var(--white, #fff);
  color: var(--ink-900, #0c1721);
  font: inherit;
  font-size: 15px;
}

.leadform textarea {
  resize: vertical;
  min-height: 120px;
}

.leadform input:focus,
.leadform textarea:focus,
.leadform select:focus {
  outline: none;
  border-color: var(--navy-700, #1c4a78);
  box-shadow: 0 0 0 4px var(--navy-50, #f3f7fb);
}

.leadform__field.-invalid input,
.leadform__field.-invalid textarea,
.leadform__field.-invalid select {
  border-color: var(--red-600, #c43d3d);
}

.leadform__group {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.leadform__group legend {
  padding: 0;
  margin-bottom: 2px;
}

.leadform__choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-800, #1a2632);
  cursor: pointer;
}

.leadform__choice input {
  margin: 2px 0 0;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--navy-800, #163b62);
}

.leadform__help {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-500, #6b7a8c);
}

/*
 * Off-screen rather than display:none: a bot that skips hidden inputs would
 * skip the trap too. Out of the tab order and out of the accessibility tree,
 * so nobody reaches it by keyboard or screen reader.
 */
.leadform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.leadform__summary {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--red-600, #c43d3d);
}

.leadform__actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.leadform__actions .btn {
  min-width: 200px;
}

.leadform--sent {
  max-width: 62ch;
  margin: 24px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--green-100, #c9e3d3);
  border-left: 4px solid var(--green-500, #2f7d4f);
  border-radius: var(--r-md, 10px);
  background: var(--green-50, #e8f3ec);
}

.leadform--sent p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-900, #0c1721);
}

@media (max-width: 560px) {
  .leadform {
    grid-template-columns: 1fr;
  }

  .leadform__field.-half {
    grid-column: 1 / -1;
  }
}

/* ===== Page sections ================================================= */

/*
 * A "Text with image" section with no image: the copy alone, centred at the
 * theme's reading width rather than hugging the left of a wide container.
 */
.rich-text--solo {
  margin-left: auto;
  margin-right: auto;
}

/*
 * The design marks the band's heading up as an h3, which would skip a level
 * straight after the page's h2 sections. It is an h2 here, drawn the way the
 * theme draws `.help-band h3`.
 */
.help-band .help-band__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--navy-900);
}