/* =========================================================================
   Amar Sofa Repair — Master Stylesheet (single file, per brief)
   Design system: Atelier Luxury — walnut / ink / brass on warm paper
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  --ink:#130f0b;
  --ink-soft:#211a12;
  --paper:#faf7f1;
  --stone:#ecdfbe;
  --stone-deep:#e2cf9c;
  --walnut:#4a2f1c;
  --walnut-deep:#2e1c10;
  --brass:#c99a3f;
  --brass-light:#e9c46a;
  --brass-deep:#9c6a1f;
  --wine:#7a2331;
  --wine-deep:#591723;
  --graphite:#241f18;
  --muted:#6e6552;
  --line:#e4d6ac;
  --white:#ffffff;

  --font-display:'Fraunces', 'Georgia', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --radius-pill:100px;

  --shadow-sm:0 2px 10px rgba(21,19,15,.06);
  --shadow-md:0 12px 32px rgba(21,19,15,.10);
  --shadow-lg:0 24px 60px rgba(21,19,15,.16);

  --container:1280px;
  --header-h:80px;
  --topbar-h:42px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

body{
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit;}

h1,h2,h3,h4,h5,.font-display{font-family:var(--font-display); color:var(--ink); font-weight:600; line-height:1.15; letter-spacing:-.01em;}
h1{font-size:clamp(2.4rem,4.6vw,4.2rem); font-weight:600;}
h2{font-size:clamp(1.9rem,3.2vw,2.9rem);}
h3{font-size:clamp(1.3rem,2vw,1.6rem);}
p{margin:0 0 1rem;}

.container-xl{max-width:var(--container); margin:0 auto; padding:0 20px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass-deep);
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--brass); display:inline-block;}

/* ---------- Stitch divider — signature motif ---------- */
.stitch-divider{
  display:flex; align-items:center; gap:8px; margin:18px 0 28px;
}
.stitch-divider span{width:100%; height:1px; background:repeating-linear-gradient(90deg, var(--brass) 0 10px, transparent 10px 18px);}
.stitch-divider.center{justify-content:center; max-width:220px; margin-left:auto; margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; transition:all .3s ease;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg, var(--brass-light), var(--brass-deep));
  color:var(--ink); box-shadow:var(--shadow-sm);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--ink);}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff;}
.btn-dark{background:var(--ink); color:var(--paper);}
.btn-dark:hover{background:var(--walnut-deep); color:var(--paper); transform:translateY(-2px);}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1ebe57; color:#fff; transform:translateY(-2px);}
.btn-sm{padding:10px 20px; font-size:.82rem;}

/* =========================================================================
   TOP BAR
   ========================================================================= */
.topbar{
  height:var(--topbar-h); background:var(--ink); color:#cfc6b3;
  font-size:.82rem; position:fixed; top:0; left:0; right:0; z-index:1051;
}
.topbar .container-xl{display:flex; align-items:center; justify-content:space-between; height:100%;}
.topbar-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.topbar-left a{display:flex; align-items:center; gap:7px; color:#cfc6b3; transition:color .2s;}
.topbar-left a:hover{color:var(--brass-light);}
.topbar-left .tb-address{display:none;}
.topbar-social{display:flex; align-items:center; gap:14px;}
.topbar-social a{width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:.72rem; color:#cfc6b3;}
.topbar-social a:hover{background:var(--brass); color:var(--ink); border-color:var(--brass);}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:1050;
  transition:background .35s ease, box-shadow .35s ease, top .35s ease;
  background:transparent;
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; transition:padding .35s ease;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--brass-light),var(--brass-deep));
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1.3rem; flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text .name{font-family:var(--font-display); font-weight:700; font-size:1.28rem; color:#fff; transition:color .35s ease;}
.brand-text .tag{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-light);}

.main-nav{display:flex; align-items:center; gap:6px;}
.main-nav > ul{display:flex; align-items:center; gap:4px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px; padding:12px 18px; font-weight:600; font-size:.92rem;
  color:#fff; border-radius:var(--radius-pill); transition:background .25s, color .25s;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{background:rgba(255,255,255,.12); color:var(--brass-light);}
.site-header.scrolled .main-nav > ul > li > a{color:var(--ink);}
.site-header.scrolled .main-nav > ul > li > a:hover, .site-header.scrolled .main-nav > ul > li.active > a{background:var(--stone); color:var(--brass-deep);}

.header-cta{display:flex; align-items:center; gap:12px;}
.icon-btn{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); flex-shrink:0; transition:all .25s;
}
.icon-btn:hover{background:var(--brass); color:var(--ink); border-color:var(--brass);}
.site-header.scrolled .icon-btn{background:var(--stone); color:var(--ink); border-color:var(--line);}
.site-header.scrolled .icon-btn:hover{background:var(--brass); color:#fff;}

.menu-toggle{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent;
  display:none; align-items:center; justify-content:center; color:#fff; font-size:1.15rem;
}
.site-header.scrolled .menu-toggle{color:var(--ink); border-color:var(--line);}

/* Scrolled state */
.site-header.scrolled{
  background:rgba(251,249,245,.92); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm); top:0;
}
.site-header.scrolled .header-inner{padding:12px 0;}
.site-header.scrolled .brand-text .name{color:var(--ink);}
.topbar.hide{transform:translateY(-100%);}

/* Non-home pages always have solid header (no transparent hero) */
body.subpage{padding-top:var(--header-h);}
body.subpage .topbar{display:none;}
body.subpage .site-header{position:fixed; top:0; background:rgba(251,249,245,.97); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm);}
body.subpage .site-header .header-inner{padding:14px 0;}
body.subpage .brand-text .name{color:var(--ink);}
body.subpage .main-nav > ul > li > a{color:var(--ink);}
body.subpage .main-nav > ul > li > a:hover, body.subpage .main-nav > ul > li.active > a{background:var(--stone); color:var(--brass-deep);}
body.subpage .icon-btn{background:var(--stone); color:var(--ink); border-color:var(--line);}
body.subpage .menu-toggle{color:var(--ink); border-color:var(--line);}

/* =========================================================================
   MEGA MENU
   ========================================================================= */
.has-mega{position:static;}
.mega-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(920px, 92vw); background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:1100;
}
.has-mega:hover .mega-panel, .has-mega.mega-open .mega-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mega-col-title{font-family:var(--font-body); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:14px;}
.mega-col ul li{margin-bottom:4px;}
.mega-col ul li a{display:block; padding:7px 0; color:var(--graphite); font-size:.92rem; border-bottom:1px dashed transparent; transition:all .2s;}
.mega-col ul li a:hover{color:var(--brass-deep); padding-left:6px; border-bottom-color:var(--line);}
.mega-col.mega-cta{background:var(--stone); border-radius:var(--radius-sm); padding:20px; display:flex; flex-direction:column; justify-content:space-between;}
.mega-col.mega-cta h4{font-size:1rem; margin-bottom:8px;}
.mega-col.mega-cta p{font-size:.85rem; color:var(--muted); margin-bottom:14px;}

/* =========================================================================
   MOBILE OFFCANVAS MENU (right side)
   ========================================================================= */
.offcanvas.offcanvas-end{width:min(360px, 88vw); background:var(--ink); color:#efe9db;}
.mobile-menu-header{display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-menu-header .brand-text .name{color:#fff;}
.mobile-accordion .accordion-item{background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-accordion .accordion-button{
  background:transparent; color:#fff; font-weight:600; font-size:1rem; box-shadow:none; padding:16px 20px;
}
.mobile-accordion .accordion-button::after{filter:invert(1);}
.mobile-accordion .accordion-button:not(.collapsed){color:var(--brass-light); background:rgba(255,255,255,.04);}
.mobile-accordion .accordion-body{background:rgba(255,255,255,.03); padding:6px 20px 16px;}
.mobile-accordion .accordion-body a{display:block; padding:9px 0; color:#cfc6b3; font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.06);}
.mobile-accordion .accordion-body a:hover{color:var(--brass-light);}
.mobile-simple-link{display:block; padding:16px 20px; color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-simple-link:hover{color:var(--brass-light);}
.mobile-menu-footer{padding:22px 20px; margin-top:12px;}
.mobile-menu-footer .btn{width:100%; margin-bottom:10px;}
.mobile-contact-row{display:flex; align-items:center; gap:10px; color:#cfc6b3; font-size:.88rem; margin-bottom:10px;}
.offcanvas-backdrop.show{opacity:.6;}

/* =========================================================================
   HERO / BANNER SLIDER
   ========================================================================= */
.hero-slider{position:relative; height:92vh; min-height:600px; max-height:920px; width:100%; overflow:hidden;}
.hero-slide{position:relative; height:92vh; min-height:600px; max-height:920px;}
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,19,15,.55) 0%, rgba(21,19,15,.35) 40%, rgba(21,19,15,.82) 100%);
}
.hero-content{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:0 20px; z-index:5;
}
.hero-content .eyebrow{color:var(--brass-light);}
.hero-content .eyebrow::before{background:var(--brass-light);}
.hero-content h1{color:#fff; max-width:920px; margin:0 auto 20px;}
.hero-content .sub{font-size:clamp(1rem,1.6vw,1.25rem); color:#e9e3d4; max-width:680px; margin:0 auto 34px; font-weight:400;}
.hero-btns{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.hero-scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:#fff; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:5;}
.hero-scroll-cue span{width:1px; height:34px; background:linear-gradient(#fff, transparent);}
.swiper-pagination-bullet{background:#fff; opacity:.55;}
.swiper-pagination-bullet-active{background:var(--brass-light); opacity:1;}
.hero-slider .swiper-button-next, .hero-slider .swiper-button-prev{color:#fff; opacity:.75; --swiper-navigation-size:22px;}
.hero-slider .swiper-button-next:hover, .hero-slider .swiper-button-prev:hover{opacity:1;}

/* Small banner (inner pages) */
.page-banner{position:relative; height:340px; overflow:hidden; margin-top:calc(-1 * 1px);}
.page-banner img{width:100%; height:100%; object-fit:cover;}
.page-banner .hero-overlay{background:linear-gradient(180deg, rgba(21,19,15,.65), rgba(21,19,15,.75));}
.page-banner .hero-content{justify-content:center; padding-top:20px;}
.page-banner h1{font-size:clamp(2rem,4vw,3rem); margin-bottom:10px;}
.breadcrumb-row{display:flex; gap:8px; align-items:center; justify-content:center; font-size:.88rem; color:#e9e3d4;}
.breadcrumb-row a{color:#e9e3d4;}
.breadcrumb-row a:hover{color:var(--brass-light);}
.breadcrumb-row .sep{opacity:.5;}

/* =========================================================================
   SECTIONS — general
   ========================================================================= */
.section{padding:100px 0;}
.section-sm{padding:64px 0;}
.bg-stone{background:var(--stone);}
.bg-ink{background:var(--ink); color:#d9d2c1;}
.bg-ink h2, .bg-ink h3, .bg-ink h4{color:#fff;}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--muted); font-size:1.05rem;}

/* ---------- About section (home) ---------- */
.about-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);}
.about-media img{height:100%; object-fit:cover; min-height:420px;}
.about-badge{
  position:absolute; bottom:24px; left:24px; background:rgba(251,249,245,.94); backdrop-filter:blur(10px);
  border-radius:var(--radius-md); padding:20px 26px; box-shadow:var(--shadow-md);
}
.about-badge .num{font-family:var(--font-display); font-size:2.2rem; color:var(--brass-deep); font-weight:700; line-height:1;}
.about-badge .lbl{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.about-points{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px;}
.about-point{display:flex; gap:12px; align-items:flex-start;}
.about-point i{color:var(--brass-deep); font-size:1.1rem; margin-top:3px;}
.about-point strong{display:block; font-size:.95rem;}
.about-point span{font-size:.84rem; color:var(--muted);}

/* ---------- Why choose us ---------- */
.feature-card{
  background:#fff; border-radius:var(--radius-md); padding:32px 26px; height:100%;
  box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .3s, box-shadow .3s;
}
.feature-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.feature-icon{
  width:58px; height:58px; border-radius:50%; background:rgba(201,154,63,.14); display:flex; align-items:center; justify-content:center;
  color:var(--brass-deep); font-size:1.3rem; margin-bottom:18px;
}
.feature-card h3{font-size:1.08rem; margin-bottom:8px;}
.feature-card p{font-size:.9rem; color:var(--muted); margin-bottom:0;}

/* ---------- Services ---------- */
.service-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--ink); color:#fff;
  padding:34px 26px; height:100%; isolation:isolate; box-shadow:var(--shadow-sm); transition:transform .35s;
}
.service-card:hover{transform:translateY(-6px);}
.service-card::before{
  content:""; position:absolute; inset:0; background:linear-gradient(160deg, var(--walnut) 0%, var(--ink) 70%); z-index:-1;
}
.service-card .num{font-family:var(--font-display); font-size:.85rem; color:var(--brass-light); letter-spacing:.1em;}
.service-card .s-icon{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:var(--brass-light); font-size:1.15rem; margin:16px 0 18px;}
.service-card h3{color:#fff; font-size:1.05rem; margin-bottom:8px;}
.service-card p{color:#c9c2b1; font-size:.87rem; margin-bottom:0;}



/* =========================================================================
   SERVICES PAGE — additional CSS
   (Everything else on services.html reuses existing classes already in
   style.css: .about-media, .feature-icon, .check-list, .stitch-divider,
   .section-bg-img, .cta-band, .page-banner, .breadcrumb-row etc.)
   ========================================================================= */

/* Outline button used for the quick-jump links at the top of the page */
.btn-outline-dark{
  border:1px solid var(--line);
  color:var(--graphite);
  background:#fff;
  padding:10px 20px;
  font-size:.85rem;
}
.btn-outline-dark:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

/* Keeps each service's anchor target from hiding under the fixed header
   when jumped to via #sofa-repairing, #recliner-repair, etc. */
.service-block{
  scroll-margin-top:110px;
}





/* ---------- Product cards ---------- */
.product-card{
  display:block; border-radius:var(--radius-md); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); transition:transform .35s, box-shadow .35s; height:100%;
}
.product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.product-thumb{position:relative; aspect-ratio:4/5; overflow:hidden;}
.product-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.product-card:hover .product-thumb img{transform:scale(1.08);}
.product-thumb .tag{position:absolute; top:14px; left:14px; background:var(--brass); color:var(--ink); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill);}
.product-thumb .view-btn{
  position:absolute; right:14px; bottom:-46px; width:44px; height:44px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink); transition:bottom .35s ease; box-shadow:var(--shadow-sm);
}
.product-card:hover .view-btn{bottom:14px;}
.product-info{padding:20px 22px 24px;}
.product-info .cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass-deep); font-weight:700;}
.product-info h3{font-size:1.05rem; margin:6px 0 8px;}
.product-info p{font-size:.86rem; color:var(--muted); margin-bottom:0;}

/* ---------- Testimonials ---------- */
.testi-card{background:#fff; border-radius:var(--radius-md); padding:32px; box-shadow:var(--shadow-sm); border:1px solid var(--line); height:100%;}
.testi-stars{color:var(--brass); margin-bottom:14px; letter-spacing:2px;}
.testi-card p.quote{font-style:italic; color:var(--graphite); margin-bottom:20px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-person img{width:48px; height:48px; border-radius:50%; object-fit:cover;}
.testi-person strong{display:block; font-size:.92rem;}
.testi-person span{font-size:.8rem; color:var(--muted);}

/* ---------- Gallery ---------- */
.gallery-filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
.gallery-filters button{
  border:1px solid var(--line); background:#fff; padding:10px 22px; border-radius:var(--radius-pill);
  font-size:.85rem; font-weight:600; color:var(--graphite); transition:all .25s;
}
.gallery-filters button:hover{border-color:var(--brass);}
.gallery-filters button.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.gallery-grid{column-count:3; column-gap:18px;}
.gallery-item{break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-md); overflow:hidden; position:relative; box-shadow:var(--shadow-sm); display:block;}
.gallery-item img{width:100%; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .g-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(21,19,15,.78));
  display:flex; align-items:flex-end; padding:18px; opacity:0; transition:opacity .3s;
}
.gallery-item:hover .g-overlay{opacity:1;}
.gallery-item .g-overlay span{color:#fff; font-weight:600; font-size:.92rem;}
.gallery-item[data-cat]{}
@media (max-width:991px){.gallery-grid{column-count:2;}}
@media (max-width:575px){.gallery-grid{column-count:1;}}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg); background:linear-gradient(120deg, var(--ink), var(--walnut-deep));
  padding:60px; color:#fff; position:relative; overflow:hidden;
}
.cta-band::after{content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(176,141,87,.35), transparent 70%);}
.cta-band h2{color:#fff; margin-bottom:12px;}
.cta-band p{color:#cfc6b3; margin-bottom:0;}

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control, .form-select{
  border-radius:var(--radius-sm); border:1px solid var(--line); padding:14px 16px; font-size:.94rem; background:#fff;
}
.form-control:focus, .form-select:focus{border-color:var(--brass); box-shadow:0 0 0 .2rem rgba(176,141,87,.15);}
label{font-size:.84rem; font-weight:600; margin-bottom:6px; display:block; color:var(--graphite);}
.contact-card{background:#fff; border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-md); border:1px solid var(--line);}
.contact-info-card{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:44px; height:100%;}
.contact-info-card h3{color:#fff;}
.info-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:24px;}
.info-row .ico{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--brass-light); flex-shrink:0;}
.info-row strong{display:block; margin-bottom:3px; color:#fff;}
.info-row span, .info-row a{color:#c9c2b1; font-size:.92rem;}
.map-wrap{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.map-wrap iframe{width:100%; height:380px; border:0; display:block;}

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */
.pd-gallery-main{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:14px;}
.pd-gallery-main img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.pd-thumbs{display:flex; gap:12px;}
.pd-thumbs a{width:76px; height:76px; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent; flex-shrink:0;}
.pd-thumbs a.active, .pd-thumbs a:hover{border-color:var(--brass);}
.pd-thumbs img{width:100%; height:100%; object-fit:cover;}
.pd-price{font-family:var(--font-display); font-size:1.5rem; color:var(--brass-deep); font-weight:600;}
.pd-meta-list{margin:22px 0;}
.pd-meta-list li{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem;}
.pd-meta-list li strong{min-width:130px; color:var(--ink);}
.spec-table{width:100%; border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:12px 4px; font-size:.92rem;}
.spec-table td:first-child{color:var(--muted); width:40%;}
.spec-table td:last-child{font-weight:600; color:var(--ink);}
.check-list li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:.94rem;}
.check-list i{color:var(--brass-deep); margin-top:4px;}

.sidebar-card{background:#fff; border-radius:var(--radius-md); border:1px solid var(--line); padding:26px; box-shadow:var(--shadow-sm); margin-bottom:24px;}
.sidebar-card h4{font-size:1rem; margin-bottom:16px; padding-bottom:14px; border-bottom:2px solid var(--stone);}
.sidebar-list li a{display:flex; align-items:center; justify-content:space-between; padding:10px 4px; font-size:.9rem; border-bottom:1px dashed var(--line); color:var(--graphite);}
.sidebar-list li a:hover, .sidebar-list li a.active{color:var(--brass-deep); padding-left:6px;}
.sidebar-list li:last-child a{border-bottom:none;}
.sidebar-whatsapp{background:linear-gradient(135deg,#25D366,#1ebe57); border-radius:var(--radius-md); padding:26px; color:#fff; text-align:center;}
.sidebar-whatsapp i{font-size:2rem; margin-bottom:10px;}
.sidebar-whatsapp .btn{background:#fff; color:#128c42; width:100%; margin-top:14px;}

.nav-tabs.pd-tabs{border-bottom:2px solid var(--stone); gap:6px;}
.nav-tabs.pd-tabs .nav-link{border:none; color:var(--muted); font-weight:600; padding:12px 20px; border-radius:0;}
.nav-tabs.pd-tabs .nav-link.active{color:var(--ink); border-bottom:2px solid var(--brass); background:transparent; margin-bottom:-2px;}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--ink); color:#c9c2b1; padding-top:80px;}
.footer-top{padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .brand-text .name{color:#fff;}
.footer-about p{font-size:.9rem; color:#a89f8c; margin-top:16px;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#c9c2b1; transition:all .25s;}
.footer-social a:hover{background:var(--brass); color:var(--ink); border-color:var(--brass);}
.footer-col h4{color:#fff; font-size:1rem; margin-bottom:22px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{font-size:.9rem; color:#a89f8c; transition:color .2s;}
.footer-col ul li a:hover{color:var(--brass-light); padding-left:4px;}
.footer-bottom{padding:24px 0; font-size:.84rem; color:#8e8672; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:#c9c2b1;}
.footer-bottom a:hover{color:var(--brass-light);}

/* ---------- Floating buttons ---------- */
.float-actions{position:fixed; right:22px; bottom:22px; z-index:1040; display:flex; flex-direction:column; gap:12px; align-items:center;}
.float-btn{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); font-size:1.4rem; transition:transform .25s;}
.float-btn:hover{transform:scale(1.08);}
.float-whatsapp{background:#25D366; color:#fff;}
.float-call{background:var(--ink); color:#fff;}
.back-to-top{width:44px; height:44px; font-size:1rem; background:var(--brass); color:var(--ink); opacity:0; pointer-events:none; transform:translateY(10px);}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

/* ---------- Features strip ---------- */
.features-strip{background:var(--ink); border-bottom:3px solid var(--brass);}
.features-strip .f-item{display:flex; align-items:center; gap:14px; padding:26px 10px;}
.features-strip .f-item i{font-size:1.5rem; color:var(--brass-light); flex-shrink:0;}
.features-strip .f-item strong{display:block; font-size:.94rem; color:#fff;}
.features-strip .f-item span{font-size:.8rem; color:#b6ac95;}

/* ---------- Category cards (Most Popular Categories) ---------- */
.category-card{position:relative; border-radius:var(--radius-md); overflow:hidden; display:block; aspect-ratio:3/4; box-shadow:var(--shadow-sm);}
.category-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.category-card:hover img{transform:scale(1.08);}
.category-card .cat-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,19,15,0) 35%, rgba(21,19,15,.86)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px;}
.category-card h3{color:#fff; font-size:1.15rem; margin-bottom:4px;}
.category-card span.explore{color:var(--brass-light); font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:6px;}

/* ---------- Product swiper cards (Editor's Pickup / New Arrival) ---------- */
.product-swiper{padding-bottom:6px;}
.product-swiper .swiper-button-next, .product-swiper .swiper-button-prev{
  color:var(--ink); background:#fff; width:44px; height:44px; border-radius:50%; box-shadow:var(--shadow-sm); --swiper-navigation-size:16px;
}
.shop-nav-row{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:16px;}
.shop-nav-row .section-head{margin-bottom:0;}

/* ---------- Home Shopping 3-col block ---------- */
.hs-card{background:#fff; border-radius:var(--radius-md); border:1px solid var(--line); padding:36px 30px; text-align:center; height:100%; box-shadow:var(--shadow-sm); transition:transform .3s;}
.hs-card:hover{transform:translateY(-6px);}
.hs-card .feature-icon{margin:0 auto 18px;}
.hs-card h4{font-size:1.05rem; margin-bottom:8px;}
.hs-card p{font-size:.88rem; color:var(--muted); margin-bottom:16px;}

/* ---------- Service area badges ---------- */
.area-badges{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.area-badge{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff; font-size:.88rem; font-weight:600; color:var(--graphite);
}
.area-badge i{color:var(--brass-deep);}

/* ---------- Newsletter band ---------- */
.newsletter-band{background:var(--stone); border-radius:var(--radius-lg); padding:50px 44px; text-align:center;}
.newsletter-band h3{margin-bottom:8px;}
.newsletter-band p{color:var(--muted); margin-bottom:24px;}
.newsletter-form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap;}
.newsletter-form input{flex:1; min-width:200px;}
@media (max-width:575px){.newsletter-form{flex-direction:column;} .newsletter-form .btn{width:100%;}}

/* ---------- Scroll reveal (self-contained, no external AOS dependency) ---------- */
[data-aos]{opacity:1; transform:none;}
html.js-aos [data-aos]{opacity:0; transition:opacity .7s ease, transform .7s ease;}
html.js-aos [data-aos="fade-up"]{transform:translateY(30px);}
html.js-aos [data-aos="fade-left"]{transform:translateX(30px);}
html.js-aos [data-aos="fade-right"]{transform:translateX(-30px);}
html.js-aos [data-aos="zoom-in"]{transform:scale(.94);}
html.js-aos [data-aos].aos-in{opacity:1; transform:none;}

/* ---------- Section background image (dark overlay) ---------- */
.section-bg-img{position:relative; background-size:cover; background-position:center; isolation:isolate;}
.section-bg-img::before{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(18,15,12,.93), rgba(18,15,12,.78)); z-index:-1;}
.section-bg-img h2, .section-bg-img h3{color:#fff;}
.section-bg-img p{color:#d9d2c1;}
.section-bg-img .eyebrow{color:var(--brass-light);}
.section-bg-img .eyebrow::before{background:var(--brass-light);}
.section-bg-img .feature-card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); backdrop-filter:blur(6px);}
.section-bg-img .feature-card h3{color:#fff;}
.section-bg-img .feature-card p{color:#c9c2b1;}
.section-bg-img .feature-icon{background:rgba(201,154,63,.18); color:var(--brass-light);}
.section-bg-img .area-badge{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;}
.section-bg-img .area-badge i{color:var(--brass-light);}
.section-bg-img .hs-card{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); backdrop-filter:blur(8px);}
.section-bg-img .hs-card h4{color:#fff;}
.section-bg-img .hs-card p{color:#c9c2b1;}
.section-bg-img .hs-card .feature-icon{background:rgba(200,150,63,.2); color:var(--brass-light);}

/* ---------- Product image grid (9-up, click for lightbox) ---------- */
.pd-image-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.pd-image-grid a{position:relative; display:block; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm);}
.pd-image-grid a img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.pd-image-grid a:hover img{transform:scale(1.09);}
.pd-image-grid a .zoom-cue{position:absolute; inset:0; background:rgba(21,19,15,.28); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s;}
.pd-image-grid a:hover .zoom-cue{opacity:1;}
.pd-image-grid a .zoom-cue i{color:#fff; font-size:1.2rem;}
.pd-image-grid a.pd-hero-img{grid-column:span 2; grid-row:span 2;}

/* ---------- FAQ page redesign ---------- */
.faq-side-card{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line);}
.faq-side-card img{width:100%; height:220px; object-fit:cover;}
.faq-side-body{background:var(--ink); color:#fff; padding:28px;}
.faq-side-body h3{color:#fff; margin-bottom:8px;}
.faq-side-body p{color:#c9c2b1; font-size:.9rem; margin-bottom:18px;}
.faq-pills{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px;}
.faq-pill{
  display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff; font-weight:600; font-size:.9rem; color:var(--graphite); transition:all .25s;
}
.faq-pill i{color:var(--brass-deep); font-size:1rem;}
.faq-pill.active, .faq-pill:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.faq-pill.active i, .faq-pill:hover i{color:var(--brass-light);}
.faq-accordion .accordion-item{border:1px solid var(--line); border-radius:var(--radius-sm) !important; overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.faq-accordion .accordion-button{font-weight:700; font-family:var(--font-display); font-size:1.02rem; color:var(--ink); background:#fff; padding:18px 22px;}
.faq-accordion .accordion-button:not(.collapsed){background:var(--stone); color:var(--brass-deep); box-shadow:none;}
.faq-accordion .accordion-button:focus{box-shadow:none;}
.faq-accordion .accordion-body{padding:4px 22px 22px; color:var(--muted); font-size:.94rem;}

/* ---------- Utility ---------- */
.text-brass{color:var(--brass-deep) !important;}
.rounded-xl{border-radius:var(--radius-lg) !important;}
.bg-paper{background:var(--paper);}
.divider-v{width:1px; background:var(--line); align-self:stretch;}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width:992px){
  .topbar-left .tb-address{display:flex;}
}
@media (max-width:991px){
  :root{--header-h:78px;}
  .topbar{display:none;}
  .site-header{top:0;}
  .main-nav{display:none;}
  .menu-toggle{display:flex;}
  .header-cta .icon-btn.d-none-mobile{display:none;}
  .hero-content .sub{font-size:1rem;}
  .about-points{grid-template-columns:1fr;}
  .contact-card, .contact-info-card{padding:28px;}
  .cta-band{padding:38px 24px; text-align:center;}
}
@media (max-width:767px){
  .section{padding:64px 0;}
  .hero-slide, .hero-slider{height:78vh; min-height:520px;}
  .page-banner{height:220px;}
}