/**
 * Aries Victoria — Product Detail Page (PDP) CSS
 * ─────────────────────────────────────────────────
 * Styles for:
 *   • .product-layout          Two-column flex (gallery | summary)
 *   • .product-gallery         2-col CSS grid desktop / Swiper mobile
 *   • .product-summary-col     Sticky summary panel
 *   • .product-variations      Colour thumbnail + size pill selectors
 *   • .product-atc             Quantity + Add to Cart row
 *   • .product-tabs-section    Description / Info / Reviews tabs
 *   • .product-related         Related products section
 *
 * All values use semantic design tokens defined in tokens/semantic.css.
 *
 * @package AriasVictoria
 */


/* ─────────────────────────────────────────────────────────────────────────────
 * PAGE WRAPPER
 * ───────────────────────────────────────────────────────────────────────────── */

.product-single {
  padding-block: var(--space-8);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * TWO-COLUMN LAYOUT
 * Gallery left — fills remaining width
 * Summary right — sticky, fixed width
 * ───────────────────────────────────────────────────────────────────────────── */

.product-layout {
  display:        flex;
  gap:            var(--space-10);
  align-items:    flex-start;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  .product-layout {
    flex-direction: column;
    gap:            var(--space-6);
  }
}

/* ── Gallery column ─────────────────────────────────────────────────────── */

.product-gallery-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Summary column ─────────────────────────────────────────────────────── */

.product-summary-col {
  flex:       0 0 420px;
  max-width:  420px;
}

@media (max-width: 1199px) {
  .product-summary-col {
    flex-basis: 380px;
    max-width:  380px;
  }
}

@media (max-width: 767px) {
  .product-summary-col {
    flex-basis: 100%;
    max-width:  100%;
  }
}

.product-summary {
  position:   sticky;
  top:        calc(var(--header-height, 64px) + var(--space-6));
}


/* ─────────────────────────────────────────────────────────────────────────────
 * PRODUCT GALLERY
 * Desktop: pure 2-column CSS grid — NO hero/featured, ALL images equal
 * Mobile : Swiper horizontal carousel
 * ───────────────────────────────────────────────────────────────────────────── */

.product-gallery {
  position: relative;
}

/* ── Swiper / grid container ─────────────────────────────────────────────── */

.product-gallery__slider {
  overflow: hidden; /* Swiper needs this on mobile; fine on desktop too */
}

/* Desktop grid — override Swiper's flex layout */
@media (min-width: 768px) {
  .product-gallery__slider {
    overflow: visible;
  }

  .product-gallery__grid {
    display:               grid !important; /* override swiper display:flex */
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-2);
    flex-wrap:             unset;           /* clear swiper's no-wrap */
    transform:             none !important; /* clear swiper's translate3d */
    width:                 100% !important;
  }

  .product-gallery__item {
    width:   auto !important; /* clear swiper's calculated pixel width */
    height:  auto !important;
    flex:    unset;
    display: block;
  }
}

/* ── Gallery image ─────────────────────────────────────────────────────── */

.product-gallery__item {
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-surface);
}

.product-gallery__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  aspect-ratio: 3 / 4; /* portrait — consistent across all images */
  transition: transform var(--duration-500) var(--ease-out);
}

@media (hover: hover) {
  .product-gallery__item:hover .product-gallery__img {
    transform: scale(1.03);
  }
}

/* ── Mobile Swiper pagination ─────────────────────────────────────────── */

.product-gallery__pagination {
  margin-top: var(--space-3);
  text-align: center;
}

@media (min-width: 768px) {
  .product-gallery__pagination {
    display: none;
  }
}

/* ── Sale / sold-out badge ──────────────────────────────────────────────── */

.product-gallery__badges {
  position:       absolute;
  top:            var(--space-4);
  left:           var(--space-4);
  z-index:        1;
  pointer-events: none;
}

.product-gallery__badge {
  display:       inline-block;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-gallery__badge--sale {
  background: var(--color-accent);
  color:      var(--color-text-on-accent);
}

.product-gallery__badge--sold-out {
  background: var(--color-bg-elevated);
  color:      var(--color-text-secondary);
}

/* ── Placeholder ────────────────────────────────────────────────────────── */

.product-gallery__placeholder {
  display:        flex;
  align-items:    center;
  justify-content: center;
  aspect-ratio:   3 / 4;
  background:     var(--color-bg-surface);
  border:         1px dashed var(--color-border-default);
  margin:         0;
  color:          var(--color-text-tertiary);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * PRODUCT SUMMARY — title, rating, price, excerpt
 * ───────────────────────────────────────────────────────────────────────────── */

/* WC renders these tags but we own the spacing */
.product-single .product_title {
  font-size:   var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin:      0 0 var(--space-2);
  color:       var(--color-text-primary);
}

.product-single .woocommerce-product-rating {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin:      0 0 var(--space-4);
}

.product-single .woocommerce-review-link {
  font-size: var(--text-sm);
  color:     var(--color-text-secondary);
}

.product-single .price {
  display:     block;
  font-size:   var(--text-xl);
  font-weight: var(--font-semibold);
  color:       var(--color-text-primary);
  margin:      0 0 var(--space-5);
}

.product-single .price del {
  color:      var(--color-text-tertiary);
  font-weight: var(--font-regular);
  margin-right: var(--space-2);
}

.product-single .price ins {
  color:           var(--color-accent);
  text-decoration: none;
}

.product-single .woocommerce-product-details__short-description {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin:      0 0 var(--space-6);
}

.product-single .woocommerce-product-details__short-description p {
  margin: 0 0 var(--space-3);
}

.product-single .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * VARIATION SELECTORS
 * ───────────────────────────────────────────────────────────────────────────── */

.product-variations {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  margin-bottom:  var(--space-6);
}

/* ── Group ─────────────────────────────────────────────────────────────── */

.product-variation-group__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  margin-bottom: var(--space-3);
  font-size:   var(--text-sm);
}

.product-variation-group__label {
  color:       var(--color-text-secondary);
}

.product-variation-group__value {
  font-weight: var(--font-semibold);
  color:       var(--color-text-primary);
}

.product-variation-group__options {
  display:  flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.product-variation-group__reset {
  display:    inline-block;
  margin-top: var(--space-2);
  font-size:  var(--text-xs);
  color:      var(--color-text-secondary);
  text-underline-offset: 2px;
}

.product-variation-group__reset:hover {
  color: var(--color-text-primary);
}

/* ── Colour thumbnail buttons ──────────────────────────────────────────── */

.variation-thumb {
  position:      relative;
  width:         60px;
  height:        60px;
  padding:       0;
  border:        2px solid transparent;
  border-radius: var(--radius-sm);
  background:    var(--color-bg-elevated);
  cursor:        pointer;
  overflow:      hidden;
  transition:    border-color var(--duration-150) var(--ease-out),
                 transform    var(--duration-150) var(--ease-out);
}

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

.variation-thumb__swatch {
  display: block;
  width:   100%;
  height:  100%;
}

.variation-thumb__label {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       100%;
  height:      100%;
  font-size:   var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color:       var(--color-text-primary);
}

.variation-thumb:hover {
  border-color: var(--color-border-strong);
  transform:    scale(1.05);
}

.variation-thumb.is-active {
  border-color: var(--color-text-primary);
}

.variation-thumb.is-disabled {
  opacity:  0.35;
  cursor:   not-allowed;
  position: relative;
}

/* Diagonal line through disabled thumb */
.variation-thumb.is-disabled::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--color-border-strong) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* ── Size pill buttons ──────────────────────────────────────────────────── */

.variation-pill {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       var(--space-2) var(--space-4);
  min-width:     48px;
  border:        1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background:    transparent;
  color:         var(--color-text-primary);
  font-size:     var(--text-sm);
  font-weight:   var(--font-semibold);
  letter-spacing: 0.03em;
  cursor:        pointer;
  transition:    border-color var(--duration-150) var(--ease-out),
                 background   var(--duration-150) var(--ease-out),
                 color        var(--duration-150) var(--ease-out);
}

.variation-pill:hover {
  border-color: var(--color-border-strong);
  background:   var(--color-bg-subtle);
}

.variation-pill.is-active {
  border-color: var(--color-text-primary);
  background:   var(--color-text-primary);
  color:        var(--color-text-inverse);
}

.variation-pill.is-disabled {
  opacity:       0.35;
  cursor:        not-allowed;
  border-style:  dashed;
  text-decoration: line-through;
}

.variation-pill.is-disabled:hover {
  border-color: var(--color-border-default);
  background:   transparent;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * VARIATION DETAILS (WC-injected price / stock message)
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-variation.single_variation {
  min-height:    32px;
  margin-bottom: var(--space-4);
}

.woocommerce-variation-price .price {
  margin: 0;
}

.woocommerce-variation-availability .stock {
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
}

.woocommerce-variation-availability .stock.in-stock {
  color: var(--color-success, #22c55e);
}

.woocommerce-variation-availability .stock.out-of-stock {
  color: var(--color-error, #ef4444);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ADD TO CART ROW
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-variation-add-to-cart,
.product-atc {
  display:   flex;
  gap:       var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
}

/* WC hides the ATC section until a valid variation is selected */
.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled {
  opacity:        0.5;
  pointer-events: none;
}

.product-atc__quantity {
  flex: 0 0 auto;
}

/* WC quantity input wrapper */
.product-atc__quantity .quantity {
  display:     flex;
  align-items: center;
}

.product-atc__button {
  flex: 1 1 auto;
}

.product-atc__out-of-stock {
  width:       100%;
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
  color:       var(--color-error, #ef4444);
  margin:      0;
}

/* ── Trust badges ──────────────────────────────────────────────────────── */

.product-trust {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--space-3);
  margin-top:     var(--space-6);
  padding-top:    var(--space-6);
  border-top:     1px solid var(--color-border-subtle);
}

.product-trust__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  text-align:     center;
}

.product-trust__icon {
  color: var(--color-text-secondary);
}

.product-trust__text {
  font-size:   var(--text-xs);
  color:       var(--color-text-secondary);
  line-height: var(--leading-snug);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * PRODUCT META (SKU, categories, tags)
 * ───────────────────────────────────────────────────────────────────────────── */

.product_meta {
  margin-top:  var(--space-6);
  padding-top: var(--space-5);
  border-top:  1px solid var(--color-border-subtle);
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  display:     flex;
  flex-direction: column;
  gap:         var(--space-2);
}

.product_meta a {
  color:            var(--color-text-primary);
  text-decoration:  none;
  transition:       opacity var(--duration-150) var(--ease-out);
}

.product_meta a:hover {
  opacity: 0.7;
}

.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
  display: flex;
  gap:     var(--space-1);
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * PRODUCT TABS
 * ───────────────────────────────────────────────────────────────────────────── */

.product-tabs-section {
  margin-top:    var(--space-16);
  padding-top:   var(--space-10);
  border-top:    1px solid var(--color-border-subtle);
}

/* ── Tab nav ─────────────────────────────────────────────────────────── */

.product-tabs__nav {
  display:         flex;
  gap:             0;
  border-bottom:   1px solid var(--color-border-subtle);
  margin-bottom:   var(--space-8);
  overflow-x:      auto;
  scrollbar-width: none;
}

.product-tabs__nav::-webkit-scrollbar {
  display: none;
}

.product-tabs__trigger {
  position:      relative;
  padding:       var(--space-3) var(--space-6);
  border:        none;
  border-bottom: 2px solid transparent;
  background:    transparent;
  color:         var(--color-text-secondary);
  font-size:     var(--text-sm);
  font-weight:   var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    color         var(--duration-150) var(--ease-out),
                 border-color  var(--duration-150) var(--ease-out);
  margin-bottom: -1px; /* overlap nav border-bottom */
}

.product-tabs__trigger:hover {
  color: var(--color-text-primary);
}

.product-tabs__trigger.is-active {
  color:        var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* ── Tab panels ─────────────────────────────────────────────────────── */

.product-tabs__panel {
  max-width:   640px;
}

.product-tabs__panel h2 {
  font-size:   var(--text-xl);
  font-weight: var(--font-semibold);
  margin:      0 0 var(--space-5);
  color:       var(--color-text-primary);
}

.product-tabs__panel p,
.product-tabs__panel li {
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Additional Information (attributes table) */
.woocommerce-product-attributes {
  width:           100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding:     var(--space-3) var(--space-4);
  border:      1px solid var(--color-border-subtle);
  font-size:   var(--text-sm);
  text-align:  left;
}

.woocommerce-product-attributes th {
  background:  var(--color-bg-surface);
  color:       var(--color-text-secondary);
  font-weight: var(--font-semibold);
  width:       35%;
}

.woocommerce-product-attributes td {
  color: var(--color-text-primary);
}

/* Reviews */
#reviews {
  font-size: var(--text-sm);
}

#reviews .comment-form input,
#reviews .comment-form textarea {
  font-size: var(--text-sm);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * RELATED PRODUCTS
 * ───────────────────────────────────────────────────────────────────────────── */

.product-related {
  margin-top:    var(--space-16);
  padding-block: var(--space-10);
  border-top:    1px solid var(--color-border-subtle);
}

.product-related__heading {
  font-size:     var(--text-2xl);
  font-weight:   var(--font-bold);
  margin:        0 0 var(--space-8);
  color:         var(--color-text-primary);
}

/* Related products grid — use same token as shop grid */
.product-related .products.product-grid {
  --shop-cols: 2;
  display:               grid;
  grid-template-columns: repeat(var(--shop-cols), 1fr);
  gap:                   var(--space-5) var(--space-4);
}

@media (min-width: 640px) {
  .product-related .products.product-grid {
    --shop-cols: 3;
  }
}

@media (min-width: 1024px) {
  .product-related .products.product-grid {
    --shop-cols: 4;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * NO MATCHING VARIATIONS
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-variation-no-matching-variations {
  margin:      var(--space-4) 0;
  padding:     var(--space-4);
  border:      1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * WC SINGLE PRODUCT NOTICES
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  margin:        0 0 var(--space-6);
  padding:       var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  list-style:    none;
}

.woocommerce-error {
  background:  rgba(239,68,68,0.1);
  color:       #ef4444;
  border-left: 3px solid #ef4444;
}

.woocommerce-info {
  background:  rgba(59,130,246,0.1);
  color:       #60a5fa;
  border-left: 3px solid #3b82f6;
}

.woocommerce-message {
  background:  rgba(34,197,94,0.1);
  color:       #22c55e;
  border-left: 3px solid #22c55e;
}