/* ============================================================================
   Uniq Gold Store — Product Detail
   Gallery baayen, andar scroll karne wala detail column daayen.
   Supplied build ka port: sirf prefix `ugs-` kiya gaya hai, @font-face nikale
   gaye (wo ugs-fonts.css me hain) aur neeche theme colour guard add ki gayi.
   ========================================================================== */

/* ============================================================================
   Product Detail — gallery left, scrolling detail column right
   Built to the supplied Figma spec. All tunable values are tokens on .ugs-pdp.
   Fonts are self-hosted (assets/fonts) — no external CDN.
   ========================================================================== */

/* ---------- Tokens ---------- */
.ugs-pdp {
  /* palette */
  --ugs-pdp-bg: #ffffff;
  --ugs-pdp-black: #1a1410;          /* --neutral-black */
  --ugs-pdp-ink: #000000;
  --ugs-pdp-espresso: #2a0c00;       /* --primary-espresso */
  --ugs-pdp-sand: #d4c4b4;           /* --neutral-sand */
  --ugs-pdp-light: #ede5da;          /* --neutral-light */
  --ugs-pdp-white: #ffffff;
  --ugs-pdp-gray-700: #444444;
  --ugs-pdp-review-bg: #faf8f6;
  --ugs-pdp-media-bg: #f7f5f2;
  --ugs-pdp-added: #1f6d3a;

  /* stock tag */
  --ugs-pdp-stock-out-bg: #f6e7e4;
  --ugs-pdp-stock-out-fg: #8c2f1d;
  --ugs-pdp-stock-in-bg: #e6f2ea;
  --ugs-pdp-stock-in-fg: #1f6d3a;
  --ugs-pdp-stock-back-bg: #fbf0dd;
  --ugs-pdp-stock-back-fg: #8a5a10;
  --ugs-pdp-stock-size: 13px;
  --ugs-pdp-stock-radius: 4px;
  --ugs-pdp-stock-pad: 6px 12px;
  --ugs-pdp-add-disabled: 0.45;

  /* layout — 1440 = 40 + 671 + 18 + 671 + 40 */
  --ugs-pdp-pad-x: clamp(16px, 2.78vw, 40px);
  --ugs-pdp-pad-top: clamp(32px, 5.9vw, 85px);
  --ugs-pdp-max: 1360px;
  --ugs-pdp-split-gap: 38px;
  --ugs-pdp-col: 671px;
  --ugs-pdp-gallery-gap: 21px;       /* 845 - 671 - 153 */
  --ugs-pdp-thumb-gap: 19.67px;      /* (671 - 4 x 153) / 3 */
  --ugs-pdp-stack-gap: 24px;
  --ugs-pdp-sticky-top: 24px;

  /* controls */
  --ugs-pdp-swatch: 60px;
  --ugs-pdp-swatch-pad: 0px;
  --ugs-pdp-size-box: 60px;
  --ugs-pdp-size-box-w: var(--ugs-pdp-size-box);
  --ugs-pdp-size-box-h: var(--ugs-pdp-size-box);
  --ugs-pdp-stage-ratio: 1 / 1;
  --ugs-pdp-stage-fit: cover;
  --ugs-pdp-stage-inset: 0px;
  --ugs-pdp-thumb-cols: 4;
  --ugs-pdp-rev-per-view: 2;
  --ugs-pdp-rev-gap: 18px;
  --ugs-pdp-rev-pad: 20px;
  --ugs-pdp-rel-gap: 16px;
  --ugs-pdp-mini-w: 150px;
  --ugs-pdp-mini-bag: 32px;
  --ugs-pdp-mini-ratio: 1 / 1;
  --ugs-pdp-mini-fit: cover;
  --ugs-pdp-mini-pad: 0px;
  --ugs-pdp-mini-zoom: 1;
  --ugs-pdp-mini-hover-zoom: 1.06;
  --ugs-pdp-mini-name-lines: 1;
  --ugs-pdp-arrow-fg: #1a1410;
  --ugs-pdp-arrow-bg: #ffffff;
  --ugs-pdp-arrow-border: #ede5da;
  --ugs-pdp-arrow-hover-fg: #ffffff;
  --ugs-pdp-arrow-hover-bg: #2a0c00;
  --ugs-pdp-arrow-radius: 0px;
  --ugs-pdp-arrow-stroke: 1.5;
  --ugs-pdp-arrow-glyph: 14px;
  --ugs-pdp-arrow-disabled: 0.35;
  --ugs-pdp-review-text: #1a1410;
  --ugs-pdp-reviewer-name: #1a1410;
  --ugs-pdp-reviewer-loc: #1a1410;
  --ugs-pdp-sec-title: #1a1410;
  --ugs-pdp-radius: 4px;
  --ugs-pdp-arrow: 32px;

  /* type */
  --ugs-pdp-serif: "Instrument Serif", "Times New Roman", Times, serif;
  --ugs-pdp-sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ugs-pdp-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ugs-pdp-title: clamp(26px, 2.22vw, 32px);
  --ugs-pdp-body: 16px;

  /* motion */
  --ugs-pdp-ease: cubic-bezier(0.22, 0.68, 0, 1);

  width: 100%;
  padding: var(--ugs-pdp-pad-top) var(--ugs-pdp-pad-x);
  background: var(--ugs-pdp-bg);
  font-family: var(--ugs-pdp-sans);
  color: var(--ugs-pdp-black);
  box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win over host-theme rules. */
.ugs-pdp :where(*, *::before, *::after) { box-sizing: border-box; }
.ugs-pdp :where(h1, h2, h3, p, ul, ol, li, figure, dl, dd) { margin: 0; padding: 0; }
.ugs-pdp :where(ul, ol) { list-style: none; }
.ugs-pdp :where(a) { color: inherit; text-decoration: none; }
.ugs-pdp :where(img, svg) { display: block; max-width: 100%; }
.ugs-pdp :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.ugs-pdp__inner {
  max-width: var(--ugs-pdp-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ugs-pdp-split-gap);
  /* stretch (the default) is required: the detail wrapper must inherit the row
     height set by the gallery so its absolutely-positioned scroller has a box
     to fill. With align-items:start the wrapper collapses to zero. */
  align-items: stretch;
}

/* ==========================================================================
   Left — gallery
   ========================================================================== */
.ugs-pdp__gallery { min-width: 0; }

.ugs-pdp__stage {
  position: relative;
  aspect-ratio: var(--ugs-pdp-stage-ratio);
  padding: var(--ugs-pdp-stage-inset);
  background: var(--ugs-pdp-media-bg);
  overflow: hidden;
}

.ugs-pdp__stage-img {
  width: 100%;
  height: 100%;
  object-fit: var(--ugs-pdp-stage-fit);
}

.ugs-pdp__badge {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 2;
  min-width: 79px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* spec says padding 10; 6 lands "Best Seller" on the spec'd 79px with real
     Urbanist metrics while longer labels still grow instead of clipping */
  padding: 0 6px;
  background: var(--ugs-pdp-sand);
  color: var(--ugs-pdp-ink);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  font-family: var(--ugs-pdp-ff-badge, inherit);
}

.ugs-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(var(--ugs-pdp-thumb-cols), minmax(0, 1fr));
  gap: var(--ugs-pdp-thumb-gap);
  margin-top: var(--ugs-pdp-gallery-gap);
}

.ugs-pdp__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ugs-pdp-media-bg);
  overflow: hidden;
  padding: 0;
  outline-offset: -2px;
}

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

.ugs-pdp__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.24s var(--ugs-pdp-ease);
}

.ugs-pdp__thumb[aria-current="true"]::after { border-color: var(--ugs-pdp-black); }
.ugs-pdp__thumb:hover::after { border-color: var(--ugs-pdp-sand); }
.ugs-pdp__thumb:focus-visible { outline: 2px solid var(--ugs-pdp-black); }

/* ==========================================================================
   Right — detail column
   The row height comes from the gallery, so this wrapper contributes no
   intrinsic height and the scroller is taken out of flow inside it.
   ========================================================================== */
.ugs-pdp__detail { position: relative; min-width: 0; min-height: 0; }

.ugs-pdp__scroller {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  padding-right: 2px;
}
.ugs-pdp__scroller::-webkit-scrollbar { display: none; }
.ugs-pdp__scroller:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: -2px; }

.ugs-pdp__stack {
  display: flex;
  flex-direction: column;
  gap: var(--ugs-pdp-stack-gap);
}

/* ---------- Header ---------- */
.ugs-pdp__head { display: flex; flex-direction: column; gap: 12px; }

.ugs-pdp__title {
  font-family: var(--ugs-pdp-ff-title, var(--ugs-pdp-serif));
  font-weight: 400;
  font-size: var(--ugs-pdp-title);
  line-height: 1.375;             /* 44 / 32 */
  text-transform: capitalize;
  color: var(--ugs-pdp-ink);
}

.ugs-pdp__head-body { display: flex; flex-direction: column; gap: 12px; }
.ugs-pdp__rule { height: 1px; background: var(--ugs-pdp-light); }

.ugs-pdp__meta { display: flex; flex-direction: column; gap: 11px; }

.ugs-pdp__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ugs-pdp__price {
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-price, inherit);
}

.ugs-pdp__rating { display: flex; align-items: center; gap: 8px; }

.ugs-pdp__stars { display: flex; width: max-content; gap: 2px; }
.ugs-pdp__stars svg { width: 16px; height: 16px; fill: var(--ugs-pdp-sand); }

.ugs-pdp__review-count { font-size: 14px; line-height: 22px; color: var(--ugs-pdp-ink);
  font-family: var(--ugs-pdp-ff-reviewcount, inherit);
}

.ugs-pdp__desc {
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-desc, inherit);
}

.ugs-pdp__lead-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-lead, inherit);
}
.ugs-pdp__lead-time svg { flex: 0 0 14px; width: 14px; height: 14px;
  fill: none; stroke: var(--ugs-pdp-black); stroke-width: 1; }

/* ---------- Option groups ---------- */
.ugs-pdp__group { display: flex; flex-direction: column; gap: 12px; }

.ugs-pdp__group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-grouplabel, inherit);
}
.ugs-pdp__group-value { color: var(--ugs-pdp-black); }

/* colour swatches */
.ugs-pdp__swatches { display: flex; gap: 12px; }

.ugs-pdp__swatch {
  width: var(--ugs-pdp-swatch);
  height: var(--ugs-pdp-swatch);
  padding: var(--ugs-pdp-swatch-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ugs-pdp-white);
  border: 1px solid transparent;
  transition: border-color 0.24s var(--ugs-pdp-ease);
}
.ugs-pdp__swatch img { width: 44px; height: 29px; max-width: 100%; }

/* Variation ki tasveer chip ban kar aati hai — poora khana bharti hai. */
.ugs-pdp__swatch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Supplied build me chip ek <img> tha. Yahan colour WooCommerce term meta se
   aata hai, is liye chip ek span hai — naap wahi 44 x 29. */
.ugs-pdp__swatch-chip {
  width: 44px;
  height: 29px;
  max-width: 100%;
  background: var(--ugs-pdp-sand);
}

/* Jis term ka koi colour na mile us ke liye naam — khali chip se behtar. */
.ugs-pdp__swatch--text {
  width: auto;
  min-width: var(--ugs-pdp-swatch);
  padding: 8px 14px;
  border-color: var(--ugs-pdp-light);
  font-size: 13px;
  line-height: 1.2;
  color: var(--ugs-pdp-black);
  text-align: center;
  font-family: var(--ugs-pdp-ff-swatchtext, inherit);
}
.ugs-pdp__swatch[aria-checked="true"] { border-color: var(--ugs-pdp-black); }
.ugs-pdp__swatch:hover { border-color: var(--ugs-pdp-sand); }
.ugs-pdp__swatch:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 2px; }

/* size row */
.ugs-pdp__size-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ugs-pdp__sizes { display: flex; gap: 12px; flex-wrap: wrap; }

.ugs-pdp__size {
  width: var(--ugs-pdp-size-box-w);
  height: var(--ugs-pdp-size-box-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--ugs-pdp-radius);
  background: var(--ugs-pdp-white);
  border: 1px solid var(--ugs-pdp-light);
  font-size: 13px;
  line-height: 1;
  color: var(--ugs-pdp-black);
  transition: background-color 0.24s var(--ugs-pdp-ease),
              color 0.24s var(--ugs-pdp-ease), border-color 0.24s var(--ugs-pdp-ease);
  font-family: var(--ugs-pdp-ff-size, inherit);
}
.ugs-pdp__size:hover { border-color: var(--ugs-pdp-sand); }
.ugs-pdp__size[aria-checked="true"] {
  background: var(--ugs-pdp-espresso);
  border-color: var(--ugs-pdp-espresso);
  color: var(--ugs-pdp-white);
  font-weight: 500;
}
.ugs-pdp__size:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 2px; }

.ugs-pdp__size-guide {
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--ugs-pdp-ff-sizeguide, inherit);
}
.ugs-pdp__size-guide:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 3px; }

/* ---------- Cart ---------- */
.ugs-pdp__cart { display: flex; flex-direction: column; gap: 20px; }

.ugs-pdp__add {
  width: 100%;
  min-height: 58px;
  padding: 16px;
  background: var(--ugs-pdp-espresso);
  color: var(--ugs-pdp-white);
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  transition: opacity 0.24s var(--ugs-pdp-ease);
  font-family: var(--ugs-pdp-ff-add, inherit);
}
.ugs-pdp__add:hover { opacity: 0.88; }
.ugs-pdp__add:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 2px; }
.ugs-pdp__add[disabled] { opacity: 0.45; cursor: not-allowed; }

.ugs-pdp__pay { display: flex; gap: 11px; flex-wrap: wrap; }

.ugs-pdp__pay-box {
  flex: 1 1 260px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--ugs-pdp-white);
  border: 1px solid var(--ugs-pdp-light);
}
.ugs-pdp__pay-box img { height: 28px; width: auto; flex: 0 0 auto; }

/* Asli logo images na hon to text badges — height wahi 28px taake strip ki
   line-up na tootay. */
.ugs-pdp__pay-badge {
  flex: 0 0 auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 6px;
  font-family: var(--ugs-pdp-ff-paybadge, var(--ugs-pdp-sans));
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.ugs-pdp__pay-text {
  font-family: var(--ugs-pdp-ff-paytext, var(--ugs-pdp-inter));
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ugs-pdp-gray-700);
}

/* ---------- Promise ---------- */
.ugs-pdp__promise { display: flex; flex-direction: column; gap: 24px; }

.ugs-pdp__promise-title {
  font-family: var(--ugs-pdp-ff-promisetitle, var(--ugs-pdp-serif));
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  text-transform: capitalize;
  color: var(--ugs-pdp-ink);
}

.ugs-pdp__promise-list { display: flex; flex-direction: column; gap: 16px; }

.ugs-pdp__promise-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-promiseitem, inherit);
}
.ugs-pdp__promise-item svg {
  flex: 0 0 24px; width: 24px; height: 24px;
  fill: none; stroke: var(--ugs-pdp-black); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Section header with arrows ---------- */
.ugs-pdp__sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--ugs-pdp-arrow);
}

.ugs-pdp__sec-title {
  color: var(--ugs-pdp-sec-title);
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-sectitle, inherit);
}

.ugs-pdp__arrows { display: flex; gap: 8px; }

.ugs-pdp__arrow {
  width: var(--ugs-pdp-arrow);
  height: var(--ugs-pdp-arrow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ugs-pdp-arrow-bg);
  border: 1px solid var(--ugs-pdp-arrow-border);
  border-radius: var(--ugs-pdp-arrow-radius);
  transition: background-color 0.24s var(--ugs-pdp-ease), color 0.24s var(--ugs-pdp-ease),
              border-color 0.24s var(--ugs-pdp-ease), opacity 0.24s var(--ugs-pdp-ease);
  color: var(--ugs-pdp-arrow-fg);
}
/* Kuch sites par inline SVG optimisation plugins ya theme filters se ghayab ho
   jati hai — us soorat me arrow sirf ek khali box reh jata. Icon aur text
   modes us se bachne ke liye hain. */
.ugs-pdp__arrow i,
.ugs-pdp__arrow .ugs-pdp__arrow-text {
  font-size: var(--ugs-pdp-arrow-glyph);
  line-height: 1;
  color: currentColor;
  font-style: normal;
  display: block;
}

.ugs-pdp__arrow svg { width: var(--ugs-pdp-arrow-glyph); height: var(--ugs-pdp-arrow-glyph);
  fill: none; stroke: currentColor; stroke-width: var(--ugs-pdp-arrow-stroke);
  stroke-linecap: round; stroke-linejoin: round; }
.ugs-pdp__arrow:hover { background: var(--ugs-pdp-arrow-hover-bg);
  border-color: var(--ugs-pdp-arrow-hover-bg); color: var(--ugs-pdp-arrow-hover-fg); }
.ugs-pdp__arrow:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 2px; }
.ugs-pdp__arrow[disabled] { opacity: var(--ugs-pdp-arrow-disabled); cursor: default; }
.ugs-pdp__arrow[disabled]:hover { background: var(--ugs-pdp-arrow-bg);
  border-color: var(--ugs-pdp-arrow-border); color: var(--ugs-pdp-arrow-fg); }

/* ---------- Reviews ---------- */
.ugs-pdp__reviews { display: flex; flex-direction: column; gap: 12px; }

.ugs-pdp__rail {
  display: flex;
  gap: var(--ugs-pdp-rev-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-block: -3px;
  padding-block: 3px;
}
.ugs-pdp__rail::-webkit-scrollbar { display: none; }
.ugs-pdp__rail:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: -2px; }

.ugs-pdp__review {
  flex: 0 0 calc(
    (100% - (var(--ugs-pdp-rev-per-view) - 1) * var(--ugs-pdp-rev-gap)) / var(--ugs-pdp-rev-per-view)
  );
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--ugs-pdp-rev-pad);
  border-radius: var(--ugs-pdp-radius);
  background: var(--ugs-pdp-review-bg);
}

.ugs-pdp__review-stars { display: flex; width: max-content; gap: 2px; }
.ugs-pdp__review-stars svg { width: 12px; height: 12px; fill: var(--ugs-pdp-sand); }

.ugs-pdp__review-text {
  color: var(--ugs-pdp-review-text);
  font-size: 13px;
  line-height: 22px;
  color: var(--ugs-pdp-black);
  opacity: 0.8;
  flex: 1 1 auto;
  font-family: var(--ugs-pdp-ff-reviewtext, inherit);
}

.ugs-pdp__reviewer { display: flex; flex-direction: column; gap: 2px; }
.ugs-pdp__reviewer-name { font-weight: 600; font-size: 13px; line-height: 1; color: var(--ugs-pdp-reviewer-name);
  font-family: var(--ugs-pdp-ff-reviewername, inherit);
}
.ugs-pdp__reviewer-loc { font-size: 12px; line-height: 1; color: var(--ugs-pdp-reviewer-loc);
  font-family: var(--ugs-pdp-ff-reviewerloc, inherit);
}

/* ---------- Accordions ---------- */
.ugs-pdp__accordions { display: flex; flex-direction: column; }
.ugs-pdp__accordions > .ugs-pdp__rule { margin-bottom: 0; }

.ugs-pdp__acc { border-bottom: 1px solid var(--ugs-pdp-light); }

.ugs-pdp__acc-btn {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  text-align: left;
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-accbtn, inherit);
}
.ugs-pdp__acc-btn:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: -2px; }

.ugs-pdp__acc-btn svg {
  flex: 0 0 16px; width: 16px; height: 16px;
  fill: none; stroke: var(--ugs-pdp-black); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.6;
  transition: transform 0.28s var(--ugs-pdp-ease);
}
.ugs-pdp__acc-btn[aria-expanded="true"] svg { transform: rotate(90deg); }

.ugs-pdp__acc-panel { padding: 0 0 18px; }
.ugs-pdp__acc-panel[hidden] { display: none; }
.ugs-pdp__acc-panel p {
  font-size: var(--ugs-pdp-body);
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-accp, inherit);
}
.ugs-pdp__acc-panel p + p { margin-top: 12px; }
.ugs-pdp__acc-panel p + dl, .ugs-pdp__acc-panel dl + p { margin-top: 12px; }
.ugs-pdp__acc-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.ugs-pdp__acc-panel dt { font-weight: 600; font-size: var(--ugs-pdp-body); line-height: 26px;
  font-family: var(--ugs-pdp-ff-accdt, inherit);
}
.ugs-pdp__acc-panel dd { font-size: var(--ugs-pdp-body); line-height: 26px; letter-spacing: -0.02em;
  font-family: var(--ugs-pdp-ff-accdd, inherit);
}

/* ---------- You may also like ---------- */
.ugs-pdp__related { display: flex; flex-direction: column; gap: 12px; }

.ugs-pdp__related-rail {
  display: flex;
  gap: var(--ugs-pdp-rel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-block: -3px;
  padding-block: 3px;
}
.ugs-pdp__related-rail::-webkit-scrollbar { display: none; }
.ugs-pdp__related-rail:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: -2px; }

.ugs-pdp-mini {
  flex: 0 0 var(--ugs-pdp-mini-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ugs-pdp-mini__media {
  position: relative;
  aspect-ratio: var(--ugs-pdp-mini-ratio);
  background: var(--ugs-pdp-media-bg);
  overflow: hidden;
  padding: var(--ugs-pdp-mini-pad);
}
.ugs-pdp-mini__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--ugs-pdp-mini-fit);
  /* Bahut si product photos ke andar hi safed hashiya hota hai jise CSS nahi
     hata sakti — zoom us me andar chala jata hai. */
  transform: scale(var(--ugs-pdp-mini-zoom));
  transition: opacity 0.4s var(--ugs-pdp-ease), transform 0.45s var(--ugs-pdp-ease);
}

/* Mock me hover image 372x447 thi jise -149/-111 par rakha gaya tha. Wo naap
   sirf usi ek tasveer ke liye theek thi — asli WooCommerce gallery images par
   wo 2.5x blow-up aur random crop deti hai. Yahan seedha cross-fade hai, aur
   zoom ek control se aata hai. */
.ugs-pdp-mini__hover {
  position: absolute;
  inset: var(--ugs-pdp-mini-pad);
  width: auto;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.ugs-pdp-mini:hover .ugs-pdp-mini__hover,
.ugs-pdp-mini:focus-within .ugs-pdp-mini__hover {
  opacity: 1;
  transform: scale(calc(var(--ugs-pdp-mini-zoom) * var(--ugs-pdp-mini-hover-zoom)));
}

/* Jis card par doosri image na ho us par cross-fade band — warna card khali
   ho jata hai. */
.ugs-pdp-mini--single:hover .ugs-pdp-mini__main,
.ugs-pdp-mini--single:focus-within .ugs-pdp-mini__main { opacity: 1; }
.ugs-pdp-mini:hover .ugs-pdp-mini__main,
.ugs-pdp-mini:focus-within .ugs-pdp-mini__main { opacity: 0; }

.ugs-pdp-mini__info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
}
.ugs-pdp-mini__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.ugs-pdp-mini__name {
  font-family: var(--ugs-pdp-ff-mininame, var(--ugs-pdp-serif));
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  text-transform: capitalize;
  color: var(--ugs-pdp-black);
  /* Lamba naam do lines le kar price ko neeche dhakel deta hai aur saari cards
     ki height alag ho jati hai. Clamp se row aligned rehti hai. */
  display: -webkit-box;
  -webkit-line-clamp: var(--ugs-pdp-mini-name-lines);
  line-clamp: var(--ugs-pdp-mini-name-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ugs-pdp-mini__price { font-size: 12px; line-height: 1; color: var(--ugs-pdp-black);
  font-family: var(--ugs-pdp-ff-miniprice, inherit);
}

.ugs-pdp-mini__bag {
  flex: 0 0 var(--ugs-pdp-mini-bag);
  width: var(--ugs-pdp-mini-bag);
  height: var(--ugs-pdp-mini-bag);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  color: var(--ugs-pdp-espresso);
  transition: background-color 0.24s var(--ugs-pdp-ease), color 0.24s var(--ugs-pdp-ease);
}
.ugs-pdp-mini__bag svg { width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ugs-pdp-mini__bag:hover, .ugs-pdp-mini__bag:focus-visible {
  background: var(--ugs-pdp-espresso); color: var(--ugs-pdp-white); }
.ugs-pdp-mini__bag:focus-visible { outline: 2px solid var(--ugs-pdp-black); outline-offset: 2px; }

/* ---------- live region ---------- */
.ugs-pdp__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Narrow desktop — keep the split, shrink the fixed control sizes. */
@media (max-width: 1180px) {
  .ugs-pdp { --ugs-pdp-stack-gap: 20px; }

}

/* Below this the two-up split stops working: the gallery gets too small to
   judge a piece of jewellery by and the detail column too narrow for the size
   and payment rows. Stack, and drop the inner scroll — a scroll region inside
   a scrolling page is a trap on touch. */
@media (max-width: 940px) {
  .ugs-pdp__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .ugs-pdp__scroller {
    position: static;
    overflow: visible;
    height: auto;
    padding-right: 0;
  }

  .ugs-pdp__stage { aspect-ratio: 4 / 5; }
  .ugs-pdp { --ugs-pdp-thumb-gap: 12px; }
}

@media (max-width: 700px) {
  .ugs-pdp {
    --ugs-pdp-stack-gap: 20px;
    --ugs-pdp-swatch: 52px;
    --ugs-pdp-size-box: 52px;
    --ugs-pdp-title: clamp(24px, 6.6vw, 28px);
  }

  .ugs-pdp__stage { aspect-ratio: 1 / 1; }

  /* one review per view, and let the rail bleed to the section edge so the
     next card peeks instead of being cut dead at the padding */
  .ugs-pdp { --ugs-pdp-rev-per-view: 1; }
  .ugs-pdp__review { flex: 0 0 86%; }

  .ugs-pdp__pay { gap: 8px; }
  .ugs-pdp__pay-box { flex: 1 1 100%; }

  .ugs-pdp__size-row { align-items: flex-start; flex-direction: column; gap: 12px; }

  .ugs-pdp-mini { flex: 0 0 42%; }
  .ugs-pdp-mini__name { font-size: 15px; line-height: 26px; }
  .ugs-pdp { --ugs-pdp-mini-bag: 28px; }
  .ugs-pdp-mini__bag { padding: 8px; }
}

@media (max-width: 380px) {
  .ugs-pdp { --ugs-pdp-swatch: 48px; --ugs-pdp-size-box: 48px; }
  .ugs-pdp { --ugs-pdp-thumb-gap: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ugs-pdp * { transition-duration: 0.01ms !important; }
}

/* ============================================================================
   STICKY GALLERY MODE

   Default. Gallery column page ke saath chipki rehti hai jab tak daayen wala
   content chalta hai; row khatam hote hi sticky chhoot jati hai aur gallery
   agle section ke saath upar chali jati hai — yani neeche khali jagah nahi
   rehti.

   Is mode me detail column ka andar wala scroll band hota hai: page khud
   scroll karta hai. Scroll ke andar scroll product page par confusing hai aur
   touch par phans jata hai.

   Zaroori: sticky tab kaam nahi karti jab koi bhi parent par overflow
   hidden/auto/scroll ho. Elementor container par "Overflow: Hidden" laga ho to
   usay Default kar dein.
   ========================================================================== */

.ugs-pdp--sticky .ugs-pdp__inner { align-items: start; }

.ugs-pdp--sticky .ugs-pdp__gallery {
  position: sticky;
  top: var(--ugs-pdp-sticky-top);
  align-self: start;
}

.ugs-pdp--sticky .ugs-pdp__detail {
  position: static;
  min-height: 0;
}

.ugs-pdp--sticky .ugs-pdp__scroller {
  position: static;
  overflow: visible;
  height: auto;
  padding-right: 0;
}

/* Stack ho jane par sticky ka koi matlab nahi — gallery upar, content neeche. */
@media (max-width: 940px) {
  .ugs-pdp--sticky .ugs-pdp__gallery { position: static; top: auto; }
}

/* ============================================================================
   THEME COLOUR GUARD

   Elementor ka Global Kit `.elementor-kit-N button { background: accent }`
   jaisi rules deta hai jinki specificity single-class rules se zyada hai.
   Har guarded property token se aati hai aur !important lagti hai — Elementor
   ke apne style controls token badalte hain, guard sirf theme ko rokta hai.
   ========================================================================== */

.ugs-pdp button {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  color: inherit !important;
}
.ugs-pdp a { color: inherit !important; }

.ugs-pdp .ugs-pdp__badge {
  background-color: var(--ugs-pdp-sand) !important;
  color: var(--ugs-pdp-ink) !important;
}

.ugs-pdp .ugs-pdp__thumb { background-color: var(--ugs-pdp-media-bg) !important; }

.ugs-pdp .ugs-pdp__swatch {
  background-color: var(--ugs-pdp-white) !important;
  border: 1px solid transparent !important;
}
.ugs-pdp .ugs-pdp__swatch[aria-checked="true"] { border-color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__swatch--text { border-color: var(--ugs-pdp-light) !important; color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__swatch--text[aria-checked="true"] { border-color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__swatch:hover { border-color: var(--ugs-pdp-sand) !important; }

.ugs-pdp .ugs-pdp__size {
  background-color: var(--ugs-pdp-white) !important;
  border: 1px solid var(--ugs-pdp-light) !important;
  border-radius: var(--ugs-pdp-radius) !important;
  color: var(--ugs-pdp-black) !important;
}
.ugs-pdp .ugs-pdp__size[aria-checked="true"] {
  background-color: var(--ugs-pdp-espresso) !important;
  border-color: var(--ugs-pdp-espresso) !important;
  color: var(--ugs-pdp-white) !important;
}

.ugs-pdp .ugs-pdp__size-guide { color: var(--ugs-pdp-black) !important; text-decoration: underline !important; }

.ugs-pdp .ugs-pdp__add {
  background-color: var(--ugs-pdp-espresso) !important;
  color: var(--ugs-pdp-white) !important;
}
.ugs-pdp .ugs-pdp__stock--out {
  background-color: var(--ugs-pdp-stock-out-bg, #f6e7e4) !important;
  color: var(--ugs-pdp-stock-out-fg, #8c2f1d) !important;
}
.ugs-pdp .ugs-pdp__stock--in {
  background-color: var(--ugs-pdp-stock-in-bg, #e6f2ea) !important;
  color: var(--ugs-pdp-stock-in-fg, #1f6d3a) !important;
}
.ugs-pdp .ugs-pdp__stock--backorder {
  background-color: var(--ugs-pdp-stock-back-bg, #fbf0dd) !important;
  color: var(--ugs-pdp-stock-back-fg, #8a5a10) !important;
}

.ugs-pdp .ugs-pdp__arrow {
  background-color: var(--ugs-pdp-arrow-bg) !important;
  border: 1px solid var(--ugs-pdp-arrow-border) !important;
  border-radius: var(--ugs-pdp-arrow-radius) !important;
  color: var(--ugs-pdp-arrow-fg) !important;
}
.ugs-pdp .ugs-pdp__arrow:hover {
  background-color: var(--ugs-pdp-arrow-hover-bg) !important;
  border-color: var(--ugs-pdp-arrow-hover-bg) !important;
  color: var(--ugs-pdp-arrow-hover-fg) !important;
}
.ugs-pdp .ugs-pdp__arrow[disabled]:hover {
  background-color: var(--ugs-pdp-arrow-bg) !important;
  border-color: var(--ugs-pdp-arrow-border) !important;
  color: var(--ugs-pdp-arrow-fg) !important;
}

/* Chevron ke har hisse ko force karo. Kuch themes svg par fill/stroke/display
   set kar dete hain aur chevron ghayab ho jata hai — sirf khali box reh jata. */
.ugs-pdp .ugs-pdp__arrow svg,
.ugs-pdp .ugs-pdp__arrow svg path {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: var(--ugs-pdp-arrow-stroke) !important;
}

.ugs-pdp .ugs-pdp__arrow i,
.ugs-pdp .ugs-pdp__arrow .ugs-pdp__arrow-text {
  color: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.ugs-pdp .ugs-pdp__review { background-color: var(--ugs-pdp-review-bg) !important; border-radius: var(--ugs-pdp-radius) !important; }

/* In par pehle koi rang set hi nahi tha — sirf inherit karte thay, is liye
   theme ke link/text colours inhe neela-narangi kar dete the. */
.ugs-pdp .ugs-pdp__sec-title { color: var(--ugs-pdp-sec-title) !important; }
.ugs-pdp .ugs-pdp__review-text { color: var(--ugs-pdp-review-text) !important; }
.ugs-pdp .ugs-pdp__reviewer-name { color: var(--ugs-pdp-reviewer-name) !important; }
.ugs-pdp .ugs-pdp__reviewer-loc { color: var(--ugs-pdp-reviewer-loc) !important; }
.ugs-pdp .ugs-pdp__review-count { color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__review-stars svg { fill: var(--ugs-pdp-sand) !important; }
.ugs-pdp .ugs-pdp__review-stars svg.is-on { fill: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__stars svg { fill: var(--ugs-pdp-star-off, var(--ugs-pdp-sand)) !important; }
.ugs-pdp .ugs-pdp__stars svg.is-on { fill: var(--ugs-pdp-star-on, #2A0C00) !important; }
.ugs-pdp .ugs-pdp__stars svg { width: var(--ugs-pdp-star-size, 16px); height: var(--ugs-pdp-star-size, 16px); }

.ugs-pdp .ugs-pdp__acc-btn { color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp__acc-btn svg,
.ugs-pdp .ugs-pdp__lead-time svg,
.ugs-pdp .ugs-pdp__promise-item svg { fill: none !important; stroke: currentColor !important; }
.ugs-pdp .ugs-pdp__acc-btn svg,
.ugs-pdp .ugs-pdp__promise-item svg { color: var(--ugs-pdp-black) !important; }

.ugs-pdp .ugs-pdp-mini__name,
.ugs-pdp .ugs-pdp-mini__price { color: var(--ugs-pdp-black) !important; }
.ugs-pdp .ugs-pdp-mini__bag {
  background-color: transparent !important;
  border-radius: var(--ugs-pdp-radius) !important;
  color: var(--ugs-pdp-espresso) !important;
}
.ugs-pdp .ugs-pdp-mini__bag:hover,
.ugs-pdp .ugs-pdp-mini__bag:focus-visible {
  background-color: var(--ugs-pdp-espresso) !important;
  color: var(--ugs-pdp-white) !important;
}
.ugs-pdp .ugs-pdp-mini__bag svg,
.ugs-pdp .ugs-pdp-mini__bag svg path {
  fill: none !important;
  stroke: currentColor !important;
  visibility: visible !important;
}

/* AJAX add-to-bag states — koi @keyframes nahi */
.ugs-pdp .ugs-pdp-mini__bag.is-loading,
.ugs-pdp .ugs-pdp__add.is-loading { opacity: .45; pointer-events: none; }
.ugs-pdp .ugs-pdp-mini__check { display: none; }
.ugs-pdp .ugs-pdp-mini__bag.is-added .ugs-pdp-mini__check { display: block; }
.ugs-pdp .ugs-pdp-mini__bag.is-added .ugs-pdp-mini__bagicon { display: none; }
.ugs-pdp .ugs-pdp__add.is-added { background-color: var(--ugs-pdp-added, #1f6d3a) !important; }

/* Elementor editor me absolute scroller ki row height nahi banti kyunki
   preview iframe alag tarah measure karta hai — wahan flow me rakho. */
.elementor-editor-active .ugs-pdp__scroller,
.elementor-editor-preview .ugs-pdp__scroller {
  position: static;
  overflow: visible;
  height: auto;
}

/* Stock / unavailable line */
/* Button ke neeche stock ka tag. */
.ugs-pdp__stock {
  align-self: flex-start;
  padding: var(--ugs-pdp-stock-pad, 6px 12px);
  border-radius: var(--ugs-pdp-stock-radius, 4px);
  font-family: var(--ugs-pdp-ff-stock, var(--ugs-pdp-sans));
  font-size: var(--ugs-pdp-stock-size, 13px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.ugs-pdp__stock[hidden] { display: none; }

.ugs-pdp .ugs-pdp__cart-msg {
  flex: 1 0 100%;
  width: 100%;
  margin: var(--ugs-pdp-cart-msg-gap, 8px) 0 0;
  font-family: var(--ugs-pdp-ff-stock, var(--ugs-pdp-sans));
  font-size: var(--ugs-pdp-cart-msg-size, 13px);
  line-height: 1.4;
  color: var(--ugs-pdp-cart-msg, #b3261e);
}
.ugs-pdp .ugs-pdp__cart-msg[hidden] { display: none; }

.ugs-pdp__stock--out {
  background: var(--ugs-pdp-stock-out-bg, #f6e7e4);
  color: var(--ugs-pdp-stock-out-fg, #8c2f1d);
}
.ugs-pdp__stock--in {
  background: var(--ugs-pdp-stock-in-bg, #e6f2ea);
  color: var(--ugs-pdp-stock-in-fg, #1f6d3a);
}
.ugs-pdp__stock--backorder {
  background: var(--ugs-pdp-stock-back-bg, #fbf0dd);
  color: var(--ugs-pdp-stock-back-fg, #8a5a10);
}

/* Sold out button — disable ki halat saaf nazar aani chahiye. */
.ugs-pdp__add[disabled] {
  cursor: not-allowed;
  opacity: var(--ugs-pdp-add-disabled, 0.45);
}

.ugs-pdp__notice {
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed rgba(42, 12, 0, .3);
  font-size: 13px;
  line-height: 20px;
  color: var(--ugs-pdp-espresso);
  font-family: var(--ugs-pdp-ff-notice, inherit);
}

/* Elementor editor me hi dikhne wala note — front par kabhi nahi. */
.ugs-pdp__edit-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px dashed rgba(42, 12, 0, .35);
  background: #fff;
  font-family: var(--ugs-pdp-ff-editnote, var(--ugs-pdp-sans));
  font-size: 12px;
  line-height: 18px;
  color: var(--ugs-pdp-espresso);
}
.ugs-pdp__edit-note strong { font-weight: 600; }

.ugs-pdp {
  --ugs-x-sans: "Jost", "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --ugs-x-serif: "Instrument Serif", "Times New Roman", Times, serif;

  --ugs-x-sel-color: #000000;
  --ugs-x-sel-bg: #ffffff;
  --ugs-x-sel-border: #cccccc;
  --ugs-x-sel-caret: #000000;
  --ugs-x-sel-h: 43px;
  --ugs-x-sel-pad: 17px;
  --ugs-x-sel-radius: 0px;
  --ugs-x-sel-list-bg: #ffffff;
  --ugs-x-sel-hover: #f5f5f5;
  --ugs-x-sel-off: #b5b5b5;
  --ugs-x-sel-max: 264px;
  --ugs-x-guide: #000000;
  --ugs-x-guide-line: 1.5px;
  --ugs-x-guide-gap: 22px;

  --ugs-x-note-label: #000000;
  --ugs-x-note-text: #000000;
  --ugs-x-note-ph: #777777;
  --ugs-x-note-line: #cccccc;
  --ugs-x-note-focus: #000000;
  --ugs-x-note-error: #b3261e;
  --ugs-x-note-gap: 2px;

  --ugs-x-pop-text: #000000;
  --ugs-x-pop-hover: #4a0010;
  --ugs-x-pop-line: #808080;
  --ugs-x-pop-icon: #000000;
  --ugs-x-pop-icon-size: 12px;
  --ugs-x-pop-pad: 17px;

  --ugs-x-dr-w: 440px;
  --ugs-x-dr-bg: #ffffff;
  --ugs-x-dr-overlay: rgba(0, 0, 0, 0.1);
  --ugs-x-dr-pad: 25px;
  --ugs-x-dr-title: #4a0010;
  --ugs-x-dr-close: #000000;
  --ugs-x-dr-text: #000000;
  --ugs-x-dr-divider: #e1e1e1;

  --ugs-x-rv-title: #000000;
  --ugs-x-rv-icon: #000000;
  --ugs-x-rv-head-gap: 19px;
  --ugs-x-rv-card-bg: #f8f6f3;
  --ugs-x-rv-card-w: 360px;
  --ugs-x-rv-card-pad: 20px;
  --ugs-x-rv-gap: 8px;
  --ugs-x-rv-inner-gap: 20px;
  --ugs-x-rv-star: #000000;
  --ugs-x-rv-star-size: 16px;
  --ugs-x-rv-text: #000000;
  --ugs-x-rv-more: rgba(0, 0, 0, 0.5);
  --ugs-x-rv-meta: rgba(0, 0, 0, 0.5);
  --ugs-x-rv-dot: #000000;
  --ugs-x-rv-dot-size: 4px;
  --ugs-x-rv-arrow: #000000;
  --ugs-x-rv-nav-gap: 32px;

  --ugs-x-ry-title: #1b1b1b;
  --ugs-x-ry-arrow: #090909;
  --ugs-x-ry-arrow-off: #cecece;
  --ugs-x-ry-head-gap: 14px;
  --ugs-x-ry-gap: 8px;
  --ugs-x-ry-media-bg: #f7f7f7;
  --ugs-x-ry-ratio: 1 / 1;
  --ugs-x-ry-badge: #000000;
  --ugs-x-ry-name: #211818;
  --ugs-x-ry-price: #000000;
  --ugs-x-ry-desc: #302930;
  --ugs-x-ry-quick: #a7a7a7;
  --ugs-x-ry-quick-h: #000000;
  --ugs-ry-per-view: 2.9;
}

.ugs-pdp__size-row--dd { display: block; }
.ugs-pdp__group--dd { width: 100%; }

.ugs-pdp__dd { position: relative; width: 100%; }

.ugs-pdp .ugs-pdp__dd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--ugs-x-sel-h);
  margin: 0;
  padding: 0 15px 0 var(--ugs-x-sel-pad) !important;
  background: var(--ugs-x-sel-bg) !important;
  border: 1px solid var(--ugs-x-sel-border) !important;
  border-radius: var(--ugs-x-sel-radius) !important;
  color: var(--ugs-x-sel-color) !important;
  cursor: pointer;
  text-align: left;
}

.ugs-pdp .ugs-pdp__dd-toggle:focus { outline: none; }
.ugs-pdp .ugs-pdp__dd-toggle:focus-visible { outline: 1px solid var(--ugs-x-sel-color); outline-offset: 2px; }

.ugs-pdp__dd-text {
  font-family: var(--ugs-pdp-ff-ddtext, var(--ugs-x-sans));
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

.ugs-pdp__dd-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ugs-x-sel-caret);
  transition: transform 0.3s var(--ugs-pdp-ease);
}

.ugs-pdp__dd.is-open .ugs-pdp__dd-caret { transform: rotate(180deg); }

.ugs-pdp__dd-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  margin-top: -1px;
  padding: 6px 0;
  max-height: var(--ugs-x-sel-max);
  overflow-y: auto;
  background: var(--ugs-x-sel-list-bg);
  border: 1px solid var(--ugs-x-sel-border);
  border-radius: 0 0 var(--ugs-x-sel-radius) var(--ugs-x-sel-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.ugs-pdp__dd.is-open .ugs-pdp__dd-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.ugs-pdp .ugs-pdp__dd-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px var(--ugs-x-sel-pad) !important;
  color: var(--ugs-x-sel-color) !important;
  font-family: var(--ugs-pdp-ff-ddopt, var(--ugs-x-sans));
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ugs-pdp .ugs-pdp__dd-opt:hover,
.ugs-pdp .ugs-pdp__dd-opt:focus-visible { background-color: var(--ugs-x-sel-hover) !important; outline: none; }

.ugs-pdp .ugs-pdp__dd-opt[aria-checked="true"] { font-weight: 600; }

.ugs-pdp .ugs-pdp__dd-opt:disabled,
.ugs-pdp .ugs-pdp__dd-opt[aria-disabled="true"] {
  color: var(--ugs-x-sel-off) !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

.ugs-pdp .ugs-pdp__guide-btn {
  display: inline-block;
  margin: var(--ugs-x-guide-gap) 0 0;
  padding: 0 0 3px !important;
  border-bottom: var(--ugs-x-guide-line) solid var(--ugs-x-guide) !important;
  color: var(--ugs-x-guide) !important;
  cursor: pointer;
}

.ugs-pdp__guide-text {
  display: block;
  font-family: var(--ugs-pdp-ff-guidetext, var(--ugs-x-sans));
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ugs-pdp .ugs-pdp__guide-btn:focus { outline: none; }
.ugs-pdp .ugs-pdp__guide-btn:focus-visible { outline: 1px solid var(--ugs-x-guide); outline-offset: 3px; }

.ugs-pdp__note {
  display: flex;
  flex-direction: column;
  gap: var(--ugs-x-note-gap);
}

.ugs-pdp .ugs-pdp__note-label {
  display: block;
  margin: 0;
  color: var(--ugs-x-note-label) !important;
}

.ugs-pdp__note-label {
  font-family: var(--ugs-pdp-ff-notelabel, var(--ugs-x-sans));
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

.ugs-pdp .ugs-pdp__note-input {
  display: block;
  width: 100%;
  min-height: 22px;
  margin: 0;
  padding: 1px 0 3px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ugs-x-note-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ugs-x-note-text) !important;
  resize: none;
  overflow: hidden;
  outline: none;
  transition: border-color 0.2s ease;
}

.ugs-pdp__note-input {
  font-family: var(--ugs-pdp-ff-noteinput, var(--ugs-x-sans));
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

.ugs-pdp .ugs-pdp__note-input::placeholder { color: var(--ugs-x-note-ph) !important; opacity: 1; }
.ugs-pdp .ugs-pdp__note-input:focus { border-bottom-color: var(--ugs-x-note-focus) !important; }
.ugs-pdp .ugs-pdp__note.is-invalid .ugs-pdp__note-input { border-bottom-color: var(--ugs-x-note-error) !important; }

.ugs-pdp__note-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ugs-pdp-ff-notefoot, var(--ugs-x-sans));
  font-size: 12px;
  line-height: 16px;
}

.ugs-pdp__note-foot:empty { display: none; }

.ugs-pdp .ugs-pdp__note-error { margin: 4px 0 0; color: var(--ugs-x-note-error) !important; }
.ugs-pdp .ugs-pdp__note-error[hidden] { display: none; }
.ugs-pdp__note-count { margin: 4px 0 0 auto; color: var(--ugs-x-note-ph); }

.ugs-pdp__pops { display: flex; flex-direction: column; }

.ugs-pdp .ugs-pdp__pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: var(--ugs-x-pop-pad) 0 var(--ugs-x-pop-pad) 1px !important;
  border-top: 1px solid var(--ugs-x-pop-line) !important;
  color: var(--ugs-x-pop-text) !important;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ugs-pdp .ugs-pdp__pop-row:last-of-type { border-bottom: 1px solid var(--ugs-x-pop-line) !important; }
.ugs-pdp .ugs-pdp__pop-row:hover { color: var(--ugs-x-pop-hover) !important; }
.ugs-pdp .ugs-pdp__pop-row:focus { outline: none; }
.ugs-pdp .ugs-pdp__pop-row:focus-visible { outline: 1px solid var(--ugs-x-pop-text); outline-offset: -3px; }

.ugs-pdp__pop-label {
  font-family: var(--ugs-pdp-ff-poplabel, var(--ugs-x-sans));
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

.ugs-pdp__pop-plus {
  position: relative;
  flex: 0 0 auto;
  width: var(--ugs-x-pop-icon-size);
  height: var(--ugs-x-pop-icon-size);
  color: var(--ugs-x-pop-icon);
}

.ugs-pdp__pop-plus::before,
.ugs-pdp__pop-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.ugs-pdp__pop-plus::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.ugs-pdp__pop-plus::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

.ugs-pdp__drawer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
}

.ugs-pdp__drawer.is-open { visibility: visible; pointer-events: auto; }

.ugs-pdp__drawer-overlay {
  position: absolute;
  inset: 0;
  background: var(--ugs-x-dr-overlay);
  opacity: 0;
}

.ugs-pdp__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--ugs-x-dr-w), 100vw);
  background: var(--ugs-x-dr-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  outline: none;
  box-sizing: border-box;
}

.ugs-pdp__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px calc(var(--ugs-x-dr-pad) - 1px) 24px var(--ugs-x-dr-pad);
}

.ugs-pdp .ugs-pdp__drawer-title {
  margin: 0;
  color: var(--ugs-x-dr-title) !important;
}

.ugs-pdp__drawer-title {
  font-family: var(--ugs-pdp-ff-drawertitle, var(--ugs-x-serif));
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
}

.ugs-pdp .ugs-pdp__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 !important;
  color: var(--ugs-x-dr-close) !important;
  cursor: pointer;
}

.ugs-pdp__drawer-close svg { display: block; width: 20px; height: 20px; }

.ugs-pdp .ugs-pdp__drawer-body {
  padding: 18px var(--ugs-x-dr-pad);
  border-bottom: 1px solid var(--ugs-x-dr-divider);
  color: var(--ugs-x-dr-text) !important;
}

.ugs-pdp__drawer-body {
  font-family: var(--ugs-pdp-ff-drawerbody, var(--ugs-x-sans));
  font-size: 15px;
  line-height: 22.5px;
}

.ugs-pdp .ugs-pdp__drawer-body :where(p, ul, ol, dl, table) { margin: 0; color: inherit; }
.ugs-pdp .ugs-pdp__drawer-body :where(p, ul, ol, dl, table) + :where(p, ul, ol, dl, table) { margin-top: 15px; }
.ugs-pdp .ugs-pdp__drawer-body :where(ul, ol) { padding-left: 1.2em; }
.ugs-pdp .ugs-pdp__drawer-body a { text-decoration: underline; }
.ugs-pdp .ugs-pdp__drawer-body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
.ugs-pdp .ugs-pdp__drawer-body dt { font-weight: 500; }
.ugs-pdp .ugs-pdp__drawer-body dd { margin: 0; }

.ugs-pdp .ugs-pdp__rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  color: var(--ugs-x-rv-title) !important;
  text-align: left;
  cursor: pointer;
}

.ugs-pdp .ugs-pdp__rv-head:focus { outline: none; }
.ugs-pdp .ugs-pdp__rv-head:focus-visible { outline: 1px solid var(--ugs-x-rv-title); outline-offset: 3px; }

.ugs-pdp__rv-title {
  font-family: var(--ugs-pdp-ff-rvtitle, var(--ugs-x-sans));
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.ugs-pdp__rv-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--ugs-x-rv-icon);
}

.ugs-pdp__rv-icon svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.2s ease;
}

.ugs-pdp__rv-minus { opacity: 0; }
.ugs-pdp__rv.is-open .ugs-pdp__rv-minus { opacity: 1; }
.ugs-pdp__rv.is-open .ugs-pdp__rv-plus { opacity: 0; }

.ugs-pdp__rv-panel { overflow: hidden; }
.ugs-pdp__rv:not(.is-open) .ugs-pdp__rv-panel { height: 0; visibility: hidden; }
.ugs-pdp__rv.is-animating .ugs-pdp__rv-panel { visibility: visible; }

.ugs-pdp__rv-inner { padding-top: var(--ugs-x-rv-head-gap); }

.ugs-pdp__xs {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.ugs-pdp__xs-track {
  display: flex;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.ugs-pdp__xs.is-dragging { cursor: grabbing; }
.ugs-pdp__xs.is-dragging a { pointer-events: none; }

.ugs-pdp__rv-track { gap: var(--ugs-x-rv-gap); }

.ugs-pdp__rv-card {
  flex: 0 0 var(--ugs-x-rv-card-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ugs-x-rv-inner-gap);
  padding: var(--ugs-x-rv-card-pad);
  background: var(--ugs-x-rv-card-bg);
  box-sizing: border-box;
}

.ugs-pdp__rv-stars { display: flex; color: var(--ugs-x-rv-star); }
.ugs-pdp__rv-star { display: inline-flex; width: var(--ugs-x-rv-star-size); height: var(--ugs-x-rv-star-size); opacity: 0.2; }
.ugs-pdp__rv-star.is-on { opacity: 1; }
.ugs-pdp__rv-star svg { width: 100%; height: 100%; display: block; }

.ugs-pdp__rv-body { flex: 1 1 auto; }

.ugs-pdp .ugs-pdp__rv-text {
  margin: 0;
  color: var(--ugs-x-rv-text) !important;
}

.ugs-pdp__rv-text {
  font-family: var(--ugs-pdp-ff-rvtext, var(--ugs-x-sans));
  font-size: 13px;
  line-height: 21px;
}

.ugs-pdp .ugs-pdp__rv-more {
  display: block;
  margin: 4px 0 0;
  padding: 0 !important;
  color: var(--ugs-x-rv-more) !important;
  text-decoration: underline !important;
  cursor: pointer;
}

.ugs-pdp__rv-more-text {
  font-family: var(--ugs-pdp-ff-rvmore, var(--ugs-x-sans));
  font-size: 13px;
  line-height: 21px;
}

.ugs-pdp .ugs-pdp__rv-meta { color: var(--ugs-x-rv-meta) !important; }

.ugs-pdp__rv-meta {
  font-family: var(--ugs-pdp-ff-rvmeta, var(--ugs-x-sans));
  font-size: 13px;
  line-height: 19.5px;
}

.ugs-pdp__rv-meta span { display: block; }

.ugs-pdp__rv-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: var(--ugs-x-rv-nav-gap) 0 16px;
}

.ugs-pdp__rv-dots { display: flex; align-items: center; min-height: 12px; }

.ugs-pdp .ugs-pdp__rv-dot {
  position: relative;
  width: var(--ugs-x-rv-dot-size);
  height: var(--ugs-x-rv-dot-size);
  margin: 0 4px;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--ugs-x-rv-dot) !important;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ugs-pdp .ugs-pdp__rv-dot:first-child { margin-left: 0; }
.ugs-pdp .ugs-pdp__rv-dot::after { content: ""; position: absolute; inset: -6px; }
.ugs-pdp .ugs-pdp__rv-dot.is-active { opacity: 1; }

.ugs-pdp__rv-arrows { display: flex; gap: 8px; }

.ugs-pdp .ugs-pdp__rv-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0 !important;
  color: var(--ugs-x-rv-arrow) !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ugs-pdp__rv-arrow svg { width: 20px; height: 20px; display: block; }
.ugs-pdp .ugs-pdp__rv-arrow:disabled { opacity: 0.25; cursor: default; }

.ugs-pdp__ry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--ugs-x-ry-head-gap);
}

.ugs-pdp .ugs-pdp__ry-title {
  margin: 0;
  color: var(--ugs-x-ry-title) !important;
}

.ugs-pdp__ry-title {
  font-family: var(--ugs-pdp-ff-rytitle, var(--ugs-x-serif));
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.ugs-pdp__ry-nav { display: flex; align-items: center; gap: 10px; }

.ugs-pdp .ugs-pdp__ry-arrow {
  display: inline-flex;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0 !important;
  color: var(--ugs-x-ry-arrow) !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ugs-pdp__ry-arrow svg { width: 22px; height: 22px; display: block; }
.ugs-pdp .ugs-pdp__ry-arrow:disabled { color: var(--ugs-x-ry-arrow-off) !important; cursor: default; }

.ugs-pdp__ry-track { gap: var(--ugs-x-ry-gap); }

.ugs-pdp__ry-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--ugs-ry-per-view) - 1) * var(--ugs-x-ry-gap)) / var(--ugs-ry-per-view));
  min-width: 0;
}

.ugs-pdp__ry-media {
  position: relative;
  aspect-ratio: var(--ugs-x-ry-ratio);
  overflow: hidden;
  background: var(--ugs-x-ry-media-bg);
}

.ugs-pdp .ugs-pdp__ry-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
  -webkit-user-drag: none;
}

.ugs-pdp .ugs-pdp__ry-img--hover { opacity: 0; }
.ugs-pdp .ugs-pdp__ry-card.has-hover:hover .ugs-pdp__ry-img--hover { opacity: 1; }

.ugs-pdp .ugs-pdp__ry-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--ugs-x-ry-badge) !important;
}

.ugs-pdp__ry-badge {
  font-family: var(--ugs-pdp-ff-rybadge, "Helvetica Neue", Arial, sans-serif);
  font-size: 9px;
  font-weight: 700;
  line-height: 9px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ugs-pdp .ugs-pdp__ry-name {
  margin: 8px 0 4px;
  color: var(--ugs-x-ry-name) !important;
}

.ugs-pdp__ry-name {
  font-family: var(--ugs-pdp-ff-ryname, var(--ugs-x-serif));
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
}

.ugs-pdp .ugs-pdp__ry-name a { color: inherit !important; text-decoration: none !important; }

.ugs-pdp .ugs-pdp__ry-price {
  margin: 0 0 3px;
  color: var(--ugs-x-ry-price) !important;
}

.ugs-pdp__ry-price {
  font-family: var(--ugs-pdp-ff-ryprice, var(--ugs-x-sans));
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: -0.03em;
}

.ugs-pdp .ugs-pdp__ry-price :where(del) { opacity: 0.5; font-weight: 400; margin-right: 4px; }
.ugs-pdp .ugs-pdp__ry-price :where(ins) { text-decoration: none; }

.ugs-pdp .ugs-pdp__ry-desc {
  margin: 0;
  color: var(--ugs-x-ry-desc) !important;
}

.ugs-pdp__ry-desc {
  font-family: var(--ugs-pdp-ff-rydesc, var(--ugs-x-sans));
  font-size: 12.5px;
  line-height: 15.6px;
}

.ugs-pdp .ugs-pdp__ry-quick {
  position: relative;
  z-index: 3;
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--ugs-x-ry-quick) !important;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity 0.25s ease, color 0.2s ease;
}

.ugs-pdp__ry-quick-text {
  font-family: var(--ugs-pdp-ff-ryquick, var(--ugs-x-sans));
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ugs-pdp .ugs-pdp__ry-card:hover .ugs-pdp__ry-quick,
.ugs-pdp .ugs-pdp__ry-quick:focus-visible { opacity: 1; }
.ugs-pdp .ugs-pdp__ry-quick:hover { color: var(--ugs-x-ry-quick-h) !important; }

.ugs-pdp__ry-overlay { position: absolute; inset: 0; z-index: 1; }

@media (hover: none) {
  .ugs-pdp .ugs-pdp__ry-quick { opacity: 1; }
}

@media (max-width: 767px) {
  .ugs-pdp__rv:not(.ugs-pdp__rv--mobile-arrows) .ugs-pdp__rv-arrows { display: none; }
}

.ugs-pdp {
  --ugs-x-sw-size: 50px;
  --ugs-x-sw-gap: 10px;
  --ugs-x-sw-pad: 5px;
  --ugs-x-sw-radius: 0px;
  --ugs-x-sw-fit: contain;
  --ugs-x-sw-bg: #f7f7f7;
  --ugs-x-sw-border: #cdcdcd;
  --ugs-x-sw-hover: #8a8a8a;
  --ugs-x-sw-active: #000000;
  --ugs-x-sw-active-w: 1.5px;
  --ugs-x-sw-label: #1d1d1d;
  --ugs-x-sw-value: #939393;
  --ugs-x-sw-label-gap: 12px;
}

.ugs-pdp__group--sw { gap: var(--ugs-x-sw-label-gap); }

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__group-label {
  gap: 5px;
  color: var(--ugs-x-sw-label) !important;
}

.ugs-pdp__group--sw .ugs-pdp__group-label {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__group-name { font-weight: 600; }
.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__group-value { color: var(--ugs-x-sw-value) !important; font-weight: 400; }

.ugs-pdp__group--sw .ugs-pdp__swatches {
  gap: var(--ugs-x-sw-gap);
  flex-wrap: wrap;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch {
  position: relative;
  width: var(--ugs-x-sw-size);
  height: var(--ugs-x-sw-size);
  padding: var(--ugs-x-sw-pad) !important;
  background-color: var(--ugs-x-sw-bg) !important;
  border: 1px solid var(--ugs-x-sw-border) !important;
  border-radius: var(--ugs-x-sw-radius) !important;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.24s var(--ugs-pdp-ease), box-shadow 0.24s var(--ugs-pdp-ease);
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch:hover { border-color: var(--ugs-x-sw-hover) !important; }

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch[aria-checked="true"] {
  border-color: var(--ugs-x-sw-active) !important;
  box-shadow: inset 0 0 0 var(--ugs-x-sw-active-w) var(--ugs-x-sw-active);
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch:focus-visible {
  outline: 2px solid var(--ugs-x-sw-active);
  outline-offset: 2px;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--ugs-x-sw-fit);
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch-chip {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch--text {
  width: auto;
  min-width: var(--ugs-x-sw-size);
  height: auto;
  min-height: var(--ugs-x-sw-size);
  padding: 8px 14px !important;
  font-size: 13px;
  color: var(--ugs-x-sw-label) !important;
}

.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch:disabled,
.ugs-pdp .ugs-pdp__group--sw .ugs-pdp__swatch[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ugs-pdp__stage { touch-action: pan-y; }

.ugs-pdp .ugs-pdp__stage-img {
  -webkit-user-select: none;
  user-select: none;
}

.ugs-pdp .ugs-pdp__stage-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: zoom-in;
}
.ugs-pdp .ugs-pdp__stage-open:focus-visible {
  outline: 2px solid var(--ugs-pdp-black);
  outline-offset: -4px;
}

.ugs-pdp .ugs-pdp__stage-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ugs-pdp-ga-size, 40px);
  height: var(--ugs-pdp-ga-size, 40px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  line-height: 0;
  transform: translateY(-50%);
  background-color: var(--ugs-pdp-ga-bg, rgba(255, 255, 255, 0.85)) !important;
  color: var(--ugs-pdp-ga-color, #2A0C00) !important;
  border: var(--ugs-pdp-ga-border-w, 0px) solid var(--ugs-pdp-ga-border, #2A0C00) !important;
  border-radius: var(--ugs-pdp-ga-radius, 50px) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ugs-pdp .ugs-pdp__stage-arrow--prev { left: var(--ugs-pdp-ga-offset, 14px); }
.ugs-pdp .ugs-pdp__stage-arrow--next { right: var(--ugs-pdp-ga-offset, 14px); }
.ugs-pdp .ugs-pdp__stage-arrow svg {
  display: block;
  width: var(--ugs-pdp-ga-icon, 18px);
  height: var(--ugs-pdp-ga-icon, 18px);
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ugs-pdp .ugs-pdp__stage-arrow:focus-visible {
  outline: 2px solid var(--ugs-pdp-black);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ugs-pdp .ugs-pdp__stage-arrow:hover {
    background-color: var(--ugs-pdp-ga-bg-hover, #2A0C00) !important;
    color: var(--ugs-pdp-ga-color-hover, #FFFFFF) !important;
  }
  .ugs-pdp .ugs-pdp__stage--hover-arrows .ugs-pdp__stage-arrow { opacity: 0; }
  .ugs-pdp .ugs-pdp__stage--hover-arrows:hover .ugs-pdp__stage-arrow,
  .ugs-pdp .ugs-pdp__stage--hover-arrows .ugs-pdp__stage-arrow:focus-visible { opacity: 1; }
}

.ugs-lb {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--ugs-pdp-lb-pad, 80px);
  background-color: var(--ugs-pdp-lb-bg, rgba(20, 12, 8, 0.92));
  opacity: 0;
  font-family: var(--ugs-pdp-sans, "Urbanist", "Helvetica Neue", Arial, sans-serif);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
  touch-action: none;
  overflow: hidden;
}
.ugs-lb[hidden] { display: none !important; }

.ugs-lb *,
.ugs-lb *::before,
.ugs-lb *::after { box-sizing: border-box; }

.ugs-lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.ugs-lb .ugs-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  box-shadow: none;
  border: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ugs-lb .ugs-lb__img.is-anim { transition: transform 0.28s ease, opacity 0.2s ease; }
.ugs-lb--zoomable .ugs-lb__img { cursor: zoom-in; }
.ugs-lb--zoomable.is-zoomed .ugs-lb__img { cursor: grab; }
.ugs-lb--zoomable.is-dragging .ugs-lb__img { cursor: grabbing; }

.ugs-lb .ugs-lb__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ugs-pdp-lb-btn, 48px);
  height: var(--ugs-pdp-lb-btn, 48px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  line-height: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--ugs-pdp-lb-btn-bg, rgba(255, 255, 255, 0.12)) !important;
  color: var(--ugs-pdp-lb-color, #FFFFFF) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ugs-lb .ugs-lb__btn[hidden] { display: none !important; }
.ugs-lb .ugs-lb__btn svg {
  display: block;
  width: var(--ugs-pdp-lb-icon, 22px);
  height: var(--ugs-pdp-lb-icon, 22px);
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ugs-lb .ugs-lb__btn:focus-visible {
  outline: 2px solid var(--ugs-pdp-lb-color, #FFFFFF);
  outline-offset: 2px;
}
@media (hover: hover) {
  .ugs-lb .ugs-lb__btn:hover { background-color: rgba(255, 255, 255, 0.24) !important; }
}

.ugs-lb .ugs-lb__close { top: 16px; right: 16px; }
.ugs-lb .ugs-lb__arrow { top: 50%; transform: translateY(-50%); }
.ugs-lb .ugs-lb__arrow--prev { left: 16px; }
.ugs-lb .ugs-lb__arrow--next { right: 16px; }
.ugs-lb .ugs-lb__zbtn { display: var(--ugs-pdp-lb-zbtn, inline-flex); top: 16px; }
.ugs-lb .ugs-lb__zoom-in { left: 16px; }
.ugs-lb .ugs-lb__zoom-out { left: calc(16px + var(--ugs-pdp-lb-btn, 48px) + 8px); }
.ugs-lb .ugs-lb__zbtn:disabled { opacity: 0.35; cursor: default; }

.ugs-lb .ugs-lb__counter {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  color: var(--ugs-pdp-lb-counter, #FFFFFF) !important;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ugs-lb .ugs-lb__counter[hidden] { display: none; }

@media (max-width: 767px) {
  .ugs-lb .ugs-lb__close { top: 12px; right: 12px; }
  .ugs-lb .ugs-lb__arrow { top: auto; bottom: 12px; transform: none; }
  .ugs-lb .ugs-lb__arrow--prev { left: 12px; }
  .ugs-lb .ugs-lb__arrow--next { right: 12px; }
  .ugs-lb .ugs-lb__zbtn { top: 12px; }
  .ugs-lb .ugs-lb__zoom-in { left: 12px; }
  .ugs-lb .ugs-lb__zoom-out { left: calc(12px + var(--ugs-pdp-lb-btn, 40px) + 8px); }
  .ugs-lb .ugs-lb__counter { bottom: 22px; }
  .ugs-lb { padding-top: calc(var(--ugs-pdp-lb-btn, 40px) + 24px); padding-bottom: calc(var(--ugs-pdp-lb-btn, 40px) + 24px); }
}

.ugs-pdp__sg {
  display: flex;
  justify-content: var(--ugs-x-sgb-align, flex-start);
  margin: var(--ugs-x-sgb-mt, 0px) 0 var(--ugs-x-sgb-mb, 0px);
  min-width: 0;
}

.ugs-pdp .ugs-pdp__sg-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 0 var(--ugs-x-sgb-line-gap, 3px) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--ugs-x-sgb-line, 1px) solid var(--ugs-x-sgb-line-color, #000000) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ugs-x-sgb-color, #000000) !important;
  text-decoration: none !important;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ugs-pdp__sg-btn-text {
  font-family: var(--ugs-pdp-ff-sgbtn, var(--ugs-x-sans));
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) {
  .ugs-pdp .ugs-pdp__sg-btn:hover {
    color: var(--ugs-x-sgb-hover, #2A0C00) !important;
    border-bottom-color: var(--ugs-x-sgb-hover, #2A0C00) !important;
  }
}

.ugs-pdp .ugs-pdp__sg-btn:focus { outline: none; }
.ugs-pdp .ugs-pdp__sg-btn:focus-visible {
  outline: 1px solid var(--ugs-x-sgb-color, #000000);
  outline-offset: 3px;
}

.ugs-pdp__rating--top { display: none; }

@media (max-width: 767px) {
  .ugs-pdp__head--rtop .ugs-pdp__rating--top {
    display: flex;
    justify-content: var(--ugs-pdp-rtop-align, flex-start);
    margin-bottom: calc(var(--ugs-pdp-rtop-gap, 6px) - 12px);
  }
  .ugs-pdp__head--rtop .ugs-pdp__rating--inline { display: none; }
  .ugs-pdp__head--rtop .ugs-pdp__price-row--rating-only { display: none; }
}

.ugs-sticky {
  --ugs-sticky-bg: #fdf8f3;
  --ugs-sticky-line: #ede5da;
  --ugs-sticky-shadow: 0 -6px 24px rgba(26, 20, 16, 0.08);
  --ugs-sticky-max: 1320px;
  --ugs-sticky-py: 12px;
  --ugs-sticky-px: 32px;
  --ugs-sticky-gap: 16px;
  --ugs-sticky-z: 9990;
  --ugs-sticky-img: 52px;
  --ugs-sticky-img-bg: #ffffff;
  --ugs-sticky-title: #1a1410;
  --ugs-sticky-var: #6b5b52;
  --ugs-sticky-price: #1a1410;
  --ugs-sticky-btn-w: 260px;
  --ugs-sticky-btn-h: 50px;
  --ugs-sticky-btn-r: 0px;
  --ugs-sticky-btn-bg: #2a0c00;
  --ugs-sticky-btn-c: #ffffff;
  --ugs-sticky-btn-hbg: #1a1410;
  --ugs-sticky-btn-hc: #ffffff;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ugs-sticky-z);
  box-sizing: border-box;
  background: var(--ugs-sticky-bg);
  border-top: 1px solid var(--ugs-sticky-line);
  box-shadow: var(--ugs-sticky-shadow);
  font-family: var(--ugs-pdp-sans, inherit);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.35s;
}

.ugs-sticky *,
.ugs-sticky *::before,
.ugs-sticky *::after { box-sizing: border-box; }

.ugs-sticky.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

.ugs-sticky--top {
  top: 0;
  bottom: auto;
  border-top: 0;
  border-bottom: 1px solid var(--ugs-sticky-line);
  transform: translateY(-110%);
}

.ugs-sticky__inner {
  display: flex;
  align-items: center;
  gap: var(--ugs-sticky-gap);
  max-width: var(--ugs-sticky-max);
  margin: 0 auto;
  padding: var(--ugs-sticky-py) var(--ugs-sticky-px) calc(var(--ugs-sticky-py) + env(safe-area-inset-bottom, 0px));
}

.ugs-sticky--top .ugs-sticky__inner { padding-bottom: var(--ugs-sticky-py); padding-top: calc(var(--ugs-sticky-py) + env(safe-area-inset-top, 0px)); }

.ugs-sticky__media {
  display: block;
  flex: 0 0 var(--ugs-sticky-img);
  width: var(--ugs-sticky-img);
  height: var(--ugs-sticky-img);
  overflow: hidden;
  background: var(--ugs-sticky-img-bg);
}

.ugs-sticky .ugs-sticky__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

.ugs-sticky__info {
  flex: 1 1 auto;
  min-width: 0;
}

.ugs-sticky .ugs-sticky__title {
  margin: 0;
  font-family: var(--ugs-pdp-ff-title, var(--ugs-pdp-serif, inherit));
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ugs-sticky-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ugs-sticky .ugs-sticky__variant {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ugs-sticky-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ugs-sticky .ugs-sticky__variant[hidden] { display: none !important; }

.ugs-sticky .ugs-sticky__price {
  flex: 0 0 auto;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ugs-sticky-price);
  white-space: nowrap;
}

.ugs-sticky .ugs-sticky__price del { opacity: 0.55; margin-right: 6px; }
.ugs-sticky .ugs-sticky__price ins { text-decoration: none; }

.ugs-sticky .ugs-sticky__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ugs-sticky-btn-w);
  min-height: var(--ugs-sticky-btn-h);
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--ugs-sticky-btn-r);
  background: var(--ugs-sticky-btn-bg);
  color: var(--ugs-sticky-btn-c);
  box-shadow: none;
  font-family: var(--ugs-pdp-ff-add, inherit);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ugs-sticky .ugs-sticky__btn:hover,
.ugs-sticky .ugs-sticky__btn:focus-visible {
  background: var(--ugs-sticky-btn-hbg);
  color: var(--ugs-sticky-btn-hc);
}

.ugs-sticky .ugs-sticky__btn:focus-visible { outline: 2px solid var(--ugs-sticky-title); outline-offset: 2px; }
.ugs-sticky .ugs-sticky__btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ugs-sticky .ugs-sticky__btn.is-added { opacity: 0.9; }

.ugs-pdp .is-attention {
  animation: ugs-sticky-attn 0.5s ease 2;
}

@keyframes ugs-sticky-attn {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

html.ugs-sticky-pad body { padding-bottom: var(--ugs-sticky-space, 0px); }

@media (min-width: 1025px) {
  .ugs-sticky--no-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ugs-sticky--no-tablet { display: none !important; }
}

@media (max-width: 767px) {
  .ugs-sticky--no-mobile { display: none !important; }
  .ugs-sticky .ugs-sticky__btn { flex: 1 1 auto; padding: 0 16px; }
  .ugs-sticky .ugs-sticky__info { flex: 0 1 auto; max-width: 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .ugs-sticky,
  .ugs-sticky.is-visible { transition: none; }
  .ugs-pdp .is-attention { animation: none; }
}

.ugs-el-host *,
.ugs-el-host *::before,
.ugs-el-host *::after { box-sizing: border-box; }
.ugs-el-host a { box-shadow: none; text-decoration: none; }
.ugs-el-host hr { margin: 0; background-color: transparent; }
.ugs-el-host img { height: auto; max-width: 100%; border: none; border-radius: 0; box-shadow: none; }
.ugs-el-host embed,
.ugs-el-host iframe,
.ugs-el-host object,
.ugs-el-host video { max-width: 100%; width: 100%; margin: 0; line-height: 1; border: none; }

.ugs-pdp-mini.ugs-wish-card { position: relative; }
.ugs-pdp__ry-media .ugs-wish-stack,
.ugs-pdp__ry-media .ugs-wish--left { z-index: 3; }