/*
  Foundry Honey x Uiverse UI pack
  Uiverse components are published under the MIT License. This file adapts the
  same copy-paste CSS component style to the Foundry Honey cream/gold/brown theme.
  Source inspiration: https://uiverse.io/ and Uiverse Galaxy MIT UI elements.
*/
:root {
  --ui-honey: #f4b400;
  --ui-honey-2: #ffcf57;
  --ui-honey-deep: #d99200;
  --ui-cream: #fff8e8;
  --ui-cream-2: #fffdf7;
  --ui-brown: #3f2b1f;
  --ui-brown-soft: #76583e;
  --ui-line: rgba(217, 153, 0, .30);
  --ui-green: #159947;
  --ui-red: #c9352c;
  --ui-shadow: 0 16px 35px rgba(75, 46, 20, .16);
  --ui-shadow-hover: 0 22px 48px rgba(217, 153, 0, .25);
  --ui-inner: inset 0 1px 0 rgba(255,255,255,.82), inset 0 -10px 22px rgba(132, 73, 0, .08);
}

/* Uiverse-style animated honey buttons */
.search button,
.primary-btn,
.auth-btn,
.product-btn,
.buy-btn,
.cart-foot button,
.checkout-foot button,
.admin-layout-body .fh-btn,
.admin-layout-body button[type="submit"],
.live-chat-send,
.live-chat-mini-btn,
.mobile-menu-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(154, 93, 0, .16) !important;
  background: linear-gradient(135deg, #ffd767 0%, var(--ui-honey) 42%, var(--ui-honey-deep) 100%) !important;
  color: #3c2516 !important;
  box-shadow: var(--ui-inner), 0 10px 24px rgba(217, 153, 0, .24) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
  transform: translateZ(0);
}

.search button::before,
.primary-btn::before,
.auth-btn::before,
.product-btn::before,
.buy-btn::before,
.cart-foot button::before,
.checkout-foot button::before,
.admin-layout-body .fh-btn::before,
.admin-layout-body button[type="submit"]::before,
.live-chat-send::before,
.live-chat-mini-btn::before,
.mobile-menu-toggle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -80%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  z-index: -1;
}

.search button:hover::before,
.primary-btn:hover::before,
.auth-btn:hover::before,
.product-btn:hover::before,
.buy-btn:hover::before,
.cart-foot button:hover::before,
.checkout-foot button:hover::before,
.admin-layout-body .fh-btn:hover::before,
.admin-layout-body button[type="submit"]:hover::before,
.live-chat-send:hover::before,
.live-chat-mini-btn:hover::before,
.mobile-menu-toggle:hover::before {
  left: 125%;
}

.search button:hover,
.primary-btn:hover,
.auth-btn:hover,
.product-btn:hover:not(:disabled),
.buy-btn:hover:not(:disabled),
.cart-foot button:hover,
.checkout-foot button:hover,
.admin-layout-body .fh-btn:hover,
.admin-layout-body button[type="submit"]:hover,
.live-chat-send:hover,
.live-chat-mini-btn:hover,
.mobile-menu-toggle:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--ui-inner), var(--ui-shadow-hover) !important;
}

.search button:active,
.primary-btn:active,
.auth-btn:active,
.product-btn:active,
.buy-btn:active,
.cart-foot button:active,
.checkout-foot button:active,
.admin-layout-body .fh-btn:active,
.admin-layout-body button[type="submit"]:active,
.live-chat-send:active,
.live-chat-mini-btn:active,
.mobile-menu-toggle:active {
  transform: translateY(0) scale(.985);
}

/* Secondary pills and header actions */
.header-link-btn,
.cart-pill,
.secondary-btn,
.chip-btn,
.live-chat-shortcut,
.admin-layout-body .fh-admin-nav a,
.admin-layout-body .fh-chip,
.admin-layout-body .fh-tab-link,
.admin-layout-body .fh-link-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,242,204,.82)) !important;
  border: 1px solid rgba(217,153,0,.24) !important;
  color: var(--ui-brown) !important;
  box-shadow: 7px 7px 16px rgba(91,57,24,.08), -6px -6px 14px rgba(255,255,255,.86) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.header-link-btn:hover,
.cart-pill:hover,
.secondary-btn:hover,
.chip-btn:hover,
.live-chat-shortcut:hover,
.admin-layout-body .fh-admin-nav a:hover,
.admin-layout-body .fh-admin-nav a.active,
.admin-layout-body .fh-chip:hover,
.admin-layout-body .fh-tab-link:hover,
.admin-layout-body .fh-tab-link.active,
.admin-layout-body .fh-link-btn:hover {
  background: linear-gradient(145deg, #fff8e7, #ffe5a0) !important;
  border-color: rgba(217,153,0,.45) !important;
  transform: translateY(-1px);
  box-shadow: 10px 12px 24px rgba(132,73,0,.14), -7px -7px 16px rgba(255,255,255,.9) !important;
}

/* Uiverse-style soft input/search fields */
.search,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.live-chat-form input,
.admin-layout-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-layout-body select,
.admin-layout-body textarea {
  border: 1px solid rgba(217,153,0,.25) !important;
  background: linear-gradient(180deg, #fffdf8, #fff8ea) !important;
  box-shadow: inset 3px 3px 8px rgba(91,57,24,.06), inset -3px -3px 9px rgba(255,255,255,.9), 0 7px 18px rgba(91,57,24,.06) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.search:focus-within,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.live-chat-form input:focus,
.admin-layout-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.admin-layout-body select:focus,
.admin-layout-body textarea:focus {
  outline: none !important;
  border-color: rgba(244,180,0,.78) !important;
  box-shadow: inset 3px 3px 8px rgba(91,57,24,.05), inset -3px -3px 9px rgba(255,255,255,.95), 0 0 0 4px rgba(244,180,0,.15), 0 14px 28px rgba(217,153,0,.14) !important;
}

/* Product cards: glass + honey glow */
.product-card,
.hero-copy,
.hero-card,
.hero-visual,
.panel-card,
.cart-card,
.checkout-dialog,
.support-ticket-card,
.faq-card,
.admin-layout-body .fh-card,
.admin-layout-body .fh-stat-card,
.admin-layout-body .fh-table-card,
.live-chat-panel,
.announcement-dropdown {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,249,235,.88)) !important;
  border: 1px solid rgba(217,153,0,.22) !important;
  box-shadow: 12px 16px 36px rgba(91,57,24,.10), -8px -8px 24px rgba(255,255,255,.85) !important;
}

.product-card {
  transform-style: preserve-3d;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 28% 0%, rgba(255, 219, 112, .34), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%);
  opacity: .66;
}

.product-card:hover,
.admin-layout-body .fh-card:hover,
.admin-layout-body .fh-stat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217,153,0,.42) !important;
  box-shadow: 0 20px 42px rgba(91,57,24,.16), 0 0 0 1px rgba(255,211,88,.20) !important;
}

.product-image img {
  transition: transform .35s ease, filter .35s ease;
}
.product-card:hover .product-image img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.03);
}

/* Quantity picker and option chips */
.qty-wrapper,
.product-card .qty-wrapper,
.variant-choice,
.option-chip,
.size-option,
.product-badge,
.stock-pill {
  background: linear-gradient(145deg, #fffef9, #fff0c7) !important;
  border-color: rgba(217,153,0,.28) !important;
  box-shadow: inset 1px 1px 4px rgba(91,57,24,.04), 0 6px 14px rgba(91,57,24,.08) !important;
}

.quantity-picker,
.product-card .quantity-picker {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.qty-btn,
.product-card .qty-btn {
  background: linear-gradient(135deg, #fff6d8, #ffc84c) !important;
  color: #593414 !important;
}

/* Buy now stays green but harmonized */
.buy-now-btn,
.product-btn:last-child {
  background: linear-gradient(135deg, #6ee58e 0%, #23b65b 45%, #138a41 100%) !important;
  color: white !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(22,163,74,.28) !important;
}

/* Chatbot Uiverse-style */
.live-chat-toggle {
  background: conic-gradient(from 180deg, #f4b400, #ffcf57, #d99200, #f4b400) !important;
  box-shadow: 0 0 0 8px rgba(244,180,0,.12), 0 16px 38px rgba(217,153,0,.36) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.live-chat-toggle:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 0 0 10px rgba(244,180,0,.16), 0 22px 45px rgba(217,153,0,.45) !important;
}
.live-chat-head {
  background: linear-gradient(135deg, #f8b80a 0%, #f2a500 54%, #c87800 100%) !important;
}
.live-chat-bubble.is-own,
.live-chat-bubble-wrap.is-own .live-chat-bubble {
  background: linear-gradient(135deg, #ffd767, #e8a600) !important;
  color: #3f2819 !important;
  box-shadow: 0 10px 20px rgba(217,153,0,.22);
}
.live-chat-bubble:not(.is-own),
.live-chat-bubble-wrap:not(.is-own) .live-chat-bubble {
  background: linear-gradient(145deg, #fff8e6, #fff1be) !important;
  color: #6a513f !important;
  border: 1px solid rgba(217,153,0,.18);
}
.live-chat-shortcut {
  min-height: 34px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fffefa, #fff0c2) !important;
}

/* Admin side gets same storefront honey theme */
.admin-layout-body {
  --fh-honey: var(--ui-honey);
  --fh-honey-dark: var(--ui-honey-deep);
  --fh-ink: var(--ui-brown);
  --fh-muted: var(--ui-brown-soft);
  --fh-line: rgba(217,153,0,.22);
  --fh-panel: rgba(255,253,247,.92);
  background:
    radial-gradient(circle at top left, rgba(255,207,87,.32), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(255,244,216,.72), transparent 30rem),
    linear-gradient(135deg, #fffaf0 0%, #fffdf8 46%, #fff4d8 100%) !important;
}
.admin-layout-body .fh-admin-sidebar {
  background: linear-gradient(180deg, rgba(255,253,247,.94), rgba(255,244,216,.90)) !important;
  box-shadow: 12px 0 35px rgba(91,57,24,.08) !important;
}
.admin-layout-body .fh-admin-nav a.active {
  border-left: 4px solid var(--ui-honey) !important;
}

/* Mobile polish: same Uiverse components but compact */
@media (max-width: 760px) {
  body:not(.admin-layout-body) .topbar-inner {
    padding: 9px 12px !important;
  }
  body:not(.admin-layout-body) .header-inner {
    padding: 10px 12px 12px !important;
    gap: 10px !important;
  }
  body:not(.admin-layout-body) .header-actions {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 7px !important;
  }
  body:not(.admin-layout-body) .header-link-btn,
  body:not(.admin-layout-body) .cart-pill {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: .84rem !important;
  }
  body:not(.admin-layout-body) .announcement-bell {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }
  body:not(.admin-layout-body) .search {
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }
  body:not(.admin-layout-body) .search button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 14px !important;
  }
  .live-chat-widget {
    right: 12px;
    bottom: 12px;
  }
  .live-chat-toggle {
    width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Final polish: keep Uiverse feel without making the header/search look heavy */
body:not(.admin-layout-body) .search {
  background: rgba(255, 252, 244, 0.92) !important;
  border: 1.5px solid rgba(232, 169, 0, 0.45) !important;
  box-shadow: 0 8px 22px rgba(88, 53, 18, 0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  outline: none !important;
}

body:not(.admin-layout-body) .search input,
body:not(.admin-layout-body) .search input:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
}

body:not(.admin-layout-body) .search input,
body:not(.admin-layout-body) .search input:focus,
body:not(.admin-layout-body) #searchInput,
body:not(.admin-layout-body) #searchInput:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.admin-layout-body) .search button {
  border-radius: 999px !important;
  border: 1px solid rgba(166, 100, 0, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(217,153,0,.24) !important;
}

body:not(.admin-layout-body) .header-actions {
  align-items: center !important;
  gap: 8px !important;
}

body:not(.admin-layout-body) .header-actions > .header-link-btn,
body:not(.admin-layout-body) .header-actions > .cart-pill,
body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
  border-radius: 999px !important;
  background: rgba(255, 248, 230, 0.88) !important;
  border: 1px solid rgba(217,153,0,.28) !important;
  box-shadow: 0 6px 16px rgba(91,57,24,.07) !important;
  color: #3f2b1f !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body:not(.admin-layout-body) .header-actions > .header-link-btn:hover,
body:not(.admin-layout-body) .header-actions > .cart-pill:hover,
body:not(.admin-layout-body) .announcement-widget > .announcement-bell:hover {
  background: linear-gradient(145deg, #fff9e8, #ffe8a8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(132,73,0,.13) !important;
}

body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
  min-width: 44px !important;
  padding-inline: 12px !important;
}

@media (min-width: 761px) {
  body:not(.admin-layout-body) .header-actions > .header-link-btn,
  body:not(.admin-layout-body) .header-actions > .cart-pill,
  body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
    min-height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 760px) {
  body:not(.admin-layout-body) .header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  body:not(.admin-layout-body) .header-actions > .header-link-btn,
  body:not(.admin-layout-body) .header-actions > .cart-pill,
  body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 44px !important;
    padding: 7px 12px !important;
    font-size: .82rem !important;
  }

  body:not(.admin-layout-body) .announcement-widget {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  body:not(.admin-layout-body) .search {
    border-radius: 24px !important;
    padding: 8px 9px 8px 14px !important;
    min-height: 50px !important;
  }

  body:not(.admin-layout-body) .search button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
  }
}

/* Desktop storefront header polish: keep the Uiverse style but make the user/action area clean */
@media (min-width: 761px) {
  body:not(.admin-layout-body) .site-header {
    background: rgba(255, 251, 242, 0.94) !important;
  }

  body:not(.admin-layout-body) .header-inner {
    grid-template-columns: minmax(250px, 0.85fr) minmax(360px, 560px) max-content !important;
    gap: 18px !important;
    min-height: 92px !important;
  }

  body:not(.admin-layout-body) .brand {
    min-width: 0 !important;
    text-decoration: none !important;
  }

  body:not(.admin-layout-body) .brand .logo {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
  }

  body:not(.admin-layout-body) .brand h1 {
    font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  body:not(.admin-layout-body) .brand p {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    max-width: 330px !important;
  }

  body:not(.admin-layout-body) .search-wrap {
    justify-self: center !important;
    width: min(100%, 560px) !important;
  }

  body:not(.admin-layout-body) .search {
    min-height: 58px !important;
    padding: 8px 9px 8px 18px !important;
    border-radius: 999px !important;
  }

  body:not(.admin-layout-body) .search input {
    font-size: 1rem !important;
  }

  body:not(.admin-layout-body) .search button {
    min-height: 44px !important;
    padding: 0 24px !important;
  }

  body:not(.admin-layout-body) .header-actions {
    justify-self: end !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body:not(.admin-layout-body) .header-user {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    max-width: 180px !important;
    padding: 0 2px !important;
    color: #4b3020 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.admin-layout-body) .header-actions > .header-link-btn,
  body:not(.admin-layout-body) .header-actions > .cart-pill,
  body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 0.94rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body:not(.admin-layout-body) .announcement-widget > .announcement-bell {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  body:not(.admin-layout-body) .header-inner {
    grid-template-columns: minmax(220px, .75fr) minmax(300px, 1fr) max-content !important;
    gap: 12px !important;
  }

  body:not(.admin-layout-body) .brand p {
    display: none !important;
  }

  body:not(.admin-layout-body) .header-user {
    display: none !important;
  }

  body:not(.admin-layout-body) .header-actions > .header-link-btn,
  body:not(.admin-layout-body) .header-actions > .cart-pill {
    padding: 0 13px !important;
    font-size: 0.88rem !important;
  }
}