/* Dosis24 shared forest chrome — PDP-canonical .header (2026-09-14 navbar unify)
   Source of truth: public/dosis24/producto/index.html <header class="header">
   Copy lock: brand/search/Cuenta/Carrito only — no topbar, no subtitle, no Medicamentos row. */

.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,252,246,.88);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--ivory-line,#E7E0D2);
}
.header-inner{
  max-width:var(--max,1180px);margin:0 auto;padding:14px 28px;
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
}
.header .brand,.header a.brand{
  display:flex;align-items:center;gap:10px;
  color:var(--forest-ink,#0D1F1B);text-decoration:none;
}
.header .brand svg{display:block;flex-shrink:0;}
.header .brand-name{
  font-size:18px;font-weight:600;letter-spacing:.02em;
  font-family:Outfit,system-ui,sans-serif;color:var(--forest-ink,#0D1F1B);
}
/* Minimal lupa search (t1951u) — right cluster; expands leftward overlay */
.header .header-spacer{min-width:0;}
.header .search{
  position:relative;display:flex;align-items:center;justify-content:center;
  justify-self:auto;margin:0;width:42px;height:42px;max-width:none;gap:0;flex:0 0 auto;
}
.header .search.is-open{
  /* keep cluster slot; panel is absolute overlay growing left */
  width:42px;height:42px;
}
.header .search-toggle{
  width:42px;height:42px;min-width:42px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--ivory-line,#E7E0D2);
  background:var(--ivory,#FFFCF6);color:var(--forest,#1C433A);
  cursor:pointer;flex-shrink:0;
  transition:background .2s,border-color .2s,color .2s;
  /* match .icon-btn chrome */
  box-sizing:border-box;
}
.header .search-toggle:hover{
  background:var(--mint,#E7F3EE);border-color:var(--mint-line,#C5D9D1);
}
.header .search-toggle:focus-visible{
  outline:2px solid var(--sage,#3F6B60);outline-offset:2px;
}
.header .search.is-open .search-toggle{
  visibility:hidden;pointer-events:none;
}
.header .search-panel{
  position:absolute;right:0;top:0;
  width:min(520px,calc(100vw - 48px));z-index:70;
  transform:translateX(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:blur(2px);
  will-change:transform,opacity,filter;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 320ms;
}
.header .search.is-open .search-panel{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  filter:blur(0);
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.header .search.is-closing .search-panel{
  transform:translateX(14px);
  opacity:0;
  visibility:visible;
  pointer-events:none;
  filter:blur(2px);
  transition:
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 220ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 260ms;
}
/* Keep toggle slot during close so reverse slide reads from lupa edge */
.header .search.is-closing .search-toggle{
  visibility:hidden;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .header .search-panel,
  .header .search.is-open .search-panel,
  .header .search.is-closing .search-panel{
    transition:none!important;
    filter:none!important;
  }
}
.header .search-field{
  display:flex;align-items:center;gap:10px;
  background:var(--white,#fff);
  border:1px solid var(--ivory-line,#E7E0D2);
  border-radius:999px;padding:0 16px;height:42px;width:100%;
  box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s;
}
.header .search-field:focus-within{
  border-color:var(--sage,#3F6B60);
  box-shadow:0 0 0 3px rgba(63,107,96,.14);
}
.header .search-field svg{flex-shrink:0;color:#7A8B85;}
.header .search-field input{
  border:0;outline:0;background:transparent;
  width:100%;font-size:14px;color:var(--text,#1A2C28);
  font-family:Outfit,system-ui,sans-serif;
}
.header .search-field input:focus{outline:none;}
.header .search-field input::placeholder{color:#7A8B85;}
.header .search-suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  padding:6px;z-index:60;
  background:var(--ivory,#FFFCF6);
  border:1px solid var(--ivory-line,#E7E0D2);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(18,46,40,.14);
  max-height:min(360px,60vh);overflow:auto;
  font-family:Outfit,system-ui,sans-serif;
}
.header .search-suggest[hidden]{display:none!important;}
.header .search-suggest-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--forest-ink,#0D1F1B);
  transition:background .15s;
}
.header .search-suggest-item:hover,
.header .search-suggest-item.is-active{
  background:var(--mint,#E7F3EE);
}
.header .search-suggest-name{
  font-size:13.5px;font-weight:600;line-height:1.35;
  color:var(--forest,#1C433A);
}
.header .search-suggest-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  flex-shrink:0;font-size:12px;color:var(--text-muted,#4E635C);
}
.header .search-suggest-code{font-variant-numeric:tabular-nums;opacity:.85;}
.header .search-suggest-price{font-weight:600;color:var(--forest,#1C433A);}
.header .search-suggest-status{
  padding:14px 12px;font-size:13.5px;color:var(--text-muted,#4E635C);
  text-align:center;
}
.header .search-suggest-status[data-kind="error"]{color:#8a3b2b;}
.header .search-suggest-status[data-kind="empty"]{color:var(--text-faint,#667872);}
.header .btn-search{display:none!important;} /* legacy — removed from markup */
@media (prefers-reduced-motion:reduce){
  .header .search-field,
  .header .search-toggle,
  .header .search-suggest-item{transition:none;}
}

.header .header-actions{display:flex;align-items:center;gap:8px;justify-self:end;position:relative;}
.header .icon-btn{
  height:42px;padding:0 14px;
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1px solid var(--ivory-line,#E7E0D2);
  border-radius:999px;color:var(--forest,#1C433A);
  font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:Outfit,system-ui,sans-serif;text-decoration:none;
  transition:background .2s,border-color .2s;
}
.header .icon-btn:hover{background:var(--mint,#E7F3EE);border-color:var(--mint-line,#C5D9D1);}
.header .icon-btn.cart{
  background:var(--ivory,#FFFCF6);color:var(--forest,#1C433A);border-color:var(--ivory-line,#E7E0D2);
}
.header .icon-btn.cart:hover{background:var(--mint,#E7F3EE);border-color:var(--mint-line,#C5D9D1);}
.header .cart-count{
  min-width:18px;height:18px;padding:0 5px;
  background:var(--forest,#1C433A);color:var(--ivory,#FFFCF6);
  border-radius:999px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.header .brand-logo-img{width:36px;height:36px;border-radius:10px;object-fit:contain;display:block;flex-shrink:0;}
@media (max-width:980px){
  .header-inner{grid-template-columns:auto 1fr auto;gap:12px;padding:12px 16px;}
}
@media (max-width:640px){
  .header .brand-name{display:none;}
  .header .icon-btn.account span,
  .header .icon-btn.cart .cart-label,
  .header .icon-btn.pedido .pedido-label{display:none;}
  .header .search.is-open{width:42px;}
  .header .search-panel{width:min(100vw - 24px, 100%);}
  .header .search-field{padding:0 12px;}
}

/* Legacy alias — prefer .header (PDP). Kept for one-release safety if any leftover markup. */
.d24-chrome-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,252,246,.88);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--ivory-line,#E7E0D2);
}
.d24-chrome-header .d24-chrome-inner{
  max-width:var(--max,1180px);margin:0 auto;padding:14px 28px;
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
}
.d24-chrome-header .d24-chrome-brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--forest-ink,#0D1F1B);text-decoration:none;
  font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:18px;letter-spacing:.02em;
}
.d24-chrome-header .d24-chrome-brand svg{display:block;flex-shrink:0;}
.d24-chrome-header .d24-chrome-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-self:end;}
.d24-chrome-header .d24-chrome-nav a,
.d24-chrome-header .d24-chrome-nav button.d24-chrome-link{
  display:inline-flex;align-items:center;gap:6px;
  height:42px;padding:0 14px;
  border:1px solid var(--ivory-line,#E7E0D2);border-radius:999px;
  background:transparent;color:var(--forest,#1C433A);
  font:500 13.5px Outfit,system-ui,sans-serif;text-decoration:none;cursor:pointer;
}
.d24-chrome-header .d24-chrome-nav a:hover,
.d24-chrome-header .d24-chrome-nav button.d24-chrome-link:hover{
  background:var(--mint,#E7F3EE);border-color:var(--mint-line,#C5D9D1);
}
.d24-chrome-header .d24-chrome-nav a.cart,
.d24-chrome-header .d24-chrome-nav button.cart{background:var(--ivory,#FFFCF6);}
.d24-chrome-header .cart-count{
  min-width:18px;height:18px;padding:0 5px;
  background:var(--forest,#1C433A);color:var(--ivory,#FFFCF6);
  border-radius:999px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
@media (max-width:640px){
  .d24-chrome-header .d24-chrome-brand span{display:none;}
}

.d24-chrome-footer{
  background:var(--forest-deep,#122E28);color:#cfe6de;
  padding:36px 20px 20px;margin-top:32px;
}
.d24-chrome-footer .d24-chrome-foot-inner{
  max-width:var(--max,1180px);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;
}
.d24-chrome-footer .d24-chrome-foot-brand{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
  color:#fff;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:16px;
}
.d24-chrome-footer h5{
  margin:0 0 10px;color:#fff;font-size:13px;font-family:Fraunces,Georgia,serif;font-weight:600;
}
.d24-chrome-footer a{
  display:block;margin:0 0 8px;color:#cfe6de;text-decoration:none;font-size:13.5px;
  font-family:Outfit,system-ui,sans-serif;
}
.d24-chrome-footer a:hover{color:#fff;}
.d24-chrome-footer .d24-chrome-foot-bottom{
  max-width:var(--max,1180px);margin:24px auto 0;padding-top:16px;
  border-top:1px solid rgba(207,230,222,.18);
  font-size:12px;color:#8fb3a8;font-family:Outfit,system-ui,sans-serif;
}

/* Cart drawer (shared with home/PDP) */
.cart-overlay{position:fixed;inset:0;background:var(--scrim,rgba(13,31,27,.22));z-index:200;display:none;}
.cart-overlay.open{display:block;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);
  background:var(--ivory,#FFFCF6);z-index:201;
  box-shadow:-12px 0 40px rgba(18,46,40,.14);
  transform:translateX(100%);transition:transform .22s ease-out;
  display:flex;flex-direction:column;
  font-family:Outfit,system-ui,sans-serif;
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border,#E7E0D2);
}
.cart-drawer-head h3{margin:0;color:var(--forest,#1C433A);font-size:18px;font-family:Fraunces,Georgia,serif;}
.cart-close{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--forest,#1C433A);line-height:1;min-width:44px;min-height:44px;}
.cart-lines{flex:1;overflow:auto;padding:12px 18px;}
.cart-empty{color:var(--text-muted,#4E635C);font-size:14px;padding:24px 4px;}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:12px 0;border-bottom:1px solid var(--border,#E7E0D2);}
.cart-line-name{font-weight:700;font-size:13.5px;color:var(--forest,#1C433A);}
.cart-line-price{font-size:12.5px;color:var(--text-muted,#4E635C);margin-top:3px;}
.cart-line-actions{display:flex;align-items:center;gap:8px;}
.cart-qty{display:inline-flex;align-items:center;gap:6px;}
.cart-qty button{width:36px;height:36px;min-width:36px;border:1.5px solid var(--border,#E7E0D2);background:#fff;border-radius:10px;cursor:pointer;font-weight:700;}
.cart-qty span{min-width:18px;text-align:center;font-weight:700;font-size:13px;}
.cart-remove{border:0;background:transparent;color:#c0392b;font-weight:700;font-size:12px;cursor:pointer;}
.cart-foot{padding:16px 18px;border-top:1px solid var(--border,#E7E0D2);display:flex;flex-direction:column;gap:10px;}
.cart-total{display:flex;justify-content:space-between;font-weight:800;color:var(--forest,#1C433A);margin:0;}
.cart-buy{
  width:100%;border:0;border-radius:999px;min-height:48px;padding:12px;
  font-weight:700;background:var(--forest,#1C433A);color:#fff;cursor:pointer;
  font-family:Outfit,system-ui,sans-serif;font-size:14px;
}
.cart-buy:disabled{opacity:.45;cursor:not-allowed;}
.cart-continue{
  width:100%;border:1.5px solid var(--ivory-line,#E7E0D2);border-radius:999px;min-height:44px;padding:10px;
  font-weight:600;background:transparent;color:var(--forest,#1C433A);cursor:pointer;
  font-family:Outfit,system-ui,sans-serif;font-size:13.5px;
}
.cart-continue:hover{background:var(--mint,#E7F3EE);border-color:var(--mint-line,#C5D9D1);}
@media (prefers-reduced-motion:reduce){
  .cart-drawer{transition:none!important;}
}
@media (max-width:640px){
  .d24-chrome-header .d24-chrome-brand span{display:none;}
}

/* —— Home only: transparent header over hero video → solid on scroll (t1971u) —— */
body.d24-home .header{
  position:fixed;left:0;right:0;top:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s,color .3s;
}
body.d24-home .header.is-solid{
  background:rgba(255,252,246,.88);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--ivory-line,#E7E0D2);
}
/* Ivory chrome when transparent over video — keep lupa|Cuenta|Carrito chrome (not mock) */
body.d24-home .header:not(.is-solid) .brand,
body.d24-home .header:not(.is-solid) .brand-name{
  color:var(--ivory,#FFFCF6);
}
body.d24-home .header:not(.is-solid) .brand-logo-svg > rect:first-child{fill:#FFFCF6;}
body.d24-home .header:not(.is-solid) .brand-logo-svg > circle{fill:#1C433A;}
body.d24-home .header:not(.is-solid) .brand-logo-svg > text{fill:#FFFCF6;}
body.d24-home .header:not(.is-solid) .search-toggle{
  background:rgba(255,252,246,.12);
  border-color:rgba(255,252,246,.28);
  color:var(--ivory,#FFFCF6);
}
body.d24-home .header:not(.is-solid) .search-toggle:hover{
  background:rgba(255,252,246,.2);
  border-color:rgba(255,252,246,.4);
}
body.d24-home .header:not(.is-solid) .icon-btn{
  background:transparent;
  border-color:rgba(255,252,246,.28);
  color:var(--ivory,#FFFCF6);
}
body.d24-home .header:not(.is-solid) .icon-btn:hover{
  background:rgba(255,252,246,.1);
  border-color:rgba(255,252,246,.4);
}
body.d24-home .header:not(.is-solid) .icon-btn.cart{
  background:rgba(255,252,246,.12);
  border-color:rgba(255,252,246,.28);
  color:var(--ivory,#FFFCF6);
}
body.d24-home .header:not(.is-solid) .cart-count{
  background:var(--ivory,#FFFCF6);
  color:var(--forest,#1C433A);
}
body.d24-home .header.is-solid .brand,
body.d24-home .header.is-solid .brand-name{color:var(--forest-ink,#0D1F1B);}
body.d24-home .header.is-solid .brand-logo-svg > rect:first-child{fill:#1C433A;}
body.d24-home .header.is-solid .brand-logo-svg > circle{fill:#E7F3EE;}
body.d24-home .header.is-solid .brand-logo-svg > text{fill:#1C433A;}