/* --- 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;
}