/* ============================================================
   Moti Jewels Palace — Home Page
   Folder: css/style.css   Images: images/
   ============================================================ */

:root{
  --gold:#b89b5e;
  --ink:#3a3a3a;
  --muted:#777;
  --line:#e7e7e7;
  --black:#000;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Lora',Georgia,serif;
  color:var(--ink);
  background:#fff;
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
ul{list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ============================================================
   HEADER / BRAND
   ============================================================ */
header{background:#fff;position:relative;z-index:100;}
.brand{text-align:center;padding:26px 16px 18px;}
.brand-link{display:inline-block;text-align:center;}
.logo-img{
  height:clamp(46px,6vw,72px);
  width:auto;
  margin:0 auto;
}
.brand .logo{   /* legacy text fallback */
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,6vw,64px);
  font-weight:600;
  letter-spacing:.18em;
  color:#1c1c1c;
  line-height:1;
  padding-left:.18em;            /* visually re-center the tracked text */
}
.brand .name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(16px,2.4vw,26px);
  font-weight:500;
  letter-spacing:.35em;
  color:#2a2a2a;
  margin-top:6px;
  padding-left:.35em;
}
.brand .since{
  font-size:clamp(9px,1.1vw,11px);
  letter-spacing:.45em;
  color:#8a8a8a;
  margin-top:10px;
  padding-left:.45em;
}

/* ============================================================
   NAVIGATION + DROPDOWN
   ============================================================ */
nav.main-nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  position:relative;
  z-index:90;
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:58px;            /* keeps the bar tall enough on mobile */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.nav-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(20px,3.4vw,48px);
  height:58px;
}
.nav-list > li{position:relative;height:100%;display:flex;align-items:center;}
.nav-list > li > a,
.nav-list > li > .nav-link{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(18px,2vw,22px);
  color:#333;
  letter-spacing:.02em;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  height:100%;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-list > li:hover > a,
.nav-list > li:hover > .nav-link{color:var(--gold);}
.caret{
  border:solid currentColor;
  border-width:0 2px 2px 0;
  display:inline-block;
  padding:3px;
  transform:rotate(45deg);
  margin-top:-4px;
  transition:transform .25s ease;
}
.has-dropdown:hover .caret{transform:rotate(225deg);margin-top:4px;}

/* hamburger (mobile) */
.menu-toggle{
  display:none;
  position:absolute;
  right:16px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  width:44px;height:44px;padding:9px;   /* 44px = comfortable touch target */
}
.menu-toggle span{
  display:block;height:2px;width:100%;background:#333;border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;
}
.menu-toggle span + span{margin-top:6px;}
/* animate to an X when open */
.menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Dropdown mega-menu */
.dropdown{
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  width:760px;max-width:92vw;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  padding:34px 40px;
  display:grid;
  grid-template-columns:1fr 1fr 250px;
  gap:18px 30px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:120;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown .col{display:flex;flex-direction:column;gap:16px;}
.dropdown .col a{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;color:#444;
  transition:color .2s ease, padding-left .2s ease;
}
.dropdown .col a:hover{color:var(--gold);padding-left:4px;}
.dropdown .promo{
  grid-column:3;grid-row:1 / span 3;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  min-height:200px;overflow:hidden;
}
.dropdown .promo img{width:100%;height:100%;object-fit:contain;padding:16px;}

/* off-canvas chrome — hidden on desktop, revealed in the mobile media query.
   nav-panel-head needs the higher-specificity selector to beat `.nav-list > li`. */
.nav-list > li.nav-panel-head,
.submenu-head,
.nav-overlay{display:none;}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{position:relative;overflow:hidden;background:#000;}
.slides{display:flex;transition:transform .6s ease;}
.slide{min-width:100%;position:relative;}
.slide img{
  width:100%;
  height:clamp(280px,42vw,560px);
  object-fit:cover;
  object-position:center 28%;
}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;
  width:46px;height:60px;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;z-index:5;
}
.hero-arrow:hover{background:rgba(255,255,255,.28);}
.hero-arrow.prev{left:0;}
.hero-arrow.next{right:0;}
.dots{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;z-index:5;
}
.dot{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid #fff;background:transparent;cursor:pointer;
  transition:background .2s ease;padding:0;
}
.dot.active{background:#fff;}

/* ============================================================
   ABOUT US
   ============================================================ */
.about{
  background:#f4f4f4;
  padding:clamp(34px,5vw,54px) clamp(24px,5vw,56px);
  margin:clamp(36px,5vw,56px) auto 0;
  max-width:760px;
}
.about h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px,5vw,46px);
  font-weight:500;color:#555;margin-bottom:24px;
}
.about p{
  font-style:italic;
  font-size:clamp(16px,1.7vw,19px);
  color:#4a4a4a;line-height:1.9;
}
.about .readmore{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;color:var(--gold);
  font-size:18px;font-style:italic;
}
.about .readmore:hover{text-decoration:underline;}

/* ============================================================
   CATEGORY SLIDER
   ============================================================ */
.cat-section{
  max-width:var(--maxw);
  margin:clamp(36px,5vw,52px) auto 0;
  padding:0 24px;position:relative;
}
.cat-viewport{overflow:hidden;}
.cat-track{
  display:flex;
  gap:18px;
  transition:transform .5s ease;
}
.cat-card{
  flex:0 0 calc((100% - 3*18px)/4);   /* 4 visible on desktop */
  position:relative;background:#000;
  aspect-ratio:1/0.8;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cat-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;
  opacity:.92;transition:opacity .3s ease, transform .5s ease;
}
.cat-card:hover img{opacity:1;transform:scale(1.06);}
.cat-card span{
  position:relative;z-index:2;color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(26px,3vw,36px);
  text-align:center;line-height:1.05;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.cat-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#cfcfcf;cursor:pointer;
  font-size:40px;line-height:1;z-index:6;padding:10px;
  transition:color .2s ease;
}
.cat-arrow:hover{color:#666;}
.cat-arrow.prev{left:-8px;}
.cat-arrow.next{right:-8px;}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta{text-align:center;padding:clamp(34px,4vw,46px) 24px;}
.insta-text{font-size:clamp(18px,2vw,22px);color:#555;font-style:italic;}
.insta-text em{font-style:italic;color:#333;}
.insta-btn{
  display:inline-block;margin-left:16px;background:#8a8a8a;color:#fff;
  padding:11px 22px;font-size:16px;font-style:normal;
  transition:background .2s ease;
}
.insta-btn:hover{background:#6f6f6f;}

/* ============================================================
   CONTACT SECTION  (map left + Contact Us box right)
   ============================================================ */
.contact-section{
  max-width:var(--maxw);
  margin:clamp(28px,4vw,46px) auto clamp(40px,5vw,60px);
  padding:0 24px;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:24px;
  align-items:stretch;
}
.contact-map{line-height:0;overflow:hidden;}
.contact-map iframe{
  width:100%;height:100%;min-height:320px;
  border:0;display:block;filter:grayscale(12%);
}
.contact-box{
  position:relative;min-height:320px;
  background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.contact-box img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:transform .5s ease;
}
.contact-box:hover img{transform:scale(1.05);}
.contact-box span{
  position:relative;z-index:2;color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,3.4vw,40px);
  text-shadow:0 1px 12px rgba(0,0,0,.85);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:#fff;}
footer .container{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding-top:38px;padding-bottom:42px;text-align:center;
}
footer h3{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:.08em;
  color:#777;margin-bottom:16px;
}
footer p{font-size:clamp(15px,1.6vw,17px);color:#666;margin-bottom:4px;}
footer .office{font-weight:600;color:#444;margin-top:14px;}
.socials{display:flex;gap:16px;justify-content:center;margin-top:6px;}
.socials a{
  width:32px;height:32px;border-radius:50%;background:#9a9a9a;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  transition:background .2s ease;font-family:Arial,sans-serif;
}
.socials a:hover{background:var(--gold);}
.copyright{background:#000;color:#9a9a9a;text-align:center;padding:18px;font-size:14px;}

/* ============================================================
   RESPONSIVE
   Breakpoints (kept in sync with perView() in the JS):
     ≥1025  laptop / desktop / Mac ......... 4 category cards, top nav
     901–1024 iPad landscape / small laptop  3 cards, top nav
     769–900  iPad portrait / large tablet . 3 cards, hamburger
     481–768  large phone / small tablet ... 2 cards, hamburger
     ≤480    phone (incl. iPhone) .......... 1 card, hamburger
   ============================================================ */

/* ---- Large Mac / wide desktop: give the layout more room ---- */
@media (min-width:1500px){
  :root{--maxw:1320px;}
}

/* ---- iPad landscape & small laptops: 3 category cards ---- */
@media (max-width:1024px){
  .cat-card{flex:0 0 calc((100% - 2*18px)/3);}
}

/* ---- Switch to the off-canvas slide-in menu (iPad portrait and down) ---- */
@media (max-width:900px){
  .menu-toggle{display:block;}

  /* ----- mobile header: compact strip, logo left · menu right ----- */
  header{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);
  }
  .brand{padding:0;text-align:left;flex:0 1 auto;min-width:0;}
  .brand-link{display:inline-flex;align-items:center;}
  .brand .name,.brand .since{display:none;}   /* logo mark only on mobile */
  .logo-img{height:44px;margin:0;}

  nav.main-nav{border:none;background:transparent;flex:0 0 auto;}
  .nav-inner{min-height:0;margin:0;}
  .menu-toggle{position:static;transform:none;right:auto;top:auto;}

  /* dim/scrim behind the open panel */
  .nav-overlay{
    display:block;
    position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:140;
  }
  .nav-overlay.open{opacity:1;visibility:visible;}

  /* lock background scroll while the drawer is open */
  body.nav-lock{overflow:hidden;}

  /* ----- Level 1: the side drawer ----- */
  .nav-list{
    position:fixed;top:0;right:0;bottom:0;
    width:min(82vw,320px);height:100%;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    background:#fff;
    transform:translateX(100%);
    transition:transform .35s ease;
    box-shadow:-16px 0 36px rgba(0,0,0,.16);
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:150;
  }
  .nav-list.open{transform:translateX(0);}

  /* the submenu must cover the whole drawer, so the Collections row can't be the
     positioning context — make it static and let .nav-list (fixed) be the anchor */
  .nav-list > li.has-dropdown{position:static;}

  /* drawer header (title + close) */
  .nav-list > li.nav-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .nav-panel-title{
    font-family:'Cormorant Garamond',serif;
    font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#6a6a6a;
  }
  .nav-close{
    background:none;border:none;cursor:pointer;
    font-size:26px;line-height:1;color:#555;
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    transition:color .2s ease;
  }
  .nav-close:hover{color:var(--gold);}

  .nav-list > li{height:auto;border-top:1px solid var(--line);justify-content:flex-start;}
  .nav-list > li.nav-panel-head{border-top:none;}
  .nav-list > li > a,
  .nav-list > li > .nav-link{
    height:auto;width:100%;padding:13px 18px;
    justify-content:space-between;
    font-size:17px;letter-spacing:.01em;
  }
  /* hide the desktop caret; show a forward chevron on the Collections row */
  .caret{display:none;}
  .has-dropdown > .nav-link::after{
    content:"\203A";                 /* › */
    font-family:'Cormorant Garamond',serif;
    font-size:22px;line-height:1;color:#b0b0b0;
  }

  /* ----- Level 2: the submenu, an overlay that covers the drawer and slides in -----
     position:absolute keeps it anchored to the drawer (its positioned ancestor),
     so it always sits exactly on top of level 1 — no side-by-side, no h-scroll. */
  .dropdown{
    position:absolute;inset:0;
    width:auto;max-width:none;height:auto;
    background:#fff;
    box-shadow:none;border:none;padding:0;
    display:block;grid-template-columns:1fr;gap:0;
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:3;
  }
  /* neutralise the desktop hover rule on touch — only .open reveals it */
  .has-dropdown:hover .dropdown{transform:translateX(100%);}
  .has-dropdown.open .dropdown{transform:translateX(0);}

  /* submenu header (back icon + title + close icon) */
  .submenu-head{
    display:flex;align-items:center;gap:8px;
    padding:11px 10px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .submenu-back{
    background:none;border:none;cursor:pointer;
    font-size:28px;line-height:1;color:var(--gold);
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    transition:color .2s ease;
  }
  .submenu-back:hover{color:#8a7a4e;}
  .submenu-title{
    flex:1;text-align:center;
    font-family:'Cormorant Garamond',serif;
    font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#6a6a6a;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .dropdown .col{flex-direction:column;gap:0;padding:0;}
  .dropdown .col a{
    padding:13px 18px;border-bottom:1px solid var(--line);
    font-size:17px;
  }
  .dropdown .col a:hover{padding-left:22px;}
  .dropdown .promo{display:none;}
}

/* ---- Large phones / small tablets: 2 category cards ---- */
@media (max-width:768px){
  .cat-card{flex:0 0 calc((100% - 18px)/2);}

  footer .container{grid-template-columns:1fr;gap:26px;}
  .insta-btn{display:block;margin:14px auto 0;width:max-content;}

  /* contact section stacks: map on top, Contact Us below */
  .contact-section{grid-template-columns:1fr;gap:0;}
  .contact-map iframe{min-height:280px;}
  .contact-box{min-height:200px;}
}

/* ---- Phones, incl. iPhone: 1 category card ---- */
@media (max-width:480px){
  .container{padding:0 18px;}
  .header-bar{padding:10px 16px;gap:12px;}
  .cat-section,.contact-section{padding-left:18px;padding-right:18px;}
  .cat-card{flex:0 0 100%;aspect-ratio:1/0.62;}
  .cat-arrow.prev{left:-4px;}
  .cat-arrow.next{right:-4px;}
  .contact-box{min-height:180px;}
  .contact-box span{font-size:30px;}
  .about{padding:30px 22px;}
  .insta-btn{margin-left:0;}
}

/* ---- Short landscape phones: trim the hero height ---- */
@media (max-height:480px) and (orientation:landscape){
  .slide img{height:78vh;}
}

/* ---- Touch devices that can't hover: tap "Collections" to open ---- */
@media (hover:none){
  .has-dropdown:hover .dropdown{opacity:0;visibility:hidden;pointer-events:none;}
  .has-dropdown.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;}
}

/* ---- iPhone notch / safe-area insets ---- */
@supports (padding:max(0px)){
  .menu-toggle{right:max(16px, env(safe-area-inset-right));}
  footer .container,
  .copyright{
    padding-left:max(24px, env(safe-area-inset-left));
    padding-right:max(24px, env(safe-area-inset-right));
  }
}

/* ============================================================
   COLLECTION PAGE  (banner + product grid)
   ============================================================ */
.col-banner{position:relative;background:#000;overflow:hidden;}
.col-banner img{
  width:100%;
  height:clamp(220px,34vw,460px);
  object-fit:cover;object-position:center;
  display:block;opacity:.92;
}
.col-banner-title{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px,6vw,72px);font-weight:500;letter-spacing:.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
  text-align:center;padding:0 20px;
}

.collection-intro{
  max-width:980px;
  margin:clamp(34px,5vw,56px) auto clamp(8px,2vw,16px);
  padding:0 24px;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;color:#666;
  font-size:clamp(28px,4.4vw,46px);line-height:1.2;
  text-align:center;
}

.product-grid{
  max-width:var(--maxw);
  margin:clamp(34px,5vw,60px) auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3.4vw,46px) clamp(20px,3vw,40px);
}
.product-card{display:block;text-align:center;cursor:pointer;}
.product-thumb{
  position:relative;display:block;
  width:100%;aspect-ratio:1/1;overflow:hidden;
  background:#f3f1ec;
}
.product-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .55s ease;
}
.product-card:hover .product-thumb img{transform:scale(1.06);}
.product-name{
  margin-top:16px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:#8a7a4e;
  font-size:clamp(16px,1.8vw,19px);line-height:1.55;
}

/* ============================================================
   CONTENT PAGES  (About Us, Contact Us)
   ============================================================ */
.page-content{
  max-width:880px;
  margin:clamp(34px,5vw,58px) auto;
  padding:0 24px;
}
.page-content h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;color:#555;
  font-size:clamp(30px,4.4vw,44px);
  text-align:center;margin-bottom:26px;
}
.page-content p{
  font-style:italic;
  font-size:clamp(16px,1.8vw,19px);
  color:#4a4a4a;line-height:1.95;
  margin-bottom:20px;
}
.page-content p:last-child{margin-bottom:0;}

/* full-bleed map (contact page) */
.full-map{line-height:0;}
.full-map iframe{
  width:100%;height:clamp(300px,42vw,480px);
  border:0;display:block;filter:grayscale(12%);
}

/* ============================================================
   LIGHTBOX / POPUP
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);
  padding:clamp(16px,4vw,48px);
}
.lightbox.open{display:flex;}
.lb-stage{display:flex;flex-direction:column;align-items:center;max-width:1000px;width:100%;}
.lb-img{
  max-width:100%;max-height:70vh;object-fit:contain;
  background:#000;box-shadow:0 10px 50px rgba(0,0,0,.5);
}
.lb-text{
  margin-top:20px;max-width:780px;
  color:#eee;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(16px,2vw,21px);line-height:1.6;text-align:center;
}
.lb-count{margin-top:12px;color:var(--gold);font-size:14px;letter-spacing:.1em;}
.lb-close,.lb-nav{
  position:fixed;background:rgba(255,255,255,.10);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;z-index:1001;line-height:1;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26);}
.lb-close{top:18px;right:20px;width:48px;height:48px;font-size:34px;border-radius:50%;}
.lb-nav{top:50%;transform:translateY(-50%);width:54px;height:72px;font-size:40px;}
.lb-prev{left:14px;}
.lb-next{right:14px;}

/* ---- Collection / lightbox responsive ---- */
@media (max-width:980px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr;padding:0 18px;}
  .lb-img{max-height:60vh;}
  .lb-nav{width:42px;height:56px;font-size:30px;}
  .lb-close{width:42px;height:42px;font-size:28px;top:12px;right:12px;}
  .lb-prev{left:6px;}
  .lb-next{right:6px;}
}