@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange:      #f5c518;
  --orange-dk:   #d4a80e;
  --orange-lt:   #fffbea;
  --blue:        #2567a5;
  --blue-dk:     #1b5289;
  --blue-lt:     #e6f0f8;
  --navy:        #0f2c4d;
  --navy-dk:     #071e36;
  --green:       #057a55;
  --green-lt:    #f0fdf4;
  --red:         #e02424;
  --red-lt:      #fef2f2;
  --white:       #ffffff;
  --off-white:   #f9fafb;
  --grey-50:     #f3f4f6;
  --grey-100:    #e5e7eb;
  --grey-200:    #d1d5db;
  --grey-300:    #9ca3af;
  --grey-400:    #6b7280;
  --grey-500:    #4b5563;
  --grey-600:    #374151;
  --grey-800:    #1f2937;
  --grey-900:    #111827;
  --text:        var(--grey-900);
  --text-2:      var(--grey-600);
  --text-3:      var(--grey-500);
  --text-4:      var(--grey-400);
  --border:      var(--grey-200);
  --border-lt:   var(--grey-100);
  --bg:          var(--off-white);
  --surface:     var(--white);
  --blue-mid:    #3b82f6;
  --blue-lt-var: var(--blue-lt);
  --teal:        #0891b2;
  --teal-lt:     #e0f2fe;
  --teal-dk:     #0e7490;
  --amber:       #d97706;
  --amber-lt:    #fffbeb;
  --amber-dk:    #b45309;
  --sky:         var(--blue-mid);
  --sky-lt:      var(--blue-lt);
  --svg-sky:     var(--blue);
  --svg-blue:    var(--blue);
  --svg-teal:    var(--teal);
  --svg-amber:   var(--amber);
  --danger:      var(--red);
  --danger-bg:   var(--red-lt);
  --danger-border:#fca5a5;
  --panel-dark-bg:   var(--navy);
  --panel-dark-bg2:  #132038;
  --panel-dark-text: var(--white);
  --panel-dark-sub:  var(--grey-400);
  --panel-dark-mute: #1a3052;
  --surface2:    var(--grey-50);
  --surface3:    var(--grey-100);
  --font-head:   'Poppins', system-ui, sans-serif;
  --font-body:   'Poppins', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --font-logo:   'Poppins', system-ui, sans-serif;
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   6px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 2px 8px rgba(37,103,165,.12);
  --shadow-lg:   0 6px 24px rgba(37,103,165,.14);
  --shadow-mega: 0 8px 32px rgba(0,0,0,.18);
  --hero-grad:   linear-gradient(120deg, #071e36 0%, #0f2c4d 40%, #2567a5 100%);
  --hero-glow:   radial-gradient(ellipse 70% 80% at 85% 50%, rgba(245,197,24,.15) 0%, transparent 65%);
  --login-grad:  linear-gradient(140deg, #071e36 0%, #0f2c4d 45%, #2567a5 100%);
  --login-deco1: radial-gradient(circle, rgba(37,103,165,.18), transparent 70%);
  --login-deco2: radial-gradient(circle, rgba(15,44,77,.14), transparent 70%);
  --login-em:    #7ec8f0;
}

html { font-size: 18px; scroll-behavior: smooth; }
body  { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.2; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dk); text-decoration: underline; }
img { display: block; max-width: 100%; }
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.bg-canvas { display: none; }
.container { max-width: 1260px; margin: 0 auto; padding: 0 1.2rem; width: 100%; }

.seo-h1 {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--text); line-height: 1.3;
}
.seo-h2 {
  font-family: var(--font-head); font-size: .96rem; font-weight: 700;
  color: var(--text); line-height: 1.3;
}
.seo-h3 {
  font-family: var(--font-body); font-size: .96rem; font-weight: 700;
  color: var(--text-2); line-height: 1.3;
}
.sec-head h2.seo-h2,
.sec-head .seo-h2 { font-size: 1.05rem; color: var(--text); }

.info-bar {
  background: var(--navy);
  color: var(--grey-400);
  font-size: .96rem;
  height: 30px;
  display: flex; align-items: center;
}
.info-bar-inner {
  max-width: 1260px; margin: 0 auto; padding: 0 1.2rem;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.info-bar-left { display: flex; align-items: center; gap: 1.5rem; }
.info-bar-phone { color: var(--white); font-family: var(--font-mono); font-size: .71rem; font-weight: 500; }
.info-bar-phone span { color: var(--grey-400); font-weight: 400; margin-left: .25rem; }
.info-bar-links a { color: var(--grey-400); margin-left: 1.1rem; font-size: .7rem; transition: color .15s; }
.info-bar-links a:hover { color: var(--white); text-decoration: none; }
.info-bar-right { display: flex; align-items: center; gap: .4rem; }
.cur-switcher { display: flex; gap: 2px; }
.cur-btn { background: none; border: 1px solid var(--panel-dark-mute); color: var(--grey-400); font-family: var(--font-mono); font-size: .71rem; font-weight: 500; padding: 1px 7px; border-radius: 2px; cursor: pointer; transition: all .15s; }
.cur-btn.active, .cur-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--navy); }

.main-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
.main-header-inner {
  max-width: 1260px; margin: 0 auto; padding: 0 1.2rem;
  display: flex; align-items: center; gap: 1.6rem;
}

.site-logo {
  flex-shrink: 0; text-decoration: none;
  display: flex; flex-direction: column; line-height: 1;
}
.site-logo-name {
  font-family: var(--font-logo); font-size: 1.75rem; font-weight: 800;
  color: var(--navy); letter-spacing: -.025em;
}
h1.site-logo-name { font-size: 1.75rem; line-height: 1; margin: 0; }
.site-logo-name span { color: var(--blue); }
.site-logo-tagline { font-size: .70rem; color: var(--grey-400); letter-spacing: .13em; text-transform: uppercase; margin-top: 3px; }
.site-logo:hover { text-decoration: none; }

.header-search { flex: 1; max-width: 600px; display: flex; }
.header-search input {
  flex: 1; border: 1.5px solid var(--grey-300); border-right: none;
  padding: .6rem 1rem; font-family: var(--font-body); font-size: .96rem;
  color: var(--text); background: var(--white);
  border-radius: var(--radius) 0 0 var(--radius); outline: none;
  transition: border-color .15s;
}
.header-search input:focus { border-color: var(--blue); }
.header-search input::placeholder { color: var(--grey-400); }
.header-search button {
  background: var(--blue); border: 1.5px solid var(--blue); border-left: none;
  color: var(--white); padding: 0 1.15rem; cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0; transition: background .15s;
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-body); font-size: .90rem; font-weight: 600;
}
.header-search button:hover { background: var(--blue-dk); border-color: var(--blue-dk); }

.header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex-shrink: 0; }
.hdr-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: .28rem .55rem; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; transition: all .15s;
  border: none; background: none; cursor: pointer; font-family: var(--font-body);
}
.hdr-btn:hover { background: var(--blue-lt); color: var(--blue); text-decoration: none; }
.hdr-btn svg { margin-bottom: 1px; }
.hdr-btn span { font-size: .81rem; color: var(--grey-400); white-space: nowrap; }
.cart-hdr-btn {
  display: flex; align-items: center; gap: .6rem;
  background: var(--orange); color: var(--navy);
  padding: .55rem 1rem; border-radius: var(--radius);
  text-decoration: none; transition: background .15s; flex-shrink: 0;
  font-weight: 700;
}
.cart-hdr-btn:hover { background: var(--orange-dk); color: var(--navy); text-decoration: none; }
.cart-hdr-info { display: flex; flex-direction: column; }
.cart-action-count { font-size: .81rem; opacity: .82; }
.cart-action-price { font-family: var(--font-mono); font-size: .90rem; font-weight: 600; }
.cart-action { display:flex; align-items:center; gap:.6rem; background:var(--orange); color:var(--navy); padding:.55rem 1rem; border-radius:var(--radius); text-decoration:none; transition:background .15s; font-weight:700; }
.cart-action:hover { background:var(--orange-dk); color:var(--navy); text-decoration:none; }
.cart-action-info { display:flex; flex-direction:column; }
.nav-action { display:flex; flex-direction:column; align-items:center; padding:.28rem .55rem; border-radius:var(--radius-sm); color:var(--text-2); text-decoration:none; transition:all .15s; border:none; background:none; cursor:pointer; font-family:var(--font-body); }
.nav-action:hover { background:var(--blue-lt); color:var(--blue); text-decoration:none; }
.nav-action svg { margin-bottom:1px; }
.nav-action span { font-size:.81rem; color:var(--grey-400); white-space:nowrap; }
#cart-badge { display: none; }

.cat-nav {
  background: var(--white);
  border-bottom: 2px solid var(--blue);
  position: sticky; top: 0; z-index: 300;
  box-shadow: var(--shadow-sm);
}
.cat-nav-inner {
  max-width: 1260px; margin: 0 auto; padding: 0 1.2rem;
  display: flex; align-items: stretch;
}
.cat-nav-item { position: relative; }
.cat-nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: 0 .95rem; height: 44px;
  font-size: .90rem; font-weight: 600; color: var(--grey-700, var(--grey-600));
  white-space: nowrap; cursor: pointer; transition: all .15s;
  text-decoration: none; border: none; background: none;
  font-family: var(--font-body); border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.cat-nav-link:hover, .cat-nav-item:hover > .cat-nav-link {
  color: var(--blue); background: var(--blue-lt); border-bottom-color: var(--blue);
  text-decoration: none;
}
.cat-nav-link.active { color: var(--blue); border-bottom-color: var(--blue); }
.cat-nav-link .chevron { font-size: .48rem; opacity: .6; transition: transform .2s; }
.cat-nav-item:hover .chevron { transform: rotate(180deg); }

.cat-dropdown { display:none; position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-mega); z-index:400; min-width:210px; padding:.4rem 0; border-radius:0 0 var(--radius) var(--radius); border-top:2px solid var(--blue); }
.cat-nav-item:hover .cat-dropdown { display:block; }
.mega-dropdown { display:none; position:fixed; left:0; right:0; top:auto; background:var(--white); border-top:2px solid var(--blue); border-bottom:1px solid var(--border); box-shadow:var(--shadow-mega); z-index:400; padding:1.5rem 0; }
.cat-nav-item:hover .mega-dropdown { display:block; }
.mega-inner { max-width:1260px; margin:0 auto; padding:0 1.2rem; display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; }
.mega-col-head { font-family:var(--font-body); font-size:1.0rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; padding-bottom:.35rem; border-bottom:1px solid var(--border); }
.mega-col ul { list-style:none; }
.mega-col li { margin-bottom:.2rem; }
.mega-col a { font-size:.86rem; color:var(--text-2); display:block; padding:.1rem 0; transition:color .15s; }
.mega-col a:hover { color:var(--blue); text-decoration:none; }
.mega-col a.mega-all { color:var(--blue); font-weight:600; margin-top:.3rem; }
.dd-item { display:flex; align-items:center; gap:.5rem; padding:.4rem 1rem; font-size:.8rem; color:var(--text-2); transition:background .15s; }
.dd-item:hover { background:var(--blue-lt); color:var(--blue); text-decoration:none; }
.dd-divider { height:1px; background:var(--border); margin:.25rem 0; }

.btn { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); font-size:.90rem; font-weight:600; padding:.5rem 1.1rem; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:all .16s; line-height:1; text-decoration:none; white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--orange); color:var(--navy); border-color:var(--orange); font-weight:700; }
.btn-primary:hover { background:var(--orange-dk); border-color:var(--orange-dk); color:var(--navy); }
.btn-outline { background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-outline:hover { background:var(--blue-lt); }
.btn-ghost { background:var(--grey-100); color:var(--text-2); border-color:var(--border); }
.btn-ghost:hover { background:var(--grey-200); }
.btn-teal { background:var(--teal); color:var(--white); border-color:var(--teal); }
.btn-teal:hover { filter:brightness(1.08); }
.btn-red { background:var(--red); color:var(--white); border-color:var(--red); }
.btn-sm { font-size:.90rem; padding:.36rem .78rem; }
.btn-lg { font-size:1.0rem; padding:.7rem 1.5rem; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:.95rem; }
.form-group label { display:block; font-size:1.0rem; font-weight:600; color:var(--text-2); margin-bottom:.3rem; }
.form-group input,.form-group select,.form-group textarea { width:100%; background:var(--white); border:1.5px solid var(--grey-300); color:var(--text); padding:.54rem .85rem; border-radius:var(--radius); font-family:var(--font-body); font-size:1.0rem; transition:border-color .15s,box-shadow .15s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-lt); }
.form-group textarea { min-height:100px; resize:vertical; }

.pcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
}
.pcard:hover { box-shadow: var(--shadow); border-color: var(--blue); }
.pcard-linked { cursor: pointer; }
.pcard-overlay-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.pcard-linked .pcard-name a,
.pcard-linked .pcard-foot a,
.pcard-linked .pcard-foot button { position:relative; z-index:2; }
.pcard-img { padding: 1rem; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: var(--white); }
.pcard-img img { max-width:100%; max-height:100%; object-fit:contain; }
.pcard-body { padding:.55rem .85rem; flex:1; display:flex; flex-direction:column; }
.pcard-code { font-size:.71rem; color:var(--text-4); font-family:var(--font-mono); margin-bottom:.22rem; text-transform:uppercase; letter-spacing:.04em; }
.pcard-name { font-size:.90rem; font-weight:600; color:var(--text); line-height:1.38; flex:1; margin-bottom:.3rem; font-family:var(--font-body); }
.pcard-name a { color:var(--text); }
.pcard-name a:hover { color:var(--blue); text-decoration:none; }
.pcard-stars { color:#f59e0b; font-size:1.0rem; }
.pcard-rev { color:var(--text-4); font-size:.96rem; }
.pcard-avail { font-size:.7rem; margin-top:.25rem; font-weight:600; }
.avail-yes { color:var(--green); }
.avail-low { color:var(--amber); }
.avail-no  { color:var(--red); }
.pcard-foot { padding:.6rem .85rem .85rem; border-top:1px solid var(--border-lt); display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.pcard-price { font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--blue); line-height:1; }
.pcard-price-vat { font-size:.6rem; color:var(--text-4); font-weight:400; display:block; margin-top:1px; }
.pcard-add { background:var(--orange); color:var(--navy); border:none; border-radius:var(--radius-sm); padding:.42rem .72rem; cursor:pointer; display:flex; align-items:center; gap:.28rem; font-size:.81rem; font-weight:700; transition:background .15s; white-space:nowrap; font-family:var(--font-body); }
.pcard-add:hover { background:var(--orange-dk); }

.badge { display:inline-block; font-size:.61rem; font-weight:700; padding:2px 6px; border-radius:2px; text-transform:uppercase; letter-spacing:.04em; }
.badge-new   { background:var(--blue); color:var(--white); }
.badge-sale  { background:var(--red); color:var(--white); }
.badge-top   { background:var(--orange); color:var(--navy); }
.badge-low   { background:var(--amber); color:var(--white); }
.badge-stock { background:var(--green-lt); color:var(--green); border:1px solid #b5deb8; }
.in-stock  { color:var(--green); font-size:.96rem; font-weight:600; }
.low-stock { color:var(--amber); font-size:.96rem; font-weight:600; }
.out-stock { color:var(--red); font-size:.96rem; }
.s-in { color:var(--green); } .s-low { color:var(--amber); } .s-out { color:var(--red); }

.section-title { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--text); }
.section-sub { font-size:.8rem; color:var(--text-3); margin-bottom:1.1rem; }
.section-label { font-size:.81rem; color:var(--text-4); text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:.3rem; }
.chip { display:inline-flex; align-items:center; background:var(--blue-lt); color:var(--blue-dk); border:1px solid #a8c8ef; border-radius:2px; font-size:.68rem; font-family:var(--font-mono); font-weight:500; padding:1px 5px; }
.chip-teal  { background:var(--teal-lt); color:var(--teal); border-color:#9dd4ca; }
.chip-amber { background:var(--amber-lt); color:var(--amber); border-color:#f5d5b8; }
.toggle { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.toggle-track { width:36px; height:20px; background:var(--grey-300); border-radius:10px; position:relative; transition:background .2s; }
.toggle-track::before { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:var(--shadow-sm); }
.toggle input { display:none; }
.toggle input:checked + .toggle-track { background:var(--blue); }
.toggle input:checked + .toggle-track::before { transform:translateX(16px); }
.toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; background:var(--navy); color:#fff; padding:.7rem 1.1rem; border-radius:var(--radius); font-size:.8rem; box-shadow:var(--shadow-lg); border-left:3px solid var(--orange); opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none; }
.toast.show { opacity:1; transform:translateY(0); }
.rule { height:1px; background:var(--border); margin:1.5rem 0; }
.pagination { display:flex; gap:.25rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.page-btn { min-width:32px; height:32px; padding:0 .5rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--white); border-radius:var(--radius-sm); font-size:1.0rem; color:var(--text-2); text-decoration:none; transition:all .15s; cursor:pointer; font-family:var(--font-mono); }
.page-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-lt); text-decoration:none; }
.page-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.page-btn.disabled { opacity:.4; pointer-events:none; }
.page-ellipsis { line-height:32px; color:var(--text-4); padding:0 .2rem; }

.breadcrumb { background:var(--white); border-bottom:1px solid var(--border); padding:.5rem 0; }
.breadcrumb-inner { max-width:1260px; margin:0 auto; padding:0 1.2rem; font-size:.81rem; color:var(--text-4); display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.breadcrumb-inner a { color:var(--blue); }
.breadcrumb-inner a:hover { text-decoration:underline; }
.breadcrumb-sep { color:var(--grey-300); }

.shop-layout { display:flex; width:100%; align-items:start; gap:0; }
.sidebar { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sidebar-head { padding:.62rem .9rem; background:var(--navy); color:#fff; font-family:var(--font-body); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.filter-group { border-bottom:1px solid var(--border); }
.filter-group-head { padding:.58rem .9rem; font-size:.84rem; font-weight:700; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:space-between; background:var(--grey-50); }
.filter-group-head:hover { background:var(--blue-lt); color:var(--blue); }
.filter-group-body { padding:.42rem .9rem .62rem; }
.filter-opt { display:flex; align-items:center; gap:.45rem; padding:.18rem 0; cursor:pointer; }
.filter-opt input { accent-color:var(--blue); cursor:pointer; }
.filter-opt label { font-size:.82rem; color:var(--text-2); cursor:pointer; flex:1; display:flex; justify-content:space-between; }
.filter-opt input:checked + label { color:var(--blue); font-weight:600; }
.f-cnt { color:var(--text-4); font-size:.72rem; }

footer { background:var(--white); border-top:1px solid var(--border); margin-top:auto; }
.footer-top { background:var(--navy); color:var(--grey-400); padding:2.5rem 0 1.5rem; }
.footer-grid { max-width:1260px; margin:0 auto; padding:0 1.2rem; display:grid; grid-template-columns:1.8fr repeat(4,1fr); gap:2rem; margin-bottom:2rem; }
.footer-brand-name { font-family:var(--font-head); font-size:.95rem; font-weight:700; color:#fff; margin-bottom:.5rem; }
.footer-brand-name span { color:var(--orange); }
.footer-brand p { font-size:.80rem; line-height:1.7; color:var(--grey-400); max-width:220px; }
.footer-col-head { font-family:var(--font-body); font-size:.76rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.09em; margin-bottom:.75rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.28rem; }
.footer-col a { color:var(--grey-400); font-size:.78rem; transition:color .15s; }
.footer-col a:hover { color:var(--orange); text-decoration:none; }
.footer-bottom-bar { background:var(--navy); border-top:1px solid var(--panel-dark-mute); padding:.85rem 0; }
.footer-bottom-inner { max-width:1260px; margin:0 auto; padding:0 1.2rem; display:flex; align-items:center; justify-content:space-between; font-size:.7rem; color:var(--grey-500); }
.footer-payment { display:flex; align-items:center; gap:.45rem; }
.pay-badge { background:#fff; border:1px solid var(--grey-200); border-radius:3px; padding:2px 7px; font-family:var(--font-mono); font-size:.6rem; font-weight:700; color:var(--grey-600); }

.page-content { max-width:900px; margin:0 auto; padding:2rem 1.2rem 4rem; }
.page-content h2 { font-size:.83rem; font-family:var(--font-body); color:var(--blue); letter-spacing:.06em; text-transform:uppercase; margin:2rem 0 .5rem; padding-bottom:.35rem; border-bottom:2px solid var(--blue-lt); }
.page-content p,.page-content li { font-size:.83rem; color:var(--text-2); line-height:1.8; margin-bottom:.5rem; }
.page-content ul,.page-content ol { padding-left:1.3rem; }
.page-content strong { color:var(--text); }
.page-content a { color:var(--blue); }
.callout { background:var(--blue-lt); border-left:3px solid var(--blue); padding:.75rem 1rem; margin:1rem 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.callout p { margin:0; }

@media (max-width:1024px) { .mega-inner { grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px) { .shop-layout { flex-direction:column; } .sidebar { position:static!important; } .cat-nav-inner { overflow-x:auto; } .mega-dropdown { display:none!important; } }
@media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } .info-bar-links { display:none; } .header-search { display:none; } .form-row { grid-template-columns:1fr; } }
@media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } }

.cb-text {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem 2rem; margin-top: 1.6rem;
}
.cb-text h1 { font-family:var(--font-head); font-size:1.25rem; font-weight:800; color:var(--navy); margin-bottom:.5rem; line-height:1.2; }
.cb-text h3 { font-family:var(--font-body); font-size:.80rem; font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem; }
.cb-text p  { font-size:.86rem; color:var(--text-2); line-height:1.8; }

.cb-two {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-top:1.6rem;
}
.cb2-img { overflow:hidden; background:var(--grey-50); min-height:260px; }
.cb2-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cb2-img-ph { width:100%; height:100%; min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.85rem; color:var(--text-4); background:linear-gradient(135deg,var(--blue-lt) 0%,var(--grey-50) 100%); }
.cb2-text { padding:2rem 2.2rem; display:flex; flex-direction:column; justify-content:center; }
.cb2-text h1 { font-family:var(--font-head); font-size:1.15rem; font-weight:800; color:var(--navy); margin-bottom:.45rem; line-height:1.22; }
.cb2-text h3 { font-family:var(--font-body); font-size:.78rem; font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.65rem; }
.cb2-text p  { font-size:.84rem; color:var(--text-2); line-height:1.8; margin-bottom:1.1rem; }

.cb-three {
  display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:0;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-top:1.6rem;
}
.cb3-col { padding:2rem 1.8rem; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--border); }
.cb3-col:last-child { border-right:none; }
.cb3-col-img { overflow:hidden; background:var(--grey-50); border-right:1px solid var(--border); }
.cb3-col-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cb3-col-img .cb2-img-ph { min-height:280px; }
.cb3-col h1 { font-family:var(--font-head); font-size:1.0rem; font-weight:800; color:var(--navy); margin-bottom:.4rem; line-height:1.22; }
.cb3-col h3 { font-family:var(--font-body); font-size:.76rem; font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.55rem; }
.cb3-col p  { font-size:.82rem; color:var(--text-2); line-height:1.78; }

.cb-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--blue); color:var(--white); border:none; border-radius:var(--radius); padding:.55rem 1.15rem; margin-top:1rem; font-family:var(--font-body); font-size:.80rem; font-weight:700; text-decoration:none; cursor:pointer; transition:background .15s; align-self:flex-start; }
.cb-btn:hover { background:var(--blue-dk); color:var(--white); text-decoration:none; }
.cb-btn-yellow { background:var(--orange); color:var(--navy); }
.cb-btn-yellow:hover { background:var(--orange-dk); color:var(--navy); }

@media (max-width: 860px) {
  .cb-two  { grid-template-columns:1fr; }
  .cb2-img { min-height:200px; }
  .cb-three { grid-template-columns:1fr; }
  .cb3-col { border-right:none; border-bottom:1px solid var(--border); }
  .cb3-col:last-child { border-bottom:none; }
  .cb3-col-img { border-right:none; border-bottom:1px solid var(--border); }
}
@media (max-width: 640px) {
  .cb-text  { padding:1.3rem 1.2rem; }
  .cb2-text { padding:1.3rem 1.2rem; }
  .cb3-col  { padding:1.3rem 1.2rem; }
}

.burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; gap: 5px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; flex-shrink: 0;
  transition: border-color .15s;
}
.burger:hover { border-color: var(--blue); }
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 800;
}
.mob-overlay.open { display: block; }

.mob-drawer {
  position: fixed; top: 0; left: -100%; width: 300px; max-width: 85vw;
  height: 100%; background: var(--surface);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
  z-index: 900; display: flex; flex-direction: column;
  transition: left .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mob-drawer.open { left: 0; }

.mob-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--navy); flex-shrink: 0;
}
.mob-drawer-logo {
  font-family: var(--font-logo); font-size: 1.2rem; font-weight: 800;
  color: #fff; text-decoration: none;
}
.mob-drawer-logo span { color: var(--orange); }
.mob-drawer-close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 1.4rem; cursor: pointer; line-height: 1; padding: .2rem .4rem;
}
.mob-drawer-close:hover { color: #fff; }

.mob-search {
  display: flex; margin: .8rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.mob-search input {
  flex: 1; border: none; padding: .55rem .8rem;
  font-family: var(--font-body); font-size: .88rem;
  background: var(--surface); color: var(--text); outline: none;
}
.mob-search button {
  background: var(--blue); border: none; color: #fff;
  padding: 0 .8rem; cursor: pointer;
}

.mob-nav { list-style: none; flex: 1; }
.mob-nav li { border-bottom: 1px solid var(--border-lt); }
.mob-nav a {
  display: block; padding: .78rem 1.1rem;
  font-size: .92rem; font-weight: 600; color: var(--text);
  text-decoration: none; transition: background .12s;
}
.mob-nav a:hover { background: var(--blue-lt); color: var(--blue); }
.mob-nav .mob-sub { list-style: none; background: var(--grey-50); }
.mob-nav .mob-sub li { border-bottom: none; }
.mob-nav .mob-sub a {
  font-size: .84rem; font-weight: 400; color: var(--text-2);
  padding: .5rem 1.8rem;
}
.mob-nav .mob-sub a:hover { color: var(--blue); }
.mob-nav-divider {
  font-size: .68rem; font-weight: 700; color: var(--text-4);
  text-transform: uppercase; letter-spacing: .1em;
  padding: .7rem 1.1rem .3rem; background: var(--grey-50);
}

.mob-drawer-foot {
  padding: .9rem 1.1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
  background: var(--grey-50);
}
.mob-drawer-foot .cur-btn {
  flex: 1; text-align: center; padding: .4rem .2rem; font-size: .75rem;
}

@media (max-width: 768px) {
  .burger { display: flex; }
  .header-search { display: none; }
  .cat-nav { display: none; }
  .info-bar-links { display: none; }
}
@media (min-width: 769px) {
  .mob-overlay, .mob-drawer { display: none !important; }
}