/** Shopify CDN: Minification failed

Line 616:3 Expected "}" to go with "{"

**/
.search-pill-wrapper {
  /* Configuráveis via Shopify - apenas para estado ativo */
  --pill-active-opacity: 0.85;
  --pill-blur: 20px;
  
  /* Cores e estilos fixos */
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-border-subtle: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
  --glass-radius: 24px;
  --text-primary: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --accent-color: rgb(0, 0, 0);
}

.search-results-portal {
  /* Configuráveis via Shopify */
  --results-opacity: 0.7;
  --results-blur: 30px;
  
  /* Cores e estilos fixos */
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-radius-lg: 20px;
}

/* =============================================================
   BASE WRAPPER
   ============================================================= */
.search-pill-wrapper { 
  position: relative; 
  display: flex; 
  align-items: center; 
  height: 44px; 
  z-index: 200; 
}

.search-pill-wrapper.desktop-search { 
  justify-content: flex-end; 
  margin-right: 10px; 
}

.search-pill-wrapper.mobile-search { 
  justify-content: flex-start; 
  margin-right: 10px; 
}

/* =============================================================
   PILL FORM - JELLY/ELASTIC TRANSITION
   ============================================================= */
.search-pill-form {
  position: absolute; 
  top: 50%; 
  width: 44px; 
  height: 44px;
  border-radius: var(--glass-radius);
  display: flex; 
  align-items: center;
  z-index: 300;
  
  /* Estado fechado */
  transform: translateY(-50%) scale(1);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid transparent;
  box-shadow: none;
  
  /* JELLY transition - o segredo está no cubic-bezier */
  transition: 
    width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.3s ease;
}

/* Active state - Aplica glass + escala jelly */
.search-pill-wrapper.active .search-pill-form {
  transform: translateY(-50%) scale(1);
  background: rgba(255, 255, 255, var(--pill-active-opacity));
  backdrop-filter: blur(var(--pill-blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--pill-blur)) saturate(200%);
  border: 1px solid var(--glass-border);
  box-shadow: 
    var(--glass-shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Desktop - expande da direita */
.search-pill-wrapper.desktop-search .search-pill-form { 
  right: 0;
  transform-origin: right center;
}

.search-pill-wrapper.desktop-search.active .search-pill-form { 
  width: 360px; 
}

/* Mobile - expande da esquerda */
.search-pill-wrapper.mobile-search .search-pill-form { 
  left: 0;
  transform-origin: left center;
}

.search-pill-wrapper.mobile-search.active .search-pill-form { 
  width: calc(100vw - 60px); 
  max-width: 360px; 
}

/* =============================================================
   INPUT
   ============================================================= */
.search-pill-input {
  border: none; 
  background: transparent; 
  height: 100%;
  font-size: 15px; 
  font-weight: 500;
  color: var(--text-primary); 
  outline: none !important;
  box-shadow: none !important;
  caret-color: var(--accent-color);
  opacity: 0; 
  width: 0;
  padding: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-pill-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.search-pill-input::placeholder {
  color: var(--text-secondary);
  font-weight: 400;
}

.search-pill-wrapper.active .search-pill-input { 
  opacity: 1; 
  width: 100%;
  pointer-events: auto;
}

/* Remove o X padrão do navegador e estiliza com cor preta */
.search-pill-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") center center no-repeat;
  background-size: 14px 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.search-pill-input::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* Firefox */
.search-pill-input::-moz-search-cancel-button {
  -moz-appearance: none;
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") center center no-repeat;
  background-size: 14px 14px;
  cursor: pointer;
}

/* =============================================================
   BUTTON - SEM ANIMAÇÃO (ÍCONE ESTÁTICO)
   ============================================================= */
.search-pill-btn {
  position: absolute; 
  top: 0; 
  width: 44px; 
  height: 44px;
  background: transparent; 
  border: none; 
  cursor: pointer;
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 0; 
  z-index: 310;
}

.search-pill-btn svg { 
  width: 22px; 
  height: 22px; 
  stroke: currentColor; 
  stroke-width: 1px; 
  fill: none; 
  pointer-events: none;
}

/* =============================================================
   LOADING SPINNER
   ============================================================= */
.search-loading { 
  position: absolute; 
  top: 12px; 
  display: none; 
  z-index: 320;
  pointer-events: none;
}

.search-pill-wrapper.active.is-loading .search-loading { 
  display: block; 
}

.search-pill-wrapper .spinner { 
  width: 20px; 
  height: 20px; 
  animation: pillSearchSpin 1s linear infinite; 
}

.search-pill-wrapper .spinner .path { 
  stroke: var(--accent-color);
  stroke-linecap: round; 
  animation: pillSearchDash 1.5s ease-in-out infinite; 
}

@keyframes pillSearchSpin { 
  100% { transform: rotate(360deg); } 
}

@keyframes pillSearchDash { 
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } 
}

/* =============================================================
   DESKTOP SPECIFIC
   ============================================================= */
.search-pill-wrapper.desktop-search .search-pill-form { 
  right: 0;
  transform-origin: right center;
}

.search-pill-wrapper.desktop-search.active .search-pill-form { 
  width: 360px; 
}

.search-pill-wrapper.desktop-search .search-pill-input { 
  padding: 0 54px 0 22px; 
}

.search-pill-wrapper.desktop-search .search-pill-btn { 
  right: 0; 
}

.search-pill-wrapper.desktop-search .search-loading { 
  right: 52px; 
}

/* =============================================================
   MOBILE SPECIFIC
   ============================================================= */
.search-pill-wrapper.mobile-search .search-pill-form { 
  left: 0;
  transform-origin: left center;
}

.search-pill-wrapper.mobile-search.active .search-pill-form { 
  width: calc(100vw - 60px); 
  max-width: 360px; 
}

.search-pill-wrapper.mobile-search .search-pill-input { 
  padding: 0 18px 0 54px; 
}

.search-pill-wrapper.mobile-search .search-pill-btn { 
  left: 0; 
}

.search-pill-wrapper.mobile-search .search-loading { 
  right: 18px; 
}

/* =============================================================
   PORTAL CONTAINER - FORA DO HEADER
   ============================================================= */
.search-results-portal {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: 
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-results-portal.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =============================================================
   RESULTS DROPDOWN - LIQUID GLASS (CONFIGURÁVEL)
   ============================================================= */
.search-results-portal .search-results {
  max-height: 65vh; 
  overflow-y: auto; 
  text-align: left;
  
  /* Liquid Glass - USA VARIÁVEIS */
  background: rgba(255, 255, 255, var(--results-opacity));
  backdrop-filter: blur(var(--results-blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--results-blur)) saturate(200%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.18),
    0 8px 25px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  padding: 8px;
}

/* Arrow pointer - USA VARIÁVEIS */
.search-results-portal .search-results::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, var(--results-opacity));
  backdrop-filter: blur(var(--results-blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--results-blur)) saturate(200%);
  border-left: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  transform: rotate(45deg);
  z-index: -1;
}

.search-results-portal.is-desktop .search-results::before {
  right: 20px;
  left: auto;
}

.search-results-portal.is-mobile .search-results::before {
  left: 20px;
  right: auto;
}

/* Scrollbar */
.search-results-portal .search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results-portal .search-results::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-portal .search-results::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.search-results-portal .search-results::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* =============================================================
   RESULT ITEMS - GLASS CARDS
   ============================================================= */
.search-results-portal .simple-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-results-portal .simple-search-item { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  padding: 12px 14px; 
  color: rgba(0, 0, 0, 0.85); 
  text-decoration: none;
  border-radius: 14px;
  transition: 
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.search-results-portal .simple-search-item:hover { 
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.search-results-portal .simple-search-item:active {
  transform: translateX(4px) scale(0.99);
}

.search-results-portal .simple-search-image { 
  width: 48px; 
  height: 48px; 
  object-fit: cover; 
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-results-portal .simple-search-title { 
  font-size: 14px; 
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.3;
}

.search-results-portal .simple-search-price {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 2px;
}

/* =============================================================
   FOOTER - VIEW ALL
   ============================================================= */
.search-results-portal .simple-search-footer { 
  display: block;
  padding: 14px; 
  text-align: center; 
  font-size: 13px;
  font-weight: 600;
  color: rgb(0, 0, 0);
  background: rgba(255, 255, 255, 0.45);
  border: none;
  border-radius: 14px; 
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: 
    background 0.2s ease,
    transform 0.2s ease;
}

.search-results-portal .simple-search-footer:hover { 
  background: rgba(173, 173, 173, 0.15);
  transform: scale(1.02);
}

.search-results-portal .simple-search-footer:active {
  transform: scale(0.98);
}

/* =============================================================
   EMPTY STATE
   ============================================================= */
.search-results-portal .simple-search-empty {
  padding: 32px 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.search-results-portal .simple-search-empty::before {
  content: "🔍";
  display: block;
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* =============================================================
   DARK MODE SUPPORT
   ============================================================= */
@media (prefers-color-scheme: dark) {
  .search-pill-wrapper {
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-border-subtle: rgba(255, 255, 255, 0.08);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.6);
  }
  
  .search-pill-wrapper.active .search-pill-form {
    background: rgba(40, 40, 40, var(--pill-active-opacity));
  }
  
  .search-results-portal {
    --glass-border: rgba(255, 255, 255, 0.15);
  }
  
  .search-results-portal .search-results {
    background: rgba(30, 30, 30, var(--results-opacity));
  }
  
  .search-results-portal .search-results::before {
    background: rgba(30, 30, 30, var(--results-opacity));
    border-color: rgba(255, 255, 255, 0.15);
  }
  
  .search-results-portal .simple-search-item {
    color: rgba(255, 255, 255, 0.95);
  }
  
  .search-results-portal .simple-search-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .search-results-portal .simple-search-image {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .search-results-portal .simple-search-title {
    color: rgba(255, 255, 255, 0.95);
  }
  
  .search-results-portal .simple-search-price {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .search-results-portal .simple-search-empty {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .search-results-portal .simple-search-footer {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
  }
  
  .search-results-portal .simple-search-footer:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  
  /* X button preto -> branco no dark mode */
  .search-pill-input::-webkit-search-cancel-button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") center center no-repeat;
    background-size: 14px 14px;
  }
  /* =============================================================
   MOBILE SEARCH - EXPANSÃO COMPLETA
   Quando ativo: esconde logo e perfil, expande até perto do carrinho
   ============================================================= */
@media (max-width: 768px) {
  
  /* Quando o search mobile está ativo */
  #MainHeader:has(.mobile-search.active) .header-logo,
  #MainHeader:has(.mobile-search.active) .header-profile-link,
  #MainHeader:has(.mobile-search.active) .header-item.--center {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  
  /* Esconde também o botão de menu quando search está ativo */
  #MainHeader:has(.mobile-search.active) .header-item.--left > a[href="#drawer-menu"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Mobile search expande mais */
  .search-pill-wrapper.mobile-search {
    position: static;
    flex: 1;
    margin-right: 0;
    margin-left: 0;
  }
  
  .search-pill-wrapper.mobile-search .search-pill-form {
    left: 0;
    right: auto;
  }
  
  /* Quando ativo - expande até perto do carrinho */
  .search-pill-wrapper.mobile-search.active .search-pill-form {
    width: calc(100vw - 100px) !important; /* Deixa espaço pro carrinho */
    max-width: none !important;
  }
  
  /* Header com search ativo - ajusta layout */
  #MainHeader:has(.mobile-search.active) .header-content {
    justify-content: flex-start;
  }
  
  #MainHeader:has(.mobile-search.active) .header-item.--left {
    flex: 1;
    justify-content: flex-start;
  }
  
  #MainHeader:has(.mobile-search.active) .header-item.--right {
    flex: 0;
    justify-content: flex-end;
  }
  
  /* Garante que o carrinho continue visível */
  #MainHeader:has(.mobile-search.active) .header-item.--right > a[href="#drawer-cart"],
  #MainHeader:has(.mobile-search.active) .header-item.--right > a[href*="cart"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }