/* 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;
}

/* ---------- 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 ---------- */

.thm {
  position: absolute;
  top: 5px;
  left: 37.294vw;
  width: 11.711vw;
}

.thm ul {
  display: flex;
  flex-direction: column;
  gap: 1.042vw;
}

.thm li {
  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;
}

/* ---------- 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);
}

/* ---------- 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 ---------- */

.pv__desc p {
  margin: 0;
  font-size: 1.146vw;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

/* ---------- 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;
}

.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;
  }

  .pv {
    display: block;
    margin: -1.333vw -1.333vw 0;
  }

  .pv__m,
  .pv__i {
    width: auto;
  }

  /* gallery turns into a swipeable row that bleeds past both edges */
  .gal {
    display: flex;
    gap: 1.067vw;
    margin: 0 -4vw 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: 101.6vw;
    margin-left: 4vw;
    padding-block: 1.333vw;
    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;
    width: 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;
  }

  .shr {
    top: 4.545vw;
    left: 4.545vw;
    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: 4.545vw;
    right: 4.545vw;
    width: 51.136vw;
    height: 7.5vw;
    padding: 1.136vw;
    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;
  }

  .tab {
    margin: 0 -3.409vw;
  }

  .tab__n {
    flex-wrap: wrap;
  }

  .tab__n li {
    flex: 1 1 50%;
  }

  .tab__n a {
    padding: 5vw 6.818vw;
    font-size: 5.455vw;
    text-align: center;
    border: .227vw solid #000;
  }

  .tab__n li:last-child a {
    border-top: 0;
  }

  .tab__p {
    padding: 9.091vw 4.545vw;
  }

  .pv__desc p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .spec {
    row-gap: 4.545vw;
  }

  .spec dt {
    width: 40%;
    font-size: 6.364vw;
  }

  .spec dd {
    column-gap: 2.273vw;
    width: 60%;
    font-size: 4.545vw;
  }

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

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

  .ship__c ul {
    row-gap: 4.545vw;
    padding-left: 4.545vw;
  }

  .ship__c 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;
  }

}