@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --olea-carbon: #171512;
  --olea-cream: #f7f1e8;
  --olea-ivory: #fff9f2;
  --olea-olive: #6e7450;
  --olea-pink: #f283a5;
  --olea-oat: #e7cd92;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }

.olea-announcement {
  padding: 8px clamp(18px, 4vw, 64px);
  background: var(--olea-carbon);
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.olea-announcement p { margin: 0; font-size: 9px !important; font-weight: 600; }

.olea-header {
  min-height: 96px;
  padding: 13px clamp(20px, 4.5vw, 72px);
  border-bottom: 1px solid rgba(23, 21, 18, .14);
  background: var(--olea-cream);
  position: relative;
  z-index: 20;
}
.olea-logo { margin: 0; flex: 0 0 auto; }
.olea-logo img { width: 176px !important; height: auto; display: block; }
.olea-nav { font-size: 11px; font-weight: 600; letter-spacing: .075em; }
.olea-nav .wp-block-navigation__container { column-gap: clamp(20px, 2vw, 34px); row-gap: 10px; }
.olea-nav a { position: relative; padding-block: 12px; white-space: nowrap; }
.olea-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
}
.olea-nav a:hover::after,
.olea-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.olea-header-actions { gap: 12px; }
.olea-header-actions .wp-block-search { width: 40px; }
.olea-header-actions .wp-block-search__inside-wrapper { padding: 0; border: 0; }
.olea-header-actions .wp-block-search__input { display: none; }
.olea-header-actions .wp-block-search__button { margin: 0; padding: 8px; background: transparent; color: var(--olea-carbon); }

@media (min-width: 901px) {
  .olea-header > nav.olea-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .olea-header > .wp-block-woocommerce-customer-account { margin-left: auto; }
}

.olea-hero { position: relative; }
.olea-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(87, 22, 50, .57), rgba(87, 22, 50, .08) 47%, transparent 67%);
  z-index: 1;
  pointer-events: none;
}
.olea-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.olea-hero-copy { padding: clamp(64px, 9vw, 120px) clamp(22px, 4.5vw, 72px); }
.olea-hero-copy > * { max-width: 580px; margin-left: 0 !important; }
.olea-eyebrow { margin: 0 0 18px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.olea-hero h1 { margin: 0; line-height: .92; color: #fff; }
.olea-hero-lede { max-width: 500px !important; margin-top: 24px !important; font-size: clamp(14px, 1.2vw, 17px); color: #fff; }
.olea-hero .wp-block-buttons { margin-top: 30px; }
.olea-button .wp-block-button__link { padding: 17px 27px; border: 2px solid var(--olea-carbon); box-shadow: 5px 5px 0 var(--olea-carbon); }

.olea-marquee { min-height: 62px; padding: 16px 24px; border-block: 2px solid var(--olea-carbon); }
.olea-marquee p { margin: 0; font-size: clamp(13px, 1.7vw, 22px); font-weight: 600; letter-spacing: .045em; text-align: center; }

.olea-section { padding: clamp(88px, 10vw, 150px) clamp(22px, 4.5vw, 72px); }
.olea-section-heading { margin-bottom: 52px; }
.olea-section-heading h2 { max-width: 950px; margin: 0; }
.olea-section-heading > p:last-child { max-width: 590px; margin: 24px 0 0; }

.olea-ingredient-cards { gap: 18px; }
.olea-ingredient-card {
  min-height: 510px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 2px solid var(--olea-carbon);
  border-radius: 34px 34px 8px 34px;
  box-shadow: 6px 6px 0 var(--olea-carbon);
}
.olea-ingredient-card .olea-card-number { margin: 0 0 auto; font-size: 11px; font-weight: 700; }
.olea-ingredient-card h2 { margin: 80px 0 20px; font-size: clamp(42px, 4.8vw, 70px); line-height: .9; }
.olea-ingredient-card > p:not(.olea-card-number):not(.olea-card-meta) { font-size: 17px; }
.olea-card-meta { margin: 24px 0 0; font-size: 9px; font-weight: 700; letter-spacing: .08em; }

.olea-shop .products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; }
.olea-shop .products::before, .olea-shop .products::after { display: none !important; }
.olea-shop .products li.product { width: auto !important; margin: 0 !important; float: none !important; }
.olea-shop .products li.product img { aspect-ratio: 4 / 4.6; object-fit: cover; border: 2px solid var(--olea-carbon); border-radius: 30px 30px 8px 30px; box-shadow: 5px 5px 0 var(--olea-carbon); }
.olea-shop .woocommerce-loop-product__title { margin-top: 22px !important; font-size: 28px !important; text-transform: uppercase; }
.olea-shop .price { color: var(--olea-carbon) !important; font-weight: 600 !important; }
.olea-shop .button { width: 100%; margin-top: 14px !important; padding: 14px 18px !important; border-top: 1px solid rgba(23,21,18,.24); border-bottom: 1px solid rgba(23,21,18,.24); border-radius: 0 !important; background: transparent !important; color: var(--olea-carbon) !important; text-align: center; font-size: 10px !important; letter-spacing: .08em; }

.olea-universe { padding: clamp(70px, 8vw, 120px) clamp(22px, 4.5vw, 72px); }
.olea-universe .wp-block-columns { gap: clamp(42px, 7vw, 110px); }
.olea-universe h2 { margin: 0; }
.olea-universe .wp-block-column > p:not(.olea-eyebrow):not(.olea-universe-signoff) { max-width: 580px; margin-top: 28px; color: rgba(255,255,255,.82); font-size: 18px; }
.olea-universe-signoff { margin-top: 30px; font-weight: 600; letter-spacing: .05em; }
.olea-universe-image img { width: 100%; min-height: 620px; object-fit: cover; border-radius: 180px 180px 12px 12px; }

.olea-value-grid { margin-top: 70px; border-top: 1px solid rgba(255,255,255,.25); }
.olea-value-grid .wp-block-column { min-height: 280px; padding: 28px 34px 20px 0; border-right: 1px solid rgba(255,255,255,.25); }
.olea-value-grid .wp-block-column:last-child { border-right: 0; }
.olea-value-grid h3 { margin: 70px 0 16px; font-size: 28px; }
.olea-value-grid p { color: rgba(255,255,255,.72); font-size: 13px; }

.olea-footer { padding: 76px clamp(22px, 4.5vw, 72px) 28px; }
.olea-footer .wp-block-columns { gap: 44px; }
.olea-footer h3 { margin-top: 0; letter-spacing: .12em; }
.olea-footer p { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.9; }
.olea-copyright { margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); letter-spacing: .08em; text-transform: uppercase; }

.olea-content-shell { min-height: 60vh; padding: clamp(72px, 9vw, 130px) clamp(22px, 4.5vw, 72px); }
.olea-content-shell > .wp-block-post-title:first-child { margin-top: 0; }
.olea-not-found { display: grid; align-content: center; }
.olea-post-card { padding-bottom: 30px; }

.woocommerce div.product div.images img,
.woocommerce ul.products li.product img { border-radius: 24px 24px 6px 24px; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button { border-radius: 999px; }

@media (max-width: 900px) {
  .olea-header { min-height: 74px; }
  .olea-header > nav.wp-block-navigation { order: 3; }
  .olea-header > .wp-block-woocommerce-customer-account { display: none; }
  .olea-nav .wp-block-navigation__container { column-gap: 16px; }
  .olea-header-actions .wp-block-search { display: none; }
  .olea-hero { min-height: 700px !important; }
  .olea-hero::after { background: linear-gradient(0deg, rgba(87,22,50,.82), rgba(87,22,50,.1) 74%, transparent); }
  .olea-hero-copy { display: flex; min-height: 700px; flex-direction: column; justify-content: flex-end; }
  .olea-shop .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olea-universe-image img { min-height: 500px; }
}

@media (max-width: 600px) {
  .olea-announcement p { font-size: 7px !important; }
  .olea-header { padding-inline: 17px; }
  .olea-logo img { width: 126px !important; }
  .olea-hero, .olea-hero-copy { min-height: 650px !important; }
  .olea-hero-copy { padding-inline: 20px; }
  .olea-section { padding-inline: 18px; }
  .olea-ingredient-cards { gap: 28px; }
  .olea-ingredient-card { min-height: 430px; }
  .olea-shop .products { grid-template-columns: 1fr; }
  .olea-universe { padding-inline: 18px; }
  .olea-universe-image img { min-height: 420px; }
  .olea-value-grid .wp-block-column { min-height: auto; padding: 26px 0 38px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .olea-value-grid h3 { margin-top: 30px; }
  .olea-footer .wp-block-columns { gap: 28px; }
}