/*
Theme Name: SKY — SkyHook One
Theme URI: https://example.com/sky
Author: SKY Athletics
Author URI: https://example.com
Description: Single-product landing theme for the SKY SkyHook One basketball shoe. Premium editorial layout with colorway switching, US size selector, sticky buy bar and Customizer-controlled price and drop banner.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sky
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, full-width-template, e-commerce
*/

/* ---------- tokens ----------
   ink        #0A0A0D
   paper      #F6F5F2
   violet     #5B3AD9   (interactive accent)
   gold       #D9B34A   (drop / urgency accent)
   gold ink   #8A6A14   (gold on light ground)
   body grey  #4E4C57
   mute grey  #7A7884
--------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0A0A0D;color:#111116;font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:#5B3AD9;text-decoration:none}
a:hover{color:#8A6A14}
button{font-family:inherit;cursor:pointer;color:inherit}
h1,h2,h3,p{margin:0}
summary::-webkit-details-marker{display:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.sky-skip:focus{position:fixed;left:12px;top:12px;z-index:99;padding:10px 16px;background:#0A0A0D;color:#fff}

.sky-display{font-family:Outfit,'Instrument Sans','Helvetica Neue',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em}
.sky-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.sky-eyebrow .rule{display:block;width:24px;height:1px;background:currentColor;flex:none}
.sky-wrap{max-width:100%;overflow-x:hidden;background:#F6F5F2}

/* ---------- drop banner ---------- */
.sky-banner{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 20px;background:#0A0A0D;color:#D9B34A;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.sky-banner i{width:5px;height:5px;border-radius:50%;background:#D9B34A;flex:none}

/* ---------- header ---------- */
.sky-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px clamp(18px,4vw,44px);background:rgba(246,245,242,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(10,10,13,.1)}
.sky-logo{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:800;font-size:22px;letter-spacing:.14em;line-height:1;color:#0A0A0D}
.sky-logo img{max-height:28px;width:auto}
.sky-nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sky-nav ul{display:flex;gap:clamp(14px,2.4vw,30px);margin:0;padding:0;list-style:none}
.sky-nav a{color:#56545F}
.sky-nav a:hover{color:#0A0A0D}
.sky-buy-link{display:flex;align-items:center;gap:12px;height:40px;padding:0 20px;background:#0A0A0D;color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sky-buy-link:hover{background:#5B3AD9;color:#fff}
.sky-buy-link span{color:#D9B34A}
@media (max-width:640px){.sky-nav{display:none}}

/* ---------- hero ---------- */
.sky-hero{position:relative;background:#0A0A0D}
.sky-hero>img{width:100%;height:clamp(420px,72vh,760px);object-fit:cover;object-position:32% 50%}
.sky-hero .scrim-x{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.88) 0%,rgba(10,10,13,.74) 46%,rgba(10,10,13,.2) 68%,rgba(10,10,13,.6) 100%)}
.sky-hero .scrim-y{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,13,.6) 0%,rgba(10,10,13,0) 55%)}
.sky-hero .inner{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(24px,4.5vw,64px)}
.sky-hero .row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;width:100%}
.sky-hero .copy{min-width:0;max-width:640px}
.sky-hero .sky-eyebrow{color:#D9B34A}
.sky-hero h1{font-size:clamp(46px,7.6vw,118px);line-height:.86;color:#fff}
.sky-hero .sub{margin-top:18px;max-width:40ch;font-size:16px;line-height:1.65;color:#D6D4DE;text-wrap:pretty}
.sky-hero .aside{display:flex;flex-direction:column;gap:14px;min-width:230px}
.sky-hero .price{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:700;font-size:34px;color:#fff;line-height:1}
.sky-hero .fine{font-size:12.5px;line-height:1.6;color:#9E9CAB}
.sky-cta-light{display:flex;align-items:center;justify-content:space-between;gap:24px;height:58px;padding:0 24px;background:#F6F5F2;color:#0A0A0D;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sky-cta-light:hover{background:#D9B34A;color:#0A0A0D}

/* ---------- spec strip ---------- */
.sky-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:#0A0A0D;color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.sky-strip div{padding:22px clamp(18px,3vw,36px);border-right:1px solid rgba(255,255,255,.1)}
.sky-strip div:last-child{border-right:0}
.sky-strip b{display:block;font-family:Outfit,'Instrument Sans',sans-serif;font-weight:700;font-size:26px;line-height:1}
.sky-strip b span{font-size:13px;color:#9E9CAB}
.sky-strip em{display:block;margin-top:4px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9E9CAB}

/* ---------- build ---------- */
.sky-build{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));background:#F6F5F2}
.sky-build .shot{min-height:clamp(320px,40vw,620px);background:#E7E6E2}
.sky-build .shot img{width:100%;height:100%;min-height:clamp(320px,40vw,620px);object-fit:cover}
.sky-build .body{padding:clamp(34px,5vw,84px);display:flex;flex-direction:column;justify-content:center;gap:34px;min-width:0}
.sky-build .sky-eyebrow{color:#8A6A14}
.sky-build h2{margin-top:12px;font-size:clamp(30px,3.6vw,54px);line-height:.98;letter-spacing:-.015em;max-width:16ch}
.sky-rows{display:flex;flex-direction:column}
.sky-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid rgba(10,10,13,.13)}
.sky-row:last-child{border-bottom:1px solid rgba(10,10,13,.13)}
.sky-row .num{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:#5B3AD9}
.sky-row h3{margin-bottom:7px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.sky-row p{font-size:15px;line-height:1.7;color:#4E4C57;max-width:46ch}

/* ---------- lifestyle ---------- */
.sky-life{position:relative;background:#0A0A0D}
.sky-life>img{width:100%;height:clamp(400px,62vw,720px);object-fit:cover;object-position:50% 66%;opacity:.88}
.sky-life .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,13,.94) 0%,rgba(10,10,13,.86) 34%,rgba(10,10,13,.26) 64%,rgba(10,10,13,.1) 100%)}
.sky-life .inner{position:absolute;left:0;right:0;top:0;padding:clamp(26px,5vw,72px);max-width:900px}
.sky-life .sky-eyebrow{color:#D9B34A;margin-bottom:14px}
.sky-life .line{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(26px,3.6vw,54px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.sky-life p.sub{margin-top:16px;max-width:46ch;font-size:15px;line-height:1.7;color:#E4E3EA}

/* ---------- colorways ---------- */
.sky-ways{padding:clamp(44px,6vw,100px) clamp(18px,4vw,64px);background:#F6F5F2}
.sky-ways .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:30px}
.sky-ways .sky-eyebrow{color:#8A6A14}
.sky-ways h2{margin-top:12px;font-size:clamp(30px,3.6vw,54px);line-height:.98;letter-spacing:-.015em}
.sky-ways .note{font-size:14px;color:#56545F;max-width:34ch;text-wrap:pretty}
.sky-ways .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.sky-way{display:block;text-align:left;padding:0;background:#fff;border:1px solid rgba(10,10,13,.1);overflow:hidden;transition:border-color .2s}
.sky-way:hover{border-color:#0A0A0D}
.sky-way[aria-pressed="true"]{border-color:#0A0A0D}
.sky-way img{width:100%;aspect-ratio:1/1;object-fit:cover}
.sky-way .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 18px;border-top:1px solid rgba(10,10,13,.08)}
.sky-way .name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.sky-way .dot{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,13,.14);flex:none}

/* ---------- traction ---------- */
.sky-trac{position:relative;background:#0A0A0D}
.sky-trac>img{width:100%;height:clamp(300px,42vw,580px);object-fit:cover}
.sky-trac .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.88) 0%,rgba(10,10,13,.05) 58%)}
.sky-trac .inner{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(24px,5vw,72px)}
.sky-trac .copy{max-width:420px}
.sky-trac .sky-eyebrow{color:#D9B34A}
.sky-trac h2{margin:12px 0 14px;font-size:clamp(26px,3.2vw,46px);line-height:1;color:#fff}
.sky-trac p{font-size:15px;line-height:1.7;color:#C9C7D2;text-wrap:pretty}

/* ---------- buy ---------- */
.sky-buy{padding:clamp(40px,6vw,96px) clamp(18px,4vw,64px);background:#fff;border-top:1px solid rgba(10,10,13,.08)}
.sky-buy .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(26px,4vw,64px);align-items:start;max-width:1200px;margin:0 auto}
.sky-buy .stage{background:#EFEEEA;border:1px solid rgba(10,10,13,.07);position:sticky;top:88px}
.sky-buy .stage img{width:100%;aspect-ratio:1/1;object-fit:cover}
.sky-buy .stage .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid rgba(10,10,13,.08);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#56545F}
.sky-buy .panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.sky-buy .kicker{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#7A7884}
.sky-buy h2{margin-top:10px;font-size:clamp(34px,4.4vw,62px);line-height:.92}
.sky-buy .pricing{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:12px}
.sky-buy .pricing .big{font-size:23px;font-weight:700}
.sky-buy .pricing .split{font-size:14px;color:#7A7884}
.sky-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sky-label b{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sky-label span{font-size:13px;color:#7A7884}
.sky-chips{display:flex;flex-wrap:wrap;gap:8px}
.sky-chip{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;background:#fff;color:#0A0A0D;border:1px solid rgba(10,10,13,.18);font-size:14px;font-weight:600;transition:border-color .2s,background .2s}
.sky-chip:hover{border-color:#0A0A0D}
.sky-chip[aria-pressed="true"]{background:#0A0A0D;color:#fff;border-color:#0A0A0D}
.sky-chip .dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,13,.2);flex:none}
.sky-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:7px}
.sky-size{display:flex;align-items:center;justify-content:center;height:54px;min-width:44px;font-size:15px;font-weight:600;background:#fff;color:#0A0A0D;border:1px solid rgba(10,10,13,.18);transition:border-color .2s}
.sky-size:hover:not(:disabled){border-color:#0A0A0D}
.sky-size[aria-pressed="true"]{background:#0A0A0D;color:#fff;border-color:#0A0A0D}
.sky-size:disabled{background:#F3F2EF;color:#BCBAC4;cursor:not-allowed;text-decoration:line-through}
.sky-hint{margin-top:10px;min-height:20px;font-size:13.5px;color:#7A7884}
.sky-hint.is-error{color:#B3261E}
.sky-add{display:flex;align-items:center;justify-content:space-between;width:100%;height:64px;padding:0 26px;background:#0A0A0D;color:#fff;border:0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.sky-add:hover{background:#5B3AD9}
.sky-add span{font-family:Outfit,'Instrument Sans',sans-serif;font-size:17px;letter-spacing:0}
.sky-acc{border-top:1px solid rgba(10,10,13,.12)}
.sky-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;height:60px;font-size:16px;font-weight:600;cursor:pointer;border-bottom:1px solid rgba(10,10,13,.12)}
.sky-acc summary span{color:#5B3AD9;font-size:20px}
.sky-acc details[open] summary span{color:#8A6A14}
.sky-acc .in{padding:4px 0 20px;font-size:14.5px;line-height:1.8;color:#4E4C57}

/* ---------- closing ---------- */
.sky-close{position:relative;background:#0A0A0D}
.sky-close>img{width:100%;height:clamp(240px,30vw,420px);object-fit:cover;opacity:.55}
.sky-close .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.sky-close .line{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.sky-cta-gold{display:flex;align-items:center;gap:14px;height:54px;padding:0 30px;background:#D9B34A;color:#0A0A0D;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sky-cta-gold:hover{background:#fff;color:#0A0A0D}

/* ---------- footer ---------- */
.sky-footer{background:#0A0A0D;color:#8C8A99;padding:clamp(36px,5vw,70px) clamp(18px,4vw,64px) 36px}
.sky-footer .top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.sky-footer .mark{font-family:Outfit,'Instrument Sans',sans-serif;font-weight:800;font-size:38px;color:#fff;letter-spacing:.12em;line-height:1}
.sky-footer .blurb{margin-top:10px;font-size:13px;max-width:26ch;line-height:1.6}
.sky-footer .cols{display:flex;flex-wrap:wrap;gap:44px;font-size:13.5px;line-height:2.1}
.sky-footer .col{display:flex;flex-direction:column}
.sky-footer .col h4{margin:0;color:#fff;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.sky-footer .col a{color:inherit}
.sky-footer .col a:hover{color:#D9B34A}
.sky-footer .col ul{margin:0;padding:0;list-style:none}
.sky-footer .base{margin-top:44px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px}

/* ---------- sticky bar + toast ---------- */
.sky-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px clamp(16px,4vw,44px);background:rgba(10,10,13,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;transform:translateY(130%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.sky-bar.is-on{transform:translateY(0)}
.sky-bar .t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sky-bar .s{font-size:12.5px;color:#9E9CAB}
.sky-bar button{height:48px;padding:0 24px;background:#D9B34A;color:#0A0A0D;border:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .2s}
.sky-bar button:hover{background:#fff}
.sky-toast{position:fixed;left:50%;top:20px;z-index:60;display:flex;align-items:center;gap:10px;padding:13px 20px;background:#0A0A0D;color:#fff;font-size:13.5px;box-shadow:0 14px 40px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,-180%);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.sky-toast.is-on{opacity:1;transform:translate(-50%,0)}
.sky-toast i{width:7px;height:7px;border-radius:50%;background:#D9B34A;flex:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sky-bar,.sky-toast,.sky-way,.sky-chip,.sky-size,.sky-add{transition:none}}