:root{
  --bs-primary:#003571; --bs-primary-rgb:0,53,113;
  --brand-teal:#026395; --brand-navy:#023564; --brand-blue:#003571;
  --brand-orange:#FBA301; --brand-green:#1DA65B;
  --logo-blue:#06618E; --brand-amber:#FBA301; --rule:#BBBABA; --deep:#023564;
  --ff-head:'Montserrat',sans-serif;
  --ink:#191C1D; --muted:#5F5E5E; --line:rgba(115,119,131,.14);
  --card-grey:#F3F4F5; --footer:#414141;
  --bs-body-color:var(--ink);
}
*{ -webkit-font-smoothing:antialiased; }
.container-wide{ width:100%; max-width:1800px; margin-left:auto; margin-right:auto; padding-left:clamp(16px,2.6vw,52px); padding-right:clamp(16px,2.6vw,52px); }
body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:#fff; }
.ff-head{ font-family:'Montserrat',sans-serif; }
::selection{ background:var(--brand-orange); color:#fff; }
/* buttons */
.btn-brand{ background:var(--brand-blue); color:#fff; border:0; border-radius:3px; font-weight:600; letter-spacing:.06em; transition:.18s; }
.btn-brand:hover{ background:#00285a; color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(0,40,90,.6); }
.btn-orange{ background:var(--brand-orange); color:#fff; border:0; border-radius:3px; font-weight:700; letter-spacing:.05em; transition:.18s; }
.btn-orange:hover{ background:#d98b00; color:#fff; }
/* top utility links */
.util-link{ color:rgba(255,255,255,.82); font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:.15s; white-space:nowrap; }
.util-link:hover{ color:#fff; }
.util-link .bi{ font-size:15px; opacity:.9; }
.count-dot{ position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--brand-orange); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }
/* main nav */
.main-nav{ background:var(--brand-teal); position:relative; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); z-index:40; }
.main-nav-link{ color:#fff; font-size:14px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; padding:15px 4px; position:relative; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; transition:.15s; }
.main-nav-link::after{ content:''; position:absolute; left:0; right:0; bottom:8px; height:2px; background:var(--brand-orange); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.main-nav-link:hover::after,.main-nav-link.active::after{ transform:scaleX(1); }
.main-nav-link:hover{ color:#fff; }
.main-nav-link.active{ color:#fff; }
/* mega menu */
.mega-panel{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; box-shadow:0 24px 48px -18px rgba(0,0,0,.4); border-top:3px solid var(--brand-orange); z-index:60; }
.dept-item:hover .mega-panel, .dept-item.open .mega-panel{ display:block; }
.mega-link{ display:block; color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; padding:9px 12px; border-radius:6px; transition:.14s; }
.mega-link:hover{ background:var(--card-grey); color:var(--brand-blue); padding-left:18px; }
.mega-head{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-orange); }
/* category tiles */
.cat-tile{ position:relative; overflow:hidden; border-radius:8px; display:block; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.cat-tile .cat-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-img{ transform:scale(1.06); }
.cat-tile .cat-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35)); }
.cat-tile .cat-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--brand-orange); color:#fff; border-radius:3px; padding:11px 22px; font-size:13px; font-weight:700; letter-spacing:.06em; transition:.18s; }
.cat-tile:hover .cat-cta{ background:#fff; color:var(--brand-blue); gap:14px; }
.cat-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-orange); background:#fff; padding:5px 12px; border-radius:2px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(46,49,50,.82); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25); color:#F0F1F2; border-radius:20px; padding:4px 13px; font-size:11px; font-weight:600; letter-spacing:.08em; transition:.18s; }
.cat-tile:hover .chip{ background:var(--brand-orange); border-color:var(--brand-orange); }
/* banners */
.banner-card{ position:relative; overflow:hidden; border-radius:8px; display:block; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.banner-card img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.banner-card:hover img{ transform:scale(1.05); }
/* section head */
.sec-title{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:30px; letter-spacing:.04em; color:var(--muted); margin:0; }
.sec-rule{ height:3px; width:56px; background:var(--brand-orange); border-radius:2px; }
/* product rail */
.rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 2px 14px; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail.is-grid{ flex-wrap:wrap; overflow:visible; }
.pcard{ scroll-snap-align:start; flex:0 0 auto; width:264px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; transition:transform .2s, box-shadow .2s, border-color .2s; display:flex; flex-direction:column; }
.rail.is-grid .pcard{ width:auto; }
.pcard:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -22px rgba(0,0,0,.35); border-color:transparent; }
.pcard.style-flat{ border-color:var(--line); }
.pcard.style-elevated{ border-color:transparent; box-shadow:0 10px 26px -18px rgba(0,0,0,.28); }
.pcard.style-minimal{ border-color:transparent; }
.pcard-media{ position:relative; aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pcard-media > a, .lcard-media > a, .pdp-main > a, .insta-tile > a{ display:block; width:100%; height:100%; }
.pcard:hover .pcard-media img{ transform:scale(1.05); }
.pcard-badge{ position:absolute; top:12px; left:12px; z-index:3; font-size:10px; font-weight:700; letter-spacing:.06em; padding:5px 10px; border-radius:4px; color:#fff; text-transform:uppercase; }
.badge-green{ background:var(--brand-green); }
.badge-orange{ background:var(--brand-orange); }
.pcard-acts{ position:absolute; top:10px; right:10px; z-index:3; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(8px); transition:.2s; }
.pcard:hover .pcard-acts{ opacity:1; transform:none; }
@media (max-width:991.98px){ .pcard-acts{ opacity:1; transform:none; } }
.act-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:.15s; box-shadow:0 2px 8px -3px rgba(0,0,0,.2); }
.act-btn:hover{ background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); transform:scale(1.08); }
.act-btn.on-fav{ background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
.act-btn.on-cmp{ background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }
.act-btn .ic{ width:19px; height:17px; }
.act-btn .ic-list{ width:18px; height:18px; }
.pcard-body{ padding:16px 16px 18px; text-align:center; }
.pcode{ font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted); }
.pname{ font-size:15px; color:var(--ink); margin:3px 0 10px; line-height:1.4; min-height:42px; }
.pprice{ font-size:20px; font-weight:700; color:var(--ink); }
.pold{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.pstock{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:13px; font-weight:700; color:var(--ink); }
.pstock .bi{ color:var(--muted); font-size:16px; }
.rail-arrow{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:.15s; }
.rail-arrow:hover{ background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }
.view-toggle{ border:1px solid var(--line); border-radius:8px; overflow:hidden; display:inline-flex; }
.view-toggle button{ border:0; background:#fff; color:var(--muted); padding:8px 12px; font-size:15px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:6px; }
.view-toggle button.active{ background:var(--brand-blue); color:#fff; }
/* insta */
.insta-tile{ position:relative; overflow:hidden; border-radius:8px; display:block; }
.insta-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.insta-tile:hover img{ transform:scale(1.07); }
.insta-tile .insta-ov{ position:absolute; inset:0; background:rgba(0,53,113,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; opacity:0; transition:.25s; }
.insta-tile:hover .insta-ov{ opacity:1; }
/* ===== XBZ LOGO (composed from Figma vectors) ===== */
.xbz-logo{ position:relative; display:block; width:var(--logo-w,213px); aspect-ratio:213.04/131.542; flex-shrink:0; color:var(--logo-blue); font-size:calc(var(--logo-w,213px)*.082); }
.xbz-logo .m{ position:absolute; display:block; }
.xbz-mark{ left:2.421%; top:1.593%; width:95.389%; height:77.19%; }
.xbz-ring{ position:absolute; left:.913%; top:6.051%; width:43.04%; height:69.448%; }
.xbz-ring-a{ left:0; top:0; width:59.235%; height:84.955%; }
.xbz-ring-b{ left:40.024%; top:14.196%; width:59.976%; height:85.804%; }
.xbz-word{ position:absolute; left:2.651%; top:84%; width:94.921%; display:flex; justify-content:space-between; font-weight:400; line-height:1; letter-spacing:0; }
.xbz-logo.on-dark{ color:#fff; }
/* ===== ICON MASKS (exact Figma vectors) ===== */
.ic{ display:inline-block; flex-shrink:0; background-color:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.ic-user{ width:17px; height:19px; -webkit-mask-image:url(brand/x-user-blue.svg); mask-image:url(brand/x-user-blue.svg); }
.ic-headset{ width:17px; height:20px; -webkit-mask-image:url(brand/x-headset-blue.svg); mask-image:url(brand/x-headset-blue.svg); }
.ic-search{ width:26px; height:26px; -webkit-mask-image:url(brand/x-search-blue.svg); mask-image:url(brand/x-search-blue.svg); }
.ic-compare{ width:25px; height:21px; -webkit-mask-image:url(brand/x-compare-blue.svg); mask-image:url(brand/x-compare-blue.svg); }
.ic-heart{ width:25px; height:22px; -webkit-mask-image:url(brand/x-heart-blue.svg); mask-image:url(brand/x-heart-blue.svg); }
.ic-list{ width:25px; height:25px; -webkit-mask-image:url(brand/x-list-blue.svg); mask-image:url(brand/x-list-blue.svg); }
.ic-pin{ width:14px; height:17px; -webkit-mask-image:url(brand/x-pin-white.svg); mask-image:url(brand/x-pin-white.svg); }
.ic-phone{ width:15px; height:15px; -webkit-mask-image:url(brand/x-phone-white.svg); mask-image:url(brand/x-phone-white.svg); }
.ic-mail{ width:17px; height:14px; -webkit-mask-image:url(brand/x-mail-white.svg); mask-image:url(brand/x-mail-white.svg); }
.bb-ic{ width:21px; height:21px; }
.oc-panel .hdr-util{ font-size:14px; }
/* ===== HEADER v2 ===== */
.hdr-strip{ background:#fff; border-bottom:1px solid rgba(2,99,149,.1); }
.hdr-slogan{ font-size:10px; line-height:12px; color:var(--brand-teal); letter-spacing:.01em; margin:0; }
.hdr-util{ display:inline-flex; align-items:center; gap:14px; color:var(--brand-teal); font-size:14px; font-weight:600; letter-spacing:.05em; line-height:16.8px; text-decoration:none; transition:.15s; white-space:nowrap; }
.hdr-util:hover{ color:var(--logo-blue); }
.hdr-util:hover .ic{ transform:scale(1.08); }
.hdr-util .ic{ transition:.15s; }
.hdr-main{ background:#fff; }
.search-wrap{ display:flex; width:100%; max-width:573px; height:44px; }
.search-field{ flex:1; border:2px solid var(--logo-blue); border-right:0; border-radius:4px 0 0 4px; background:#fff; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); padding:0 22px; font-size:14px; font-weight:600; letter-spacing:.7px; color:var(--logo-blue); text-transform:uppercase; outline:0; min-width:0; }
.search-field::placeholder{ color:var(--logo-blue); opacity:.85; }
.search-field:focus{ border-color:var(--brand-amber); }
.search-btn{ width:59px; flex-shrink:0; border:0; border-radius:0 4px 4px 0; background:var(--logo-blue); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); transition:.15s; }
.search-btn:hover{ background:#024b70; }
.search-wrap:focus-within .search-field{ border-color:var(--brand-amber); color:var(--brand-amber); }
.search-wrap:focus-within .search-field::placeholder{ color:var(--brand-amber); }
.search-wrap:focus-within .search-btn{ background:var(--brand-amber); }
.search-box{ position:relative; width:100%; max-width:573px; }
.search-box .search-wrap{ max-width:none; }
.sug{ position:absolute; z-index:1200; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 26px 60px -22px rgba(2,53,100,.45); overflow:hidden; animation:sugIn .16s ease-out; }
@keyframes sugIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.sug-grid{ display:grid; grid-template-columns:minmax(210px,.8fr) 1.2fr; }
.sug-col{ padding:16px 0 10px; min-width:0; }
.sug-col + .sug-col{ border-left:1px solid var(--line); }
.sug-head{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 18px; margin:0 0 10px; }
.sug-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; padding:9px 18px; text-decoration:none; cursor:pointer; transition:background .12s; }
.sug-item:hover, .sug-item.on{ background:#f2f6fb; }
.sug-cat{ font-family:var(--ff-head); font-size:13.5px; font-weight:600; color:var(--brand-navy); line-height:1.35; }
.sug-cat .hit{ color:var(--brand-amber); }
.sug-cat-sub{ display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:2px; }
.sug-thumb{ width:48px; height:48px; flex:0 0 auto; border-radius:8px; background:var(--card-grey); overflow:hidden; }
.sug-thumb img{ width:100%; height:100%; object-fit:cover; }
.sug-name{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.sug-name .hit{ color:var(--brand-amber); }
.sug-code{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; letter-spacing:.02em; }
.sug-all{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 18px; border-top:1px solid var(--line); background:#fbfcfd; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-navy); text-decoration:none; }
.sug-all:hover{ background:#f2f6fb; color:var(--brand-amber); }
.sug-empty{ padding:22px 18px; font-size:13.5px; color:var(--muted); }
.sug-hint{ display:none; }
@media (min-width:992px){ .sug-hint{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:500; } }
.sug-kbd{ border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; font-size:10px; font-family:'Inter',sans-serif; color:var(--muted); }
@media (max-width:991.98px){ .sug-grid{ grid-template-columns:1fr; } .sug-col + .sug-col{ border-left:0; border-top:1px solid var(--line); } .sug{ max-height:70vh; overflow-y:auto; } }
.cmp-veil{ position:fixed; inset:0; z-index:1300; background:rgba(2,25,50,.55); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); animation:cmpIn .18s ease-out; }
@keyframes cmpIn{ from{ opacity:0; } to{ opacity:1; } }
.cmp-box{ background:#fff; border-radius:14px; width:min(1180px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); animation:cmpUp .22s cubic-bezier(.2,.8,.3,1); }
@keyframes cmpUp{ from{ transform:translateY(18px); } to{ transform:none; } }
.cmp-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(18px,2.4vw,30px); border-bottom:1px solid var(--line); }
.cmp-top h2{ display:flex; align-items:center; gap:14px; font-family:var(--ff-head); font-weight:700; font-size:clamp(17px,2vw,24px); letter-spacing:.01em; text-transform:uppercase; color:var(--brand-navy); margin:0; }
.cmp-top h2 i{ color:var(--brand-teal); }
.cmp-x{ border:0; background:transparent; color:#9aa3ad; font-size:22px; line-height:1; cursor:pointer; padding:4px; }
.cmp-x:hover{ color:var(--brand-amber); }
.cmp-scroll{ overflow:auto; padding:clamp(16px,2.4vw,28px); flex:1; }
.cmp-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:max-content; }
.cmp-table th, .cmp-table td{ padding:13px 18px; font-size:13.5px; text-align:center; vertical-align:middle; }
.cmp-table tbody tr:nth-child(odd) td, .cmp-table tbody tr:nth-child(odd) th{ background:#f5f7fa; }
.cmp-table tbody tr:first-child td, .cmp-table tbody tr:first-child th{ border-radius:9px 0 0 0; }
.cmp-table th.rowlbl{ text-align:left; font-weight:700; color:var(--ink); white-space:nowrap; position:sticky; left:0; z-index:2; background:#fff; min-width:140px; }
.cmp-table tbody tr:nth-child(odd) th.rowlbl{ background:#f5f7fa; }
.cmp-head-cell{ min-width:190px; padding:0 14px 8px; text-align:center; }
.cmp-thumb{ position:relative; width:150px; height:150px; margin:0 auto 12px; border-radius:9px; background:var(--card-grey); overflow:hidden; display:block; }
.cmp-thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.cmp-name{ font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--brand-navy); line-height:1.3; text-decoration:none; display:block; }
.cmp-name:hover{ color:var(--brand-amber); }
.cmp-del{ border:0; background:transparent; color:#9aa3ad; font-size:16px; cursor:pointer; }
.cmp-del:hover{ color:#c8371f; }
.cmp-foot{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; padding:16px clamp(18px,2.4vw,30px); border-top:1px solid var(--line); background:#fbfcfd; }
.cmp-empty{ padding:52px 20px; text-align:center; color:var(--muted); }
.cmp-empty i{ font-size:34px; color:#c4ccd6; }
@media (max-width:575.98px){ .cmp-thumb{ width:120px; height:120px; } .cmp-head-cell{ min-width:150px; } }
.hdr-acts{ display:flex; align-items:center; }
.hdr-act{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; width:80px; padding:0 4px; border:0; background:transparent; color:var(--brand-teal); font-size:14px; font-weight:600; letter-spacing:.05em; line-height:16.8px; text-decoration:none; cursor:pointer; transition:.15s; }
.hdr-act + .hdr-act{ border-left:1px solid var(--rule); }
.hdr-act:hover{ color:var(--logo-blue); }
.hdr-act:hover .ic{ transform:translateY(-2px); }
.hdr-act .ic{ transition:.18s; }
.hdr-badge{ position:absolute; top:-4px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--brand-amber); color:#fff; font-size:11px; font-weight:500; display:flex; align-items:center; justify-content:center; line-height:1; }
/* youtube band */
.yt-band{ background:linear-gradient(120deg,var(--brand-navy),var(--brand-blue) 55%,var(--brand-teal)); position:relative; overflow:hidden; }
.yt-band::after{ content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,102,0,.18),transparent 70%); pointer-events:none; }
.yt-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.yt-eyebrow .bi{ color:#FF0000; font-size:22px; }
.yt-frame{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.65); background:#0a1c33; }
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-poster{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; background:linear-gradient(135deg,#012a52,#0147a0); overflow:hidden; }
.yt-poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s, opacity .3s; }
.yt-poster:hover img{ transform:scale(1.05); }
.yt-poster .yt-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,20,45,.15),rgba(0,20,45,.45)); }
.yt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:82px; height:82px; border-radius:50%; background:#FF0000; color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; padding-left:5px; box-shadow:0 10px 30px -6px rgba(255,0,0,.6); transition:transform .2s, background .2s; }
.yt-poster:hover .yt-play{ transform:translate(-50%,-50%) scale(1.08); background:#e60000; }
.yt-play::before{ content:''; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); animation:ytpulse 2.2s ease-out infinite; }
@keyframes ytpulse{ 0%{ transform:scale(.9); opacity:.7;} 100%{ transform:scale(1.35); opacity:0;} }
/* footer */
.footer{ background:var(--brand-teal); color:#fff; }
.footer a{ color:#fff; text-decoration:none; font-size:14px; font-weight:600; line-height:20px; letter-spacing:.01em; transition:.16s; display:inline-flex; align-items:center; gap:0; }
.footer a:hover{ color:var(--brand-amber); transform:translateX(3px); }
.footer .f-contact{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:400; line-height:20px; color:#fff; }
.soc-btn{ width:34px; height:34px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:31px; transition:.18s; }
.soc-btn:hover{ color:var(--brand-amber); transform:translateY(-3px); }
.f-slogan{ font-size:10px; line-height:14px; color:rgba(255,255,255,.62); letter-spacing:.02em; max-width:410px; margin:0; }
/* hero */
.hero{ position:relative; overflow:hidden; background:#EFEAE3; }
.hero-track{ display:flex; align-items:flex-start; transition:transform .7s cubic-bezier(.5,0,.2,1); }
.hero-slide{ position:relative; flex:0 0 100%; }
.hero-media{ position:relative; width:100%; aspect-ratio:3576/1072; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; pointer-events:none; }
.slide-light .hero-scrim{ background:linear-gradient(90deg,rgba(252,250,246,.94),rgba(252,250,246,.55) 30%,rgba(252,250,246,0) 52%); }
.slide-dark .hero-scrim{ background:linear-gradient(90deg,rgba(0,18,38,.66),rgba(0,18,38,.22) 36%,rgba(0,18,38,0) 58%); }
.slide-center .hero-scrim{ background:radial-gradient(ellipse 32% 66% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%); }
.hero-copy{ position:absolute; inset:0; display:flex; align-items:center; }
.hero-copy-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:520px; }
.slide-center .hero-copy-inner{ margin-inline:auto; align-items:center; text-align:center; max-width:470px; }
.hero-kicker{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(14px,1.5vw,19px); letter-spacing:.01em; }
.hero-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(30px,4vw,50px); line-height:1.06; letter-spacing:-.02em; white-space:pre-line; margin:0; }
.slide-dark .hero-kicker{ color:rgba(255,255,255,.9); }
.slide-dark .hero-title{ color:#fff; text-shadow:0 2px 18px rgba(0,14,30,.4); }
.slide-light .hero-kicker,.slide-center .hero-kicker{ color:var(--brand-teal); }
.slide-light .hero-title,.slide-center .hero-title{ color:var(--brand-navy); }
@media (max-width:991.98px){
  .hero-media{ aspect-ratio:16/9; }
  .slide-light .hero-media img{ object-position:47% 50%; }
  .slide-dark .hero-media img{ object-position:13% 50%; }
  .slide-center .hero-media img{ object-position:33% 50%; }
  .hero-scrim{ background:linear-gradient(0deg,rgba(0,16,34,.86),rgba(0,16,34,.5) 28%,rgba(0,16,34,.08) 54%,rgba(0,16,34,0)) !important; }
  .hero-copy{ align-items:flex-end; }
  .hero-copy-inner{ align-items:flex-start; text-align:left; max-width:none; margin-inline:0; gap:7px; padding-bottom:46px; }
  .slide-center .hero-copy-inner{ align-items:flex-start; text-align:left; margin-inline:0; max-width:none; }
  .hero-kicker{ color:rgba(255,255,255,.92) !important; }
  .hero-title{ color:#fff !important; font-size:clamp(28px,7vw,40px); text-shadow:0 2px 18px rgba(0,10,24,.55) !important; }
}
@media (max-width:575.98px){
  .hero-media{ aspect-ratio:1/1; }
}
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:12px; background:rgba(248,249,250,.55); backdrop-filter:blur(4px); color:var(--brand-blue); border:0; display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; z-index:5; transition:.15s; }
.hero-arrow:hover{ background:#fff; }
@media (max-width:991.98px){ .hero-arrow{ display:none; } }
.hero-dots{ position:absolute; bottom:20px; left:0; right:0; display:flex; gap:9px; justify-content:center; z-index:5; }
.hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); border:0; cursor:pointer; transition:.2s; padding:0; }
.hero-dot.active{ background:#fff; width:26px; border-radius:5px; }
@media (max-width:991.98px){
  .hero .hero-dots{ bottom:15px; }
}
/* mobile offcanvas */
.oc-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1090; animation:fade .2s; }
.oc-panel{ position:fixed; top:0; left:0; bottom:0; width:min(84vw,340px); background:#fff; z-index:1100; box-shadow:0 0 40px rgba(0,0,0,.3); display:flex; flex-direction:column; animation:slideIn .25s cubic-bezier(.2,.7,.2,1); }
@keyframes slideIn{ from{ transform:translateX(-100%);} to{ transform:none;} }
@keyframes fade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.oc-link{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; color:var(--ink); font-weight:600; font-size:15px; text-decoration:none; border-bottom:1px solid var(--line); }
.oc-link:hover{ background:var(--card-grey); color:var(--brand-blue); }
/* bottom bar */
.bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px -12px rgba(0,0,0,.3); display:flex; }
.bb-item{ flex:1; border:0; background:transparent; padding:9px 0 8px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-size:10.5px; font-weight:600; cursor:pointer; position:relative; transition:.15s; }
.bb-item .bi, .bb-item .bb-ic{ font-size:21px; line-height:21px; height:21px; display:block; }
.bb-item.active{ color:var(--brand-blue); }
/* compare modal */
.cmp-backdrop{ position:fixed; inset:0; background:rgba(15,20,30,.6); backdrop-filter:blur(2px); z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; animation:fade .2s; }
.cmp-modal{ background:#fff; border-radius:14px; width:100%; max-width:980px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); animation:fadeUp .3s; }
.cmp-col{ flex:1; min-width:180px; text-align:center; }
.cmp-row{ display:flex; }
.cmp-row .cmp-label{ flex:0 0 140px; font-size:13px; font-weight:700; color:var(--muted); padding:13px 18px; display:flex; align-items:center; }
.cmp-cell{ flex:1; min-width:140px; padding:13px 12px; text-align:center; font-size:14px; border-left:1px solid var(--line); }
.cmp-row.alt{ background:var(--card-grey); }
.reveal{ animation:fadeUp .5s both; }

/* ================= SHARED PAGE CHROME (todas as telas) ================= */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.crumb a{ color:var(--brand-teal); text-decoration:none; font-weight:600; }
.crumb a:hover{ color:var(--brand-amber); }
.crumb .sep{ opacity:.5; }
.page-head{ background:var(--card-grey); border-bottom:1px solid var(--line); }
.page-hero{ position:relative; overflow:hidden; background:var(--brand-navy); min-height:clamp(132px,13vw,200px); display:flex; align-items:center; }
.page-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero .scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,30,60,.94),rgba(2,30,60,.6) 34%,rgba(2,30,60,.18) 66%,rgba(2,30,60,.04)); }
.page-hero .inner{ position:relative; z-index:2; padding-top:18px; padding-bottom:18px; }
.page-hero .page-title{ color:#fff; }
.page-kicker{ display:block; font-size:clamp(12.5px,1.05vw,15px); font-weight:600; color:rgba(255,255,255,.92); letter-spacing:.01em; margin-bottom:4px; }
.crumb-bar{ border-bottom:1px solid var(--line); background:#fff; }
@media (max-width:575.98px){ .page-hero .scrim{ background:linear-gradient(90deg,rgba(2,30,60,.92),rgba(2,30,60,.72) 60%,rgba(2,30,60,.5)); } }
.page-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(24px,3vw,36px); letter-spacing:.02em; color:var(--brand-navy); margin:0; }
.page-sub{ color:var(--muted); font-size:15px; line-height:1.65; max-width:760px; margin:10px 0 0; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:12px; }
.panel-pad{ padding:clamp(18px,2vw,28px); }
.block-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:18px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-navy); margin:0; }
.empty-state{ text-align:center; padding:64px 24px; color:var(--muted); }
.empty-state .bi{ font-size:52px; color:var(--line); }
.link-amber{ color:var(--brand-teal); font-weight:600; text-decoration:none; }
.link-amber:hover{ color:var(--brand-amber); }
/* form controls */
.fld{ width:100%; height:46px; border:1px solid var(--rule); border-radius:4px; padding:0 14px; font-size:14px; color:var(--ink); background:#fff; outline:0; transition:.15s; }
.fld:focus{ border-color:var(--brand-amber); box-shadow:0 0 0 3px rgba(251,163,1,.15); }
textarea.fld{ height:auto; padding:12px 14px; resize:vertical; }
.fld-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
/* ================= CATEGORIA ================= */
.filter-group{ border-bottom:1px solid var(--line); padding:16px 0; }
.filter-head{ display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:transparent; padding:0; cursor:pointer; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-navy); }
.filter-head .bi{ transition:transform .2s; font-size:12px; color:var(--muted); }
.filter-head.closed .bi{ transform:rotate(-90deg); }
.filter-body{ padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.fchk{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); cursor:pointer; line-height:1.3; }
.fchk input{ width:17px; height:17px; accent-color:var(--brand-teal); flex-shrink:0; cursor:pointer; }
.fchk .n{ color:var(--muted); font-size:13px; }
.swatch-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--rule); cursor:pointer; padding:0; transition:.15s; }
.swatch:hover{ transform:scale(1.12); }
.swatch.on{ box-shadow:0 0 0 2px var(--brand-amber); transform:scale(1.12); }
.sortbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.sortsel{ height:40px; border:1px solid var(--rule); border-radius:4px; padding:0 34px 0 12px; font-size:13px; font-weight:600; color:var(--brand-navy); background:#fff; cursor:pointer; outline:0; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F5E5E' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.chip-active{ display:inline-flex; align-items:center; gap:7px; background:var(--card-grey); border:1px solid var(--rule); border-radius:16px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--brand-navy); cursor:pointer; }
.chip-active:hover{ border-color:var(--brand-amber); color:var(--brand-amber); }
.grid-products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.lcard{ display:flex; gap:22px; border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; transition:.18s; }
.lcard:hover{ box-shadow:0 18px 34px -22px rgba(0,0,0,.32); }
.lcard-media{ flex:0 0 190px; aspect-ratio:1/1; border-radius:8px; overflow:hidden; position:relative; background:var(--card-grey); }
.lcard-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:575.98px){ .lcard{ flex-direction:column; } .lcard-media{ flex:none; width:100%; max-width:260px; } }
.pager{ display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; }
.pager button{ min-width:40px; height:40px; border-radius:8px; border:1px solid var(--rule); background:#fff; color:var(--brand-navy); font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
.pager button:hover:not(:disabled){ border-color:var(--brand-teal); color:var(--brand-teal); }
.pager button.on{ background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; }
.pager button:disabled{ opacity:.4; cursor:default; }
.filter-drawer-btn{ display:none; }
@media (max-width:991.98px){
  .filter-drawer-btn{ display:inline-flex; }
  .filters-col{ position:fixed; top:0; left:0; bottom:0; width:min(88vw,360px); background:#fff; z-index:1100; overflow-y:auto; padding:18px; box-shadow:0 0 40px rgba(0,0,0,.3); animation:slideIn .25s cubic-bezier(.2,.7,.2,1); }
  .filters-col.hide{ display:none; }
}
/* ================= PRODUTO (PDP) ================= */
.pdp-main{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; aspect-ratio:1/1; }
.pdp-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumbs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.pdp-thumb{ width:74px; height:74px; border-radius:8px; overflow:hidden; border:2px solid var(--line); background:#fff; padding:0; cursor:pointer; transition:.15s; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.on{ border-color:var(--brand-amber); }
.pdp-code{ font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--muted); }
.pdp-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.15; color:var(--brand-navy); margin:6px 0 0; }
.pdp-price{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:32px; color:var(--ink); }
.spec-row{ display:flex; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.spec-row .k{ flex:0 0 210px; color:var(--muted); font-weight:600; }
.spec-row .v{ color:var(--ink); }
@media (max-width:575.98px){ .spec-row{ flex-direction:column; gap:2px; } .spec-row .k{ flex:none; } }
.pdp-act{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 22px; border-radius:4px; border:1px solid var(--brand-teal); background:#fff; color:var(--brand-teal); font-size:13px; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:.16s; text-decoration:none; }
.pdp-act:hover{ background:var(--brand-teal); color:#fff; }
.pdp-act.on{ background:var(--brand-amber); border-color:var(--brand-amber); color:#fff; }
.share-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--rule); background:#fff; color:var(--brand-teal); display:flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; transition:.15s; cursor:pointer; }
.share-btn:hover{ background:var(--brand-teal); color:#fff; border-color:var(--brand-teal); }
.color-dot{ width:34px; height:34px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--rule); cursor:pointer; padding:0; transition:.15s; }
.color-dot:hover{ transform:scale(1.1); }
.color-dot.on{ box-shadow:0 0 0 2px var(--brand-amber); transform:scale(1.1); }
.tab-bar{ display:flex; gap:28px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar{ display:none; }
.tab-btn{ border:0; background:transparent; padding:14px 2px; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); cursor:pointer; position:relative; white-space:nowrap; }
.tab-btn.on{ color:var(--brand-navy); }
.tab-btn.on::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--brand-amber); border-radius:2px; }
/* ================= CENTRAL DE MÍDIAS ================= */
.media-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; transition:.18s; }
.media-card:hover{ box-shadow:0 18px 34px -22px rgba(0,0,0,.3); transform:translateY(-3px); }
.media-card-media{ aspect-ratio:4/3; background:var(--card-grey); overflow:hidden; }
.media-card-media img{ width:100%; height:100%; object-fit:cover; }
.dl-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:44px; border:0; background:var(--brand-teal); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; cursor:pointer; transition:.15s; text-decoration:none; }
.dl-btn:hover{ background:var(--brand-amber); color:#fff; }
.cat-pack{ border:1px solid var(--line); border-radius:12px; padding:22px; height:100%; display:flex; flex-direction:column; }
.cat-pack ul{ list-style:none; padding:0; margin:14px 0 20px; display:flex; flex-direction:column; gap:9px; }
.cat-pack li{ font-size:14px; color:var(--muted); display:flex; align-items:center; gap:9px; }
.cat-pack li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brand-amber); flex-shrink:0; }
/* ================= LISTAGEM / ORÇAMENTO ================= */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.qty button{ width:34px; height:38px; border:0; background:#fff; color:var(--brand-navy); font-size:16px; cursor:pointer; transition:.15s; }
.qty button:hover{ background:var(--card-grey); }
.qty input{ width:52px; height:38px; border:0; border-left:1px solid var(--rule); border-right:1px solid var(--rule); text-align:center; font-size:14px; font-weight:600; color:var(--ink); outline:0; }
.sum-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14px; color:var(--muted); }
.sum-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:18px; font-weight:700; color:var(--ink); }
/* ================= AUTENTICAÇÃO / ATENDIMENTO ================= */
.auth-split{ display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
@media (max-width:991.98px){ .auth-split{ grid-template-columns:1fr; } }
.auth-aside{ background:linear-gradient(150deg,var(--brand-navy),var(--brand-teal)); color:#fff; padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.auth-benefit{ display:flex; align-items:flex-start; gap:13px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.9); }
.auth-benefit .bi{ color:var(--brand-amber); font-size:19px; margin-top:1px; }
.seg{ display:inline-flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; }
.seg button{ border:0; background:#fff; color:var(--muted); padding:11px 26px; font-size:13px; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:.15s; }
.seg button.on{ background:var(--brand-teal); color:#fff; }
.contact-card{ border:1px solid var(--line); border-radius:12px; padding:26px; text-align:center; height:100%; transition:.18s; text-decoration:none; display:block; }
.contact-card:hover{ box-shadow:0 18px 34px -22px rgba(0,0,0,.3); transform:translateY(-3px); border-color:transparent; }
.contact-ico{ width:58px; height:58px; border-radius:50%; background:var(--card-grey); color:var(--brand-teal); display:flex; align-items:center; justify-content:center; font-size:25px; margin:0 auto 15px; }
.contact-card:hover .contact-ico{ background:var(--brand-amber); color:#fff; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; background:transparent; padding:18px 0; text-align:left; font-size:15px; font-weight:600; color:var(--brand-navy); cursor:pointer; }
.faq-q .bi{ color:var(--brand-amber); transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-q .bi{ transform:rotate(45deg); }
.faq-a{ padding:0 0 18px; color:var(--muted); font-size:14px; line-height:1.7; max-width:900px; }