/* ============================================================
CABOS & PLUGS — Brutalist ENG redesign 2026
Helvetica Neue + JetBrains Mono. Black on paper-white.
============================================================ */
:root {
--black: #000;
--ink: #0A0A0A;
--paper: #F4F2EC;
--paper-2: #ECEAE3;
--white: #FFFFFF;
--line: #000;
--rule: 1px;
--blue: #0D47A1;
--red: #E53935;
--muted: #3A3A36;
--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;overflow-x:clip}
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;text-transform:lowercase}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.h-display{font-family:var(--font-sans);font-weight:800;letter-spacing:-.045em;line-height:.86;text-wrap:balance}
/* Shell */
.cp-shell{width:100%;max-width:1600px;margin:0 auto;border-left:var(--rule) solid var(--line);border-right:var(--rule) solid var(--line);background:var(--paper);position:relative}
/* Utility bar */
.cp-util{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
.cp-util .ticker{display:flex;gap:32px;overflow:hidden}
.cp-util .lang{display:inline-flex;gap:4px;align-items:center}
.cp-util .lang button{font-family:var(--font-mono);font-size:11px;padding:2px 6px;color:var(--paper);opacity:.55;text-transform:uppercase;letter-spacing:.08em}
.cp-util .lang button.active{opacity:1;background:var(--paper);color:var(--ink)}
/* Header */
.cp-header{display:grid;grid-template-columns:220px 1fr auto;align-items:stretch;border-bottom:var(--rule) solid var(--line)}
.cp-header>*{padding:18px 20px}
.cp-header .brand{border-right:var(--rule) solid var(--line);display:flex;align-items:center;gap:10px}
.cp-header .brand .mark{width:34px;height:34px;border:1.5px solid var(--ink);display:grid;place-items:center;position:relative;flex-shrink:0}
.cp-header .brand .mark::before,.cp-header .brand .mark::after{content:"";position:absolute;background:var(--ink)}
.cp-header .brand .mark::before{left:-3px;right:-3px;height:1.5px;top:50%}
.cp-header .brand .mark::after{top:-3px;bottom:-3px;width:1.5px;left:50%}
.cp-header .brand .wm{display:flex;flex-direction:column;line-height:1}
.cp-header .brand .wm strong{font-weight:800;font-size:16px;letter-spacing:-.04em}
.cp-header .brand .wm span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.cp-header nav{display:flex;align-items:center;gap:28px;border-right:var(--rule) solid var(--line)}
.cp-header nav a{font-size:13.5px;font-weight:600;letter-spacing:-.005em;padding:4px 0}
.cp-header nav a:hover{color:var(--blue)}
.cp-header nav a.special{color:var(--red);font-style:italic;position:relative}
.cp-header nav a.special::after{content:"";position:absolute;left:0;right:0;bottom:-2px;border-bottom:1.5px dashed var(--red)}
.cp-header .actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:36px;height:36px;border:1.5px solid var(--ink);display:grid;place-items:center;background:var(--paper);transition:100ms ease}
.icon-btn:hover{background:var(--ink);color:var(--paper)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);padding:8px 12px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper)}
.cart-btn .count{background:var(--red);color:#fff;padding:1px 6px;font-weight:700}
.cart-btn:hover{background:var(--red);border-color:var(--red)}
/* New mobile header icons */
.hdr-actions{display:none;align-items:stretch;padding:0!important;border-left:var(--rule) solid var(--ink)}
.hdr-icon{background:var(--paper);border:0;border-right:var(--rule) solid var(--ink);width:44px;padding:6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hdr-icon:last-child{border-right:0}
.hdr-icon.bag{background:var(--paper-2)}
.hdr-icon:active{background:var(--ink)}
.hdr-icon:active svg *[stroke="#0A0A0A"]{stroke:var(--paper)}
.hdr-icon:active svg *[fill="#0A0A0A"]{fill:var(--paper)}
/* Full-page menu drawer */
.menu-drawer{display:none;position:fixed;inset:0;z-index:200;background:var(--paper);flex-direction:column}
.menu-drawer.open{display:flex}
.menu-topbar{display:flex;align-items:stretch;border-bottom:var(--rule) solid var(--ink);background:var(--paper)}
.menu-search{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;border-right:var(--rule) solid var(--ink)}
.menu-search input{flex:1;border:0;outline:0;background:transparent;font-family:var(--font-sans);font-size:13px;color:var(--ink);padding:14px 0;letter-spacing:-.005em}
.menu-search input::placeholder{color:var(--muted)}
.menu-lang{display:flex;align-items:center;gap:4px;padding:0 10px;border-right:var(--rule) solid var(--ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.menu-lang button{background:none;border:0;font:inherit;padding:2px 4px;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer}
.menu-lang button.on{color:var(--ink);font-weight:700}
.menu-lang .sl{color:var(--muted)}
.menu-close{background:var(--paper-2);border:0;width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.menu-eyebrow{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--paper-2);border-bottom:var(--rule) solid var(--ink);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu-tree-wrap{flex:1;overflow-y:auto;padding:4px 0 18px}
.menu-tree,.tree-children{list-style:none;margin:0;padding:0}
.tree-node{position:relative}
.tree-row{width:100%;display:grid;grid-template-columns:14px 1fr auto;align-items:baseline;gap:8px;background:transparent;border:0;padding:12px 14px;font-family:var(--font-sans);text-align:left;cursor:pointer;border-bottom:1px solid rgba(10,10,10,0.06)}
.tree-label{color:var(--ink);letter-spacing:-.02em;font-weight:700;line-height:1.15}
.tree-meta{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tree-caret{display:inline-block;font-size:16px;color:var(--ink);transition:transform .15s ease}
.tree-caret.open{transform:rotate(90deg)}
.menu-tree>.tree-node>.tree-row .tree-label{font-size:26px}
.menu-tree>.tree-node>.tree-row{padding:16px 14px}
.tree-node.depth-1>.tree-row{padding-left:36px;background:rgba(10,10,10,0.015)}
.tree-node.depth-1>.tree-row .tree-label{font-size:16px;font-weight:600}
.tree-node.depth-2>.tree-row{padding-left:60px;background:rgba(10,10,10,0.03)}
.tree-node.depth-2>.tree-row .tree-label{font-size:13px;font-weight:500}
.tree-node.depth-1::before,.tree-node.depth-2::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(10,10,10,0.18)}
.tree-node.depth-2::before{left:46px}
.menu-foot{display:flex;justify-content:space-between;padding:10px 14px;border-top:var(--rule) solid var(--ink);background:var(--paper-2);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Info bar */
.cp-infobar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--rule) solid var(--line)}
.info-item{padding:18px 20px;border-right:var(--rule) solid var(--line);display:flex;flex-direction:column;gap:6px;min-height:96px;position:relative}
.info-item:last-child{border-right:none}
.info-item .val{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.info-item .lbl{color:var(--muted);font-family:var(--font-mono);font-size:11px}
.info-item .corner{position:absolute;top:8px;right:10px;color:var(--muted);font-family:var(--font-mono);font-size:10px}
/* Hero */
.cp-hero{display:grid;grid-template-columns:5fr 7fr;border-bottom:var(--rule) solid var(--line);min-height:640px}
.hero-left{padding:40px 24px 24px;border-right:var(--rule) solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative}
.hero-stamp{position:absolute;top:14px;right:14px;border:1.5px solid var(--red);color:var(--red);padding:4px 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.hero-title{font-size:clamp(48px,7vw,96px)}
.hero-title em{font-style:normal;color:var(--red)}
.hero-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;border-top:1px dashed #00000044;padding-top:18px}
.hero-spec .row{display:flex;flex-direction:column;gap:5px;min-width:0;box-sizing:border-box}
.hero-spec .row .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.hero-spec .row .v{font-size:14px;font-weight:600;min-width:0;max-width:100%;line-height:1.2;overflow-wrap:anywhere}
.hero-cta{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);transition:120ms ease}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn--ghost{background:transparent;color:var(--muted);border-color:currentColor;font-weight:400}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn .arrow{transition:transform 120ms ease}
.btn:hover .arrow{transform:translateX(4px)}
.hero-right{position:relative;background:var(--white);display:grid;grid-template-rows:1fr auto}
.hero-stage{position:relative;display:grid;place-items:center;background:linear-gradient(to right,#00000010 1.5px,transparent 1.5px) 0 0/calc(100%/12) 100%,linear-gradient(to bottom,#00000008 1.5px,transparent 1.5px) 0 0/100% calc(100%/8),var(--white);overflow:hidden}
.hero-stage .crosshair{position:absolute;pointer-events:none;font-family:var(--font-mono);font-size:10px;color:var(--muted);z-index:2}
.stage-bg-img{position:absolute;inset:0;z-index:0;overflow:hidden}
.stage-bg-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-stage.has-bg-img{background:none}
.hero-stage.has-bg-img .crosshair{color:rgba(255,255,255,0.55)}
.hero-stage .crosshair.tl{top:12px;left:12px}
.hero-stage .crosshair.tr{top:12px;right:12px}
.hero-stage .crosshair.bl{bottom:12px;left:12px}
.hero-stage .crosshair.br{bottom:12px;right:12px}
.hero-controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-top:var(--rule) solid var(--line);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.hero-controls .nav{display:flex}
.hero-controls .nav button{padding:14px 18px;border-right:var(--rule) solid var(--line)}
.hero-controls .nav button:hover{background:var(--ink);color:var(--paper)}
.hero-controls .progress{display:flex;align-items:center;gap:10px;padding:0 18px}
.hero-controls .progress .bar{flex:1;height:4px;background:#00000020;position:relative}
.hero-controls .progress .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);transition:width 100ms linear}
.hero-controls .meta{padding:14px 18px;border-left:var(--rule) solid var(--line)}
/* Cinematic opening hero */
.cp-cinema{position:relative;height:clamp(460px,78vh,760px);background:#000;border-bottom:var(--rule) solid var(--line);overflow:hidden;isolation:isolate}
.cp-cinema .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.04);animation:cpKB 22s ease-in-out infinite alternate,cpReveal 3s ease-out .15s 1 forwards;filter:brightness(.12) contrast(1.12)}
.cp-cinema .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 35% 50%,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.88) 100%),linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.15) 35%,rgba(0,0,0,0.55) 100%);opacity:1;animation:cpRevealOverlay 3s ease-out .15s 1 forwards}
@keyframes cpKB{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
@keyframes cpReveal{from{filter:brightness(.12) contrast(1.12)}to{filter:brightness(1) contrast(1)}}
@keyframes cpRevealOverlay{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion: reduce){.cp-cinema .bg{animation:none!important;filter:brightness(1) contrast(1)!important}.cp-cinema .bg::after{animation:none!important;opacity:.55!important}}
.cp-cinema .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.cp-cinema .marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.cp-cinema .marks::before,.cp-cinema .marks::after{content:"";position:absolute;width:22px;height:22px;border:1.5px solid rgba(244,242,236,0.55)}
.cp-cinema .marks::before{top:22px;left:22px;border-right:0;border-bottom:0}
.cp-cinema .marks::after{bottom:22px;right:22px;border-left:0;border-top:0}
.cp-cinema .frame{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:32px 36px;color:#F4F2EC}
.cp-cinema .slate{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,236,0.78)}
.cp-cinema .slate .l,.cp-cinema .slate .r{display:inline-flex;align-items:center;gap:10px}
.cp-cinema .slate .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px rgba(229,57,53,0.18);animation:cpRec 1.6s ease-in-out infinite}
@keyframes cpRec{0%,45%{opacity:1}55%,100%{opacity:.18}}
.cp-cinema .slate .tc{font-variant-numeric:tabular-nums;color:#fff}
.cp-cinema .stack{display:flex;flex-direction:column;gap:0;align-self:flex-start;max-width:none}
.cp-cinema-title{font-family:var(--font-sans);font-weight:900;font-size:clamp(36px,7.5vw,116px);line-height:.86;letter-spacing:-.055em;text-transform:lowercase;color:#F4F2EC;margin:0;text-wrap:balance}
.cp-cinema-title>span{display:block}
.cp-cinema-title .last>span{display:inline}
.cp-cinema-title .accent{color:transparent;-webkit-text-stroke:1.5px #F4F2EC;text-stroke:1.5px #F4F2EC}
.cp-cinema-title em{font-style:normal;color:var(--red);display:inline-block}
.cp-cinema .sub{margin-top:18px;display:flex;align-items:center;gap:14px;color:rgba(244,242,236,0.82)}
.cp-cinema .sub .rule{flex:0 0 60px;height:1.5px;background:rgba(244,242,236,0.55)}
.cp-cinema .sub .txt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cp-cinema .scroll{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,236,0.8)}
.cp-cinema .scroll .arr{display:inline-block;animation:cpDown 1.6s ease-in-out infinite}
@keyframes cpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* Marquee */
.cp-marquee{border-bottom:var(--rule) solid var(--line);background:var(--ink);color:var(--paper);overflow:hidden;position:relative;height:38px}
.marquee-track{display:flex;gap:40px;white-space:nowrap;animation:cpscroll 40s linear infinite;align-items:center;height:100%;padding-left:20px}
.marquee-track span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;display:inline-flex;align-items:center;gap:12px}
.marquee-track span::after{content:"●";color:var(--red)}
@keyframes cpscroll{to{transform:translateX(-50%)}}
/* Section rule */
.section-rule{display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;border-bottom:var(--rule) solid var(--line);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.section-rule>*{padding:14px 18px;border-right:var(--rule) solid var(--line)}
.section-rule>*:last-child{border-right:none}
.section-rule .num{font-weight:700}
.section-rule .pill{color:var(--paper);background:var(--ink)}
/* Category strip */
.cat-strip{display:flex;overflow-x:auto;gap:0;border-bottom:1.5px solid var(--ink);scrollbar-width:none;background:var(--paper)}
.cat-strip::-webkit-scrollbar{display:none}
.cat-pill{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:12px 18px;border:none;border-right:1.5px solid var(--ink);white-space:nowrap;cursor:pointer;background:var(--paper);color:var(--muted);transition:80ms;flex-shrink:0;display:flex;align-items:center;gap:6px;border-radius:0}
.cat-pill:hover{background:var(--paper-2);color:var(--ink)}
.cat-pill.active{background:var(--ink);color:var(--paper)}
.pill-icon{display:none}
.pill-icon-all{display:none}
/* Products — list layout */
.cp-products{display:flex;flex-direction:column;border-bottom:var(--rule) solid var(--line)}
.pli.hidden{display:none}
.pli{display:grid;grid-template-columns:100px 1fr auto;border-bottom:1.5px solid var(--ink);background:var(--white);position:relative;transition:80ms;min-height:100px}
.pli:last-child{border-bottom:none}
.pli:hover{background:var(--paper)}
.pli .pli-ribbon{position:absolute;top:0;left:100px;background:var(--red);color:var(--paper);font-family:var(--font-mono);font-size:9px;padding:2px 6px;letter-spacing:.14em;text-transform:uppercase;z-index:2}
.pli .pli-img{border-right:1.5px solid var(--ink);display:grid;place-items:center;padding:10px;background:var(--white);background-image:repeating-linear-gradient(45deg,#0000000a 0 1px,transparent 1px 8px)}
.pli .pli-img img{width:80px;height:80px;object-fit:contain;display:block;mix-blend-mode:multiply}
.pli .pli-img svg{width:80px;height:48px}
.pli .pli-body{padding:14px 18px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.pli .pli-name{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pli .pli-desc{font-family:var(--font-mono);font-size:10px;color:var(--muted);text-transform:lowercase}
.pli .pli-vars{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.pli .pli-var{font-family:var(--font-mono);font-size:10px;padding:3px 8px;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;letter-spacing:.04em;transition:60ms}
.pli .pli-var:hover,.pli .pli-var.active{background:var(--ink);color:var(--paper)}
.pli .pli-right{border-left:1.5px solid var(--ink);padding:14px 18px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;min-width:130px}
.pli .pli-price{font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pli .pli-old{font-size:11px;color:var(--muted);text-decoration:line-through}
.pli .pli-stock{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pli .pli-stock.in{color:#1a8f3a}
.pli .pli-add{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:10px 14px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);cursor:pointer;transition:80ms;white-space:nowrap}
.pli .pli-add:hover{background:var(--red);border-color:var(--red)}
/* Categories — 3 cols, menor */
.cp-categories{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:var(--rule) solid var(--line)}
.cat-card{border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);position:relative;background:var(--white);display:flex;flex-direction:column;cursor:pointer;transition:160ms ease;overflow:hidden}
.cat-card:nth-child(3n){border-right:none}
.cat-card:nth-last-child(-n+3){border-bottom:none}
.cat-card:hover{background:var(--paper-2)}
.cat-card .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1.5px solid var(--ink);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.cat-card .head .num{font-weight:700}
.cat-card .head .arr{transition:transform 160ms ease}
.cat-card:hover .head .arr{transform:translateX(4px)}
.cat-card .img-box{display:grid;place-items:center;padding:10px;height:160px;overflow:hidden;background:linear-gradient(to right,#00000008 1.5px,transparent 1.5px) 0 0/24px 100%,linear-gradient(to bottom,#00000008 1.5px,transparent 1.5px) 0 0/100% 24px,var(--white)}
.cat-card .img-box img{width:80%;max-width:200px;height:130px;object-fit:contain;mix-blend-mode:multiply;transition:transform 200ms ease}
.cat-card:hover .img-box img{transform:scale(1.05)}
.cat-card .foot{padding:12px 14px;border-top:1.5px solid var(--ink);display:grid;gap:3px;min-height:100px;align-content:start}
.cat-card .foot h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.cat-card .foot p{color:var(--muted);font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Kit */
.kit-block{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--rule) solid var(--line);min-height:460px}
.kit-visual{border-right:var(--rule) solid var(--line);background:var(--white);position:relative;display:grid;place-items:center;background-image:repeating-linear-gradient(0deg,#00000008 0 1.5px,transparent 1.5px 80px),repeating-linear-gradient(90deg,#00000008 0 1.5px,transparent 1.5px 80px)}
.kit-visual--photo{padding:0;background:var(--paper);background-image:none;overflow:hidden}
.kit-visual--photo .crosshair{position:absolute;pointer-events:none;font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.55);z-index:2}
.kit-visual--photo .crosshair.tl{top:12px;left:12px}
.kit-visual--photo .crosshair.tr{top:12px;right:12px}
.kit-visual--photo .crosshair.bl{bottom:12px;left:12px}
.kit-visual--photo .crosshair.br{bottom:12px;right:12px}
.kit-visual .duo{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;height:100%}
.kit-visual .duo .card{background:var(--paper);border:1.5px solid var(--ink);display:grid;place-items:center;padding:14px;position:relative;height:100%;overflow:hidden}
.kit-visual .duo .card .tag{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 6px}
.kit-visual .duo .card.kit-photo{padding:0;overflow:hidden;background:var(--ink)}
.kit-visual .duo .card.kit-photo img{width:100%;height:100%;object-fit:cover;display:block}
.kit-info{padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.kit-info .h-display{font-size:clamp(42px,5.4vw,80px)}
.kit-info .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.kit-info .specs .row{display:flex;flex-direction:column;gap:5px;min-width:0;box-sizing:border-box}
.kit-info .specs .row .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.kit-info .specs .row .v{font-size:14px;font-weight:600}
.kit-info .specs .row .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:0}
.kit-info .specs .row .v{font-size:14px;font-weight:600;min-width:0;max-width:100%;line-height:1.2;overflow-wrap:anywhere}
.kit-info .price-row{display:flex;align-items:baseline;gap:16px;border-top:1.5px solid var(--ink);padding-top:18px}
.kit-info .price-row .price{font-size:36px;font-weight:800;letter-spacing:-.04em}
.kit-info .price-row .strike{color:var(--muted);text-decoration:line-through;font-size:16px}
.kit-info .price-row .save{color:var(--red);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
/* Configurator */
.cp-config{border-bottom:var(--rule) solid var(--line);background:var(--paper-2)}
.cp-config .frame{display:grid;grid-template-columns:1fr 1.4fr;min-height:620px}
.cp-config .left{border-right:var(--rule) solid var(--line);padding:30px;display:flex;flex-direction:column;gap:22px;background:var(--paper)}
.cp-config .right{padding:0;background:var(--white);display:grid;grid-template-rows:1fr auto}
.config-steps{display:flex;gap:0;border:1.5px solid var(--ink)}
.config-step{flex:1;padding:10px 12px;border-right:1.5px solid var(--ink);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;display:flex;flex-direction:column;gap:2px;background:var(--paper);color:var(--muted);cursor:pointer}
.config-step:last-child{border-right:0}
.config-step .n{font-weight:700;color:var(--ink)}
.config-step.active{background:var(--ink);color:var(--paper)}
.config-step.active .n{color:var(--paper)}
.config-step.done{background:var(--blue);color:var(--paper)}
#cfg-context-bar{display:none;align-items:center;flex-wrap:wrap;gap:6px;border:1.5px solid var(--ink);border-top:0;background:var(--paper-2);padding:8px 12px}
.ctx-item{display:flex;flex-direction:column;gap:2px}
.ctx-k{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.ctx-v{font-size:13px;font-weight:700}
.ctx-sep{font-family:var(--font-mono);font-size:14px;color:var(--muted);padding:0 4px;align-self:center}
.config-step.done .n{color:var(--paper)}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink)}
.opt{padding:14px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:100ms}
.opt:nth-child(2n){border-right:0}
.opt:nth-last-child(-n+2){border-bottom:0}
.opt:hover{background:var(--paper-2)}
.opt.selected{background:var(--ink);color:var(--paper)}
.opt .lbl{font-weight:700;font-size:13px}
.opt .desc{font-family:var(--font-mono);font-size:10px;color:inherit;opacity:.7;text-transform:lowercase}
.opt .price-tag{font-family:var(--font-mono);font-size:10px;margin-top:auto}
.opt-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1.5px solid var(--ink)}
.opt-grid-3 .opt{border-right:1.5px solid var(--ink)!important;border-bottom:1.5px solid var(--ink)!important}
.opt-grid-3 .opt:nth-child(3n){border-right:0!important}
.opt-grid-3 .opt:nth-last-child(-n+3){border-bottom:0!important}
.length-input{border:1.5px solid var(--ink);padding:16px;display:grid;gap:10px}
.length-input .row{display:flex;align-items:center;gap:12px}
.length-input input[type="range"]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#00000022;outline:none}
.length-input input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--red);cursor:pointer;border:2px solid var(--ink)}
.length-input .meters{font-size:30px;font-weight:800;letter-spacing:-.04em}
.length-input .meters em{font-style:normal;color:var(--blue)}
.length-input .marks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.color-grid{display:flex;gap:8px;flex-wrap:wrap}
.color-chip{width:56px;aspect-ratio:1/1;border:1.5px solid var(--ink);display:grid;place-items:end;padding:4px;cursor:pointer;position:relative}
.color-chip.selected{outline:2px solid var(--red);outline-offset:3px}
.color-chip .c-lbl{font-family:var(--font-mono);font-size:9px;text-transform:uppercase}
.config-preview{display:grid;place-items:center;padding:30px;position:relative;background-image:linear-gradient(to right,#00000008 1.5px,transparent 1.5px) 0 0/40px 100%,linear-gradient(to bottom,#00000008 1.5px,transparent 1.5px) 0 0/100% 40px}
.config-summary{border-top:1.5px solid var(--ink);display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:stretch}
.config-summary>div{padding:14px 18px;border-right:1.5px solid var(--ink);display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.config-summary>div:last-of-type{border-right:0}
.config-summary .k{color:var(--muted)}
.config-summary .v{color:var(--ink);font-weight:700;font-size:13px}
.config-summary .total .v{font-size:22px}
.config-summary .add-btn{background:var(--ink);color:var(--paper);display:grid;place-items:center;padding:14px 30px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;border:0;cursor:pointer}
.config-summary .add-btn:hover{background:var(--red)}
/* Trust */
.cp-trust{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:var(--rule) solid var(--line)}
.cp-trust>div{padding:22px 18px;border-right:var(--rule) solid var(--line);display:flex;flex-direction:column;gap:4px}
.cp-trust>div:last-child{border-right:0}
.cp-trust .ico{width:22px;height:22px;margin-bottom:6px}
.cp-trust .ico svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.6}
.cp-trust h4{font-size:14px;font-weight:700;letter-spacing:-.01em}
.cp-trust p{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);line-height:1.5;text-transform:lowercase}
/* why us */
.cp-why{border-bottom:var(--rule) solid var(--line);background:var(--paper)}
.cp-why .why-body{display:grid;grid-template-columns:1fr 1.2fr}
.cp-why .why-claim{padding:44px 40px;border-right:var(--rule) solid var(--line);display:flex;flex-direction:column;gap:18px;justify-content:center}
.cp-why .why-claim .h-display{font-size:clamp(38px,4.8vw,68px)}
.cp-why .why-claim p{line-height:1.6;max-width:42ch;text-transform:none}
.cp-why .why-grid{display:grid;grid-template-columns:1fr 1fr}
.cp-why .why-item{padding:26px 28px;border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);display:flex;gap:16px}
.cp-why .why-grid .why-item:nth-child(2n){border-right:0}
.cp-why .why-grid .why-item:nth-child(n+3){border-bottom:0}
.cp-why .why-n{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--red);letter-spacing:.1em;flex-shrink:0}
.cp-why .why-item h4{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.cp-why .why-item .wp{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:9px}
.cp-why .why-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid #00000022;padding:2px 7px;display:inline-block}
/* hero callouts (slide-specific) */
.hero-callouts{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-callouts .co{position:absolute;display:flex;align-items:center;gap:8px;transform:translateY(-50%)}
.hero-callouts .co--left{transform:translate(-100%,-50%)}
.hero-callouts .co .dot{width:7px;height:7px;border:1.5px solid var(--red);border-radius:50%;background:rgba(255,255,255,.9);flex-shrink:0}
.hero-callouts .co .ln{width:30px;height:1px;background:rgba(255,255,255,.7);flex-shrink:0}
.hero-callouts .co .lb{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.7);text-transform:lowercase;white-space:nowrap}
.hero-callouts .co--dark .dot{border-color:#0A0A0A;background:rgba(255,255,255,.85)}
.hero-callouts .co--dark .ln{background:rgba(10,10,10,.55)}
.hero-callouts .co--dark .lb{color:#0A0A0A;text-shadow:0 1px 4px rgba(255,255,255,.75)}
/* Footer */
.cp-footer{background:var(--ink);color:var(--paper)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;border-bottom:1px solid #ffffff20}
.footer-grid>div{padding:32px 24px;border-right:1px solid #ffffff20}
.footer-grid>div:last-child{border-right:0}
.footer-grid h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff80;margin-bottom:14px}
.footer-grid a{display:block;padding:4px 0;font-size:13px;opacity:.85}
.footer-grid a:hover{opacity:1;color:var(--red)}
.footer-grid .col-brand h2{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:.9;margin-bottom:12px}
.footer-grid .col-brand p{font-size:13px;opacity:.7;max-width:320px}
.footer-bottom{display:flex;justify-content:space-between;padding:18px 24px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#ffffff70}
/* Cart drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity 200ms ease;z-index:100}
.drawer-bg.open{opacity:1;pointer-events:all}
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100%;background:var(--paper);border-left:1.5px solid var(--ink);z-index:101;transform:translateX(100%);transition:transform 240ms cubic-bezier(.7,0,.3,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer .head{padding:16px 18px;border-bottom:1.5px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
.drawer .head h3{font-size:18px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.drawer .body{flex:1;overflow-y:auto}
.cart-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:14px 18px;border-bottom:1.5px solid var(--ink);align-items:center}
.cart-row .thumb{width:72px;aspect-ratio:1/1;border:1.5px solid var(--ink);background:#fff;display:grid;place-items:center;padding:6px}
.cart-row .name{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.cart-row .desc{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:2px;text-transform:lowercase}
.cart-row .qty{display:inline-flex;border:1.5px solid var(--ink);margin-top:6px}
.cart-row .qty button{width:24px;height:22px}
.cart-row .qty button:hover{background:var(--ink);color:var(--paper)}
.cart-row .qty .n{width:28px;text-align:center;font-family:var(--font-mono);font-size:11px;line-height:22px;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.cart-row .price{font-weight:800;font-size:14px}
.drawer .totals{border-top:1.5px solid var(--ink);padding:14px 18px;display:grid;gap:6px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.drawer .totals .row{display:flex;justify-content:space-between}
.drawer .totals .row.total{font-size:16px;font-weight:700;padding-top:8px;border-top:1px dashed var(--ink);margin-top:4px}
.drawer .checkout-btn{display:block;width:calc(100% - 36px);margin:14px 18px 18px;padding:16px;background:var(--ink);color:var(--paper);text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border:1.5px solid var(--ink)}
.drawer .checkout-btn:hover{background:var(--red);border-color:var(--red)}
/* Toast */
.cp-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:14px 20px;border:1.5px solid var(--ink);display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:240ms ease;z-index:99}
.cp-toast.show{opacity:1;transform:translate(-50%,0)}
.cp-toast .dot{width:8px;height:8px;background:#4cc97a}
/* Selection */
::selection{background:var(--red);color:var(--paper)}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* Responsive */
@media(max-width:980px){
.cp-hero,.kit-block{grid-template-columns:1fr}
.hero-left,.kit-info{border-right:0}
.cp-infobar{grid-template-columns:1fr 1fr}
.info-item:nth-child(2n){border-right:0}
.cp-header{grid-template-columns:1fr auto}
.cp-header nav{display:none}
.cp-config .frame{grid-template-columns:1fr}
.cp-config .left{border-right:0}
.footer-grid{grid-template-columns:1fr 1fr}
.cp-trust{grid-template-columns:repeat(3,1fr)}
.cp-why .why-body{grid-template-columns:1fr}
.cp-why .why-claim{border-right:0;border-bottom:var(--rule) solid var(--line)}
.cp-why .why-grid{grid-template-columns:1fr}
.cp-why .why-item{border-right:0!important}
.cp-why .why-grid .why-item:nth-child(3){border-bottom:var(--rule) solid var(--line)}
.hero-callouts{display:none}
/* cats: 2 cols on tablet, reset 3-col nth rules */
.cp-categories{grid-template-columns:repeat(2,1fr)}
.cat-card:nth-child(3n){border-right:var(--rule) solid var(--line)}
.cat-card:nth-last-child(-n+3){border-bottom:var(--rule) solid var(--line)}
.cat-card:nth-child(2n){border-right:none}
.cat-card:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:640px){
/* ---- util bar ---- */
.cp-util{font-size:10px;padding:6px 14px;justify-content:flex-end}
.cp-util .ticker{display:none}
/* ---- header ---- */
.cp-header{grid-template-columns:1fr auto}
.cp-header nav{display:none}
.cp-header .actions{display:none}
.cp-header .cart-btn{display:none}
.cp-header>*{padding:9px 12px}
.cp-header .brand .wm>span{display:none}
.hdr-actions{display:flex}
/* ---- infobar: mini, duas linhas ---- */
.info-item{padding:3px 10px;min-height:36px;border-bottom:var(--rule) solid var(--line)}
.info-item:nth-last-child(-n+2){border-bottom:0}
.info-item .val{font-size:15px;line-height:1}
.info-item .k{font-size:8.5px;line-height:1;margin-top:1px}
.info-item .lbl{font-size:8.5px}
.info-item .corner{display:none}
/* ---- cinematic opening ---- */
.cp-cinema{height:clamp(360px,68vh,560px)}
.cp-cinema .frame{padding:18px 16px}
.cp-cinema .slate{font-size:9px;letter-spacing:.12em}
.cp-cinema .marks::before,.cp-cinema .marks::after{width:14px;height:14px}
.cp-cinema .marks::before{top:12px;left:12px}
.cp-cinema .marks::after{bottom:12px;right:12px}
.cp-cinema-title{font-size:clamp(28px,9vw,56px);letter-spacing:-.045em;line-height:.88}
.cp-cinema .sub{margin-top:10px;gap:8px}
.cp-cinema .sub .rule{flex-basis:32px}
.cp-cinema .sub .txt{font-size:9px}
.cp-cinema .scroll{font-size:9px}
/* ---- hero: single col ---- */
.cp-hero{display:flex;flex-direction:column;min-height:auto}
.hero-left{padding:2px 14px 6px;gap:6px;border-right:0}
.hero-right{grid-template-rows:200px auto}
.hero-stamp{display:none}
.eyebrow#hero-eyebrow{display:none}
.hero-title{font-size:clamp(38px,10vw,56px);line-height:.94}
.hero-spec{padding:0;border-top:var(--rule) solid var(--ink);display:block;margin-top:10px;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
.hero-spec .row{padding:8px;border:0;border-bottom:var(--rule) solid var(--ink);display:grid;grid-template-columns:minmax(82px,max-content) minmax(0,1fr);align-items:baseline;gap:12px;min-width:0;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box;margin:0;background:transparent}
.hero-spec .row:last-child{border-bottom:0}
.hero-spec .row.hide-mobile{display:none}
.hero-spec .row .k{font-size:9.5px;flex-shrink:0}
.hero-spec .row .v{font-size:13px;font-weight:700;white-space:normal;overflow:visible;text-overflow:clip;min-width:0;text-align:right;line-height:1.18;overflow-wrap:anywhere}
.hero-cta{gap:8px;margin-top:0}
.hero-cta .btn{justify-content:center;padding:10px 13px;font-size:10px;font-weight:700}
.btn.btn--ghost{padding:10px 13px;font-size:10px}
.hero-stage{min-height:0;height:200px}
.hero-controls{font-size:10px}
.hero-controls .nav button{padding:8px 12px}
.hero-controls .progress{padding:0 10px}
.hero-controls .meta{padding:8px 10px;font-size:9px}
/* ---- section rule ---- */
.section-rule{grid-template-columns:32px 1fr auto;font-size:10px}
.section-rule .meta{display:none}
.section-rule>*{padding:6px 9px}
.cp-marquee{padding:9px 0}
/* ---- cat strip: 6-col grid, full width, no scroll ---- */
.cat-strip{display:grid;grid-template-columns:repeat(6,1fr);overflow-x:visible;-webkit-overflow-scrolling:auto}
.cat-pill{flex:none;width:auto;flex-direction:column;padding:9px 4px;gap:4px;justify-content:center;align-items:center;white-space:normal;letter-spacing:0;border-right-width:1px;min-width:0}
.cat-pill .pill-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:var(--rule) solid var(--ink);background:var(--paper-2);color:var(--ink);flex-shrink:0}
.cat-pill .pill-icon svg{width:22px;height:22px}
.cat-pill.on{background:var(--ink);color:var(--paper)}
.cat-pill.on .pill-icon{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.cat-pill.active{background:var(--ink);color:var(--paper)}
.cat-pill.active .pill-icon{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.cat-pill .pill-lbl,.cat-pill .pill-txt{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.04em;text-transform:lowercase;text-align:center;line-height:1.2}
.cat-pill img.pill-icon{display:none}
/* ---- products list: imagem 110px, right como linha abaixo ---- */
.pli{grid-template-columns:110px 1fr}
.pli .pli-ribbon{left:110px}
.pli .pli-img{min-height:110px;align-self:stretch}
.pli .pli-img img,.pli .pli-img svg.cable-svg{width:100%;height:100%;object-fit:cover}
.pli .pli-body{padding:8px 11px;justify-content:space-between}
.pli .pli-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pli .pli-desc{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pli .pli-right{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink);flex-direction:row;justify-content:space-between;align-items:center;padding:6px 11px;min-width:0;background:var(--paper-2)}
.pli .pli-old{display:none}
.pli .pli-stock{font-size:9px}
.pli .pli-price{font-size:14px;font-weight:700}
.pli .pli-add{font-size:9.5px;padding:7px 11px;border-color:var(--blue);color:var(--blue);background:var(--paper)}
.pli .pli-vars{flex-wrap:nowrap;overflow-x:auto;margin-top:4px;scrollbar-width:none}
.pli .pli-var{flex-shrink:0;font-size:10px;padding:3px 7px}
/* ---- categories section — hidden on mobile (cat-strip pills replace it) ---- */
#cp-cats{display:none}
/* ---- kit block ---- */
.kit-info{padding:16px 14px;gap:12px}
.kit-info .h-display{font-size:clamp(28px,8vw,42px)}
.kit-info .specs{gap:0;display:block;border-top:var(--rule) solid var(--ink)}
.kit-info .specs .row{margin:0;padding:8px;border:0;border-bottom:var(--rule) solid var(--ink);display:grid;grid-template-columns:minmax(92px,max-content) minmax(0,1fr);align-items:baseline;gap:12px;min-width:0;overflow:hidden;background:transparent}
.kit-info .specs .row:last-child{border-bottom:0}
.kit-info .specs .row .k{margin-bottom:0;font-size:9.5px;flex-shrink:0}
.kit-info .specs .row .v{font-size:13px;font-weight:700;white-space:normal;overflow:visible;text-overflow:clip;min-width:0;text-align:right;line-height:1.18;overflow-wrap:anywhere}
.kit-info .price-row{flex-wrap:wrap;gap:6px 10px}
.kit-info .price-row .price{font-size:22px}
/* ---- configurator (new layout) ---- */
.cp-config{padding:16px 14px 14px}
.cp-config .frame{grid-template-columns:1fr}
.cp-config .left{border-right:0;padding:0;gap:11px}
.cp-config .right{display:none}
.config-step,.cstep{padding:6px 3px;font-size:9.5px}
.config-steps{border:0;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.opt,.cfg-card{padding:6px 9px;min-height:58px}
.opt-grid-3,.cfg-grid{grid-template-columns:1fr 1fr}
#cfg-context-bar{border-top:0}
.config-summary{grid-template-columns:1fr 1fr}
.config-summary>div:nth-child(3){grid-column:span 2}
.config-summary .add-btn,.add-btn{grid-column:span 2;padding:11px}
.config-preview{padding:16px;min-height:160px}
.config-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.config-nav .btn{width:100%;justify-content:center}
/* ---- trust ---- */
.cp-trust{grid-template-columns:repeat(2,1fr)}
.cp-trust>div{padding:11px 12px;border-bottom:var(--rule) solid var(--line)}
.cp-trust>div:nth-child(2n){border-right:0}
.cp-trust>div:last-child{border-bottom:0;border-right:0;grid-column:span 2}
.cp-trust>div:nth-last-child(2){border-bottom:0}
.cp-trust h4{font-size:12px}
.cp-trust p{font-size:9.5px}
/* ---- footer ---- */
.footer-grid{grid-template-columns:1fr 1fr}
.footer-grid>div{padding:14px 14px}
.col-brand{grid-column:span 2}
.col-brand h2{font-size:24px}
.footer-bottom{flex-direction:column;gap:4px;padding:12px 14px;font-size:10px}
}
/* ============================================================
PAGES — PLP (category), PDP (product), Cart
Extends styles.css
============================================================ */
/* ---------------- Shared: page header / breadcrumb ---------------- */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-bottom: var(--rule) solid var(--line);
font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.06em;
color: var(--muted);
background: var(--paper);
}
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .here { color: var(--ink); font-weight: 700; }
.page-title-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
padding: 36px 24px 28px;
border-bottom: var(--rule) solid var(--line);
gap: 24px;
}
.page-title-row h1 {
font-family: var(--font-sans);
font-weight: 800;
font-size: clamp(48px, 6vw, 88px);
letter-spacing: -0.045em;
line-height: 0.9;
}
.page-title-row .meta {
display: grid; gap: 6px;
text-align: right;
}
.page-title-row .meta .count {
font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
}
.page-title-row .meta .lbl {
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted);
}
/* ============================================================
PLP — Category Page
============================================================ */
.plp-layout {
display: grid;
grid-template-columns: 280px 1fr;
border-bottom: var(--rule) solid var(--line);
}
.plp-sidebar {
border-right: var(--rule) solid var(--line);
background: var(--paper);
}
.filter-group {
border-bottom: var(--rule) solid var(--line);
padding: 18px 20px;
}
.filter-group .fg-head {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 14px;
}
.filter-group .fg-head .clear { font-size: 10px; color: var(--muted); text-decoration: underline; }
.filter-group .fg-head .clear:hover { color: var(--red); }
.check {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 6px 0;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
.check input { display: none; }
.check .box {
width: 16px; height: 16px;
border: 1.5px solid var(--ink);
display: grid; place-items: center;
background: var(--white);
}
.check .box::after {
content: "";
width: 8px; height: 8px;
background: var(--ink);
opacity: 0;
transition: 80ms;
}
.check input:checked + .box::after { opacity: 1; }
.check input:checked + .box { background: var(--red); border-color: var(--red); }
.check input:checked + .box::after { background: var(--paper); }
.check .num {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.check:hover { color: var(--red); }
.range {
display: grid; gap: 8px;
}
.range .values {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px;
}
.range .values strong { font-size: 14px; }
.range .marks {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 4px;
}
.range input[type="range"] {
-webkit-appearance: none; appearance: none;
height: 4px; background: #00000022; outline: none;
}
.range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; background: var(--red); cursor: pointer;
border: 2px solid var(--ink);
}
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatches .sw {
width: 32px; height: 32px;
border: 1.5px solid var(--ink);
cursor: pointer;
position: relative;
}
.color-swatches .sw.selected::after {
content: "✓";
position: absolute; inset: 0;
display: grid; place-items: center;
color: white; font-weight: 700; font-size: 14px;
mix-blend-mode: difference;
}
/* PLP main column */
.plp-main { background: var(--paper); }
.plp-toolbar {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
border-bottom: var(--rule) solid var(--line);
padding: 0;
}
.plp-toolbar > * { padding: 14px 18px; }
.plp-toolbar .active-pills {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.plp-toolbar .pill {
display: inline-flex; align-items: center; gap: 6px;
border: 1.5px solid var(--ink); padding: 4px 8px;
background: var(--white);
}
.plp-toolbar .pill .x { cursor: pointer; opacity: 0.5; }
.plp-toolbar .pill .x:hover { opacity: 1; color: var(--red); }
.plp-toolbar .sort, .plp-toolbar .view, .plp-toolbar .per {
border-left: var(--rule) solid var(--line);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
display: inline-flex; gap: 8px; align-items: center;
}
.plp-toolbar select {
border: 1.5px solid var(--ink); padding: 4px 8px;
font: inherit; font-family: var(--font-mono); font-size: 11px;
background: var(--paper); text-transform: uppercase; letter-spacing: 0.08em;
cursor: pointer;
}
.plp-toolbar .view-toggle { display: flex; }
.plp-toolbar .view-toggle button {
width: 28px; height: 28px;
border: 1.5px solid var(--ink);
display: grid; place-items: center;
}
.plp-toolbar .view-toggle button + button { margin-left: -1.5px; }
.plp-toolbar .view-toggle button.active { background: var(--ink); color: var(--paper); }
.plp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.plp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.plp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.plp-card {
border-right: var(--rule) solid var(--line);
border-bottom: var(--rule) solid var(--line);
background: var(--white);
display: flex; flex-direction: column;
position: relative;
cursor: pointer;
}
.plp-grid.cols-3 .plp-card:nth-child(3n) { border-right: 0; }
.plp-grid.cols-2 .plp-card:nth-child(2n) { border-right: 0; }
.plp-grid.cols-4 .plp-card:nth-child(4n) { border-right: 0; }
.plp-card .ribbon {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--red); color: var(--paper);
font-family: var(--font-mono); font-size: 9px; padding: 3px 6px;
letter-spacing: 0.14em; text-transform: uppercase;
}
.plp-card .wish {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 28px; height: 28px;
border: 1.5px solid var(--ink);
background: var(--paper);
display: grid; place-items: center;
}
.plp-card .wish:hover { background: var(--ink); color: var(--paper); }
.plp-card .img-box {
aspect-ratio: 1/1;
display: grid; place-items: center;
padding: 28px;
border-bottom: 1.5px solid var(--ink);
background-image:
linear-gradient(to right, #00000008 1.5px, transparent 1.5px) 0 0/24px 100%,
linear-gradient(to bottom, #00000008 1.5px, transparent 1.5px) 0 0/100% 24px;
position: relative;
overflow: hidden;
}
.plp-card .img-box img { max-width: 88%; max-height: 88%; object-fit: contain; mix-blend-mode: multiply; transition: transform 240ms ease; }
.plp-card:hover .img-box img { transform: scale(1.04); }
.plp-card .lens {
position: absolute; bottom: 10px; right: 10px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted);
}
.plp-card .info {
padding: 16px 16px 14px;
display: grid; gap: 8px;
}
.plp-card .info .cat-tag {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted);
}
.plp-card .info .name { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; min-height: 2.4em; }
.plp-card .info .lengths {
display: flex; flex-wrap: wrap; gap: 4px;
margin: 4px 0;
}
.plp-card .info .lengths span {
font-family: var(--font-mono); font-size: 10px; text-transform: lowercase;
border: 1px solid var(--ink); padding: 2px 6px;
background: var(--paper);
}
.plp-card .info .meta {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 2px;
}
.plp-card .info .price { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.plp-card .info .price-from { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: lowercase; margin-right: 4px; }
.plp-card .info .stock { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.plp-card .info .stock.in { color: #1a8f3a; }
.plp-card .info .stock.out { color: var(--muted); }
.plp-card .add {
border-top: 1.5px solid var(--ink);
padding: 12px 16px;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
background: var(--paper);
transition: 120ms ease;
}
.plp-card:hover .add { background: var(--ink); color: var(--paper); }
/* Pagination */
.pagination {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 24px;
border-bottom: var(--rule) solid var(--line);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.pagination .pages { display: flex; }
.pagination .pages a {
width: 36px; height: 36px;
border: 1.5px solid var(--ink);
display: grid; place-items: center;
}
.pagination .pages a + a { margin-left: -1.5px; }
.pagination .pages a.active { background: var(--ink); color: var(--paper); }
.pagination .pages a:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
/* ============================================================
PDP — Product Page
============================================================ */
.pdp-frame {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: var(--rule) solid var(--line);
min-height: 720px;
}
.pdp-gallery {
border-right: var(--rule) solid var(--line);
display: grid;
grid-template-columns: 96px 1fr;
background: var(--white);
}
.pdp-thumbs {
border-right: 1.5px solid var(--ink);
display: flex;
flex-direction: column;
padding: 18px 14px;
gap: 10px;
background: var(--paper);
}
.pdp-thumbs .thumb {
width: 64px; aspect-ratio: 1/1;
border: 1.5px solid var(--ink);
background: var(--white);
cursor: pointer;
display: grid; place-items: center;
padding: 6px;
position: relative;
transition: 100ms;
}
.pdp-thumbs .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-thumbs .thumb.active { outline: 2px solid var(--red); outline-offset: 2px; }
.pdp-thumbs .thumb-num {
position: absolute; top: -4px; right: -6px;
background: var(--paper); padding: 0 4px;
font-family: var(--font-mono); font-size: 9px;
}
.pdp-main-img {
display: grid; place-items: center;
padding: 40px;
position: relative;
background-image:
linear-gradient(to right, #00000008 1.5px, transparent 1.5px) 0 0/40px 100%,
linear-gradient(to bottom, #00000008 1.5px, transparent 1.5px) 0 0/100% 40px;
}
.pdp-main-img img {
max-width: 78%; max-height: 78%; object-fit: contain;
mix-blend-mode: multiply;
}
.pdp-main-img .crosshair {
position: absolute;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted);
}
.pdp-main-img .crosshair.tl { top: 14px; left: 14px; }
.pdp-main-img .crosshair.tr { top: 14px; right: 14px; }
.pdp-main-img .crosshair.bl { bottom: 14px; left: 14px; }
.pdp-main-img .crosshair.br { bottom: 14px; right: 14px; }
.pdp-info {
padding: 36px 32px;
display: grid;
gap: 22px;
align-content: start;
background: var(--paper);
}
.pdp-info .top-meta {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.pdp-info .top-meta .sku { color: var(--muted); }
.pdp-info .top-meta .stock.in { color: #1a8f3a; }
.pdp-info h1 {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: -0.038em;
line-height: 0.95;
font-size: clamp(36px, 4.2vw, 56px);
text-wrap: balance;
}
.pdp-info .lead {
font-size: 15px; line-height: 1.5;
max-width: 56ch;
color: #2a2a26;
}
.pdp-info .price-block {
display: flex; align-items: baseline; gap: 16px;
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
padding: 14px 0;
}
.pdp-info .price-block .price { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; }
.pdp-info .price-block .installment {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em; color: var(--muted);
}
.pdp-info .price-block .installment strong { color: var(--ink); font-weight: 700; }
.pdp-picker { display: grid; gap: 10px; }
.pdp-picker .pick-head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.pdp-picker .pick-head strong { color: var(--ink); font-weight: 700; }
.pdp-picker .pick-head .v { color: var(--muted); }
.pdp-options {
display: flex; flex-wrap: wrap; gap: 0;
border: 1.5px solid var(--ink);
width: fit-content;
}
.pdp-options .opt {
padding: 10px 16px;
border-right: 1.5px solid var(--ink);
font-family: var(--font-mono); font-size: 12px; text-transform: lowercase;
cursor: pointer;
background: var(--white);
min-width: 70px;
text-align: center;
}
.pdp-options .opt:last-child { border-right: 0; }
.pdp-options .opt.selected { background: var(--ink); color: var(--paper); }
.pdp-options .opt.disabled {
opacity: 0.35; cursor: not-allowed;
background:
repeating-linear-gradient(45deg, transparent 0 6px, #0000000a 6px 7px);
}
.pdp-cta-row {
display: grid;
grid-template-columns: 130px 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.qty-stepper {
display: grid;
grid-template-columns: 36px 1fr 36px;
border: 1.5px solid var(--ink);
}
.qty-stepper button { font-family: var(--font-mono); font-size: 14px; }
.qty-stepper button:hover { background: var(--ink); color: var(--paper); }
.qty-stepper .n {
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 14px; font-weight: 700;
border-left: 1px solid var(--ink); border-right: 1px solid var(--ink);
}
.pdp-mini-info {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1.5px solid var(--ink);
}
.pdp-mini-info > div {
padding: 10px 12px;
border-right: 1.5px solid var(--ink);
font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
}
.pdp-mini-info > div:last-child { border-right: 0; }
.pdp-mini-info .k { color: var(--muted); display: block; }
.pdp-mini-info .v { color: var(--ink); font-weight: 700; font-size: 12px; display: block; margin-top: 2px; }
/* CEP calc */
.cep-calc {
display: grid;
grid-template-columns: 1fr auto;
border: 1.5px solid var(--ink);
}
.cep-calc input {
border: 0; padding: 12px 14px;
font: inherit; font-size: 13px;
background: var(--white);
outline: none;
}
.cep-calc button {
padding: 0 18px;
background: var(--ink); color: var(--paper);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.cep-calc button:hover { background: var(--red); }
/* PDP description tabs */
.pdp-tabs {
display: flex;
border-bottom: var(--rule) solid var(--line);
background: var(--paper);
}
.pdp-tabs button {
padding: 18px 24px;
border-right: var(--rule) solid var(--line);
font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
position: relative;
}
.pdp-tabs button.active { background: var(--ink); color: var(--paper); }
.pdp-tabs button:hover:not(.active) { color: var(--red); }
.pdp-tab-content {
padding: 40px 32px;
border-bottom: var(--rule) solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
background: var(--paper);
}
.pdp-tab-content h3 {
font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 14px;
}
.pdp-tab-content p { font-size: 15px; line-height: 1.6; max-width: 56ch; }
.pdp-tab-content p + p { margin-top: 12px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px dashed #00000030; }
.spec-table td {
padding: 10px 0;
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.06em;
}
.spec-table td:first-child { color: var(--muted); width: 38%; }
.spec-table td:last-child { color: var(--ink); font-weight: 700; }
/* Lifestyle / in-use image */
.pdp-lifestyle {
border-bottom: var(--rule) solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--ink);
color: var(--paper);
}
.pdp-lifestyle .img {
position: relative;
min-height: 540px;
background-size: cover; background-position: center;
border-right: 1.5px solid #ffffff20;
}
.pdp-lifestyle .img::after {
content: "/ in use · estúdio · são paulo";
position: absolute; bottom: 14px; left: 14px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--paper); background: rgba(0,0,0,0.5); padding: 4px 8px;
}
.pdp-lifestyle .text {
padding: 50px 40px;
display: flex; flex-direction: column; justify-content: center;
gap: 18px;
}
.pdp-lifestyle .text h2 {
font-family: var(--font-sans); font-weight: 800;
letter-spacing: -0.045em; line-height: 0.9;
font-size: clamp(40px, 5vw, 72px);
}
.pdp-lifestyle .text p {
font-size: 16px; line-height: 1.5; max-width: 46ch; opacity: 0.85;
}
.pdp-lifestyle .text .eyebrow { color: var(--red); }
.pdp-lifestyle .mini-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
padding-top: 18px; border-top: 1px solid #ffffff30;
margin-top: 10px;
}
.pdp-lifestyle .mini-stats .row { display: grid; gap: 4px; }
.pdp-lifestyle .mini-stats .v { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pdp-lifestyle .mini-stats .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
/* Cross-sell row */
.related-rule {
display: grid;
grid-template-columns: 56px 1fr auto;
border-bottom: var(--rule) solid var(--line);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
background: var(--paper);
}
.related-rule > * { padding: 14px 18px; border-right: var(--rule) solid var(--line); }
.related-rule > *:last-child { border-right: 0; }
/* Reviews mini */
.reviews-block { display: grid; gap: 16px; }
.review-card { display: grid; gap: 6px; padding: 14px; border: 1.5px solid var(--ink); background: var(--white); }
.review-card .stars { color: var(--red); letter-spacing: 4px; font-size: 14px; }
.review-card .who { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.review-card .txt { font-size: 14px; line-height: 1.45; }
.review-summary {
display: grid; gap: 16px;
padding: 22px;
border: 1.5px solid var(--ink);
background: var(--white);
align-self: start;
}
.review-summary .big {
font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9;
}
.review-summary .bar-row { display: grid; grid-template-columns: 32px 1fr 28px; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; }
.review-summary .bar { height: 5px; background: #00000022; position: relative; }
.review-summary .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); }
/* ============================================================
CART — full page
============================================================ */
.cart-frame {
display: grid;
grid-template-columns: 1fr 420px;
border-bottom: var(--rule) solid var(--line);
min-height: 560px;
}
.cart-items {
border-right: var(--rule) solid var(--line);
display: flex; flex-direction: column;
background: var(--paper);
}
.cart-row-page {
display: grid;
grid-template-columns: 130px 1.4fr auto 110px auto;
gap: 18px;
align-items: center;
padding: 20px 24px;
border-bottom: var(--rule) solid var(--line);
}
.cart-row-page .thumb {
width: 130px; aspect-ratio: 1/1;
border: 1.5px solid var(--ink);
background: var(--white);
padding: 10px;
display: grid; place-items: center;
}
.cart-row-page .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-row-page .body { display: grid; gap: 4px; }
.cart-row-page .body .nm { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.cart-row-page .body .desc { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: lowercase; letter-spacing: 0.02em; }
.cart-row-page .body .sku { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.cart-row-page .unit { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cart-row-page .unit .v { color: var(--ink); font-weight: 700; font-size: 14px; display: block; margin-top: 2px; font-family: var(--font-sans); }
.cart-row-page .qty-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cart-row-page .qty-cell .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cart-row-page .total {
text-align: right;
display: grid; gap: 4px;
}
.cart-row-page .total .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.cart-row-page .total .remove {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); text-decoration: underline; cursor: pointer;
}
.cart-row-page .total .remove:hover { color: var(--red); }
.cart-empty {
display: grid; place-items: center;
padding: 100px 30px;
text-align: center;
gap: 18px;
}
.cart-empty h2 { font-size: 42px; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; }
.cart-empty p { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cart-aside {
background: var(--paper);
position: sticky; top: 0;
align-self: start;
display: grid; gap: 0;
}
.cart-aside-block {
padding: 20px 24px;
border-bottom: var(--rule) solid var(--line);
}
.cart-aside-block h3 {
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
margin-bottom: 12px;
}
.cart-aside-block .input-row {
display: grid; grid-template-columns: 1fr auto; gap: 0;
border: 1.5px solid var(--ink);
}
.cart-aside-block .input-row input {
padding: 10px 12px;
border: 0;
font: inherit; font-size: 13px;
background: var(--white);
outline: none;
}
.cart-aside-block .input-row button {
padding: 0 14px;
background: var(--ink); color: var(--paper);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.cart-aside-block .input-row button:hover { background: var(--red); }
.cart-aside-block .ship-options { display: grid; gap: 8px; margin-top: 12px; }
.cart-aside-block .ship-options label {
display: grid; grid-template-columns: 18px 1fr auto;
gap: 10px; align-items: center;
padding: 10px 12px;
border: 1.5px solid var(--ink);
background: var(--white);
cursor: pointer;
font-size: 13px;
}
.cart-aside-block .ship-options label input { accent-color: var(--red); }
.cart-aside-block .ship-options label .price { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.cart-aside-block .ship-options label.selected { background: var(--ink); color: var(--paper); }
.summary-rows {
display: grid; gap: 8px;
font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.summary-rows .row { display: flex; justify-content: space-between; }
.summary-rows .row.discount { color: var(--red); }
.summary-rows .row.total {
font-size: 18px; font-weight: 700; padding-top: 12px;
border-top: 1px dashed var(--ink); margin-top: 6px;
}
.summary-rows .row.total .v { font-size: 26px; font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; }
.cart-cta {
display: block; width: 100%;
padding: 18px;
background: var(--ink); color: var(--paper);
text-align: center;
font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
border: 0;
cursor: pointer;
}
.cart-cta:hover { background: var(--red); }
.cart-cta-secondary {
display: block; width: 100%;
padding: 14px;
background: var(--paper); color: var(--ink);
text-align: center;
border-top: 1.5px solid var(--ink);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.cart-cta-secondary:hover { color: var(--red); }
.payment-icons {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 6px;
}
.payment-icons span {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 8px; border: 1px solid var(--ink); background: var(--white);
}
/* Responsive */
@media (max-width: 1100px) {
.plp-layout { grid-template-columns: 1fr; }
.plp-sidebar { border-right: 0; border-bottom: var(--rule) solid var(--line); }
.plp-grid { grid-template-columns: repeat(2, 1fr) !important; }
.plp-grid .plp-card:nth-child(2n) { border-right: 0; }
.pdp-frame { grid-template-columns: 1fr; }
.pdp-gallery { border-right: 0; border-bottom: var(--rule) solid var(--line); }
.pdp-lifestyle { grid-template-columns: 1fr; }
.cart-frame { grid-template-columns: 1fr; }
.cart-items { border-right: 0; border-bottom: var(--rule) solid var(--line); }
.cart-row-page { grid-template-columns: 88px 1fr auto; gap: 12px; }
.cart-row-page .thumb { width: 88px; }
.cart-row-page .unit, .cart-row-page .qty-cell { grid-column: span 1; }
}
/* ============================================================
CP STORE — additions for PLP/PDP (not in landing base)
============================================================ */
.mono-up { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
/* PDP square-photo fix: keep the main product image square, anchored top,
so the photo is fully visible above the fold (no scroll to see it). */
.pdp-gallery { align-self: start; }
.pdp-main-img { aspect-ratio: 1 / 1; }
@media (max-width: 1100px) {
.pdp-gallery { align-self: stretch; }
}
/* ============================================================
CP CART — brutalist styling over WooCommerce cart shortcode
============================================================ */
.cp-cart-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:28px 24px; border-bottom:var(--rule) solid var(--line); flex-wrap:wrap; }
.cp-cart-body { padding:0; }
.cp-cart-body .woocommerce { padding:0; }
.cp-cart-body .woocommerce-notices-wrapper:empty { display:none; }
.cp-cart-body .woocommerce-notices-wrapper { padding:14px 24px 0; }
/* layout: items + totals side by side on desktop */
.cp-cart-body form.woocommerce-cart-form { display:block; }
.cp-cart-body table.shop_table.cart { width:100%; border-collapse:collapse; border:0; margin:0; }
.cp-cart-body table.cart thead th {
font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); text-align:left; padding:14px 18px; border-bottom:var(--rule) solid var(--line); background:var(--paper);
}
.cp-cart-body table.cart tbody td {
padding:18px; border-bottom:1.5px solid var(--ink); vertical-align:middle; background:var(--white);
}
.cp-cart-body td.product-remove { width:54px; text-align:center; }
.cp-cart-body td.product-remove a.remove {
display:inline-grid; place-items:center; width:26px; height:26px; border:1.5px solid var(--ink);
color:var(--ink)!important; font-size:14px; border-radius:0!important; background:var(--paper);
}
.cp-cart-body td.product-remove a.remove:hover { background:var(--red); border-color:var(--red); color:#fff!important; }
.cp-cart-body td.product-thumbnail { width:88px; }
.cp-cart-body td.product-thumbnail img { width:72px; height:72px; object-fit:contain; mix-blend-mode:multiply; border:1.5px solid var(--ink); background:#fff; padding:6px; }
.cp-cart-body td.product-name a { font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.cp-cart-body td.product-name a:hover { color:var(--red); }
.cp-cart-body td.product-price, .cp-cart-body td.product-subtotal { font-family:var(--font-mono); font-size:13px; }
.cp-cart-body td.product-subtotal { font-weight:700; }
.cp-cart-body .quantity { display:inline-flex; align-items:center; border:1.5px solid var(--ink); }
.cp-cart-body .quantity input.qty {
width:54px; height:38px; border:0; text-align:center; font-family:var(--font-mono); font-size:14px; background:var(--paper);
-moz-appearance:textfield;
}
.cp-cart-body .quantity input.qty::-webkit-outer-spin-button,
.cp-cart-body .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* actions row: coupon + update */
.cp-cart-body td.actions { padding:18px!important; background:var(--paper)!important; border-bottom:var(--rule) solid var(--line); }
.cp-cart-body td.actions .coupon { display:inline-flex; gap:0; }
.cp-cart-body td.actions .coupon input#coupon_code {
height:44px; border:1.5px solid var(--ink); border-right:0; padding:0 14px; font-family:var(--font-mono); font-size:12px; background:var(--white); min-width:180px;
}
.cp-cart-body button, .cp-cart-body .button, .cp-cart-body a.button, .cp-cart-body input.button {
font-family:var(--font-mono)!important; font-size:11px!important; text-transform:uppercase!important; letter-spacing:.08em!important;
background:var(--ink)!important; color:var(--paper)!important; border:1.5px solid var(--ink)!important; border-radius:0!important;
padding:0 18px!important; height:44px!important; line-height:44px!important; cursor:pointer; transition:120ms ease; font-weight:700!important;
}
.cp-cart-body button:hover, .cp-cart-body .button:hover, .cp-cart-body a.button:hover, .cp-cart-body input.button:hover {
background:var(--red)!important; border-color:var(--red)!important; color:#fff!important;
}
.cp-cart-body td.actions button[name="update_cart"] { float:right; background:var(--paper)!important; color:var(--ink)!important; }
.cp-cart-body td.actions button[name="update_cart"]:hover { background:var(--ink)!important; color:var(--paper)!important; }
.cp-cart-body td.actions button[name="update_cart"][disabled] { opacity:.4; }
/* totals */
.cp-cart-body .cart-collaterals { padding:24px; display:flex; justify-content:flex-end; }
.cp-cart-body .cart_totals { width:100%; max-width:440px; border:var(--rule) solid var(--line); background:var(--paper); }
.cp-cart-body .cart_totals h2 {
font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
padding:14px 18px; border-bottom:1.5px solid var(--ink); margin:0;
}
.cp-cart-body .cart_totals table { width:100%; border-collapse:collapse; }
.cp-cart-body .cart_totals th, .cp-cart-body .cart_totals td { padding:12px 18px; border-bottom:1px dashed #00000030; text-align:left; font-size:13px; }
.cp-cart-body .cart_totals th { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:400; width:42%; }
.cp-cart-body .cart_totals .order-total td { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.cp-cart-body .wc-proceed-to-checkout { padding:18px; }
.cp-cart-body .wc-proceed-to-checkout a.checkout-button {
display:block!important; width:100%; text-align:center; height:auto!important; line-height:1.2!important;
padding:18px!important; font-size:13px!important; background:var(--red)!important; border-color:var(--red)!important;
}
.cp-cart-body .wc-proceed-to-checkout a.checkout-button:hover { background:var(--ink)!important; border-color:var(--ink)!important; }
@media (max-width:1100px){
.cp-cart-body table.cart thead { display:none; }
.cp-cart-body table.cart tbody td { display:block; border-bottom:0; padding:8px 18px; }
.cp-cart-body table.cart tbody tr.cart_item { display:block; border-bottom:1.5px solid var(--ink); padding:10px 0; }
.cp-cart-body td.actions { display:block; }
.cp-cart-body .cart-collaterals { justify-content:stretch; }
.cp-cart-body .cart_totals { max-width:none; }
}
/* ============================================================
CP PDP — brutalist styling for WooCommerce variable form
============================================================ */
.pdp-wc-form { margin-top:4px; }
.pdp-wc-form table.variations { width:100%; border-collapse:collapse; margin:0 0 16px; }
.pdp-wc-form table.variations th, .pdp-wc-form table.variations td { padding:8px 0; vertical-align:middle; text-align:left; }
.pdp-wc-form table.variations th.label label {
font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400;
}
.pdp-wc-form .variations select {
width:100%; height:46px; border:1.5px solid var(--ink); background:var(--white); padding:0 14px;
font-family:var(--font-sans); font-size:14px; font-weight:600; border-radius:0; appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center;
}
.pdp-wc-form .reset_variations {
font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:inline-block; margin-top:6px;
}
.pdp-wc-form .reset_variations:hover { color:var(--red); }
.pdp-wc-form .woocommerce-variation-price { margin:10px 0; }
.pdp-wc-form .woocommerce-variation-price .price { font-size:24px; font-weight:800; letter-spacing:-.03em; }
.pdp-wc-form .woocommerce-variation-availability { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.pdp-wc-form .woocommerce-variation-add-to-cart { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.pdp-wc-form .quantity { display:inline-flex; align-items:center; border:1.5px solid var(--ink); height:48px; }
.pdp-wc-form .quantity input.qty {
width:56px; height:46px; border:0; text-align:center; font-family:var(--font-mono); font-size:15px; background:var(--paper); -moz-appearance:textfield;
}
.pdp-wc-form .quantity input.qty::-webkit-outer-spin-button,
.pdp-wc-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pdp-wc-form button.single_add_to_cart_button {
flex:1; min-width:160px; height:48px; background:var(--ink); color:var(--paper);
font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
border:1.5px solid var(--ink); border-radius:0; cursor:pointer; transition:120ms ease;
}
.pdp-wc-form button.single_add_to_cart_button:hover { background:var(--red); border-color:var(--red); }
.pdp-wc-form .single_variation_wrap { display:grid; gap:6px; }
/* ============================================================
CP CHECKOUT — brutalist styling over WooCommerce checkout
============================================================ */
.cp-checkout-body { padding:0 24px 48px; }
.cp-checkout-body .woocommerce { padding:0; }
.cp-checkout-body .woocommerce-notices-wrapper:empty { display:none; }
.cp-checkout-body .woocommerce-notices-wrapper { padding:14px 0 0; }
/* top toggle bars (login / coupon) */
.cp-checkout-body .woocommerce-form-login-toggle,
.cp-checkout-body .woocommerce-form-coupon-toggle { margin:18px 0 0; }
.cp-checkout-body .woocommerce-info, .cp-checkout-body .woocommerce-error, .cp-checkout-body .woocommerce-message {
border:1.5px solid var(--ink); background:var(--paper); padding:14px 18px; margin:0 0 14px;
font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; border-radius:0; list-style:none;
}
.cp-checkout-body .woocommerce-info::before, .cp-checkout-body .woocommerce-error::before, .cp-checkout-body .woocommerce-message::before { display:none; }
.cp-checkout-body .woocommerce-info a, .cp-checkout-body .showcoupon { color:var(--red); font-weight:700; text-decoration:underline; }
.cp-checkout-body form.checkout_coupon, .cp-checkout-body form.login {
border:1.5px solid var(--ink); background:var(--paper); padding:20px; margin:14px 0;
}
/* main two-column layout */
.cp-checkout-body form.checkout.woocommerce-checkout {
display:grid; grid-template-columns:1.45fr 1fr; gap:0; margin-top:24px;
border:var(--rule) solid var(--line); background:var(--white);
}
.cp-checkout-body #customer_details { grid-column:1; grid-row:1 / span 2; border-right:1.5px solid var(--ink); padding:24px; }
.cp-checkout-body #order_review_heading { grid-column:2; grid-row:1; margin:0; }
.cp-checkout-body #order_review { grid-column:2; grid-row:2; padding:0 24px 24px; }
.cp-checkout-body #customer_details .col2-set { display:block; }
.cp-checkout-body #customer_details .col-1, .cp-checkout-body #customer_details .col-2 { width:100%; max-width:none; float:none; }
.cp-checkout-body #customer_details .col-2 { margin-top:8px; }
/* section headings */
.cp-checkout-body h3, .cp-checkout-body #order_review_heading {
font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
font-weight:700; padding:0 0 14px; margin:0 0 18px; border-bottom:1.5px solid var(--ink);
}
.cp-checkout-body #order_review_heading { padding:24px 24px 14px; margin:0 24px 0; }
/* form fields */
.cp-checkout-body .woocommerce-billing-fields__field-wrapper,
.cp-checkout-body .woocommerce-shipping-fields__field-wrapper,
.cp-checkout-body .woocommerce-additional-fields__field-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.cp-checkout-body .form-row { margin:0; padding:0; display:flex; flex-direction:column; }
.cp-checkout-body .form-row-wide, .cp-checkout-body .notes { grid-column:1 / -1; }
.cp-checkout-body .form-row-first { grid-column:1; }
.cp-checkout-body .form-row-last { grid-column:2; }
.cp-checkout-body .form-row label {
font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
margin-bottom:6px; font-weight:400;
}
.cp-checkout-body .form-row label .required { color:var(--red); border:0; text-decoration:none; }
.cp-checkout-body .input-text, .cp-checkout-body textarea, .cp-checkout-body select {
width:100%; height:46px; border:1.5px solid var(--ink); background:var(--paper); border-radius:0;
padding:0 14px; font-family:var(--font-sans); font-size:14px; color:var(--ink); box-shadow:none;
}
.cp-checkout-body textarea { height:auto; min-height:90px; padding:12px 14px; line-height:1.5; resize:vertical; }
.cp-checkout-body .input-text:focus, .cp-checkout-body textarea:focus, .cp-checkout-body select:focus { outline:2px solid var(--red); outline-offset:-1px; }
.cp-checkout-body select {
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center;
}
.cp-checkout-body .woocommerce-input-wrapper { width:100%; }
/* select2 (country/state enhanced selects) */
.cp-checkout-body .select2-container .select2-selection--single {
height:46px; border:1.5px solid var(--ink); border-radius:0; background:var(--paper);
}
.cp-checkout-body .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height:44px; padding:0 14px; color:var(--ink); font-family:var(--font-sans); font-size:14px;
}
.cp-checkout-body .select2-container--default .select2-selection--single .select2-selection__arrow { height:44px; }
/* order review table */
.cp-checkout-body #order_review .shop_table { width:100%; border-collapse:collapse; border:1.5px solid var(--ink); background:var(--paper); }
.cp-checkout-body #order_review .shop_table th, .cp-checkout-body #order_review .shop_table td {
padding:12px 14px; border-bottom:1px dashed #00000030; text-align:left; font-size:13px; vertical-align:top;
}
.cp-checkout-body #order_review .shop_table thead th {
font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
border-bottom:1.5px solid var(--ink); font-weight:400;
}
.cp-checkout-body #order_review .shop_table .product-name { font-weight:700; letter-spacing:-.01em; }
.cp-checkout-body #order_review .shop_table .product-total, .cp-checkout-body #order_review .shop_table .cart-subtotal td,
.cp-checkout-body #order_review .shop_table amount { font-family:var(--font-mono); }
.cp-checkout-body #order_review .shop_table tfoot th {
font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:400;
}
.cp-checkout-body #order_review .shop_table tfoot .order-total th, .cp-checkout-body #order_review .shop_table tfoot .order-total td { padding-top:16px; }
.cp-checkout-body #order_review .shop_table tfoot .order-total .amount { font-size:22px; font-weight:800; letter-spacing:-.02em; font-family:var(--font-sans); }
/* payment box */
.cp-checkout-body #payment { background:var(--paper); border:1.5px solid var(--ink); border-top:0; padding:0; }
.cp-checkout-body #payment ul.payment_methods { list-style:none; margin:0; padding:0; border-bottom:1.5px solid var(--ink); }
.cp-checkout-body #payment ul.payment_methods li { padding:14px 18px; border-bottom:1px dashed #00000030; }
.cp-checkout-body #payment ul.payment_methods li:last-child { border-bottom:0; }
.cp-checkout-body #payment ul.payment_methods li label {
font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--ink); display:inline; cursor:pointer;
}
.cp-checkout-body #payment ul.payment_methods li input[type=radio] { accent-color:var(--red); margin-right:8px; }
.cp-checkout-body #payment .payment_box {
background:var(--white)!important; border:1px solid var(--ink); margin:10px 0 0; padding:12px 14px;
font-family:var(--font-mono); font-size:11.5px; color:var(--muted); line-height:1.6;
}
.cp-checkout-body #payment .payment_box::before { display:none!important; }
.cp-checkout-body .woocommerce-terms-and-conditions-wrapper { padding:14px 18px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.cp-checkout-body .woocommerce-terms-and-conditions-wrapper a { color:var(--red); text-decoration:underline; }
.cp-checkout-body #payment .place-order { padding:18px; }
.cp-checkout-body #payment #place_order, .cp-checkout-body button#place_order {
display:flex; align-items:center; justify-content:center;
width:100%; min-height:56px; height:auto; line-height:1.2; padding:16px 18px!important;
font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
background:var(--red); color:#fff; border:1.5px solid var(--red); border-radius:0; cursor:pointer; transition:120ms ease;
text-align:center; white-space:normal;
}
.cp-checkout-body #payment #place_order:hover, .cp-checkout-body button#place_order:hover { background:var(--ink); border-color:var(--ink); }
/* generic buttons inside checkout (coupon/login apply) */
.cp-checkout-body .button, .cp-checkout-body button:not(#place_order) {
font-family:var(--font-mono)!important; font-size:11px!important; text-transform:uppercase!important; letter-spacing:.08em!important;
background:var(--ink)!important; color:var(--paper)!important; border:1.5px solid var(--ink)!important; border-radius:0!important;
padding:0 18px!important; height:44px!important; line-height:44px!important; cursor:pointer; font-weight:700!important;
}
.cp-checkout-body .button:hover, .cp-checkout-body button:not(#place_order):hover { background:var(--red)!important; border-color:var(--red)!important; color:#fff!important; }
/* order-received / thank-you page */
.cp-checkout-body .woocommerce-order { border:var(--rule) solid var(--line); background:var(--white); padding:28px; margin-top:24px; }
.cp-checkout-body .woocommerce-thankyou-order-received { font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:18px; }
.cp-checkout-body ul.woocommerce-order-overview {
list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; border:1.5px solid var(--ink);
}
.cp-checkout-body ul.woocommerce-order-overview li {
padding:14px 16px; border-right:1.5px solid var(--ink); font-family:var(--font-mono); font-size:10px;
letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.cp-checkout-body ul.woocommerce-order-overview li:last-child { border-right:0; }
.cp-checkout-body ul.woocommerce-order-overview li strong { display:block; margin-top:6px; font-family:var(--font-sans); font-size:15px; color:var(--ink); letter-spacing:-.01em; text-transform:none; }
@media (max-width:980px){
.cp-checkout-body { padding:0 16px 40px; }
.cp-checkout-body form.checkout.woocommerce-checkout { grid-template-columns:1fr; }
.cp-checkout-body #customer_details { grid-column:1; grid-row:auto; border-right:0; border-bottom:1.5px solid var(--ink); }
.cp-checkout-body #order_review_heading { grid-column:1; grid-row:auto; padding:24px 24px 14px; }
.cp-checkout-body #order_review { grid-column:1; grid-row:auto; }
.cp-checkout-body .woocommerce-billing-fields__field-wrapper,
.cp-checkout-body .woocommerce-shipping-fields__field-wrapper { grid-template-columns:1fr; }
.cp-checkout-body .form-row-first, .cp-checkout-body .form-row-last { grid-column:1; }
}
/* ============================================================
CP CONTENT PAGES — brutalist wrapper (contact, about, legal)
============================================================ */
.cp-page-head { padding:36px 24px 28px; border-bottom:var(--rule) solid var(--line); }
.cp-page-head .eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cp-page-head h1 { font-size:clamp(34px,5vw,64px); letter-spacing:-.03em; line-height:.95; margin-top:10px; }
/* prose / generic content */
.cp-prose { padding:32px 24px 48px; max-width:820px; font-size:15.5px; line-height:1.7; color:var(--ink); }
.cp-prose > *:first-child { margin-top:0; }
.cp-prose h2 { font-size:24px; font-weight:800; letter-spacing:-.02em; margin:34px 0 12px; }
.cp-prose h3 { font-size:18px; font-weight:700; letter-spacing:-.01em; margin:26px 0 10px; }
.cp-prose h4 { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:22px 0 8px; }
.cp-prose p { margin:0 0 16px; }
.cp-prose a { color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.cp-prose ul, .cp-prose ol { margin:0 0 16px; padding-left:22px; }
.cp-prose li { margin:0 0 8px; }
.cp-prose strong { font-weight:700; }
.cp-prose hr { border:0; border-top:1.5px solid var(--ink); margin:28px 0; }
.cp-prose img { max-width:100%; height:auto; border:1.5px solid var(--ink); }
.cp-prose blockquote { border-left:3px solid var(--red); margin:0 0 16px; padding:6px 0 6px 18px; color:var(--muted); font-style:italic; }
.cp-prose table { width:100%; border-collapse:collapse; margin:0 0 18px; }
.cp-prose th, .cp-prose td { border:1.5px solid var(--ink); padding:10px 12px; text-align:left; font-size:14px; }
.cp-prose th { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--paper); }
/* contact: info aside + form */
.cp-contact-grid { display:grid; grid-template-columns:340px 1fr; gap:0; border-bottom:var(--rule) solid var(--line); }
.cp-contact-info { border-right:1.5px solid var(--ink); padding:32px 24px; display:flex; flex-direction:column; gap:26px; background:var(--paper); }
.ci-block { display:flex; flex-direction:column; gap:6px; }
.ci-k { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ci-v { font-size:15px; font-weight:600; line-height:1.5; color:var(--ink); }
.ci-link { text-decoration:none; border-bottom:1.5px solid var(--ink); align-self:flex-start; }
.ci-link:hover { color:var(--red); border-color:var(--red); }
.cp-contact-form { padding:32px 24px 40px; max-width:none; }
/* WPForms — brutalist */
.cp-content-page .wpforms-container { margin:0; max-width:640px; }
.cp-content-page .wpforms-container .wpforms-form .wpforms-field { padding:0 0 16px; }
.cp-content-page .wpforms-field-label {
font-family:var(--font-mono)!important; font-size:10px!important; letter-spacing:.1em!important; text-transform:uppercase!important;
color:var(--muted)!important; font-weight:400!important; margin-bottom:6px!important;
}
.cp-content-page .wpforms-required-label { color:var(--red)!important; }
.cp-content-page .wpforms-field-row { display:flex; gap:14px; flex-wrap:wrap; }
.cp-content-page .wpforms-field-row .wpforms-field-row-block { flex:1; min-width:160px; }
.cp-content-page .wpforms-field input[type=text],
.cp-content-page .wpforms-field input[type=email],
.cp-content-page .wpforms-field input[type=tel],
.cp-content-page .wpforms-field input[type=url],
.cp-content-page .wpforms-field input[type=number],
.cp-content-page .wpforms-field select,
.cp-content-page .wpforms-field textarea {
width:100%; border:1.5px solid var(--ink)!important; border-radius:0!important; background:var(--paper)!important;
padding:0 14px!important; height:46px; font-family:var(--font-sans)!important; font-size:15px!important; color:var(--ink)!important; box-shadow:none!important;
}
.cp-content-page .wpforms-field textarea { height:auto; min-height:130px; padding:12px 14px!important; line-height:1.6; resize:vertical; }
.cp-content-page .wpforms-field input:focus, .cp-content-page .wpforms-field textarea:focus, .cp-content-page .wpforms-field select:focus { outline:2px solid var(--red); outline-offset:-1px; }
.cp-content-page .wpforms-submit-container { margin-top:6px; }
.cp-content-page .wpforms-container button[type=submit], .cp-content-page .wpforms-submit {
background:var(--red)!important; color:#fff!important; border:1.5px solid var(--red)!important; border-radius:0!important;
font-family:var(--font-mono)!important; font-size:12px!important; text-transform:uppercase!important; letter-spacing:.1em!important; font-weight:700!important;
padding:0 28px!important; height:50px!important; cursor:pointer; transition:120ms ease;
}
.cp-content-page .wpforms-container button[type=submit]:hover, .cp-content-page .wpforms-submit:hover { background:var(--ink)!important; border-color:var(--ink)!important; }
.cp-content-page .wpforms-confirmation-container-full {
border:1.5px solid var(--ink)!important; background:var(--paper)!important; border-radius:0!important; padding:18px!important;
font-family:var(--font-mono); font-size:13px;
}
@media (max-width:860px){
.cp-contact-grid { grid-template-columns:1fr; }
.cp-contact-info { border-right:0; border-bottom:1.5px solid var(--ink); }
.cp-page-head { padding:24px 16px 20px; }
.cp-prose, .cp-contact-form { padding:24px 16px 36px; }
}
/* ============================================================
CP BLOG — index grid + single post (brutalist)
============================================================ */
.cp-page-sub { font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-top:12px; max-width:520px; line-height:1.6; }
/* blog index grid */
.cp-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:var(--rule) solid var(--line); }
.cp-post-card { display:flex; flex-direction:column; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); background:var(--white); text-decoration:none; color:var(--ink); transition:120ms ease; }
.cp-blog-grid .cp-post-card:nth-child(3n) { border-right:0; }
.cp-post-card:hover { background:var(--paper); }
.cp-post-card .thumb { aspect-ratio:16/10; border-bottom:1.5px solid var(--ink); background:#fff; display:grid; place-items:center; overflow:hidden; }
.cp-post-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cp-post-card .thumb-ph { font-size:20px; font-weight:800; letter-spacing:-.02em; opacity:.18; }
.cp-post-card .body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cp-post-card .cat-date { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cp-post-card h3 { font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.22; }
.cp-post-card p { font-size:13.5px; color:var(--muted); line-height:1.55; flex:1; }
.cp-post-card .read { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink); margin-top:4px; }
.cp-post-card:hover .read { color:var(--red); }
/* blog pagination */
.cp-blog-pagination { padding:24px; display:flex; justify-content:center; }
.cp-blog-pagination ul { list-style:none; display:flex; gap:0; margin:0; padding:0; }
.cp-blog-pagination li a, .cp-blog-pagination li span {
display:grid; place-items:center; min-width:44px; height:44px; padding:0 14px; border:1.5px solid var(--ink); border-left:0;
font-family:var(--font-mono); font-size:12px; color:var(--ink); text-decoration:none;
}
.cp-blog-pagination li:first-child a, .cp-blog-pagination li:first-child span { border-left:1.5px solid var(--ink); }
.cp-blog-pagination li a:hover { background:var(--ink); color:var(--paper); }
.cp-blog-pagination li span.current { background:var(--red); color:#fff; border-color:var(--red); font-weight:700; }
/* single post */
.cp-post { max-width:900px; margin:0 auto; }
.cp-post-head { padding:36px 24px 24px; border-bottom:var(--rule) solid var(--line); }
.cp-post-head .eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cp-post-head h1 { font-size:clamp(30px,4.4vw,52px); letter-spacing:-.03em; line-height:1.02; margin-top:12px; }
.cp-post-meta { display:flex; gap:10px; align-items:center; margin-top:16px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cp-post-meta .sep { opacity:.5; }
.cp-post-cover { border-bottom:var(--rule) solid var(--line); background:#fff; }
.cp-post-cover img { width:100%; height:auto; display:block; max-height:520px; object-fit:cover; }
.cp-post-body { max-width:760px; }
.cp-post-tags { padding:0 24px 8px; max-width:760px; display:flex; flex-wrap:wrap; gap:8px; }
.cp-post-tags a { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border:1.5px solid var(--ink); padding:4px 9px; text-decoration:none; }
.cp-post-tags a:hover { background:var(--ink); color:var(--paper); }
.cp-post-foot { padding:8px 24px 48px; border-top:1.5px solid var(--line); margin-top:8px; }
@media (max-width:860px){
.cp-blog-grid { grid-template-columns:1fr; }
.cp-post-card { border-right:0; }
.cp-post-head { padding:24px 16px 18px; }
}
/* ============================================================
CP MY ACCOUNT — brutalist over WooCommerce account
============================================================ */
.cp-account-body { padding:32px 24px 48px; }
.cp-account-body .woocommerce { padding:0; }
.cp-account-body .woocommerce-notices-wrapper:empty { display:none; }
.cp-account-body .woocommerce-notices-wrapper { padding:0 0 16px; }
.cp-account-body .woocommerce-message, .cp-account-body .woocommerce-info, .cp-account-body .woocommerce-error {
border:1.5px solid var(--ink); background:var(--paper); border-radius:0; padding:14px 18px; margin:0 0 14px;
font-family:var(--font-mono); font-size:12px; list-style:none;
}
.cp-account-body .woocommerce-message::before, .cp-account-body .woocommerce-info::before, .cp-account-body .woocommerce-error::before { display:none; }
.cp-account-body a { color:var(--red); }
/* logged-out: login + register columns */
.cp-account-body .u-columns { display:grid; grid-template-columns:1fr 1fr; gap:0; border:var(--rule) solid var(--line); }
.cp-account-body .u-column1 { border-right:1.5px solid var(--ink); }
.cp-account-body .col-1, .cp-account-body .col-2 { width:auto!important; float:none!important; padding:28px 24px; }
.cp-account-body h2 { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 20px; padding-bottom:12px; border-bottom:1.5px solid var(--ink); }
.cp-account-body form.login, .cp-account-body form.register, .cp-account-body form.woocommerce-form { margin:0; }
/* form fields */
.cp-account-body .woocommerce-form-row, .cp-account-body .form-row { display:flex; flex-direction:column; margin:0 0 16px; padding:0; }
.cp-account-body label { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.cp-account-body label.woocommerce-form-login__rememberme, .cp-account-body label.woocommerce-form__label-for-checkbox {
flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-family:var(--font-sans); font-size:13px; color:var(--ink);
}
.cp-account-body input[type=text], .cp-account-body input[type=email], .cp-account-body input[type=password],
.cp-account-body input[type=tel], .cp-account-body input.input-text {
width:100%; height:46px; border:1.5px solid var(--ink); background:var(--paper); border-radius:0;
padding:0 14px; font-family:var(--font-sans); font-size:14px; color:var(--ink); box-shadow:none;
}
.cp-account-body input:focus { outline:2px solid var(--red); outline-offset:-1px; }
.cp-account-body .woocommerce-form-login__rememberme input, .cp-account-body input[type=checkbox] { width:auto; height:auto; accent-color:var(--red); }
.cp-account-body em, .cp-account-body .woocommerce-password-hint { font-family:var(--font-mono); font-size:10px; color:var(--muted); font-style:normal; }
/* buttons */
.cp-account-body button, .cp-account-body .button, .cp-account-body .woocommerce-button, .cp-account-body input[type=submit] {
font-family:var(--font-mono)!important; font-size:11px!important; text-transform:uppercase!important; letter-spacing:.08em!important; font-weight:700!important;
background:var(--ink)!important; color:var(--paper)!important; border:1.5px solid var(--ink)!important; border-radius:0!important;
padding:0 22px!important; height:48px!important; line-height:48px!important; cursor:pointer; transition:120ms ease;
}
.cp-account-body button:hover, .cp-account-body .button:hover, .cp-account-body .woocommerce-button:hover, .cp-account-body input[type=submit]:hover {
background:var(--red)!important; border-color:var(--red)!important; color:#fff!important;
}
.cp-account-body .woocommerce-form-login__submit, .cp-account-body .woocommerce-form-register__submit { width:100%; margin-top:4px; }
.cp-account-body .lost_password { margin-top:14px; font-family:var(--font-mono); font-size:11px; }
.cp-account-body .lost_password a { text-decoration:underline; }
/* logged-in: dashboard layout */
.cp-account-body .woocommerce-MyAccount-navigation { width:100%; float:none; margin:0; }
.cp-account-body > .woocommerce > .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content,
.cp-account-body .woocommerce-MyAccount-content { width:auto; float:none; margin:0; }
.cp-account-body .woocommerce-account .woocommerce { display:grid; grid-template-columns:260px 1fr; gap:0; border:var(--rule) solid var(--line); }
.cp-account-body .woocommerce-MyAccount-navigation { border-right:1.5px solid var(--ink); background:var(--paper); }
.cp-account-body .woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; }
.cp-account-body .woocommerce-MyAccount-navigation li { border-bottom:1.5px solid var(--ink); }
.cp-account-body .woocommerce-MyAccount-navigation li:last-child { border-bottom:0; }
.cp-account-body .woocommerce-MyAccount-navigation li a {
display:block; padding:14px 18px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink)!important; text-decoration:none; transition:80ms ease;
}
.cp-account-body .woocommerce-MyAccount-navigation li a:hover { background:var(--ink); color:var(--paper)!important; }
.cp-account-body .woocommerce-MyAccount-navigation li.is-active a { background:var(--red); color:#fff!important; }
.cp-account-body .woocommerce-MyAccount-content { padding:28px 24px; }
.cp-account-body .woocommerce-MyAccount-content p { margin:0 0 14px; font-size:14.5px; line-height:1.6; }
.cp-account-body .woocommerce-MyAccount-content mark { background:var(--paper); color:var(--ink); font-weight:700; }
/* orders / tables inside account */
.cp-account-body table.shop_table, .cp-account-body table.woocommerce-orders-table, .cp-account-body table.account-orders-table {
width:100%; border-collapse:collapse; border:1.5px solid var(--ink); margin:0 0 18px;
}
.cp-account-body table.shop_table th { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 14px; border-bottom:1.5px solid var(--ink); background:var(--paper); }
.cp-account-body table.shop_table td { padding:12px 14px; border-bottom:1px dashed #00000030; font-size:13px; }
.cp-account-body .woocommerce-Address { border:1.5px solid var(--ink); padding:18px; background:var(--paper); }
.cp-account-body .woocommerce-Address address { font-style:normal; font-size:14px; line-height:1.6; }
.cp-account-body .addresses .u-columns { border:0; gap:18px; }
.cp-account-body .addresses .u-column1 { border-right:0; }
@media (max-width:860px){
.cp-account-body { padding:24px 16px 36px; }
.cp-account-body .u-columns { grid-template-columns:1fr; }
.cp-account-body .u-column1 { border-right:0; border-bottom:1.5px solid var(--ink); }
.cp-account-body .woocommerce-account .woocommerce { grid-template-columns:1fr; }
.cp-account-body .woocommerce-MyAccount-navigation { border-right:0; border-bottom:1.5px solid var(--ink); }
}
/* ===== payment + shipping icons inline no rodapé ===== */
.cp-footer .footer-pay-ship {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--muted);
}
.cp-footer .footer-pay-ship img {
height: 16px;
width: auto;
opacity: .7;
filter: grayscale(100%);
transition: opacity 120ms ease, filter 120ms ease;
vertical-align: middle;
}
.cp-footer .footer-pay-ship img:hover {
opacity: 1;
filter: grayscale(0%);
}
.cp-footer .footer-pay-ship .ps-sep {
color: var(--muted);
opacity: .5;
font-size: 12px;
}
@media (max-width: 720px) {
.cp-footer .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
.cp-footer .footer-pay-ship { flex-wrap: wrap; gap: 10px; }
.cp-footer .footer-pay-ship img { height: 14px; }
}