/* Product page specific styles – mobile first */

.product { padding: 1rem 0 2rem; }
.product__grid { display: grid; gap: 1rem; }

/* Gallery */
.product__gallery { position: relative; }
.gallery { display: grid; gap: .75rem; }
.gallery__control { position: absolute; opacity: 0; pointer-events: none; }
.gallery__stage { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #eee; box-shadow: var(--shadow-sm); min-height: 220px; }
.gallery__item { display: none; margin: 0; opacity: 0; transition: opacity .3s ease; }
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

/* Show the image that matches the checked radio */
#slide-1:checked ~ .gallery__stage .gallery__item[data-for="slide-1"],
#slide-2:checked ~ .gallery__stage .gallery__item[data-for="slide-2"],
#slide-3:checked ~ .gallery__stage .gallery__item[data-for="slide-3"] { display: block; opacity: 1; }

.gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.thumb { display: block; border: 1px solid #eee; border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: var(--shadow-sm); touch-action: manipulation; }
.thumb img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; transition: transform .25s ease; }
.thumb:hover img { transform: scale(1.03); }

/* Details */
.product__details { display: grid; gap: .75rem; }
.product__title { margin: .25rem 0 0; font-size: clamp(1.125rem, 2.2vw, 1.75rem); }
.product__rating { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.product__price { font-size: clamp(1.125rem, 3vw, 1.75rem); font-weight: 700; margin: .25rem 0 0; }
.stars { display: inline-flex; gap: 2px; }
.review-count { font-size: .95rem; }

.product__options { display: grid; gap: 1rem; margin-top: .25rem; }
.field { border: 0; padding: 0; }
.field legend { font-weight: 600; margin-bottom: .5rem; }

/* Color swatches */
.swatches { display: inline-grid; grid-auto-flow: column; gap: .5rem; align-items: center; }
.swatches input { position: absolute; opacity: 0; }
.swatches label { width: 36px; height: 36px; border-radius: 999px; border: 1px solid #e5e7eb; background: var(--swatch); display: inline-block; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .2s ease; touch-action: manipulation; }
.swatches label:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.swatches input:checked + label { outline: 3px solid var(--ring); }

/* Sizes */
.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.sizes input { position: absolute; opacity: 0; }
.size { display: grid; place-items: center; padding: .7rem 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease; touch-action: manipulation; }
.size:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sizes input:checked + .size { background: var(--surface); }

.cta-row { display: flex; gap: .5rem; }
.btn { width: 100%; font-weight: 600; }

.product__description { margin-top: .5rem; color: var(--muted); }
.product__description h2 { font-size: 1rem; margin: 0 0 .25rem; color: var(--text); }

/* Quantity control */
.qty-control { display: inline-flex; align-items: center; gap: .25rem; }
.qty-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; box-shadow: var(--shadow-sm); }
.qty-input { width: 72px; min-height: 40px; text-align: center; border: 1px solid #e5e7eb; border-radius: 8px; }

/* Layout for larger screens */
@media (min-width: 768px) {
  .product__grid { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 1.25rem; }
  .gallery__item img { aspect-ratio: 16/12; }
}

@media (min-width: 1024px) {
  .product { padding-top: 2rem; }
  .product__grid { gap: 2rem; }
}

/* Tabs section */
.tabs { margin-top: 1.5rem; }
.tabs__control { position: absolute; opacity: 0; pointer-events: none; }
.tabs__header { display: inline-grid; grid-auto-flow: column; gap: .25rem; border-bottom: 1px solid #eee; }
.tabs__header label { padding: .75rem 1rem; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
#tab-details:checked ~ .tabs__header label[for="tab-details"],
#tab-reviews:checked ~ .tabs__header label[for="tab-reviews"],
#tab-discussion:checked ~ .tabs__header label[for="tab-discussion"] { color: var(--text); border-bottom-color: var(--text); }
.tabs__panel { display: none; padding: 1rem 0; animation: fade .24s ease; }
#tab-details:checked ~ #panel-details,
#tab-reviews:checked ~ #panel-reviews,
#tab-discussion:checked ~ #panel-discussion { display: block; }

@keyframes fade { from { opacity: .85; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Reviews layout */
.reviews__grid { display: grid; gap: 1rem; }
.rating { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem; box-shadow: var(--shadow-sm); }
.rating__score { display: grid; gap: .25rem; }
.rating__value { font-size: 2rem; line-height: 1; }
.rating__bars { margin-top: .5rem; display: grid; gap: .4rem; }
.bar { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .5rem; color: var(--muted); }
.bar span { font-size: .85rem; }
.track { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%); }
.track i { display: block; height: 100%; width: var(--value); background: #f59e0b; border-radius: 999px; }
.reviews { display: grid; gap: .75rem; }
.review { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: .75rem; box-shadow: var(--shadow-sm); }
.review__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; display: grid; place-items: center; font-weight: 700; }
.review p { margin: 0; }

@media (min-width: 768px) {
  .reviews__grid { grid-template-columns: 320px 1fr; align-items: start; gap: 1.25rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}