/*
Theme Name: SkyCleat Velocity
Theme URI: https://www.skycleat.com
Author: SkyCleat
Description: Premium multilingual sport bicycle showcase theme with WooCommerce-ready product grids, category filters, and international brand styling.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: skycleat-velocity
Tags: e-commerce, custom-logo, featured-images, block-styles, translation-ready
*/

:root {
  --sv-black: #050506;
  --sv-ink: #111114;
  --sv-carbon: #1d1e22;
  --sv-red: #e50914;
  --sv-red-dark: #b40710;
  --sv-white: #ffffff;
  --sv-cloud: #f5f5f2;
  --sv-line: rgba(255,255,255,.16);
  --sv-text: #d9d9d4;
  --sv-muted: #8d8d86;
  --sv-radius: 22px;
  --sv-shadow: 0 24px 70px rgba(0,0,0,.35);
  --sv-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sv-black);
  color: var(--sv-white);
  font-family: var(--sv-font);
  line-height: 1.6;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; }

.sv-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.sv-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,5,6,.78); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sv-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.sv-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sv-logo-mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--sv-red) 42%, #310004 72%); box-shadow: 0 0 28px rgba(229,9,20,.45); }
.sv-menu, .sv-language { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sv-menu a { color: var(--sv-text); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.sv-menu a:hover, .sv-language a:hover { color: var(--sv-white); }
.sv-language { gap: 8px; }
.sv-language a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: var(--sv-muted); font-size: 12px; font-weight: 800; }
.sv-menu-toggle { display: none; border: 1px solid rgba(255,255,255,.2); background: transparent; color: white; border-radius: 999px; padding: 10px 14px; }

.sv-hero { position: relative; min-height: calc(100vh - 78px); overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.sv-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,.94), rgba(5,5,6,.36) 48%, rgba(5,5,6,.7)), radial-gradient(circle at 74% 34%, rgba(229,9,20,.36), transparent 28%); z-index: -1; }
.sv-hero-media { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #050506, #18191d 44%, #f2f2ee 44.4%, #deded8 58%, #a7050d 58.4%, #050506 72%); }
.sv-hero-media::after { content: ""; position: absolute; right: 5vw; top: 17vh; width: min(720px, 72vw); height: 42vh; border: 18px solid rgba(255,255,255,.86); border-left-color: transparent; border-bottom-color: transparent; border-radius: 54% 46% 52% 48%; transform: skewX(-14deg) rotate(-7deg); filter: drop-shadow(0 40px 50px rgba(0,0,0,.5)); }
.sv-hero-content { padding: 96px 0 76px; max-width: 760px; }
.sv-kicker { color: var(--sv-red); text-transform: uppercase; letter-spacing: .22em; font-weight: 900; font-size: 12px; }
.sv-hero h1 { margin: 18px 0 22px; font-size: clamp(48px, 9vw, 112px); line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.sv-lead { max-width: 620px; color: var(--sv-text); font-size: clamp(18px, 2vw, 23px); }
.sv-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.sv-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-weight: 900; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.sv-button:hover { transform: translateY(-2px); }
.sv-button-primary { background: var(--sv-red); border-color: var(--sv-red); color: white; }
.sv-button-secondary { background: rgba(255,255,255,.08); }

.sv-section { padding: 94px 0; }
.sv-section-light { background: var(--sv-cloud); color: var(--sv-ink); }
.sv-section-head { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 36px; }
.sv-eyebrow { color: var(--sv-red); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; }
.sv-title { margin: 8px 0 0; font-size: clamp(34px, 5vw, 66px); line-height: .95; letter-spacing: -.045em; }
.sv-subtitle { max-width: 520px; color: var(--sv-muted); }
.sv-grid { display: grid; gap: 22px; }
.sv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-card { position: relative; overflow: hidden; min-height: 360px; border-radius: var(--sv-radius); background: linear-gradient(150deg, #1b1c21, #070707); box-shadow: var(--sv-shadow); border: 1px solid rgba(255,255,255,.1); }
.sv-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 22%, rgba(229,9,20,.28), transparent 30%); opacity: .9; }
.sv-card-body { position: relative; z-index: 1; min-height: inherit; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.sv-card h3 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.sv-card p { color: var(--sv-text); margin: 10px 0 0; }
.sv-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chip { display: inline-flex; padding: 7px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: var(--sv-text); font-size: 12px; font-weight: 800; }

.sv-filter-panel { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sv-radius); margin-bottom: 24px; }
.sv-filter-panel select { width: 100%; min-height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: white; background: #141417; padding: 0 16px; }
.sv-product { background: white; color: var(--sv-ink); border-radius: var(--sv-radius); overflow: hidden; box-shadow: 0 16px 46px rgba(0,0,0,.1); }
.sv-product-media { min-height: 220px; background: linear-gradient(135deg, #ecece8, #fff 52%, #d8d8d2); position: relative; }
.sv-product-media::after { content: ""; position: absolute; left: 14%; right: 10%; top: 36%; height: 42%; border: 10px solid #111; border-left-color: transparent; border-radius: 55% 45% 55% 45%; transform: skewX(-15deg) rotate(-8deg); }
.sv-product-accent { position: absolute; inset: auto 0 0 0; height: 6px; background: var(--sv-red); }
.sv-product-body { padding: 24px; }
.sv-product h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.025em; }
.sv-product table { width: 100%; border-collapse: collapse; margin-top: 14px; color: #3d3d3a; font-size: 14px; }
.sv-product td { border-top: 1px solid #e8e8e2; padding: 8px 0; }
.sv-product td:last-child { text-align: right; font-weight: 800; }
.sv-price { color: var(--sv-red); font-weight: 950; font-size: 20px; }
.sv-colors { display: flex; gap: 8px; margin-top: 14px; }
.sv-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; }

.sv-story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 38px; align-items: center; }
.sv-story-visual { min-height: 520px; border-radius: 34px; background: linear-gradient(135deg, #101014 0 34%, #e50914 34% 45%, #f7f7f2 45% 63%, #0b0b0c 63%); position: relative; overflow: hidden; }
.sv-story-visual::after { content: "ENGINEERED FOR DISTANCE"; position: absolute; left: 28px; bottom: 24px; color: rgba(255,255,255,.75); font-size: clamp(34px, 5vw, 74px); font-weight: 950; line-height: .9; letter-spacing: -.07em; width: 60%; }
.sv-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.sv-stat { padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.05); }
.sv-stat strong { display: block; font-size: 30px; line-height: 1; }
.sv-stat span { color: var(--sv-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

.sv-news { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 140px 1fr 130px; gap: 20px; align-items: center; }
.sv-news time, .sv-news span { color: var(--sv-muted); font-size: 13px; }
.sv-news h3 { margin: 0; font-size: 24px; }
.sv-footer { padding: 54px 0; background: #030303; border-top: 1px solid rgba(255,255,255,.1); color: var(--sv-muted); }
.sv-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 30px; }
.sv-footer h3, .sv-footer h4 { color: white; margin-top: 0; }

@media (max-width: 920px) {
  .sv-menu { display: none; position: absolute; left: 20px; right: 20px; top: 78px; padding: 18px; border-radius: 18px; background: #101014; flex-direction: column; align-items: flex-start; }
  .sv-menu.is-open { display: flex; }
  .sv-menu-toggle { display: inline-flex; }
  .sv-grid-4, .sv-grid-3, .sv-filter-panel, .sv-story, .sv-footer-grid { grid-template-columns: 1fr; }
  .sv-section-head { display: block; }
  .sv-news { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sv-container { width: min(100% - 28px, 1180px); }
  .sv-language { display: none; }
  .sv-hero-content { padding: 70px 0 48px; }
  .sv-section { padding: 64px 0; }
}


/* Retail upgrade */
.sv-hero-retail { min-height: 88vh; background: #050506; }
.sv-hero-retail::before { background: linear-gradient(90deg, rgba(5,5,6,.96), rgba(5,5,6,.58) 52%, rgba(5,5,6,.2)), radial-gradient(circle at 82% 28%, rgba(229,9,20,.46), transparent 26%); }
.sv-hero-bike { position:absolute; inset:0; z-index:-2; background: linear-gradient(140deg,#060607 0 38%,#f2f2ed 38.2% 53%,#d90813 53.2% 61%,#111114 61.2%); }
.sv-hero-bike::before { content:""; position:absolute; right:5vw; top:22vh; width:min(720px,70vw); height:310px; border:16px solid rgba(255,255,255,.92); border-left-color:transparent; border-bottom-color:transparent; border-radius:55% 45% 48% 52%; transform:skewX(-18deg) rotate(-8deg); filter:drop-shadow(0 34px 46px rgba(0,0,0,.48)); }
.sv-hero-bike::after { content:""; position:absolute; right:9vw; top:43vh; width:min(560px,56vw); height:8px; background:#050506; box-shadow: 90px -78px 0 2px #050506, 190px -102px 0 2px #e50914; transform:rotate(-8deg); }
.sv-proof-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.sv-proof-row span { padding:9px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#e7e7e0; font-size:12px; font-weight:850; background:rgba(255,255,255,.07); }
.sv-shop-band .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background:#fff; border-radius:20px; overflow:hidden; padding:0 0 18px; box-shadow:0 18px 48px rgba(0,0,0,.10); }
.woocommerce ul.products li.product a img { aspect-ratio:1/1; object-fit:cover; background:#f3f3ef; margin:0 0 16px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding:0 18px; color:#101014; font-size:16px; line-height:1.25; min-height:60px; }
.woocommerce ul.products li.product .price { padding:0 18px; color:#e50914; font-weight:900; }
.woocommerce ul.products li.product .button { margin-left:18px; border-radius:999px; background:#111114; color:#fff; font-weight:850; }
.sv-use-card { min-height:330px; }
.sv-card-link { color:#fff; font-weight:900; border-bottom:2px solid #e50914; width:max-content; }
.sv-section-split { background:#0a0a0b; }
.sv-commute-visual { background:linear-gradient(135deg,#f4f4ef 0 34%,#111114 34.2% 58%,#e50914 58.2% 66%,#050506 66.2%); }
.sv-policy-tile { display:block; padding:24px; background:#fff; color:#111114; border:1px solid #e8e8e2; border-radius:20px; min-height:160px; box-shadow:0 14px 38px rgba(0,0,0,.08); }
.sv-policy-tile strong { display:block; font-size:22px; letter-spacing:-.03em; margin-bottom:10px; }
.sv-policy-tile span { color:#60605a; }
.sv-footer a { color:#d7d7d0; }
.sv-footer a:hover { color:#fff; }
.sv-footer-contact { color:#c4c4bd; }
.sv-page-shell { background:#f5f5f2; color:#101014; padding:80px 0; }
.sv-page-card { background:#fff; border-radius:24px; padding:min(7vw,64px); box-shadow:0 18px 60px rgba(0,0,0,.08); }
.sv-page-card h1 { color:#101014; }
.sv-page-card h2 { margin-top:34px; font-size:26px; }
.sv-page-card p, .sv-page-card li { color:#3f3f39; }
@media (max-width: 920px) { .sv-hero-bike::before { right:-8vw; width:92vw; opacity:.42; } .sv-proof-row span { font-size:11px; } }


/* SkyCleat Sport Store Theme Upgrade */
:root{--sport-black:#101010;--sport-white:#fffdf9;--sport-blue:#145aff;--sport-lime:#2aff2a;--sport-red:#ff2a2a;--sport-light:#fcfcfc;--sport-wash:#f0f4fe;--sport-ink:#14141e;--sport-muted:#6b7280;}
.sv-sport-store{background:var(--sport-black);}
.sv-sport-hero{min-height:86vh;background:radial-gradient(circle at 76% 18%,rgba(20,90,255,.45),transparent 28%),linear-gradient(135deg,#101010 0 58%,#1d1d1f 58% 100%);display:grid;align-items:center;overflow:hidden;}
.sv-sport-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.sv-sport-copy h1{font-size:clamp(48px,8vw,104px);line-height:.9;letter-spacing:-.06em;margin:18px 0;color:var(--sport-white);text-transform:uppercase;}
.sv-sport-copy p{font-size:clamp(18px,2vw,22px);max-width:620px;color:#d9d9d4;}
.sv-sport-visual{position:relative;min-height:460px;}
.sv-wheel{position:absolute;width:210px;height:210px;border:16px solid var(--sport-white);border-radius:50%;bottom:62px;opacity:.94;}
.sv-wheel-a{left:4%;}.sv-wheel-b{right:9%;}
.sv-frame-line{position:absolute;height:14px;background:var(--sport-lime);border-radius:999px;transform-origin:left center;box-shadow:0 0 28px rgba(42,255,42,.38);}
.sv-frame-1{width:360px;left:25%;bottom:178px;transform:rotate(-12deg);}.sv-frame-2{width:260px;left:30%;bottom:262px;transform:rotate(28deg);background:var(--sport-blue);}.sv-frame-3{width:310px;left:39%;bottom:145px;transform:rotate(-42deg);background:var(--sport-red);}
.sv-sport-strip{background:var(--sport-blue);color:#fff;padding:14px 0;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em;}.sv-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;}
.sv-sport-categories{background:#101010;}.sv-sport-card{display:block;min-height:220px;border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:26px;background:linear-gradient(145deg,#181818,#0c0c0c);color:var(--sport-white);transition:.22s ease;}.sv-sport-card:hover{transform:translateY(-5px);border-color:var(--sport-lime);}.sv-sport-card strong{display:block;font-size:28px;line-height:1;letter-spacing:-.04em;margin-bottom:12px;}.sv-sport-card span{color:#b8b8b0;}
.sv-policy-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.sv-policy-row a{display:flex;align-items:center;justify-content:center;min-height:74px;border-radius:18px;background:#fff;color:#101010;font-weight:900;border:1px solid #e2e8f0;}
.woocommerce ul.products li.product{border-radius:22px;overflow:hidden;background:#fff;padding-bottom:18px;box-shadow:0 20px 48px rgba(0,0,0,.10);}.woocommerce ul.products li.product a img{aspect-ratio:1/1;object-fit:cover;background:#f0f4fe;margin:0 0 16px;}.woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0 18px;color:#101010;min-height:58px;font-size:16px;line-height:1.25}.woocommerce ul.products li.product .price{padding:0 18px;color:var(--sport-blue);font-weight:900}.woocommerce ul.products li.product .button{margin-left:18px;border-radius:999px;background:#101010;color:#fff;font-weight:900;}
.sv-mobile-bottom{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:80;background:rgba(16,16,16,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.32)}.sv-mobile-bottom a{flex:1;text-align:center;color:#fff;font-weight:900;font-size:12px;padding:11px 0;border-radius:999px}.sv-mobile-bottom a:hover{background:var(--sport-blue)}
@media(max-width:920px){.sv-sport-hero-grid,.sv-strip-grid,.sv-policy-row{grid-template-columns:1fr}.sv-sport-visual{min-height:300px;opacity:.6}.sv-mobile-bottom{display:flex}body{padding-bottom:72px}.sv-wheel{width:150px;height:150px}.sv-frame-1{width:240px}.sv-frame-2{width:180px}.sv-frame-3{width:200px}}


/* Realistic hero product image replacement */
.sv-sport-photo{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.sv-sport-photo::before{content:"";position:absolute;inset:8% 0 4% 10%;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(20,90,255,.22));border:1px solid rgba(255,255,255,.18);border-radius:34px;transform:skewX(-8deg);z-index:-1;}
.sv-sport-photo img{width:min(680px,100%);max-height:520px;object-fit:contain;filter:drop-shadow(0 34px 48px rgba(0,0,0,.5));transform:translateX(-2%) rotate(-1deg);}
@media(max-width:920px){.sv-sport-photo{min-height:320px}.sv-sport-photo::before{inset:10% 0}.sv-sport-photo img{max-height:330px;transform:none}}


/* Cycling culture launch additions */
.sv-journal-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:24px;min-height:220px;box-shadow:0 16px 40px rgba(0,0,0,.08)}
.sv-journal-card span{display:block;color:#145aff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.sv-journal-card h3{margin:0 0 12px;font-size:24px;line-height:1.05;letter-spacing:-.04em;color:#101010}
.sv-journal-card p{color:#6b7280;margin:0}
.sv-journal-section .sv-button{margin-top:28px}