/* VeriCrystal front site — modern minimal creative (M2 ink) with light/dark toggle. Light is the default; [data-theme="dark"] on switches to the ink palette. */ :root{ --bg:#f4f3ef; --surface:#fbfaf7; --surface-2:#efede7; --ink:#141414; --muted:#83807a; --line:rgba(20,20,20,.16); --line-soft:rgba(20,20,20,.08); --accent:#0f766e; --on-accent:#ffffff; --accent-soft:rgba(15,118,110,.12); --serif:Georgia,"Times New Roman",serif; --sans:"Helvetica Neue",Inter,-apple-system,"Segoe UI",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace; --shadow:0 10px 30px rgba(30,30,25,.08); } html[data-theme="dark"]{ --bg:#0d0d0f; --surface:#151518; --surface-2:#1b1b1f; --ink:#f2f1ee; --muted:#8f8d86; --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09); --accent:#5eead4; --on-accent:#06251f; --accent-soft:rgba(94,234,212,.14); --shadow:0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .container{max-width:1240px;margin:0 auto;padding:0 28px} .micro{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} .muted{color:var(--muted)} .small{font-size:12px} h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600} /* ---------- utility hairline bar ---------- */ /* ---------- header: logo left | nav center | actions right ---------- */ .site-header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line-soft)} .site-header .container{display:flex;align-items:center;height:64px;gap:20px} .brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.02em;flex:none} .brand svg{width:24px;height:24px} .brand .b-logo{width:24px;height:24px;object-fit:contain} .f-brand .b-logo{width:22px;height:22px;object-fit:contain} .brand .b-name{font-size:17px} .brand .b-sub{display:none} .brand sup{font-size:9px;color:var(--accent)} .main-nav{flex:1;display:flex;justify-content:center;align-items:stretch;gap:26px} .main-nav .has-mega{display:flex;align-items:stretch} .main-nav > a,.main-nav > .has-mega > a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap} .main-nav > a:hover,.main-nav > .has-mega > a:hover{color:var(--ink)} .main-nav > a.active,.main-nav > .has-mega > a.active{color:var(--ink);border-bottom-color:var(--accent)} /* mega dropdown (multi-dimensional nav) */ .main-nav .has-mega{position:relative} .main-nav .mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);width:max-content;background:var(--surface);border:1px solid var(--line);padding:12px 0 8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;box-shadow:var(--shadow);z-index:50;text-align:left} .main-nav .mega-cols{display:flex;flex-wrap:nowrap} .main-nav .has-mega:hover .mega,.main-nav .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .main-nav .mega-col{display:flex;flex-direction:column;align-items:stretch;padding:0 6px;width:186px;flex:0 0 186px} .main-nav .mega-col + .mega-col{border-left:1px solid var(--line-soft)} .main-nav .mega-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:2px 16px 7px} .main-nav .mega a{font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--muted);padding:5px 16px;white-space:nowrap;text-align:left} .main-nav .mega a:hover{color:var(--accent);background:var(--accent-soft)} .main-nav .mega .mega-all{border-top:1px solid var(--line-soft);margin:8px 0 0;padding:9px 16px 2px;color:var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase} /* right action cluster */ .header-actions{flex:none;display:flex;align-items:center;gap:14px} .header-actions .icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:0;cursor:pointer;color:var(--ink);padding:0} .header-actions .icon-btn svg{width:19px;height:19px} .header-actions .icon-btn:hover{color:var(--accent)} .header-actions .inline-form{display:inline} .header-actions .nav-burger{display:none} .header-actions .dot-count{position:absolute;top:1px;right:0;min-width:15px;height:15px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:9.5px;display:flex;align-items:center;justify-content:center;padding:0 3px} .theme-toggle{display:flex;align-items:center;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 8px;cursor:pointer;color:var(--muted)} .theme-toggle:hover{border-color:var(--ink)} .theme-toggle .knob{width:26px;height:14px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;display:block} .theme-toggle .knob i{position:absolute;top:2px;left:14px;width:10px;height:10px;border-radius:50%;background:var(--accent);transition:left .2s} html[data-theme="dark"] .theme-toggle .knob i{left:2px} /* slide-down search panel */ .search-pop{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);display:none;z-index:45} .search-pop.show{display:block} .search-pop form{display:flex;gap:12px;align-items:center;padding-top:14px;padding-bottom:14px} .search-pop input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);outline:0;color:var(--ink);font-size:14px;padding:8px 2px;font-family:var(--sans)} .search-pop input:focus{border-bottom-color:var(--accent)} .search-pop input::placeholder{color:var(--muted)} .inquiry-count{font-family:var(--mono);font-size:10px;color:var(--accent)} /* ---------- buttons ---------- */ .btn{display:inline-block;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:11px 22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:background .2s,color .2s,border-color .2s;text-align:center;white-space:nowrap} .btn:hover{background:var(--ink);color:var(--bg)} .btn-sm{padding:7px 12px;font-size:10px} .btn-block{display:block;width:100%} .btn-primary,.btn-cyan{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn-primary:hover,.btn-cyan:hover{background:transparent;color:var(--accent)} .btn-outline{border-color:var(--line);color:var(--ink)} .btn-outline:hover{border-color:var(--ink);background:transparent;color:var(--ink)} /* ---------- hero ---------- */ .hero{padding:76px 0 0} .hero .grid{display:grid;grid-template-columns:1fr 220px;gap:56px;align-items:end} .hero h1{margin:0;font-size:clamp(48px,7vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:600;white-space:pre-line} .hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400} .hero .meta{border-left:1px solid var(--line);padding-left:22px;display:flex;flex-direction:column;gap:14px} .hero .meta div{display:flex;flex-direction:column;gap:3px} .hero .meta b{font-size:13px;font-weight:600} .hero .sub{max-width:540px;color:var(--muted);font-size:15px;margin:24px 0 28px} .hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero .band{position:relative;margin-top:52px;height:440px;overflow:hidden} .hero .band img{width:100%;height:100%;object-fit:cover} .hero .badge{position:absolute;top:24px;right:24px;width:116px;height:116px} .hero .badge svg{width:100%;height:100%;animation:spin 16s linear infinite} .hero .badge .core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--on-accent)} @keyframes spin{to{transform:rotate(360deg)}} .hero-note{display:none} /* ---------- marquee ---------- */ .marq{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:60px} .marq .track{display:flex;width:max-content;animation:marq 32s linear infinite} .marq .grp{display:flex} .marq span{padding:13px 28px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;color:var(--muted)} .marq span b{color:var(--ink);font-weight:600} .marq span i{font-style:normal;color:var(--accent)} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- sections ---------- */ .section{padding:74px 0 0} .section.alt{background:transparent} .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:32px} .sec-head .no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)} .sec-head h2{margin:0;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;font-weight:600} .sec-head .sec-sub{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);letter-spacing:0;margin-top:6px;font-weight:400} .sec-head .more{margin-left:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap} .sec-head .more:hover{color:var(--accent);border-color:var(--accent)} /* advantage strip -> hairline row */ .adv-strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:60px} .adv-strip .container{display:grid;grid-template-columns:repeat(4,1fr)} .adv-item{padding:22px 26px 22px 0;border-right:1px solid var(--line-soft)} .adv-item:last-child{border-right:0} .adv-item .ico{display:none} .adv-item b{display:block;font-size:13.5px;margin-bottom:4px} .adv-item span span{font-size:12px} /* ---------- bento category grid ---------- */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px} .cat-tile{position:relative;overflow:hidden;background:var(--surface);display:block} .cat-tile:nth-child(1){grid-column:span 2;grid-row:span 2} .cat-tile:nth-child(2),.cat-tile:nth-child(6){grid-column:span 2} .cat-tile .thumb{display:block;height:100%} .cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)} .cat-tile:hover img{transform:scale(1.05)} .cat-tile .t-name,.cat-tile .t-desc{position:absolute;left:0;right:0;padding:0 18px;color:#fff;z-index:1} .cat-tile .t-name{bottom:34px;font-size:15px;font-weight:600} .cat-tile .t-desc{bottom:14px;font-size:11px;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(8,8,10,.62));pointer-events:none} /* ---------- product cards ---------- */ .p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px} .p-card{display:flex;flex-direction:column} .p-card .thumb{position:relative;overflow:hidden;background:var(--surface);display:block} .p-card .thumb img{width:100%;height:280px;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)} .p-card:hover .thumb img{transform:scale(1.05)} .p-card .badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:4px 8px} .p-card .badge.b2{top:auto;bottom:12px;background:var(--ink);color:var(--bg)} .p-card .p-body{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:3px;flex:1} .p-card .p-name a{font-size:14px;font-weight:600;letter-spacing:-.01em} .p-card .p-name a:hover{color:var(--accent)} .p-card .p-meta{font-size:11.5px;color:var(--muted)} .p-card .p-price{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px} .p-card .p-actions{display:flex;gap:8px;margin-top:12px} .p-card .p-actions .btn{flex:1} /* ---------- points / steps ---------- */ .point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px} .point-card{border-top:1px solid var(--ink);padding-top:16px} .point-card b{display:block;font-size:15.5px;margin-bottom:7px} .point-card span{color:var(--muted);font-size:13px} .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .step-card{border-top:1px solid var(--ink);padding-top:16px} .step-card .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.16em} .step-card b{display:block;font-size:16px;margin:10px 0 7px} .step-card span{color:var(--muted);font-size:13px} .pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .note-box{margin-top:36px;border:1px solid var(--line);padding:18px 22px;font-size:13px;color:var(--muted)} /* ---------- page hero (inner pages) ---------- */ .page-hero{padding:64px 0 40px;border-bottom:1px solid var(--line-soft)} .page-hero h1{margin:0;font-size:clamp(38px,5vw,68px);letter-spacing:-.03em;line-height:1.02} .page-hero .ph-sub{max-width:640px;color:var(--muted);font-size:14.5px;margin:16px 0 0} .page-hero .crumbs{margin-bottom:18px} .ph-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .ph-chips span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px} .ph-chips i{width:5px;height:5px;border-radius:50%;background:var(--accent)} .crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .crumbs a:hover{color:var(--accent)} .crumbs b{color:var(--ink)} /* ---------- catalog ---------- */ .catalog-wrap{display:grid;grid-template-columns:212px 1fr;gap:54px;padding-top:40px;padding-bottom:90px} .filter-panel h3{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400} .filter-panel .fgrp{border-top:1px solid var(--line-soft);padding:16px 0} .filter-panel label{display:flex;gap:10px;align-items:center;font-size:13px;margin-bottom:9px;cursor:pointer;color:var(--ink)} .filter-panel input{accent-color:var(--accent);width:14px;height:14px} .filter-panel .f-note{font-size:11.5px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:14px} .cm-head{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:30px} .cm-head h2{margin:0;font-size:15px;font-weight:600} .cm-head .sort-box{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .cm-head select{border:0;background:transparent;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;padding:4px 2px;outline:0} .empty-note{border:1px dashed var(--line);padding:40px;text-align:center;color:var(--muted)} .empty-note a{color:var(--accent)} /* ---------- product detail ---------- */ .pd-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding-top:36px;padding-bottom:70px} .pd-gallery .main-img{overflow:hidden;background:var(--surface)} .pd-gallery img{width:100%;height:520px;object-fit:cover} .pd-badges{display:flex;gap:8px;margin-bottom:14px} .pd-badges span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:4px 9px} .pd-badges span.b2{background:var(--ink);color:var(--bg)} .pd-info h1{font-size:clamp(28px,3.4vw,44px);margin:0 0 8px} .pd-sub{color:var(--muted);margin:0 0 22px} .spec-table{width:100%;border-collapse:collapse;margin-bottom:24px} .spec-table th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:10px 0;width:120px;border-top:1px solid var(--line-soft);vertical-align:top} .spec-table td{padding:10px 0;font-size:13px;border-top:1px solid var(--line-soft)} .quote-box{border:1px solid var(--line);padding:24px;margin-top:26px} .quote-box h3{margin:0 0 16px;font-size:15px} .form-row{margin-bottom:13px} .form-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .form-row .req{color:var(--accent)} .form-row input,.form-row select,.form-row textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:10px 12px;font-size:13px;font-family:var(--sans);outline:0;border-radius:0} .form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--accent)} .form-row textarea{min-height:88px;resize:vertical} .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pd-desc{padding-bottom:60px} .pd-desc .tabs{display:none} .pd-desc p{color:var(--muted);max-width:820px} .pd-points{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px} .pd-point{border-top:1px solid var(--ink);padding-top:14px} .pd-point .ico{display:none} .pd-point b{display:block;font-size:14px;margin-bottom:5px} .pd-point span span{color:var(--muted);font-size:12.5px} /* ---------- content pages ---------- */ .content-section{padding:56px 0} .content-section.alt{background:var(--surface)} .prose{max-width:820px} .prose p{color:var(--muted);font-size:14.5px;line-height:1.8} .prose strong{color:var(--ink)} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding-top:44px;padding-bottom:80px} .contact-card{border:1px solid var(--line);padding:26px} .contact-card h3{margin:0 0 18px;font-size:15px} .c-line{display:flex;gap:12px;margin-bottom:14px} .c-line .ico{color:var(--accent);font-size:14px} .c-line b{display:block;font-size:13px} .c-line span span{color:var(--muted);font-size:12.5px} .flash{border:1px solid var(--line);padding:11px 14px;font-size:12.5px;margin-bottom:16px} .flash.success{border-color:var(--accent);color:var(--accent)} .flash.error{border-color:#e07a7a;color:#e07a7a} /* ---------- CTA band ---------- */ .cta-band{margin-top:90px;background:var(--accent);color:var(--on-accent)} .cta-band .container{display:flex;align-items:center;gap:30px;padding-top:58px;padding-bottom:58px} .cta-band h2{margin:0;font-size:clamp(36px,5.4vw,72px);letter-spacing:-.03em;line-height:1} .cta-band p{margin:8px 0 0;font-size:13px;opacity:.85;max-width:520px} .cta-band .cta-actions{margin-left:auto;display:flex;gap:12px} .cta-band .btn{border-color:var(--on-accent);color:var(--on-accent)} .cta-band .btn:hover{background:var(--on-accent);color:var(--accent)} /* ---------- footer ---------- */ .site-footer{padding:70px 0 0} .f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:52px} .f-brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;margin-bottom:14px} .f-brand svg{width:22px;height:22px} .site-footer p{color:var(--muted);font-size:12.5px;margin:0 0 8px} .site-footer h4{margin:0 0 15px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400} .site-footer a{display:block;font-size:12.5px;margin-bottom:9px;color:var(--ink)} .site-footer a:hover{color:var(--accent)} .f-bottom{border-top:1px solid var(--line-soft);margin-top:26px} .f-bottom .container{display:flex;gap:24px;padding-top:16px;padding-bottom:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);flex-wrap:wrap} /* ---------- inquiry bar ---------- */ .inq-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);display:none;align-items:center;gap:16px;padding:12px 28px} .inq-bar.show{display:flex} .inq-bar .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1} .inq-bar .chip{border:1px solid var(--line);padding:5px 10px;font-size:11.5px;display:flex;align-items:center;gap:8px} .inq-bar .chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:0} .inq-bar .chip button:hover{color:var(--accent)} /* ---------- auth / cart / account ---------- */ .browse-chips{display:flex;gap:9px;flex-wrap:wrap} .bchip{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:12px;color:var(--muted)} .bchip:hover{color:var(--ink);border-color:var(--ink)} .bchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .faq-list{display:flex;flex-direction:column;gap:0} .faq-item{border-top:1px solid var(--line-soft);padding:18px 0} .faq-item:last-child{border-bottom:1px solid var(--line-soft)} .faq-item summary{cursor:pointer;font-size:15px;font-weight:600;letter-spacing:-.01em;list-style:none;display:flex;align-items:center;gap:12px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:before{content:"+";font-family:var(--mono);color:var(--accent);font-size:16px;width:14px;flex:none} .faq-item[open] summary:before{content:"−"} .faq-item p{margin:10px 0 0 26px;color:var(--muted);font-size:13.5px;line-height:1.75;max-width:760px} .auth-wrap{max-width:560px;margin:0 auto} .auth-card{border:1px solid var(--line);padding:30px} .acct-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:26px} .cart-table td{vertical-align:middle} .cart-table .qty-form input{width:76px;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:7px 8px;font-size:13px;font-family:var(--mono);outline:0} .cart-table .qty-form input:focus{border-color:var(--accent)} .cart-del{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:4px} .cart-del:hover{color:var(--accent)} .cart-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap} @media (max-width:900px){.acct-grid{grid-template-columns:1fr}} /* ---------- responsive ---------- */ @media (max-width:1080px){ .hero .grid{grid-template-columns:1fr} .hero .meta{display:none} .adv-strip .container{grid-template-columns:repeat(2,1fr)} .adv-item{border-right:0;border-bottom:1px solid var(--line-soft)} .cat-grid{grid-template-columns:repeat(2,1fr)} .cat-tile:nth-child(n){grid-column:auto;grid-row:auto} .p-grid{grid-template-columns:repeat(2,1fr)} .point-grid,.step-grid,.pd-points{grid-template-columns:repeat(2,1fr)} .pack-grid{grid-template-columns:repeat(2,1fr)} .catalog-wrap{grid-template-columns:1fr} .pd-wrap,.contact-grid{grid-template-columns:1fr} .f-top{grid-template-columns:repeat(2,1fr)} /* mobile: hamburger + drawer navigation (left slide-in panel) */ .site-header .container{gap:10px;padding:0 14px} .header-actions{gap:8px} .brand .b-name{font-size:15px} .header-actions .nav-burger{display:flex} .main-nav{position:fixed;top:0;left:0;bottom:0;width:min(300px,82vw);background:var(--surface);flex:none;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:70px 14px 24px;transform:translateX(-102%);transition:transform .24s ease;box-shadow:0 0 40px rgba(0,0,0,.25);z-index:70;overflow-y:auto} body.nav-open .main-nav{transform:translateX(0)} .main-nav > a,.main-nav > .has-mega > a{padding:11px 12px;border-bottom:1px solid var(--line-soft);font-size:12px} .main-nav > a.active,.main-nav > .has-mega > a.active{border-bottom-color:var(--line-soft);color:var(--accent)} .main-nav .has-mega{display:block} .main-nav .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:2px 0 6px 12px;display:none;width:auto;background:transparent} /* the desktop hover/focus-within rule has higher specificity and would re-apply translateX(-50%) once the accordion title keeps focus — neutralise it here */ .main-nav .has-mega:hover .mega,.main-nav .has-mega:focus-within .mega{position:static;transform:none;opacity:1;visibility:visible;display:none} .main-nav .has-mega.open .mega,.main-nav .has-mega.open:hover .mega,.main-nav .has-mega.open:focus-within .mega{display:block} .main-nav .mega-cols{flex-direction:column} .main-nav .mega-col{width:auto;flex:none;border-left:none;padding:0} .main-nav .mega-col + .mega-col{border-left:none} .main-nav .mega a{padding:7px 12px} .main-nav .mega-h{padding:8px 12px 3px} .main-nav .mega .mega-all{margin-top:4px;padding:8px 12px 0} .nav-scrim{display:none;position:fixed;inset:0;background:rgba(10,12,14,.45);z-index:39} body.nav-open .nav-scrim{display:block} /* mobile detail polish */ .page-hero{padding:40px 0 28px} .page-hero h1{font-size:clamp(30px,8.5vw,44px)} .page-hero .crumbs{margin-bottom:12px} .search-pop form{padding-top:10px;padding-bottom:10px} .browse-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .browse-chips::-webkit-scrollbar{display:none} .bchip{flex:0 0 auto} .f-top{grid-template-columns:1fr;gap:26px} /* cart table becomes stacked cards (header row is the first tr of th) */ .cart-table tr:first-child{display:none} .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%} .cart-table tr{position:relative;border:1px solid var(--line);border-radius:10px;padding:12px 44px 12px 14px;margin-bottom:12px;background:var(--surface)} .cart-table td{border:none;padding:4px 0} .cart-table td:first-child{display:inline-block;width:84px;vertical-align:top} .cart-table td:nth-child(2){display:inline-block;width:calc(100% - 96px);vertical-align:top} .cart-table td:last-child{position:absolute;top:10px;right:10px;width:auto} .spec-table th{width:96px} } @media (max-width:640px){ .p-grid,.cat-grid,.point-grid,.step-grid,.pack-grid{grid-template-columns:1fr} .cta-band .container{flex-direction:column;align-items:flex-start} .cta-band .cta-actions{margin-left:0} }