/*
Theme Name: Drift In
Theme URI: https://driftin.welton.mx
Author: Welton & Sons
Description: Tema a la medida para Drift In · Welton & Sons SS 27. Catálogo con pedido a la medida por WhatsApp.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: driftin
*/
:root{
  --bg:#0B0B0B; --bg2:#141414; --fg:#F2EFEA; --mute:#9B978F; --line:#2A2A28;
  --red:#E10600; --red2:#FF2A1F; --studio:#E6E5E4; --ink:#0B0B0B;
  --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --ed:'Instrument Serif',Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{max-width:1320px;margin:0 auto}
.kick{font-family:var(--disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--red2)}
.h2{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(40px,6vw,76px);line-height:.92;letter-spacing:-.01em;margin:6px 0 0;text-wrap:balance}
.stripes{height:6px;width:120px;background:repeating-linear-gradient(90deg,var(--red) 0 18px,transparent 18px 26px);margin-top:18px;transform:skewX(-30deg)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px;padding:14px 22px;border:1.5px solid var(--fg);transition:background .2s,color .2s;line-height:1.2}
.btn:hover,.btn:focus-visible{background:var(--fg);color:var(--ink);outline:none}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover,.btn.red:focus-visible{background:var(--red2);border-color:var(--red2);color:#fff}
:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(11,11,11,.84);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;min-width:0}
.brand{font-family:var(--disp);font-weight:800;font-style:italic;font-size:26px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand b{color:var(--red2);font-weight:800}
.brand small{font-weight:500;font-style:normal;font-size:16px;letter-spacing:.14em;opacity:.8}
.nav{display:flex;gap:26px;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;white-space:nowrap}
.nav a{opacity:.85}.nav a:hover{opacity:1;color:var(--red2)}
.nav .cta{color:var(--red2)}
@media (max-width:760px){.nav a:not(.cta){display:none}.brand small{display:none}.brand{font-size:24px}.nav{font-size:13px}}
.admin-bar .top{top:32px}@media (max-width:782px){.admin-bar .top{top:46px}}

/* hero */
.hero{position:relative;min-height:min(92vh,900px);display:grid;align-items:end;overflow:hidden;background:#000}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% 12%;opacity:.92}
.hero img.bg.m{display:none;object-position:50% 0%}
@media (max-width:700px){.hero img.bg.d{display:none}.hero img.bg.m{display:block}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.92) 100%)}
.hero .in{position:relative;z-index:2;width:100%;padding-block:56px 48px}
.hero .logo{width:min(560px,78vw);filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.hero h1{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(34px,5.2vw,64px);line-height:.95;margin:22px 0 10px;max-width:14ch;text-wrap:balance}
.hero p{font-family:var(--ed);font-style:italic;font-size:clamp(20px,2.2vw,26px);margin:0 0 26px;max-width:40ch;color:#E8E3DA}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}
.hero .tag{position:absolute;top:22px;right:0;font-family:var(--disp);font-weight:700;letter-spacing:.16em;font-size:13px;text-transform:uppercase;writing-mode:vertical-rl;color:#fff;opacity:.9}

/* manifiesto */
.mani{padding-block:96px;border-top:1px solid var(--line)}
.mani .in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mani .txt p{font-family:var(--ed);font-size:clamp(26px,3vw,40px);line-height:1.2;margin:22px 0 0;text-wrap:balance}
.mani .txt p em{font-style:italic;color:var(--red2)}
.mani .txt small{display:block;margin-top:26px;color:var(--mute);font-size:14px}
.mani .pic{aspect-ratio:4/5;max-width:100%;overflow:hidden;transform:skewX(-4deg);border:1px solid var(--line)}
.mani .pic img{width:100%;height:100%;object-fit:cover;transform:skewX(4deg) scale(1.1)}
@media (max-width:860px){.mani .in{grid-template-columns:1fr}.mani .pic{max-width:420px}}

/* lookbook strip */
.strip{padding-block:0 96px}
.strip .head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.rail figure{flex:0 0 auto;width:min(72vw,360px);aspect-ratio:3/4;margin:0;scroll-snap-align:start;background:var(--bg2)}
.rail img{width:100%;height:100%;object-fit:cover}

/* catálogo */
.cat{padding-block:0 96px}
.cat.page{padding-top:56px}
.cat .head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:28px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters a,.filters button{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:9px 14px;border:1px solid var(--line);color:var(--mute);display:inline-block}
.filters [aria-pressed="true"],.filters .on{border-color:var(--fg);color:var(--fg)}
.filters a:hover,.filters button:hover{color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 12px}
.grid>*{min-width:0}
@media (max-width:1240px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}}
.card{text-align:left;display:block;width:100%;min-width:0;padding:0}
.card .ph{aspect-ratio:4/5;background:var(--studio);overflow:hidden;position:relative;max-width:100%}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card .ph img.alt{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.card:hover .ph img.alt{opacity:1}
.card:hover .ph img.main{transform:scale(1.03)}
.card .ph .lk{position:absolute;left:8px;top:8px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.65);padding:3px 7px}
.card .meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 2px 0;align-items:baseline}
.card .nm{overflow-wrap:anywhere;font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:22px;line-height:1;letter-spacing:.01em}
.card .pr{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.card .pr .amount{color:var(--fg)}
.card .cl{grid-column:1/-1;color:var(--mute);font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.card .cl span:last-child{font-family:var(--disp);letter-spacing:.1em;font-size:12px}

/* cómo funciona */
.how{padding-block:0 96px}
.how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.how .st{border:1px solid var(--line);padding:26px 22px 28px;background:var(--bg2);position:relative}
.how .st i{font-family:var(--disp);font-weight:800;font-style:italic;font-size:54px;line-height:1;color:var(--red2);display:block;margin-bottom:14px}
.how .st h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:22px;margin:0 0 8px}
.how .st p{margin:0;color:#CFCAC1;font-size:15px}
@media (max-width:760px){.how .steps{grid-template-columns:1fr}}

/* archivo welton */
.arch{padding-block:0 96px}
.arch .in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.arch .pics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arch .pics div{aspect-ratio:3/4;max-width:100%;overflow:hidden;background:var(--bg2)}
.arch .pics div:last-child{transform:translateY(40px)}
.arch .pics img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.arch p{font-size:17px;color:#D8D3CA;max-width:52ch}
.arch .cred{font-family:var(--ed);font-style:italic;font-size:24px;margin-top:18px}
.arch .cred a{border-bottom:1px solid var(--red2)}
@media (max-width:860px){.arch .in{grid-template-columns:1fr}.arch .pics div:last-child{transform:none}}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:48px 40px;color:var(--mute);font-size:14px}
.foot .in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
.foot h4{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--fg);margin:0 0 10px}
.foot .num{font-family:var(--disp);font-size:28px;font-weight:800;color:var(--fg);letter-spacing:.02em;user-select:all}
.foot .cp{font-family:var(--disp);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--red2);margin-left:10px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot a:hover{color:var(--fg)}
.foot .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px}
@media (max-width:760px){.foot .in{grid-template-columns:1fr}}

/* ficha de producto */
.prod{padding-block:40px 96px}
.prod .crumbs{font-family:var(--disp);letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--mute);margin-bottom:22px}
.prod .crumbs a:hover{color:var(--fg)}
.prod .in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.prod .gal{background:var(--studio);position:relative}
.prod .gal .main{width:100%;aspect-ratio:4/5;object-fit:cover;max-width:100%}
.prod .thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.prod .thumbs button{width:64px;height:80px;border:2px solid transparent;overflow:hidden;background:var(--studio);padding:0}
.prod .thumbs button[aria-pressed="true"]{border-color:var(--red)}
.prod .thumbs img{width:100%;height:100%;object-fit:cover}
.prod .info{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:84px}
.prod .info h1{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(40px,4.6vw,64px);line-height:.95;margin:0}
.prod .row{display:flex;gap:18px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.prod .row b{color:var(--fg);font-weight:600}
.prod .price{font-family:var(--disp);font-weight:700;font-size:26px}
.prod .desc{color:#D8D3CA;font-size:16px}.prod .desc p{margin:0 0 10px}
.prod .fine{color:var(--mute);font-size:12.5px;margin:0}
.prod .ws{display:grid;gap:8px;margin-top:8px}
.prod .ws .btn{justify-content:center}
.prod .more{margin-top:72px}
@media (max-width:860px){.prod .in{grid-template-columns:1fr}.prod .info{position:static}}

/* páginas de texto (legales) */
.page-txt{padding-block:56px 96px}
.page-txt .in{max-width:760px}
.page-txt h1{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(36px,5vw,60px);line-height:.95;margin:6px 0 28px}
.page-txt h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:22px;margin:32px 0 8px}
.page-txt p,.page-txt li{color:#D8D3CA;font-size:16px}
.page-txt a{border-bottom:1px solid var(--red2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}