.pdp-media,
.pdp-info {
  min-width: 0;
}

body:has(#pdpRoot) #siteHeader:not(.scrolled) {
  background: rgba(251, 248, 243, .96);
  box-shadow: 0 1px 0 var(--line);
}

body:has(#pdpRoot) #siteHeader:not(.scrolled) .logo,
body:has(#pdpRoot) #siteHeader:not(.scrolled) .nav-links a,
body:has(#pdpRoot) #siteHeader:not(.scrolled) .currency-switch select,
body:has(#pdpRoot) #siteHeader:not(.scrolled) .nav-icon-btn,
body:has(#pdpRoot) #siteHeader:not(.scrolled) .burger,
body:has(#pdpRoot) #siteHeader:not(.scrolled) .nav-cta {
  color: var(--text);
}

body:has(#pdpRoot) #siteHeader .nav-links a:hover,
body:has(#pdpRoot) #siteHeader .nav-links a:focus-visible {
  color: var(--ink);
}

body:has(#pdpRoot) #siteHeader .nav-cta:hover,
body:has(#pdpRoot) #siteHeader .nav-cta:focus-visible {
  background: rgba(26, 32, 29, .08);
  border-color: var(--ink);
  color: var(--ink);
}

.pdp-media-main,
.pdp-media-main.shape-circle,
.pdp-media-main.shape-long {
  height: min(58svh, 560px);
  aspect-ratio: auto;
}

.pdp-thumbs {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.pdp-thumbs button {
  width: 58px;
  height: 58px;
}

@media (max-width: 899px) {
  .pdp-media-main,
  .pdp-media-main.shape-circle,
  .pdp-media-main.shape-long {
    height: min(54svh, 460px);
  }

  .pdp-thumbs button {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 480px) {
  .pdp-media-main,
  .pdp-media-main.shape-circle,
  .pdp-media-main.shape-long {
    height: min(52svh, 420px);
  }
}