/* ============================================================
   Storefront — product detail page (single-product view).
   Loaded once per product page; covers:
     - the customer review widget (.pr-*)
     - swatch/size selected state (.attr--item.active)
     - the slide-in drawers (#product-info-drawer + #size-chart-drawer)
   ============================================================ */

/* --- Review widget ------------------------------------------ */
.pr-section { box-sizing: border-box; }
.pr-section,
.pr-section * { white-space: normal !important; }
.pr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid #13273F; padding-bottom: 10px; margin-bottom: 18px;
}
.pr-head h3 { font-size: 20px; font-weight: 600; }
.pr-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.pr-item { border: 1px solid #eee; padding: 16px; }
.pr-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.pr-meta { color: #888; font-size: 12px; margin: 4px 0 8px; }
.pr-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.pr-body { font-size: 14px; color: #333; line-height: 1.5; }
.pr-form { background: #fafafa; padding: 18px; border: 1px solid #eee; }
.pr-form h4 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.pr-rate { display: flex; gap: 6px; margin-bottom: 10px; font-size: 24px; }
.pr-rate label { cursor: pointer; color: #ddd; }
.pr-rate input { display: none; }
.pr-rate label.is-on { color: #f5a623; }
.pr-form input[type=text],
.pr-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; font-size: 14px; margin-bottom: 10px; }
.pr-form button { padding: 10px 22px; background: #13273F; color: #F4F0EA; border: 0; cursor: pointer; font-size: 14px; }
.pr-empty { color: #888; font-size: 14px; padding: 24px 0; text-align: center; }

/* --- Selected swatch / size --------------------------------- */
.attr--item.active { outline: 2px solid #13273F; outline-offset: 1px; }
.attr--item.primary.active img { box-shadow: 0 0 0 2px #13273F; }

/* --- Brand-palette overrides for the Pancake-exported product detail
       page. Pancake's static bundle paints text in #000 / #181818 via
       CSS variables (--color_xxx) at high specificity, so we override
       explicitly to navy. Buttons (Thêm vào giỏ / Mua ngay) flip to
       the navy/cream button treatment used elsewhere. ----------------- */

/* Breadcrumb + brand / product header text */
.bread-crumb, .bread-crumb a, .bread-crumb span,
.x-bread-crumb, .x-bread-crumb *,
.x-vendor, .x-vendor *,
.x-product-name, .x-product-name *,
#shop-price, .x-price, .x-price *,
.x-quantity, .x-quantity *,
.x-attribute, .x-attribute .attr--item,
.x-text, .x-text *,
.ql-editor, .ql-editor * {
  color: #13273F !important;
}

/* Preview rows under each accordion header (Thông tin sản phẩm /
   Chính sách vận chuyển / Chính sách đổi trả) — smaller + muted grey
   so the navy headline stays the visual focus.

   Three different markup shapes from Pancake:
   - "Thông tin sản phẩm" uses .text-dataset-wrapper
   - "Chính sách vận chuyển" preview = #TEXT-ksb3ue8v
   - "Chính sách đổi trả" preview = #TEXT-z9b597qy */
.text-dataset-wrapper,
.text-dataset-wrapper *,
.x-text .text-dataset-wrapper,
.x-text .text-dataset-wrapper *,
#TEXT-ksb3ue8v,
#TEXT-ksb3ue8v *,
#TEXT-z9b597qy,
#TEXT-z9b597qy * {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #888 !important;
  font-weight: 400 !important;
}

/* Size / colour swatch borders */
.attr--item {
  border-color: #13273F !important;
}

/* "Thêm vào giỏ" + "Mua ngay" — navy fill + cream label.
   Same treatment as home CTA / tab buttons. */
#BUTTON-of01yqxm .x-button-wrapper,
#BUTTON-of01yqxm .x-button,
#BUTTON-7bt8rwbd .x-button-wrapper,
#BUTTON-7bt8rwbd .x-button {
  background: #13273F !important;
  border-color: #13273F !important;
  color: #F4F0EA !important;
}
#BUTTON-of01yqxm:hover .x-button-wrapper,
#BUTTON-of01yqxm:hover .x-button,
#BUTTON-7bt8rwbd:hover .x-button-wrapper,
#BUTTON-7bt8rwbd:hover .x-button {
  background: #F4F0EA !important;
  color: #13273F !important;
  border-color: #13273F !important;
}

/* --- Slide-in drawers (product-info + size-chart) ----------- */
/* Shared base — both drawers use the same overlay + sliding sheet. */
#product-info-overlay,
#size-chart-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 99998;
}
#product-info-overlay.is-open,
#size-chart-overlay.is-open { opacity: 1; visibility: visible; }
#product-info-drawer,
#size-chart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; height: 100vh;
  width: min(560px, 100vw); background: #fff; z-index: 99999;
  box-shadow: -6px 0 24px rgba(0, 0, 0, .15);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  display: flex; flex-direction: column; color: #222;
}
#product-info-drawer.is-open,
#size-chart-drawer.is-open { transform: translateX(0); }
#product-info-drawer .pid-head,
#size-chart-drawer .pid-head {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 24px 14px; border-bottom: 1px solid #eee;
}
#product-info-drawer .pid-head h3,
#size-chart-drawer .pid-head h3 {
  font-size: 17px; font-weight: 600; margin: 0; flex: 1; text-align: center;
}
#product-info-drawer .pid-close,
#size-chart-drawer .pid-close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  cursor: pointer; color: #555; padding: 4px 8px;
}
#product-info-drawer .pid-body,
#size-chart-drawer .pid-body {
  flex: 1; overflow-y: auto; padding: 22px 24px 40px;
  font-size: 14px; line-height: 1.6;
}
#product-info-drawer .pid-body img,
#size-chart-drawer .pid-body img { max-width: 100%; height: auto; }

/* Size-chart-specific: clean grid for the size table. */
#size-chart-drawer .pid-body table {
  width: 100%; border-collapse: collapse; margin: 12px 0;
}
#size-chart-drawer .pid-body table th,
#size-chart-drawer .pid-body table td {
  border: 1px solid #eee; padding: 8px 10px; text-align: center; font-size: 13px;
}
#size-chart-drawer .pid-body table th { background: #fafafa; font-weight: 600; }

/* "Hướng dẫn chọn size" footer link — global, set in Settings → Bảng size. */
#size-chart-drawer .pid-foot-link { text-align: center; margin: 22px 0 4px; }
#size-chart-drawer .pid-foot-link a {
  color: #13273F; text-decoration: underline; text-underline-offset: 3px;
  font-size: 14px; font-weight: 500;
}
#size-chart-drawer .pid-foot-link a:hover { color: #c00; }