/* ============================================================
   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;
  --white:       #ffffff;

  /* 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);

  /* Soft elevation shadows (floating menus, dropdowns, hover cards).
     Mirrored from the source design system — the submenu flyout and the
     mini-cart panel reference --shadow-xl. */
  --shadow-md:  0 4px 10px rgba(26,22,19,.08), 0 2px 4px rgba(26,22,19,.06);
  --shadow-lg:  0 12px 28px rgba(26,22,19,.12), 0 4px 10px rgba(26,22,19,.08);
  --shadow-xl:  0 24px 48px rgba(26,22,19,.18);

  /* 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);

  /* Type families — mirror the source design system stacks so handwritten
     rules (header menu, dropdown, mini-cart, footer) resolve on the live
     site, even though theme.json exposes families only as
     --wp--preset--font-family--*. */
  --font-display: 'Baloo 2','Fredoka','GenSenRounded2 TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --font-ui:      'Fredoka','Nunito','GenSenRounded2 TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --font-body:    'Nunito','GenSenRounded2 TC','PingFang TC','Microsoft JhengHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:    'Caveat','GenSenRounded2 TC','Comic Sans MS',cursive;

  /* 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: 'GenSenRounded2 TC','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: 'GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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: 'GenSenRounded2 TC','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: 'GenSenRounded2 TC','Nunito',sans-serif;
  font-size: 16px;
  /* CJK glyphs are taller than Latin — give roomy line-height and
     auto height so Chinese values aren't cropped top & bottom. */
  line-height: 1.6;
  min-height: 50px;
  height: auto;
  color: var(--fg1);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Checkboxes & radios — solid ink border, teal fill when selected.
   Default WooCommerce outline is too faint to notice. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0 9px 0 0;
  flex: 0 0 auto;
  vertical-align: middle;
  background: var(--white);
  border: 2px solid var(--ink);
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"] { border-radius: 6px; }
.woocommerce input[type="radio"],
.woocommerce-checkout input[type="radio"] { border-radius: 999px; }
.woocommerce input[type="checkbox"]:hover,
.woocommerce input[type="radio"]:hover { border-color: var(--teal); }
.woocommerce input[type="checkbox"]:checked,
.woocommerce input[type="radio"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout input[type="radio"]:checked {
  background: var(--teal);
  border-color: var(--teal);
}
.woocommerce input[type="checkbox"]:checked::after,
.woocommerce-checkout input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.woocommerce input[type="radio"]:checked::after,
.woocommerce-checkout input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--white);
}
.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: 'GenSenRounded2 TC','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: 'GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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;
}

/* ---------- 5b-2. Dropdown submenu panel ----------
   THE FIX: Blocksy's submenu flyout falls back to its dark navy default.
   Style the panel as a warm paper card and the submenu links as
   charcoal body text with a peach hover, matching the design system. */
/* NOTE on specificity: Blocksy prints its menu/dropdown colors as an inline
   <style> block late in <head>. On EQUAL specificity the later rule wins, so
   our earlier overrides lost — the panel stayed dark navy. Fix = out-specify
   Blocksy. We prefix with `body`, double the `.sub-menu` class, AND target
   Blocksy's real link class `.ct-menu-link` (links are <a class="ct-menu-link">,
   not bare `li a`). We also reset Blocksy's own dropdown CSS variables. */

/* Kill Blocksy's dropdown color variables at the source (header menu element) */
body .ct-header [data-id="menu"],
body .ct-header .menu {
  --theme-dropdown-background-color: var(--surface);
  --theme-dropdown-shadow: var(--shadow-xl);
}

/* The flyout panel — paper card.
   Targets the exact nav (#header-menu-1 / .header-menu-1) + the custom
   .animated-submenu-block parent that a plugin paints dark navy. The nav ID
   gives us ID-level specificity to win that fight. */
body #header-menu-1 ul.sub-menu,
body .header-menu-1 ul.sub-menu,
body .ct-header .animated-submenu-block > ul.sub-menu,
body .ct-header .sub-menu.sub-menu,
body .ct-header [data-id="menu"] .sub-menu.sub-menu,
body .ct-header .ct-mega-menu.ct-mega-menu {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 8px !important;
}
body #header-menu-1 ul.sub-menu li,
body .ct-header .sub-menu.sub-menu li {
  border: none !important;
  background: transparent !important;
}
/* Submenu links — target both the real Blocksy class and bare li a */
body #header-menu-1 ul.sub-menu a.ct-menu-link,
body .header-menu-1 ul.sub-menu a.ct-menu-link,
body .ct-header .sub-menu.sub-menu li a,
body .ct-header .sub-menu.sub-menu .ct-menu-link,
body .ct-header [data-id="menu"] .sub-menu.sub-menu .ct-menu-link {
  color: var(--fg2) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  letter-spacing: 0 !important;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out) !important;
}
body #header-menu-1 ul.sub-menu a.ct-menu-link:hover,
body .header-menu-1 ul.sub-menu a.ct-menu-link:hover,
body .ct-header .sub-menu.sub-menu li a:hover,
body .ct-header .sub-menu.sub-menu .ct-menu-link:hover,
body .ct-header .sub-menu.sub-menu li.current-menu-item > a {
  color: var(--ink) !important;
  background: color-mix(in oklab, var(--peach) 55%, transparent) !important;
  background-color: color-mix(in oklab, var(--peach) 55%, transparent) !important;
}

/* ---------- 5c. Header CTA button (.ct-button) ----------
   Style the Blocksy header "Button" element — drag a "Button" element into
   the header's right zone via Customize → Header.
   Broad selectors + !important so it overrides Blocksy's default button color
   (which renders blue) regardless of wrapper structure.
   DEFAULT = teal sticker. Add CSS class "is-ghost" for the white variant. */
a.ct-button,
.ct-button,
[data-id="button"] a.ct-button,
.ct-header [data-id="button"] a,
header a.ct-button {
  background-color: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: 'GenSenRounded2 TC','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;
}
a.ct-button:hover,
.ct-button:hover,
header a.ct-button:hover {
  background-color: var(--brand-hover) !important;
  transform: translate(-1px,-2px);
  box-shadow: 5px 6px 0 var(--ink) !important;
}
a.ct-button:active,
.ct-button:active {
  transform: translate(4px,4px);
  box-shadow: 0 0 0 var(--ink) !important;
  background-color: var(--brand-press) !important;
}

/* GHOST variant — add the class "is-ghost" to the button in Customizer.
   White fill, ink text/border. For "Ask Dogalicious" etc. */
a.ct-button.is-ghost,
.ct-button.is-ghost,
.is-ghost a.ct-button,
header a.ct-button.is-ghost {
  background-color: var(--white) !important;
  background-image: none !important;
  color: var(--ink) !important;
}
a.ct-button.is-ghost:hover,
.ct-button.is-ghost:hover {
  background-color: var(--paper) !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: var(--font-ui);
  font-weight: 700;
}

/* ---------- 5c-0. Header cart trigger as a pill button ----------
   The header cart (price + icon + count) renders as bare text/icon by
   default. Wrap the trigger in a white "ghost" sticker pill so it reads
   as a button beside the "Ask Dr Dogalicious" CTA. */
.ct-header [data-id="cart"] > a,
.ct-header .ct-cart-trigger,
.ct-header [data-id="cart"] .ct-toggle-dropdown-default,
header [data-id="cart"] > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  border: 3px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--shadow-sticker) !important;
  padding: 9px 16px !important;
  line-height: 1 !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 [data-id="cart"] > a:hover,
.ct-header .ct-cart-trigger:hover,
header [data-id="cart"] > a:hover {
  transform: translate(-1px, -2px) !important;
  box-shadow: 5px 6px 0 var(--ink) !important;
  background: var(--paper) !important;
}
.ct-header [data-id="cart"] > a:active,
.ct-header .ct-cart-trigger:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--ink) !important;
}
/* Price text + icon inside the trigger inherit ink */
.ct-header [data-id="cart"] .ct-cart-price,
.ct-header [data-id="cart"] .ct-cart-text,
.ct-header [data-id="cart"] svg {
  color: var(--ink) !important;
  fill: currentColor !important;
}
/* Keep the coral count badge pinned to the pill's top-right corner */
.ct-header [data-id="cart"] > a {
  position: relative !important;
}
.ct-header [data-id="cart"] .ct-cart-count {
  position: absolute !important;
  top: -8px !important;
  right: -6px !important;
}

/* ---------- 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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','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: 'GenSenRounded2 TC','Fredoka','GenSenRounded2 TC','Nunito',sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--teal);
  text-decoration: none;
  cursor: pointer;
}
.dg-textlink:hover { color: var(--brand-hover); }

/* ---------- 5d. Header mini-cart dropdown ----------
   THE FIX: Blocksy renders the header cart flyout OUTSIDE the page's
   `.woocommerce` wrapper, so the section-3 button rules and section-5
   surface rules (all scoped under `.woocommerce …`) never reach it — it
   falls back to Blocksy's default dark panel with royal-blue buttons.
   These selectors are wrapper-independent and use !important to defeat
   Blocksy's cart-dropdown CSS variables. */

/* Panel surface — warm paper, soft elevation (floating menu = soft shadow,
   not the sticker offset, per the design system). */
.ct-cart-content,
.ct-mini-cart-content,
.widget_shopping_cart,
.woocommerce .widget_shopping_cart,
.woocommerce-mini-cart-wrapper {
  background: var(--surface) !important;
  color: var(--fg1) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  --theme-border-radius: var(--r-xl);
}
.ct-cart-content .widget_shopping_cart_content,
.widget_shopping_cart_content {
  background: transparent !important;
  color: var(--fg1) !important;
  padding: 8px 6px !important;
}

/* Generic text reset inside the panel (Blocksy lightens these for its
   dark default panel). */
.ct-cart-content,
.widget_shopping_cart,
.woocommerce-mini-cart,
.woocommerce-mini-cart-item,
.woocommerce-mini-cart .quantity,
.woocommerce-mini-cart__total {
  color: var(--fg1) !important;
}

/* Item rows + dividers */
.woocommerce-mini-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-mini-cart li.mini_cart_item,
li.woocommerce-mini-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--divider) !important;
  position: relative;
}
.woocommerce-mini-cart li.mini_cart_item:last-child {
  border-bottom: none !important;
}

/* Thumbnail */
.woocommerce-mini-cart-item a img,
.woocommerce-mini-cart-item img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: var(--r-sm) !important;
  border: 2px solid var(--border) !important;
  margin: 0 !important;
  float: none !important;
  flex: 0 0 auto;
}

/* Product title — body text (Nunito → GenSenRounded2 TC for Han), ink,
   not the default teal link. NOT a display/Fredoka face. */
.woocommerce-mini-cart-item a:not(.remove) {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}
.woocommerce-mini-cart-item a:not(.remove):hover {
  color: var(--brand-hover) !important;
}

/* Quantity × price line */
.woocommerce-mini-cart-item .quantity {
  color: var(--fg2) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.woocommerce-mini-cart-item .quantity .woocommerce-Price-amount,
.woocommerce-mini-cart .woocommerce-Price-amount {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Remove (×) — ink-outlined circle, danger on hover */
.woocommerce-mini-cart a.remove,
.widget_shopping_cart a.remove,
.woocommerce-mini-cart-item a.remove {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--ink) !important;
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.woocommerce-mini-cart a.remove:hover {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* Subtotal / total row */
.woocommerce-mini-cart__total,
p.woocommerce-mini-cart__total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 8px 4px 14px !important;
  padding: 16px 10px 4px !important;
  border-top: 2px solid var(--divider) !important;
  border-bottom: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
}

/* Buttons row — equal-width, View cart = ghost, Checkout = teal sticker */
.woocommerce-mini-cart__buttons,
p.woocommerce-mini-cart__buttons {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 4px 6px !important;
  padding: 0 !important;
}
.woocommerce-mini-cart__buttons .button,
.widget_shopping_cart .button {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--r-pill) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--shadow-sticker) !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;
}
/* "View cart" (first / non-checkout) = ghost white */
.woocommerce-mini-cart__buttons .button:not(.checkout),
.widget_shopping_cart .button:not(.checkout) {
  background: var(--white) !important;
  background-image: none !important;
  color: var(--ink) !important;
}
/* "Checkout" = teal primary */
.woocommerce-mini-cart__buttons .button.checkout,
.widget_shopping_cart .button.checkout,
.woocommerce-mini-cart__buttons a.checkout {
  background: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
}
.woocommerce-mini-cart__buttons .button:hover,
.widget_shopping_cart .button:hover {
  transform: translate(-1px, -2px) !important;
  box-shadow: 5px 6px 0 var(--ink) !important;
}
.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: var(--paper) !important;
}
.woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--brand-hover) !important;
}
.woocommerce-mini-cart__buttons .button:active,
.widget_shopping_cart .button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--ink) !important;
}

/* Empty-cart message */
.woocommerce-mini-cart__empty-message,
.widget_shopping_cart .woocommerce-mini-cart__empty-message {
  color: var(--fg2) !important;
  font-family: var(--font-body) !important;
  padding: 18px 10px !important;
}

/* ---------- 5e. Footer ("bottom menu") ----------
   Matches the design-system footer used on the homepage:
   ink surface, cream/sand text, Baloo 2 uppercase column headings,
   Nunito links that turn lime on hover, lime-accented social circles,
   and a hairline-divided bottom copyright row.

   In Blocksy: Customize -> Footer. Drop in Menu / Widget Area / Socials /
   Copyright elements (see the Header & Footer Build Guide). These rules
   force the ink surface and adopt the elements automatically, so you don't
   have to fiddle with per-element color pickers. */

/* Footer surface — ink, cream text.
   Same specificity battle as the dropdown: Blocksy paints the footer + that
   light copyright bar from its own late <style> block, so we prefix `body`
   and cover Blocksy's real structural classes (.ct-footer-top /
   .ct-footer-bottom) as well as the [data-row] wrappers. */
body footer.ct-footer,
body .ct-footer,
body .ct-footer-top,
body .ct-footer-bottom,
body #main-footer,
body .ct-footer [data-row] {
  background-color: var(--ink) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

/* Column / widget headings — Baloo 2, uppercase, white, tracked out */
.ct-footer .widget-title,
.ct-footer .ct-widget-title,
.ct-footer [data-column] .widget-title,
.ct-footer h3,
.ct-footer h4 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff !important;
  margin: 0 0 12px !important;
}

/* Footer menu + widget links — Nunito, sand, lime on hover.
   Targets Blocksy's real .ct-menu-link class plus widget/menu list links. */
body .ct-footer .menu li a,
body .ct-footer .ct-menu-link,
body .ct-footer [data-id="menu"] li a,
body .ct-footer .widget a,
body .ct-footer [data-column] li a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sand) !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
  transition: color var(--dur-fast) var(--ease-out);
}
body .ct-footer .menu li a:hover,
body .ct-footer .ct-menu-link:hover,
body .ct-footer [data-id="menu"] li a:hover,
body .ct-footer .widget a:hover,
body .ct-footer [data-column] li a:hover {
  color: var(--lime) !important;
}

/* Footer body copy / descriptions */
.ct-footer p,
.ct-footer .widget,
.ct-footer [data-id="text"] {
  font-family: var(--font-body);
  color: var(--sand);
  font-size: 14px;
  line-height: 1.6;
}

/* Social icons — outlined circles, lime accent on hover */
.ct-footer [data-id="socials"] a,
.ct-footer .ct-social-box a {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--r-pill) !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  color: var(--cream) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.ct-footer [data-id="socials"] a:hover,
.ct-footer .ct-social-box a:hover {
  border-color: var(--lime) !important;
  background: color-mix(in oklab, var(--lime) 16%, transparent) !important;
}

/* Bottom copyright row — hairline divider, Fredoka, muted stone.
   Covers both the [data-row="bottom"] wrapper and Blocksy's .ct-footer-bottom. */
body .ct-footer [data-row="bottom"],
body .ct-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--stone) !important;
}
body .ct-footer [data-row="bottom"] a,
body .ct-footer-bottom a       { color: var(--sand) !important; }
body .ct-footer [data-row="bottom"] a:hover,
body .ct-footer-bottom a:hover { color: var(--lime) !important; }

/* If you upload a dark / full-color logo to the footer, uncomment this to
   knock it white so it matches the homepage:
.ct-footer [data-id="logo"] img { filter: brightness(0) invert(1); }
*/

/* ---------- 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;
}


/* ============================================================
   14. HEADER, NAV & FOOTER OVERRIDES
   ------------------------------------------------------------
   Folded in from the old "Additional CSS" snippet so the whole
   design system lives in ONE enqueued file. These beat Blocksy's
   Customizer output and the site's custom dark-submenu styling,
   hence the high-specificity selectors + !important.
   ============================================================ */

/* ----- Top menu — top-level nav links ----- */
body #menu-main-menu-chinese > li > a.ct-menu-link,
body .ct-header nav[data-id="menu"] > ul > li > a.ct-menu-link {
  font-family:'Fredoka','GenSenRounded2 TC','Nunito',sans-serif !important;
  font-weight:600 !important;
  color:#5a4b40 !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  transition:color .16s ease,background-color .16s ease !important;
}
body #menu-main-menu-chinese > li > a.ct-menu-link:hover {
  color:#1a1613 !important;
  background-color:rgba(246,212,180,.55) !important;   /* peach tint */
}
body #menu-main-menu-chinese > li.current-menu-item > a.ct-menu-link,
body #menu-main-menu-chinese > li.current_page_item > a.ct-menu-link,
body #menu-main-menu-chinese > li.current-menu-ancestor > a.ct-menu-link {
  color:#1a1613 !important;
  background-color:#f6d4b4 !important;                  /* solid peach */
}

/* ----- Language switcher — flag sizing ----- */
body #header-menu-1 .lang-item > a.ct-menu-link {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
body #header-menu-1 .lang-item img {
  width:22px !important;
  height:15px !important;
  border-radius:3px !important;
  box-shadow:0 0 0 1px rgba(26,22,19,.12) !important;
  object-fit:cover !important;
}

/* ----- Cart + search icons ----- */
body .ct-header [data-id="cart"] > a {
  position:relative !important;
  background:#ffffff !important;
  color:#1a1613 !important;
  border:2px solid #1a1613 !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 #1a1613 !important;
  padding:8px 14px !important;
  transition:transform .16s ease,box-shadow .16s ease !important;
}
body .ct-header [data-id="cart"] > a:hover {
  transform:translate(-1px,-2px) !important;
  box-shadow:5px 6px 0 #1a1613 !important;
}
body .ct-header [data-id="cart"] .ct-cart-price,
body .ct-header [data-id="cart"] svg { color:#1a1613 !important; fill:currentColor !important; }
body .ct-header [data-id="cart"] .ct-cart-count {
  position:absolute !important; top:-8px !important; right:-6px !important;
  background:#fc9f5b !important; color:#1a1613 !important;
  border:2px solid #1a1613 !important;
}
body .ct-header [data-id="search"] svg,
body .ct-header .ct-toggle-button svg { color:#1a1613 !important; }

/* ----- Top menu — dropdown panel (overrides dark flyout) ----- */
body #header-menu-1 ul.sub-menu,
body .header-menu-1 ul.sub-menu,
body .ct-header .animated-submenu-block > ul.sub-menu {
  background-color: #fffaf2 !important;   /* paper */
  border: 2px solid #ead9c5 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(26,22,19,.18) !important;
  padding: 8px !important;
}
body #header-menu-1 ul.sub-menu li,
body .header-menu-1 ul.sub-menu li {
  background: transparent !important;
  border: none !important;
}
body #header-menu-1 ul.sub-menu a.ct-menu-link,
body .header-menu-1 ul.sub-menu a.ct-menu-link {
  color: #5a4b40 !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
body #header-menu-1 ul.sub-menu a.ct-menu-link:hover,
body .header-menu-1 ul.sub-menu a.ct-menu-link:hover,
body #header-menu-1 ul.sub-menu li.current-menu-item > a.ct-menu-link {
  color: #1a1613 !important;
  background-color: #f6d4b4 !important;   /* peach */
}

/* ----- Footer ----- */
body footer.ct-footer,
body .ct-footer,
body .ct-footer-top,
body .ct-footer-bottom,
body .ct-footer [data-row] {
  background-color: #5a8a63 !important;   /* soft fern green */
  background-image: none !important;
  color: #f1f8ee !important;              /* light green-cream */
}
body .ct-footer .widget-title,
body .ct-footer h3,
body .ct-footer h4 {
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800 !important;
}
body .ct-footer .ct-menu-link,
body .ct-footer .menu li a,
body .ct-footer .widget a {
  color: #e0eedd !important;              /* soft green-sand */
  text-decoration: none !important;
}
body .ct-footer .ct-menu-link:hover,
body .ct-footer .menu li a:hover,
body .ct-footer .widget a:hover {
  color: #a5e000 !important;              /* lime */
}
body .ct-footer [data-id="socials"] a,
body .ct-footer .ct-social-box a {
  border: 2px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  color: #fff7ec !important;
}
body .ct-footer [data-id="socials"] a:hover,
body .ct-footer .ct-social-box a:hover {
  border-color: #a5e000 !important;
}
body .ct-footer-bottom,
body .ct-footer [data-row="bottom"] {
  border-top: 1px solid rgba(255,255,255,.18);
  color: #c3dabd !important;              /* muted green */
}
body .ct-footer-bottom a,
body .ct-footer [data-row="bottom"] a { color: #e0eedd !important; }
body .ct-footer-bottom a:hover,
body .ct-footer [data-row="bottom"] a:hover { color: #a5e000 !important; }