/** Shopify CDN: Minification failed

Line 29:0 All "@import" rules must come first

**/
/* ================================================
   PHARMAPENHA — Custom CSS para Dawn Theme
   Cole este arquivo em: Assets > pharmapenha.css
   E adicione no layout/theme.liquid antes de </head>:
   {{ 'pharmapenha.css' | asset_url | stylesheet_tag }}
   ================================================ */

/* ---------- 1. VARIÁVEIS DE MARCA ---------- */
:root {
  --pp-dark:    #1E4D1E;
  --pp-mid:     #2D6A2D;
  --pp-green:   #4A8F3F;
  --pp-lime:    #7DC242;
  --pp-light:   #E8F5E0;
  --pp-pale:    #F4FAF0;
  --pp-border:  #D4EBBD;
  --pp-text:    #1A1A1A;
  --pp-muted:   #6B7280;
  --pp-radius:  10px;
  --pp-radius-lg: 14px;
}

/* ---------- 2. TIPOGRAFIA ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

body,
.shopify-section,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

h1, h2, h3,
.section-heading,
.hero__heading,
.banner__heading {
  font-family: 'Instrument Serif', serif !important;
  letter-spacing: -0.3px;
}

/* ---------- 3. CORES GLOBAIS ---------- */
:root {
  --color-foreground: 26, 77, 30;
  --color-background: 255, 255, 255;
  --color-button:     30, 77, 30;
  --color-button-text: 255, 255, 255;
  --color-base-accent-1: 125, 194, 66;
  --color-base-accent-2: 74, 143, 63;
  --gradient-base-accent-1: var(--pp-lime);
}

/* ---------- 4. ANNOUNCEMENT BAR ---------- */
.announcement-bar {
  background-color: var(--pp-dark) !important;
  color: #fff !important;
}

.announcement-bar__message,
.announcement-bar a {
  color: #fff !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.announcement-bar strong,
.announcement-bar span.highlight {
  color: var(--pp-lime) !important;
  font-weight: 700;
}

/* ---------- 5. HEADER ---------- */
.header {
  background-color: #fff !important;
  border-bottom: 1px solid var(--pp-border) !important;
  padding: 0 28px !important;
}

.header__heading-link .h2,
.header__heading a {
  font-family: 'Instrument Serif', serif !important;
  font-size: 22px !important;
  color: var(--pp-dark) !important;
}

/* Links de navegação */
.header__menu-item a,
.list-menu__item a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #444 !important;
  transition: color 0.15s;
}

.header__menu-item a:hover,
.list-menu__item a:hover {
  color: var(--pp-green) !important;
}

/* Botão carrinho no header */
.header__icon--cart .cart-count-bubble {
  background-color: var(--pp-lime) !important;
  color: var(--pp-dark) !important;
  font-weight: 700;
}

/* ---------- 6. BOTÕES ---------- */
.button,
.btn,
button[type="submit"],
.shopify-payment-button__button--unbranded {
  background-color: var(--pp-dark) !important;
  color: #fff !important;
  border-radius: var(--pp-radius) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  transition: background-color 0.2s, transform 0.1s;
}

.button:hover,
.btn:hover {
  background-color: var(--pp-green) !important;
  transform: translateY(-1px);
}

.button--secondary {
  background-color: transparent !important;
  color: var(--pp-dark) !important;
  border: 1.5px solid var(--pp-border) !important;
}

.button--secondary:hover {
  background-color: var(--pp-light) !important;
  border-color: var(--pp-green) !important;
}

/* Botão "Adicionar ao carrinho" */
.product-form__submit {
  background-color: var(--pp-dark) !important;
  font-size: 14px !important;
  padding: 14px 28px !important;
  border-radius: var(--pp-radius) !important;
}

.product-form__submit:hover {
  background-color: var(--pp-green) !important;
}

/* ---------- 7. CARDS DE PRODUTO ---------- */
.card-wrapper,
.card {
  border-radius: var(--pp-radius-lg) !important;
  overflow: hidden;
  border: 0.5px solid var(--pp-border) !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30, 77, 30, 0.08) !important;
}

.card__heading a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
}

.price__regular .price-item,
.price .price-item--regular {
  color: var(--pp-dark) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.price__sale .price-item--sale {
  color: var(--pp-green) !important;
  font-weight: 700 !important;
}

/* Badge de promoção */
.card__badge .badge,
.badge--sale,
.badge--on-sale {
  background-color: var(--pp-lime) !important;
  color: var(--pp-dark) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.3px;
}

/* ---------- 8. HERO / BANNER PRINCIPAL ---------- */
.banner,
.hero {
  border-radius: 0 !important;
}

.banner__heading,
.hero__heading {
  font-size: clamp(36px, 5vw, 52px) !important;
  line-height: 1.08 !important;
  color: #fff !important;
}

.banner__text,
.hero__text {
  color: rgba(255,255,255,0.75) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* ---------- 9. SECTION HEADINGS ---------- */
.collection__title,
.featured-collection__title,
.section-heading {
  font-family: 'Instrument Serif', serif !important;
  font-size: 28px !important;
  color: var(--pp-dark) !important;
  letter-spacing: -0.3px;
}

/* ---------- 10. BARRA DE CONFIANÇA (Trust Bar) ---------- */
/* Aplicado via snippet pp-trust-bar.liquid */
.pp-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 0.5px solid var(--pp-border);
  border-bottom: 0.5px solid var(--pp-border);
  background: #fff;
}

.pp-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-right: 0.5px solid var(--pp-border);
}

.pp-trust-item:last-child {
  border-right: none;
}

.pp-trust-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--pp-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pp-trust-icon svg {
  width: 18px;
  height: 18px;
}

.pp-trust-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pp-dark);
  line-height: 1.3;
}

.pp-trust-sub {
  font-size: 11px;
  color: var(--pp-muted);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .pp-trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .pp-trust-item:nth-child(2) {
    border-right: none;
  }
  .pp-trust-item:nth-child(3) {
    border-right: 0.5px solid var(--pp-border);
  }
}

@media (max-width: 480px) {
  .pp-trust-bar {
    grid-template-columns: 1fr;
  }
  .pp-trust-item {
    border-right: none;
    border-bottom: 0.5px solid var(--pp-border);
  }
}

/* ---------- 11. BARRA DE CATEGORIAS ---------- */
.pp-nav-cats {
  display: flex;
  gap: 0;
  padding: 0 28px;
  background: var(--pp-pale);
  border-bottom: 0.5px solid var(--pp-border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pp-nav-cats::-webkit-scrollbar {
  display: none;
}

.pp-nav-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pp-dark);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  cursor: pointer;
}

.pp-nav-cat:hover,
.pp-nav-cat.active {
  border-bottom-color: var(--pp-lime);
  color: var(--pp-green);
}

/* ---------- 12. BANNER DE RECEITA ---------- */
.pp-recipe-banner {
  margin: 0 0 40px;
  background: var(--pp-light);
  border-radius: var(--pp-radius-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 0.5px solid var(--pp-border);
}

.pp-recipe-tag {
  display: inline-block;
  background: var(--pp-lime);
  color: var(--pp-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.pp-recipe-title {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  color: var(--pp-dark);
  margin-bottom: 6px;
  line-height: 1.2;
}

.pp-recipe-sub {
  font-size: 13px;
  color: var(--pp-green);
  line-height: 1.5;
}

.pp-recipe-pills {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pp-recipe-pill {
  background: #fff;
  border: 0.5px solid var(--pp-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--pp-dark);
}

.pp-recipe-cta {
  background-color: var(--pp-dark) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: var(--pp-radius) !important;
  border: none !important;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pp-recipe-cta:hover {
  background-color: var(--pp-green) !important;
}

@media (max-width: 768px) {
  .pp-recipe-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 13. HERO STATS ---------- */
.pp-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.pp-stat-num {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--pp-lime);
}

.pp-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* ---------- 14. EYEBROW BADGE ---------- */
.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(125, 194, 66, 0.18);
  color: var(--pp-lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

/* ---------- 15. FOOTER ---------- */
.footer {
  background-color: var(--pp-dark) !important;
}

.footer__heading,
.footer .h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pp-lime) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.footer a,
.footer__list-item a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}

.footer a:hover {
  color: #fff !important;
}

.footer__content-top {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.footer__content-bottom {
  color: rgba(255,255,255,0.35) !important;
  font-size: 11px !important;
}

/* ---------- 16. BREADCRUMB ---------- */
.breadcrumb a {
  color: var(--pp-green) !important;
  font-size: 12px;
}

/* ---------- 17. PAGINAÇÃO ---------- */
.pagination__item--current .pagination__button {
  background-color: var(--pp-dark) !important;
  color: #fff !important;
  border-radius: var(--pp-radius) !important;
}

/* ---------- 18. FORMULÁRIOS ---------- */
.field__input:focus,
.select__select:focus,
.customer .field input:focus {
  border-color: var(--pp-green) !important;
  box-shadow: 0 0 0 2px rgba(74, 143, 63, 0.15) !important;
  outline: none !important;
}

.field__label,
.customer label {
  color: var(--pp-muted) !important;
  font-size: 12px !important;
}

/* ---------- 19. REVIEWS / AVALIAÇÕES ---------- */
.rating .icon-star {
  color: var(--pp-lime) !important;
  fill: var(--pp-lime) !important;
}

/* ---------- 20. MOBILE ---------- */
@media (max-width: 990px) {
  .pp-nav-cats {
    padding: 0 16px;
  }
  .pp-hero-stats {
    gap: 16px;
  }
}

@media (max-width: 749px) {
  .banner__heading,
  .hero__heading {
    font-size: 32px !important;
  }
  .pp-hero-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ---------- 21. HEADER COMPACTO COM LOGO QUADRADA ---------- */

/* Header numa linha só, altura reduzida */
.header {
  min-height: 64px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Logo à esquerda */
.header__heading {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.header__heading-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Logo quadrada maior */
.header__heading-logo {
  max-width: 58px !important;
  max-height: 58px !important;
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

/* Texto ao lado da logo — oculta em telas menores, mostra só logo */
.header__heading-link .h2 {
  display: none !important;
}

/* Menu centralizado, tudo numa linha, sem wrap */
.header__menu {
  flex: 1 !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.header__inline-menu {
  flex-wrap: nowrap !important;
}

/* Itens do menu — fonte 11px, padding mínimo para caber tudo */
.header__menu-item > a,
.header__menu-item button {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 6px 7px !important;
  letter-spacing: 0 !important;
  color: #333 !important;
  white-space: nowrap !important;
}

.header__menu-item > a:hover,
.header__menu-item button:hover {
  color: #1E4D1E !important;
}

/* Seta do dropdown menor */
.header__menu-item button .icon-caret {
  width: 10px !important;
  height: 10px !important;
}

/* Dropdown mais compacto */
.list-menu--disclosure {
  border-radius: 8px !important;
  border: 0.5px solid #D4EBBD !important;
  box-shadow: 0 4px 16px rgba(30,77,30,0.1) !important;
  padding: 6px !important;
}

.list-menu__item a {
  font-size: 12px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
}

.list-menu__item a:hover {
  background: #F4FAF0 !important;
  color: #1E4D1E !important;
}

/* Ícones busca/conta/carrinho menores */
.header__icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Garante que a área de ícones não quebre */
.header__icons {
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}