/* ============================================
   Auto Smiles Kenya — Shared Styles
   ============================================ */
:root{
  --black: #17171b;
  --panel: #151518;
  --panel-2: #1c1c20;
  --gold: #c9a13b;
  --brass: #e8b74d;
  --white: #f2f0ea;
  --muted: #8f8b82;
  --line: rgba(201,161,59,0.25);
  --danger: #e5533d;
  --success: #4caf7d;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden;}
body{
  background:
    radial-gradient(ellipse 1200px 800px at 15% 0%, rgba(201,161,59,0.09), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 100% 30%, rgba(80,72,50,0.22), transparent 55%),
    var(--black);
  color:var(--white);
  font-family:'Manrope', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.logo-text{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1200px; margin:0 auto; padding:0 32px;}
button{font-family:inherit; cursor:pointer;}
input, textarea, select{font-family:inherit;}

/* NAV */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky; top:0; z-index:50;
  background:rgba(23,23,27,0.9);
  backdrop-filter:blur(8px);
}
.badge{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
}
.badge img{
  width:100%; height:100%; object-fit:contain;
}
.badge::after{
  content:""; position:absolute; top:-50%; left:-150%;
  width:60%; height:200%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:rotate(20deg);
  transition:left .8s ease;
}
.brand:hover .badge::after{ left:150%; }
.badge span{ font-family:'Oswald', sans-serif; font-weight:700; font-size:11px; color:#0b0b0d; }
.brand{display:flex; align-items:center; gap:14px;}
.brand-copy{display:flex; flex-direction:column; line-height:1.1;}
.brand-copy .top{font-size:16px; font-weight:600; letter-spacing:0.12em;}
.brand-copy .bottom{font-size:9px; color:var(--gold); letter-spacing:0.2em;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); transition:color .25s;}
.nav-links a.active, .nav-links a:hover{color:var(--gold);}
.nav-right{display:flex; align-items:center; gap:16px;}
.cart-pill{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:8px 14px; border-radius:999px;
  font-size:13px; color:var(--white);
}
.cart-pill .dot{
  background:var(--gold); color:#0b0b0d; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.mobile-toggle{display:none; background:none; border:none; color:var(--white); font-size:22px;}
@media (max-width:480px){
  nav{padding:14px 16px; gap:8px;}
  .badge{width:38px; height:38px;}
  .brand{gap:8px;}
  .brand-copy .top{font-size:12px; letter-spacing:0.06em;}
  .brand-copy .bottom{font-size:7px; letter-spacing:0.1em;}
  .nav-right{gap:8px;}
  .cart-pill{padding:6px 10px; font-size:11px; gap:5px;}
  .mobile-toggle{font-size:18px;}
}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-links .mobile-cart{display:none;}

/* PAGE HEADER (non-hero pages) */
.page-header{
  padding:70px 0 40px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:radial-gradient(ellipse at 80% 0%, rgba(201,161,59,0.08), transparent 60%);
}
.page-header .label{font-size:12px; letter-spacing:0.24em; color:var(--gold); text-transform:uppercase;}
.page-header h1{font-size:clamp(28px,4vw,42px); font-weight:600; margin-top:10px;}
.breadcrumb{margin-top:14px; font-size:13px; color:var(--muted);}
.breadcrumb a:hover{color:var(--gold);}
.compact-header{padding:36px 0;}
.compact-header-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
}
.compact-header h1{font-size:clamp(22px,3vw,28px); margin-top:6px;}
.compact-header .breadcrumb{margin-top:0;}


/* SECTION */
.section{padding:80px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:44px; flex-wrap:wrap; gap:20px;
}
.section-head .label{font-size:12px; letter-spacing:0.24em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:600;}
.view-all{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .25s, border-color .25s;
  white-space:nowrap;
}
.view-all:hover{color:var(--gold); border-color:var(--gold);}

/* BUTTONS */
.btn-gold{
  background:var(--gold); color:#0b0b0d; font-weight:700;
  padding:15px 30px; border:none; border-radius:2px; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase;
  transition:background .25s ease, transform .25s ease;
  display:inline-block;
}
.btn-gold:hover{background:var(--brass); transform:translateY(-2px);}
.btn-gold:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
.btn-outline{
  border:1px solid rgba(255,255,255,0.25); color:var(--white); background:transparent;
  padding:15px 30px; border-radius:2px; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase;
  transition:border-color .25s ease, color .25s ease;
}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}

/* SEARCH BAR (Shop page) - icon-triggered, expands on click */
.search-icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--white); font-size:15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.search-icon-btn:hover{border-color:var(--gold); color:var(--gold);}
.search-input{
  background:var(--panel); border:1px solid rgba(255,255,255,0.08); color:var(--white);
  padding:0; font-size:14px; border-radius:999px;
  max-width:0; opacity:0; overflow:hidden; border-width:0;
  transition:max-width .3s ease, opacity .2s ease, padding .3s ease;
}
.search-input.search-input-open{max-width:280px; opacity:1; padding:11px 18px; border-width:1px;}
.search-input::placeholder{color:var(--muted);}
.search-input:focus{outline:none; border-color:var(--gold);}


.filter-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.filter-chip{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  background:transparent; transition:all .2s ease;
}
.filter-chip.active, .filter-chip:hover{background:var(--gold); color:#0b0b0d; border-color:var(--gold);}
.shop-toolbar{padding-top:16px; padding-bottom:12px;}
.shop-products-section{padding-top:12px;}

/* PRODUCT GRID + CARD */
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; width:100%;}
.card{
  background:var(--panel); border:1px solid rgba(255,255,255,0.05); border-radius:4px;
  overflow:hidden; display:flex; flex-direction:column; min-width:0;
  transition:border-color .3s ease, transform .3s ease; position:relative;
}
.card:hover{border-color:var(--line); transform:translateY(-4px);}
.card-media{height:190px; background:var(--panel-2); position:relative; overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.sale-tag{
  position:absolute; top:12px; left:12px; background:var(--gold); color:#0b0b0d;
  font-size:10px; font-weight:700; letter-spacing:0.08em; padding:5px 10px; border-radius:999px; text-transform:uppercase;
}
.card-body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.cat{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em;}
.pname{font-size:15px; font-weight:600; letter-spacing:0; overflow-wrap:break-word; word-break:break-word;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-top:auto;}
.price{color:var(--brass); font-weight:700; font-size:15px;}
.price-old{color:var(--muted); text-decoration:line-through; font-size:13px;}
.add-btn{
  margin-top:12px; width:100%; padding:11px 0; border:1px solid var(--line); color:var(--white);
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; background:transparent; border-radius:2px;
  transition:background .25s ease, color .25s ease;
}
.add-btn:hover{background:var(--gold); color:#0b0b0d;}
.empty-state{color:var(--muted); font-size:14px; padding:40px 0; text-align:center;}

/* PRODUCT DETAIL */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.product-gallery{background:var(--panel); border:1px solid rgba(255,255,255,0.05); border-radius:4px; height:440px; overflow:hidden;}
.product-gallery img{width:100%; height:100%; object-fit:cover;}
.gallery-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:nowrap;overflow-x: auto;padding-bottom: 8px;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
.thumb{
  width:64px; height:64px; border-radius:4px; overflow:hidden; padding:0;
  border:2px solid rgba(255,255,255,0.08); background:var(--panel-2); cursor:pointer;
  transition:border-color .2s ease;
  flex-shrink: 0;
}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb.active, .thumb:hover{border-color:var(--gold);}
.product-info .cat{margin-bottom:10px; display:block;}
.product-info h1{font-size:30px; margin-bottom:16px;}
.product-info .price-row{margin-bottom:24px;}
.product-info .price{font-size:24px;}
.product-desc{color:var(--muted); font-size:15px; margin-bottom:30px;}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:24px;}
.qty-control{display:flex; align-items:center; border:1px solid var(--line); border-radius:2px;}
.qty-control button{background:none; border:none; color:var(--white); width:38px; height:40px; font-size:16px;}
.qty-control input{
  width:44px; text-align:center; background:none; border:none; color:var(--white); font-size:14px;
}

/* COLOR SWATCHES (product detail) */
.color-swatches{display:flex; gap:10px; flex-wrap:wrap;}
.color-chip{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
  background:transparent; transition:all .2s ease;
}
.color-chip.active, .color-chip:hover{background:var(--gold); color:#0b0b0d; border-color:var(--gold);}

/* CART PAGE */
.cart-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start;}
.cart-item{
  display:grid; grid-template-columns:80px 1fr auto auto; gap:18px; align-items:center;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.06);
}
.cart-item img{width:80px; height:80px; object-fit:cover; border-radius:4px; background:var(--panel-2);}
.cart-item .name{font-weight:600; font-size:14px; margin-bottom:6px;}
.cart-item .unit-price{color:var(--muted); font-size:13px;}
.cart-item .remove{color:var(--danger); font-size:12px; margin-top:6px; display:inline-block;}
.summary-card{
  background:var(--panel); border:1px solid rgba(255,255,255,0.05); border-radius:4px; padding:28px;
}
.summary-row{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:14px;}
.summary-row.total{color:var(--white); font-weight:700; font-size:17px; border-top:1px solid rgba(255,255,255,0.08); padding-top:16px; margin-top:6px;}
.summary-row.total .price{color:var(--brass);}
.field{margin-bottom:16px;}
.field label{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px;}
.field input, .field textarea{
  width:100%; background:var(--panel-2); border:1px solid rgba(255,255,255,0.08); color:var(--white);
  padding:12px 14px; border-radius:2px; font-size:14px;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
#orderStatus{margin-top:16px; font-size:13px; padding:12px; border-radius:2px; display:none;}
#orderStatus.show{display:block;}
#orderStatus.pending{background:rgba(201,161,59,0.1); color:var(--brass); border:1px solid var(--line);}
#orderStatus.success{background:rgba(76,175,125,0.1); color:var(--success); border:1px solid rgba(76,175,125,0.3);}
#orderStatus.error{background:rgba(229,83,61,0.1); color:var(--danger); border:1px solid rgba(229,83,61,0.3);}

/* CONTACT PAGE */
.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact-form .field{margin-bottom:20px;}

/* POLICY PAGES */
.policy-body{max-width:760px;}
.policy-body h2{font-size:20px; margin:30px 0 14px; color:var(--gold);}
.policy-body p, .policy-body li{color:var(--muted); font-size:15px; margin-bottom:12px;}
.policy-body ul{padding-left:20px;}

/* FOOTER */
footer{padding:80px 0 30px; background:var(--black); border-top:1px solid rgba(255,255,255,0.06);}
.footer-grid{display:grid; grid-template-columns:1.2fr 0.8fr 0.9fr 0.9fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.06);}
.fcol .ftitle{font-size:13px; letter-spacing:0.14em; color:var(--gold); text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.fcol .ftitle::before{content:""; width:3px; height:16px; background:var(--gold);}
.fitem{display:flex; gap:14px; margin-bottom:20px; align-items:flex-start;}
.ficon{width:36px; height:36px; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold); font-size:15px;}
.fitem .flabel{font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:3px;}
.fitem .fvalue{font-size:14px; color:var(--muted);}
.fitem .fvalue a{transition:color .2s ease;}
.fitem .fvalue a:hover{color:var(--gold);}
.flinks a{display:block; margin-bottom:14px; font-size:14px; color:var(--muted); transition:color .2s ease; position:relative; padding-left:18px;}
.flinks a::before{content:"○"; position:absolute; left:0; color:var(--gold); font-size:10px; top:3px;}
.flinks a:hover{color:var(--gold);}
.socials{display:flex; gap:12px; margin-top:4px;}
.social{width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .25s ease, color .25s ease;}
.social:hover{background:var(--gold); color:#0b0b0d;}
.bottom-bar{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px;}

@media (max-width:1000px){
  .product-detail, .cart-layout, .contact-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
  
  /* Mobile Menu Styles */
  .mobile-toggle { display:block; }
  .nav-links {
    display:none; /* Hidden by default on mobile */
    position:absolute; top:100%; left:0; width:100%;
    background:var(--panel);
    flex-direction:column; padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .nav-links.open { display:flex; } /* Shown when toggled via JS */

  /* Shrinks the image so the options fit on the screen */
  .product-gallery { height: 320px; } 

 /* Force the product image to the top on mobile and kill the 60px gap */
 .product-detail { display: flex; flex-direction: column; gap: 10px !important; }
 .product-gallery-wrap { order: 1; margin-bottom: 0 !important; }
 .product-info { order: 2; }
}
/* SEARCH BAR */
.shop-search {
  width: 100%;
  max-width: 280px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  outline: none;
  margin-left: auto; 
}
.shop-search:focus {
  border-color: var(--gold);
}
@media (max-width: 560px) {
  .shop-search { max-width: 100%; margin-left: 0; margin-top: 10px; }
}
/* -- FOOTER MOBILE FIX -- */
@media (max-width: 768px) {
  /* Forces the footer into a single column on all phone sizes */
  .footer-grid { 
    grid-template-columns: 1fr !important; 
  }
  
  /* Stacks the very bottom copyright bar so it doesn't squish */
  .bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
/* --- Shop Header Gap & Mobile Grid Fix --- */
@media (max-width: 768px) {
  .page-header {
    padding: 30px 0 20px !important;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}