@font-face { font-family: "Manrope"; src: url("./assets/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --signal: #d7a23e;
  --teal: #08cbb5;
  --teal-deep: #08766d;
  --teal-pale: #e5f7f4;
  --navy: #172630;
  --navy-soft: #263a46;
  --sand: #f1eee7;
  --amber: #d7a23e;
  --clay: #bd765c;
  --ink: #121212;
  --ink-soft: #343434;
  --paper: #f5f4f0;
  --white: #fff;
  --line: #deddd7;
  --muted: #72726c;
  --green: #176a5e;
  --green-bg: #e5f3ef;
  --orange: #8a4d00;
  --orange-bg: #fff0d3;
  --red: #9f2d2d;
  --shadow: 0 24px 70px rgba(20, 20, 20, .13);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 11px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", "Segoe UI", sans-serif; font-weight: 430; }
button, input, select, textarea, option, optgroup { font-family: "Manrope", "Segoe UI", sans-serif; }
button { color: inherit; }
.primary-button, .secondary-button, .small-button, .icon-button, .close-button, .text-button, input, select, textarea, .category-tab, .admin-tab { border-radius: var(--radius-sm); }
.panel, .product-card, .stat-card, .access-banner, .chooser-strip, .source-card, .approval-card, .admin-table-card, .modal { border-radius: var(--radius-md); }
.hidden { display: none !important; }

.privacy-strip {
  min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #eef6f5; color: #496166; border-bottom: 1px solid #d4e4e1; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.lock-dot { width: 7px; height: 7px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 0 3px rgba(215,162,62,.16); }

.site-header {
  height: 78px; padding: 0 clamp(18px, 4vw, 64px); display: flex; justify-content:space-between; align-items: center;
  background: rgba(255,255,255,.93); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px);
}
.brand { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap:7px; width: fit-content; flex:0 0 auto; }
.brand img { display: block; width: 112px; height: auto; max-height: 30px; object-fit: contain; object-position: left center; }
.mobile-catalog-title{display:none;color:#244247;font-size:12px;font-weight:620;line-height:1;white-space:nowrap}
.header-primary { height:100%; display:flex; align-items:center; gap:clamp(24px,3vw,54px); }
.main-nav { align-self: stretch; display: flex; gap: 24px; }
.nav-link { position: relative; background: none; border: 0; cursor: pointer; color: #536267; font-size: 13px; font-weight: 600; }
.nav-link::after { content: ""; position: absolute; height: 3px; background: var(--teal); left: 50%; right: 50%; bottom: 0; transition: .2s; }
.nav-link.active { color: var(--ink); }
.compare-count { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:4px; padding:0 5px; border-radius:9px; background:#20b8aa; color:#103b37; font-size:11px; }
.nav-link.active::after { left: 0; right: 0; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.trade-access-button { min-height: 40px; padding: 0 17px; border: 1px solid #7ebeb5; border-radius: var(--radius-sm); background: #e6f6f3; color: #145c55; font-size: 13px; font-weight: 650; cursor: pointer; }
.workspace-home-button,.back-button { border:0; background:transparent; color:#145c55; font-size:13px; font-weight:650; cursor:pointer; }
.back-button { display:block; margin:0 0 14px; padding:0; }
.account-button { min-height:40px; padding:0 14px; border:0; background:transparent; color:#344e53; font-size:13px; font-weight:620; cursor:pointer; }
.persona-control { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.persona-control select, .catalog-tools select { border: 1px solid var(--line); background: var(--white); height: 40px; padding: 0 30px 0 10px; font-size: 12px; font-weight: 550; color: var(--ink); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #b9dcd6; background: #e6f6f3; cursor: pointer; position: relative; }
.icon-button svg { width: 18px; fill: none; stroke: #155e57; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--signal); border: 2px solid white; color: var(--ink); border-radius: 10px; font-size: 9px; font-weight: 800; }

.view { display: none; }
.view.active { display: block; }
.hero { min-height: 430px; display: grid; grid-template-columns: 1.03fr .97fr; color: var(--ink); background: linear-gradient(128deg, #fff, #f5faf9 58%, #e8f5f2); overflow: hidden; border-bottom: 1px solid #dce8e5; position:relative; padding-top:0; }
.offer-banner { position:relative; min-height:52px; z-index:8; display:block; overflow:hidden; padding:4px 0; margin:0; background:linear-gradient(90deg,#173c42,#23655f); color:white; border-top:6px solid var(--paper);border-bottom:6px solid var(--paper); }
.offer-marquee{width:100%;overflow:hidden}.offer-marquee-track{display:flex;width:max-content;align-items:center;min-height:44px;animation:offerTicker 28s linear infinite}.offer-ticker-item{display:inline-flex;align-items:center;gap:13px;padding:8px 34px;white-space:nowrap}.offer-ticker-item b{color:#f0bd59;font-size:11px;letter-spacing:.08em}.offer-ticker-item strong{font-size:14px}.offer-ticker-item small{font-size:12px;color:#d5ebe7}.offer-ticker-item::after{content:"•";margin-left:22px;color:#5acabe}@keyframes offerTicker{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.offer-marquee-track{animation:none}}
.hero[data-slide="1"] { background: linear-gradient(128deg,#fff,#faf8f1 58%,#f1e8d5); }
.hero[data-slide="2"] { background: linear-gradient(128deg,#fff,#f5faf7 58%,#deeee5); }
.hero[data-slide="0"] #heroEyebrow{color:#08766d}.hero[data-slide="0"] #heroTitle{color:#123e42}.hero[data-slide="0"] #heroText{color:#46666a}
.hero[data-slide="1"] #heroEyebrow{color:#9a681f}.hero[data-slide="1"] #heroTitle{color:#563a16}.hero[data-slide="1"] #heroText{color:#765b36}
.hero[data-slide="2"] #heroEyebrow{color:#257451}.hero[data-slide="2"] #heroTitle{color:#154c36}.hero[data-slide="2"] #heroText{color:#3f6f5b}
.hero[data-slide="0"] .hero-dot.active{background:#159b8f}.hero[data-slide="1"] .hero-dot.active{background:#c18a35}.hero[data-slide="2"] .hero-dot.active{background:#3b9870}
.hero-copy { align-self: center; padding: 52px max(34px, 7vw); position: relative; z-index: 3; }
.hero-copy.slide-refresh #heroEyebrow,.hero-copy.slide-refresh #heroTitle,.hero-copy.slide-refresh #heroText { animation: heroTextIn .5s ease both; }
.hero-copy.slide-refresh #heroTitle { animation-delay: .05s; }.hero-copy.slide-refresh #heroText { animation-delay: .1s; }
@keyframes heroTextIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #5c5c57; margin-bottom: 10px; }
.hero .eyebrow { color: #08766d; }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(46px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.045em; font-weight: 680; }
.hero-copy > p { max-width: 560px; margin: 21px 0 26px; color: #53676c; font-size: 16px; line-height: 1.65; }
.primary-button { border: 1px solid #159b8f; background: #20b8aa; color: #0e3532; min-height: 48px; padding: 0 25px; font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: transform .18s, background .18s; }
.primary-button:hover { transform: translateY(-2px); background: #36c5b8; }
.secondary-button { min-height: 48px; padding: 0 22px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .04em; transition: .18s; }
.secondary-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .primary-button { background: #20b8aa; border-color: #159b8f; color: #102f2d; }
.hero .primary-button:hover { background: #3bd9c7; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 30px; color: #53676c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.trust-row span { position: relative; padding-left: 15px; }
.trust-row span::before { content: ""; width: 7px; height: 7px; background: var(--teal); position: absolute; left: 0; top: 3px; }
.hero-slider-controls { display:flex; gap:8px; margin-top:24px; min-height:10px; }
.hero-dot { width:30px; height:5px; padding:0; border:0; border-radius:3px; background:#bdd0cd; cursor:pointer; transition:.25s; }
.hero-dot.active { width:54px; background:#159b8f; }

.hero-visual { position: relative; min-height: 430px; background: linear-gradient(145deg, #f8fbfa, #dcebea 72%, #c8dcda); overflow: hidden; }
.hero-slider-image { position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:cover; object-position:58% center; opacity:0; visibility:hidden; transform:scale(1.015); transition:opacity .45s ease,transform 1.1s ease; }
.hero[data-slide="0"] .hero-slider-image[data-hero-image="0"],
.hero[data-slide="1"] .hero-slider-image[data-hero-image="1"],
.hero[data-slide="2"] .hero-slider-image[data-hero-image="2"] { opacity:1; visibility:visible; transform:scale(1); }
.hero[data-slide="1"] .hero-slider-image[data-hero-image="1"] { object-position:61% center; }
.hero[data-slide="2"] .hero-slider-image[data-hero-image="2"] { object-position:58% center; }
.hero[data-slide="0"] .sun-disc,
.hero[data-slide="0"] .product-stage,
.hero[data-slide="0"] .technical-grid,
.hero[data-slide="1"] .sun-disc,
.hero[data-slide="1"] .product-stage,
.hero[data-slide="1"] .technical-grid,
.hero[data-slide="2"] .sun-disc,
.hero[data-slide="2"] .product-stage,
.hero[data-slide="2"] .technical-grid { opacity:0; visibility:hidden; }
.sun-disc { position: absolute; width: 420px; height: 420px; background: linear-gradient(145deg, #19d2bd, #079588); border-radius: 50%; left: 16%; top: 18%; filter: blur(.2px); }
.hero[data-slide="1"] .sun-disc { background:linear-gradient(145deg,#e6bd62,#ba7f27); transform:scale(.92) translate(30px,-12px); }
.hero[data-slide="2"] .sun-disc { background:linear-gradient(145deg,#62c89c,#228566); transform:scale(1.05) translate(-18px,8px); }
.sun-disc,.stage-one,.stage-two { transition:transform .7s ease,background .7s ease; }
.hero[data-slide="1"] .stage-one { transform:translateX(28px) rotate(-2deg); }.hero[data-slide="1"] .stage-two { transform:translateX(-22px) translateY(-10px); }
.hero[data-slide="2"] .stage-one { transform:translateX(-18px); }.hero[data-slide="2"] .stage-two { transform:translateX(12px) translateY(-14px); }
.technical-grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg,#333 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, transparent, #000); }
.product-stage { position: absolute; z-index: 2; filter: drop-shadow(0 30px 24px rgba(0,0,0,.22)); }
.stage-one { left: 13%; bottom: 4%; }
.stage-two { right: 9%; bottom: 7%; }
.unit-large { width: 250px; height: 380px; background: linear-gradient(110deg,#151515 0 48%,#262626 50%,#101010 100%); border: 3px solid #060606; color: white; position: relative; transform: perspective(800px) rotateY(9deg); }
.unit-large::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: #202020; border-top: 2px solid #333; }
.unit-large span { position: absolute; top: 35px; left: 27px; font-weight: 800; letter-spacing: .1em; }
.unit-large span::first-letter { color: var(--signal); }
.unit-large i { position: absolute; z-index: 2; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; top: 210px; left: 29px; }
.unit-large i + i { left: 45px; background: #56ad7b; }
.unit-large b { position: absolute; z-index: 2; right: 24px; bottom: 24px; font-size: 54px; color: #3c3c3c; letter-spacing: -.08em; }
.battery-pack { width: 180px; height: 285px; background: linear-gradient(100deg,#e7e7df 0 45%,#babbb5 47%,#f5f5ef 100%); border: 2px solid #989993; color: #111; position: relative; transform: perspective(800px) rotateY(-10deg); }
.battery-pack::before { content: ""; position: absolute; width: 64px; height: 15px; border: 7px solid #222; border-bottom: 0; left: 51px; top: -21px; }
.battery-pack span { position: absolute; left: 19px; top: 32px; background: var(--signal); padding: 8px 10px; font-weight: 800; letter-spacing: .1em; font-size: 11px; }
.battery-pack i { position: absolute; top: 96px; left: 19px; width: 32px; height: 6px; background: #222; box-shadow: 0 12px 0 #222, 0 24px 0 #222; }
.battery-pack b { position: absolute; bottom: 20px; left: 18px; font-size: 40px; letter-spacing: -.06em; }

.catalog-shell { max-width: 1510px; margin: auto; padding: 62px 5vw 110px; }
.catalog-topline { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.internal-user .catalog-topline { position:sticky; top:78px; z-index:24; margin:-12px -12px 0; padding:14px 12px; background:rgba(245,244,240,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.catalog-topline h2, .panel h2, .page-heading h1, .drawer-heading h2, .modal h2 { margin: 0; font-size: clamp(31px, 3.2vw, 50px); font-weight: 650; letter-spacing: -.04em; line-height: 1.06; }
.catalog-intro { max-width: 650px; margin: 13px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.catalog-tools { display: flex; gap: 10px; }
.search-box { width: min(400px, 34vw); height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius:var(--radius-md); background: white; padding: 0 13px; overflow:hidden; }
.search-box svg { width: 17px; fill: none; stroke: #777; stroke-width: 1.8; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; }
.catalog-tools select { height: 42px; }
.category-tabs, .admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 31px 0 18px; }
.category-tab, .admin-tab { min-height: 40px; border: 1px solid #c9d5d2; background: white; padding: 0 15px; cursor: pointer; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.category-tabs.floating-categories { position:fixed; top:74px; left:0; right:0; z-index:35; margin:0; padding:10px 5vw; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); box-shadow:0 8px 18px rgba(25,48,48,.08); flex-wrap:nowrap; overflow-x:auto; }
.category-tab.active, .admin-tab.active { background: #dff4f0; color: #145c55; border-color: #8acfc4; }
.access-banner { min-height: 58px; border-left: 4px solid var(--teal); background: white; padding: 14px 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 14px; }
.access-banner strong { display: block; font-size: 15px; }
.access-banner p { margin: 3px 0 0; color: var(--muted); }
.access-banner button { white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.product-card { background: white; border: 1px solid #e2e1eb; min-width: 0; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 17px 38px rgba(0,0,0,.08); }
.product-art { height: 225px; background: #ecebe5; position: relative; overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.product-art::before { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: var(--accent, var(--signal)); opacity: .86; transform: translate(32px,-17px); }
.product-image { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; border: 0; background: transparent; }
.art-unit { width: 91px; height: 138px; background: #171717; border: 2px solid #050505; position: relative; z-index: 2; box-shadow: 19px 27px 25px rgba(0,0,0,.21); transform: perspective(600px) rotateY(10deg); }
.art-unit::before { content: attr(data-label); position: absolute; top: 17px; left: 10px; color: var(--signal); font-size: 8px; font-weight: 800; letter-spacing: .07em; }
.art-unit::after { content: ""; position: absolute; left: 11px; bottom: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 18px 0 0 #428e61; }
.art-unit.wide { width: 134px; height: 86px; transform: perspective(600px) rotateX(3deg) rotateY(-8deg); }
.art-unit.slim { width: 64px; height: 146px; background: #d8d9d4; border-color: #888; }
.art-unit.board { width: 142px; height: 95px; background: #175444; border-color: #0d3328; }
.art-unit.board::after { border-radius: 0; width: 80px; height: 30px; background: repeating-linear-gradient(90deg,#c6a553 0 3px,transparent 3px 7px); box-shadow: none; }
.art-unit.cell { width: 46px; height: 145px; border-radius: 22px; background: linear-gradient(90deg,#1965a7,#3b8cd1,#17548d); border: 2px solid #15436d; }
.art-unit.cell::after { top: -4px; left: 10px; width: 22px; height: 6px; background: #c9c9c3; box-shadow: none; }
.product-type { position: absolute; left: 14px; top: 14px; z-index: 3; background: rgba(255,255,255,.9); padding: 6px 8px; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-wishlist-button{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(18,55,58,.14);border-radius:50%;background:rgba(255,255,255,.94);color:#234c50;box-shadow:0 5px 14px rgba(13,45,48,.1);cursor:pointer}.product-wishlist-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.product-wishlist-button:hover,.product-wishlist-button.active{color:#fff;background:#08766d;border-color:#08766d}.product-wishlist-button.active svg{fill:currentColor}
.product-info { padding: 18px 17px 16px; }
.product-name { margin: 0; font-size: 16px; line-height: 1.3; min-height: 42px; }
.product-summary { margin:7px 0 5px; color:#344e53; font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-spec { margin: 7px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; min-height: 40px; }
.price-row { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #ecebe6; padding-top: 14px; gap: 8px; }
.price-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.price { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.04em; margin-top: 2px; }
.mrp-line{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:480;letter-spacing:0}.mrp-value{text-decoration:line-through;text-decoration-thickness:1px}
.price.locked { color: #81817b; font-size: 13px; letter-spacing: 0; }
.stock { font-size: 12px; font-weight: 800; color: var(--green); text-align: right; text-transform: uppercase; }
.product-choice-actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.product-choice-actions button { min-height:42px; border:0; background:white; color:#344e53; cursor:pointer; font-size:12px; font-weight:620; }
.product-choice-actions button+button { border-left:1px solid var(--line); }
.card-actions { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.add-button, .details-button { height: 48px; border: 0; background: white; cursor: pointer; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.add-button { background: #15a99b; color: white; box-shadow:inset 0 0 0 1px #0b8176; }
.add-button:hover { background:#087e74; }
.add-button:disabled { background: #a6a6a0; cursor: not-allowed; }
.details-button { font-size:12px; }
.compare-button { width:100%; background:#f8faf9 !important; color:#41605d !important; }
.compare-button.selected { background:#e5f7f4 !important; color:#08766d !important; }
.empty-state { grid-column: 1/-1; padding: 70px 20px; text-align: center; background: white; color: var(--muted); }
.sync-chip { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--teal-deep); background: var(--teal-pale); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.sync-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.chooser-strip { margin-top: 27px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: linear-gradient(105deg,#eeeae1,var(--teal-pale)); border: 1px solid #d7dedb; }
.chooser-strip .chooser-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #145c55; background: #dff4f0; border: 1px solid #b7ddd7; font-weight: 800; font-size: 12px; border-radius: var(--radius-sm); }
.chooser-strip strong { display: block; font-size: 13px; }
.chooser-strip span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.chooser-strip .secondary-button { min-height: 40px; color: var(--navy); background: white; }
.catalog-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; margin: 0 0 15px; }
.catalog-meta strong { color: var(--ink); }
.load-more-button { display: block; min-width: 220px; height: 48px; margin: 28px auto 0; color: var(--navy); background: white; border: 1px solid var(--navy); border-radius: var(--radius-sm); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }

.page-heading { max-width: 1510px; margin: auto; padding: 67px 5vw 33px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.page-heading p { color: var(--muted); margin: 13px 0 0; }
.badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; gap: 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.approved { color: var(--green); background: var(--green-bg); }
.badge.pending { color: var(--orange); background: var(--orange-bg); }
.badge.admin { color: #145c55; background: #dff4f0; }
.account-view, .admin-view { min-height: calc(100vh - 106px); padding-bottom: 90px; }
.account-stats { max-width: 1510px; margin: auto; padding: 0 5vw 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-card { background: white; border-top: 3px solid var(--teal); padding: 19px; }
.stat-card span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stat-card strong { display: block; margin-top: 7px; font-size: 26px; letter-spacing: -.04em; }
.account-layout { max-width: 1510px; margin: auto; padding: 0 5vw; display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.panel { background: white; border: 1px solid #e1e0db; padding: 24px; }
.panel h2 { font-size: 24px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.order-panel { grid-column: 1/2; }
.soa-panel { grid-column: 2/3; }
.activity-panel, .tracking-panel { grid-column: 1/-1; }
.text-button { border: 0; background: transparent; border-bottom: 1px solid #277c73; color:#145c55; padding: 0 0 3px; font-size: 12px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: var(--muted); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; text-align: left; background: #f7faf9; }
th, td { padding: 12px 10px; border-bottom: 1px solid #ecebe6; white-space: nowrap; }
td strong { font-size: 11px; }
.status-pill { display: inline-block; padding: 4px 7px; background: var(--green-bg); color: var(--green); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.activity-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.activity-item { border-left: 2px solid var(--teal); padding: 6px 12px; }
.activity-item strong { display: block; font-size: 11px; }
.activity-item span { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
.tracking-list { display: grid; gap: 13px; }
.tracking-summary { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tracking-card { border: 1px solid var(--line); padding: 16px; border-radius: var(--radius-sm); }
.tracking-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.tracking-head strong { display: block; font-size: 12px; }
.tracking-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.tracking-head .tracking-current { color: var(--teal-deep); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
.tracking-steps { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; margin-top: 16px; }
.tracking-step { position: relative; padding-top: 12px; color: #9a9a95; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tracking-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #dddcd6; border-radius: 2px; }
.tracking-step.done, .tracking-step.active { color: var(--navy); }
.tracking-step.done::before { background: var(--teal); }
.tracking-step.active::before { background: var(--amber); }
.payment-panel { grid-column: 2/3; }
.payment-layout { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.payment-layout strong { display: block; font-size: 14px; margin-top: 6px; }
.payment-layout p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.muted-label { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 800; }
.payment-qr { width: 108px; height: 108px; object-fit: contain; border: 1px solid var(--line); background: white; border-radius: var(--radius-sm); }
.payment-qr.missing { display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12px; border-style: dashed; }
.proof-list { display: grid; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.proof-list div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.proof-list span { color: var(--muted); }
.wrap-cell { white-space: normal; min-width: 220px; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.admin-view .page-heading { padding-bottom: 22px; }
.admin-tabs { max-width: 1510px; margin: 0 auto 16px; padding: 0 5vw; }
.desk-search-wrap { max-width:1510px; margin:0 auto 16px; padding:0 5vw; display:flex; align-items:end; justify-content:space-between; gap:16px; }
.desk-search { display:grid; gap:6px; width:min(520px,100%); }
.desk-search span { color:var(--muted); font-size:12px; font-weight:650; text-transform:uppercase; }
.desk-search input { height:44px; padding:0 14px; border:1px solid var(--line); background:white; }
.desk-notifications { display:flex; gap:8px; flex-wrap:wrap; }
.notice-chip { min-height:44px; padding:0 14px; border:1px solid var(--line); background:white; color:var(--muted); border-radius:var(--radius-sm); cursor:pointer; }
.notice-chip strong { color:var(--ink); font-size:17px; margin-right:4px; }.notice-chip.new.active{background:#e5f3ef;border-color:#79b8a9;color:#176a5e}.notice-chip.overdue.active{background:#fff0d3;border-color:#e0aa55;color:#8a4d00}
#adminContent { max-width: 1510px; margin: auto; padding: 0 5vw; }
.approval-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.approval-card { background: white; border: 1px solid var(--line); padding: 19px; }
.approval-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.approval-card h3 { margin: 0; font-size: 15px; }
.approval-card p { margin: 5px 0 15px; color: var(--muted); font-size: 10px; }
.approval-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 0; }
.approval-meta span { font-size: 8px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.approval-meta strong { display: block; margin-top: 4px; font-size: 10px; }
.approval-actions { display: flex; gap: 8px; margin-top: 14px; }
.small-button { min-height: 38px; padding: 0 12px; border: 1px solid #159b8f; border-radius:6px; background: #dff4f0; color: #145c55; cursor: pointer; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.admin-tab,.notice-chip,.account-tab,.visibility-toggle,.workspace-home-button { border-radius:6px; }
.small-button.secondary { background: white; color: var(--ink); }
.admin-table-card { background: white; border: 1px solid var(--line); padding: 20px; }
.admin-table-tools { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 15px; }
.admin-table-tools p { margin: 0; color: var(--muted); font-size: 11px; }
.source-card { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 17px; margin-bottom: 14px; color: var(--ink); background: #eef8f6; border:1px solid #cfe6e2; }
.source-card .source-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--teal); color: #123326; font-size: 11px; font-weight: 800; border-radius: var(--radius-sm); }
.source-card strong { display: block; font-size: 12px; }
.source-card span { display: block; color: #597075; margin-top: 4px; font-size: 13px; }
.source-card a { color: #145c55; border-bottom-color: #277c73; text-decoration: none; }
.inline-actions { display: flex; gap: 7px; }
.operations-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.workflow-card { background: white; border: 1px solid var(--line); padding: 18px; border-radius: var(--radius-md); }
.workflow-card.stage-received{border-left:4px solid #d7a23e}.workflow-card.stage-stocks{border-left:4px solid #478d9a}.workflow-card.stage-stock_wait_sales{border-left:4px solid #d18455}.workflow-card.stage-production{border-left:4px solid #6f8fc4}.workflow-card.stage-accounts{border-left:4px solid #8b69c6}.workflow-card.stage-production_paid{border-left:4px solid #5277b1}.workflow-card.stage-ready_dispatch{border-left:4px solid #159b8f}.workflow-card.stage-dispatch{border-left:4px solid #d18455}.workflow-card.stage-delivered{border-left:4px solid #4e9b68}.workflow-card.stage-cancelled{border-left:4px solid #a75959;opacity:.8}
.team-chip.stage-received{background:#fff0d3;color:#8a4d00}.team-chip.stage-production{background:#e8eef8;color:#365b92}.team-chip.stage-confirmed{background:#eee8f8;color:#60428e}.team-chip.stage-invoiced{background:#dff4f0;color:#145c55}.team-chip.stage-dispatch{background:#f9eadf;color:#8a4e27}.team-chip.stage-delivered{background:#e5f3e9;color:#176a43}
.workflow-alerts { display:flex; gap:7px; margin-top:12px; }.order-alert{padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:650}.order-alert.new{background:#e5f3ef;color:#176a5e}.order-alert.overdue{background:#fff0d3;color:#8a4d00}.overdue-order{box-shadow:inset 0 0 0 1px #e8c277}.new-order{background:linear-gradient(135deg,#fff,#f1faf7)}
.order-alert.date{background:#e8eef8;color:#365b92}
.gateway-status{display:flex;justify-content:space-between;gap:20px;padding:16px;margin-bottom:14px;background:#f3f7f6;border:1px solid var(--line);border-radius:8px}.gateway-status span{color:var(--muted);font-size:13px}.banner-editor{border:1px solid var(--line);border-radius:8px;padding:18px;margin:0 0 14px}.banner-editor legend{font-weight:700;padding:0 8px}.report-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.location-button{display:block;margin-top:7px;border:0;background:transparent;color:#08766d;font-weight:700;padding:0;cursor:pointer}.form-grid small{display:block;margin-top:5px;color:var(--muted);font-size:11px}

.service-strip{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:48px;align-items:center;padding:62px 6vw;background:#f5f7f5;border-top:1px solid var(--line)}.service-strip h2{margin:8px 0 12px;color:var(--navy);font-size:clamp(30px,4vw,52px);line-height:1.02}.service-strip p{max-width:720px;margin:0;color:var(--muted);font-size:15px;line-height:1.7}.service-strip-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.service-strip-links button{min-height:48px;padding:0 14px;border:1px solid #cbd8d4;border-radius:8px;background:white;color:#173f43;font:inherit;font-size:13px;font-weight:750;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}.service-strip-links button:hover{border-color:var(--teal-deep);transform:translateY(-1px)}
.site-footer{background:#092b33;color:#fff}.footer-main{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(140px,1fr));gap:54px;padding:58px 6vw 44px}.site-footer img{width:168px;height:auto;filter:brightness(0) invert(1)}.footer-brand p{max-width:390px;margin:22px 0 16px;color:#b9cccf;font-size:14px;line-height:1.7}.footer-tagline{color:#d6a450;font-weight:620;letter-spacing:.06em}.footer-column h3{margin:2px 0 21px;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.12em}.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.site-footer a,.site-footer button{border:0;background:transparent;color:#b9cccf;font:inherit;font-size:13px;line-height:1.45;text-decoration:none;cursor:pointer;transition:color .2s}.site-footer nav button{display:block;margin:0;padding:0;text-align:left}.site-footer a:hover,.site-footer button:hover{color:#fff}.footer-contact-link{display:block;margin:0 0 12px}.social-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.social-links a{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff}.social-links a:hover{border-color:#d6a450;color:#d6a450}.social-links svg{width:18px;height:18px;fill:currentColor}.social-links svg rect,.social-links svg circle{fill:none;stroke:currentColor;stroke-width:2}.social-links .social-play{fill:#092b33}.social-links .whatsapp-icon{fill:currentColor;stroke:none}.footer-bottom{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:22px 6vw;border-top:1px solid rgba(255,255,255,.12);color:#91aaae;font-size:12px}.footer-bottom nav{flex-direction:row;flex-wrap:wrap;gap:24px}.footer-bottom a{font-size:12px}
.wishlist-item{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.wishlist-thumb{width:68px;height:68px;padding:0;border:1px solid var(--line);background:#f3f4f1;overflow:hidden;cursor:pointer}.wishlist-thumb img{width:100%;height:100%;object-fit:cover}.wishlist-item h4{margin:0 0 5px;font-size:14px}.wishlist-item p{margin:0 0 6px;color:var(--muted);font-size:12px;line-height:1.4}.wishlist-item strong{font-size:13px}.wishlist-item-actions{display:flex;flex-direction:column;gap:7px}.wishlist-item-actions button{border:0;background:transparent;color:#08766d;font-size:12px;font-weight:700;cursor:pointer}.wishlist-item-actions button:last-child{color:#9f2d2d}
.workflow-meta-dates { grid-template-columns:repeat(3,1fr); }
.whatsapp-update { background:#e4f5ea;border-color:#69ad7f;color:#176a43; }
.workflow-card-head { display: flex; justify-content: space-between; gap: 15px; }
.workflow-card h3 { margin: 0; font-size: 14px; }
.workflow-card p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.workflow-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }
.workflow-meta div { padding: 9px; background: #f5f4f0; border-radius: var(--radius-sm); }
.workflow-meta span { display: block; color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.workflow-meta strong { display: block; margin-top: 4px; font-size: 9px; }
.team-chip { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; color: var(--navy); background: var(--teal-pale); border-radius: var(--radius-sm); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.section-label { margin: 18px 0 10px; color: #4f656a; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.workflow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.order-notes { margin: 12px 0; padding: 11px; border-left: 3px solid #85cfc4; background: #f4faf9; }
.order-notes strong, .order-notes span { display: block; font-size: 12px; }
.order-notes span { margin-top: 4px; color: var(--muted); }
.proof-preview { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; margin: 14px 0; }
.proof-preview img { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.proof-preview span, .proof-preview p { font-size: 12px; color: var(--muted); }
.visibility-toggle { min-width: 72px; min-height: 32px; border: 1px solid #8acfc4; background: #dff4f0; color: #145c55; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; cursor: pointer; }
.visibility-toggle.off { background: #f2f2ef; border-color: #c7c7c2; color: #777; }
.file-button input { display: none; }
.file-button { display: inline-flex; align-items: center; justify-content: center; }

.cart-drawer { position: fixed; z-index: 80; right: 0; top: 0; bottom: 0; width: min(470px, 100vw); background: white; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.cart-drawer.open { transform: translateX(0); }
.backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .2s; }
.backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-heading { padding: 27px 25px 19px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.drawer-heading h2 { font-size: 32px; }
.close-button { border: 1px solid var(--line); background: white; width: 34px; height: 34px; cursor: pointer; font-size: 23px; line-height: 1; }
.cart-content { padding: 10px 24px; overflow-y: auto; flex: 1; }
.cart-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 54px; height: 60px; background: #eeede8; display: grid; place-items: center; font-weight: 800; font-size: 8px; }
.cart-item h4 { margin: 0 0 4px; font-size: 11px; }
.cart-item p { margin: 0; color: var(--muted); font-size: 9px; }
.qty-control { display: flex; align-items: center; margin-top: 8px; }
.qty-control button { width: 25px; height: 24px; border: 1px solid var(--line); background: white; cursor: pointer; }
.qty-control span { width: 28px; text-align: center; font-size: 10px; }
.cart-item-price { text-align: right; font-size: 11px; font-weight: 800; }
.cart-item-price button { display: block; margin: 8px 0 0 auto; border: 0; background: none; color: var(--red); font-size: 8px; cursor: pointer; }
.cart-footer { border-top: 1px solid var(--line); padding: 20px 24px 25px; }
.total-row { display: flex; justify-content: space-between; margin: 7px 0; font-size: 10px; }
.calc-note { margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.total-row.grand { font-size: 16px; font-weight: 800; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ink); }
.wide-button { width: 100%; margin-top: 16px; }
.cart-empty { text-align: center; padding: 70px 20px; color: var(--muted); font-size: 12px; }

.modal { width: min(720px, calc(100vw - 30px)); max-height: calc(100vh - 30px); border: 0; padding: 30px; box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.5); }
.dialog-close { position: absolute; top: 16px; right: 16px; z-index: 3; }
.modal-heading { margin-bottom: 24px; padding-right: 40px; }
.modal-heading h2 { font-size: 32px; }
.product-detail-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; }
.product-gallery { min-width: 0; }
.product-detail-art { min-height: 310px; display: grid; place-items: center; background: #ecebe5; position: relative; overflow: hidden; }
.product-detail-art::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--accent, var(--signal)); transform: translate(30px,-20px); }
.product-detail-art .art-unit { transform: scale(1.45) perspective(600px) rotateY(10deg); }
.product-detail-art .product-image { padding: 0; object-fit: cover; }
.gallery-arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;transform:translateY(-50%);width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(18,48,50,.42);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .18s,transform .18s,opacity .18s}.gallery-arrow:hover{background:rgba(8,118,109,.72);transform:translateY(-50%) scale(1.06)}.gallery-arrow:active{transform:translateY(-50%) scale(.96)}.gallery-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gallery-arrow.previous{left:12px}.gallery-arrow.next{right:12px}.gallery-counter{position:absolute;z-index:3;right:12px;bottom:12px;padding:5px 9px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(15,40,43,.58);color:white;font-size:11px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.gallery-thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 7px; max-height:150px; overflow:auto; }
.gallery-thumb { height: 64px; padding: 0; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; }
.gallery-thumb.active { border-color: var(--teal-deep); box-shadow: inset 0 0 0 1px var(--teal-deep); }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-copy h2 { margin: 5px 0 9px; font-size: 30px; }
.detail-copy > p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.spec-list { margin: 18px 0; border-top: 1px solid var(--line); }
.spec-line { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.spec-line span { color: var(--muted); }
.detail-price { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:25px;font-weight:800;margin-top:17px; }
.detail-price small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.detail-price del{color:var(--muted);font-size:13px;font-weight:480}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid label.wide { grid-column: 1/-1; }
.form-grid label span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.form-grid input, .form-grid select { height: 45px; border: 1px solid #c9c9c3; padding: 0 12px; outline: none; background: white; }
.form-grid textarea, .field-stack textarea { border: 1px solid #c9c9c3; padding: 12px; outline: none; background: white; resize: vertical; border-radius:var(--radius-sm); }
.form-grid textarea:focus, .field-stack textarea:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 2px rgba(8,203,181,.2); }
.form-grid input:focus, .form-grid select:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 2px rgba(8,203,181,.2); }
.checkout-summary { background: #f3f2ec; padding: 15px; margin-top: 18px; font-size: 11px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 10px; color: var(--muted); }
.check-row input { margin-top: 1px; accent-color: var(--ink); }
.image-upload-field input { height: auto !important; padding: 11px !important; }
.image-upload-field small { color: var(--muted); font-size: 9px; }
.image-preview { min-height: 120px; margin-top: 15px; display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; place-items: center; overflow: auto; color: var(--muted); background: #f0f2ef; border: 1px dashed #aeb9b7; border-radius: var(--radius-sm); padding: 8px; font-size: 10px; }
.image-preview img { display: block; width: 100%; height: 120px; object-fit: cover; background: transparent; border: 0; border-radius: var(--radius-sm); }
.image-preview-item{width:100%;margin:0}.image-preview-item figcaption{padding:6px 2px 2px;font-size:9px;font-weight:700;color:var(--muted)}
.advisor-modal { width: min(760px,calc(100vw - 30px)); }
.advisor-modal .modal-heading p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.advisor-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.advisor-choice { min-height: 74px; padding: 12px; text-align: left; color: var(--ink); background: white; border: 1px solid var(--line); cursor: pointer; }
.advisor-choice strong { display: block; font-size: 11px; }
.advisor-choice span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.advisor-choice.active { color: #153d39; background: #dff4f0; border-color: #64b9ad; }
.advisor-choice.active span { color: #426762; }

/* Functional copy remains comfortably readable on desktop and mobile. */
.eyebrow,.secondary-button,.product-type,.sync-chip,.chooser-strip span,.catalog-meta,
.load-more-button,.badge,.stat-card span,.status-pill,.activity-item strong,.activity-item span,
.tracking-head span,.tracking-step,.approval-card p,.approval-meta span,.approval-meta strong,
.admin-table-tools p,.workflow-card p,.workflow-meta span,.workflow-meta strong,.team-chip,
.cart-item h4,.cart-item p,.qty-control span,.cart-item-price,.cart-item-price button,.total-row,
.detail-copy>p,.spec-line,.detail-price small,.form-grid label span,.checkout-summary,.check-row,
.image-upload-field small,.image-preview,.advisor-modal .modal-heading p,.advisor-choice strong,
.advisor-choice span,.advisor-requirement span,.advisor-mini strong,.advisor-mini span { font-size: 12px; }
.advisor-requirement { display: grid; gap: 7px; margin-top: 15px; }
.advisor-requirement span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.advisor-requirement select { height: 46px; padding: 0 12px; border: 1px solid var(--line); background: white; }
.advisor-results { margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); }
.advisor-results h3 { margin: 0 0 11px; font-size: 17px; }
.advisor-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.advisor-mini { padding: 13px; background: linear-gradient(145deg,var(--teal-pale),#fff); border: 1px solid #c7e4df; border-radius: var(--radius-sm); cursor: pointer; }
.advisor-mini strong { display: block; font-size: 10px; }
.advisor-mini span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.advisor-mini small{display:block;margin-bottom:5px;color:#08766d;font-size:10px;font-weight:650;text-transform:uppercase}
.application-modal { width: min(760px,calc(100vw - 30px)); }
.settings-card { display: grid; grid-template-columns: minmax(240px,.6fr) minmax(0,1.4fr); gap: 30px; background: white; border: 1px solid var(--line); padding: 26px; border-radius: var(--radius-md); }
.access-mode-tabs { display:flex; gap:8px; margin:22px 0 18px; }
.access-mode { min-height:40px; flex:1; border:1px solid var(--line); background:white; border-radius:var(--radius-sm); font-weight:650; cursor:pointer; }
.access-mode.active { background:#dff4f0; border-color:#72bdb2; color:#145c55; }
.secure-login-note { margin:14px 0; padding:12px; background:#f3f8f7; color:var(--muted); font-size:13px; line-height:1.5; }
.trade-access-modal { max-width:620px; }
.line-editor { display:grid; gap:12px; margin:20px 0; }
.line-editor-row { display:grid; grid-template-columns:minmax(160px,.7fr) minmax(0,1.3fr); gap:14px; padding:15px; border:1px solid var(--line); background:#f8faf9; }
.line-editor-row label { display:grid; gap:6px; }.line-editor-row label span { color:var(--muted); font-size:12px; font-weight:620; text-transform:uppercase; }.line-editor-row input,.line-editor-row textarea { width:100%; border:1px solid var(--line); padding:10px; background:white; }
.settings-intro h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }

/* Manrope hierarchy: broader headings, lighter compact interface copy. */
.panel h2 { font-size: 27px; font-weight: 650; }
.drawer-heading h2,.modal-heading h2 { font-size: 35px; font-weight: 650; }
.detail-copy h2,.settings-intro h2 { font-size: 33px; font-weight: 650; }
.primary-button,.secondary-button,.small-button,.text-button,.category-tab,.admin-tab,
.eyebrow,.trust-row,.price-label,.stock,.add-button,.status-pill,.team-chip,
.form-grid label span,.field-stack span { font-weight: 620; }
.product-name,.approval-card h3,.workflow-card h3 { font-weight: 650; }
.settings-intro p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.settings-card form .primary-button { margin-top: 18px; }
.comparison-shell { max-width:1510px; margin:0 auto; padding:0 5vw 100px; }
.comparison-empty { padding:70px 24px; text-align:center; background:white; border:1px solid var(--line); border-radius:var(--radius-md); }
.comparison-empty h2 { margin:0 0 10px; font-size:30px; font-weight:650; }.comparison-empty p { margin:0 auto 22px; max-width:620px; color:var(--muted); }
.comparison-category { display:flex; justify-content:space-between; gap:15px; padding:14px 17px; background:#e5f7f4; border:1px solid #bcded9; color:#145c55; font-size:13px; }
.comparison-table-wrap { overflow-x:auto; background:white; border:1px solid var(--line); border-top:0; }
.comparison-table { min-width:760px; table-layout:fixed; }
.comparison-table th:first-child { width:185px; position:sticky; left:0; z-index:2; background:#f7faf9; }
.comparison-table th,.comparison-table td { padding:16px; vertical-align:top; line-height:1.5; border-right:1px solid var(--line); }
.comparison-table td { text-align:justify; text-justify:inter-word; white-space:normal; }
.comparison-table thead th { background:white; }.comparison-table tbody th { font-weight:650; color:#526661; }
.comparison-product { display:grid; gap:10px; min-height:110px; align-content:start; }.comparison-product img { width:100%; height:110px; object-fit:contain; background:#f4f5f2; }.comparison-product strong { font-size:15px; }
.comparison-add { margin-top:18px; color:#145c55; }
.comparison-modal { width:min(1080px,calc(100vw - 30px)); }
.comparison-modal .comparison-shell { padding:0; }
.comparison-dialog-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.otp-b2b-link{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:14px;background:#f0f7f6;border:1px solid #cbe0dc;border-radius:var(--radius-md);font-size:12px}.otp-b2b-link .text-button{white-space:nowrap}
.account-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:16px; }.account-tab{min-width:190px;padding:12px;text-align:left;border:1px solid var(--line);background:white;border-radius:var(--radius-sm);cursor:pointer}.account-tab strong,.account-tab span{display:block}.account-tab span{margin-top:4px;color:var(--muted);font-size:12px}.account-tab.active{background:#e5f7f4;border-color:#72bdb2}.account-drilldown{background:white;border:1px solid var(--line);padding:22px;border-radius:var(--radius-md)}.account-drilldown-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.account-drilldown-head h2{margin:0;font-size:28px}.account-drilldown-head p{color:var(--muted)}.account-stats.compact{padding:14px 0;max-width:none}
.user-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.user-detail-grid>div{padding:12px;background:#f7faf9;border:1px solid var(--line)}.user-detail-grid .wide{grid-column:1/-1}.user-detail-grid span,.permission-heading span{display:block;color:var(--muted);font-size:12px}.user-detail-grid strong,.user-detail-grid a{display:block;margin-top:5px;font-size:14px}.permission-heading{margin-bottom:12px}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.permission-grid label{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);background:white}
.field-warning { color: #a24b28; font-size: 12px; line-height: 1.4; }
.field-stack { display: grid; gap: 8px; }
.field-stack span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: white; color: #183239; border: 1px solid #9bcfc8; padding: 12px 18px; font-size: 12px; font-weight: 700; pointer-events: none; transition: .24s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Launch typography: lighter Manrope weights with crisp hierarchy. */
body{font-weight:380}.hero h1{font-weight:540}.catalog-topline h2,.panel h2,.page-heading h1,.drawer-heading h2,.modal h2,.detail-copy h2,.settings-intro h2{font-weight:540}.product-name,.approval-card h3,.workflow-card h3{font-weight:580}.primary-button,.secondary-button,.small-button,.text-button,.category-tab,.admin-tab,.eyebrow,.trust-row,.price-label,.stock,.add-button,.status-pill,.team-chip,.form-grid label span,.field-stack span{font-weight:580}.nav-link,.trade-access-button,.workspace-home-button,.back-button,.account-button,.product-choice-actions button,.site-footer a,.site-footer button{font-weight:480}.price{font-weight:620}.account-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.account-heading-actions .secondary-button{min-height:40px}.pending-document{color:#8a8a84!important;border-bottom:0!important;cursor:not-allowed!important}.document-upload input{height:auto!important;padding:11px!important}.document-upload small{color:var(--muted);font-size:12px}.document-upload em{font-style:normal;font-weight:400;color:var(--muted)}.submission-success{padding:26px;background:#e8f6f1;border:1px solid #9fd3c5}.submission-success strong,.submission-success span{display:block}.submission-success span{margin-top:8px;color:#08766d}.submission-success p{margin-bottom:0;color:var(--muted)}
.payment-unavailable{padding:18px;background:#fff8e8;border:1px solid #e3c77e}.payment-unavailable p{margin:8px 0 0;color:var(--muted);line-height:1.55}
.registration-checklist{margin:0;padding:14px;border:1px solid #c9c9c3}.registration-checklist legend{padding:0 7px;font-size:12px;font-weight:580;text-transform:uppercase;color:var(--muted)}.registration-checklist legend small{margin-left:6px;font-weight:400;text-transform:none}.multi-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.multi-choice-grid label{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);background:#fafbf9}.multi-choice-grid input{width:16px;height:16px;padding:0}.multi-choice-grid span{font-size:12px!important;text-transform:none!important;letter-spacing:0!important;color:#344e53!important}

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .hero { grid-template-columns: 1fr 1fr; }
  .unit-large { width: 205px; height: 325px; }
  .battery-pack { width: 145px; height: 245px; }
  .approval-grid { grid-template-columns: repeat(2,1fr); }
  .account-layout { grid-template-columns: 1fr; }
  .order-panel, .soa-panel, .activity-panel, .payment-panel { grid-column: 1; }
  .tracking-panel { grid-column: 1; }
  .operations-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .privacy-strip { font-size: 10px; padding: 5px 10px; text-align: center; }
  .site-header { height: auto; min-height: 72px; padding: 10px 15px; }
  .header-primary { height:auto; gap:14px; }
  .main-nav { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; height: 58px; background: white; border-top: 1px solid var(--line); justify-content: space-around; gap: 0; }
  .nav-link { flex: 1; }
  .persona-control span { display: none; }
  .sync-chip { display: none; }
  .brand img { width: 86px; max-height: 25px; }
  .header-actions { gap: 6px; }
  .account-button { position:fixed; z-index:36; bottom:0; left:50%; width:50%; height:58px; background:white; border-top:1px solid var(--line); }
  .main-nav { width:50%; right:50%; }
  .trade-access-button { max-width:140px; padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .persona-control select { max-width: 118px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 25px 38px; }
  .hero h1 { font-size: 46px; }
  .hero-visual { min-height: 330px; }
  .hero-slider-image { object-position:64% center; }
  .hero[data-slide="1"] .hero-slider-image[data-hero-image="1"] { object-position:67% center; }
  .hero[data-slide="2"] .hero-slider-image[data-hero-image="2"] { object-position:65% center; }
  .stage-one { left: 15%; }
  .catalog-shell { padding: 70px 18px 90px; }
  .catalog-topline { display: block; }
  .chooser-strip { grid-template-columns: auto 1fr; }
  .chooser-strip .secondary-button { grid-column: 1/-1; width: 100%; }
  .catalog-tools { margin-top: 22px; display: grid; grid-template-columns: 1fr; }
  .search-box { width: 100%; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .product-art { height: 180px; }
  .page-heading { display: block; padding: 52px 18px 25px; }
  .page-heading #approvalBadge, .page-heading > .primary-button { margin-top: 20px; }
  .account-stats { grid-template-columns: repeat(2,1fr); padding: 0 18px 14px; }
  .account-layout, #adminContent { padding: 0 18px; }
  .admin-tabs { padding: 0 18px; }
  .desk-search-wrap { padding:0 18px; align-items:stretch; flex-direction:column; }
  .desk-notifications { width:100%; }.notice-chip{flex:1}
  .activity-list, .approval-grid { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-art { min-height: 230px; }
  .form-grid { grid-template-columns: 1fr; }
  .advisor-choices, .advisor-mini-grid { grid-template-columns: 1fr 1fr; }
  .form-grid label.wide { grid-column: 1; }
  .admin-table-tools { align-items: flex-start; flex-direction: column; }
  .tracking-steps { grid-template-columns: repeat(3,1fr); row-gap: 12px; }
  .image-preview { grid-template-columns: repeat(2,1fr); }
  .settings-card { grid-template-columns: 1fr; padding: 20px; }
  .line-editor-row { grid-template-columns:1fr; }
  .comparison-shell { padding:0 18px 90px; }.comparison-category { align-items:flex-start; flex-direction:column; }
  .comparison-modal .comparison-shell { padding:0; }
  .payment-layout { grid-template-columns: 1fr; }
  .payment-qr { width: 92px; height: 92px; }
  .workflow-meta { grid-template-columns: 1fr; }
  .internal-user .catalog-topline { top:72px; margin:0; }
  .offer-banner{justify-content:flex-start;overflow:hidden}.offer-banner small{display:none}.service-strip{grid-template-columns:1fr;padding:46px 18px;gap:28px}.footer-main{grid-template-columns:1.25fr 1fr;padding:46px 24px;gap:38px}.footer-bottom{align-items:flex-start;flex-direction:column;padding:22px 24px}.category-tabs.floating-categories{top:70px}
  .workspace-home-button { padding:0 6px; font-size:12px; }
  .user-detail-grid,.permission-grid { grid-template-columns:1fr; }.user-detail-grid .wide{grid-column:1}.account-drilldown-head{flex-direction:column}
  .source-card { grid-template-columns: auto 1fr; }
  .source-card a { grid-column: 1/-1; width: fit-content; }
}

@media (max-width: 480px) {
  .service-strip-links{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr;padding:42px 20px 34px}.footer-column h3{margin-bottom:15px}.footer-bottom{padding:20px}.footer-bottom nav{gap:14px 20px}
  .persona-control select { max-width: 92px; font-size: 10px; padding-left: 7px; }
  .hero h1 { font-size: 44px; }
  .hero-visual { min-height: 300px; }
  .hero-slider-image { object-position:66% center; }
  .hero[data-slide="1"] .hero-slider-image[data-hero-image="1"] { object-position:70% center; }
  .hero[data-slide="2"] .hero-slider-image[data-hero-image="2"] { object-position:68% center; }
  .unit-large { width: 170px; height: 270px; }
  .battery-pack { width: 120px; height: 205px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-art { height: 220px; }
  .brand img { width:92px; max-height:28px; }
  .trade-access-button { max-width:118px; font-size:12px; }
  .credential-grid { grid-template-columns:1fr; gap:4px; }
  .access-banner { align-items: flex-start; flex-direction: column; }
  .advisor-choices, .advisor-mini-grid { grid-template-columns: 1fr; }
  .account-stats { grid-template-columns: 1fr 1fr; }
  .modal { padding: 22px 18px; }
  .tracking-steps { grid-template-columns: 1fr; }
  .proof-list div { display: grid; gap: 3px; }
}

/* Mobile storefront refinement and customer OTP access. */
.mobile-label,.header-icon-label{display:none}
.customer-otp-modal{width:min(520px,calc(100vw - 28px))}.otp-panel{display:grid;gap:16px}.otp-panel label>span,.otp-mobile-field>span{display:block;margin-bottom:7px;color:var(--muted);font-size:12px;font-weight:580;text-transform:uppercase;letter-spacing:.04em}.mobile-input{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid var(--line);background:white}.mobile-input b{padding:0 12px;color:#405b5f;font-size:14px;border-right:1px solid var(--line)}.mobile-input input{border:0;min-width:0}.otp-code-input{text-align:center;font-size:22px!important;letter-spacing:.28em;font-weight:650}.otp-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.otp-privacy{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.55}

@media (max-width:760px){
  body{font-size:14px}.site-header{height:64px;min-height:64px;padding:7px 10px;gap:7px}.header-primary{height:auto;min-width:0;gap:7px}.brand img{display:block!important;width:82px;max-height:25px;flex:0 0 auto}.mobile-catalog-title{display:block;font-size:10px}.header-actions{gap:4px;min-width:0}.desktop-label{display:none}.mobile-label,.header-icon-label{display:block}.trade-access-button,.account-button{position:static;width:auto;height:40px;min-height:40px;padding:0 8px;font-size:10px;white-space:nowrap}.icon-button{width:40px;height:42px;padding:4px 2px 2px;align-content:center;gap:1px;overflow:visible}.icon-button svg{width:17px;height:17px}.header-icon-label{color:#315c59;font-size:8px;line-height:1;font-weight:650}.cart-count{right:-2px;top:-3px}.hero-copy{padding:40px 22px 32px}.hero h1{font-size:clamp(34px,10vw,42px)}.hero-copy>p,.catalog-intro{font-size:14px;line-height:1.55}.catalog-shell{padding:48px 14px 90px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-info{padding:13px 12px 12px}.product-name{font-size:14px;min-height:36px}.product-summary,.product-spec{font-size:12px}.price{font-size:16px}.stock,.price-label{font-size:10px}.add-button,.details-button,.product-choice-actions button{font-size:10px}.category-tabs{margin:20px -14px 14px;padding:0 14px;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}.category-tabs::-webkit-scrollbar{display:none}.category-tab{min-height:32px;padding:0 11px;font-size:10px;letter-spacing:.025em;white-space:nowrap}.category-tabs.floating-categories{top:64px;padding:6px 12px;min-height:44px}.catalog-topline h2,.panel h2,.page-heading h1,.drawer-heading h2,.modal h2{font-size:clamp(27px,8vw,36px)}.offer-ticker-item{padding:8px 24px}.offer-ticker-item small{display:none}.comparison-shell{padding:0 10px 80px}.comparison-category{padding:10px 12px;font-size:11px}.comparison-table-wrap{border-radius:0 0 var(--radius-md) var(--radius-md);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.comparison-table{min-width:max-content}.comparison-table th:first-child{width:108px;min-width:108px}.comparison-table th:not(:first-child),.comparison-table td{width:178px;min-width:178px;scroll-snap-align:start}.comparison-table th,.comparison-table td{padding:10px;font-size:12px}.comparison-product{min-height:88px;gap:7px}.comparison-product img{height:82px}.comparison-product strong{font-size:12px}.comparison-modal{width:calc(100vw - 12px);padding:22px 10px}.comparison-modal .modal-heading{padding:0 40px 0 4px}.product-detail-art{min-height:260px;touch-action:pan-y}.gallery-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.gallery-thumb{min-width:64px;scroll-snap-align:center}.detail-price{font-size:22px}.otp-b2b-link{align-items:flex-start;flex-direction:column}
}

@media (max-width:480px){
  .hero h1{font-size:34px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-art{height:145px}.product-type{left:8px;top:8px;padding:4px 5px;font-size:7px}.product-wishlist-button{top:7px;right:7px;width:32px;height:32px}.product-wishlist-button svg{width:16px;height:16px}.brand img{width:76px;max-height:24px}.mobile-catalog-title{font-size:9px}.trade-access-button,.account-button{padding:0 6px;font-size:9px}.header-actions{gap:2px}.icon-button{width:36px}.header-icon-label{font-size:7px}
}

/* v29 mobile brand and catalogue header correction. */
@media (max-width:760px){
  .header-primary{gap:0;flex:0 0 auto;overflow:visible}
  .brand{flex:0 0 auto;gap:6px;overflow:visible}
  .brand img{display:block!important;visibility:visible!important;opacity:1!important;width:96px!important;max-width:none!important;max-height:27px!important;flex:0 0 auto}
  .mobile-catalog-title{display:block;font-size:9px;font-weight:520;letter-spacing:0}
  .main-nav{display:none}
  .internal-user .main-nav{display:flex}
}
@media (max-width:480px){
  .brand img{width:88px!important;max-height:26px!important}
  .mobile-catalog-title{font-size:8px}
}

/* v30 mobile comparison, header actions and OTP sizing. */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .brand img{width:104px!important;max-height:30px!important}
  .trade-access-button{width:40px!important;min-width:40px;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid #b9dcd6!important;background:#e6f6f3!important;font-size:9px!important}
  .customer-otp-modal{width:calc(100vw - 16px);padding:24px 18px}
  .mobile-input{min-height:56px}
  .mobile-input input{min-height:54px;font-size:17px;padding:0 14px}
  .mobile-input b{font-size:16px;padding:0 14px}
  .comparison-modal[open]{inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:22px 10px 28px!important;border-radius:0!important;overflow-y:auto;overflow-x:hidden}
  .comparison-modal .comparison-table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .comparison-modal .comparison-table{min-width:max-content!important;table-layout:fixed}
  .comparison-modal .comparison-table th,.comparison-modal .comparison-table td,.comparison-modal .comparison-product strong{white-space:normal!important;overflow-wrap:anywhere;word-break:normal;text-align:left!important;hyphens:auto}
  .comparison-modal .comparison-table th:not(:first-child),.comparison-modal .comparison-table td{width:166px;min-width:166px;max-width:166px}
  .comparison-modal .comparison-table th:first-child{width:96px;min-width:96px;max-width:96px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;grid-auto-flow:row}
  .product-card,.product-card:nth-child(n){width:100%;min-width:0;margin:0;align-self:stretch;justify-self:stretch;grid-column:auto!important}
  .product-info{display:flex;flex:1;min-width:0;flex-direction:column}
  .product-card .price-row{margin-top:auto}
}
@media (max-width:480px){
  .brand img{width:96px!important;max-height:29px!important}
  .trade-access-button{width:36px!important;min-width:36px;height:42px!important}
}

/* v31 category alignment, persistent mobile header and stable comparison scrolling. */
@media (min-width:761px){
  .category-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));width:100%}
  .category-tabs .category-tab{width:100%;min-width:0}
  .category-tabs.floating-categories{display:flex}
  .category-tabs.floating-categories .category-tab{width:auto;min-width:max-content;flex:0 0 auto}
}
@media (max-width:760px){
  .site-header{position:sticky!important;top:0!important;z-index:50}
  .category-tabs,.category-tabs.floating-categories{position:sticky;top:64px;left:auto;right:auto;z-index:38;width:calc(100% + 28px);margin:20px -14px 14px;padding:7px 14px;display:flex;flex-wrap:nowrap;overflow-x:auto;background:rgba(255,255,255,.94);border-top:1px solid rgba(222,221,215,.75);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(25,48,48,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .category-tabs .category-tab{width:auto;min-width:max-content;flex:0 0 auto}
  .comparison-modal .comparison-table-wrap{scroll-snap-type:none!important;scroll-behavior:auto}
  .comparison-modal .comparison-table th:not(:first-child),.comparison-modal .comparison-table td{scroll-snap-align:none!important}
  .gallery-arrow{width:38px;height:38px;background:rgba(18,48,50,.38)}
  .gallery-arrow.previous{left:9px}
  .gallery-arrow.next{right:9px}
}

/* v32 reliable mobile floating navigation and equal-height product cards. */
.product-card{display:flex;flex-direction:column;height:100%}
.product-info{display:flex;flex:1;flex-direction:column}
.product-card .product-choice-actions{margin-top:auto}
#categoryStickySentinel{height:0}
@media (max-width:760px){
  html,body{overflow-x:clip}
  body{padding-top:64px}
  .site-header{position:fixed!important;inset:0 0 auto 0!important;width:100%;z-index:60}
  .category-tabs,.category-tabs.floating-categories{position:relative;top:auto;left:auto;right:auto;z-index:1}
  .category-tabs.mobile-categories-fixed{position:fixed;top:64px;left:0;right:0;z-index:55;width:100%;margin:0;padding:7px 14px;min-height:46px}
  body.mobile-category-active #categoryStickySentinel{height:60px}
  .product-grid{align-items:stretch}
  .product-card,.product-card:nth-child(n){display:flex;height:100%;flex-direction:column}
  .product-card .product-info{display:flex;flex:1;flex-direction:column}
  .product-card .product-choice-actions{margin-top:auto}
}

/* v33 preserve complete square 1200 × 1200 product artwork. */
.product-art{height:auto!important;aspect-ratio:1/1;background:#f4f5f2}
.product-image{object-fit:contain!important;background:#f4f5f2}
.product-detail-art{min-height:0!important;aspect-ratio:1/1;background:#f4f5f2}
.product-detail-art .product-image{object-fit:contain!important}
.gallery-thumb{height:auto;aspect-ratio:1/1;background:#f4f5f2}
.gallery-thumb img,.wishlist-thumb img,.image-preview img{object-fit:contain}
@media (max-width:760px){
  .product-art{height:auto!important;aspect-ratio:1/1}
  .product-detail-art{min-height:0!important;aspect-ratio:1/1}
}

/* Real photos only, including during initial loading and network failures. */
.product-art::before,.product-art::after,.product-detail-art::before,.product-detail-art::after{content:none!important;display:none!important}
.product-fallback,.sun-disc,.product-stage,.technical-grid{display:none!important}
.hero-visual{background:#f5f6f7}
[hidden]{display:none!important}
.media-empty{position:absolute;inset:0;display:grid;place-items:center;color:#657078;font-size:14px;background:#f5f6f7}
#galleryMediaStage{position:absolute;inset:0}
.video-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;background:#fff;gap:12px}
.video-slide iframe{width:100%;aspect-ratio:16/9;border:0}
.video-slide a{text-align:center;font-size:14px}
.gallery-thumb{position:relative}.video-badge{position:absolute;bottom:2px;left:2px;right:2px;background:#111c;color:white;font-size:12px;border-radius:4px;padding:3px}
.gallery-arrow,.gallery-counter{z-index:5}
.gst-note{display:inline-block;margin-left:6px;font-size:13px;font-weight:400;color:#59676d}
.detail-price .gst-note{display:inline-block}
.hero:has(#heroDynamicImage[hidden]){grid-template-columns:1fr}
.hero:has(#heroDynamicImage[hidden]) .hero-visual{display:none}
.detail-price .gst-note{font-size:13px;letter-spacing:0;text-transform:none}
.hero-slider-image.hero-dynamic-image{opacity:1;visibility:visible;transform:none}

/* Keep the tax label beside the selling price and make MRP readable. */
.price-label{display:block}
.selling-price{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.selling-price .price{display:inline;margin-top:2px}
.selling-price .gst-note,.detail-price .selling-price .gst-note{font-size:11px;font-weight:400;line-height:1.3;margin:0;letter-spacing:0;text-transform:none}
.mrp-line{font-size:14px;line-height:1.4;font-weight:500;color:#526168;margin-top:5px}
.mrp-value{text-decoration-thickness:1px;text-decoration-color:currentColor}
.detail-price .detail-mrp,.detail-price .detail-mrp del{font-size:16px;font-weight:500;color:#526168;line-height:1.4}
.detail-price .detail-mrp del{text-decoration-thickness:1px}

/* Sharing stays at the far right of each product heading. */
.product-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}
.product-name-row .product-name,.product-name-row h2{flex:1;min-width:0;margin-right:0}
.product-share{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:3px 0 3px 5px;color:#243d43;font-size:12px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.product-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.product-share:focus-visible{outline:2px solid #0c8379;outline-offset:3px}
.shared-product-label{display:inline-block;font-size:12px;color:#14665e;margin:0 0 8px}
#productGrid{scroll-margin-top:135px}
.share-link-input{width:100%;padding:12px;border:1px solid #bbc5c6;border-radius:6px}
@media(max-width:760px){.product-name-row{gap:4px}.product-share{font-size:11px;gap:3px}.product-share svg{width:14px;height:14px}.product-name-row .product-name{overflow-wrap:anywhere}}

/* Align the heading and Share control on the same visual level. */
.product-name-row{align-items:center}
.product-info .product-name-row{min-height:42px;margin-bottom:0}
.product-name-row .product-name,.product-name-row h2{margin:0;min-height:0}
.product-name-row .product-share{min-height:0;padding:0;line-height:1.3}
.detail-copy .product-name-row{margin-bottom:12px}
.similar-products{border-top:1px solid #d8e0e0;margin-top:24px;padding-top:18px}
.similar-products h3{font-size:18px;font-weight:580;margin:0 0 14px}
.similar-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.similar-product{display:flex;flex-direction:column;gap:8px;text-align:left;background:#fff;border:1px solid #d8e0e0;padding:12px;border-radius:7px;color:inherit;cursor:pointer;min-width:0}
.similar-product img{width:100%;aspect-ratio:1;object-fit:contain}
.similar-product strong{font-size:14px;font-weight:580}.similar-product span{font-size:13px;line-height:1.4}.similar-product small{font-size:11px}
@media(max-width:760px){.product-info .product-name-row{min-height:36px}.similar-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact mobile sharing; keep the desktop control unchanged. */
@media(max-width:760px){
  .product-name-row .product-share{width:24px;height:24px;min-width:24px;justify-content:center;padding:0;font-size:0;gap:0;text-decoration:none}
  .product-name-row .product-share span{display:none}
  .product-name-row .product-share svg{width:14px;height:14px;stroke-width:1.5}
}

/* Shared products start at the product section, never the homepage hero. */
.shared-product-loader{display:none}
.shared-product-loading .shared-product-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#fff;color:#163d3b;text-align:center}
.shared-product-loader h1{font-size:24px;font-weight:540;margin:12px 0}
.shared-product-loader p{font-size:16px;margin:0}.shared-product-loader span{font-size:14px;color:#586e6c}
.shared-product-loading .site-header,.shared-product-loading main,.shared-product-loading .site-footer{visibility:hidden}
.shared-product-entry #catalogView>.hero,.shared-product-entry #offerBanner,.shared-product-entry .catalog-topline,.shared-product-entry .chooser-strip{display:none}
.shared-product-entry .catalog-shell{padding-top:20px}
/* Full photos in the selected product, with a clean fullscreen viewer. */
#productDialog{width:min(1200px,calc(100vw - 32px));padding:28px}
.product-detail-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.product-gallery{width:100%;min-width:0}
.product-detail-art{width:100%;padding:0;aspect-ratio:1/1}
.gallery-image-open{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#f4f5f2;cursor:pointer}
.gallery-image-open .product-image{width:100%;height:100%;object-fit:contain!important;padding:0}
.image-zoom-hint{position:absolute;bottom:12px;left:12px;z-index:3;padding:6px 9px;background:#ffffffeb;border-radius:5px;color:#183a38;font-size:12px}
#productImageViewer{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;color:#183a38;overflow:hidden}
#productImageViewer::backdrop{background:#fff}
.image-viewer-toolbar{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:8px 16px;background:#fffffff5;border-bottom:1px solid #e2e8e7}
#imageViewerCaption{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-viewer-close{width:36px;height:36px;flex-shrink:0;padding:0;border:1px solid #d6dfde;border-radius:7px;background:#fff;color:inherit;font-size:26px;cursor:pointer}
#imageViewerStage{position:absolute;inset:60px 0 0;overflow:hidden;touch-action:pan-y;user-select:none}
#imageViewerImage{width:100%;height:100%;object-fit:contain;pointer-events:none}
#imageViewerError{position:absolute;inset:0;display:grid;place-items:center;color:#657570}
.image-viewer-prev,.image-viewer-next{position:absolute;top:50%;z-index:4;width:42px;height:42px;border:1px solid #d9e1e0;border-radius:50%;background:#ffffffde;color:#183a38;font-size:30px;cursor:pointer}
.image-viewer-prev{left:12px}.image-viewer-next{right:12px}
.image-viewer-open{overflow:hidden}
@media(max-width:760px){
 #productDialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:14px 10px}
 .product-detail-grid{grid-template-columns:minmax(0,1fr);gap:18px}
 .image-viewer-toolbar{padding:8px 10px}
 .image-viewer-prev,.image-viewer-next{width:34px;height:34px;font-size:25px}
 .image-zoom-hint{font-size:11px;padding:5px 7px}
}
/* A subtle frame around full-section photos. */
.product-art,.product-detail-art{border-radius:12px;overflow:hidden}
.gallery-image-open{border-radius:inherit;overflow:hidden}
.gallery-thumb{border-radius:8px}
@media(max-width:760px){.product-art,.product-detail-art{border-radius:9px}}

/* Round the complete recommendations section, cards and photos. */
.similar-products{border:1px solid #d8e0e0;border-radius:12px;padding:16px;overflow:hidden}
.similar-product{border-radius:12px;overflow:hidden}
.similar-product img{border-radius:9px;overflow:hidden}

.selling-price .gst-note,.detail-price .selling-price .gst-note{font-size:10px}
.otp-email-field{display:grid;gap:7px;margin-top:16px}
.otp-email-field input{width:100%;min-height:46px;padding:11px 12px;border:1px solid #b9cac7;border-radius:6px;font:inherit}
.otp-email-field small,.otp-mobile-field small{font-size:12px;line-height:1.4;color:#526662}
#customerOtpVerifyForm .otp-actions{flex-wrap:wrap;gap:12px}

/* Match the complete phone and email controls on every viewport. */
#customerOtpRequestForm .otp-mobile-field,#customerOtpRequestForm .otp-email-field{display:grid;gap:7px;margin:0;min-width:0}
#customerOtpRequestForm label>span{margin:0}
#customerOtpRequestForm .mobile-input,#customerOtpRequestForm .otp-email-field input{box-sizing:border-box;width:100%;height:48px;min-height:48px;max-height:48px;border:1px solid #b9cac7;border-radius:6px;background:#fff;font-size:16px}
#customerOtpRequestForm .mobile-input{grid-template-columns:52px minmax(0,1fr);overflow:hidden;padding:0}
#customerOtpRequestForm .mobile-input b{box-sizing:border-box;display:grid;place-items:center;width:52px;padding:0;font-size:16px;line-height:1}
#customerOtpRequestForm .mobile-input input{box-sizing:border-box;display:block;width:100%;height:46px;min-height:46px;max-height:46px;padding:0 12px;border:0;border-radius:0;font:inherit;font-size:16px;line-height:normal;background:transparent;outline-offset:-2px}
#customerOtpRequestForm .otp-email-field input{padding:0 12px;font:inherit;font-size:16px;line-height:normal}
#customerOtpRequestForm .mobile-input:focus-within{outline:2px solid #0c8379;outline-offset:1px}

@media(min-width:761px){
 .category-tabs.desktop-categories-sticky{position:sticky;top:var(--desktop-category-top,78px);z-index:35;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:10px 0;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
 .category-tabs.desktop-categories-sticky .category-tab{flex-shrink:0;white-space:nowrap}
}

/* Feedback belongs inside the open dialog's top layer. */
dialog .toast{z-index:1000;max-width:min(420px,calc(100vw - 32px));width:max-content;text-align:center;font-size:14px;font-weight:500;line-height:1.45;box-sizing:border-box}
.chemistry-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border:1px solid #abcbc7;border-radius:7px;background:#edf7f5;color:#124e47;font-size:12px;line-height:1.2;font-weight:580;letter-spacing:.03em}
.product-detail-art>.chemistry-badge{position:absolute;z-index:7;top:12px;right:12px;pointer-events:none}
.chemistry-lfp{background:#eef2fa;border-color:#c4d0e6;color:#304773}
.similar-product-media{position:relative;display:block;width:100%;min-height:26px}
.similar-product-media>.chemistry-badge{position:absolute;top:6px;right:6px}
@media(max-width:760px){.product-detail-art>.chemistry-badge{top:9px;right:9px}.similar-product-media>.chemistry-badge{font-size:11px;padding:4px 7px}}

.trade-access-modal .access-mode-tabs{display:flex;gap:8px;flex-wrap:nowrap}
.trade-access-modal .access-mode{font-size:14px;line-height:1.3;padding:10px 12px;border-radius:7px;min-width:0}
.trade-registration-prompt{display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.trade-registration-prompt>span{font-size:14px;color:#526662}
@media(max-width:760px){.trade-access-modal .access-mode{font-size:13px;padding:10px 8px}.trade-access-modal .access-mode[data-access-mode="login"]{flex:0 0 30%}}