:root{ --blue:#1c7ac4; --blue2:#0f5391; --navy:#0c3b68; --sky:#e8f2fb; --orange:#ee7a2b; --orange2:#df6a1c; --amber:#f6a24a; --deal:#ee5a2b; --green:#3f9d4a; --wa:#25d366; --ink:#2f3437; --muted:#6a7075; --line:#e4e9ef; --cream:#f5f8fc; --card:#ffffff; } *{box-sizing:border-box;margin:0;padding:0} html{max-width:100%;overflow-x:hidden;scroll-behavior:smooth} body{max-width:100%;min-width:0;overflow-x:hidden;font-family:'Segoe UI',-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.5} a{text-decoration:none;color:inherit;cursor:pointer} img,video,canvas,svg{max-width:100%} input,select,textarea,button{max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} .btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue2)} .btn-orange{background:var(--orange);color:#fff} .btn-orange:hover{background:var(--orange2)} .btn-wa{background:var(--wa);color:#fff} .btn-wa:hover{filter:brightness(.94)} .btn-ghost{background:#fff;color:var(--blue);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--blue)} .btn-lg{padding:14px 26px;font-size:15px} .badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px} .badge-deal{background:var(--deal);color:#fff} .badge-verified{background:#e8f6ea;color:var(--green);border:1px solid #c9e9cd} .badge-new{background:#e8f2fb;color:var(--blue2);border:1px solid #c3ddf3} .badge-out{background:#fdecea;color:#b03a2e;border:1px solid #f3c7c1} .muted{color:var(--muted)} .sec{padding:46px 0} .sec-h{font-size:24px;color:var(--navy);font-weight:800;letter-spacing:-.4px} .sec-sub{color:var(--muted);margin-top:5px;font-size:14.5px} .row-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap;gap:8px} /* ---------- LOGO ---------- */ .logo{display:inline-flex;align-items:center;flex:none} .brand-logo{display:block;max-width:100%;object-fit:contain} .brand-logo-header{width:224px;height:92px} .brand-logo--light{object-fit:cover;object-position:center} .brand-logo-auth{position:relative;z-index:2;width:190px;height:79px} .brand-logo-footer{width:210px;height:86px;margin-bottom:12px} /* ---------- TOP BAR ---------- */ .topbar{background:var(--navy);color:#d6e6f5;font-size:12.5px} .topbar .wrap{display:flex;justify-content:center;align-items:center;height:38px} .topbar a{color:#d6e6f5;opacity:.9}.topbar a:hover{opacity:1} .topbar .sep{margin:0 12px;opacity:.4} header.main{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50} header.main .wrap{display:flex;align-items:center;gap:22px;height:110px} .search{flex:1;display:flex;border:2px solid var(--line);border-radius:10px;max-width:560px;position:relative} .search input{flex:1;border:none;padding:11px 15px;font-size:14px;outline:none;border-radius:8px 0 0 8px} .search button{background:var(--orange);border:none;padding:0 18px;font-size:16px;cursor:pointer;color:#fff;border-radius:0 8px 8px 0} .hicons{display:flex;gap:20px;align-items:center;font-size:13px;font-weight:600;color:var(--blue2)} .hicons .ic{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;position:relative;cursor:pointer} .ic-badge{position:absolute;top:-4px;right:2px;color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:9px;padding:0 3px} .hicons .ic b{font-size:16px} .hicons .ic .ici{width:23px;height:23px} /* Storefront notification bell: the dashboard notices, as links. */ .site-bell{position:relative;display:flex} .site-bell>button.ic{background:none;border:none;font:inherit;font-size:11px;color:inherit;padding:0} .site-bell>button.ic[aria-expanded="true"]{color:var(--blue2)} .site-bell-panel{position:absolute;top:calc(100% + 12px);inset-inline-end:-8px;width:340px;max-height:min(460px,calc(100dvh - 120px));overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(12,59,104,.18);z-index:70;padding:6px;color:var(--ink,#1d2b36)} .site-bell-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px} .site-bell-head b{font-size:14px} .site-bell-head form{margin:0} .site-bell-head button{background:none;border:none;font:inherit;font-size:12px;font-weight:700;color:var(--blue2);cursor:pointer;padding:2px 4px;border-radius:6px} .site-bell-head button:hover{background:var(--sky)} .site-bell-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;text-decoration:none;color:inherit} .site-bell-item:hover,.site-bell-item:focus-visible{background:var(--sky)} .site-bell-item i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--orange)} .site-bell-item strong{display:block;font-size:13px;font-weight:700;line-height:1.35} .site-bell-item small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)} .site-bell-empty{margin:0;padding:18px 10px;text-align:center;font-size:13px;color:var(--muted)} .site-bell-foot{display:block;margin-top:4px;padding:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--blue2);text-align:center;text-decoration:none} .site-bell-foot:hover{text-decoration:underline} .search button .ici{width:19px;height:19px} .langbtn .ici{width:16px;height:16px} .trust .ti{color:var(--blue2)} .trust .ti .ici{width:22px;height:22px} .ctile .ci .ici{width:36px;height:36px;color:var(--blue2)} .how-col h3 .ici{width:22px;height:22px;color:var(--orange2);flex:none} nav.cats{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:45} nav.cats .wrap{display:flex;gap:2px;height:54px;align-items:center;position:relative} /* Fixed item height, so the current-page bar can sit exactly on the border. */ nav.cats .wrap>a,nav.cats .category-mega-trigger{ display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px; font-size:13.5px;font-weight:650;color:#33465a;border-radius:9px;white-space:nowrap; line-height:1;transition:background .15s,color .15s} nav.cats .wrap>a:hover{background:var(--sky);color:var(--blue2)} /* The catalogue is the way into the store, so it leads the strip. */ nav.cats .category-mega-trigger{background:var(--navy);color:#fff;font-weight:750;padding:0 15px} nav.cats .category-mega-trigger:hover, nav.cats .category-mega.is-open .category-mega-trigger, nav.cats .category-mega:focus-within .category-mega-trigger{background:var(--blue2);color:#fff} .cats-divider{width:1px;height:22px;background:var(--line);margin:0 9px;flex:none} /* Accents. These are written at the same weight as the generic rule above and after it — at lower specificity they simply never applied. */ nav.cats .wrap>a.hot{color:var(--deal);font-weight:700} nav.cats .wrap>a.hot:hover{background:#fdeee8;color:var(--deal)} nav.cats .wrap>a.wanted-link{color:var(--blue2);font-weight:700} nav.cats .wrap>a.sell-link{color:var(--orange2);font-weight:750} nav.cats .wrap>a.sell-link:hover{background:#fff2e7;color:var(--orange2)} /* Reading, not shopping: these sit at the far end of the strip. */ nav.cats .cats-push{margin-inline-start:auto} /* Where you are now. A filled pill rather than an underline hung off the strip's baseline: it cannot drift out of alignment, and it still reads as the selected tab. Declared after the accent rules and matched at the same weight, so it wins for the coloured links too. */ nav.cats .wrap>a.is-current, nav.cats .wrap>a.is-current:hover{background:var(--blue2);color:#fff;font-weight:750} @media(max-width:860px){ nav.cats .wrap{overflow-x:auto;scrollbar-width:none;gap:1px} nav.cats .wrap::-webkit-scrollbar{display:none} nav.cats .cats-push{margin-inline-start:0} } /* ---------- CATEGORY MEGA MENU ---------- */ .category-mega{position:static;height:100%;display:flex;align-items:center} .category-mega-trigger{display:flex;align-items:center;gap:8px;border:0;background:transparent;font-family:inherit;cursor:pointer} .category-mega-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} /* Drawn, not typed: the old ⌄ glyph sat optically low and changed shape with the font. Scoped under .category-mega-trigger so it outranks the 18px sizing rule above it. */ .category-mega-trigger .category-mega-caret{width:13px;height:13px;stroke-width:2.6; stroke-linejoin:round;opacity:.9;margin-inline-start:-1px;transition:transform .18s ease} .category-mega:hover .category-mega-caret, .category-mega:focus-within .category-mega-caret, .category-mega.is-open .category-mega-caret{transform:rotate(180deg)} .category-mega-panel{position:absolute;top:54px;left:20px;right:20px;background:#fff;border:1px solid #ccd9e7;border-top:3px solid var(--orange);border-radius:0 0 16px 16px;box-shadow:0 22px 50px rgba(12,59,104,.22);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:80;overflow:hidden} .category-mega:hover .category-mega-panel,.category-mega:focus-within .category-mega-panel,.category-mega.is-open .category-mega-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto} .category-mega-recommended{padding:18px 22px 17px;background:linear-gradient(115deg,#f4f8fd 0%,#fff8f0 100%);border-bottom:1px solid #d9e3ed} .category-mega-title{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:12px} .category-mega-title>div{display:flex;flex-direction:column;gap:1px} .category-mega-title span{font-size:17px;color:var(--navy);font-weight:800} .category-mega-title small{font-size:12px;color:var(--muted)} .category-mega-title>a{font-size:12.5px;color:var(--blue2);font-weight:750;padding:5px 8px} .category-recommendations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px} .category-recommendations>a{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;background:#fff;border:1px solid #d8e2ed;border-radius:10px;color:var(--navy);font-size:12.5px} .category-recommendations>a:hover{border-color:#7fb2da;box-shadow:0 5px 14px rgba(12,59,104,.08)} .category-recommendations>a>span{width:31px;height:31px;border-radius:9px;background:var(--sky);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none} .category-recommendations b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .category-mega-browser{display:grid;grid-template-columns:245px minmax(0,1fr);height:350px;min-height:0} .category-main-scroll,.category-sub-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#a9bfd4 transparent;scrollbar-width:thin} .category-main-scroll{padding:12px 9px;background:#f7f9fc;border-right:1px solid #dbe4ed} .category-main-scroll button{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:start;border:0;background:transparent;padding:10px 11px;border-radius:9px;color:#33465a;font:inherit;font-size:13px;cursor:pointer} .category-main-scroll button:hover{background:#e9f1f9;color:var(--blue2)} .category-main-scroll button.is-active{background:#fff;color:var(--navy);box-shadow:inset 4px 0 var(--orange),0 2px 8px rgba(12,59,104,.08)} [dir="rtl"] .category-main-scroll button.is-active{box-shadow:inset -4px 0 var(--orange),0 2px 8px rgba(12,59,104,.08)} .category-main-scroll button>span:first-child{font-size:17px;text-align:center} .category-main-scroll button>span:last-child{font-size:20px;color:#8ca0b5} .category-sub-scroll{position:relative;padding:6px 22px 30px;scroll-behavior:smooth;background:#fff} .category-sub-scroll:focus-visible{outline:3px solid rgba(28,122,196,.25);outline-offset:-3px} .category-sub-scroll section{padding:18px 0 22px;min-height:158px;border-bottom:1px solid #e6ebf1;scroll-margin-top:4px} .category-sub-scroll section:last-child{border-bottom:0} .category-sub-scroll section>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .category-sub-scroll section>header>div{display:flex;align-items:center;gap:9px} .category-sub-scroll h3{font-size:17px;color:var(--navy)} .category-sub-scroll section>header>a{font-size:12.5px;color:var(--blue2);font-weight:750;padding:5px 8px} .category-sub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .category-sub-grid>a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e0e7ef;border-radius:10px;background:#fbfcfe;color:var(--ink);min-width:0} .category-sub-grid>a:hover{border-color:#81b5dd;background:#f2f8fd;color:var(--blue2)} .category-sub-grid>a>span{width:35px;height:35px;display:flex;align-items:center;justify-content:center;background:#eaf2fa;border-radius:50%;font-size:18px;flex:none} .category-sub-grid>a>div{min-width:0;display:flex;flex-direction:column} .category-sub-grid b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .category-sub-grid small{font-size:10.5px;color:var(--muted)} /* ---------- HERO ---------- */ .hero{background:linear-gradient(120deg,#0c3b68 0%,#155a97 55%,#1c7ac4 100%);color:#fff;position:relative;overflow:hidden} .hero:after{content:"";position:absolute;right:-80px;top:-60px;width:440px;height:440px;background:radial-gradient(circle,rgba(238,122,43,.32),transparent 62%)} /* A hero with an uploaded photo: the picture fills the slide and a dark wash keeps the headline readable over whatever was photographed. */ .hero.has-photo{background-image:var(--hero-photo);background-size:cover;background-position:center} .hero.has-photo:before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(7,30,56,.92) 0%,rgba(9,42,76,.78) 45%,rgba(9,42,76,.42) 100%)} .hero.has-photo:after{display:none} /* A console-uploaded video background. It sits under the same scrim the photo uses, so the headline keeps its contrast either way. */ .hero.has-video{background-color:#0c3b68} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none} .hero.has-video:before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(7,30,56,.82) 0%,rgba(9,42,76,.62) 48%,rgba(9,42,76,.28) 100%)} .hero.has-video .wrap{position:relative;z-index:2} /* The video is decoration. Someone who has asked their system for less motion gets the still background instead. This is a preference, not a viewport rule, so it belongs with the component. */ @media (prefers-reduced-motion: reduce){ .hero-video{display:none} } /* The slide's height follows the width between a floor and a ceiling, set in the console (Homepage carousel → Carousel size) and passed in as custom properties. The defaults sit close to the desktop photos' 2.13:1, so the picture is barely cropped. Taller content (phones) sets its own. */ .hero .wrap{display:flex;align-items:center;gap:40px;padding:52px 20px;position:relative;z-index:2;flex-wrap:wrap; min-height:clamp(var(--hero-min,500px),var(--hero-scale,44vw),var(--hero-max,720px))} .hero-l{flex:1;min-width:300px} .hero .tag{display:inline-block;background:rgba(238,122,43,.2);border:1px solid rgba(238,122,43,.55);color:#ffd0a5;font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:16px} .hero h1,.hero .hero-title{font-size:40px;line-height:1.12;letter-spacing:-1px;font-weight:900;margin-bottom:14px} .hero h1 span,.hero .hero-title span{color:var(--amber)} .hero p{font-size:16px;color:#dce7f4;max-width:520px;margin-bottom:24px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-stats{display:flex;gap:28px;margin-top:30px} .hero-stats div b{font-size:24px;display:block;color:var(--amber)} .hero-stats div span{font-size:12.5px;color:#cfe0f0} .hero-r{width:330px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px} .hero-r h4{font-size:13px;color:#ffd0a5;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px} .mini-deal{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border-radius:10px;padding:9px;margin-bottom:9px;cursor:pointer} .mini-deal .th{width:52px;height:52px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px} /* A listing's photo in a small tile: whole, on the same backdrop the cards use. */ .mini-deal .th.has-image,.sr-prod .th.has-image{background:var(--card-bg,#f2f4f7);padding:3px;overflow:hidden} .mini-deal .th.has-image img,.sr-prod .th.has-image img{width:100%;height:100%;object-fit:contain;display:block;border-radius:5px} .mini-deal .mi{flex:1;font-size:12.5px} .mini-deal .mi b{display:block;font-size:13px;color:#fff} .mini-deal .pr{font-weight:800;color:var(--amber);font-size:13px} .mini-deal .pr s{color:#a9c2da;font-weight:400;font-size:11px;display:block} /* ---------- HERO CAROUSEL ---------- */ .hero-carousel{display:grid;position:relative;overflow:hidden} .hslide{grid-area:1 / 1;width:100%;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease} .hslide.active{opacity:1;visibility:visible;pointer-events:auto} .hdots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6} .hdots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.25s} .hdots button.on{background:#fff;width:24px;border-radius:5px} .harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s} .harrow:hover{background:rgba(255,255,255,.28)} .harrow.prev{left:14px}.harrow.next{right:14px} @media(max-width:900px){.harrow{display:none}} /* ---------- TRUST STRIP ---------- */ .trust{background:#fff;border-bottom:1px solid var(--line);padding-block:18px} .trust .wrap{max-width:1440px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0 20px} .trust .t{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;min-width:0;min-height:76px;padding:12px 10px;background:linear-gradient(145deg,#fff,#f8fbfe);border:1px solid #dfeaf4;border-radius:12px;box-shadow:0 4px 14px rgba(15,83,145,.045)} .trust .ti{width:36px;height:36px;border-radius:10px;background:var(--sky);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .trust .t>div:last-child{min-width:0} .trust b{font-size:12.5px;line-height:1.35;display:block;white-space:nowrap;color:var(--ink)} .trust span{display:block;margin-top:4px;font-size:11px;line-height:1.35;white-space:nowrap;color:var(--muted)} /* ---------- PRODUCT CARDS ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.15s;cursor:pointer;display:flex;flex-direction:column} .pcard:hover{box-shadow:0 10px 26px rgba(15,83,145,.14);transform:translateY(-3px);border-color:#c9ddf0} /* Every card's photo sits in a frame of one shape, so a row of cards lines up whatever was photographed. Shape, fit, backdrop and padding come from the console (App\Support\ProductCards) as custom properties on :root. "contain" shows the whole photo: a tall one leaves space left and right, a wide one above and below. "cover" fills the frame and crops instead. */ .pcard .ph{aspect-ratio:var(--card-ratio,1 / 1);display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden} .pcard .ph.has-image{background:var(--card-bg,#f2f4f7);padding:var(--card-pad,10px)} .listing-photo{width:100%;height:100%;min-height:0;object-fit:var(--card-fit,contain);object-position:center;display:block;padding:0} .pcard .ph .disc{position:absolute;top:9px;left:9px} .pcard .ph .vr{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.94);border-radius:20px;padding:3px 8px;font-size:10.5px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:3px} .pcard .pb{padding:12px 13px;display:flex;flex-direction:column;gap:6px;flex:1} .pcard .cat{font-size:11px;color:var(--orange2);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .pcard .nm{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)} .pcard .seller{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px} .pcard .price{margin-top:auto;display:flex;align-items:baseline;gap:8px} .pcard .price b{font-size:16px;color:var(--blue2)} .pcard .price s{font-size:12px;color:#a9b2ba} .pcard .moq{font-size:11px;color:var(--muted)} .pcard .pgrade{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;background:var(--sky);color:var(--blue2);border:1px solid #cfe3f5;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px} .pcard .pf{display:flex;flex-direction:column;gap:7px;padding:0 13px 13px} .pcard .pf-offer{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border:none;border-radius:9px;padding:9px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:filter .15s,box-shadow .15s;box-shadow:0 3px 10px rgba(238,122,43,.25)} .pcard .pf-offer:hover{filter:brightness(1.06);box-shadow:0 5px 15px rgba(238,122,43,.34)} .pcard .pf-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .pcard .pf-ic{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 0;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background .15s,transform .15s} .pcard .pf-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pcard .pf-ic:hover{border-color:var(--blue);color:var(--blue2);background:var(--sky);transform:translateY(-1px)} .pcard .pf-ic.on{border-color:var(--blue);color:var(--blue2);background:var(--sky)} .pcard .pf-ic.wished{border-color:#e23b3b;color:#e23b3b;background:#fff4f4} .pcard .pf-ic.wished svg{fill:#e23b3b;stroke:#e23b3b} .pcard .ph .ribbon{position:absolute;bottom:9px;left:9px;background:var(--green);color:#fff;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.15)} .pcard .ph .qv{position:absolute;bottom:8px;right:8px;opacity:0;transform:scale(.85);background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .15s;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))} .pcard:hover .ph .qv{opacity:1;transform:scale(1)} .pcard .ph .qv:hover{transform:scale(1.15)} .pcard .ph .qv svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pcard .urgent{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c0;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px} .qv-img{height:420px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:150px;color:#e4eef7;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden} .qv-img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:10px} .qv-cat{font-size:11px;color:var(--orange2);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .qv-price{margin:11px 0 4px;display:flex;align-items:baseline;gap:8px} .qv-price b{font-size:23px;color:var(--blue2)} .qv-price s{font-size:13px;color:#a9b2ba} .qv-actions{display:flex;gap:10px;margin-top:17px} .qv-actions .btn{flex:1;justify-content:center} /* ---------- CATEGORY TILES ---------- */ .cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .ctile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 10px;text-align:center;transition:.15s;cursor:pointer} .ctile:hover{border-color:var(--blue);background:#f7fbff} .ctile .ci{font-size:32px} .ctile b{display:block;font-size:13px;margin-top:8px;color:var(--navy)} .ctile span{font-size:11px;color:var(--muted)} /* ---------- HOW IT WORKS ---------- */ .how{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .how-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px} .how-col h3{font-size:18px;color:var(--navy);margin-bottom:18px;display:flex;align-items:center;gap:9px} .step{display:flex;gap:14px;margin-bottom:16px} .step .n{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px} .step b{font-size:14px} .step p{font-size:13px;color:var(--muted)} /* ---------- SELLER CTA ---------- */ .sellcta{background:linear-gradient(120deg,#0f5391,#1c7ac4 60%,#ee7a2b);color:#fff;border-radius:18px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap} .sellcta h2{font-size:26px;font-weight:900;letter-spacing:-.5px;margin-bottom:8px} .sellcta p{color:#eaf2fb;max-width:520px;font-size:14.5px} /* ---------- FOOTER ---------- */ footer{background:var(--navy);color:#c4d6e8;padding:44px 0 22px;margin-top:20px} .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:30px} footer h5{color:#fff;font-size:14px;margin-bottom:12px} footer a,footer p{display:block;font-size:13px;color:#a9c2da;margin-bottom:7px;opacity:.92} footer a:hover{opacity:1;color:#fff} .fbot{border-top:1px solid rgba(255,255,255,.13);margin-top:28px;padding-top:16px;font-size:12px;color:#8aa6c2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* ---------- PAGE SWITCHING ---------- */ .page{display:none} .page.active{display:block} .crumb{font-size:13px;color:var(--muted);padding:16px 0} .crumb a:hover{color:var(--blue2)} /* ---------- SHOP ---------- */ .shop-lay{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:24px 0 50px} .filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;height:fit-content} .filters h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);margin:16px 0 9px} .filters h4:first-child{margin-top:0} .filters label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:4px 0;cursor:pointer} .filters .chip{display:inline-block;font-size:11.5px;border:1px solid var(--line);border-radius:20px;padding:4px 11px;margin:3px 4px 3px 0;cursor:pointer} .filters .chip.on{background:var(--blue);color:#fff;border-color:var(--blue)} .shop-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px} .shop-top .r{display:flex;gap:8px;align-items:center;font-size:13px} .shop-top select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13px} /* How many cards across is a console setting; the media queries below still cap it on narrow screens. See App\Support\PaginationSettings. */ .grid.shopgrid{grid-template-columns:repeat(var(--grid-cols,3),1fr)} /* ---------- PRODUCT DETAIL ---------- */ .pd{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:10px 0 40px} .pd-gallery .main{height:440px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:120px;position:relative;overflow:hidden} .pd-gallery .main.has-image{height:auto;min-height:0;background:transparent;overflow:visible} .pd-gallery .main img{width:100%;height:auto;object-fit:contain;object-position:center;display:block;padding:0;border-radius:14px} .pd-gallery .main.is-changing img{animation:gallery-fade .32s ease} @keyframes gallery-fade{from{opacity:.35}to{opacity:1}} .gallery-arrow{position:absolute;z-index:4;top:50%;translate:0 -50%;width:44px;height:44px;border:1px solid rgba(12,59,104,.15);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--navy);cursor:pointer;box-shadow:0 5px 18px rgba(12,59,104,.18);transition:background .15s,transform .15s,opacity .15s;opacity:.88} .gallery-arrow:hover,.gallery-arrow:focus-visible{background:#fff;opacity:1;transform:scale(1.06);outline:3px solid rgba(28,122,196,.28);outline-offset:2px} .gallery-arrow svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .gallery-prev{inset-inline-start:14px}.gallery-next{inset-inline-end:14px} [dir=rtl] .gallery-arrow svg{transform:rotate(180deg)} .gallery-count{position:absolute;z-index:3;inset-inline-end:14px;bottom:14px;padding:5px 10px;border-radius:20px;background:rgba(12,59,104,.78);color:#fff;font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(12,59,104,.2)} .pd-video{margin-top:14px} .pd-video h4{font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:7px} .pd-video video{width:100%;max-height:420px;border-radius:14px;background:#000;display:block} .pd-gallery .thumbs{display:flex;gap:10px;margin-top:12px} .pd-gallery .thumbs button,.pd-gallery .thumbs div{width:70px;height:70px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid var(--line);cursor:pointer;padding:0;overflow:hidden;background:transparent} .pd-gallery .thumbs img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:0} .pd-gallery .thumbs .on{border-color:var(--orange)} .pd-gallery .thumbs button[aria-current=true]{box-shadow:0 0 0 2px rgba(238,122,43,.18)} /* Thumbnails stand in a column at the main image's start side (the left, or the right in Urdu). The column takes the image's height and no more: height:0 + min-height:100% keeps it out of the row's sizing, so a long gallery scrolls inside the column instead of stretching the image. */ /* The lot's stock number under the title, when the console shows it. */ .pd-sku{font-size:12px;color:var(--muted);margin:4px 0 0} .pd-sku .sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--navy);background:#eef3f8;border-radius:5px;padding:1px 6px} /* A linked YouTube video sits in the same box as an uploaded one. */ .pd-embed{position:relative;aspect-ratio:16 / 9;width:100%;border-radius:10px;overflow:hidden;background:#000} .pd-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .product-media-disclaimer{margin-top:16px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:20px 22px;padding-inline-start:18px;border:1px solid #ffc58e;border-inline-start:7px solid var(--orange);border-radius:14px;background:linear-gradient(135deg,#fff8f1,#fffdf9);color:#4d4f52;font-size:14.5px;line-height:1.7;box-shadow:0 8px 24px rgba(151,77,20,.07)} .product-media-disclaimer svg{width:32px;height:32px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .product-media-disclaimer p{margin:0} .product-media-disclaimer strong{color:#e95f00;font-weight:800} .pd-stage.has-thumbs{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:stretch} .pd-stage.has-thumbs .main{grid-column:2;grid-row:1} .pd-stage.has-thumbs .thumbs{grid-column:1;grid-row:1;flex-direction:column;margin-top:0;height:0;min-height:100%; overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px} .pd-stage.has-thumbs .thumbs button{flex:none} .product-media-request{margin-top:14px;border:1px solid #cfe1ef;border-radius:14px;background:linear-gradient(135deg,#f7fbff,#fff);overflow:hidden} .product-media-request summary{list-style:none;display:flex;align-items:center;gap:11px;padding:14px 15px;cursor:pointer;color:var(--navy)} .product-media-request summary::-webkit-details-marker{display:none} .product-media-request-icon{width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--blue2);display:grid;place-items:center;font-size:20px;font-weight:800;flex:none} .product-media-request summary>span:nth-child(2){flex:1;min-width:0} .product-media-request summary b{display:block;font-size:13.5px} .product-media-request summary small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:2px} .product-media-request-chevron{font-size:20px;color:var(--blue2);transition:transform .18s} .product-media-request[open] .product-media-request-chevron{transform:rotate(180deg)} .product-media-request-body{border-top:1px solid #dbe8f2;padding:14px 15px} .product-media-request-body label{display:block;color:var(--navy);font-size:12px;font-weight:750;margin-bottom:6px} .product-media-request-body textarea{width:100%;min-height:105px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px 11px;outline:none;color:var(--ink);background:#fff} .product-media-request-body textarea:focus{border-color:#8dbfe2;box-shadow:0 0 0 3px rgba(28,122,196,.09)} .product-media-request-body>p{font-size:12px;color:var(--muted);margin-bottom:11px} .product-media-request-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px} .product-media-request-foot span{font-size:10.5px;color:var(--muted);line-height:1.4} .product-media-request-error{color:#b83a2c;font-size:11px;margin-top:5px} @media(max-width:520px){.product-media-request-foot{align-items:stretch;flex-direction:column}.product-media-request-foot .btn{justify-content:center}} .pd-info h1{font-size:26px;color:var(--ink);font-weight:800;line-height:1.2;margin:6px 0 10px} .pd-info .catline{font-size:12.5px;color:var(--orange2);font-weight:700;text-transform:uppercase;letter-spacing:.5px} .pd-price{display:flex;align-items:baseline;gap:12px;margin:16px 0} .pd-price b{font-size:32px;color:var(--blue2)} .pd-price s{font-size:17px;color:#a9b2ba} .pd-price .save{background:#fdeee7;color:var(--deal);font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:20px} .pd-tax-mode{display:inline-flex;align-items:center;min-height:25px;padding:3px 10px;border:1px solid #cbdbe8;border-radius:20px;background:#f4f8fb;color:#345269;font-size:11.5px;font-weight:700;white-space:nowrap} .pd-meta{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:16px 0} .pd-meta .r{display:flex;justify-content:space-between;padding:10px 14px;font-size:13.5px;border-bottom:1px solid var(--line)} .pd-meta .r:last-child{border:none} .pd-meta .r span:first-child{color:var(--muted)} .pd-meta .r b{color:var(--ink)} .seller-card{background:var(--sky);border:1px solid #cfe1f2;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;margin:16px 0} .seller-card .av{width:46px;height:46px;border-radius:10px;background:var(--blue2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} .seller-card .si{flex:1} .seller-card .si b{font-size:14.5px;display:flex;align-items:center;gap:6px} .seller-card .si span{font-size:12px;color:var(--muted)} .qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;width:fit-content} .qty button{width:38px;height:40px;border:none;background:#fff;font-size:18px;cursor:pointer;color:var(--blue2)} .qty input{width:54px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);height:40px;font-size:15px} .pd-actions{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap} .buybox{border:1px solid var(--line);border-radius:16px;padding:16px 18px 17px;margin:16px 0 18px;background:linear-gradient(180deg,#fbfdff,#fff);box-shadow:0 8px 26px rgba(12,59,104,.08)} .buybox .bb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px} .buybox .bb-lab{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .buybox .bb-total{margin-top:2px} .buybox .bb-total b{font-size:25px;color:var(--blue2);font-weight:800;letter-spacing:-.6px} .buybox .bb-buy{width:100%;justify-content:center;font-size:16px;box-shadow:0 6px 16px rgba(238,122,43,.3)} /* Make an offer: a slow orange ripple and a nudge of the handshake, so the main action reads as the way in without shouting. It keeps the button's own shadow under the ripple, and stops while the pointer or keyboard is on it — a button should hold still when it is about to be pressed. */ .buybox .bb-buy.bb-pulse{animation:bb-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite} .buybox .bb-buy.bb-pulse .bb-pulse-icon{display:inline-block;animation:bb-nudge 2.4s ease-in-out infinite;transform-origin:70% 70%} .buybox .bb-buy.bb-pulse:hover,.buybox .bb-buy.bb-pulse:focus-visible, .buybox .bb-buy.bb-pulse:hover .bb-pulse-icon,.buybox .bb-buy.bb-pulse:focus-visible .bb-pulse-icon{animation:none} /* The ripple is the site blue (--blue, #1c7ac4) around the orange button: the two brand colours together, and it reads against the orange instead of blurring into it. The first shadow is the button's own and stays. */ @keyframes bb-pulse{ 0%{transform:scale(.975);box-shadow:0 6px 16px rgba(238,122,43,.3),0 0 0 0 rgba(28,122,196,.55)} 70%{transform:scale(1.02);box-shadow:0 6px 16px rgba(238,122,43,.3),0 0 0 20px rgba(28,122,196,0)} 100%{transform:scale(.975);box-shadow:0 6px 16px rgba(238,122,43,.3),0 0 0 0 rgba(28,122,196,0)} } @keyframes bb-nudge{0%,62%,100%{transform:rotate(0)}70%{transform:rotate(-12deg)}78%{transform:rotate(10deg)}86%{transform:rotate(-5deg)}} /* The basket's per-line Make an offer: the same ripple and nudge, outside the buy box. */ .cart-offer{white-space:nowrap;padding:9px 16px;box-shadow:0 4px 12px rgba(238,122,43,.28)} .cart-remove-form{margin-top:10px} .cart-remove{border:0;background:none;padding:4px 0;font:inherit;font-size:13px;font-weight:600;color:var(--deal);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(238,90,43,.35)} .cart-remove:hover{text-decoration-color:currentColor} .cart-offer.bb-pulse{animation:bb-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite} .cart-offer.bb-pulse .bb-pulse-icon{display:inline-block;animation:bb-nudge 2.4s ease-in-out infinite;transform-origin:70% 70%} .cart-offer.bb-pulse:hover,.cart-offer.bb-pulse:focus-visible, .cart-offer.bb-pulse:hover .bb-pulse-icon,.cart-offer.bb-pulse:focus-visible .bb-pulse-icon{animation:none} /* A preference, not a viewport rule, so it stays with the component. */ @media (prefers-reduced-motion: reduce){.buybox .bb-buy.bb-pulse,.buybox .bb-buy.bb-pulse .bb-pulse-icon,.cart-offer.bb-pulse,.cart-offer.bb-pulse .bb-pulse-icon{animation:none}} .buybox .bb-out,.buybox .bb-out:hover{background:#eef2f6;color:var(--muted);border:1.5px solid var(--line);box-shadow:none;cursor:not-allowed} .buybox .bb-negotiation-form{padding-top:14px;margin-top:14px;border-top:1px solid var(--line)} .buybox .bb-negotiation-form:first-of-type{margin-top:0} .buybox .bb-negotiation-form>label:first-of-type{display:block;font-size:12px;font-weight:750;color:var(--ink);margin-bottom:6px} .buybox .money-input{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:10px;overflow:hidden} .buybox .money-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,122,196,.1)} .buybox .money-input span{padding-left:12px;color:var(--muted);font-size:13px;font-weight:800} .buybox .money-input input{width:100%;border:0;outline:0;padding:12px 10px;font:inherit;font-weight:700;color:var(--ink)} .buybox .neg-consent{display:flex;align-items:flex-start;gap:9px;margin:10px 0;font-size:11.5px;line-height:1.45;color:var(--muted)} .buybox .neg-consent input{width:17px;height:17px;flex:none;margin-top:1px} .buybox .bb-row{display:flex;gap:10px;margin-top:10px} .buybox .bb-row .btn{flex:1;justify-content:center} .buybox .bb-talk{width:100%;justify-content:center;margin-top:10px} .buybox .bb-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5} .buybox .bb-util{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .buybox .bb-util>button{background:#fff;border:1px solid var(--line);cursor:pointer;font-size:12px;font-weight:700;color:#3a4750;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border-radius:12px;transition:border-color .16s,color .16s,background .16s,transform .16s,box-shadow .16s} .buybox .bb-util>button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .buybox .bb-util>button:hover{border-color:var(--blue);color:var(--blue2);background:var(--sky);transform:translateY(-1px);box-shadow:0 5px 14px rgba(28,122,196,.14)} .buybox .bb-util>button.on{border-color:var(--blue);color:var(--blue2);background:var(--sky)} .buybox .bb-util>button.wished{border-color:#e23b3b;color:#e23b3b;background:#fff4f4} .buybox .bb-util>button.wished svg{fill:#e23b3b;stroke:#e23b3b} /* Sample: the one tile that starts something, so it wears the orange accent. */ .buybox .bb-util>.bb-sample{background:#fff3ea;border:1px solid #f6c39c;color:var(--orange2);cursor:pointer;font-size:12px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border-radius:12px;text-decoration:none;transition:border-color .16s,color .16s,background .16s,transform .16s,box-shadow .16s} .buybox .bb-util>.bb-sample svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .buybox .bb-util>.bb-sample:hover,.buybox .bb-util>.bb-sample:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(238,122,43,.3)} .buybox .bb-util>.bb-sample.on{background:var(--orange);border-color:var(--orange);color:#fff} .buybox .bb-util>.bb-sample.on:hover{background:var(--orange2);border-color:var(--orange2)} .buybox .bb-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:13px;font-size:11.5px;color:var(--muted);font-weight:600} .buybox .bb-trust span{display:inline-flex;align-items:center;gap:5px} .naming{margin:24px 0 6px;border:1px solid #f2ddc9;border-radius:16px;padding:20px 22px;background:linear-gradient(135deg,#fff7f0,#f2f8fd);box-shadow:0 8px 24px rgba(238,122,43,.08)} .naming-l{display:flex;gap:14px;align-items:flex-start} .naming-ic{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 5px 14px rgba(238,122,43,.32)} .naming h3{font-size:17px;color:var(--navy);margin:1px 0 4px} .naming-l p{font-size:13px;color:#5a6570;margin:0;line-height:1.55;max-width:660px} .naming-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:16px 0 9px} .naming-chips{display:flex;flex-wrap:wrap;gap:8px} .nchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:13px;font-weight:600;color:#33404a;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s;user-select:none} .nchip em{font-style:normal;font-size:11px;color:var(--muted);font-weight:700} .nchip:hover{border-color:var(--orange);color:var(--orange2);background:#fff8f2;transform:translateY(-1px)} .nchip.voted{border-color:var(--orange);background:#fff0e4;color:var(--orange2)} .nchip.voted em{color:var(--orange2)} .nchip.nchip-new{border-color:var(--blue);background:var(--sky);color:var(--blue2)} .naming-input{display:flex;gap:10px;margin-top:15px;max-width:580px} .naming-input input{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;background:#fff} .naming-input input:focus{border-color:var(--blue)} .naming-note{font-size:11.5px;color:var(--muted);margin:12px 0 0} /* What the discount on an inspection package came to. */ .ins-saved{display:inline-block;background:#e9f6ec;color:var(--green);border:1px solid #c9e9cd; border-radius:20px;padding:2px 9px;font-size:12px;font-weight:700;margin-inline-start:6px} @media(max-width:560px){.naming-input{flex-direction:column}} .naming-side{margin:16px 0 0;padding:17px 18px} .naming-side .naming-ic{width:40px;height:40px;font-size:20px;border-radius:11px} .naming-side h3{font-size:15.5px} .naming-side .naming-l p{font-size:12.5px;max-width:none} .naming-side .naming-input{max-width:none} .related{margin:28px 0 10px} .rel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .rel-head b{font-size:19px;color:var(--navy)} .rel-arrows{display:flex;gap:8px} .rel-arrows button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--blue2);font-size:16px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s} .rel-arrows button:hover{border-color:var(--blue);background:var(--sky)} .rel-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none} .rel-track::-webkit-scrollbar{display:none} .rel-card{flex:0 0 auto;width:225px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s} .rel-card:hover{border-color:var(--blue);box-shadow:0 8px 22px rgba(12,59,104,.1);transform:translateY(-2px)} .rel-img{position:relative;height:170px;display:flex;align-items:center;justify-content:center;font-size:52px;color:#e4eef7;overflow:hidden}.rel-img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:6px} .rel-badge{position:absolute;top:9px;left:9px;color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px} .rel-b{padding:11px 13px 14px} .rel-cat{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px} .rel-nm{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.32;margin:3px 0 8px;min-height:36px} .rel-price{font-size:13px} .rel-price s{color:var(--muted);font-size:12px} .rel-price b{color:var(--orange2);font-size:15px;margin-left:5px} .pd-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px} .pd-trust .x{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--muted)} .tabs{border-top:1px solid var(--line);margin:34px 0 14px;padding-top:4px} .tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line)} .tabbar button{background:none;border:none;padding:14px 18px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;font-family:inherit} .tabbar button.on{color:var(--blue2);border-bottom-color:var(--orange)} .tabpane{display:none;padding:24px 4px 28px;font-size:14px;color:#43494d;line-height:1.7} .tabpane.on{display:block} .tabpane ul{padding-left:20px} /* Buyer protection: the four policies as cards (consistent with the site's card look) */ .policy-cards{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)} .policy-cards-title{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .policy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .policy-card,.policy-card:hover,.policy-card:focus,.policy-card:focus-visible,.policy-card *{text-decoration:none!important} .policy-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .2s,border-color .2s} .policy-card:hover,.policy-card:focus-visible{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 10px 24px rgba(12,59,104,.10)} .policy-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .policy-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--sky,#e8f2fb);color:var(--blue2);transition:background .2s,color .2s} .policy-ico svg{width:22px;height:22px} .policy-card:hover .policy-ico{background:var(--blue);color:#fff} .policy-copy{min-width:0;flex:1} .policy-copy b{display:block;font-size:13.5px;line-height:1.3;color:var(--navy)} .policy-copy small{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--muted)} .policy-go{flex:none;font-size:22px;line-height:1;color:var(--muted);transition:transform .15s,color .15s} .policy-card:hover .policy-go{transform:translateX(3px);color:var(--blue)} [dir=rtl] .policy-go{transform:scaleX(-1)} [dir=rtl] .policy-card:hover .policy-go{transform:scaleX(-1) translateX(3px)} @media(max-width:1100px){.policy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.policy-grid{grid-template-columns:1fr}} /* ---------- PREFERENCES / ONBOARDING ---------- */ .prefs{max-width:640px;margin:0 auto;padding:34px 0 60px} .prefs .step{font-size:12.5px;color:var(--orange2);font-weight:700;text-transform:uppercase;letter-spacing:.5px} .prefs h1{font-size:24px;color:var(--navy);font-weight:800;margin:4px 0 2px} .prefs-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px;box-shadow:0 6px 24px rgba(15,83,145,.06)} .why{background:var(--sky);border:1px solid #cfe1f2;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#2f4a63;margin:6px 0 20px} .why b{color:var(--blue2)} .rowf{display:flex;gap:12px}.rowf>div{flex:1} .prefs-actions{display:flex;gap:14px;margin-top:26px;align-items:center} .prefs-actions .skip{background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;font-family:inherit;font-size:14px;text-decoration:underline;padding:8px} @media(max-width:560px){.prefs-card{padding:20px 16px}.prefs-actions{align-items:stretch;flex-direction:column}.prefs-actions .btn{justify-content:center}} .modal ul{font-size:13.5px;color:var(--ink);padding-left:18px;line-height:1.8;margin:6px 0} /* ---------- RFQ / WANTED BOARD ---------- */ .rfq-head{background:linear-gradient(120deg,#0c3b68,#1c7ac4 70%,#ee7a2b);color:#fff;padding:32px 0} .rfq-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .rfq-head h1{font-size:27px;font-weight:900;letter-spacing:-.5px} .rfq-head p{color:#dce7f4;margin-top:6px;max-width:600px;font-size:14.5px} .rfq-stat{display:flex;gap:26px;margin:18px 0} .rfq-stat b{font-size:16px;color:var(--navy)}.rfq-stat span{font-size:12.5px;color:var(--muted)} .rfq-grid{display:grid;grid-template-columns:repeat(var(--grid-cols,2),1fr);gap:16px;padding-bottom:50px} .rcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:16px;display:flex;flex-direction:column} .rcard.matched{border-left-color:var(--blue)} .rcard .rt{display:flex;justify-content:space-between;align-items:center} .rcard h3{font-size:15.5px;color:var(--navy);margin:8px 0 12px;line-height:1.3} .rcard .rm{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12.5px;margin-bottom:13px} .rcard .rm span{color:var(--muted)}.rcard .rm b{color:var(--ink)} .rcard .rf{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:11px;margin-top:auto} .rcard .rf .resp{font-size:12px;color:var(--green);font-weight:700} .st-open{background:#e8f6ea;color:var(--green);border:1px solid #c9e9cd} .st-matched{background:#e8f2fb;color:var(--blue2);border:1px solid #c3ddf3} /* ---------- SURPLUS GRADING & INSPECTION ---------- */ .grade-row{display:flex;gap:10px;align-items:center;margin:16px 0 4px;flex-wrap:wrap} .grade{display:inline-flex;align-items:center;gap:9px;background:#eef7ea;border:1.5px solid #bfe3b4;color:#2f7a35;border-radius:10px;padding:7px 12px;font-weight:800;font-size:14px} .grade .g{width:28px;height:28px;border-radius:7px;background:#3f9d4a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px} .grade small{display:block;font-weight:600;color:#5a7a58;font-size:11px} .cond{margin:12px 0} .cond .lab{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px} .cond .bar{height:9px;border-radius:6px;background:#eef1f5;overflow:hidden} .cond .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#3f9d4a,#8fce6a)} .defects{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0} .defects .d{font-size:11.5px;background:#fff4ec;border:1px solid #f6d6bd;color:#b5560f;border-radius:20px;padding:4px 10px;font-weight:600} .insp{border:1.5px solid #cfe1f2;background:linear-gradient(180deg,#f4faff,#fff);border-radius:12px;padding:14px;margin:16px 0} .insp h4{font-size:13.5px;color:var(--blue2);display:flex;align-items:center;gap:7px;margin-bottom:4px} .insp .badge-i{background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px} .insp .g2{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:10px 0;font-size:12.5px} .insp .g2 span{color:var(--muted)}.insp .g2 b{color:var(--ink)} .insp .rep{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} .insp .rep a{font-size:12.5px;font-weight:700;color:var(--blue2);border:1px solid #cfe1f2;border-radius:8px;padding:6px 11px;background:#fff;cursor:pointer} .insp .rep a:hover{background:var(--sky)} /* offer modal */ /* margin:auto rather than align-items:center — centring a flex child taller than the viewport puts its top out of reach, which is how a modal ends up feeling stuck. This centres when it fits and scrolls when it does not. */ .modal-bg{display:none;position:fixed;inset:0;background:rgba(12,30,55,.5);z-index:200;justify-content:center;padding:20px;overflow-y:auto} .modal-bg.on{display:flex} /* min-width:0 so a flex item never refuses to shrink below its content's natural width — without it a long option row pushes the whole dialog wider than a phone screen and the prices fall off the right edge. */ .modal{background:#fff;border-radius:16px;max-width:440px;width:100%;min-width:0;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:auto} /* A modal whose content is longer than the screen: fixed head, scrolling middle, and a foot that keeps the total and the button in view. */ .modal.modal-tall{max-width:560px;padding:0;max-height:min(700px, calc(100dvh - 48px));display:flex;flex-direction:column;overflow:hidden} .modal-tall form{display:flex;flex-direction:column;min-height:0;flex:1} .modal-tall .modal-top{flex:none;padding:20px 22px 14px;border-bottom:1px solid var(--line)} .modal-tall .modal-top h3{margin-bottom:1px} .modal-tall .modal-top p{margin:0} .modal-tall .modal-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;overscroll-behavior:contain} .modal-tall .modal-foot{flex:none;padding:14px 22px 18px;border-top:1px solid var(--line);background:#fff} .modal-tall .modal-foot .est{margin:0 0 11px} .modal-tall .special{border:1px dashed #9bb7ca;border-radius:12px;padding:13px;margin-top:14px;background:#fafcfd} .sample-modal-intro{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.5} .sample-quantity-list{display:grid;gap:9px} .sample-quantity-row{display:grid;grid-template-columns:minmax(0,1fr) auto 108px;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff} .sample-quantity-row b,.sample-quantity-row small{display:block} .sample-quantity-row b{color:var(--navy);font-size:13px} .sample-quantity-row small{margin-top:2px;color:var(--muted);font-size:11px} .modal .sample-quantity-row label{margin:0;color:var(--muted);font-size:11px} .modal .sample-quantity-row input:not([type=checkbox]):not([type=radio]){padding:9px 10px} .modal textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font:inherit;resize:vertical} /* Published report findings: a check, its result, and the photos that back it, kept together so the reader can cross-reference on the spot. */ .rep-check{border-top:1px solid var(--line);padding:11px 0} .rep-check:first-of-type{border-top:0;padding-top:4px} .rep-check-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .rep-check-head b{color:var(--navy);font-size:13.5px} .rep-check p{margin-top:3px} .rep-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .rep-shots a{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f7fafc} .rep-shots img{display:block;width:110px;height:82px;object-fit:contain;background:#f4f7fa} .rep-file{display:grid;place-items:center;width:110px;height:82px;font-size:26px} .modal-tall .special-tick{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--navy);margin:0;font-size:13px} @media(max-width:560px){ .modal-bg{padding:12px} .modal-tall{max-height:calc(100dvh - 24px)} .modal-tall .modal-top{padding:16px 16px 12px} .modal-tall .modal-scroll{padding:13px 16px} .modal-tall .modal-foot{padding:12px 16px 15px} } .modal h3{font-size:19px;color:var(--navy);margin-bottom:2px} .modal .x{float:right;font-size:24px;color:var(--muted);cursor:pointer;line-height:1;border:none;background:none} .modal .cur{font-size:13px;color:var(--muted);margin:10px 0;background:var(--cream);padding:9px 12px;border-radius:8px} .modal .presets{display:flex;gap:8px;margin:6px 0} .modal .presets button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:8px;font-weight:800;cursor:pointer;font-family:inherit;color:var(--ink);font-size:13px;line-height:1.3} .modal .presets button small{font-weight:600;color:var(--muted)} .modal .presets button:hover,.modal .presets button.on{border-color:var(--orange);background:#fff6ef;color:var(--orange2)} .modal .presets button.on small{color:var(--orange2)} .modal label{font-size:12.5px;font-weight:700;color:var(--ink);display:block;margin:13px 0 5px} /* The rule above is for field labels. The inspection chooser renders its options as