/* Tejori — product page */

.prd main > .wrap {
  overflow: hidden;
}

/* ---------- breadcrumb ---------- */

.crumb {
  display: flex;
  align-items: center;
  gap: 1.042vw;
  padding: 1.563vw 0 2.344vw;
}

.crumb a,
.crumb span {
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1;
  color: #000;
}

.crumb a {
  text-decoration: underline;
}

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

.pv {
  display: flex;
  gap: 3.385vw;
  /* a flat pixel bleed, exactly as the original wrote it */
  margin: -5px -5px 0;
}

.pv__m {
  position: relative;
  flex: none;
  width: 48.75vw;
}

.pv__i {
  flex: none;
  width: 37.917vw;
}

/* Alankar products: the brand's pink "a" sits in the column's top-right corner,
   behind the title/price/buttons (client design, "Alankar Product page") */
.pv__i--alk {
  position: relative;
  isolation: isolate;
}

.pv__mark {
  position: absolute;
  top: -0.5vw;
  right: 0;
  z-index: -1;
  width: 7.5vw;
  height: auto;
  pointer-events: none;
}

/* ---------- gallery ---------- */

.gal {
  /* flat pixels here too — the photo's own box never scaled with the viewport */
  margin: -5px 0 20px -5px;
}

.gal__s {
  display: none;
  width: 37.256vw;
}

.gal__s.is-on {
  display: block;
}

.gal__f {
  display: block;
  overflow: hidden;
  background: #fff;
  border: .1rem solid rgba(18, 18, 18, .05);
}

.gal__f img {
  width: 100%;
  height: 55.729vw;
  object-fit: cover;
}

/* products with no photos at all fall back to the shared "not found"
   illustration — it isn't a real product photo, so cover-cropping it to
   fill a tall portrait box just shows an odd, floor-dominant close-up;
   contain scales the whole illustration to fit, centred on a neutral
   background, same spirit as the product-card fallback (.pc__media). */
.gal__f--ph {
  background: #f3f3f3;
}

.gal__f--ph img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 10%;
}

/* ---------- thumbnails ---------- */

/* The column is capped at the main photo's height (.gal__f img) and scrolls.
   Uncapped, only four thumbs fit beside the photo — from the fifth photo on,
   the rest spilled below it into the content underneath, so a product's later
   photos couldn't be seen or picked. The arrows appear only when the column
   actually overflows (.thm--scroll, set by gallery() in site.js). */
.thm {
  position: absolute;
  top: 5px;
  left: 37.294vw;
  display: flex;
  flex-direction: column;
  gap: .521vw;
  width: 11.711vw;
  height: 55.729vw;
}

.thm ul {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.042vw;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.thm ul::-webkit-scrollbar {
  display: none;
}

.thm li {
  flex: none;
  height: 11.711vw;
}

.thm__b {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: .1rem solid rgba(18, 18, 18, .05);
}

.thm__b.is-on {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 .1rem var(--c-ink);
}

.thm__b:hover {
  opacity: .7;
}

.thm__b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thm__a {
  display: none;
}

@media (min-width: 768px) {
  .thm--scroll .thm__a {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 1.823vw;
    color: var(--c-ink);
    background: #fff;
    border: .1rem solid rgba(18, 18, 18, .1);
  }

  .thm--scroll .thm__a:hover {
    background: #f3f3f3;
  }

  /* the same left/right chevrons as the phone strip, turned to point up/down */
  .thm--scroll .thm__a svg {
    width: .521vw;
    height: .938vw;
    transform: rotate(90deg);
  }
}

/* ---------- pills over the photo ---------- */

.shr,
.fav {
  position: absolute;
  top: 1.25vw;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-alt);
  font-size: .729vw;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  background: #fff;
  border-radius: 3.802vw;
}

.shr {
  left: 1.25vw;
  gap: .365vw;
  width: 5.729vw;
  height: 2.292vw;
  font-weight: 700;
  color: #000;
  border: .052vw solid #fff;
}

.shr svg {
  width: 1.449vw;
  height: 1.504vw;
}

.fav {
  right: 13.125vw;
  gap: .347vw;
  width: 15.625vw;
  padding: .417vw .781vw;
  color: var(--c-ink);
  border: .1rem solid rgba(18, 18, 18, .08);
}

.fav svg {
  flex: none;
  width: 1.389vw;
  height: 1.389vw;
}

.fav span {
  font-weight: 700;
  color: #000;
}

.fav.is-on svg {
  color: red;
}

/* ---------- info column ---------- */

.pv__h {
  margin: 0 0 .781vw;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 2.083vw;
  color: var(--c-ink);
}

.pv__tags {
  margin-bottom: .833vw;
}

.pv__tags ul {
  display: flex;
  align-items: center;
}

.pv__tags li {
  padding-inline: .521vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 1.25vw;
  color: var(--c-ink);
  border-left: .208vw solid #000;
}

.pv__tags li:first-child {
  padding-left: 0;
  border-left: 0;
}

.pv__price {
  margin-top: 1.5rem;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: .13rem;
}

.pv__price span {
  display: inline-block;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 1.354vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ---------- buy buttons ---------- */

.pv__buy {
  display: flex;
  /* each button keeps its own height, as the original's do — the offer's label
     wraps to two lines and the cart's does not */
  align-items: flex-start;
  gap: 1.563vw;
  margin: 3.125vw 0 2.083vw;
}

.bx {
  position: relative;
  display: block;
  width: 10.417vw;
  padding: .499vw .417vw;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: .052vw solid;
  box-shadow: var(--shadow);
  transition: background-color .3s ease, border-color .3s ease;
}

.bx__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx__in svg {
  flex: none;
  width: 2.031vw;
  height: 1.51vw;
}

.bx--cart {
  /* this one never gets narrower than its label needs, however small the screen */
  min-width: 120px;
  letter-spacing: .052vw;
  background: var(--c-green);
  border-color: var(--c-green);
}

.bx--cart .bx__in {
  gap: .781vw;
}

.bx--cart:hover {
  background: #000;
  border-color: #000;
}

.bx--off {
  letter-spacing: 0;
  /* this one keeps the font's own leading, so a wrapped label sits looser
     than the cart button's — the original's own spacing */
  line-height: normal;
  background: #4b4b4b;
  border-color: #4b4b4b;
}

.bx--off .bx__in {
  gap: .313vw;
}

.bx--off:hover {
  background: var(--c-green);
  border-color: var(--c-green);
}

/* Alankar products: the buy button is the brand's pink (client design, "Alankar Product
   page") — the same pink as the homepage's "Alankar outlet" tag; the offer button's
   hover follows it instead of the site green */
.pv__i--alk .bx--cart {
  background: #e9599f;
  border-color: #e9599f;
}

.pv__i--alk .bx--cart:hover {
  background: #000;
  border-color: #000;
}

.pv__i--alk .bx--off:hover {
  background: #e9599f;
  border-color: #e9599f;
}

/* ---------- tabs ---------- */

.tab {
  margin-block: 1.5rem;
  background: #fbfbfb;
}

.tab__n {
  display: flex;
}

.tab__n a {
  display: block;
  padding: .964vw 1.51vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #000;
  background: #fbfbfb;
  cursor: pointer;
}

.tab__n a.is-on {
  color: #fff;
  background: #000;
}

.tab__p {
  display: none;
  padding: 2.083vw 1.563vw;
}

.tab__p.is-on {
  display: block;
}

/* ---------- tab 1: description ---------- */

/* sized on the box, not just its <p>s: descriptions are vendor-entered HTML
   and often arrive as bare text (or lists/divs), which then fell back to the
   page's tiny base size */
.pv__desc {
  font-size: 1.146vw;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
  overflow-wrap: anywhere;
}

.pv__desc p {
  margin: 0;
}

.pv__desc ul,
.pv__desc ol {
  padding-left: 1.2em;
  list-style: revert;
}

/* ---------- tab 2: details ---------- */

.spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 1.458vw;
  margin: 0;
}

.spec dt {
  width: 24%;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

.spec dd {
  display: flex;
  align-items: center;
  column-gap: .521vw;
  width: 76%;
  margin: 0;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 1;
  color: #000;
}

.spec .i-info {
  width: 1.042vw;
  height: 1.042vw;
}

.spec .i-sel {
  width: 1.146vw;
  height: 1.198vw;
}

/* ---------- tab 3: shipping ---------- */

.ship {
  display: flex;
  align-items: flex-start;
  gap: .625vw;
}

.ship--d {
  padding-bottom: 3.646vw;
}

/* the icon stays inline so the row keeps the text line's full height */
.ship__ic {
  flex: none;
}

.ship__ic img {
  display: inline;
  margin-top: .104vw;
}

.ship--d .ship__ic img {
  width: 3.594vw;
  height: 2.188vw;
}

.ship--r .ship__ic img {
  width: 3.125vw;
  height: 2.344vw;
}

.ship__c {
  flex: 1;
}

.ship__t {
  margin: 0 0 .313vw;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1;
  color: #000;
}

.ship__c ul {
  display: flex;
  flex-direction: column;
  row-gap: 1.458vw;
}

.ship__c li {
  font-size: 1.146vw;
  font-weight: 600;
  line-height: 1;
  color: #000;
}

.ship__c li svg {
  display: inline;
  width: 1.042vw;
  height: 1.042vw;
  vertical-align: bottom;
}

.ship__c ul.ship__services {
  margin-top: .625vw;
  row-gap: .625vw;
  list-style: disc;
  padding-left: 1.1em;
}

.ship__c ul.ship__services li {
  display: list-item;
}

/* ---------- more from the same seller ---------- */
/* same .crsl / .pc parts as the home carousels, just smaller cards */

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

.rel__h {
  margin: 0 0 2.083vw;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1;
  color: var(--c-ink);
}

.rel .crsl__t {
  gap: .834vw;
  padding-left: 0;
}

/* The section is already the page width (.rel max-width: --wrap), so the cards start
   right under the heading, without carousel.css's gutters (client request: they were
   pushed in from it). The arrows go in the page margin outside the section instead,
   centred in it, so they still never cover a card. */
.rel .crsl {
  padding-inline: 0;
}

.rel .crsl__a--p {
  left: -3.646vw;
}

.rel .crsl__a--n {
  right: -3.646vw;
}

.rel .pc {
  flex: 0 0 15.833vw;
}

.rel .pc__media {
  height: 26.146vw;
}

.rel .pc__t a {
  font-size: .854vw;
}

.rel .pc__p {
  font-size: 1.709vw;
}

.rel .pc__row {
  gap: 1.042vw;
  margin-top: 1.25vw;
}

.rel .pc__cta {
  max-width: 8.594vw;
  padding: .469vw .417vw;
  font-size: .833vw;
  font-weight: 500;
}

.rel .pc__cta .btn__in {
  gap: .625vw;
}

.rel .pc__cta .btn__in svg {
  width: 1.794vw;
  height: 1.185vw;
}

/* ---------- welcome band on this page ---------- */

.prd .wel {
  background: #fff;
}

.prd .wel__in {
  padding-top: 0;
}

.wel__h strong {
  font-weight: 900;
  line-height: 1;
  color: var(--c-green);
}

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

/* the two columns stack well before the small-screen design starts — in
   between, the desktop sizes simply sit one under the other */
@media (max-width: 989px) {
  .pv {
    flex-wrap: wrap;
  }

  .pv__m,
  .pv__i {
    width: 100%;
  }

  /* the photo now has the whole width to itself, so it is measured from the
     column instead of the viewport; the thumbs keep their own scale */
  .gal {
    /* stacked like this the strip sits inside the column, with no left bleed */
    margin-left: 0;
  }

  .gal__s {
    width: calc(100% - 12.406vw + 5px);
  }

  .thm {
    left: auto;
    right: 0;
    width: calc(12.406vw - 10px);
  }

  .thm li {
    height: calc(12.406vw - 10px);
  }
}

@media (max-width: 767px) {
  .prd main > .wrap {
    max-width: 100%;
  }

  .crumb {
    gap: 3.409vw;
    padding: 4.545vw;
  }

  .crumb a,
  .crumb span {
    font-size: 3.75vw;
  }

  /* no side bleed: the old -1.333vw bleed plus the strip's own offsets pushed
     the photo frame off-centre (flush left, past the right edge), so the
     contained photo and the favourites pill no longer lined up */
  .pv {
    display: block;
    margin: 0;
  }

  .pv__m,
  .pv__i {
    width: auto;
  }

  /* absolute right:0 measures from .pv__i's padding edge — on a phone that is
     the screen edge, so the mark was clipped. Pull it in by the column's
     4.545vw gutter and drop it beside the tags/price, as in the design. */
  .pv__mark {
    top: 7.5vw;
    right: 4.545vw;
    width: 15vw;
  }

  /* gallery turns into a swipeable row; each slide is exactly one screen wide
     with an even gutter either side, so the photo sits centred */
  .gal {
    display: flex;
    margin: 0 0 2.667vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .gal__s {
    display: block;
    flex: none;
    width: 100%;
    padding: 1.333vw 4.545vw;
    scroll-snap-align: center;
  }

  .gal__f img {
    height: 113.636vw;
    object-fit: contain;
  }

  /* the strip's own bleed and spacing never scaled with the phone */
  .thm {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    height: auto;
    margin-inline: -15px;
    padding-bottom: 2.667vw;
  }

  .thm ul {
    flex-direction: row;
    gap: 10px;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .thm ul::-webkit-scrollbar {
    display: none;
  }

  /* a share of the strip, not of the screen — the original's own figure, so
     four thumbs sit in view whatever the phone's width */
  .thm li {
    flex: none;
    width: calc(24% - 6px);
    height: auto;
    aspect-ratio: 1;
  }

  .thm__a {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: #000;
    background: #fff;
    border-radius: 50px;
    transform: translateY(-50%);
  }

  .thm__a--p {
    left: 30px;
  }

  .thm__a--n {
    right: 30px;
  }

  .thm__a svg {
    width: 7px;
    height: 13px;
  }

  /* pills sit inside the photo frame (slide gutter 4.545vw + 2.273vw inset) */
  .shr {
    top: 3.636vw;
    left: 6.818vw;
    gap: 1.364vw;
    width: 18.75vw;
    height: 7.5vw;
    font-size: 2.386vw;
    box-shadow: var(--shadow);
  }

  .shr svg {
    width: 4.743vw;
    height: 4.922vw;
  }

  .fav {
    top: 3.636vw;
    right: 6.818vw;
    width: auto;
    max-width: calc(100% - 6.818vw * 2 - 18.75vw - 2.273vw);
    height: 7.5vw;
    padding: 1.136vw 2.273vw;
    white-space: nowrap;
    font-size: 2.386vw;
    border-radius: 12.443vw;
    box-shadow: var(--shadow);
  }

  .fav svg {
    width: 5.625vw;
    height: 5.455vw;
  }

  .pv__i {
    padding-inline: 4.545vw;
  }

  .pv__h {
    margin-bottom: 4.545vw;
    font-size: 5.455vw;
    line-height: 5.455vw;
  }

  .pv__tags {
    margin-bottom: 4.545vw;
  }

  .pv__tags li {
    padding-inline: 1.364vw;
    font-size: 4.545vw;
    line-height: 3.182vw;
    border-left-width: .455vw;
  }

  .pv__price {
    font-size: 1.6rem;
  }

  .pv__price span {
    font-size: 6.818vw;
  }

  .pv__buy {
    flex-wrap: wrap;
    gap: 2.273vw;
    margin: 5.682vw 0 9.091vw;
  }

  .bx {
    flex: 1 1 48%;
    width: auto;
    padding: 2.273vw 1.818vw;
    font-size: 4.545vw;
  }

  .bx__in svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .bx--cart {
    letter-spacing: .227vw;
  }

  .bx--cart .bx__in {
    gap: 2.273vw;
  }

  .bx--off .bx__in {
    gap: 1.818vw;
  }

  /* no bleed: the tabs sit inside .pv__i's 4.545vw gutter so their edges line
     up with the Buy now / Make an offer buttons (was full bleed) */
  .tab {
    margin: 0;
  }

  /* all three tabs on one row (client request — Shipping used to wrap onto a second
     row under the other two, full width) */
  .tab__n li {
    flex: 1 1 0;
    min-width: 0;
  }

  .tab__n a {
    padding: 4.091vw 1.136vw;
    /* was 5.455vw (~21px) — too big beside the rest of the page (client request) */
    font-size: 4.00vw;
    text-align: center;
    border: .227vw solid #000;
  }

  /* neighbouring tabs share one border line, not two */
  .tab__n li + li a {
    border-left: 0;
  }

  /* the column gutter already insets the panel, so no side padding of its own —
     the panel text lines up with the tab and button edges */
  .tab__p {
    padding: 9.091vw 0;
  }

  /* at 3.636vw it read too small on a phone (client request) */
  .pv__desc {
    font-size: 4.545vw;
    line-height: 6.818vw;
  }

  .spec {
    row-gap: 4.545vw;
  }

  .spec dt {
    width: 40%;
    /* was 6.364vw (~25px) — now the same size as the values beside it (client request) */
    font-size: 4.091vw;
  }

  .spec dd {
    column-gap: 2.273vw;
    width: 60%;
    /* was 4.545vw (~18px), made smaller with the labels (client request) */
    font-size: 4.091vw;
  }

  .spec .i-info {
    width: 4.545vw;
    height: 4.545vw;
  }

  .spec .i-sel {
    width: 4.545vw;
    height: 5.227vw;
  }

  /* the desktop vw sizes were left as-is here, so on a phone the caption
     rendered ~4px and the truck ~14px wide, with the list indented off the
     caption's left edge */
  .ship {
    align-items: center;
    gap: 3.409vw;
  }

  .ship--d {
    padding-bottom: 6.818vw;
  }

  .ship--d .ship__ic img {
    width: 11.818vw;
    height: 7.273vw;
    margin-top: 0;
  }

  .ship__t {
    margin-bottom: 1.364vw;
    font-size: 3.409vw;
  }

  .ship__c ul {
    row-gap: 2.273vw;
  }

  .ship__c li {
    font-size: 4.091vw;
  }

  .ship__c ul.ship__services {
    margin-top: 1.364vw;
    row-gap: 1.364vw;
    padding-left: 1.1em;
  }

  .ship__c ul.ship__services li {
    font-size: 3.409vw;
  }

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

  .rel__h {
    margin-bottom: 11.364vw;
    font-size: 7.5vw;
    text-align: center;
  }

  .rel .crsl__t {
    gap: 4.545vw;
  }

  .rel .pc {
    flex: 0 0 43.636vw;
  }

  .rel .pc__media {
    height: 72.287vw;
  }

  .rel .pc__t a {
    font-size: 3.182vw;
  }

  .rel .pc__p {
    font-size: 5.455vw;
  }

  .rel .pc__row {
    gap: 1.818vw;
    margin-top: 3.409vw;
  }

}

/* ---------- phone layout, after circular-threads.com (client request) ----------
   Title; then size, condition and brand as labelled rows (.pv__meta) in place of the
   one-line tag strip; then the payment block (price, Buy now / Make an offer, and a secure-
   checkout line, .pv__safe); then the original Description / Details / Shipping tabs (they
   were briefly stacked sections under .tab__mh headings — reverted, client request).
   Desktop now shows the same labelled rows in place of its tag strip (client request);
   the secure-checkout line remains phones only. */

.pv__safe,
.tab__mh {
  display: none;
}

@media (min-width: 768px) {
  .pv__tags {
    display: none;
  }

  .pv__meta {
    display: grid;
    gap: .521vw;
    margin: .833vw 0 1.25vw;
  }

  .pv__meta > div {
    display: flex;
    gap: .521vw;
    font-size: clamp(16px, 1.042vw, 20px);
    line-height: 1.4;
  }

  .pv__meta dt {
    min-width: 6.25vw;
    font-weight: 600;
    color: #6b6b6b;
  }

  .pv__meta dd {
    margin: 0;
    font-weight: 600;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .pv__tags {
    display: none;
  }

  .pv__meta {
    display: grid;
    gap: 2.273vw;
    margin: 3.409vw 0 5.682vw;
  }

  .pv__meta > div {
    display: flex;
    gap: 2.273vw;
    font-size: 3.864vw;
    line-height: 1.4;
  }

  .pv__meta dt {
    min-width: 22.727vw;
    font-weight: 600;
    color: #6b6b6b;
  }

  .pv__meta dd {
    margin: 0;
    font-weight: 600;
    color: #121212;
  }

  .pv__buy {
    margin-bottom: 0;
  }

  .pv__safe {
    display: flex;
    align-items: center;
    gap: 2.273vw;
    /* even space above and below (client request — it was ~36px above, from the
       buttons' own bottom margin, and none below, the tabs touching it) */
    margin: 4.545vw 0;
    font-size: 3.864vw;
    color: #333;
  }

  .pv__safe svg {
    flex: none;
    width: 4.545vw;
    height: 4.545vw;
    color: var(--c-green);
  }

  /* The rest of the info as stacked sections, no tab buttons, was dropped (client request):
     phones keep the original Description / Details / Shipping tabs, so .tab__mh stays hidden.
     Kept, not deleted:
  .tab {
    margin-top: 6.818vw;
  }

  .tab__n {
    display: none;
  }

  .tab__p,
  .tab__p.is-on {
    display: block;
    padding: 4.545vw 0;
    border-top: 1px solid #e5e5e5;
  }

  .tab__mh {
    display: block;
    margin: 0 0 3.409vw;
    font-family: var(--ff-alt);
    font-size: 4.545vw;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #121212;
  }
  */
}

/* ---------- phone thumbnail strip, lined up with the page ----------
   Client report: the strip under the main photo ran 15px past the page margins on both
   sides (margin-inline: -15px above) while the photo, title and everything else sit inside
   them, and the arrows sat on top of the thumbnails 30px in. Now it keeps the same edges
   as the photo, four thumbnails fill the row exactly, and the arrows sit at the strip's
   ends with a shadow so they read as buttons over the swipeable row. */
@media (max-width: 767px) {
  /* the same inset as each photo slide (.gal__s padding above), so the strip, photo and
     title share one left and right edge */
  .thm {
    margin-inline: 4.545vw;
  }

  .thm ul {
    gap: 8px;
    padding: 5px 0;
  }

  .thm li {
    width: calc((100% - 24px) / 4);
  }

  .thm__a {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  }

  /* arrows only when the thumbnails overflow the row (.thm--scroll, set by gallery() in
     site.js) — with two or three they all fit, and an arrow would just cover one */
  .thm:not(.thm--scroll) .thm__a {
    display: none;
  }

  .thm__a--p {
    left: 4px;
  }

  .thm__a--n {
    right: 4px;
  }
}