/* Chuẩn Sâm Korea — components: buttons, badges, cards, breadcrumb, decorative motifs.
   Split from assets/site.css — see docs/SOURCE-AUDIT.md */

/* ---------- skip link (keyboard bypass, WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--fg);
  color: #F3E6C8;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: top 150ms ease;
}
.skip-link:focus-visible {
  top: 12px;
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
}

/* ---------- eyebrow / section labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
}

/* ---------- buttons ---------- */
.btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle diagonal light sweep on hover — a single quick pass, not a loop,
   so it reads as a polished one-time flourish rather than a distracting
   idle animation. Most buttons on this site are `<a class="btn-primary">
   plain text</a>` with no wrapped child element for the label, so the
   sweep needs `z-index: -1` (not a positive value) — within the button's
   own isolated stacking context (`isolation: isolate` above), a negative
   z-index paints above the button's own background/border but still
   BELOW its normal in-flow text content, which paints next regardless of
   z-index since it's non-positioned. A positive z-index here would sit
   the sweep on top of and briefly wash out the label text instead. */
.btn-primary::before, .btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.15) 54%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-primary:hover::before, .btn-outline:hover::before { transform: translateX(120%); transition: transform 650ms cubic-bezier(0.2,0,0,1); }
@media (prefers-reduced-motion: reduce) { .btn-primary::before, .btn-outline::before { display: none; } }
.btn-primary {
  background: var(--accent-deep);
  color: #FDF3E7;
  box-shadow: 0 12px 24px -10px rgba(139, 30, 36, 0.55);
}
.btn-primary:hover { background: var(--accent-deep-dark); transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(139, 30, 36, 0.65); }
.btn-primary:active { background: var(--accent-deep-dark); transform: translateY(0) scale(0.97); }
.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--fg);
  background: transparent;
}
.btn-outline::before { background: linear-gradient(115deg, transparent 30%, rgba(184,134,59,.16) 48%, rgba(184,134,59,.08) 54%, transparent 70%); }
.btn-outline:hover { border-color: var(--accent); background: rgba(184,134,59,0.08); transform: translateY(-1px); }
.btn-outline:active { background: rgba(184,134,59,0.14); transform: scale(0.97); }

/* ---------- badges / tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #9C7228;
  color: #FFF7E6;
}
.badge.tier-signature { background: var(--accent-deep); }
.badge.tier-luxury { background: #3A2618; }

/* ---------- product cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  /* WooCommerce's own core CSS floats .woocommerce-ordering (the "Sắp xếp"
     sort dropdown, only present now that /danh-muc/ renders via the real
     WC archive template) right — without clearing it, this grid's own
     outer width gets squeezed into whatever space is left beside that
     float instead of dropping below it, most visibly at mobile widths
     where the grid should be full-width single-column. Confirmed via a
     real render: grid measured 131px wide (squeezed beside a 223px float)
     instead of the expected ~340px full-width at a 390px viewport. */
  clear: both;
}
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-card .thumb {
  aspect-ratio: 4/3.1;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .thumb .badge { position: absolute; top: 12px; left: 12px; }
.product-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card .set-no { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.product-card h3 { font-size: 20px; }
.product-card .desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.product-card .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border); }
/* Real bug found + fixed 2026-09-04: this was a bare `.price` selector, not
   scoped like every sibling rule around it. WooCommerce itself stamps a
   plain `price` class (among others) onto its own price elements in lots of
   places that have nothing to do with this product card — most visibly the
   checkout/cart block's line-item price
   (`wc-block-components-order-summary-item__individual-prices price ...`) —
   so this 21px bold serif card-price styling was leaking straight into the
   checkout order-summary panel and blowing its compact row height, pushing
   the price outside its own frame.
   Scoped to the two places this markup is actually meant for:
   `.product-card .price` (the grid/list price) AND `.info-panel .price`
   (needed for the quote-only CTA link — csk_woocommerce_quote_price_html()
   in inc/woocommerce.php returns `<a class="price quote-price">`, nested
   *inside* the single-product page's own `<p class="price">`, so it's a
   `.price` element in its own right, not just covered by the existing
   `.info-panel > p.price` direct-child rule). Everywhere else `.price`
   appears — checkout blocks, cart blocks, mini-cart — now correctly falls
   back to WooCommerce's own compact default styling instead of this. */
.product-card .price,
.info-panel .price { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--accent-deep); font-size: 21px; }
.product-card .price .vat,
.info-panel .price .vat { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.product-card .arrow-link { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 4px; }

/* Real "Thêm vào giỏ hàng" control (added 2026-08-31, only for real-priced
   purchasable products — quote-only products keep the .arrow-link above
   instead). WooCommerce's own loop/add-to-cart.php outputs a real <a> with
   its own text; that text is kept in the DOM for screen readers/no-CSS
   fallback but visually replaced with a compact cart icon to fit this
   card's tight price-row space (a full-width text button reads better on
   the single-product page's own bigger layout, not here). */
/* .product-card .price-row .card-add-to-cart (3 classes, 0 elements) is used
   here — not the shorter .product-card .card-add-to-cart — specifically to
   out-specificity WooCommerce's own core `.woocommerce a.button` rule
   (2 classes + 1 element), which otherwise wins the real-world CSS-class
   list this button actually ships with: "button add_to_cart_button
   ajax_add_to_cart card-add-to-cart" (those first 3 classes are load-
   bearing for WC's own AJAX click-handler JS and must be kept, not
   replaced — see the PHP comment in template-parts/product/card.php).
   Confirmed via a real computed-style check this was genuinely needed:
   before this 3-class chain, WC's own rule won and the button rendered as
   a plain 3px-radius grey rectangle instead of the intended circular icon. */
.product-card .price-row .card-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-deep);
  color: transparent;
  font-size: 0;
  position: relative;
  transition: transform 150ms ease, background-color 150ms ease;
}
.product-card .price-row .card-add-to-cart::before {
  content: "🛒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  /* Explicit, not inherited — the parent link sets color:transparent to hide
     its own real text ("Thêm vào giỏ hàng"), and on a system with no color-
     emoji font the 🛒 glyph falls back to a plain monochrome glyph that
     WOULD inherit that transparency and vanish. Force it visible regardless
     of which glyph the browser actually renders. */
  color: #FDF3E7;
}
/* :hover specifically also needs the 3-class chain (not just the base rule) —
   WC's own `.woocommerce a.button:hover` sets its own background-color at
   (3 classes-equivalent + 1 element) specificity, which otherwise beats a
   plain 2-class `:hover` override here. */
.product-card .price-row .card-add-to-cart:hover { background: var(--accent-deep-dark); transform: scale(1.08); }
.product-card .price-row .card-add-to-cart:active { transform: scale(0.94); }
.product-card .price-row .card-add-to-cart.loading { opacity: 0.55; pointer-events: none; }
.product-card .price-row .card-add-to-cart.added::after {
  content: "✓";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2E7D32;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
/* WooCommerce's JS inserts a "Xem giỏ hàng" link right after a successful
   AJAX add — keep it small/muted rather than the theme's default link
   color so it doesn't visually compete with the card's own price/CTA. */
.product-card .added_to_cart { font-size: 11px; color: var(--muted); display: block; text-align: right; margin-top: 4px; }

/* ---------- single product page (2026-08-31) ----------
   Ported from the original OpenDesign reference (theme-source-zip's
   set-*.html mockups) into real WooCommerce markup — see
   woocommerce/content-single-product.php and inc/woocommerce.php's
   csk_single_product_extras()/csk_single_add_to_cart_or_quote(). */
.detail-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; padding: 38px 0 90px; align-items: flex-start; position: relative; isolation: isolate; }
/* Sized up beyond the shared --hero/--hero-right 260px default — this
   container runs 700-1300px tall (gallery + full info-panel), so the
   shared size would still look undersized here; scaled up given how
   prominent this page is. */
.detail-hero .motif-peony--hero, .detail-hero .motif-peony--hero-right { width: 340px; }
@media (max-width: 640px) { .detail-hero .motif-peony--hero, .detail-hero .motif-peony--hero-right { width: 220px; } }
@media (max-width: 900px) { .detail-hero { grid-template-columns: 1fr; gap: 34px; } }

.img-frame { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); position: sticky; top: 100px; }
@media (max-width: 900px) { .img-frame { position: static; } }

/* Real WooCommerce gallery markup (.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > one div per image, first one shown, rest become the thumbnail strip via flexbox order below) restyled to look like the mockup's hand-built .stage + .swatch-row, without touching the plugin's own zoom/lightbox/slider JS (still bound to these same real elements). */
.img-frame .woocommerce-product-gallery__wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.img-frame .woocommerce-product-gallery__wrapper > div:first-child {
  width: 100%;
  height: 460px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 900px) { .img-frame .woocommerce-product-gallery__wrapper > div:first-child { height: 340px; } }
/* WC wraps the real <img> in a plain <a> (for the zoom/lightbox link) — an
   inline element by default, so it never actually stretches to its parent's
   460px box on its own, which left height:100% on the <img> resolving
   against an undefined height and rendering short (visible as dead cream
   space below the photo, confirmed via a real screenshot 2026-08-31 — same
   root cause as the .thumb <a> fix already applied to product-card). */
.img-frame .woocommerce-product-gallery__wrapper > div:first-child a { display: block; width: 100%; height: 100%; }
.img-frame .woocommerce-product-gallery__wrapper > div:first-child img { width: 100%; height: 100%; object-fit: cover; }
.img-frame .woocommerce-product-gallery__wrapper > div:not(:first-child) {
  flex: 1 1 0;
  min-width: 66px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .65;
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--bg);
}
.img-frame .woocommerce-product-gallery__wrapper > div:not(:first-child):hover,
.img-frame .woocommerce-product-gallery__wrapper > div.flex-active-slide {
  opacity: 1;
  border-color: var(--accent-deep);
}
.img-frame .woocommerce-product-gallery__wrapper > div:not(:first-child) img { width: 100%; height: 100%; object-fit: cover; }
/* WooCommerce's own sale-flash badge (top-left "Sale!") — reuse the same
   .badge visual language as product cards instead of WC's plain default. */
.img-frame span.onsale { position: absolute; margin: 12px; z-index: 2; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent-deep); color: #FFF7E6; }

.info-panel .product_title { font-size: clamp(30px,3.6vw,44px); margin: 12px 0 16px; }
.info-panel > p.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--accent-deep); font-size: 30px; }
.info-panel .quote-price { text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
.info-panel .quote-price:hover { text-decoration: underline; }
.info-panel .woocommerce-product-details__short-description { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.info-panel .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
/* SKU/category line — already shown via the breadcrumb above the gallery,
   redundant here and not part of the reference design. */
.info-panel .product_meta { display: none; }

.toggle-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.toggle-row { display: flex; gap: 12px; flex-wrap: wrap; }
.toggle-btn { flex: 1; min-width: 110px; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; text-align: left; background: var(--surface); transition: all 150ms ease; }
.toggle-btn:hover { border-color: var(--accent); }
.toggle-btn.active, .toggle-btn.active:hover { border-color: var(--accent-deep); background: rgba(139,30,36,.05); }
.toggle-btn:active { transform: scale(0.98); }
.toggle-btn .t-name { font-weight: 700; font-size: 15px; }

.spec-list { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 28px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.spec-list .row { display: flex; justify-content: space-between; font-size: 13.5px; gap: 12px; }
.spec-list .row span:first-child { color: var(--muted); }
.spec-list .row span:last-child { font-weight: 600; text-align: right; }

.usp-block { margin-bottom: 30px; }
.usp-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.usp-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.usp-mini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: transform 200ms ease, border-color 200ms ease; }
.usp-mini:hover { transform: translateY(-3px); border-color: var(--accent); }
.usp-mini .ico { flex: none; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 16%, var(--surface)); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); transition: background-color 200ms ease, transform 200ms ease; }
.usp-mini:hover .ico { background: var(--accent-deep); color: #FDF3E7; transform: scale(1.1); }
.usp-mini .ico svg { width: 15px; height: 15px; }
.usp-mini .lbl { font-size: 12px; font-weight: 600; line-height: 1.3; }
@media (max-width: 480px) { .usp-mini-grid { grid-template-columns: 1fr; } }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Real (purchasable) add-to-cart form — variations table + quantity + button,
   for the rare product with an actual price. Kept 100% functional
   (WooCommerce's own variation-matching JS), only restyled. */
.info-panel table.variations { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.info-panel table.variations tr { display: block; margin-bottom: 14px; }
.info-panel table.variations th.label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.info-panel table.variations td.value select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px; color: var(--fg); }
.info-panel table.variations td.value select.csk-swatches-active { display: none; }
.info-panel .woocommerce-variation-add-to-cart,
.info-panel .cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.info-panel .quantity { display: inline-flex; }
.info-panel .quantity .qty { width: 64px; padding: 12px 10px; border: 1.5px solid var(--border); border-radius: 10px; text-align: center; font-size: 14px; background: var(--surface); color: var(--fg); }
/* .detail-hero .info-panel .cart button... (4 classes) — needed to
   outrank WooCommerce's own '.woocommerce a.button.alt' rule, which is what
   single_add_to_cart_button actually carries by default ("button alt") and
   renders as WC's stock purple/violet (#7f54b3) if left alone — clashes
   with this site's red/gold branding. Same class of specificity fight as
   .card-add-to-cart on product cards; confirmed via a real screenshot the
   plain 2-class version below lost and rendered purple. */
.detail-hero .info-panel .cart button.single_add_to_cart_button {
  border: 0;
  cursor: pointer;
  background: var(--accent-deep);
  color: #FDF3E7;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}
.detail-hero .info-panel .cart button.single_add_to_cart_button:hover { background: var(--accent-deep-dark); }
.info-panel button.single_add_to_cart_button { border: 0; cursor: pointer; }
.info-panel p.stock { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.info-panel p.stock.out-of-stock { color: var(--accent-deep); }

/* Related products — see woocommerce/single-product/related.php. A top
   border + generous padding separates it from the tabs block right above
   it (both currently share the single .wrap opened once for the whole
   single-product template, so this section needs its own breathing room
   rather than relying on a fresh .section's default 84px padding). The
   mockup's own .section-head used margin-bottom:30px instead of the
   sitewide default 46px — kept the same tighter value here via CSS instead
   of an inline style in the template. */
.related-products-section { padding: 60px 0 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.related-products-section .section-head { margin-bottom: 30px; }
.related-products-section .section-head h2 { font-size: clamp(24px, 3vw, 32px); }

/* ---------- product description tabs ("Mô tả") ----------
   The imported product descriptions (656 legacy products) are raw WYSIWYG
   HTML copy-pasted from the old site — inline font-size/font-family spans,
   and most (517 of 663) end in a centered "CÔNG TY TNHH GLOBAL HANTECH /
   CHUẨN SÂM KOREA" signature block with hard-coded inline blue/red text
   colors, off-brand against this theme's warm gold/cream palette. This
   theme's own global reset also zeroes `p { margin: 0 }` and `ul { list-
   style: none; padding: 0 }` sitewide (base.css) for its own hand-built
   pages, which left this raw imported content as a dense wall of text with
   no paragraph spacing and invisible list bullets. Scoped to
   .woocommerce-Tabs-panel only — doesn't touch any other page's text. */
.woocommerce-tabs { margin-top: 50px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 10px; border: 0; margin: 0 0 26px; padding: 0; }
.woocommerce-tabs ul.tabs li { display: inline-block; margin: 0; border: 0; background: none; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all 150ms ease; }
.woocommerce-tabs ul.tabs li a:hover { border-color: var(--accent); color: var(--fg); }
.woocommerce-tabs ul.tabs li.active a { background: var(--fg); color: #F3E6C8; border-color: var(--fg); }

.woocommerce-Tabs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; }
@media (max-width: 640px) { .woocommerce-Tabs-panel { padding: 26px 22px; } }
.woocommerce-Tabs-panel > h2:first-child { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 20px; }
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel p span { font-family: 'Inter', sans-serif !important; font-size: 15px !important; color: var(--fg) !important; line-height: 1.75; }
.woocommerce-Tabs-panel p { margin: 0 0 16px; }
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.woocommerce-Tabs-panel ul li,
.woocommerce-Tabs-panel ol li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.65; color: var(--fg); }
.woocommerce-Tabs-panel ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.woocommerce-Tabs-panel strong { color: var(--accent-ink); font-weight: 700; }
/* Neutralize every inline color from the legacy WYSIWYG import (mostly
   blue/red spans) — kept as `strong`/paragraph structure, just recolored
   to the theme's own palette instead of clashing primary blue/red. */
.woocommerce-Tabs-panel [style*="color"] { color: inherit !important; }
/* The centered company-signature block (found on 517 of 663 imported
   products) — turn it into a distinct info footer instead of raw centered
   colored text sitting in the middle of the description. */
.woocommerce-Tabs-panel p[align="center"] { text-align: center !important; font-size: 13.5px !important; color: var(--muted) !important; margin: 0; padding-top: 18px; }
.woocommerce-Tabs-panel p[align="center"] + p[align="center"] { padding-top: 8px; border-top: 0; margin-bottom: 0; }
.woocommerce-Tabs-panel p[align="center"]:first-of-type { margin-top: 24px; border-top: 1px dashed var(--border); }
.woocommerce-Tabs-panel p[align="center"] strong { color: var(--accent-deep); }

/* Contact card (2026-09-02) — replaces the old raw p[align="center"]
   signature block above (see csk_render_contact_card() in
   inc/woocommerce.php) with real clickable icon+link rows: phone (tel:),
   address (Google Maps search), Facebook. */
.contact-card { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--border); text-align: center; }
.contact-card__brand { font-family: 'Playfair Display', serif !important; font-weight: 700 !important; font-size: 15px !important; color: var(--accent-deep) !important; margin: 0 0 14px !important; }
.contact-card__list { display: inline-flex; flex-direction: column; gap: 10px; text-align: left; margin: 0; padding: 0; list-style: none; }
.contact-card__list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px !important; color: var(--muted) !important; }
/* Override the generic .woocommerce-Tabs-panel ul li::before accent-dot
   bullet (meant for real description bullet lists) — this list uses its
   own icon per row instead, confirmed via a real screenshot showing a
   stray dot floating next to each icon otherwise. */
.woocommerce-Tabs-panel .contact-card__list li::before { content: none; }
.contact-card__list li { padding-left: 0; }
.contact-card__list .ico { flex: none; width: 18px; height: 18px; color: var(--accent); }
.contact-card__list .ico svg { width: 100%; height: 100%; }
.contact-card__list a { font-weight: 600; color: var(--fg); }
.contact-card__list a:hover { color: var(--accent-deep); }

/* ---------- breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent-deep); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--fg); font-weight: 600; }

.divider-motif { text-align: center; color: var(--accent); font-size: 18px; opacity: .7; margin: 6px 0; }

/* ---------- peony motif (decorative) ----------
   Real peony branch illustration, cropped straight from the brand's own
   reference banner (corner artwork only — no wordmark/heading text carried
   over) and cut to a transparent PNG. Sits as a low-opacity background
   accent behind text via a negative z-index; the host element must set
   position:relative and isolation:isolate (creates a local stacking
   context) so the motif stays behind that container's own content without
   leaking under the page's other sections. */
.motif-peony { position: absolute; z-index: -1; pointer-events: none; }
.motif-peony img { display: block; width: 100%; height: auto; animation: motif-peony-breathe 12s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes motif-peony-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .motif-peony img { animation: none; } }

/* Each variant anchors one true corner of the crop; the mask fades outward from
   that anchor toward the opposite corner so the PNG's rectangular bounds dissolve
   into the page instead of showing a hard cut edge. */
.motif-peony--hero img { mask-image: radial-gradient(circle at 0% 100%, black 60%, transparent 96%); -webkit-mask-image: radial-gradient(circle at 0% 100%, black 60%, transparent 96%); }
.motif-peony--hero-right img { mask-image: radial-gradient(circle at 100% 100%, black 60%, transparent 96%); -webkit-mask-image: radial-gradient(circle at 100% 100%, black 60%, transparent 96%); }

/* 2026-09-02: replaced the earlier one-off --corner-tr/--corner-br/--panel/
   --banner variants (each page had a single, differently-positioned
   flower, sized smaller than the homepage) with the SAME bottom-left +
   bottom-right PAIR the homepage hero already uses — user's own explicit
   ask, after finding the single smaller placements still read as unclear
   compared to the hero. --hero-right is a plain mirror of --hero (same
   width/opacity/offset formula, right instead of left), using
   peony-corner-right.png in its natural unflipped orientation, whose
   flower cluster already sits toward that image's own bottom edge — the
   same reason --corner-tr used to need a scaleY(-1) flip to work at the
   TOP of a box; unflipped, it's already correct for a BOTTOM placement. */
/* --hero's own position/size/opacity used to live ONLY in front-page.php's
   own inline <style> block (front-page.php was the only place it was ever
   used) — moved here now that it's reused across every page in this
   section, not just the homepage. Real bug found via a live bounding-box
   check on the single-product page: without this shared rule, .motif-
   peony--hero there had no bottom/left/opacity of its own at all (only
   the base .motif-peony's position:absolute + this file's own width:340px
   scoped override), so it defaulted to the browser's plain top:0/left:0/
   opacity:1 — full-strength and pinned to the top-left corner instead of
   fading in at the bottom. front-page.php's local copy was removed to
   avoid two competing same-specificity rules. */
.motif-peony--hero { left: -7%; bottom: -9%; width: 260px; z-index: 1; opacity: .62; }
@media (max-width: 640px) { .motif-peony--hero { width: 150px; left: -6%; bottom: 4%; } }
.motif-peony--hero-right { right: -7%; bottom: -9%; width: 260px; z-index: 1; opacity: .62; }
@media (max-width: 640px) { .motif-peony--hero-right { width: 150px; right: -6%; bottom: 4%; } }

/* Ambient catalogue-texture backdrop for page-head banners (breadcrumb + eyebrow
   + h1 zones) — same source art as the homepage hero background, reused at a
   lower opacity so it reads as a quiet paper texture behind the heading rather
   than competing with it. Host element needs position:relative + isolation:isolate
   + overflow:hidden (already set on .page-head where this is used). */
.page-head-bg-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; opacity: .3; transform: scale(1.12); pointer-events: none; }

/* Scroll-reveal: content rises + fades in once as it enters the viewport (or
   immediately, for above-the-fold hero content). Mirrors assets/site.css —
   see docs/SOURCE-AUDIT.md. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 500ms cubic-bezier(0.2,0,0,1), transform 500ms cubic-bezier(0.2,0,0,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; transition: opacity 300ms ease; transition-delay: 0ms !important; }
}

/* ---------- checkout / order-received (2026-09-04) ----------
   Neither page had ANY theme CSS at all before this — pure WooCommerce
   defaults. Real bug found via a live mobile render, not assumed: the 4
   summary items (order number/date/total/payment method) are plain <li>s
   that WooCommerce core CSS lays out ~25% wide each — fine on desktop, but
   at phone width they wrap into a cramped, unevenly-divided 2x2 grid with
   tiny labels butting right up against the next column's divider line.
   Restyled as a clean full-width stacked list below the tablet breakpoint,
   matching the site's own typography instead of raw browser defaults. */
.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  list-style: none;
  padding: 0;
  margin: 18px 0 26px;
}
.woocommerce-order-overview li {
  float: none;
  width: auto;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg);
}
@media (max-width: 640px) {
  .woocommerce-order-overview { flex-direction: column; gap: 14px; }
}

.woocommerce-order-details__title,
.woocommerce-column__title { font-family: 'Playfair Display', serif; }

.woocommerce-table--order-details,
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
/* Long Vietnamese product/variation names + a numeric total column is
   exactly the shape that overflows a fixed-layout table on narrow screens
   ("text bị tràn") — letting the product-name column wrap freely and
   giving the total column a fixed minimum instead of an even split fixes
   it without needing horizontal scroll. */
.woocommerce-table--order-details .product-name,
.woocommerce-checkout-review-order-table .product-name {
  word-break: break-word;
}
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table th.product-total {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
@media (max-width: 480px) {
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td,
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td { padding: 10px 12px; font-size: 13.5px; }
}

.woocommerce-customer-details address {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-style: normal;
  line-height: 1.7;
}

/* ---------- order-received full design pass (2026-09-04) ----------
   User asked for this page specifically to look "gọn sạch đẹp" for a
   customer who just completed a purchase — beyond the earlier responsive
   fixes, this is a real visual pass: a warmer confirmation moment, a
   comfortable reading width instead of stretching the full page width, and
   a clear next step, none of which WooCommerce's bare default template
   provides on its own. */
body.woocommerce-order-received .woocommerce {
  max-width: 720px;
}
.woocommerce-thankyou-order-received {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 30px;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.woocommerce-thankyou-order-received::before {
  content: '';
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--accent-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  box-shadow: 0 8px 18px -6px rgba(139, 30, 36, .45);
}
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: 19px;
  margin: 0 0 16px;
}
.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: 40px;
}
/* Real bug found live: WooCommerce's own COD/BACS "please transfer to this
   account" instructions paragraph rendered as bare unstyled text floating
   between the order-overview and "Chi tiết đơn hàng" — reads like an
   afterthought next to the now-card-styled sections around it. A soft
   tinted note box matches how the rest of the site presents supporting
   info (e.g. .fc-tip, badges) instead of plain paragraph text. */
.woocommerce-order > p:not([class]) {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}
.thankyou-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px dashed var(--border);
}
@media (max-width: 480px) {
  .woocommerce-thankyou-order-received { font-size: 19px; gap: 12px; }
  .woocommerce-thankyou-order-received::before { width: 40px; height: 40px; background-size: 19px 19px; }
  .thankyou-actions { flex-direction: column; }
  .thankyou-actions a { text-align: center; }
}