/* ===== Product Detail Page Styles ===== */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(16px, 4vw, 56px);
  --c: #542192;
}

html,
body,
body.product-detail-body {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  background-color: #f4f7fa !important;
  color: #0e2433 !important;
}

.page {
  padding: clamp(96px, 9vw, 115px) var(--pad) clamp(40px, 6vw, 90px);
  max-width: 1440px;
  margin: 0 auto;
}

.crumbs {
  font-size: 14px;
  color: #4d6475;
  margin-bottom: clamp(16px, 2vw, 28px);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.crumbs a {
  text-decoration: none;
  color: #4d6475;
  transition: color .2s;
}

.crumbs a:hover {
  text-decoration: underline;
  color: #0e2433;
}

.crumbs [aria-current] {
  color: #0e2433;
  font-weight: 600;
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* Gallery */
.gallery-expand{position:absolute;top:16px;right:16px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#542192;box-shadow:0 3px 12px #0e24331a;cursor:zoom-in}
.gallery-expand svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gallery-expand:focus-visible{outline:3px solid #8655b8;outline-offset:3px}
.gallery {
  position: sticky;
  top: 24px;
}

.stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8%;
  cursor: zoom-in;
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
  box-shadow: 0 0 0 1px rgb(14 36 51 / .06), 0 12px 32px -16px rgb(14 36 51 / .12);
}

.stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .35s var(--ease), opacity .2s;
  user-select: none;
  animation: in .9s var(--ease) backwards;
}

@keyframes in {
  from {
    opacity: 0;
    transform: scale(.94) translateY(14px);
  }
}

.stage .badge {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 7px 15px;
  border-radius: 99px;
  color: #fff;
  background: var(--c);
  font: 700 13px 'Bricolage Grotesque', sans-serif;
  letter-spacing: .02em;
}

.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.thumbs button {
  width: 76px;
  height: 76px;
  padding: 8px;
  border-radius: 16px;
  cursor: pointer;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .08);
  transition: border-color .2s, transform .2s var(--ease);
}

.thumbs button:hover {
  transform: translateY(-2px);
}

.thumbs button[aria-pressed="true"] {
  border-color: var(--c);
}

.thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Info Section */
.info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: rise .8s var(--ease) backwards .1s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.info h1 {
  font: 800 clamp(28px, 3.6vw, 48px)/1.1 'Bricolage Grotesque', sans-serif;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: #0e2433;
}

.meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pill {
  padding: 6px 14px;
  border-radius: 99px;
  font: 700 13px 'Bricolage Grotesque', sans-serif;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .1);
  color: #0e2433;
}

.pill.ok {
  color: #14764f;
  background: #e3f6ed;
  box-shadow: none;
}

.price {
  font: 800 clamp(30px, 3.4vw, 44px) 'Bricolage Grotesque', sans-serif;
  color: var(--c);
  letter-spacing: -.02em;
  margin: 4px 0 0;
}

.lead {
  color: #4d6475;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
  max-width: 56ch;
}

.hl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 6px 0;
}

.hl div {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .07);
}

.hl b {
  display: block;
  font: 800 17px 'Bricolage Grotesque', sans-serif;
  color: #0e2433;
}

.hl span {
  font-size: 13px;
  color: #4d6475;
}

.buy {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.qty {
  display: flex;
  align-items: center;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .14);
}

.qty button {
  width: 48px;
  height: 52px;
  border: 0;
  background: none;
  font-size: 22px;
  cursor: pointer;
  border-radius: 99px;
  color: #0e2433;
}

.qty button:hover {
  background: rgb(14 36 51 / .06);
}

.qty output {
  min-width: 34px;
  text-align: center;
  font: 700 18px 'Bricolage Grotesque', sans-serif;
  color: #0e2433;
}

.add {
  flex: 1;
  min-width: 190px;
  height: 54px;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: var(--c);
  font: 700 17px 'Bricolage Grotesque', sans-serif;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
  box-shadow: 0 14px 26px -14px var(--c);
}

.add:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 30px -14px var(--c);
}

.add.added {
  background: #1f9d6b !important;
}

.add svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add circle {
  fill: currentColor;
  stroke: none;
}

.now {
  flex: 1;
  min-width: 150px;
  height: 54px;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  color: #fff;
  background: #0e2433;
  font: 700 17px 'Bricolage Grotesque', sans-serif;
  transition: transform .3s var(--ease), background .3s;
}

.now:hover {
  transform: translateY(-3px);
  background: #000;
}

.wa {
  height: 54px;
  padding: 0 24px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font: 700 16px 'Bricolage Grotesque', sans-serif;
  color: #0e2433;
  box-shadow: 0 0 0 2px #0e2433;
  transition: background .3s, color .3s;
  flex: none;
  width: 100%;
}

.wa:hover {
  background: #0e2433;
  color: #fff;
}

.total {
  font-size: 14px;
  color: #4d6475;
  font-weight: 600;
}

.trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #4d6475;
  padding-top: 6px;
}

.trust-item{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}
.trust svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-item svg{color:var(--c)}
.trust .trust-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid #b8ddcb;border-radius:99px;color:#14633f;background:#effaf4;text-decoration:none;font-weight:600;font-size:13px}
.trust .trust-whatsapp:hover{background:#def4e7;border-color:#6bae8a}
.trust .trust-whatsapp:focus-visible{outline:3px solid #542192;outline-offset:3px}

.tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: #0e2433;
  background: #fff;
  font: 700 14px 'Bricolage Grotesque', sans-serif;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .16);
  transition: background .3s, color .3s, transform .3s var(--ease);
}

.tool:hover {
  transform: translateY(-2px);
  background: #0e2433;
  color: #fff;
}

.tool[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
  box-shadow: 0 0 0 2px var(--c);
}

.tool[aria-pressed="true"] .heart {
  fill: currentColor;
  animation: pop .45s var(--ease);
}

@keyframes pop {
  50% { transform: scale(1.3); }
}

.tool svg, .gnav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gallery Arrows */
.gnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #0e2433;
  background: rgb(255 255 255 / .92);
  box-shadow: 0 6px 16px -8px rgb(14 36 51 / .5);
  transition: transform .25s var(--ease);
}

.gnav:hover {
  transform: translateY(-50%) scale(1.1);
}

.gprev { left: 14px; }
.gnext { right: 14px; }

/* Tabs */
.tabs {
  margin-top: clamp(40px, 5vw, 64px);
}

.tablist {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgb(14 36 51 / .12);
  overflow-x: auto;
  scrollbar-width: none;
}

.tablist button {
  padding: 14px 22px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 700 16px 'Bricolage Grotesque', sans-serif;
  color: #4d6475;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.tablist button[aria-selected="true"] {
  color: #0e2433;
  border-color: var(--c);
}

.panel {
  padding: 26px 0;
  max-width: 820px;
  line-height: 1.7;
  color: #35505f;
  animation: rise .5s var(--ease);
}

.panel[hidden] {
  display: none;
}

.product-faqs, .product-conclusion { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgb(14 36 51 / .12); }
.product-faqs h2, .product-conclusion h2 { margin: 0 0 18px; color: #0e2433; font: 800 clamp(23px, 3vw, 28px) 'Bricolage Grotesque', sans-serif; }
.product-faq-item { margin: 12px 0; padding: 16px 18px; border: 1px solid rgb(14 36 51 / .12); border-radius: 16px; background: #fff; }
.product-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #0e2433; font-weight: 700; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.product-faq-item summary::-webkit-details-marker { display: none; }
.product-faq-item summary svg { flex: 0 0 20px; color: var(--c, #542192); transition: transform .18s ease; }
.product-faq-item[open] summary svg { transform: rotate(180deg); }
.product-faq-item summary:focus-visible { outline: 3px solid var(--c, #542192); outline-offset: 5px; border-radius: 4px; }
.product-faq-answer { margin-top: 14px; overflow-wrap: anywhere; }
.product-faq-more { display: inline-block; margin-top: 12px; color: var(--c, #542192); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .product-faq-item summary svg { transition: none; } }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 14px 4px;
  border-bottom: 1px solid rgb(14 36 51 / .1);
}

th {
  width: 40%;
  font-weight: 500;
  color: #4d6475;
}

td {
  font-weight: 500;
  color: #0e2433;
}

.policy li {
  margin: 0 0 8px 18px;
}

/* Related Products Grid */
.rel h2 {
  font: 800 clamp(26px, 3vw, 36px) 'Bricolage Grotesque', sans-serif;
  letter-spacing: -.02em;
  margin: clamp(40px, 5vw, 64px) 0 20px;
  color: #0e2433;
}

.rel .row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.rc {
  --c: #542192;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgb(14 36 51 / .07);
  transition: transform .4s var(--ease), box-shadow .4s;
}

.rc:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 36px -22px rgb(14 36 51 / .5), 0 0 0 1px rgb(14 36 51 / .07);
}

.rc .m {
  position: relative;
  aspect-ratio: 1;
  flex: none;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
}

.rc img {
  position: absolute;
  inset: 12%;
  display: block;
  width: 76%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.rc div.t {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 8px;
  padding: 14px 16px 16px;
}

.rel .rc .t>.related-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 2.9em;
  overflow: hidden;
  overflow-wrap: anywhere;
  margin: 0;
  color: #4d6475;
  font: 400 clamp(12px, 1.05vw, 14px)/1.45 'Instrument Sans', sans-serif;
}

.rel .rc .t>.related-price {margin-top:auto;padding-top:2px}

.rc b {
  display: block;
  font: 700 16px/1.25 'Bricolage Grotesque', sans-serif;
  color: #0e2433;
}

.rc span {
  color: var(--c);
  font: 800 17px 'Bricolage Grotesque', sans-serif;
  display: block;
  margin-top: 6px;
}

/* Compare Bar, Dialog & Toast */
.cbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px var(--pad);
  color: #fff;
  background: #0e2433;
  box-shadow: 0 -14px 30px -18px rgb(0 0 0 / .6);
  animation: rise .5s var(--ease);
}

.cbar[hidden] {
  display: none;
}

.clist {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.citem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: 99px;
  background: rgb(255 255 255 / .12);
  font-size: 14px;
}

.citem button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgb(255 255 255 / .2);
}

.cact {
  display: flex;
  gap: 10px;
}

.cact button {
  padding: 11px 20px;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  font: 700 15px 'Bricolage Grotesque', sans-serif;
}

#cgo {
  background: #fff;
  color: #0e2433;
}

#cgo:disabled {
  opacity: .4;
  cursor: default;
}

#cclear {
  background: none;
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .4);
}

body.has-bar .page {
  padding-bottom: 140px;
}

dialog {
  border: 0;
  border-radius: 26px;
  padding: 0;
  width: min(960px, calc(100% - 24px));
  max-height: 90vh;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6);
  color: #0e2433;
  margin: auto;
}

dialog::backdrop {
  background: rgb(14 36 51 / .55);
  backdrop-filter: blur(4px);
}

.dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgb(14 36 51 / .1);
}

.dh h2 {
  font: 800 24px 'Bricolage Grotesque', sans-serif;
}

.dh button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  background: rgb(14 36 51 / .08);
}

.cbody {
  padding: 8px 24px 24px;
  overflow: auto;
  max-height: calc(90vh - 80px);
}

.cbody .ctable {
  width: 100%;
  min-width: calc(160px + var(--product-columns, 2) * 200px);
  table-layout: fixed;
  border-collapse: collapse;
}
.cbody .ctable thead th { width: 160px; }
.cm-scroll-hint { display: none; }
@media (max-width: 768px) {
  .cbody .ctable { min-width: calc(120px + var(--product-columns, 2) * 200px); }
  .cbody .ctable thead th { width: 120px; }
  .cm-scroll-hint { display: block; margin: 8px 0 16px; color: #4d6475; font-size: 14px; }
}

.ctable th {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-right: 20px;
}

.ctable td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ctable thead td {
  vertical-align: top;
  padding-bottom: 18px;
}

.ctable a {
  display: block;
  margin-top: 12px;
  font: 700 15px/1.25 'Bricolage Grotesque', sans-serif;
  text-decoration: none;
  color: #0e2433;
}

.cm {
  --c: #542192;
  width: 150px;
  height: 150px;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 10px;
  border-radius: 18px;
  margin-bottom: 8px;
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
}

.cm img {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 13px 22px;
  border-radius: 99px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: #0e2433;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 30px);
  transition: opacity .3s, transform .4s var(--ease);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.has-bar .toast {
  bottom: 100px;
}

@media (max-width: 880px) {
  .main {
    grid-template-columns: 1fr;
  }
  .gallery {
    position: static;
  }
}

@media (max-width: 520px) {
  .hl {
    grid-template-columns: 1fr 1fr;
  }
  .hl div {
    padding: 10px;
  }
  .hl b {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* Landscape windows need space for navigation, the tray and support controls. */
@media (max-height:600px) and (min-width:601px) {
  .cbar {flex-wrap:nowrap;padding:10px 16px;gap:12px;}
  .cbar .clist {flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;}
  .cbar .citem {flex:0 0 auto;white-space:nowrap;}
  .cbar .cact {flex:none;}
  .cbar .cact button {min-height:44px;}
}

/* Customer-submitted reviews; colors and fonts follow the product page. */
.tabs{scroll-margin-top:110px}
.product-reviews{max-width:900px}
.reviews-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.reviews-heading h2{margin:0;font:800 26px/1.2 'Bricolage Grotesque',sans-serif;color:#0e2433;letter-spacing:-.025em;scroll-margin-top:120px}
.reviews-heading p{margin:8px 0 0;font-size:14px;color:#4d6475}
.review-account-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 16px;border:1px solid #d2c3e4;border-radius:99px;color:#542192;font-size:13px;font-weight:700;text-decoration:none}
.review-account-link:hover{background:#efe8f7}
.reviews-summary{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:20px 24px;margin:24px 0;border:1px solid #e0d7ea;border-radius:20px;background:#fff}
.reviews-summary strong{font:800 40px/1.1 'Bricolage Grotesque',sans-serif;color:#0e2433}
.reviews-summary strong small{font-size:18px;color:#526573}
.reviews-summary>span{font-size:14px}
.reviews-list{display:grid;gap:16px}
.customer-review{padding:22px 24px;border:1px solid #dce3e9;border-radius:20px;background:#fff;min-width:0}
.review-byline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:#0e2433}
.review-byline time{color:#526573;font-size:12px}
.review-rating{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12px;color:#526573}
.review-stars{display:inline-flex;gap:3px}
.review-stars svg{width:18px;height:18px;fill:none;stroke:#9b7bbd;stroke-width:1.6;stroke-linejoin:round}
.review-stars svg.filled{fill:#542192;stroke:#542192}
.review-text{font-size:15px;line-height:1.7;overflow-wrap:anywhere;white-space:normal}
.reviews-empty{padding:28px;margin:24px 0 0;border:1px dashed #c8b6dc;border-radius:20px;background:#fff}
.reviews-empty h3{margin:0 0 8px;color:#0e2433;font:700 20px 'Bricolage Grotesque',sans-serif}
.reviews-empty p,.reviews-note{font-size:13px;color:#526573;line-height:1.7}
.reviews-empty p{margin:0}
.reviews-note{margin:20px 0 0}
.review-pagination{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-top:24px;font-size:13px}
.review-pagination a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #d2c3e4;border-radius:99px;color:#542192;text-decoration:none;font-weight:600}
.review-account-link:focus-visible,.review-pagination a:focus-visible{outline:3px solid #542192;outline-offset:3px}
@media(max-width:600px){.reviews-heading{gap:16px}.reviews-summary,.customer-review,.reviews-empty{padding:18px}.reviews-heading h2{font-size:24px}.reviews-heading .review-account-link{width:100%}.trust{gap:10px 16px}.review-text{font-size:14px}}

/* Full-screen gallery is in the native dialog top layer and never changes the page shell. */
body.photo-preview-open{overflow:hidden}
.photo-preview-notice{font-size:13px;text-align:center;padding:6px 16px 12px;margin:0;color:#526573;flex:none}
#product-photo-preview{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f4f7fa;color:#0e2433;overflow:hidden;box-sizing:border-box}
#product-photo-preview[open]{display:flex;flex-direction:column}
#product-photo-preview::backdrop{background:#0e2433cc}
.photo-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,40px);border-bottom:1px solid #dbe2eb;flex:none}
.photo-preview-toolbar>div:first-child{min-width:0}.photo-preview-toolbar h2{font:700 clamp(16px,2vw,22px)/1.25 'Bricolage Grotesque',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.photo-preview-toolbar p{font-size:13px;color:#526573;margin:5px 0 0}.photo-preview-actions{display:flex;gap:8px;flex:none}
.photo-preview :is(button,a){display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #dbe2eb;border-radius:50%;background:#fff;color:#542192;cursor:pointer;box-sizing:border-box;flex:none}
.photo-preview :is(button,a):hover{background:#eee8f5}.photo-preview :is(button,a):focus-visible{outline:3px solid #8655b8;outline-offset:3px}
.photo-preview svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.photo-preview-body{position:relative;display:flex;align-items:stretch;padding:16px;flex:1;min-height:0}
.photo-preview-stage{flex:1;height:100%;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;border-radius:20px;background:#fff}
.photo-preview-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}#photo-preview-prev{left:24px}#photo-preview-next{right:24px}
.photo-preview-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;flex:none}
.photo-preview-stage.is-zoomed{display:block}.photo-preview-stage.is-zoomed img{width:200%;height:auto;max-width:none;max-height:none;cursor:zoom-out}
.photo-preview-caption{font-size:14px;line-height:1.5;padding:8px 24px max(16px,env(safe-area-inset-bottom));text-align:center;flex:none;margin:0;overflow-wrap:anywhere;max-height:20dvh;overflow:auto}
#photo-preview-status{padding:20px;text-align:center}#photo-preview-retry{border-radius:22px;width:auto;padding:0 20px}
.photo-preview [hidden]{display:none!important}
.product-description{scroll-margin-top:110px}
.product-description.is-collapsed{max-height:18em;overflow:hidden;mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
.product-description-toggle{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:10px 22px;border:1px solid var(--c,#542192);border-radius:99px;color:var(--c,#542192);background:#fff;font:700 15px 'Instrument Sans',sans-serif;cursor:pointer}
.product-description-toggle[hidden]{display:none!important}
.product-description-toggle:hover{background:#eee8f5}
.product-description-toggle:focus-visible{outline:3px solid var(--c,#542192);outline-offset:3px}
@media(max-width:600px){.photo-preview-toolbar{gap:8px;padding:12px}.photo-preview-actions{gap:4px}.photo-preview-body{padding:8px}.photo-preview-stage{border-radius:14px}#photo-preview-prev{left:12px}#photo-preview-next{right:12px}.photo-preview-toolbar h2{-webkit-line-clamp:2;font-size:15px}.photo-preview-caption{padding-inline:16px}}