/* ==========================================================================
   Sayonto Sondhya — Cox's Bazar Proposal & Decor Booking
   Clean e-commerce theme (inspired by Just4You / Surprise Planners structure)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --red:#c0392b;
  --red-dark:#a5301f;
  --navy:#1b2848;
  --ink:#242222;
  --gray-text:#6b6b6b;
  --gray-line:#e6e6e6;
  --bg:#f7f7f8;
  --white:#ffffff;
  --gold:#d9a94f;
  --hero-accent:#f2a93b;
  --green-wa:#25D366;

  --font-display:'Playfair Display', serif;
  --font-body:'Poppins', sans-serif;

  --radius:6px;
  --shadow:0 4px 18px rgba(0,0,0,0.08);
  --shadow-hover:0 10px 28px rgba(0,0,0,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.container{max-width:1240px; margin:0 auto; padding:0 24px;}

/* -------------------- topbar / header -------------------- */
.topbar{
  background:var(--navy); color:#fff; font-size:12.5px;
  padding:7px 0;
}
.topbar .container{display:flex; justify-content:center; align-items:center; gap:10px;}
.topbar-sep{opacity:0.5;}
.topbar a{color:rgba(255,255,255,0.85);}

.site-header{
  background:#fff;
  border-bottom:1px solid var(--gray-line);
  position:sticky; top:0; z-index:100;
}
.header-main{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px;}
/* Header carries the emblem only (2.15:1) - the lockup's own wordmark is
   unreadable at this size. The CDM monogram stays as an onerror fallback. */
.brand-logo{height:44px; width:auto; display:block; flex-shrink:0;}
.brand-mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:0.02em;
  flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text .name{font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink);}
.brand-text .tag{font-size:11px; letter-spacing:0.01em; color:var(--red); font-weight:500;}

.header-actions{display:flex; align-items:center; gap:26px;}
.header-action{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:#444;}
.header-action svg{width:20px; height:20px; color:#333;}
.location-pill{
  display:flex; align-items:center; gap:6px;
  background:#fdf0ee; color:var(--red); padding:8px 14px; border-radius:20px;
  font-size:12.5px; font-weight:500;
}
.location-pill svg{width:14px; height:14px;}

.nav-bar{border-top:1px solid var(--gray-line);}
.nav-bar .container{display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
.nav-bar a{
  font-size:13px; font-weight:500; letter-spacing:0.02em; color:#333;
  padding:13px 0; white-space:nowrap; border-bottom:2px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.nav-bar a:hover, .nav-bar a.active{color:var(--red); border-color:var(--red);}

.nav-toggle{display:none; background:none; border:none; flex-direction:column; gap:5px; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:#333; display:block;}
.mobile-menu-logo{
  height:66px; width:auto; max-width:78%; object-fit:contain;
  align-self:flex-start; margin:4px 0 16px;
}
.mobile-menu{
  position:fixed; inset:0; z-index:200; background:#fff;
  display:flex; flex-direction:column; padding:20px; gap:4px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);}
#mm-categories{display:contents;}
.mobile-menu .close-btn{align-self:flex-end; background:none; border:none; font-size:26px; padding:8px;}
.mobile-menu a{font-size:16px; padding:14px 6px; border-bottom:1px solid var(--gray-line); color:#222;}
.mobile-menu a.mm-sub{
  font-size:13.5px; padding:11px 6px 11px 20px; color:#666;
  border-bottom:1px dashed var(--gray-line);
}
.mobile-menu a.mm-sub::before{content:'– '; color:var(--red);}

/* -------------------- page banner -------------------- */
.page-banner{
  background:linear-gradient(120deg, #1b1516 0%, #2a1618 55%, #3a1a1a 100%);
  padding:56px 0 46px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-banner::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(192,57,43,0.12) 0, rgba(192,57,43,0.12) 2px, transparent 2px, transparent 120px);
}
.page-banner h1{
  position:relative; z-index:1;
  font-family:var(--font-display); color:#fff; font-size:clamp(24px,3.4vw,34px); font-weight:700;
}
.page-banner .crumb{position:relative; z-index:1; color:rgba(255,255,255,0.6); font-size:13px; margin-top:10px;}
.page-banner .crumb a{color:rgba(255,255,255,0.85);}

/* -------------------- empty category state -------------------- */
.shop-empty{
  text-align:center; padding:56px 24px 70px; max-width:560px; margin:0 auto;
}
.shop-empty h3{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink); margin-bottom:10px;}
.shop-empty p{font-size:13.5px; color:var(--gray-text); line-height:1.8; margin-bottom:20px;}
.shop-empty .btn-solid{display:inline-block;}

/* -------------------- product grid -------------------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  padding:28px 0 56px;
}
.product-card{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .3s ease, transform .3s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-3px);}
.product-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee;}
.product-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.product-card:hover .product-thumb img{transform:scale(1.06);}
.product-badge{
  position:absolute; top:10px; left:10px; background:var(--red); color:#fff;
  font-size:10px; font-weight:600; letter-spacing:0.05em; padding:4px 10px; border-radius:3px;
  text-transform:uppercase;
}
.product-discount{
  position:absolute; top:10px; right:10px; background:var(--gold); color:#3a2a08;
  font-size:10px; font-weight:700; letter-spacing:0.03em; padding:4px 9px; border-radius:3px;
}
.product-price .old{
  font-size:12px; font-weight:400; color:#aaa; text-decoration:line-through; margin-right:7px;
}
.product-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.product-name{font-size:14px; font-weight:600; color:#1a1a2e; line-height:1.35;}
/* Package code - deliberately quiet so it never competes with the name */
.product-code{font-size:11px; color:#9a9a9a; letter-spacing:0.02em;}
/* nowrap so the code itself never splits across lines on narrow cards */
.product-code span{font-weight:600; color:var(--gray-text); letter-spacing:0.04em; white-space:nowrap;}
.product-loc{font-size:11.5px; color:var(--gray-text); display:flex; align-items:center; gap:5px;}
.product-loc svg{width:12px; height:12px; flex-shrink:0;}
.product-price{font-size:16px; font-weight:700; color:var(--ink); margin-top:auto;}
.product-price .from{font-size:10.5px; font-weight:400; color:var(--gray-text); display:block; text-transform:uppercase; letter-spacing:0.04em;}
.product-actions{display:flex; align-items:center; justify-content:space-between; padding-top:4px;}
.wish-btn{background:none; border:none; color:#c9c9c9; transition:color .25s ease;}
.wish-btn:hover{color:var(--red);}
.wish-btn.is-wished{color:var(--red);}
.wish-btn.is-wished svg{fill:var(--red);}
.wish-btn svg{width:19px; height:19px;}
.book-btn{
  background:var(--red); color:#fff; font-size:12.5px; font-weight:600;
  padding:9px 20px; border:none; border-radius:4px; letter-spacing:0.02em;
  transition:background .25s ease;
}
.book-btn:hover{background:var(--red-dark);}

.load-more-wrap{text-align:center; padding-bottom:60px;}
.load-more-btn{
  background:var(--red); color:#fff; border:none; padding:13px 44px; border-radius:24px;
  font-size:13.5px; font-weight:600; letter-spacing:0.03em;
}

/* -------------------- product detail page -------------------- */
.product-detail{padding:40px 0 70px;}
.pd-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;}
.pd-gallery{position:sticky; top:96px; align-self:start;}
.pd-main-img{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
.pd-main-img img{width:100%; height:100%; object-fit:cover;}
.pd-thumbs{display:flex; gap:10px; margin-top:12px;}
.pd-thumb{width:64px; height:64px; border-radius:4px; overflow:hidden; border:2px solid transparent; cursor:pointer;}
.pd-thumb.active{border-color:var(--red);}
.pd-thumb img{width:100%; height:100%; object-fit:cover;}

.pd-info h1{font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.pd-trust{font-size:12.5px; color:var(--gray-text); margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.pd-code{font-size:12px; color:#9a9a9a; margin-bottom:16px; letter-spacing:0.02em;}
.pd-code span{
  font-weight:600; color:var(--red); letter-spacing:0.06em;
  background:#fdf0ee; padding:2px 8px; border-radius:3px; margin-left:2px;
}
.pd-trust svg{width:14px; height:14px; color:var(--gold);}
.pd-section-label{font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#888; margin-bottom:8px; margin-top:18px;}
.pd-inclusions{font-size:13.5px; color:#4a4a4a; line-height:1.8;}
.pd-inclusions li{position:relative; padding-left:18px; margin-bottom:4px;}
.pd-inclusions li::before{content:'•'; position:absolute; left:0; color:var(--red); font-weight:700;}

.booking-box{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  padding:24px; margin-top:22px; box-shadow:var(--shadow);
}
.bb-price-row{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:1px solid var(--gray-line); margin-bottom:18px;}
.bb-price-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-text);}
.bb-price-value{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink);}
.bb-price-value .old{font-size:15px; color:#aaa; text-decoration:line-through; font-weight:400; margin-right:8px;}

.bb-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.bb-field label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:#888; margin-bottom:7px;
}
.bb-field input, .bb-field select{
  width:100%; padding:11px 13px; border:1px solid var(--gray-line); border-radius:4px;
  font-size:13.5px; font-family:inherit; color:#222; background:#fff;
}
.bb-field input:focus, .bb-field select:focus{outline:none; border-color:var(--red);}
.bb-field input[readonly]{background:#f5f5f5; color:#555;}

.bb-total-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; border-top:1px solid var(--gray-line); margin-top:6px; margin-bottom:16px;
}
.bb-total-label{font-size:13.5px; color:#555;}
.bb-total-value{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink);}

.bb-book-btn{
  width:100%; background:var(--red); color:#fff; border:none; padding:15px; border-radius:6px;
  font-size:13.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:10px; transition:background .25s ease;
}
.bb-book-btn:hover{background:var(--red-dark);}
.bb-wa-btn{
  width:100%; background:#fff; color:var(--ink); border:1px solid var(--gray-line);
  padding:14px; border-radius:6px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .25s ease, color .25s ease;
}
.bb-wa-btn:hover{border-color:var(--green-wa); color:#128c3f;}
.bb-wa-btn svg{width:17px; height:17px; fill:var(--green-wa);}

.bb-footer-note{
  display:flex; justify-content:center; gap:16px; margin-top:14px; flex-wrap:wrap;
  font-size:10.5px; color:#999;
}
.bb-footer-note span{display:flex; align-items:center; gap:4px;}
.bb-footer-note svg{width:11px; height:11px;}

/* -------------------- description tabs -------------------- */
.pd-tabs{margin-top:44px; border-top:1px solid var(--gray-line); padding-top:24px;}
.pd-tab-headers{display:flex; gap:32px; border-bottom:1px solid var(--gray-line); margin-bottom:20px;}
.pd-tab-head{
  padding-bottom:14px; font-size:13.5px; font-weight:600; color:#999; cursor:pointer;
  border-bottom:2px solid transparent;
}
.pd-tab-head.active{color:var(--red); border-color:var(--red);}
.pd-tab-content{display:none; font-size:14px; color:#4a4a4a; line-height:1.8; max-width:700px;}
.pd-tab-content.active-tab{display:block;}

/* -------------------- related products -------------------- */
.related-section{padding:50px 0 60px; background:#fff; border-top:1px solid var(--gray-line);}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px;}
.section-head h2{font-family:var(--font-display); font-size:22px; font-weight:700;}
.section-head a{font-size:13px; color:var(--red); font-weight:500;}

/* -------------------- trust strip -------------------- */
.trust-strip{background:#fff; border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); padding:34px 0;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.trust-item{display:flex; align-items:center; gap:14px;}
.trust-item svg{width:30px; height:30px; color:var(--red); flex-shrink:0;}
.trust-item h5{font-size:13.5px; font-weight:600; margin-bottom:2px;}
.trust-item p{font-size:11.5px; color:var(--gray-text);}

/* -------------------- hero (home) -------------------- */
.home-hero{position:relative; background:#151013;}
.home-hero-img{
  position:relative; height:420px; overflow:hidden;
}
.home-hero-img img{width:100%; height:100%; object-fit:cover;}
/* Copy sits on the left half, so the gradient is darkest on that side
   and leaves the right of the photo (the decor setup) readable. */
.home-hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left;
  background:linear-gradient(90deg, rgba(10,8,10,0.78) 0%, rgba(10,8,10,0.45) 45%, rgba(10,8,10,0.12) 100%);
  padding:0 6vw;
}
.home-hero-overlay p.eyebrow{
  color:var(--hero-accent); font-size:12px; letter-spacing:0.24em;
  text-transform:uppercase; margin-bottom:14px;
}
/* Wide enough that a headline line like "Your Dream Proposal"
   stays on one line instead of orphaning its last word. */
.home-hero-overlay h1{
  font-family:var(--font-display); color:#fff;
  font-size:clamp(25px,3.1vw,39px); font-weight:700; line-height:1.3; max-width:min(46rem, 92%);
}
.home-hero-overlay h1 .hero-accent{color:var(--hero-accent);}
.home-hero-overlay p.sub{
  color:rgba(255,255,255,0.85); margin-top:14px; font-size:14.5px; max-width:460px;
}
.home-hero-overlay .btn-cta{
  margin-top:26px; background:var(--red); color:#fff; padding:13px 34px; border-radius:24px;
  font-size:13.5px; font-weight:600; letter-spacing:0.03em;
}
.home-hero-overlay .btn-cta:hover{background:var(--red-dark);}

/* -------------------- footer -------------------- */
.site-footer{background:#171217; color:rgba(255,255,255,0.72); padding:50px 0 22px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
/* emblem only, on a light plate - the artwork's navy would vanish on the
   dark footer otherwise. The wordmark stays as live text beside it. */
.footer-logo{
  height:34px; width:auto; display:block; flex-shrink:0;
  background:#fff; padding:6px 9px; border-radius:8px;
}
.footer-brand .name{font-family:var(--font-display); color:#fff; font-size:18px; font-weight:700;}
.footer-desc{font-size:13px; color:rgba(255,255,255,0.55); max-width:280px;}
.footer-col h4{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px;}
.footer-col a, .footer-col p{display:block; font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:9px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:18px; font-size:12px; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:10px;}

/* -------------------- floating wa -------------------- */
.float-wa{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:56px; height:56px; border-radius:50%; background:var(--green-wa);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.float-wa svg{width:28px; height:28px; fill:#fff;}

/* -------------------- gallery page -------------------- */
.gallery-section{padding:36px 0 60px;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px;
}
.gal-item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:#eee; border:1px solid var(--gray-line);
  transition:box-shadow .3s ease, transform .3s ease;
}
.gal-item.tall{grid-row:span 2;}
.gal-item.wide{grid-column:span 2;}
.gal-item:hover{box-shadow:var(--shadow-hover); transform:translateY(-3px);}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.gal-item:hover img{transform:scale(1.07);}
.gal-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  background:linear-gradient(to top, rgba(20,14,16,0.82), transparent);
  color:#fff; font-size:12.5px; font-weight:500;
  opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease;
}
.gal-item:hover figcaption, .gal-item:focus-within figcaption{opacity:1; transform:translateY(0);}
.gallery-note{text-align:center; color:var(--gray-text); font-size:12.5px; margin-top:26px;}

.gallery-cta{
  margin-top:44px; padding:40px 28px; text-align:center; border-radius:var(--radius);
  background:linear-gradient(120deg, #1b1516 0%, #2a1618 55%, #3a1a1a 100%);
}
.gallery-cta h3{font-family:var(--font-display); color:#fff; font-size:clamp(20px,2.6vw,26px); font-weight:700;}
.gallery-cta p{color:rgba(255,255,255,0.7); font-size:14px; margin-top:10px;}
.gallery-cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.btn-solid{
  background:var(--red); color:#fff; font-size:13.5px; font-weight:600;
  padding:12px 30px; border-radius:4px; transition:background .25s ease;
}
.btn-solid:hover{background:var(--red-dark);}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,0.4); color:#fff; font-size:13.5px; font-weight:600;
  padding:12px 26px; border-radius:4px; transition:border-color .25s ease, background .25s ease;
}
.btn-ghost:hover{border-color:var(--green-wa); background:rgba(37,211,102,0.12);}
.btn-ghost svg{width:16px; height:16px; fill:var(--green-wa);}

/* -------------------- contact page -------------------- */
.contact-section{padding:40px 0 60px;}
.contact-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:start;}
.contact-cards{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.contact-card{display:flex; gap:16px; padding:22px 24px; border-bottom:1px solid var(--gray-line);}
.contact-card:last-child{border-bottom:none;}
.cc-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(192,57,43,0.08); color:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.cc-icon svg{width:20px; height:20px;}
.cc-body h4{font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:3px;}
.cc-body p{font-size:12.5px; color:var(--gray-text); margin-bottom:6px;}
.cc-body a{font-size:13.5px; font-weight:600; color:var(--red); word-break:break-word;}
.cc-body a:hover{text-decoration:underline;}
.cc-plain{font-size:13.5px; font-weight:600; color:var(--ink);}

.contact-side > * + *{margin-top:22px;}
.side-card{
  background:var(--navy); color:#fff; border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow);
}
.side-card h3{font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:8px;}
.side-card p{font-size:13px; color:rgba(255,255,255,0.72); line-height:1.75;}
.side-wa-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  background:var(--green-wa); color:#0d2b17; font-size:13.5px; font-weight:600;
  padding:12px 18px; border-radius:4px; transition:filter .25s ease;
}
.side-wa-btn:hover{filter:brightness(1.08);}
.side-wa-btn svg{width:18px; height:18px; fill:#0d2b17;}

.map-card, .hours-card{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.map-card h4, .hours-card h4{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:#888; font-weight:600; margin-bottom:12px;
}
.map-embed{width:100%; height:240px; border:0; border-radius:4px; display:block;}
.hours-card p{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; color:#4a4a4a; padding:7px 0; border-bottom:1px dashed var(--gray-line);
}
.hours-card p:last-of-type{border-bottom:none;}
.hours-card .hours-note{
  display:block; font-size:12px; color:var(--gray-text); line-height:1.7;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--gray-line);
}

/* -------------------- responsive -------------------- */
@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:1fr; gap:26px;}
  .gallery-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:170px;}
  .pd-grid{grid-template-columns:1fr;}
  .pd-gallery{position:static;}
  .trust-grid{grid-template-columns:repeat(2,1fr); gap:24px 16px;}
}
@media (max-width:860px){
  .nav-bar, .header-action span, .location-pill{display:none;}
  .brand-logo{height:40px;}
  .nav-toggle{display:flex;}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px;}
  .bb-row{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px;}
  .gal-item figcaption{opacity:1; transform:none;}
  .topbar .container{flex-direction:column; gap:2px; text-align:center;}
  .topbar-sep{display:none;}
}
@media (max-width:760px){
  .home-hero-overlay{
    align-items:center; text-align:center; padding:0 22px;
    background:linear-gradient(180deg, rgba(10,8,10,0.35), rgba(10,8,10,0.7));
  }
}
@media (max-width:560px){
  .brand-logo{height:34px;}
  .footer-logo{height:30px;}
  .brand-text .name{font-size:16px;}
  .product-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .footer-grid{grid-template-columns:1fr;}
  .home-hero-img{height:320px;}
  .gallery-grid{grid-auto-rows:132px;}
  .gal-item.wide{grid-column:span 2;}
  .contact-card{padding:18px 16px; gap:12px;}
  .gallery-cta{padding:30px 18px;}
  .map-embed{height:200px;}
  .pd-thumb{width:56px; height:56px;}
}