/* Shared styles extracted from the original pages. */

.nav-dropdown{position:relative;height:100%;display:flex;align-items:center}

.dropdown-trigger{display:flex!important;align-items:center;gap:5px;padding:28px 0!important}

.dropdown-trigger span{font-size:11px;transition:transform .2s ease}

.nav-dropdown:hover .dropdown-trigger span{transform:rotate(180deg)}

.dropdown-menu{position:absolute;top:61px;left:-18px;min-width:190px;background:#fff;border:1px solid #eee8e1;box-shadow:0 18px 40px rgba(35,25,18,.12);padding:8px;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:100}

.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown-menu a{display:block!important;padding:10px 12px!important;font-size:12px;border-radius:4px;white-space:nowrap;transition:background-color .18s ease,color .18s ease}

.dropdown-menu a::after{display:none!important}

.dropdown-menu a:hover{background:var(--cream);color:var(--brown)}

.dropdown-menu a.selected{background:var(--dark);color:#fff}

.dropdown-menu a.selected:hover{background:var(--brown);color:#fff}

/* Site-wide responsive polish */
@media (min-width: 901px) and (max-width: 1120px){
  .nav-links{gap:18px;font-size:12px}
  .nav-actions .btn{padding:10px 13px;font-size:11px}
  .logo{min-width:180px}
}

@media (min-width: 601px) and (max-width: 900px){
  .nav-links{display:none}
}

/* Hide the header's "WhatsApp Us" text button on every page across the full mobile range —
   the floating WhatsApp bubble already covers this, and on phones narrower than 600px this
   button was previously only hidden on the home page, crowding the header against the
   hamburger button on the other three pages. */
@media (max-width: 900px){
  .nav-actions .btn{display:none}
}

html{overflow-x:hidden}
@media (max-width: 900px){
  body{overflow-x:hidden}
  .whatsapp{width:50px;height:50px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}

/* Touch-friendly interaction defaults for the whole site */
a,button,.btn,.icon-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Hover-only effects: keep them from "sticking" after a tap on touch screens */
@media (hover: none){
  .icon-btn:hover{transform:none}
  .collection-card:hover img,.small-card:hover img,.product-card:hover img,.story-image:hover img,.cinematic-category-card:hover img{transform:none}
  .collection-card:hover,.small-card:hover,.value-card:hover,.product-card:hover{transform:none;box-shadow:none}
}

.footer-brand .logo-mark{width:46px;height:46px}

.dropdown-trigger.active:after{content:"";position:absolute;left:0;right:0;bottom:19px;height:1px;background:var(--brown)}


.section-head-spaced { margin-bottom: 25px; }
.eyebrow-light { color: #d8aa80; }
.btn-light-solid { background: #fff; color: var(--brown-dark); border-color: #fff; }
.btn-spaced-top { margin-top: 25px; }
.footer-logo-name { color: #fff; }

/* Centralized mobile-menu state. Replaces inline style mutations from the original scripts.
   Breakpoint matches the .menu-btn / toggleMenu() breakpoint (900px) on every page, so the
   hamburger always has a menu to open — previously the home page only revealed this panel
   below 760px while the button appeared (and toggleMenu ran) up to 900px, leaving the
   button visibly non-functional between 761–900px. */
@media (max-width: 900px) {
  .page-home .nav-links.mobile-menu-open,
  .page-about .nav-links.mobile-menu-open,
  .page-collections .nav-links.mobile-menu-open,
  .page-category .nav-links.mobile-menu-open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 8px 22px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid #eee8e1;
    box-shadow: 0 16px 34px rgba(0,0,0,.1);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    animation: navSlideDown .22s ease both;
  }
  .page-home .nav-links.mobile-menu-open > a,
  .page-about .nav-links.mobile-menu-open > a,
  .page-collections .nav-links.mobile-menu-open > a,
  .page-category .nav-links.mobile-menu-open > a {
    padding: 14px 2px;
    border-bottom: 1px solid #f3ede5;
  }
}
@keyframes navSlideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .nav-links.mobile-menu-open{animation:none}
}

/* Dimmed backdrop shown behind the open mobile menu, and a scroll lock while it's open. */
.mobile-nav-overlay{
  position:fixed;inset:0;top:0;
  background:rgba(20,14,10,.38);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
  z-index:45;
}
.mobile-nav-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}
body.nav-open{overflow:hidden}

/* Bigger, easier-to-tap hamburger button (was under the ~44px recommended touch target) */
@media (max-width:900px){
  .menu-btn{width:44px;height:44px;font-size:19px;border-radius:6px}
  .menu-btn:active{background:var(--cream)}
}

/* Categories: tap-to-expand accordion inside the mobile menu.
   The desktop version relies on :hover, which doesn't exist on touch screens, so on mobile
   the "Categories" link used to just navigate straight to category.html the instant it was
   tapped — the submenu could never actually be seen or used on a phone. mobile-nav.js now
   intercepts that first tap and toggles the classes below instead. */
@media (max-width:900px){
  .nav-dropdown{position:static;height:auto;display:block;width:100%}
  .dropdown-trigger{width:100%!important;justify-content:space-between;padding:14px 2px!important}
  .dropdown-menu{
    position:static;display:none;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:2px 0 8px 12px;min-width:0;
  }
  .nav-dropdown.mobile-open .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu{display:block}
  .nav-dropdown.mobile-open .dropdown-trigger span{transform:rotate(180deg)}
  .dropdown-menu a{padding:12px 6px!important;font-size:13px}
}

/* Navigation no longer includes search or wishlist actions. */
.nav-actions{gap:10px}

/* WhatsApp icon shown in the header next to the hamburger button — mobile only.
   Desktop keeps the existing "WhatsApp Us" text button, so this stays hidden until
   each page's own mobile breakpoint (where that text button and the .nav-links also
   collapse) switches it on — see the matching rule inside each page's stylesheet. */
.nav-whatsapp-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  flex-shrink:0;
}
.nav-whatsapp-btn svg{display:block}
.nav-whatsapp-btn:active{transform:scale(.94)}
@media (max-width:900px){
  .nav-whatsapp-btn{width:40px;height:40px}
}

/* Top trust-bar: identical, scrollable treatment on every page (previously the home page
   showed a raw overflowing row while the other three pages hid it outright at ≤900px —
   inconsistent, and either loses the trust signals or looks unfinished). A soft edge fade
   hints that it scrolls, and the scrollbar itself stays hidden for a cleaner look. */
@media (max-width:900px){
  .topbar{overflow:hidden}
  .topbar-inner{
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
  }
  .topbar-inner::-webkit-scrollbar{display:none}
  .topbar-inner > span:last-child{display:none}
  .top-features{flex-wrap:nowrap;white-space:nowrap;padding-right:20px}
}


/* ================================================================
   FLOATING WHATSAPP BUTTON
   Desktop + Mobile
   ================================================================ */

.whatsapp {
  position: fixed;

  right: 22px;
  bottom: 22px;

  width: 54px;
  height: 54px;

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

  border-radius: 50%;

  background: #25D366;
  color: #fff;

  text-decoration: none;

  z-index: 999;

  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.whatsapp:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, .24);
}


/* ================================================================
   WHATSAPP ICON
   ================================================================ */

.whatsapp-icon {
  width: 30px;
  height: 30px;

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

  border-radius: 50%;

  color: #fff;
}


/* ================================================================
   MOBILE WHATSAPP
   ================================================================ */

@media (max-width: 900px) {

  .whatsapp {

    width: 52px;
    height: 52px;

    right: 16px;

    bottom:
      calc(
        16px +
        env(safe-area-inset-bottom, 0px)
      );

    box-shadow:
      0 8px 24px rgba(0, 0, 0, .22);

    animation:
      whatsappFloat 3s ease-in-out infinite;
  }

  .whatsapp-icon {
    width: 30px;
    height: 30px;
  }

}


/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 430px) {

  .whatsapp {

    width: 50px;
    height: 50px;

    right: 14px;

    bottom:
      calc(
        14px +
        env(safe-area-inset-bottom, 0px)
      );
  }

}


/* ================================================================
   SUBTLE FLOAT ANIMATION
   ================================================================ */

@keyframes whatsappFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

  .whatsapp {
    animation: none;
  }

}