/* ============================================================
   JOYFUL — design system rebuilt from the actual Figma file
   (colors / type / components sampled directly from exports)
   ============================================================ */

:root{
  --blue:        #5250FF;   /* gradient top */
  --violet:      #9B0CF9;   /* gradient mid */
  --pink:        #E0399F;   /* gradient bottom */
  --blue-solid:  #2E2EE5;   /* secondary CTA (Enter, Give a gift) */
  --green:       #00B67A;   /* Add to Cart */
  --ink:         #17161A;
  --muted:       #8A8790;
  --border:      #D9D9D9;
  --bg:          #FFFFFF;
  --bg-lavender: #F3EDF9;   /* footer / settings panel */
  --bg-soft-cover: linear-gradient(120deg,#FDF3ED 0%,#F6E1F1 45%,#E3ECFC 100%); /* empty cover placeholder */

  --gradient: linear-gradient(160deg, var(--blue) 0%, var(--violet) 55%, var(--pink) 100%);
  --gradient-text: linear-gradient(90deg, var(--violet), var(--pink));

  --shadow-sm: 0 2px 10px rgba(23,22,26,.06);
  --shadow-md: 0 10px 28px rgba(23,22,26,.10);
  --shadow-lg: 0 20px 50px rgba(23,22,26,.16);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{ font-family:'Golos Text', sans-serif; font-weight:700; line-height:1.14; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
input,textarea,select{ font-family:inherit; }

.container{ max-width:1280px; margin:0 auto; padding:0 40px; }
@media (max-width:760px){ .container{ padding:0 20px; } }

/* ---------- Logo ---------- */
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo-img{ height:34px; width:auto; max-width:none; display:block; flex-shrink:0; }
@media (max-width:480px){ .logo-img{ height:28px; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:var(--r-pill); border:none; font-weight:700; font-size:14.5px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); white-space:nowrap; }
.btn:active{ transform:scale(.97); }
.btn-gradient{ background:var(--gradient); color:#fff; box-shadow:var(--shadow-sm); }
.btn-gradient:hover{ filter:brightness(1.06); box-shadow:var(--shadow-md); }
.btn-blue{ background:var(--blue-solid); color:#fff; }
.btn-blue:hover{ filter:brightness(1.08); }
.btn-green{ background:var(--green); color:#fff; }
.btn-green:hover{ filter:brightness(1.06); }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color:var(--violet); color:var(--violet); }
.btn-ghost-gray{ background:#EFEFEF; color:var(--ink); }
.btn-ghost-gray:hover{ background:#E4E4E4; }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:var(--r-pill); }
.btn-square{ border-radius:var(--r-md); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.grad-text{ background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Nav (app header, used in dashboard/wishlist/cart pages) ---------- */
.app-nav{ padding:20px 0; border-bottom:1px solid #F0F0F0; }
.app-nav .container{ display:flex; align-items:center; gap:28px; min-width:0; }
.app-tabs{ display:flex; gap:8px; }
.app-tab{ position:relative; padding:9px 16px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--muted); background:transparent; display:inline-flex; align-items:center; }
.app-tab.active{ background:#F1F1F1; color:var(--ink); }
.app-tab .count{
  position:absolute; top:-4px; right:-6px; background:var(--gradient); color:#fff;
  font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  line-height:1; border:2px solid #fff; box-sizing:border-box;
}
.app-nav-right{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.icon-btn{ width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background:#F1F1F1; border:none; color:var(--ink); flex-shrink:0; transition:background .18s; }
.icon-btn:hover{ background:#E6E6E6; }
.icon-btn.round{ border-radius:50%; }
.burger{ display:none; }
@media (max-width:860px){
  .app-tabs{ display:none; }
  .burger{ display:flex; }
  /* На мобиле в app-nav скрываем иконки share/settings/logout/lang — они есть в mobile-menu */
  .app-nav-right .js-open-share,
  .app-nav-right a[href*="settings"],
  .app-nav-right a[href*="logout"],
  .app-nav-right .lang-seg--nav{ display:none; }
  /* "Add gift" — оставляем только иконку, убираем текст */
  .app-nav-right .btn-gradient span{ display:none; }
  .app-nav-right .btn-gradient{ padding:9px 10px; min-width:38px; justify-content:center; }
  .app-nav .container{ gap:12px; }
}

/* Marketing nav (homepage / shops / how-it-works) */
.nav{ padding:22px 0; }
.nav .container{ display:flex; align-items:center; gap:36px; min-width:0; }
.nav-links{ display:flex; gap:30px; align-items:center; flex:1; }
.nav-links a{ font-size:15px; font-weight:600; color:var(--ink); }
.nav-links a.muted{ color:var(--muted); }
.nav-right{ display:flex; align-items:center; gap:16px; margin-left:auto; flex-shrink:0; }
.nav-login{ font-size:15px; font-weight:600; color:var(--ink); }
@media (max-width:860px){
  .nav-links{ display:none; }
  /* На мобиле в marketing nav: скрываем login-текст и signup-btn — они в mobile-menu */
  .nav-right .nav-login,
  .nav-right .btn-blue,
  .nav-right .lang-seg--nav{ display:none; }
  .nav .container{ gap:12px; }
}

.mobile-menu{ position:fixed; inset:0; background:#fff; z-index:400; transform:translateX(100%); transition:transform .3s var(--ease); padding:22px; display:flex; flex-direction:column; }
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
.mobile-menu a:not(.btn){ display:block; padding:16px 4px; font-size:19px; font-weight:700; border-bottom:1px solid #F0F0F0; }
.mobile-menu a.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  margin-top:22px; border-bottom:none; font-size:14.5px; padding:13px 26px;
}
.mobile-menu a.btn-block{ display:flex; width:100%; }

/* ---------- Product card ---------- */
.grid{ display:grid; gap:24px; }
.grid > *{ min-width:0; }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .grid-5{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .grid-5,.grid-4{ grid-template-columns:repeat(2,1fr); gap:16px; } }

.product-card{ display:flex; flex-direction:column; min-width:0; }
.product-thumb{ aspect-ratio:1/1; width:100%; border-radius:var(--r-md); background:#F5F5F5; overflow:hidden; margin-bottom:12px; position:relative; }
.product-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.product-name{ font-size:14.5px; color:#3a3a3a; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.product-thumb{ display:block; color:inherit; text-decoration:none; }
a.product-name{ display:block; text-decoration:none; color:#3a3a3a; }
a.product-name:hover{ color:var(--green, #2d8a4e); }
.product-creator{ font-size:12.5px; color:var(--muted, #888); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.product-creator:hover{ text-decoration:underline; color:var(--muted, #888); }
.product-price{ font-size:19px; font-weight:700; margin-bottom:10px; }
.product-actions{ display:flex; flex-direction:column; gap:8px; }
.qty-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.qty-row .qty-btn{ width:26px; height:26px; border-radius:50%; background:#F1F1F1; border:none; font-weight:700; }
.qty-row .qty-val{ min-width:20px; text-align:center; font-weight:700; font-size:13px; }

/* ---------- Profile header (public wishlist + dashboard) ---------- */
.profile-cover{ height:220px; border-radius:0; position:relative; overflow:hidden; }
.profile-cover img{ width:100%; height:100%; object-fit:cover; }
.profile-cover.placeholder{ background:var(--bg-soft-cover); }
.profile-head{ display:flex; align-items:flex-start; gap:22px; padding:14px 40px 0; position:relative; z-index:2; flex-wrap:wrap; }
@media (max-width:760px){
  .profile-head{ padding:14px 20px 0; }
  .profile-meta{ min-width:0; flex:1 1 auto; }
  .profile-stats-row{ flex-wrap:wrap; gap:10px 16px; font-size:13.5px; }
  .profile-actions-col{ width:100%; margin-left:0; align-items:stretch; align-self:stretch; }
  .profile-actions-col > div{ width:100%; }
  .profile-actions-col .btn{ justify-content:center; }
  .proof-line{ max-width:100%; white-space:normal; }
  .tabs-row{
    margin:22px 20px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; max-width:100%;
  }
  .tabs-row::-webkit-scrollbar{ display:none; }
  .profile-tab{ margin-right:14px; padding:10px 4px; font-size:14px; flex-shrink:0; }
  .profile-tab.active::after{ right:14px; }
}
.profile-avatar{ width:104px; height:104px; border-radius:50%; border:4px solid #fff; background:#e4e4e4; overflow:hidden; flex-shrink:0; margin-top:-66px; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-avatar.empty{ display:flex; align-items:center; justify-content:center; color:#b7b7b7; }
.profile-meta{ flex:1; padding-top:8px; padding-bottom:6px; min-width:220px; }
.profile-meta h1{ font-size:26px; font-weight:400; }
.profile-actions-col{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-top:8px; margin-left:auto; align-self:flex-start; }
.balance-chip{ background:#F1F1F1; border-radius:var(--r-pill); padding:9px 16px; font-size:13.5px; font-weight:600; }

.tabs-row{ display:flex; gap:8px; margin:26px 40px 0; border-bottom:1px solid #EFEFEF; padding-bottom:0; }
@media (max-width:760px){ .tabs-row{ margin:22px 20px 0; } }
.profile-name{ font-weight:700; font-size:16px; margin-top:2px; }
.profile-bio{ color:#4a4a4a; font-size:14.5px; margin-top:6px; max-width:520px; }
.profile-stats-row{ display:flex; gap:26px; margin-top:14px; font-size:14.5px; }
.profile-stats-row b{ font-weight:700; }
.profile-social{ display:flex; gap:12px; margin-top:16px; }
.profile-social a{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:#9c9c9c; }
.profile-tab{ padding:12px 6px; margin-right:26px; font-size:15px; font-weight:600; color:#b9b9b9; position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.profile-tab .count{ background:#EFEFEF; color:#8a8a8a; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); }
.profile-tab.active{ color:var(--violet); }
.profile-tab.active .count{ background:var(--gradient); color:#fff; }
.profile-tab.active::after{ content:''; position:absolute; left:0; right:26px; bottom:-1px; height:2px; background:var(--gradient); }

.tab-panel{ padding:32px 40px 64px; }
@media (max-width:760px){ .tab-panel{ padding:24px 20px 48px; } }
.tab-panel.hidden{ display:none; }
.product-card.profile-gift-collapsed{ display:none; }

/* Collections grid */
.collection-tile{ display:block; min-width:0; background:transparent; overflow:visible; }
.collection-tile .thumb{ aspect-ratio:4/3; background:#DEDEDE; border-radius:var(--r-lg); overflow:hidden; position:relative; }
.collection-tile .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.collection-tile .cap{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:12px 4px 4px; }
.collection-tile h4{ font-size:15px; font-weight:700; line-height:1.25; min-width:0; flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word; }
.collection-tile .badge{ flex:0 0 auto; background:#F1F1F1; color:var(--muted); font-size:12px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.collection-tile-meta{ font-size:12.5px; color:var(--muted); margin-top:4px; padding:0 4px; }

/* Gifters grid */
.gifter-tile{ aspect-ratio:3/4; border-radius:var(--r-lg); background:#e4e4e4; }

/* ---------- Cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.35); z-index:500; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:#fff; z-index:501; transform:translateX(100%); transition:transform .3s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ padding:24px 32px 16px; border-bottom:1px solid #F1F1F1; }
.cart-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cart-head h3{ font-size:20px; display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
/* v2 drawer: не тянуть legacy-стили .cabinet-cart__close из старого main.css */
.cart-drawer .cabinet-cart__close{ position:relative; left:auto; top:auto; flex-shrink:0; margin-left:auto; }
.cart-drawer .cabinet-cart__close::before,
.cart-drawer .cabinet-cart__close::after{ display:none; content:none; }
.cart-head-row .close-cart,
.cart-drawer .cabinet-cart__close{
  width:46px; height:46px; min-width:46px; min-height:46px;
  border-radius:var(--r-md); background:#EFEFEF; font-size:22px; line-height:1; font-weight:600;
  box-shadow:var(--shadow-sm);
}
.cart-head-row .close-cart:active,
.cart-drawer .cabinet-cart__close:active{ background:#E4E4E4; transform:scale(.97); }
@media (max-width:760px){
  .cart-head{ padding:16px 16px 12px; }
}
.cart-head .count{ background:var(--gradient); color:#fff; font-size:12px; font-weight:700; padding:2px 10px; border-radius:var(--r-pill); }
.cart-subtitle{ color:var(--muted); font-size:13px; margin-top:4px; display:flex; align-items:center; gap:6px; }
.cart-subtitle .guest-dot{ width:6px; height:6px; border-radius:50%; background:#00B67A; flex-shrink:0; }

.cart-step-items{ flex:1; display:flex; flex-direction:column; min-height:0; }
.cart-step-checkout{ flex:1; display:none; flex-direction:column; min-height:0; }
.cart-drawer.checkout-mode .cart-step-items{ display:none; }
.cart-drawer.checkout-mode .cart-step-checkout{ display:flex; }

.cart-items{ flex:1; overflow-y:auto; padding:8px 32px; }
.cart-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #F1F1F1; }
.cart-item .thumb{ width:64px; height:64px; border-radius:var(--r-sm); background:#F5F5F5; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cart-item .thumb img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.cart-item .info{ flex:1; }
.cart-item .name{ font-size:13.5px; color:#3a3a3a; }
.cart-item .price{ font-weight:700; font-size:16px; margin-top:2px; }
.cart-item .row2{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.cart-remove-btn{ background:#FCEAEA; color:#E24C4C; border:none; width:28px; height:28px; border-radius:50%; font-size:12px; }
.cart-remove-btn:hover{ background:#F8D5D5; }

.cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 32px; color:var(--muted); }
.cart-empty-icon{ font-size:42px; margin-bottom:14px; opacity:.6; }
.cart-empty p{ font-weight:700; color:var(--ink); font-size:15px; }
.cart-empty span{ font-size:13px; margin-top:4px; }

.cart-foot{ padding:18px 32px 22px; border-top:1px solid #F1F1F1; }
.cart-total-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.cart-total-row .label{ color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
.cart-total-row .value{ font-size:24px; font-weight:800; }
.cart-guest-note{ text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }

.cart-back-btn{ display:flex; align-items:center; gap:6px; background:none; border:none; padding:18px 24px 4px; font-weight:700; font-size:13.5px; color:var(--violet); }
.cart-step-checkout .checkout-form{ flex:1; overflow-y:auto; padding:6px 24px; }
.cart-step-checkout .checkout-form .field-label{ font-size:13px; font-weight:700; margin:14px 0 6px; display:block; }
.cart-step-checkout .checkout-form .field-label:first-child{ margin-top:2px; }
.cart-step-checkout .checkout-form textarea.field{ min-height:70px; resize:vertical; }

/* Cart icon badge (auto-injected by JS on every .open-cart button) */
.icon-btn{ position:relative; }
.cart-badge, .cart-btn__badge, .icon-btn .badge{
  position:absolute; top:-4px; right:-4px; background:var(--gradient); color:#fff;
  font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  line-height:1; border:2px solid #fff; box-sizing:border-box;
}



/* ---------- Auth split screen ---------- */
.auth-wrap{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
@media (max-width:900px){ .auth-wrap{ grid-template-columns:1fr; } .auth-visual{ display:none; } }
.auth-visual{ background:#8b8b8b; padding:56px; color:#fff; position:relative; overflow:hidden; }
.auth-visual h2{ font-size:34px; font-weight:800; max-width:420px; }
.auth-mosaic{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:36px; }
.auth-mosaic .cell{ background:rgba(255,255,255,.12); border-radius:10px; padding:8px; min-width:0; }
.auth-mosaic .cell .ph{ aspect-ratio:1/1; background:rgba(255,255,255,.18); border-radius:6px; margin-bottom:8px; overflow:hidden; position:relative; }
.auth-mosaic .cell .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.auth-mosaic .cell .n{ font-size:10.5px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-mosaic .cell .p{ font-size:11px; font-weight:700; margin:2px 0 6px; }
.auth-mosaic .cell .give{ background:var(--green); color:#fff; font-size:10px; font-weight:700; text-align:center; border-radius:5px; padding:4px 0; }
.auth-proof{ margin-top:36px; display:flex; align-items:center; gap:10px; font-weight:700; }
.auth-avatars{ display:flex; }
.auth-avatars span{ width:32px; height:32px; border-radius:50%; border:2px solid #8b8b8b; background:#bbb; margin-left:-10px; overflow:hidden; flex-shrink:0; }
.auth-avatars span img{ width:100%; height:100%; object-fit:cover; display:block; }
.auth-proof-sub{ margin-top:10px; font-weight:700; font-size:14px; max-width:340px; }

.auth-form{ display:flex; align-items:center; justify-content:center; padding:56px; }
.auth-form-inner{ width:100%; max-width:380px; }
.auth-form h1{ font-size:32px; text-align:center; }
.auth-form .sub{ text-align:center; color:var(--muted); font-size:14.5px; margin-top:8px; }
.field{ width:100%; padding:14px 16px; border-radius:var(--r-md); border:1.5px solid var(--border); font-size:15px; margin-top:14px; transition:border-color .18s; }
.field:focus{ outline:none; border-color:var(--violet); }
.field.field-error{ border-color:#E24C4C; }
.field.field-error:focus{ border-color:#E24C4C; box-shadow:0 0 0 4px rgba(226,76,76,.12); }
.field.field--banned{ border-color:#E24C4C; background:#fff5f5; }
.field.field--banned:focus{ border-color:#E24C4C; box-shadow:0 0 0 4px rgba(226,76,76,.12); }
.auth-form .btn{ margin-top:18px; }
.auth-form .sing-form button[type="submit"]:disabled{
  opacity:1;
  background:#E8E4F0;
  color:#9A94A8;
  box-shadow:none;
  filter:none;
  animation:none;
  cursor:not-allowed;
  transform:none;
}
.auth-form .sing-form button[type="submit"]:not(:disabled){
  box-shadow:var(--shadow-md);
}
.auth-form .sing-form button[type="submit"]:not(:disabled):hover{
  filter:brightness(1.08);
  box-shadow:var(--shadow-lg);
}
.auth-link-row{ text-align:center; margin-top:16px; font-size:14px; color:var(--muted); }
.auth-link-row a{ color:var(--blue-solid); font-weight:600; text-decoration:underline; }
.role-card{ display:block; padding:26px 24px; border-radius:var(--r-lg); background:linear-gradient(120deg,#FDF3ED,#F6E1F1 50%,#E3ECFC); text-align:center; margin-top:16px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.role-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.role-card h3{ font-size:20px; }
.role-card p{ color:#57515c; font-size:13.5px; margin-top:6px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:13.5px; color:var(--muted); }
.checkbox-row input{ margin-top:3px; accent-color:var(--violet); flex-shrink:0; }
.checkbox-row a{ color:var(--blue-solid); font-weight:600; text-decoration:underline; }
.checkbox-row a:hover{ color:var(--violet); }

/* ---------- Settings ---------- */
.settings-layout{ display:grid; grid-template-columns:260px 1fr; gap:0; }
@media (max-width:800px){ .settings-layout{ grid-template-columns:1fr; } .settings-sidebar{ display:flex; overflow-x:auto; gap:8px; padding:16px 20px; } .settings-link{ white-space:nowrap; } }
.settings-sidebar{ padding:40px 24px; display:flex; flex-direction:column; gap:2px; }
.settings-link{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md); font-size:14.5px; font-weight:600; color:#4a4a4a; line-height:1.3; }
.settings-link.active{ background:#F1F1F1; color:var(--ink); }
.settings-link svg{ width:17px; height:17px; flex-shrink:0; }
.settings-main{ padding:40px; max-width:640px; }
@media (max-width:760px){ .settings-main{ padding:24px 20px; } }
.settings-cover{ border-radius:var(--r-lg); background:var(--bg-soft-cover); height:150px; position:relative; margin-bottom:-46px; display:block; cursor:pointer; overflow:hidden; background-size:cover; background-position:center; }
.settings-cover-note{ position:absolute; top:-28px; right:0; font-size:12.5px; color:var(--muted); }
.settings-cover-hint{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(23,22,26,0); transition:background .2s var(--ease); }
.settings-cover-hint svg,.settings-cover-hint span{ opacity:0; transition:opacity .2s var(--ease); }
.settings-cover-hint span{ color:#fff; font-size:13px; font-weight:700; }
.settings-cover:hover .settings-cover-hint{ background:rgba(23,22,26,.4); }
.settings-cover:hover .settings-cover-hint svg,.settings-cover:hover .settings-cover-hint span{ opacity:1; }
.settings-cover.has-image .settings-cover-hint{ background:rgba(23,22,26,0); }
.settings-cover.has-image:hover .settings-cover-hint{ background:rgba(23,22,26,.35); }
.settings-avatar-wrap{ display:flex; flex-direction:column; align-items:center; padding-top:60px; margin-bottom:24px; }
.settings-avatar{ width:96px; height:96px; border-radius:50%; background:#EFEFEF; display:flex; align-items:center; justify-content:center; color:#b7b7b7; border:4px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden; position:relative; }
.settings-avatar:hover{ filter:brightness(.95); }
.settings-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; position:absolute; inset:0; }
.settings-avatar-wrap .label{ font-size:13px; color:var(--muted); margin-top:10px; cursor:pointer; }
.settings-avatar-wrap .label:hover{ color:var(--violet); }
.field-label{ font-size:14px; font-weight:700; margin:20px 0 8px; display:block; }
textarea.field{ resize:vertical; min-height:90px; }

/* ---------- Shops / brands ---------- */
.centered-copy{ max-width:760px; margin:0 auto; text-align:center; }
.centered-copy h1{ font-size:30px; line-height:1.3; }
.centered-copy p{ color:#4a4a4a; font-size:15.5px; margin-top:22px; line-height:1.7; }
.email-highlight{ font-weight:700; color:var(--ink); }

/* ---------- How it works ---------- */
.step-block{ display:grid; grid-template-columns:80px 1fr; gap:28px; margin-bottom:56px; }
@media (max-width:700px){ .step-block{ grid-template-columns:56px 1fr; } }
.step-ring{ width:64px; height:64px; border-radius:50%; border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--gradient) border-box; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--ink); }
.step-block p{ color:#4a4a4a; font-size:15px; line-height:1.7; max-width:600px; }
.step-block h4{ font-size:15px; margin-bottom:4px; }

/* ---------- Homepage ---------- */
.hero-home{ padding:70px 0 40px; text-align:center; }
.hero-home h1{ font-size:clamp(28px,4vw,42px); max-width:760px; margin:0 auto; line-height:1.3; }
.hero-home .sub{ color:#4a4a4a; font-size:16px; max-width:560px; margin:18px auto 0; }
.hero-home-cta{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.platform-icons{ display:flex; gap:22px; justify-content:center; margin-top:44px; opacity:.6; flex-wrap:wrap; }
.platform-icons span{ font-size:13px; font-weight:700; }

.offer-cards{ display:flex; gap:20px; overflow-x:auto; padding:36px 4px; scroll-snap-type:x mandatory; }
.offer-card{ flex-shrink:0; width:300px; height:340px; border-radius:var(--r-lg); scroll-snap-align:center; box-shadow:var(--shadow-md); overflow:hidden; position:relative; }
.offer-card .fill{ position:absolute; inset:0; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{ background:#FAFAFA; border-radius:var(--r-lg); padding:28px; }
.feature-icon{ width:52px; height:52px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.feature-card p{ color:#4a4a4a; font-size:14.5px; line-height:1.7; }

.privacy-block{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:var(--bg-lavender); border-radius:24px; padding:52px; }
@media (max-width:860px){ .privacy-block{ grid-template-columns:1fr; padding:32px 24px; } }
.privacy-list{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.privacy-list li{ display:flex; gap:10px; font-size:14.5px; align-items:flex-start; }
.privacy-list li svg{ flex-shrink:0; margin-top:2px; color:var(--violet); }
.privacy-visual{ aspect-ratio:4/3; border-radius:var(--r-lg); background:linear-gradient(135deg,#5250FF,#9B0CF9,#E0399F); position:relative; overflow:hidden; }
.privacy-visual .pv-ico{ position:absolute; color:#fff; pointer-events:none; }
.privacy-visual .pv-ico svg{ width:100%; height:100%; display:block; }
.privacy-visual .pv-ico-main{ width:58%; height:58%; opacity:.24; left:50%; top:48%; transform:translate(-50%,-50%); }
.privacy-visual .pv-ico-a{ width:22%; height:22%; opacity:.16; right:9%; bottom:11%; transform:rotate(14deg); }
.privacy-visual .pv-ico-b{ width:16%; height:16%; opacity:.13; left:11%; top:13%; transform:rotate(-16deg); }

.final-cta{ text-align:center; background:var(--ink); color:#fff; border-radius:28px; padding:64px 32px; position:relative; }
.final-cta h2{ font-size:clamp(24px,3.4vw,34px); }
.final-cta p{ color:rgba(255,255,255,.7); margin-top:12px; }
.final-cta .btn{ margin-top:26px; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-lavender); padding:56px 0 30px; margin-top:0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-col h5{ font-size:14px; font-weight:800; margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; color:#57515c; padding:5px 0; text-decoration:underline; text-underline-offset:2px; }
.footer-brand p{ color:#57515c; font-size:13.5px; max-width:280px; margin-top:16px; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a.tg{ background:var(--blue-solid); color:#fff; }
.footer-social a.ig{ background:var(--violet); color:#fff; }
.footer-bottom{ margin-top:32px; padding-top:20px; border-top:1px solid rgba(87,81,92,.12); }
.footer-lang{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; }
.footer-lang a{ color:#57515c; text-decoration:none; }
.footer-lang a:hover, .footer-lang a.is-active{ color:var(--ink); }
.footer-lang span{ color:#b0aab6; font-weight:500; }

/* ---------- Section ---------- */
.section{ padding:70px 0; }
.section.tight{ padding:44px 0; }
.section-title{ font-size:clamp(24px,3vw,32px); text-align:center; }
.section-title.left{ text-align:left; }

/* ---------- Toast / gift success ---------- */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:14px 22px; border-radius:var(--r-pill); font-size:14px; font-weight:600; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:600; display:flex; align-items:center; gap:8px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================
   ADD A GIFT — form page
   ============================================================ */
.addgift-wrap{ max-width:680px; margin:0 auto; padding:40px 24px 80px; }
.addgift-wrap h1{ font-size:26px; margin-bottom:6px; }
.addgift-wrap .addgift-sub{ color:var(--muted); font-size:14px; margin-bottom:32px; }
.ag-field{ margin-bottom:28px; }
.ag-field label.ag-title{ font-size:15px; font-weight:800; display:block; }
.ag-field .ag-hint{ font-size:13px; color:var(--muted); margin:3px 0 10px; display:block; }
.ag-form-error{ background:#FDECEC; color:#B42318; border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:20px; }
.ag-min-sum{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin:-4px 0 10px; }
.ag-tip{ position:relative; display:inline-flex; cursor:help; outline:none; }
.ag-tip-icon{ width:18px; height:18px; border-radius:50%; background:#ECEAF0; color:var(--muted); font-size:11px; font-weight:800; line-height:18px; text-align:center; }
.ag-tip-pop{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  min-width:220px; max-width:280px; padding:10px 12px; border-radius:10px;
  background:#1E1B24; color:#fff; font-size:12.5px; line-height:1.45; font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.18); pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .15s, visibility .15s; z-index:20;
}
.ag-tip-pop::after{
  content:""; position:absolute; top:100%; left:50%; margin-left:-6px;
  border:6px solid transparent; border-top-color:#1E1B24;
}
.ag-tip:hover .ag-tip-pop, .ag-tip:focus .ag-tip-pop, .ag-tip:focus-within .ag-tip-pop{ opacity:1; visibility:visible; }
.ag-field select.field{ appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%238A8790" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 16px center; background-size:16px; padding-right:44px; }
.ag-price-row{ display:flex; gap:12px; }
.ag-price-row .field{ flex:1; }
.ag-price-row select.field{ flex:0 0 120px; }

/* Photo dropzone */
.ag-photo-drop{
  border:2px dashed var(--border); border-radius:var(--r-lg); padding:28px; text-align:center;
  cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease); position:relative; background:#FAFAFA;
}
.ag-photo-drop:hover, .ag-photo-drop.dragover{ border-color:var(--violet); background:#FBF8FF; }
.ag-photo-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ag-photo-drop .ag-drop-icon{ width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.ag-photo-drop .ag-drop-text{ font-weight:700; font-size:14.5px; }
.ag-photo-drop .ag-drop-sub{ font-size:12.5px; color:var(--muted); margin-top:4px; }

.ag-photo-preview-wrap{ display:none; align-items:center; gap:16px; margin-top:16px; }
.ag-photo-preview-wrap.show{ display:flex; }
.ag-photo-preview{
  width:96px; height:96px; border-radius:var(--r-md); flex-shrink:0; position:relative; overflow:hidden;
  background-image: linear-gradient(45deg,#eee 25%,transparent 25%), linear-gradient(-45deg,#eee 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#eee 75%), linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:12px 12px; background-position:0 0, 0 6px, 6px -6px, -6px 0px;
  border:1px solid var(--border);
}
.ag-photo-preview img{ width:100%; height:100%; object-fit:contain; }
.ag-photo-meta{ flex:1; min-width:0; }
.ag-photo-meta .ag-photo-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-photo-remove{ background:#F1F1F1; border:none; width:26px; height:26px; border-radius:50%; color:var(--muted); flex-shrink:0; }

.addgift-submit{ margin-top:8px; }

/* ============================================================
   EXPLORE / DISCOVERY — merged from the first concept, restyled
   with the real JOYFUL tokens (colors, type, radius, buttons)
   ============================================================ */

/* Creator card */
.creator-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1024px){ .creator-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .creator-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

.creator-card{
  background:#fff; border:1px solid #F0F0F0; border-radius:var(--r-lg); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); position:relative; display:block;
}
.creator-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.creator-card .ccover{ height:88px; position:relative; }
.creator-card .cavatar{
  width:56px; height:56px; border-radius:50%; border:3px solid #fff; position:absolute; left:16px; bottom:-28px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; overflow:hidden;
}
.creator-card .cbody{ padding:38px 16px 16px; }
.creator-card .cname-row{ display:flex; align-items:center; gap:5px; min-width:0; }
.creator-card .cname-row strong{
  font-size:15px; font-weight:700; min-width:0; flex:1 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.creator-card .chandle{ color:var(--muted); font-size:12.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creator-card .cmeta{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.cat-chip{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); background:#F1F1F1; color:var(--violet); }
.cwishes{ font-size:11.5px; color:var(--muted); }
.ctrend{ font-size:11px; font-weight:800; color:#00B67A; }
.badge-verified{ width:14px; height:14px; border-radius:50%; background:var(--gradient); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.rank-badge{ position:absolute; top:10px; left:10px; z-index:2; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.new-badge{ position:absolute; top:10px; right:10px; z-index:2; background:var(--gradient); color:#fff; font-size:10px; font-weight:800; letter-spacing:.03em; padding:4px 9px; border-radius:var(--r-pill); }

/* Section header row (eyebrow + link), reused across home/explore */
.row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.row-head h2{ font-size:clamp(20px,2.6vw,26px); text-align:left; }
.row-head p{ color:var(--muted); font-size:14px; margin-top:6px; }
.row-link{ font-weight:700; font-size:14px; color:var(--violet); white-space:nowrap; }
.row-link:hover{ text-decoration:underline; }

/* Category pills */
.category-row{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.category-row::-webkit-scrollbar{ display:none; }
.cat-pill{ flex-shrink:0; padding:10px 20px; border-radius:var(--r-pill); background:#F5F5F5; border:1.5px solid transparent; font-size:14px; font-weight:600; color:var(--ink); transition:all .2s var(--ease); }
.cat-pill:hover{ border-color:var(--violet); }
.cat-pill.active{ background:var(--gradient); color:#fff; }

/* Search */
.search-wrap{ position:relative; max-width:620px; margin:0 auto; }
.search-input{ width:100%; padding:18px 128px 18px 50px; border-radius:var(--r-pill); border:1.5px solid var(--border); background:#fff; font-size:15.5px; transition:border-color .18s, box-shadow .18s; }
.search-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(155,12,249,.10); }
.search-input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
.search-submit{ position:absolute; right:16px; top:50%; transform:translateY(-50%); padding:10px 18px; min-width:88px; }
.search-dropdown{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid #F0F0F0; padding:10px; display:none; z-index:60; max-height:380px; overflow:auto; text-align:left; }
.search-dropdown.open{ display:block; }
.search-group-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }
.search-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; }
.search-row:hover{ background:#F7F7F7; }
.search-row .sr-name{ font-size:13.5px; font-weight:600; }
.search-row .sr-meta{ font-size:11.5px; color:var(--muted); }
.avatar-xs{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800; }

/* Explore layout + filters */
.explore-hero{ padding:48px 0 24px; text-align:center; }
.explore-hero h1{ font-size:clamp(30px,5vw,46px); }
.explore-hero p{ color:var(--muted); font-size:16px; margin-top:10px; }

.explore-layout{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:flex-start; }
@media (max-width:900px){ .explore-layout{ grid-template-columns:1fr; } .filter-sidebar{ display:none; } }
.filter-sidebar{ position:sticky; top:24px; background:#FAFAFA; border-radius:var(--r-lg); padding:22px; }
.filter-block{ margin-bottom:20px; }
.filter-block:last-child{ margin-bottom:0; }
.filter-block h5{ font-size:12.5px; font-weight:800; margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.filter-opt{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#4a4a4a; padding:5px 0; cursor:pointer; }
.filter-opt input{ width:16px; height:16px; flex-shrink:0; accent-color:var(--violet); cursor:pointer; }
.filter-sidebar .filter-apply{ margin-top:16px; }
.filter-sidebar input[type=range]{ width:100%; accent-color:#9B0CF9; }
.mobile-filter-btn{ display:none; }
@media (max-width:900px){ .mobile-filter-btn{ display:inline-flex; } }
.filter-sheet{ position:fixed; inset:auto 0 0 0; background:#fff; z-index:520; border-radius:22px 22px 0 0; padding:22px; transform:translateY(100%); transition:transform .3s var(--ease); box-shadow:0 -10px 40px rgba(0,0,0,.15); max-height:80vh; overflow:auto; }
.filter-sheet.open{ transform:translateY(0); }
.sheet-backdrop{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:510; display:none; }
.sheet-backdrop.open{ display:block; }
.sheet-handle{ width:40px; height:4px; background:#E4E4E4; border-radius:99px; margin:0 auto 16px; }
.sort-row{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:22px; }
.sort-select{ padding:9px 14px; border-radius:var(--r-md); border:1.5px solid var(--border); background:#fff; font-size:13.5px; font-weight:600; }

/* Empty state + skeleton + load more (Explore) */
.empty-state{ text-align:center; padding:64px 24px; }
.empty-state .glyph{ width:60px; height:60px; border-radius:50%; background:#F1F1F1; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--violet); }
.empty-state h4{ font-size:18px; }
.empty-state p{ color:var(--muted); font-size:14px; margin-top:6px; }
.empty-state .btn{ margin-top:18px; }
.load-more-wrap{ display:flex; justify-content:center; margin-top:32px; }
#explore-results .explore-gifts-chunk{ margin-top:24px; }

/* Social proof line */
.proof-line{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); background:#F5F5F5; padding:5px 12px; border-radius:var(--r-pill); }
.proof-line .live-dot{ width:6px; height:6px; border-radius:50%; background:#00B67A; }

/* Scroll strip (home discovery previews) */
.scroll-strip{ display:flex; gap:20px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; scrollbar-width:none; }
.scroll-strip::-webkit-scrollbar{ display:none; }
.scroll-strip > *{ scroll-snap-align:start; flex-shrink:0; width:250px; }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid #EFEFEF; padding:18px 0; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700; font-size:15.5px; gap:16px; }
.faq-q .plus{ transition:transform .25s var(--ease); flex-shrink:0; color:var(--violet); font-size:20px; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-a{ max-height:480px; }
.faq-a p{ padding-top:10px; color:var(--muted); font-size:14px; line-height:1.7; max-width:640px; }

/* ---------- Gift success modal (celebration) ---------- */
.gift-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:700; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.gift-overlay.open{ opacity:1; pointer-events:auto; }
.gift-modal-box{ background:#fff; border-radius:var(--r-lg); padding:38px 30px; text-align:center; max-width:320px; position:relative; overflow:hidden; transform:scale(.92); opacity:0; transition:all .3s var(--ease); }
.gift-overlay.open .gift-modal-box{ transform:scale(1); opacity:1; }
.gift-icon-circle{ width:68px; height:68px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; z-index:2; }
.gift-modal-box h3{ font-size:20px; position:relative; z-index:2; }
.gift-modal-box p{ color:var(--muted); font-size:13.5px; margin-top:8px; position:relative; z-index:2; }
.gift-modal-box .btn{ margin-top:20px; position:relative; z-index:2; width:100%; }
.confetti-piece{ position:absolute; width:7px; height:7px; border-radius:2px; top:-10px; opacity:0; }
@keyframes confetti-fall{ 0%{ transform:translateY(0) rotate(0); opacity:1; } 100%{ transform:translateY(200px) rotate(340deg); opacity:0; } }

/* ---------- Suggest-a-gift modal (distinct from buying: propose a NEW item idea) ---------- */
.suggest-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:700; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.suggest-overlay.open{ opacity:1; pointer-events:auto; }
.suggest-modal-box{ background:#fff; border-radius:var(--r-lg); padding:30px 28px; max-width:380px; width:100%; position:relative; transform:scale(.92); opacity:0; transition:all .3s var(--ease); }
.suggest-overlay.open .suggest-modal-box{ transform:scale(1); opacity:1; }
.suggest-modal-box h3{ font-size:19px; }
.suggest-modal-box .sub{ color:var(--muted); font-size:13px; margin-top:6px; line-height:1.5; }
.suggest-modal-box .field-label{ font-size:13px; font-weight:700; margin:16px 0 6px; display:block; }
.suggest-modal-box .field-label:first-of-type{ margin-top:18px; }
.suggest-close-x{ position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%; background:#F1F1F1; border:none; color:var(--muted); }
.suggest-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.suggest-turnstile-wrap{ display:flex; justify-content:center; }

/* ---------- Follow button state ---------- */
.follow-btn.following{ background:#F1F1F1; color:var(--ink); border-color:transparent; }
.profile-stat-followers{ cursor:pointer; border-radius:8px; margin:-4px -6px; padding:4px 6px; transition:background .15s var(--ease); }
.profile-stat-followers:hover{ background:rgba(82,80,255,.08); }
.profile-stat-followers:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.followers-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:710; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.followers-overlay.open{ opacity:1; pointer-events:auto; }
.followers-modal-box{ background:#fff; border-radius:var(--r-lg); padding:26px 24px 22px; max-width:420px; width:100%; max-height:min(80vh,560px); display:flex; flex-direction:column; position:relative; transform:scale(.92); opacity:0; transition:all .3s var(--ease); box-shadow:var(--shadow-md); }
.followers-overlay.open .followers-modal-box{ transform:scale(1); opacity:1; }
.followers-modal-box h3{ font-size:18px; margin:0 36px 14px 0; line-height:1.3; }
.followers-close{ position:absolute; top:14px; right:14px; }
.followers-loading, .followers-empty{ font-size:14px; color:var(--muted); margin:8px 0 0; }
.followers-list{ overflow-y:auto; margin-top:4px; flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; }
.followers-row{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r-md); text-decoration:none; color:inherit; transition:background .15s var(--ease); }
.followers-row:hover{ background:#F7F7FA; }
.followers-row-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; }
.followers-row-avatar img{ width:100%; height:100%; object-fit:cover; }
.followers-row-meta{ min-width:0; }
.followers-row-login{ font-weight:800; font-size:14px; }
.followers-row-title{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Collection gifts modal ---------- */
.collection-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:712; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.collection-overlay.open{ opacity:1; pointer-events:auto; }
.collection-modal-box{ background:#fff; border-radius:var(--r-lg); padding:26px 24px 22px; max-width:min(960px,100%); width:100%; max-height:min(88vh,760px); display:flex; flex-direction:column; position:relative; transform:scale(.92); opacity:0; transition:all .3s var(--ease); box-shadow:var(--shadow-md); }
.collection-overlay.open .collection-modal-box{ transform:scale(1); opacity:1; }
.collection-modal-box h3{ font-size:20px; margin:0 40px 16px 0; line-height:1.3; }
.collection-close{ position:absolute; top:14px; right:14px; }
.collection-modal-panel{ display:flex; flex-direction:column; min-height:0; flex:1; }
.collection-modal-grid{ overflow-y:auto; flex:1; min-height:0; padding-right:4px; }
.collection-modal-empty{ font-size:14px; color:var(--muted); margin:8px 0 0; }

/* ---------- Category SEO intro ---------- */
.category-intro{ max-width:760px; margin:0 auto 8px; text-align:center; color:#4a4a4a; font-size:15px; line-height:1.7; }

/* ============================================================
   ORDERS PAGE
   ============================================================ */
.orders-wrap{ max-width:1240px; margin:0 auto; padding:36px 24px 80px; }
.orders-wrap h1{ font-size:26px; margin-bottom:22px; }
.orders-table-scroll{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid #F0F0F0; box-shadow:var(--shadow-sm); }
.orders-table{ width:100%; border-collapse:collapse; min-width:960px; background:#fff; }
.orders-table thead th{
  background:var(--gradient); color:#fff; text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; padding:14px 16px; white-space:nowrap;
}
.orders-table tbody td{ padding:14px 16px; font-size:13.5px; border-bottom:1px solid #F2F2F2; vertical-align:top; color:#2c2c2c; }
.orders-table tbody tr:nth-child(even){ background:#FAFAFA; }
.orders-table tbody tr:last-child td{ border-bottom:none; }
.orders-table td.muted-cell{ color:#c2c2c2; }
.orders-table .ord-date{ white-space:nowrap; color:#4a4a4a; }
.orders-table .ord-id{ font-weight:700; color:var(--ink); }

.status-badge{ display:inline-block; padding:5px 12px; border-radius:var(--r-pill); font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.status-badge.processing{ background:#FDECC8; color:#8A5A00; }
.status-badge.shipped{ background:#DCE9FF; color:#1D4ED8; }
.status-badge.delivered{ background:#DDF3DD; color:#177A17; }
.status-badge.problem{ background:#FBE0E7; color:#C21856; }
.status-badge.failed{ background:#FDE4E1; color:#C1341F; }

.is-paid-yes{ color:#00A868; font-weight:700; }
.is-paid-no{ color:#B7B7B7; font-weight:600; }
.orders-table .btn{ color:#fff; }

.orders-faq{ margin-bottom:24px; }
.orders-faq .faq-a p{ max-width:none; }
.orders-empty{ text-align:center; padding:60px 24px; color:var(--muted); }

/* ============================================================
   PROFILE VISIBILITY TOGGLE (settings page)
   ============================================================ */
.visibility-row{ display:flex; align-items:flex-start; gap:16px; margin-top:16px; padding:18px; background:#FAFAFA; border-radius:var(--r-lg); }
.visibility-text strong{ font-size:14.5px; font-weight:700; display:block; }
.visibility-text p{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.5; }

.switch{ position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; margin-top:1px; overflow:hidden; }
.switch input{
  opacity:0; position:absolute; inset:0; width:100%; height:100%; margin:0;
  cursor:pointer; z-index:2;
}
.switch-slider{ position:absolute; inset:0; background:#D9D9D9; border-radius:999px; transition:background .2s var(--ease); pointer-events:none; }
.switch-slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2); pointer-events:none; }
.switch input:checked + .switch-slider{ background:var(--gradient); }
.switch input:checked + .switch-slider::before{ transform:translateX(20px); }

/* ============================================================
   ACCOUNT SETTINGS (cards, rows, icon buttons)
   ============================================================ */
.settings-card{ background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px; margin-bottom:22px; }
.settings-card-head{ display:flex; align-items:flex-start; gap:10px; }
.settings-card-head svg{ margin-top:1px; flex-shrink:0; color:var(--ink); }
.settings-card-head h3{ font-size:16.5px; font-weight:800; }
.settings-card-sub{ color:var(--muted); font-size:13.5px; margin:4px 0 20px 29px; }
.settings-card-divider{ border:none; border-top:1px solid #F0F0F0; margin:0 0 16px; }

.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#F7F7F7; border-radius:14px; padding:13px 16px; margin-bottom:10px; transition:background .18s var(--ease); }
.settings-row:last-child{ margin-bottom:0; }
.settings-row-label{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:#3a3a3a; }
.settings-row-label svg{ color:#9a9a9a; flex-shrink:0; }
.settings-row-link{ cursor:pointer; }
.settings-row-danger{ cursor:pointer; }
.settings-row-link:hover{ background:#F0F0F0; }
.settings-row-danger:hover{ background:#FCEFEF; }
.settings-icon-btn{ width:32px; height:32px; border-radius:10px; background:var(--gradient); display:flex; align-items:center; justify-content:center; border:none; color:#fff; flex-shrink:0; }
.settings-icon-btn:hover{ filter:brightness(1.06); }

/* ============================================================
   ADDRESS (customs alert + multi-field form)
   ============================================================ */
.alert-box{ border:1.5px solid #E24C4C; border-radius:16px; padding:20px 22px; margin-bottom:22px; background:#FFFBFB; }
.alert-box-head{ display:flex; align-items:center; gap:8px; color:#E24C4C; font-weight:800; font-size:15px; }
.alert-box p{ color:var(--muted); font-size:13.5px; margin-top:8px; line-height:1.6; }

.address-row-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:700px){ .address-row-4{ grid-template-columns:1fr 1fr; } }
.address-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }

/* ---------- Confirm / action modal (email change, delete confirmations) ---------- */
.confirm-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:750; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.confirm-overlay.open{ opacity:1; pointer-events:auto; }
.confirm-modal-box{ background:#fff; border-radius:var(--r-lg); padding:28px; max-width:360px; width:100%; transform:scale(.92); opacity:0; transition:all .3s var(--ease); }
.confirm-overlay.open .confirm-modal-box{ transform:scale(1); opacity:1; }
.confirm-modal-box h3{ font-size:18px; }
.confirm-modal-box p{ color:var(--muted); font-size:13.5px; margin-top:8px; line-height:1.55; }
.confirm-modal-box .field{ margin-top:14px; }
.confirm-modal-actions{ display:flex; gap:10px; margin-top:22px; }
.confirm-modal-actions .btn{ flex:1; }
.btn-danger{ background:#E24C4C; color:#fff; }
.btn-danger:hover{ filter:brightness(1.06); }

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch{ position:relative; }
.lang-btn{ display:flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:var(--r-pill); background:#F1F1F1; border:none; color:var(--ink); font-weight:700; font-size:12.5px; transition:background .18s; }
.lang-btn:hover{ background:#E6E6E6; }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-lg); border:1px solid #F0F0F0; padding:6px; display:none; z-index:90; min-width:140px; opacity:0; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease); }
.lang-menu.open{ display:block; opacity:1; transform:translateY(0); }
.lang-menu .lang-opt{ display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; text-align:left; background:transparent; border:none; color:var(--ink); text-decoration:none; box-sizing:border-box; }
.lang-menu .lang-opt:hover{ background:#F7F7F7; }
.lang-menu .lang-opt.active{ color:var(--violet); background:#F5F0FF; }
.lang-seg{ display:flex; background:#F1F1F1; border-radius:var(--r-pill); padding:4px; gap:4px; margin:18px 0 6px; }
.lang-seg .lang-opt{ flex:1; padding:9px 0; border-radius:var(--r-pill); font-weight:700; font-size:13px; border:none; background:transparent; color:var(--muted); transition:all .18s var(--ease); text-decoration:none; text-align:center; display:block; box-sizing:border-box; }
.lang-seg .lang-opt.active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.lang-seg--nav{
  margin:0; flex-shrink:0; align-items:center;
  height:38px; padding:3px; box-sizing:border-box;
}
.lang-seg--nav .lang-opt{
  flex:0 0 auto; min-width:40px; height:32px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px;
}
.auth-lang-fixed{ position:fixed; top:20px; right:20px; z-index:120; }
.auth-lang-fixed .lang-seg--nav{ background:#fff; box-shadow:var(--shadow-sm); }
@media (max-width:900px){ .auth-lang-fixed{ top:16px; right:16px; } }

/* ============================================================
   MICRO-ANIMATIONS (scroll reveal, gradient motion, hover polish)
   ============================================================ */
@keyframes gradientShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.btn-gradient{ background-size:200% 200%; animation:gradientShift 6s ease infinite; }
.privacy-visual{ background-size:200% 200% !important; animation:gradientShift 8s ease infinite; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.2s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.32s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.38s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.44s; }

.btn{ transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); }
.btn:hover{ transform:translateY(-1px) scale(1.02); }
.btn:active{ transform:scale(.97); }

.icon-btn, .icon-btn.round{ transition:background .18s var(--ease), transform .18s var(--ease); }
.icon-btn:active{ transform:scale(.92); }

/* Heart / like pulse (used by wishlist heart buttons in cart) */
@keyframes heartPop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); } 60%{ transform:scale(.92); } 100%{ transform:scale(1); } }
.heart-liked{ animation:heartPop .4s var(--ease); color:#E0399F !important; }

/* Search dropdown + filter sheet + modal already have their own transitions above;
   reinforce with a subtle scale-in for dropdown */
.search-dropdown{ transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease); opacity:0; }
.search-dropdown.open{ opacity:1; transform:translateY(0); }

/* Floating decorative blobs behind hero (pure CSS, no imagery) */
.hero-home{ position:relative; overflow:hidden; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; z-index:0; pointer-events:none; }
.hero-blob-1{ width:280px; height:280px; background:linear-gradient(135deg,#5250FF,#9B0CF9); top:-60px; left:-80px; animation:blobFloat 9s ease-in-out infinite; }
.hero-blob-2{ width:220px; height:220px; background:linear-gradient(135deg,#E0399F,#FF9F5A); top:40px; right:-60px; animation:blobFloat 11s ease-in-out infinite reverse; }
@keyframes blobFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-24px) scale(1.08); } }
.hero-home .container{ position:relative; z-index:1; }

/* Category pill press feedback */
.cat-pill{ transition:all .2s var(--ease), transform .12s var(--ease); }
.cat-pill:active{ transform:scale(.96); }

/* ============================================================
   DECORATIVE GIFT ILLUSTRATIONS (real asset, animated)
   ============================================================ */
.gift-float{ position:absolute; pointer-events:none; user-select:none; filter:drop-shadow(0 14px 24px rgba(109,12,155,.18)); z-index:1; }
.gift-float img{ width:100%; height:100%; display:block; }

@keyframes giftBob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 4deg)); } }
@keyframes giftBobSlow{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-10px) rotate(calc(var(--r,0deg) - 3deg)); } }
@keyframes giftSpinTiny{ 0%,100%{ transform:rotate(var(--r,0deg)) scale(1); } 50%{ transform:rotate(calc(var(--r,0deg) + 8deg)) scale(1.05); } }

.gift-hero-1{ width:86px; height:86px; top:6%; right:6%; --r:-8deg; animation:giftBob 5.5s ease-in-out infinite; animation-delay:.2s; }
.gift-hero-2{ width:56px; height:56px; top:60%; left:3%; --r:10deg; animation:giftBobSlow 6.5s ease-in-out infinite; animation-delay:1.1s; }
.gift-hero-3{ width:46px; height:46px; top:8%; left:7%; --r:-14deg; animation:giftSpinTiny 4.8s ease-in-out infinite; animation-delay:.6s; }

.gift-cta{ width:110px; height:110px; right:-18px; top:-40px; --r:8deg; animation:giftBob 6s ease-in-out infinite; }

.sparkle{ position:absolute; pointer-events:none; opacity:.8; z-index:1; }
@keyframes sparkleTwinkle{ 0%,100%{ opacity:.25; transform:scale(.85) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(20deg); } }
.sparkle svg{ animation:sparkleTwinkle 2.6s ease-in-out infinite; }

@media (max-width:760px){
  .gift-hero-1{ width:52px; height:52px; top:2%; right:3%; }
  .gift-hero-2{ display:none; }
  .gift-hero-3{ width:30px; height:30px; top:2%; left:4%; }
  .gift-cta{ width:76px; height:76px; right:-10px; top:-28px; }
}

@media (prefers-reduced-motion:reduce){
  .gift-hero-1,.gift-hero-2,.gift-hero-3,.gift-cta,.sparkle svg{ animation:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .btn-gradient, .privacy-visual, .hero-blob-1, .hero-blob-2{ animation:none !important; }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Bridge: old cart JS uses .cabinet-cart.active */
.cart-drawer.cabinet-cart.active{ transform:translateX(0); }
.cart-overlay.cabinet-cart-overlay.active,
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.suppport_tg{ position:fixed; right:18px; bottom:18px; z-index:400; width:56px; }
.suppport_tg img{ width:56px; height:auto; }
.form-error-msg{ display:none; color:#c0392b; font-size:13px; margin-top:6px; }
.alert{ color:#c0392b; font-size:13px; min-height:18px; margin-top:8px; }
.auth-form .field{ margin-top:10px; }
.role-card{ display:block; }
.toast-v2{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#17161A; color:#fff; padding:12px 18px; border-radius:999px; font-size:14px; opacity:0; pointer-events:none; z-index:900; transition:opacity .2s, transform .2s; }
.toast-v2.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.product-card .product-card__add-cart{ width:100%; }
.faq-item{ cursor:pointer; }
.wishlist-card, .creator-card, .product-card{ color:inherit; }
.cms-html{ font-size:16px; line-height:1.65; color:var(--ink); }
.cms-html img{ max-width:100%; }
.cms-html hr{ display:none; }
.cms-html h1,
.cms-html h2,
.cms-html h3{
  font-size:18px; line-height:1.3; font-weight:700;
  margin:28px 0 10px; letter-spacing:0;
}
.cms-html h1:first-child,
.cms-html h2:first-child,
.cms-html h3:first-child{ margin-top:0; }
.cms-html h1:empty,
.cms-html h2:empty,
.cms-html h3:empty,
.cms-html p:empty{ display:none; }
.cms-html > div{ margin:0 0 10px; }
.cms-html > .cms-sec{ font-weight:700; margin-top:18px; margin-bottom:8px; }
.cms-html ul,
.cms-html ol{ margin:4px 0 16px; padding-left:1.35em; }
.cms-html ul{ list-style:disc; }
.cms-html ol{ list-style:decimal; }
.cms-html li{ margin:0 0 6px; }
.cms-html a{ color:var(--violet); font-size:inherit !important; }
.cms-html a:hover{ text-decoration:underline; }
.page-shell{ min-height:50vh; }
.legal-page > .container > h1{ font-size:28px; line-height:1.2; margin-bottom:28px; }
.cms-html .cms-meta{ color:var(--muted); font-size:14px; margin:0 0 24px; }
.cms-html .ql-editor,
.cms-html .tl_article_content,
.cms-html .ql-container{
  height:auto !important; min-height:0 !important; white-space:normal !important;
  margin:0 !important; padding:0 !important;
}
.cms-html .ql-editor p,
.cms-html .tl_article_content p,
.cms-html p[dir="auto"]{ margin:0 0 12px !important; }
.explore-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }

.ccover img, .cavatar img, .thumb img, .profile-avatar img, .settings-avatar img, .ag-photo-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card{ position:relative; }
.product-card .edit_gift_a{ position:absolute; top:10px; right:10px; z-index:2; background:#fff; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.profile-avatar{ overflow:hidden; }
.cart-drawer.checkout-mode .cart-step-items{ display:flex; }
.cart-drawer .cart-step-checkout{ display:none !important; }
.cart-drawer:not(.checkout-mode) .v2-cart-checkout{ display:none; }
.cart-drawer.checkout-mode .cc-products,
.cart-drawer.checkout-mode .cc-products__total:not(.v2-cart-checkout__total),
.cart-drawer.checkout-mode .cart-checkout-btn,
.cart-drawer.checkout-mode .cart-guest-note{ display:none !important; }
.cart-drawer:not(.checkout-mode) .v2-cart-checkout__total{ display:none !important; }
.cart-drawer.checkout-mode .v2-cart-checkout{ display:block; padding:0; }
.cart-drawer .cabinet-cart__inner-container{
  padding:8px 32px 24px; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;
}
.cart-drawer.checkout-mode .cabinet-cart__inner-container{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.settings-cover.has-img .settings-cover-hint{ background:rgba(0,0,0,.35); }
.follow-btn.is-following{ background:#17161A; color:#fff; border-color:#17161A; }
.empty-state{ text-align:center; padding:48px 16px; color:var(--muted); }
.empty-state .glyph{ font-size:42px; margin-bottom:12px; }
.addgift-wrap, .orders-wrap, .settings-layout{ min-height:60vh; }
.st-selected-networks a{ font-weight:700; color:var(--violet); }
.cms-html p{ margin:0 0 12px; }
.logo-img{ height:28px; width:auto; max-width:none; display:block; flex-shrink:0; }
.suggest-modal-box .suggest-close{ position:absolute; top:16px; right:16px; }
.share-overlay{ position:fixed; inset:0; background:rgba(23,22,26,.4); z-index:700; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.share-overlay.open{ opacity:1; pointer-events:auto; }
.share-overlay .share-modal-box{ transform:scale(.92); opacity:0; transition:all .3s var(--ease); }
.share-overlay.open .share-modal-box{ transform:scale(1); opacity:1; }
.share-url-row{ display:flex; gap:8px; margin-top:16px; align-items:stretch; }
.share-url-row .field{ margin-top:0; flex:1; min-width:0; }
.share-url-row .btn{ margin-top:0; flex-shrink:0; white-space:nowrap; padding:12px 16px; }
.share-ya{ margin-top:18px; display:flex; justify-content:center; }
.tab-panel[style*="display:none"]{ display:none !important; }
.orders-table-scroll{ overflow:auto; }
.profile-head{ align-items:flex-start; }

/* Live cart HTML (CART_tpl / fix.js) inside v2 drawer */
.cart-drawer .text{ font-size:13.5px; line-height:1.4; }
.cart-drawer .text-lg{ font-size:15px; font-weight:600; }
.cart-drawer .title{ font-size:20px; font-weight:700; line-height:1.25; color:var(--ink); }
.cart-drawer .fw-600{ font-weight:600; }
.cart-drawer .fw-300{ font-weight:400; }
.cart-drawer .text-darkgray{ color:var(--muted); }
.cart-drawer .text-black{ color:var(--ink); }
.cart-drawer .text-uppercase{ text-transform:uppercase; }
.cart-drawer button:not(.btn){ background:none; border:none; padding:0; color:inherit; }

.cart-drawer .cc-products{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow:hidden; }
.cart-drawer .cc-products__controls{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0 14px; border-bottom:1px solid #F1F1F1; flex-wrap:wrap;
}
.cart-drawer .product-cb{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; position:relative; }
.cart-drawer .product-cb__hidden{ position:absolute; opacity:0; pointer-events:none; }
.cart-drawer .product-cb__visible{
  width:20px; height:20px; border:1.5px solid var(--border); border-radius:5px;
  position:relative; flex-shrink:0; background:#fff;
}
.cart-drawer .product-cb__hidden:checked + .product-cb__visible{
  background:var(--violet); border-color:var(--violet);
}
.cart-drawer .product-cb__hidden:checked + .product-cb__visible::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.cart-drawer .cabinet-clear-cart{
  display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:6px 10px;
  background:rgba(226,76,76,.12); cursor:pointer;
}
.cart-drawer .cabinet-clear-cart:hover{ background:#E24C4C; }
.cart-drawer .cabinet-clear-cart:hover span{ color:#fff; }
.cart-drawer .cabinet-clear-cart:hover path{ fill:#fff; }
.cart-drawer .cabinet-clear-cart svg{ width:18px; height:18px; }

.cart-drawer .cc-products__products-list{
  display:flex; flex-direction:column; flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.cart-drawer .cc-product-card{
  display:flex; align-items:center; gap:10px; padding:16px 0;
  border-bottom:1px solid #F1F1F1; position:relative;
}
.cart-drawer .cc-product-card::before{ display:none; }
.cart-drawer .cc-product-card__content{
  flex:1; min-width:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
.cart-drawer .cc-product-card__top{
  display:flex; flex-direction:row; align-items:flex-start; gap:12px; text-align:left;
}
.cart-drawer .cc-product-card__img{
  width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden;
  background:#F5F5F5; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.cart-drawer .cc-product-card__img img{ width:100%; height:100%; object-fit:cover; max-width:none; }
.cart-drawer .cc-product-card__text-block{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.cart-drawer .cc-product-card__text-block p{ margin:0; overflow-wrap:anywhere; }
.cart-drawer .cc-product-card__bottom{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px;
}
.cart-drawer .cc-product-card__b-left-group,
.cart-drawer .cc-product-card__b-right-group{
  display:flex; align-items:center; gap:6px; order:unset; justify-content:flex-start; flex-wrap:nowrap;
}
.cart-drawer .cc-product-card__remove,
.cart-drawer .cc-product-card__counts-plus,
.cart-drawer .cc-product-card__counts-minus{
  width:32px; height:32px; border-radius:10px; background:#F1F1F1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.cart-drawer .cc-product-card__remove:hover,
.cart-drawer .cc-product-card__counts-plus:hover,
.cart-drawer .cc-product-card__counts-minus:hover{ background:#E4E4E4; }
.cart-drawer .cc-product-card__count{
  min-width:28px; text-align:center; font-weight:700; font-size:14px; color:var(--ink);
  background:none; padding:0; border-radius:0;
}

.cart-drawer .cc-products__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:16px 0 8px;
}
.cart-drawer .cc-products__total p{ margin:0; }
.cart-drawer .price_in_usd, .cart-drawer .price_in_eur, .cart-drawer .price_in_rub{
  font-size:13px; font-weight:500; color:var(--muted);
}
.cart-drawer .cart-checkout-breakdown{ width:100%; margin-top:4px; }
.cart-drawer .cart-checkout-breakdown__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.cart-drawer .cart-checkout-breakdown__row--total{ margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
.cart-drawer .v2-cart-checkout__total{ padding-top:8px; padding-bottom:4px; }
.cart-drawer.checkout-mode .cart-pay-btn{ margin-top:8px; }
.cart-drawer .cart-checkout-btn{ margin-top:8px; }

.cart-drawer .v2-cart-checkout{ margin-top:0; width:100%; box-sizing:border-box; }
.cart-drawer .v2-cart-checkout .cart-back-btn{ padding:8px 0 18px; }
.cart-drawer .checkout-form{ padding:0; margin:0; overflow:visible; flex:none; width:100%; }
.cart-drawer .checkout-form .field-label{
  margin:0 0 6px; font-size:13px; font-weight:700; display:block; color:var(--ink);
}
.cart-drawer .checkout-form .field{
  width:100%; max-width:100%; display:block; box-sizing:border-box;
  margin:0 0 14px; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
}
.cart-drawer .st-input-wrap{ display:flex; flex-direction:column; gap:6px; width:100%; }
.cart-drawer .st-input-wrap > span{ font-size:13px; font-weight:700; color:var(--ink); }
.cart-drawer .st-input{
  width:100%; max-width:100%; display:block; box-sizing:border-box;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; font:inherit; color:var(--ink); background:#fff;
}
.cart-drawer textarea.st-input{ min-height:88px; height:auto; resize:vertical; }
.cart-drawer .order_comment{ width:100%; }
.cart-drawer .order_delivery,
.cart-drawer .order_anonymouse{ margin-top:4px !important; }
.cart-drawer .order_payment{ margin-top:8px !important; font-size:14px !important; }
.cart-drawer .st-form__field-switch-item{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0; border-bottom:1px solid #F1F1F1;
}
.cart-drawer .st-form__field-switch-item::before,
.cart-drawer .st-form__field-switch-item::after{ display:none; }
.cart-drawer .st-form__fsi-text-block{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-drawer .st-form__fsi-text-block p{ margin:0; }
.cart-drawer .order_payment label{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; margin:8px 0; cursor:pointer; }
.cart-drawer .grad-switch{ width:48px; height:28px; position:relative; flex-shrink:0; }
.cart-drawer .grad-switch__hidden{ display:none; }
.cart-drawer .grad-switch__bg{
  position:absolute; inset:0; border-radius:999px; background:#D9D9D9; cursor:pointer;
}
.cart-drawer .grad-switch__bg::after{
  content:''; position:absolute; width:22px; height:22px; left:3px; top:3px;
  border-radius:50%; background:#fff; transition:left .2s var(--ease); box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.cart-drawer .grad-switch__hidden:checked + .grad-switch__bg{ background:var(--gradient); }
.cart-drawer .grad-switch__hidden:checked + .grad-switch__bg::after{ left:23px; }
.cart-drawer .cc-btn-order{ margin-top:16px; }
.cart-drawer .cart-pay-btn{ margin-top:16px; width:100%; }
.orders-pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:28px; }
.orders-pager a, .orders-pager span{
  min-width:40px; height:40px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); font-weight:700; font-size:14px; border:1.5px solid var(--border); background:#fff;
}
.orders-pager a:hover{ border-color:var(--violet); color:var(--violet); }
.orders-pager .is-active{ background:var(--gradient); color:#fff; border-color:transparent; }
.orders-pager-gap{ border:none; background:transparent; min-width:auto; padding:0 4px; color:var(--muted); }
.price-dual{ display:flex; flex-direction:column; gap:6px; }
.price-dual-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted); }
.price-dual-row strong{ color:#17161A; font-weight:800; }
.price-dual input[type=range]{ width:100%; accent-color:#9B0CF9; margin:0; }
.filterable-area.is-loading{ opacity:.45; pointer-events:none; transition:opacity .15s; }
.search-submit:hover,
.search-submit:active{ transform:translateY(-50%); }
.profile-social a img{ width:16px; height:16px; display:block; }
.profile-social a:hover{ filter:brightness(.25); }
.pay-unavailable{ min-height:70vh; display:flex; align-items:center; }
.pay-unavailable .empty-state,
.pay-result .empty-state{ max-width:480px; margin:0 auto; }
.pay-unavailable .empty-state p,
.pay-result .empty-state p{ line-height:1.6; }
.pay-result__glyph{ font-size:28px; font-weight:700; }
.pay-result__glyph--ok{ background:#E8F8F0; color:#00B67A; }
.pay-result__glyph--fail{ background:#FCEAEA; color:#E24C4C; }
.pay-result .btn-outline{ display:inline-flex; align-items:center; justify-content:center; }
.pay-result .text-link{ color:var(--violet); font-weight:600; font-size:14px; text-decoration:none; }
.pay-result .text-link:hover{ text-decoration:underline; }

.cart-payment-label--with-info{
  display:block;
  padding-right:4px;
}
.cart-payment-label__row{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
}
.cart-payment-label__text{ min-width:0; }
.cart-fee-info{
  position:relative;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:help;
  outline:none;
}
.cart-fee-info__icon{ display:block; }
.cart-fee-info:hover,
.cart-fee-info:focus-visible{ color:var(--violet); }
.cart-fee-info__popover{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:30;
  min-width:220px;
  max-width:min(280px, 70vw);
  padding:10px 12px;
  border-radius:10px;
  background:#2B2A30;
  color:#F5F5F7;
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, visibility .15s ease;
}
.cart-fee-info__popover::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-5px;
  width:10px;
  height:10px;
  margin-left:-5px;
  background:#2B2A30;
  transform:rotate(45deg);
  border-radius:1px;
}
.cart-fee-info:hover .cart-fee-info__popover,
.cart-fee-info:focus-visible .cart-fee-info__popover,
.cart-fee-info:focus-within .cart-fee-info__popover{
  opacity:1;
  visibility:visible;
}
.cart-fee-info__line{ display:block; }
.cart-fee-info__line + .cart-fee-info__line{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.12); }