/* 1.1.22 final polish: cream canvas everywhere, Taobao-style cart page, calm focus rings. */

/* 1) One cream canvas across every screen (same as homepage). */
.wellness-category-screen,
.wp-category-browser,
.wp-category-topbar,
.wp-category-searchbar,
.wp-category-main,
.wellness-invite-screen,
.wellness-invite-screen #wp-main,
body.woocommerce-checkout { background: var(--wp-cream, #faf6ef); }
.wp-category-browser { --wp-category-rail: #f1e9d8; }
.wp-category-browser .wp-category-search.wp-search-box { background: var(--wp-paper, #fff); }
.wp-category-browser .wp-category-item.is-active { background: var(--wp-paper, #fff); }
.wp-category-browser .wp-category-product { background: var(--wp-paper, #fff); border: 1px solid var(--wp-line2, #efe7d8); border-bottom: 1px solid var(--wp-line2, #efe7d8); border-radius: 12px; }

/* 2) No blue tap rings: focus is only painted for keyboard users, in brand gold. */
html { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wp-gold, #b8863b); outline-offset: 2px; border-radius: 8px;
}

/* 3) Cart header: home icon + centred title + manage, like the reference. */
.wp-dr-head { display: flex; align-items: center; gap: 8px; }
.wp-dr-head h3 { flex: 1; justify-content: center; margin: 0; }
.wp-dr-home { border: 0; background: transparent; width: 40px; height: 40px; }
.wp-dr-home svg { width: 22px; height: 22px; color: var(--wp-ink2, #5c4f42); }
.wp-dr-manage { flex: none; min-width: 44px; min-height: 36px; padding: 6px 10px; border-radius: 999px; color: var(--wp-ink3, #8c7e6e); font-size: 13.5px; }
.wp-dr-manage[aria-pressed="true"] { color: var(--wp-gold, #b8863b); background: var(--wp-goldsoft, #f4e7cf); font-weight: 600; }
.wp-dr-manage:disabled { opacity: .45; cursor: not-allowed; }

/* 4) Cart rows as clean cards: checkbox | image | info, delete at top-right. */
.wp-cart-item { display: grid; grid-template-columns: 22px 72px minmax(0, 1fr); gap: 10px; align-items: start; border-radius: 14px; background: var(--wp-paper, #fff); }
.wpt-full-cart .wp-cart-item { grid-template-columns: 22px 88px minmax(0, 1fr); padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(90, 70, 40, .05); }
.wp-ci-main { padding-right: 26px; }
.wp-ci-name { font-size: 14px; }
.wp-ci-spec { font-size: 12px; }
.wpt-full-cart .wp-ci-img { width: 88px; height: 88px; }
.wpt-full-cart .wp-ci-price { font-size: 17px; }
.wpt-cart-check { padding-top: 2px; }
.wpt-cart-check input, .wpt-cart-all input { width: 20px; height: 20px; }
.wpt-cart-check--manage { display: none; }
.is-managing .wpt-cart-check--manage { display: flex; }
.is-managing .wpt-cart-check:not(.wpt-cart-check--manage) { display: none; }

/* 5) Bottom bar: select-all + total + checkout on one row; manage bar above it. */
.wp-cart-manage-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--wp-line2, #efe7d8); margin-bottom: 8px; }
.wp-cart-manage-bar[hidden] { display: none; }
.wp-cart-manage-bar .wpt-cart-all { margin: 0; }
.wp-dr-footwrap { background: var(--wp-paper, #fff); border-top: 1px solid var(--wp-line2, #efe7d8); }
.wp-dr-footrow { display: flex; align-items: center; gap: 10px; }
.wp-dr-footrow .wpt-cart-all--foot { margin: 0; flex: none; }
.wp-dr-footrow .wp-dr-foot { flex: 1; min-width: 0; }
.wp-drawer .wp-dr-footwrap { flex: none; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
.wp-drawer .wp-dr-foot { border-top: 0; padding: 0; background: transparent; }
.wpt-full-cart { padding: 0 0 150px; background: transparent; border: 0; box-shadow: none; margin: 0; }
.wpt-full-cart > .wp-dr-head { background: transparent; border-bottom: 0; padding: 10px 4px; }
.wpt-full-cart > .wp-dr-footwrap { position: fixed; left: 0; right: 0; bottom: calc(var(--wp-tabbar-h, 72px) + env(safe-area-inset-bottom)); z-index: 70; max-width: 860px; margin: auto; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 16px rgba(0, 0, 0, .04); }
.wpt-full-cart > .wp-dr-footwrap .wp-dr-foot { border-top: 0; padding: 0; background: transparent; }
@media (min-width: 1024px) { .wpt-full-cart > .wp-dr-footwrap { bottom: 0; } }
.wpt-full-cart.is-managing .wp-ci-row .wp-qty, .wp-drawer.is-managing .wp-ci-row .wp-qty { opacity: .45; pointer-events: none; }
.wp-selected-cart-summary { flex: 1; min-width: 0; }

/* 7) Referral product cards: the whole card opens the product page. */
.wp-invite-product { position: relative; }
.wp-invite-product-cover { position: absolute; inset: 0; z-index: 1; border-radius: 17px; }
.wp-invite-product .wp-invite-product-share,
.wp-invite-product .wp-invite-product-image { position: relative; z-index: 2; }

/* 8) Gold gradient accents for primary actions (brand main colour). */
:root { --wp-gold-grad: linear-gradient(135deg, #e8c57e 0%, var(--wp-gold2, #d9ae63) 45%, var(--wp-gold, #b8863b) 100%); }
.wp-btn-gold, .wp-slide-cta { background: var(--wp-gold-grad); }
.wp-logo-mark { background: radial-gradient(circle at 32% 28%, #f2dcae, var(--wp-gold, #b8863b) 68%, #8e6527); }

/* 9) Cream chrome everywhere: bottom bar and product top bar match the homepage canvas. */
.wp-tabbar { background: rgba(250, 246, 239, .97); }
.wp-product-topbar { background: var(--wp-cream, #faf6ef); }

/* 11) Snappier taps and calmer secondary text across languages. */
a, button, summary, .wp-tabbar .wp-tab { touch-action: manipulation; }
.wp-sec-sub { font-size: 12.5px; }
.wp-pcard-name { font-size: 13px; }
.wp-ci-name { font-size: 13.5px; }
@media (min-width: 900px) {
  .wp-pcard-name { font-size: 14px; }
}
/* 12) Heading rhythm across languages: one compact scale on small screens. */
.wpt-full-cart > .wp-dr-head { position: sticky; top: 0; z-index: 20; }
.admin-bar .wpt-full-cart > .wp-dr-head { top: 32px; }
.wp-home .wp-sec-title, .wp-sec-title { font-size: 18px; }
.wp-invite-hero .wp-invite-heading { font-size: 22px; }
.wp-invite-products > h3 { font-size: 20px; }
@media (min-width: 600px) {
  .wp-home .wp-sec-title, .wp-sec-title { font-size: 22px; }
  .wp-invite-hero .wp-invite-heading { font-size: 30px; }
  .wp-invite-products > h3 { font-size: 24px; }
}

/* 13) Round-two polish (2026-10-16). */
/* Tapped text fields must not draw an inner ring (iOS paints :focus-visible on inputs). */
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: none; }
.wp-search-box input { background: transparent; }
.wp-search-box input:focus { outline: none; box-shadow: none; }
.wp-search-box { border-color: var(--wp-line, #e5dccb); box-shadow: none; }
.wp-search-box:focus-within { border-color: var(--wp-gold2, #d9ae63); box-shadow: 0 0 0 2px rgba(184, 134, 59, .14); }

/* Invite tab icon: smaller flat orange disc (same hue as add-to-cart) that never covers the label. */
.wp-tabbar .wp-tab--invite { padding-top: 42px; }
.wp-tabbar .wp-tab--invite .wp-tab-icon {
  width: 60px; height: 60px; top: -22px; border-width: 3px;
  background: #FFA400; box-shadow: 0 4px 14px rgba(255, 164, 0, .35);
}
.wp-tabbar .wp-tab--invite:hover .wp-tab-icon,
.wp-tabbar .wp-tab--invite.is-active .wp-tab-icon { background: #f29600; transform: translateX(-50%) scale(1.03); box-shadow: 0 6px 18px rgba(255, 164, 0, .4); }
.wp-tabbar .wp-tab--invite .wp-tab-icon svg { width: 30px; height: 30px; stroke-width: 1.7; color: #fffdf4; }

/* Home category tiles: no enclosing box, just image and name. */
.wp-cat-card { background: transparent; border: 0; box-shadow: none; min-height: 0; padding: 6px 2px; }
.wp-cat-card:hover { transform: none; box-shadow: none; }
.wp-cat-thumb { background: var(--wp-cream2, #f3ece0); border-radius: 50%; }
.wp-cat-name { color: var(--wp-ink2, #5c4f42); }

/* Detail bar: separated pills, amber add + green buy, matching the prototype. */
.wp-product-purchase-bar-inner { gap: 6px; }
.wp-product-purchase-bar .wp-product-buy-button { border-radius: 999px; min-height: 44px; }
.wp-product-buy-button--add { background: linear-gradient(100deg, #ffb03a, #ff8a00); border-radius: 999px; box-shadow: 0 4px 12px rgba(255, 138, 0, .25); margin-left: 0; }

/* 16) Small phones (<=479px): header language control must never overflow or overlap. */
@media (max-width: 479px) {
  .wp-source-header { min-height: 56px; gap: 8px; }
  .wp-source-header .wp-header-acts { flex-wrap: nowrap; max-width: none; }
  .wp-lang-switcher .wp-lang-btn { padding: 6px 9px; gap: 5px; }
  .wp-lang-switcher .wp-lang-caret { display: none; }
  .wp-lang-switcher .wp-lang-cur { font-size: 12px; }
  .wp-source-header .wp-logo img,
  .wp-source-header img.wp-source-logo { height: 44px; max-height: 44px; }
  .wp-source-header .wp-source-brand b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 17) Small phones (<=479px): slimmer bottom navigation. */
@media (max-width: 479px) {
  :root { --wp-tabbar-h: 66px; }
  .wp-tabbar { padding: 3px 2px calc(4px + env(safe-area-inset-bottom)); }
  .wp-tabbar-in, .wp-tabbar .wp-tab { min-height: 58px; }
  .wp-tabbar .wp-tab { gap: 3px; padding: 5px 1px 2px; font-size: 10.5px; }
  .wp-tabbar .wp-tab-icon { width: 22px; height: 22px; }
  .wp-tabbar .wp-tab-icon svg { width: 21px; height: 21px; }
  .wp-tabbar .wp-tab--invite { padding-top: 34px; }
  .wp-tabbar .wp-tab--invite .wp-tab-icon { width: 62px; height: 62px; top: -25px; border-width: 3px; }
  .wp-tabbar .wp-tab--invite .wp-tab-icon svg { width: 30px; height: 30px; }
  .wp-tab-badge { top: 3px; right: calc(50% - 19px); }
}

/* 18) Very small phones (<=374px): compact nav further. */
@media (max-width: 374px) {
  :root { --wp-tabbar-h: 60px; }
  .wp-tabbar-in, .wp-tabbar .wp-tab { min-height: 54px; }
  .wp-tabbar .wp-tab { font-size: 10px; }
  .wp-tabbar .wp-tab--invite { padding-top: 30px; }
  .wp-tabbar .wp-tab--invite .wp-tab-icon { width: 56px; height: 56px; top: -22px; }
  .wp-tabbar .wp-tab--invite .wp-tab-icon svg { width: 27px; height: 27px; }
}
.wp-product-buy-button--now { background: linear-gradient(100deg, #4cb963, #2f9e4b); border-radius: 999px; box-shadow: 0 4px 12px rgba(47, 158, 75, .25); }

/* Site-wide refinement: one radius scale, calmer chrome, even icon weight. */
.wp-ui-icon { stroke-width: 1.8; }
body { line-height: 1.6; }
.wp-pcard, .wp-feature, .wp-cat-card, .wp-cart-item { border-radius: 14px; }
.wp-lang-switcher .wp-lang-btn { border-width: 1px; box-shadow: none; }
.wp-sec-title { letter-spacing: .3px; }

/* 14) Language button: reverted to the previous pill (globe icon + name). Small screens only shrink it. */

/* 15) Auth screens: image hero header. Country picker keeps the original card style. */
.wp-auth-card .wp-auth-hero { padding: 0; background-size: cover; background-position: center; min-height: 168px; display: flex; align-items: flex-end; }
.wp-auth-card .wp-auth-hero .wp-auth-hero-row { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px 18px; background: linear-gradient(180deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, .55) 100%); }
.wp-auth-card .wp-auth-hero h1 { color: #fff8e7; font-size: 21px; line-height: 1.3; margin: 0 0 4px; }
.wp-auth-card .wp-auth-hero p { color: rgba(255, 248, 231, .86); font-size: 12.5px; margin: 0; }
.wp-auth-card .wp-auth-hero .wp-lang-switcher .wp-lang-btn { background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .7); }

/* Agent page: two platform customer-service pills. */
.wp-agent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wp-agent-actions .wp-agent-contact { flex: 1 1 160px; max-width: 260px; background: var(--wp-paper, #fff); color: var(--wp-ink, #2b2118); border: 1px solid var(--wp-line, #e5dccb); }
.wp-agent-actions .wp-agent-contact svg { width: 20px; height: 20px; flex: none; }
.wp-agent-actions .wp-agent-contact.is-line { border-color: rgba(6, 199, 85, .45); }
.wp-agent-actions .wp-agent-contact.is-wa { border-color: rgba(37, 211, 102, .45); }

/* 19) Category heading alignment (cart shortcut removed per feedback). */
.wp-home-categories .wp-sec-head { align-items: center; }

/* 20) Round-six refinements (2026-10-16). */
/* Brand name back to the original larger size on every viewport. */
.wp-source-header .wp-source-brand b { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .wp-source-header .wp-source-brand b { font-size: 19px; } }

/* Category top bar: logo + name centred, language pill on the right (original look). */
.wp-category-topbar { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 146px); }
.wp-category-topbar .wp-brand-lockup { justify-self: center; }
.wp-category-topbar-lang { justify-self: end; width: 100%; min-width: 0; }

/* Auth hero language pill: same size and style as the homepage header pill. */
.wellness-auth-screen .wp-auth-language .wp-lang-btn { height: 42px; min-height: 42px; padding: 0 12px; font-size: 14px; }
.wp-auth-card .wp-auth-hero .wp-lang-switcher .wp-lang-btn { background: var(--wp-goldsoft, #f4e7cf); border: 1px solid var(--wp-gold, #b8863b); }

/* Favourite turns rose once saved. */
.wp-product-topbar-actions [aria-pressed="true"],
.wp-product-bar-favorite [aria-pressed="true"] { color: #e0447c; }
.wp-product-topbar-actions [aria-pressed="true"] svg,
.wp-product-bar-favorite [aria-pressed="true"] svg { fill: #e0447c; stroke: #e0447c; }

/* Prices use the same family as body copy, keeping tabular digits. */
.wp-price, .wp-ci-price, .wp-sum-row b, .wp-category-product-price,
.wp-invite-product-price, .wp-single-price .woocommerce-Price-amount,
.wp-checkout-line-main strong, .wp-selected-cart-total strong {
  font-family: var(--wp-sans); font-variant-numeric: tabular-nums;
}

/* 21) Remove the desktop category strip under the search bar (user request). */
.wp-desktop-nav { display: none !important; }