/* Tejori — collection page */

.coll {
  background: #f9f9f9;
}

/* ---------- shop by category ---------- */

.cats {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: 3.125vw;
  text-align: center;
}

/* The padding gives a hovered circle room to lift (translateY(-3px)) and cast its shadow
   inside the strip, which clips anything outside it because it scrolls sideways; the
   matching negative margin keeps the strip exactly where it was (client report: the
   selected ring was cut off along the top). */
.cats__t {
  display: flex;
  gap: 1.563vw;
  margin-block: calc(-1 * max(.833vw, 10px));
  padding-block: max(.833vw, 10px);
  padding-inline: 6px;
  scroll-padding-inline: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.cats__t::-webkit-scrollbar {
  display: none;
}

/* fixed width: a long label wraps instead of widening the tile */
.cats__i {
  position: relative;
  flex: none;
  width: 8.646vw;
  scroll-snap-align: start;
}

.cats__i a {
  display: block;
  text-decoration: none;
}

/* Square-cropped so any upload is a true circle — the design's own photos were
   all square, but an admin's category image (a tall Saree shot) stretched into
   an oval and pushed its label below the rest. The section's text-align still
   does the centring. */
.cats__p {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-width: 7.307vw;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  vertical-align: top;
  border: .417vw solid transparent;
  border-radius: 50%;
  background: #eee;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* No uploaded category image: the logo monogram, whole and centred on a white
   circle. A <span> with the logo as its background (see the view), sized to 56% of
   the circle so its corners stay well inside the curve. */
.cats__p.cats__p--logo {
  /* The photos' grey ring is their #eee background showing through the transparent
     border; this circle's white would fill it, so the ring is set explicitly (the
     selected tile's green ring still overrides it). */
  border-color: #eee;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 56% auto;
}

.cats__i a:hover .cats__p,
.cats__i a:focus-visible .cats__p {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgb(0 0 0 / 12%);
}

.cats__i a:focus-visible {
  outline: none;
}

/* the tile you are on: a ring and a tick in the corner */
.cats__i.is-on .cats__p {
  border-color: var(--c-green);
}

/* pink selection: under a collection banner (coll--o), and always on Alankar (coll--pk,
   client request — Alankar has no banner content, so it showed green) */
.coll--o .cats__i.is-on .cats__p,
.coll--pk .cats__i.is-on .cats__p {
  border-color: #e9599f;
}

/* grntick.webp's own shape as a mask over a solid fill, so the same tick can be green
   or pink (on Alankar, client request) — the image itself is only ever green */
.cats__tk {
  position: absolute;
  top: 0;
  right: -.26vw;
  width: 1.274vw;
  height: 1.321vw;
  background: var(--c-green);
  -webkit-mask: url('../img/grntick.webp') center / contain no-repeat;
  mask: url('../img/grntick.webp') center / contain no-repeat;
}

.coll--o .cats__tk,
.coll--pk .cats__tk {
  background: #e9599f;
}

/* Capitalised so a name typed in lower case ("blouse") matches its neighbours;
   a long name stops at two lines instead of making its tile taller. */
.cats__i p {
  display: -webkit-box;
  margin: .5em 0 0;
  overflow: hidden;
  font-size: 1.51vw;
  font-weight: 500;
  line-height: 1.641vw;
  color: #747474;
  text-transform: capitalize;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cats__i.is-on p {
  color: var(--c-green);
}

.coll--o .cats__i.is-on p,
.coll--pk .cats__i.is-on p {
  color: #e9599f;
}

.cats__a {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.083vw;
  height: 2.083vw;
  background: #fff;
  border: .052vw solid #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all .5s ease;
}

.cats__a--p { left: .781vw; }
.cats__a--n { right: .781vw; }

/* ---------- sort / filter bar ---------- */

.bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.bar__f {
  display: none;
}

/* the outlet layout drops the sort control — on small screens the filter
   drawer is a separate control, and that one stays */
@media (min-width: 768px) {
  .coll--o .bar {
    display: none;
  }
}

.srt {
  position: relative;
  width: 11.875vw;
  user-select: none;
}

.srt__t {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.083vw;
  width: 100%;
  padding: .365vw .521vw;
  font-size: 1.042vw;
  font-weight: 600;
  line-height: 1.7;
  text-transform: uppercase;
  background: #fff;
  border: .052vw solid #fff;
  cursor: pointer;
}

.srt__t svg {
  flex: none;
  width: 1.458vw;
  height: .729vw;
  transition: transform .2s ease;
}

.srt:hover .srt__t svg {
  transform: rotate(180deg);
}

.srt__o {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  min-width: 11.458vw;
  background: #fff;
  border: .052vw solid #e0e0e0;
  border-top: none;
  box-shadow: 0 .208vw .625vw rgba(0, 0, 0, .08);
}

.srt:hover .srt__o {
  display: block;
}

.srt__i {
  display: flex;
  align-items: center;
  gap: .781vw;
  width: 100%;
  padding: .573vw .833vw;
  font-size: .833vw;
  font-weight: 600;
  letter-spacing: .052vw;
  text-transform: uppercase;
  color: #111;
  background: #fff;
  border-bottom: .052vw solid #f0f0f0;
  cursor: pointer;
  transition: background .15s;
}

.srt__i:last-child {
  border-bottom: none;
}

.srt__i:hover,
.srt__i.is-on {
  color: #fff;
  background: #111;
}

.srt__i svg {
  flex: none;
  width: 1.146vw;
  height: 1.042vw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- two columns ---------- */

.cw {
  display: flex;
}

.fac {
  flex: none;
  width: 23.403vw;
  padding-right: 5.208vw;
  padding-bottom: 1.563vw;
}

/* No top padding, so "Filters" lines up with the top of the product grid beside it
   (client request — it sat 1rem lower). */
.fac__in {
  /* padding-top: 1rem; */
  padding-top: 0;
}

/* The filters scroll with the page until the last one is in view, then stay put while the
   products scroll past (client request). No scrolling of its own (client request — it
   briefly had one, with a scrollbar). `top` here is the fallback, just under the shrunk
   sticky header (.hdr-wrap.is-stuck .hdr in header.css: 6.667vw); a script in
   storefront/products/index.blade.php replaces it for a column taller than the screen, so
   it sticks by its bottom edge instead. Desktop only: below 768px the column is the
   slide-in panel further down. */
@media (min-width: 768px) {
  .fac__in {
    position: sticky;
    top: calc(6.667vw + 1px);
  }

  /* The first filter box lines up with the top of the product grid, and "Filters" rises into
     the Sort by row beside it (client request): lifted by exactly the heading's height plus
     its gap (.fac__hd h2 font-size × line-height 1, .fac__hd margin-bottom). Only with
     products — without them there's no Sort by row to rise into. */
  .cw--lift .fac {
    margin-top: calc(-2.083vw - 1.563vw);
  }

  /* Brand-story pages (Alankar, Outlet) hide the Sort by row on desktop (.coll--o .bar
     above), so there is nothing to rise into — lifted, "Filters" ran up into the round
     category tiles' names. Instead the product grid drops by the same amount, so its top
     still lines up with the first filter box. */
  .coll--o .cw--lift .fac {
    margin-top: 0;
  }

  .coll--o .cw--lift .gw {
    margin-top: calc(2.083vw + 1.563vw);
  }
}

.fac__x {
  display: none;
}

/* ---------- filter groups ---------- */

.fac__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.563vw;
}

.fac__hd h2 {
  margin: 0;
  font-family: var(--ff-alt);
  font-size: 2.083vw;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}

/* "CLEAR FILTER ✕" beside the heading, as in the design (client request) */
.fac__clr {
  display: inline-flex;
  flex: none;
  align-self: center;
  align-items: center;
  gap: .417vw;
  font-size: .938vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
}

.fac__clr svg {
  width: .833vw;
  height: .833vw;
  color: #e0242b;
}

.fac__clr:hover {
  color: #e0242b;
}

/* "Reset" sits just above its group's first row, without the row's usual gap
   (client request — there was a wide empty band under it) */
.fac__rs + ul > li:first-child .fac__l {
  margin-top: .521vw;
}

.fac__g,
.fac__mw {
  padding: 1.042vw;
  border: .104vw solid #000;
}

.fac__in > * + * {
  margin-top: 1.563vw;
}

/* the row is exactly as tall as the hanger icon */
/* the row never gets shorter than its text line, which is what holds the
   original up on the widths where the icon is smaller than 21px */
.fac__s {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.1rem;
  list-style: none;
  cursor: pointer;
}

.fac__s::-webkit-details-marker {
  display: none;
}

.fac__s span {
  display: flex;
  align-items: center;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}

.fac__s .ic {
  flex: none;
  width: 2.007vw;
  height: 1.508vw;
  margin-right: .521vw;
}

.fac__s .cr {
  flex: none;
  width: 1.458vw;
  height: .729vw;
}

.fac__g[open] > .fac__s .cr,
.fac__mw[open] > .fac__s .cr {
  transform: rotate(180deg);
}

.fac__mw[open] > .fac__s {
  margin-bottom: 1.302vw;
}

/* nested measurement filters: no frame, no caret, always open */
.fac__mw .fac__g {
  padding: 0;
  border: 0;
}

.fac__mw .fac__g > .fac__s {
  pointer-events: none;
}

.fac__mw .fac__g > .fac__s .ic,
.fac__mw .fac__g > .fac__s .cr {
  display: none;
}

/* the measurement wrapper's own row has no text line to hold it up */
.fac__mw > .fac__s {
  min-height: 0;
}

/* ---------- filter rows ---------- */

/* the Brand filter: roughly ten rows, then it scrolls (client request) */
.fac__scroll {
  max-height: clamp(280px, 27vw, 520px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

/* brand names read as written ("Alankar Outlet", Brand::label()), not in the filters' capitals */
.fac__brands .fac__l {
  text-transform: none;
}

.fac__l {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.302vw;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
}

.fac__l input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fac__b {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.302vw;
  height: 1.302vw;
  background: #fff;
  border-radius: .26vw;
  box-shadow: 0 0 .208vw rgba(0, 0, 0, .21);
}

.fac__b svg {
  visibility: hidden;
  width: .781vw;
  height: .781vw;
}

.fac__l input:checked ~ .fac__b svg {
  visibility: visible;
}

.clr {
  display: inline-block;
  width: 1.51vw;
  height: 1.51vw;
  margin-right: 1.302vw;
  vertical-align: middle;
  border-radius: 50%;
}

.clr-white { background: #f0f0f0; }
.clr-blue { background: #5fbaff; }
.clr-pink { background: #ff69b4; }
.clr-beige { background: beige; }
.clr-cream { background: #fffdd0; }
.clr-green { background: #22c55e; }
.clr-turquoise { background: #40e0d0; }
.clr-orange { background: orange; }
.clr-apricot { background: #fbceb1; }
.clr-gold { background: gold; }

/* ---------- price ---------- */

.fac__ph {
  margin: 1.042vw 0;
  font-size: 1.042vw;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
}

.fac__pr {
  display: flex;
  align-items: center;
  gap: .521vw;
}

.fac__cur {
  font-size: 1.042vw;
}

.fac__f {
  position: relative;
  flex: 1;
}

.fac__f input {
  width: 100%;
  height: 2.604vw;
  padding: 0 .781vw;
  font-family: inherit;
  font-size: 1.042vw;
  color: #000;
  background: transparent;
  border: .078vw solid #000;
  border-radius: .521vw;
}

.fac__f label {
  position: absolute;
  top: 50%;
  right: .781vw;
  font-size: .833vw;
  color: #666;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------- product grid ---------- */

.gw {
  flex: 1;
  min-width: 0;
  padding-bottom: 4.167vw;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.479vw;
}

/* ---------- pagination ---------- */

.pag {
  margin: 4.167vw 0 3.125vw;
}

.pag ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .938vw;
}

.pag li {
  flex: none;
  width: 2.083vw;
}

/* inline-flex, so each row still stands on the list's own text line — that is
   what holds the numbers apart on the widths where the digits are smaller */
.pag a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 1.25vw;
  font-weight: 700;
  text-decoration: none;
  color: var(--c-ink);
}

/* the caret is drawn pointing down and turned to point the way it reads */
.pag svg {
  width: 1.25vw;
  height: .625vw;
  transform: rotate(-90deg);
}

.pag__prev svg {
  transform: rotate(90deg);
}

/* the current page, filled green (client request); it was only bold like the rest */
.pag a[aria-current="page"] {
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: var(--c-green);
}

/* previous on page 1, next on the last page */
.pag__off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--c-ink);
  opacity: .3;
}

/* ---------- marketing ---------- */

.mkt {
  background: #f9f9f9;
}

.mkt__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: 5.208vw;
}

.mkt__logo {
  line-height: 1;
}

.mkt__logo img {
  display: inline;
  width: 8.385vw;
}

.mkt__sub {
  margin: 0;
  font-family: var(--ff-script);
  font-size: 4.447vw;
  font-style: italic;
  line-height: 3.565vw;
  text-transform: capitalize;
  color: var(--c-green);
}

.mkt__list {
  display: flex;
  flex-direction: column;
  gap: 2.604vw;
  margin-top: 2.604vw;
}

.mkt__li {
  display: flex;
  align-items: center;
  gap: 1.042vw;
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.mkt__li img {
  flex: none;
}

.mkt__li .i1 { width: 1.875vw; margin-right: .156vw; }
.mkt__li .i2 { width: 1.941vw; margin-right: .156vw; }
.mkt__li .i3 { width: 1.723vw; margin-right: .26vw; }
.mkt__li .i4 { width: 1.375vw; margin-right: .625vw; }

.mkt__btn {
  position: relative;
  display: block;
  max-width: 10.417vw;
  margin-top: 2.292vw;
  padding: .547vw .521vw;
  font-size: 1.042vw;
  font-weight: 700;
  letter-spacing: .052vw;
  text-decoration: none;
  color: #fff;
  background: #000;
  overflow: hidden;
}

.mkt__btn .btn__in {
  justify-content: center;
}

.mkt__btn .btn__in svg {
  width: 1.979vw;
  height: 1.458vw;
}

.mkt__btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--c-green);
  transition: width .4s ease;
}

.mkt__btn:hover::before {
  width: 100%;
}

/* ---------- mobile ---------- */

/* ---------- nothing in this collection ---------- */

/* flow-root so the message's own margins stay inside the column;
   and none of the grid's bottom padding, which has no grid to sit under */
.gw--e {
  display: flow-root;
  padding-bottom: 0;
}

.empty {
  margin: 10rem 0 15rem;
  text-align: center;
}

.empty h2 {
  margin: 4rem 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .06rem;
  color: var(--c-ink);
}

.empty a {
  color: rgba(18, 18, 18, .85);
  text-decoration: underline;
  text-underline-offset: .3rem;
}

/* ---------- brand hero (alankar / outlet) ---------- */

.al {
  overflow: hidden;
  background: #fff;
}

.al__w {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.al__c {
  flex: 1;
  padding-left: 5.108vw;
}

.al__d {
  max-width: 28.646vw;
  margin: 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.563vw;
  letter-spacing: 0;
  color: #333;
}

/* the original keeps this button in the layout but never shows it */
.al__btn {
  position: relative;
  visibility: hidden;
  display: block;
  max-width: 10.417vw;
  margin-bottom: 1.167vw;
  padding: .365vw .521vw;
  font-size: 1.042vw;
  font-weight: 700;
  letter-spacing: .052vw;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--c-green);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

.al__btn .btn__in {
  gap: 1.979vw;
}

.al__btn svg {
  width: 1.979vw;
  height: 1.458vw;
}

.al__img {
  width: 62.083vw;
  box-shadow: 0 .781vw 2.083vw rgba(0, 0, 0, .12);
}

.al__img img {
  width: 100%;
  height: auto;
}

.al__tags {
  position: absolute;
  top: 4.067vw;
  left: 4.067vw;
  display: flex;
  flex-direction: column;
  row-gap: .521vw;
}

.al__tag {
  display: block;
  max-width: max-content;
  padding: .469vw 1.094vw;
  font-size: 2.763vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: #000;
  background: #fff;
}

.al__tag--b {
  font-weight: 700;
}

.pk {
  color: #e9599f;
}

@media (min-width: 750px) {
  .empty h2 {
    font-size: 2.4rem;
  }
}

@media (min-width: 990px) {
  .empty h2 {
    margin: 2rem 0;
  }
}

/* the brand hero was written against 768; both pages that use it are outlet
   pages, so the outlet-only overrides are folded straight in here */
@media (max-width: 768px) {
  .al__w {
    flex-wrap: wrap;
  }

  .al__c {
    order: 1;
    padding-top: 5vw;
    padding-inline: 4.545vw;
  }

  .al__d {
    max-width: 100%;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .al__btn {
    display: none;
  }

  .al__img {
    position: relative;
    width: 100%;
  }

  .al__img img {
    width: 100vw;
    height: 75.682vw;
    object-fit: cover;
    object-position: center top;
  }

  .al__tags {
    top: auto;
    bottom: 9.091vw;
    left: 4.545vw;
    row-gap: 1.136vw;
  }

  .al__tag {
    padding: .909vw 2.273vw;
    font-size: 5.029vw;
    letter-spacing: .754vw;
  }
}

@media (max-width: 767px) {
  .cats {
    max-width: 100%;
    padding-inline: 4.545vw;
    padding-block: 1.136vw;
  }

  .cats__t {
    gap: 1.136vw;
    margin-block: 0;
    padding-block: 3.409vw;
    overflow-x: scroll;
  }

  .cats__i {
    width: 19.091vw;
  }

  .cats__p {
    max-width: 16.818vw;
    border-width: 1.136vw;
  }


  .cats__tk {
    top: -.455vw;
    right: .682vw;
    width: 2.711vw;
    height: 2.811vw;
  }

  .cats__i p {
    font-size: 3.212vw;
    line-height: 3.534vw;
  }

  .cats__a {
    display: none;
  }

  /* filter + sort buttons side by side */
  .bar {
    gap: 5.909vw;
    margin-bottom: 4.972vw;
  }

  .bar__f,
  .srt {
    flex: 1;
    width: auto;
  }

  .bar__f {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9.091vw;
    font-family: var(--ff-alt);
    font-size: 3.636vw;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-mute);
    background: #eee;
  }

  .srt__t {
    gap: 7.5vw;
    height: 9.091vw;
    padding: .455vw 2.727vw;
    font-family: var(--ff-alt);
    font-size: 3.728vw;
    background: #eee;
    border: .227vw solid #eee;
  }

  .srt__t svg {
    width: 7.456vw;
    height: 7.456vw;
    padding: 1.364vw;
    background: #fff;
    border-radius: .746vw;
  }

  .srt__o {
    min-width: 100%;
  }

  .srt__i {
    gap: 2.273vw;
    padding: 1.591vw 2.955vw;
    font-size: 2.982vw;
    letter-spacing: 0;
  }

  .srt__i svg {
    width: 4.091vw;
    height: 4.091vw;
  }

  /* the filter column becomes a slide-in panel */
  .fac {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: auto;
    padding: 4.545vw 5.682vw;
    background: #fff;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .3s ease, visibility .3s;
  }

  .fac.is-on {
    visibility: visible;
    transform: none;
  }

  .fac__in {
    padding-top: 0;
  }

  .fac__hd {
    align-items: center;
    margin-bottom: 5.682vw;
  }

  .fac__hd h2 {
    font-size: 6.364vw;
  }

  .fac__x {
    display: block;
    width: 17px;
    height: 17px;
  }

  .fac__g,
  .fac__mw {
    padding: 3.018vw 3.409vw;
  }

  .fac__in > * + * {
    margin-top: 2.273vw;
  }

  .fac__s span {
    font-size: 3.822vw;
  }

  .fac__s .ic {
    width: 7.365vw;
    height: 5.532vw;
    margin-right: 2.273vw;
  }

  .fac__s .cr {
    width: 6.284vw;
    height: 3.142vw;
  }

  .fac__mw[open] > .fac__s {
    margin-bottom: 5.682vw;
  }

  .fac__mw .fac__g {
    padding: 0;
  }

  .fac__l {
    margin-top: 4.545vw;
    font-size: 3.822vw;
  }

  .fac__b {
    width: 4.777vw;
    height: 4.777vw;
  }

  .fac__b svg {
    width: 2.866vw;
    height: 2.866vw;
  }

  .clr {
    width: 4.318vw;
    height: 4.318vw;
    margin-right: 2.273vw;
    vertical-align: bottom;
  }

  .fac__ph {
    margin: 1.818vw 0 2.273vw;
    font-size: 3.636vw;
  }

  .fac__pr {
    gap: 2.727vw;
  }

  .fac__cur {
    font-size: 4.545vw;
  }

  .fac__f input {
    height: 11.364vw;
    padding: 0 3.409vw;
    font-size: 3.636vw;
    border-radius: 2.273vw;
  }

  .fac__f label {
    right: 3.409vw;
    font-size: 3.182vw;
  }

  .gw {
    padding-bottom: 6.818vw;
  }

  /* these two repeat the rules above, which the mobile .gw/.bar would outrank */
  .gw--e {
    padding-bottom: 0;
  }

  .bar--e {
    display: none;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4.545vw;
  }

  .pag {
    margin: 11.364vw 0 10vw;
  }

  .pag ul {
    gap: 3.409vw;
  }

  .pag li {
    width: 6.818vw;
  }

  .pag a {
    font-size: 4.091vw;
  }

  .pag svg {
    width: 4.091vw;
    max-width: 22px;
    height: 2.045vw;
  }

  .mkt__in {
    max-width: 100%;
    padding-inline: 4.545vw;
    padding-block: 9.091vw;
  }

  .mkt__logo img {
    width: 40.619vw;
  }

  .mkt__sub {
    font-size: 14.553vw;
    line-height: 10.909vw;
  }

  .mkt__list {
    gap: 8.636vw;
    margin-top: 11.364vw;
  }

  .mkt__li {
    align-items: flex-start;
    gap: 3.409vw;
    font-size: 4.091vw;
    line-height: 5.114vw;
  }

  .mkt__li img {
    margin-top: 1.136vw;
  }

  .mkt__li .i1 { width: 6.111vw; margin-right: .682vw; }
  .mkt__li .i2 { width: 6.353vw; margin-right: .682vw; }
  .mkt__li .i3 { width: 5.64vw; margin-right: 1.136vw; }
  .mkt__li .i4 { width: 4.5vw; margin-right: 2.727vw; }

  .mkt__btn {
    max-width: 100%;
    margin-top: 9.091vw;
    padding: 1.591vw 3.409vw;
    font-size: 4.545vw;
    letter-spacing: .227vw;
  }

  .mkt__btn .btn__in {
    gap: 5vw;
  }

  .al__btn svg,
  .mkt__btn .btn__in svg {
    width: 8.759vw;
    height: 6.58vw;
  }
}

/* ---------- phone filter / sort bar tidy-up ----------
   Client report: on a phone the three controls (Filter, Clear all filters, Sort by) wrapped
   their labels onto two lines and sat at odd heights. Same height and type for all three,
   tighter gaps, no wrapping, "Clear all" (the "filters" is dropped) on a light red ground,
   and the Sort by label and caret held apart. */
@media (max-width: 767px) {
  .bar {
    gap: 2.273vw;
  }

  .bar__f,
  .srt__t {
    height: 10.455vw;
    font-size: 3.409vw;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .bar__f {
    padding-inline: 2.273vw;
  }

  .bar__f--clear {
    text-decoration: none;
    background: #fdecea;
  }

  .srt__t {
    justify-content: space-between;
    gap: 1.818vw;
    padding: 0 1.364vw 0 2.727vw;
  }

  .srt__t svg {
    flex: none;
    width: 6.818vw;
    height: 6.818vw;
  }
}

/* ---------- phone: Clear under Filter / Sort, chosen sort in the Sort box ----------
   Client requests. Filter and Sort share the bar's first row; "✕ Clear filters"
   (bar__f--clear, with its phone-only cross .bar__x and "all" dropped via .bar__all) wraps
   to a full-width row of its own beneath them. It briefly sat after the products instead.
   The Sort box shows the chosen sort (srt__now) in place of "Sort by", ending in "…" when
   too long. Desktop keeps "Clear all filters" in the bar. */

.srt__now,
.bar__x {
  display: none;
}

/* Desktop: the closed Sort box shows the chosen sort too (client request), cut short with
   "…" if it doesn't fit; opening the dropdown (hover) brings back "Sort by". The box
   grows past its fixed width so labels like "Price, high to low" fit whole, and the
   dropdown grows with it. */
@media (min-width: 768px) {
  .srt:has(.srt__now) {
    width: auto;
    min-width: 11.875vw;
    max-width: 20vw;
  }

  .srt:has(.srt__now) .srt__o {
    min-width: 100%;
  }

  .srt__t:has(.srt__now) {
    gap: 1.042vw;
  }

  .srt__now {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
  }

  .srt__t:has(.srt__now) .srt__lbl,
  .srt:hover .srt__now {
    display: none;
  }

  .srt:hover .srt__t .srt__lbl {
    display: inline;
  }
}

@media (max-width: 767px) {
  .bar {
    flex-wrap: wrap;
  }

  .bar__f--clear {
    order: 3;
    flex: 0 0 100%;
    gap: 2.273vw;
  }

  .bar__all {
    display: none;
  }

  /* the cross before "Clear filters" */
  .bar__x {
    display: block;
    flex: none;
    width: 3.636vw;
    height: 3.636vw;
    /* the capitals sit high in their line box, so the cross is lifted to their centre
       (client report: the two looked out of line) */
    transform: translateY(-.4vw);
  }

  .srt__t {
    min-width: 0;
  }

  .srt__now {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .srt__now ~ svg {
    flex: none;
  }

  .srt__t:has(.srt__now) .srt__lbl {
    display: none;
  }

  .srt {
    min-width: 0;
  }
}

/* ---------- filter checkboxes, easier to see ----------
   Client request: the boxes were white with only a faint shadow, close to invisible on the
   panel's white. A dark outline when empty; ticked, a filled green box with a white tick.
   Every filter group, phone and desktop. */
.fac__b {
  border: 1.5px solid #555;
  box-shadow: none;
}

.fac__l input:checked ~ .fac__b {
  color: #fff;
  background: var(--c-green);
  border-color: var(--c-green);
}

.fac__l input:focus-visible ~ .fac__b {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* ---------- phone filter panel: Apply button ----------
   Client request: ticks in the slide-in panel wait for Apply (left of the cross), which
   shows the results and closes the panel; the cross closes without applying (the filter
   script in storefront/products/index.blade.php). Phones only — on desktop the filters
   apply as they're ticked and there's no panel to close. */
.fac__apply {
  display: none;
}

@media (max-width: 767px) {
  .fac__hd {
    gap: 3.409vw;
  }

  .fac__hd h2 {
    flex: 1;
  }

  .fac__apply {
    display: block;
    flex: none;
    padding: 2.045vw 4.545vw;
    font-family: var(--ff-alt);
    font-size: 3.409vw;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-green);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
}

/* phones: the header's "Clear filter ✕" and the gap under "Reset" at phone sizes */
@media (max-width: 767px) {
  .fac__clr {
    gap: 1.364vw;
    font-size: 3.182vw;
  }

  .fac__clr svg {
    width: 2.727vw;
    height: 2.727vw;
  }

  .fac__rs + ul > li:first-child .fac__l {
    margin-top: 2.273vw;
  }
}