/* =====================================================================
   Styles for the newer features, in Ozaa's original purple look:
   wishlist hearts, Inbox, Wishlist and Pending Reviews pages, the menu sections,
   extra product page bits, and the Shop by Category rings.
   ===================================================================== */

/* ---------- Shop by Category: flat colour discs with a turning dashed ring ---------- */
.cat-section { padding-top: 34px; padding-bottom: 6px; }
.cat-rings { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; max-width: 1200px; margin: 0 auto; }
.cat-ring { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: #2b1d63; font-weight: 700; font-size: .78rem; text-align: center; line-height: 1.25; }
.cat-ring-disc { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--tone, #efe7ff); display: flex; align-items: center; justify-content: center; transition: transform .25s ease; }
.cat-ring-disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed var(--ring, #7c4dff); opacity: .8; transition: transform .9s ease, opacity .25s ease; }
.cat-ring-disc::after { content: ""; position: absolute; top: -4px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ring, #7c4dff); box-shadow: 0 0 0 3px #fff; }
.cat-ring-icon { display: flex; width: 36px; height: 36px; } .cat-ring-icon svg { width: 100%; height: 100%; overflow: visible; }
.cg-fill { fill: var(--ring, #7c4dff); opacity: .3; stroke: none; transform: translate(1.2px, 1.2px); transition: opacity .25s ease; }
.cg-line { fill: none; stroke: #2b1d63; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cat-ring:hover .cg-fill { opacity: .5; }
.cat-ring-emoji { font-size: 29px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(60,30,140,.18)); }
.cat-ring:hover .cat-ring-disc, .cat-ring:focus-visible .cat-ring-disc { transform: translateY(-5px); }
.cat-ring:hover .cat-ring-disc::before, .cat-ring:focus-visible .cat-ring-disc::before { transform: rotate(180deg); opacity: 1; }
.cat-ring:focus-visible { outline: none; } .cat-ring:focus-visible .cat-ring-disc { box-shadow: 0 0 0 3px #5b2bd9; }
.cat-ring:nth-child(6n+1) { --tone: #efe7ff; --ring: #7c4dff; } .cat-ring:nth-child(6n+2) { --tone: #fff0cf; --ring: #f5a623; }
.cat-ring:nth-child(6n+3) { --tone: #ddf4ea; --ring: #1fae7d; } .cat-ring:nth-child(6n+4) { --tone: #ffe3ec; --ring: #ef5b8a; }
.cat-ring:nth-child(6n+5) { --tone: #e1f0ff; --ring: #3b8fe6; } .cat-ring:nth-child(6n)   { --tone: #ffe8dc; --ring: #f0793a; }
@media (max-width: 700px) { .cat-ring { width: calc(25% - 12px); min-width: 70px; } .cat-ring-disc { width: 56px; height: 56px; } .cat-ring-emoji { font-size: 25px; } .cat-ring-icon { width: 32px; height: 32px; } .cat-rings { gap: 20px 10px; } }
@media (prefers-reduced-motion: reduce) { .cat-ring-disc, .cat-ring-disc::before { transition: none; } }

/* ---------- Inbox number on the header icon ---------- */
.nav-item { position: relative; }
.nav-dot { position: absolute; top: -2px; right: 2px; min-width: 17px; height: 17px; box-sizing: border-box; border-radius: 99px; background: #e5484d; color: #fff; font: 700 .65rem/17px Roboto, sans-serif; text-align: center; padding: 0 4px; } .nav-dot[hidden] { display: none; }

/* ---------- wishlist heart on product cards ---------- */
.oz-card-heart { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(60,30,140,.18); color: #5b2bd9; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 3; }
.oz-card-heart svg { width: 19px; height: 19px; } .oz-card-heart.on { color: #e5484d; } .oz-card-heart.on svg path { fill: #e5484d; }

/* ---------- menu sections (My Ozaa account, Need help?, Our categories) ---------- */
.oz-m-sec { margin: 4px 0; border-top: 1px solid #f0ecfa; padding-top: 2px; }
.oz-m-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; font: 700 .76rem Roboto, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #6d6683; }
.oz-m-sec > summary::-webkit-details-marker { display: none; } .oz-m-sec > summary::after { content: "+"; font-size: 1.15rem; } .oz-m-sec[open] > summary::after { content: "\2212"; }
.oz-m-sec > summary:has(.oz-m-seeall)::after { content: none; } .oz-m-seeall { color: #5b2bd9; font-size: .78rem; text-decoration: none; letter-spacing: 0; }

/* ---------- product page extras ---------- */
.pdp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .pdp-badge { display: inline-flex; align-items: center; gap: 6px; background: #e7f8ee; color: #137a4a; border-radius: 99px; padding: 3px 12px 3px 8px; font-size: .76rem; font-weight: 700; } .pdp-badge svg { width: 15px; height: 15px; }
.pdp-brand { font-size: .92rem; } .pdp-brand a { color: #5b2bd9; font-weight: 600; }
.pdp-tools { display: flex; gap: 8px; margin-left: auto; } .pdp-tool { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3dcf6; background: #fff; color: #5b2bd9; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .pdp-tool svg { width: 20px; height: 20px; } .pdp-tool.on { color: #e5484d; border-color: #f3c4c0; } .pdp-tool.on svg path { fill: #e5484d; }
.pdp-ship { margin: 0 0 12px; color: #4a4363; font-size: .9rem; } .pdp-ship b { color: #1f1747; }
.pdp-ask { text-align: center; color: #4a4363; font-size: .9rem; } .pdp-ask a { color: #5b2bd9; font-weight: 700; }
.pdp-bar-step { display: none; align-items: center; flex: 1; justify-content: flex-end; }
.pdp-bar-step .bk-qty { display: inline-flex; align-items: center; justify-content: space-between; flex: 1; max-width: 230px; border: 2px solid #ece6fa; border-radius: 12px; overflow: hidden; }
.pdp-bar-step .bk-qty button { width: 46px; height: 44px; border: 0; background: #f6f1ff; color: #5b2bd9; font-size: 1.3rem; cursor: pointer; } .pdp-bar-step .bk-qty span { flex: 1; text-align: center; font-weight: 700; }
.pdp-extra { max-width: 1180px; margin: 0 auto; padding: 0 4%; }

/* ---------- Inbox, Wishlist, Pending Reviews pages ---------- */
.pg-wrap { max-width: 860px; margin: 0 auto; padding: 26px 4% 40px; } .pg-wrap.wide { max-width: 1200px; }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .pg-top h1 { margin: 0; font: 700 1.7rem Roboto, sans-serif; color: var(--ozaa-primary, #6a0dad); }
.pg-sub { margin: 4px 0 0; color: #6d6683; } .pg-link { background: none; border: 0; color: #5b2bd9; font: 700 .9rem Roboto, sans-serif; cursor: pointer; padding: 6px 0; text-decoration: none; }
.inb-day { margin: 20px 0 8px; font: 700 .78rem Roboto, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #6d6683; }
.inb-msg { position: relative; background: #fff; border: 1px solid #ece6fa; border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(60,30,140,.06); }
.inb-msg.unread { background: #faf7ff; border-color: #cdb9f7; } .inb-msg.unread h3::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; margin-left: 8px; vertical-align: middle; }
.inb-from { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; background: #f3eefc; color: #4b1fb0; border-radius: 99px; padding: 2px 10px; margin-bottom: 8px; } .inb-from svg { width: 14px; height: 14px; }
.inb-msg h3 { margin: 0 0 6px; font: 700 1.05rem Roboto, sans-serif; color: #1f1747; } .inb-msg p { margin: 0 0 12px; line-height: 1.55; color: #3b3560; overflow-wrap: anywhere; }
.inb-del { position: absolute; top: 10px; right: 10px; border: 0; background: none; cursor: pointer; padding: 4px; color: #9a93b8; } .inb-del svg { width: 18px; height: 18px; }
.inb-items { display: grid; gap: 8px; } .inb-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; background: #faf8ff; border: 1px solid #ece6fa; border-radius: 12px; padding: 8px 12px 8px 8px; text-decoration: none; color: #1f1747; font-weight: 600; font-size: .9rem; }
.inb-thumb { width: 46px; height: 46px; border: 1px solid #ece6fa; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .inb-thumb img { width: 100%; height: 100%; object-fit: contain; } .inb-item svg { width: 18px; height: 18px; color: #9a93b8; }
.inb-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pr-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid #ece6fa; border-radius: 16px; padding: 12px; box-shadow: 0 4px 14px rgba(60,30,140,.06); margin-bottom: 12px; }
.pr-pic { width: 74px; height: 74px; border: 1px solid #ece6fa; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pr-pic img { width: 100%; height: 100%; object-fit: contain; padding: 5%; box-sizing: border-box; }
.pr-card h3 { margin: 0 0 4px; font-size: 1rem; color: #1f1747; } .pr-card small { color: #6d6683; display: block; }
.pg-empty { text-align: center; padding: 36px 10px 26px; } .pg-empty h2 { font: 700 1.5rem Roboto, sans-serif; color: #1f1747; margin: 0 0 8px; } .pg-empty p { color: #6d6683; margin: 0 0 20px; }
.pg-empty-disc { width: 104px; height: 104px; border-radius: 50%; background: #f1ebff; color: #5b2bd9; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .pg-empty-disc svg { width: 52px; height: 52px; }
@media (max-width: 600px) { .pr-card { grid-template-columns: 62px 1fr; } .pr-card > a.ck-btn { grid-column: 1 / -1; text-align: center; } .pr-pic { width: 62px; height: 62px; } }

/* ---------- cart page: same page frame as the rest of the site ---------- */
.cart-products { padding-bottom: 40px; } .cart-wrap { max-width: 800px; margin: 0 auto; }
.cart-products h2 #cart-count { font-size: .6em; color: #6d6683; font-weight: 700; }
#cart-bar:not([hidden]) ~ .footer { margin-bottom: 84px; }


/* =====================================================================
   OZAA UPDATE: Sponsored Products banner, compact shelves, cart, product page
   (appended here so nothing above had to be edited)
   ===================================================================== */

/* ----- Sponsored Products banner (home page) ----- */
.sponsored { max-width: 1200px; margin: 20px auto; padding: 0 5%; }
.sponsored-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ozaa-primary, #6A0DAD); color: #fff; border-radius: 12px; padding: 12px 18px; }
.sponsored.has-ad .sponsored-head { border-radius: 12px 12px 0 0; }
.sponsored-head h2 { margin: 0; font: 700 1.1rem/1.3 'Roboto', sans-serif; color: #fff; text-align: left; }
.sponsored-all { color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; padding: 6px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; white-space: nowrap; transition: background .2s ease; }
.sponsored-all:hover, .sponsored-all:focus-visible { background: rgba(255,255,255,.18); outline: none; }
.sponsored-body { display: none; }
.sponsored.has-ad .sponsored-body { display: block; background: #fff; border: 1px solid #e6def3; border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; }
.sponsored .ad-slot-label { display: none; }
.sponsored .ad-placeholder { min-height: 0; border: 0; background: none; display: block; border-radius: 0; }
.sponsored .ad-placeholder a { display: block; width: 100%; }
.sponsored .ad-placeholder img { display: block; width: 100%; height: auto !important; max-height: 320px; object-fit: cover; border-radius: 0 !important; }
@media (max-width: 600px) {
  .sponsored { margin: 12px auto; padding: 0 3%; }
  .sponsored-head { padding: 10px 14px; border-radius: 10px; }
  .sponsored.has-ad .sponsored-head { border-radius: 10px 10px 0 0; }
  .sponsored-head h2 { font-size: 1rem; }
  .sponsored-all { font-size: .78rem; padding: 5px 12px; }
  .sponsored.has-ad .sponsored-body { border-radius: 0 0 10px 10px; }
  .sponsored .ad-placeholder img { max-height: 200px; }
}

/* ----- Category shelves with only a few products: shrink to fit so no empty space is left, grow as more are added ----- */
.oz-shelf-compact { width: fit-content; max-width: calc(100% - 10%); min-width: min(320px, calc(100% - 10%)); }
@media (max-width: 600px) { .oz-shelf-compact { max-width: calc(100% - 6%); min-width: min(280px, calc(100% - 6%)); } }

/* ----- Cart page: solid brand buttons and a clean empty cart ----- */
.cart-products .ck-btn, #cart-bar .ck-btn { background: var(--ozaa-primary, #6A0DAD); box-shadow: none; border-radius: 10px; transition: background .15s ease; }
.cart-products .ck-btn:hover:not(:disabled), #cart-bar .ck-btn:hover:not(:disabled) { background: #57099a; }
.cart-products .ck-btn:disabled, #cart-bar .ck-btn:disabled { background: #b9b3c8; opacity: 1; }
.cart-products .ck-btn.ck-btn-line { background: #fff; color: var(--ozaa-primary, #6A0DAD); border: 2px solid var(--ozaa-primary, #6A0DAD); }
.cart-products .ck-btn.ck-btn-line:hover:not(:disabled) { background: #f6ecfd; }
.cart-products .ck-card { border-radius: 12px; box-shadow: none; }
.cart-products .ck-empty { padding: 56px 20px 48px; }
.cart-products .ck-empty .ck-empty-ico { width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 50%; background: #f3e9fb; color: var(--ozaa-primary, #6A0DAD); display: flex; align-items: center; justify-content: center; font-size: 0; }
.cart-products .ck-empty h2 { font-size: 1.4rem; margin: 0 0 6px; }
.cart-products .ck-empty .ck-btn-inline { margin-top: 20px; min-width: 220px; }
@media (max-width: 480px) {
  .cart-products .ck-empty { padding: 40px 16px 36px; }
  .cart-products .ck-empty .ck-btn-inline { width: 100%; min-width: 0; }
}

/* ----- Product page: clean solid actions, stock pill, options, video, delivery options, verified feedback ----- */
.pdp-btn-main { background: var(--ozaa-primary, #6A0DAD); box-shadow: none; border-radius: 10px; }
.pdp-btn-main:hover:not(:disabled) { background: #57099a; }
.pdp-btn-ghost { border-color: var(--ozaa-primary, #6A0DAD); color: var(--ozaa-primary, #6A0DAD); border-radius: 10px; }
.pdp-off-tag { background: #fdecea; color: #c0392b; font-weight: 700; font-size: .8rem; padding: 3px 9px; border-radius: 6px; }
.pdp-stock { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #eaf7f0; }
.pdp-stock i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; }
.pdp-stock.few { background: #fff3e2; } .pdp-stock.out { background: #fdecea; }

.pdp-variants { display: grid; gap: 14px; margin: 4px 0 18px; padding: 14px; border: 1px solid #ece6fa; border-radius: 12px; }
.pdp-var-label { font-size: .9rem; color: #6d6683; margin-bottom: 8px; } .pdp-var-label strong { color: #241633; }
.pdp-var-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-var-opt { min-width: 44px; padding: 9px 16px; border: 1.5px solid #d9d2f2; border-radius: 10px; background: #fff; font: 600 .9rem 'Open Sans', sans-serif; color: #241633; cursor: pointer; }
.pdp-var-opt:hover { border-color: var(--ozaa-primary, #6A0DAD); }
.pdp-var-opt.on { border-color: var(--ozaa-primary, #6A0DAD); background: #f6ecfd; color: var(--ozaa-primary, #6A0DAD); box-shadow: 0 0 0 2px rgba(106,13,173,.15); }
.pdp-var-opt:focus-visible { outline: 3px solid #9B4DFF; outline-offset: 2px; }
.pdp-variants.shake { animation: pdpShake .4s ease; border-color: #c0392b; }
@keyframes pdpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .pdp-variants.shake { animation: none; } }

.pdp-sub { margin: 18px 0 8px; font-size: .95rem; color: #241633; } .pdp-sub:first-of-type { margin-top: 0; }
.pdp-card .pdp-features { margin: 0 0 6px; background: #faf6fd; }

.pdp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.pdp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdp-video-link { margin: 10px 0 0; font-size: .85rem; } .pdp-video-link a { color: var(--ozaa-primary, #6A0DAD); font-weight: 700; }

.pdp-opt { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0ecfa; }
.pdp-opt:first-of-type { padding-top: 0; } .pdp-opt:last-child { border-bottom: 0; padding-bottom: 0; }
.pdp-opt .pdp-ico { width: 38px; height: 38px; border-radius: 10px; background: #f3e9fb; color: var(--ozaa-primary, #6A0DAD); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.pdp-opt .pdp-ico svg { width: 20px; height: 20px; }
.pdp-opt p { margin: 3px 0 0; color: #6d6683; font-size: .88rem; line-height: 1.5; } .pdp-opt a { color: var(--ozaa-primary, #6A0DAD); }
.pdp-opt-off { opacity: .7; }
.pdp-soon { font-style: normal; font-size: .7rem; font-weight: 700; background: #ece6fa; color: #5b2bd9; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }

.pdp-bar-track div { background: #f5a623; }
.pdp-sum-score strong { color: #241633; }
.pdp-verified { background: #e7f8ee; padding: 2px 8px; border-radius: 99px; font-size: .75rem; }
.pdp-review-by { margin-top: 4px; }


/* =====================================================================
   OZAA UPDATE 2: Temu-style category menu, footer brand row
   ===================================================================== */

/* ----- footer: logo and "Ozaa" side by side ----- */
.footer-info .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; text-decoration: none; }
.footer-info .footer-brand img { width: 44px; height: 44px; margin: 0; object-fit: contain; flex: 0 0 auto; }
.footer-info .footer-brand h3 { margin: 0; line-height: 1; }

/* ----- category bar under the search row ----- */
.oz-catbar { border-top: 1px solid #f0ecfa; margin-top: 8px; }
.oz-catbar-in { max-width: 1200px; margin: 0 auto; padding: 6px 4% 0; display: flex; align-items: center; gap: 6px; }
.oz-catbar-all { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 0; background: var(--ozaa-primary, #6A0DAD); color: #fff; font: 700 .88rem 'Open Sans', sans-serif; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.oz-catbar-all svg { width: 18px; height: 18px; }
.oz-catbar-all:hover, .oz-catbar-all[aria-expanded="true"] { background: #57099a; }
.oz-catbar-all:focus-visible, .oz-catbar-links a:focus-visible, .oz-cm-cat:focus-visible, .oz-cm-tile:focus-visible, .oz-cm-close:focus-visible { outline: 3px solid #9B4DFF; outline-offset: 2px; }
.oz-catbar-all-m { display: none; }
.oz-catbar-links { display: flex; gap: 2px; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: none; }
.oz-catbar-links::-webkit-scrollbar { display: none; }
.oz-catbar-links a { flex: 0 0 auto; padding: 9px 12px; color: #241633; text-decoration: none; font: 600 .86rem 'Open Sans', sans-serif; border-radius: 999px; white-space: nowrap; }
.oz-catbar-links a:hover, .oz-catbar-links a.on { background: #f3e9fb; color: var(--ozaa-primary, #6A0DAD); }

/* ----- the dropdown: category list on the left, round preview tiles on the right ----- */
.oz-cm { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #ece6fa; box-shadow: 0 18px 40px rgba(30,10,80,.18); }
.oz-cm[hidden] { display: none; }
.oz-cm-top { display: none; }
.oz-cm-inner { max-width: 1200px; margin: 0 auto; padding: 0 4%; box-sizing: border-box; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 240px; }
.oz-cm-rail, .oz-cm-panel { max-height: min(68vh, 440px); }
.oz-cm-rail { list-style: none; margin: 0; padding: 10px 0; overflow-y: auto; border-right: 1px solid #f0ecfa; }
.oz-cm-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; border-left: 3px solid transparent; background: none; text-align: left; padding: 12px 16px; font: 600 .92rem 'Open Sans', sans-serif; color: #241633; cursor: pointer; }
.oz-cm-cat:hover, .oz-cm-cat.on { background: #f6ecfd; color: var(--ozaa-primary, #6A0DAD); border-left-color: var(--ozaa-primary, #6A0DAD); }
.oz-cm-arrow { font-size: 1.2rem; line-height: 1; opacity: .55; }
.oz-cm-panel { overflow-y: auto; padding: 18px 22px; }
.oz-cm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.oz-cm-head h3 { margin: 0; font: 700 1.15rem Roboto, sans-serif; color: #241633; }
.oz-cm-head a { color: var(--ozaa-primary, #6A0DAD); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.oz-cm-head a:hover { text-decoration: underline; }
.oz-cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 20px 12px; }
.oz-cm-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #241633; text-align: center; min-width: 0; }
.oz-cm-thumb { width: 84px; height: 84px; border-radius: 50%; background: #f3f0fa; color: #9a8fbd; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #ece6fa; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.oz-cm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oz-cm-tile:hover .oz-cm-thumb { transform: translateY(-2px); border-color: var(--ozaa-primary, #6A0DAD); box-shadow: 0 8px 18px rgba(106,13,173,.2); }
.oz-cm-name { font: 600 .82rem/1.3 'Open Sans', sans-serif; max-width: 110px; overflow-wrap: anywhere; }
.oz-cm-empty { color: #6d6683; margin: 0; }
@media (prefers-reduced-motion: reduce) { .oz-cm-thumb { transition: none; } .oz-cm-tile:hover .oz-cm-thumb { transform: none; } }

/* ----- phones: the same menu is a full-screen sheet (narrow list left, 3 round tiles per row right) ----- */
@media (max-width: 768px) {
  .oz-catbar { margin-top: 6px; }
  .oz-catbar-in { padding: 6px 0 0; }
  .oz-catbar-all { padding: 8px 14px; }
  .oz-catbar-all-d { display: none; } .oz-catbar-all-m { display: inline; }
  .oz-catbar-links a { padding: 8px 11px; font-size: .82rem; }
  .oz-cm { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; border: 0; box-shadow: none; }
  .oz-cm[hidden] { display: none; }
  .oz-cm-top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid #ece6fa; background: #fff; }
  .oz-cm-top strong { font: 700 1.1rem Roboto, sans-serif; color: #241633; }
  .oz-cm-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f3f0fa; color: #241633; font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .oz-cm-inner { flex: 1; min-height: 0; height: auto; max-width: none; padding: 0; grid-template-columns: 104px minmax(0, 1fr); }
  .oz-cm-rail, .oz-cm-panel { max-height: none; min-height: 0; }
  .oz-cm-rail { background: #faf8fd; padding: 0 0 env(safe-area-inset-bottom); }
  .oz-cm-cat { padding: 14px 10px; font-size: .8rem; line-height: 1.3; }
  .oz-cm-arrow { display: none; }
  .oz-cm-panel { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }
  .oz-cm-head h3 { font-size: 1rem; }
  .oz-cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
  .oz-cm-thumb { width: 64px; height: 64px; }
  .oz-cm-name { font-size: .74rem; }
}


/* =====================================================================
   OZAA UPDATE 3: All Products category pills, branding safety
   ===================================================================== */

/* ----- All Products: clean category filter pills (this page only) ----- */
.oz-shop-chips .category-scroll-wrapper { padding: 4px 0 6px; gap: 8px; }
.oz-shop-chips .chip-btn {
  min-height: 36px; padding: 7px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #e3dcf0; color: #3b3560;
  font: 600 .86rem/1.2 'Open Sans', Roboto, sans-serif;
  box-shadow: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.oz-shop-chips .chip-btn:hover { background: #faf5ff; border-color: var(--ozaa-primary, #6A0DAD); color: var(--ozaa-primary, #6A0DAD); }
.oz-shop-chips .chip-btn.active,
.oz-shop-chips .chip-btn.active:hover { background: var(--ozaa-primary, #6A0DAD); border-color: var(--ozaa-primary, #6A0DAD); color: #fff; }
.oz-shop-chips .chip-btn:focus-visible { outline: 3px solid #9B4DFF; outline-offset: 2px; }
/* computers and tablets: every pill is visible, wrapping onto a second line if needed (phones keep the swipe row) */
@media (min-width: 769px) {
  .oz-shop-chips .category-scroll-wrapper { flex-wrap: wrap; overflow: visible; white-space: normal; }
}

/* ----- branding: the logo and name never shrink or disappear in the header, on any screen ----- */
.logo-link .logo-icon { flex: 0 0 auto; display: block; }
.logo-link .logo-text { white-space: nowrap; }
.logo-area { flex: 0 0 auto; }

/* ----- subtle Chinese accents (About page headings, footer line) ----- */
.zh-sub { font-size: .55em; font-weight: 600; color: #8a7fb0; margin-left: 8px; letter-spacing: .06em; white-space: nowrap; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Open Sans', sans-serif; }
.footer-zh { margin-left: 8px; opacity: .85; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Open Sans', sans-serif; }

/* ----- My Orders and Inbox: same minimalist frame, icons and solid buttons as the Cart page ----- */
.ord-page-wrap .ck-card, .inbox-page .ck-card { margin-bottom: 14px; }
.ord-page-wrap .cart-wrap { max-width: 860px; }
.cart-products .ord-pack { border-radius: 10px; }
.cart-products .ord-chip { border-radius: 999px; }
.cart-products .inb-msg { border-radius: 12px; box-shadow: none; }
.cart-products .inb-msg.unread { background: #faf5ff; border-color: #d9c2f0; }
.cart-products .inb-item { border-radius: 10px; }
.cart-products .inb-day { margin-top: 16px; }
.cart-products .inb-actions .ck-btn { min-width: 0; }
.inbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.inbox-bar p { margin: 0; flex: 1 1 240px; }
.inbox-page .pg-link { color: var(--ozaa-primary, #6A0DAD); }
.inbox-page .ck-center { text-align: center; margin: 14px 0 0; }

/* Header: five icons (Orders, Wishlist, Inbox, Account, Cart) still fit on narrow phones */
@media (max-width: 420px) { .nav-icons { gap: 8px !important; } }