/*
Theme Name:   SpyAndMonitor Child
Theme URI:    https://spyandmonitor.com
Description:  Marketplace (Amazon-style) child theme for spyandmonitor.com — dark nav header with search, department bar, dense white product cards. Parent: Kadence.
Author:       Harry
Template:     kadence
Version:      0.3.0
License:      GNU General Public License v2 or later
Text Domain:  spyandmonitor-child
*/

:root{
  --nav:#0f1b2a; --nav2:#16283a; --bar2:#1c3350;
  --accent:#f4a936; --accent-d:#e08c1a; --deal:#c7511f;
  --link:#0a6e6f; --link-h:#c7511f;
  --page:#e9edf1; --card:#ffffff; --ink:#0f1418; --muted:#5a6b7b;
  --line:#dfe4ea; --line-soft:#eef1f4; --star:#f4a936;
  --radius:8px; --shadow:0 1px 3px rgba(15,20,24,.12); --shadow-h:0 6px 20px rgba(15,20,24,.16);
  --font:'Hanken Grotesk',system-ui,Arial,sans-serif;
  --maxw:1440px;
}
*{ box-sizing:border-box; }
body{ font-family:var(--font); background:var(--page); color:var(--ink); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-h); text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font); font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
img{ max-width:100%; height:auto; }
.sm-wrap,.az-in{ max-width:var(--maxw); margin-inline:auto; padding-inline:16px; }

/* ============ HEADER ============ */
.az-header{ position:sticky; top:0; z-index:999; }
.az-bar1{ background:var(--nav); }
.az-bar1-in{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; gap:14px; padding:8px 16px; }
.az-brand{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; white-space:nowrap; }
.az-brand:hover{ color:#fff; text-decoration:none; }
.az-brand svg{ width:26px; height:26px; }
.az-brand span{ background:linear-gradient(90deg,#fff,#cfe9df); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.az-search{ flex:1; display:flex; max-width:820px; height:42px; border-radius:8px; overflow:hidden; border:2px solid transparent; background:#fff; transition:border-color .15s; }
.az-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(244,169,54,.35); }
.az-search-cat select{ height:100%; border:0; background:#eef1f4; color:#333; font-size:.82rem; padding:0 8px; max-width:150px; cursor:pointer; border-right:1px solid #dcdfe3; }
.az-search input[type=text]{ flex:1; border:0; padding:0 12px; font-size:.95rem; outline:none; min-width:60px; }
.az-search-btn{ width:48px; border:0; background:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.az-search-btn:hover{ background:var(--accent-d); }
.az-search-btn svg{ width:20px; height:20px; }

.az-actions{ display:flex; align-items:center; gap:6px; }
.az-act,.az-cart{ color:#fff; display:flex; flex-direction:column; padding:6px 8px; border-radius:6px; line-height:1.15; white-space:nowrap; }
.az-act:hover,.az-cart:hover{ color:#fff; text-decoration:none; outline:1px solid rgba(255,255,255,.4); }
.az-act small{ font-size:.72rem; color:#cbd5e0; }
.az-act b,.az-cart b{ font-size:.85rem; font-weight:700; }
.az-cart{ flex-direction:row; align-items:flex-end; gap:4px; position:relative; }
.az-cart svg{ width:30px; height:30px; }
.az-cart-n{ position:absolute; left:20px; top:-2px; background:var(--accent); color:#0c1116; font-weight:800; font-size:.8rem; min-width:18px; height:18px; border-radius:9px; text-align:center; padding:0 4px; }

.az-bar2{ background:var(--bar2); }
.az-bar2-in{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; gap:2px; padding:4px 12px; overflow-x:auto; scrollbar-width:none; }
.az-bar2-in::-webkit-scrollbar{ display:none; }
.az-dept{ color:#eef2f6; font-size:.86rem; padding:6px 10px; border-radius:5px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.az-dept:hover{ color:#fff; text-decoration:none; outline:1px solid rgba(255,255,255,.35); }
.az-dept svg{ width:17px; height:17px; }
.az-dept--all{ font-weight:800; }
.az-dept--hot{ color:var(--accent); font-weight:700; }

/* ============ generic sections ============ */
.az-section{ max-width:var(--maxw); margin:16px auto; padding-inline:16px; }
.az-panel{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; }
.az-panel h2{ font-size:1.3rem; margin:0 0 14px; }
.az-panel .az-more{ font-weight:700; }
.az-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.az-head h2{ margin:0; font-size:1.3rem; }

/* ============ HERO BANNER ============ */
.az-hero{ position:relative; background:linear-gradient(105deg,#0c1622,#13314a 70%,#0e2740); color:#fff; overflow:hidden; }
.az-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 85% 10%,rgba(94,234,212,.22),transparent 55%); }
.az-hero-in{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:36px 16px 90px; }
.az-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); max-width:16ch; }
.az-hero p{ color:rgba(255,255,255,.85); max-width:52ch; margin:.6rem 0 1.2rem; font-size:1.05rem; }
.az-hero .az-btn{ margin-right:10px; }
.az-eyebrow{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#7ff0cf; font-weight:700; }

/* overlapping quick category cards */
.az-quickcards{ max-width:var(--maxw); margin:-70px auto 0; padding-inline:16px; position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.az-qcard{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; }
.az-qcard h3{ font-size:1.02rem; margin:0 0 10px; }
.az-qcard .az-qgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.az-qcard .az-qgrid a{ display:block; }
.az-qcard .az-qgrid img{ border-radius:6px; aspect-ratio:1; object-fit:cover; background:var(--line-soft); width:100%; }
.az-qcard .az-more{ margin-top:12px; font-weight:700; font-size:.85rem; }

/* ============ category card grid ============ */
.az-cardrow{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.az-ccard{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .18s,transform .18s; display:block; }
.az-ccard:hover{ box-shadow:var(--shadow-h); transform:translateY(-3px); text-decoration:none; }
.az-ccard img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.az-ccard .az-ccard-b{ padding:10px 12px 14px; }
.az-ccard b{ color:var(--ink); font-size:.92rem; display:block; line-height:1.25; }
.az-ccard small{ color:var(--muted); font-size:.78rem; }

/* ============ buttons ============ */
.az-btn,.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.wp-block-button__link,.single_add_to_cart_button,a.button,button.button{
  display:inline-flex !important; align-items:center; gap:.4em; justify-content:center;
  background:var(--accent) !important; color:#0c1116 !important; font-weight:700 !important;
  border:1px solid var(--accent-d) !important; border-radius:20px !important;
  padding:.55em 1.1em !important; font-size:.9rem !important; line-height:1.1 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06); cursor:pointer; transition:background .15s, transform .12s; text-decoration:none;
  white-space:nowrap !important; max-width:100%;
}
/* compact add-to-cart in dense product rows */
.az-panel ul.products li.product .button{ font-size:.8rem !important; padding:.5em .9em !important; }
ul.products li.product .button{ white-space:nowrap !important; }
.az-btn:hover,.woocommerce a.button:hover,.single_add_to_cart_button:hover,a.button:hover{
  background:var(--accent-d) !important; color:#0c1116 !important; transform:translateY(-1px); text-decoration:none;
}
.az-btn--ghost{ background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.6) !important; }
.az-btn--ghost:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.az-hero .az-btn{ background:var(--accent) !important; }

/* ============ product grid (marketplace cards) ============ */
.woocommerce ul.products,ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 !important; padding:0 !important; list-style:none; }
.woocommerce ul.products li.product,ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; list-style:none; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column;
  box-shadow:var(--shadow); transition:box-shadow .16s, transform .16s; position:relative;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--shadow-h); transform:translateY(-2px); }
.woocommerce ul.products li.product a img,ul.products li.product img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; background:var(--line-soft); margin:0 0 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.92rem; font-weight:600; line-height:1.32; color:var(--ink); padding:0; margin:0 0 4px; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .price{ font-size:1.15rem; font-weight:800; color:var(--ink); font-family:var(--font); margin:2px 0 8px; padding:0; white-space:nowrap; }
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol{ font-size:.8rem; vertical-align:top; }
.woocommerce ul.products li.product .button{ align-self:flex-start; margin:auto 0 0 !important; }
.woocommerce ul.products li.product .onsale{ position:absolute; top:10px; left:10px; background:var(--deal); color:#fff; border-radius:4px; padding:2px 8px; font-weight:700; font-size:.72rem; min-height:auto; }

/* star stub */
.az-stars{ position:relative; display:inline-block; font-size:14px; color:#cdd2d8; letter-spacing:1px; line-height:1; }
.az-stars::before{ content:"★★★★★"; }
.az-stars span{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--star); }
.az-stars span::before{ content:"★★★★★"; }
.az-ratecount{ font-size:.76rem; color:var(--link); margin-left:6px; }

/* product rows inside homepage panels: 6 across */
.az-panel ul.products{ grid-template-columns:repeat(6,1fr) !important; gap:12px; }
.az-panel ul.products li.product{ padding:10px; }
.az-panel ul.products li.product .woocommerce-loop-product__title{ font-size:.84rem; }
.az-panel ul.products li.product .price{ font-size:1rem; }

/* ============ shop / category pages ============ */
.woocommerce-products-header,.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{ }
.woocommerce-products-header{ background:#fff; border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); margin:16px 0; }
.woocommerce-products-header__title,.page-title{ font-size:1.5rem; }
.term-description{ color:var(--muted); }
.woocommerce .woocommerce-ordering select{ padding:6px 10px; border-radius:6px; border:1px solid var(--line); }
.woocommerce .woocommerce-result-count{ color:var(--muted); }

/* single product */
.single-product .product .product_title{ font-size:1.7rem; }
.single-product .product div.summary{ background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); }
.single-product .product .price{ font-size:1.6rem; font-weight:800; color:var(--ink); }
.sm-legal-footer{ margin-top:1rem; padding:.85rem 1rem; border:1px solid var(--line); border-left:3px solid var(--accent); background:#fff8ec; font-size:.85rem; line-height:1.5; color:#3a4550; border-radius:8px; }
.sm-legal-footer strong{ color:var(--ink); }
.woocommerce-tabs .tabs li a{ font-weight:700; }

/* ============ FOOTER ============ */
#colophon,.site-footer,.footer-wrap{ background:var(--nav) !important; color:#cbd5e0 !important; margin-top:30px; }
#colophon a,.site-footer a{ color:#cbd5e0 !important; }
#colophon a:hover,.site-footer a:hover{ color:#fff !important; }
.az-backtotop{ background:var(--nav2); text-align:center; }
.az-backtotop a{ display:block; color:#fff; padding:14px; font-weight:600; font-size:.9rem; }
.az-backtotop a:hover{ background:#20344a; text-decoration:none; }
.az-footcols{ background:var(--nav); }
.az-footcols-in{ max-width:1100px; margin-inline:auto; padding:34px 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.az-footcols h4{ color:#fff; font-size:.95rem; margin:0 0 12px; }
.az-footcols a{ display:block; color:#c3cdd8; font-size:.86rem; padding:3px 0; }
.az-footcols a:hover{ color:#fff; text-decoration:underline; }
.az-footbar{ background:#0a141f; color:#8fa0b0; text-align:center; font-size:.8rem; padding:16px; }

/* ============ responsive ============ */
@media(max-width:1024px){
  .az-cardrow{ grid-template-columns:repeat(3,1fr); }
  .az-quickcards{ grid-template-columns:repeat(2,1fr); }
  .woocommerce ul.products,ul.products{ grid-template-columns:repeat(3,1fr); }
  .az-prow{ grid-template-columns:repeat(4,1fr); }
  .az-footcols-in{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
  .az-act{ display:none; }
  .az-search-cat{ display:none; }
  .az-cardrow{ grid-template-columns:repeat(2,1fr); }
  .az-quickcards{ grid-template-columns:1fr 1fr; margin-top:-40px; }
  .woocommerce ul.products,ul.products{ grid-template-columns:1fr 1fr; }
  .az-prow{ grid-template-columns:repeat(2,1fr); }
  .az-footcols-in{ grid-template-columns:1fr 1fr; }
}