/* ==========================================================================
   Coto Premium Header 2.3.3 — Frontend Styles
   ========================================================================== */

/* ---------- Reset & Base ---------- */
.cph2-enabled {
  --cph-safe-adminbar: 0px;
}
.admin-bar .cph-wrap { --cph-safe-adminbar: 32px; }
@media (max-width: 782px) { .admin-bar .cph-wrap { --cph-safe-adminbar: 46px; } }

.cph-wrap,
.cph-wrap * { box-sizing: border-box; }
.cph-wrap {
  position: relative;
  z-index: 9998;
  width: 100%;
  font-family: var(--cph-font-family);
}
.cph-container {
  width: min(100%, var(--cph-max-width));
  margin-inline: auto;
  padding-inline: var(--cph-side-padding);
}

/* ---------- Top Bar ---------- */
.cph-topbar {
  position: relative;
  z-index: 25;
  min-height: var(--cph-topbar-height);
  background: var(--cph-topbar-bg);
  color: var(--cph-topbar-text);
  font-size: var(--cph-topbar-font-size);
  line-height: 1.2;
  /* FIX v2.3.1: smooth collapse when hiding on mobile scroll */
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, min-height .3s ease;
  max-height: 200px; /* generous limit for any topbar content */
}
/*
 * Smooth topbar hide: instead of display:none we collapse height.
 * This lets the mobile header transition its top position smoothly.
 */
.cph-topbar.cph-collapsing {
  max-height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
}
.cph-topbar a,
.cph-topbar span,
.cph-topbar div { color: inherit; }
.cph-topbar__inner {
  min-height: var(--cph-topbar-height);
  display: grid;
  grid-template-columns: 1fr minmax(220px, auto) 1fr;
  gap: 18px;
  align-items: center;
}
.cph-topbar__left,
.cph-topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cph-topbar__right { justify-content: flex-end; }
.cph-topbar__center {
  text-align: center;
  font-weight: 500;
}
.cph-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity .18s ease;
  min-height: 48px;
}
.cph-social-link svg { width: 16px; height: 16px; }
.cph-social-link:hover,
.cph-social-link:focus-visible { opacity: .88; }

/* ---------- Overlay Desktop ---------- */
.cph-overlay-desktop {
  position: absolute;
  inset: max(var(--cph-overlay-top-offset), calc(var(--cph-topbar-visible-offset, 0px) + 16px)) 0 auto 0;
  z-index: 22;
  color: var(--cph-overlay-text);
  transition: opacity .3s ease;
}
.cph-overlay-desktop--with-gradient::before {
  content: "";
  position: absolute;
  inset: calc(-1 * max(var(--cph-overlay-top-offset), calc(var(--cph-topbar-visible-offset, 0px) + 16px))) 0 auto 0;
  height: calc(var(--cph-overlay-gradient-height) + max(var(--cph-overlay-top-offset), calc(var(--cph-topbar-visible-offset, 0px) + 16px)));
  background: linear-gradient(180deg, var(--cph-overlay-gradient-start) 0%, var(--cph-overlay-gradient-end) 100%);
  pointer-events: none;
  z-index: -1;
}
.cph-overlay-desktop--disabled { display: none; }
.cph-overlay-desktop__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 10px;
}
.cph-overlay-desktop__center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ---------- Logo ---------- */
.cph-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.cph-logo {
  display: block;
  max-width: 100%;
  height: auto;
}
.cph-logo--scroll { display: none; }
.cph-logo-link--overlay .cph-logo--default,
.cph-logo-link--overlay .cph-logo--scroll { width: var(--cph-overlay-logo-width); }
.cph-logo-link--sticky .cph-logo--default,
.cph-logo-link--sticky .cph-logo--scroll { width: var(--cph-logo-width); }
.cph-logo-link--mobile .cph-logo--default,
.cph-logo-link--mobile .cph-logo--scroll {
  width: var(--cph-logo-width-mobile);
  transition: width .24s ease, opacity .2s ease;
}
.cph-logo-text {
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- Menus ---------- */
.cph-overlay-nav,
.cph-overlay-nav .menu,
.cph-sticky-slider,
.cph-sticky-slider .menu,
.cph-mobile-nav .menu { min-width: 0; }
.cph-overlay-menu,
.cph-sticky-menu,
.cph-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cph-overlay-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cph-overlay-menu--right { align-items: flex-end; }
.cph-overlay-menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  font-size: var(--cph-menu-font-size);
  text-transform: uppercase;
  letter-spacing: var(--cph-letter-spacing);
  line-height: 1.3;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .22);
  transition: color .18s ease;
}
.cph-overlay-menu--right a { justify-content: flex-end; }
.cph-overlay-menu a:hover,
.cph-overlay-menu a:focus-visible { color: var(--cph-overlay-hover); }
.cph-overlay-icons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.cph-overlay-desktop__right .cph-utilities { gap: var(--cph-desktop-icon-gap, 16px); }
.cph-overlay-desktop__right .cph-icon-button { text-shadow: 0 1px 10px rgba(0, 0, 0, .22); }

/* ---------- Sticky Header ---------- */
.cph-sticky-header {
  position: fixed;
  border-bottom: 1px solid var(--cph-border-color);
  top: var(--cph-safe-adminbar);
  left: 0;
  right: 0;
  z-index: 35;
  height: var(--cph-sticky-height);
  background: var(--cph-sticky-bg);
  color: var(--cph-sticky-text);
  box-shadow: 0 1px 0 var(--cph-border-color);
  backdrop-filter: saturate(130%) blur(10px);
  opacity: 0;
  transform: translateY(calc(-100% - 20px));
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
  contain: layout style;
}
.cph-wrap.is-sticky-active .cph-sticky-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cph-sticky-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: var(--cph-sticky-height);
}
.cph-sticky-header__icons .cph-utilities { gap: var(--cph-desktop-icon-gap, 16px); }
.cph-wrap.is-sticky-active .cph-logo-link--sticky .cph-logo--default { width: var(--cph-logo-width-sticky); }
.cph-wrap.has-scroll-logo.is-sticky-active .cph-logo-link--sticky .cph-logo--default { display: none; }
.cph-wrap.has-scroll-logo.is-sticky-active .cph-logo-link--sticky .cph-logo--scroll { display: block; width: var(--cph-logo-width-sticky); }
.cph-sticky-header__center {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.cph-sticky-slider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  /* Hide scrollbar visually but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.cph-sticky-slider-viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.cph-sticky-slider {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.cph-sticky-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cph-menu-gap);
  flex-wrap: nowrap;
  width: max-content;
  transition: transform .25s ease;
}
.cph-sticky-menu > li { flex: 0 0 auto; }
.cph-sticky-menu a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  font-size: var(--cph-menu-font-size);
  text-transform: uppercase;
  letter-spacing: var(--cph-letter-spacing);
  line-height: 1.2;
  white-space: nowrap;
  transition: color .18s ease;
}
.cph-sticky-menu a:hover,
.cph-sticky-menu a:focus-visible,
.cph-icon-button:hover,
.cph-icon-button:focus-visible { color: var(--cph-sticky-hover); }
.cph-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity .18s ease;
}
.cph-slider-arrow[disabled] { opacity: .35; cursor: default; }
/* Arrows hidden entirely when menu fits without scrolling */
.cph-slider-arrow.cph-arrow-hidden { display: none; }
.cph-slider-arrow svg { width: 18px; height: 18px; }
.cph-sticky-spacer { display: none; height: var(--cph-sticky-height); }
.cph-wrap.is-sticky-active .cph-sticky-spacer { display: block; }

/* ---------- Utilities ---------- */
.cph-utilities {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.cph-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: color .18s ease;
  /*
   * FIX v2.3.3: REAL 48×48px touch target (Lighthouse measures the element,
   * not pseudo-elements). Padding creates the physical area.
   */
  min-width: 48px;
  min-height: 48px;
  padding: 0;
}
.cph-icon-button svg,
.cph-social-link svg {
  width: var(--cph-icon-size);
  height: var(--cph-icon-size);
  flex: 0 0 auto;
}
.cph-utility-label,
.cph-social-label {
  font-size: var(--cph-menu-font-size);
  line-height: 1.2;
}
.cph-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.18rem;
  min-height: 1.18rem;
  padding-inline: .25rem;
  border-radius: 999px;
  background: var(--cph-cart-badge-bg);
  color: var(--cph-cart-badge-text);
  border: 1px solid rgba(0, 0, 0, .08);
  font-size: 10px;
  line-height: 1;
}

/* ---------- Mobile Header ---------- */
.cph-mobile-header {
  position: fixed;
  top: calc(var(--cph-safe-adminbar) + var(--cph-topbar-visible-offset, 0px));
  left: 0;
  right: 0;
  z-index: 34;
  min-height: var(--cph-mobile-height);
  background: var(--cph-sticky-bg);
  color: var(--cph-sticky-text);
  box-shadow: 0 1px 0 var(--cph-border-color);
  display: none;
  will-change: transform;
  contain: layout style;
  /* FIX v2.3.1: smooth repositioning when topbar hides on scroll */
  transition: top .3s ease;
}
.cph-mobile-header__inner {
  min-height: var(--cph-mobile-height);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cph-mobile-header__logo {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}
.cph-mobile-header__logo .cph-logo-text { font-size: 1.25rem; }
.cph-mobile-header__icons .cph-utilities { gap: var(--cph-mobile-icon-gap, 4px); }
.cph-mobile-header__icons .cph-icon-button {
  min-width: 48px;
  min-height: 48px;
}
.cph-mobile-header__icons .cph-icon-button svg {
  width: var(--cph-mobile-icon-size, 22px);
  height: var(--cph-mobile-icon-size, 22px);
}
.cph-mobile-header__icons .cph-cart-count { margin-left: 2px; }
.cph-mobile-header__icons .cph-utility-label,
.cph-mobile-header__icons .cph-utility-shortcode { display: none; }

/*
 * FIX v2.3: Mobile spacer ONLY compensates for the fixed mobile header.
 * The topbar is in normal document flow so its height is already counted.
 * Previous versions added topbar height here too, causing the unwanted gap.
 */
.cph-mobile-spacer {
  display: none;
  height: var(--cph-mobile-height);
}

.cph-burger {
  display: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cph-burger span {
  display: block;
  width: 24px;
  height: 1.8px;
  background: currentColor;
  margin: 5px auto;
  transition: transform .2s ease, opacity .2s ease;
}
/* Burger → X animation */
.cph-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.8px) rotate(45deg);
}
.cph-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.cph-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.8px) rotate(-45deg);
}

/* ---------- Drawer & Search Overlay ---------- */
.cph-mobile-drawer,
.cph-search-overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 10050;
}
.cph-mobile-drawer.is-open,
.cph-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cph-mobile-drawer__overlay,
.cph-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
}
.cph-mobile-drawer__panel {
  position: relative;
  width: min(90vw, 420px);
  height: 100%;
  background: var(--cph-drawer-bg);
  color: var(--cph-drawer-text);
  padding: 22px 20px 34px;
  transform: translateX(-100%);
  transition: transform .28s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cph-mobile-drawer.is-open .cph-mobile-drawer__panel { transform: translateX(0); }
.cph-mobile-drawer__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.cph-drawer-close,
.cph-search-close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 36px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cph-mobile-nav + .cph-mobile-nav {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--cph-border-color);
}
.cph-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cph-mobile-menu a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--cph-letter-spacing);
  line-height: 1.3;
}
.cph-mobile-menu .sub-menu {
  list-style: none;
  margin: 8px 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cph-mobile-actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--cph-border-color);
}
.cph-mobile-actions .cph-utilities {
  flex-wrap: wrap;
  gap: 16px 14px;
}
.cph-search-overlay__panel {
  position: relative;
  margin: min(10vh, 80px) auto 0;
  width: min(92vw, 780px);
  background: #fff;
  color: #111;
  padding: 24px;
  border-radius: 4px;
}
.cph-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}
.cph-search-form input,
.cph-search-form button {
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
}
.cph-search-form button { cursor: pointer; }
.cph-lock-scroll,
.cph-lock-scroll body { overflow: hidden; }

/* ---------- Focus Styles ---------- */
.cph-wrap a:focus-visible,
.cph-wrap button:focus-visible,
.cph-wrap [tabindex]:focus-visible,
.cph-search-overlay input:focus-visible,
.cph-search-overlay button:focus-visible {
  outline: 2px solid var(--cph-focus);
  outline-offset: 3px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---------- Visibility States ---------- */
.cph2-transparent-home .cph-wrap:not(.is-sticky-active) .cph-sticky-header,
.cph2-transparent-home .cph-wrap:not(.is-sticky-active) .cph-sticky-spacer { display: none; }
.cph-wrap.is-sticky-active .cph-overlay-desktop { opacity: 0; pointer-events: none; }
.cph-wrap.has-scroll-logo .cph-logo-link--mobile .cph-logo--scroll,
.cph-wrap.has-scroll-logo .cph-logo-link--sticky .cph-logo--scroll { display: none; }
.cph-wrap.has-scroll-logo.is-mobile-sticky .cph-logo-link--mobile .cph-logo--default { display: none; }
.cph-wrap.has-scroll-logo.is-mobile-sticky .cph-logo-link--mobile .cph-logo--scroll { display: block; width: var(--cph-logo-width-mobile-sticky); }
.cph-wrap.is-mobile-sticky .cph-logo-link--mobile .cph-logo--default { width: var(--cph-logo-width-mobile-sticky); }

/* ---------- Breakpoints ---------- */

/* Desktop + tablet */
@media (min-width: 981px) {
  .cph-mobile-header,
  .cph-mobile-spacer,
  .cph-mobile-drawer { display: none !important; }
  .cph-burger { display: none !important; }
}

/*
 * FIX v2.3.1: Progressive overlay compacting on smaller desktops
 * to prevent the menu from overlapping with the hero content.
 */

/* Large desktop shrink */
@media (max-width: 1400px) {
  .cph-overlay-desktop__inner {
    gap: 20px;
    padding-top: 8px;
  }
  .cph-logo-link--overlay .cph-logo--default,
  .cph-logo-link--overlay .cph-logo--scroll { width: min(var(--cph-overlay-logo-width), 300px); }
  .cph-overlay-menu { gap: 5px; }
  .cph-overlay-menu a { font-size: min(var(--cph-menu-font-size), 12px); }
  .cph-overlay-icons { margin-top: 14px; }
}

/* Tablet-ish desktop */
@media (max-width: 1200px) {
  .cph-overlay-desktop__inner {
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
    gap: 14px;
    padding-top: 6px;
  }
  .cph-logo-link--overlay .cph-logo--default,
  .cph-logo-link--overlay .cph-logo--scroll { width: min(var(--cph-overlay-logo-width), 220px); }
  .cph-overlay-menu { gap: 3px; }
  .cph-overlay-menu a {
    font-size: 11px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  }
  .cph-overlay-icons { margin-top: 10px; }
  .cph-overlay-desktop__right .cph-utilities { gap: 10px; }
  .cph-overlay-desktop__right .cph-icon-button svg { width: 16px; height: 16px; }
}

/* Mobile */
@media (max-width: 980px) {
  .cph-overlay-desktop,
  .cph-sticky-header,
  .cph-sticky-spacer { display: none !important; }
  .cph-mobile-header,
  .cph-mobile-spacer { display: block; }
  .cph-burger { display: block; }

  /*
   * FIX v2.3.3: Topbar horizontal on mobile — icon and message side by side.
   * Using 2-column grid instead of single column to keep it compact.
   */
  .cph-topbar__inner {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: auto;
  }
  .cph-topbar__left {
    justify-content: flex-start;
    gap: 8px;
  }
  .cph-topbar__center {
    text-align: center;
  }
  .cph-topbar__right {
    display: none; /* Hidden on mobile to save space */
  }
  .cph-social-label { display: none; }
  .cph-hide-topbar-mobile { display: none !important; }
}

/* Small mobile */
@media (max-width: 767px) {
  /* Topbar hide on scroll uses .cph-collapsing class for smooth transition */
  .cph-mobile-header__inner { gap: 4px; }
  .cph-mobile-header__icons .cph-cart-count { font-size: 9px; }
  .cph-logo-link--mobile .cph-logo--default,
  .cph-logo-link--mobile .cph-logo--scroll { width: min(var(--cph-logo-width-mobile), 140px); }
  .cph-wrap.is-mobile-sticky .cph-logo-link--mobile .cph-logo--default,
  .cph-wrap.has-scroll-logo.is-mobile-sticky .cph-logo-link--mobile .cph-logo--scroll { width: min(var(--cph-logo-width-mobile-sticky), 116px); }
}

/* Extra small */
@media (max-width: 480px) {
  .cph-topbar__inner { gap: 6px; }
  .cph-mobile-header__icons .cph-cart-count { min-width: 1.05rem; min-height: 1.05rem; }
  .cph-search-form { grid-template-columns: 1fr; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cph-sticky-header,
  .cph-mobile-drawer__panel,
  .cph-mobile-drawer,
  .cph-search-overlay,
  .cph-overlay-desktop,
  .cph-sticky-menu,
  .cph-logo-link--mobile .cph-logo--default,
  .cph-logo-link--mobile .cph-logo--scroll,
  .cph-burger span {
    transition-duration: 0.01ms !important;
  }
}