/* SurfPeptides chrome overrides — thin layer that bridges the Nutreko
 * home-3 theme CSS to the SurfPeptides brand voice without forking any
 * of the upstream assets/*.css files. Loaded LAST in the chrome bundle
 * so any selector here wins over the theme defaults.
 *
 * Why a separate file: every theme override that isn't a token belongs
 * here — wordmark styling, announcement-bar background, footer accent
 * stripe — keeping tokens.css purely declarative and assets/*.css
 * upstream-pristine.
 *
 * Brief §2 design intent: coastal at golden hour. Sand background,
 * deep-ocean text, ocean-blue navigation, sun-coral CTAs.
 */

/* ---- Wordmark (header + footer) --------------------------------- */
.surfpeptides .surfpeptides-wordmark {
  font-family: var(--hd-font-family);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 1.5rem;
  color: #1A2A3A;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.surfpeptides .surfpeptides-wordmark__accent {
  color: #0E5378;
  font-weight: 700;
}

.surfpeptides .header__logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
}

.surfpeptides .header__logo {
  margin: 0;
  flex: 0 0 auto !important;
  min-width: max-content;
}

/* ---- Header layout (header-3: centered logo, hamburger left, icons right) */
.surfpeptides .header.header-3 {
  background: #F4ECDC;
  border-bottom: 1px solid #D4C8AC;
}

.surfpeptides .header_wrapper {
  padding: 18px 24px;
}

.surfpeptides .header_wrapper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.surfpeptides .header__icon-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.surfpeptides .header__icon-wrapper {
  background: transparent;
  border: 0;
  color: #1A2A3A;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.surfpeptides .header__icon-wrapper:hover {
  color: #0E5378;
}

.surfpeptides .header__linklist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.surfpeptides .header__linklist-item {
  list-style: none;
}

.surfpeptides .header__linklist-link {
  color: #1A2A3A;
  font-family: var(--hd-font-family);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 0;
  position: relative;
  transition: color 160ms ease;
}

.surfpeptides .header__linklist-link:hover {
  color: #0E5378;
  text-decoration: none;
}

.surfpeptides .header__secondary-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.surfpeptides .surfpeptides-cart-button {
  background: transparent;
  border: 1px solid #D4C8AC;
  color: #1A2A3A;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--hd-font-family);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.surfpeptides .surfpeptides-cart-button:hover {
  background: #F8F4ED;
  border-color: #0E5378;
  color: #0E5378;
}

.surfpeptides .header__ap-cartcount {
  background: #FF8255;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.05em 0.5em;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
}

/* The header-bottom row is hidden in this MVP (no vertical menu yet) */
.surfpeptides .header-bottom {
  display: none;
}

/* ---- Announcement bar ------------------------------------------- *
 * Brief §2.1: small upper strip. Coral-on-ocean wouldn't read as
 * coastal so we run ocean-blue background with sand-cream text — the
 * inverse of the body and the natural color of late-afternoon sky. */
.surfpeptides .surfpeptides-announcementbar {
  background: #0E5378;
  color: #F4ECDC;
  border-bottom: 1px solid #D4C8AC;
}

.surfpeptides .ap-announcementbar__message {
  color: #F4ECDC;
  font-family: var(--hd-font-family);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0;
  justify-content: center;
}

/* ---- Brand footer (non-compliance) ------------------------------ */
.surfpeptides .footer {
  background: #E8DCC0;
  color: #1A2A3A;
  border-top: 1px solid #D4C8AC;
  padding: 64px 0 32px;
}

.surfpeptides .footer__item-title {
  color: #1A2A3A;
  font-family: var(--hd-font-family);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.surfpeptides .footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.surfpeptides .footer__list li {
  margin-bottom: 8px;
}

.surfpeptides .footer__list a {
  color: #1A2A3A;
  text-decoration: none;
  font-size: 14px;
}

.surfpeptides .footer__list a:hover {
  color: #0E5378;
  text-decoration: none;
}

.surfpeptides .surfpeptides-footer-brand .surfpeptides-wordmark {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.surfpeptides .surfpeptides-footer-brand__pitch {
  color: #5A6B7A;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  max-width: 320px;
}

.surfpeptides .surfpeptides-footer-mailto {
  margin-top: 14px;
  font-size: 14px;
}

.surfpeptides .surfpeptides-footer-mailto a {
  color: #FF8255;
  text-decoration: none;
}

.surfpeptides .surfpeptides-footer-mailto a:hover {
  color: #0E5378;
}

/* ---- Coral CTA buttons ------------------------------------------ *
 * Brief §2.3 says buttons are "filled coral on sand, GT America 500".
 * The Nutreko theme applies its own .button styles via component CSS
 * so we override here once. */
.surfpeptides .button.button--primary,
.surfpeptides .button--primary {
  background: #FF8255;
  color: #FFFFFF;
  border: 1px solid #FF8255;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background 160ms ease, border-color 160ms ease;
}

.surfpeptides .button.button--primary:hover,
.surfpeptides .button--primary:hover {
  background: #0E5378;
  color: #FFFFFF;
  border-color: #0E5378;
}

.surfpeptides .button.button--outline,
.surfpeptides .button--outline {
  background: transparent;
  color: #0E5378;
  border: 1px solid #0E5378;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.surfpeptides .button.button--outline:hover,
.surfpeptides .button--outline:hover {
  background: #0E5378;
  color: #FFFFFF;
}

/* ---- Bootstrap-grid shim ---------------------------------------- *
 * The theme references Bootstrap grid classes (col-xl-*, col-md-*).
 * bootstrap.min.css is loaded; tighten footer rows so columns don't
 * hug each other on wide screens. */
.surfpeptides .footer__item-list.row {
  gap: 16px 0;
}

@media (max-width: 991px) {
  .surfpeptides .header__inline-wrapper {
    display: none;
  }
  .surfpeptides .header_wrapper {
    padding: 12px 16px;
  }
}