/* =====================================================================
   Chang Design 2026 — Chang Handmade Shop
   Everything is scoped to body.chang-v2 so it only applies when the new
   design is active (preview cookie or chang_design_live option).
   ===================================================================== */

:root {
  --c-ink: #203B3A;
  --c-text: #3D4A49;
  --c-muted: #6E7B79;
  --c-teal: #1F6F6A;
  --c-teal-d: #17524F;
  --c-teal-l: #DDEFEC;
  --c-coral: #E8634A;
  --c-coral-d: #CF4F37;
  --c-peach: #F6A570;
  --c-sun: #F3C35B;
  --c-blush: #FCE4E0;
  --c-rose: #EE9CA7;
  --c-sage: #D5E8CE;
  --c-cream: #FFF8EF;
  --c-paper: #FFFDFA;
  --c-line: #F0E4D6;
  --g-cta: linear-gradient(135deg, #F27C55 0%, #E2575C 100%);
  --g-len: linear-gradient(140deg, #FFE7CF 0%, #FFD3A8 55%, #FBC17F 100%);
  --g-hoa: linear-gradient(140deg, #FFEDEE 0%, #FCD2D8 55%, #F5B2BF 100%);
  --g-qua: linear-gradient(140deg, #EAF6E6 0%, #D3EBDD 55%, #BFE0D6 100%);
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-head: "Playfair Display", Georgia, serif;
  --f-script: "Dancing Script", cursive;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;
  --sh-soft: 0 2px 6px rgba(32, 59, 58, .05), 0 10px 30px -12px rgba(32, 59, 58, .18);
  --sh-lift: 0 4px 10px rgba(32, 59, 58, .06), 0 26px 50px -20px rgba(32, 59, 58, .32);
  --sh-coral: 0 12px 28px -10px rgba(226, 87, 92, .55);
  --wrap: 1200px;
}

/* ---------------------------------------------------------------- base */
body.chang-v2 {
  background: var(--c-paper) !important;
  color: var(--c-text);
  font-family: var(--f-body) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.chang-v2 h1, body.chang-v2 h2, body.chang-v2 h3,
body.chang-v2 .entry-title, body.chang-v2 .page-title {
  font-family: var(--f-head) !important;
  color: var(--c-ink) !important;
  letter-spacing: -.01em !important;
}
body.chang-v2 p, body.chang-v2 li, body.chang-v2 input, body.chang-v2 select,
body.chang-v2 textarea, body.chang-v2 button, body.chang-v2 a { font-family: var(--f-body); }
body.chang-v2 ::selection { background: var(--c-blush); color: var(--c-ink); }
body.chang-v2 a { transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s; }

.chang-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.chang-script { font-family: var(--f-script) !important; font-weight: 700; color: var(--c-coral) !important; font-size: 1.5rem; line-height: 1; margin: 0 0 8px !important; }
.chang-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -.15em; }
.chang-mini { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- buttons */
.chang-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none !important; cursor: pointer; border: 2px solid transparent;
}
.chang-btn .chang-ico { width: 18px; height: 18px; }
.chang-btn--primary { background: var(--g-cta); color: #fff !important; box-shadow: var(--sh-coral); }
.chang-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(226, 87, 92, .65); }
.chang-btn--ghost { background: #fff; color: var(--c-teal) !important; border-color: var(--c-teal-l); box-shadow: var(--sh-soft); }
.chang-btn--ghost:hover { border-color: var(--c-teal); transform: translateY(-2px); }
.chang-btn--light { background: #fff; color: var(--c-coral-d) !important; }
.chang-btn--light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); }
.chang-btn--outline-light { color: #fff !important; border-color: rgba(255, 255, 255, .7); }
.chang-btn--outline-light:hover { background: rgba(255, 255, 255, .14); }
.chang-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.chang-link { display: inline-flex; align-items: center; gap: 8px; color: var(--c-coral) !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.chang-link:hover { gap: 12px; color: var(--c-coral-d) !important; }

/* ---------------------------------------------------------------- preview flag + top bar */
.chang-preview-flag {
  background: #203B3A; color: #fff; text-align: center; font-size: .82rem; padding: 7px 12px; font-family: var(--f-body);
}
.chang-preview-flag a { color: var(--c-sun) !important; font-weight: 700; margin-left: 8px; }
.chang-topbar { background: var(--c-teal); color: #fff; font-size: .84rem; font-weight: 500; }
.chang-topbar__track { max-width: var(--wrap); margin: 0 auto; padding: 9px 24px; display: flex; justify-content: center; gap: 36px; }
.chang-topbar span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.chang-topbar .chang-ico { color: var(--c-sun); }
.chang-topbar a { color: var(--c-sun) !important; font-weight: 700; text-decoration: none !important; }

/* ---------------------------------------------------------------- header (Botiga builder) */
body.chang-v2 .site-header, body.chang-v2 .bhfb-header {
  background: rgba(255, 253, 250, .92) !important;
  border-bottom: 1px solid var(--c-line) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
}
body.chang-v2.chang-scrolled .bhfb-header { box-shadow: 0 8px 30px -18px rgba(32, 59, 58, .35); }
body.chang-v2 .bhfb-main_header_row .bhfb-row { min-height: 78px; }
body.chang-v2 .site-title a {
  font-family: var(--f-script) !important; font-size: 2.1rem !important; font-weight: 700 !important;
  color: var(--c-coral) !important; letter-spacing: 0 !important;
}
body.chang-v2 .site-title a:hover { color: var(--c-coral-d) !important; }
/* Logo image: the file is a square on a cream background, so crop it to the
   logo's own dashed circle and show it as a round badge. */
body.chang-v2 .site-branding .custom-logo-link {
  display: inline-block; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; line-height: 0;
  background: #FAF5EC; box-shadow: 0 0 0 3px #fff, 0 6px 18px -6px rgba(32, 59, 58, .35);
  transition: transform .25s;
}
body.chang-v2 .site-branding .custom-logo-link:hover { transform: rotate(-6deg) scale(1.05); }
/* Logo badge followed by the shop name on one row. */
body.chang-v2 .site-branding { display: flex; align-items: center; gap: 14px; }
body.chang-v2 .site-branding .site-title { margin: 0 !important; line-height: 1 !important; }
body.chang-v2 .site-branding .site-description { display: none !important; }
body.chang-v2 .site-branding .custom-logo {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover; transform: scale(1.09) translate(0, 1.2%);
}
body.chang-v2 .main-navigation .menu > li > a {
  font-family: var(--f-body) !important; font-size: .95rem !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--c-ink) !important;
  position: relative; padding-top: 8px !important; padding-bottom: 8px !important;
}
body.chang-v2 .main-navigation .menu > li > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--g-cta); transition: left .25s, right .25s;
}
body.chang-v2 .main-navigation .menu > li > a:hover::after,
body.chang-v2 .main-navigation .menu > li.current-menu-item > a::after { left: 14%; right: 14%; }
body.chang-v2 .main-navigation .menu > li > a:hover,
body.chang-v2 .main-navigation .menu > li.current-menu-item > a { color: var(--c-coral) !important; }
body.chang-v2 .main-navigation ul ul {
  background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-lift) !important; padding: 8px !important;
}
body.chang-v2 .main-navigation ul ul li a { border-radius: 8px; padding: 9px 14px !important; color: var(--c-ink) !important; font-weight: 500 !important; }
body.chang-v2 .main-navigation ul ul li a:hover { background: var(--c-blush) !important; color: var(--c-coral-d) !important; }
/* Mobile/tablet header (Botiga shows it up to 1024px): one 12px gutter instead of two stacked
   ones, and the search icon grouped with the account/cart/menu icons on the right instead of
   floating in the middle. */
body.chang-v2 .bhfb-mobile .bhfb-main_header_row .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-row { padding: 0 12px !important; gap: 6px; }
body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-column-1 { margin-left: auto !important; }
body.chang-v2 .bhfb-header .ws-svg-icon svg, body.chang-v2 .bhfb-header .header-item svg { fill: var(--c-ink) !important; }
body.chang-v2 .bhfb-header a:hover .ws-svg-icon svg, body.chang-v2 .bhfb-header .header-item:hover svg { fill: var(--c-coral) !important; }
body.chang-v2 .bhfb-header .count-number, body.chang-v2 .bhfb-header .cart-count, body.chang-v2 .site-header-cart .count-number {
  background: var(--c-coral) !important; color: #fff !important; font-weight: 700 !important;
}

/* ---------------------------------------------------------------- placeholders (no photo yet) */
.chang-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--g-qua);
}
.chang-ph::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1.4px, transparent 1.6px);
  background-size: 18px 18px;
}
.chang-ph--len { background: var(--g-len); }
.chang-ph--hoa { background: var(--g-hoa); }
.chang-ph__art { position: relative; width: 58%; max-width: 220px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.chang-ph__art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 16px rgba(32, 59, 58, .12)); }
.chang-ph__note {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: rgba(32, 59, 58, .55);
  background: rgba(255, 255, 255, .6); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.chang-ph--lg { aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
.chang-ph--lg .chang-ph__art { width: 46%; max-width: 280px; }
.chang-ph--lg .chang-ph__note { font-size: .8rem; bottom: 16px; }

/* ---------------------------------------------------------------- homepage: full bleed */
body.chang-v2.home #content { padding-top: 0 !important; padding-bottom: 0 !important; }
body.chang-v2 .content-wrapper { margin-top: 20px !important; }
body.chang-v2.home .content-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; }
body.chang-v2.home .main-row { margin-top: 0 !important; }
.chang-home {
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  background: var(--c-paper);
}
.chang-section { padding: 88px 0; position: relative; }
.chang-heading { text-align: center; margin-bottom: 44px; }
.chang-heading h2, .chang-rowhead h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.15 !important; }

/* hero */
.chang-hero2 { position: relative; overflow: hidden; padding: 64px 0 72px; background: var(--c-cream); }
.chang-blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .85; pointer-events: none; }
.chang-blob--a { width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, #FFD9CC, rgba(255, 217, 204, 0) 70%); top: -180px; left: -140px; }
.chang-blob--b { width: 460px; height: 460px; background: radial-gradient(circle at 50% 50%, #FDE7B4, rgba(253, 231, 180, 0) 70%); bottom: -200px; left: 38%; }
.chang-blob--c { width: 560px; height: 560px; background: radial-gradient(circle at 50% 50%, #D7EEDF, rgba(215, 238, 223, 0) 70%); top: -120px; right: -180px; }
.chang-hero2__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* Hero showcase: four real products as tilted, staggered cards. */
.chang-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 420px; margin: 0 auto; padding: 6px 0 36px; }
.chang-minicard {
  position: relative; display: block; background: #fff; border-radius: 22px; overflow: hidden;
  text-decoration: none !important; color: var(--c-ink) !important; box-shadow: var(--sh-lift);
  border: 6px solid #fff; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.chang-minicard--1 { transform: rotate(-4deg); }
.chang-minicard--2 { transform: translateY(26px) rotate(3deg); }
/* Third card sits centred under the first two (triangle). */
.chang-minicard--3 { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); margin-top: 18px; transform: rotate(2.5deg); }
.chang-minicard:hover { transform: translateY(-6px) rotate(0) scale(1.03); box-shadow: 0 30px 60px -24px rgba(32, 59, 58, .45); z-index: 2; }
.chang-minicard--2:hover { transform: translateY(20px) rotate(0) scale(1.03); }
.chang-minicard__media { position: relative; border-radius: 16px; overflow: hidden; }
.chang-minicard__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.chang-minicard .chang-ph__note { display: none; }
.chang-minicard .chang-ph__art { width: 64%; }
.chang-minicard__body { padding: 10px 8px 6px; text-align: center; }
/* Two lines so long names keep their distinguishing end, e.g. "(hồng dâu)". */
.chang-minicard__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 700; font-size: .9rem; line-height: 1.3; min-height: 2.6em;
}
.chang-hero2__text h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.3rem) !important; line-height: 1.06 !important; font-weight: 800 !important; margin: 0 0 22px !important;
  text-wrap: balance;
}
.chang-hero2__text h1 em {
  font-style: italic; color: var(--c-coral) !important;
  background: linear-gradient(transparent 62%, rgba(243, 195, 91, .55) 62%, rgba(243, 195, 91, .55) 90%, transparent 90%);
}
.chang-hero2__text .chang-script { font-size: 1.9rem; }
.chang-lead { font-size: 1.12rem; line-height: 1.7; color: var(--c-text); max-width: 520px; margin: 0 !important; }
.chang-chips { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chang-chips li {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .9rem; font-weight: 600; color: var(--c-ink); box-shadow: var(--sh-soft);
}
.chang-chips li:nth-child(1) .chang-mini { color: var(--c-peach); }
.chang-chips li:nth-child(2) .chang-mini { color: var(--c-rose); }
.chang-chips li:nth-child(3) .chang-mini { color: var(--c-sun); }

/* category cards */
.chang-cats { background: var(--c-paper); }
.chang-cats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.chang-cats__grid.is-single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.chang-catcard {
  position: relative; display: grid; grid-template-columns: 1fr 42%; align-items: center; gap: 12px;
  padding: 40px 34px 40px 44px; border-radius: var(--r-lg); overflow: hidden; min-height: 270px;
  text-decoration: none !important; color: var(--c-ink) !important; box-shadow: var(--sh-soft);
}
.chang-catcard::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .7) 1.5px, transparent 1.7px); background-size: 20px 20px; opacity: .45; pointer-events: none; }
.chang-catcard--len { background: var(--g-len); }
.chang-catcard--hoa { background: var(--g-hoa); }
.chang-catcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.chang-catcard__text { position: relative; z-index: 1; }
.chang-catcard__count { display: inline-block; background: rgba(255, 255, 255, .75); color: var(--c-ink); font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.chang-catcard h3 { font-size: 2.2rem !important; font-weight: 800 !important; margin: 14px 0 8px !important; }
.chang-catcard p { margin: 0 0 20px !important; color: var(--c-text); line-height: 1.6; }
.chang-catcard__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; background: #fff; padding: 11px 20px; border-radius: 999px; color: var(--c-coral-d); box-shadow: var(--sh-soft); }
.chang-catcard:hover .chang-catcard__go { gap: 13px; }
.chang-catcard__art { position: relative; z-index: 1; }
.chang-catcard__art svg { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 18px 24px rgba(32, 59, 58, .16)); }
.chang-catcard:hover .chang-catcard__art svg { transform: rotate(-6deg) scale(1.06); }

/* product rows */
.chang-products--len { background: linear-gradient(180deg, var(--c-paper) 0%, #FFF3E6 100%); }
.chang-products--hoa { background: linear-gradient(180deg, #FFF3F2 0%, var(--c-paper) 100%); }
.chang-rowhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
/* Always 3 per row (2 rows of 3 when 6 products). With 4–5 products only complete rows show,
   so there is never a lone card: 4/5 -> 3 on desktop & tablet (phones: see 2-column rules). */
.chang-grid3 { --g: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.chang-grid3 > .chang-pcard { flex: 0 0 calc((100% - 2 * var(--g)) / 3); min-width: 0; }
.chang-grid3.is-n4 > .chang-pcard:nth-child(n+4), .chang-grid3.is-n5 > .chang-pcard:nth-child(n+4) { display: none; }

.chang-pcard {
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md);
  overflow: hidden; text-decoration: none !important; color: var(--c-ink) !important; box-shadow: var(--sh-soft);
  border: 1px solid rgba(240, 228, 214, .7);
}
.chang-pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.chang-pcard:hover .chang-ph__art { transform: scale(1.08) rotate(-4deg); }
.chang-pcard__media { position: relative; overflow: hidden; }
.chang-pcard__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s; }
.chang-pcard:hover .chang-pcard__media img { transform: scale(1.06); }
.chang-pcard__badge { position: absolute; top: 12px; left: 12px; background: var(--g-cta); color: #fff; font-weight: 800; font-size: .78rem; padding: 6px 11px; border-radius: 999px; box-shadow: var(--sh-coral); }
.chang-pcard__body { padding: 16px 18px 6px; flex: 1; }
body.chang-v2 .chang-pcard__body h3 { font-family: var(--f-body) !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 8px !important; color: var(--c-ink) !important; }
.chang-pcard__price { font-weight: 800; color: var(--c-coral-d); font-size: 1.08rem; }
.chang-pcard__price del { color: #A9B2B0; font-weight: 500; font-size: .86rem; margin-right: 6px; }
.chang-pcard__price ins,
body.chang-v2 ul.products li.product .price ins,
body.chang-v2.single-product .summary .price ins { text-decoration: none !important; background: none !important; }
.chang-pcard__cta { margin: 6px 18px 18px; font-size: .86rem; font-weight: 700; color: var(--c-teal); opacity: .75; }
.chang-pcard:hover .chang-pcard__cta { opacity: 1; color: var(--c-coral); }

/* why */
.chang-why { background: var(--c-paper); }
.chang-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.chang-why__item { background: #fff; border-radius: var(--r-md); padding: 30px 26px; box-shadow: var(--sh-soft); border: 1px solid rgba(240, 228, 214, .7); }
.chang-why__item:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.chang-why__ico { width: 58px; height: 58px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.chang-why__ico .chang-ico { width: 26px; height: 26px; }
.chang-why__ico.is-coral { background: #FFE3DC; color: var(--c-coral-d); }
.chang-why__ico.is-sun { background: #FFF1CC; color: #B98512; }
.chang-why__ico.is-teal { background: var(--c-teal-l); color: var(--c-teal); }
.chang-why__ico.is-rose { background: #FCE1E5; color: #C95A6C; }
body.chang-v2 .chang-why__item h3 { font-family: var(--f-body) !important; font-size: 1.08rem !important; font-weight: 800 !important; margin: 0 0 8px !important; }
.chang-why__item p { margin: 0 !important; color: var(--c-muted); line-height: 1.6; font-size: .95rem; }

/* cta */
.chang-cta { padding-top: 20px; padding-bottom: 24px; }
.chang-cta__box {
  position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: 36px;
  padding: 64px 32px; background: linear-gradient(135deg, #1F6F6A 0%, #2A8C7F 55%, #3BA58F 100%);
  box-shadow: 0 30px 60px -30px rgba(31, 111, 106, .7);
}
.chang-cta__box::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.6px, transparent 1.8px); background-size: 22px 22px; }
.chang-cta__box > * { position: relative; }
.chang-cta__box .chang-script { color: var(--c-sun) !important; }
body.chang-v2 .chang-cta__box h2 { color: #fff !important; font-size: clamp(1.9rem, 3.6vw, 2.8rem) !important; font-weight: 800 !important; margin: 0 0 12px !important; }
.chang-cta__box p { color: rgba(255, 255, 255, .88); max-width: 560px; margin: 0 auto !important; font-size: 1.05rem; line-height: 1.6; }
.chang-cta__box .chang-actions { justify-content: center; }
.chang-cta__art { position: absolute !important; width: 170px; opacity: .95; }
.chang-cta__art svg { width: 100%; height: auto; display: block; }
.chang-cta__art--l { left: -24px; bottom: -30px; transform: rotate(-12deg); }
.chang-cta__art--r { right: -20px; top: -26px; transform: rotate(14deg); }

/* ---------------------------------------------------------------- shop / category archive */
.chang-pagehero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 24px;
  border-radius: var(--r-lg); padding: 38px 44px; margin: 8px 0 26px; background: var(--g-qua); box-shadow: var(--sh-soft);
}
.chang-pagehero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .7) 1.5px, transparent 1.7px); background-size: 20px 20px; opacity: .4; pointer-events: none; }
.chang-pagehero--len { background: var(--g-len); }
.chang-pagehero--hoa { background: var(--g-hoa); }
.chang-pagehero__text, .chang-pagehero__art { position: relative; z-index: 1; }
.chang-pagehero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem) !important; font-weight: 800 !important; margin: 0 0 8px !important; text-align: left !important; }
.chang-pagehero p:not(.chang-script) { margin: 0 !important; color: var(--c-text); font-size: 1.04rem; max-width: 560px; }
.chang-pagehero__art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 22px rgba(32, 59, 58, .16)); }

/* Botiga's archive header: keep the breadcrumb, drop its title/description (the new hero has them). */
body.chang-v2 .woocommerce-page-header { background: transparent !important; padding: 26px 0 0 !important; margin: 0 !important; text-align: left !important; }
body.chang-v2 .woocommerce-page-header .page-title,
body.chang-v2 .woocommerce-page-header .term-description,
body.chang-v2 .woocommerce-page-header .page-description { display: none !important; }

.chang-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.chang-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: #fff; border: 2px solid var(--c-line); color: var(--c-ink) !important; font-weight: 700; text-decoration: none !important; box-shadow: var(--sh-soft);
}
.chang-pill em { font-style: normal; font-size: .76rem; background: var(--c-cream); color: var(--c-muted); padding: 2px 8px; border-radius: 999px; }
.chang-pill--len .chang-mini { color: var(--c-peach); }
.chang-pill--hoa .chang-mini { color: var(--c-rose); }
.chang-pill--qua .chang-mini { color: var(--c-sun); }
.chang-pill:hover { border-color: var(--c-coral); transform: translateY(-2px); }
.chang-pill.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff !important; }
.chang-pill.is-active em { background: rgba(255, 255, 255, .15); color: #fff; }

body.chang-v2 .woocommerce-result-count { color: var(--c-muted) !important; font-size: .9rem !important; }
body.chang-v2 .woocommerce-ordering select {
  border: 2px solid var(--c-line) !important; border-radius: 999px !important; padding: 9px 38px 9px 16px !important; background-color: #fff !important; font-weight: 600; color: var(--c-ink);
}
body.chang-v2 .woocommerce-breadcrumb { font-size: .86rem !important; color: var(--c-muted) !important; }
body.chang-v2 .woocommerce-breadcrumb a { color: var(--c-teal) !important; }

body.chang-v2 ul.products { gap: 26px !important; }
body.chang-v2 ul.products li.product {
  background: #fff !important; border-radius: var(--r-md) !important; overflow: hidden !important; padding: 0 0 18px !important;
  box-shadow: var(--sh-soft) !important; border: 1px solid rgba(240, 228, 214, .7); text-align: left !important;
  transition: transform .3s, box-shadow .3s !important;
}
body.chang-v2 ul.products li.product:hover { transform: translateY(-6px) !important; box-shadow: var(--sh-lift) !important; }
body.chang-v2 ul.products li.product:hover .chang-ph__art { transform: scale(1.08) rotate(-4deg); }
body.chang-v2 ul.products li.product .loop-image-wrap { position: relative; overflow: hidden; margin: 0 !important; }
body.chang-v2 ul.products li.product a img { height: auto !important; aspect-ratio: 1 / 1; }
body.chang-v2 ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-body) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--c-ink) !important; padding: 16px 18px 6px !important; margin: 0 !important;
}
body.chang-v2 ul.products li.product .price { padding: 0 18px !important; color: var(--c-coral-d) !important; font-weight: 800 !important; font-size: 1.08rem !important; }
body.chang-v2 ul.products li.product .price del { color: #A9B2B0 !important; font-weight: 500 !important; }
body.chang-v2 ul.products li.product .price ins { text-decoration: none !important; }
body.chang-v2 ul.products li.product .onsale, body.chang-v2 .onsale {
  background: var(--g-cta) !important; color: #fff !important; border-radius: 999px !important; font-weight: 800 !important;
  padding: 6px 12px !important; min-height: 0 !important; line-height: 1.2 !important; box-shadow: var(--sh-coral);
}
body.chang-v2 .woocommerce-pagination ul { border: 0 !important; display: flex !important; gap: 8px; justify-content: center; }
body.chang-v2 .woocommerce-pagination ul li { border: 0 !important; }
body.chang-v2 .woocommerce-pagination ul li a, body.chang-v2 .woocommerce-pagination ul li span {
  border-radius: 999px !important; min-width: 42px; height: 42px; display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff !important; border: 2px solid var(--c-line) !important; color: var(--c-ink) !important; font-weight: 700;
}
body.chang-v2 .woocommerce-pagination ul li span.current { background: var(--c-ink) !important; border-color: var(--c-ink) !important; color: #fff !important; }

/* ---------------------------------------------------------------- single product */
body.chang-v2.single-product .woocommerce-product-gallery { opacity: 1 !important; }
body.chang-v2.single-product .woocommerce-product-gallery__image--placeholder { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-soft); }
body.chang-v2.single-product .woocommerce-product-gallery img { border-radius: var(--r-lg); }
body.chang-v2.single-product .product_title { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; font-weight: 800 !important; line-height: 1.15 !important; margin-bottom: 12px !important; text-align: left !important; }
body.chang-v2.single-product .summary .price { color: var(--c-coral-d) !important; font-size: 1.7rem !important; font-weight: 800 !important; }
body.chang-v2.single-product .summary .price del { color: #A9B2B0 !important; font-size: 1.1rem !important; font-weight: 500 !important; }
body.chang-v2.single-product .summary .price ins { text-decoration: none !important; }
body.chang-v2.single-product .woocommerce-product-details__short-description { font-size: 1.04rem; line-height: 1.7; color: var(--c-text); }
body.chang-v2.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.chang-v2.single-product .botiga-single-addtocart-wrapper { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.chang-v2 .quantity { border: 2px solid var(--c-line) !important; border-radius: 999px !important; background: #fff; overflow: hidden; }
body.chang-v2 .quantity input.qty { border: 0 !important; font-weight: 700; color: var(--c-ink); background: transparent !important; }
body.chang-v2 .quantity a { color: var(--c-ink) !important; }
body.chang-v2.single-product .single_add_to_cart_button,
body.chang-v2 .woocommerce a.button.alt, body.chang-v2 .woocommerce button.button.alt {
  background: var(--g-cta) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 16px 32px !important; font-weight: 800 !important; font-size: 1rem !important; letter-spacing: 0 !important;
  text-transform: none !important; box-shadow: var(--sh-coral) !important;
}
body.chang-v2.single-product .single_add_to_cart_button:hover { transform: translateY(-2px); }
.chang-ask {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px;
  background: #E8F1FF; color: #0057D9 !important; font-weight: 700; text-decoration: none !important; border: 2px solid #CFE0FF;
}
.chang-ask:hover { background: #0068FF; color: #fff !important; border-color: #0068FF; }
.chang-trust { list-style: none; margin: 22px 0 6px !important; padding: 18px 20px !important; background: var(--c-cream); border-radius: var(--r-md); border: 1px dashed #EBD6BF; display: grid; gap: 10px; }
.chang-trust li { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; font-size: .95rem; color: var(--c-text); }
.chang-trust .chang-ico { color: var(--c-coral); width: 20px; height: 20px; margin-top: 1px; }
body.chang-v2.single-product .product_meta { font-size: .9rem; color: var(--c-muted); }
body.chang-v2.single-product .product_meta a { color: var(--c-teal) !important; font-weight: 600; }
body.chang-v2 .woocommerce-tabs ul.tabs { border: 0 !important; display: flex; gap: 8px; flex-wrap: wrap; padding: 0 !important; }
body.chang-v2 .woocommerce-tabs ul.tabs li { border: 0 !important; margin: 0 !important; }
body.chang-v2 .woocommerce-tabs ul.tabs li a { border-radius: 999px !important; padding: 10px 20px !important; background: var(--c-cream) !important; color: var(--c-ink) !important; font-weight: 700 !important; }
body.chang-v2 .woocommerce-tabs ul.tabs li.active a { background: var(--c-ink) !important; color: #fff !important; }
body.chang-v2 .woocommerce-tabs .panel { background: #fff; border-radius: var(--r-md); padding: 26px 28px !important; box-shadow: var(--sh-soft); }
body.chang-v2 .related > h2, body.chang-v2 .upsells > h2 { font-size: 2rem !important; font-weight: 800 !important; }

/* ---------------------------------------------------------------- cart / checkout / account */
body.chang-v2 .wc-proceed-to-checkout .checkout-button,
body.chang-v2.woocommerce-checkout #payment #place_order,
body.chang-v2 .woocommerce #payment #place_order {
  background: var(--g-cta) !important; border-radius: 999px !important; box-shadow: var(--sh-coral) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 800 !important; font-size: 1rem !important;
}
body.chang-v2 .woocommerce-cart-form table.shop_table, body.chang-v2 .cart_totals table, body.chang-v2 .woocommerce-checkout-review-order-table {
  border-radius: var(--r-md) !important; border: 1px solid var(--c-line) !important; overflow: hidden; background: #fff;
}
body.chang-v2 .woocommerce-cart-form table.shop_table th { background: var(--c-cream) !important; color: var(--c-ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; }
body.chang-v2 .cart_totals .order-total .amount { color: var(--c-coral-d) !important; font-weight: 800 !important; }
body.chang-v2 .woocommerce form .form-row input.input-text, body.chang-v2 .woocommerce form .form-row textarea,
body.chang-v2 .woocommerce form .form-row select, body.chang-v2 .select2-container--default .select2-selection--single {
  border: 2px solid var(--c-line) !important; border-radius: var(--r-sm) !important; padding: 12px 14px !important; background: #fff !important;
}
body.chang-v2 .woocommerce form .form-row input.input-text:focus, body.chang-v2 .woocommerce form .form-row textarea:focus {
  border-color: var(--c-teal) !important; box-shadow: 0 0 0 4px rgba(31, 111, 106, .12) !important;
}
body.chang-v2 .woocommerce-cart-form .button[name=update_cart], body.chang-v2 .return-to-shop .button {
  border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.chang-v2 .return-to-shop .button { background: var(--g-cta) !important; color: #fff !important; border: 0 !important; padding: 14px 28px !important; }
body.chang-v2 .chang-order-note, body.chang-v2 .chang-cart-note {
  background: #FFF6E0; border: 1px solid #F5DFA8; border-radius: var(--r-sm); padding: 14px 18px; color: #6B5317;
}
body.chang-v2 .woocommerce-message, body.chang-v2 .woocommerce-info {
  border-radius: var(--r-sm) !important; border-top-color: var(--c-teal) !important; background: var(--c-teal-l) !important; color: var(--c-ink) !important;
}
body.chang-v2 .woocommerce-message .button, body.chang-v2 .woocommerce-info .button { border-radius: 999px !important; }
body.chang-v2 #chang-auth-modal { border-radius: 28px; }
body.chang-v2 #chang-auth-modal h2 { font-family: var(--f-head) !important; color: var(--c-ink) !important; font-weight: 800; }
body.chang-v2 #chang-auth-modal button[type=submit] { background: var(--g-cta) !important; box-shadow: var(--sh-coral); font-weight: 800; }
body.chang-v2 .page-id-61 .wpcf7 { border-radius: var(--r-lg) !important; border-color: var(--c-line) !important; }
body.chang-v2 .wpcf7-form .wpcf7-submit { background: var(--g-cta) !important; box-shadow: var(--sh-coral); font-weight: 800 !important; }

/* ---------------------------------------------------------------- footer */
body.chang-v2 .site-footer, body.chang-v2 footer.bhfb-footer { display: none !important; }
.chang-footer { position: relative; background: #1C3533; color: rgba(255, 255, 255, .78); margin-top: 70px; font-family: var(--f-body); }
/* Row of small domes rising out of the footer's top edge. */
.chang-footer__wave {
  position: absolute; left: 0; right: 0; top: -17px; height: 18px;
  background: radial-gradient(circle at 18px 18px, #1C3533 17.5px, transparent 18px) repeat-x;
  background-size: 36px 18px;
}
.chang-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-top: 64px; padding-bottom: 46px; }
body.chang-v2 .chang-footer__logo { font-family: var(--f-script); font-size: 2.2rem; font-weight: 700; color: #fff !important; text-decoration: none !important; }
.chang-footer__logo::first-letter { color: var(--c-peach); }
.chang-footer__brand p { line-height: 1.7; margin: 12px 0 20px; max-width: 340px; }
.chang-footer h4 { color: #fff !important; font-family: var(--f-body) !important; font-size: 1rem !important; font-weight: 800 !important; margin: 6px 0 16px !important; letter-spacing: 0 !important; }
.chang-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.chang-footer a { color: rgba(255, 255, 255, .8) !important; text-decoration: none !important; }
.chang-footer a:hover { color: var(--c-sun) !important; }
.chang-footer__contact li { display: flex; align-items: center; gap: 10px; }
.chang-footer__contact .chang-ico { color: var(--c-peach); }
.chang-footer__social { display: flex; gap: 10px; }
.chang-footer__social a {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff !important; font-weight: 800; font-size: .72rem;
}
.chang-footer__social a:hover { background: var(--c-coral); transform: translateY(-3px); }
.chang-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; padding: 18px 24px 22px; font-size: .86rem; color: rgba(255, 255, 255, .6); }
.chang-footer__bottom span { color: var(--c-rose); }

/* ---------------------------------------------------------------- floating contact buttons */
.chang-float { position: fixed; right: 18px; bottom: 22px; z-index: 99990; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.chang-float__links { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.chang-float__toggle { display: none; }
body.woocommerce-cart .chang-float, body.woocommerce-checkout .chang-float { display: none !important; }
.chang-float__btn {
  position: relative; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff !important; text-decoration: none !important; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
}
.chang-float__btn .chang-ico { width: 24px; height: 24px; }
.chang-float__btn b { font-size: .78rem; font-weight: 800; letter-spacing: .01em; }
.chang-float__btn span {
  position: absolute; right: 66px; top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none;
  background: #fff; color: var(--c-ink); font-weight: 700; font-size: .85rem; padding: 8px 14px; border-radius: 999px;
  box-shadow: var(--sh-lift); white-space: nowrap; transition: opacity .2s, transform .2s;
}
.chang-float__btn:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
.chang-float__btn:hover { transform: scale(1.08); }
.chang-float__btn.is-fb { background: linear-gradient(135deg, #1877F2, #0B5FD3); }
.chang-float__btn.is-zalo {
  background: linear-gradient(135deg, #0A7CFF, #0058D6);
  animation: chang-zalo-breathe 2.6s ease-in-out infinite;
}
.chang-float__btn.is-zalo:hover, .chang-float__btn.is-zalo:focus-visible { animation: none; }
.chang-float__btn.is-phone { background: var(--g-cta); }

/* ---------------------------------------------------------------- motion */
/* No hide-until-scrolled reveal: in-app browsers (Zalo/Facebook) and slow phones can leave
   such content blank, so content is always visible and motion stays decorative only. */
@keyframes chang-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes chang-morph {
  0%, 100% { border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%; }
  50% { border-radius: 56% 44% 54% 46% / 46% 56% 44% 54%; }
}
@keyframes chang-zalo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .chang-float__btn.is-zalo { animation: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .chang-why__grid { grid-template-columns: repeat(2, 1fr); }
  .chang-footer__grid { grid-template-columns: 1fr 1fr; }
  .chang-topbar__track span:nth-child(2) { display: none; }
}
@media (max-width: 860px) {
  /* Phones/tablets: text-only hero so it doesn't take a whole screen. */
  .chang-hero2 { padding: 44px 0 48px; }
  .chang-hero2__grid { grid-template-columns: 1fr; gap: 0; }
  .chang-hero2__visual { display: none; }
  .chang-grid3 { --g: 18px; }
  .chang-cats__grid { grid-template-columns: 1fr; }
  .chang-section { padding: 64px 0; }
  .chang-pagehero { grid-template-columns: 1fr 120px; padding: 28px 26px; }
}
@media (max-width: 640px) {
  .chang-wrap { padding: 0 16px; }
  .chang-topbar__track { justify-content: center; gap: 0; }
  .chang-topbar__track span:not(:first-child) { display: none; }
  .chang-grid3 { --g: 14px; }
  .chang-grid3 > .chang-pcard { flex-basis: calc((100% - var(--g)) / 2); }
  /* 2 per row on phones: show an even number (6 -> 3 rows of 2, 4/5 -> 4, 3 -> 2). */
  .chang-grid3.is-n4 > .chang-pcard:nth-child(4), .chang-grid3.is-n5 > .chang-pcard:nth-child(4) { display: flex; }
  .chang-grid3.is-n3 > .chang-pcard:nth-child(3) { display: none; }
  .chang-pcard__body { padding: 12px 12px 4px; }
  .chang-pcard__body h3 { font-size: .9rem !important; }
  .chang-pcard__price { font-size: .95rem; }
  .chang-pcard__cta { display: none; }
  .chang-ph__note { font-size: .62rem; bottom: 6px; }
  .chang-catcard { grid-template-columns: 1fr 36%; padding: 28px 22px; min-height: 0; }
  .chang-catcard h3 { font-size: 1.7rem !important; }
  .chang-why__grid { grid-template-columns: 1fr; }
  .chang-rowhead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .chang-actions { gap: 10px; }
  .chang-btn { padding: 13px 22px; font-size: .95rem; }
  /* Compact hero on phones: fits well within the first screen. */
  .chang-hero2 { padding: 26px 0 30px; }
  .chang-hero2__text .chang-script { font-size: 1.35rem; }
  .chang-hero2__text h1 { font-size: 2.05rem !important; margin-bottom: 12px !important; }
  .chang-lead { font-size: .97rem; line-height: 1.6; }
  .chang-hero2 .chang-actions { margin-top: 18px; flex-wrap: nowrap; }
  .chang-hero2 .chang-btn { padding: 12px 16px; font-size: .9rem; gap: 7px; }
  .chang-chips { display: none; }
  .chang-cta__box { padding: 48px 20px; border-radius: 28px; }
  .chang-cta__art { width: 110px; opacity: .5; }
  .chang-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .chang-pagehero { grid-template-columns: 1fr; }
  .chang-pagehero__art { display: none; }
  body.chang-v2 .site-title a { font-size: 1.3rem !important; white-space: nowrap; }
  body.chang-v2 .site-branding { gap: 8px; }
  body.chang-v2 .site-branding .custom-logo-link { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 4px 12px -5px rgba(32, 59, 58, .35); }
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-row { padding: 0 12px !important; gap: 4px; }
  body.chang-v2 .bhfb-main_header_row .bhfb-row { min-height: 62px; }
  .chang-float { right: 8px; bottom: 12px; gap: 8px; }
  .chang-float__btn { width: 44px; height: 44px; }
  .chang-float__btn .chang-ico { width: 20px; height: 20px; }
  .chang-float__btn b { font-size: .7rem; }
  .chang-float__btn span { display: none; }
  body.chang-v2 ul.products { gap: 14px !important; }
  body.chang-v2 ul.products li.product .woocommerce-loop-product__title { font-size: .9rem !important; padding: 12px 12px 4px !important; }
  body.chang-v2 ul.products li.product .price { padding: 0 12px !important; font-size: .95rem !important; }
}
@media (max-width: 400px) {
  /* Keep logo + search + account/cart + menu button inside a 360–400px screen. */
  body.chang-v2 .site-title a { font-size: .94rem !important; }
  body.chang-v2 .site-branding { gap: 6px; }
  body.chang-v2 .site-branding .custom-logo-link { width: 38px; height: 38px; }
}

/* Mobile controls: retain every header action while giving each a usable tap area. */
@media (max-width: 1024px) {
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-row {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 10px !important;
  }
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-column-2 {
    order: 0;
    flex: 1 1 auto !important;
    min-width: 0;
    margin-right: 4px;
  }
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-column-1 {
    order: 1;
    flex: 0 0 44px !important;
    margin: 0 !important;
  }
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-column-3 {
    order: 2;
    flex: 0 0 auto !important;
    gap: 0;
  }
  body.chang-v2 .bhfb-mobile .bhfb-main_header_row .bhfb-builder-item {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.chang-v2 .bhfb-mobile .bhfb-component-woo_icons {
    display: flex;
    align-items: center;
    gap: 0;
  }
  body.chang-v2 .bhfb-mobile .header-item { margin: 0 !important; }
  body.chang-v2 .bhfb-mobile .header-search,
  body.chang-v2 .bhfb-mobile .wc-account-link,
  body.chang-v2 .bhfb-mobile .cart-contents,
  body.chang-v2 .bhfb-mobile .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
  }
  body.chang-v2 .bhfb-mobile .cart-contents .count-number { right: 0; top: 0; }
  body.chang-v2 .mobile-menu-close { width: 44px; height: 44px; }
  body.chang-v2 .botiga-offcanvas-menu .menu a { min-height: 44px; }
}

@media (max-width: 640px) {
  body.chang-v2 .bhfb-mobile .site-branding { gap: 6px; min-width: 0; }
  body.chang-v2 .bhfb-mobile .site-branding .custom-logo-link { flex: 0 0 36px; width: 36px; height: 36px; }
  body.chang-v2 .bhfb-mobile .site-title { min-width: 0; }
  body.chang-v2 .bhfb-mobile .site-title a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: clamp(13px, 3.5vw, 18px) !important;
    line-height: 1.2;
    white-space: normal;
  }
  .chang-grid3.is-n3 > .chang-pcard:nth-child(3),
  .chang-grid3.is-n5 > .chang-pcard:nth-child(5) { display: flex; }
  body.chang-v2 .chang-pcard__body h3 { font-size: .9rem !important; line-height: 1.5 !important; }
  .chang-pcard__price del, .chang-pcard__price ins,
  body.chang-v2 ul.products li.product .price del,
  body.chang-v2 ul.products li.product .price ins { display: inline-block; }
  .chang-pills { gap: 8px; margin-bottom: 20px; }
  .chang-pill { min-height: 44px; padding: 8px 12px; gap: 6px; font-size: .85rem; }
  body.chang-v2 .woocommerce-result-count { float: none; width: 100%; margin: 0 0 10px; }
  body.chang-v2 .woocommerce-sorting-wrapper .botiga-sorting-left,
  body.chang-v2 .woocommerce-sorting-wrapper .botiga-sorting-right { flex: 0 0 100%; max-width: 100%; }
  body.chang-v2 .woocommerce-sorting-wrapper .botiga-sorting-left-inner,
  body.chang-v2 .woocommerce-sorting-wrapper .botiga-sorting-right-inner { width: 100%; }
  body.chang-v2 .woocommerce-ordering { float: none; width: 100%; margin: 0 0 20px; }
  body.chang-v2 .woocommerce-ordering select { width: 100%; min-height: 44px; font-size: 16px; }
  body.chang-v2 .woocommerce input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  body.chang-v2 .woocommerce select,
  body.chang-v2 .woocommerce textarea,
  body.chang-v2 #chang-auth-modal input,
  body.chang-v2 .select2-container .select2-selection--single { font-size: 16px !important; }
  body.chang-v2 .quantity a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  body.chang-v2 .wc_payment_method > label { display: inline-flex; align-items: center; min-height: 44px; }
  .chang-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .chang-footer__brand, .chang-footer__grid > :last-child { grid-column: 1 / -1; }
  .chang-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .chang-footer__social a { width: 44px; height: 44px; }
  .chang-float { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; z-index: 90; }
  .chang-float__links { gap: 8px; }
  .chang-float.is-enhanced .chang-float__links { display: none; }
  .chang-float.is-enhanced.is-open .chang-float__links { display: flex; }
  .chang-float.is-enhanced .chang-float__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--c-teal);
    color: #fff;
    box-shadow: var(--sh-lift);
  }
  .chang-float__toggle .chang-ico { width: 24px; height: 24px; }
  .chang-float__toggle b { display: none; font-size: 28px; font-weight: 400; line-height: 1; }
  .chang-float.is-open .chang-float__toggle .chang-ico { display: none; }
  .chang-float.is-open .chang-float__toggle b { display: block; }
}

@media (max-width: 359px) {
  body.chang-v2 .bhfb-mobile .site-branding .custom-logo-link { display: none; }
  .chang-hero2 .chang-actions { flex-wrap: wrap; }
  .chang-hero2 .chang-btn { justify-content: center; flex: 1 1 130px; }
  .chang-preorder-badge { max-width: calc(100% - 12px); right: 6px; top: 6px; font-size: 11px; }
}