/* --- Tokens --- */
:root{
  --brand:#2585ff;
  --ink:#111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:1200px;margin:0 auto;padding:0 16px;overflow: visible;}

/* --- Buttons / inputs --- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.btn-ghost{background:#fff;color:#0c3d7a}
input[type="search"]{padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%}

/* --- Header top row --- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2000;overflow: visible;}
/* Header top row: 3-column grid */
.header-top{
  display:grid;
  grid-template-columns:auto 1fr auto; /* logo | title | whatsapp */
  align-items:center;
  gap:16px;
  min-height:110px;
}

/* Left: logo */
.brand{display:flex;align-items:center;text-decoration:none}
.logo{
  height:100px;            /* adjust if needed */
  width:auto;
}

/* Center: title */
.brand-name{
  justify-self:center;     /* horizontally center in the middle column */
  text-align:center;
  font-family:"Times New Roman", Times, serif;
  font-weight:700;
  font-size:3rem;          /* adjust 2.4rem–3rem to taste */
  color:#0c3d7a;
  white-space:nowrap;
}

/* Right: WhatsApp button (keep border) */
.wa-btn{
  justify-self:end;        /* pin to right edge */
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  background:#fff;
}
.wa-btn:hover{background:#f7f7f9}

/* Responsive tuning */
@media (max-width:820px){
  .brand-name{font-size:2.2rem}
  .logo{height:80px}
}
@media (max-width:560px){
  .brand-name{font-size:1.6rem; white-space:normal; line-height:1.15; padding:0 8px}
  .logo{height:64px}
}

/* --- Header bottom row (SEARCH + LOGIN + CART + DEPARTMENTS) --- */
/* ===== Controls row ===== */
.header-mid{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.mid-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
}
.search-wide{flex:1; display:flex; gap:8px;}
.search-wide input{min-width:220px}



/* Departments row container */
.header-depts{
  background: #e8f2ff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;     /* anchor + stacking */
  z-index:2100;            /* above hero */
  overflow: visible;
}

/* Base nav line */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  list-style:none;
  margin:0; padding:0 8px;
  min-height:48px;
  overflow: visible;
}

/* Top-level items as plain text buttons/links */
.nav > li { position:relative; }
.nav > li > a,
.nav > li > button{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit;
  padding:10px 6px;
  transition:color .15s ease;
  text-decoration: none;   /* ← removes underline */
  color: inherit;
}
.nav > li > a:hover,
.nav > li > button:hover{
    color: #2585ff;                 /* bright blue hover */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Submenu panel */
.submenu{
  position:absolute;
  left:0; top:100%;
  min-width:220px;
  background:#fff;                   /* solid so hero never shows through */
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  padding:8px;
  display:none;                       /* default hidden */
  z-index: 2200;
}
/* Open on hover (desktop) and on focus (keyboard/click) */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{
  display:block;
}
.submenu a{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:10px 12px;
  border-radius:8px;
}
.submenu a:hover{ background:#f7f7f9; }

/* Desktop hover: simple and reliable */
@media (hover:hover){
  .has-sub:hover > .submenu{ display:block; }
}

/* Mobile: submenu occupies full width for easier tapping */
@media (max-width:640px){
  .submenu{
    position:fixed; left:0; right:0; top:calc(var(--depts-top, 0px) + 48px);
    min-width:auto; border-radius:0; border-left:0; border-right:0;
  }
}


/* --- Hero --- */
.hero{padding:22px 0;background:linear-gradient(180deg,#f4f8ff,transparent)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.hero-copy h1{font-size:clamp(22px,3.4vw,42px);line-height:1.1;margin:0 0 8px}
.muted{color:var(--muted)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-art img{width:100%;height:auto;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06)}

/* --- Hero rotator --- */
.hero-rotator{position:relative;min-height:420px;background:#0b1220;color:#fff;overflow:hidden}
.hero-rotator .slide{
  position:absolute; inset:0; display:grid; align-items:center;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.02); transition:opacity .6s ease, transform .8s ease;
}
.hero-rotator .slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
}
.hero-rotator .slide.active{opacity:1; transform:scale(1)}
.hero-rotator .slide .container{position:relative; z-index:1; padding:36px 16px}
.hero-kicker{letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.9; margin-bottom:6px}
.hero-title{font-size:clamp(24px,4vw,48px); line-height:1.1; margin:0 0 8px}
.hero-sub{font-size:clamp(14px,1.6vw,18px); opacity:.9; margin:0 0 10px}
.hero-body{max-width:640px; opacity:.95; margin:0 0 14px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}

.hero-controls{position:absolute; left:0; right:0; bottom:12px; display:flex; align-items:center; justify-content:center; gap:10px; z-index:2}
.hero-nav{width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.25); color:#fff; backdrop-filter:blur(4px); cursor:pointer}
.hero-dots{display:flex; gap:8px}
.hero-dots button{width:9px; height:9px; border-radius:999px; border:0; background:rgba(255,255,255,.45); cursor:pointer}
.hero-dots button[aria-selected="true"]{background:#fff}

@media (max-width:900px){
  .hero-rotator{min-height:380px}
  .hero-body{max-width:520px}
}
@media (max-width:560px){
  .hero-rotator{min-height:340px}
  .hero-body{max-width:95%}
}

/* --- Section shells --- */
.section-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 10px}
.section-title{font-weight:800;font-size:1.2rem}
.link{text-decoration:none}

/* --- Grids --- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{display:block;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:inherit;background:#fff}
/* Card thumbnail container keeps a consistent box */
.card .thumb{
  background:#fff;                 /* was #f5f5f5 */
  height:140px;
  border-radius:8px;
  margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  padding:6px;                     /* breathing room */
  box-sizing:border-box;
}

/* The image itself never crops, always centered */
.card .thumb img{
  width:100%; height:100%;
  object-fit:contain;              /* was: cover */
  object-position:center center;
  border-radius:6px;               /* inner radius looks nice */
}
.card .title{font-weight:600;margin-bottom:4px}
.card .sku{font-size:.85rem;color:#666;margin-bottom:6px}
.card .row{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:700}
.price .old{color:#888;text-decoration:line-through;margin-right:6px;font-weight:400}

/* --- Footer --- */
.site-footer{
  background:#e8f2ff;                   /* light blue like department bar */
  border-top:1px solid var(--line);
  margin-top:40px;
  color:#0c3d7a;                        /* dark blue text for contrast */
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  padding:28px 0;
  align-items:center;
}

/* Left column */
.footer-col:first-child{
  text-align:left;
}

/* Center column */
.center-col{
  text-align:center;
}

/* Right column */
.footer-col:last-child{
  text-align:right;
}

/* Shared elements */
.footer-title{
  font-weight:800;
  margin-bottom:8px;
  color:#0c3d7a;
}
.f-link{
  display:block;
  text-decoration:none;
  color:#0c3d7a;
  opacity:.9;
  margin-bottom:6px;
  transition:opacity .2s ease, color .2s ease;
}
.f-link:hover{
  opacity:1;
  color:#2585ff;
}
.footer-logo{
  height:90px;
  width:auto;
  margin-bottom:10px;
}
.registry{
  color:#0c3d7a;
  font-size:0.95rem;
}

/* --- Responsive --- */
@media (max-width:820px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }
  .footer-col:first-child,
  .footer-col:last-child{
    text-align:center;
  }
}

/* --- Responsive --- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1}
}
@media (max-width:820px){
  .header-bottom-row{grid-template-columns:1fr;gap:8px}
  .icons{justify-content:flex-start}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
}


/* ----------------------- CATALOG PAGE -----------------------------*/
/* ===== Catalog layout ===== */
.catalog-layout{
  display:grid;
  grid-template-columns: 280px 1fr;   /* sidebar | content */
  gap:16px;
  margin-top:16px;
}

/* Sidebar */
.sidebar{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px;
}

/* Accordion */
.acc{display:block}
.acc-item{border-bottom:1px dashed var(--line)}
.acc-item:last-child{border-bottom:0}

.acc-btn{
  width:100%;
  text-align:left;
  padding:10px 8px;
  background:none; border:0; cursor:pointer;
  font-weight:700;
  position:relative;
}
.acc-btn::after{
  content:"▸";
  position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(0deg);
  transition:transform .15s ease;
}
.acc-item.open .acc-btn::after{
  transform:translateY(-50%) rotate(90deg);
}
.acc-panel{
  display:none; padding:6px 4px 12px 4px;
}
.acc-item.open .acc-panel{ display:block; }

/* Filter lists */
.filter-list{list-style:none; margin:0; padding:0}
.filter-list li{margin:6px 0}
.filter-actions{margin-top:10px; display:flex; gap:8px}

/* Content area */
.catalog-content{
  min-height:60vh;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px;
}

.catalog-controls{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
  flex-wrap:wrap;                    /* let controls wrap nicely on small screens */
}
/* Style ALL selects in the controls (sort + page size) */
.catalog-controls select{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  min-width:110px;                   /* avoids tiny dropdown */
}

/* Page-size block aligns like Sort */
.page-wrap{ display:flex; align-items:center; gap:8px }
.page-wrap label{ color:var(--muted); font-size:.95rem }

.sort-wrap{display:flex; align-items:center; gap:8px}
.sort-wrap select{padding:8px 10px; border:1px solid var(--line); border-radius:10px}

/*Catalog Applied filters controls*/
.active-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; }
.chip button { border:0; background:none; cursor:pointer; font-weight:700 }

/* Reuse your card grid styles */
#catalogGrid.grid,
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px }
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:760px){
  .catalog-layout{ grid-template-columns:1fr }  /* sidebar stacks on top */
  .product-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:520px){ .product-grid{ grid-template-columns:1fr } }

/* Little helper for muted text */
.text-muted{ color:var(--muted) }

/* Pager buttons — reuse your btn look, slightly smaller */
.pager .btn{ padding:6px 10px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; margin:0 2px }
.pager .btn.active{ border-color:var(--brand); color:var(--brand); font-weight:700 }
.pager .btn[disabled]{ opacity:.5; cursor:not-allowed }


/* -------------- PRODUCT PAGE DETAILS ------------------ */
/* ===== Product page ===== */
.crumbs{font-size:.9rem; color:var(--muted); margin:14px 0}
.crumbs a{color:inherit; text-decoration:none}
.crumbs a:hover{color:var(--brand); text-decoration:underline}

.product-wrap{display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; margin:14px 0 22px}
@media (max-width:900px){ .product-wrap{grid-template-columns:1fr} }

.p-gallery{display:grid; gap:12px}
.p-main{border:1px solid var(--line); border-radius:12px; padding:6px; display:flex; align-items:center; justify-content:center; background:#fff; min-height:360px}
.p-main img{max-width:100%; max-height:520px; width:auto; height:auto; border-radius:8px; object-fit:contain}
.p-thumbs{display:flex; gap:10px; overflow:auto; padding-bottom:4px}
.p-thumbs button{border:1px solid var(--line); background:#fff; border-radius:10px; padding:4px; width:84px; height:84px; display:flex; align-items:center; justify-content:center; cursor:pointer}
/* Thumbnails on product page */
.p-thumbs img{
  max-width:100%; max-height:100%;
  object-fit:contain;              /* was: cover */
  object-position:center center;
}
.p-thumbs button[aria-current="true"]{outline:2px solid var(--brand)}

.p-info{display:grid; gap:12px}
.p-title{margin:0}
.p-meta{display:flex; gap:12px; align-items:center}
.p-sku{font-size:.9rem; color:var(--muted)}
.p-cat{font-size:.9rem; padding:2px 8px; border:1px solid var(--line); border-radius:999px}
.p-price{font-size:1.6rem; font-weight:800; display:flex; gap:12px; align-items:baseline}
.p-price .old{font-size:1rem; color:#888; text-decoration:line-through; font-weight:400}
.p-desc{line-height:1.55}
.p-stock{font-size:.95rem}

.p-buy{display:flex; gap:10px; align-items:center}
.p-buy .qty{display:flex; align-items:center; gap:8px}
.p-buy input[type="number"]{width:90px; padding:8px 10px; border:1px solid var(--line); border-radius:10px}

/* Related */
.related .grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .related .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .related .grid{grid-template-columns:repeat(2,1fr)} }

/* Add this once; apply class="img-contain" to any <img> */
.img-contain{
  object-fit:contain;
  object-position:center center;
  background:#fff;
  padding:6px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:8px;
}

/* =========================================================
   CBS MOBILE RESPONSIVE PATCH
   Shared header + main page mobile layout
   ========================================================= */

.mobile-menu-btn{
  display:none;
}

/* Tablet header cleanup */
@media (max-width:900px){

  .site-header{
    position:sticky;
    top:0;
    z-index:3000;
  }

  .header-top{
    min-height:84px;
    gap:10px;
  }

  .logo{
    height:72px;
  }

  .brand-name{
    font-size:2rem;
    white-space:normal;
    line-height:1.1;
  }

  .wa-btn{
    padding:8px 10px;
  }

  .wa-btn span{
    display:none;
  }

  .mid-row{
    min-height:auto;
    padding-top:10px;
    padding-bottom:10px;
    align-items:stretch;
  }

  .search-wide{
    flex:1;
  }

  .icons{
    display:flex;
    align-items:center;
    gap:8px;
  }
}


/* Phone layout */
@media (max-width:640px){

  body{
    overflow-x:hidden;
  }

  .container{
    padding-left:12px;
    padding-right:12px;
  }

  .header-top{
    min-height:72px;
    grid-template-columns:auto 1fr auto;
    gap:8px;
  }

  .logo{
    height:58px;
  }

  .brand-name{
    font-size:1.25rem;
    line-height:1.05;
    padding:0;
  }

  .wa-btn{
    border-radius:999px;
    width:42px;
    height:42px;
    padding:0;
    justify-content:center;
  }

  .mid-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:8px;
    align-items:center;
  }

  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--line);
    background:#fff;
    color:#0c3d7a;
    border-radius:10px;
    padding:9px 10px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
  }

  .mobile-menu-btn span{
    display:none;
  }

  .search-wide{
    display:flex;
    min-width:0;
    gap:6px;
  }

  .search-wide input{
    min-width:0;
    height:40px;
    font-size:0.95rem;
  }

  .search-wide .btn{
    padding:8px 10px;
    height:40px;
    font-size:0.9rem;
  }

  .icons{
    justify-content:flex-end;
    gap:6px;
  }

  .icon-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:10px;
    text-decoration:none;
    color:#0c3d7a;
    background:#fff;
  }

  .badge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:18px;
    height:18px;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    font-size:11px;
    line-height:18px;
    text-align:center;
    font-weight:700;
  }

  /* Departments become a closed mobile menu */
  .header-depts{
    display:none;
    border-top:0;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#e8f2ff;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    z-index:3100;
  }

  .site-header.mobile-nav-open .header-depts{
    display:block;
  }

  .nav{
    display:block;
    min-height:0;
    padding:8px 12px 12px;
  }

  .nav > li{
    border-bottom:1px solid rgba(12,61,122,.12);
  }

  .nav > li:last-child{
    border-bottom:0;
  }

  .nav > li > a,
  .nav > li > button{
    display:block;
    width:100%;
    padding:13px 4px;
    color:#0c3d7a;
    font-weight:700;
    text-align:left;
    text-decoration:none;
  }

  .submenu{
    position:static;
    display:none;
    min-width:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#f7fbff;
    padding:4px 8px 10px;
  }

  .has-sub:hover > .submenu,
  .has-sub:focus-within > .submenu{
    display:none;
  }

  .has-sub.open > .submenu,
  .has-sub.open:hover > .submenu,
  .has-sub.open:focus-within > .submenu{
    display:block;
  }

  .submenu a{
    padding:10px 8px;
    font-size:0.95rem;
  }

  .submenu hr{
    border:0;
    border-top:1px solid var(--line);
    margin:6px 0;
  }

  /* Hero */
  .hero-rotator{
    min-height:300px;
  }

  .hero-rotator .slide .container{
    padding-top:28px;
    padding-bottom:58px;
  }

  .hero-title{
    font-size:1.75rem;
  }

  .hero-sub{
    font-size:1rem;
  }

  .hero-body{
    font-size:0.95rem;
    max-width:100%;
  }

  .hero-nav{
    width:34px;
    height:34px;
  }

  /* Main page sections */
  .featured,
  .discounted{
    padding-top:8px;
  }

  .section-head{
    margin-top:14px;
  }

  .section-title{
    font-size:1.15rem;
  }

  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .card{
    padding:10px;
  }

  .card .thumb{
    height:120px;
  }

  .card .title{
    font-size:0.95rem;
  }

  .card .sku{
    font-size:0.78rem;
  }

  .card .row{
    gap:8px;
    align-items:flex-start;
  }

  .price{
    font-size:0.95rem;
  }

  /* Footer */
  .site-footer{
    margin-top:28px;
  }

  .footer-grid{
    padding:24px 12px;
  }

  .footer-logo{
    height:70px;
  }
}


/* Very small phones */
@media (max-width:420px){

  .brand-name{
    font-size:1.05rem;
  }

  .logo{
    height:52px;
  }

  .search-wide .btn{
    padding-left:8px;
    padding-right:8px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .card .thumb{
    height:150px;
  }
}