/* ════════════════════════════════════════════════
   WATEEN PERFUMES — CATEGORY PAGE
   (shared by men / women / unisex / accessories / watches)
   ════════════════════════════════════════════════ */

body.cat-page{ background:#fff; }

/* ════════════════════════════════════════════════
   NAVBAR OVERRIDE — a normal, plain, full-width navbar
   (this page has no hero for the nav to float over: no glass
   capsules, no split halves, no floating logo medallion — just
   an ordinary opaque white bar spanning the full width, fixed
   to the top, with the logo centred and a touch larger)
   ════════════════════════════════════════════════ */

body.cat-page .announce{ display:none; }

body.cat-page .nav{
  position:fixed;
  top:0;
}
body.cat-page .nav__bar{
  max-width:none;
  padding:0 30px;
  background:#fff;
  border-bottom:1px solid rgba(58,50,42,.08);
  box-shadow:0 2px 16px -8px rgba(94,68,40,.14);
}
/* the two halves lose their separate pill styling and become one
   plain continuous strip — qualified as ".nav .nav__cap" (not just
   ".nav__cap") so this always outranks hero.css's ".nav.is-stuck
   .nav__cap", belt-and-suspenders alongside the is-stuck/is-hidden
   guard in hero.js, which is the real fix for that class never
   applying here in the first place */
body.cat-page .nav .nav__cap{
  height:72px;
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body.cat-page .nav .nav__cap--left{ padding-right:70px; }
body.cat-page .nav .nav__cap--right{ padding-left:70px; }
/* the gold roundel is a hero-only flourish — here it's just the
   plain mark, centred and sized to sit comfortably in the bar */
body.cat-page .nav .nav__medallion{
  width:auto; height:auto;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
}
body.cat-page .nav .nav__medallionRing{ display:none; }
body.cat-page .nav .nav__medallion img{ width:72px; height:auto; }
body.cat-page .nav.is-hidden{ transform:none; } /* never auto-hides here */

body.cat-page .nav__mob{ background:#fff; border-bottom:1px solid rgba(58,50,42,.08); }
body.cat-page .nav__mobTop{ min-height:76px; }
body.cat-page .nav .nav__mobLogo img{ height:68px; }
body.cat-page .nav .nav__burger,
body.cat-page .nav .nav__pill--mob{
  margin-top:0;   /* the home page drops these to sit under its big logo */
  margin-bottom:0;
  background:none;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

/* page content now needs its own top clearance since the nav floats
   fixed above it instead of sitting in normal flow */
body.cat-page .crumb{
  padding-top:88px; /* clears the 72px desktop nav + a little breathing room */
}
@media (max-width:1180px){
  body.cat-page .crumb{ padding-top:92px; } /* clears the 76px mobile nav row */
}

/* ---- breadcrumb ---- */
.crumb{
  padding:22px 0 0;
}
.crumb__inner{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.06em;
  color:var(--ink-soft);
}

/* ---- back button ---- */
.backBtn{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
  font-size:11px; letter-spacing:.1em; font-weight:500;
  color:var(--ink-soft);
  transition:color .18s var(--ease), gap .18s var(--ease);
}
.backBtn svg{ width:15px; height:15px; transition:transform .18s var(--ease); }
.backBtn:hover{ color:var(--gold-deep); gap:11px; }
.backBtn:hover svg{ transform:translateX(-3px); }
.crumb__inner a{ transition:color .2s var(--ease); }
.crumb__inner a:hover{ color:var(--gold-deep); }
.crumb__inner span{ color:rgba(58,50,42,.4); }
.crumb__inner b{ font-weight:500; color:var(--ink); }


/* ---- page hero: copy left, category photo right ---- */
.phero{
  padding:26px 0 0;
}
.phero__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:0;
  min-height:420px;
}
.phero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 56px 20px 0;
}
.phero__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(3.2rem,7vw,5.6rem);
  line-height:.94;
  letter-spacing:.01em;
  color:var(--ink);
}
.phero__desc{
  margin:18px 0 0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.phero__rule{
  display:block;
  width:64px; height:1px;
  margin:22px 0;
  background:linear-gradient(90deg,rgba(143,102,51,.55),transparent);
}
.phero__text{
  margin:0;
  max-width:42ch;
  font-size:13.5px;
  line-height:1.85;
  font-weight:300;
  color:var(--ink-soft);
}

.phero__art{
  position:relative;
  overflow:hidden;
  min-height:340px;
  background:#241c14;
}
.phero__art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.phero__tag{
  position:absolute;
  top:28px; right:30px;
  z-index:2;
  text-align:right;
  font-size:10.5px;
  letter-spacing:.32em;
  line-height:2.1;
  font-weight:400;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}


/* ---- category tabs (scent families) ---- */
.ptabs{
  padding:52px 0 30px;
}
.ptabs__row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
}
.ptab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.ptab__ico{
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(58,50,42,.18);
  color:var(--ink-soft);
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.ptab__ico svg{ width:22px; height:22px; }
.ptab span{
  font-size:10px; letter-spacing:.22em; font-weight:400;
}
.ptab:hover .ptab__ico{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }
.ptab:hover{ color:var(--gold-deep); }

.ptab.is-active .ptab__ico{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.ptab.is-active{ color:var(--ink); }
.ptab.is-active span{ position:relative; }
.ptab.is-active span::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-8px;
  height:1px;
  background:var(--ink);
}


/* ---- filter bar ---- */
.pfilters{
  padding:0 0 40px;
}
.pfilters__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 0;
  border-top:1px solid rgba(58,50,42,.14);
  border-bottom:1px solid rgba(58,50,42,.14);
}
.pfilters__left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.pfilters__btn,
.pfilters__select,
.pfilters__sort{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  font-size:10.5px;
  letter-spacing:.14em;
  font-weight:400;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid rgba(58,50,42,.2);
  border-radius:999px;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.pfilters__btn svg,
.pfilters__select svg,
.pfilters__sort svg{ width:12px; height:12px; }
.pfilters__btn:hover,
.pfilters__select:hover,
.pfilters__sort:hover{ border-color:var(--gold); color:var(--gold-deep); }

.pfilters__right{
  display:flex; align-items:center; gap:18px;
}
.pfilters__count{
  font-size:10.5px; letter-spacing:.1em; color:var(--ink-soft); white-space:nowrap;
}


/* ---- product grid (reuses .card / .add / .wish / .size from hero.css) ---- */
.pgrid{
  padding-bottom:110px;
}
.pgrid .grid--products{
  grid-template-columns:repeat(3,1fr);
  gap:38px 28px;
}
/* undo the 3-up / centred last-row rules from the best-sellers section —
   category grids are a plain, even grid at any column count */
.pgrid .grid--products .card:nth-child(7),
.pgrid .grid--products .card:nth-child(8){
  grid-column:auto;
  justify-self:stretch;
}
.pgrid .card{
  align-items:stretch;
  text-align:left;
  padding:0 0 20px;
}
.pgrid .card__media{
  /* square box that keeps its size: without this the flex column can squeeze
     it and the photo then overflows onto the name and price */
  position:relative;
  flex:0 0 auto;
  height:auto;
  aspect-ratio:1/1;
  margin-bottom:16px;
}
.pgrid .card__media img{
  /* pinned to the box so a very tall bottle shot cannot compute past it and
     ride up over the name and price; the padding is its breathing room */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  padding:8%;
  object-fit:contain;
}
.pgrid .card__wish{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--ink-soft);
  box-shadow:0 6px 16px -10px rgba(94,68,40,.5);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.pgrid .card__wish svg{ width:15px; height:15px; }
.pgrid .card__wish:hover{ color:#c0392b; transform:scale(1.08); }
.pgrid .card__wish.is-on{ color:#c0392b; }
.pgrid .card__wish.is-on svg{ fill:#c0392b; }

.pgrid .card__brand{ text-align:left; margin-bottom:2px; }
.pgrid .card__name{ text-align:left; font-size:16px; margin-bottom:2px; }
.pgrid .card__type{ text-align:left; margin-bottom:6px; }
.pgrid .card__rating{
  display:flex; align-items:center; gap:6px;
  margin-bottom:8px;
  font-size:11px; letter-spacing:.02em;
  color:var(--gold);
}
.pgrid .card__rating i{ color:var(--ink-soft); font-style:normal; }
.pgrid .card__price{ text-align:left; margin:0 0 12px; font-size:13.5px; }
.pgrid .card__buy{ width:100%; }
.pgrid .add{ width:100%; justify-content:center; }


/* ---- pagination / load more ---- */
.pmore{
  display:flex; justify-content:center;
  margin-top:46px;
}


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width:1180px){
  .phero__inner{ min-height:360px; }
  .phero__copy{ padding-right:34px; }
}

@media (max-width:900px){
  .crumb{ padding-top:16px; }
  .crumb__inner{ font-size:9.5px; }

  /* same side-by-side layout as desktop, just scaled down — title left,
     photo right, never stacked */
  .phero{ padding-top:16px; }
  .phero__inner{
    grid-template-columns:1fr 1fr;
    min-height:0;
    gap:14px;
  }
  .phero__art{ aspect-ratio:3/4; min-height:0; }
  .phero__copy{ padding:14px 0; }
  .phero__title{ font-size:clamp(1.6rem,8vw,2.4rem); }
  .phero__desc{ font-size:9.5px; }
  .phero__rule{ margin:12px 0; }
  .phero__text{ font-size:10px; line-height:1.6; max-width:none; }
  .phero__tag{ font-size:6.5px; letter-spacing:.22em; top:12px; right:12px; }

  .ptabs{ padding:34px 0 16px; }
  .ptabs__row{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:30px;
    padding:0 20px 4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ptabs__row::-webkit-scrollbar{ display:none; }
  .ptab{ flex:0 0 auto; }
  .ptab__ico{ width:44px; height:44px; }
  .ptab__ico svg{ width:18px; height:18px; }
  .ptab span{ font-size:8.5px; white-space:nowrap; }

  .pfilters{ padding-bottom:26px; }
  .pfilters__row{ padding:12px 20px; margin:0 -20px; border-left:0; border-right:0; }
  .pfilters__left{ gap:8px; overflow-x:auto; flex-wrap:nowrap; width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pfilters__left::-webkit-scrollbar{ display:none; }
  .pfilters__btn, .pfilters__select, .pfilters__sort{ padding:8px 12px; font-size:9.5px; white-space:nowrap; flex:0 0 auto; }
  .pfilters__right{ width:100%; justify-content:space-between; }

  .pgrid{ padding-bottom:64px; }
  .pgrid .grid--products{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .pgrid .card__name{ font-size:13.5px; }
  .pgrid .card__type{ font-size:9px; }
  .pgrid .card__rating{ font-size:9.5px; }
  .pgrid .card__price{ font-size:12px; }
  .pgrid .card__wish{ width:28px; height:28px; }
  .pgrid .card__wish svg{ width:13px; height:13px; }
}