/* ============================================================
   Product Page - Style Ink Co (Neon Anime Light)
   Light-mode, magenta/cyan duo-tone, conversion-focused
   ============================================================ */

/* CSS Variables */
:root {
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F7F7FA;
  --color-bg-muted:       #F0F0F5;
  --color-text-primary:   #14141F;
  --color-text-secondary: #14141F;
  --color-text-muted:     #5C5C72;
  --color-text-soft:      #5C5C72;
  --color-border:         #E4E4EC;
  --color-accent:         #FF2E9A;
  --color-accent-hover:   #0C8A9E;
  --color-button-bg:      var(--color-accent);
  --color-button-hover:   #2FE8FF;
  --color-button-text:    #FFFFFF;
  --color-button-text-hover: #0A0A12;
  --color-sale:           #E0114F;
  --color-blush:          #FF2E9A;
  --color-navy:           #14141F;
  --color-navy-light:     #5C5C72;
  --color-ring:           rgba(47, 232, 255, 0.28);
  --color-background:     var(--color-bg);
  --color-foreground:     var(--color-text-primary);
  --color-foreground-muted: var(--color-text-muted);
  --color-muted:          var(--color-text-soft);
  --color-success:        #1A9E5C;
  --color-alert:          var(--color-sale);
  --font-primary:         'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:            var(--font-primary);
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --shadow-card:          0 1px 4px rgba(47, 42, 40, 0.06);
  --shadow-card-hover:    0 14px 34px rgba(47, 42, 40, 0.12);
}

/* === 1. PAGE LAYOUT === */
body.single-product {
  overflow-x: hidden;
  font-family: var(--font-primary);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

.woo-page {
  display: flex;
  justify-content: center;
  background:
    linear-gradient(180deg, var(--color-bg-subtle) 0, var(--color-bg) 300px),
    var(--color-bg);
}

.single-product div.product {
  display: grid;
  gap: 24px;
  padding: 24px 16px;
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.single-product div.product > * {
  min-width: 0;
}

.single-product .woocommerce-breadcrumb {
  width: min(100%, 80rem);
  margin: 0 auto;
  padding: 18px 16px 0;
  box-sizing: border-box;
  color: var(--color-text-soft);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.single-product .woocommerce-breadcrumb a:hover {
  color: var(--color-accent-hover);
}

.single-product span.onsale {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Override WooCommerce default floats */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 639px) {
  .single-product .woocommerce-breadcrumb {
    padding-top: 10px;
  }

  .single-product div.product {
    padding-top: 12px;
  }
  .single-product .container {
    padding-top: 2rem !important;
  }
}

@media (min-width: 640px) {
  .single-product div.product {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .single-product div.product {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 48px;
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: start;
  }

  .single-product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
  }

  .single-product .summary {
    grid-column: 2;
    grid-row: 1;
  }

  .single-product .woocommerce-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .single-product .related {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* === 2. PRODUCT GALLERY === */
.woocommerce-product-gallery {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  max-width: 100%;
}

.woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Fullscreen trigger */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  background: var(--color-bg);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s;
  text-decoration: none;
}

.woocommerce-product-gallery__trigger:hover {
  opacity: 1;
}

/* Thumbnails */
.flex-control-thumbs {
  display: flex;
  gap: 8px;
  margin: 12px 12px 12px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

.flex-control-thumbs li {
  flex: 0 0 auto;
}

.flex-control-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  display: block;
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
  border-color: var(--color-accent);
}

/* Thumbnail scroll arrows */
.gallery-thumbs-wrapper {
  position: relative;
}

.gallery-thumbs-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transform: translateY(-50%);
  transition: box-shadow 0.2s, opacity 0.2s;
}

.gallery-thumbs-btn:hover {
  box-shadow: var(--shadow-card-hover);
}

.gallery-thumbs-btn.prev {
  left: 2px;
}

.gallery-thumbs-btn.next {
  right: 2px;
}

.gallery-thumbs-btn svg {
  width: 16px;
  height: 16px;
}

/* === 3. SUMMARY === */
.summary.entry-summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Category breadcrumb label above title */
.product_meta_top {
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.product_title.entry-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .product_title.entry-title {
    font-size: 1.875rem;
  }
}

/* Star rating */
.single-product .star-rating {
  color: var(--color-accent);
  font-size: 0.875rem;
}

/* Price */
.summary .price {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1;
}

.summary .price del {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-right: 8px;
}

.summary .price ins {
  text-decoration: none;
  color: var(--color-sale);
}

/* Short description */
.woocommerce-product-details__short-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.single-product .stock {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-accent-hover);
  font-size: 0.8125rem;
  font-weight: 800;
}

.single-product .stock.out-of-stock {
  background: color-mix(in srgb, var(--color-sale) 12%, transparent);
  color: var(--color-sale);
}

/* === 4. VARIATIONS FORM === */
.variations_form table.variations {
  width: 100%;
  border-collapse: collapse;
}

.variations_form table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.variations_form .label label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.variations_form .value select {
  width: 100%;
  min-height: 48px;
  padding: 10px 40px 10px 14px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314141F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.variations_form .value select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px var(--color-ring);
}

/* Reset variations link */
.reset_variations {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  transition: color 0.2s;
}

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

/* Variation price */
.woocommerce-variation-price .price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-sale);
}

/* === 5. ADD TO CART === */
.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

/* Quantity */
.quantity {
  display: flex;
  align-items: center;
}

.single-product div.product form.cart .quantity .qty {
  width: 72px;
  height: 48px;
  padding: 0 12px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color 0.2s;
}

.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.single-product div.product form.cart .quantity .qty:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px var(--color-ring);
}

/* Add to cart button */
.single-product div.product form.cart .single_add_to_cart_button.button,
.single-product div.product form.cart .buy_now_button,
.single-product div.product form.cart .buy-now-button,
.single-product div.product form.cart .single_buy_now_button,
.single-product div.product form.cart .wc-buy-now-btn {
  flex: 1;
  min-height: 48px;
  padding: 12px 28px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-button-text);
  background: var(--color-button-bg);
  background-color: var(--color-button-bg);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.single-product div.product form.cart .single_add_to_cart_button.button:hover,
.single-product div.product form.cart .buy_now_button:hover,
.single-product div.product form.cart .buy-now-button:hover,
.single-product div.product form.cart .single_buy_now_button:hover,
.single-product div.product form.cart .wc-buy-now-btn:hover {
  background: var(--color-button-hover);
  background-color: var(--color-button-hover);
  color: var(--color-button-text-hover);
}

.single-product div.product form.cart .single_add_to_cart_button.button:active,
.single-product div.product form.cart .buy_now_button:active,
.single-product div.product form.cart .buy-now-button:active,
.single-product div.product form.cart .single_buy_now_button:active,
.single-product div.product form.cart .wc-buy-now-btn:active {
  transform: scale(0.98);
}

.single-product div.product form.cart .single_add_to_cart_button.button:focus-visible,
.single-product div.product form.cart .buy_now_button:focus-visible,
.single-product div.product form.cart .buy-now-button:focus-visible,
.single-product div.product form.cart .single_buy_now_button:focus-visible,
.single-product div.product form.cart .wc-buy-now-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-ring);
}

.single-product div.product form.cart .single_add_to_cart_button.button.disabled,
.single-product div.product form.cart .single_add_to_cart_button.button:disabled,
.single-product div.product form.cart .buy_now_button.disabled,
.single-product div.product form.cart .buy_now_button:disabled,
.single-product div.product form.cart .buy-now-button.disabled,
.single-product div.product form.cart .buy-now-button:disabled,
.single-product div.product form.cart .single_buy_now_button.disabled,
.single-product div.product form.cart .single_buy_now_button:disabled,
.single-product div.product form.cart .wc-buy-now-btn.disabled,
.single-product div.product form.cart .wc-buy-now-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === 5.5 TRUST BADGES BANNER === */
.trust-badges-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.trust-badge__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

@media (min-width: 640px) {
  .trust-badges-banner {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

/* === 6. PRODUCT META === */
.product_meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.product_meta .sku {
  color: var(--color-text-primary);
  font-weight: 600;
}

.product_meta a {
  color: var(--color-text-primary);
  text-decoration: underline;
  transition: color 0.2s;
}

.product_meta a:hover {
  color: var(--color-accent);
}

/* === 7. TABS === */
.woocommerce-tabs {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-top: 0;
}

.woocommerce-tabs .tabs.wc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  padding: 0 24px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar {
  display: none;
}

.woocommerce-tabs .tabs li {
  margin: 0;
}

.woocommerce-tabs .tabs li a {
  display: block;
  padding: 16px 20px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

.woocommerce-Tabs-panel {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  line-height: 1.7;
  padding: 24px;
}

.woocommerce-Tabs-panel h2 {
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
  color: var(--color-text-primary);
}

.woocommerce-Tabs-panel p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
  line-height: 1.7;
}

/* Additional info table */
.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.shop_attributes tr {
  border-bottom: 1px solid var(--color-border);
}

.shop_attributes tr:last-child {
  border-bottom: none;
}

.shop_attributes th {
  padding: 12px 16px 12px 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  text-align: left;
  width: 35%;
  vertical-align: top;
}

.shop_attributes td {
  padding: 12px 0;
  font-family: var(--font-primary);
  color: var(--color-text-muted);
}

.shop_attributes td p {
  margin: 0;
}

/* Description table — responsive */
.woocommerce-Tabs-panel--description table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce-Tabs-panel--description table th,
.woocommerce-Tabs-panel--description table td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.woocommerce-Tabs-panel--description table tr:first-child td,
.woocommerce-Tabs-panel--description table th {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  .woocommerce-Tabs-panel--description table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
  }

  .woocommerce-Tabs-panel--description table th,
  .woocommerce-Tabs-panel--description table td {
    border-top: none;
    border-bottom: 1px solid var(--color-border);
  }

  .woocommerce-Tabs-panel--description table tr:last-child td {
    border-bottom: none;
  }

  .woocommerce-Tabs-panel--description table tr td:first-child,
  .woocommerce-Tabs-panel--description table tr th:first-child {
    border-left: none;
  }

  .woocommerce-Tabs-panel--description table tr td:last-child,
  .woocommerce-Tabs-panel--description table tr th:last-child {
    border-right: none;
  }
}

/* === 8. REVIEWS === */
.woocommerce-Reviews {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.woocommerce-Reviews-title {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 20px;
  color: var(--color-text-primary);
}

.woocommerce-Reviews-title span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.woocommerce-noreviews {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Star rating (review form) */
.stars {
  display: flex;
  gap: 2px;
  margin: 0 0 8px;
}

.stars a {
  font-size: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  text-decoration: none;
  transition: color 0.15s;
}

.stars a::before {
  content: "★";
  font-size: 26px;
}

.stars a:hover,
.stars .active {
  color: var(--color-accent);
}

/* Review list */
.commentlist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment_container {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.comment_container .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.comment-text {
  flex: 1;
  min-width: 0;
}

.comment-text .star-rating {
  font-size: 0.8125rem;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.comment-text .meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.woocommerce-review__author {
  font-weight: 700;
  color: var(--color-text-primary);
}

.woocommerce-review__dash {
  margin: 0 4px;
}

.comment-text .description p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Review form */
#review_form_wrapper {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 24px;
}

.comment-respond {
  max-width: 560px;
}

.comment-reply-title {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

.comment-reply-title small a {
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent);
  margin-left: 8px;
  text-decoration: none;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-form p {
  margin: 0;
}

.comment-form label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-navy);
}

.comment-form textarea {
  resize: vertical;
  min-height: 120px;
}

.comment-notes {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.comment-form .required {
  color: var(--color-accent);
}

/* Star rating selector */
.comment-form-rating label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.comment-form-rating label .required {
  color: var(--color-accent);
}

.comment-form-rating p.stars {
  margin: 0;
}

.comment-form-rating p.stars a {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 0;
  position: relative;
  color: var(--color-border);
  text-decoration: none;
}

.comment-form-rating p.stars a::before {
  content: "★";
  font-size: 1.375rem;
  color: var(--color-border);
  transition: color 0.1s;
}

.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:hover ~ a::before,
.comment-form-rating p.stars.selected a.active::before,
.comment-form-rating p.stars.selected a.active ~ a::before {
  color: var(--color-border);
}

.comment-form-rating p.stars:hover a::before,
.comment-form-rating p.stars.selected a::before {
  color: var(--color-accent);
}

.comment-form-rating p.stars:hover a:hover ~ a::before {
  color: var(--color-border);
}

/* Review textarea */
.comment-form-comment label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.comment-form-comment label .required {
  color: var(--color-accent);
}

.comment-form-comment textarea {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg);
  resize: vertical;
  min-height: 120px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.comment-form-comment textarea:focus {
  border-color: var(--color-navy);
}

/* Submit button */
.form-submit {
  margin: 0;
}

.form-submit .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-button-bg);
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 28px;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.form-submit .submit:hover {
  background: var(--color-button-hover);
  background-color: var(--color-button-hover);
  color: var(--color-button-text-hover);
}

.form-submit .submit:active {
  transform: scale(0.97);
}

/* === 9. RELATED PRODUCTS === */
.related.products {
  margin-top: 0;
}

.related.products > h2 {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

.related.products .products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .related.products .products {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Product cards inside related products */
.related.products .product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.related.products .product-card:hover {
  transform: translateY(-3px);
}

.related.products .product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.related.products .product-card__shell {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-subtle);
  aspect-ratio: 3 / 4;
}

.related.products .product-card__inner,
.related.products .product-card__img-wrap {
  width: 100%;
  height: 100%;
}

.related.products .product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.related.products .product-card:hover .product-card__img {
  transform: scale(1.05);
}

/* Quick-view overlay */
.related.products .product-card__cta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background-color: #FFFFFF;
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .related.products .product-card:hover .product-card__cta {
    opacity: 1;
    transform: translateY(0);
  }
}

.related.products .product-card__meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px;
  gap: 4px;
}

.related.products .product-card__info {
  margin-bottom: auto;
}

.related.products .product-card__cat {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}

.related.products .product-card__title {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  transition: color 0.2s;
}

.related.products .product-card:hover .product-card__title {
  color: var(--color-accent);
}

.related.products .product-card__price {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 900;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.related.products .product-card__price ins {
  text-decoration: none;
  color: var(--color-sale);
}

.related.products .product-card__price del {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: line-through;
}

.related.products .product-card__price .woocommerce-Price-amount {
  font-weight: inherit;
  color: inherit;
}

/* Related products: skeleton shown while the AJAX fetch is in flight */
.related.products .product-card--skeleton .product-card__shell {
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-subtle);
  animation: dawp-related-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes dawp-related-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .related.products .product-card--skeleton .product-card__shell {
    animation: none;
  }
}

/* WooCommerce native add-to-cart in related */
.related.products .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-button-bg);
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  margin-top: 8px;
}

.related.products .button:hover {
  background: var(--color-button-hover);
  background-color: var(--color-button-hover);
  color: var(--color-button-text-hover);
}

.related.products .button:active {
  transform: scale(0.97);
}
/* ==========================================================================
   Size Chart Styles — mobile-first, responsive
   ========================================================================== */

.size-chart-wrap {
  max-width: 1100px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

.size-chart-title {
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent), var(--color-button-hover));
  color: #FFFFFF;
  margin: 0 0 12px;
  padding: 14px 10px;
  font-size: 20px;
  border-radius: 8px;
}

.size-chart-subtitle {
  margin: 20px 0 8px;
  padding: 8px 12px;
  background: var(--color-text-primary);
  color: #fff;
  font-size: 15px;
  border-radius: 6px;
}

/* Scroll wrapper: allows horizontal swipe on small screens
   instead of squeezing/breaking the table */
.size-chart-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.size-chart-table {
  width: 100%;
  min-width: 640px; /* keeps columns readable, triggers scroll on mobile */
  border-collapse: collapse;
}

.size-chart-table th,
.size-chart-table td {
  border: 1px solid var(--color-border);
  text-align: center;
  padding: 10px 8px;
  font-size: 14px;
  white-space: nowrap;
}

.size-chart-table thead th {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font-size: 14px;
  position: sticky;
  top: 0;
}

.size-chart-table tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}

.size-chart-table td.size-col {
  font-weight: bold;
  background: var(--color-bg-muted);
}

/* ==========================================================================
   Mobile (< 480px): stack each row into a card instead of horizontal scroll
   ========================================================================== */
@media (max-width: 480px) {
  .size-chart-title {
    font-size: 17px;
    padding: 12px 8px;
  }

  .size-chart-subtitle {
    font-size: 14px;
  }

  .size-chart-scroll {
    overflow-x: visible;
    border: none;
  }

  .size-chart-table {
    min-width: 0;
  }

  .size-chart-table thead {
    display: none;
  }

  .size-chart-table,
  .size-chart-table tbody,
  .size-chart-table tr,
  .size-chart-table td {
    display: block;
    width: 100%;
  }

  .size-chart-table tr {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
  }

  .size-chart-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    white-space: normal;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 8px 12px;
  }

  .size-chart-table td:last-child {
    border-bottom: none;
  }

  .size-chart-table td:empty {
    display: none;
  }

  .size-chart-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #555;
    text-align: left;
    margin-right: 10px;
  }

  .size-chart-table td.size-col {
    font-size: 16px;
    background: #fcf0d0;
    justify-content: center;
  }

  .size-chart-table td.size-col::before {
    content: "";
    margin: 0;
  }
}
/* =========================================================
   DESC2 — CSS OVERRIDE (chỉ đè style, không sửa HTML)
   Dùng !important để thắng inline-style + CSS theme có sẵn
   ========================================================= */

/* ---------- Reset cứng: theme đang set center/uppercase/nền hồng
   cho mọi thẻ con -> phải ép lại toàn bộ trước khi style riêng ---------- */
.desc2,
.desc2 * {
  text-align: left !important;
  text-transform: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
}

/* ---------- Khung tổng ---------- */
.desc2 {
  width: 100% !important;
  margin: 0 auto !important;
  font-family: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.desc2 table {
  width: 100% !important;
	display: block !important;
}
.desc2 td {
	display: block !important;
	border: none !important;
}
.desc2 tr {
	display: flex !important;
}


/* ---------- Tiêu đề mục (Craftsmanship, Fabric & Feel...) ---------- */
.desc2 div[style*="letter-spacing: 2px"] {
  position: relative !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
  margin-top: 28px !important;
  border-bottom: 1px solid #e6f0ea !important;
}
.desc2 div[style*="letter-spacing: 2px"]:first-child {
  margin-top: 0 !important;
}
.desc2 div[style*="letter-spacing: 2px"]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 36px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1a7a3a, #3fbf6f) !important;
  border-radius: 2px !important;
}

/* ---------- Icon placeholder (ô 58px bên trái mỗi tính năng) ---------- */
.desc2 td[style*="width: 58px"] {
  position: relative !important;
  width: 46px !important;
  vertical-align: top !important;
  padding: 2px 14px 0 0 !important;
	border: none !important;
} 
.desc2 td[style*="width: 58px"]::before {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1a7a3a, #3fbf6f) !important;
  box-shadow: 0 4px 10px rgba(26, 122, 58, 0.25) !important;
}

/* ---------- Tiêu đề từng tính năng (chữ đậm, đen) ---------- */
.desc2 div[style*="color: #1a1a1a"] {
  font-size: 16.5px !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 5px !important;
}

/* ---------- Mô tả từng tính năng (chữ xám) ---------- */
.desc2 div[style*="color: #666"] {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #7a8580 !important;
}

/* ---------- Khối bảng tính năng: nền mint dịu, không phải hồng ---------- */
.desc2 table[style*="margin: 0 0 24px"],
.desc2 table[style*="margin: 0 0 14px"] {
  background-color: #f6faf7 !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 1px solid #edf3ef !important;
}
/* Bảng chứa 2 cột "Why You'll Love It" không cần nền (đã có bảng con bên trong) */
.desc2 table[style*="margin: 0 0 24px"] table,
.desc2 table[style*="margin: 0 0 14px"] table {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Chấm bullet (Why You'll Love It / Care Instructions) ---------- */
.desc2 div[style*="border-radius: 50%"] {
  width: 8px !important;
  height: 8px !important;
  background: linear-gradient(135deg, #1a7a3a, #3fbf6f) !important;
  box-shadow: 0 0 0 4px rgba(26, 122, 58, 0.1) !important;
}

/* ---------- Badge "Regular Fit" ---------- */
.desc2 span[style*="border-radius: 20px"] {
  background: linear-gradient(135deg, #1a7a3a, #3fbf6f) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 6px 20px !important;
  box-shadow: 0 4px 14px rgba(26, 122, 58, 0.28) !important;
}

/* ---------- Khối ghi chú cuối (Note) ---------- */
.desc2 div[style*="border-left: 3px solid #1a7a3a"] {
  background: linear-gradient(135deg, #f2faf5, #e8f4ec) !important;
  border-left: 4px solid #1a7a3a !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: inset 0 0 0 1px rgba(26, 122, 58, 0.06) !important;
}
.desc2 div[style*="border-left: 3px solid #1a7a3a"] div {
  color: #4c5a53 !important;
}

/* ---------- Responsive cho mobile ---------- */
@media (max-width: 480px) {
  .desc2 {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid #eef2ef !important;
  }
  .desc2 div[style*="letter-spacing: 2px"] {
    font-size: 11.5px !important;
    margin-top: 22px !important;
    margin-bottom: 14px !important;
  }
  .desc2 table[style*="margin: 0 0 24px"],
  .desc2 table[style*="margin: 0 0 14px"] {
    padding: 12px 12px !important;
    margin-bottom: 10px !important;
  }
  .desc2 td[style*="width: 58px"] {
    width: 38px !important;
    padding: 2px 10px 0 0 !important;
  }
  .desc2 td[style*="width: 58px"]::before {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }
  .desc2 div[style*="color: #1a1a1a"] {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }
  .desc2 div[style*="color: #666"] {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  /* Lưới 2 cột "Why You'll Love It" xếp thành 1 cột trên mobile */
  .desc2 td[style*="width: 50%"] {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }
  .desc2 span[style*="border-radius: 20px"] {
    font-size: 12px !important;
    padding: 5px 16px !important;
  }
  .desc2 div[style*="border-left: 3px solid #1a7a3a"] {
    padding: 13px 14px !important;
    font-size: 13px !important;
  }
}
.po-card {
    font-family: 'Arial', sans-serif;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  }

  .po-header {
    background: #1a1a2e;
    padding: 22px 28px 18px;
    text-align: center;
  }

  .po-header h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
  }

  .po-header p {
    color: #aab0cc;
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 0.03em;
  }

  .po-diagram {
    display: flex;
    justify-content: center;
    padding: 24px 28px 12px;
    border-bottom: 1px solid #efefef;
  }

  .po-diagram svg { display: block; }

  .po-section {
    padding: 20px 28px 0;
  }

  .po-section-cm { padding-top: 16px; }

  .po-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
  }

  .po-section-label::before,
  .po-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
  }

  .po-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
  }

  .po-card thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1.5px solid #e8e8e8;
  }

  .po-card thead th:first-child { text-align: left; padding-left: 0; }

  .po-card tbody tr { border-bottom: 1px solid #f0f0f0; }
  .po-card tbody tr:last-child { border-bottom: none; }
  .po-card tbody tr:nth-child(even) { background: #fafafa; }

  .po-card tbody td {
    padding: 10px 10px;
    text-align: center;
    color: #222;
  }

  .po-card tbody td:first-child {
    text-align: left;
    padding-left: 0;
    font-weight: 700;
    font-size: 14px;
    color: #1a1a2e;
  }

  .po-note {
    margin: 16px 28px 20px;
    font-size: 11.5px;
    color: #c0392b;
    text-align: center;
    font-style: italic;
  }