/* assets/css/header.css */

/* ── PROMO BAR ── */
.soc-promo-bar {
  background:      var(--c-brand);
  color:           var(--c-bg-warm);
  text-align:      center;
  font-size:       var(--text-xs);
  letter-spacing:  .09em;
  height:          var(--promo-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  padding:         0;
  position:        relative;
}

.soc-promo-bar__link {
  color:           inherit;
  text-decoration: none;
  padding:         0 var(--pad-mobile);
}

/* ── PROMO TICKER ── */
.soc-promo-bar--ticker { justify-content: flex-start; }

.soc-promo-ticker {
  display:     flex;
  align-items: center;
  animation:   soc-ticker 30s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
  will-change: transform;
}

@keyframes soc-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-10%); }
}

.soc-promo-ticker__item {
  flex-shrink:    0;
  letter-spacing: .09em;
  white-space:    nowrap;
  padding:        0 var(--pad-mobile);
}

.soc-promo-ticker__dot {
  flex-shrink:  0;
  color:        rgba(255,255,255,.25);
  margin-left:  20px;
  margin-right: 20px;
  line-height:  1;
}

/* ── HEADER ── */
.soc-header {
  background:    var(--c-white);
  height:        var(--header-h);
  border-bottom: var(--border-light);
  position:      sticky;
  top:           0;
  z-index:       var(--z-header);
}

.soc-header__inner {
  max-width:   var(--container);
  margin:      0 auto;
  height:      100%;
  display:     flex;
  align-items: center;
  padding:     0 var(--pad-mobile);
}

@media (min-width: 1024px) {
  .soc-header__inner { padding: 0 var(--pad-desktop); }
}

.soc-header__left,
.soc-header__right { flex: 1; display: flex; align-items: center; }
.soc-header__left  { gap: var(--sp-2); }
.soc-header__right { justify-content: flex-end; gap: var(--sp-2); }
.soc-header__center { flex-shrink: 0; }

@media (min-width: 1024px) {
  .soc-header__right { gap: var(--sp-2); }
}

/* ── DESKTOP NAV ── */
.soc-header__nav { display: none; }

@media (min-width: 1024px) {
  .soc-hamburger      { display: none !important; }
  .soc-search-trigger { display: none !important; }
  .soc-header__nav        { display: flex; align-items: center; }
  .soc-header__nav-list   { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
  .soc-header__nav-list a { font-size: var(--text-sm); color: var(--c-text); text-decoration: none; white-space: nowrap; transition: color var(--t-fast); }
  .soc-header__nav-list a:hover { color: var(--c-brand); }
}

/* ── DESKTOP INLINE SEARCH ── */
/* E um <button>, nao um <input readonly>: um campo a fingir apanha as regras de
   formulario do WooCommerce nas paginas da loja, e obrigava a uma dezena de
   !important so para as desfazer. */
.soc-header-search {
  display:        none;
  align-items:    center;
  gap:            6px;
  padding:        0 14px;
  height:         100%;
  border-left:    0.5px solid var(--c-border-light);
  margin-left:    10px;
  cursor:         pointer;
  background:     none;
  border-top:     none;
  border-right:   none;
  border-bottom:  none;
  transition:     opacity var(--t-fast);
}

@media (min-width: 1024px) {
  .soc-header-search { display: flex; }
}

.soc-header-search:hover { opacity: .6; }

.soc-header-search svg {
  color:       var(--c-brand);
  flex-shrink: 0;
}

.soc-header-search__label {
  font-family:    var(--font-main);
  font-size:      13px;
  color:          var(--c-brand);
  letter-spacing: -.01em;
  user-select:    none;
}

/* O cursor a piscar e o que da a ilusao de campo escrevivel. currentColor herda
   do proprio elemento, por isso basta a cor abaixo para o pintar. */
.soc-search-cursor {
  display:    inline-block;
  width:      2px;
  height:     12px;
  background: currentColor;
  color:      var(--c-brand);
  flex-shrink:0;
  animation:  soc-blink 1s cubic-bezier(1,0,0,1) infinite;
}

@keyframes soc-blink {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .soc-search-cursor { animation: none; }
}

/* ── LOGO ── */
.soc-logo { display: flex; align-items: center; color: var(--c-brand); }
.soc-logo svg,
.soc-logo img { height: 32px; width: auto; }
.soc-logo__text { font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: .14em; }

/* ── HAMBURGER ── */
.soc-hamburger {
  display:        flex;
  flex-direction: column;
  gap:            4.5px;
  background:     none;
  border:         none;
  padding:        6px;
  cursor:         pointer;
  color:          var(--c-text-muted);
}

.soc-hamburger span {
  display:    block;
  width:      18px;
  height:     1.2px;
  background: currentColor;
}

/* ── HEADER ICONS ── */
.soc-header__icon {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  background:      none;
  border:          none;
  color:           var(--c-text-muted);
  font-size:       var(--text-xs);
  font-family:     var(--font-main);
  letter-spacing:  .04em;
  padding:         4px;
  text-decoration: none;
  transition:      color var(--t-fast);
  position:        relative;
  cursor:          pointer;
}

.soc-header__icon:hover { color: var(--c-brand); }
.soc-header__icon-label { display: none; } /* sem labels em nenhum tamanho */

/* Header transparente na PDP mobile: REMOVIDO (Jul 2026) — causava problemas de layout na
   galeria e não compensava. Header normal sólido em todas as páginas. */

/* ── CART BADGE ── */
.soc-cart-icon-wrap { position: relative; display: flex; }

.soc-cart-count {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  background:  var(--c-accent);
  color:       var(--c-brand-dark);
  font-size:   .4375rem;
  font-weight: var(--fw-bold);
  width:       13px;
  height:      13px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── OVERLAY ── */
.soc-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,.4);
  z-index:        var(--z-overlay);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--t-base);
}
.soc-overlay.is-active { opacity: 1; pointer-events: auto; }

/* ── NAV DRAWER ── */
.soc-nav-drawer {
  position:           fixed;
  top:                0; left: -380px;
  width:              360px;
  height:             100%;
  height:             100dvh;
  background:         var(--c-white);
  z-index:            var(--z-drawer);
  display:            grid;
  grid-template-rows: auto 1fr auto;
  transition:         left var(--t-base);
  overflow:           hidden;
  box-shadow:         var(--shadow-lg);
}

.soc-nav-drawer.is-open { left: 0; }

.soc-nav-drawer__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  border-bottom:   var(--border-light);
}

.soc-nav-drawer__close {
  background: none;
  border:     none;
  font-size:  22px;
  color:      var(--c-text-light);
  line-height: 1;
  padding:    4px;
  cursor:     pointer;
  font-family: var(--font-main);
}

.soc-nav-drawer__body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }

.soc-nav-drawer__item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         15px 24px;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-light);
  color:           var(--c-text);
  text-decoration: none;
  border-bottom:   var(--border-xlight);
  transition:      color var(--t-fast), background var(--t-fast);
}

.soc-nav-drawer__item:hover     { color: var(--c-brand); background: var(--c-bg); }
.soc-nav-drawer__item--sm       { font-size: var(--text-base); color: var(--c-text-muted); }
.soc-nav-drawer__item--sm:hover { color: var(--c-brand); }

/* O'Clock PRO, no menu de telemóvel. Depois de .soc-nav-drawer__item — mesma
   especificidade, ganha a última — e antes do :hover acima, que continua a
   mandar no estado de toque. */
.soc-nav-drawer__item--brand { color: var(--c-accent); }

.soc-nav-drawer__sep {
  height: 0;
  margin: 8px 0;
}

.soc-nav-drawer__footer {
  padding:     20px 24px;
  border-top:  var(--border-xlight);
}

@media (max-width: 1023px) {
  .soc-nav-drawer__footer {
    padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

.soc-nav-drawer__lang-label {
  display:        block;
  font-size:      9px;
  letter-spacing: .12em;
  color:          var(--c-text-light);
  font-weight:    var(--fw-medium);
  margin-bottom:  10px;
}

.soc-nav-drawer__langs {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.soc-nav-drawer__lang {
  font-size:      10px;
  font-weight:    var(--fw-medium);
  letter-spacing: .08em;
  color:          var(--c-text-light);
  background:     none;
  border:         0.5px solid var(--c-border);
  padding:        4px 8px;
  cursor:         pointer;
  text-decoration: none;
  transition:     color var(--t-fast), border-color var(--t-fast);
}

.soc-nav-drawer__lang:hover,
.soc-nav-drawer__lang.is-active {
  color:        var(--c-brand);
  border-color: var(--c-brand);
}

/* ── MINI CART ── */
.soc-mini-cart {
  position:       fixed;
  top:            0; right: -420px;
  width:          400px;
  height:         100%;
  background:     var(--c-white);
  z-index:        var(--z-drawer);
  display:        flex;
  flex-direction: column;
  transition:     right var(--t-base);
  box-shadow:     var(--shadow-lg);
}

.soc-mini-cart.is-open { right: 0; }

/* Mobile: screens < 420px — panel takes full width to avoid cutting padding */
@media (max-width: 419px) {
  .soc-mini-cart        { width: 100%; right: -100%; }
  .soc-mini-cart.is-open { right: 0; }
}

/* Mini cart: z-index above any WC Blocks element (which may use 300-400) */
.soc-mini-cart { z-index: 500 !important; }

/* On the cart page on mobile: prevent WC Blocks button from becoming sticky/fixed
   and conflicting with the open mini cart */
@media (max-width: 1023px) {
  .woocommerce-cart .wc-block-cart__submit-container,
  .woocommerce-cart .wc-block-cart__submit-button {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Hide WC Blocks button that may be injected inside the mini cart */
.soc-mini-cart .wc-block-cart__submit-container,
.soc-mini-cart .widget_shopping_cart_content,
.soc-mini-cart .woocommerce-mini-cart__buttons { display: none !important; }

.soc-mini-cart__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  border-bottom:   var(--border-light);
  flex-shrink:     0;
}

.soc-mini-cart__title        { font-size: var(--text-md); font-weight: var(--fw-light); }
.soc-mini-cart__header-count { font-size: var(--text-sm); color: var(--c-text-xlight); font-weight: var(--fw-regular); margin-left: 4px; }

.soc-mini-cart__close {
  background: none;
  border:     none;
  font-size:  22px;
  color:      var(--c-text-light);
  cursor:     pointer;
  font-family: var(--font-main);
  padding:    4px;
}

/* Wrapper refreshable (body + footer) */
.soc-mini-cart__refreshable {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-height:     0;
}

.soc-mini-cart__body {
  flex:       1;
  overflow-y: auto;
  padding:    0 24px;
  min-height: 0;
}

.soc-mini-cart__empty {
  padding:    48px 0;
  text-align: center;
  color:      var(--c-text-muted);
  font-size:  var(--text-sm);
}

.soc-mini-cart__empty p { margin-bottom: var(--sp-5); }

.soc-mini-cart__item {
  display:       flex;
  gap:           var(--sp-4);
  padding:       16px 0;
  border-bottom: var(--border-xlight);
}

.soc-mini-cart__img-wrap {
  width:         72px;
  height:        90px;
  flex-shrink:   0;
  overflow:      hidden;
  background:    var(--c-bg-alt);
  border-radius: var(--r-sm);
  display:       block;
}

.soc-mini-cart__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.soc-mini-cart__item-info { flex: 1; min-width: 0; }

.soc-mini-cart__item-name {
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  color:           var(--c-text);
  text-decoration: none;
  display:         block;
  margin-bottom:   var(--sp-2);
  line-height:     1.35;
}

.soc-mini-cart__item-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--sp-2);
}

.soc-mini-cart__item-sub {
  font-size:   10px;
  color:       var(--c-text-light);
  line-height: 1.5;
  margin-bottom: 6px;
}

/* Qty controls — pastilha unificada (igual à página de produto) */
.soc-mini-cart__qty-ctrl {
  display:       flex;
  align-items:   center;
  border:        0.5px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  overflow:      hidden;
}

.soc-qty-btn {
  width:              30px;
  height:             28px;
  flex-shrink:        0;
  box-sizing:         border-box;
  border:             none;
  border-radius:      0;
  -webkit-appearance: none;
  appearance:         none;
  background:         var(--c-white);
  font-size:          15px;
  line-height:        1;
  color:              var(--c-text-muted);
  cursor:             pointer;
  font-family:        var(--font-main);
  display:            flex;
  align-items:        center;
  justify-content:    center;
  transition:         color var(--t-fast), background var(--t-fast);
  padding:            0;
  margin:             0;
  outline:            none;
}

.soc-qty-btn:hover  { color: var(--c-brand); }
.soc-qty-btn:focus  { outline: none; }

.soc-qty-val {
  width:          32px;
  height:         28px;
  flex-shrink:    0;
  box-sizing:     border-box;
  border:         none;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      11px;
  font-family:    var(--font-main);
  color:          var(--c-text);
}

.soc-mini-cart__item-qty   { font-size: var(--text-xs); color: var(--c-text-xlight); }
.soc-mini-cart__item-price { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--c-brand); text-align: right; }
.soc-mini-cart__item-price del { display: block; font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--c-text-ghost); text-decoration: line-through; }
.soc-mini-cart__item-price ins { display: block; text-decoration: none; }

.soc-mini-cart__item-links { margin-top: 8px; display: flex; gap: 12px; }

.soc-mini-cart__remove {
  font-size:       var(--text-xs);
  color:           var(--c-accent);
  text-decoration: none;
  border-bottom:   0.5px solid rgba(236,106,78,.3);
  padding-bottom:  1px;
  transition:      color var(--t-fast);
}

.soc-mini-cart__remove:hover { color: var(--c-accent); opacity: .7; }

/* Hide wishlist in mini cart — doesn't make sense in this context */
.soc-mini-cart .soc-wishlist-btn { display: none !important; }

.soc-mini-cart__footer {
  padding:        20px 24px 24px;
  border-top:     var(--border-light);
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);
}

.soc-mini-cart__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       var(--text-sm);
  padding:         3px 0;
}

.soc-mini-cart__row span:first-child { color: var(--c-text-xlight); }
.soc-mini-cart__free                 { color: var(--c-brand) !important; }
.soc-mini-cart__row--discount span:first-child { color: var(--c-text-xlight); }
.soc-mini-cart__discount-val,
.soc-mini-cart__discount-val *       { color: var(--c-accent) !important; font-weight: var(--fw-medium); }

.soc-mini-cart__total {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-medium);
  border-top:      var(--border-light);
  padding-top:     10px;
  margin-top:      6px;
  margin-bottom:   2px;
}

.soc-mini-cart__total span:last-child { color: var(--c-brand); }

.soc-mini-cart__vat {
  font-size:  var(--text-xs);
  color:      var(--c-text-xlight);
  text-align: right;
  margin-bottom: 12px;
}

/* ── SEARCH PANEL ── */
.soc-search-panel {
  position:         fixed;
  top:              0;
  left:             0; right: 0;
  bottom:           0; /* altura definida (top→bottom) — necessário para o scroll do body em flex */
  display:          flex;
  flex-direction:   column;
  overflow:         hidden; /* o body é que faz scroll (flex child) */
  background:       var(--c-white);
  z-index:          var(--z-search);
  border-bottom:    var(--border-light);
  box-shadow:       0 8px 32px rgba(0,0,0,.08);
  transform:        translateY(-110%);
  opacity:          0;
  pointer-events:   none;
  transition:       transform var(--t-base), opacity var(--t-base);
}

.soc-search-panel.is-open {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}

/* Barra de pesquisa — flex child fixo (não encolhe) */
.soc-search-panel__header {
  flex:          0 0 auto;
  background:    var(--c-white);
  border-bottom: var(--border-light);
  padding:       14px 0;
}

.soc-search-panel__bar {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.soc-search-panel__input-wrap {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    var(--c-bg);
  border:        0.5px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  padding:       0 22px;
  height:        44px;
  color:         var(--c-text-muted);
  transition:    border-color var(--t-fast);
}
.soc-search-panel__input-wrap:focus-within { border-color: var(--c-brand); }

@media (min-width: 1024px) {
  .soc-search-panel__header    { padding: 20px 0; }
  .soc-search-panel__input-wrap { height: 52px; }
}

.soc-search-panel__input {
  flex:        1;
  border:      none;
  background:  transparent;
  outline:     none;
  font-size:   var(--text-sm);
  font-family: var(--font-main);
  font-weight: var(--fw-light);
  color:       var(--c-text);
  padding:     0;
  -webkit-appearance: none;
}

@media (min-width: 1024px) {
  .soc-search-panel__input { font-size: var(--text-base); }
}

.soc-search-panel__input::placeholder { color: var(--c-text-ghost); }

/* WooCommerce adds border on focus for all inputs — reset for search panel */
.soc-search-panel__input:focus,
.soc-search-panel__input:focus-visible {
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
}

.soc-search-panel__clear {
  background:  none;
  border:      none;
  font-size:   18px;
  color:       var(--c-text-light);
  cursor:      pointer;
  font-family: var(--font-main);
  padding:     0;
  line-height: 1;
  flex-shrink: 0;
}

.soc-search-panel__close {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   var(--text-xs);
  color:       var(--c-text-muted);
  font-family: var(--font-main);
  padding:     8px 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition:  color var(--t-fast);
}

.soc-search-panel__close:hover { color: var(--c-text); }

/* Panel body — no internal scroll; outer panel scrolls */
.soc-search-panel__body {
  flex:             1 1 auto;
  min-height:       0; /* permite ao flex child encolher e ativar o scroll */
  overflow-y:       auto;
  scrollbar-gutter: stable;
  scrollbar-width:  thin;
  scrollbar-color:  var(--c-border-light) transparent;
}
.soc-search-panel__body::-webkit-scrollbar       { width: 6px; }
.soc-search-panel__body::-webkit-scrollbar-track { background: transparent; }
.soc-search-panel__body::-webkit-scrollbar-thumb { background: var(--c-border-light); }

.soc-search-panel__body > .soc-container {
  padding-top:    22px;
  padding-bottom: 48px;
}

/* Estado inicial */
.soc-search-panel__initial-layout {
  display: flex;
  gap:     32px;
}

.soc-search-panel__popular { flex: 1; }

.soc-search-panel__recent {
  width:       260px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .soc-search-panel__initial-layout { flex-direction: column; gap: 24px; }
  .soc-search-panel__recent { width: 100%; }
}

.soc-search-panel__hint {
  font-size:      var(--text-xs);
  color:          var(--c-text-xlight);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom:  14px;
}

/* Tags populares */
.soc-search-panel__tags {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.soc-search-panel__tag {
  border:        0.5px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  padding:       7px 15px;
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  cursor:        pointer;
  background:    none;
  font-family:   var(--font-main);
  transition:    border-color var(--t-fast), color var(--t-fast);
}

.soc-search-panel__tag:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* Recent suggestions */
.soc-search-panel__suggestions { display: flex; flex-direction: column; }

.soc-search-panel__sug {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 0;
  border:        none;
  border-bottom: 0.5px solid var(--c-border-xlight);
  cursor:        pointer;
  font-size:     var(--text-sm);
  color:         var(--c-text);
  background:    none;
  font-family:   var(--font-main);
  text-align:    left;
  width:         100%;
  transition:    color var(--t-fast);
}

.soc-search-panel__sug:hover { color: var(--c-brand); }
.soc-search-panel__sug svg   { color: var(--c-text-ghost); flex-shrink: 0; }

/* Sugestoes quando nao ha resultados: a linha do termo e as etiquetas de cada
   seccao (You might like… / Recently viewed… / Best sellers).

   As duas classes sao emitidas pelo search.js e nao tinham regra nenhuma em
   folha de estilos alguma — a etiqueta ficava do tamanho do texto corrido e
   encostada aos cartoes da seccao anterior.

   O tratamento e o do `__hint` acima (maiusculas pequenas, espacadas, em
   `--c-text-xlight`): e o vocabulario que este painel ja usa para rotular
   blocos. A linha por cima e a folga sao o que faltava para separar cada
   seccao das imagens da anterior. */
.soc-search-panel__no-results {
  font-size:     var(--text-base);
  color:         var(--c-text-muted);
  margin-bottom: 4px;
}

/* O <em> e o termo pesquisado (com aspas incluidas, vem assim do JS). Redondo,
   nao italico: aqui destaca-se pelo peso e pela cor, nao pela inclinacao. */
.soc-search-panel__no-results em {
  font-style:  normal;
  font-weight: var(--fw-semibold);
  color:       var(--c-text);
}

.soc-search-panel__section-label {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--c-text-xlight);
  margin:         36px 0 14px;
  padding-top:    18px;
  border-top:     0.5px solid var(--c-border-light);
}

/* Grelha de resultados */
.soc-search-panel__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
  padding-top:           4px;
}

@media (max-width: 1023px) { .soc-search-panel__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 639px)  { .soc-search-panel__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.soc-search-panel__card { text-decoration: none; color: var(--c-text); display: block; }
.soc-search-panel__card:hover .soc-search-panel__card-name { color: var(--c-brand); }

.soc-search-panel__card-img-wrap {
  aspect-ratio:  4 / 5;
  overflow:      hidden;
  background:    var(--c-bg-alt);
  margin-bottom: 10px;
}

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

.soc-search-panel__card-name  { font-size: var(--text-xs); font-weight: var(--fw-medium); margin-bottom: 3px; transition: color var(--t-fast); line-height: 1.35; }
.soc-search-panel__card-type  { font-size: 10px; color: var(--c-text-xlight); margin-bottom: 4px; }
.soc-search-panel__card-price { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-brand); }

.soc-search-panel__all {
  display:         block;
  padding:         var(--sp-3) 0;
  font-size:       var(--text-xs);
  color:           var(--c-brand);
  text-decoration: none;
  border-top:      var(--border-xlight);
  margin-top:      var(--sp-4);
  transition:      color var(--t-fast);
}

.soc-search-panel__all:hover { color: var(--c-brand-dark); }

.soc-search-panel__empty {
  font-size:  var(--text-sm);
  color:      var(--c-text-muted);
  padding:    60px 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA MENU — port do nusa-home (adaptado ao SOC: fonte 14px/medium, cantos
   arredondados, header sólido). Menu fonte = drawer-main.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Menu de topo — fonte igual à Nusa (14px / medium); spacing por padding (sem gap) */
/* Alinhamento por STRETCH (como a Nusa): nav/list/li esticam a toda a altura do
   header e o texto centra-se → o <button> do mega alinha com os <a>, apesar das
   métricas intrínsecas diferentes de button vs anchor. */
@media (min-width: 1024px) {
  .soc-header__left      { align-self: stretch; }
  /* Puxar o menu 14px para a esquerda — exactamente o padding lateral dos itens
     (ver a regra mais abaixo). Sem isto o TEXTO do primeiro item começa 14px
     dentro e desalinha da migalha e do conteúdo da página, mesmo estando a
     caixa alinhada. O padding fica, porque é ele que dá a área de rato.
     Seguro neste breakpoint: aqui o hamburger e a lupa estão display:none, por
     isso o menu é o único elemento à esquerda. */
  .soc-header__nav       { align-self: stretch; align-items: stretch; margin-left: -14px; }
  .soc-header__nav-list  { gap: 0; align-items: stretch; height: 100%; }
  .soc-header__nav-list > .soc-nav__item     { display: flex; align-items: stretch; }
  .soc-header__nav-list > .soc-nav__item > a,
  .soc-nav__link--mega {
    display:        flex;
    align-items:    center;
    height:         100%;
    line-height:    1;            /* normaliza o texto (button vs anchor) */
    font-size:      14px;
    font-weight:    var(--fw-medium);
    padding:        0 14px;
    letter-spacing: -.01em;
    color:          var(--c-text) !important;
  }
  .soc-header__nav-list > .soc-nav__item > a:hover,
  .soc-nav__link--mega:hover { color: var(--c-text) !important; opacity: .5; }

  /* O'Clock PRO em coral. Tem de vir depois das duas regras acima: elas usam
     !important e a mesma especificidade, e nesse empate ganha a última. A do
     :hover é precisa ou o item voltava a preto ao passar o rato; a opacidade
     .5 dessa regra continua a aplicar-se, porque o <li> mantém .soc-nav__item. */
  .soc-header__nav-list > .soc-nav__item--brand > a,
  .soc-header__nav-list > .soc-nav__item--brand > a:hover { color: var(--c-accent) !important; }
}

/* ── Reset — maior especificidade que .soc-header__nav-list a (0,2,1 > 0,1,1) ── */
.soc-header__nav .soc-mega ul,
.soc-header__nav .soc-mega ol {
  display:        block;
  height:         auto;
  flex:           none;
  flex-direction: initial;
  align-items:    initial;
  flex-wrap:      initial;
  list-style:     none;
  margin:         0;
  padding:        0;
}
.soc-header__nav .soc-mega li {
  display:     block;
  height:      auto;
  flex:        none;
  align-items: initial;
  width:       100%;
  list-style:  none;
}
.soc-header__nav .soc-mega a {
  display:         block;
  height:          auto;
  line-height:     normal;
  font-size:       var(--text-sm);
  font-weight:     var(--fw-regular);
  color:           var(--c-text);
  text-decoration: none;
  padding:         0;
  white-space:     normal;
  opacity:         1;
  letter-spacing:  normal;
  position:        static;
  transition:      color var(--t-fast);
}
.soc-header__nav .soc-mega a:hover { opacity: 1; }

/* ── Trigger button ── */
.soc-nav__link--mega {
  display:            flex;
  align-items:        center;
  align-self:         stretch;  /* full-height → texto centrado alinha com os links */
  height:             100%;
  margin:             0;
  gap:                4px;
  background:         none;
  border:             none;
  -webkit-appearance: none;
  appearance:         none;
  cursor:             pointer;
  font-family:        var(--font-main);
  font-size:          14px;
  font-weight:        var(--fw-medium);
  color:              var(--c-text);
  padding:            0 14px;
  white-space:        nowrap;
  letter-spacing:     -.01em;
  position:           relative;
  transition:         opacity var(--t-fast);
}
.soc-nav__link--mega:hover { opacity: .5; }
.soc-nav__link--mega[aria-expanded="true"] { opacity: .5; }
.soc-nav__link--mega svg { flex-shrink: 0; transition: transform var(--t-fast); }
.soc-nav__link--mega[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Panel ── */
.soc-mega {
  position:       absolute;
  top:            100%;
  left:           0; right: 0;
  background:     var(--c-white);
  border-top:     var(--border-xlight);
  border-bottom:  var(--border-xlight);
  box-shadow:     0 16px 48px rgba(0,0,0,.08);
  z-index:        var(--z-mega);
  overflow:       hidden;
  visibility:     hidden;
  opacity:        0;
  transform:      translateY(-4px);
  transition:     opacity 120ms ease, transform 120ms ease, visibility 0s 120ms;
  pointer-events: none;
}
.soc-mega.is-open {
  visibility:       visible;
  opacity:          1;
  transform:        translateY(0);
  transition:       opacity 120ms ease, transform 120ms ease;
  pointer-events:   auto;
}

/* ── 4-col grid ── */
.soc-mega__inner {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  align-items:           start;
  gap:                   0 40px;
  max-width:             var(--container);
  margin:                0 auto;
  padding:               0 var(--pad-desktop) 36px;
  min-height:            280px;
}

/* ── Eyebrow label ── */
.soc-mega__col-eyebrow {
  font-size:      10px;
  font-weight:    var(--fw-medium);
  color:          var(--c-text-xlight);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        28px 0 14px;
  white-space:    nowrap;
}

/* ── Col 1: Categories ── */
.soc-mega__col1 { padding-top: 28px; }
.soc-mega__cats {
  list-style: none;
  padding:    0 0 32px;
  margin:     0;
}
.soc-mega__cat             { border-bottom: var(--border-xlight); }
.soc-mega__cat:first-child { border-top: var(--border-xlight); }

.soc-mega__cat > a {
  display:     flex !important;
  align-items: center !important;
  height:      auto !important;
  padding:     14px 0 !important;
  font-size:   1.125rem !important;
  font-weight: var(--fw-light) !important;
  color:       var(--c-text) !important;
  white-space: nowrap !important;
  transition:  color var(--t-fast);
}
.soc-mega__cat > a:hover     { color: var(--c-brand) !important; }
.soc-mega__cat.is-active > a { color: var(--c-brand) !important; }

.soc-mega__cat > a::after {
  content:      '›';
  color:        transparent;
  flex-shrink:  0;
  margin-left:  auto;
  padding-left: 10px;
  font-size:    18px;
  line-height:  1;
  transition:   color var(--t-fast);
}
.soc-mega__cat.is-active > a::after,
.soc-mega__cat > a:hover::after { color: var(--c-brand); }

/* ── Col 2: Subcategories ── */
.soc-mega__subcat-panel          { display: none; }
.soc-mega__subcat-panel.is-active{ display: block; }
.soc-mega__subcat-list           { list-style: none; margin: 0; padding: 0; }
.soc-mega__subcat-item           { border-bottom: var(--border-xlight); }

.soc-mega__subcat-item > a {
  display:     flex !important;
  align-items: center !important;
  height:      auto !important;
  padding:     13px 0 !important;
  font-size:   var(--text-base) !important;
  font-weight: var(--fw-regular) !important;
  color:       var(--c-text) !important;
  transition:  color var(--t-fast);
}
.soc-mega__subcat-item > a:hover       { color: var(--c-brand) !important; }
.soc-mega__subcat-item.is-active > a   { color: var(--c-brand) !important; }

.soc-mega__subcat-item > a::after {
  content:      '›';
  color:        transparent;
  flex-shrink:  0;
  margin-left:  auto;
  padding-left: 10px;
  font-size:    18px;
  line-height:  1;
  transition:   color var(--t-fast);
}
.soc-mega__subcat-item.is-active > a::after,
.soc-mega__subcat-item > a:hover::after { color: var(--c-brand); }

/* ── Col 3: Sub-subcategories ── */
.soc-mega__subsub-panel          { display: none; }
.soc-mega__subsub-panel.is-active{ display: block; }
.soc-mega__subsub-list           { list-style: none; margin: 0; padding: 0; }
.soc-mega__subsub-list li        { border-bottom: var(--border-xlight); }

.soc-mega__subsub-list li > a {
  display:    block !important;
  height:     auto !important;
  padding:    12px 0 !important;
  font-size:  var(--text-base) !important;
  color:      var(--c-text-muted) !important;
  transition: color var(--t-fast);
}
.soc-mega__subsub-list li > a:hover { color: var(--c-brand) !important; }

/* ── Col 4: Banner ── */
.soc-mega__banners {
  position:   relative;
  align-self: stretch;
  min-height: 240px;
}
.soc-mega__banner-panel { display: none; }
.soc-mega__banner-panel.is-active {
  display:  block;
  position: absolute;
  top:      32px;
  left:     0;
  right:    0;
  bottom:   0;
}

.soc-mega__banner-link {
  display:         flex !important;
  flex-direction:  column;
  justify-content: flex-end;
  position:        relative;
  overflow:        hidden;
  border-radius:   var(--r-lg); /* SOC = cantos arredondados (imagem grande) */
  width:           100%;
  height:          100%;
  padding:         0 !important;
  opacity:         1 !important;
  text-decoration: none;
}
/* O reset .soc-header__nav .soc-mega a (0,2,1) sobrepunha-se ao banner-link (0,1,0),
   forçando height:auto → o link colapsava e o cinza visível (placeholder) ficava sem
   cantos. Reforçar especificidade + arredondar/clipar também o placeholder e o painel. */
.soc-header__nav .soc-mega a.soc-mega__banner-link {
  height:        100% !important;
  border-radius: var(--r-lg) !important;
  overflow:      hidden !important;
}
.soc-mega__banner-panel.is-active,
.soc-mega__banner-placeholder { border-radius: var(--r-lg); overflow: hidden; }
.soc-mega__banner-link img {
  position:   absolute;
  inset:      0;
  width:      100%; height: 100%;
  object-fit: cover;
  display:    block;
}
.soc-mega__banner-placeholder {
  position:   absolute;
  inset:      0;
  background: linear-gradient(150deg, var(--c-bg-warm) 0%, var(--c-bg-alt) 100%);
}
.soc-mega__banner-link:not(.soc-mega__banner-link--placeholder)::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.45) 100%);
  z-index:    1;
}
.soc-mega__banner-text {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  2;
  padding:  0 22px 26px;
}
.soc-mega__banner-eyebrow,
.soc-mega__banner-title,
.soc-mega__banner-cta { text-align: left !important; }
.soc-mega__banner-link--placeholder .soc-mega__banner-text { padding: 0 22px 22px; }

.soc-mega__banner-eyebrow {
  display:        block;
  font-size:      10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.75);
  margin-bottom:  5px;
}
.soc-mega__banner-link--placeholder .soc-mega__banner-eyebrow { color: var(--c-text-xlight); }

.soc-mega__banner-title {
  font-size:   17px;
  font-weight: var(--fw-light);
  color:       #fff;
  margin:      0 0 9px;
  line-height: 1.2;
}
.soc-mega__banner-link--placeholder .soc-mega__banner-title { color: var(--c-text); }

.soc-mega__banner-cta {
  font-size:     var(--text-xs);
  color:         rgba(255,255,255,.85);
  letter-spacing:.06em;
  display:       inline-block;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom:2px;
}
.soc-mega__banner-link--placeholder .soc-mega__banner-cta { color: var(--c-brand); border-color: var(--c-border); }

@media (max-width: 1023px) {
  .soc-nav__item--mega .soc-mega { display: none !important; }
}

/* ── MOBILE DRAWER MEGA ACCORDION ── */
.soc-drawer-mega__top-row {
  display:       flex;
  align-items:   center;
  padding:       15px 20px 15px 24px;
  border-bottom: var(--border-xlight);
  cursor:        pointer;
}
.soc-drawer-mega__top-link {
  padding:         0;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-light);
  color:           var(--c-text);
  text-decoration: none;
  transition:      color var(--t-fast);
  cursor:          pointer;
  white-space:     nowrap;
}
.soc-drawer-mega__top-link:hover { color: var(--c-brand); }

.soc-drawer-mega__chevron {
  margin-left: auto;
  padding-left:8px;
  flex-shrink: 0;
  color:       var(--c-text-xlight);
  display:     flex;
  align-items: center;
}
.soc-drawer-mega__top-row:hover .soc-drawer-mega__chevron { color: var(--c-brand); }
.soc-drawer-mega__chevron svg { transition: transform var(--t-fast); }
.soc-drawer-mega__top-row.is-open .soc-drawer-mega__chevron svg { transform: rotate(90deg); }

.soc-drawer-mega__body { background: none; }

.soc-drawer-mega__cat { border-bottom: var(--border-xlight); }

.soc-drawer-mega__cat-row {
  display:     flex;
  align-items: center;
  padding:     13px 20px 13px 32px;
  cursor:      pointer;
}
.soc-drawer-mega__cat-link {
  padding:         0;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-light);
  color:           var(--c-text);
  text-decoration: none;
  transition:      color var(--t-fast);
  white-space:     nowrap;
}
.soc-drawer-mega__cat-link:hover { color: var(--c-brand); }

.soc-drawer-mega__cat-link--solo {
  display:         block;
  padding:         13px 24px 13px 32px;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-light);
  color:           var(--c-text);
  text-decoration: none;
  transition:      color var(--t-fast);
}
.soc-drawer-mega__cat-link--solo:hover { color: var(--c-brand); }

.soc-drawer-mega__cat-toggle {
  margin-left: auto;
  padding-left:8px;
  flex-shrink: 0;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--c-text-xlight);
  display:     flex;
  align-items: center;
}
.soc-drawer-mega__cat-toggle svg { transition: transform var(--t-fast); }
.soc-drawer-mega__cat-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.soc-drawer-mega__cat-body { background: none; }

.soc-drawer-mega__sub-link {
  display:         block;
  padding:         12px 24px 12px 44px;
  font-size:       var(--text-lg);
  font-weight:     var(--fw-light);
  color:           var(--c-text);
  text-decoration: none;
  border-bottom:   var(--border-xlight);
  transition:      color var(--t-fast);
}
.soc-drawer-mega__sub-link:hover { color: var(--c-brand); }
.soc-drawer-mega__cat-body .soc-drawer-mega__sub-link:last-child { border-bottom: none; }