/*
Theme Name: CUSTOMENZ
Description: Modern black-and-white storefront for CUSTOMENZ — custom streetwear and campus merchandise. Presentation only: all business logic lives in the CUSTOMENZ Core plugin.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Author: CUSTOMENZ
Text Domain: customenz
*/

/* ---------- Tokens and base ---------- */
:root{--black:#080808;--white:#fff;--paper:#f7f7f5;--muted:#777;--line:#e8e8e6;--soft:#f0f0ee;--max:1280px;--display:"Manrope",sans-serif;--body:"DM Sans",sans-serif}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.1}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed!important;left:12px;top:12px;z-index:999;width:auto;height:auto;clip:auto;background:#fff;color:#080808;padding:12px 16px;font-weight:800}
.container{width:min(var(--max),calc(100% - 64px));margin-inline:auto}

/* ---------- Announcement and header ---------- */
.announcement{min-height:34px;padding:8px 14px;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;line-height:1.4}
.announcement a{text-decoration:underline;text-underline-offset:3px;margin-left:5px;white-space:nowrap}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.07)}
.admin-bar .header{top:32px}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-1.8px;white-space:nowrap}
.brand span{font-weight:400}
.brand img{max-height:44px;width:auto;display:block}
.navlinks ul{list-style:none;margin:0;padding:0}
.navlinks>ul{display:flex;align-items:center;gap:28px}
.navlinks li{position:relative}
.navlinks a{display:block;padding:12px 0;font-size:12px;font-weight:700;color:#111;white-space:nowrap;transition:opacity .2s}
.navlinks a:hover{opacity:.55}
.navlinks .menu-item-has-children>a:after{content:" ⌄"}
.navlinks .sub-menu{display:none;position:absolute;top:100%;left:-24px;width:260px;padding:12px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 55px #00000012;border-radius:12px}
.navlinks li:hover>.sub-menu,.navlinks li:focus-within>.sub-menu{display:block;animation:dropin .18s ease}
.navlinks .sub-menu a{padding:12px;border-radius:7px}
.navlinks .sub-menu a:hover{background:var(--paper);opacity:1}
.navright{display:flex;gap:9px;align-items:center}
.nav-action{border:1px solid var(--line);background:#fff;padding:11px 14px;border-radius:50px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav-action.dark{background:var(--black);color:#fff;border-color:var(--black)}
.hamb{display:none;border:1px solid var(--line);background:#fff;border-radius:50%;width:42px;height:42px;font-size:18px;line-height:1;color:#080808}

.mobile-drawer{position:fixed;inset:0;background:#fff;z-index:90;padding:24px;transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility .35s;overflow-y:auto}
.mobile-drawer.show{transform:translateX(0);visibility:visible}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer-close{border:0;background:none;font-size:30px;line-height:1;color:#080808;padding:6px 10px}
.drawer-links ul{list-style:none;margin:0;padding:0}
.drawer-links>ul{margin-top:36px}
.drawer-links>ul>li>a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font:700 22px var(--display);letter-spacing:-.03em}
.drawer-links .sub-menu{padding:6px 0 10px 16px;border-bottom:1px solid var(--line)}
.drawer-links .sub-menu a{display:block;padding:9px 0;font-size:14px;font-weight:500}

/* ---------- Buttons and shared type ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 22px;background:#fff;color:var(--black);border:1px solid #fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;transition:.25s;line-height:1.2}
.btn:hover{background:#dcdcdc;transform:translateY(-3px)}
.btn.ghost{background:transparent;color:#fff;border-color:#ffffff80}
.btn.ghost:hover{background:#fff;color:var(--black)}
.btn.black{background:var(--black);color:#fff;border-color:var(--black)}
.btn.black:hover{background:#333}
.kicker,.overline{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.overline{color:var(--muted)}
.section{padding:100px 0}
.section--tight{padding-top:20px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:35px}
.section-title{font-family:var(--display);font-size:clamp(35px,5vw,64px);line-height:.98;letter-spacing:-.075em;margin:13px 0 0;font-weight:800;text-transform:uppercase}
.section-copy{max-width:370px;color:var(--muted);font-size:13px;line-height:1.75;margin:0}
.text-link{display:inline-flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;border-bottom:1px solid #111;padding-bottom:6px}

/* ---------- Hero ---------- */
.hero{padding:32px 0 70px}
.hero-frame{position:relative;min-height:610px;overflow:hidden;background:#171717;color:#fff;border-radius:4px;display:flex;align-items:flex-end}
.hero-frame.no-photo{background:radial-gradient(120% 90% at 85% 10%,#3a3a3a 0,#171717 45%,#080808 100%)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.72;transform:scale(1.02);animation:heroZoom 14s ease-in-out infinite alternate}
.hero-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.18) 75%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.hero-frame.no-photo:after{display:none}
.hero-content{position:relative;z-index:1;padding:clamp(30px,7vw,88px);max-width:850px}
.hero h1{font-family:var(--display);font-size:clamp(54px,9vw,116px);letter-spacing:-.085em;line-height:.88;margin:25px 0 24px;font-weight:800;text-transform:uppercase}
.hero h1 span{display:block}
.hero p{max-width:470px;color:#e0e0e0;line-height:1.75;font-size:15px;margin:0}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-index{position:absolute;right:34px;bottom:30px;z-index:2;font-size:10px;letter-spacing:.16em;color:#ddd;text-transform:uppercase}

.trustbar{border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:19px 0}
.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust{display:flex;gap:12px;align-items:center;font-size:11px;font-weight:700;line-height:1.35}
.trust b{font-size:19px;font-weight:500}
.trust small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:3px}

/* ---------- Categories ---------- */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.category{position:relative;height:370px;overflow:hidden;background:#e4e4e2;display:block}
.category img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;filter:grayscale(100%)}
.category:hover img{transform:scale(1.07);filter:grayscale(0)}
.category:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0009)}
.category.no-photo{background:#171717}
.cat-info{position:absolute;z-index:1;bottom:22px;left:22px;right:22px;color:#fff;display:flex;justify-content:space-between;align-items:end}
.cat-info h3{font:700 25px var(--display);margin:0;letter-spacing:-1px}
.cat-info span{font-size:23px}

/* ---------- Product cards (home, campus) ---------- */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 25px}
.filterbar button{border:1px solid var(--line);background:#fff;color:#080808;border-radius:40px;padding:10px 16px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.filterbar button.active,.filterbar button:hover{background:var(--black);color:#fff;border-color:var(--black)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 15px}
.cz-card{min-width:0}
.cz-card[hidden]{display:none}
.cz-card__image{position:relative;display:block;aspect-ratio:4/5;background:var(--soft);overflow:hidden}
.cz-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .65s}
.cz-card:hover .cz-card__image img{transform:scale(1.045)}
.cz-card__label{position:absolute;z-index:1;top:13px;left:13px;background:#fff;padding:7px 10px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cz-card__details{display:flex;justify-content:space-between;gap:10px;margin-top:13px;font-size:12px;font-weight:700}
.cz-card__details .price del{color:#999;font-weight:500;margin-right:4px}
.cz-card__details .price ins{text-decoration:none}
.cz-card__sub{font-size:10px;color:#888;margin-top:5px}
.empty-state{border:1px dashed #ccc;padding:34px 22px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- Editorial, studio, campus, delivery, bulk ---------- */
.editorial{background:var(--black);color:#fff}
.editorial-grid{display:grid;grid-template-columns:1fr 1fr;min-height:570px}
.editorial-image{min-height:500px;overflow:hidden;background:#1f1f1f}
.editorial-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .6s,transform .8s;display:block}
.editorial:hover .editorial-image img{filter:grayscale(25%);transform:scale(1.025)}
.editorial-copy{padding:clamp(35px,7vw,90px);display:flex;flex-direction:column;justify-content:center}
.editorial-copy .overline{color:#aaa}
.editorial-copy h2{font:800 clamp(42px,6vw,76px)/.93 var(--display);letter-spacing:-.08em;margin:22px 0;text-transform:uppercase}
.editorial-copy p{color:#aaa;line-height:1.8;font-size:13px;max-width:420px;margin:0}
.editorial-copy .btn{align-self:flex-start;margin-top:28px}
.editorial.no-photo .editorial-grid{grid-template-columns:1fr;min-height:0}
.editorial.no-photo .editorial-image{display:none}

.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.split--even{grid-template-columns:1fr 1fr;gap:55px}
.split h2{font:800 clamp(42px,6vw,75px)/.94 var(--display);letter-spacing:-.08em;margin:18px 0;text-transform:uppercase}
.split p{color:var(--muted);line-height:1.8;font-size:13px;max-width:430px}
.split-image{position:relative;height:510px;background:#e4e4e2;overflow:hidden}
.split-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:.7s;display:block}
.split-image:hover img{filter:grayscale(0);transform:scale(1.04)}
.split-image.no-photo{background:repeating-linear-gradient(135deg,#ededeb 0 14px,#e4e4e2 14px 28px)}
.stamp{position:absolute;right:22px;bottom:22px;background:#fff;padding:18px 22px;font:800 11px var(--display);letter-spacing:.1em;text-transform:uppercase}
.stamp--left{right:auto;left:20px;bottom:20px;padding:12px 16px;font-size:10px}
.campus{background:#f5f5f3}
.campus-links{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}
.campus-links a{padding:15px;border:1px solid #ddd;font-size:11px;font-weight:700;display:flex;justify-content:space-between;gap:8px;transition:.2s}
.campus-links a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.fineprint{font-size:10px!important;margin-top:16px}

.delivery{background:var(--black);color:#fff;padding:78px 0}
.delivery-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.delivery h2{font:800 clamp(36px,5vw,60px)/.95 var(--display);letter-spacing:-.07em;margin:13px 0;text-transform:uppercase}
.delivery p{color:#aaa;max-width:520px;font-size:13px;line-height:1.8;margin:0}
.delivery .overline{color:#aaa}
.delivery .btn{flex-shrink:0}

.bulk-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start}
.bulk-grid h2{font:800 clamp(40px,5vw,66px)/.93 var(--display);letter-spacing:-.08em;margin:18px 0;text-transform:uppercase}
.bulk-grid p{font-size:13px;color:var(--muted);line-height:1.8}

/* ---------- Journal ---------- */
.journal{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:14px}
.journal--archive{grid-template-columns:repeat(3,1fr)}
.story{min-height:330px;position:relative;overflow:hidden;background:#1c1c1c;display:block}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:.6s}
.story:hover img{transform:scale(1.05);filter:grayscale(20%)}
.story:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#000a)}
.story-content{position:absolute;z-index:1;bottom:22px;left:22px;right:22px;color:#fff}
.story-content small{font-size:9px;letter-spacing:.16em;font-weight:800;text-transform:uppercase}
.story-content h3{font:700 23px/1.1 var(--display);letter-spacing:-1px;margin:10px 0}
.story-content .more{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Inner pages ---------- */
.page-head{padding:64px 0 34px;border-bottom:1px solid var(--line);margin-bottom:48px}
.page-head h1{font:800 clamp(38px,6vw,76px)/.95 var(--display);letter-spacing:-.075em;margin:12px 0 0;text-transform:uppercase;overflow-wrap:anywhere}
.page-head p{color:var(--muted);max-width:560px;font-size:14px;margin:16px 0 0}
.page-body{padding-bottom:100px}
.entry{max-width:760px}
.entry--wide{max-width:none}
.entry>*:first-child{margin-top:0}
.entry p,.entry li{font-size:16px;line-height:1.8;color:#222}
.entry h2{font-size:30px;margin:44px 0 14px}
.entry h3{font-size:22px;margin:34px 0 12px}
.entry a:not(.cz-btn):not(.btn):not(.button){text-decoration:underline;text-underline-offset:3px}
.entry img{display:block}
.entry blockquote{border-left:3px solid var(--black);margin:28px 0;padding:4px 0 4px 22px;font:600 20px/1.5 var(--display)}
.entry-meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.entry-thumb{margin:0 0 40px;background:var(--soft)}
.entry-thumb img{width:100%;display:block}
.pagination{margin-top:50px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{border:1px solid var(--line);padding:10px 15px;font-size:12px;font-weight:800}
.pagination .current{background:var(--black);color:#fff;border-color:var(--black)}

/* ---------- Campus directory ---------- */
.campus-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.campus-filter a{border:1px solid var(--line);border-radius:40px;padding:9px 15px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.campus-filter a.active,.campus-filter a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inst{border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:8px;transition:.2s;min-height:170px}
.inst:hover{background:var(--black);color:#fff;border-color:var(--black)}
.inst small{font-size:9px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;color:var(--muted)}
.inst:hover small,.inst:hover .inst__loc{color:#bbb}
.inst h3{font:700 22px/1.15 var(--display);margin:0;letter-spacing:-.04em}
.inst__loc{font-size:12px;color:var(--muted);margin-top:auto}
.collection{margin:0 0 70px}
.collection__head{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.collection__head h2{font:800 32px/1 var(--display);margin:8px 0 0;letter-spacing:-.05em}
.badge{display:inline-block;border:1px solid var(--black);padding:6px 10px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;max-width:100%}
.badge--official{background:var(--black);color:#fff}

/* ---------- Footer ---------- */
.footer{background:var(--black);color:#fff;padding:70px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}
.footer .brand{font-size:28px}
.footer p,.footer a{color:#999;font-size:11px;line-height:2}
.footer h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 12px;font-family:var(--body)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li a{display:block}
.footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #333;margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;color:#777;font-size:9px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Motion ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.visible{opacity:1;transform:none}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@keyframes dropin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* ---------- Tablet ---------- */
@media(max-width:1080px){
.navlinks>ul{gap:18px}
}
@media(max-width:950px){
.container{width:min(var(--max),calc(100% - 40px))}
.navlinks{display:none}
.hamb{display:block}
.category-grid,.cards{grid-template-columns:repeat(2,1fr)}
.split,.split--even,.bulk-grid{gap:30px}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.hero-frame{min-height:540px}
.inst-grid,.journal--archive{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:782px){.admin-bar .header{top:46px}}
@media(max-width:600px){.admin-bar .header{top:0}}

/* ---------- Mobile ---------- */
@media(max-width:680px){
.container{width:calc(100% - 30px)}
.announcement{font-size:8px;letter-spacing:.07em}
.nav{height:66px;gap:12px}
.nav-action.account{display:none}
.brand{font-size:22px}
.hero{padding:15px 0 45px}
.hero-frame{min-height:570px}
.hero-content{padding:28px 24px 54px}
.hero h1{font-size:clamp(46px,14.5vw,82px)}
.hero p{font-size:13px}
.hero-index{right:18px;bottom:18px}
.trustgrid{grid-template-columns:1fr 1fr;gap:17px}
.trust{font-size:10px}
.section{padding:68px 0}
.section-head{display:block}
.section-copy{margin-top:15px}
.category-grid{gap:8px}
.category{height:245px}
.cat-info{left:13px;right:13px;bottom:14px}
.cat-info h3{font-size:19px}
.cards{gap:20px 9px}
.cz-card__image{aspect-ratio:3/4}
.cz-card__details{font-size:11px;flex-direction:column;gap:3px}
.cz-card__sub{font-size:9px}
.editorial-grid{grid-template-columns:1fr}
.editorial-image{min-height:330px;height:330px}
.editorial-copy{padding:38px 25px 45px}
.split,.split--even{grid-template-columns:1fr}
.split-image{height:350px}
.campus-links{gap:7px}
.campus-links a{padding:12px;font-size:10px}
.delivery-inner{display:block}
.delivery .btn{margin-top:22px}
.bulk-grid{grid-template-columns:1fr}
.journal,.journal--archive{grid-template-columns:1fr}
.story{min-height:290px}
.footer-grid{grid-template-columns:1fr 1fr;gap:25px}
.footer-bottom{display:block;line-height:2.2}
.page-head{padding:40px 0 26px;margin-bottom:32px}
.page-body{padding-bottom:68px}
.inst-grid{grid-template-columns:1fr}
.inst{min-height:0}
}