/* Product detail page (phase 2). Logical properties only. */

.sf-product { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block: .5rem 2rem; }
@media (min-width: 992px) { .sf-product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; } }

/* Gallery */
.sf-gallery { min-inline-size: 0; }
@media (min-width: 992px) { .sf-gallery { position: sticky; inset-block-start: calc(var(--sf-header-h) + 1rem); } }
.sf-gallery-main { position: relative; border-radius: 18px; overflow: hidden; background: var(--ys-bg); border: 1px solid var(--ys-line); }
.sf-gallery-main .swiper-slide { aspect-ratio: 4 / 5; }
.sf-gallery-main a { display: block; block-size: 100%; }
.sf-gallery-main picture, .sf-gallery-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-gallery-nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 2;
  inline-size: 42px; block-size: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9);
  box-shadow: var(--ys-shadow-sm); display: grid; place-items: center; font-size: 1.1rem; color: var(--ys-ink);
}
.sf-gallery-prev { inset-inline-start: .75rem; }
.sf-gallery-next { inset-inline-end: .75rem; }
[dir="rtl"] .sf-gallery-nav .bi { transform: scaleX(-1); }
.sf-gallery-nav.swiper-button-disabled { opacity: .35; }
.sf-gallery-thumbs { margin-block-start: .75rem; }
.sf-thumb { inline-size: 76px; block-size: 76px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--ys-bg); cursor: pointer; }
.sf-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sf-thumb.swiper-slide-thumb-active, .sf-thumb.is-active { border-color: var(--ys-ink); }
.sf-gallery-empty { aspect-ratio: 4 / 5; border-radius: 18px; background: var(--ys-bg); display: grid; place-items: center; font-size: 3rem; color: var(--ys-line); }

/* Info (brand / price / availability / option picker styles are shared with the quick-select dialog: storefront.css) */
.sf-product-info { min-inline-size: 0; }
.sf-product-title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .75rem; line-height: 1.25; }
.sf-product-short { color: var(--ys-muted); margin-block-end: 1.25rem; }
.sf-product-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.25rem; }
.sf-product-meta { display: grid; gap: .35rem; margin: 0 0 1.25rem; font-size: .9rem; }
.sf-product-meta > div { display: flex; gap: .5rem; }
.sf-product-meta dt { color: var(--ys-muted); font-weight: 500; min-inline-size: 5.5rem; }
.sf-product-meta dd { margin: 0; }
.sf-tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--ys-bg); font-size: .8rem; margin-inline-end: .3rem; }
.sf-ask { border-radius: 999px; padding-inline: 1.25rem; }

/* Details */
.sf-product-details { display: grid; gap: 2rem; padding-block: 1.5rem 2rem; border-block-start: 1px solid var(--ys-line); }
@media (min-width: 992px) { .sf-product-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.sf-product-section .sf-section-title { margin-block-end: .9rem; }
.sf-rich { line-height: 1.75; color: var(--ys-ink); max-inline-size: 70ch; }
.sf-specs { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.sf-specs th, .sf-specs td { padding: .7rem .5rem; border-block-end: 1px solid var(--ys-line); text-align: start; vertical-align: top; }
.sf-specs th { color: var(--ys-muted); font-weight: 600; inline-size: 40%; }