/* SHETECK template styles: front-page.php */
/* ============================================================
   PAGE-LEVEL — HOMEPAGE
   ============================================================ */

/* LEFT VERTICAL STRIP */
.left-strip {
  position: absolute;
  left: clamp(8px, 1.5vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  z-index: 6;
  font-family: var(--display);
}
.left-strip .new-badge {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  padding: 7px 11px;
  background: var(--terra); color: var(--paper);
  transform: rotate(-90deg);
  white-space: nowrap;
  margin-bottom: 64px;
}
.left-strip .season {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px; font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.left-strip .season small {
  display: block;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 8px;
  font-size: 10.5px;
}

/* HERO STAGE */
.stage { position: relative; padding: 32px 0 56px; min-height: 620px; isolation: isolate; }
.stage-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
}

.photo-col { position: relative; min-height: 600px; }
.sky-bg {
  position: absolute;
  left: 4%; top: 20px;
  width: 78%; height: 65%;
  background: var(--sky);
  z-index: 1;
}
.floor-line {
  position: absolute;
  left: 8%; bottom: 86px;
  width: 70%; height: 14px;
  background: var(--butter);
  z-index: 2;
}
.model-slot {
  position: absolute;
  left: 8%; top: 0;
  width: 70%; height: 96%;
  z-index: 4;
}
image-slot.model { width: 100%; height: 100%; background: transparent; border-radius: 0; }

.leaf.l1 { top: -30px; left: -10px; width: 280px; height: 280px; rotate: -22deg; z-index: 3; animation: float-a 7s ease-in-out infinite; }
.leaf.l2 { top: 40px; right: 12%; width: 220px; height: 320px; rotate: 18deg; z-index: 6; animation: float-b 9s ease-in-out infinite; }
.leaf.l3 { bottom: 90px; left: -30px; width: 200px; height: 280px; rotate: -10deg; z-index: 7; animation: float-c 8s ease-in-out infinite; }
.leaf.l4 { bottom: 110px; right: 24%; width: 140px; height: 200px; rotate: 28deg; z-index: 5; animation: float-d 7.5s ease-in-out infinite; }
.leaf.l5 { top: 12%; left: 38%; width: 80px; height: 100px; rotate: 140deg; z-index: 7; }

.content-col {
  position: relative;
  padding: 40px 60px 40px 0;
  display: flex; flex-direction: column; gap: 32px;
}
.date-stamp {
  font-family: var(--display);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 12px;
}
.date-stamp::before { content: ""; width: 28px; height: 1px; background: var(--ink-3); }
.date-stamp b { color: var(--ink); font-weight: 700; margin-right: 2px; }

h1.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 7.5vw, 100px);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 0;
}
h1.hero-title .dot { color: var(--accent); }

.carousel-nav { display: flex; gap: 10px; margin-top: -4px; }
.car-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}
.car-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.car-btn.dim { opacity: .55; }
.car-btn svg { width: 14px; height: 14px; }

.product-card {
  position: relative;
  background: var(--butter);
  padding: 24px 32px 26px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
  max-width: 440px;
}
.product-card .pc-image {
  background: var(--paper);
  aspect-ratio: 4/5;
  position: relative;
}
.product-card .pc-image image-slot { width: 100%; height: 100%; background: transparent; }
.product-card .pc-info { display: flex; flex-direction: column; gap: 4px; }
.product-card .pc-name { font-family: var(--display); font-size: 14px; font-weight: 500; margin: 0; }
.product-card .pc-price { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; margin: 4px 0 10px; }

.fall-edit {
  position: absolute;
  left: -82px; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  user-select: none;
  pointer-events: none;
}

.right-edge {
  position: absolute;
  right: clamp(8px, 1.5vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  z-index: 6;
}
.right-edge .share-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.right-edge .divider { width: 1px; height: 32px; background: var(--line); }
.right-edge .social-list { display: flex; flex-direction: column; gap: 12px; }
.right-edge .social-list a {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}
.right-edge .social-list a:hover { color: var(--accent); transform: scale(1.18); }
.right-edge .social-list svg { width: 14px; height: 14px; }

.bottom-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.bottom-bar .counter b { color: var(--ink); font-weight: 700; margin-right: 2px; }
.bottom-bar .progress {
  flex: 0 0 240px;
  height: 1px;
  background: var(--line);
  position: relative;
}
.bottom-bar .progress span {
  position: absolute; left: 0; top: -1px; bottom: -1px;
  width: 25%;
  background: var(--ink);
  transition: width 540ms var(--ease);
}
.bottom-bar .tags { display: flex; gap: 18px; flex-wrap: wrap; }
.bottom-bar .tag::before { content: "·"; margin-right: 18px; }
.bottom-bar .tag:first-child::before { display: none; }

/* ============================================================
   CATEGORY SECTION
   ============================================================ */
.section { padding: 100px 0; position: relative; }
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.04em;
}
.section-head .num .dot { color: var(--accent); }
.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}
.section-head h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.section-head .desc {
  max-width: 32ch;
  font-size: 14px;
  color: var(--ink-2);
}

.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cat {
  position: relative;
  aspect-ratio: 3/4;
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
  isolation: isolate;
}
.cat:hover { transform: translateY(-6px); }
.cat .cat-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
  transition: transform 1.4s var(--ease);
}
.cat:hover .cat-img { transform: scale(1.08); }
.cat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,19,15,.55));
  z-index: 1;
}
.cat > * { position: relative; z-index: 2; }
.cat .cat-head { display: flex; justify-content: space-between; align-items: start; }
.cat .cat-num {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  padding: 5px 10px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
}
.cat .cat-count {
  font-family: var(--display);
  font-size: 11px;
  color: var(--paper);
  opacity: .85;
}
.cat .cat-foot { display: flex; justify-content: space-between; align-items: end; color: var(--paper); }
.cat h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.cat .cat-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--terra);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: transform var(--dur) var(--ease-spring);
}
.cat:hover .cat-arrow { transform: translate(4px, -4px) rotate(-8deg); }
.cat .cat-arrow svg { width: 14px; height: 14px; }

/* CATEGORY VARIANTS — color cards */
.cat-color { color: var(--ink); }
.cat-color::after { display: none; }
.cat-color .cat-foot { color: var(--ink); }
.cat-color .cat-img { display: none; }
.cat-color.sky    { background: var(--sky); }
.cat-color.butter { background: var(--butter); }
.cat-color.rose   { background: var(--rose); }
.cat-color .leaf {
  width: 140px; height: 180px;
  rotate: -20deg;
  bottom: 14px; right: -20px;
  z-index: 0;
}

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 18px;
}
.pcard { position: relative; }
.pcard-media {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--paper-2);
  overflow: hidden;
}
.pcard-media .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.2s var(--ease);
}
.pcard:hover .pcard-media .img { transform: scale(1.05); }
.pcard-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em;
  background: var(--ink); color: var(--paper);
  padding: 5px 9px;
  z-index: 2;
}
.pcard-tag.hot { background: var(--terra); }
.pcard-tag.new { background: var(--butter); color: var(--ink); }

.pcard-fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: color var(--dur) var(--ease);
}
.pcard-fav:hover { color: var(--accent); }
.pcard-fav.is-fav { color: var(--accent); }
.pcard-fav.is-fav svg { fill: currentColor; }
.pcard-fav svg { width: 13px; height: 13px; }

.pcard-quick {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 11px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 3;
}
.pcard:hover .pcard-quick { opacity: 1; transform: translateY(0); }
.pcard-quick:hover { background: var(--terra); }
.pcard-quick svg { width: 11px; height: 11px; }

.pcard-info {
  display: flex; justify-content: space-between; align-items: start;
  gap: 14px;
  margin-top: 14px;
}
.pcard-cat {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.pcard-name {
  font-family: var(--display);
  font-size: 16px; font-weight: 500;
  letter-spacing: -.005em;
  margin: 0;
}
.pcard-price {
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
.pcard-price s { color: var(--ink-3); margin-right: 6px; font-weight: 400; }

/* ============================================================
   EDITORIAL / MAGAZINE TEASER
   ============================================================ */
.editorial {
  position: relative;
  padding: 96px 0;
  background: var(--paper-2);
}
.ed-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.ed-text { position: relative; }
.ed-text .kicker { margin-bottom: 24px; }
.ed-text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  max-width: 14ch;
}
.ed-text h2 i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
}
.ed-text p {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 44ch;
  line-height: 1.65;
  margin: 0 0 32px;
}
.ed-meta {
  display: flex; gap: 24px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.ed-meta b { color: var(--ink); font-weight: 700; margin-right: 4px; }

.ed-img {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}
.ed-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ed-img .ed-badge {
  position: absolute;
  top: 24px; left: 24px;
  background: var(--butter);
  padding: 12px 16px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ed-img .ed-badge b { color: var(--accent); margin-right: 4px; }
.ed-img .ed-circle {
  position: absolute;
  bottom: 24px; right: 24px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  line-height: 1.4;
  animation: spin 22s linear infinite;
}
.ed-circle svg { width: 90%; height: 90%; }
@keyframes spin { to { rotate: 360deg; } }

/* ============================================================
   QUICK SHOP STRIP — colored chips
   ============================================================ */
.strip {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: center;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip .chip-big {
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 13px; font-weight: 500;
  letter-spacing: .04em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.strip .chip-big.sky    { background: var(--sky); }
.strip .chip-big.butter { background: var(--butter); }
.strip .chip-big.rose   { background: var(--rose); }
.strip .chip-big.ink    { background: var(--ink); color: var(--paper); }
.strip .chip-big.outline { border: 1.5px solid var(--ink); }
.strip .chip-big:hover { background: var(--terra); color: var(--paper); border-color: var(--terra); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .stage-grid { grid-template-columns: 1fr; gap: 24px; }
  .photo-col { min-height: 520px; }
  .content-col { padding: 0; }
  .fall-edit, .left-strip, .right-edge { display: none; }
  .ed-grid { grid-template-columns: 1fr; gap: 36px; }
  .categories { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .leaf.l1 { width: 180px; height: 180px; top: -10px; }
  .leaf.l2 { width: 140px; height: 200px; right: 4%; top: 30px; }
  .leaf.l3 { width: 130px; height: 180px; left: -20px; bottom: 60px; }
  .leaf.l4 { width: 90px; height: 130px; right: 12%; bottom: 80px; }
  .leaf.l5 { display: none; }
  h1.hero-title { font-size: 56px; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .categories { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .editorial { padding: 64px 0; }
}
.sheteck-dynamic-hero .stage-grid {
	align-items: stretch;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
	min-height: 720px;
}

.sheteck-dynamic-hero .photo-col {
	min-height: 620px;
	overflow: hidden;
	position: relative;
}

.sheteck-hero-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sheteck-hero-placeholder {
	background: #e7e8e3;
	height: 100%;
	min-height: inherit;
	position: relative;
	width: 100%;
}

.sheteck-hero-placeholder::before {
	border: 1px solid rgba(20, 19, 15, .32);
	content: "";
	inset: 14%;
	position: absolute;
}

.sheteck-hero-placeholder::after {
	background: var(--terra);
	content: "";
	height: 12px;
	left: 37%;
	position: absolute;
	top: calc(50% - 6px);
	width: 26%;
}

.sheteck-dynamic-hero .content-col {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 7vw, 120px);
}

.sheteck-featured-product {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 36px;
	max-width: 520px;
	width: 100%;
}

.pc-kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.sheteck-product-section,
.sheteck-journal-feature {
	padding: 100px 0;
}

.sheteck-product-grid {
	display: grid;
	gap: 32px 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sheteck-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sheteck-product-card .pcard-product-link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.sheteck-product-card .pcard-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
}

.sheteck-product-card .pcard-media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
	width: 100%;
}

.sheteck-product-card:hover .pcard-media img {
	transform: scale(1.025);
}

.pcard-actions {
	margin-top: 12px;
}

.pcard-actions .button {
	display: inline-flex;
	justify-content: center;
	width: 100%;
}

.sheteck-view-all {
	margin-top: 48px;
}

.journal-feature-grid {
	align-items: center;
	display: grid;
	gap: clamp(36px, 7vw, 100px);
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
}

.journal-feature-image img {
	display: block;
	height: auto;
	width: 100%;
}

.journal-feature-copy h2 {
	font-size: clamp(38px, 5vw, 72px);
	letter-spacing: 0;
	line-height: 1;
}

@media (max-width: 900px) {
	.sheteck-dynamic-hero .stage-grid,
	.journal-feature-grid {
		grid-template-columns: 1fr;
	}

	.sheteck-dynamic-hero .photo-col {
		min-height: 58vh;
	}

	.sheteck-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sheteck-dynamic-hero .content-col {
		padding: 44px 20px 64px;
	}

	.sheteck-product-grid {
		grid-template-columns: 1fr;
	}
}