/**
 * SOCKAKI homepage composition — Moodboard 02 visual rebuild.
 *
 * Scope: front-page editorial/Elementor composition only.
 * Product mechanics and WooCommerce card anatomy remain owned by Woodmart/Woo.
 */

.home {
  background:
    radial-gradient(var(--sk-border) 1.5px, transparent 2px) 0 0 / 34px 34px,
    var(--sk-paper);
  color: var(--sk-text);
}

.home .main-page-wrapper {
  overflow-x: clip;
  padding-top: 0;
  background: transparent;
}

.home .content-layout-wrapper {
  padding-top: 0;
}

.sk-home-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 6.5rem);
}

.sk-home-section > .elementor-container,
.sk-home-section > .elementor-column-gap-default {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

.sk-home-section.hero {
  padding-block: clamp(.5rem, 1.4vw, 1rem) clamp(2.25rem, 5vw, 4.5rem);
}

.sk-home-section.categories {
  background: var(--sk-paper);
  padding-block-start: clamp(1rem, 3vw, 2.75rem);
}

.sk-home-section.new-arrivals,
.sk-home-section.sock-spotlight {
  background: var(--sk-surface);
}

.sk-home-section.mascot-promo {
  background: var(--sk-brand-aqua);
}

.sk-home-section.women-editorial {
  background: var(--sk-paper);
}

.sk-home-section.accessories {
  background:
    radial-gradient(var(--sk-pink-light) 1.5px, transparent 2px) 0 0 / 28px 28px,
    var(--sk-surface);
  color: var(--sk-brand-pink);
}

.sk-home-section.benefits,
.sk-home-section.store {
  background: var(--sk-paper);
}

.sk-home-section.newsletter {
  background: var(--sk-text);
}

.sk-home-section .elementor-widget:not(:last-child) {
  margin-bottom: var(--sk-space-6);
}

.sk-home,
.sk-home-shell {
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

.sk-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-bottom: var(--sk-space-4);
  padding: var(--sk-space-1) var(--sk-space-3);
  background: var(--sk-brand-pink);
  color: var(--sk-text);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-fw-bold);
  letter-spacing: .08em;
  line-height: var(--sk-lh-tight);
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.sk-btn.sk-btn--lg {
  min-height: 52px;
  padding-inline: var(--sk-space-6);
  border-color: var(--sk-text);
  border-radius: var(--sk-radius-sm);
  box-shadow: var(--sk-shadow-offset-pink);
  font-weight: var(--sk-fw-bold);
  letter-spacing: .02em;
}

.sk-btn.sk-btn--dark {
  background: var(--sk-text);
  color: var(--sk-text-inverse);
}

.sk-btn.sk-btn--outline {
  background: var(--sk-brand-white);
  color: var(--sk-text);
  box-shadow: var(--sk-shadow-offset-aqua);
}

.sk-btn.sk-btn--white {
  background: var(--sk-brand-white);
  color: var(--sk-text);
  border-color: var(--sk-text);
}

/* ═══════════════════════════════════════════════════════════════
   SK Hero — asymmetric paper/aqua editorial composition
   ════════════════════════════════════════════════════════════ */

.sk-el-hero {
  position: relative;
  min-height: clamp(35rem, 58vw, 45rem);
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-xl);
  background: var(--sk-paper);
  box-shadow: var(--sk-shadow-lg);
  isolation: isolate;
}

.sk-el-hero__paper,
.sk-el-hero__aqua {
  position: absolute;
  pointer-events: none;
  z-index: var(--sk-z-base);
}

.sk-el-hero__aqua {
  inset: clamp(1rem, 2vw, 1.75rem) auto clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
  width: min(63%, 52rem);
  background:
    linear-gradient(90deg, transparent 0 96%, var(--sk-paper) 96% 100%),
    var(--sk-brand-aqua);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-offset-black);
  transform: rotate(-1.1deg);
}

.sk-el-hero__paper {
  inset: clamp(3rem, 7vw, 5rem) clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem) auto;
  width: min(43%, 35rem);
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-brand-white);
  background-size: 38px 38px;
  color: var(--sk-border);
  border: var(--sk-border-width) solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow);
  transform: rotate(1.3deg);
}

.sk-el-hero__paper::before,
.sk-el-hero__paper::after {
  content: "";
  position: absolute;
  height: 2rem;
  width: clamp(7rem, 12vw, 10rem);
  background: var(--sk-brand-pink);
  border: var(--sk-border-width) solid var(--sk-text);
  opacity: .92;
}

.sk-el-hero__paper::before {
  top: -1rem;
  left: 12%;
  transform: rotate(-2deg);
}

.sk-el-hero__paper::after {
  right: 12%;
  bottom: -1rem;
  background: var(--sk-extended-purple);
  transform: rotate(2deg);
}

.sk-el-hero__content {
  position: relative;
  z-index: var(--sk-z-raised);
  width: min(48%, 32rem);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sk-el-hero__title {
  max-width: 8.25ch;
  margin: 0 0 var(--sk-space-8);
  color: var(--sk-text);
  font-family: var(--sk-font-display);
  font-size: clamp(3rem, 6.6vw, 6.7rem);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -.045em;
  line-height: .92;
}

.sk-el-hero__title .sk-underline::after {
  bottom: -.18em;
  height: .18em;
  transform: rotate(-1deg);
}

.sk-el-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-4);
}

/* 1) HERO DESKTOP — mascot ~30% larger, stronger overlap into paper/aqua */
.sk-el-hero__mascot {
  position: absolute;
  z-index: calc(var(--sk-z-raised) + 2);
  right: clamp(1.5rem, 5vw, 4rem);
  bottom: clamp(-4rem, -4vw, -2rem);
  width: clamp(22rem, 40vw, 38rem);
  height: auto;
  filter: drop-shadow(12px 16px 0 var(--sk-brand-white)) drop-shadow(0 18px 24px var(--sk-border-strong));
}

.sk-el-hero__memphis {
  position: absolute;
  inset: 0;
  z-index: calc(var(--sk-z-raised) + 1);
  pointer-events: none;
}

.sk-el-hero__decor {
  position: absolute;
  display: block;
}

.sk-el-hero__decor svg {
  display: block;
  width: 100%;
  height: auto;
}

.sk-el-hero__decor--squiggle {
  left: clamp(2.5rem, 4vw, 4.5rem);
  top: clamp(4rem, 7vw, 6rem);
  width: clamp(5rem, 8vw, 8rem);
  color: var(--sk-text);
}

.sk-el-hero__decor--zigzag {
  left: min(44%, 34rem);
  bottom: 20%;
  width: clamp(6rem, 10vw, 10rem);
  color: var(--sk-extended-purple);
  transform: rotate(-8deg);
}

.sk-el-hero__decor--triangle {
  right: 24%;
  top: 17%;
  transform: rotate(18deg);
}

.sk-el-hero__decor--circle {
  right: 43%;
  top: 5%;
  box-shadow: var(--sk-shadow);
}

.sk-el-hero__decor--cross {
  right: 28%;
  top: 42%;
  transform: rotate(10deg);
}

.sk-el-hero__decor--dots {
  right: -1rem;
  bottom: 12%;
  width: clamp(8rem, 18vw, 16rem);
  height: clamp(8rem, 18vw, 16rem);
  color: var(--sk-text);
  opacity: .22;
}

/* ═══════════════════════════════════════════════════════════════
   SK Category cards — one reusable component, three intensity levels
   ════════════════════════════════════════════════════════════ */

.sk-el-categories {
  position: relative;
  max-width: var(--sk-container-max);
  margin-inline: auto;
}

.sk-el-categories__heading,
.sk-el-sh__title {
  margin: 0 0 var(--sk-space-8);
  color: var(--sk-text);
  font-family: var(--sk-font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -.035em;
  line-height: var(--sk-lh-tight);
}

.sk-el-categories__grid {
  display: grid;
  grid-template-columns: 1.18fr .92fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}

.sk-el-categories__grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-el-categories__grid--count-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
  margin-inline: auto;
}

.sk-el-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(16rem, 22vw, 22rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-lg);
  color: var(--sk-text);
  text-decoration: none;
  box-shadow: var(--sk-shadow-offset-black);
  isolation: isolate;
  transition: transform var(--sk-transition-fast), box-shadow var(--sk-transition-fast);
}

.sk-el-cat:hover,
.sk-el-cat:focus-visible {
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 7px 7px 0 var(--sk-text);
  color: var(--sk-text);
}

.sk-el-cat__label {
  position: relative;
  z-index: var(--sk-z-raised);
  display: inline-flex;
  align-items: center;
  min-height: 3.3rem;
  padding: var(--sk-space-2) var(--sk-space-4);
  background: var(--sk-brand-white);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-sm);
  box-shadow: var(--sk-shadow-offset-pink);
  font-family: var(--sk-font-display);
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -.03em;
  line-height: .95;
}

/* Socks — highest personality */
.sk-el-cat--socks {
  min-height: clamp(18rem, 25vw, 25rem);
  background:
    linear-gradient(135deg, var(--sk-brand-aqua) 0 55%, var(--sk-brand-pink) 55% 100%);
  transform: rotate(-1.2deg);
}

.sk-el-cat--socks::before {
  content: "";
  position: absolute;
  inset: auto -8% -18% auto;
  width: 55%;
  aspect-ratio: 1;
  background: var(--sk-extended-yellow);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  z-index: var(--sk-z-base);
}

.sk-el-cat__burst {
  position: absolute;
  top: 12%;
  right: 14%;
  width: clamp(6rem, 10vw, 9rem);
  color: var(--sk-extended-yellow);
  z-index: var(--sk-z-raised);
  filter: drop-shadow(4px 4px 0 var(--sk-brand-white));
  transform: rotate(12deg);
}

.sk-el-cat__zigzag {
  position: absolute;
  left: 10%;
  top: 15%;
  width: clamp(6rem, 9vw, 9rem);
  color: var(--sk-text);
  transform: rotate(-8deg);
}

.sk-el-cat__dots {
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: 38%;
  height: 45%;
  color: var(--sk-text);
  opacity: .28;
}

/* Clothing — calm editorial, with restrained shared Memphis vocabulary */
.sk-el-cat--women {
  align-items: center;
  justify-content: center;
  min-height: clamp(16rem, 22vw, 21rem);
  background:
    linear-gradient(145deg, var(--sk-brand-white) 0 62%, var(--sk-pink-xlight) 62% 100%);
}

.sk-el-cat--women::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: var(--sk-border-width) solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  background: color-mix(in srgb, var(--sk-paper) 88%, transparent);
}

.sk-el-cat__grid-bg {
  position: absolute;
  inset: 1.5rem;
  color: var(--sk-border);
  opacity: .72;
}

.sk-el-cat__women-tape {
  position: absolute;
  top: 1.85rem;
  left: 50%;
  width: clamp(5rem, 8vw, 7rem);
  height: 1.35rem;
  background: var(--sk-brand-pink);
  transform: translateX(-50%) rotate(-2deg);
  z-index: var(--sk-z-raised);
}

.sk-el-cat__women-circle {
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  width: clamp(2.75rem, 4.5vw, 4rem);
  aspect-ratio: 1;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  background: var(--sk-extended-yellow);
  box-shadow: var(--sk-shadow-offset-aqua);
  z-index: var(--sk-z-raised);
}

.sk-el-cat__women-cross {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: var(--sk-z-raised);
}

.sk-el-cat__women-squiggle {
  position: absolute;
  left: 1.75rem;
  bottom: 2rem;
  width: clamp(4.5rem, 7vw, 6.5rem);
  color: var(--sk-extended-purple);
  transform: rotate(-5deg);
  z-index: var(--sk-z-raised);
}

.sk-el-cat__women-squiggle svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 6) ACCESSORIES — editorial framing clearly between Socks and Women */
.sk-el-cat--accessories {
  background:
    linear-gradient(135deg, var(--sk-extended-yellow) 0 49%, var(--sk-brand-aqua) 49% 100%);
  transform: rotate(.9deg);
}

.sk-el-cat--accessories::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: var(--sk-border-width) solid var(--sk-text);
  border-radius: var(--sk-radius-md);
  border-color: var(--sk-text);
  border-style: dashed;
  z-index: var(--sk-z-base);
}

.sk-el-cat--accessories::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  width: clamp(3.5rem, 6vw, 5.5rem);
  aspect-ratio: 1;
  background: var(--sk-extended-purple);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  box-shadow: var(--sk-shadow-offset-pink);
}

.sk-el-cat__dots-cover {
  position: absolute;
  inset: auto 0 0 auto;
  width: 50%;
  height: 60%;
  color: var(--sk-text);
  opacity: .18;
}

.sk-el-cat__tape {
  position: absolute;
  left: 14%;
  top: 18%;
  width: clamp(6rem, 9vw, 8.5rem);
  color: var(--sk-brand-pink);
  transform: rotate(-7deg);
}

/* ═══════════════════════════════════════════════════════════════
   SK Editorial panel widget
   ════════════════════════════════════════════════════════════ */

.sk-el-editorial {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(14rem, .78fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: clamp(22rem, 34vw, 32rem);
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-xl);
  box-shadow: var(--sk-shadow-offset-black);
  isolation: isolate;
}

.sk-el-editorial::before,
.sk-el-editorial::after {
  content: "";
  position: absolute;
  inset-block: 1rem;
  border-radius: var(--sk-radius-lg);
  pointer-events: none;
  z-index: var(--sk-z-base);
}

.sk-el-editorial::before {
  left: 1rem;
  width: 55%;
  background: var(--sk-paper);
  border: var(--sk-border-width) solid var(--sk-border);
}

.sk-el-editorial::after {
  right: 1rem;
  width: 42%;
  background: var(--sk-brand-aqua);
  transform: rotate(.8deg);
}

.sk-el-editorial--paper-aqua {
  background: var(--sk-brand-white);
}

.sk-el-editorial--paper-white {
  background: var(--sk-paper);
  box-shadow: var(--sk-shadow);
}

.sk-el-editorial--paper-white::before {
  background: var(--sk-brand-white);
  width: 60%;
}

.sk-el-editorial--paper-white::after {
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-paper);
  background-size: 34px 34px;
  color: var(--sk-border);
  width: 37%;
  border: var(--sk-border-width) solid var(--sk-border);
}

.sk-el-editorial--aqua-dark {
  background: var(--sk-brand-aqua);
}

.sk-el-editorial--aqua-dark::before {
  background: var(--sk-brand-aqua);
}

.sk-el-editorial--aqua-dark::after {
  background: var(--sk-text);
}

.sk-el-editorial--full-paper {
  background: var(--sk-paper);
}

.sk-el-editorial--full-paper::before {
  width: calc(100% - 2rem);
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-brand-white);
  background-size: 38px 38px;
  color: var(--sk-border);
}

.sk-el-editorial--full-paper::after {
  display: none;
}

.sk-el-editorial--full-aqua {
  background: var(--sk-brand-aqua);
}

.sk-el-editorial--full-aqua::before {
  width: calc(100% - 2rem);
  background: var(--sk-brand-aqua);
}

.sk-el-editorial--full-aqua::after {
  display: none;
}

.sk-el-editorial--full-dark {
  background: var(--sk-text);
  color: var(--sk-text-inverse);
}

.sk-el-editorial--full-dark::before {
  width: calc(100% - 2rem);
  background: var(--sk-text);
  border-color: var(--sk-brand-white);
}

.sk-el-editorial--full-dark::after {
  display: none;
}

.sk-el-editorial--dark-paper {
  background: var(--sk-text);
  color: var(--sk-text-inverse);
}

.sk-el-editorial--dark-paper::before {
  background: var(--sk-text);
  border-color: var(--sk-brand-white);
}

.sk-el-editorial--dark-paper::after {
  background: var(--sk-paper);
}

.sk-el-editorial__content {
  position: relative;
  z-index: var(--sk-z-raised);
  max-width: 34rem;
}

.sk-el-editorial__title {
  margin: 0 0 var(--sk-space-4);
  color: inherit;
  font-family: var(--sk-font-display);
  font-size: clamp(2.25rem, 4.7vw, 5rem);
  font-weight: var(--sk-fw-bold);
  letter-spacing: -.04em;
  line-height: .98;
}

.sk-el-editorial__copy {
  max-width: 36rem;
  margin: 0 0 var(--sk-space-6);
  color: inherit;
  font-size: clamp(1rem, .95rem + .45vw, 1.25rem);
  line-height: var(--sk-lh-snug);
}

.sk-el-editorial__mascot {
  position: relative;
  z-index: var(--sk-z-raised);
  justify-self: center;
  width: clamp(10rem, 23vw, 21rem);
  height: auto;
  filter: drop-shadow(8px 10px 0 var(--sk-brand-white)) drop-shadow(0 12px 18px var(--sk-border-strong));
}

.sk-el-editorial--paper-white .sk-el-editorial__mascot {
  opacity: .16;
  width: clamp(8rem, 14vw, 12rem);
}

.sk-el-editorial--full-dark .sk-el-editorial__mascot,
.sk-el-editorial--dark-paper .sk-el-editorial__mascot {
  filter: drop-shadow(8px 10px 0 var(--sk-brand-pink));
}

.sk-el-editorial__memphis {
  position: absolute;
  inset: 0;
  z-index: calc(var(--sk-z-raised) + 1);
  pointer-events: none;
}

.sk-el-editorial__corner-tl {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
}

.sk-el-editorial__corner-br {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  width: clamp(5rem, 9vw, 9rem);
  color: var(--sk-brand-pink);
  transform: rotate(-6deg);
}

.sk-el-editorial__corner-br svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 4) BRAND/MASCOT EDITORIAL — stronger aqua panel */
.sk-home-section.mascot-promo .sk-el-editorial {
  grid-template-columns: minmax(0, .7fr) minmax(18rem, 1fr);
  min-height: clamp(26rem, 38vw, 36rem);
  background: var(--sk-brand-white);
}

.sk-home-section.mascot-promo .sk-el-editorial::before {
  width: 52%;
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-paper);
  background-size: 38px 38px;
  color: var(--sk-border);
}

.sk-home-section.mascot-promo .sk-el-editorial::after {
  width: 46%;
  background: var(--sk-brand-aqua);
}

.sk-home-section.mascot-promo .sk-el-editorial__content {
  padding-left: clamp(1rem, 2vw, 2rem);
}

.sk-home-section.mascot-promo .sk-el-editorial__content::after {
  content: "";
  position: absolute;
  right: clamp(-4rem, -6vw, -2rem);
  bottom: clamp(-3rem, -4vw, -1.5rem);
  width: clamp(5rem, 9vw, 8rem);
  aspect-ratio: 1;
  background: var(--sk-extended-yellow);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  box-shadow: var(--sk-shadow-offset-pink);
  z-index: var(--sk-z-below);
}

.sk-home-section.mascot-promo .sk-el-editorial__mascot {
  align-self: end;
  width: clamp(18rem, 32vw, 30rem);
  margin-block-end: clamp(-2rem, -2.5vw, -.75rem);
  transform: rotate(-1.5deg);
}

.sk-home-section.mascot-promo .sk-el-editorial__corner-br {
  right: 5rem;
  bottom: 3rem;
  color: var(--sk-brand-pink);
  width: clamp(6rem, 10vw, 10rem);
}

/* ═══════════════════════════════════════════════════════════════
   Section headers and product framing
   ════════════════════════════════════════════════════════════ */

.sk-el-sh {
  max-width: var(--sk-container-max);
  margin-inline: auto;
}

.sk-el-sh--center {
  text-align: center;
}

/* 3) PAGE RHYTHM — each product section gets a distinct framing treatment */
.sk-product-frame {
  position: relative;
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-xl);
  background: var(--sk-paper);
  box-shadow: var(--sk-shadow);
}

.sk-product-frame::before {
  content: "";
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  top: -1rem;
  width: clamp(8rem, 18vw, 15rem);
  height: 2rem;
  background: var(--sk-extended-purple);
  border: var(--sk-border-width) solid var(--sk-text);
  transform: rotate(-2deg);
}

/* New Arrivals — paper frame with pink tape accent */
.sk-home-section.new-arrivals .sk-product-frame {
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-brand-white);
  background-size: 44px 44px;
  color: var(--sk-border);
  border-color: var(--sk-text);
}

.sk-home-section.new-arrivals .sk-product-frame::before {
  background: var(--sk-brand-pink);
  top: -1.25rem;
}

/* Sock Spotlight — aqua dot field */
.sk-home-section.sock-spotlight .sk-product-frame {
  background:
    radial-gradient(var(--sk-text) 1.5px, transparent 2px) 0 0 / 26px 26px,
    var(--sk-brand-aqua);
  color: var(--sk-text);
  box-shadow: var(--sk-shadow-offset-black);
}

.sk-home-section.sock-spotlight .sk-product-frame::before {
  background: var(--sk-extended-yellow);
  left: auto;
  right: clamp(2rem, 5vw, 5rem);
  top: clamp(-1.5rem, -2vw, -1rem);
  transform: rotate(2deg);
}

/* Accessories — white with yellow accent */
.sk-home-section.accessories .sk-product-frame {
  background: var(--sk-brand-white);
  color: var(--sk-text);
}

.sk-home-section.accessories .sk-product-frame::before {
  background: var(--sk-extended-yellow);
}

.sk-product-frame .woocommerce,
.sk-product-frame .products {
  position: relative;
  z-index: var(--sk-z-raised);
}

.home .sk-product-frame .products.elements-grid.wd-loop-builder-off {
  --wd-col: 4;
  --wd-col-lg: 4;
  --wd-col-md: 3;
  --wd-col-sm: 2;
}

/* ═══════════════════════════════════════════════════════════════
   5) CLOTHING — calm editorial photography-frame surface
   ════════════════════════════════════════════════════════════ */

.sk-el-editorial--paper-white::after {
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    var(--sk-paper);
  background-size: 34px 34px;
  color: var(--sk-border);
  width: 37%;
  border: var(--sk-border-width) solid var(--sk-border);
}

.sk-home-section.women-editorial .sk-el-editorial {
  overflow: hidden;
  background: var(--sk-paper);
}

.sk-home-section.women-editorial .sk-el-editorial::before {
  background:
    radial-gradient(circle at 14% 18%, var(--sk-pink-xlight) 0 3.75rem, transparent 3.8rem),
    linear-gradient(135deg, transparent 0 74%, var(--sk-aqua-xlight) 74% 100%),
    var(--sk-brand-white);
}

.sk-home-section.women-editorial .sk-el-editorial::after {
  background:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(145deg, var(--sk-paper) 0 72%, var(--sk-pink-xlight) 72% 100%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  color: var(--sk-border);
  border: var(--sk-border-width) solid var(--sk-border-strong);
  box-shadow: inset 0 0 0 var(--sk-space-3) var(--sk-brand-white);
  transform: rotate(.45deg);
}

.sk-home-section.women-editorial .sk-el-editorial__content {
  padding: clamp(1rem, 2vw, 2rem);
}

.sk-home-section.women-editorial .sk-el-editorial__content::before {
  content: "";
  position: absolute;
  top: clamp(-2.4rem, -4vw, -1.5rem);
  left: clamp(4rem, 9vw, 8rem);
  width: clamp(5.5rem, 9vw, 8rem);
  height: 1.4rem;
  background: var(--sk-brand-aqua);
  border: var(--sk-border-width) solid var(--sk-text);
  transform: rotate(-3deg);
  z-index: var(--sk-z-below);
}

.sk-home-section.women-editorial .sk-el-editorial__content::after {
  content: "";
  position: absolute;
  right: clamp(-1.5rem, -3vw, -.5rem);
  bottom: clamp(-3rem, -5vw, -2rem);
  width: clamp(4rem, 7vw, 6rem);
  aspect-ratio: 1;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  background: var(--sk-extended-yellow);
  box-shadow: var(--sk-shadow-offset-pink);
  z-index: var(--sk-z-below);
}

.sk-home-section.women-editorial .sk-el-editorial__title,
.sk-home-section.women-editorial .sk-kicker,
.sk-home-section.women-editorial .sk-btn {
  position: relative;
  z-index: var(--sk-z-raised);
}

/* ═══════════════════════════════════════════════════════════════
   Benefits / Store / Newsletter custom homepage shells
   ════════════════════════════════════════════════════════════ */

.sk-benefits-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sk-space-4);
  max-width: var(--sk-container-max);
  margin-inline: auto;
}

.sk-benefit {
  position: relative;
  min-width: 0;
  min-height: 8.5rem;
  padding: var(--sk-space-5);
  overflow: hidden;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-lg);
  background: var(--sk-brand-white);
  box-shadow: var(--sk-shadow);
}

.sk-benefit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--sk-space-2);
  background: var(--sk-extended-purple);
}

.sk-benefit--free_shipping {
  background: var(--sk-extended-yellow);
}

.sk-benefit--returns,
.sk-benefit--pickup {
  background: var(--sk-brand-aqua);
}

.sk-benefit--shipping {
  background: var(--sk-brand-pink);
}

.sk-benefit--free_shipping::before { background: var(--sk-brand-pink); }
.sk-benefit--returns::before { background: var(--sk-extended-purple); }
.sk-benefit--shipping::before { background: var(--sk-extended-yellow); }
.sk-benefit--pickup::before { background: var(--sk-brand-white); }

.sk-benefit strong {
  display: block;
  margin-bottom: var(--sk-space-2);
  color: var(--sk-text);
  font-family: var(--sk-font-display);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: var(--sk-fw-bold);
  line-height: var(--sk-lh-tight);
  overflow-wrap: anywhere;
}

.sk-benefit span {
  display: block;
  color: var(--sk-text);
  font-size: var(--sk-fs-sm);
  line-height: var(--sk-lh-snug);
}

.sk-store-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .72fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-xl);
  background: var(--sk-brand-aqua);
  box-shadow: var(--sk-shadow-offset-black);
}

.sk-store-panel::before {
  content: "";
  position: absolute;
  inset: 1rem 1rem 1rem auto;
  width: 42%;
  background: var(--sk-paper);
  border: var(--sk-border-width) solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  transform: rotate(1deg);
}

.sk-store-panel::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 18%;
  width: clamp(4rem, 9vw, 8rem);
  aspect-ratio: 1;
  background: var(--sk-extended-yellow);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-full);
  box-shadow: var(--sk-shadow-offset-pink);
}

.sk-store-panel__content,
.sk-store-panel__cta {
  position: relative;
  z-index: var(--sk-z-raised);
}

.sk-store-panel h2 {
  margin: 0 0 var(--sk-space-4);
  font-family: var(--sk-font-display);
  font-size: clamp(2.25rem, 4.6vw, 5rem);
  line-height: .95;
}

.sk-store-panel address {
  margin: 0 0 var(--sk-space-6);
  color: var(--sk-text);
  font-style: normal;
  font-size: clamp(1.1rem, 1vw + .9rem, 1.4rem);
  line-height: var(--sk-lh-snug);
}

/* 7) NEWSLETTER — configuration-ready, truthful disabled state */
.sk-newsletter-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(12rem, .55fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: var(--sk-border-width-md) solid var(--sk-brand-white);
  border-radius: var(--sk-radius-xl);
  background: var(--sk-text);
  color: var(--sk-text-inverse);
  box-shadow: var(--sk-shadow-offset-pink);
}

.sk-newsletter-shell::before {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 36%;
  background: var(--sk-paper);
  border-radius: var(--sk-radius-lg);
  transform: rotate(-1deg);
}

.sk-newsletter-shell__content,
.sk-newsletter-shell__form {
  position: relative;
  z-index: var(--sk-z-raised);
}

.sk-newsletter-shell h2 {
  margin: 0 0 var(--sk-space-4);
  color: var(--sk-text-inverse);
  font-family: var(--sk-font-display);
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  line-height: .95;
}

.sk-newsletter-shell p {
  max-width: 34rem;
  margin: 0;
  color: var(--sk-text-inverse);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
}

.sk-newsletter-shell__form {
  display: grid;
  gap: var(--sk-space-3);
  padding: var(--sk-space-6);
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-lg);
  background: var(--sk-paper);
  box-shadow: var(--sk-shadow-offset-aqua);
}

.sk-newsletter-shell input,
.sk-newsletter-shell button {
  min-height: 48px;
  border: var(--sk-border-width-md) solid var(--sk-text);
  border-radius: var(--sk-radius-sm);
  font: inherit;
}

.sk-newsletter-shell input {
  padding-inline: var(--sk-space-4);
  background: var(--sk-brand-white);
  color: var(--sk-text);
}

.sk-newsletter-shell input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.sk-newsletter-shell button {
  background: var(--sk-brand-pink);
  color: var(--sk-text);
  font-weight: var(--sk-fw-bold);
  opacity: .55;
  cursor: not-allowed;
}

.sk-newsletter-shell__form-note {
  display: block;
  margin-top: var(--sk-space-1);
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-sm);
  font-style: italic;
}

/* Legacy Phase 11 fallback classes */
.sk-home-hero {
  background: transparent;
}

.sk-home .sk-hero {
  max-width: var(--sk-container-max);
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile composition — separate simplified hero, reduced decoration
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .home .sk-product-frame .products.elements-grid.wd-loop-builder-off {
    --wd-col: 3;
  }

  .sk-el-hero {
    min-height: 34rem;
  }

  .sk-el-hero__content {
    width: min(56%, 30rem);
  }

  .sk-el-hero__mascot {
    right: 2rem;
    width: clamp(18rem, 35vw, 28rem);
  }

  .sk-el-categories__grid {
    grid-template-columns: 1fr;
  }

  .sk-el-cat,
  .sk-el-cat--socks,
  .sk-el-cat--women,
  .sk-el-cat--accessories {
    min-height: 14rem;
    transform: none;
  }

  .sk-benefits-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home .sk-product-frame .products.elements-grid.wd-loop-builder-off {
    --wd-col: 2;
  }

  .home {
    background-size: 28px 28px;
  }

  .sk-home-section {
    padding-block: var(--sk-space-10);
  }

  .sk-home-section.hero {
    padding-block: var(--sk-space-4) var(--sk-space-8);
  }

  .sk-home-section > .elementor-container,
  .sk-home-section > .elementor-column-gap-default {
    padding-inline: var(--sk-space-4);
  }

  .sk-kicker {
    margin-bottom: var(--sk-space-3);
    font-size: var(--sk-fs-xs);
  }

  /* 2) HERO MOBILE — intentional composition with visible paper layer */
  .sk-el-hero {
    min-height: 36rem;
    padding: var(--sk-space-5);
    border-radius: var(--sk-radius-lg);
  }

  .sk-el-hero__aqua {
    inset: var(--sk-space-3);
    width: auto;
    transform: none;
  }

  .sk-el-hero__paper {
    right: var(--sk-space-3);
    bottom: var(--sk-space-3);
    top: 38%;
    width: 48%;
    height: 42%;
    opacity: 1;
  }

  .sk-el-hero__paper::before {
    display: none;
  }

  .sk-el-hero__paper::after {
    right: 8%;
    bottom: auto;
    top: -0.75rem;
    width: clamp(4rem, 22vw, 6rem);
    height: 1.4rem;
    transform: rotate(2deg);
  }

  .sk-el-hero__decor--zigzag,
  .sk-el-hero__decor--triangle,
  .sk-el-hero__decor--circle,
  .sk-el-hero__decor--cross {
    display: none;
  }

  .sk-el-hero__content {
    width: auto;
    padding-block: var(--sk-space-6) 0;
  }

  .sk-el-hero__title {
    max-width: 7.8ch;
    margin-bottom: var(--sk-space-5);
    font-size: clamp(3rem, 16vw, 4.2rem);
  }

  .sk-el-hero__ctas {
    display: grid;
    grid-template-columns: 1fr;
    width: min(calc(100% - 4.75rem), 18rem);
    gap: var(--sk-space-3);
  }

  .sk-btn.sk-btn--lg {
    min-height: 48px;
    padding-inline: var(--sk-space-4);
  }

  /* 2) HERO MOBILE — mascot clearly present, not crowding text */
  .sk-el-hero__mascot {
    right: clamp(.5rem, 3vw, 1.5rem);
    bottom: clamp(.25rem, 1vw, .75rem);
    width: clamp(9rem, 42vw, 12rem);
    filter: drop-shadow(6px 8px 0 var(--sk-brand-white));
  }

  .sk-el-hero__decor--squiggle {
    top: auto;
    left: var(--sk-space-5);
    bottom: var(--sk-space-8);
    width: 5rem;
  }

  .sk-el-categories__heading,
  .sk-el-sh__title {
    margin-bottom: var(--sk-space-5);
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .sk-el-cat,
  .sk-el-cat--socks,
  .sk-el-cat--women,
  .sk-el-cat--accessories {
    min-height: 10.5rem;
    padding: var(--sk-space-5);
    border-radius: var(--sk-radius-lg);
  }

  .sk-el-cat__label {
    min-height: 2.8rem;
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }

  .sk-el-cat__burst,
  .sk-el-cat__zigzag,
  .sk-el-cat__tape,
  .sk-el-cat__women-squiggle {
    transform: scale(.7);
  }

  .sk-el-cat__women-tape,
  .sk-el-cat__women-cross {
    display: none;
  }

  .sk-el-editorial,
  .sk-store-panel,
  .sk-newsletter-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: var(--sk-space-6);
    border-radius: var(--sk-radius-lg);
  }

  .sk-el-editorial::before,
  .sk-el-editorial::after,
  .sk-home-section.mascot-promo .sk-el-editorial__content::after,
  .sk-home-section.women-editorial .sk-el-editorial__content::before,
  .sk-home-section.women-editorial .sk-el-editorial__content::after,
  .sk-store-panel::before,
  .sk-store-panel::after,
  .sk-newsletter-shell::before {
    display: none;
  }

  .sk-el-editorial__title,
  .sk-store-panel h2,
  .sk-newsletter-shell h2 {
    font-size: clamp(2.35rem, 13vw, 3.6rem);
  }

  .sk-el-editorial__mascot {
    justify-self: end;
    width: clamp(8rem, 38vw, 11rem);
  }

  .sk-el-editorial--paper-white .sk-el-editorial__mascot {
    display: none;
  }

  .sk-product-frame {
    padding: var(--sk-space-4);
    border-radius: var(--sk-radius-lg);
  }

  .sk-product-frame::before {
    width: 8rem;
    height: 1.4rem;
  }

  .sk-benefits-strip {
    grid-template-columns: 1fr;
  }

  .sk-benefit {
    min-height: auto;
  }

  .sk-store-panel__cta {
    justify-self: stretch;
  }

  .sk-store-panel__cta .sk-btn {
    width: 100%;
  }

  .sk-newsletter-shell__form {
    padding: var(--sk-space-4);
  }
}

@media (max-width: 390px) {
  .sk-el-hero {
    min-height: 33rem;
  }

  .sk-el-hero__title {
    font-size: clamp(2.7rem, 15vw, 3.7rem);
  }

  /* 2) HERO 390 — clearly present mascot */
  .sk-el-hero__mascot {
    width: clamp(9.5rem, 44vw, 11rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-el-cat,
  .sk-el-hero__aqua,
  .sk-el-hero__paper,
  .sk-el-editorial::after,
  .sk-store-panel::before,
  .sk-newsletter-shell::before {
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Editorability additions — element positions / supporting text
   (defaults match the approved composition; no visual change)
   ════════════════════════════════════════════════════════════ */

.sk-el-hero__supporting {
  max-width: 32rem;
  margin: 0 0 var(--sk-space-6);
  color: var(--sk-text);
  font-size: clamp(1rem, .95rem + .45vw, 1.25rem);
  line-height: var(--sk-lh-snug);
}

@media (min-width: 1025px) {
  .sk-el-editorial--media-left .sk-el-editorial__content { order: 2; }
  .sk-el-editorial--media-left .sk-el-editorial__mascot { order: 1; justify-self: start; }
}