/*
 * Child theme main stylesheet
 * Page-specific or component-specific CSS should live here first.
 */

.brand__text {
  display: block;
}

/* Narrow phones: the tagline has letter-spacing:2px + text-transform:uppercase,
   which makes it ~302px wide and causes the brand anchor to overflow the 375px
   viewport. Hide it below 640px so the brand name stays fully visible and the
   header row fits without horizontal scroll. Desktop and tablet (>640px) are
   unaffected. The existing 360px letter-spacing tweak in style.css becomes
   inert once this rule applies, which is harmless. */
@media (max-width: 640px) {
  .brand__tagline {
    display: none;
  }
}

/* Hero badge: prevent label from overflowing the gold circle.
   "QUY CÁCH THAM KHẢO" in 9px uppercase + 0.5px letter-spacing spans ~124px,
   visibly wider than the ~99px chord available at the label's position inside
   a 104px circle. Cap max-width so the browser wraps at word boundaries into
   two balanced lines, and zero out letter-spacing that was adding extra width. */
.hero__badge-num {
  font-size: 20px;
}

.hero__badge-label {
  font-size: 8px;
  max-width: 72px;
  overflow-wrap: break-word;
  letter-spacing: 0;
}

/* Hero headline: rebalance short heading lines so a single word like "Tây"
   does not sit alone on a desktop line. text-wrap: balance is ideal for
   headings; degrades silently in older browsers. */
.hero__title {
  text-wrap: balance;
}

.hero__visual .hero__photo-img {
  box-sizing: border-box;
  display: block;
  width: min(420px, 90%);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 6px solid rgba(201, 154, 72, .4);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.category-card__img img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ==========================================================================
   Homepage featured section — warm cream band + equal-width columns
   ========================================================================== */

/* Full-bleed warm cream surface behind the featured strip */
.featured-section {
  background: var(--bg-soft);
}

/* Override auto-fit: use --cols (set inline from PHP item count) so five
   items give exactly five equal columns; fewer items fill proportionally. */
.featured-grid {
  grid-template-columns: repeat(var(--cols, 4), 1fr);
}

.featured-card__img {
  overflow: hidden;
}

/* No-image fallback: diagonal warm-beige stripe with centred muted label.
   Keeps role="img" + aria-label on the span — accessible, visible text preserved. */
.featured-card__img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    #f7ece0,
    #f7ece0 12px,
    #eddcca 12px,
    #eddcca 24px
  );
  color: #a8896c;
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

/* Tablet (641–1023px): cap at 4 columns to avoid five cramped items;
   mobile (≤640px) switches to horizontal-swipe flex via style.css. */
@media (min-width: 641px) and (max-width: 1023px) {
  .featured-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.featured-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-card__img {
  width: 100%;
  /* height:auto overrides the presentational height="300" attribute that the
     browser maps to a UA-level height:300px, which was keeping cards at
     156×300px even though the loaded image is square. With height:auto,
     aspect-ratio:1 governs and the box stays width×width for any source ratio.
     object-fit:cover (already present above) crops without distortion. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  padding: 0;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__logo .custom-logo-link,
.brand__logo .custom-logo {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 56px;
  object-fit: contain;
}

.drawer__nav .desktop-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drawer__nav .menu-item {
  display: block;
}

.drawer__nav .desktop-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.topbar__social .social-block,
.footer-social .social-block {
  display: contents;
}

.topbar__social .social-list,
.footer-social .social-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__social .social-list img,
.footer-social .social-list img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.woocommerce-content {
  padding-top: 32px;
  padding-bottom: 56px;
}

.page-content .entry-content > * + * {
  margin-top: 1.25em;
}

.page-content .entry-content h2,
.page-content .entry-content h3,
.page-content .entry-content h4 {
  color: var(--maroon);
  line-height: 1.25;
}

.page-content .entry-content h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.page-content .entry-content h3 {
  font-size: clamp(20px, 2.5vw, 27px);
}

.page-content .entry-content p,
.page-content .entry-content li {
  color: var(--text-main);
  line-height: 1.8;
}

.page-content .entry-content img,
.page-entry__featured-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.page-entry__featured-image {
  margin-bottom: 28px;
}

.story-hero__visual img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.story-related-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-content .entry-content .alignwide {
  max-width: min(100% + 120px, 1360px);
  margin-left: auto;
  margin-right: auto;
}

.page-content .entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Product detail gallery & variable product styling */
.gallery-main img,
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.gallery-thumb {
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
}

.gallery-thumb.is-active {
  border-color: var(--maroon);
}

/* ==========================================================================
   Product detail page — responsive grid & variable price hierarchy
   ========================================================================== */

/* Mobile ≤768px: single column, image first, full-width stack */
@media (max-width: 768px) {
  .detail-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .detail-gallery {
    order: -1;
    width: 100%;
  }

  .gallery-main {
    width: 100%;
  }
}

/* Tablet/narrow desktop (641–1024px): prevent narrow columns at intermediate widths.
   At 650px the auto-fit minmax can create awkward narrow columns. Force balanced
   two-column until 768px where we switch to mobile single-column. */
@media (min-width: 769px) and (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}


/* Variable product price range: reduce emphasis to avoid dominating the layout.
   The large variable price range (500.000 đ – 1.000.000 đ) should be smaller
   than the selected variation price, which appears in .woocommerce-variation-price
   after a variation is chosen. Scoped through .woocommerce div.product to outrank
   WooCommerce core price styles. */
.woocommerce div.product .detail-price-box .detail-price .woocommerce-price-suffix {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}

/* Variable product: the initial price range before variation selection.
   Reduce size and emphasis compared to the selected variation price. */
.woocommerce div.product .detail-price-box .price,
.woocommerce div.product .detail-price-box .detail-price > .price {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  display: block;
}

.woocommerce div.product .detail-price-box .price .amount,
.woocommerce div.product .detail-price-box .detail-price > .price .amount {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

/* Variable product .detail-price wrapper: override the initial range display.
   The markup is div.detail-price-box > div.detail-price containing the Woo price HTML.
   Scope to product-type-variable to avoid affecting simple products. */
.woocommerce div.product.product-type-variable .detail-price-box .detail-price {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.woocommerce div.product.product-type-variable .detail-price-box .detail-price .price,
.woocommerce div.product.product-type-variable .detail-price-box .detail-price .price .amount,
.woocommerce div.product.product-type-variable .detail-price-box .detail-price .woocommerce-Price-amount {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.woocommerce div.product.product-type-variable .detail-price-box .detail-price .woocommerce-Price-currencySymbol {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}


/* Hide the duplicate variation price below the selector on variable product detail.
   The main price box now shows the selected variation price via JS. */
.woocommerce div.product form.cart.detail-actions-variable + .woocommerce-variation-price,
form.cart.detail-actions-variable .woocommerce-variation-price {
  display: none !important;
}

/* Variable product main price box: selected variation state.
   When a variation is selected, the main price displays at 28px burgundy
   instead of the 18px muted range. */
.woocommerce div.product.product-type-variable .detail-price-box.is-variation-selected .detail-price {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--maroon) !important;
}

.woocommerce div.product.product-type-variable .detail-price-box.is-variation-selected .detail-price .price,
.woocommerce div.product.product-type-variable .detail-price-box.is-variation-selected .detail-price .price .amount,
.woocommerce div.product.product-type-variable .detail-price-box.is-variation-selected .detail-price .woocommerce-Price-amount,
.woocommerce div.product.product-type-variable .detail-price-box.is-variation-selected .detail-price .woocommerce-Price-currencySymbol {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--maroon) !important;
}

.detail-actions-wrap {
  margin-top: 20px;
}

/* Variable product form wrapper */
.detail-actions-variable {
  margin-top: 6px;
}

.detail-actions-variable.cart {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Tighter vertical spacing between form sections */
}

/* Variations table: weight/size selector — compact horizontal layout */
.detail-actions-variable .variations {
  width: 100%;
  border-collapse: collapse;
  margin: 0; /* No bottom margin, gap handled by parent container */
}

/* Desktop/tablet: horizontal row with fixed-width label column */
.detail-actions-variable .variations tr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.detail-actions-variable .variations th.label,
.detail-actions-variable .variations td.label {
  flex: 0 0 100px; /* Fixed-width label column for alignment */
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
  text-align: left;
}

.detail-actions-variable .variations td.value {
  flex: 1 1 auto; /* Take remaining width */
  min-width: 0; /* Allow flex shrinking beside label/reset on narrow tablets */
  display: flex;
  flex-wrap: nowrap; /* Keep select and reset on same row */
  gap: 12px;
  align-items: center;
}

/* Weight/size select dropdown — match brand burgundy/gold */
.detail-actions-variable .variations select {
  flex: 1 1 auto; /* Take available width */
  width: 100%; /* Fill container */
  min-width: 0; /* Allow flex shrinking to prevent overflow */
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.detail-actions-variable .variations select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 154, 72, 0.2);
}

.detail-actions-variable .reset_variations {
  flex: 0 0 auto; /* Fixed width, aligned right */
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap; /* Prevent wrapping */
}

.detail-actions-variable .reset_variations:hover {
  color: var(--maroon);
}

/* Mobile: stack label above full-width select, keep reset usable */
@media (max-width: 767px) {
  .detail-actions-variable .variations tr {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .detail-actions-variable .variations th.label,
  .detail-actions-variable .variations td.label {
    flex: 0 0 auto;
    text-align: left;
  }

  .detail-actions-variable .variations td.value {
    flex-wrap: wrap; /* Allow wrapping on very narrow screens */
  }

  .detail-actions-variable .variations select {
    width: 100%; /* Full width on mobile */
    min-width: 0;
  }
}

/* Variation controls: quantity + buttons */
.detail-actions-variable .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 0; /* No top margin, spacing handled by parent gap */
}

.detail-actions-variable .qty-stepper {
  flex: 0 0 auto;
}
/* Variable product add-to-cart button — burgundy solid primary action.
   Scoped through form.cart.detail-actions-variable to outrank WooCommerce core
   button styles without broad !important. */
.woocommerce div.product form.cart.detail-actions-variable .single_add_to_cart_button.btn-add-cart {
  flex: 1;
  min-width: 170px;
  background: var(--maroon) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 24px;
  border-radius: 12px;
  min-height: 48px;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(139, 30, 45, .28);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  transition: background .2s, box-shadow .2s;
}

.woocommerce div.product form.cart.detail-actions-variable .single_add_to_cart_button.btn-add-cart:hover {
  background: var(--maroon-dark) !important;
}

.woocommerce div.product form.cart.detail-actions-variable .single_add_to_cart_button.btn-add-cart:disabled,
.woocommerce div.product form.cart.detail-actions-variable .single_add_to_cart_button.btn-add-cart.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
/* Mobile: responsive button layout at narrow widths */
@media (max-width: 620px) {
  .detail-actions-variable .woocommerce-variation-add-to-cart {
    gap: 10px;
  }

  .detail-actions-variable .qty-stepper {
    flex: 0 0 auto;
  }

  .detail-actions-variable .single_add_to_cart_button {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
}

.qty-stepper input.qty {
  width: 52px;
  height: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
  padding: 0;
  -moz-appearance: textfield;
}

.qty-stepper input.qty::-webkit-outer-spin-button,
.qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   Homepage bestsellers — products-rail
   All rules are scoped to .products-rail so the shared .product-grid used on
   shop, archive, and related-products pages is completely untouched.
   The .products-rail wrapper only appears in home-bestsellers.php.
   ========================================================================== */

/* ---- scroll track ---- */
.products-rail__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* JS sets scrollLeft; CSS scroll-behavior:smooth drives the animation.
     The global prefers-reduced-motion rule in style.css already overrides
     scroll-behavior to auto !important, so no extra JS check is needed. */
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  /* overflow-x:auto forces overflow-y:auto (CSS spec), which clips paint
     overflow. padding-top gives the product-card hover translateY(-5px)
     clearance; padding-bottom accommodates the 0 16px 32px box-shadow. */
  padding-top: 8px;
  padding-bottom: 20px;
}

.products-rail__track::-webkit-scrollbar {
  display: none;
}

/* ---- grid override: flex one-row, no wrapping ----
   Replaces the shared display:grid with a flex row of fixed-width cards.
   Each card's flex-basis percentage resolves against .product-grid's width,
   which equals the visible (non-scrolling) track width, so exactly N cards
   fill the viewport at each breakpoint. */
.products-rail .product-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
}

/* Desktop ≥1024px — 4 cards visible */
.products-rail .product-card {
  position: relative;
  flex: 0 0 calc((100% - 3 * 18px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

/* Tablet 641–1023px — 3 cards visible */
@media (max-width: 1023px) {
  .products-rail .product-card {
    flex: 0 0 calc((100% - 2 * 18px) / 3);
  }
}

/* Phones ≤640px — 2 cards visible; gap matches the shared grid's 12px */
@media (max-width: 640px) {
  .products-rail .product-grid {
    gap: 12px;
  }

  .products-rail .product-card {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}

/* ---- navigation controls (JS toggles [hidden]) ---- */
.products-rail__controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.products-rail__controls[hidden] {
  display: none;
}

.products-rail__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
}

.products-rail__btn:disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .products-rail__btn:not(:disabled):hover {
    background: var(--maroon);
    color: #fff;
    border-color: var(--maroon);
  }
}