/* ============================================================
   Lirona B2B — Brand layer on top of Obra shadcn/ui tokens
   Clean professional wholesale, refined lingerie warmth.
   ============================================================ */

:root {
  /* Brand — rosewood / raspberry, used sparingly over neutrals */
  --brand-50:  #FBF1F4;
  --brand-100: #F6E0E8;
  --brand-200: #ECC1D1;
  --brand-300: #DC93AE;
  --brand-400: #C75E84;
  --brand-500: #A23E63;   /* core */
  --brand-600: #8A3252;
  --brand-700: #6F2842;
  --brand-800: #561F33;
  --brand-900: #3E1626;

  /* tinted neutral surface (very subtle warm) */
  --surface: #FAFAFA;
  --surface-warm: #FBF7F8;

  --ok-600: #047857;
  --warn-600: #B45309;

  /* layout */
  --maxw: 1320px;
  --header-h: 64px;
  --sub-h: 48px;
}

html.dark {
  --surface: #0A0A0A;
  --surface-warm: #120D0F;
  --brand-500: #D86A90;
  --brand-600: #C75E84;
}

/* ── Base resets specific to this app ─────────────────────────── */
body { background: var(--surface); color: var(--foreground-alt); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
*::selection { background: var(--brand-100); color: var(--brand-700); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px){ .wrap { padding: 0 16px; } }

.mut { color: var(--muted-foreground); }
.fg  { color: var(--foreground); }
.brandc { color: var(--brand-500); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.mono { font-family: var(--font-mono); }

/* eyebrow / overline */
.eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.eyebrow.brand { color: var(--brand-500); }

/* ── Brand buttons (extends .btn from tokens) ─────────────────── */
.btn-brand { background: var(--brand-500); color: #fff; }
.btn-brand:hover { background: var(--brand-600); }
.btn-brand-soft { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-brand-soft:hover { background: var(--brand-100); }
.btn-xl { height: 48px; padding: 0 22px; font-size: var(--text-md); border-radius: var(--radius-md); }
.btn-block { width: 100%; }

/* ── Logo wordmark ────────────────────────────────────────────── */
.logo { display:inline-flex; align-items:center; gap:10px; user-select:none; }
.logo .mark {
  width:30px; height:30px; border-radius:9px;
  background: var(--brand-500); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 16px var(--font-sans); letter-spacing:-.02em;
  box-shadow: var(--shadow-xs);
}
.logo .word {
  font:600 19px var(--font-sans); letter-spacing:.04em;
  color: var(--foreground); text-transform: uppercase;
}
.logo .word b { font-weight:700; }
.logo .b2b {
  font:600 9px var(--font-sans); letter-spacing:.16em;
  color: var(--brand-500); border:1px solid var(--brand-200);
  padding:2px 5px; border-radius:5px; text-transform:uppercase;
}

/* ── App header ───────────────────────────────────────────────── */
.appbar { position: sticky; top:0; z-index:40; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
html.dark .appbar { background: rgba(10,10,10,.9); }
.appbar .row { height: var(--header-h); display:flex; align-items:center; gap:20px; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a {
  font:500 13.5px var(--font-sans); color:var(--foreground-alt);
  padding:7px 11px; border-radius:7px; cursor:pointer; transition: background .12s,color .12s; white-space:nowrap;
}
.nav a:hover { background: var(--neutral-100); color:var(--foreground); }
.nav a.active { color: var(--foreground); font-weight:600; }
.appbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* search */
.search { position:relative; }
.search > svg, .search > i { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted-foreground); pointer-events:none; }
.search input { padding-left:34px; }

/* icon button w/ badge */
.iconbtn { position:relative; }
.iconbtn .dot { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--brand-500); color:#fff; font:600 10px var(--font-mono); display:flex; align-items:center; justify-content:center; border:2px solid var(--background); }

/* language pill */
.lang { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; height:32px; }
.lang a, .lang button { display:inline-flex; align-items:center; justify-content:center; height:100%; min-width:34px; padding:0 10px; background:transparent; border:0; font:600 11px var(--font-sans); color:var(--muted-foreground); cursor:pointer; text-decoration:none; letter-spacing:.02em; transition:background .12s,color .12s; }
.lang a:hover, .lang button:hover { color:var(--foreground); }
.lang a + a { border-left:1px solid var(--border); }
.lang a.on, .lang button.on { background:var(--brand-500); color:#fff; }

/* ── Filter / catalog rail ────────────────────────────────────── */
.fcard { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); }
html.dark .fcard { background: var(--card); }
.fsec { padding:16px 18px; border-bottom:1px solid var(--border); }
.fsec:last-child { border-bottom:0; }
.fsec h4 { margin:0 0 12px; font:600 12px var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); }
.check { display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; font:450 13.5px var(--font-sans); color:var(--foreground-alt); }
.check:hover { color:var(--foreground); }
.check .box { width:16px; height:16px; border:1.5px solid var(--neutral-300); border-radius:5px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition: all .12s; }
.check input { position:absolute; opacity:0; pointer-events:none; }
.check input:checked + .box { background:var(--brand-500); border-color:var(--brand-500); }
.check input:checked + .box svg { opacity:1; }
.check .box svg { width:11px; height:11px; color:#fff; opacity:0; stroke-width:3.5; }
.check .cnt { margin-left:auto; font:500 11px var(--font-mono); color:var(--muted-foreground); }

/* color swatch filter */
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.sw { width:24px; height:24px; border-radius:999px; border:1px solid rgba(0,0,0,.12); cursor:pointer; position:relative; }
.sw.on { box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--brand-500); }

/* ── Product card ─────────────────────────────────────────────── */
.pgrid { display:grid; gap:18px; grid-template-columns: repeat(4, 1fr); }
@media (max-width:1100px){ .pgrid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .pgrid{ grid-template-columns:repeat(2,1fr);} }

.pcard { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .15s, border-color .15s, transform .15s; }
html.dark .pcard { background: var(--card); }
.pcard:hover { box-shadow: var(--shadow-md); border-color: var(--neutral-300); }
.pthumb { position:relative; aspect-ratio: 3/3.6; background: var(--surface-warm); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pthumb .glyph { width:46px; height:46px; color: var(--brand-300); stroke-width:1.2; }
.pthumb .code { position:absolute; bottom:10px; left:10px; font:600 10px var(--font-mono); letter-spacing:.04em; color:var(--muted-foreground); background:rgba(255,255,255,.7); padding:2px 6px; border-radius:5px; }
html.dark .pthumb .code{ background: rgba(0,0,0,.4);}
.pbadges { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.pflag { font:600 10px var(--font-sans); letter-spacing:.03em; text-transform:uppercase; padding:3px 7px; border-radius:999px; }
.pflag.new { background:var(--brand-500); color:#fff; }
.pflag.stock { background:#fff; color:var(--ok-600); border:1px solid var(--border); }
.pflag.low { background:#fff; color:var(--warn-600); border:1px solid var(--border); }
.pfav { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted-foreground); transition: all .12s; }
.pfav:hover { color:var(--brand-500); }
.pfav.on { color:var(--brand-500); background:var(--brand-50); border-color:var(--brand-200); }
.pfav svg { width:15px; height:15px; }
.pfav.on svg { fill: currentColor; }

.pbody { padding:13px 14px 14px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pcat { font:600 10px var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-500); }
.pname { font:600 14px var(--font-sans); color:var(--foreground); letter-spacing:-.01em; line-height:1.3; }
.pcolors { display:flex; align-items:center; gap:5px; }
.pcolors .d { width:13px; height:13px; border-radius:999px; border:1px solid rgba(0,0,0,.12); }
.pcolors .more { font:500 11px var(--font-mono); color:var(--muted-foreground); }
.pseries { display:flex; align-items:center; gap:6px; font:500 11.5px var(--font-sans); color:var(--muted-foreground); }
.pseries svg { width:13px; height:13px; }
.pmeta { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.pprice .u { font:500 11px var(--font-sans); color:var(--muted-foreground); }
.pprice .v { font:700 17px var(--font-sans); color:var(--foreground); letter-spacing:-.02em; }
.pprice .v small { font-weight:500; font-size:11px; color:var(--muted-foreground); }
.pprice .series-price { font:500 11px var(--font-sans); color:var(--muted-foreground); }
.padd { flex:0 0 auto; width:38px; height:38px; border-radius:var(--radius); background:var(--brand-500); color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background .12s, transform .08s; }
.padd:hover { background:var(--brand-600); }
.padd:active { transform: scale(.94); }
.padd svg { width:17px; height:17px; }

/* list view variant */
.pgrid.list { grid-template-columns: 1fr; gap:10px; }
.pgrid.list .pcard { flex-direction:row; align-items:stretch; }
.pgrid.list .pthumb { width:120px; aspect-ratio:auto; flex:0 0 120px; }
.pgrid.list .pbody { flex-direction:row; align-items:center; gap:18px; }
.pgrid.list .pname-wrap { width:230px; }
.pgrid.list .pmeta { margin:0 0 0 auto; }

/* ── Section headers ──────────────────────────────────────────── */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sec-head h2 { margin:0; font:700 22px var(--font-sans); letter-spacing:-.02em; color:var(--foreground); }
.sec-head a.more { font:600 13px var(--font-sans); color:var(--brand-500); display:inline-flex; align-items:center; gap:4px; }
.sec-head a.more svg { width:15px; height:15px; }

/* chips */
.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.chip2 { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:#fff; font:500 13px var(--font-sans); color:var(--foreground-alt); cursor:pointer; transition: all .12s; white-space:nowrap; }
html.dark .chip2{ background: var(--card); }
.chip2:hover { border-color:var(--neutral-400); color:var(--foreground); }
.chip2.on { background:var(--brand-500); border-color:var(--brand-500); color:#fff; }
.chip2 svg { width:15px; height:15px; }

/* ── Cart drawer ──────────────────────────────────────────────── */
.drawer-back { position:fixed; inset:0; background:rgba(10,10,10,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; }
.drawer-back.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:#fff; border-left:1px solid var(--border); box-shadow:var(--shadow-xl); transform:translateX(100%); transition:transform .25s ease; z-index:61; display:flex; flex-direction:column; }
html.dark .drawer{ background: var(--card); }
.drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer-head h3 { margin:0; font:600 16px var(--font-sans); color:var(--foreground); }
.drawer-body { flex:1; overflow:auto; padding:8px 20px; }
.drawer-foot { border-top:1px solid var(--border); padding:18px 20px; }
.citem { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.citem .th { width:54px; height:64px; border-radius:8px; background:var(--surface-warm); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--brand-300); }
.citem .th svg { width:22px; height:22px; }

/* ── Toast ────────────────────────────────────────────────────── */
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--neutral-900); color:#fff; font:500 13px var(--font-sans); padding:11px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition: all .25s; z-index:80; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:16px; height:16px; color:var(--brand-300); }

/* ── Footer ───────────────────────────────────────────────────── */
.footer { border-top:1px solid var(--border); background:#fff; margin-top:64px; }
html.dark .footer{ background: var(--card); }
.footer .cols { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding:48px 0 36px; }
@media (max-width:760px){ .footer .cols{ grid-template-columns:1fr 1fr; gap:28px; } }
.footer h5 { margin:0 0 14px; font:600 12px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--foreground); }
.footer a { display:block; font:450 13.5px var(--font-sans); color:var(--muted-foreground); padding:5px 0; }
.footer a:hover { color:var(--brand-500); }
.footer .bottom { border-top:1px solid var(--border); padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font:450 12.5px var(--font-sans); color:var(--muted-foreground); }

/* ── Tweaks panel (custom, minimal) ───────────────────────────── */
.tweaks { position:fixed; bottom:18px; right:18px; z-index:70; width:248px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); display:none; overflow:hidden; }
.tweaks.show { display:block; }
.tweaks .th { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); font:600 12px var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--foreground); }
.tweaks .tb { padding:12px 14px; display:flex; flex-direction:column; gap:14px; }
.tweaks .tg label { display:block; font:600 11px var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:7px; }
.seg { display:flex; gap:6px; }
.seg button { flex:1; height:30px; border:1px solid var(--border); background:#fff; border-radius:7px; font:500 12px var(--font-sans); color:var(--foreground-alt); cursor:pointer; }
.seg button.on { background:var(--brand-500); border-color:var(--brand-500); color:#fff; }
.tw-swatches { display:flex; gap:8px; }
.tw-swatches .s { width:28px; height:28px; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.tw-swatches .s.on { border-color: var(--foreground); }
.tw-toggle-btn { position:fixed; bottom:18px; right:18px; z-index:69; height:38px; padding:0 13px; border-radius:999px; background:var(--neutral-900); color:#fff; border:0; font:600 12px var(--font-sans); display:inline-flex; align-items:center; gap:7px; cursor:pointer; box-shadow:var(--shadow-lg); }
.tw-toggle-btn svg{ width:15px; height:15px; }

/* tables (dashboard reuse) */
.ltable { width:100%; border-collapse:collapse; font:450 13px var(--font-sans); }
.ltable th { text-align:left; padding:11px 16px; font:600 11px var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); background:var(--surface); border-bottom:1px solid var(--border); }
.ltable td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--foreground-alt); }
.ltable tr:last-child td { border-bottom:0; }
.ltable td.s { color:var(--foreground); font-weight:500; }

.stat { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font:500 11px var(--font-sans); border:1px solid var(--border); background:#fff; color:var(--foreground-alt); }
html.dark .stat{ background: var(--card); }
.stat::before { content:""; width:6px; height:6px; border-radius:999px; background:currentColor; }
.stat.green { color:var(--ok-600); }
.stat.amber { color:var(--warn-600); }
.stat.blue { color:var(--blue-600); }
.stat.red { color:var(--destructive); }
.stat.gray { color:var(--muted-foreground); }

.hide { display:none !important; }

/* ── Density ──────────────────────────────────────────────────── */
html[data-density="compact"] .pgrid { gap:12px; }
html[data-density="compact"] .pbody { padding:10px 11px 11px; gap:6px; }
html[data-density="compact"] .pname { font-size:13px; }
html[data-density="compact"] .pprice .v { font-size:15px; }
html[data-density="compact"] .pthumb { aspect-ratio:3/3.3; }
html[data-density="compact"] .padd { width:34px; height:34px; }
html[data-density="compact"] .pgrid { grid-template-columns: repeat(5,1fr); }
@media (max-width:1100px){ html[data-density="compact"] .pgrid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ html[data-density="compact"] .pgrid{ grid-template-columns:repeat(2,1fr);} }

/* ── Mobile chrome ────────────────────────────────────────────── */
@media (max-width: 920px){
  .lr-desktop { display:none !important; }
}
@media (min-width: 921px){
  .lr-mobile { display:none !important; }
}