/* NOTAT CLEAN SHELL
   Single mobile nav + sticky header + Index mobile cards
*/

*{
  box-sizing:border-box;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */

#header-placeholder{
  position:sticky!important;
  top:0!important;
  z-index:1500!important;
  width:100%!important;
}

#header-placeholder .header{
  position:relative!important;
  top:auto!important;
  z-index:1!important;
}


/* =========================================================
   CLEAN MOBILE BOTTOM NAV
   ========================================================= */

#notatCleanBottomNav{
  display:none;
}


@media(max-width:719px){

  body{
    padding-bottom:84px!important;
  }

  [data-notat-clean-hide-bottom="1"]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #notatCleanBottomNav{
    position:fixed!important;

    left:8px!important;
    right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;

    width:auto!important;

    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;

    display:grid!important;

    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:56px!important;

    gap:2px!important;

    padding:5px!important;
    margin:0!important;

    overflow:hidden!important;

    border:1px solid rgba(94,67,48,.13)!important;
    border-radius:20px!important;

    background:rgba(255,252,248,.97)!important;

    box-shadow:
      0 14px 38px
      rgba(55,37,25,.17)!important;

    backdrop-filter:blur(20px) saturate(140%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(140%)!important;

    z-index:2147483000!important;
  }


  #notatCleanBottomNav>a{
    position:relative!important;

    grid-row:1!important;

    min-width:0!important;
    width:100%!important;
    height:56px!important;

    display:flex!important;

    flex-direction:column!important;
    flex-wrap:nowrap!important;

    align-items:center!important;
    justify-content:center!important;

    gap:3px!important;

    padding:3px 1px!important;
    margin:0!important;

    overflow:hidden!important;

    border:0!important;
    border-radius:14px!important;

    background:transparent!important;

    color:#6b5241!important;

    text-decoration:none!important;
  }


  #notatCleanBottomNav>a.active{
    background:#efe4d9!important;
    color:#493225!important;
  }


  #notatCleanBottomNav>a>i{
    flex:0 0 19px!important;

    width:19px!important;
    height:19px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    font-size:18px!important;
    line-height:19px!important;
  }


  #notatCleanBottomNav .clean-nav-label{
    display:block!important;

    width:100%!important;

    overflow:hidden!important;

    font-size:9px!important;
    font-weight:700!important;
    line-height:1!important;

    white-space:nowrap!important;
    text-overflow:ellipsis!important;

    text-align:center!important;
  }


  #notatCleanBottomNav .clean-count{
    position:absolute!important;

    top:1px!important;
    right:calc(50% - 20px)!important;

    min-width:15px!important;
    height:15px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    padding:0 3px!important;

    border-radius:999px!important;

    background:#684630!important;
    color:#fff!important;

    font-size:8px!important;
    font-weight:800!important;
    line-height:1!important;
  }


  #notatCleanBottomNav .clean-count[data-count="0"]{
    display:none!important;
  }


  body.notat-night-mode #notatCleanBottomNav{
    background:rgba(43,31,23,.97)!important;
    border-color:rgba(224,188,145,.14)!important;

    box-shadow:
      0 16px 42px
      rgba(0,0,0,.27)!important;
  }


  body.notat-night-mode #notatCleanBottomNav>a{
    color:#ead7c0!important;
  }


  body.notat-night-mode #notatCleanBottomNav>a.active{
    background:rgba(218,177,128,.14)!important;
    color:#f6dfbf!important;
  }


  body.notat-night-mode #notatCleanBottomNav .clean-count{
    background:#d0a36d!important;
    color:#21160f!important;
  }


  /* floating cart is redundant on mobile */
  #floatingCart,
  .floating-cart{
    display:none!important;
  }


  /* =====================================================
     INDEX — ONE PRODUCT CARD PER ROW
     ===================================================== */

  body.notat-clean-index .recent-products-section,
  body.notat-clean-index .top-requested-section{
    width:100%!important;
    max-width:none!important;

    margin-left:auto!important;
    margin-right:auto!important;

    padding-left:12px!important;
    padding-right:12px!important;
  }


  body.notat-clean-index #recentProductsGrid,
  body.notat-clean-index #topRatedGrid,
  body.notat-clean-index .preview-grid{
    display:grid!important;

    grid-template-columns:1fr!important;

    width:min(100%,560px)!important;
    max-width:560px!important;

    gap:20px!important;

    margin-left:auto!important;
    margin-right:auto!important;

    padding:0!important;
  }


  body.notat-clean-index .preview-grid>.product-card{
    width:100%!important;
    max-width:560px!important;
    min-width:0!important;

    margin:0 auto!important;

    border-radius:24px!important;

    overflow:hidden!important;
  }


  /*
    Give the Index perfume image room to breathe.
    Product stays fully visible.
  */

  body.notat-clean-index
  .preview-grid>.product-card
  .product-image{
    width:100%!important;

    height:clamp(360px,100vw,480px)!important;

    display:flex!important;

    align-items:center!important;
    justify-content:center!important;

    padding:0!important;

    overflow:hidden!important;
  }


  body.notat-clean-index
  .preview-grid>.product-card
  .product-image img{
    width:100%!important;
    height:100%!important;

    object-fit:contain!important;
    object-position:center!important;

    transform:none!important;
  }


  body.notat-clean-index
  .preview-grid>.product-card
  .product-name,
  body.notat-clean-index
  .preview-grid>.product-card
  .product-description{
    width:100%!important;

    white-space:normal!important;
    word-break:normal!important;

    line-height:1.65!important;
  }

}

/* === HARD KILL WRONG NAV CSS START === */

@media(max-width:719px){

  nav:has(a[href*="index"]):has(a[href*="perfumes"]):has(a[href*="reviews"]):has(a[href*="wishlist"]):not(:has(a[href*="cart"])),

  [class*="bottom"]:has(a[href*="index"]):has(a[href*="perfumes"]):has(a[href*="reviews"]):has(a[href*="wishlist"]):not(:has(a[href*="cart"])),

  [id*="bottom"]:has(a[href*="index"]):has(a[href*="perfumes"]):has(a[href*="reviews"]):has(a[href*="wishlist"]):not(:has(a[href*="cart"])){

    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;

    height:0!important;
    min-height:0!important;
    max-height:0!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;
  }

}

/* === HARD KILL WRONG NAV CSS END === */

/* === SINGLE CANONICAL TOAST START === */

:root{
  --notat-cart-toast-top:110px;
}

/*
  لا نغير شكل Toast السلة.
  فقط ننزله أسفل الهيدر بمسافة آمنة.
*/
.notification{
  top:var(--notat-cart-toast-top)!important;
}

/*
  الـCanonical Toast يستخدم نفس progress-line
  الموجودة في مرجع السلة.
*/
#notatUnifiedNotice{
  z-index:2147483000!important;
}

/* === SINGLE CANONICAL TOAST END === */

/* === WISHLIST DRAWER ACTIONS START === */


/* ---------------------------------------------------------
   DELETE FEEDBACK
   Same Cart notification identity, destructive state only
--------------------------------------------------------- */

.notification.error .notification-icon{
  color:#ff4444!important;
}

#notatUnifiedNotice.notification.error{
  border-right-color:#ff4444!important;
}


/* ---------------------------------------------------------
   WISHLIST DELETE CONFIRM
   Must always sit ABOVE drawer / overlay
--------------------------------------------------------- */

#notatWishlistConfirmLayer{
  position:fixed!important;
  inset:0!important;

  z-index:2147483600!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:20px!important;

  background:rgba(35,25,19,.24)!important;

  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;

  opacity:0;
  transition:opacity .18s ease!important;
}

#notatWishlistConfirmLayer.is-open{
  opacity:1!important;
}


.notat-wishlist-confirm-card{
  position:fixed!important;

  width:min(360px,calc(100vw - 32px))!important;

  padding:22px!important;

  border:1px solid rgba(122,99,82,.20)!important;
  border-radius:22px!important;

  background:rgba(255,253,248,.985)!important;
  color:#3A2A20!important;

  box-shadow:
    0 28px 70px rgba(49,34,24,.24),
    0 6px 18px rgba(49,34,24,.10)!important;

  text-align:center!important;

  transform:
    translate(-50%,-50%)
    scale(.96)!important;

  opacity:0;

  transition:
    opacity .18s ease,
    transform .18s ease!important;
}


#notatWishlistConfirmLayer.is-open
.notat-wishlist-confirm-card{
  opacity:1!important;

  transform:
    translate(-50%,-50%)
    scale(1)!important;
}


.notat-wishlist-confirm-icon{
  width:52px!important;
  height:52px!important;

  margin:0 auto 14px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border-radius:50%!important;

  background:rgba(255,68,68,.10)!important;
  color:#d83c3c!important;

  font-size:22px!important;
}


.notat-wishlist-confirm-card h3{
  margin:0 0 8px!important;

  color:#3A2A20!important;

  font-size:1.05rem!important;
  font-weight:900!important;
}


.notat-wishlist-confirm-card p{
  margin:0!important;

  color:#7A6352!important;

  font-size:.86rem!important;
  line-height:1.75!important;
}


.notat-wishlist-confirm-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;

  gap:10px!important;

  margin-top:20px!important;
}


.notat-wishlist-confirm-actions button{
  min-height:44px!important;

  border-radius:999px!important;

  font:inherit!important;
  font-weight:800!important;

  cursor:pointer!important;
}


.notat-wishlist-confirm-cancel{
  border:1px solid rgba(122,99,82,.25)!important;

  background:#fffdf8!important;
  color:#3A2A20!important;
}


.notat-wishlist-confirm-delete{
  border:1px solid #a92f2f!important;

  background:#a92f2f!important;
  color:#fff!important;
}


.notat-wishlist-confirm-delete:hover{
  background:#922727!important;
}


/* Drawer buttons */

.wishlist-overlay .wishlist-delete,
.wishlist-overlay .wishlist-move,
.wishlist-overlay .wishlist-cart-link{
  cursor:pointer!important;
}


.wishlist-overlay .wishlist-delete{
  border-color:rgba(169,47,47,.30)!important;

  background:rgba(169,47,47,.08)!important;
  color:#9a2929!important;
}


.wishlist-overlay .wishlist-delete:hover{
  background:#9a2929!important;
  color:#fff!important;
}


/* NIGHT */

body.notat-night-mode
.notat-wishlist-confirm-card{
  background:rgba(39,28,21,.99)!important;

  border-color:rgba(211,180,145,.16)!important;

  color:#f5e7d8!important;
}


body.notat-night-mode
.notat-wishlist-confirm-card h3{
  color:#f5e7d8!important;
}


body.notat-night-mode
.notat-wishlist-confirm-card p{
  color:#c9ad93!important;
}


body.notat-night-mode
.notat-wishlist-confirm-cancel{
  background:#32241b!important;
  color:#f5e7d8!important;

  border-color:rgba(211,180,145,.18)!important;
}


/* MOBILE */

@media(max-width:719px){

  .notat-wishlist-confirm-card{
    width:calc(100vw - 28px)!important;
    max-width:360px!important;
  }

}


/* === WISHLIST DRAWER ACTIONS END === */

/* === FINAL DELETE TOAST START === */

/*
  REMOVE:
  solid red circle + white X
  while preserving the premium Cart notification shell.
*/

.notification[data-notat-operation="remove"]
.notification-icon{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:0!important;

  border-radius:50%!important;

  background:#ff4747!important;
  color:#fff!important;
}

.notification[data-notat-operation="remove"]
.notification-icon i{
  color:#fff!important;
  font-size:17px!important;
  line-height:1!important;
}


/*
  Do not turn the whole premium card red.
  Only the semantic icon is destructive.
*/

.notification[data-notat-operation="remove"]{
  border-right-color:#ff4747!important;
}

/* === FINAL DELETE TOAST END === */

/* === NOTAT PWA INSTALL START === */

#notatPwaInstallLayer{
  position:fixed!important;
  inset:0!important;

  z-index:2147483300!important;

  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;

  padding:
    18px
    16px
    calc(92px + env(safe-area-inset-bottom))!important;

  background:rgba(43,31,23,.18)!important;

  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;

  opacity:0;
  pointer-events:none!important;

  transition:opacity .2s ease!important;
}

#notatPwaInstallLayer.is-open{
  opacity:1!important;
  pointer-events:auto!important;
}


.notat-pwa-install-card{
  position:relative!important;

  width:min(100%,430px)!important;

  border:1px solid rgba(109,82,62,.15)!important;
  border-radius:26px!important;

  padding:20px!important;

  background:rgba(255,253,248,.985)!important;
  color:#3A2A20!important;

  box-shadow:
    0 30px 75px rgba(58,42,32,.20),
    0 8px 24px rgba(58,42,32,.08)!important;

  transform:translateY(20px) scale(.985);

  transition:transform .22s ease!important;
}

#notatPwaInstallLayer.is-open
.notat-pwa-install-card{
  transform:translateY(0) scale(1)!important;
}


.notat-pwa-close{
  position:absolute!important;
  top:12px!important;
  left:12px!important;

  width:34px!important;
  height:34px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid rgba(109,82,62,.12)!important;
  border-radius:50%!important;

  background:rgba(255,255,255,.72)!important;
  color:#6f5848!important;

  cursor:pointer!important;

  font-size:15px!important;
}


.notat-pwa-brand{
  display:flex!important;
  align-items:center!important;

  gap:14px!important;

  padding-inline-start:4px!important;
  padding-inline-end:34px!important;
}


.notat-pwa-logo{
  width:58px!important;
  height:58px!important;

  flex:0 0 58px!important;

  border-radius:17px!important;

  object-fit:contain!important;

  box-shadow:
    0 7px 20px rgba(58,42,32,.12)!important;
}


.notat-pwa-copy{
  min-width:0!important;
  flex:1!important;
}


.notat-pwa-eyebrow{
  display:block!important;

  margin-bottom:2px!important;

  color:#9a795d!important;

  font-size:.69rem!important;
  font-weight:800!important;
}


.notat-pwa-title{
  margin:0!important;

  color:#3A2A20!important;

  font-size:1.12rem!important;
  line-height:1.4!important;
  font-weight:900!important;
}


.notat-pwa-description{
  margin:16px 2px 0!important;

  color:#756051!important;

  font-size:.84rem!important;
  line-height:1.8!important;
}


.notat-pwa-ios-steps{
  display:none;

  margin:14px 0 0!important;
  padding:12px 14px!important;

  border:1px solid rgba(109,82,62,.12)!important;
  border-radius:16px!important;

  background:rgba(247,241,232,.72)!important;

  color:#614d3f!important;

  font-size:.8rem!important;
  line-height:1.8!important;
}


.notat-pwa-install-card[data-mode="ios"]
.notat-pwa-ios-steps{
  display:block!important;
}


.notat-pwa-actions{
  display:grid!important;
  grid-template-columns:1.3fr .7fr!important;

  gap:9px!important;

  margin-top:18px!important;
}


.notat-pwa-actions button{
  min-height:46px!important;

  border-radius:999px!important;

  font:inherit!important;
  font-weight:900!important;

  cursor:pointer!important;
}


.notat-pwa-primary{
  border:1px solid #3A2A20!important;

  background:#3A2A20!important;
  color:#fffdf8!important;
}


.notat-pwa-secondary{
  border:1px solid rgba(109,82,62,.20)!important;

  background:#fffdf8!important;
  color:#594437!important;
}


.notat-pwa-footer-entry{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  gap:8px!important;

  margin-top:12px!important;
  padding:9px 15px!important;

  border:1px solid rgba(109,82,62,.18)!important;
  border-radius:999px!important;

  background:rgba(255,253,248,.72)!important;
  color:#4d392d!important;

  font:inherit!important;
  font-size:.77rem!important;
  font-weight:800!important;

  cursor:pointer!important;
}


.notat-pwa-footer-entry i{
  color:#a47b56!important;
}


body.notat-night-mode
.notat-pwa-install-card{
  background:rgba(42,30,23,.99)!important;
  color:#f4e5d6!important;

  border-color:rgba(221,186,148,.14)!important;
}


body.notat-night-mode
.notat-pwa-title{
  color:#f4e5d6!important;
}


body.notat-night-mode
.notat-pwa-description,
body.notat-night-mode
.notat-pwa-ios-steps{
  color:#cbb096!important;
}


body.notat-night-mode
.notat-pwa-ios-steps{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(221,186,148,.12)!important;
}


body.notat-night-mode
.notat-pwa-secondary,
body.notat-night-mode
.notat-pwa-close{
  background:#34251d!important;
  color:#f4e5d6!important;

  border-color:rgba(221,186,148,.14)!important;
}


body.notat-night-mode
.notat-pwa-footer-entry{
  background:rgba(255,255,255,.04)!important;
  color:#f4e5d6!important;

  border-color:rgba(221,186,148,.14)!important;
}


@media(min-width:720px){

  #notatPwaInstallLayer{
    align-items:center!important;

    padding:24px!important;
  }

}


@media(max-width:719px){

  .notat-pwa-install-card{
    border-radius:24px!important;
  }

}

/* === NOTAT PWA INSTALL END === */

/* === NOTAT MOBILE UTILITY DRAWER START === */


/* ---------------------------------------------------------
   Utility Drawer
--------------------------------------------------------- */

#notatUtilityLayer{
  position:fixed!important;
  inset:0!important;

  z-index:2147483100!important;

  background:rgba(38,27,20,.30)!important;

  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;

  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;

  transition:
    opacity .22s ease,
    visibility .22s ease!important;
}


#notatUtilityLayer.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}


#notatUtilityDrawer{
  position:absolute!important;

  top:0!important;
  right:0!important;
  bottom:0!important;

  width:min(88vw,370px)!important;

  display:flex!important;
  flex-direction:column!important;

  padding:
    calc(18px + env(safe-area-inset-top))
    18px
    calc(24px + env(safe-area-inset-bottom))!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,253,248,.995),
      rgba(249,244,237,.995)
    )!important;

  border-left:
    1px solid rgba(110,82,62,.12)!important;

  box-shadow:
    -22px 0 70px rgba(58,42,32,.18)!important;

  direction:rtl!important;

  transform:translateX(105%)!important;

  transition:
    transform .28s cubic-bezier(.22,.72,.28,1)!important;

  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}


#notatUtilityLayer.is-open
#notatUtilityDrawer{
  transform:translateX(0)!important;
}


/* ---------------------------------------------------------
   Drawer Header
--------------------------------------------------------- */

.notat-utility-head{
  display:flex!important;
  align-items:center!important;

  gap:12px!important;

  padding:
    2px
    0
    18px!important;

  border-bottom:
    1px solid rgba(110,82,62,.10)!important;
}


.notat-utility-logo{
  width:52px!important;
  height:52px!important;

  flex:0 0 52px!important;

  object-fit:contain!important;

  border-radius:16px!important;

  box-shadow:
    0 6px 18px rgba(58,42,32,.10)!important;
}


.notat-utility-brand{
  min-width:0!important;
  flex:1!important;
}


.notat-utility-brand strong{
  display:block!important;

  color:#3A2A20!important;

  font-size:1rem!important;
  font-weight:900!important;
}


.notat-utility-brand span{
  display:block!important;

  margin-top:2px!important;

  color:#8B725F!important;

  font-size:.69rem!important;
  font-weight:700!important;
}


.notat-utility-close{
  width:38px!important;
  height:38px!important;

  flex:0 0 38px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:
    1px solid rgba(110,82,62,.12)!important;

  border-radius:50%!important;

  background:
    rgba(255,255,255,.72)!important;

  color:#604B3D!important;

  cursor:pointer!important;

  font-size:15px!important;
}


/* ---------------------------------------------------------
   Drawer Intro
--------------------------------------------------------- */

.notat-utility-intro{
  padding:
    18px
    2px
    10px!important;
}


.notat-utility-intro small{
  display:block!important;

  color:#A18570!important;

  font-size:.68rem!important;
  font-weight:800!important;
}


.notat-utility-intro strong{
  display:block!important;

  margin-top:3px!important;

  color:#3A2A20!important;

  font-size:.94rem!important;
  font-weight:900!important;
}


/* ---------------------------------------------------------
   Utility Items
--------------------------------------------------------- */

.notat-utility-list{
  display:flex!important;
  flex-direction:column!important;

  gap:8px!important;

  margin-top:5px!important;
}


.notat-utility-item{
  width:100%!important;

  min-height:58px!important;

  display:flex!important;
  align-items:center!important;

  gap:12px!important;

  padding:10px 12px!important;

  border:
    1px solid rgba(110,82,62,.11)!important;

  border-radius:18px!important;

  background:
    rgba(255,255,255,.60)!important;

  color:#49372C!important;

  text-align:right!important;
  text-decoration:none!important;

  font:inherit!important;

  cursor:pointer!important;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease!important;
}


.notat-utility-item:hover{
  transform:translateY(-1px)!important;

  background:#FFFDF8!important;

  border-color:
    rgba(164,123,86,.24)!important;
}


.notat-utility-item-icon{
  width:38px!important;
  height:38px!important;

  flex:0 0 38px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border-radius:13px!important;

  background:#F2E9DF!important;
  color:#7A5940!important;

  font-size:15px!important;
}


.notat-utility-item-copy{
  min-width:0!important;
  flex:1!important;
}


.notat-utility-item-copy strong{
  display:block!important;

  color:#49372C!important;

  font-size:.85rem!important;
  font-weight:900!important;
}


.notat-utility-item-copy small{
  display:block!important;

  margin-top:2px!important;

  color:#8A7463!important;

  font-size:.67rem!important;
  font-weight:600!important;
}


.notat-utility-arrow{
  color:#B09A88!important;

  font-size:12px!important;
}


.notat-utility-install
.notat-utility-item-icon{
  background:
    linear-gradient(
      135deg,
      #3A2A20,
      #6A4B38
    )!important;

  color:#FFFDF8!important;
}


/* ---------------------------------------------------------
   Drawer Footer
--------------------------------------------------------- */

.notat-utility-foot{
  margin-top:auto!important;

  padding-top:20px!important;

  text-align:center!important;
}


.notat-utility-foot span{
  color:#A28A77!important;

  font-size:.65rem!important;
  font-weight:700!important;
}


/* ---------------------------------------------------------
   MOBILE HEADER
--------------------------------------------------------- */

@media(max-width:719px){

  #header-placeholder{
    position:sticky!important;
    top:0!important;

    z-index:1800!important;
  }


  #header-placeholder .notat-mobile-header-ready{
    position:relative!important;

    min-height:62px!important;

    display:flex!important;
    align-items:center!important;

    padding-left:58px!important;
  }


  .notat-mobile-hide-control,
  .notat-mobile-hide-group{
    display:none!important;
  }


  .notat-mobile-brand{
    position:relative!important;

    display:flex!important;
    align-items:center!important;

    max-width:calc(100% - 10px)!important;

    opacity:1!important;
    visibility:visible!important;
  }


  .notat-mobile-brand img{
    max-height:42px!important;
    width:auto!important;

    object-fit:contain!important;
  }


  #notatMobileUtilityButton{
    position:absolute!important;

    top:50%!important;
    left:12px!important;

    transform:translateY(-50%)!important;

    width:40px!important;
    height:40px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    padding:0!important;

    border:
      1px solid rgba(110,82,62,.13)!important;

    border-radius:14px!important;

    background:
      rgba(255,253,248,.88)!important;

    color:#49372C!important;

    box-shadow:
      0 6px 18px rgba(58,42,32,.08)!important;

    cursor:pointer!important;

    z-index:20!important;

    font-size:16px!important;
  }


  body.notat-utility-open{
    overflow:hidden!important;
    touch-action:none!important;
  }


  /*
    Phase 2 now owns the permanent install entry.
    Hide/remove the temporary footer entry from Phase 1.
  */
  #notatPwaFooterEntry{
    display:none!important;
  }

}


/* ---------------------------------------------------------
   Night Mode
--------------------------------------------------------- */

body.notat-night-mode
#notatUtilityDrawer{
  background:
    linear-gradient(
      180deg,
      rgba(43,31,24,.995),
      rgba(34,24,19,.995)
    )!important;

  border-left-color:
    rgba(220,185,147,.12)!important;
}


body.notat-night-mode
.notat-utility-brand strong,
body.notat-night-mode
.notat-utility-intro strong,
body.notat-night-mode
.notat-utility-item-copy strong{
  color:#F3E4D5!important;
}


body.notat-night-mode
.notat-utility-brand span,
body.notat-night-mode
.notat-utility-intro small,
body.notat-night-mode
.notat-utility-item-copy small,
body.notat-night-mode
.notat-utility-foot span{
  color:#BCA38D!important;
}


body.notat-night-mode
.notat-utility-item{
  background:
    rgba(255,255,255,.035)!important;

  border-color:
    rgba(220,185,147,.10)!important;

  color:#F3E4D5!important;
}


body.notat-night-mode
.notat-utility-item:hover{
  background:
    rgba(255,255,255,.065)!important;

  border-color:
    rgba(220,185,147,.18)!important;
}


body.notat-night-mode
.notat-utility-item-icon{
  background:
    rgba(220,185,147,.10)!important;

  color:#DEBC98!important;
}


body.notat-night-mode
.notat-utility-close,
body.notat-night-mode
#notatMobileUtilityButton{
  background:#34261E!important;

  border-color:
    rgba(220,185,147,.14)!important;

  color:#F3E4D5!important;
}


/* === NOTAT MOBILE UTILITY DRAWER END === */

/* === NOTAT DESKTOP POLISH START === */

/*
  Mobile utility controls must NEVER appear on desktop.
*/
@media(min-width:720px){

  #notatMobileUtilityButton,
  #notatUtilityLayer{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

}


/*
  Premium desktop floating Cart.
  Mobile keeps using the canonical bottom navigation.
*/
@media(min-width:720px){

  #floatingCart,
  .floating-cart,
  .floating-cart-btn{
    background:
      linear-gradient(
        145deg,
        #3A2A20,
        #51392B
      )!important;

    color:#FFFDF8!important;

    border:
      1px solid rgba(212,175,55,.30)!important;

    box-shadow:
      0 16px 34px rgba(58,42,32,.24),
      0 4px 12px rgba(58,42,32,.10)!important;

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease!important;
  }


  #floatingCart:hover,
  .floating-cart:hover,
  .floating-cart-btn:hover{
    transform:translateY(-2px)!important;

    border-color:
      rgba(212,175,55,.52)!important;

    box-shadow:
      0 20px 42px rgba(58,42,32,.28),
      0 6px 16px rgba(58,42,32,.12)!important;
  }


  #floatingCart i,
  .floating-cart i,
  .floating-cart-btn i{
    color:#FFFDF8!important;
  }


  #floatingCart svg,
  .floating-cart svg,
  .floating-cart-btn svg{
    fill:currentColor!important;
    color:#FFFDF8!important;
  }


  #floatingCartCount,
  #floatingCart .cart-count,
  .floating-cart .cart-count,
  .floating-cart-badge{
    background:#D4AF37!important;
    color:#2D211A!important;

    border:
      2px solid #F7F1E8!important;

    box-shadow:
      0 4px 10px rgba(58,42,32,.16)!important;

    font-weight:900!important;
  }

}


/*
  Never show a floating Cart on mobile:
  Cart is already part of the 5-item bottom nav.
*/
@media(max-width:719px){

  #floatingCart,
  .floating-cart,
  .floating-cart-btn{
    display:none!important;
  }

}

/* === NOTAT DESKTOP POLISH END === */

/* === WISHLIST PAGE FULL IMAGE START === */

/*
  FULL WISHLIST PAGE ONLY.
  Do not touch wishlist drawer thumbnails.
*/

.wishlist-page-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,253,248,.96),
      rgba(247,241,232,.96)
    )!important;
}


.wishlist-page-image img{
  display:block!important;

  width:100%!important;
  height:100%!important;

  object-fit:contain!important;
  object-position:center!important;

  max-width:100%!important;
  max-height:100%!important;

  margin:auto!important;

  transform:none!important;
}


/*
  Give the full product image comfortable breathing room.
*/
@media(min-width:720px){

  .wishlist-page-image{
    min-height:300px!important;
    padding:14px!important;
  }

}


@media(max-width:719px){

  .wishlist-page-image{
    min-height:260px!important;
    padding:12px!important;
  }

}


body.notat-night-mode
.wishlist-page-image{
  background:
    linear-gradient(
      180deg,
      rgba(47,34,26,.96),
      rgba(38,27,21,.96)
    )!important;
}

/* === WISHLIST PAGE FULL IMAGE END === */


/* NOTAT_MIME_FIX_20260923-030748 */