/*
Theme Name: OKS Commerce
Theme URI: https://okstechnologies.com/
Author: OKS Technologies
Author URI: https://okstechnologies.com/
Description: A flexible, conversion-focused WooCommerce theme with selectable header, footer and homepage layouts. Everything (logo, colors, hero images, text, products) is editable from the WordPress Customizer and page editor — no code needed.
Version: 1.0.0
Requires at least: 5.8
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: oks-commerce
Tags: e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready, two-columns, left-sidebar, right-sidebar
*/

/* ===========================================================
   1. DESIGN TOKENS  (changed live by the Customizer)
   =========================================================== */
:root {
  --oks-accent: #5b4bff;
  --oks-accent-dark: #4536d6;
  --oks-accent-soft: #eeecff;
  --oks-ink: #111322;
  --oks-body: #3a3d4d;
  --oks-muted: #6b6f80;
  --oks-line: #e7e8ee;
  --oks-bg: #ffffff;
  --oks-bg-alt: #f7f7fb;
  --oks-bg-dark: #0d0e1a;
  --oks-success: #16a34a;
  --oks-radius: 14px;
  --oks-radius-sm: 9px;
  --oks-shadow: 0 10px 30px -12px rgba(17,19,34,.18);
  --oks-shadow-lg: 0 28px 60px -22px rgba(17,19,34,.30);
  --oks-maxw: 1200px;
  --oks-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --oks-font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* ===========================================================
   2. BASE / RESET
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--oks-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--oks-body);
  background: var(--oks-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oks-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--oks-accent-dark); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--oks-font-display);
  color: var(--oks-ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
:focus-visible { outline: 3px solid var(--oks-accent); outline-offset: 2px; }

.oks-container { width: 100%; max-width: var(--oks-maxw); margin: 0 auto; padding: 0 24px; }
.oks-section { padding: clamp(48px, 7vw, 96px) 0; }
.oks-section--alt { background: var(--oks-bg-alt); }
.oks-eyebrow {
  font-family: var(--oks-font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--oks-accent);
  margin-bottom: 14px;
  display: inline-block;
}
.oks-section-head { max-width: 640px; margin: 0 auto clamp(32px,4vw,56px); text-align: center; }
.oks-section-head p { color: var(--oks-muted); font-size: 1.08rem; margin: 0; }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link { position:absolute; left:-9999px; top:0; background:var(--oks-ink); color:#fff; padding:12px 18px; z-index:9999; border-radius:0 0 8px 0;}
.skip-link:focus { left:0; color:#fff; }

/* ===========================================================
   3. BUTTONS
   =========================================================== */
.oks-btn, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--oks-font-display); font-weight: 600; font-size: .98rem;
  background: var(--oks-accent); color: #fff !important;
  border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1; text-align: center;
}
.oks-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover {
  background: var(--oks-accent-dark); color:#fff !important;
  transform: translateY(-2px); box-shadow: var(--oks-shadow);
}
.oks-btn--ghost {
  background: transparent; color: var(--oks-ink) !important;
  border: 1.5px solid var(--oks-line);
}
.oks-btn--ghost:hover { background: var(--oks-ink); color:#fff !important; border-color: var(--oks-ink); }
.oks-btn--light { background:#fff; color: var(--oks-ink) !important; }
.oks-btn--lg { padding: 17px 36px; font-size: 1.05rem; }

/* ===========================================================
   4. HEADER (shared) + 4 variants
   =========================================================== */
.oks-header { position: relative; z-index: 50; background: var(--oks-bg); }
.oks-header__bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; }
.oks-brand { display:flex; align-items:center; gap:12px; font-family:var(--oks-font-display); font-weight:800; font-size:1.4rem; color:var(--oks-ink); letter-spacing:-.03em; }
.oks-brand img { max-height:46px; width:auto; }
.oks-brand a { color: inherit; }

.oks-nav ul { list-style:none; display:flex; gap:30px; margin:0; padding:0; align-items:center; }
.oks-nav a { color: var(--oks-ink); font-family: var(--oks-font-display); font-weight:600; font-size:.98rem; position:relative; padding:6px 0; }
.oks-nav a:hover { color: var(--oks-accent); }
.oks-nav .current-menu-item > a { color: var(--oks-accent); }
.oks-nav .sub-menu { position:absolute; top:100%; left:0; flex-direction:column; gap:0; background:#fff; min-width:210px; box-shadow:var(--oks-shadow); border-radius:12px; padding:10px; display:none; border:1px solid var(--oks-line); }
.oks-nav li { position:relative; }
.oks-nav li:hover > .sub-menu { display:flex; }
.oks-nav .sub-menu a { padding:9px 14px; border-radius:8px; }
.oks-nav .sub-menu a:hover { background: var(--oks-bg-alt); }

.oks-header__actions { display:flex; align-items:center; gap:18px; }
.oks-icon-btn { display:inline-flex; align-items:center; gap:7px; color:var(--oks-ink); font-weight:600; font-family:var(--oks-font-display); font-size:.92rem; position:relative; }
.oks-icon-btn:hover { color: var(--oks-accent); }
.oks-cart-count { position:absolute; top:-8px; right:-10px; background:var(--oks-accent); color:#fff; font-size:.68rem; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.oks-icon { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* topbar */
.oks-topbar { background: var(--oks-ink); color:#fff; font-size:.84rem; }
.oks-topbar .oks-container { display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:8px; }
.oks-topbar a { color:#cfd2e6; } .oks-topbar a:hover { color:#fff; }
.oks-topbar__social { display:flex; gap:14px; }

/* Header 2 — centered */
.oks-header--2 .oks-header__bar { display:grid; grid-template-columns:1fr auto 1fr; }
.oks-header--2 .oks-header__actions { justify-self:end; }
.oks-header--2 .oks-brand { justify-self:center; }

/* Header 3 — accent bar / dark */
.oks-header--3 .oks-header__bar { background: var(--oks-ink); color:#fff; padding-left:26px; padding-right:26px; border-radius:0 0 16px 16px; }
.oks-header--3 .oks-brand, .oks-header--3 .oks-nav a, .oks-header--3 .oks-icon-btn { color:#fff; }
.oks-header--3 .oks-nav a:hover, .oks-header--3 .oks-icon-btn:hover { color: var(--oks-accent-soft); }

/* Header 4 — split with search field */
.oks-header--4 .oks-header__search { flex:1; max-width:430px; }
.oks-header--4 .oks-header__search form { display:flex; border:1.5px solid var(--oks-line); border-radius:999px; overflow:hidden; }
.oks-header--4 .oks-header__search input[type=search] { border:0; flex:1; padding:11px 18px; font-size:.95rem; outline:none; background:transparent; }
.oks-header--4 .oks-header__search button { border-radius:0; padding:0 20px; }

/* mobile menu toggle */
.oks-burger { display:none; background:transparent; border:0; padding:8px; color:var(--oks-ink); }
.oks-burger .oks-icon { width:26px; height:26px; }
.oks-mobile-panel { display:none; }

/* ===========================================================
   5. HERO + HOME SECTIONS
   =========================================================== */
.oks-hero { position:relative; overflow:hidden; }
.oks-hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:clamp(48px,7vw,96px) 0; }
.oks-hero h1 { margin-bottom:18px; }
.oks-hero p.lead { font-size:1.18rem; color:var(--oks-muted); max-width:46ch; margin-bottom:30px; }
.oks-hero__cta { display:flex; gap:14px; flex-wrap:wrap; }
.oks-hero__media { position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--oks-shadow-lg); aspect-ratio:4/3; }
.oks-hero__media img { width:100%; height:100%; object-fit:cover; }
.oks-media-fallback { width:100%; height:100%; background:linear-gradient(135deg, var(--oks-accent), var(--oks-accent-dark)); }
.oks-hero__stats { display:flex; gap:34px; margin-top:36px; }
.oks-hero__stats strong { font-family:var(--oks-font-display); font-size:1.6rem; color:var(--oks-ink); display:block; }
.oks-hero__stats span { color:var(--oks-muted); font-size:.9rem; }

/* hero center variant */
.oks-hero--center .oks-hero__inner { grid-template-columns:1fr; text-align:center; justify-items:center; }
.oks-hero--center .oks-hero__cta { justify-content:center; }
.oks-hero--center .oks-hero__media { width:100%; max-width:980px; margin-top:40px; aspect-ratio:21/9; }

/* hero dark variant */
.oks-hero--dark { background:var(--oks-bg-dark); color:#d7d9ec; }
.oks-hero--dark h1 { color:#fff; }
.oks-hero--dark p.lead { color:#a9adc9; }
.oks-hero--dark .oks-hero__stats strong { color:#fff; }

/* hero reverse variant (media on the left) */
.oks-hero--reverse .oks-hero__inner { grid-template-columns:.95fr 1.05fr; }
.oks-hero--reverse .oks-hero__media { order:0; }
.oks-hero--reverse .oks-hero__copy { order:1; }

/* hero minimal variant (light, airy, centered) */
.oks-hero--minimal { background:linear-gradient(180deg,var(--oks-accent-soft),#fff); }
.oks-hero--minimal .oks-hero__inner { padding:clamp(64px,9vw,128px) 0; }
.oks-hero--minimal h1 { font-size:clamp(2.4rem,5vw,4rem); max-width:16ch; margin-inline:auto; }
.oks-hero--minimal p.lead { margin-inline:auto; }

/* trust bar */
.oks-trust { border-top:1px solid var(--oks-line); border-bottom:1px solid var(--oks-line); }
.oks-trust .oks-container { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:26px; padding-bottom:26px; }
.oks-trust__item { display:flex; align-items:center; gap:12px; color:var(--oks-muted); font-weight:600; font-family:var(--oks-font-display); font-size:.95rem; }
.oks-trust__item .oks-icon { color:var(--oks-accent); }

/* category grid */
.oks-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.oks-cat-card { position:relative; border-radius:var(--oks-radius); overflow:hidden; aspect-ratio:3/4; display:flex; align-items:flex-end; padding:22px; color:#fff; box-shadow:var(--oks-shadow); }
.oks-cat-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,14,26,.05), rgba(13,14,26,.78)); z-index:1; }
.oks-cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oks-cat-card__bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--oks-accent),var(--oks-accent-dark)); }
.oks-cat-card span { position:relative; z-index:2; font-family:var(--oks-font-display); font-weight:700; font-size:1.15rem; }
.oks-cat-card:hover img { transform:scale(1.06); transition:transform .5s ease; }

/* feature columns */
.oks-features { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.oks-feature { background:#fff; border:1px solid var(--oks-line); border-radius:var(--oks-radius); padding:30px; transition:transform .2s ease, box-shadow .2s ease; }
.oks-feature:hover { transform:translateY(-4px); box-shadow:var(--oks-shadow); }
.oks-feature__icon { width:52px; height:52px; border-radius:13px; background:var(--oks-accent-soft); color:var(--oks-accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.oks-feature h3 { font-size:1.2rem; }
.oks-feature p { color:var(--oks-muted); margin:0; }

/* promo banner */
.oks-promo { background:linear-gradient(120deg,var(--oks-ink),#23264a); border-radius:24px; color:#fff; padding:clamp(36px,5vw,64px); display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center; overflow:hidden; position:relative; }
.oks-promo h2 { color:#fff; }
.oks-promo p { color:#b9bce0; }
.oks-promo__media { aspect-ratio:1; border-radius:18px; overflow:hidden; }
.oks-promo__media img { width:100%; height:100%; object-fit:cover; }

/* testimonials */
.oks-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.oks-quote { background:#fff; border:1px solid var(--oks-line); border-radius:var(--oks-radius); padding:28px; }
.oks-quote__stars { color:#f5a623; margin-bottom:12px; letter-spacing:2px; }
.oks-quote p { font-size:1.02rem; color:var(--oks-ink); }
.oks-quote__who { display:flex; align-items:center; gap:12px; margin-top:18px; }
.oks-quote__who .oks-avatar { width:44px; height:44px; border-radius:50%; background:var(--oks-accent-soft); color:var(--oks-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--oks-font-display); }
.oks-quote__who strong { display:block; color:var(--oks-ink); font-family:var(--oks-font-display); }
.oks-quote__who span { font-size:.85rem; color:var(--oks-muted); }

/* newsletter / CTA strip */
.oks-cta-strip { background:var(--oks-accent); border-radius:24px; padding:clamp(36px,5vw,64px); text-align:center; color:#fff; }
.oks-cta-strip h2 { color:#fff; }
.oks-cta-strip p { color:rgba(255,255,255,.85); max-width:48ch; margin:0 auto 26px; }
.oks-cta-strip form { display:flex; gap:12px; max-width:480px; margin:0 auto; }
.oks-cta-strip input[type=email] { flex:1; border:0; border-radius:999px; padding:15px 22px; font-size:1rem; }

/* ===========================================================
   6. WOOCOMMERCE
   =========================================================== */
.woocommerce ul.products { display:grid !important; grid-template-columns:repeat(4,1fr); gap:26px; margin:0 !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:auto !important; margin:0 !important; float:none !important; text-align:left; background:#fff; border:1px solid var(--oks-line); border-radius:var(--oks-radius); padding:14px !important; transition:transform .2s ease, box-shadow .2s ease; }
.woocommerce ul.products li.product:hover { transform:translateY(-4px); box-shadow:var(--oks-shadow); }
.woocommerce ul.products li.product a img { border-radius:var(--oks-radius-sm); margin-bottom:14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:var(--oks-font-display); font-size:1.02rem !important; color:var(--oks-ink); padding:0 4px !important; font-weight:600; }
.woocommerce ul.products li.product .price { color:var(--oks-ink) !important; font-weight:700; font-family:var(--oks-font-display); padding:0 4px; }
.woocommerce ul.products li.product .price del { color:var(--oks-muted); font-weight:400; }
.woocommerce ul.products li.product .price ins { text-decoration:none; }
.woocommerce span.onsale { background:var(--oks-accent); border-radius:999px; min-height:auto; min-width:auto; padding:5px 12px; font-weight:600; top:14px; left:14px; margin:0; }
.woocommerce .star-rating span { color:#f5a623; }
.woocommerce ul.products li.product .button { margin-top:10px; width:100%; }

.woocommerce div.product .product_title { font-size:clamp(1.6rem,3vw,2.4rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color:var(--oks-accent); font-weight:700; font-size:1.5rem; }
.woocommerce .quantity input.qty { border:1.5px solid var(--oks-line); border-radius:8px; padding:10px; }
.woocommerce-tabs ul.tabs li.active { border-bottom-color:var(--oks-accent); }
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background:var(--oks-accent); }

.woocommerce-message, .woocommerce-info, .woocommerce-noreviews, p.no-comments { border-top-color:var(--oks-accent); }
.woocommerce-message::before, .woocommerce-info::before { color:var(--oks-accent); }

.woocommerce-breadcrumb { color:var(--oks-muted); font-size:.9rem; margin-bottom:24px !important; }
.woocommerce table.shop_table { border-radius:var(--oks-radius); }
.woocommerce-cart table.cart img { width:70px; border-radius:8px; }

/* shop page layout */
.oks-shop-head { background:var(--oks-bg-alt); padding:clamp(36px,5vw,64px) 0; margin-bottom:48px; text-align:center; }
.oks-shop-head h1 { margin:0; }

/* ===========================================================
   7. PAGES / POSTS / SIDEBAR
   =========================================================== */
.oks-page-hero { background:var(--oks-bg-alt); padding:clamp(40px,6vw,80px) 0; text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.oks-page-hero h1 { margin:0 0 10px; }
.oks-page-hero p { color:var(--oks-muted); margin:0; max-width:60ch; margin-inline:auto; }

.oks-content-wrap { display:grid; grid-template-columns:1fr; gap:48px; }
.oks-content-wrap.has-sidebar { grid-template-columns:1fr 320px; }
.oks-article { max-width:760px; }
.oks-article img { border-radius:var(--oks-radius); }
.oks-article h2, .oks-article h3 { margin-top:1.6em; }
.entry-content > * { margin-bottom:1.1rem; }
.entry-content blockquote { border-left:4px solid var(--oks-accent); padding:6px 0 6px 22px; margin:1.5rem 0; font-size:1.15rem; color:var(--oks-ink); font-style:italic; }

.oks-post-card { background:#fff; border:1px solid var(--oks-line); border-radius:var(--oks-radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.oks-post-card:hover { transform:translateY(-4px); box-shadow:var(--oks-shadow); }
.oks-post-card__media { aspect-ratio:16/10; overflow:hidden; }
.oks-post-card__media img { width:100%; height:100%; object-fit:cover; }
.oks-post-card__body { padding:22px; }
.oks-post-card__meta { font-size:.82rem; color:var(--oks-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.oks-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.widget { background:#fff; border:1px solid var(--oks-line); border-radius:var(--oks-radius); padding:24px; margin-bottom:24px; }
.widget-title { font-size:1.1rem; margin-bottom:14px; }
.widget ul { list-style:none; padding:0; margin:0; }
.widget ul li { padding:7px 0; border-bottom:1px solid var(--oks-line); }
.widget ul li:last-child { border-bottom:0; }

input[type=text], input[type=email], input[type=search], input[type=password], input[type=tel], input[type=url], input[type=number], textarea, select {
  width:100%; border:1.5px solid var(--oks-line); border-radius:var(--oks-radius-sm); padding:12px 16px; font-family:inherit; font-size:1rem; background:#fff; color:var(--oks-ink);
}
input:focus, textarea:focus, select:focus { border-color:var(--oks-accent); outline:none; }
label { font-weight:600; font-family:var(--oks-font-display); display:block; margin-bottom:6px; color:var(--oks-ink); }

/* contact template */
.oks-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.oks-contact-card { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.oks-contact-card .oks-icon { color:var(--oks-accent); flex-shrink:0; margin-top:3px; }
.oks-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.oks-form-field { margin-bottom:16px; }

/* ===========================================================
   8. FOOTER (shared) + 4 variants
   =========================================================== */
.oks-footer { background:var(--oks-bg-dark); color:#a9adc9; padding-top:clamp(48px,6vw,80px); }
.oks-footer a { color:#a9adc9; } .oks-footer a:hover { color:#fff; }
.oks-footer h4 { color:#fff; font-size:1.05rem; margin-bottom:18px; }
.oks-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.oks-footer__brand .oks-brand { color:#fff; margin-bottom:16px; }
.oks-footer__brand p { color:#8b8fae; max-width:34ch; }
.oks-footer ul { list-style:none; padding:0; margin:0; }
.oks-footer ul li { margin-bottom:10px; }
.oks-footer__social { display:flex; gap:12px; margin-top:18px; }
.oks-footer__social a { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; }
.oks-footer__social a:hover { background:var(--oks-accent); }
.oks-footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.88rem; }
.oks-footer__bottom .oks-pay { display:flex; gap:8px; opacity:.7; }

/* footer 2 — light */
.oks-footer--2 { background:var(--oks-bg-alt); color:var(--oks-body); }
.oks-footer--2 a, .oks-footer--2 .oks-footer__brand p { color:var(--oks-muted); }
.oks-footer--2 a:hover { color:var(--oks-accent); }
.oks-footer--2 h4, .oks-footer--2 .oks-footer__brand .oks-brand { color:var(--oks-ink); }
.oks-footer--2 .oks-footer__social a { background:#fff; border:1px solid var(--oks-line); color:var(--oks-ink); }
.oks-footer--2 .oks-footer__bottom { border-top-color:var(--oks-line); }

/* footer 3 — centered minimal */
.oks-footer--3 { text-align:center; }
.oks-footer--3 .oks-footer__grid { display:block; padding-bottom:30px; }
.oks-footer--3 .oks-footer__nav { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin:18px 0; }
.oks-footer--3 .oks-footer__social { justify-content:center; }

/* footer 4 — with newsletter band on top */
.oks-footer--4 .oks-footer__news { background:var(--oks-accent); margin-bottom:clamp(40px,5vw,64px); border-radius:20px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.oks-footer--4 .oks-footer__news h3 { color:#fff; margin:0; }
.oks-footer--4 .oks-footer__news form { display:flex; gap:10px; }
.oks-footer--4 .oks-footer__news input { border:0; border-radius:999px; padding:13px 20px; min-width:240px; }

/* ===========================================================
   9. RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
  .oks-cats { grid-template-columns:repeat(2,1fr); }
  .woocommerce ul.products { grid-template-columns:repeat(3,1fr) !important; }
  .oks-features, .oks-quotes, .oks-post-grid { grid-template-columns:repeat(2,1fr); }
  .oks-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px) {
  .oks-nav, .oks-header__search { display:none; }
  .oks-burger { display:inline-flex; }
  .oks-hero__inner { grid-template-columns:1fr; }
  .oks-hero__media { order:-1; }
  .oks-promo, .oks-contact-grid, .oks-content-wrap.has-sidebar, .oks-form-row, .oks-footer--4 .oks-footer__news { grid-template-columns:1fr; }
  .oks-header--2 .oks-header__bar { grid-template-columns:auto 1fr auto; }
  .oks-mobile-open .oks-mobile-panel { display:block; position:fixed; inset:0; background:var(--oks-bg); z-index:999; padding:24px; overflow:auto; }
  .oks-mobile-panel ul { list-style:none; padding:0; margin:24px 0 0; }
  .oks-mobile-panel ul li { border-bottom:1px solid var(--oks-line); }
  .oks-mobile-panel ul a { display:block; padding:15px 0; font-family:var(--oks-font-display); font-weight:600; font-size:1.1rem; color:var(--oks-ink); }
  .oks-mobile-panel .oks-sub { padding-left:16px; }
}
@media (max-width: 560px) {
  .oks-cats, .woocommerce ul.products, .oks-features, .oks-quotes, .oks-post-grid { grid-template-columns:1fr !important; }
  .woocommerce ul.products { grid-template-columns:repeat(2,1fr) !important; }
  .oks-hero__stats { gap:20px; }
  .oks-cta-strip form { flex-direction:column; }
}