/* ==========================================================================
   layout.css - site chrome: header, nav, dropdowns, drawer, footer
   ========================================================================== */

/* --- file:// and data error notices ---------------------------------------- */

.file-notice {
  background: #FFF4E5;
  border-bottom: 3px solid #E8A33D;
  padding: 20px 16px;
}
.file-notice__inner { max-width: var(--container); margin-inline: auto; }
.file-notice h2 { color: #8A5A12; margin-bottom: 8px; font-size: 20px; }
.file-notice p { margin-bottom: 8px; }
.file-notice pre {
  background: var(--ink); color: #C8F3F6;
  padding: 10px 14px; border-radius: var(--radius);
  overflow-x: auto; direction: ltr; text-align: left; margin: 0 0 10px;
}
.file-notice code { font-family: Consolas, Menlo, monospace; font-size: 14px; }

.data-error {
  background: #FDECEA; border: 1px solid #F5C2BB;
  border-radius: var(--radius); padding: 20px; margin-bottom: 24px;
}
.data-error pre {
  background: var(--ink); color: #C8F3F6; padding: 10px 14px;
  border-radius: var(--radius); direction: ltr; text-align: left; overflow-x: auto;
}

/* --- header shell ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

/* --- top utility bar ------------------------------------------------------- */

.header-top { background: var(--bg); border-bottom: 1px solid var(--border); }

.header-top__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding-block: 10px;
}

.brand { flex: 0 0 auto; }
.brand img { height: 56px; width: auto; }

/* search sits in the middle and takes the slack */
.header-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
}

.header-search__input {
  width: 100%;
  padding: 11px 44px 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  transition: border-color .15s var(--ease), background .15s var(--ease),
              box-shadow .15s var(--ease);
}
.header-search__input::placeholder { color: var(--muted); }
.header-search__input:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(22, 163, 171, .14);
}
/* hide the browser's own clear button; it clashes with the pill shape */
.header-search__input::-webkit-search-cancel-button { display: none; }

.header-search__btn {
  position: absolute;
  inset-inline-start: 6px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.header-search__btn:hover { color: var(--teal); background: var(--surface); }
.header-search__btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- header utilities ------------------------------------------------------ */

.header-utils {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-utils__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.header-utils__link:hover { color: var(--teal); }

.cart-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.cart-pill:hover { border-color: var(--teal); color: var(--ink); background: #EDF7F8; }
.cart-pill__icon { display: grid; place-items: center; color: var(--teal); }
.cart-pill__icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.cart-pill__sep { color: var(--border); }
.cart-pill__total { color: var(--price); font-weight: 700; }

.cart-pill__count {
  position: absolute;
  top: -6px; inset-inline-start: -6px;
  min-width: 20px; height: 20px;
  padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--price); color: #fff;
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.cart-pill__count.is-empty { display: none; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  flex: 0 0 auto;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.icon-btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.icon-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn--whatsapp { background: var(--whatsapp); }
.icon-btn--facebook { background: var(--facebook); }

/* --- main nav bar ---------------------------------------------------------- */

.header-nav { background: var(--teal); color: #fff; }

.header-nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}

.nav-burger {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  color: #fff;
  border-radius: var(--radius);
}
.nav-burger:hover { background: rgba(255, 255, 255, .16); }
.nav-burger svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}

.main-nav { flex: 1 1 auto; min-width: 0; }

.main-nav__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.main-nav__item { position: relative; }

.main-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding-inline: 13px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.main-nav__link:hover,
.main-nav__item.is-open > .main-nav__link {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border-bottom-color: #fff;
}
.main-nav__link[aria-current="page"] { border-bottom-color: #fff; background: rgba(255,255,255,.1); }

.chev { display: grid; place-items: center; }
.chev svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.main-nav__item.is-open .chev svg { transform: rotate(180deg); }

/* --- dropdown -------------------------------------------------------------- */

.dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 60;
  min-width: 250px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.main-nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13.5px;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.dropdown__link:hover { background: var(--surface); color: var(--teal-dark); }
.dropdown__count { color: var(--muted); font-size: 12px; }

/* --- header contact block -------------------------------------------------- */

.header-contact {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 14px;
  background: var(--whatsapp);
  color: #fff;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
}
.wa-pill:hover { background: #1DA851; color: #fff; }
.wa-pill svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.header-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.header-contact__item:hover { color: #D9F6F8; }
.header-contact__item svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- stuck (compact) state ------------------------------------------------- */

/* Collapse the utility bar on scroll so the nav alone stays pinned. */
.site-header.is-stuck { box-shadow: var(--shadow); }
.site-header.is-stuck .header-top__inner {
  min-height: 56px;
  padding-block: 6px;
}
.site-header.is-stuck .brand img { height: 44px; }
.site-header.is-stuck .header-utils__link { display: none; }

/* --- search suggestions ---------------------------------------------------- */

.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 70;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  color: var(--ink);
}
.search-suggest__item:hover,
.search-suggest__item.is-active { background: var(--surface); color: var(--ink); }

.search-suggest__item img {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  background: var(--surface);
  border-radius: 4px;
}

.search-suggest__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-suggest__name {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-suggest__price { color: var(--price); font-weight: 700; font-size: 13px; }

.search-suggest__all {
  display: block;
  margin-top: 4px;
  padding: 9px;
  text-align: center;
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
}
.search-suggest__all:hover { background: var(--teal); color: #fff; }

.search-suggest__empty {
  margin: 0; padding: 16px;
  text-align: center; color: var(--muted); font-size: 14px;
}

/* --- mobile drawer --------------------------------------------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(30, 42, 46, .5);
  backdrop-filter: blur(2px);
}

.drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: 160;
  width: min(330px, 86vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  /* off-canvas to the right, because the page is RTL */
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.drawer__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
}
.drawer__close:hover { background: var(--surface); color: var(--ink); }
.drawer__close svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.drawer__list { flex: 1 1 auto; overflow-y: auto; padding: 8px; }

.drawer__row { display: flex; align-items: center; }

.drawer__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
}
.drawer__link:hover { background: var(--surface); color: var(--teal-dark); }

.drawer__count { color: var(--muted); font-size: 12px; font-weight: 400; }

.drawer__toggle {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
}
.drawer__toggle:hover { background: var(--surface); }
.drawer__toggle svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.drawer__group.is-open .drawer__toggle svg { transform: rotate(180deg); }

.drawer__sub { display: none; padding-inline-start: 14px; }
.drawer__group.is-open .drawer__sub { display: block; }

.drawer__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.drawer__sublink:hover { background: var(--surface); color: var(--teal-dark); }

/* --- footer ---------------------------------------------------------------- */

.site-footer {
  margin-top: 56px;
  background: var(--teal);
  color: #fff;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-block: 44px 36px;
}

.footer-col__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}

.footer-about__text {
  font-size: 14px;
  line-height: 1.9;
  color: #E4FAFB;
  margin-bottom: 18px;
}

.footer-logo { height: 100px; width: auto; margin-bottom: 16px; }

.footer-social { display: flex; gap: 10px; }
.site-footer .icon-btn { width: 38px; height: 38px; }

/* accordion */
.footer-acc__item { border-bottom: 1px solid rgba(255, 255, 255, .18); }

.footer-acc__row { display: flex; align-items: center; gap: 8px; padding: 9px 0; }

.footer-acc__link { flex: 1 1 auto; font-size: 14px; color: #fff; }
.footer-acc__link:hover { color: #C8F3F6; }

.footer-acc__count { font-size: 12px; color: #BEEFF2; }

.footer-acc__toggle {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: #fff;
  border-radius: 4px;
}
.footer-acc__toggle:hover { background: rgba(255, 255, 255, .16); }
.footer-acc__toggle svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.footer-acc__item.is-open .footer-acc__toggle svg { transform: rotate(180deg); }

.footer-acc__sub { display: none; padding: 0 12px 10px; }
.footer-acc__item.is-open .footer-acc__sub { display: block; }
.footer-acc__sub a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #D6F6F8;
}
.footer-acc__sub a:hover { color: #fff; }

.footer-contact li { margin-bottom: 12px; }
.footer-contact a, .footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #EAFCFD;
}
.footer-contact a:hover { color: #fff; }
.footer-contact svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.footer-note {
  margin-top: 18px;
  font-size: 13px;
  color: #C8F3F6;
}

.footer-bottom {
  background: var(--teal-darker);
  padding-block: 13px;
  font-size: 13px;
  text-align: center;
  color: #D9F6F8;
}