/* =========================================================
 * V1.8 — REFINED VISUAL (Google Material / Sezane polish)
 * Append at end of style.css build via PHP enqueue
 * ========================================================= */

/* === SHOP — refined card === */
html .shop-products ul.products,
html .shop-products .woocommerce ul.products {
  gap: 24px !important;
  padding: 0 32px 80px !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

html ul.products li.product {
  padding: 0 0 16px !important;
  background: transparent;
  cursor: pointer;
}

html ul.products li.product a img,
html ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
  transition: transform 0.7s cubic-bezier(.2,.6,.2,1) !important;
  background: #f3eee5 !important;
}

html ul.products li.product a:hover img,
html ul.products li.product:hover img {
  transform: scale(1.025) !important;
}

html ul.products li.product .woocommerce-loop-product__title,
html .shop-products ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  margin: 20px 0 6px 0 !important;
  padding: 0 !important;
  color: var(--m-ink, #2A211C) !important;
}

html ul.products li.product .price,
html .shop-products ul.products li.product .price {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  color: var(--m-soft, #5A4F47) !important;
}

html ul.products li.product .posted_in,
html ul.products li.product .category-link,
html .shop-products ul.products li.product a[href*="/danh-muc"] {
  font-size: 9.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--m-muted, #94877D) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  font-weight: 500;
}

html ul.products li.product .yith-wcqv-button {
  bottom: 16px !important;
  padding: 11px 24px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(42,33,28,0.85) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (max-width: 880px) {
  html .shop-products ul.products,
  html .shop-products .woocommerce ul.products {
    gap: 16px !important;
    padding: 0 16px 40px !important;
  }
  html ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
}

/* =========================================================
 * PDP REFINED
 * ========================================================= */
html body.single-product .product_title,
html body.single-product h1.product_title {
  font-family: var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  color: var(--m-ink) !important;
}

html body.single-product .motoko-subtitle,
html body.single-product .product-subtitle {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--m-gold, #B89868) !important;
  margin: 0 0 24px !important;
  font-weight: 500;
}

html body.single-product .product .price,
html body.single-product .summary .price {
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--m-ink) !important;
  margin: 0 0 24px !important;
  display: block !important;
}

html body.single-product .woocommerce-product-details__short-description,
html body.single-product .summary > p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--m-soft) !important;
  margin: 0 0 28px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--m-line) !important;
}

html body.single-product .variations th,
html body.single-product .variations .label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--m-ink) !important;
  padding: 0 0 12px !important;
  border: none !important;
}

/* Color swatches: round circles */
html body.single-product .variable-items-wrapper.color-variable-wrapper .variable-item,
html body.single-product .variable-items-wrapper .variable-item.color-variable-item {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  border: 1px solid var(--m-line) !important;
  margin-right: 10px !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

html body.single-product .variable-item.color-variable-item .variable-item-span {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}

html body.single-product .variable-item.color-variable-item:hover {
  transform: scale(1.1) !important;
  border-color: var(--m-ink) !important;
}

html body.single-product .variable-item.color-variable-item.selected {
  border: 1px solid var(--m-ink) !important;
  box-shadow: 0 0 0 1px var(--m-ink), inset 0 0 0 3px #fff !important;
}

/* Size buttons */
html body.single-product .variable-items-wrapper.button-variable-wrapper .variable-item,
html body.single-product .variable-item.button-variable-item {
  min-width: 56px !important;
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid var(--m-line) !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  border-radius: 0 !important;
  margin: 0 8px 8px 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  box-shadow: none !important;
  text-align: center;
}

html body.single-product .variable-item.button-variable-item:hover {
  background: var(--m-cream) !important;
  border-color: var(--m-ink) !important;
}

html body.single-product .variable-item.button-variable-item.selected {
  background: var(--m-ink) !important;
  color: var(--m-paper) !important;
  border-color: var(--m-ink) !important;
}

html body.single-product .variable-item.button-variable-item.disabled {
  opacity: 0.35 !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

html body.single-product .reset_variations {
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--m-muted) !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 2px;
  text-decoration: none !important;
  transition: all 0.2s;
  margin-top: 8px !important;
  display: inline-block;
  visibility: visible !important;
}
html body.single-product .reset_variations:hover {
  color: var(--m-ink) !important;
  border-bottom-color: var(--m-ink) !important;
}

html body.single-product .stock {
  font-size: 12px !important;
  color: var(--m-soft) !important;
  margin: 24px 0 12px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}
html body.single-product .stock.in-stock::before {
  content: "";
  width: 8px; height: 8px;
  background: #4caf85;
  border-radius: 50%;
  display: inline-block;
  animation: mtk-pulse 2s infinite;
}
@keyframes mtk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,133,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(76,175,133,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,133,0); }
}

html body.single-product .single_add_to_cart_button {
  width: 100% !important;
  padding: 18px 24px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  background: var(--m-ink) !important;
  color: var(--m-paper) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px !important;
}
html body.single-product .single_add_to_cart_button:hover {
  background: var(--m-gold, #B89868) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(184,152,104,0.5);
}

html body.single-product .product_meta,
html body.single-product .product_meta > span {
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--m-muted) !important;
  display: block;
  margin: 6px 0 !important;
  border: none !important;
  padding: 0 !important;
}
html body.single-product .product_meta a {
  color: var(--m-soft) !important;
  text-decoration: none !important;
}

/* Bottom tabs */
html body.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--m-line) !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  text-align: center;
  background: transparent !important;
}
html body.single-product .woocommerce-tabs ul.tabs::before,
html body.single-product .woocommerce-tabs ul.tabs::after { display: none !important; }
html body.single-product .woocommerce-tabs ul.tabs li {
  display: inline-block !important;
  margin: 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
html body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block !important;
  padding: 16px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--m-muted) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
}
html body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--m-ink) !important;
  border-bottom-color: var(--m-ink) !important;
}

html body.single-product .woocommerce-tabs .panel {
  padding: 24px 16% !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: var(--m-soft) !important;
}
html body.single-product .woocommerce-tabs .panel ul {
  padding-left: 20px;
  margin: 16px 0;
}
html body.single-product .woocommerce-tabs .panel ul li {
  margin-bottom: 6px;
}

/* Related products */
html body.single-product .related.products,
html body.single-product section.up-sells {
  border-top: 1px solid var(--m-line);
  margin-top: 80px !important;
  padding: 80px 32px !important;
  background: var(--m-paper);
}
html body.single-product .related.products > h2 {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 48px !important;
  font-weight: 500 !important;
}

html body.single-product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
  max-width: 1320px;
  margin: 0 auto !important;
}

/* Breadcrumb + wrapper padding */
html body.single-product .ct-breadcrumbs {
  max-width: 1600px !important;
  margin: 28px auto 0 !important;
  padding: 0 32px !important;
}

html body.single-product .product-entry-wrapper {
  max-width: 1600px !important;
  margin: 32px auto !important;
  padding: 0 32px !important;
  gap: 80px !important;
}

@media (max-width: 880px) {
  html body.single-product .product-entry-wrapper {
    padding: 0 16px !important;
    margin: 16px auto !important;
    gap: 24px !important;
  }
  html body.single-product .related.products { padding: 48px 16px !important; }
  html body.single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  html body.single-product .woocommerce-tabs .panel { padding: 24px 16px !important; }
}