:root{
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
}
body{color:var(--ink); background:#fff;}
.brand-logo{width:42px;height:42px;object-fit:contain}
.brand-title{font-weight:700; letter-spacing:.5px}
.brand-subtitle{font-size:.86rem;color:var(--muted)}
.nav-link{font-weight:500}
.nav-link.active{color:#000}
.hero-slide{position:relative; border-radius:18px; overflow:hidden}
.hero-slide img{width:100%; height:60vh; min-height:360px; object-fit:cover; filter:saturate(1.05)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px}
.hero-overlay .content{max-width:920px}
.hero-overlay h1{color:#fff; font-weight:800; letter-spacing:.5px}
.hero-overlay p{color:#f3f4f6; font-size:1.05rem}
.value-strip{background:#fafafa; border:1px solid var(--line); border-radius:18px}
.value-card{padding:22px}
.value-card i{font-size:26px}
.value-card h3{font-size:1.05rem; margin:10px 0 6px 0; font-weight:700}
.value-card p{margin:0;color:var(--muted)}
.section-text{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px}
.product-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.product-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.07)}
.product-card img{width:100%; height:220px; object-fit:cover; background:#f3f4f6}
.badge-offer{position:absolute; top:12px; left:12px}
.footer{background:#fff}
.social-link{display:inline-flex; width:42px; height:42px; border:1px solid var(--line); border-radius:999px; align-items:center; justify-content:center; color:var(--ink); text-decoration:none}
.social-link:hover{background:#f9fafb}
.admin-link{display:inline-flex; width:44px; height:44px; border:1px dashed var(--line); border-radius:999px; align-items:center; justify-content:center; color:var(--muted); text-decoration:none}
.admin-link:hover{color:var(--ink); background:#f9fafb}
.form-card{border:1px solid var(--line); border-radius:18px}


/* Catalog thumbnails + modal viewer */
.la-thumb-btn{
  border:0;
  padding:0;
  background:transparent;
  width:100%;
  display:block;
  cursor:pointer;
}
.la-thumb-img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
}
@media (max-width: 576px){
  .la-thumb-img{ height:200px; }
}


@media (max-width: 768px){
  #laProductModal .la-modal-imgwrap{
    height: 45vh;
  }
  #laProductModal #laModalDesc{
    max-height: 30vh;
  }
}

/* Product viewer modal v8: all info in header, image fits frame (no overflow) */
#laProductModal .modal-content{
  max-height: 92vh;
}
#laProductModal .la-modal-header{
  flex: 0 0 auto;
  max-height: 34vh;          /* header holds all info */
  overflow: auto;            /* if description is long, header scrolls (not the image) */
}
#laProductModal .la-modal-body{
  flex: 1 1 auto;
  overflow: hidden;          /* NEVER scroll the image area */
  padding-top: 0.75rem;
}
#laProductModal .la-modal-imgwrap{
  width: 100%;
  height: calc(92vh - 240px); /* body height for image (header+footer) */
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.03);
  border-radius:16px;
  overflow: hidden;          /* ensure image cannot exceed frame */
}
#laProductModal .la-modal-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}
#laProductModal .modal-footer{
  flex: 0 0 auto;
  flex-wrap:wrap;
  gap:10px;
}
#laProductModal .la-modal-desc{
  white-space: pre-wrap;
}
@media (max-width: 768px){
  #laProductModal .la-modal-header{
    max-height: 42vh;
  }
  #laProductModal .la-modal-imgwrap{
    height: 42vh;
  }
}


/* PERFECT FRAME FIT — image never exceeds modal frame */
#laProductModal .la-modal-imgwrap{
  width:100%;
  height:calc(92vh - 240px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
  border-radius:14px;
}

#laProductModal .la-modal-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:auto;
}

/* remove any internal spacing that could push image outside */
#laProductModal .modal-body{
  padding:0.5rem 0.75rem 0.75rem 0.75rem;
}

/* ensure modal never creates scroll due to image */
#laProductModal .modal-content{
  overflow:hidden;
}

/* mobile tuning */
@media (max-width:768px){
  #laProductModal .la-modal-imgwrap{
    height:42vh;
  }
}


/* v10 — hard containment: no horizontal overflow, footer inside frame */
#laProductModal .modal-dialog{
  max-width: min(1200px, 96vw);
  margin-left: auto;
  margin-right: auto;
}
#laProductModal .modal-content{
  width: 100%;
  overflow: hidden;
}
#laProductModal .la-modal-body{
  overflow: hidden !important;
}
#laProductModal .la-modal-imgwrap{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
#laProductModal .la-modal-img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
#laProductModal .modal-footer{
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 2;
}


/* v11 — bulletproof modal frame + controls INSIDE frame */
#laProductModal .modal-dialog{
  width: 96vw;
  max-width: 96vw;
  margin: 1.5rem auto;
}
#laProductModal .modal-content{
  width: 100%;
  overflow: hidden; /* clip anything */
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  box-sizing: border-box;
}
#laProductModal .modal-header{
  flex: 0 0 auto;
}
#laProductModal .la-modal-body{
  flex: 1 1 auto;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0.75rem;
  box-sizing: border-box;
}
#laProductModal .la-modal-imgwrap{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#laProductModal .la-modal-imgwrap img,
#laProductModal .la-modal-img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display:block;
}
#laProductModal .la-modal-controls{
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  box-sizing: border-box;
}
#laProductModal .la-modal-controls .btn{
  border-radius: 10px;
}
#laProductModal .modal-footer{
  display:none !important; /* ensure no floating footer */
}
@media (max-width: 768px){
  #laProductModal .la-modal-controls{
    justify-content: center;
  }
  #laProductModal .la-modal-controls #laModalCounter{
    width: 100%;
    text-align: center;
    order: 3;
  }
}

/* v12 — strict clip + footer row inside white frame */
#laProductModal .modal-dialog{
  width: min(1100px, 94vw);
  max-width: 94vw;
  margin: 1.25rem auto;
}
#laProductModal .modal-content{
  overflow:hidden;
  background:#fff;
  border-radius:16px;
}
#laProductModal .la-modal-body{
  overflow:hidden !important;
  padding: 12px;
  box-sizing:border-box;
}
#laProductModal .la-modal-imgwrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-sizing:border-box;
}
#laProductModal .la-modal-imgwrap img,
#laProductModal .la-modal-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block;
}
#laProductModal .la-frame-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px 14px 12px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
}
#laProductModal .la-frame-footer .la-btn{
  white-space:nowrap;
  border-radius:10px;
}
#laProductModal .la-frame-footer #laModalCounter{
  min-width: 120px;
}
@media (max-width:768px){
  #laProductModal .la-frame-footer{
    flex-wrap:wrap;
    justify-content:center;
  }
  #laProductModal .la-frame-footer #laModalCounter{
    width:100%;
    text-align:center;
    order: 10;
  }
}


/* v13 — modal gallery: no overflow, footer in-frame, single controls row */
#laProductModal .la-modal-content{
  overflow: hidden;
  border-radius: 16px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

#laProductModal .la-modal-header{
  flex: 0 0 auto;
  overflow: auto;
  max-height: 32vh; /* header holds all info */
}

#laProductModal .la-modal-body{
  flex: 1 1 auto;
  overflow: hidden !important;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
}

#laProductModal .la-modal-imgframe{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  border-radius: 14px;
  background: #fff;
  overflow: hidden; /* HARD CLIP */
  display: flex;
  align-items: center;
  justify-content: center;
}

#laProductModal .la-modal-img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

#laProductModal .la-modal-footer{
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#laProductModal .la-modal-footer .la-btn{
  white-space: nowrap;
  border-radius: 10px;
}

@media (max-width: 768px){
  #laProductModal .la-modal-header{ max-height: 40vh; }
  #laProductModal .la-modal-footer{
    flex-wrap: wrap;
    justify-content: center;
  }
  #laProductModal #laModalCounter{
    width: 100%;
    order: 10;
  }
}

#laProductModal .modal-dialog{max-width:94vw; width:94vw; margin:1.25rem auto;}

/* v14 — FINAL: prevent any right overflow in product modal */
#laProductModal, 
#laProductModal *{
  box-sizing: border-box;
}

#laProductModal .modal-dialog{
  width: min(1100px, 94vw) !important;
  max-width: 94vw !important;
  margin: 1.25rem auto !important;
  overflow: hidden !important; /* clip at dialog too */
}

#laProductModal .modal-content{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important; /* hard clip */
  border-radius: 16px;
}

#laProductModal .modal-header,
#laProductModal .modal-body,
#laProductModal .modal-footer{
  max-width: 100% !important;
  overflow: hidden !important;
}

#laProductModal .la-modal-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#laProductModal .la-modal-imgframe,
#laProductModal .la-modal-imgwrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  min-width: 0 !important;
  border-radius: 14px;
}

#laProductModal img,
#laProductModal .la-modal-img{
  display: block !important;
  max-width: 100% !important;
  width: auto !important;      /* IMPORTANT: never force 100% width */
  max-height: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

#laProductModal .la-modal-imgframe{
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* v15 — FIX: modal-body causes overflow. Make body width-safe + frame inset padding */
#laProductModal .la-modal-body{
  padding: 0 !important;      /* padding here can create 100%+padding overflow */
  min-width: 0 !important;    /* allow flex children to shrink */
  overflow: hidden !important;
}

#laProductModal .la-modal-imgframe{
  padding: 12px !important;   /* padding moves inside the clipped frame */
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Image must never exceed the inner frame */
#laProductModal .la-modal-imgframe img,
#laProductModal .la-modal-imgframe .la-modal-img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;     /* fill available frame */
  height: 100% !important;
  object-fit: contain !important;
}

/* Also hard-clip body to avoid any horizontal scroll on weird browsers */
#laProductModal .modal-body{
  overflow-x: hidden !important;
}

/* v16 — DEFINITIVE modal image fit (no overflow anywhere) */
#laProductModal .la-modal-body{
  padding: 0 !important;
  overflow: hidden !important;
}

#laProductModal .la-modal-imgframe{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(320px, 55vh, 680px) !important; /* fixed frame height */
  overflow: hidden !important;
  border-radius: 14px;
  background: #fff;
  margin: 12px;
}

#laProductModal .la-modal-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 768px){
  #laProductModal .la-modal-imgframe{ height: 45vh !important; margin: 10px; }
}

/* v16 — Modern UI polish */
:root{
  --la-radius: 16px;
  --la-shadow: 0 10px 30px rgba(0,0,0,.08);
  --la-border: 1px solid rgba(0,0,0,.08);
}
body{
  background: #fafafa;
}
.navbar, .la-card, .card, .modal-content{
  border-radius: var(--la-radius) !important;
}
.la-card, .card{
  border: var(--la-border);
  box-shadow: var(--la-shadow);
}
.btn{
  border-radius: 12px;
}
.btn-dark{
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
input.form-control, textarea.form-control, select.form-select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0.65rem 0.85rem;
}
.la-thumb-img{
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.la-thumb-img:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}