/* ============================================================
   Dogalicious — Supplementary Tokens
   ============================================================
   theme.json carries the formal palette, type, spacing, shadows.
   This file adds the things theme.json can't express:
   - CSS custom-property aliases (so handwritten CSS in widgets,
     custom blocks, and WooCommerce template overrides can use the
     same variable names as the source design system)
   - Sticker borders + motion easing
   - WooCommerce surface overrides (buttons, prices, badges, cart)
   - Traditional Chinese (:lang(zh-Hant)) tracking + family swaps
   - Sticky-nav blur, focus rings, link underline behaviour
============================================================ */

/* ---------- 1. CSS variable aliases ----------
   Mirror the names used in the source design system so existing
   handwritten styles work unchanged. */
:root {
  /* Brand palette */
  --peach:       #f6d4b4;
  --mint:        #8ffcff;
  --teal:        #00bbcc;
  --coral:       #fc9f5b;
  --forest:      #33673b;
  --lime:        #a5e000;
  --spring:      #2af47b;

  /* Neutrals */
  --ink:         #1a1613;
  --ink-soft:    #3a2e26;
  --charcoal:    #5a4b40;
  --stone:       #8a7a6e;
  --sand:        #d8c6b5;
  --cream:       #fff7ec;
  --paper:       #fffaf2;

  /* Semantic */
  --bg:              var(--cream);
  --bg-alt:          var(--peach);
  --surface:         var(--paper);
  --surface-raised:  #ffffff;
  --fg1:             var(--ink);
  --fg2:             var(--charcoal);
  --fg3:             var(--stone);
  --fg-on-brand:     #ffffff;

  --border:          #ead9c5;
  --border-strong:   var(--sand);
  --divider:         #f1e4d0;

  --brand:           var(--teal);
  --brand-hover:     #009dac;
  --brand-press:     #008795;
  --accent:          var(--coral);
  --accent-hover:    #f28940;
  --success:         var(--spring);
  --success-ink:     var(--forest);
  --warn:            #ffb703;
  --danger:          #e04a3b;
  --info:            var(--mint);

  /* Radii (sticker-generous) */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px;
  --r-pill: 999px;

  /* Borders */
  --border-thin: 1px solid var(--border);
  --border-med:  2px solid var(--border-strong);
  --border-ink:  3px solid var(--ink);

  /* Sticker shadows */
  --shadow-sticker:       4px 4px 0 var(--ink);
  --shadow-sticker-lg:    6px 6px 0 var(--ink);
  --shadow-sticker-brand: 4px 4px 0 var(--teal);

  /* Motion */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;
}

/* ---------- 2. Page surface ---------- */
body {
  background: var(--bg);
  color: var(--fg1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
p { text-wrap: pretty; }

/* ---------- 3. Sticker CTAs (primary) ----------
   Applies to:
   - WP core buttons (.wp-block-button__link)
   - WooCommerce buttons
   - Generic <button class="btn-sticker">
*/
.wp-block-button__link,
.btn-sticker,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--fg-on-brand);
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border: var(--border-ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sticker);
  transition:
    transform var(--dur-fast) var(--ease-bounce),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.wp-block-button__link:hover,
.btn-sticker:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background: var(--brand-hover);
  transform: translate(-1px, -2px);
  box-shadow: 5px 6px 0 var(--ink);
}
.wp-block-button__link:active,
.btn-sticker:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
  background: var(--brand-press);
}

/* Coral accent variant — e.g. "Add to cart" on food products */
.btn-sticker.is-accent,
.woocommerce a.button.alt.coral,
.product-food .single_add_to_cart_button {
  background: var(--accent);
  color: var(--ink);
}

/* Outlined / secondary sticker button */
.btn-sticker.is-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-ink);
}

/* ---------- 4. Cards ---------- */
.card-sticker {
  background: var(--surface);
  border: var(--border-ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sticker);
  padding: 24px;
}
.card-soft {
  background: var(--surface);
  border: var(--border-thin);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 10px rgba(26,22,19,.08), 0 2px 4px rgba(26,22,19,.06);
  padding: 20px;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.card-soft:hover {
  box-shadow: 0 12px 28px rgba(26,22,19,.12), 0 4px 10px rgba(26,22,19,.08);
}

/* ---------- 5. WooCommerce surfaces ---------- */

/* Product cards on shop/category archives */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--surface);
  border: var(--border-thin);
  border-radius: var(--r-xl);
  padding: 16px;
  transition: box-shadow var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-sticker);
  transform: translate(-1px, -2px);
}
.woocommerce ul.products li.product img {
  border-radius: var(--r-lg);
}

/* Price */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-family: 'Baloo 2','Fredoka',system-ui,sans-serif;
  font-weight: 700;
}
.woocommerce .price del { color: var(--stone); opacity: 0.7; }
.woocommerce .price ins { color: var(--forest); text-decoration: none; }

/* Sale badge — sticker style */
.woocommerce span.onsale {
  background: var(--coral);
  color: var(--ink);
  border: var(--border-ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sticker);
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 700;
  padding: 4px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
  top: 12px;
  left: 12px;
}

/* Stock / status pills */
.woocommerce .stock {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: 'Fredoka',sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.woocommerce .stock.in-stock        { background: color-mix(in oklab, var(--spring) 25%, var(--cream)); color: var(--forest); }
.woocommerce .stock.out-of-stock    { background: color-mix(in oklab, var(--danger) 18%, var(--cream)); color: var(--danger); }
.woocommerce .stock.available-on-backorder { background: color-mix(in oklab, var(--warn) 22%, var(--cream)); color: #8a5a00; }

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-family: 'Nunito',sans-serif;
  font-size: 16px;
  color: var(--fg1);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .form-row input.input-text:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--teal) 22%, transparent);
  outline: none;
}

/* Variation swatches — works with "Variation Swatches for WooCommerce" */
.variable-items-wrapper .variable-item {
  border-radius: var(--r-md) !important;
  border: 2px solid var(--border) !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-bounce);
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item:hover {
  border-color: var(--ink) !important;
  transform: translateY(-1px);
}
.variable-items-wrapper .variable-item.selected {
  box-shadow: var(--shadow-sticker);
}

/* ---------- Cart, checkout, and any rounded data table ----------
   Rule: never use overflow:hidden to clip rounded tables. It cuts text
   off near the corners. Instead, use border-collapse: separate, generous
   cell padding, and round the corner cells individually. */

.woocommerce table.shop_table,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table,
table.dogalicious-table {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
  width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
table.dogalicious-table th,
table.dogalicious-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}

/* Corner cells need extra horizontal padding so text clears the radius.
   --r-xl is 28px, so we push content 36px in on the curved side. */
.woocommerce table.shop_table thead th:first-child,
.woocommerce table.shop_table tbody tr:first-child > *:first-child,
.woocommerce table.shop_table tbody tr:last-child > *:first-child,
.woocommerce table.shop_table tfoot tr:last-child > *:first-child,
table.dogalicious-table thead th:first-child,
table.dogalicious-table tbody tr:first-child > *:first-child,
table.dogalicious-table tbody tr:last-child > *:first-child {
  padding-left: 36px;
}
.woocommerce table.shop_table thead th:last-child,
.woocommerce table.shop_table tbody tr:first-child > *:last-child,
.woocommerce table.shop_table tbody tr:last-child > *:last-child,
.woocommerce table.shop_table tfoot tr:last-child > *:last-child,
table.dogalicious-table thead th:last-child,
table.dogalicious-table tbody tr:first-child > *:last-child,
table.dogalicious-table tbody tr:last-child > *:last-child {
  padding-right: 36px;
}

.woocommerce table.shop_table thead th {
  background: var(--bg-alt);
  color: var(--ink);
  font-family: 'Fredoka',sans-serif;
  font-weight: 600;
}

.woocommerce table.shop_table tr:last-child td,
.woocommerce table.shop_table tr:last-child th {
  border-bottom: none;
}

/* Round only the corner cells so content doesn't sit under a curve */
.woocommerce table.shop_table thead th:first-child,
table.dogalicious-table thead th:first-child {
  border-top-left-radius: calc(var(--r-xl) - 2px);
}
.woocommerce table.shop_table thead th:last-child,
table.dogalicious-table thead th:last-child {
  border-top-right-radius: calc(var(--r-xl) - 2px);
}
.woocommerce table.shop_table tbody tr:last-child td:first-child,
table.dogalicious-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--r-xl) - 2px);
}
.woocommerce table.shop_table tbody tr:last-child td:last-child,
table.dogalicious-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--r-xl) - 2px);
}

/* Utility: opt out of corner clipping anywhere it's been forced */
.dogalicious-no-clip { overflow: visible !important; }

/* ---------- Discount / rewards / DogaPoints row ----------
   Let the description and the action button breathe so they don't overlap. */
.woocommerce-cart .cart-discount,
.woocommerce-cart .points-redemption,
.woocommerce-cart tr.points-message td,
.wc-points-rewards-message,
.wcpr-cart-message {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
  padding: 16px 22px;
}
.wc-points-rewards-message > *:not(.button):not(a.button),
.woocommerce-cart .cart-discount > *:not(.button):not(a.button) {
  flex: 1 1 240px;
  margin: 0;
  line-height: 1.5;
}
.wc-points-rewards-message .button,
.wc-points-rewards-apply,
.wcpr-apply-discount {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* DogaPoints / WooCommerce Points & Rewards info banner.
   WooCommerce floats the button right inside a .woocommerce-info — undo that
   and use flex with a real gap so text and button don't overlap. */
.woocommerce-info.wc_points_redeem_earn_points,
.woocommerce-message.wc_points_redeem_earn_points,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 18px 24px !important;
}
.woocommerce-info.wc_points_redeem_earn_points::before,
.woocommerce .woocommerce-info::before {
  position: static !important;
  margin-right: 4px;
  flex: 0 0 auto;
}
.woocommerce-info .button,
.woocommerce-info a.button,
.woocommerce-message .button,
.wc_points_redeem_earn_points .button,
.wc_points_redeem_earn_points a.button {
  float: none !important;
  margin-left: auto !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Subscription product callout */
.product_meta .subscription-details,
.woocommerce-Price-amount.subscription-price {
  color: var(--forest);
  font-weight: 600;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r-lg);
  border: var(--border-ink);
  font-family: 'Nunito',sans-serif;
  font-weight: 600;
  box-shadow: var(--shadow-sticker);
}
.woocommerce-message { background: color-mix(in oklab, var(--spring) 18%, var(--cream)); color: var(--forest); }
.woocommerce-info    { background: color-mix(in oklab, var(--mint)   18%, var(--cream)); color: var(--ink); }
.woocommerce-error   { background: color-mix(in oklab, var(--danger) 14%, var(--cream)); color: var(--danger); }

/* Tabs on single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  margin-right: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--teal);
  border-color: var(--ink);
  box-shadow: var(--shadow-sticker);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }

/* ---------- 5b. Header navigation menu ----------
   Style the Blocksy header menu links to match the design system nav:
   Fredoka, weight 600, charcoal default, ink on hover/active. */
.ct-header .menu,
.ct-header .ct-menu-link,
header .ct-header-cell .menu li a {
  font-family: 'Fredoka','Nunito',sans-serif !important;
  font-weight: 600 !important;
}
.ct-header .menu > li > a,
.ct-header [data-id="menu"] li a {
  color: var(--fg2) !important;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  padding: 8px 14px;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.ct-header .menu > li > a:hover {
  color: var(--ink) !important;
  background: color-mix(in oklab, var(--peach) 55%, transparent) !important;
}
/* Highlighted / active nav item — peach pill, matching the UI kit */
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current_page_item > a,
.ct-header .menu > li.current-menu-ancestor > a {
  color: var(--ink) !important;
  background: var(--peach) !important;
}

/* Header CTA button — drag a "Button" element into the header right zone,
   then it inherits the Dogalicious sticker style automatically. */
.ct-header a.ct-button,
.ct-header .ct-header-cell a.ct-button,
header a.ct-button {
  background: var(--brand) !important;
  color: #fff !important;
  font-family: 'Fredoka','Nunito',sans-serif !important;
  font-weight: 700 !important;
  border: 3px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--shadow-sticker) !important;
  padding: 10px 20px !important;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out) !important;
}
.ct-header a.ct-button:hover,
header a.ct-button:hover {
  background: var(--brand-hover) !important;
  transform: translate(-1px,-2px);
  box-shadow: 5px 6px 0 var(--ink) !important;
}
.ct-header a.ct-button:active,
header a.ct-button:active {
  transform: translate(4px,4px);
  box-shadow: 0 0 0 var(--ink) !important;
  background: var(--brand-press) !important;
}

/* Cart / account / search header icons — coral cart badge */
.ct-header .ct-cart-count,
.ct-header [data-id="cart"] .ct-cart-count {
  background: var(--coral) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink);
  font-family: 'Fredoka',sans-serif;
  font-weight: 700;
}

/* ---------- 5c. Component utility classes ----------
   Reusable classes mirroring the marketplace UI kit. Apply them in
   Gutenberg (Advanced → Additional CSS class) or in custom HTML blocks
   so hand-built sections match the design system exactly. */

/* GHOST / SECONDARY button — white fill, ink border, sticker shadow.
   Used by "Ask Dogalicious", "How it works", any secondary action.
   Also auto-applies to Blocksy outline buttons + WP outline button style. */
.btn-ghost,
.dg-ask,
.ct-header a.ct-button.is-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white) !important;
  color: var(--ink) !important;
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 700;
  border: 3px solid var(--ink) !important;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sticker);
  padding: 11px 20px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover,
.dg-ask:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform: translate(-1px,-2px);
  box-shadow: 5px 6px 0 var(--ink);
  background: var(--paper) !important;
}
.btn-ghost:active,
.dg-ask:active {
  transform: translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}

/* CATEGORY / FILTER pills — toggle row. Default white, active ink.
   Mark the active one with .is-active. Works for custom category bars
   and WooCommerce layered-nav widgets. */
.dg-pill,
.woocommerce-widget-layered-nav-list li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 700;
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.dg-pill:hover,
.woocommerce-widget-layered-nav-list li a:hover {
  transform: translateY(-1px);
}
.dg-pill.is-active,
.woocommerce-widget-layered-nav-list li.chosen a {
  background: var(--ink);
  color: var(--cream);
}

/* CHIP — larger selectable option (white ↔ teal active). AI Dog/Cat picker. */
.dg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 700;
  font-size: 16px;
  background: var(--white);
  color: var(--ink);
  padding: 16px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.dg-chip.is-active {
  background: var(--teal);
  color: #fff;
}

/* TAGS / badges — small uppercase pills with ink border.
   .dg-tag default coral; modifiers for lime, mint, forest. */
.dg-tag {
  display: inline-block;
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--ink);
}
.dg-tag.is-lime   { background: var(--lime);   color: var(--forest); }
.dg-tag.is-mint   { background: var(--mint);   color: var(--ink); }
.dg-tag.is-teal   { background: var(--teal);   color: #fff; }
.dg-tag.is-spring { background: var(--spring); color: var(--forest); }

/* ICON BUTTON — white circle, ink border. Drawer/modal close, small actions. */
.dg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce),
              background-color var(--dur-fast) var(--ease-out);
}
.dg-icon-btn:hover {
  background: var(--peach);
  transform: translateY(-1px);
}

/* "See all →" style text link */
.dg-textlink {
  font-family: 'Fredoka','Nunito',sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--teal);
  text-decoration: none;
  cursor: pointer;
}
.dg-textlink:hover { color: var(--brand-hover); }

/* ---------- 6. Sticky-nav blur ---------- */
.ct-header[data-sticky] [data-row="middle"],
.is-sticky-header [data-row="middle"] {
  background: color-mix(in oklab, var(--cream) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- 7. Focus rings (accessibility) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- 8. Link underline behaviour ---------- */
.entry-content a,
.woocommerce a:not(.button):not(.wc-block-components-button) {
  color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.entry-content a:hover { color: var(--brand-hover); }

/* ---------- 9. Decorative paw-print bullets ---------- */
ul.paws {
  list-style: none;
  padding-left: 0;
}
ul.paws > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}
ul.paws > li::before {
  content: "🐾";
  position: absolute;
  left: 0; top: 0;
  font-size: 16px;
  opacity: 0.85;
}

/* ---------- 10. Traditional Chinese overrides ---------- */
:lang(zh-Hant),
.lang-zh,
.lang-zh body {
  font-family: 'GenSenRounded2 TC','Nunito','PingFang TC','Microsoft JhengHei',sans-serif;
  letter-spacing: 0;
  line-height: 1.55;
}
:lang(zh-Hant) h1, .lang-zh h1,
:lang(zh-Hant) h2, .lang-zh h2,
:lang(zh-Hant) h3, .lang-zh h3 {
  font-family: 'GenSenRounded2 TC','Baloo 2','PingFang TC',sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
:lang(zh-Hant) h4, .lang-zh h4,
:lang(zh-Hant) h5, .lang-zh h5,
:lang(zh-Hant) h6, .lang-zh h6 {
  font-family: 'GenSenRounded2 TC','Fredoka','PingFang TC',sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 12. Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .wp-block-button__link,
  .btn-sticker,
  .woocommerce a.button {
    box-shadow: none;
    border: 2px solid #000;
  }
}

/* ============================================================
   13. OVERRIDE LAYER — last in file, !important
   Defeats plugin/theme.json specificity and ensures rounded
   tables never clip their corner text. Loaded last by rule order.
============================================================ */

.woocommerce table.shop_table,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table,
table.woocommerce-checkout-review-order-table,
table.shop_table_responsive,
.wc-block-cart table,
table.dogalicious-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
  border-radius: 28px !important;
  border: 2px solid var(--border) !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
  padding: 22px 26px !important;
}

/* Corner cells: text must clear the 28px radius — give 38px horizontal padding */
.woocommerce table.shop_table tr > *:first-child,
table.woocommerce-checkout-review-order-table tr > *:first-child {
  padding-left: 38px !important;
}
.woocommerce table.shop_table tr > *:last-child,
table.woocommerce-checkout-review-order-table tr > *:last-child {
  padding-right: 38px !important;
}

/* Peach summary rows — subtotal, total, shipping, fee, discount */
.woocommerce table.shop_table tr.cart-subtotal th,
.woocommerce table.shop_table tr.cart-subtotal td,
.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td,
.woocommerce table.shop_table tr.shipping th,
.woocommerce table.shop_table tr.shipping td,
.woocommerce table.shop_table tr.fee th,
.woocommerce table.shop_table tr.fee td,
.woocommerce table.shop_table tr.cart-discount th,
.woocommerce table.shop_table tr.cart-discount td {
  background: var(--peach) !important;
  padding: 22px 38px !important;
}