.site-header{background:#fff;position:relative;z-index:50}.header-main{max-width:1240px;margin:auto;min-height:84px;padding:10px 22px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:11px;flex:0 0 205px}.brand-mark{width:42px;height:42px;border:1px solid var(--gold);display:grid;place-items:center;font:700 18px Georgia}.brand b{font:700 20px Georgia}.brand small{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);margin-top:3px}
.search-box{height:48px;display:flex;flex:1;max-width:550px;background:#f5f5f3;border:1px solid #ecebe7;border-radius:8px}.search-box input{width:100%;border:0;outline:0;background:transparent;padding:0 16px;font-size:14px}.search-box button{width:55px;background:transparent;font-size:29px}.header-actions{display:flex;gap:14px;margin-left:auto}.header-action{min-width:50px;background:transparent;color:var(--ink);position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}.header-action small{font-size:10px;white-space:nowrap}.header-action i{position:absolute;top:-2px;right:0;background:#f28b20;color:#fff;font:700 9px Arial;min-width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.line-icon{width:25px;height:25px;position:relative;display:block}.line-icon:before,.line-icon:after{content:"";position:absolute}.pin:before{width:12px;height:16px;border:1.7px solid currentColor;border-radius:10px;left:6px;top:2px}.pin:after{width:4px;height:4px;border:1.4px solid currentColor;border-radius:50%;left:10px;top:7px}.user:before{width:8px;height:8px;border:1.6px solid currentColor;border-radius:50%;left:8px;top:1px}.user:after{width:15px;height:9px;border:1.6px solid currentColor;border-bottom:0;border-radius:10px 10px 0 0;left:5px;bottom:1px}.heart:before{content:"♡";font-size:31px;left:-2px;top:-6px}.cart:before{content:"";left:4px;top:4px;width:16px;height:12px;border:1.6px solid currentColor;border-top:0;transform:skew(-8deg)}.cart:after{content:"•  •";font-size:18px;letter-spacing:5px;left:5px;top:10px}.menu:before{width:19px;height:12px;border-top:1.7px solid;border-bottom:1.7px solid;left:3px;top:5px}.menu:after{width:19px;border-top:1.7px solid;left:3px;top:11px}
.category-bar{position:sticky;top:var(--main-header-height,84px);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:999;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
/* While the upper header is visible, the fixed category bar sits BELOW it (header-scroll.js sets the height) */
.category-inner{max-width:1240px;margin:auto;padding:0 22px;display:flex;overflow:auto;scrollbar-width:none}.category-inner::-webkit-scrollbar{display:none}.category-inner a{padding:14px 17px;font-size:12px;font-weight:600;white-space:nowrap;border-right:1px solid #f0efeb}.category-inner .all{padding-left:0;color:var(--green-dark);border-right:0}

/* Global Live Search */
.search-box {
  position: relative;
  z-index: 1000;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 35px rgba(0,0,0,.14);
  overflow-y: auto;
  max-height: 420px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 1001;
}

.search-dropdown.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 13px;
  border-bottom: 1px solid #eee;
  background: #fff;
  transition: background .18s ease;
}

.search-result-item:last-child {
  border-bottom: 0;
}

.search-result-item:hover {
  background: #fafaf8;
}

.search-result-image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid #e7e5df;
  border-radius: 6px;
  overflow: hidden;
  background: #f7f6f2;
  display: grid;
  place-items: center;
}

.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-result-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.search-result-info strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.search-result-price {
  font-size: 13px;
  line-height: 1.2;
  color: #f07c00;
  font-weight: 600;
}

.search-result-info small {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
}

.search-empty {
  min-height: 85px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.search-empty strong {
  font-size: 13px;
}

.search-empty span {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 760px) {
  /* Same width as the search box (never wider than the screen) */
  .search-dropdown {
    left: 0;
    right: 0;
    max-height: min(360px, 60vh);
  }

  .search-result-item {
    min-height: 68px;
    padding: 9px 11px;
  }

  .search-result-image {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .search-result-info strong {
    font-size: 13px;
  }
}


/* Header that stays at the top */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    transition: transform 0.25s ease;
    will-change: transform;
}

/* Upper header row.
   NOTE: this element is also .site-header, so it must stay sticky. A "position: relative"
   here used to override the sticky rule above, which made the header scroll away while the
   fixed category bar kept reserving space for it (gap + overlapping cards on desktop). */
.site-header-main {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}

/* Category bar stays visible (position/z-index come from .category-bar: sticky under the header) */
.category-nav {
    background: #fff;
}

/* Hide only the upper row on downward scroll.
   The category bar remains visible. */
.site-header.is-header-hidden {
    transform: translateY(calc(-1 * var(--main-header-height, 100px)));
}

/* The category bar is sticky under the header and follows it with the same transform, so hiding/showing the header
   never changes page layout (no fixed<->static switch, no placeholder, no animated `top`). */
html.main-header-hidden .category-bar {
    transform: translateY(calc(-1 * var(--main-header-height, 84px)));
}
html.page-scrolled .category-bar {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .13);
}
/* Offset used by sticky Cart/Checkout/Filter panels: derived in CSS from the two measured heights. */
html {
    --sticky-offset: calc(var(--main-header-height, 0px) + var(--bar-height, 0px));
    scroll-padding-top: calc(var(--main-header-height, 0px) + var(--bar-height, 0px) + 8px);
}
html.main-header-hidden {
    --sticky-offset: var(--bar-height, 0px);
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .category-bar { transition: none; }
}

/* Remove the tiny dot under the Cart icon */
.header-action .line-icon.cart::after {
    display: none !important;
    content: none !important;
}
/* Unified outline icons for all header actions */
.header-svg-icon {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-action { gap: 4px; }
.header-action svg { overflow: visible; }

/* Header row can never be wider than the screen: logo/brand and action labels shrink instead */
.header-main{max-width:min(1240px,100%)}
.header-main>*{min-width:0}
.brand{min-width:0;overflow:hidden}
.brand-logo{min-width:0;flex:0 1 auto}
.brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.header-actions{min-width:0;max-width:100%}
.header-action{min-width:0}
.header-action small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:340px){
  .header-main{padding-left:8px;padding-right:8px}
  .header-actions{gap:0;flex-wrap:wrap;justify-content:flex-end}
  .header-action{min-width:34px}
  .header-action small{font-size:9px}
}

/* Wishlist / Cart count badge: sits on the icon's top-right corner, never clipped, number fully visible */
.header-action{overflow:visible}
.header-action i{top:-6px;right:auto;left:calc(50% + 3px);z-index:3;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border:2px solid #fff;font:700 10px/1 Arial,sans-serif;line-height:1;white-space:nowrap}
.header-action .header-svg-icon{position:relative;z-index:1}