/**
 * samples-shop.com Soft Mist — product page (Balanced PDP wireframe).
 */

.ss-pdp {
  display: grid;
  gap: 0;
  width: min(100%, var(--ss-content-wide-max));
  margin: 0 auto;
  min-width: 0;
  background: var(--ss-color-surface);
  color: var(--ss-color-text);
  --ss-pdp-gutter: 14px;
}

.ss-pdp__breadcrumbs {
  padding: 10px var(--ss-pdp-gutter);
  border-bottom: 1px solid var(--ss-color-border);
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-xs);
}

.ss-pdp__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  margin-inline: var(--ss-pdp-gutter);
  border: 1px solid var(--ss-color-border);
  border-top: 0;
  background: var(--ss-color-surface);
}

.ss-pdp__search input {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface-muted);
  color: var(--ss-color-text);
  font: inherit;
  font-size: var(--ss-font-size-sm);
}

.ss-pdp__search input::placeholder {
  color: var(--ss-color-text-muted);
}

.ss-pdp__search input:focus {
  outline: none;
  background: var(--ss-color-surface);
  box-shadow: inset 0 0 0 1px var(--ss-color-action);
}

.ss-pdp__search button {
  min-width: 96px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font: inherit;
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

.ss-pdp__search button:hover {
  background: var(--ss-color-action-hover);
}

.ss-pdp__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-pdp__breadcrumbs li {
  display: inline;
}

.ss-pdp__main,
main#columnCenter.ss-pdp__main {
  min-width: 0;
  padding-block: 14px 18px;
  padding-inline: var(--ss-pdp-gutter);
}

.ss-pdp-layout {
  display: grid;
  grid-template-columns: var(--ss-product-media-width) minmax(0, 1fr) var(--ss-buy-box-width);
  gap: var(--ss-column-gap);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}

.ss-pdp__media,
.ss-pdp__main-col,
.ss-buy-box {
  min-width: 0;
}

.ss-pdp__media {
  display: grid;
  gap: var(--ss-space-3);
}

.ss-pdp__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: linear-gradient(145deg, var(--ss-color-product-placeholder), var(--ss-color-product-placeholder-2));
}

.ss-pdp__cover-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.ss-pdp__cover-link,
.ss-pdp__cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ss-pdp__cover-link[hidden],
.ss-pdp__cover-video[hidden] {
  display: none !important;
}

.ss-pdp__cover-stage p {
  margin: 0;
  height: 100%;
}

.ss-pdp__cover-video,
.ss-pdp__cover-stage:has(> .ss-pdp__video-embed) {
  background: #000;
  overflow: hidden;
}

.ss-pdp__cover .ss-pdp__video-embed {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  border: 0;
}

.ss-pdp__cover-stage > .ss-pdp__video-embed {
  position: absolute;
}

.ss-pdp__cover .ss-pdp__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ss-pdp__cover-stage iframe {
  border: 0;
}

.ss-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ss-pdp__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface-muted);
  cursor: pointer;
}

.ss-pdp__thumb.is-active {
  border-color: var(--ss-color-action);
  box-shadow: inset 0 0 0 1px var(--ss-color-action);
}

.ss-pdp__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-pdp__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 25, 34, 0.42);
  color: #fff;
  font-size: 18px;
  pointer-events: none;
}

.ss-pdp__thumb.is-active .ss-pdp__thumb-play {
  background: rgba(20, 25, 34, 0.55);
}

.ss-pdp__cover-link {
  display: block;
}

.ss-pdp__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-pdp__cover-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 7px;
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font-size: var(--ss-font-size-xs);
  font-weight: 800;
}

.ss-pdp__demo {
  display: grid;
  gap: 8px;
  padding: var(--ss-space-3);
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface-muted);
  font-size: var(--ss-font-size-sm);
}

.ss-pdp__demo-play {
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid var(--ss-color-action);
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

.ss-pdp__main-col {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-pdp__hero {
  display: grid;
  gap: var(--ss-space-3);
}

.ss-pdp__badge {
  display: inline-flex;
  align-self: start;
  padding: 4px 8px;
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font-size: var(--ss-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ss-pdp__title {
  margin: 0;
  font-size: var(--ss-font-size-2xl);
  line-height: var(--ss-line-height-tight);
  letter-spacing: var(--ss-letter-tight);
}

.ss-pdp__summary {
  margin: 0;
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-md);
  line-height: var(--ss-line-height-relaxed);
}

.ss-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ss-space-3);
}

.ss-spec {
  display: grid;
  gap: 4px;
  padding: var(--ss-space-3);
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface-muted);
  font-size: var(--ss-font-size-sm);
}

.ss-spec b {
  color: var(--ss-color-text-subtle);
  font-size: var(--ss-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.ss-pdp__detail-flow {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-pdp__tab-panel {
  display: none;
}

.ss-pdp__tab-panel.is-active {
  display: block;
}

.ss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
}

.ss-pdp__tabs .ss-tab {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface);
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  text-decoration: none;
}

.ss-pdp__tabs .ss-tab:hover {
  text-decoration: none;
}

.ss-pdp__tabs .ss-tab--active {
  border-color: var(--ss-color-action);
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
}

.ss-pdp__section.ss-content-block,
.ss-pdp__review-form.ss-content-block {
  padding: var(--ss-space-4);
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface-muted);
}

.ss-pdp__section-title {
  margin: 0 0 var(--ss-space-3);
  font-size: var(--ss-font-size-lg);
}

.ss-pdp__description {
  font-size: var(--ss-font-size-md);
  line-height: var(--ss-line-height-relaxed);
}

.ss-pdp__description iframe {
  max-width: 100%;
}

.ss-pdp__audio-list {
  display: grid;
  gap: 8px;
}

.ss-pdp__audio-list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.ss-pdp__audio-list--two .ss-pdp__audio-row:nth-last-child(-n+2) {
  border-bottom: 0;
}

.ss-pdp__audio-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--ss-color-border);
}

.ss-pdp__audio-row:last-child {
  border-bottom: 0;
}

.ss-pdp__audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface);
  color: var(--ss-color-text);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.ss-pdp__audio-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

.ss-pdp__video-grid {
  display: grid;
  gap: var(--ss-space-3);
}

.ss-pdp__video-embed {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ss-color-border);
  background: #000;
}

.ss-pdp__video-embed iframe,
.ss-pdp__video-grid iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ss-pdp__poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ss-pdp__poster {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ss-pdp__poster-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ss-color-border);
  background: #141922;
}

.ss-pdp__poster-frame img,
.ss-pdp__poster-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.ss-pdp__poster-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 25, 34, 0.28);
  color: #fff;
  font-size: 28px;
}

.ss-pdp__poster-title {
  font-size: var(--ss-font-size-sm);
  font-weight: 700;
}

.ss-pdp__more {
  display: inline-block;
  margin-top: 12px;
  color: var(--ss-color-text);
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
}

/* Legacy description embeds (width="50%" attribute) inside PDP tab */
.ss-pdp__video-grid > p:has(iframe) {
  margin: 0;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
}

.ss-pdp__video-grid > p iframe {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
}

.ss-pdp__after {
  grid-column: 1 / 3;
  min-width: 0;
}

.ss-buy-box.ss-pdp__buy {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: var(--ss-space-4);
  display: grid;
  gap: var(--ss-space-3);
  padding: var(--ss-space-4);
  border: 2px solid var(--ss-color-action);
  border-radius: 0;
  background: var(--ss-color-surface);
  box-shadow: none;
}

.ss-pdp__buy-heading {
  margin: 0;
  font-size: var(--ss-font-size-md);
  font-weight: 800;
}

.ss-pdp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: var(--ss-font-size-2xl);
  font-weight: 900;
}

.ss-pdp__price del {
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-md);
  font-weight: 600;
}

.ss-pdp__buy-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 11px 16px;
  border: 1px solid var(--ss-color-action);
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font-family: inherit;
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.ss-pdp__buy-btn svg {
  display: none !important;
}

.ss-pdp__wishlist-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--ss-color-action);
  border-radius: 0;
  background: var(--ss-color-surface);
  color: var(--ss-color-action);
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  text-decoration: none;
}

.ss-pdp__wishlist-btn:hover {
  text-decoration: none;
}

.ss-trust-list {
  display: grid;
  gap: var(--ss-space-2);
  padding-top: var(--ss-space-2);
  border-top: 1px solid var(--ss-color-border);
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-sm);
}

.ss-trust-list span::before {
  content: "✓";
  margin-right: var(--ss-space-2);
  color: var(--ss-color-success);
  font-weight: 900;
}

.ss-pdp__mini-spec {
  display: grid;
  gap: 4px;
  font-size: var(--ss-font-size-sm);
  color: var(--ss-color-text-muted);
}

.ss-pdp__mini-spec b {
  color: var(--ss-color-text-subtle);
}

.ss-pdp__reviews {
  display: grid;
  gap: var(--ss-space-4);
}

.ss-pdp__review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ss-pdp__review-head-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ss-pdp__review-head .ss-pdp__section-title {
  margin-bottom: 0;
}

.ss-pdp__review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-sm);
}

.ss-pdp__review-summary strong {
  color: var(--ss-color-text);
  font-weight: 800;
}

.ss-pdp__review-write {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ss-color-action);
  border-radius: 0;
  background: var(--ss-color-action);
  color: var(--ss-color-action-text);
  font: inherit;
  font-size: var(--ss-font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

.ss-pdp__review-write:hover {
  background: var(--ss-color-action-hover);
}

.ss-pdp__review-list {
  display: grid;
}

.ss-pdp__review {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--ss-color-border);
}

.ss-pdp__review-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--ss-color-surface-muted);
  color: var(--ss-color-text);
  font-size: 16px;
  font-weight: 800;
}

.ss-pdp__review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 6px;
}

.ss-pdp__review-meta time,
.ss-pdp__review-empty {
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-sm);
}

.ss-pdp__review-empty {
  margin: 0;
}

.ss-pdp__review-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.ss-pdp__review-stars {
  color: var(--ss-color-border-strong);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

.ss-pdp__review-stars b {
  color: var(--ss-color-action);
  font-weight: 400;
}

.ss-pdp__review-form h3 {
  margin: 0 0 var(--ss-space-3);
  font-size: var(--ss-font-size-md);
}

.ss-pdp__review-form-grid {
  display: grid;
  gap: var(--ss-space-3);
}

.ss-pdp__review-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--ss-space-3);
}

.ss-pdp__review-field {
  display: grid;
  gap: 6px;
  font-size: var(--ss-font-size-sm);
  color: var(--ss-color-text-subtle);
}

.ss-pdp__review-field--name {
  flex: 0 1 260px;
  width: min(100%, 260px);
}

.ss-pdp__review-field--rating {
  flex: 0 0 auto;
  margin-left: auto;
}

.ss-pdp__review-field--text,
.ss-pdp__review-actions {
  width: 100%;
}

.ss-pdp__review-field input,
.ss-pdp__review-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface);
  color: var(--ss-color-text);
  font: inherit;
}

.ss-pdp__star-rating {
  display: inline-flex;
  gap: 2px;
}

.ss-pdp__star {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ss-color-border-strong);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ss-pdp__star.is-active {
  color: var(--ss-color-action);
}

.ss-pdp__review-field textarea {
  min-height: 180px;
  resize: vertical;
}

.ss-pdp__review-actions {
  display: flex;
  justify-content: flex-start;
  order: 3;
}

.ss-pdp__buy-btn.ss-pdp__review-submit {
  display: inline-block;
  width: auto;
  min-width: 140px;
  padding: 11px 24px;
}


.ss-pdp__related {
  padding: 0 0 18px;
}

.ss-pdp__related-title {
  margin: 0 0 10px;
  font-size: var(--ss-font-size-lg);
}

.ss-pdp__related-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ss-pdp__related-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ss-color-border);
  border-radius: 0;
  background: var(--ss-color-surface);
}

.ss-pdp__related-image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: var(--ss-color-surface-muted);
}

.ss-pdp__related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-pdp__related-body {
  display: grid;
  gap: 4px;
  font-size: var(--ss-font-size-sm);
}

.ss-pdp__related-price {
  font-weight: 800;
}

.ss-pdp__demo-play,
.ss-pdp__review-submit {
  font-family: inherit;
}

.ss-pdp__seo {
  padding: 0 0 18px;
  color: var(--ss-color-text-muted);
  font-size: var(--ss-font-size-sm);
}

@media (max-width: 1439px) {
  .ss-pdp-layout {
    grid-template-columns: 320px minmax(0, 1fr) 260px;
  }
}

@media (max-width: 1367px) {
  .ss-pdp__main-col {
    display: contents;
  }

  .ss-pdp__hero {
    grid-column: 2;
    grid-row: 1;
  }

  .ss-pdp__media {
    grid-column: 1;
    grid-row: 1;
  }

  .ss-buy-box {
    grid-column: 3;
  }

  .ss-pdp__detail-flow,
  .ss-pdp__after {
    grid-column: 1 / 3;
  }

  .ss-pdp__detail-flow {
    grid-row: 2;
  }

  .ss-pdp-layout {
    grid-template-columns: 300px minmax(0, 1fr) 250px;
  }

  .ss-spec-grid {
    gap: 6px;
  }

  .ss-spec {
    min-height: 38px;
    padding: 6px;
  }
}

@media (max-width: 1279px) {
  .ss-pdp-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .ss-buy-box.ss-pdp__buy {
    position: static;
    align-self: stretch;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: auto minmax(120px, 160px) minmax(120px, 160px) minmax(0, 1fr);
    align-items: center;
  }

  .ss-pdp__buy-heading {
    display: none;
  }

  .ss-pdp__wishlist-btn {
    white-space: nowrap;
  }

  .ss-pdp__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
  }

  .ss-pdp__mini-spec {
    display: none;
  }

  .ss-pdp__hero {
    grid-column: 2;
    grid-row: 1;
  }

  .ss-pdp__media {
    grid-column: 1;
    grid-row: 1;
  }

  .ss-pdp__detail-flow,
  .ss-pdp__after {
    grid-column: 1 / -1;
  }

  .ss-pdp__detail-flow {
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .ss-pdp {
    --ss-pdp-gutter: 10px;
  }

  .ss-pdp__audio-list--two,
  .ss-pdp__poster-grid {
    grid-template-columns: 1fr;
  }

  .ss-pdp__audio-list--two .ss-pdp__audio-row {
    border-bottom: 1px solid var(--ss-color-border);
  }

  .ss-pdp__audio-list--two .ss-pdp__audio-row:last-child {
    border-bottom: 0;
  }
}

/* Product image lightbox (showbox) — fit viewport; close btn inside modal */
.showboxWrapper > div:first-child:has(.productImageLightbox) {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  box-sizing: border-box;
}

.showboxWrapper > div > div:first-child:has(.productImageLightbox) {
  width: fit-content;
  max-width: 100%;
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.showboxWrapper #productImageFull {
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
}

.showboxWrapper .productImageLightbox {
  display: block;
  width: auto;
  height: auto;
  max-width: min(calc(100vw - 44px), 1600px);
  max-height: calc(100vh - 44px);
  object-fit: contain;
}

.showboxWrapper > div:first-child:has(.productImageLightbox) > div.closeBtn {
  position: absolute;
  right: 8px;
  top: 8px;
}

.showboxWrapper > div:first-child:has(.productImageLightbox) > div.closeBtn:before {
  box-shadow: none;
}