/*
 * Salesio universal template — sections.css
 *
 * One block per section type. Every block is scoped under the
 * section's `.sx-{type}` class so they cannot bleed into each other
 * regardless of order in site.json. Themes never override this file —
 * they override the `--sx-*` tokens in base.css and the visual
 * change propagates.
 */

/* ─ HERO SPLIT — full-bleed image + glass panel ───────────────── */
/*
 * Editorial template hero: photograph spans the entire hero section
 * (full viewport width, ~640px tall on desktop) and the text floats
 * on top inside a frosted-glass panel. The panel sits on the LEFT
 * by default (where editorial photos typically leave "copy space"),
 * with subject of the image on the RIGHT. Setting `image_side: "left"`
 * in the section props moves the panel to the RIGHT side.
 *
 * The panel uses backdrop-filter for the frosted effect; we ship a
 * solid white fallback at >85% opacity so the text stays legible on
 * browsers without backdrop-filter (older Firefox, anything pre-2022).
 *
 * Subject focus: `object-position: 30% center` shows the LEFT third
 * of the photo prominently, so the subject (model, product) reads
 * even when the panel takes 40% of the visible width.
 */
.sx-hero-split {
  position: relative;
  overflow: hidden;
  background: var(--sx-color-bg-alt);
  /* Hero size: tall enough to feel cinematic, capped so it never
     dwarfs the rest of the page on huge screens. */
  min-height: 560px;
  height: clamp(560px, 72vh, 760px);
}
.sx-hero-split__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shift the visible focus to the LEFT third of the wide editorial
     photo so the subject is what the eye lands on first. The panel
     covers the right side of the photo, which is usually negative
     space designed for copy. */
  object-position: 30% center;
  z-index: 0;
}
.sx-hero-split__overlay {
  position: absolute;
  inset: 0;
  /* Very subtle dark wash on the side where the panel sits, so the
     glass panel reads even over busy photos. The gradient is biased
     toward the panel side. */
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 50%);
  z-index: 1;
  pointer-events: none;
}
.sx-hero-split__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  /* Side padding matches the rest of the page container. */
  padding-top: 32px;
  padding-bottom: 32px;
}
.sx-hero-split__panel {
  width: 100%;
  max-width: 560px;
  padding: 40px 32px;
  border-radius: var(--sx-radius-lg);
  /* Frosted-glass effect. Fallback: 92% opaque white for browsers
     without backdrop-filter support. */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .sx-hero-split__panel { background: rgba(255, 255, 255, 0.78); }
}
@media (min-width: 720px) {
  .sx-hero-split__panel { padding: 56px 48px; }
}
@media (min-width: 900px) {
  .sx-hero-split__panel { max-width: 520px; }
}
.sx-hero-split__title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 20px;
  color: var(--sx-color-ink);
  letter-spacing: -0.01em;
}
.sx-hero-split__title em { font-style: italic; color: var(--sx-color-primary); font-weight: 700; }
.sx-hero-split__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin-bottom: 28px;
  max-width: 440px;
}
.sx-hero-split__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* When the panel should sit on the RIGHT side (image subject on the
   left of the photo), we flip both the panel alignment AND the
   image's object-position so the eye-focus stays on the visible side. */
.sx-hero-split--panel-right .sx-hero-split__container { justify-content: flex-end; }
.sx-hero-split--panel-right .sx-hero-split__bg { object-position: 70% center; }
.sx-hero-split--panel-right .sx-hero-split__overlay {
  background: linear-gradient(to left, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 50%);
}

/* ─ ACHIEVEMENT BAR ───────────────────────────────────────────── */
.sx-achievement {
  padding: 48px 0;
  border-bottom: 1px solid var(--sx-color-border);
}
.sx-achievement__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
  text-align: center;
}
@media (min-width: 720px) {
  .sx-achievement__grid { grid-template-columns: repeat(4, 1fr); }
}
.sx-achievement__val {
  font-family: var(--sx-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--sx-color-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.sx-achievement__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
}

/* ─ SERVICES VISUAL ───────────────────────────────────────────── */
.sx-services-visual { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-services-visual__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 720px) {
  .sx-services-visual__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-services-visual__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sx-color-surface);
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sx-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow-elevated);
}
.sx-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}
.sx-product-card__img {
  aspect-ratio: 1 / 1;
  background: var(--sx-color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sx-product-card__img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.sx-product-card:hover .sx-product-card__img img { transform: scale(1.05); }
.sx-product-card__body { padding: 20px; text-align: center; }
.sx-product-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
  margin-bottom: 6px;
}
.sx-product-card__title {
  font-family: var(--sx-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sx-color-ink);
  margin: 0 0 10px;
}
.sx-product-card__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--sx-color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
}
.sx-product-card__price--old {
  font-size: 14px;
  font-weight: 500;
  color: var(--sx-color-ink-soft);
  text-decoration: line-through;
}
.sx-product-card__price--sale { color: var(--sx-color-primary); }
.sx-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.sx-product-card.is-out { opacity: 0.55; }
.sx-product-card.is-out .sx-product-card__img img { filter: grayscale(0.6); }
.sx-badge--muted { background: var(--sx-color-ink-soft); }
.sx-badge--sale { background: var(--sx-color-primary); font-weight: 800; }

/* Add-to-cart icon button — sits top-right of the image, visible on
   hover for desktop and always-visible on mobile (touch can't hover). */
.sx-product-card__cart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--sx-color-border);
  color: var(--sx-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  box-shadow: var(--sx-shadow-card);
}
.sx-product-card__cart svg { width: 18px; height: 18px; }
.sx-product-card:hover .sx-product-card__cart {
  opacity: 1;
  transform: translateY(0);
}
.sx-product-card__cart:hover {
  background: var(--sx-color-primary);
  color: #fff;
  border-color: var(--sx-color-primary);
  transform: scale(1.05);
}
.sx-product-card__cart:active { transform: scale(0.95); }
@media (hover: none) {
  /* Touch devices have no hover — show the cart button always so the
     thumbs can hit it. */
  .sx-product-card__cart { opacity: 1; transform: none; }
}

/* Star rating row */
.sx-product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.sx-product-card__rating .sx-stars { font-size: 13px; }
.sx-product-card__reviews { color: var(--sx-color-ink-soft); font-size: 11px; }

/* Low-stock urgency message */
.sx-product-card__stock {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sx-color-primary);
  letter-spacing: 0.02em;
}

/* Add-to-cart pulse animation when fired — runtime adds .is-added
   class briefly after click. */
@keyframes sx-cart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); background: var(--sx-color-primary); color: #fff; }
  100% { transform: scale(1); }
}
.sx-product-card__cart.is-added { animation: sx-cart-pop 0.5s ease; }

/* ─ ABOUT ─────────────────────────────────────────────────────── */
.sx-about { padding: var(--sx-section-y) 0; }
.sx-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .sx-about__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.sx-about__img img {
  width: 100%;
  border-radius: var(--sx-radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sx-about__paragraphs { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.sx-about__paragraphs p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sx-color-ink-soft);
}
.sx-about--image-right .sx-about__img { order: 2; }

/* ─ MISSION VALUES ────────────────────────────────────────────── */
.sx-values { padding: var(--sx-section-y) 0; background: var(--sx-color-bg-alt); }
.sx-values__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}
@media (min-width: 600px) { .sx-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .sx-values__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-values__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-value-card {
  background: var(--sx-color-surface);
  padding: 32px 24px;
  border-radius: var(--sx-radius-lg);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sx-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow-card);
}
.sx-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--sx-color-primary) 15%, transparent);
  color: var(--sx-color-primary);
  border-radius: var(--sx-radius-pill);
  margin-bottom: 20px;
}
.sx-value-card__icon svg { width: 26px; height: 26px; }
.sx-value-card h3 { font-size: 18px; margin-bottom: 8px; font-family: var(--sx-font-body); }
.sx-value-card p { font-size: 14px; color: var(--sx-color-ink-soft); line-height: 1.6; }

/* ─ LOGOS STRIP (brands) ──────────────────────────────────────── */
.sx-logos { padding: 64px 0; }
.sx-logos__head { text-align: center; margin-bottom: 40px; }
.sx-logos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 720px) { .sx-logos__grid { grid-template-columns: repeat(6, 1fr); } }
.sx-logos__grid img {
  max-height: 64px;
  width: 100%;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.sx-logos__grid img:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.05);
}

/* ─ TESTIMONIALS ──────────────────────────────────────────────── */
.sx-testimonials { padding: var(--sx-section-y) 0; }
.sx-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) { .sx-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.sx-test-card {
  background: var(--sx-color-surface);
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.sx-test-card__quote {
  font-family: var(--sx-font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--sx-color-ink);
  margin: 12px 0 24px;
  flex: 1;
}
.sx-test-card__quote::before { content: '"'; font-size: 40px; color: var(--sx-color-primary); line-height: 0.5; vertical-align: -10px; margin-right: 4px; }
.sx-test-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--sx-color-border);
}
.sx-test-card__author img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}
.sx-test-card__name { font-weight: 700; font-family: var(--sx-font-body); font-size: 14px; }
.sx-test-card__role { font-size: 12px; color: var(--sx-color-ink-soft); }

/* ─ SUBSCRIPTION BOX ──────────────────────────────────────────── */
.sx-subscription {
  padding: var(--sx-section-y) 0;
  background: linear-gradient(135deg, var(--sx-color-ink) 0%, #2a2a2a 100%);
  color: #fff;
}
.sx-subscription__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) { .sx-subscription__inner { grid-template-columns: 1fr 1fr; } }
.sx-subscription .sx-eyebrow { color: var(--sx-color-primary); }
.sx-subscription h2 { color: #fff; font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
.sx-subscription p.sx-subscription__lead { color: rgba(255,255,255,0.75); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.sx-subscription__perks { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.sx-subscription__perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
}
.sx-subscription__perks li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e85d5d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 4px;
}
.sx-subscription__pricecard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sx-radius-xl);
  padding: 48px 32px;
  text-align: center;
}
.sx-subscription__price {
  font-family: var(--sx-font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.sx-subscription__pricesub { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 32px; }

/* ─ GIFT CARDS ────────────────────────────────────────────────── */
.sx-gift { padding: var(--sx-section-y) 0; }
.sx-gift__inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.sx-gift__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 32px 0;
}
.sx-gift__amount {
  padding: 14px 28px;
  border: 2px solid var(--sx-color-border);
  border-radius: var(--sx-radius-md);
  font-family: var(--sx-font-display);
  font-size: 22px;
  font-weight: 700;
  background: var(--sx-color-surface);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.sx-gift__amount:hover {
  border-color: var(--sx-color-primary);
  color: var(--sx-color-primary);
  transform: translateY(-2px);
}
.sx-gift__amount.is-selected {
  border-color: var(--sx-color-primary);
  background: var(--sx-color-primary);
  color: #fff;
}

/* ─ CONTACT INFO ──────────────────────────────────────────────── */
.sx-contact {
  padding: var(--sx-section-y) 0;
  background: var(--sx-color-bg-alt);
}
.sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .sx-contact__inner { grid-template-columns: 1fr 1fr; gap: 56px; } }
.sx-contact__items { display: flex; flex-direction: column; gap: 28px; }
.sx-contact__item { display: flex; align-items: flex-start; gap: 16px; }
.sx-contact__item-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sx-radius-md);
  background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
  color: var(--sx-color-primary);
}
.sx-contact__item-icon svg { width: 20px; height: 20px; }
.sx-contact__item h4 {
  font-family: var(--sx-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
  margin-bottom: 4px;
}
.sx-contact__item p { font-size: 15px; color: var(--sx-color-ink); margin: 0; }
.sx-contact__item ul { list-style: none; padding: 0; margin: 0; }
.sx-contact__hours li {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px;
  padding: 4px 0;
}
.sx-contact__hours li.is-closed { color: var(--sx-color-ink-soft); }
.sx-contact__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  background: var(--sx-color-surface);
}
.sx-contact__map iframe { width: 100%; height: 100%; border: 0; }

/* ─ Generic fallback (any unknown type renders an empty card) ─── */
.sx-unknown {
  padding: 24px;
  margin: 16px auto;
  max-width: 720px;
  border: 1px dashed var(--sx-color-border);
  border-radius: var(--sx-radius-lg);
  background: var(--sx-color-bg-alt);
  color: var(--sx-color-ink-soft);
  font-size: 13px;
  text-align: center;
}
.sx-unknown code {
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}