/* ==========================================================================
   Cox's Dream Moment — Cox's Bazar proposal & decoration booking

   The palette is taken from the thing being sold: the twenty minutes at
   Cox's Bazar when the sun goes into the Bay of Bengal. Deep sea-night for
   the fixed furniture, warm sand for the page, and the sunset itself as the
   one accent that asks to be clicked. Candle gold carries the premium
   details. Nothing here is a default grey - the neutrals are warmed towards
   sand so they sit with the coral rather than fighting it.

   Type matters more than usual on this site because almost every word on it
   is Bengali, and Bengali has no safe web fallback: left alone, the browser
   picks whatever it has, which differs on every phone and renders conjuncts
   badly. Hind Siliguri is loaded and set first in the stack so the Bengali
   is drawn properly and identically everywhere. Fraunces carries the Latin
   headings - warm, a little old-fashioned, which suits a business selling
   candlelight on a beach.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

:root{
  /* --- the dusk --- */
  --night:#0D1B2A;
  --night-2:#16293D;
  --night-3:#22384F;

  --sand:#FBF7F1;
  --sand-2:#F4ECE1;
  --shell:#FFFFFF;

  --coral:#E2613C;
  --coral-dark:#C44E2C;
  --coral-soft:#FCEDE7;

  --gold:#D9A441;
  --gold-soft:#FBF2DF;

  --ink:#1F2A33;
  --ink-2:#5C6B77;
  --ink-3:#8C99A3;
  --line:#E8DFD3;
  --line-soft:#F1EAE0;

  --wa:#25D366;
  --wa-dark:#1EA952;

  --font-display:'Fraunces', Georgia, serif;
  /* Hind Siliguri first: it covers Bengali and Latin, so a line that mixes
     both is drawn in one face rather than two. */
  --font-body:'Hind Siliguri', 'Segoe UI', system-ui, sans-serif;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 2px 10px rgba(13,27,42,0.06);
  --shadow-lift:0 14px 38px rgba(13,27,42,0.13);
  --ring:0 0 0 3px rgba(226,97,60,0.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--sand);
  color:var(--ink);
  line-height:1.7;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px;}

.container{max-width:1200px; margin:0 auto; padding:0 22px;}

h1,h2,h3{line-height:1.3; font-weight:600;}

/* -------------------- topbar -------------------- */
.topbar{
  background:var(--night);
  color:rgba(255,255,255,0.82);
  font-size:13px;
  padding:9px 0;
}
.topbar .container{
  display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap; text-align:center;
}
.topbar-sep{opacity:0.35;}
.topbar a{color:#fff; border-bottom:1px solid rgba(255,255,255,0.3);}
.topbar a:hover{border-bottom-color:var(--gold);}

/* -------------------- header -------------------- */
.site-header{
  background:rgba(251,247,241,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.header-main{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:20px;
}
.brand{display:flex; align-items:center; gap:11px;}
.brand-logo, .brand-mark{height:46px; width:auto;}
.brand-text .name{
  font-family:var(--font-display);
  font-size:20px; font-weight:600; letter-spacing:-0.01em;
  color:var(--night); line-height:1.2;
}
.brand-text{display:flex; flex-direction:column;}
/* .tag is also the filter-chip class in the shop, so the tagline has to be
   named specifically or it inherits a pill it was never meant to have. */
.brand-text .tag, .brand-text .sub{
  font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--coral); font-weight:600;
  background:none; border:none; padding:0; border-radius:0;
}

.header-actions{display:flex; align-items:center; gap:10px;}
.header-action{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  padding:8px 12px; border-radius:var(--radius-sm);
  transition:background .15s, color .15s;
}
.header-action:hover{background:var(--sand-2); color:var(--night);}
.header-action svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8;}

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--coral); color:#fff;
  padding:11px 22px; border-radius:100px;
  font-weight:600; font-size:14.5px;
  box-shadow:0 4px 14px rgba(226,97,60,0.3);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-cta:hover{background:var(--coral-dark); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(226,97,60,0.38);}
.btn-cta svg{width:18px; height:18px; fill:currentColor;}

.btn-solid{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--night); color:#fff; padding:12px 24px;
  border-radius:100px; font-weight:600; font-size:14.5px;
  transition:background .15s, transform .15s;
}
.btn-solid:hover{background:var(--night-2); transform:translateY(-1px);}

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:var(--night);
  border:1px solid var(--line); padding:11px 22px;
  border-radius:100px; font-weight:600; font-size:14.5px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.btn-ghost:hover{border-color:var(--coral); transform:translateY(-1px); box-shadow:var(--shadow);}
.btn-ghost svg{width:18px; height:18px; fill:currentColor;}

/* -------------------- nav -------------------- */
.nav-bar{border-top:1px solid var(--line-soft);}
.nav-bar .container{display:flex; align-items:center; gap:4px;}
.nav-link{
  padding:13px 16px; font-size:14.5px; font-weight:500;
  color:var(--ink-2); position:relative;
  transition:color .15s;
}
.nav-link:hover{color:var(--night);}
.nav-link.active{color:var(--coral); font-weight:600;}
.nav-link.active::after{
  content:''; position:absolute; left:16px; right:16px; bottom:-1px;
  height:2px; background:var(--coral); border-radius:2px;
}

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--radius-sm);
  color:var(--night);
}
.nav-toggle:hover{background:var(--sand-2);}
.nav-toggle svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2;}
/* The markup is three bars rather than an icon, so they are drawn here. */
.nav-toggle{flex-direction:column; gap:5px;}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:currentColor;
}

.mobile-menu{
  position:fixed; inset:0; z-index:200;
  background:var(--sand);
  padding:20px 22px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  /* Off-screen until opened. script.js adds .open. */
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu.open{transform:translateX(0);}
/* The CMS drops the package links inside this wrapper; `display:contents`
   makes them direct children of the menu so they lay out with everything
   else instead of as one block. */
#mm-categories{display:contents;}
.mobile-menu-logo{height:44px; width:auto; margin-bottom:8px;}
.mobile-menu .nav-link, .mobile-menu > a{
  padding:14px 4px; font-size:17px; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu > a:hover, .mobile-menu .nav-link:hover{color:var(--coral);}
.mobile-menu #mm-categories a{
  display:block; padding:12px 4px 12px 16px; font-size:15.5px;
  color:var(--ink-2); border-bottom:1px solid var(--line-soft);
}
.mobile-menu .mm-sub{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 4px 6px; font-weight:600;
}
.close-btn{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px; border-radius:50%;
  background:var(--sand-2); color:var(--night);
  display:flex; align-items:center; justify-content:center;
}
.close-btn svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2;}
/* Some pages use a text "×" rather than an icon. */
.close-btn{font-size:28px; line-height:1;}

/* -------------------- hero -------------------- */
.home-hero{
  position:relative; overflow:hidden;
  background:var(--night);
  padding:clamp(48px, 9vw, 92px) 0 clamp(44px, 8vw, 80px);
}

/* A slow warm glow behind the type, standing in for the sunset the photograph
   used to carry. It breathes rather than moves, so it reads as light on water
   and not as something demanding attention. */
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 18% 20%, rgba(226,97,60,0.34) 0%, transparent 62%),
    radial-gradient(52% 62% at 78% 78%, rgba(217,164,65,0.22) 0%, transparent 60%);
  animation:hero-breathe 11s ease-in-out infinite;
}
@keyframes hero-breathe{
  0%,100%{opacity:0.75; transform:scale(1);}
  50%{opacity:1; transform:scale(1.07);}
}

/* A hairline of surf along the bottom edge. */
.home-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,0.55), transparent);
}

.home-hero-overlay{position:relative; z-index:2;}
.home-hero-overlay > *{max-width:640px;}

.home-hero .eyebrow{
  color:var(--gold); font-size:12.5px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
/* A short rule leading into the eyebrow, so the block has somewhere to start. */
.home-hero .eyebrow::before{
  content:''; width:28px; height:1px; background:var(--gold); flex:none;
}

.home-hero h1{
  font-family:var(--font-body);
  font-size:clamp(30px, 6.4vw, 58px);
  color:#fff; font-weight:700; line-height:1.16;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.hero-accent{
  color:var(--gold);
  /* The accent word gets its own weight of attention without a second colour
     fighting the coral elsewhere on the page. */
  font-style:italic;
}

.home-hero .sub, .home-hero p:not(.eyebrow){
  color:rgba(255,255,255,0.82); font-size:clamp(15px, 2.2vw, 17px);
  margin-top:18px; line-height:1.7;
}

.hero-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;
}
.home-hero .btn-cta{padding:14px 30px; font-size:15.5px;}
.btn-hero-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:100px;
  border:1px solid rgba(255,255,255,0.28); color:#fff;
  font-weight:600; font-size:15px;
  transition:border-color .15s, background .15s;
}
.btn-hero-ghost:hover{border-color:var(--gold); background:rgba(255,255,255,0.06);}

.hero-points{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:30px; max-width:640px;
}
.hero-points li{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:rgba(255,255,255,0.68);
}
.hero-points li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:none;
}

/* Everything arrives in order, so the eye is led down the block instead of
   being handed all of it at once. It starts visible and animates from there,
   so a failed animation still leaves a readable page. */
.home-hero-overlay > *{animation:hero-rise .7s cubic-bezier(.2,.7,.3,1) backwards;}
.home-hero .eyebrow{animation-delay:.05s;}
.home-hero h1{animation-delay:.15s;}
.home-hero .sub{animation-delay:.28s;}
.hero-actions{animation-delay:.4s;}
.hero-points{animation-delay:.52s;}

@keyframes hero-rise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .hero-glow{animation:none;}
  .home-hero-overlay > *{animation:none;}
}

.location-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--sand-2); color:var(--ink-2);
  border:1px solid var(--line);
  padding:6px 14px; border-radius:100px;
  font-size:13px; white-space:nowrap;
}
.location-pill svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex:none;}
/* On the dark hero the same pill has to invert. */
.home-hero .location-pill{
  background:rgba(255,255,255,0.12); color:#fff;
  border-color:rgba(255,255,255,0.22);
  margin-top:22px; backdrop-filter:blur(4px);
}

/* -------------------- page banner -------------------- */
.page-banner{
  background:var(--night);
  color:#fff; padding:44px 0 40px;
  position:relative; overflow:hidden;
}
/* A soft sunset glow in the corner, so the banner reads as dusk rather than
   as a flat navy bar. */
.page-banner::before{
  content:''; position:absolute; right:-120px; top:-120px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,97,60,0.35) 0%, transparent 70%);
}
.page-banner .container{position:relative; z-index:1;}
/* Some pages wrap the banner content in .container and some put it directly
   in the section. Give the unwrapped case the same width and gutter, so the
   heading never sits flush against the edge of the screen. */
.page-banner > :not(.container){
  position:relative; z-index:1;
  max-width:1200px; margin-left:auto; margin-right:auto;
  padding-left:22px; padding-right:22px;
}
.page-banner h1{
  font-family:var(--font-display); font-size:clamp(26px, 4vw, 38px);
  font-weight:600; letter-spacing:-0.01em;
}
.page-banner h1:lang(bn){font-family:var(--font-body);}
.page-banner p{color:rgba(255,255,255,0.75); margin-top:8px; max-width:600px;}

.crumb{
  font-size:13px; color:rgba(255,255,255,0.6);
  margin-bottom:12px; display:flex; gap:8px; align-items:center;
}
.crumb a:hover{color:#fff;}
.crumb-current{color:var(--gold);}

/* -------------------- section head -------------------- */
.section-head{text-align:center; max-width:640px; margin:0 auto 34px;}
.section-head .eyebrow{
  color:var(--coral); font-size:12.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px;
}
.section-head h2{
  font-family:var(--font-display); font-size:clamp(24px, 3.4vw, 33px);
  color:var(--night); font-weight:600; letter-spacing:-0.01em;
  text-wrap:balance;
}
.section-head h2:lang(bn){font-family:var(--font-body);}
.section-head p{color:var(--ink-2); margin-top:10px;}

/* -------------------- filter tags -------------------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:100px;
  border:1px solid var(--line); background:#fff;
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:all .15s;
}
.tag:hover{border-color:var(--coral); color:var(--coral);}
.tag.active{background:var(--night); border-color:var(--night); color:#fff;}

/* -------------------- product grid -------------------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:22px;
  padding:40px 0 56px;
}
.product-card{
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:transparent;
}
.product-thumb{
  position:relative; aspect-ratio:4/3;
  background:var(--sand-2); overflow:hidden;
}
.product-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s;
}
.product-card:hover .product-thumb img{transform:scale(1.05);}
/* A package can exist before its photo does. The placeholder is the logo
   mark, centred and faded, rather than a stretched broken image. */
.product-thumb img.is-placeholder{
  object-fit:contain; padding:26%; opacity:0.22;
}

.product-badge, .product-discount{
  position:absolute; top:11px; z-index:2;
  padding:4px 11px; border-radius:100px;
  font-size:11.5px; font-weight:600; letter-spacing:0.02em;
}
.product-badge{left:11px; background:rgba(13,27,42,0.85); color:#fff; backdrop-filter:blur(4px);}
.product-discount{right:11px; background:var(--coral); color:#fff;}

.product-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1;}
.product-name{
  font-size:16.5px; font-weight:600; color:var(--night);
  line-height:1.35; transition:color .15s;
}
.product-card:hover .product-name{color:var(--coral);}
.product-code{
  font-size:11.5px; color:var(--ink-3); margin-top:5px;
  letter-spacing:0.03em;
}
.product-code span{color:var(--coral); font-weight:600;}
.product-loc{
  display:flex; align-items:center; gap:5px;
  font-size:13px; color:var(--ink-2); margin-top:8px;
}
.product-loc svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:none;}

.product-price{
  display:flex; align-items:baseline; gap:8px;
  margin-top:12px; font-size:19px; font-weight:700; color:var(--night);
}
.product-price .from{font-size:12px; font-weight:500; color:var(--ink-3);}
.product-price .old{
  font-size:14px; font-weight:400; color:var(--ink-3);
  text-decoration:line-through;
}
/* Every package is quoted on request, so the space where a price would be
   says so rather than sitting empty. */
/* Where a price would be. It is an invitation rather than an absence, so it
   is set in the accent and given the arrow that says something happens. */
.is-on-request{
  margin-top:12px; font-size:13.5px; font-weight:600; color:var(--coral);
  display:inline-flex; align-items:center; gap:6px;
}
.is-on-request::after{
  content:'→'; font-weight:700; transition:transform .15s;
}
.product-card:hover .is-on-request::after{transform:translateX(3px);}

.product-actions{
  display:flex; align-items:center; gap:9px;
  margin-top:auto; padding-top:15px;
}
.wish-btn{
  width:40px; height:40px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); transition:all .15s;
}
.wish-btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2;}
.wish-btn:hover{border-color:var(--coral); color:var(--coral); background:var(--coral-soft);}
.wish-btn.is-wished{background:var(--coral); border-color:var(--coral); color:#fff;}
.wish-btn.is-wished svg{fill:currentColor;}

.book-btn{
  flex:1; text-align:center;
  background:var(--night); color:#fff;
  padding:10px 16px; border-radius:100px;
  font-size:14px; font-weight:600;
  transition:background .15s;
}
.book-btn:hover{background:var(--coral);}

/* -------------------- empty state -------------------- */
.product-grid:empty::after,
#shop-grid .empty-note{
  grid-column:1/-1; text-align:center; color:var(--ink-2);
  padding:50px 0;
}

/* -------------------- product detail -------------------- */
.product-detail{padding:34px 0 60px;}
.pd-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px;}

.pd-main-img{
  width:100%; aspect-ratio:4/3;
  border-radius:var(--radius); background:var(--sand-2);
  border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pd-main-img img{width:100%; height:100%; object-fit:cover;}
/* Before a photo is uploaded the logo stands in, centred and faded rather
   than stretched across the frame. */
.pd-main-img img.is-placeholder{
  width:auto; height:auto; max-width:46%; max-height:46%;
  object-fit:contain; opacity:0.28;
}
.pd-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.pd-thumbs img{
  width:74px; height:74px; object-fit:cover;
  border-radius:var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition:border-color .15s;
}
.pd-thumbs img.active, .pd-thumbs img:hover{border-color:var(--coral);}

.pd-info h1{
  font-family:var(--font-display); font-size:clamp(24px,3.2vw,32px);
  color:var(--night); font-weight:600; letter-spacing:-0.01em;
}
.pd-info h1:lang(bn){font-family:var(--font-body);}
.pd-code{font-size:13px; color:var(--ink-3); margin-top:6px;}
.pd-code span{color:var(--coral); font-weight:600;}

.pd-trust{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding:12px 16px;
  background:var(--gold-soft); border:1px solid #EFE0BE;
  border-radius:var(--radius-sm);
  font-size:13.5px; color:#7A5B18;
}
.pd-trust svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; flex:none;}

.pd-section-label{
  font-size:12.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3);
  margin:26px 0 12px;
}
.pd-inclusions{display:grid; gap:9px;}
.pd-inclusions li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--ink);
}
.pd-inclusions li::before{
  content:''; width:18px; height:18px; flex:none; margin-top:4px;
  border-radius:50%; background:var(--coral-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2613C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}

/* -------------------- booking box -------------------- */
.booking-box{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
  margin-top:26px; box-shadow:var(--shadow);
}
.bb-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.bb-price-label{font-size:13px; color:var(--ink-2);}
.bb-price-value{font-size:24px; font-weight:700; color:var(--night); font-family:var(--font-display);}
.bb-field{
  display:flex; flex-direction:column; gap:6px; margin-top:14px;
}
.bb-field label{font-size:13px; font-weight:500; color:var(--ink-2);}
.bb-field input, .bb-field select, .bb-field textarea{
  font-family:inherit; font-size:14.5px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--sand);
  transition:border-color .15s, box-shadow .15s;
}
.bb-field input:focus, .bb-field select:focus, .bb-field textarea:focus{
  outline:none; border-color:var(--coral); box-shadow:var(--ring); background:#fff;
}
.bb-addons{margin-top:18px; border-top:1px solid var(--line-soft); padding-top:16px;}
.bb-addons-label{
  font-size:12.5px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;
}
.bb-addons-list{display:grid; gap:9px;}
.bb-addon{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.bb-addon:hover{border-color:var(--coral); background:var(--coral-soft);}
.bb-addon input{accent-color:var(--coral); width:17px; height:17px;}
.bb-addon-name{flex:1; font-size:14px;}
.bb-addon-fee{font-size:14px; font-weight:600; color:var(--night);}

.bb-total-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft);
}
.bb-total-label{font-size:14px; font-weight:600; color:var(--ink-2);}
.bb-total-value{font-size:25px; font-weight:700; color:var(--coral); font-family:var(--font-display);}
.bb-total-note{font-size:12.5px; color:var(--ink-3); margin-top:4px;}

.bb-wa-btn, .bb-book-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:14px; border-radius:100px;
  font-weight:600; font-size:15.5px; margin-top:14px;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.bb-wa-btn{background:var(--wa); color:#fff; box-shadow:0 4px 14px rgba(37,211,102,0.3);}
.bb-wa-btn:hover{background:var(--wa-dark); transform:translateY(-1px);}
.bb-book-btn{background:var(--night); color:#fff;}
.bb-book-btn:hover{background:var(--night-2); transform:translateY(-1px);}
.bb-wa-btn svg, .bb-book-btn svg{width:20px; height:20px; fill:currentColor;}
.bb-footer-note{
  font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:12px;
}

/* -------------------- tabs -------------------- */
.pd-tabs{margin-top:46px;}
.pd-tab-headers{display:flex; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.pd-tab-head{
  padding:12px 20px; font-size:14.5px; font-weight:500;
  color:var(--ink-2); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.pd-tab-head:hover{color:var(--night);}
.pd-tab-head.active-tab{color:var(--coral); border-bottom-color:var(--coral); font-weight:600;}
.pd-tab-content{padding:22px 0; color:var(--ink-2); max-width:760px;}

/* -------------------- related -------------------- */
.related-section{padding:48px 0 60px; border-top:1px solid var(--line); margin-top:50px;}

/* -------------------- trust strip -------------------- */
.trust-strip{
  background:var(--night); color:#fff;
  padding:44px 0;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:28px;
}
.trust-item{display:flex; gap:14px; align-items:flex-start;}
.trust-item svg{
  width:26px; height:26px; flex:none; margin-top:2px;
  stroke:var(--gold); fill:none; stroke-width:1.7;
}
.trust-item h5{font-size:15.5px; font-weight:600; margin-bottom:3px; color:#fff;}
.trust-item p{font-size:13.5px; color:rgba(255,255,255,0.66); line-height:1.6;}

/* -------------------- gallery -------------------- */
.gallery-section{padding:40px 0 56px;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  grid-auto-rows:210px; gap:14px;
}
.gal-item{
  overflow:hidden; border-radius:var(--radius);
  background:var(--sand-2); position:relative;
  border:1px solid var(--line);
}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform .45s;}
.gal-item:hover img{transform:scale(1.06);}
.gal-item.tall{grid-row:span 2;}
.gallery-note{
  text-align:center; color:var(--ink-2); font-size:14px;
  margin-top:28px;
}
.gallery-cta{
  background:var(--sand-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:38px 28px;
  text-align:center; margin-top:40px;
}
.gallery-cta h2{
  font-family:var(--font-display); font-size:clamp(22px,3vw,29px);
  color:var(--night); margin-bottom:8px;
}
.gallery-cta h2:lang(bn){font-family:var(--font-body);}
.gallery-cta p{color:var(--ink-2); max-width:520px; margin:0 auto;}
.gallery-cta-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;
}

/* -------------------- contact -------------------- */
.contact-section{padding:44px 0 60px;}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:38px;}

.contact-cards{display:grid; gap:14px;}
.contact-card{
  display:flex; gap:15px; align-items:flex-start;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:18px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.contact-card:hover{border-color:var(--coral); box-shadow:var(--shadow); transform:translateY(-2px);}
.cc-icon{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--coral-soft); color:var(--coral);
}
.cc-icon svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9;}
.cc-body h4{font-size:15px; font-weight:600; color:var(--night); margin-bottom:3px;}
.cc-body p{font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-bottom:5px;}
.cc-body a{font-size:14.5px; font-weight:600; color:var(--coral); display:inline-block;}
.cc-body a:hover{text-decoration:underline;}
.cc-plain{font-size:14px; color:var(--ink); display:inline-block;}

.contact-side{display:flex; flex-direction:column; gap:16px;}
.side-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
}
.side-card h3{
  font-size:16px; font-weight:600; color:var(--night); margin-bottom:12px;
}
.side-wa-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--wa); color:#fff; padding:14px;
  border-radius:100px; font-weight:600; font-size:15px;
  box-shadow:0 4px 14px rgba(37,211,102,0.3);
  transition:background .15s, transform .15s;
}
.side-wa-btn:hover{background:var(--wa-dark); transform:translateY(-1px);}
.side-wa-btn svg{width:21px; height:21px; fill:currentColor;}

.hours-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
}
.hours-card h4{font-size:16px; font-weight:600; color:var(--night); margin-bottom:12px;}
.hours-card p{
  display:flex; justify-content:space-between; gap:12px;
  font-size:14px; padding-bottom:9px; margin-bottom:9px;
  border-bottom:1px solid var(--line-soft);
}
.hours-card p span:first-child{font-weight:600; color:var(--night);}
.hours-card p span:last-child{color:var(--ink-2);}
.hours-card p.hours-note{
  display:block; font-size:13px; color:var(--ink-3);
  border-bottom:none; padding-bottom:0; margin-bottom:0;
  line-height:1.6;
}
.map-card h4{
  font-size:16px; font-weight:600; color:var(--night); padding:18px 20px 12px;
}

.map-card{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#fff;
}
.map-embed{width:100%; height:270px; border:0; display:block;}

/* -------------------- footer -------------------- */
.site-footer{
  background:var(--night); color:rgba(255,255,255,0.72);
  padding:50px 0 0; margin-top:auto;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:36px; padding-bottom:40px;
}
.footer-brand{display:flex; align-items:center; gap:11px; margin-bottom:14px;}
.footer-brand .name{
  font-family:var(--font-display); font-size:18px;
  font-weight:600; color:#fff;
}
.footer-logo{height:52px; width:auto;}
.footer-desc{font-size:14px; line-height:1.75; max-width:320px;}
.footer-col h4{
  font-size:12.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:#fff; margin-bottom:14px;
}
.footer-col a, .footer-col p{display:block; margin-bottom:9px; font-size:14px;}
.footer-col a:hover{color:var(--gold);}
.footer-col #footer-packages a{margin-bottom:9px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:18px 0; font-size:13px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:rgba(255,255,255,0.5);
}

/* -------------------- floating WhatsApp -------------------- */
/* On every page, always reachable. The label shows on wider screens because
   a bare green circle is not self-explanatory to everyone; on a phone the
   icon alone keeps the thumb zone clear. */
.float-wa{
  position:fixed; right:18px; bottom:18px; z-index:150;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa); color:#fff;
  height:56px; padding:0 18px; border-radius:100px;
  font-weight:600; font-size:15px; white-space:nowrap;
  box-shadow:0 8px 26px rgba(37,211,102,0.45);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.float-wa:hover{background:var(--wa-dark); transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 32px rgba(37,211,102,0.55);}
.float-wa svg{width:28px; height:28px; fill:currentColor; flex:none;}

/* A slow pulse, so it is noticed once without nagging. */
.float-wa::before{
  content:''; position:absolute; inset:0; border-radius:100px;
  border:2px solid var(--wa); opacity:0;
  animation:wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1); opacity:0.65;}
  70%{transform:scale(1.16); opacity:0;}
  100%{opacity:0;}
}

/* -------------------- responsive -------------------- */
@media (max-width:980px){
  .pd-grid{grid-template-columns:1fr; gap:28px;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
}

@media (max-width:760px){
  body{font-size:15px;}
  .nav-bar{display:none;}
  .nav-toggle{display:flex;}
  .header-action span{display:none;}
  .product-grid{grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); gap:14px; padding:26px 0 40px;}
  .product-body{padding:12px 12px 14px;}
  .product-name{font-size:14.5px;}
  .product-actions{flex-direction:column; align-items:stretch; gap:7px;}
  .wish-btn{display:none;}
  .book-btn{padding:9px 14px; font-size:13.5px;}
  .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); grid-auto-rows:150px; gap:10px;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .footer-bottom{justify-content:center; text-align:center;}
  /* The label stays: "Booking Now" is the instruction, and the icon alone
     only says which app opens. */
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* -------------------- enquiry form (contact) -------------------- */
/* The form is the first thing on the contact page because sending an enquiry
   is what most people came to do. The intro column carries the reassurance
   that makes someone willing to start typing. */
.enquiry-section{padding:40px 0 10px;}
.enquiry-card{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}

.enquiry-intro{
  background:var(--night); color:#fff;
  padding:32px 30px; position:relative; overflow:hidden;
}
.enquiry-intro::before{
  content:''; position:absolute; left:-90px; bottom:-90px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,97,60,0.32) 0%, transparent 70%);
}
.enquiry-intro > *{position:relative; z-index:1;}
.enquiry-intro .eyebrow{
  color:var(--gold); font-size:12.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
}
.enquiry-intro h2{
  font-family:var(--font-body);
  font-size:clamp(21px,2.6vw,27px); font-weight:600;
  margin:12px 0 12px; line-height:1.35; text-wrap:balance;
}
.enquiry-intro p{color:rgba(255,255,255,0.78); font-size:14.5px;}

.enquiry-points{margin-top:22px; display:grid; gap:11px;}
.enquiry-points li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:rgba(255,255,255,0.9);
}
.enquiry-points li::before{
  content:''; width:19px; height:19px; flex:none; margin-top:3px;
  border-radius:50%; background:rgba(217,164,65,0.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A441' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}

.enquiry-form{padding:30px; display:flex; flex-direction:column; gap:14px;}
.ef-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ef-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.ef-field label{font-size:13px; font-weight:600; color:var(--ink-2);}
.ef-field label span{color:var(--coral);}

.ef-field input, .ef-field select, .ef-field textarea{
  font-family:inherit; font-size:14.5px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--sand);
  width:100%; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ef-field textarea{resize:vertical; min-height:80px; line-height:1.6;}
.ef-field input::placeholder, .ef-field textarea::placeholder{color:var(--ink-3);}
.ef-field input:focus, .ef-field select:focus, .ef-field textarea:focus{
  outline:none; border-color:var(--coral); background:#fff; box-shadow:var(--ring);
}
.ef-field input.has-error, .ef-field select.has-error{
  border-color:#D64545; background:#FDF0F0;
}
.ef-error{font-size:12.5px; color:#D64545; font-weight:500;}

.ef-submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--wa); color:#fff;
  padding:14px; border-radius:100px;
  font-weight:600; font-size:15.5px; margin-top:6px;
  box-shadow:0 4px 16px rgba(37,211,102,0.32);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.ef-submit:hover{background:var(--wa-dark); transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(37,211,102,0.4);}
.ef-submit svg{width:21px; height:21px; fill:currentColor; flex:none;}
.ef-submit.is-sent{background:var(--night); box-shadow:none;}

.ef-note{font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.6;}

@media (max-width:860px){
  .enquiry-card{grid-template-columns:1fr;}
  .enquiry-intro{padding:26px 22px;}
  .enquiry-form{padding:24px 22px;}
}

@media (max-width:520px){
  .ef-row{grid-template-columns:1fr;}
}

/* -------------------- featured row -------------------- */
/* The three packages that publish a price. They get their own row above the
   catalogue and are drawn a little warmer than the rest, because a customer
   looking for a number should find one without opening twenty pages. */
.featured-section{padding:36px 0 8px;}
.featured-section .section-head{margin-bottom:24px;}

.product-card.is-featured{
  border-color:var(--gold);
  box-shadow:0 2px 16px rgba(217,164,65,0.18);
}
.product-card.is-featured .product-thumb{background:var(--gold-soft);}
.product-card.is-featured .book-btn{background:var(--coral);}
.product-card.is-featured .book-btn:hover{background:var(--coral-dark);}
.product-card.is-featured .product-price{color:var(--coral);}

/* A quiet ribbon rather than a loud one - the price is the real signal. */
/* No badge on the featured cards. Every card in that row would carry it, and
   a label that is on everything distinguishes nothing - the row's heading
   already says what they are. The gold edge is signal enough. */
.product-card{position:relative;}

#shop-grid .section-head{padding-top:26px;}

/* -------------------- helpline card -------------------- */
.contact-card-helpline{
  border-color:var(--coral);
  background:linear-gradient(180deg, var(--coral-soft) 0%, #fff 60%);
}
.cc-icon-urgent{background:var(--coral); color:#fff;}
.cc-pill{
  display:inline-block; vertical-align:middle;
  background:var(--coral); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 8px; border-radius:100px; margin-left:7px;
}
.cc-number{
  font-size:18px; font-weight:700; color:var(--coral);
  letter-spacing:0.01em; display:block; margin-top:2px;
}

/* ==========================================================================
   Phones

   Most of this site is opened on a phone, so this is not a fallback - it is
   the main case. Three things matter more than anything else here: the
   WhatsApp button must never cover a control, tap targets must be big enough
   to hit with a thumb, and nothing may push the page sideways.
   ========================================================================== */
@media (max-width:760px){
  /* iOS zooms the page in when a focused input has text smaller than 16px,
     and never zooms back out. Every field is therefore at least 16px. */
  .ef-field input, .ef-field select, .ef-field textarea,
  .bb-field input, .bb-field select, .bb-field textarea{
    font-size:16px; padding:13px;
  }

  .container{padding:0 16px;}

  .topbar{font-size:12px; padding:7px 0;}
  .topbar .container{gap:8px;}

  .header-main{padding:11px 0; gap:10px;}
  .brand-logo, .brand-mark{height:38px;}
  .brand-text .name{font-size:16px;}
  .brand-text .tag, .brand-text .sub{font-size:10px; letter-spacing:0.07em;}
  /* The location pill is decoration; the room is better spent on the logo. */
  .header-actions .location-pill{display:none;}
  .header-action{padding:8px; min-width:40px; justify-content:center;}

  .page-banner{padding:28px 0 26px;}
  .page-banner h1{font-size:25px;}
  .page-banner p{font-size:14px;}

  .section-head{margin-bottom:22px; text-align:left;}
  .section-head h2{font-size:22px;}
  .section-head p{font-size:14px;}

  .featured-section{padding:24px 0 4px;}
  /* Two across at phone width: one card per row wastes the screen, three are
     too small to read the name on. */
  .featured-row{grid-template-columns:repeat(2, minmax(0,1fr));}

  .product-card.is-featured::before{font-size:9.5px; padding:2px 8px 2px 10px;}

  .contact-section{padding:26px 0 36px;}
  .contact-grid{gap:22px;}
  .cc-number{font-size:17px;}
  .contact-card{padding:14px; gap:12px;}
  .cc-icon{width:40px; height:40px;}

  .enquiry-section{padding:24px 0 4px;}
  .enquiry-intro h2{font-size:20px;}
  .enquiry-points li{font-size:13.5px;}

  .trust-strip{padding:30px 0;}
  .trust-grid{gap:20px;}

  .gallery-cta{padding:26px 18px;}
  .gallery-cta-actions{flex-direction:column;}
  .gallery-cta-actions a{width:100%;}

  .pd-tab-head{padding:11px 14px; font-size:14px;}
  .pd-thumbs img{width:62px; height:62px;}

  /* The floating button sits above the fold of the thumb zone, and the page
     is given room underneath so it cannot cover the last control. */
  .float-wa{height:50px; padding:0 15px; gap:8px; right:12px; bottom:12px; font-size:14px;}
  .float-wa svg{width:24px; height:24px;}
  body{padding-bottom:0;}
  .site-footer{padding-bottom:76px;}
}

@media (max-width:400px){
  .product-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
  .product-name{font-size:13.5px;}
  .product-code, .is-on-request{font-size:11px;}
  .product-loc{font-size:11.5px;}
  .book-btn{font-size:13px; padding:9px 10px;}
  .page-banner h1{font-size:22px;}
  .section-head h2{font-size:20px;}
}

/* A landscape phone is short, not narrow: the hero must not eat the screen. */
@media (max-height:520px) and (orientation:landscape){
  .home-hero{padding:34px 0 30px;}
  .home-hero h1{font-size:26px;}
  .hero-points{display:none;}
}

/* -------------------- no sideways scroll -------------------- */
/* A flex or grid child will not shrink below its content unless it is told it
   may. Without these, a long brand name or a wide card makes the whole page
   wider than the phone and every section gets dragged off the right edge. */
.header-main, .brand, .brand-text, .product-body, .cc-body, .enquiry-form{min-width:0;}
.brand-text .name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}

@media (max-width:760px){
  /* Brand and menu button only. The heart and the contact link are both in
     the menu, and at this width they were pushing the header past the screen. */
  .header-actions{display:none;}
  .header-main{gap:12px;}
  .brand-logo, .brand-mark{height:34px;}
  .brand-text .name{font-size:15.5px;}
}

@media (max-width:360px){
  /* On the narrowest phones the tagline is the first thing that can go. */
  .brand-text .tag, .brand-text .sub{display:none;}
}

/* -------------------- keeping clear of the floating button -------------------- */
/* The button is fixed to the bottom right, so on a phone it lands on top of
   whatever happens to be there - in practice, the name and price of the last
   card in a row. Giving every scrolling section room underneath means the
   button covers empty page rather than something that needs reading. */
@media (max-width:760px){
  .product-grid{padding-bottom:78px;}
  .contact-section, .gallery-section, .product-detail{padding-bottom:78px;}
  .site-footer{padding-bottom:84px;}
}

/* Dragging a finger up the page should not be interrupted by the button
   catching the touch. It is small enough not to need a large hit area. */
.float-wa{touch-action:manipulation;}

/* -------------------- empty gallery -------------------- */
/* Until photographs are uploaded the grid has nothing in it, and an empty
   grid reads as a page that failed to load. This says what is happening and
   offers the one thing the visitor can still usefully do. */
.gallery-grid.is-empty{
  display:block; grid-auto-rows:auto;
}
.gallery-empty{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; padding:56px 24px;
  background:var(--sand-2); border:1px dashed var(--line);
  border-radius:var(--radius);
}
.gallery-empty svg{width:38px; height:38px; color:var(--ink-3);}
.gallery-empty p{color:var(--ink-2); font-size:14.5px; max-width:340px;}

/* ==========================================================================
   Refinements

   The photograph is gone from the hero, so the page now opens on type and the
   first thing with an image on it is a package card. That shifts the weight of
   the design onto the cards and the rhythm between sections, which is what
   these adjust.
   ========================================================================== */

/* -------------------- cards -------------------- */
/* A flatter resting state and a clearer lift, so a grid of twenty reads as a
   list rather than twenty competing boxes. */
.product-card{
  box-shadow:none;
  border-color:var(--line-soft);
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(13,27,42,0.11);
  border-color:var(--line);
}
.product-card.is-featured{
  border-color:var(--gold);
  box-shadow:0 1px 3px rgba(217,164,65,0.2);
}
.product-card.is-featured:hover{
  box-shadow:0 12px 32px rgba(217,164,65,0.26);
}

/* The tier badge is information, not a sticker. Quieter, and it sits on the
   image rather than shouting over it. */
.product-badge{
  background:rgba(13,27,42,0.72);
  font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; font-size:10px;
  padding:4px 10px;
}

.product-name{letter-spacing:-0.01em;}
.product-code{letter-spacing:0.02em;}

/* Book Now is the action on every card, twenty times down the page. At full
   strength that is twenty coral bars; it earns its colour on hover instead. */
.book-btn{
  background:var(--night);
  font-weight:600;
}
.book-btn:hover{background:var(--coral);}
.product-card.is-featured .book-btn{background:var(--coral);}
.product-card.is-featured .book-btn:hover{background:var(--coral-dark);}

/* -------------------- section rhythm -------------------- */
/* The featured row and the full catalogue are two different things. A rule
   between them says so more quietly than a coloured band would. */
#shop-grid .section-head{
  padding-top:38px;
  border-top:1px solid var(--line);
  max-width:none; text-align:left;
}
#shop-grid .section-head p{max-width:560px;}
.featured-section .section-head{max-width:none; text-align:left;}
.featured-section .section-head p{max-width:560px;}

/* The eyebrow gets the same leading rule as the hero's, so the two read as
   the same system. */
.section-head .eyebrow{
  display:flex; align-items:center; gap:10px;
}
.section-head .eyebrow::before{
  content:''; width:22px; height:1px; background:var(--coral); flex:none;
}

/* -------------------- trust strip -------------------- */
.trust-strip{position:relative; overflow:hidden;}
.trust-strip::before{
  content:''; position:absolute; right:-80px; top:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,164,65,0.16) 0%, transparent 70%);
}
.trust-strip .container{position:relative; z-index:1;}

@media (max-width:760px){
  #shop-grid .section-head{padding-top:30px;}
  .product-badge{font-size:9.5px; padding:3px 8px;}
}

/* -------------------- about -------------------- */
/* Who is behind the packages, sitting between the catalogue and the
   reassurance strip: read what is on offer, then who sets it up, then why
   that is safe to book. */
.about-section{
  padding:clamp(48px, 7vw, 76px) 0;
  border-top:1px solid var(--line);
  background:var(--sand-2);
}
.about-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 64px); align-items:start;
}

.about-copy .eyebrow{
  color:var(--coral); font-size:12.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.about-copy .eyebrow::before{
  content:''; width:22px; height:1px; background:var(--coral); flex:none;
}
.about-copy h2{
  font-family:var(--font-body);
  font-size:clamp(23px, 3.2vw, 34px);
  color:var(--night); font-weight:700; line-height:1.25;
  letter-spacing:-0.015em; text-wrap:balance;
}
#about-body{margin-top:16px; display:flex; flex-direction:column; gap:14px;}
#about-body p{color:var(--ink-2); font-size:15.5px; line-height:1.78; max-width:62ch;}

.about-note{
  margin-top:16px; font-size:13.5px; color:var(--ink-3);
  display:flex; align-items:center; gap:8px;
}
.about-note::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--gold); flex:none;
}

.about-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}

/* The numbers. Two columns so each figure has room to be read as a figure
   rather than as a row of a table. */
.stat-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.stat-grid li{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px;
  display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s, transform .15s;
}
.stat-grid li:hover{border-color:var(--gold); transform:translateY(-2px);}
.stat-grid strong{
  font-family:var(--font-display);
  font-size:clamp(28px, 4vw, 38px); font-weight:600;
  color:var(--coral); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-grid span{font-size:13px; color:var(--ink-2); line-height:1.45;}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr; gap:30px;}
}

@media (max-width:760px){
  .about-section{padding:38px 0;}
  #about-body p{font-size:15px;}
  .about-actions a{flex:1; min-width:140px;}
  .stat-grid{gap:10px;}
  .stat-grid li{padding:16px 14px;}
  .stat-grid span{font-size:12px;}
}


/* ==========================================================================
   Booking form — the payment step.

   Shown only once the site has payment details to show, so the section can
   never appear as an empty promise with nowhere to send money.
   ========================================================================== */
.ef-pay {
  margin: 22px 0 4px;
  padding: 20px;
  border: 1px dashed var(--gold, #D9A441);
  border-radius: 14px;
  background: rgba(217, 164, 65, .06);
}
.ef-pay-title {
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-size: 17px;
  margin: 0 0 6px;
}
.ef-pay-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted, #6B7A93); }
.ef-pay-intro:empty { display: none; }

.ef-pay-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.ef-pay-methods { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.ef-pay-method {
  background: #fff;
  border: 1px solid rgba(13, 27, 42, .09);
  border-radius: 12px;
  padding: 12px 14px;
}
.ef-pay-method .m-label { font-size: 12px; font-weight: 700; color: var(--muted, #6B7A93); text-transform: uppercase; letter-spacing: .04em; }
.ef-pay-method .m-number {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 700; margin-top: 3px;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.ef-pay-method .m-note { font-size: 12.5px; color: var(--muted, #6B7A93); margin-top: 3px; line-height: 1.5; }
.ef-pay-method .m-copy {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid rgba(13, 27, 42, .12); background: #fff;
  border-radius: 8px; padding: 5px 10px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ef-pay-method .m-copy:hover { border-color: var(--coral, #E2613C); color: var(--coral, #E2613C); }

.ef-pay-qr { flex: 0 0 168px; margin: 0; text-align: center; }
.ef-pay-qr img {
  width: 168px; max-width: 100%; height: auto;
  border-radius: 12px; border: 1px solid rgba(13, 27, 42, .09); background: #fff;
}
.ef-pay-qr figcaption { font-size: 12px; color: var(--muted, #6B7A93); margin-top: 6px; line-height: 1.4; }

.ef-pay-advance {
  margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(13, 27, 42, .08);
  font-size: 13px; color: var(--muted, #6B7A93); line-height: 1.6;
}
.ef-help { display: block; font-size: 12.5px; color: var(--muted, #6B7A93); margin-top: 5px; line-height: 1.5; }
.ef-pay input[type="file"] {
  width: 100%; padding: 10px; background: #fff;
  border: 1px solid rgba(13, 27, 42, .12); border-radius: 10px;
}

@media (max-width: 560px) {
  .ef-pay { padding: 16px; }
  .ef-pay-qr { flex: 1 1 100%; }
  .ef-pay-qr img { width: 200px; }
}


/* An "optional" tag beside a label, so nobody stops to wonder. */
.ef-optional {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #6B7A93);
  background: rgba(13, 27, 42, .05);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}


/* The line under the two booking buttons, explaining why one of them is
   worth choosing. Without it they read as the same button twice. */
.bb-book-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #6B7A93);
  text-align: center;
}


/* ==========================================================================
   Prices.

   The figure the customer pays is the loud one. The old price sits beside
   it, struck through and quiet, because a saving only reads as a saving
   when both numbers are visible at once.
   ========================================================================== */
.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.product-price .now {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #1b2848);
  font-variant-numeric: tabular-nums;
}
.product-price .old {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2, #6B7A93);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.product-saved {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #14926B;
}

/* The price row inside the booking box on a package page. */
.bb-price-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bb-price-value .now {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bb-price-value .old {
  font-size: 14px;
  color: var(--ink-2, #6B7A93);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.bb-price-value .off-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #FDEEE8;
  color: #E2613C;
  white-space: nowrap;
}

/* The tabs now sit below the two-column grid rather than inside it, so they
   get a reading width of their own instead of the full page. */
.pd-tabs { max-width: 760px; }

/* ==========================================================================
   Photo & video services.

   A separate row from the setups, because they are bought alongside one
   rather than instead of one. Dark, so the section reads as a different
   kind of thing without needing a heading to explain that.
   ========================================================================== */
.media-section {
  background: #0D1B2A;
  color: #fff;
  padding: 64px 0;
  margin-top: 8px;
}
.media-head { max-width: 640px; margin-bottom: 30px; }
.media-head .eyebrow { color: #D9A441; }
.media-head h2 {
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-size: clamp(25px, 4vw, 33px);
  margin: 8px 0 10px;
  color: #fff;
  text-wrap: balance;
}
.media-head p { color: #9FB0C8; margin: 0; line-height: 1.7; font-size: 15px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.media-card {
  background: #142842;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.media-card .m-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(217, 164, 65, .16);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.media-card .m-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: #D9A441; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.media-card h3 {
  font-family: var(--display, 'Fraunces', Georgia, serif);
  font-size: 20px;
  margin: 0 0 6px;
  color: #fff;
}
.media-card .m-tag { font-size: 12.5px; color: #D9A441; font-weight: 600; margin: 0 0 14px; }
.media-card ul { list-style: none; margin: 0 0 20px; padding: 0; }
.media-card li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #C9D6E6;
}
.media-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D9A441;
}
.media-card .m-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.media-card .m-price {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.media-card .m-price .old {
  font-size: 13px;
  font-weight: 500;
  color: #8FA3BF;
  text-decoration: line-through;
  margin-right: 7px;
}
.media-card .m-ask { font-size: 14px; color: #9FB0C8; font-weight: 600; }
.media-card .m-btn {
  margin-left: auto;
  background: #E2613C;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.media-card .m-btn:hover { background: #CE5433; }

@media (max-width: 560px) {
  .media-section { padding: 46px 0; }
  .media-card { padding: 20px; }
  .media-card .m-btn { margin-left: 0; width: 100%; text-align: center; }
}


/* ==========================================================================
   The package photograph while it loads.

   The logo, not a photograph: this box used to hold one package's picture,
   so every other package showed the wrong image for a moment before its own
   arrived. Waiting on nothing at all reads as broken, so it waits on us.
   ========================================================================== */
.pd-main-img.is-loading { background: var(--sand-2, #F6EFE6); }

.pd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pd-loading img {
  width: min(180px, 46%);
  height: auto;
  opacity: .55;
  object-fit: contain;
}
.pd-loading span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2, #6B7A93);
  position: relative;
}
.pd-loading span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral, #E2613C);
  transform-origin: left;
  animation: pd-load 1.1s ease-in-out infinite;
}
@keyframes pd-load {
  0%   { transform: scaleX(0); opacity: .25; }
  50%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: .25; transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-loading span::after { animation: none; transform: scaleX(1); }
}


/* ==========================================================================
   Photography added to a booking.

   These are real packages with a page of their own, so they are shown the
   way a package is shown — a photograph and a price — rather than as a
   line of text with a tick box.
   ========================================================================== */
.bb-addon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #E7E2D8);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.bb-addon:hover { border-color: #C9C0B2; }
.bb-addon input { position: absolute; opacity: 0; pointer-events: none; }

.bb-addon-tick {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #C9C0B2;
  position: relative;
  transition: background .15s, border-color .15s;
}
.bb-addon-tick::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s;
}
.bb-addon input:checked ~ .bb-addon-tick {
  background: var(--coral, #E2613C);
  border-color: var(--coral, #E2613C);
}
.bb-addon input:checked ~ .bb-addon-tick::after { transform: rotate(45deg) scale(1); }
.bb-addon:has(input:checked) {
  border-color: var(--coral, #E2613C);
  background: #FDF6F3;
}
.bb-addon input:focus-visible ~ .bb-addon-tick {
  outline: 2px solid var(--coral, #E2613C);
  outline-offset: 2px;
}

.bb-addon-photo {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand-2, #F6EFE6);
  display: grid;
  place-items: center;
}
.bb-addon-photo img { width: 100%; height: 100%; object-fit: cover; }
.bb-addon-photo img.is-placeholder { width: 66%; height: auto; object-fit: contain; opacity: .5; }

.bb-addon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-addon-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.bb-addon-sub { font-size: 11.5px; color: var(--ink-2, #6B7A93); line-height: 1.4; }
.bb-addon-fee {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bb-addon-fee.is-on-request { font-size: 12.5px; font-weight: 600; color: var(--ink-2, #6B7A93); }

@media (max-width: 420px) {
  .bb-addon { gap: 9px; padding: 9px 10px; }
  .bb-addon-photo { flex-basis: 44px; width: 44px; height: 44px; }
}


/* ==========================================================================
   What the booking box promises, and the warning under it.

   The old three-word badges ("Safe booking") were decoration. These are
   sentences somebody can check, so they are set as text rather than chips.
   ========================================================================== */
.bb-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line, #E7E2D8);
}
.bb-trust li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2, #6B7A93);
}
.bb-trust li:last-child { margin-bottom: 0; }
.bb-trust li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border: solid var(--coral, #E2613C);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.bb-warning {
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #FDF3E7;
  border: 1px solid #F0DCBC;
}
.bb-warning svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  stroke: #B8860B;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bb-warning p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7A5B14;
}