/* Smart Stone Studio — calm complementary products surface. */
.sss-studio .extras {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sss-studio-border);
}
.sss-studio .extras-heading { margin-bottom: 10px; }
.sss-studio .extras-title,
dialog.sss-studio-dialog .extras-dialog-title { margin: 0; font-family: var(--sss-studio-font-display); font-size: var(--sss-studio-fs-lg); }
.sss-studio .extras-subtitle { margin: 3px 0 0; color: var(--sss-studio-muted); font-size: var(--sss-studio-fs-hint); }
.sss-studio .extras-slider { position: relative; }
.sss-studio .extras-arrow {
  display: none;
  position: absolute; top: calc(50% - 12px); transform: translateY(-50%);
  z-index: 2; width: 34px; height: 34px; align-items: center; justify-content: center;
  border: 1px solid var(--sss-studio-border); border-radius: 999px;
  background: var(--sss-studio-surface); color: var(--sss-studio-accent);
  box-shadow: 0 1px 4px rgba(43, 41, 37, .16); cursor: pointer; font-size: 18px; line-height: 1;
}
.sss-studio .extras-arrow-prev { left: -6px; }
.sss-studio .extras-arrow-next { right: -6px; }
.sss-studio .extras-arrow:hover { border-color: var(--sss-studio-accent); }
.sss-studio .extras-arrow:focus-visible { outline: 2px solid var(--sss-studio-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sss-studio .extras-arrow:not([hidden]) { display: flex; }
}
.sss-studio .extras-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--sss-studio-scrollbar-thumb) var(--sss-studio-scrollbar-track);
}
.sss-studio .extras-group { flex: 0 0 auto; min-width: 0; }
.sss-studio .extras-group-heading { margin: 14px 0 6px; font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); text-transform: uppercase; letter-spacing: .06em; }
.sss-studio .extras-group-cards { display: flex; gap: 10px; }
.sss-studio .extra-card,
dialog.sss-studio-dialog .extra-card {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sss-studio-border);
  border-radius: var(--sss-studio-radius);
  background: var(--sss-studio-surface);
  box-shadow: 0 1px 2px rgba(43, 41, 37, .05);
}
.sss-studio .extras-row .extra-card { flex: 0 0 46%; scroll-snap-align: start; }
.sss-studio .extras-row .extras-group-cards .extra-card { flex-basis: min(210px, 46vw); }
.sss-studio .extra-img,
dialog.sss-studio-dialog .extra-img { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--sss-studio-accent-weak); }
.sss-studio .extra-img-empty,
dialog.sss-studio-dialog .extra-img-empty { background: linear-gradient(145deg, var(--sss-studio-accent-weak), var(--sss-studio-bg)); }
.sss-studio .extra-copy,
dialog.sss-studio-dialog .extra-copy { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.sss-studio .extra-title,
dialog.sss-studio-dialog .extra-title { margin: 0; color: var(--sss-studio-ink); font-size: var(--sss-studio-fs-body); line-height: 1.3; }
.sss-studio .extra-desc,
dialog.sss-studio-dialog .extra-desc { margin: 0; color: var(--sss-studio-muted); font-size: var(--sss-studio-fs-hint); line-height: 1.4; }
.sss-studio .extra-meta,
dialog.sss-studio-dialog .extra-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.sss-studio .extra-price,
dialog.sss-studio-dialog .extra-price { color: var(--sss-studio-ink); font-size: var(--sss-studio-fs-hint); font-weight: 600; }
.sss-studio .extra-btn,
dialog.sss-studio-dialog .extra-btn {
  min-height: 34px;
  border: 1px solid var(--sss-studio-border);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--sss-studio-surface);
  color: var(--sss-studio-accent);
  font: inherit;
  font-size: var(--sss-studio-fs-hint);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.sss-studio .extra-btn:hover,
dialog.sss-studio-dialog .extra-btn:hover { border-color: var(--sss-studio-accent); }
.sss-studio .extra-toggle.is-added,
dialog.sss-studio-dialog .extra-toggle.is-added { border-color: var(--sss-studio-ok); background: var(--sss-studio-ok-weak); color: var(--sss-studio-ok); }
.sss-studio .extra-btn.is-disabled,
dialog.sss-studio-dialog .extra-btn.is-disabled { cursor: default; opacity: .65; }
.sss-studio .extras-see-all { margin-top: 2px; }
.sss-studio .extra-btn:focus-visible,
.sss-studio .extras-see-all:focus-visible,
.sss-studio .extras-row:focus-visible,
dialog.sss-studio-dialog .extra-btn:focus-visible,
dialog.sss-studio-dialog .dclose:focus-visible {
  outline: 2px solid var(--sss-studio-accent);
  outline-offset: 2px;
}
dialog.sss-studio-dialog .extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 400px) { dialog.sss-studio-dialog .extras-grid { grid-template-columns: 1fr; } }
dialog.sss-studio-dialog .extra-card.in-dialog { display: flex; max-width: 100%; flex-direction: column; }
dialog.sss-studio-dialog .extra-card.in-dialog .extra-copy { flex: 1; }
dialog.sss-studio-dialog .extra-card.in-dialog .extra-meta { margin-top: auto; }
.sss-studio .extras-sumgroup .sumrow { cursor: default; }
.sss-studio .extras-sumgroup .sumitems { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }

@media (min-width: 761px) {
  .sss-studio .extras-row .extra-card { flex-basis: min(210px, 46%); }
}

@media (prefers-reduced-motion: reduce) {
  .sss-studio .extras-row { scroll-behavior: auto; scroll-snap-type: none; }
  .sss-studio .extra-btn,
  dialog.sss-studio-dialog .extra-btn { transition: none; }
}