/* Premium home: editorial masthead, real product photography, and benefits. */
.premium-home {
  --berry: #800d48;
  --berry-dark: #5b0a35;
  --coffee: #351b10;
  --cream: #fff4e1;
  --card: #fff8ec;
  --paper: #f1e5d0;
  --muted: #675449;
  --space-page: clamp(20px, 6vw, 112px);
  --font-editorial: Georgia, "Times New Roman", serif;
  --space-section: clamp(32px, 5vw, 72px);
  --shadow-soft: 0 4px 14px rgb(53 27 16 / 8%);
  background: var(--card);
}

.premium-home .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.premium-home :is(a, button, input):focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 4px;
}

.premium-home .topbar a:focus-visible {
  outline-color: white;
}

.premium-home .skip-link { z-index: 50; }
.premium-home .site-header {
  position: relative;
  background: var(--card);
  backdrop-filter: none;
}

.premium-home .topbar {
  padding: 4px var(--space-page);
  min-height: 36px;
  align-items: center;
  background: linear-gradient(100deg, var(--berry), var(--berry-dark));
  font-family: var(--font-editorial);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.premium-home .topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: #fff;
}

.premium-home .topbar .icon { width: 20px; height: 20px; }
.premium-home .topbar > span { display: inline-flex; align-items: center; gap: 10px; }
.premium-home .nav-row {
  grid-template-columns: 180px minmax(180px, 1fr) auto;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
  max-width: 1920px;
  margin-inline: auto;
  padding: 16px var(--space-page) 0;
}

.premium-home .brand { width: clamp(144px, 13vw, 190px); }
.premium-home .brand img { height: auto; }
.premium-home .search { min-width: 0; }
.premium-home .search > .icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.premium-home .search input {
  min-height: 48px;
  padding-left: 52px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-editorial);
  font-size: 1.1rem;
}

.premium-home :is(.cart-button, .menu-button) {
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--berry-dark);
  font-size: 0.9rem;
  font-weight: 600;
}

.premium-home .cart-button {
  background: var(--berry-dark);
  color: white;
  padding-inline: 20px;
  font-family: var(--font-editorial);
  font-size: 1.1rem;
}
.premium-home .cart-button > .icon { display: none; }
.premium-home .cart-button strong {
  background: var(--card);
  color: var(--berry-dark);
  font-size: 0.8rem;
}

.premium-home .nav-links {
  justify-content: center;
  gap: clamp(24px, 3.5vw, 56px);
  padding: 0 var(--space-page) 4px;
}

.premium-home .nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-editorial);
  font-size: 1.1rem;
  font-weight: 600;
}

.premium-home :is(.nav-links a, .topbar a):hover { text-decoration: underline; text-underline-offset: 5px; }
.premium-home .cart-button:hover { background: var(--berry); }
.premium-home .menu-button:hover { background: var(--paper); }
.premium-home :is(.button, .cart-button, .menu-button):active { transform: translateY(1px); }

/* A single editorial composition, with the photograph behind a cream fade. */
.premium-home .hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  isolation: isolate;
  max-width: 1920px;
  min-height: clamp(490px, 34.3vw, 650px);
  margin-inline: auto;
  padding: 0;
  background: var(--cream);
}

.premium-home .hero-copy {
  position: relative;
  z-index: 2;
  width: 55%;
  padding: clamp(48px, 4.3vw, 80px) 0 clamp(48px, 4.3vw, 80px) var(--space-page);
}

.premium-home .hero .eyebrow {
  margin-bottom: 16px;
  color: var(--berry);
  font: 700 clamp(0.75rem, 1.05vw, 1.125rem)/1.5 var(--font-editorial);
  letter-spacing: 0.15em;
}

.premium-home .hero h1 {
  max-width: none;
  margin-bottom: 16px;
  font: 700 clamp(3.5rem, 5.8vw, 6.25rem)/0.98 var(--font-editorial);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.premium-home .hero h1 > span { display: block; }
.premium-home .hero .hero-description {
  max-width: 39ch;
  margin-bottom: 0;
  color: #513929;
  font: 400 clamp(1.1rem, 1.4vw, 1.5rem)/1.35 var(--font-editorial);
}

.premium-home .hero .hero-description::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--berry);
}

.premium-home .hero-actions { gap: 16px; margin-top: 32px; }
.premium-home .hero .button {
  gap: 10px;
  min-height: 58px;
  padding: 14px 24px;
  border: 1px solid var(--berry);
  font: 700 clamp(1rem, 1.25vw, 1.3rem)/1.3 var(--font-editorial);
}

.premium-home .hero .button.primary {
  background: var(--berry);
  box-shadow: 0 10px 22px rgb(128 13 72 / 14%);
}
.premium-home .hero .button.primary:hover { background: var(--berry-dark); }
.premium-home .hero .button.secondary { background: rgb(255 248 236 / 85%); color: var(--berry); }
.premium-home .hero .button.secondary:hover { background: var(--paper); }
.premium-home .hero .button > .icon { width: 25px; height: 25px; }
.premium-home .hero .button > .action-arrow { width: 18px; height: 18px; margin-left: 4px; }
.premium-home .hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 32%;
  margin: 0;
  min-width: 0;
}
.premium-home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream), rgb(255 244 225 / 90%) 10%, rgb(255 244 225 / 30%) 30%, transparent 45%);
  pointer-events: none;
}
.premium-home .hero-visual picture { display: block; height: 100%; }
.premium-home .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.premium-home .benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1920px;
  margin-inline: auto;
  padding: 30px var(--space-page);
  border-block: 1px solid var(--line);
  background: var(--card);
}

.premium-home .benefit { display: flex; align-items: flex-start; gap: 24px; padding: 4px 32px; }
.premium-home .benefit:first-child { padding-left: 0; }
.premium-home .benefit:last-child { padding-right: 0; }
.premium-home .benefit + .benefit { border-left: 1px solid var(--line); }
.premium-home .benefit .icon { width: 48px; height: 48px; color: var(--berry); }
.premium-home .benefit h2 { margin-bottom: 6px; max-width: 13ch; font: 700 clamp(1rem, 1.3vw, 1.35rem)/1.15 var(--font-editorial); }
.premium-home .benefit p { margin: 0; color: var(--muted); font: 400 clamp(0.9rem, 1.05vw, 1.125rem)/1.4 var(--font-editorial); }
.premium-home .quick-categories { position: static; flex-wrap: wrap; background: var(--cream); }
.premium-home .category-links { padding-inline: var(--space-page); }
.premium-home main [id] { scroll-margin-top: 24px; }

@media (min-width: 981px) and (max-width: 1200px) {
  .premium-home .hero .button { padding-inline: 16px; }
  .premium-home .benefit { padding-inline: 16px; gap: 10px; }
}

@media (max-width: 980px) {
  .premium-home .nav-row { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
  .premium-home .menu-button { display: inline-flex; align-items: center; gap: 8px; }
  .premium-home .cart-button > .icon { display: block; }
  .premium-home .nav-links { gap: 0; padding-block: 8px; border-top: 1px solid var(--line); }
  .premium-home .hero { grid-template-columns: 1fr; min-height: 0; }
  .premium-home .hero-copy { width: 100%; padding: 40px var(--space-page) 32px; }
  .premium-home .hero h1 { max-width: 15ch; font-size: clamp(3rem, 7.5vw, 4.5rem); }
  .premium-home .hero .hero-description { max-width: 52ch; }
  .premium-home .hero-visual { position: relative; inset: auto; }
  .premium-home .hero-visual::after { background: linear-gradient(180deg, var(--cream), transparent 24%); }
  .premium-home .hero-visual img { min-height: 0; height: auto; max-height: 520px; aspect-ratio: 4 / 3; object-position: center; }
  .premium-home .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .premium-home .benefit:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  .premium-home .topbar { display: flex; justify-content: center; min-height: 32px; font-size: 0.7rem; }
  .premium-home .topbar a { display: none; }
  .premium-home .nav-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding-block: 12px; }
  .premium-home .brand { width: 140px; }
  .premium-home .search { grid-column: 1 / -1; order: 2; }
  .premium-home .menu-button { padding-inline: 8px; }
  .premium-home .menu-button .icon { width: 18px; }
  .premium-home .cart-button { padding-inline: 12px; gap: 6px; }
  .premium-home .cart-button > .icon { display: block; }
  .premium-home .hero-copy { padding-top: 32px; }
  .premium-home .hero .eyebrow { margin-bottom: 18px; font-size: 0.65rem; }
  .premium-home .hero h1 { max-width: 12ch; font-size: clamp(2.75rem, 10vw, 3.8rem); margin-bottom: 20px; }
  .premium-home .hero-actions { flex-direction: column; gap: 10px; margin-top: 24px; }
  .premium-home .hero .button { width: 100%; }
  .premium-home .benefits { padding: 28px var(--space-page); gap: 24px 16px; }
  .premium-home .benefit { flex-direction: column; padding: 0; gap: 10px; }
  .premium-home .benefit + .benefit { border: 0; }
  .premium-home .benefit h2 { font-size: 1.1rem; }
  .premium-home .benefit .icon { width: 38px; height: 38px; }
  .premium-home .floating-whatsapp { left: auto; min-width: 108px; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}