:root {
  --orange: #f27a24;
  --cyan: #10b8d8;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #d9e2ee;
  --soft: #f8fafc;
  --white: #ffffff;
  --dark: #07111f;
  --navy: #10233c;
  --green: #16a36a;
  --danger: #b91c1c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: #dbe4ee; }
html, body { max-width: 100%; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 26px; color: #cbd5e1; background: var(--dark); font-size: 12px; }
.topbar nav, .header-actions, .main-nav, .actions, .cookie-actions { display: flex; gap: 10px; align-items: center; }
.header-actions { flex: 0 0 auto; }
.topbar a { margin-left: 14px; }
.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(220px, 264px) minmax(240px, 1fr) auto; align-items: center; gap: 18px; max-width: 100%; padding: 13px 26px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(15,23,42,.15)); }
.brand b { display: block; font-size: 20px; line-height: 1; text-transform: uppercase; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.search { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 46px; overflow: hidden; border: 2px solid #0e7490; border-radius: 6px; background: #f8fafc; }
.search input { width: 100%; height: 100%; border: 0; padding: 0 14px; outline: 0; background: transparent; color: var(--ink); font-weight: 700; }
.search button { height: 100%; border: 0; padding: 0 18px; color: #fff; background: #0e7490; font-weight: 900; }
.head-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; }
.head-btn.cart { color: #fff; background: var(--orange); border-color: var(--orange); }
#cartCount { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; color: var(--orange); background: #fff; font-size: 12px; }
.main-nav { display: flex; width: 100%; max-width: 100vw; gap: 2px; padding: 0 26px; overflow: visible; background: var(--navy); }
.main-nav a { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 13px; color: #eaf6ff; font-size: 13px; font-weight: 900; white-space: nowrap; border-bottom: 3px solid transparent; }
.main-nav a.active { color: #fff; border-color: var(--orange); background: rgba(255,255,255,.06); }
.more-families { position: relative; flex: 0 0 auto; }
.more-families button { display: inline-flex; align-items: center; min-height: 44px; border: 0; border-bottom: 3px solid transparent; padding: 0 14px; color: #fff; background: rgba(242,122,36,.95); font-weight: 900; cursor: pointer; white-space: nowrap; }
.more-families button:after { content: "▾"; margin-left: 8px; font-size: 11px; }
.more-families button.active { border-color: #fff; }
.more-menu { position: absolute; top: 100%; right: 0; z-index: 40; display: none; min-width: 260px; padding: 8px; border: 1px solid rgba(148,163,184,.28); border-radius: 0 0 8px 8px; background: #10233c; box-shadow: 0 18px 38px rgba(15,23,42,.28); }
.more-families:hover .more-menu, .more-families:focus-within .more-menu { display: grid; gap: 4px; }
.more-menu a { display: flex; min-height: 38px; border-bottom: 0; border-radius: 6px; padding: 0 10px; background: rgba(255,255,255,.04); }
.more-menu a:hover, .more-menu a.active { background: rgba(242,122,36,.22); }
.app { max-width: 1240px; margin: 0 auto; padding: 28px; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: center; padding: 44px 34px; color: #fff; border-radius: 8px; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.24), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.30), transparent 30%), linear-gradient(112deg, #0a2a44, #1f6d90 62%, #5fb3cf); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.hero:before { content: ""; position: absolute; left: 50%; top: 26%; width: 210px; height: 210px; opacity: .30; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 22px rgba(0,0,0,.24)); }
.hero > * { position: relative; z-index: 1; }
.kicker { display: inline-flex; margin-bottom: 12px; padding: 7px 10px; color: #fff5eb; background: rgba(242,122,36,.16); border: 1px solid rgba(242,122,36,.42); border-radius: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
.hero h1 { max-width: 720px; margin: 0; font-size: 42px; line-height: 1.08; }
.hero p { max-width: 720px; margin: 12px 0 0; color: #e0f2fe; font-size: 16px; line-height: 1.55; }
.hero-card { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 18px; background: rgba(15,23,42,.26); backdrop-filter: blur(8px); }
.hero-card b { display: block; margin-bottom: 12px; font-size: 18px; }
.solution-list { display: grid; gap: 10px; }
.solution-list span { display: block; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.08); font-weight: 800; }
.home-hero { position: relative; overflow: hidden; min-height: 620px; padding: 28px 34px 24px; color: #f8fafc; border-radius: 8px; background: radial-gradient(circle at 84% 18%, rgba(242,122,36,.18), transparent 25%), radial-gradient(circle at 68% 75%, rgba(16,184,216,.24), transparent 28%), linear-gradient(112deg, rgba(10,42,68,.98), rgba(18,75,111,.96) 55%, rgba(78,162,190,.96)), repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 16px); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.home-hero:before { content: ""; position: absolute; right: -140px; top: -220px; width: 660px; height: 660px; border-radius: 50%; background: radial-gradient(circle, transparent 0 44%, rgba(16,184,216,.10) 45% 45.4%, transparent 46%), radial-gradient(circle, transparent 0 62%, rgba(242,122,36,.12) 63% 63.3%, transparent 64%); pointer-events: none; }
.home-hero:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(90deg, transparent, rgba(16,184,216,.18), transparent), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 86px); opacity: .65; pointer-events: none; }
.home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.94fr) minmax(410px,1fr); gap: 28px; align-items: start; }
.home-hero h1 { max-width: 660px; margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: 0; }
.home-hero p { max-width: 650px; margin: 16px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.home-actions .secondary { color: #e0f2fe; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.family-panel { margin-top: 20px; padding: 12px; border: 1px solid rgba(148,163,184,.2); border-radius: 8px; background: rgba(7,17,31,.28); }
.family-panel-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #eaf6ff; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.family-panel-title span { color: #cbd5e1; font-weight: 700; text-transform: none; }
.hero-family-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.hero-family-strip a { display: flex; align-items: center; min-height: 40px; padding: 8px 9px; color: #eaf6ff; background: rgba(15,23,42,.42); border: 1px solid rgba(148,163,184,.24); border-radius: 7px; font-size: 11px; font-weight: 900; line-height: 1.15; }
.hero-family-strip span { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(242,122,36,.72); flex: 0 0 auto; }
.right-stack { display: grid; gap: 10px; align-content: start; }
.solution-window { position: relative; overflow: hidden; padding: 18px; min-height: 286px; border: 1px solid rgba(148,163,184,.25); border-radius: 8px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.045)), rgba(255,255,255,.07); box-shadow: 0 24px 62px rgba(0,0,0,.28); }
.solution-window:before { content: ""; position: absolute; left: 34px; right: 34px; top: 50px; height: 2px; background: linear-gradient(90deg, transparent, rgba(16,184,216,.62), rgba(242,122,36,.55), transparent); box-shadow: 0 82px 0 rgba(16,184,216,.18), 0 164px 0 rgba(242,122,36,.16); }
.kit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.kit-item { position: relative; min-height: 76px; padding: 12px 10px 11px 48px; border: 1px solid rgba(148,163,184,.22); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04)), rgba(15,23,42,.42); box-shadow: 0 12px 26px rgba(0,0,0,.15); }
.kit-item:before { content: ""; position: absolute; left: 12px; top: 15px; width: 25px; height: 25px; border-radius: 7px; background: linear-gradient(135deg, rgba(16,184,216,.96), rgba(11,111,207,.9)); box-shadow: 0 0 18px rgba(16,184,216,.25); }
.kit-item:after { content: ""; position: absolute; left: 20px; top: 23px; width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.86); }
.kit-item:nth-child(2):before, .kit-item:nth-child(4):before { background: linear-gradient(135deg, rgba(242,122,36,.96), rgba(181,83,22,.88)); }
.kit-item:nth-child(5):before { background: linear-gradient(135deg, rgba(22,163,106,.96), rgba(12,117,77,.9)); }
.kit-item b { display: block; margin-bottom: 5px; color: #fff; font-size: 13px; }
.kit-item small { display: block; color: #cbd5e1; font-size: 11px; line-height: 1.35; }
.product-slider { position: relative; z-index: 1; overflow: hidden; min-height: 88px; padding: 9px 0; border: 1px solid rgba(148,163,184,.24); border-radius: 8px; background: rgba(7,17,31,.44); }
.slider-title { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 7px; color: #eaf6ff; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.slider-title span { color: #cbd5e1; font-size: 11px; font-weight: 700; text-transform: none; }
.track { display: flex; gap: 10px; width: max-content; padding-left: 12px; animation: slide-right 34s linear infinite; }
.track.reverse { animation: slide-left 36s linear infinite; }
.product-chip { display: grid; grid-template-columns: 82px 172px; align-items: center; gap: 11px; width: 282px; min-height: 82px; padding: 8px 10px; color: #eaf6ff; background: rgba(255,255,255,.075); border: 1px solid rgba(148,163,184,.20); border-radius: 7px; flex: 0 0 auto; }
.product-thumb { position: relative; display: grid; place-items: center; width: 82px; height: 64px; overflow: hidden; color: #fff; background: radial-gradient(circle at 25% 22%, rgba(255,255,255,.28), transparent 26%), linear-gradient(135deg, rgba(16,184,216,.88), rgba(11,111,207,.9)); border-radius: 7px; font-size: 11px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.visual-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.visual-thumb.with-image:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,17,31,.76)); }
.visual-thumb em { position: absolute; left: 5px; bottom: 4px; z-index: 1; min-width: 28px; padding: 2px 5px; border-radius: 999px; color: #fff; background: rgba(7,17,31,.68); font-style: normal; font-size: 9px; font-weight: 900; text-align: center; letter-spacing: .02em; }
.thumb-icon { font-size: 23px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.22); }
.product-chip:nth-child(2n) .product-thumb { background: linear-gradient(135deg, rgba(242,122,36,.92), rgba(181,83,22,.9)); }
.product-chip b { display: block; margin-bottom: 5px; font-size: 13px; line-height: 1.18; }
.product-chip small { display: block; color: #cbd5e1; font-size: 12px; line-height: 1.2; }
@keyframes slide-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.section { margin-top: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); overflow: hidden; }
.section-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid #e2e8f0; background: var(--soft); }
.section-head h2 { margin: 0; font-size: 22px; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.family-tools { display: grid; gap: 12px; margin-top: 18px; }
.subfamily-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.subfamily-strip a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #f8fafc; font-size: 13px; font-weight: 900; }
.subfamily-strip a:hover { color: #fff; border-color: var(--navy); background: var(--navy); }
.filter-bar { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.filter-bar button, .filter-bar select { min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 900; }
.filter-bar button.active { color: #fff; border-color: #0e7490; background: #0e7490; }
.filter-bar select { margin-left: auto; min-width: 190px; }
.fiber-family-hero { position: relative; overflow: hidden; padding: 34px; color: #f8fafc; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 86% 20%, rgba(242,122,36,.16), transparent 25%), radial-gradient(circle at 72% 76%, rgba(16,184,216,.24), transparent 30%), linear-gradient(112deg, rgba(10,42,68,.98), rgba(18,75,111,.96) 55%, rgba(34,110,151,.94)); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.fiber-family-hero:before { content: ""; position: absolute; right: -140px; top: -230px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, transparent 0 43%, rgba(16,184,216,.12) 44% 44.4%, transparent 45%), radial-gradient(circle, transparent 0 62%, rgba(242,122,36,.11) 63% 63.4%, transparent 64%); pointer-events: none; }
.fiber-brand-mark { position: absolute; left: 50%; top: 16px; z-index: 1; width: 116px; height: 116px; object-fit: contain; opacity: .95; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.fiber-family-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 30px; align-items: center; }
.fiber-family-hero h1 { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: 0; }
.fiber-family-hero p { max-width: 710px; margin: 15px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.fiber-family-card { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 18px; background: rgba(15,23,42,.30); backdrop-filter: blur(8px); }
.fiber-family-card b { display: block; margin-bottom: 12px; font-size: 18px; }
.fiber-family-card a { display: block; min-height: 40px; margin-top: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 10px; background: rgba(255,255,255,.08); color: #eaf6ff; font-weight: 900; }
.fiber-product-slider { position: relative; z-index: 1; overflow: hidden; margin-top: 22px; padding: 10px 0; border: 1px solid rgba(148,163,184,.24); border-radius: 8px; background: rgba(7,17,31,.34); }
.fiber-slider-title { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px 8px; color: #eaf6ff; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.fiber-slider-title span { color: #cbd5e1; font-size: 11px; font-weight: 700; text-transform: none; }
.fiber-track { display: flex; gap: 10px; width: max-content; padding-left: 12px; animation: slide-left 30s linear infinite; }
.fiber-product-chip { display: grid; grid-template-columns: 42px 160px; align-items: center; gap: 10px; width: 222px; min-height: 54px; padding: 8px; color: #eaf6ff; background: rgba(255,255,255,.075); border: 1px solid rgba(148,163,184,.20); border-radius: 7px; flex: 0 0 auto; }
.fiber-product-thumb { display: grid; place-items: center; width: 42px; height: 38px; color: #fff; background: linear-gradient(135deg, rgba(16,184,216,.88), rgba(11,111,207,.9)); border-radius: 6px; font-size: 11px; font-weight: 900; }
.fiber-product-chip:nth-child(2n) .fiber-product-thumb { background: linear-gradient(135deg, rgba(242,122,36,.92), rgba(181,83,22,.9)); }
.fiber-product-chip b { display: block; margin-bottom: 3px; font-size: 12px; line-height: 1.18; }
.fiber-product-chip small { display: block; color: #cbd5e1; font-size: 11px; line-height: 1.2; }
.fiber-family-tools { display: grid; gap: 12px; padding: 18px 0 0; }
.fiber-subfamilies { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.fiber-subfamilies a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #f8fafc; font-size: 13px; font-weight: 900; }
.fiber-subfamilies a:hover { color: #fff; border-color: var(--navy); background: var(--navy); }
.solutions-hero { padding: 34px; color: #f8fafc; border-radius: 8px; background: linear-gradient(112deg, #0a2a44, #155f7d 62%, #2b8dac); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.solutions-hero h1 { max-width: 780px; margin: 0; font-size: 40px; line-height: 1.08; }
.solutions-hero p { max-width: 850px; margin: 14px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.solutions-page-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.solution-card { position: relative; min-height: 245px; padding: 22px; border: 1px solid #cfe0ee; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.06); }
.solution-card > span { display: inline-grid; place-items: center; min-width: 46px; height: 42px; margin-bottom: 14px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #0e7490, #10233c); font-weight: 900; }
.solution-card h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.solution-card p { margin: 10px 0 0; color: #41516a; font-size: 15px; line-height: 1.48; }
.solution-family-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.solution-family-list b { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 999px; color: #075985; background: #e0f2fe; font-size: 11px; }
.solution-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.solution-card.support { background: linear-gradient(135deg, #fff7ed, #ffffff); border-color: #fed7aa; }
.solution-card.support > span { background: linear-gradient(135deg, #f27a24, #b45309); }
.fiber-family-content { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; margin-top: 18px; }
.fiber-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 18px; }
.fiber-product-grid .product-card, .fiber-product-grid .catalog-card { min-height: 388px; }
.fiber-side-links { display: grid; gap: 8px; }
.fiber-side-links a { display: block; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #f8fafc; }
.fiber-side-links b { display: block; font-size: 14px; }
.fiber-side-links span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.import-hero { position: relative; overflow: hidden; padding: 34px; color: #fff; border-radius: 8px; background: radial-gradient(circle at 84% 18%, rgba(242,122,36,.18), transparent 25%), radial-gradient(circle at 70% 75%, rgba(16,184,216,.24), transparent 28%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.import-hero:before { content: ""; position: absolute; right: 48px; top: -18px; width: 190px; height: 190px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center/contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.24)); pointer-events: none; }
.import-hero > * { position: relative; z-index: 1; }
.import-hero h1 { margin: 0; font-size: 38px; line-height: 1.08; letter-spacing: 0; }
.import-hero p { max-width: 840px; margin: 12px 0 0; color: #dbeafe; line-height: 1.55; }
.import-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.import-stats span { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 0 10px; background: rgba(15,23,42,.32); color: #eaf6ff; font-size: 13px; }
.import-stats b { color: #fff; }
.import-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 24px; margin-top: 24px; }
.import-families { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.import-families h2 { margin: 0; padding: 15px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: 17px; }
.import-families a { display: block; padding: 12px 14px; border-bottom: 1px solid #e2e8f0; }
.import-families a:last-child { border-bottom: 0; }
.import-families b { display: block; font-size: 14px; }
.import-families span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.import-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
.import-product { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.import-product-img { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 8px; background: #f8fafc; overflow: hidden; color: #075985; font-size: 11px; font-weight: 900; text-align: center; }
.import-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.import-product b { display: block; font-size: 14px; line-height: 1.25; }
.import-product p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.import-product-bottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 10px; }
.import-product-bottom strong { font-size: 18px; }
.import-product-bottom a { display: inline-flex; align-items: center; min-height: 30px; border-radius: 6px; padding: 0 9px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; white-space: nowrap; }
.import-next-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.import-next-grid div { border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #f8fafc; }
.import-next-grid b { display: block; font-size: 14px; }
.import-next-grid p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.real-family-hero { position: relative; overflow: hidden; min-height: 230px; padding: 28px 30px 26px; color: #fff; border-radius: 8px; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.22), transparent 25%), radial-gradient(circle at 74% 78%, rgba(16,184,216,.30), transparent 30%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.real-family-hero.compact { padding-bottom: 26px; }
.real-family-brand { position: absolute; left: calc(58% + 58px); top: 20px; z-index: 2; width: 128px; height: 128px; object-fit: contain; opacity: .96; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(0,0,0,.32)); pointer-events: none; }
.real-family-hero h1 { position: relative; z-index: 1; max-width: 56%; margin: 10px 0 0; font-size: 38px; line-height: 1.08; letter-spacing: 0; }
.real-family-hero p { position: relative; z-index: 1; max-width: 56%; margin: 12px 0 0; color: #dbeafe; line-height: 1.55; }
.real-family-hero > *:not(.real-family-brand) { position: relative; z-index: 1; }
.real-family-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.real-family-stats span { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 0 10px; background: rgba(15,23,42,.32); color: #eaf6ff; font-size: 13px; }
.rack-family-hero { background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.22), transparent 25%), radial-gradient(circle at 74% 78%, rgba(16,184,216,.30), transparent 30%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); }
.rack-family-hero .real-family-brand { width: 136px; height: 136px; opacity: .97; }
.rack-family-hero:before { content: ""; position: absolute; inset: 0; background: var(--rack-hero-image) right 34px center / 330px auto no-repeat; opacity: .28; mix-blend-mode: multiply; filter: contrast(1.06) saturate(.82); pointer-events: none; }
.rack-family-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,17,31,.25), rgba(7,17,31,.10) 50%, rgba(7,17,31,.05)), radial-gradient(circle at 78% 48%, rgba(255,255,255,.08), transparent 26%); pointer-events: none; }
.rack-family-hero > *:not(.real-family-brand) { position: relative; z-index: 1; }
.cable-family-hero { background: radial-gradient(circle at 82% 20%, rgba(34,197,94,.18), transparent 24%), radial-gradient(circle at 70% 78%, rgba(16,184,216,.26), transparent 30%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); }
.cable-family-hero:before { content: ""; position: absolute; inset: 0; background: var(--rack-hero-image) right 34px center / 330px auto no-repeat; opacity: .28; mix-blend-mode: multiply; filter: contrast(1.06) saturate(.82); pointer-events: none; }
.cable-family-hero > *:not(.real-family-brand) { position: relative; z-index: 1; }
.fiber-public-hero { background: radial-gradient(circle at 82% 18%, rgba(16,184,216,.24), transparent 24%), radial-gradient(circle at 72% 76%, rgba(242,122,36,.18), transparent 28%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); }
.fiber-public-hero:before { content: ""; position: absolute; inset: 0; background: var(--fiber-hero-image, url("/assets/latiguillo-fibra-om3.jpg")) right 34px center / 320px auto no-repeat; opacity: .18; mix-blend-mode: screen; filter: saturate(.82) contrast(1.04); pointer-events: none; }
.fiber-public-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,17,31,.28), rgba(7,17,31,.22) 58%, rgba(7,17,31,.08)), radial-gradient(circle at 80% 48%, rgba(255,255,255,.08), transparent 24%); pointer-events: none; }
.fiber-public-hero > *:not(.real-family-brand) { position: relative; z-index: 1; }
.catalog-entry-grid, .fiber-entry-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.catalog-entry-card, .fiber-entry-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 58px; border-radius: 6px; padding: 0 14px; color: #fff; background: #064861; font-size: 17px; font-weight: 800; }
.catalog-entry-card:hover, .fiber-entry-card:hover { background: #075a73; }
.catalog-entry-card.pending, .fiber-entry-card.pending { background: #0f5a72; opacity: .78; }
.fiber-entry-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; color: #075985; background: #fff; font-size: 12px; font-weight: 900; }
.catalog-entry-card small, .fiber-entry-card small { color: #cfefff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.real-family-tools { display: grid; gap: 12px; margin-top: 18px; }
.real-subfamily-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.real-subfamily-strip a { display: inline-flex; gap: 7px; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #f8fafc; font-size: 13px; font-weight: 900; }
.real-subfamily-strip span { color: #64748b; font-size: 11px; }
.real-family-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 24px; margin-top: 24px; }
.real-family-side { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.real-family-side h2 { margin: 0; padding: 15px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: 17px; }
.real-family-side a { display: block; padding: 12px 14px; border-bottom: 1px solid #e2e8f0; }
.real-family-side a:last-child { border-bottom: 0; }
.real-family-side b { display: block; font-size: 14px; }
.real-family-side span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.real-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 18px; }
.real-product-card { display: flex; flex-direction: column; min-height: 540px; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
.real-product-image { position: relative; display: grid; place-items: center; height: 300px; overflow: hidden; color: #075985; background: #fff; font-weight: 900; }
.real-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.real-product-image .fake-img { min-height: 300px; padding: 12px; text-align: center; }
.real-product-image .image-fallback { display: none; }
.real-product-image.image-failed .image-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.real-product-label { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; max-width: calc(100% - 20px); min-height: 24px; padding: 0 8px; border-radius: 999px; color: #fff; background: rgba(15,23,42,.78); font-size: 11px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-product-body { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.real-product-body h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.25; letter-spacing: 0; }
.real-product-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.real-product-price { margin-top: auto; padding-top: 14px; }
.real-product-actions { display: flex; gap: 8px; margin-top: 12px; }
.real-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-family: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.real-btn.primary { flex: 1; border-color: var(--orange); background: var(--orange); color: #fff; }
.real-subfamily-panel { margin-top: 24px; }
.admin-live-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 760px; overflow: hidden; border: 1px solid rgba(15,23,42,.14); border-radius: 8px; background: #fff; box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.admin-live-sidebar { color: #fff; background: radial-gradient(circle at 50% 92%, rgba(242,122,36,.18), transparent 30%), linear-gradient(180deg,#991b1b,#611313); }
.admin-live-brand { display: flex; gap: 10px; align-items: center; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.16); }
.admin-live-brand img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.admin-live-brand b { display: block; font-size: 16px; line-height: 1.12; }
.admin-live-brand small { display: block; margin-top: 4px; color: #fecaca; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-live-sidebar nav { display: grid; gap: 6px; padding: 14px 12px; }
.admin-live-sidebar a, .admin-live-sidebar button { display: flex; align-items: center; min-height: 38px; border: 0; border-radius: 7px; padding: 0 10px; color: #fee2e2; background: transparent; font-size: 13px; font-weight: 900; text-align: left; cursor: pointer; }
.admin-live-sidebar a.active, .admin-live-sidebar a:hover, .admin-live-sidebar button:hover { color: #fff; background: rgba(255,255,255,.15); }
.admin-live-sidebar button { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.16); border-radius: 0; padding-top: 12px; }
.admin-live-main { min-width: 0; background: #f4f7fb; }
.admin-login-shell { display: grid; place-items: center; min-height: calc(100vh - 56px); padding: 28px; background: linear-gradient(135deg,#0f172a,#1f2937); }
.admin-login-card { width: min(100%, 460px); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 28px; color: #fff; background: rgba(15,23,42,.86); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.admin-login-card img { width: 92px; height: 92px; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)); }
.admin-login-card h1 { margin: 0; font-size: 30px; line-height: 1.12; }
.admin-login-card p { margin: 10px 0 0; color: #dbeafe; line-height: 1.5; }
.admin-manual-order-dialog { width: min(94vw, 960px); max-height: 92vh; overflow: auto; color: #0f172a; background: #f8fafc; }
.admin-manual-order-dialog p { color: #475569; }
.admin-manual-order-dialog::backdrop { background: rgba(15,23,42,.72); }
.admin-manual-customer-select, .admin-manual-order-notes { display: grid; gap: 6px; margin-top: 16px; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-manual-customer-select select, .admin-manual-order-notes textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; color: #0f172a; background: #fff; font-weight: 800; text-transform: none; }
.admin-manual-order-lines-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 8px; padding: 12px 16px; border-top: 1px solid #cbd5e1; }
#adminManualOrderLines { display: grid; gap: 8px; padding: 0 16px 16px; }
.admin-manual-order-line { display: grid; grid-template-columns: minmax(0,1fr) 110px auto; gap: 8px; align-items: end; }
.admin-manual-order-line label { display: grid; gap: 5px; color: #334155; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-manual-order-line select, .admin-manual-order-line input { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; background: #fff; font-weight: 800; }
.admin-manual-order-email { display: flex; gap: 8px; align-items: center; margin: 12px 0; color: #334155; font-size: 12px; font-weight: 800; }
.admin-order-notification-dialog { color: #0f172a; background: #f8fafc; }
.admin-order-notification-dialog p { color: #475569; }
.admin-order-notification-dialog::backdrop { background: rgba(15,23,42,.72); }
.admin-order-notification-dialog label { display: grid; gap: 7px; margin: 18px 0; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-order-notification-dialog select { min-height: 42px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #fff; font-weight: 800; }
.admin-order-communication { padding: 0 16px 16px; }
.admin-order-incident-dialog { color: #0f172a; background: #f8fafc; }
.admin-order-incident-dialog p { color: #475569; }
.admin-order-incident-dialog::backdrop { background: rgba(15,23,42,.72); }
.admin-order-incident-dialog label { display: grid; gap: 7px; margin: 14px 0; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-order-incident-dialog input, .admin-order-incident-dialog select, .admin-order-incident-dialog textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; background: #fff; font-weight: 800; text-transform: none; }
.admin-order-incident-dialog textarea { min-height: 110px; resize: vertical; }
.admin-transfer-reconciliation-dialog { width: min(94vw, 620px); color: #0f172a; background: #f8fafc; }
.admin-transfer-reconciliation-dialog::backdrop { background: rgba(15,23,42,.72); }
.admin-transfer-reconciliation-dialog p { color: #475569; }
.admin-transfer-reconciliation-dialog label { display: grid; gap: 7px; margin: 14px 0; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-transfer-reconciliation-dialog input, .admin-transfer-reconciliation-dialog textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; background: #fff; font-weight: 800; text-transform: none; }
.admin-transfer-reconciliation-dialog textarea { min-height: 90px; resize: vertical; }
.admin-refund-dialog { width: min(94vw, 640px); color: #0f172a; background: #f8fafc; }
.admin-refund-dialog::backdrop { background: rgba(15,23,42,.72); }
.admin-refund-dialog p { color: #475569; }
.admin-refund-dialog label { display: grid; gap: 7px; margin: 14px 0; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-refund-dialog input, .admin-refund-dialog select, .admin-refund-dialog textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; background: #fff; font-weight: 800; text-transform: none; }
.admin-refund-dialog textarea { min-height: 90px; resize: vertical; }
.admin-incident-current { margin: 14px 0; border: 1px solid #fecaca; border-radius: 8px; padding: 12px; background: #fef2f2; }
.admin-incident-current b, .admin-incident-current span { display: block; }
.admin-incident-current span { margin-top: 4px; color: #b91c1c; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-incident-current p { margin-bottom: 0; }
.admin-incident-banner { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 14px; border: 1px solid; border-radius: 8px; padding: 12px; }
.admin-incident-banner.open { border-color: #fecaca; background: #fef2f2; }
.admin-incident-banner.resolved { border-color: #bbf7d0; background: #f0fdf4; }
.admin-incident-banner span, .admin-incident-banner b, .admin-incident-banner small { display: block; }
.admin-incident-banner span { color: #b91c1c; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-incident-banner b { margin-top: 4px; font-size: 14px; }
.admin-incident-banner p, .admin-incident-banner small { margin: 5px 0 0; color: #475569; font-size: 12px; line-height: 1.4; }
.admin-incident-banner button { flex: 0 0 auto; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 12px; background: #fff; font-weight: 900; cursor: pointer; }
.admin-login-form { display: grid; gap: 12px; margin-top: 18px; }
.admin-login-form label { display: grid; gap: 7px; color: #cbd5e1; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.admin-login-form input { width: 100%; min-height: 46px; border: 1px solid #334155; border-radius: 7px; padding: 0 12px; color: #0f172a; background: #fff; font-weight: 900; }
.admin-login-form button { min-height: 46px; border: 0; border-radius: 7px; color: #fff; background: var(--orange); font-weight: 900; cursor: pointer; }
.admin-login-form button:disabled { opacity: .68; cursor: progress; }
.admin-login-error { border: 1px solid #fecaca; border-radius: 7px; padding: 10px 12px; color: #fee2e2; background: rgba(185,28,28,.28); font-size: 13px; font-weight: 800; }
.admin-login-note { margin-top: 14px; color: #94a3b8; font-size: 12px; line-height: 1.45; }
.admin-live-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.admin-live-top h1 { margin: 0; font-size: 24px; }
.admin-live-top p { max-width: 760px; margin: 6px 0 0; color: #64748b; line-height: 1.45; }
.admin-live-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-live-actions a, .admin-live-actions button, .admin-link { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.admin-live-actions a { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 18px 22px 0; }
.admin-metric { border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.admin-metric span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-metric b { display: block; margin-top: 7px; font-size: 24px; }
.admin-metric small { display: block; margin-top: 5px; color: #64748b; font-size: 12px; }
.admin-dashboard-shell { max-width: 1280px; margin: 0 auto; }
.admin-dashboard-hero { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: 18px; align-items: center; margin: 18px 22px 0; border-radius: 8px; padding: 22px; color: #f8fafc; background: radial-gradient(circle at 82% 22%, rgba(242,122,36,.18), transparent 26%), linear-gradient(112deg, rgba(10,42,68,.98), rgba(18,75,111,.96) 58%, rgba(34,110,151,.94)); box-shadow: 0 16px 38px rgba(15,23,42,.16); }
.admin-dashboard-hero b { display: block; margin-bottom: 8px; font-size: 20px; }
.admin-dashboard-hero p { max-width: 780px; margin: 0; color: #dbeafe; line-height: 1.5; }
.admin-dashboard-hero img { width: 116px; height: 116px; object-fit: contain; justify-self: center; opacity: .9; filter: drop-shadow(0 16px 20px rgba(0,0,0,.2)); }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-dashboard-main, .admin-dashboard-side { display: grid; gap: 16px; align-self: start; }
.admin-quick-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 18px 22px 0; }
.admin-quick-actions a { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid #d9e2ee; border-radius: 8px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 900; text-align: center; box-shadow: 0 8px 18px rgba(15,23,42,.04); }
.admin-quick-actions a.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-alert-list { display: grid; gap: 10px; padding: 14px; }
.admin-alert { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #fed7aa; border-radius: 8px; padding: 12px; background: #fffbeb; }
.admin-alert.danger { border-color: #fecaca; background: #fff1f2; }
.admin-alert.info { border-color: #bae6fd; background: #e0f2fe; }
.admin-alert > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; }
.admin-alert.danger > span { background: #dc2626; }
.admin-alert.info > span { background: #0b6fcf; }
.admin-alert b { display: block; font-size: 14px; }
.admin-alert p { margin: 4px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-alert a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.admin-module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-module-card { display: flex; justify-content: space-between; gap: 12px; min-height: 132px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; color: #0f172a; background: #fff; box-shadow: 0 8px 18px rgba(15,23,42,.04); }
.admin-module-card:hover { border-color: rgba(242,122,36,.58); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.admin-module-card b { display: block; font-size: 15px; }
.admin-module-card p { margin: 7px 0 10px; color: #475569; font-size: 13px; line-height: 1.38; }
.admin-module-card small { display: block; color: #64748b; font-size: 11px; font-weight: 900; line-height: 1.3; }
.admin-module-card > span { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 24px; border-radius: 999px; padding: 0 8px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; white-space: nowrap; }
.admin-dashboard-notes { display: grid; gap: 10px; padding: 14px; }
.admin-dashboard-notes p { margin: 0; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; color: #475569; background: #f8fafc; font-size: 13px; line-height: 1.4; }
.admin-dashboard-notes b { color: #0f172a; }
.admin-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; }
.admin-task-grid article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.admin-task-grid b { display: block; font-size: 13px; }
.admin-task-grid span { display: block; margin-top: 5px; color: #64748b; font-size: 12px; }
.admin-task-grid strong { display: block; margin-top: 10px; font-size: 24px; line-height: 1; }
.admin-next-close { display: grid; gap: 10px; padding: 14px; }
.admin-next-close b { display: block; font-size: 18px; }
.admin-next-close p { margin: 0; color: #475569; font-size: 13px; line-height: 1.45; }
.admin-dashboard-error { margin: 18px 22px 0; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 14px; color: #991b1b; background: #fff1f2; font-size: 13px; font-weight: 800; }
.admin-operation-message { margin: 14px 22px 0; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 14px; color: #075985; background: #eff6ff; font-size: 13px; font-weight: 900; }
.admin-operation-message.ok { color: #065f46; border-color: #bbf7d0; background: #ecfdf5; }
.admin-operation-message.saving { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.admin-operation-message.error { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.admin-dashboard-orders { display: grid; }
.admin-dashboard-order { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; color: #0f172a; background: #fff; }
.admin-dashboard-order:last-child { border-bottom: 0; }
.admin-dashboard-order:hover { background: #f8fafc; }
.admin-dashboard-order > div { display: grid; gap: 5px; }
.admin-dashboard-order > div:last-child { justify-items: end; }
.admin-dashboard-order b, .admin-dashboard-order strong { font-size: 14px; }
.admin-dashboard-order span:not(.admin-attr-badge) { color: #64748b; font-size: 11px; }
.admin-dashboard-activity { max-height: 520px; overflow-y: auto; }
.admin-dashboard-empty { padding: 24px 16px; color: #64748b; font-size: 13px; text-align: center; }
.admin-dashboard-attention { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-dashboard-attention > section { min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; }
.admin-dashboard-attention header { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.admin-dashboard-attention header div { display: grid; gap: 3px; }
.admin-dashboard-attention header b { font-size: 13px; }
.admin-dashboard-attention header span { color: #64748b; font-size: 11px; }
.admin-dashboard-attention header a { color: #0b6fcf; font-size: 11px; font-weight: 900; white-space: nowrap; }
.admin-dashboard-attention-order { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #edf2f7; color: #0f172a; }
.admin-dashboard-attention-order:last-child { border-bottom: 0; }
.admin-dashboard-attention-order:hover { background: #fff7ed; }
.admin-dashboard-attention-order.attention { box-shadow: inset 3px 0 0 #f59e0b; }
.admin-dashboard-attention-order.urgent { background: #fff1f2; box-shadow: inset 3px 0 0 #dc2626; }
.admin-dashboard-attention-order.urgent:hover { background: #ffe4e6; }
.admin-dashboard-attention-order div { min-width: 0; }
.admin-dashboard-attention-order b, .admin-dashboard-attention-order span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-attention-order b { font-size: 11px; }
.admin-dashboard-attention-order span { margin-top: 3px; color: #64748b; font-size: 10px; }
.admin-dashboard-attention-order strong { font-size: 11px; white-space: nowrap; }
.admin-dashboard-attention-state { display: grid; gap: 3px; justify-items: end; min-width: 74px; }
.admin-dashboard-attention-state span { color: #64748b; font-size: 9px; font-weight: 900; }
.admin-dashboard-attention-order.urgent .admin-dashboard-attention-state span { color: #b91c1c; }
.admin-dashboard-attention-empty { padding: 18px 12px; color: #64748b; font-size: 11px; text-align: center; }
.admin-link.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-recovered-module { display: grid; justify-items: center; max-width: 760px; margin: 44px auto; border: 1px solid #d9e2ee; border-radius: 8px; padding: 34px; text-align: center; background: #fff; box-shadow: 0 16px 38px rgba(15,23,42,.10); }
.admin-recovered-module img { width: 132px; height: 132px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 14px 18px rgba(15,23,42,.16)); }
.admin-recovered-module h2 { margin: 0 0 8px; font-size: 28px; }
.admin-recovered-module p { max-width: 560px; margin: 0 0 14px; color: #475569; line-height: 1.45; }
.admin-recovered-module > b { display: inline-flex; align-items: center; min-height: 34px; border-radius: 999px; padding: 0 12px; color: #075985; background: #e0f2fe; font-size: 12px; }
.admin-recovered-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.admin-workspace { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-panel { border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.admin-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.admin-panel-head b { display: block; font-size: 16px; }
.admin-panel-head span, .admin-panel-head a { color: #64748b; font-size: 12px; font-weight: 900; }
.admin-panel-action { min-height: 32px; border: 1px solid var(--orange); border-radius: 6px; padding: 0 10px; color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.admin-variant-create { margin: 14px 16px; border: 1px solid #fed7aa; border-radius: 10px; overflow: hidden; background: #fff7ed; }
.admin-variant-create .admin-form-grid { padding: 14px; background: #fff; border-top: 1px solid #fed7aa; }
.admin-variant-create .admin-inline-actions { padding: 0 14px 14px; margin-top: 0; background: #fff; }
.admin-family-list { display: grid; gap: 8px; padding: 12px; }
.admin-family-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px; align-items: center; min-height: 58px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; background: #fff; }
.admin-family-card.active { border-color: rgba(242,122,36,.65); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-family-card > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; }
.admin-family-card b { display: block; font-size: 13px; }
.admin-family-card small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 800; }
.admin-help { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; color: #075985; background: #e0f2fe; font-size: 12px; line-height: 1.35; }
.admin-help b { flex: 0 0 auto; }
.admin-help.warn { color: #7c2d12; border-color: #fed7aa; background: #fff7ed; }
.admin-table-wrap { overflow-x: auto; }
.admin-product-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
.admin-orders-main .admin-product-table, .admin-clients-main .admin-product-table { min-width: 0; font-size: 11px; table-layout: auto; }
.admin-orders-main .admin-product-table th, .admin-orders-main .admin-product-table td,
.admin-clients-main .admin-product-table th, .admin-clients-main .admin-product-table td { padding: 8px; }
.admin-product-table th, .admin-product-table td { padding: 10px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: middle; }
.admin-product-table th { color: #475569; background: #fff; font-size: 11px; text-transform: uppercase; }
.admin-product-table select { width: 100%; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; background: #fff; font-weight: 800; }
.admin-product-cell { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; min-width: 260px; }
.admin-product-cell b { display: block; font-size: 13px; line-height: 1.25; }
.admin-product-cell small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; line-height: 1.3; }
.admin-thumb { display: grid; place-items: center; width: 52px; height: 46px; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; color: #075985; background: #f8fafc; font-size: 10px; font-weight: 900; }
.admin-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.admin-thumb .image-load-fallback { min-height: 100%; padding: 4px; font-size: 9px; }
.admin-inline-actions { display: flex; gap: 6px; margin-top: 8px; }
.admin-inline-actions button, .admin-inline-actions a, .admin-state { min-height: 30px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; background: #fff; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.admin-inline-actions button, .admin-inline-actions a:first-child { display: inline-flex; align-items: center; color: #fff; border-color: #10233c; background: #10233c; }
.admin-inline-actions a:last-child { display: inline-flex; align-items: center; color: #0f172a; background: #fff; }
.admin-state.ok { color: #065f46; border-color: #bbf7d0; background: #dcfce7; }
.admin-state.featured { color: #7c2d12; border-color: #fed7aa; background: #ffedd5; }
.admin-state.muted { color: #475569; background: #f1f5f9; }
.admin-state.danger { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.admin-save-note { border: 1px solid #d9e2ee; border-radius: 7px; padding: 10px; color: #475569; background: #f8fafc; font-size: 12px; line-height: 1.35; }
.admin-save-note.ok { color: #065f46; border-color: #bbf7d0; background: #ecfdf5; }
.admin-save-note.saving { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.admin-save-note.error { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.admin-row-links { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-link.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-link.danger { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.admin-structure-layout { display: grid; grid-template-columns: 330px minmax(0,1fr) 300px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-structure-main, .admin-structure-side { display: grid; gap: 16px; align-self: start; min-width: 0; }
.admin-structure-hero { grid-template-columns: minmax(0,1fr) 116px; }
.admin-structure-families { display: grid; gap: 10px; padding: 12px; }
.admin-structure-family { border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; background: #fff; }
.admin-structure-family.active { border-color: rgba(242,122,36,.7); box-shadow: inset 4px 0 0 var(--orange); }
.admin-structure-family-main { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px; color: #0f172a; background: #fff; }
.admin-structure-family-main > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 7px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; }
.admin-structure-family-main b { display: block; font-size: 13px; }
.admin-structure-family-main small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 800; line-height: 1.25; }
.admin-structure-sublist { display: grid; gap: 7px; padding: 0 10px 10px 56px; }
.admin-structure-sublist a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 34px; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 9px; color: #0f172a; background: #fff; }
.admin-structure-sublist a.active { border-color: rgba(16,184,216,.55); background: #e0f2fe; }
.admin-structure-sublist b { font-size: 12px; line-height: 1.2; }
.admin-structure-sublist span, .admin-empty-line { color: #64748b; font-size: 11px; font-weight: 900; }
.admin-attribute-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-attr-card { border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.admin-attr-card.required { border-color: rgba(242,122,36,.58); background: #fff7ed; }
.admin-attr-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.admin-attr-head input { width: 100%; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; font-weight: 900; }
.admin-attr-badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 8px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; white-space: nowrap; }
.admin-attr-badge.green { color: #065f46; background: #dcfce7; }
.admin-attr-badge.orange { color: #7c2d12; background: #ffedd5; }
.admin-attr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.admin-attr-grid label { display: grid; gap: 5px; color: #475569; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-attr-grid label.wide { grid-column: 1 / -1; }
.admin-attr-grid input, .admin-attr-grid select { width: 100%; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 800; }
.admin-attr-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.admin-rule-list, .admin-affected-list { display: grid; gap: 10px; padding: 14px; }
.admin-rule-list article, .admin-affected-list a, .admin-affected-list p { display: block; border: 1px solid #e2e8f0; border-radius: 8px; padding: 11px; color: #0f172a; background: #f8fafc; }
.admin-rule-list b, .admin-affected-list b { display: block; font-size: 13px; }
.admin-rule-list p, .admin-affected-list span, .admin-affected-list p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-edit-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-edit-main { display: grid; gap: 16px; min-width: 0; }
.admin-edit-side { display: grid; gap: 16px; align-self: start; }
.admin-product-preview { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px; padding: 16px; align-items: center; }
.admin-product-visual { display: grid; gap: 8px; }
.admin-product-secondary-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.admin-product-secondary-strip img { width: 100%; height: 48px; object-fit: contain; border: 1px solid #d9e2ee; border-radius: 6px; background: #fff; }
.admin-product-secondary-strip .image-load-fallback { min-height: 48px; padding: 6px; border: 1px solid #d9e2ee; border-radius: 6px; font-size: 10px; }
.admin-product-main-image { display: grid; place-items: center; min-height: 250px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; color: #075985; background: radial-gradient(circle at 75% 20%, rgba(16,184,216,.16), transparent 28%), #f8fafc; font-weight: 900; }
.admin-product-main-image img { width: 100%; height: 250px; object-fit: contain; padding: 12px; }
.admin-product-main-image .image-load-fallback { min-height: 250px; }
.admin-product-copy h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.admin-product-copy p { margin: 10px 0 0; color: #475569; line-height: 1.45; }
.admin-muted { color: #64748b; font-size: 12px; font-weight: 900; }
.admin-product-price { margin-top: 12px; font-size: 28px; font-weight: 900; }
.admin-product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.admin-product-badges span { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 8px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; }
.admin-products-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-products-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-products-toolbar { display: grid; grid-template-columns: minmax(280px,1fr) 190px 190px 170px; gap: 10px; padding: 18px 22px 0; }
.admin-products-toolbar input, .admin-products-toolbar select { width: 100%; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 0 10px; color: #0f172a; background: #fff; font-weight: 800; outline: 0; }
.admin-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 0; }
.admin-filter-chips a, .admin-filter-chips span { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid #d9e2ee; border-radius: 999px; padding: 0 10px; color: #334155; background: #fff; font-size: 12px; font-weight: 900; }
.admin-filter-chips .active { color: #fff; border-color: #10233c; background: #10233c; }
.admin-filter-chips .warn { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.admin-filter-chips .danger { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.admin-filter-chips .muted { color: #475569; background: #f1f5f9; }
.admin-review-summary { margin: 10px 12px 0; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; color: #075985; background: #eff6ff; font-size: 12px; line-height: 1.45; }
.admin-family-strip-panel { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 22px 0; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.admin-family-strip-panel a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; border: 1px solid #d9e2ee; border-radius: 7px; padding: 0 10px; color: #0f172a; background: #f8fafc; font-size: 12px; font-weight: 900; }
.admin-family-strip-panel a.active { color: #fff; border-color: #10233c; background: #10233c; }
.admin-family-strip-panel span { color: inherit; opacity: .78; font-size: 11px; }
.admin-products-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-product-review-table { min-width: 860px; }
.admin-product-cell.wide { min-width: 260px; }
.admin-pill { display: inline-flex; align-items: center; min-height: 24px; margin: 2px 4px 2px 0; border-radius: 999px; padding: 0 8px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; white-space: nowrap; }
.admin-pill.muted { color: #475569; background: #f1f5f9; }
.admin-pill.green { color: #065f46; background: #dcfce7; }
.admin-pill.red { color: #991b1b; background: #fee2e2; }
.admin-pill.amber { color: #92400e; background: #fef3c7; }
.admin-pill.blue { color: #075985; background: #e0f2fe; }
.admin-checks { display: flex; flex-wrap: wrap; gap: 5px; min-width: 134px; }
.admin-check-dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border-radius: 5px; color: #fff; font-size: 9px; font-weight: 900; }
.admin-check-dot.ok { background: #16a36a; }
.admin-check-dot.warn { background: #f59e0b; }
.admin-check-dot.bad { background: #dc2626; }
.admin-product-editor-card { display: grid; grid-template-rows: 170px minmax(0,1fr); border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 8px 18px rgba(15,23,42,.05); }
.admin-product-card-image { display: grid; place-items: center; overflow: hidden; color: #075985; background: #f8fafc; font-size: 18px; font-weight: 900; }
.admin-product-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.admin-product-card-body { display: grid; gap: 8px; align-content: start; padding: 12px; }
.admin-product-card-meta { display: flex; justify-content: space-between; gap: 8px; color: #075985; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-product-card-body h2 { margin: 0; font-size: 14px; line-height: 1.25; }
.admin-product-card-body p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-product-card-price { font-size: 20px; font-weight: 900; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-form-grid label { display: grid; gap: 6px; color: #334155; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.admin-form-grid label.wide { grid-column: 1 / -1; }
.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #fff; color: #0f172a; font-weight: 700; text-transform: none; }
.admin-form-grid textarea { min-height: 92px; padding-top: 10px; resize: vertical; line-height: 1.45; text-transform: none; }
.admin-upload-box.product-upload { margin-top: 14px; }
.admin-gallery-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 16px 16px; }
.admin-gallery-row button { display: grid; gap: 7px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 8px; background: #fff; color: #0f172a; font-size: 11px; font-weight: 900; cursor: pointer; }
.admin-gallery-row img { width: 100%; height: 98px; object-fit: contain; }
.admin-gallery-choice { display: grid; gap: 7px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 8px; background: #fff; }
.admin-gallery-choice b { font-size: 11px; line-height: 1.25; }
.admin-gallery-choice div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.admin-gallery-choice button { min-height: 30px; place-items: center; padding: 0 6px; background: #f8fafc; }
.admin-gallery-choice button:last-child { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.admin-secondary-preview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 16px 16px; }
.admin-secondary-preview article { display: grid; gap: 7px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 8px; background: #f8fafc; overflow: hidden; }
.admin-secondary-preview img { width: 100%; height: 112px; object-fit: contain; background: #fff; border-radius: 6px; }
.admin-secondary-preview small { color: #64748b; font-size: 10px; line-height: 1.25; word-break: break-all; }
.admin-secondary-preview span { display: grid; place-items: center; min-height: 112px; border-radius: 6px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 900; }
.admin-template-blocks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-template-blocks article { border: 1px solid #d9e2ee; border-radius: 8px; padding: 13px; background: #f8fafc; }
.admin-template-blocks b { display: block; font-size: 14px; }
.admin-template-blocks p { margin: 7px 0 0; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-compound-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-compound-summary article { border: 1px solid #bae6fd; border-radius: 8px; padding: 13px; background: #f0f9ff; }
.admin-compound-summary b { display: block; color: #075985; font-size: 14px; line-height: 1.3; }
.admin-compound-summary p { margin: 7px 0 0; color: #475569; font-size: 12px; line-height: 1.4; }
.admin-compound-workflow { border-color: #bae6fd; background: #f0f9ff; }
.admin-compound-workflow .admin-panel-head { border-bottom-color: #bae6fd; background: #e0f2fe; }
.admin-compound-workflow-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px 16px; }
.admin-compound-workflow-body article { border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px; background: #fff; }
.admin-compound-workflow-body b { display: block; color: #075985; font-size: 14px; line-height: 1.3; }
.admin-compound-workflow-body span { display: block; margin-top: 6px; color: #475569; font-size: 12px; line-height: 1.4; }
.admin-variant-table tr.active td { background: #fff7ed; }
.admin-variant-table tr.active td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
.admin-variant-editing-notice { border-color: #fed7aa; background: #fff7ed; }
.admin-variant-editing-notice .admin-panel-head { border-bottom-color: #fed7aa; background: #ffedd5; }
.admin-variant-editing-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px; }
.admin-variant-editing-body b { display: block; color: #7c2d12; font-size: 16px; }
.admin-variant-editing-body p { margin: 6px 0 0; color: #475569; font-size: 12px; line-height: 1.4; }
.admin-variant-removal-notice { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 14px 16px; padding: 12px 14px; border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4; color: #14532d; }
.admin-variant-removal-notice b { color: #065f46; }
.admin-variant-removal-notice span { color: #166534; font-size: 12px; line-height: 1.4; }
.admin-variant-edit-dialog { width: min(94vw, 880px); max-height: 92vh; padding: 0; overflow: auto; border: 0; border-radius: 14px; color: #0f172a; background: #f8fafc; box-shadow: 0 30px 80px rgba(15,23,42,.36); }
.admin-variant-edit-dialog::backdrop { background: rgba(15,23,42,.72); backdrop-filter: blur(2px); }
.admin-variant-edit-form { padding: 22px; }
.admin-dialog-kicker { display: inline-flex; align-items: center; margin-bottom: 12px; padding: 8px 12px; border: 1px solid #fdba74; border-radius: 8px; color: #9a3412; background: #fff7ed; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-variant-dialog-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.admin-variant-dialog-head h2 { margin: 0; font-size: 26px; color: #071226; }
.admin-variant-dialog-head p { margin: 6px 0 0; max-width: 640px; color: #475569; line-height: 1.45; }
.admin-dialog-close { width: 38px; height: 38px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font-size: 24px; font-weight: 900; cursor: pointer; }
.admin-variant-dialog-context { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.admin-variant-dialog-context article { padding: 12px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; }
.admin-variant-dialog-context span { display: block; margin-bottom: 4px; color: #475569; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-variant-dialog-context b { color: #075985; font-size: 13px; }
.admin-variant-dialog-grid { padding: 14px; border: 1px solid #dbeafe; border-radius: 12px; background: #fff; }
.admin-variant-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.admin-side-body { display: grid; gap: 10px; padding: 14px; }
.admin-side-body p { margin: 0; color: #475569; font-size: 12px; line-height: 1.4; }
.admin-check-list { display: grid; gap: 8px; padding: 14px; }
.admin-check-list div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; align-items: center; color: #334155; font-size: 12px; }
.admin-check-list span { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 5px; padding: 0 7px; color: #fff; font-size: 10px; font-weight: 900; }
.admin-check-list span.ok { background: #16a36a; }
.admin-check-list span.warn { background: #f59e0b; }
.admin-check-list span.bad { background: #dc2626; }
.admin-media-layout { display: grid; grid-template-columns: 250px 320px minmax(0,1fr) 300px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-media-layout.compact { grid-template-columns: 210px 270px minmax(0,1fr); }
.admin-media-layout.hero-admin { grid-template-columns: 250px minmax(0,1fr); }
.admin-media-products { display: grid; gap: 8px; max-height: 650px; overflow: auto; padding: 12px; }
.admin-media-product { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; align-items: center; min-height: 66px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; background: #fff; }
.admin-media-product.active { border-color: rgba(242,122,36,.65); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-media-product span { display: grid; place-items: center; width: 54px; height: 50px; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; color: #075985; background: #f8fafc; font-size: 10px; font-weight: 900; }
.admin-media-product img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.admin-media-product b { display: block; font-size: 12px; line-height: 1.25; }
.admin-media-product small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 800; }
.admin-media-workbench { min-width: 0; }
.admin-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-media-card { border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 8px 18px rgba(15,23,42,.05); }
.admin-media-card.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,122,36,.18); }
.admin-media-thumb { position: relative; display: grid; place-items: center; height: 185px; overflow: hidden; background: #f8fafc; }
.admin-media-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.admin-media-thumb span { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 8px; color: #fff; background: rgba(15,23,42,.78); font-size: 11px; font-weight: 900; }
.admin-media-body { padding: 12px; }
.admin-media-body b { display: block; font-size: 13px; line-height: 1.25; }
.admin-media-body p { margin: 6px 0 10px; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-media-body button { width: 100%; min-height: 34px; border: 1px solid var(--orange); border-radius: 6px; color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; cursor: pointer; }
.admin-media-card.selected .admin-media-body button { color: #065f46; border-color: #bbf7d0; background: #dcfce7; }
.admin-media-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.admin-media-chips span { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 0 7px; color: #075985; background: #e0f2fe; font-size: 10px; font-weight: 900; }
.admin-media-chips span.warn { color: #7c2d12; background: #ffedd5; }
.admin-selected-media { display: grid; gap: 12px; padding: 14px; }
.admin-selected-media.horizontal { grid-template-columns: 190px minmax(0,1fr); align-items: center; }
.admin-selected-image { display: grid; place-items: center; min-height: 220px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; color: #075985; background: #f8fafc; font-weight: 900; }
.admin-selected-image img { width: 100%; height: 220px; object-fit: contain; padding: 8px; }
.admin-selected-media h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.admin-selected-media p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.admin-media-current-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-upload-box { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 14px 14px; border: 1px dashed #93c5fd; border-radius: 8px; padding: 14px; background: linear-gradient(135deg,#eff6ff,#fff); }
.admin-upload-box b { display: block; color: #075985; font-size: 14px; }
.admin-upload-box span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-upload-box label { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 6px; padding: 0 12px; color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.admin-upload-inline { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid var(--orange); border-radius: 6px; padding: 0 10px; color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.admin-media-classifier, .admin-media-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 14px 14px; }
.admin-media-classifier label { display: grid; gap: 6px; color: #475569; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-media-classifier input, .admin-media-classifier select, .admin-media-filters input, .admin-media-filters select { width: 100%; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 800; }
.admin-media-filters { border-bottom: 1px solid #e2e8f0; }
.admin-media-usage { display: grid; gap: 8px; padding: 0 12px 12px; }
.admin-media-usage article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #f8fafc; }
.admin-media-usage b { display: block; font-size: 12px; }
.admin-media-usage span { display: block; margin-top: 4px; color: #64748b; font-size: 11px; line-height: 1.35; }
.admin-import-critical { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 18px 22px 0; border: 1px solid #fed7aa; border-radius: 8px; padding: 14px; color: #7c2d12; background: #fff7ed; }
.admin-import-critical > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; background: var(--orange); font-size: 20px; font-weight: 900; }
.admin-import-critical b { display: block; color: #7c2d12; font-size: 15px; }
.admin-import-critical p { margin: 5px 0 0; color: #7c2d12; font-size: 13px; line-height: 1.4; }
.admin-import-critical strong { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; padding: 0 10px; color: #7c2d12; background: #ffedd5; font-size: 12px; white-space: nowrap; }
.admin-import-layout { display: grid; grid-template-columns: 340px minmax(0,1fr) 300px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-import-main { display: grid; gap: 16px; min-width: 0; }
.admin-import-steps { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid #e2e8f0; }
.admin-import-steps article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.admin-import-steps article.active { border-color: rgba(242,122,36,.65); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-import-steps b { display: block; font-size: 12px; }
.admin-import-steps span { display: block; margin-top: 4px; color: #64748b; font-size: 11px; line-height: 1.35; }
.admin-import-candidates { display: grid; gap: 8px; padding: 12px; }
.admin-import-candidate { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 11px; color: #0f172a; background: #fff; }
.admin-import-candidate.active { border-color: rgba(242,122,36,.7); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-import-candidate b { display: block; font-size: 13px; line-height: 1.25; }
.admin-import-candidate p { margin: 5px 0 0; color: #64748b; font-size: 11px; line-height: 1.3; }
.admin-import-candidate small { grid-column: 1 / -1; color: #64748b; font-size: 11px; font-weight: 900; }
.admin-import-hero { padding: 18px; color: #fff; background: linear-gradient(135deg,#10233c,#1a6d8d); }
.admin-import-hero h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.admin-import-hero p { margin: 8px 0 0; color: #dbeafe; font-size: 13px; line-height: 1.45; }
.admin-import-hero .admin-media-chips span { color: #eaf6ff; background: rgba(15,23,42,.38); }
.admin-import-hero .admin-media-chips span.green { color: #dcfce7; }
.admin-import-hero .admin-media-chips span.orange { color: #ffedd5; }
.admin-import-hero .admin-media-chips span.red { color: #fee2e2; }
.admin-import-decision-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; border-bottom: 1px solid #e2e8f0; }
.admin-import-decision-grid article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.admin-import-decision-grid article.recommended { border-color: rgba(242,122,36,.65); background: #fff7ed; }
.admin-import-decision-grid b { display: block; font-size: 13px; }
.admin-import-decision-grid p { margin: 7px 0 12px; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-import-preview { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; align-items: center; padding: 14px; color: #075985; background: #e0f2fe; }
.admin-import-preview b { display: block; color: #075985; font-size: 15px; }
.admin-import-preview p { margin: 7px 0 0; color: #075985; font-size: 13px; line-height: 1.42; }
.admin-import-group-media { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 12px; padding: 14px; border-top: 1px solid #bae6fd; background: #eff6ff; }
.admin-import-group-media b { display: block; color: #075985; font-size: 13px; }
.admin-import-group-media p { margin: 6px 0 0; color: #075985; font-size: 12px; line-height: 1.4; }
.admin-import-media-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.admin-import-media-options button { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 8px; align-items: center; min-height: 58px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px; color: #0f172a; background: #fff; cursor: pointer; text-align: left; }
.admin-import-media-options button.active { border-color: var(--orange); background: #fff7ed; box-shadow: inset 3px 0 0 var(--orange); }
.admin-import-media-options img { width: 52px; height: 46px; object-fit: contain; border-radius: 6px; background: #f8fafc; }
.admin-import-media-options span { overflow: hidden; color: #334155; font-size: 11px; font-weight: 900; line-height: 1.25; }
.admin-transport-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-transport-main { display: grid; gap: 16px; min-width: 0; }
.admin-transport-rate-list { display: grid; gap: 10px; padding: 14px; }
.admin-transport-rate-list article { border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.admin-transport-rate-list article.active { border-color: rgba(242,122,36,.65); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-transport-rate-list b { display: block; font-size: 13px; }
.admin-transport-rate-list p { margin: 6px 0 10px; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-transport-rate-list button { margin-top: 10px; min-height: 30px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #10233c; background: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.admin-transport-rate-list button:hover { border-color: rgba(242,122,36,.55); color: #fff; background: var(--orange); }
.admin-transport-result { margin: 0 14px 14px; border: 1px solid #bfdbfe; border-radius: 8px; padding: 14px; background: #eff6ff; }
.admin-transport-result b { display: block; color: #075985; font-size: 26px; }
.admin-transport-result p { margin: 7px 0 0; color: #475569; font-size: 13px; line-height: 1.45; }
.admin-transport-rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-transport-rule-grid article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.admin-transport-rule-grid b { display: block; font-size: 13px; }
.admin-transport-rule-grid p { margin: 6px 0 10px; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-orders-layout { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-orders-main { display: grid; gap: 16px; min-width: 0; }
.admin-order-filters { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border-bottom: 1px solid #e2e8f0; }
.admin-order-filters input, .admin-order-filters select { width: 100%; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; background: #fff; font-weight: 800; }
.admin-order-filters label span { display: block; margin-bottom: 4px; color: #64748b; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-order-filter-actions { display: flex; gap: 8px; }
.admin-order-filter-actions button { flex: 1; justify-content: center; }
.admin-order-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-bottom: 1px solid #e2e8f0; }
.admin-order-tabs span, .admin-order-tabs button { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid #d9e2ee; border-radius: 999px; padding: 0 9px; color: #334155; background: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.admin-order-tabs span.active, .admin-order-tabs button.active { color: #fff; border-color: #10233c; background: #10233c; }
.admin-order-list { display: grid; gap: 10px; padding: 12px; max-height: 720px; overflow: auto; }
.admin-order-empty { padding: 24px 12px; color: #64748b; text-align: center; }
.admin-order-empty b { display: block; color: #0f172a; font-size: 15px; }
.admin-order-empty p, .admin-order-empty-detail p { line-height: 1.5; }
.admin-order-empty-detail { padding: 28px; }
.admin-order-card { display: block; border: 1px solid #d9e2ee; border-radius: 8px; color: #0f172a; background: #fff; overflow: hidden; }
.admin-order-card.active { border-color: rgba(242,122,36,.7); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-order-card-link { display: block; color: inherit; }
.admin-order-select { display: flex; gap: 7px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #e2e8f0; color: #334155; background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.admin-order-select.disabled { color: #94a3b8; cursor: not-allowed; }
.admin-order-select input { margin: 0; accent-color: var(--orange); }
.admin-order-batch-bar { display: grid; grid-template-columns: minmax(100px,1fr) repeat(3,auto); gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.admin-order-batch-bar div { display: grid; gap: 2px; }
.admin-order-batch-bar b { font-size: 11px; }
.admin-order-batch-bar span { color: #64748b; font-size: 9px; }
.admin-order-batch-bar button { min-height: 30px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; color: #334155; background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.admin-order-batch-bar button.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-order-batch-bar button:disabled { opacity: .45; cursor: not-allowed; }
.admin-order-main { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.admin-order-main b { display: block; font-size: 13px; line-height: 1.25; }
.admin-order-main p { margin: 5px 0 0; color: #64748b; font-size: 11px; line-height: 1.35; }
.admin-order-main strong { color: #00112f; font-size: 14px; white-space: nowrap; }
.admin-order-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px; }
.admin-order-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.admin-order-detail-grid article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.admin-order-detail-grid span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-order-detail-grid b { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; }
.admin-order-detail-grid p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-order-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-order-actions label { display: grid; gap: 6px; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-order-actions input, .admin-order-actions select { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #fff; color: #0f172a; font-weight: 800; text-transform: none; }
.admin-orders-bottom { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: stretch; }
.admin-order-workflow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; }
.admin-order-workflow article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: start; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #f8fafc; }
.admin-order-workflow article.done { border-color: #bbf7d0; background: #f0fdf4; }
.admin-order-workflow article.active { border-color: rgba(242,122,36,.55); background: #fff7ed; }
.admin-order-workflow article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #fff; background: #10233c; font-size: 12px; font-weight: 900; }
.admin-order-workflow b { display: block; font-size: 12px; }
.admin-order-workflow p { margin: 5px 0 0; color: #64748b; font-size: 11px; line-height: 1.35; }
.admin-order-notes { display: grid; gap: 12px; padding: 14px; }
.admin-order-notes textarea { width: 100%; min-height: 130px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; resize: vertical; line-height: 1.45; }
.admin-order-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-order-summary div { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.admin-order-summary span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-order-summary b { display: block; margin-top: 6px; font-size: 20px; }
.admin-order-history { display: grid; padding: 8px 16px 18px; }
.admin-order-history-entry { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 12px 0; }
.admin-order-history-entry:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 28px; bottom: -6px; width: 2px; background: #dbe4ef; }
.admin-order-history-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; border: 3px solid #dbeafe; border-radius: 50%; background: #1d4ed8; }
.admin-order-history-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.admin-order-history-meta b { font-size: 12px; }
.admin-order-history-meta span { color: #64748b; font-size: 11px; }
.admin-order-history-entry p { margin: 5px 0 0; color: #334155; font-size: 12px; line-height: 1.4; }
.admin-order-history-empty { padding: 20px 0; color: #64748b; font-size: 12px; text-align: center; }
.admin-payment-reminder-status { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 16px 16px; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; color: #78350f; background: #fffbeb; font-size: 11px; }
.admin-payment-reminder-status span { color: #92400e; text-align: right; }
.admin-payment-verification { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; margin: 0 16px 16px; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; color: #14532d; background: #f0fdf4; }
.admin-payment-verification div { display: grid; gap: 4px; }
.admin-payment-verification div:nth-child(2) { justify-items: end; text-align: right; }
.admin-payment-verification span, .admin-payment-verification small { color: #166534; font-size: 11px; }
.admin-payment-verification small { grid-column: 1 / -1; }
.admin-refund-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; margin: 0 16px 16px; border: 1px solid #fecaca; border-radius: 8px; padding: 12px; color: #7f1d1d; background: #fff1f2; }
.admin-refund-summary div { display: grid; gap: 4px; }
.admin-refund-summary div:nth-child(2) { justify-items: end; text-align: right; }
.admin-refund-summary span, .admin-refund-summary small { color: #991b1b; font-size: 11px; }
.admin-refund-summary small { grid-column: 1 / -1; border-top: 1px solid #fecaca; padding-top: 7px; }
.admin-return-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; margin: 0 16px 16px; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px; color: #0c4a6e; background: #eff6ff; }
.admin-return-summary.closed { border-color: #bbf7d0; color: #14532d; background: #f0fdf4; }
.admin-return-summary div { display: grid; gap: 4px; }
.admin-return-summary div:nth-child(2) { justify-items: end; text-align: right; }
.admin-return-summary span, .admin-return-summary small { color: inherit; font-size: 11px; }
.admin-return-summary small { grid-column: 1 / -1; border-top: 1px solid currentColor; padding-top: 7px; opacity: .85; }
.admin-return-lines, .admin-return-inspection { display: grid; gap: 9px; }
.admin-return-inspection article { display: grid; grid-template-columns: minmax(180px,1fr) repeat(2,minmax(130px,.7fr)); gap: 8px; align-items: center; border: 1px solid #dbe4ef; border-radius: 8px; padding: 10px; }
.admin-return-inspection article b, .admin-return-inspection article span { grid-column: 1 / -1; }
.admin-return-inspection article input { grid-column: 1 / -1; }
.admin-return-current { display: flex; justify-content: space-between; gap: 14px; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px; background: #eff6ff; }
.admin-inventory-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-inventory-table td:first-child b, .admin-inventory-table td:first-child small { display: block; }
.admin-inventory-table td:first-child small { margin-top: 4px; color: #64748b; }
.admin-inventory-table tr.inventory-low { background: #fff7ed; }
.admin-inventory-adjustment-form { display: grid; grid-template-columns: 75px 65px minmax(150px,1fr) auto; gap: 6px; min-width: 410px; }
.admin-inventory-adjustment-form input { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; }
.admin-inventory-adjustment-form button { border: 0; border-radius: 6px; padding: 0 10px; color: #fff; background: #10233c; font-weight: 900; cursor: pointer; }
.admin-inventory-movements { display: grid; padding: 8px 14px 16px; }
.admin-inventory-movements article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.admin-inventory-movements article:last-child { border-bottom: 0; }
.admin-inventory-movements div { display: grid; gap: 3px; }
.admin-inventory-movements b { font-size: 12px; }
.admin-inventory-movements span, .admin-inventory-movements small { color: #64748b; font-size: 10px; }
.admin-inventory-movements small { grid-column: 1 / -1; }
.admin-inventory-movements strong { color: #15803d; font-size: 15px; }
.admin-inventory-movements strong.negative { color: #b91c1c; }
.admin-inventory-reservation { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; margin: 0 16px 16px; border: 1px solid #c4b5fd; border-radius: 8px; padding: 12px; color: #4c1d95; background: #f5f3ff; }
.admin-inventory-reservation.consumed { border-color: #bbf7d0; color: #14532d; background: #f0fdf4; }
.admin-inventory-reservation.released { border-color: #e2e8f0; color: #475569; background: #f8fafc; }
.admin-inventory-reservation div { display: grid; gap: 4px; }
.admin-inventory-reservation div:last-child { justify-items: end; text-align: right; }
.admin-inventory-reservation span { color: inherit; font-size: 11px; }
.admin-users-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-user-list { display: grid; gap: 10px; padding: 14px; }
.admin-user-list article { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,1.2fr); gap: 10px 18px; border: 1px solid #dbe4ef; border-radius: 8px; padding: 12px; background: #fff; }
.admin-user-list article.disabled { opacity: .65; background: #f8fafc; }
.admin-user-list article > div:first-child { display: grid; gap: 4px; }
.admin-user-list article span, .admin-user-list article small { color: #64748b; font-size: 11px; }
.admin-user-list .admin-row-links { grid-column: 1 / -1; }
.admin-user-list select { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; }
.admin-user-permissions { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }
.admin-user-permissions span { border-radius: 999px; padding: 4px 7px; color: #334155; background: #e2e8f0; font-size: 9px; font-weight: 900; }
.admin-user-create-form { display: grid; gap: 11px; padding: 14px; }
.admin-user-create-form label { display: grid; gap: 5px; color: #334155; font-size: 11px; font-weight: 900; }
.admin-user-create-form input, .admin-user-create-form select { min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; }
.admin-database-status { display: grid; gap: 6px; margin: 0 14px 14px; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; color: #14532d; background: #f0fdf4; }
.admin-database-status span { font-size: 11px; }
.admin-database-status button { margin-top: 4px; justify-self: start; }
.admin-permission-notice { margin: 16px 22px 0; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; color: #78350f; background: #fffbeb; font-size: 12px; font-weight: 800; }
.admin-dashboard-refunds { display: grid; padding: 4px 16px 14px; }
.admin-dashboard-refund { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid #e2e8f0; padding: 12px 0; color: #0f172a; }
.admin-dashboard-refund:last-child { border-bottom: 0; }
.admin-dashboard-refund div { display: grid; gap: 3px; }
.admin-dashboard-refund div:last-child { justify-items: end; text-align: right; }
.admin-dashboard-refund b { font-size: 12px; }
.admin-dashboard-refund span, .admin-dashboard-refund small { color: #64748b; font-size: 11px; }
.admin-dashboard-refund strong { color: #b91c1c; font-size: 14px; }
.admin-clients-layout { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-clients-main { display: grid; gap: 16px; min-width: 0; }
.admin-client-filters { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border-bottom: 1px solid #e2e8f0; }
.admin-client-filters input, .admin-client-filters select { width: 100%; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; background: #fff; font-weight: 800; }
.admin-client-filters label span { display: block; margin-bottom: 4px; color: #64748b; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-client-filter-actions { display: flex; gap: 8px; }
.admin-client-filter-actions button { flex: 1; justify-content: center; }
.admin-client-list { display: grid; gap: 10px; padding: 12px; max-height: 760px; overflow: auto; }
.admin-client-empty { padding: 24px 12px; color: #64748b; text-align: center; }
.admin-client-empty b { display: block; color: #0f172a; font-size: 15px; }
.admin-client-empty p, .admin-client-empty-detail p { line-height: 1.5; }
.admin-client-empty-detail { padding: 28px; }
.admin-client-card { display: block; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; color: #0f172a; background: #fff; }
.admin-client-card.active { border-color: rgba(242,122,36,.7); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-client-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.admin-client-top b { display: block; font-size: 14px; line-height: 1.25; }
.admin-client-top p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-client-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.admin-client-stats article { border: 1px solid #e2e8f0; border-radius: 7px; padding: 9px; background: #f8fafc; }
.admin-client-stats span { display: block; color: #64748b; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-client-stats b { display: block; margin-top: 4px; font-size: 12px; line-height: 1.2; }
.admin-client-hero { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 18px; align-items: center; padding: 18px; color: #fff; background: linear-gradient(135deg,#10233c,#1a6d8d); }
.admin-client-hero h2 { margin: 0; font-size: 28px; line-height: 1.12; }
.admin-client-hero p { margin: 8px 0 0; color: #dbeafe; font-size: 14px; line-height: 1.45; }
.admin-client-hero img { width: 128px; height: 128px; object-fit: contain; justify-self: end; filter: drop-shadow(0 18px 22px rgba(0,0,0,.28)); }
.admin-client-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 14px; border-bottom: 1px solid #e2e8f0; }
.admin-client-actions a, .admin-client-actions button { display: grid; align-content: center; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 0 10px; color: #0f172a; background: #fff; font-weight: 900; text-align: center; cursor: pointer; }
.admin-client-actions .primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-client-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.admin-client-detail-grid article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.admin-client-detail-grid span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-client-detail-grid b { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; }
.admin-client-detail-grid p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-client-edit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-client-edit-grid label { display: grid; gap: 6px; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-client-edit-grid input, .admin-client-edit-grid select { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #fff; color: #0f172a; font-weight: 800; text-transform: none; }
.admin-clients-bottom { display: grid; grid-template-columns: minmax(0,1.25fr) 340px; gap: 16px; align-items: start; }
.admin-product-table td small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; }
.admin-client-products { display: grid; gap: 10px; padding: 14px; }
.admin-client-products article { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.admin-client-products b { display: block; font-size: 13px; }
.admin-client-products span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-connected-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; padding: 18px 22px 22px; align-items: start; }
.admin-connected-main { display: grid; gap: 16px; min-width: 0; }
.admin-connected-side { display: grid; gap: 16px; min-width: 0; }
.admin-connected-hero { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 18px; align-items: center; padding: 18px; color: #fff; background: linear-gradient(135deg,#10233c,#1a6d8d); }
.admin-connected-hero h2 { margin: 0; font-size: 28px; line-height: 1.12; }
.admin-connected-hero p { margin: 8px 0 0; color: #dbeafe; font-size: 14px; line-height: 1.45; }
.admin-connected-hero img { width: 124px; height: 124px; object-fit: contain; justify-self: end; filter: drop-shadow(0 18px 22px rgba(0,0,0,.28)); }
.admin-connected-actions { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; padding: 14px; border-bottom: 1px solid #e2e8f0; }
.admin-connected-actions a, .admin-connected-actions button { display: grid; align-content: center; justify-content: center; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 0 10px; color: #0f172a; background: #fff; font-weight: 900; text-align: center; cursor: pointer; }
.admin-connected-actions .primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-connected-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; align-items: start; }
.admin-connected-grid .admin-product-table { min-width: 560px; }
.admin-order-workflow.connected { grid-template-columns: 1fr; }
.admin-connected-alerts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.admin-connected-alerts article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.admin-connected-alerts article.ok { border-color: #bbf7d0; background: #f0fdf4; }
.admin-connected-alerts article.warn { border-color: #fed7aa; background: #fff7ed; }
.admin-connected-alerts b { display: block; font-size: 13px; }
.admin-connected-alerts p { margin: 6px 0 0; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-connected-client { display: grid; gap: 10px; padding: 16px; text-align: center; }
.admin-connected-avatar { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto; border-radius: 10px; color: #fff; background: #10233c; font-size: 18px; font-weight: 900; }
.admin-connected-client > b { display: block; font-size: 18px; }
.admin-connected-client > p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.4; }
.admin-connected-history { display: grid; gap: 10px; padding: 14px; }
.admin-connected-history article { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.admin-connected-history b { display: block; font-size: 13px; }
.admin-connected-history span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-order-actions.connected { grid-template-columns: 1fr; }
.admin-seo-score-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 16px; padding: 18px 22px 0; align-items: stretch; }
.admin-seo-score { display: grid; place-items: center; min-height: 178px; border-radius: 8px; color: #fff; background: radial-gradient(circle at 50% 35%, rgba(16,184,216,.22), transparent 50%), #10233c; text-align: center; box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.admin-seo-score b { display: block; font-size: 52px; line-height: 1; }
.admin-seo-score span { display: block; margin-top: 6px; color: #dbeafe; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.admin-seo-score p { max-width: 150px; margin: 10px auto 0; color: #dbeafe; font-size: 12px; line-height: 1.35; }
.admin-metric-grid.seo { padding: 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-seo-layout { display: grid; grid-template-columns: 310px minmax(0,1fr) 260px; gap: 14px; padding: 18px 22px 22px; align-items: start; }
.admin-seo-main { display: grid; gap: 16px; min-width: 0; }
.admin-seo-side { display: grid; gap: 16px; min-width: 0; }
.admin-seo-redirect-list { display: grid; gap: 10px; padding: 12px; max-height: 760px; overflow: auto; }
.admin-seo-redirect-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: start; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; color: #0f172a; background: #fff; }
.admin-seo-redirect-card.active { border-color: rgba(242,122,36,.7); background: #fff7ed; box-shadow: inset 4px 0 0 var(--orange); }
.admin-seo-redirect-card b { display: block; font-family: Consolas, monospace; font-size: 13px; word-break: break-all; }
.admin-seo-redirect-card p { margin: 6px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-seo-case { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.admin-seo-case article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.admin-seo-case span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-seo-case b { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; word-break: break-word; }
.admin-seo-case p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; word-break: break-word; }
.admin-seo-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.admin-seo-form label { display: grid; gap: 6px; color: #334155; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.admin-seo-form label.wide { grid-column: 1 / -1; }
.admin-seo-form input, .admin-seo-form select, .admin-seo-form textarea { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #fff; color: #0f172a; font-weight: 800; text-transform: none; }
.admin-seo-form textarea { min-height: 92px; padding-top: 10px; resize: vertical; line-height: 1.45; }
.admin-seo-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; background: #f8fafc; }
.admin-seo-actions a, .admin-seo-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 12px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 900; cursor: pointer; }
.admin-seo-actions .primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.admin-seo-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start; }
.admin-seo-task-list { display: grid; gap: 10px; padding: 14px; }
.admin-seo-task-list article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.admin-seo-task-list article > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #fff; background: #10233c; font-weight: 900; }
.admin-seo-task-list article > span.red { background: #b42318; }
.admin-seo-task-list article > span.orange { background: #b7791f; }
.admin-seo-task-list article > span.green { background: #16a36a; }
.admin-seo-task-list b { display: block; font-size: 13px; }
.admin-seo-task-list p { margin: 4px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-seo-family-map { display: grid; gap: 10px; padding: 14px; }
.admin-seo-family-map article { border: 1px solid #e2e8f0; border-radius: 8px; padding: 11px; background: #fff; }
.admin-seo-family-map b { display: block; font-size: 13px; }
.admin-seo-family-map p { margin: 5px 0 9px; color: #64748b; font-size: 12px; line-height: 1.35; }
.admin-seo-family-map div { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.admin-seo-family-map div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#10b8d8,#f27a24); }
.admin-seo-guide { padding: 14px; border-bottom: 1px solid #e2e8f0; }
.admin-seo-guide:last-child { border-bottom: 0; }
.admin-seo-guide b { display: block; font-size: 13px; }
.admin-seo-guide p { margin: 6px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.admin-seo-checks { display: grid; gap: 10px; padding: 14px; }
.admin-seo-checks article { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.admin-seo-checks b { font-size: 13px; }
.imported-product-shell { display: grid; grid-template-columns: 500px minmax(0,1fr); gap: 32px; padding: 26px 32px 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.imported-gallery { display: grid; gap: 12px; }
.imported-main-image { display: grid; place-items: center; min-height: 430px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; color: #075985; background: radial-gradient(circle at 75% 20%, rgba(16,184,216,.16), transparent 28%), #f8fafc; font-size: 28px; font-weight: 900; }
.imported-main-image img { width: 100%; height: 430px; object-fit: contain; padding: 24px; }
.imported-main-image .fake-img { min-height: 430px; padding: 24px; text-align: center; }
.product-secondary-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.product-secondary-thumb { position: relative; display: grid; place-items: center; min-height: 86px; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; }
.product-secondary-thumb:hover, .product-secondary-thumb.active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(242,122,36,.15); }
.product-secondary-thumb img { width: 100%; height: 86px; object-fit: contain; padding: 6px; }
.product-secondary-thumb .fake-img { min-height: 86px; padding: 8px; font-size: 11px; }
.product-thumb-label { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 999px; background: rgba(10,31,55,.9); color: #fff; font-size: 10px; font-weight: 900; }
.imported-actions { display: grid; grid-template-columns: minmax(170px,1fr) repeat(2, minmax(100px, auto)); gap: 10px; }
.imported-product-content { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; margin-top: 24px; padding: 0 32px 38px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.commercial-hero { position: relative; overflow: hidden; padding: 34px; color: #fff; border-radius: 8px; background: radial-gradient(circle at 84% 18%, rgba(242,122,36,.18), transparent 25%), radial-gradient(circle at 70% 75%, rgba(16,184,216,.24), transparent 28%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.commercial-hero:before { content: ""; position: absolute; right: 48px; top: -18px; width: 190px; height: 190px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center/contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.24)); pointer-events: none; }
.commercial-hero > * { position: relative; z-index: 1; }
.commercial-hero h1 { margin: 0; font-size: 38px; line-height: 1.08; letter-spacing: 0; }
.commercial-hero p { max-width: 850px; margin: 12px 0 0; color: #dbeafe; line-height: 1.55; }
.commercial-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.commercial-stats span { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 0 10px; background: rgba(15,23,42,.32); color: #eaf6ff; font-size: 13px; }
.commercial-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 24px; margin-top: 24px; }
.commercial-side { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.commercial-side h2 { margin: 0; padding: 15px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: 17px; }
.commercial-side a { display: block; padding: 12px 14px; border-bottom: 1px solid #e2e8f0; }
.commercial-side a.active { background: #e0f2fe; }
.commercial-side a.muted { opacity: .62; }
.commercial-side b { display: block; font-size: 14px; }
.commercial-side span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.commercial-family-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
.commercial-family-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; }
.commercial-family-card.muted { background: #f8fafc; opacity: .72; }
.commercial-family-card b { display: block; font-size: 15px; }
.commercial-family-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.commercial-family-card span { color: #075985; font-size: 13px; font-weight: 900; white-space: nowrap; }
.commercial-family-card a { grid-column: 1 / -1; display: inline-flex; justify-content: center; min-height: 34px; align-items: center; border-radius: 6px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.commercial-products { display: grid; gap: 10px; padding: 16px; }
.commercial-product-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 14px; align-items: center; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.commercial-product-row.muted { background: #f8fafc; opacity: .65; }
.commercial-product-row b { display: block; font-size: 14px; }
.commercial-product-row p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.commercial-product-row span { font-weight: 900; white-space: nowrap; }
.commercial-product-row a { display: inline-flex; justify-content: center; align-items: center; min-height: 32px; border-radius: 6px; padding: 0 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.commercial-order-controls { display: flex; gap: 6px; align-items: center; }
.commercial-order-controls button { min-height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; color: #0f172a; background: #f8fafc; font-size: 12px; font-weight: 900; cursor: pointer; }
.commercial-order-controls button:hover { border-color: #0e7490; color: #075985; background: #e0f2fe; }
.compact-note { color: #475569; font-size: 13px; line-height: 1.45; border-bottom: 1px solid #e2e8f0; }
.commercial-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
.commercial-groups article { border: 1px solid #fed7aa; border-radius: 8px; padding: 13px; background: #fff7ed; }
.commercial-groups b { display: block; color: #9a3412; font-size: 13px; line-height: 1.35; }
.commercial-groups p { margin: 6px 0 0; color: #475569; font-size: 13px; }
.rack-group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.rack-group-grid article { border: 1px solid #c8e7f0; border-radius: 8px; padding: 14px; background: linear-gradient(135deg, #f0f9ff, #fff); }
.rack-group-grid b { display: block; font-size: 15px; }
.rack-group-grid p { margin: 7px 0 12px; color: var(--muted); font-size: 13px; }
.rack-group-grid a { display: inline-flex; align-items: center; min-height: 32px; border-radius: 6px; padding: 0 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.rack-grouped-layout { display: grid; gap: 18px; margin-top: 24px; }
.rack-product-section { margin-top: 0; scroll-margin-top: 18px; }
.rack-section-note { padding: 12px 16px 0; color: #475569; font-size: 13px; line-height: 1.45; }
.rack-product-groups-panel { margin-top: 24px; }
.rack-product-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 16px; }
.rack-product-group-card { display: grid; gap: 14px; border: 1px solid #c8e7f0; border-radius: 8px; padding: 15px; background: linear-gradient(135deg,#f0f9ff,#fff); box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.rack-group-kicker { display: inline-flex; min-height: 24px; align-items: center; border-radius: 999px; padding: 0 8px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.rack-product-group-card h3 { margin: 9px 0 0; font-size: 18px; line-height: 1.2; }
.rack-product-group-card p { margin: 7px 0 0; color: #475569; font-size: 13px; line-height: 1.4; }
.rack-group-summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid #d9e2ee; padding-top: 12px; }
.rack-group-summary span { color: #64748b; font-size: 12px; font-weight: 900; }
.rack-group-summary b { font-size: 18px; }
.rack-group-variants { display: grid; gap: 8px; }
.rack-group-variants a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 36px; border: 1px solid #d9e2ee; border-radius: 6px; padding: 0 10px; background: #fff; }
.rack-group-variants span { color: #0f172a; font-size: 13px; font-weight: 900; }
.rack-group-variants b { color: #075985; font-size: 13px; white-space: nowrap; }
.rack-group-main-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 6px; padding: 0 12px; color: #fff; background: var(--orange); font-size: 13px; font-weight: 900; }
.cable-summary-panel { margin-top: 24px; }
.cable-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; }
.cable-summary-card { display: grid; gap: 12px; border: 1px solid #c8e7f0; border-radius: 8px; padding: 14px; background: linear-gradient(135deg,#f0f9ff,#fff); box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.cable-summary-card h3 { margin: 0; font-size: 17px; line-height: 1.2; }
.cable-summary-card p { margin: 0; color: #475569; font-size: 13px; line-height: 1.4; }
.cable-summary-card a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 6px; padding: 0 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.fiber-summary-panel { margin-top: 24px; }
.fiber-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.fiber-summary-card { display: flex; flex-direction: column; border: 1px solid #c8e7f0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.fiber-summary-image { position: relative; display: grid; place-items: center; height: 260px; overflow: hidden; background: #fff; }
.fiber-summary-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; transition: transform .18s ease; }
.fiber-summary-image .fiber-summary-action { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 6px; padding: 0 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.18); }
.fiber-summary-card:hover .fiber-summary-image img { transform: scale(1.03); }
.fiber-summary-body { display: grid; gap: 10px; flex: 1; padding: 13px; background: linear-gradient(135deg,#f0f9ff,#fff); }
.fiber-summary-card h3 { margin: 0; font-size: 17px; line-height: 1.2; }
.fiber-summary-card p { margin: 0; color: #475569; font-size: 13px; line-height: 1.4; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 18px; }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.05); }
.card b { display: block; font-size: 15px; }
.card p { margin: 7px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.42; }
.ref-line { color: #334155 !important; font-weight: 900; }
.card .btn, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 900; cursor: pointer; }
.btn.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.btn.dark { color: #fff; border-color: var(--navy); background: var(--navy); }
.product-card { display: grid; grid-template-rows: 150px auto; gap: 12px; }
.product-img { display: grid; place-items: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; overflow: hidden; }
.product-img img { width: 86%; max-height: 130px; object-fit: contain; }
.fake-img { display: grid; place-items: center; width: 100%; height: 100%; color: #075985; background: #eff6ff; font-weight: 900; }
.search-hero { padding: 28px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 80% 10%, rgba(16,184,216,.36), transparent 28%), linear-gradient(120deg, #10233c, #0e7490); }
.search-hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; letter-spacing: 0; }
.search-hero p { margin: 0; max-width: 820px; color: #dbeafe; line-height: 1.5; }
.search-confidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search-shell { display: grid; grid-template-columns: 286px minmax(0,1fr); gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.search-filters { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow: hidden; }
.search-filters h2 { margin: 0; padding: 15px; font-size: 16px; border-bottom: 1px solid var(--line); background: #fff; }
.filter-note { padding: 12px 15px; color: #075985; background: #e0f2fe; font-size: 12px; line-height: 1.45; }
.filter-group { padding: 14px 15px; border-bottom: 1px solid #e2e8f0; }
.filter-group:last-child { border-bottom: 0; }
.filter-group b { display: block; margin-bottom: 10px; font-size: 13px; }
.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; color: #475569; font-size: 13px; }
.check span { display: inline-flex; flex: 0 0 auto; width: 15px; height: 15px; border: 1px solid #94a3b8; border-radius: 3px; background: #fff; }
.check.active span { border-color: #0e7490; background: #0e7490; box-shadow: inset 0 0 0 3px #fff; }
.search-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.search-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #d9e2ee; color: #334155; background: #fff; font-size: 13px; font-weight: 900; }
.search-tab.active { color: #fff; border-color: #10233c; background: #10233c; }
.search-result-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.search-result-head h2 { margin: 0; font-size: 24px; }
.search-result-head p { margin: 6px 0 0; color: #64748b; }
.search-sort { min-width: 200px; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #334155; background: #fff; font-weight: 800; }
.search-exact { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; gap: 16px; align-items: center; margin-bottom: 18px; border: 2px solid rgba(242,122,36,.4); border-radius: 8px; padding: 14px; background: #fff7ed; }
.search-exact-img { display: grid; place-items: center; height: 96px; border-radius: 8px; background: #fff; overflow: hidden; }
.search-exact-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.search-exact-img .fake-img { min-height: 96px; }
.search-exact-copy b { display: block; font-size: 17px; }
.search-exact-copy p { margin: 6px 0 0; color: #7c2d12; line-height: 1.45; }
.search-exact-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; white-space: nowrap; }
.search-empty { margin-bottom: 18px; border: 1px solid #fed7aa; border-radius: 8px; padding: 16px; background: #fff7ed; }
.search-empty b { display: block; color: #9a3412; }
.search-empty p { margin: 7px 0 12px; color: #475569; line-height: 1.45; }
.search-section { padding: 20px 0; border-top: 1px solid #e2e8f0; }
.search-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.search-section-title h3 { margin: 0; font-size: 20px; }
.search-section-title span { color: var(--muted); font-size: 13px; font-weight: 900; }
.search-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.search-product-card { display: flex; flex-direction: column; min-height: 370px; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
.search-product-image { position: relative; display: grid; place-items: center; height: 142px; overflow: hidden; color: #075985; background: #f8fafc; font-weight: 900; }
.search-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.search-product-image .fake-img { min-height: 142px; }
.search-product-label { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; color: #fff; background: rgba(15,23,42,.78); font-size: 11px; font-weight: 900; }
.search-product-body { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.search-product-body h4 { margin: 0 0 7px; font-size: 16px; line-height: 1.25; }
.search-product-body p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.search-variant-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.search-variant { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 42px; padding: 0 8px; border: 1px solid #d9e2ee; border-radius: 6px; color: #334155; background: #fff; font-size: 12px; font-weight: 900; }
.search-variant.active { color: #fff; border-color: var(--orange); background: var(--orange); }
.search-variant.disabled { color: #94a3b8; background: #f1f5f9; text-decoration: line-through; }
.search-price-row { display: flex; justify-content: space-between; gap: 10px; align-items: end; margin-top: auto; padding-top: 14px; }
.search-card-price b { font-size: 27px; line-height: 1.05; white-space: nowrap; }
.search-card-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--orange); color: #fff; background: var(--orange); font-size: 12px; font-weight: 900; }
.search-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.search-info-card { border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; }
.search-info-card b { display: block; font-size: 15px; }
.search-info-card p { margin: 7px 0 12px; color: #64748b; font-size: 13px; line-height: 1.45; }
.search-info-card a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.catalog-hero { position: relative; overflow: hidden; margin-top: 14px; padding: 36px 32px; color: #fff; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, rgba(7,17,31,.98), rgba(12,58,84,.92) 58%, rgba(16,113,144,.72)), url("/assets/latiguillo-fibra-om3.jpg") right center / 520px auto no-repeat; }
.catalog-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(16,184,216,.28), transparent 28%), radial-gradient(circle at 70% 76%, rgba(242,122,36,.16), transparent 26%); pointer-events: none; }
.catalog-hero:after { content: ""; position: absolute; right: -100px; top: -130px; width: 500px; height: 500px; border: 12px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.catalog-brand-mark { position: absolute; left: 50%; top: 16px; z-index: 1; width: 116px; height: 116px; object-fit: contain; opacity: .95; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.catalog-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.catalog-hero h1 { margin: 18px 0 12px; font-size: 42px; line-height: 1.06; letter-spacing: 0; }
.catalog-hero p { margin: 0; color: #eaf6ff; font-size: 17px; line-height: 1.5; }
.catalog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.catalog-tags span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: rgba(15,23,42,.35); color: #eaf6ff; font-size: 12px; font-weight: 900; }
.catalog-shell { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.catalog-filters { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow: hidden; }
.catalog-filters h2 { margin: 0; padding: 15px; font-size: 16px; border-bottom: 1px solid var(--line); background: #fff; }
.catalog-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 16px; }
.catalog-head h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.catalog-head p { margin: 6px 0 0; color: #64748b; line-height: 1.45; }
.catalog-sort { min-width: 180px; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; color: #334155; background: #fff; font-weight: 800; }
.catalog-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.catalog-active-filters span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: #075985; background: #e0f2fe; font-size: 12px; font-weight: 900; }
.catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.catalog-card { display: flex; flex-direction: column; min-height: 388px; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
.catalog-image { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; color: #075985; background: #f8fafc; font-weight: 900; }
.catalog-image img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.catalog-image .fake-img { min-height: 150px; }
.catalog-label { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; color: #fff; background: rgba(15,23,42,.78); font-size: 11px; font-weight: 900; }
.catalog-body { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.catalog-body h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.25; letter-spacing: 0; }
.catalog-body p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.catalog-variant-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.catalog-variant { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 42px; padding: 0 8px; border: 1px solid #d9e2ee; border-radius: 6px; color: #334155; background: #fff; font-size: 12px; font-weight: 900; }
.catalog-variant.disabled { color: #94a3b8; background: #f1f5f9; text-decoration: line-through; }
.catalog-price-row { display: flex; justify-content: space-between; gap: 10px; align-items: end; margin-top: auto; padding-top: 14px; }
.catalog-actions { display: flex; gap: 8px; margin-top: 12px; }
.catalog-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 12px; font-weight: 900; }
.catalog-btn.primary { flex: 1; border-color: var(--orange); background: var(--orange); color: #fff; }
.catalog-guide { margin-top: 22px; border: 1px solid #c8e7f0; border-radius: 8px; padding: 16px; background: linear-gradient(135deg, #f0f9ff, #fff); }
.catalog-guide h3 { margin: 0 0 8px; font-size: 18px; }
.catalog-guide p { margin: 0 0 12px; color: #475569; line-height: 1.5; }
.catalog-guide div { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-guide a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 6px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.price { font-size: 22px; font-weight: 900; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; color: #075985; background: #e0f2fe; font-size: 11px; font-weight: 900; white-space: nowrap; }
.badge.green { color: #065f46; background: #dcfce7; }
.badge.orange { color: #7c2d12; background: #ffedd5; }
.layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.panel + .panel { margin-top: 18px; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.panel-head h2 { margin: 0; font-size: 19px; }
.panel-body { padding: 16px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; color: #64748b; font-size: 13px; font-weight: 900; }
.breadcrumb span { color: #94a3b8; }
.product-shell { display: grid; grid-template-columns: 500px minmax(0,1fr); gap: 32px; padding: 26px 32px 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.gallery { display: grid; gap: 12px; }
.main-image { display: grid; place-items: center; min-height: 430px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 75% 20%, rgba(16,184,216,.12), transparent 28%), #f8fafc; }
.main-image img { width: 100%; height: 430px; object-fit: contain; padding: 24px; }
.main-image .fake-img { min-height: 430px; }
.simple-product-shell { display: grid; grid-template-columns: 500px minmax(0,1fr); gap: 32px; padding: 26px 32px 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.simple-gallery { display: grid; gap: 12px; }
.simple-main-image { display: grid; place-items: center; min-height: 430px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; color: #075985; background: radial-gradient(circle at 75% 20%, rgba(16,184,216,.16), transparent 28%), #f8fafc; font-size: 52px; font-weight: 900; }
.simple-main-image img { width: 100%; height: 430px; object-fit: contain; padding: 24px; }
.simple-main-image .fake-img { min-height: 430px; font-size: 52px; }
.thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.thumb { display: grid; place-items: center; height: 78px; border: 1px solid #d9e2ee; border-radius: 8px; color: #075985; background: #f8fafc; font-size: 12px; font-weight: 900; cursor: pointer; text-align: center; text-decoration: none; }
.thumb.active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,122,36,.14); }
.product-info h1 { margin: 0 0 8px; font-size: 36px; line-height: 1.08; letter-spacing: 0; }
.product-ref-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 900; }
.product-summary { margin: 18px 0 0; color: #475569; font-size: 16px; line-height: 1.6; }
.variant-panel { margin-top: 20px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 16px; background: #f8fafc; }
.variant-panel h2 { margin: 0 0 10px; font-size: 18px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 38px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.choice.active { color: #fff; border-color: var(--orange); background: var(--orange); }
.choice.disabled { color: #94a3b8; background: #f1f5f9; text-decoration: line-through; }
.variant-help { margin: 10px 0 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.buy-box { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: end; margin-top: 20px; border: 1px solid #c8e7f0; border-radius: 8px; padding: 18px; background: linear-gradient(135deg, #f0f9ff, #fff); }
.price span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.price b { display: block; margin-top: 5px; font-size: 34px; }
.selected-ref { margin-top: 6px; color: #475569; font-size: 13px; font-weight: 900; }
.buy-actions { display: grid; grid-template-columns: 96px 190px; gap: 10px; }
.qty { min-height: 44px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; text-align: center; font-weight: 900; background: #fff; }
.add { min-height: 44px; border: 0; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; cursor: pointer; }
.quick-data { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.data-card { border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.data-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.data-card b { display: block; margin-top: 6px; font-size: 14px; }
.unavailable-product { display: grid; grid-template-columns: 430px minmax(0,1fr); gap: 28px; padding: 34px 32px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; background: linear-gradient(180deg,#f8fafc,#fff); box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.unavailable-photo { position: relative; display: grid; place-items: center; min-height: 390px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.unavailable-photo:before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; opacity: .10; background: url("/assets/logo-zonasonyek-08-transparente.png") center/contain no-repeat; }
.unavailable-photo img { position: relative; width: 310px; height: auto; object-fit: contain; }
.unavailable-photo .fake-img { position: relative; min-height: 210px; min-width: 210px; border-radius: 8px; font-size: 26px; }
.unavailable-status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: #7c2d12; background: #ffedd5; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.unavailable-product h1 { margin: 14px 0 8px; font-size: 36px; line-height: 1.1; letter-spacing: 0; }
.unavailable-ref { color: #64748b; font-weight: 900; }
.unavailable-desc { max-width: 700px; margin: 16px 0 0; color: #475569; font-size: 16px; line-height: 1.55; }
.unavailable-message { margin-top: 18px; border: 1px solid #fed7aa; border-radius: 8px; padding: 14px; background: #fff7ed; }
.unavailable-message b { display: block; color: #9a3412; font-size: 15px; }
.unavailable-message p { margin: 6px 0 0; color: #475569; font-size: 13px; line-height: 1.45; }
.unavailable-details { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0 32px 28px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; }
.unavailable-content { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 1px solid #e2e8f0; border-radius: 0 0 8px 8px; background: #fff; }
.unavailable-alts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.unavailable-alt { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.unavailable-alt-img { display: grid; place-items: center; height: 118px; border-radius: 6px; background: #eff6ff; color: #075985; font-weight: 900; }
.unavailable-alt b { display: block; margin-top: 10px; font-size: 14px; }
.unavailable-alt p { margin: 6px 0 10px; color: #64748b; font-size: 13px; line-height: 1.35; }
.unavailable-alt a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.unavailable-notify { display: grid; gap: 10px; }
.unavailable-notify input { width: 100%; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; }
.unavailable-notify button { min-height: 42px; border: 0; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; cursor: pointer; }
.unavailable-notify p { margin: 0; color: #065f46; font-size: 13px; font-weight: 900; }
.product-content-shell { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; margin-top: 24px; padding: 0 32px 38px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.simple-product-content { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; margin-top: 24px; padding: 0 32px 38px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.product-shell, .simple-product-shell, .imported-product-shell, .product-info, .buy-box, .product-section { scroll-margin-top: 22px; }
.product-section { padding: 26px 0; border-top: 1px solid #e2e8f0; }
.product-section:first-child { border-top: 0; }
.product-section h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: 0; }
.product-section p { margin: 0 0 12px; color: #475569; font-size: 15px; line-height: 1.6; }
.tech-table { width: 100%; border-collapse: collapse; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; }
.tech-table th, .tech-table td { padding: 13px; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 14px; }
.tech-table th { width: 32%; color: #334155; background: #f8fafc; }
.tech-table tr:last-child th, .tech-table tr:last-child td { border-bottom: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.simple-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.related-card { display: flex; flex-direction: column; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; }
.related-img { display: grid; place-items: center; height: 150px; margin-bottom: 12px; border-radius: 8px; overflow: hidden; color: #075985; background: #f8fafc; font-weight: 900; }
.related-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.image-load-fallback { display: grid; place-items: center; width: 100%; min-height: 120px; padding: 18px; color: #075985; background: linear-gradient(145deg, #eff6ff, #f8fafc); text-align: center; font-weight: 900; }
.main-image > .image-load-fallback, .imported-main-image > .image-load-fallback { min-height: 430px; font-size: 24px; }
.real-product-image > .image-load-fallback { min-height: 300px; }
.fiber-summary-image > .image-load-fallback { height: 100%; }
.image-load-fallback[hidden] { display: none !important; }
.related-card b { display: block; font-size: 15px; }
.related-card p { color: var(--muted); font-size: 13px; line-height: 1.4; }
.related-card .btn { margin-top: auto; }
.side-panel { margin-top: 26px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 16px; background: #f8fafc; }
.side-panel h3 { margin: 0 0 10px; font-size: 18px; }
.side-panel a { display: flex; min-height: 34px; align-items: center; color: #075985; font-size: 13px; font-weight: 900; }
.side-panel p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.simple-brand-box { display: grid; place-items: center; text-align: center; color: #dbeafe; background: radial-gradient(circle at 50% 40%, rgba(16,184,216,.16), transparent 55%), #10233c; }
.simple-brand-box img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.3)); }
.simple-brand-box p { max-width: 240px; color: #dbeafe; }
.cart-hero { margin-bottom: 24px; padding: 30px 32px; color: #fff; border-radius: 8px; background: radial-gradient(circle at 80% 10%, rgba(16,184,216,.36), transparent 28%), linear-gradient(120deg, #10233c, #0e7490); box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.cart-hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; }
.cart-hero p { margin: 0; color: #dbeafe; line-height: 1.5; }
.cart-shell { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0,1fr) 120px 92px 74px; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; }
.cart-item:last-child { border-bottom: 0; }
.item-img { display: grid; place-items: center; height: 82px; border: 1px solid #d9e2ee; border-radius: 8px; background: #f8fafc; overflow: hidden; color: #075985; font-weight: 900; }
.item-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.item-img .fake-img { height: 82px; }
.item-copy b { display: block; font-size: 16px; }
.item-copy p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.item-price span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.item-price b { display: block; margin-top: 5px; font-size: 18px; }
.cart-qty { width: 88px; height: 42px; border: 1px solid #cbd5e1; border-radius: 6px; text-align: center; font-weight: 900; }
.remove { display: grid; place-items: center; justify-self: end; width: 64px; min-height: 56px; border: 1px solid #cbd5e1; border-radius: 6px; color: #64748b; background: #fff; cursor: pointer; font-weight: 900; line-height: 1; }
.remove span { display: block; margin-top: 4px; font-size: 11px; line-height: 1; }
.review-grid { display: grid; gap: 12px; padding: 16px; }
.review { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; }
.review-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #075985; background: #e0f2fe; font-weight: 900; }
.review b { display: block; font-size: 14px; }
.review p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.mini-btn.primary { color: #fff; border-color: var(--orange); background: var(--orange); }
.suggestions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.suggest { display: flex; flex-direction: column; min-height: 205px; border: 1px solid #d9e2ee; border-radius: 8px; overflow: hidden; background: #fff; }
.suggest-img { display: grid; place-items: center; height: 72px; color: #075985; background: #f8fafc; font-weight: 900; }
.suggest-body { display: flex; flex-direction: column; flex: 1; padding: 11px; }
.suggest-body b { display: block; font-size: 13px; line-height: 1.25; }
.suggest-body p { margin: 6px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.suggest-actions { display: flex; gap: 8px; margin-top: auto; }
.summary-panel { position: sticky; top: 18px; align-self: start; }
.summary-body { padding: 16px; }
.summary { display: grid; gap: 10px; }
.summary-row { display: flex; justify-content: space-between; gap: 18px; }
.summary-row.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid #cbd5e1; font-size: 22px; font-weight: 900; }
.shipping-box { margin-top: 14px; border: 1px solid #bfdbfe; border-radius: 8px; padding: 13px; background: #eff6ff; }
.shipping-box b { display: block; color: #075985; font-size: 14px; }
.shipping-box p { margin: 6px 0 0; color: #475569; font-size: 13px; line-height: 1.4; }
.progress { height: 9px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: #dbeafe; }
.progress span { display: block; height: 100%; background: var(--orange); }
.checkout { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 46px; margin-top: 16px; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; }
.secondary-actions { display: grid; gap: 8px; margin-top: 10px; }
.secondary-actions a { display: flex; justify-content: center; align-items: center; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 900; }
.brand-stamp { display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(16,184,216,.16), transparent 55%), #10233c; }
.brand-stamp img { width: 122px; height: 122px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.3)); }
.brand-stamp p { max-width: 260px; margin: 10px 0 0; color: #dbeafe; text-align: center; font-size: 13px; line-height: 1.45; }
.checkout-hero { position: relative; overflow: hidden; margin-bottom: 0; padding: 30px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.20), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.28), transparent 30%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); }
.checkout-hero:before { content: ""; position: absolute; right: 58px; top: -22px; width: 210px; height: 210px; opacity: .18; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); pointer-events: none; }
.checkout-hero > * { position: relative; z-index: 1; }
.checkout-hero h1 { margin: 0; font-size: 36px; line-height: 1.1; letter-spacing: 0; }
.checkout-hero p { max-width: 820px; margin: 12px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.checkout-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.step { padding: 13px; border: 1px solid #d9e2ee; border-radius: 8px; background: #f8fafc; }
.step b { display: block; margin-bottom: 4px; font-size: 13px; }
.step small { color: #64748b; line-height: 1.35; }
.step.done { border-color: #bbf7d0; background: #f0fdf4; }
.step.active { border-color: rgba(242,122,36,.45); background: #fff7ed; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 24px; margin-top: 24px; }
.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.mode { display: block; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; cursor: pointer; }
.mode.active { border-color: rgba(242,122,36,.5); background: #fff7ed; }
.mode input, .pay input { position: absolute; opacity: 0; pointer-events: none; }
.mode b { display: block; font-size: 15px; }
.mode p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.notice-grid { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; border: 1px solid #bfdbfe; border-radius: 8px; padding: 13px; background: #eff6ff; }
.notice-grid.compact { margin-top: 14px; }
.notice-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #075985; background: #dbeafe; font-weight: 900; }
.notice-grid b { display: block; color: #075985; font-size: 14px; }
.notice-grid p { margin: 5px 0 0; color: #475569; font-size: 13px; line-height: 1.4; }
.calc-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.calc { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.calc span { display: block; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.calc b { display: block; margin-top: 5px; font-size: 13px; }
.ship-options { display: grid; gap: 10px; margin-top: 14px; }
.ship { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #d9e2ee; border-radius: 8px; padding: 13px; background: #fff; cursor: pointer; }
.ship.active { border-color: rgba(242,122,36,.5); background: #fff7ed; }
.ship b { display: block; font-size: 14px; }
.ship p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ship strong { font-size: 18px; white-space: nowrap; }
.payment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.pay { min-height: 86px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 12px; background: #fff; cursor: pointer; }
.pay.active { border-color: rgba(242,122,36,.5); background: #fff7ed; }
.pay b { display: block; font-size: 14px; }
.pay span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.checkout-items { margin-bottom: 12px; }
.order-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.order-item:last-child { border-bottom: 0; }
.order-item .item-img { height: 52px; }
.order-item .item-img img { padding: 5px; }
.order-item .item-copy b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.order-item .item-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.order-item .item-price { font-weight: 900; white-space: nowrap; }
.confirm { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 46px; margin-top: 16px; border: 0; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; cursor: pointer; }
.secondary { display: grid; gap: 8px; margin-top: 10px; }
.secondary a { display: flex; justify-content: center; align-items: center; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 900; }
.confirm-hero { position: relative; overflow: hidden; margin-bottom: 0; padding: 34px 34px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 82% 24%, rgba(34,197,94,.18), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.26), transparent 30%), linear-gradient(112deg, #083047, #12607d 58%, #2b8daf); }
.confirm-hero:before { content: ""; position: absolute; right: 56px; top: -20px; width: 210px; height: 210px; opacity: .18; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.24)); pointer-events: none; }
.confirm-hero > * { position: relative; z-index: 1; }
.confirm-hero .kicker { border-color: rgba(34,197,94,.38); color: #dcfce7; background: rgba(22,163,74,.14); }
.confirm-hero h1 { max-width: 900px; margin: 10px 0 0; font-size: 36px; line-height: 1.1; letter-spacing: 0; }
.confirm-hero p { max-width: 820px; margin: 12px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.success { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; color: #052e16; background: #86efac; font-weight: 900; box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-actions .btn { min-height: 42px; border-color: rgba(255,255,255,.34); color: #fff; background: rgba(255,255,255,.10); }
.hero-actions .btn.primary { border-color: var(--orange); background: var(--orange); }
.confirm-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.confirmation-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 24px; margin-top: 24px; }
.status-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.status { border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; }
.status.ok { border-color: #bbf7d0; background: #f0fdf4; }
.status b { display: block; color: #0f172a; font-size: 14px; }
.status p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.timeline { display: grid; gap: 12px; }
.event { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.event:last-child { padding-bottom: 0; border-bottom: 0; }
.event b { display: block; font-size: 15px; }
.event p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: #052e16; background: #86efac; font-size: 13px; font-weight: 900; }
.dot.active { color: #fff; background: var(--orange); }
.dot.pending { color: #475569; background: #cbd5e1; }
.data-list { display: grid; gap: 10px; }
.data { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.data span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.data b { display: block; margin-top: 5px; font-size: 14px; line-height: 1.35; }
.side { position: sticky; top: 18px; align-self: start; display: grid; gap: 16px; }
.confirm-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid #cbd5e1; }
.confirm-total .summary-row { font-size: 18px; font-weight: 900; }
.side-actions { display: grid; gap: 8px; margin-top: 14px; }
.side-actions a { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 6px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 900; }
.side-actions a.primary { border-color: var(--orange); color: #fff; background: var(--orange); }
.email-page { padding: 28px 0 4px; }
.email-intro { max-width: 760px; margin: 0 auto 20px; }
.email-intro h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: 0; }
.email-intro p { margin: 0; color: #475569; line-height: 1.5; }
.email-shell { max-width: 760px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(15,23,42,.14); border-radius: 8px; background: #fff; box-shadow: 0 20px 54px rgba(15,23,42,.16); }
.email-preheader { padding: 10px 22px; color: #cbd5e1; background: #07111f; font-size: 12px; text-align: center; }
.email-header { position: relative; overflow: hidden; padding: 24px 28px; color: #fff; background: radial-gradient(circle at 82% 20%, rgba(242,122,36,.24), transparent 26%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.30), transparent 32%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); }
.email-header:before { content: ""; position: absolute; right: -18px; top: -28px; width: 180px; height: 180px; opacity: .20; background: url("/assets/logo-zonasonyek-08-transparente.png") center/contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); }
.email-header > * { position: relative; z-index: 1; }
.email-brand { display: flex; align-items: center; gap: 12px; }
.email-brand img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.22)); }
.email-brand b { display: block; font-size: 22px; text-transform: uppercase; }
.email-brand span { display: block; margin-top: 4px; color: #dbeafe; font-size: 13px; font-weight: 800; }
.email-header h2 { margin: 20px 0 8px; font-size: 30px; line-height: 1.12; letter-spacing: 0; }
.email-header p { max-width: 560px; margin: 0; color: #dbeafe; line-height: 1.5; }
.email-status { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 18px 22px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.email-status-card { border: 1px solid var(--line); border-radius: 8px; padding: 13px; background: #f8fafc; }
.email-status-card span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.email-status-card b { display: block; margin-top: 7px; font-size: 16px; }
.email-status-card.ok b { color: #047857; }
.email-content { padding: 22px; }
.email-items { display: grid; gap: 12px; }
.email-item { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.email-item:last-child { padding-bottom: 0; border-bottom: 0; }
.email-thumb { display: grid; place-items: center; width: 74px; height: 64px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; color: #075985; background: #eff6ff; font-size: 12px; font-weight: 900; }
.email-thumb .item-img { width: 100%; height: 100%; border: 0; border-radius: 0; }
.email-item b { display: block; font-size: 15px; }
.email-item p { margin: 5px 0 0; color: #64748b; font-size: 13px; line-height: 1.35; }
.email-price { text-align: right; font-weight: 900; white-space: nowrap; }
.email-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.email-info { border: 1px solid #e2e8f0; border-radius: 8px; padding: 13px; background: #f8fafc; }
.email-info span { display: block; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.email-info b { display: block; margin-top: 7px; font-size: 15px; line-height: 1.35; }
.email-info p { margin: 7px 0 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.email-totals { margin-left: auto; max-width: 320px; display: grid; gap: 8px; }
.email-row { display: flex; justify-content: space-between; gap: 18px; color: #334155; font-size: 14px; }
.email-row.total { margin-top: 6px; padding-top: 10px; border-top: 1px solid #cbd5e1; color: #0f172a; font-size: 20px; font-weight: 900; }
.email-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.email-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; font-size: 13px; font-weight: 900; }
.email-cta a.primary { border-color: var(--orange); background: var(--orange); color: #fff; }
.email-footer { padding: 22px; color: #cbd5e1; background: #07111f; text-align: center; }
.email-footer img { width: 78px; height: 78px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.25)); }
.email-footer b { display: block; color: #fff; }
.email-footer p { max-width: 520px; margin: 8px auto 0; color: #cbd5e1; font-size: 13px; line-height: 1.5; }
.client-hero { position: relative; overflow: hidden; padding: 34px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.20), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.28), transparent 30%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); }
.client-hero:before { content: ""; position: absolute; right: 64px; top: -18px; width: 210px; height: 210px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); pointer-events: none; }
.client-hero > * { position: relative; z-index: 1; }
.client-hero h1 { margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: 0; }
.client-hero p { max-width: 780px; margin: 13px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.client-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.client-access-layout { grid-template-columns: minmax(320px, 360px) minmax(0,1fr); align-items: start; }
.client-access-layout .imported-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.client-access-layout .imported-actions .real-btn { flex: 1 1 150px; }
.client-access-layout .imported-actions .real-btn.primary { flex: 1 1 120px; }
.client-side-menu { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; overflow: hidden; }
.client-side-head { padding: 16px; border-bottom: 1px solid var(--line); background: #fff; }
.client-side-head b { display: block; margin-bottom: 4px; }
.client-side-head small { color: #64748b; }
.client-side-link { display: block; padding: 13px 16px; color: #475569; border-bottom: 1px solid #e2e8f0; font-size: 14px; font-weight: 800; }
.client-side-link.active { color: #0f172a; background: #fff7ed; border-left: 4px solid var(--orange); padding-left: 12px; }
.client-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.client-summary { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.client-summary span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.client-summary b { display: block; margin-top: 7px; font-size: 24px; }
.client-dashboard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.client-quick-card { display: flex; flex-direction: column; min-height: 174px; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.client-quick-card b { display: block; margin-top: 10px; font-size: 16px; }
.client-quick-card p { margin: 7px 0 12px; color: #64748b; font-size: 13px; line-height: 1.42; }
.client-quick-card .mini-btn { margin-top: auto; width: max-content; }
.client-filters { display: grid; grid-template-columns: minmax(220px,1fr) 150px 150px auto; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.client-filters input, .client-filters select { min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; background: #f8fafc; outline: none; }
.client-order { border-bottom: 1px solid #e2e8f0; }
.client-order:last-child { border-bottom: 0; }
.client-order-main { display: grid; grid-template-columns: 160px minmax(0,1fr) 150px 140px; gap: 14px; align-items: center; padding: 16px; }
.client-order-main b { display: block; margin-bottom: 4px; font-size: 14px; }
.client-order-main small, .client-order-main p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.client-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.client-order-detail { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 16px; padding: 0 16px 16px; }
.client-timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.client-order-products { display: grid; gap: 8px; }
.client-prod { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 9px; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; background: #fff; color: inherit; text-decoration: none; }
.client-prod-img { display: grid; place-items: center; height: 42px; border-radius: 6px; background: #f8fafc; color: #075985; font-size: 11px; font-weight: 900; overflow: hidden; }
.client-prod-img .item-img { width: 100%; height: 100%; border: 0; border-radius: 0; }
.client-prod b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.client-prod span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.client-brand-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 18px; border: 1px solid #d9e2ee; border-radius: 8px; background: radial-gradient(circle at 82% 50%, rgba(16,184,216,.10), transparent 42%), #f8fafc; }
.client-brand-strip div { max-width: 720px; }
.client-brand-strip b { display: block; margin-bottom: 6px; font-size: 17px; }
.client-brand-strip p { margin: 0; color: #64748b; line-height: 1.45; }
.client-brand-strip img { width: 108px; height: 108px; object-fit: contain; opacity: .85; filter: drop-shadow(0 16px 20px rgba(15,23,42,.14)); }
.contact-hero { position: relative; overflow: hidden; padding: 38px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.20), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.28), transparent 30%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); }
.contact-hero:before { content: ""; position: absolute; right: 58px; top: -22px; width: 220px; height: 220px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); pointer-events: none; }
.contact-hero > * { position: relative; z-index: 1; }
.contact-hero h1 { margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: 0; }
.contact-hero p { max-width: 780px; margin: 12px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.contact-quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 18px 32px; border: 1px solid var(--line); border-top: 0; border-bottom: 0; background: #fff; }
.contact-quick { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.05); }
.contact-quick b { display: block; font-size: 14px; }
.contact-quick p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.contact-quick a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.contact-content { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.contact-submit { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 14px; border: 0; border-radius: 6px; color: #fff; background: var(--orange); font-weight: 900; width: 100%; cursor: pointer; }
.contact-list { display: grid; gap: 10px; }
.contact-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.contact-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.contact-card b { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.contact-faq-list { display: grid; gap: 10px; }
.contact-faq { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fff; }
.contact-faq b { display: block; font-size: 14px; }
.contact-faq p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.shipping-hero { position: relative; overflow: hidden; padding: 38px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.20), transparent 25%), radial-gradient(circle at 72% 78%, rgba(16,184,216,.28), transparent 30%), linear-gradient(112deg, #0a2a44, #124b6f 58%, #226e97); }
.shipping-hero:before { content: ""; position: absolute; right: 58px; top: -22px; width: 220px; height: 220px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center / contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); pointer-events: none; }
.shipping-hero > * { position: relative; z-index: 1; }
.shipping-hero h1 { margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: 0; }
.shipping-hero p { max-width: 800px; margin: 12px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.shipping-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 18px 32px; border: 1px solid var(--line); border-top: 0; border-bottom: 0; background: #fff; }
.shipping-metric { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.05); }
.shipping-metric span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.shipping-metric b { display: block; margin-top: 8px; font-size: 20px; }
.shipping-content { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.shipping-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.shipping-info { border: 1px solid #e2e8f0; border-radius: 8px; padding: 13px; background: #fff; }
.shipping-info b { display: block; font-size: 15px; }
.shipping-info p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.shipping-zone-list { display: grid; gap: 10px; }
.shipping-zone { display: flex; justify-content: space-between; gap: 12px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.shipping-zone b { display: block; font-size: 13px; }
.shipping-zone span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.shipping-steps { display: grid; gap: 12px; }
.shipping-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; }
.shipping-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #fff; background: var(--navy); font-size: 13px; font-weight: 900; }
.shipping-step b { display: block; font-size: 14px; }
.shipping-step p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.legal-hero { position: relative; overflow: hidden; padding: 38px 32px; color: #fff; border-radius: 8px 8px 0 0; background: radial-gradient(circle at 84% 20%, rgba(242,122,36,.22), transparent 25%), radial-gradient(circle at 74% 78%, rgba(16,184,216,.30), transparent 30%), linear-gradient(112deg,#0a2a44,#124b6f 58%,#226e97); }
.legal-hero:before { content: ""; position: absolute; right: 58px; top: -22px; width: 220px; height: 220px; opacity: .22; background: url("/assets/logo-zonasonyek-08-transparente.png") center/contain no-repeat; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); pointer-events: none; }
.legal-hero > * { position: relative; z-index: 1; }
.legal-hero h1 { margin: 0; font-size: 38px; line-height: 1.1; letter-spacing: 0; }
.legal-hero p { max-width: 780px; margin: 12px 0 0; color: #dbeafe; font-size: 16px; line-height: 1.55; }
.legal-content { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; padding: 28px 32px 38px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.legal-list { display: grid; gap: 12px; }
.legal-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; background: #fff; }
.legal-item b { display: block; font-size: 15px; }
.legal-item p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.legal-side-links { display: grid; gap: 8px; }
.legal-side-links a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 12px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 900; }
.legal-side-links a.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.legal-notice { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; border: 1px solid #fed7aa; border-radius: 8px; padding: 13px; background: #fff7ed; }
.legal-notice b { display: block; color: #9a3412; font-size: 14px; }
.legal-notice p { margin: 5px 0 0; color: #475569; font-size: 13px; line-height: 1.4; }
.privacy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.privacy-grid .full { grid-column: 1 / -1; }
.cookies-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cookies-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; background: #fff; }
.cookies-card b { display: block; font-size: 15px; }
.cookies-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookies-status { display: inline-flex; align-items: center; min-height: 24px; margin-top: 10px; border-radius: 999px; padding: 0 8px; color: #065f46; background: #dcfce7; font-size: 11px; font-weight: 900; }
.cookies-status.optional { color: #075985; background: #e0f2fe; }
.cookies-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.cookies-principle { border: 1px solid #e2e8f0; border-radius: 8px; padding: 13px; background: #f8fafc; }
.cookies-principle span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }
.cookies-principle b { display: block; margin-top: 9px; font-size: 14px; }
.cookies-principle p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cookies-mini-consent { position: relative; overflow: hidden; border: 1px solid #d9e2ee; border-radius: 8px; padding: 14px; background: #fff; box-shadow: 0 16px 42px rgba(15,23,42,.12); }
.cookies-mini-consent:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg,var(--cyan),var(--orange)); }
.cookies-mini-consent b { display: block; font-size: 15px; }
.cookies-mini-consent p { max-width: 760px; margin: 8px 0 12px; color: #475569; font-size: 13px; line-height: 1.45; }
.cookies-consent-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.cookies-consent-actions a, .cookies-banner-actions a { display: flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; font-size: 12px; font-weight: 900; }
.cookies-consent-actions a.main { border-color: #0e7490; background: #0e7490; color: #fff; }
.cookies-banner { border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; background: #eff6ff; }
.cookies-banner b { display: block; color: #075985; font-size: 16px; }
.cookies-banner p { margin: 7px 0 14px; color: #475569; font-size: 13px; line-height: 1.45; }
.cookies-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies-banner-actions a.primary { color: #fff; background: var(--orange); border-color: var(--orange); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; color: #334155; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 42px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; outline: 0; }
.field textarea { min-height: 110px; padding-top: 10px; resize: vertical; line-height: 1.45; }
.notice { border: 1px solid #bfdbfe; border-radius: 8px; padding: 13px; background: #eff6ff; color: #475569; line-height: 1.45; }
.footer { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 22px; margin-top: 30px; padding: 28px; color: #cbd5e1; background: var(--dark); }
.footer b { display: block; color: #fff; margin-bottom: 8px; }
.footer a, .footer p { display: block; color: #cbd5e1; margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.cookie-consent { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 50; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; max-width: 980px; margin: 0 auto; padding: 14px; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; box-shadow: 0 16px 42px rgba(15,23,42,.20); }
.cookie-consent p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.cookie-actions button, .cookie-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 12px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 900; cursor: pointer; }
.cookie-actions .primary { color: #fff; border-color: #0e7490; background: #0e7490; }
.empty { padding: 26px; text-align: center; color: var(--muted); }
.not-found { text-align: center; padding: 56px 20px; }
.not-found img { width: 160px; margin: 0 auto 18px; }
body.admin-mode .topbar,
body.admin-mode .site-header,
body.admin-mode .main-nav,
body.admin-mode .footer,
body.admin-mode .cookie-consent { display: none; }
body.admin-mode .app { max-width: none; padding: 28px; }
.admin-panel-head-help { justify-content: flex-start; align-items: center; gap: 8px; }
.admin-panel-head-help b { margin-right: auto; }
.admin-info-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: #075985; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 16px rgba(14,116,144,.08); }
.admin-info-button:hover, .admin-info-button:focus { border-color: #0e7490; background: #dff6ff; outline: 0; transform: translateY(-1px); }
.admin-help-dialog { width: min(620px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(15,23,42,.28); }
.admin-help-dialog::backdrop { background: rgba(15,23,42,.45); }
.admin-help-dialog form { padding: 22px; }
.admin-help-dialog h2 { margin: 10px 0 8px; font-size: 26px; line-height: 1.15; }
.admin-help-dialog p { margin: 0; color: #334155; line-height: 1.5; }
.admin-help-list { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.admin-help-list li { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid #dbeafe; border-radius: 10px; background: #f8fbff; }
.admin-help-list b { color: #082f49; font-size: 13px; }
.admin-help-list span { color: #475569; font-size: 13px; line-height: 1.45; }
.admin-help-warning { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; align-items: start; margin-top: 12px; padding: 12px; border: 1px solid #fed7aa; border-radius: 10px; background: #fff7ed; color: #9a3412; }
.admin-help-warning b { font-size: 13px; }
.admin-help-warning span { color: #7c2d12; font-size: 13px; line-height: 1.45; }
.admin-dialog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.admin-dialog-actions button { min-height: 38px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 0 16px; background: #fff; font-size: 13px; font-weight: 900; cursor: pointer; }
.admin-dialog-actions button.primary { border-color: var(--orange); background: var(--orange); color: #fff; }
@media (max-width: 980px) {
  .topbar { display: none; }
  .site-header, .hero, .grid, .grid.three, .grid.two, .layout, .cart-shell, .cart-item, .review, .suggestions, .checkout-steps, .confirm-steps, .checkout-layout, .confirmation-layout, .status-grid, .mode-grid, .calc-grid, .ship, .payment-grid, .order-item, .product-shell, .simple-product-shell, .product-content-shell, .simple-product-content, .related-grid, .simple-related-grid, .quick-data, .buy-box, .buy-actions, .fiber-family-grid, .fiber-family-content, .fiber-product-grid, .fiber-entry-grid, .catalog-entry-grid, .fiber-summary-grid, .import-layout, .import-products, .import-product, .import-next-grid, .real-family-layout, .real-product-grid, .imported-product-shell, .imported-product-content, .imported-actions, .commercial-layout, .commercial-family-grid, .commercial-product-row, .commercial-groups, .rack-group-grid, .rack-product-groups, .cable-summary-grid, .search-shell, .search-exact, .search-product-grid, .search-info-grid, .catalog-shell, .catalog-grid, .unavailable-product, .unavailable-details, .unavailable-content, .unavailable-alts, .form-grid, .email-status, .email-item, .email-two-cols, .client-layout, .client-summary-grid, .client-dashboard-grid, .client-filters, .client-order-main, .client-order-detail, .client-timeline, .contact-quick-grid, .contact-content, .shipping-summary, .shipping-content, .shipping-info-grid, .legal-content, .privacy-grid, .cookies-grid, .cookies-principles, .cookies-consent-actions, .admin-live-shell, .admin-dashboard-hero, .admin-dashboard-grid, .admin-dashboard-attention, .admin-module-grid, .admin-workspace, .admin-products-layout, .admin-products-grid, .admin-media-layout, .admin-media-layout.hero-admin, .admin-edit-layout, .admin-product-preview, .admin-form-grid, .admin-gallery-row, .admin-template-blocks, .footer, .cookie-consent { grid-template-columns: 1fr; }
  .search-result-head { align-items: stretch; flex-direction: column; }
  .catalog-head { align-items: stretch; flex-direction: column; }
  .catalog-hero h1 { font-size: 32px; }
  .catalog-brand-mark { top: 14px; width: 86px; height: 86px; }
  .fiber-family-hero h1 { font-size: 32px; }
  .fiber-brand-mark { top: 14px; width: 86px; height: 86px; }
  .real-family-hero { min-height: 220px; padding: 24px 18px; }
  .real-family-brand { left: auto; right: 18px; top: 14px; width: 92px; height: 92px; transform: none; opacity: .72; }
  .real-family-hero h1, .real-family-hero p { max-width: calc(100% - 112px); }
  .real-family-hero h1 { font-size: 32px; }
  .rack-family-hero .real-family-brand { width: 112px; height: 112px; }
  .rack-family-hero:before { background-size: 220px auto; background-position: right bottom; opacity: .16; }
  .fiber-public-hero:before { background-size: 200px auto; background-position: right bottom; opacity: .12; }
  .real-product-card { min-height: auto; }
  .real-product-image { height: 240px; }
  .fiber-summary-image { height: 220px; }
  .privacy-grid .full { grid-column: auto; }
  .client-actions { justify-content: flex-start; }
  .client-brand-strip { display: grid; }
  .main-nav { padding: 0 14px; overflow-x: auto; overflow-y: visible; }
  .more-menu { left: auto; right: 0; }
  .home-hero { min-height: auto; padding: 24px 18px; }
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 32px; }
  .hero-family-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kit-grid { grid-template-columns: 1fr; }
  .site-header { position: static; }
  .admin-live-sidebar { display: none; }
  .admin-live-top { align-items: flex-start; flex-direction: column; }
  .admin-metric-grid, .admin-media-grid { grid-template-columns: 1fr; }
  .admin-orders-layout, .admin-orders-bottom, .admin-order-detail-grid, .admin-order-actions, .admin-order-workflow, .admin-order-summary, .admin-clients-layout, .admin-clients-bottom, .admin-client-hero, .admin-client-actions, .admin-client-detail-grid, .admin-client-edit-grid, .admin-client-stats, .admin-connected-layout, .admin-connected-hero, .admin-connected-actions, .admin-connected-grid, .admin-connected-alerts, .admin-seo-score-layout, .admin-seo-layout, .admin-metric-grid.seo, .admin-seo-case, .admin-seo-form, .admin-seo-grid { grid-template-columns: 1fr; }
  .admin-manual-order-line { grid-template-columns: 1fr; }
  .admin-client-hero img { justify-self: start; }
  .admin-connected-hero img { justify-self: start; }
  .summary-panel { position: static; }
  .side { position: static; }
  .app { padding: 14px; }
  .field.full { grid-column: auto; }
}