/*
Theme Name: KAPNO Black
Theme URI: https://kapno-market.com/
Author: Threadline
Description: Black replica of kapno-market.com layout: top bar, hero slider, buy-5-get-1 grid, collection tab, image banner, slogans, 18+ marquee, why-buy text, blue footer.
Version: 1.0.0
Text Domain: kapno
*/

:root{
  --ink:#0a0a0a; --ink-2:#111111; --ink-3:#161616;
  --surface:#1a1a1a; --surface-2:#202020;
  --line:#2a2a2a; --line-2:#333333;
  --text:#f2f2f2; --muted:#9a9a9a;
  --brand:#194481; --brand-deep:#123158;
  --red:#f40000; --gold:#f8ad6b;
  --max:1240px;
  --title-font:'Abril Fatface', Georgia, serif;
  --body-font:'Didact Gothic', 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--ink);font-family:var(--body-font);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(calc(100% - 32px),var(--max));margin:0 auto}

/* ---------- top bar ---------- */
.topbar{background:var(--brand);color:#fff;font-size:13px;text-align:center;padding:9px 16px}
.topbar a{opacity:.95}
.topbar a:hover{opacity:1;text-decoration:underline}

/* ---------- header ---------- */
.site-header{background:var(--ink-2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:18px}
.brand img{height:44px;width:auto}
.header-row .custom-logo-link{display:block;flex:0 0 auto}
.header-row .custom-logo{display:block;width:auto;height:auto;max-width:190px;max-height:54px;object-fit:contain}
.nav-menu > li{list-style:none}
.nav-menu{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600;letter-spacing:.02em}
.nav-menu a{color:var(--text)}
.nav-menu a:hover{color:var(--gold)}
.header-tools{display:flex;gap:16px;align-items:center;font-size:13px}
.header-tools a{color:var(--text)}
.header-tools a:hover{color:var(--gold)}
.menu-toggle{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}

/* ---------- hero slider ---------- */
.hero{position:relative;background:var(--ink)}
.hero-track{position:relative;overflow:hidden;height:clamp(420px,48vw,560px)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-slide.active{opacity:1;z-index:1}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.hero-copy{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:900px;padding:50px 24px;text-align:center;z-index:2}
.hero-copy h1{font-family:var(--title-font);font-size:clamp(28px,4.6vw,54px);margin:0 0 12px;color:#fff;line-height:1.05}
.hero-copy p{color:#e8e8e8;margin:0 0 20px;font-size:16px}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-badges img{height:44px;width:auto;background:#fff;border-radius:6px;padding:4px 8px}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}
.hero-dots button.active{background:#fff}

/* ---------- section generic ---------- */
.section{padding:64px 0}
.section-title{font-family:var(--title-font);font-size:clamp(24px,3.4vw,38px);text-align:center;margin:0 0 34px;color:#fff}
.section-sub{text-align:center;color:var(--muted);max-width:760px;margin:-24px auto 34px}

/* ---------- product grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.product-card{background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative;transition:transform .2s,border-color .2s}
.product-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.product-card .thumb{aspect-ratio:4/5;overflow:hidden;background:#0d0d0d}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.product-card:hover .thumb img{transform:scale(1.05)}
.product-card .caption{padding:14px 14px 16px}
.product-card .name{font-size:14px;font-weight:600;min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .price{font-size:16px;font-weight:700;color:#fff;margin-top:6px}
.product-card .compare{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:8px}
.discount-tag{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:4px;z-index:2}

/* ---------- collection tab ---------- */
.tab-title{text-align:center;font-family:var(--title-font);font-size:30px;color:#fff;margin:0 0 28px}
.tab-nav{display:flex;justify-content:center;gap:30px;margin-bottom:26px}
.tab-nav a{font-size:15px;font-weight:600;color:var(--muted);padding:6px 2px;border-bottom:2px solid transparent}
.tab-nav a.active{color:#fff;border-color:var(--gold)}

/* ---------- image banner ---------- */
.image-banner{position:relative;overflow:hidden}
.image-banner img{width:100%;object-fit:cover;min-height:220px}
.image-banner .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.image-banner .overlay h2{font-family:var(--title-font);color:#fff;font-size:clamp(20px,2.6vw,34px);max-width:860px;margin:0;line-height:1.15}

/* ---------- slogans ---------- */
.slogan{background:var(--surface);padding:56px 0}
.slogan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.slogan-item{text-align:center;color:var(--text)}
.slogan-item .icon{width:48px;height:48px;margin:0 auto 14px;color:var(--gold)}
.slogan-item h2{font-size:16px;font-weight:700;margin:0 0 6px;color:#fff}
.slogan-item p{font-size:13px;color:var(--muted);margin:0}

/* ---------- marquee ---------- */
.marquee{background:var(--brand-deep);color:#cfe0f5;overflow:hidden;padding:16px 0}
.marquee-track{display:flex;gap:48px;white-space:nowrap;animation:marquee 30s linear infinite}
.marquee-track span{font-family:var(--title-font);font-size:22px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- why text ---------- */
.why{background:var(--ink-2);padding:60px 0}
.why h2{font-family:var(--title-font);text-align:center;font-size:clamp(22px,3vw,34px);color:#fff;margin:0 0 28px}
.why-list{max-width:820px;margin:0 auto;color:var(--text)}
.why-list div{margin:10px 0;padding-left:22px;position:relative;font-size:15px}
.why-list div:before{content:"•";position:absolute;left:4px;color:var(--gold);font-weight:700}
.why-list .lead{margin:0 0 18px;padding-left:0;color:var(--muted);font-size:15px}
.why-list .lead:before{display:none}

/* ---------- footer ---------- */
.site-footer{background:var(--brand);color:#fff;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:34px;padding:44px 0 30px}
.footer-grid h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;opacity:.95}
.footer-grid p,.footer-grid li{font-size:13px;color:#cfe0f5;opacity:.9}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:7px 0}
.footer-grid a:hover{text-decoration:underline}
.footer-input{display:flex;gap:8px;margin-top:10px}
.footer-input input{flex:1;background:transparent;border:1px solid #3d6bb0;color:#fff;padding:10px 12px;font-size:13px;border-radius:4px}
.footer-input input::placeholder{color:#9dbbe8}
.footer-input button{background:var(--red);color:#fff;border:0;padding:10px 16px;font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:4px;cursor:pointer}
.copyright{border-top:1px solid #2d5590;padding:16px 0;font-size:12px;color:#b9cdec}

/* ---------- woo ---------- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0}
.woocommerce ul.products li.product{background:var(--surface);border:1px solid var(--line);overflow:hidden;text-align:center;padding:0 0 14px}
.woocommerce ul.products li.product img{aspect-ratio:4/5;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px;color:var(--text);padding:0 12px}
.woocommerce ul.products li.product .price{color:#fff;font-weight:700}
.woocommerce ul.products li.product .price del{color:var(--muted);opacity:.8}
.woocommerce span.onsale{background:var(--red);border-radius:4px;min-height:0;padding:4px 8px;line-height:1.2}
.woocommerce a.button,.woocommerce button.button{background:var(--red);color:#fff;border-radius:4px}
.woocommerce div.product .product_title{font-family:var(--title-font);color:#fff}
.woocommerce div.product p.price{color:#fff;font-size:26px}
.woocommerce div.product p.price del{color:var(--muted)}

.page-hero{background:var(--ink-2);border-bottom:1px solid var(--line);padding:46px 0;text-align:center}
.page-hero h1{font-family:var(--title-font);font-size:clamp(26px,4vw,42px);color:#fff;margin:0}
.content-area{padding:46px 0;color:var(--text)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
  .slogan-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav-menu{display:none}
  .menu-toggle{display:block}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .slogan-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-badges img{height:36px}
}
/* Product detail: readable on the existing dark Kapno theme. */
.single-product .content-area{padding-top:32px}
.single-product.woocommerce div.product{display:flow-root}
.single-product.woocommerce div.product .woocommerce-product-gallery{width:47%;float:left;margin:0 0 36px}
.single-product.woocommerce div.product .summary{width:48%;float:right;margin:0 0 36px;min-width:0}
.single-product.woocommerce div.product .product_title{font-size:clamp(30px,3.4vw,46px);line-height:1.16;margin:0 0 20px;overflow-wrap:anywhere}
.single-product.woocommerce div.product p.price{color:#f0b07a;font-size:25px;margin:0 0 22px}
.single-product.woocommerce div.product p.price del{font-size:.72em;color:#a5a5a5;margin-right:8px}
.single-product.woocommerce div.product p.price ins{text-decoration:none}
.single-product .woocommerce-product-gallery__wrapper{background:#fff;border-radius:5px;overflow:hidden}
.single-product .woocommerce-product-gallery__image img{width:100%;height:auto;object-fit:contain}
.single-product.woocommerce div.product form.cart{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:24px 0}
.single-product.woocommerce div.product form.cart .quantity{float:none;margin:0;width:100%}
.single-product.woocommerce div.product form.cart input.qty{width:90px;min-height:48px;background:#262626;color:#fff;border:1px solid #666;border-radius:4px}
.single-product.woocommerce div.product form.cart button.button{float:none;flex:1 1 180px;min-height:50px;margin:0;padding:12px 18px;background:transparent;color:#fff;border:1px solid #d75630;border-radius:4px}
.single-product.woocommerce div.product form.cart button.kapno-buy-now{background:#d75630;color:#fff}
.single-product.woocommerce div.product form.cart button.button:hover{background:#b84322;color:#fff}
.single-product.woocommerce div.product form.cart .variations{width:100%}
.single-product.woocommerce div.product form.cart .variations label{color:#eee}
.single-product.woocommerce div.product form.cart select{max-width:100%;min-height:44px;color:#fff;background:#242424;border:1px solid #777}
.single-product .kapno-product-info{border:1px solid #484848;border-radius:5px;padding:18px 20px;margin:24px 0;color:#d3d3d3}
.single-product .kapno-product-info strong{color:#fff;font-size:17px}
.single-product .kapno-product-info p{margin:6px 0}
.single-product .kapno-product-info a{color:#f0b07a;text-decoration:underline}
.single-product.woocommerce div.product .woocommerce-tabs,.single-product.woocommerce .related.products{clear:both}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li{background:#242424;border-color:#555}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:#ddd}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#3a3a3a}
.single-product.woocommerce #review_form input:not([type=submit]),.single-product.woocommerce #review_form textarea{background:#242424;color:#fff;border:1px solid #666;max-width:100%}
.single-product.woocommerce .related ul.products li.product{float:none;width:auto;margin:0}
@media(max-width:640px){
 .header-row{position:relative;flex-wrap:wrap;gap:10px;min-height:68px;padding:10px 0}
 .header-row .custom-logo{max-width:140px;max-height:45px}
 .menu-toggle{margin-left:auto;min-width:44px;min-height:44px}
 .header-tools{gap:10px;font-size:12px}
 .nav-menu.show{display:flex;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 0 0;border-top:1px solid var(--line)}
 .nav-menu.show a{display:block;padding:10px 4px}
 .footer-input{flex-wrap:wrap}.footer-input input{min-width:0}
 .single-product .content-area{padding-top:20px}
 .single-product.woocommerce div.product .woocommerce-product-gallery,.single-product.woocommerce div.product .summary{width:100%;float:none;margin:0 0 24px}
 .single-product.woocommerce div.product .product_title{font-size:30px}
 .single-product.woocommerce div.product form.cart button.button{flex:1 1 calc(50% - 5px);min-width:0;font-size:14px}
 .single-product.woocommerce .related ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .single-product.woocommerce .related ul.products li.product .woocommerce-loop-product__title{overflow-wrap:anywhere}
}

@media(max-width:640px){.hero-track{height:440px}.hero-copy{padding:40px 18px 55px}.hero-copy h1{font-size:clamp(26px,7vw,34px)}.hero-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}.marquee-track{animation:none}}

/* Original banners already contain their own captions and badges. */
.hero-track{height:auto;aspect-ratio:1280/718;max-height:560px;background:#111}
.hero-img{object-fit:contain}
.hero-slide:after,.hero-copy{display:none}
.hero-dots{bottom:10px}
.hero-dots button{width:12px;height:12px;box-shadow:0 0 0 3px #0008}
.header-row .custom-logo,.header-row .brand img{filter:brightness(0) invert(1)}
@media(max-width:640px){.hero-track{height:auto;aspect-ratio:1280/718}.hero-dots{bottom:8px}}
.hero-track{aspect-ratio:auto;height:min(calc(100vw * .56094 + 26px),586px)}
.hero-slide{bottom:26px}
.hero-dots{bottom:7px}
@media(max-width:640px){.hero-track{aspect-ratio:auto;height:calc(100vw * .56094 + 26px)}.hero-dots{bottom:7px}}
/* Light appearance based on the reference storefront. */
:root{--ink:#eef0f2;--ink-2:#f2f3f4;--ink-3:#fff;--surface:#fff;--surface-2:#f6f6f6;--line:#d8dadd;--line-2:#a8acb0;--text:#252628;--muted:#6e7277;--gold:#ad4c27}
body,.site-header,.page-hero,.why{color:var(--text)}
.header-row .custom-logo,.header-row .brand img{filter:none}
.nav-menu a,.header-tools a,.menu-toggle{color:#27292c}
.nav-menu a:hover,.header-tools a:hover{color:#b54a26}
.section-title,.tab-title,.slogan-item h2,.why h2,.page-hero h1{color:#1d1e20}
.product-card .price,.woocommerce ul.products li.product .price{color:#222}
.product-card .thumb{background:#f9f9f9}
.tab-nav a.active{color:#222;border-color:#b54a26}
.single-product.woocommerce div.product .product_title{color:#1d1e20}
.single-product.woocommerce div.product p.price{color:#d54c2b}
.single-product.woocommerce div.product p.price del{color:#888}
.single-product.woocommerce div.product form.cart input.qty,.single-product.woocommerce div.product form.cart select{background:#fff;color:#222;border-color:#bbb}
.single-product.woocommerce div.product form.cart button.button{background:#fff;color:#c74824;border-color:#cf4d28}
.single-product.woocommerce div.product form.cart button.kapno-buy-now{background:#cf4d28;color:#fff}
.single-product.woocommerce div.product form.cart button.button:hover{background:#b84223;color:#fff}
.single-product.woocommerce div.product form.cart .variations label{color:#222}
.single-product .kapno-product-info{background:#fff;border-color:#d5d8da;color:#4b4e52}
.single-product .kapno-product-info strong{color:#222}
.single-product .kapno-product-info a{color:#a64122}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li{background:#e6e8ea;border-color:#c9cccf}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:#333}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff}
.single-product.woocommerce #review_form input:not([type=submit]),.single-product.woocommerce #review_form textarea{background:#fff;color:#222;border-color:#aaa}
.woocommerce .woocommerce-breadcrumb,.woocommerce .woocommerce-breadcrumb a,.woocommerce-result-count{color:#666}
.woocommerce div.product .woocommerce-tabs .panel,.woocommerce table.shop_table{color:#333}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:#c9cccf}
@media(max-width:640px){.nav-menu.show{background:#f2f3f4}}

.kapno-bundles { border:0; padding:0; margin: 0 0 18px; display:grid; gap:8px; }
.kapno-bundles legend { font-weight:700; margin-bottom:10px; color:#222; }
.kapno-bundle { display:flex; gap:10px; align-items:center; border:1px solid #d4d4d4; border-radius:6px; padding:12px; background:#fff; color:#222; cursor:pointer; }
.kapno-bundle:has(input:checked) { border-color:#d77731; background:#fff8f2; }
.kapno-bundle strong { margin-left:auto; }
.kapno-bundle input { accent-color:#d77731; }
.kapno-bundles small { color:#555; }
@media(max-width:600px){ .kapno-bundle { padding:10px; font-size:14px; } }