/*
 Theme Name: BJStoreOnline
 Theme URI: https://bjstoreonline.com
 Author: BJStoreOnline
 Description: WooCommerce-first theme with mobile bottom bar, off-canvas menu, hero slider and dynamic product rows.
 Version: 1.1.0
 License: GNU GPL v2 or later
 Text Domain: bjstoreonline
*/
:root{
  --brand-red:#DC143C;
  --brand-blue:#003893;
  --brand-green:#228B22;
  --brand-gray:#F5F7FA;
  --ink:#0f172a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,Arial,Helvetica,sans-serif;color:#111;background:#fff;line-height:1.6}
a{color:var(--brand-blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin:0 auto}
/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.6rem 0}
.logo a{font-weight:800;font-size:1.25rem;color:#111;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.header-actions{display:flex;gap:.5rem;align-items:center}
.header-search form{width:100%}
.search-field{width:100%;padding:.6rem .8rem;border:1px solid #e5e7eb;border-radius:.6rem}
/* Desktop nav */
.nav{display:flex;gap:1rem}
@media(max-width:960px){.nav{display:none}}
/* Mobile hamburger */
.hamburger{display:none;gap:.35rem;flex-direction:column}
.hamburger span{width:24px;height:2px;background:#111}
@media(max-width:960px){.hamburger{display:flex}}
/* Offcanvas */
.offcanvas{position:fixed;inset:0 0 0 auto;width:min(85%,320px);background:#fff;transform:translateX(100%);transition:.3s;z-index:1100;border-left:1px solid #eee;display:flex;flex-direction:column}
.offcanvas.open{transform:translateX(0)}
.offcanvas-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #eee}
.offcanvas-body{padding:1rem;overflow:auto}
.offcanvas-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.3s;z-index:1090}
.offcanvas-overlay.show{opacity:1;pointer-events:auto}
/* Hero */
.hero{position:relative;background:var(--brand-gray);border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;margin:0 0 1rem;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:center;padding:2rem 0}
.hero h1{font-size:clamp(1.6rem,3vw,2.5rem);margin:.25rem 0}
.hero p{margin:0 0 1rem}
.hero img{width:100%;height:auto;border-radius:.75rem}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr;padding:1.25rem 0}}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:.75rem;border:1px solid transparent;cursor:pointer;font-weight:700}
.btn.primary{background:var(--brand-blue);color:#fff}
.btn.light{background:#fff;color:#111;border-color:#eee}
/* Slider */
.slider{position:relative;overflow:hidden;border-radius:1rem}
.slides{display:flex;transition:transform .4s ease}
.slide{min-width:100%;position:relative}
.slide img{display:block;width:100%;height:auto}
.slider .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:.75rem;display:flex;gap:.4rem}
.slider .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.15);cursor:pointer}
.slider .dot.active{background:#fff}
.slider .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid #eee;border-radius:999px;padding:.4rem .55rem;cursor:pointer}
.slider .arrow.prev{left:.5rem}
.slider .arrow.next{right:.5rem}
/* Sections */
.section{padding:1.25rem 0}
.section h2{font-size:1.3rem;margin:.25rem 0 .75rem}
.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc(25% - .75rem);gap:1rem;overflow-x:auto;padding-bottom:.5rem}
.row-scroll::-webkit-scrollbar{height:8px}
.row-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
@media(max-width:1024px){.row-scroll{grid-auto-columns:calc(33.333% - .66rem)}}
@media(max-width:720px){.row-scroll{grid-auto-columns:70%}}
.card{background:#fff;border:1px solid #eee;border-radius:1rem;overflow:hidden}
.card .pad{padding:1rem}
/* Mobile bottom bar */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:none;z-index:1000}
.mobile-bar .inner{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.mobile-bar a{padding:.55rem .25rem;font-size:.75rem;display:grid;gap:.15rem;justify-items:center}
.mobile-bar svg{width:20px;height:20px}
@media(max-width:960px){.mobile-bar{display:block}; body{padding-bottom:56px}}
/* Woo product grid */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce a.button,.button{background:var(--brand-blue);color:#fff;border-radius:.5rem;padding:.6rem .9rem}
.woocommerce span.onsale{background:var(--brand-green)}
/* Breadcrumb */
.breadcrumb{background:#fff}