/* Shop landing page — Shaylor */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --oat-50:  #faf6ef;
  --oat-100: #f3ece0;
  --oat-200: #e8dcc7;
  --oat-300: #d4c2a3;
  --oat-400: #a89378;
  --ink-900: #2a2520;
  --ink-700: #4a4138;
  --ink-500: #6b5d52;
  --olive-300: #d6e2c1;
  --olive-700: #7a8b5e;
  --olive-800: #5d6b46;
  --serif: 'Fraunces', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Collapse Divi structural padding around our shortcode ───────────────── */
body.woocommerce-shop .et_pb_section:has(.shaylor-shop-wrap),
body.woocommerce-shop .et_pb_row:has(.shaylor-shop-wrap),
body.woocommerce-shop .et_pb_column:has(.shaylor-shop-wrap) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.shaylor-shop-wrap,
.shaylor-shop-wrap * { box-sizing: border-box; }
.shaylor-shop-wrap {
  font-family: var(--serif);
  background: var(--oat-50);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sl-header {
  background: linear-gradient(180deg, var(--oat-100) 0%, var(--oat-50) 100%);
  padding: 72px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sl-header::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--olive-300);
  opacity: .25;
  filter: blur(80px);
  top: -120px; right: 8%;
  pointer-events: none;
}
.sl-header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.sl-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive-700);
  margin-bottom: 18px;
}
.sl-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  margin: 0 0 24px;
}
.sl-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--olive-700);
}
.sl-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-500);
  font-style: italic;
  margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.sl-main {
  padding: 56px 0 96px;
}
.sl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.sl-card {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  aspect-ratio: 4 / 3;
  background: var(--ink-900);
}

/* Image */
.sl-card-media {
  position: absolute;
  inset: 0;
}
.sl-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sl-card:hover .sl-card-media img { transform: scale(1.06); }

/* Gradient overlay */
.sl-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(42, 37, 32, 0.35) 55%,
    rgba(42, 37, 32, 0.82) 100%
  );
  transition: opacity 0.4s ease;
}
.sl-card:hover .sl-card-media::after { opacity: 0.9; }

/* Placeholder (no image) */
.sl-card--no-img .sl-card-media {
  background: linear-gradient(135deg, var(--oat-200) 0%, var(--olive-300) 100%);
}
.sl-card--no-img .sl-card-media::after {
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(42, 37, 32, 0.55) 100%
  );
}

/* Card body — text over gradient */
.sl-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 36px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(4px);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sl-card:hover .sl-card-body { transform: translateY(0); }

.sl-card-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.6);
  display: block;
}
.sl-card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
.sl-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 246, 239, 0.72);
  font-style: italic;
  margin: 4px 0 0;
  max-width: 38ch;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.05s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
}
.sl-card:hover .sl-card-desc { opacity: 1; transform: translateY(0); }

.sl-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-300);
  margin-top: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.1s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s,
              gap 0.25s ease;
}
.sl-card:hover .sl-card-cta { opacity: 1; transform: translateY(0); }
.sl-card:hover .sl-card-cta:hover { gap: 12px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .shaylor-shop-wrap { overflow-x: hidden; }
  .sl-title { font-size: 56px; }
  .sl-grid { padding: 0 32px; gap: 16px; }
  .sl-card-name { font-size: 28px; }
  .sl-card-body { padding: 24px 28px; }
}

@media (max-width: 860px) {
  .sl-header { padding: 48px 0 44px; }
  .sl-title { font-size: 42px; }
  .sl-sub { font-size: 15px; }
  .sl-main { padding: 40px 0 64px; }
  .sl-grid { padding: 0 20px; gap: 14px; }
  .sl-card-name { font-size: 24px; }
  /* Always show desc and cta on touch devices */
  .sl-card-desc { opacity: 1; transform: none; }
  .sl-card-cta  { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .sl-header { padding: 36px 0 36px; }
  .sl-title { font-size: 34px; }
  .sl-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 12px;
  }
  .sl-card { aspect-ratio: 3 / 2; }
  .sl-main { padding: 32px 0 56px; }
}