/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#b86c2d;--gold-light:#b86c2d;--gold-dim:#b86c2d;
  --dark:#0d0702;--dark2:#0e0e0c;--dark3:#161613;--dark4:#2ed2;--dark5:#252520;
  --text:#ede7d9;--text-dim:#9e9487;
  --border:rgba(201,168,76,0.18);--border-h:rgba(201,168,76,0.45);
}
.page{background:var(--dark);font-family:'Poppins',sans-serif;color:var(--text);width:100%}

/* ── BANNER ── */
.banner{position:relative;width:100%;height:200px;background:var(--dark2);overflow:hidden;border-bottom:0.5px solid var(--border)}
.banner-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 50%,rgba(201,168,76,0.06) 0%,transparent 70%),
  repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(201,168,76,0.04) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(201,168,76,0.03) 80px);
}
.banner-frame{position:absolute;inset:16px;border:0.5px solid rgba(201,168,76,0.22);pointer-events:none}
.banner-frame::before,.banner-frame::after{content:'';position:absolute;width:12px;height:12px;border-color:var(--gold);border-style:solid}
.banner-frame::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.banner-frame::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.banner-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.play-ring{width:52px;height:52px;border-radius:50%;border:0.5px solid rgba(201,168,76,0.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.2s,background 0.2s}
.play-ring:hover{border-color:var(--gold);background:rgba(201,168,76,0.08)}
.play-ring i{font-size:18px;color:var(--gold);margin-left:3px}
.banner-label{font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--text-muted)}
.banner-title-text{font-family:'Poppins',serif;font-size:15px;font-style:italic;color:rgba(201,168,76,0.6);letter-spacing:0.08em}

/* ── SECTION HEAD ── */
.section{padding:2.5rem 2rem 2rem;background:var(--dark)}
/*.section-top{text-align:center;margin-bottom:2.5rem}*/
.section-top {
  text-align: center;
  margin-bottom: 50px;
}
.eyebrow{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sec-title {
  font-family: 'Poppins',serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 200;
}
.sec-title em{color:#fff; font-style: normal;margin-right: 9px;}
.title-rule{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}
.rule-line{height:0.5px;width:60px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.rule-line.r{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.rule-diamond{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* ── PRODUCT LIST ── */

/* Animation Keyframes */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*.prod-list{display:flex;flex-direction:column;gap:1px;background:var(--border)}*/
.prod-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: transparent !important;
}
/*
.prod-card {
  display: grid;
  grid-template-columns: 450px 1fr auto;
  gap: 0;
  align-items: stretch;
  background: var(--dark2);
  transition: background 0.2s;
}

.prod-card {
  display: grid;
  grid-template-columns: 500px 1fr auto;
  gap: 0;
  align-items: stretch;
  background: transparent !important;
  transition: background 0.2s;
}
*/
.prod-card {
  display: grid;
  grid-template-columns: 750px 1fr ;
  grid-template-areas: 
    "image content ";
  gap: 40px;
 align-items: center;
  opacity: 0;
}

.prod-card.animate-left {
  animation: slideInLeft 0.8s ease-out forwards;
}

.prod-card.animate-right {
  animation: slideInRight 0.8s ease-out forwards;
}

/* Assign areas */
.prod-img-wrap {
  grid-area: image;
}

.prod-info {
  grid-area: content;
}
/*
.prod-action {
  grid-area: action;
}
*/

/* Second row swap */
.prod-card:nth-child(even) {
  grid-template-columns: 1fr 750px;
  grid-template-areas: 
    "content image";
}

/* .prod-card:hover{background:var(--dark3)} */
.prod-img-wrap{position:relative;overflow:hidden;aspect-ratio:1;margin:0px 0 14px 14px;border:0.5px solid var(--border);border-radius:2px;flex-shrink:0;background:var(--dark4);align-self:center;cursor:pointer}
/*.prod-img-wrap img {
width: 450px;
  height: 450px;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  transition: opacity 0.3s,transform 0.4s;
}*/

.prod-img-wrap img {
width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  transition: opacity 0.3s,transform 0.4s;
}
.prod-card:hover .prod-img-wrap img{opacity:1;transform:scale(1.04)}

.prod-img-placeholder{width:150px;height:150px;display:flex;align-items:center;justify-content:center;background:var(--dark4)}
.prod-img-placeholder i{font-size:28px;color:var(--text-muted)}
/*.prod-info{padding:30px;display:flex;flex-direction:column;justify-content:flex-start;gap:5px;border-right:0.5px solid var(--border)}*/

.prod-info {
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  text-align: center;
  /*border-right: 0.5px solid var(--border);*/
}

.prod-tag{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.prod-name {
font-family: 'Poppins',serif;
  font-size: 35px;
  font-weight: 200;
  color: var(--text-muted);
  line-height: 1.2;
  margin-bottom: 9px;
}
.prod-sub {
  font-size: 18px;
  color: var(--gold);
  font-weight: 300;
  margin-top: 1px;
}
.prod-desc {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 200;
  margin-top: 4px;
}

.prod-action{padding:16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;min-width:110px}
/*.qty-label{font-size:18px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted)}*/
.qty-label {
font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 40px 0px 10px 0px;
  font-weight: 200;
}
/*.qty-wrap{display:flex;align-items:center;border:0.5px solid var(--border);border-radius:2px;overflow:hidden}*/
.qty-wrap {
  display: flex;
  align-items: center;
  border: 0.5px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  min-width: 150px;
  justify-content: space-around;
}

.qty-btn{width:30px;height:32px;background:var(--dark4); font-weight: 200;border:none;color:var(--gold);font-size:25px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;font-family:'Poppins',sans-serif}
.qty-btn:hover{background:rgba(201,168,76,0.14)}

/*.qty-num{width:38px;height:32px;background:var(--dark3);border:none;border-left:0.5px solid var(--border);border-right:0.5px solid var(--border);color:var(--text);font-family:'Poppins',sans-serif;font-size:13px;text-align:center;outline:none}*/

.qty-num {
  width: 58px;
  height: 32px;
  background: var(--dark3);
  border: 0.5px solid var(--border);
  color: var(--text);
  font-family: 'Poppins',sans-serif;
  font-size: 18px;
  text-align: center;
  outline: none;
  font-weight: 200;
}

/*.add-btn{width:100%;background:transparent;border:0.5px solid var(--border);color:var(--text-dim);font-family:'Poppins',sans-serif;font-size:18px;letter-spacing:0.18em;text-transform:uppercase;padding:8px 0;cursor:pointer;border-radius:2px;transition:border-color 0.2s,color 0.2s,background 0.2s;display:flex;align-items:center;justify-content:center;gap:6px}*/

.add-btn {
  width: auto;
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text-dim);
  font-family: 'Poppins',sans-serif;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s,color 0.2s,background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 250px;
  font-weight: 200;
  text-decoration: none;
}

.add-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.06)}
.add-btn.added{border-color:rgba(80,160,80,0.4);color:#7fc87f;background:rgba(30,58,30,0.25)}
.add-btn i{font-size:12px}

/* ── FOOTER BAR ── */
.cart-bar{margin:0;padding:1.25rem 2rem;background:var(--dark3);border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cart-info{font-size:12px;color:var(--text-dim)}
.cart-info span{color:var(--gold);font-weight:500}
.quote-btn{background:var(--gold);border:none;color:var(--dark);font-family:'Poppins',sans-serif;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;padding:11px 28px;cursor:pointer;border-radius:2px;transition:background 0.2s}
.quote-btn:hover{background:var(--gold-light)}

.toast{position:fixed;bottom:20px;right:20px;background:var(--dark4);border:0.5px solid rgba(201,168,76,0.3);color:var(--text);font-family:'Poppins',sans-serif;font-size:12px;padding:10px 16px;border-radius:2px;opacity:0;transform:translateY(8px);transition:opacity 0.3s,transform 0.3s;pointer-events:none;z-index:9}
.toast.show{opacity:1;transform:translateY(0)}

.gallery-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000;}
.gallery-modal.open{display:flex;}
.gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(4px);}
.gallery-content{position:relative;z-index:1;width:min(96%,1100px);max-height:auto;display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:10px;overflow:auto;}
/* .gallery-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(0,0,0,0.45);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;} */
.gallery-close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 1000;
}
.gallery-close:hover{background:rgba(201,168,76,0.24);}
.gallery-image-container{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;position:relative;}
.gallery-title{margin-top: 15px;font-size:20px;color:var(--text-light);text-align:center;font-weight:300;letter-spacing:0.02em;}
.gallery-main{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
    min-height:340px;
  }
/* .gallery-nav{width:48px;height:48px;border:none;border-radius:50%;background:#000;color:#fff;font-size:18px;cursor:pointer;transition:background 0.2s;} */
.gallery-nav {
  width: 48px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery-nav:hover{background:rgba(201,168,76,0.22);}
.gallery-nav:disabled{opacity:0.28;cursor:default;}
.gallery-image-wrap{overflow-y: auto;flex:1;display:flex;align-items:center;justify-content:center;overflow-x:hidden;border:1px solid rgba(255,255,255,0.15);border-radius:6px;padding:12px;position:relative;background:#000;}
.gallery-image-wrap img{max-width:100%;max-height:70vh;object-fit:contain;transition:transform 0.2s ease;cursor:zoom-in;}
.gallery-image-wrap img.zoomed{cursor:zoom-out;}
.gallery-actions{display:flex;justify-content:center;gap:12px;position: absolute;bottom: 10px;right: 10px;}
/* .gallery-zoom-btn{min-width:48px;height:48px;border:none;border-radius:50%;background:#000;color:#fff;font-size:18px;cursor:pointer;transition:background 0.2s,opacity 0.2s;border: 1px solid rgba(255,255,255,0.15);} */
.gallery-zoom-btn {
  min-width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s,opacity 0.2s;
  border: 1px solid rgba(255,255,255,0.15);
  line-height: 8px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 48px;
}
.gallery-zoom-btn:hover{background:rgba(201,168,76,0.24);}
.gallery-zoom-btn:disabled{opacity:0.3;cursor:default;}
.gallery-thumbs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;overflow-x:auto;padding:10px 0;}
.gallery-thumb{border:1px solid rgba(201,168,76,0.14);border-radius:5px;background:transparent;padding:2px;cursor:pointer;transition:border-color 0.2s;}
.gallery-thumb.active{border-color:var(--gold);}
.gallery-thumb img{display:block;width:84px;height:60px;object-fit:cover;border-radius:4px;}
.gallery-thumb:hover{border-color:var(--gold);}
@media(max-width:900px){
  .gallery-main{flex-direction:column; position:relative;}
  .gallery-nav{
    width:40px;
    height:40px;
    position: absolute;
    z-index: 1000;
  }
  #galleryPrev.gallery-nav {
    top: 10px;
    left: 7px;
  }
  #galleryNext.gallery-nav {
top: 10px;
  left: 51px;
  }
  .gallery-thumb img{
    width:62px;
    height:46px;
  }
  .gallery-main{
    align-items: flex-start;
  justify-content: flex-start;
  min-height: auto;
  }
  .gallery-modal{
    align-items: flex-start;
    background: rgba(0,0,0,0.8);
    overflow-y: auto;
  }
  .gallery-close{
    background: rgba(0,0,0,0.7);
  }
  .gallery-image-wrap {
    padding: 0px;
  }
  .gallery-zoom-btn {
    min-width: 40px;
    height: 40px;
  }
  .gallery-image-wrap img{
    max-width: 100%;
    max-height: 100%;
  }
}

.sec-title span{
display: flex;
  width: 100%;
  justify-content: center;
  font-size: 50px;
  text-transform: unset;
  margin-top: 10px;
}

.prod-qty-cnt{
display: flex;
  gap: 15px;
  justify-content: center;
}



.prod-card.spl-bg {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "image"
    "content";
  gap: 40px;
  align-items: center;
  opacity: 1;
  gap: 0px !important;
  padding: 0px;
  border: 0px;
  width: calc(33.3% - 27px);
}

.prod-card.spl-bg .prod-img-wrap{
  padding: 0px;
  margin: 0;
}
.prod-card.spl-bg .prod-info{
  margin-top: 20px;
  text-align:left;
}

.prod-list.sql-bg{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: transparent !important;
  flex-direction: row;
  justify-content: center;
}

.prod-card.spl-bg .prod-name{
font-size: 25px;
}

.prod-card.spl-bg .prod-desc {
  font-size: 18px;
}

.prod-card.spl-bg .qty-label{
  font-size: 16px;
  margin-top:10px;
}

.prod-card.spl-bg .prod-qty-cnt {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
}
.prod-card.spl-bg .prod-qty-cnt .add-btn{
  font-size: 18px;
  min-width: 100px;
}

.prod-gallery-icon{
  color: #fff;
  position: absolute;
  border: 1px solid var(--border);
  /* background: var(--gold-light); */
  background: rgba(0,0,0,0.8);
  z-index: 10000;
  bottom: 30px;
  right: 30px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: 'Poppins',sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 200;
  display: flex;
  gap: 10px;
}
.prod-gallery-icon img{
  width: 20px;
  height: 20px;  
}
.prod-gallery-icon:hover img{
  filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) !important;
}
/* 
.prod-gallery-icon:hover{  
  color: var(--gold-light);
} */

.prod-gallery-icon:hover{border-color:var(--gold);color:var(--gold);background:#181106;}