/* ============================================================
   MERCHANDISE-ME — INNER PAGES STYLES
   Extends styles.css — Same DA tokens, new page components
   ============================================================ */

/* ============================================================
   SHARED: PAGE HERO BANNER (inner pages)
   ============================================================ */
.page-hero {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: var(--space-2xl);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}
.page-hero--cream { background: var(--cream); }
.page-hero--brown { background: var(--brown-deep); }
.page-hero--terracotta { background: var(--terracotta); }

/* Decorative stripes */
.page-hero__stripe {
  position: absolute;
  top: 0; left: -5%; right: -5%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(0,0,0,0.02) 14px,
    rgba(0,0,0,0.02) 28px
  );
  z-index: 0;
  pointer-events: none;
}
.page-hero--brown .page-hero__stripe,
.page-hero--terracotta .page-hero__stripe {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(255,255,255,0.03) 14px,
    rgba(255,255,255,0.03) 28px
  );
}

/* Decorative floating shapes */
.page-hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-hero__shape {
  position: absolute;
  border-radius: 50%;
  border: var(--border);
}
.page-hero__shape--1 {
  width: 350px; height: 350px;
  top: -100px; right: -80px;
  background: var(--pop-yellow);
  opacity: 0.12;
}
.page-hero__shape--2 {
  width: 200px; height: 200px;
  bottom: -60px; left: 10%;
  background: var(--pop-pink);
  opacity: 0.08;
}
.page-hero__shape--3 {
  width: 120px; height: 120px;
  top: 30%; left: 65%;
  background: var(--pop-blue);
  opacity: 0.06;
  border-radius: var(--radius-lg);
  transform: rotate(15deg);
}

.page-hero--brown .page-hero__shape--1 { opacity: 0.08; }
.page-hero--brown .page-hero__shape--2 { opacity: 0.05; }

.page-hero__float {
  position: absolute;
  font-size: 3rem;
  opacity: 0.15;
  animation: floatStar 6s ease-in-out infinite;
}
.page-hero__float:nth-child(4) { top: 20%; right: 8%; animation-delay: 0s; }
.page-hero__float:nth-child(5) { bottom: 15%; left: 5%; animation-delay: -2s; font-size: 2rem; }
.page-hero__float:nth-child(6) { top: 40%; left: 40%; animation-delay: -4s; font-size: 1.5rem; }

.page-hero__content {
  position: relative;
  z-index: 1;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}
.page-hero--cream .page-hero__breadcrumb { color: var(--brown-mid); }
.page-hero--brown .page-hero__breadcrumb { color: var(--brown-muted); }
.page-hero--terracotta .page-hero__breadcrumb { color: rgba(251,246,238,0.6); }

.page-hero__breadcrumb a {
  transition: color 0.3s ease;
}
.page-hero--cream .page-hero__breadcrumb a:hover { color: var(--pop-pink); }
.page-hero--brown .page-hero__breadcrumb a:hover { color: var(--pop-yellow); }
.page-hero--terracotta .page-hero__breadcrumb a:hover { color: var(--pop-yellow); }

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.page-hero--cream .page-hero__title { color: var(--brown-deep); }
.page-hero--brown .page-hero__title { color: var(--cream); }
.page-hero--terracotta .page-hero__title { color: var(--text-on-dark); }

.page-hero__subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  max-width: 600px;
  margin-top: var(--space-md);
  font-weight: 500;
}
.page-hero--cream .page-hero__subtitle { color: var(--text-muted); }
.page-hero--brown .page-hero__subtitle { color: var(--brown-muted); }
.page-hero--terracotta .page-hero__subtitle { color: rgba(251,246,238,0.75); }

/* Rotated sticker in hero */
.page-hero__sticker {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%) rotate(8deg);
  z-index: 2;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Story section */
.about-story {
  padding: var(--space-3xl) 0;
  background: var(--cream);
}
.about-story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-story__visual {
  position: relative;
}
.about-story__frame {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  background: var(--sand);
  border: var(--border-thick);
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  transform: rotate(-2.5deg);
  transition: transform 0.5s var(--ease-bounce);
  overflow: hidden;
  position: relative;
}
.about-story__frame:hover { transform: rotate(1deg); }

/* Tape on top of frame */
.about-story__tape {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 90px; height: 26px;
  background: rgba(255,210,63,0.55);
  border: 1px solid rgba(200,160,40,0.25);
  z-index: 5;
}

.about-story__text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--brown-deep);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  line-height: 1.05;
}
.about-story__text p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.about-story__text p:last-of-type { margin-bottom: 0; }

/* Values section */
.about-values {
  padding: var(--space-3xl) 0;
  background: var(--cream-dark);
}
.about-values__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.value-card {
  background: white;
  border: var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-pop);
  transition: all 0.45s var(--ease-bounce);
  position: relative;
  overflow: hidden;
}
.value-card:nth-child(1) { transform: rotate(-1.5deg); }
.value-card:nth-child(2) { transform: rotate(1deg); }
.value-card:nth-child(3) { transform: rotate(-0.5deg); }

.value-card:hover {
  transform: rotate(0deg) translate(-3px, -6px) !important;
  box-shadow: var(--shadow-hover);
  z-index: 2;
}
.value-card::after {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 5px;
  border-radius: 0 0 4px 4px;
}
.value-card:nth-child(1)::after { background: var(--pop-pink); }
.value-card:nth-child(2)::after { background: var(--pop-blue); }
.value-card:nth-child(3)::after { background: var(--pop-lavender); }

.value-card__icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
}
.value-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--brown-deep);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.value-card__desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Team section */
.about-team {
  padding: var(--space-3xl) 0;
  background: var(--cream);
}
.about-team__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.team-card {
  text-align: center;
  transition: all 0.4s var(--ease-bounce);
}
.team-card:nth-child(odd) { transform: rotate(-1deg); }
.team-card:nth-child(even) { transform: rotate(1deg); }
.team-card:hover {
  transform: rotate(0deg) translateY(-8px) !important;
}

.team-card__avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: var(--sand);
  border: var(--border);
  box-shadow: var(--shadow-pop-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  margin-bottom: var(--space-sm);
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}
.team-card:hover .team-card__avatar {
  box-shadow: var(--shadow-pop);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--brown-deep);
  text-transform: uppercase;
}
.team-card__role {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--pop-pink);
  transform: rotate(-2deg);
  display: inline-block;
}

/* Stats banner */
.about-stats-banner {
  padding: var(--space-2xl) 0;
  background: var(--brown-deep);
}
.about-stats-banner__inner {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}
.stat-block {
  text-align: center;
}
.stat-block__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--pop-yellow);
  line-height: 1;
  text-transform: uppercase;
}
.stat-block__label {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--brown-muted);
  margin-top: 0.25rem;
}

/* Certifications / Partners */
.about-partners {
  padding: var(--space-3xl) 0;
  background: var(--cream-dark);
}
.about-partners__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-partners__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.partner-logo {
  background: white;
  border: 2px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--brown-mid);
  text-transform: uppercase;
  aspect-ratio: 3/2;
  transition: all 0.3s var(--ease-bounce);
}
.partner-logo:hover {
  border-color: var(--brown-deep);
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: var(--shadow-pop-sm);
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */

/* Filter bar */
.category-filters {
  padding: var(--space-lg) 0;
  background: var(--cream);
  border-bottom: var(--border-light);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(12px);
}
.category-filters__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.category-filters__tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.category-filter-tab {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-xl);
  background: white;
  border: 2px solid var(--sand);
  color: var(--brown-mid);
  transition: all 0.3s var(--ease-bounce);
  cursor: pointer;
}
.category-filter-tab:hover {
  border-color: var(--brown-deep);
  transform: translateY(-2px) rotate(-1deg);
}
.category-filter-tab.active {
  background: var(--brown-deep);
  color: var(--cream);
  border-color: var(--brown-deep);
  box-shadow: var(--shadow-pop-sm);
  transform: rotate(-1deg);
}

.category-filters__count {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* Product grid */
.category-grid-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--cream);
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.product-card {
  background: white;
  border: var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  transition: all 0.45s var(--ease-bounce);
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.product-card:nth-child(3n+1) { transform: rotate(-0.8deg); }
.product-card:nth-child(3n+2) { transform: rotate(0.6deg); }
.product-card:nth-child(3n+3) { transform: rotate(-0.3deg); }

.product-card:hover {
  transform: rotate(0deg) translate(-3px, -8px) scale(1.01) !important;
  box-shadow: var(--shadow-hover);
  z-index: 2;
}

.product-card__visual {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: var(--border);
}
.product-card__emoji {
  font-size: 5rem;
  transition: transform 0.5s var(--ease-bounce);
}
.product-card:hover .product-card__emoji {
  transform: scale(1.15) rotate(-5deg);
}

/* Sticker badge on card */
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

.product-card__body {
  padding: var(--space-md);
}
.product-card__category {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--pop-pink);
  transform: rotate(-1deg);
  display: inline-block;
  margin-bottom: 0.25rem;
}
.product-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brown-deep);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--space-xs);
}
.product-card__desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-card__tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.product-card__tag {
  font-family: var(--font-display);
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-xl);
  border: 2px solid var(--sand);
  color: var(--brown-mid);
}
.product-card__link {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pop-pink);
  border: 2px solid var(--brown-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 2px 2px 0 var(--brown-deep);
  transition: all 0.3s var(--ease-bounce);
  flex-shrink: 0;
}
.product-card__link:hover {
  transform: rotate(-10deg) scale(1.1);
  box-shadow: 3px 3px 0 var(--brown-deep);
}

/* Category CTA band */
.category-cta {
  padding: var(--space-2xl) 0;
  background: var(--pop-yellow);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.category-cta::before {
  content: '★ ✦ ● ★ ✦ ● ★ ✦ ● ★ ✦ ●';
  position: absolute;
  inset: 0;
  font-size: 2.5rem;
  color: var(--brown-deep);
  opacity: 0.04;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.5rem;
  pointer-events: none;
}
.category-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--brown-deep);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}
.category-cta .btn { position: relative; z-index: 1; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

/* Product detail layout */
.product-detail {
  padding: calc(var(--header-h) + 2rem) 0 var(--space-3xl);
  background: var(--cream);
}
.product-detail__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Gallery — compact */
.product-gallery {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.product-gallery__main {
  position: relative;
  aspect-ratio: 1;
  background: white;
  border: var(--border-thick);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform 0.5s var(--ease-bounce);
  margin-bottom: var(--space-sm);
}
.product-gallery__main:hover { transform: rotate(0.5deg); }
.product-gallery__main-emoji {
  font-size: clamp(5rem, 12vw, 8rem);
  filter: drop-shadow(4px 6px 0 rgba(44,27,14,0.1));
  transition: transform 0.6s var(--ease-bounce);
}
.product-gallery__main:hover .product-gallery__main-emoji {
  transform: scale(1.08) rotate(-3deg);
}
.product-gallery__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
}
.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}
.product-gallery__thumb {
  aspect-ratio: 1;
  background: white;
  border: 2px solid var(--sand);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-bounce);
  overflow: hidden;
}
.product-gallery__thumb:hover,
.product-gallery__thumb.active {
  border-color: var(--brown-deep);
  box-shadow: var(--shadow-pop-sm);
  transform: rotate(-2deg);
}

/* Product info */
.product-info { padding-top: var(--space-md); }
.product-info__breadcrumb {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-hand); font-size: 1.05rem;
  color: var(--text-muted); margin-bottom: var(--space-md);
}
.product-info__breadcrumb a { transition: color 0.3s ease; }
.product-info__breadcrumb a:hover { color: var(--pop-pink); }
.product-info__category {
  display: inline-block; font-family: var(--font-hand);
  font-size: 1.2rem; color: var(--pop-pink);
  transform: rotate(-2deg); margin-bottom: 0.5rem;
}
.product-info__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--brown-deep); text-transform: uppercase;
  line-height: 1; margin-bottom: var(--space-md);
}
.product-info__tagline {
  font-size: 1.1rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: var(--space-lg);
  font-weight: 500;
}

/* Key features — simple list */
.product-features {
  display: flex; flex-direction: column; gap: var(--space-sm);
  margin-bottom: var(--space-lg); padding: var(--space-lg);
  background: white; border: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop-sm); transform: rotate(0.3deg);
}
.product-feature { display: flex; align-items: flex-start; gap: 0.75rem; }
.product-feature__icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.product-feature__text { font-size: 0.95rem; color: var(--text-body); line-height: 1.55; }
.product-feature__text strong { color: var(--brown-deep); font-weight: 700; }

/* CTA zone */
.product-cta-zone {
  padding: var(--space-lg); background: var(--pop-yellow);
  border: var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); transform: rotate(-0.5deg);
  margin-bottom: var(--space-lg); text-align: center;
}
.product-cta-zone__title {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--brown-deep); text-transform: uppercase; margin-bottom: 0.25rem;
}
.product-cta-zone__sub {
  font-family: var(--font-hand); font-size: 1.2rem;
  color: var(--brown-mid); margin-bottom: var(--space-md);
}
.product-cta-zone .btn { width: 100%; justify-content: center; font-size: 1.05rem; }

/* Specs table */
.product-specs { margin-bottom: var(--space-lg); }
.product-specs__title {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--brown-deep); text-transform: uppercase; margin-bottom: var(--space-sm);
}
.spec-row {
  display: flex; justify-content: space-between;
  padding: 0.75rem 0; border-bottom: 2px dashed var(--sand); font-size: 0.92rem;
}
.spec-row__label { color: var(--text-muted); }
.spec-row__value { color: var(--brown-deep); font-weight: 600; }

/* Related products */
.related-products { padding: var(--space-3xl) 0; background: var(--cream-dark); }
.related-products__header { text-align: center; margin-bottom: var(--space-xl); }
.related-products__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md);
}

/* Product description */
.product-description { padding: var(--space-2xl) 0; background: var(--cream); }
.product-description__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl); align-items: start;
}
.product-description__text h3 {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--brown-deep); text-transform: uppercase; margin-bottom: var(--space-md);
}
.product-description__text p {
  font-size: 1.02rem; color: var(--text-muted);
  line-height: 1.75; margin-bottom: var(--space-md); font-weight: 500;
}
.product-description__visual { position: relative; }
.product-description__frame {
  aspect-ratio: 4/3; background: var(--sand);
  border: var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); display: flex;
  align-items: center; justify-content: center;
  font-size: 6rem; transform: rotate(2deg);
  transition: transform 0.4s var(--ease-bounce);
}
.product-description__frame:hover { transform: rotate(-1deg); }


/* Process mini (on product page) */
.product-process {
  padding: var(--space-3xl) 0;
  background: var(--brown-deep);
  position: relative;
  overflow: hidden;
}
.product-process::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(255,255,255,0.025) 14px,
    rgba(255,255,255,0.025) 28px
  );
  pointer-events: none;
}
.product-process .section-label { color: var(--pop-yellow); }
.product-process .section-label::after { background: var(--pop-yellow); }
.product-process .section-title { color: var(--cream); }

.product-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.mini-step {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  transition: all 0.4s var(--ease-bounce);
}
.mini-step:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-6px) rotate(-1deg);
  border-color: var(--pop-yellow);
}
.mini-step__icon {
  font-size: 2.8rem;
  margin-bottom: var(--space-sm);
  display: block;
}
.mini-step__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.mini-step__desc {
  font-size: 0.85rem;
  color: var(--brown-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* ============================================================
   CONTACT PAGE — rich collage style
   ============================================================ */
.contact-hero {
  padding: calc(var(--header-h) + 3rem) 0 var(--space-xl);
  background: var(--cream-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Diagonal stripe like hero */
.contact-hero::before {
  content: '';
  position: absolute; inset: -15%;
  background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(44,27,14,0.03) 14px, rgba(44,27,14,0.03) 28px);
  pointer-events: none;
}
.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--brown-deep);
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: var(--space-md);
}
.contact-hero__title em {
  font-style: normal;
  color: var(--pop-pink);
  display: inline-block;
  transform: rotate(-2deg);
}
.contact-hero__sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
}
.contact-hero__badges {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.contact-hero__badge {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--brown-deep);
  background: white;
  border: 2px solid var(--sand);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.9rem;
  transition: all 0.3s var(--ease-bounce);
}
.contact-hero__badge:hover {
  transform: rotate(-2deg) scale(1.05);
  border-color: var(--pop-yellow);
  box-shadow: 2px 2px 0 var(--pop-yellow);
}

/* Form + sidebar */
.contact-section {
  padding: var(--space-xl) 0 var(--space-3xl);
  background: var(--cream);
}
.contact-section__inner {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Form card with scotch tape */
.contact-form-card {
  background: white;
  border: var(--border-thick);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--space-xl);
  transform: rotate(-0.3deg);
  position: relative;
}
/* Scotch tapes */
.contact-form-card__tape {
  position: absolute;
  width: 100px; height: 28px;
  border-radius: 3px;
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
}
.contact-form-card__tape--tl {
  top: -12px; left: 30px;
  background: var(--pop-yellow);
  transform: rotate(-8deg);
}
.contact-form-card__tape--br {
  bottom: -10px; right: 40px;
  background: var(--pop-pink);
  transform: rotate(5deg);
  opacity: 0.35;
}
.contact-form-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--brown-deep);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 3px solid var(--pop-yellow);
  display: inline-block;
}
.contact-form__row { margin-bottom: var(--space-md); }
.contact-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.contact-form__field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--brown-deep);
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.contact-form__field .required { color: var(--pop-pink); }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brown-deep);
  background: var(--cream);
  border: 2px solid var(--sand);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  outline: none;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--pop-pink);
  box-shadow: 0 0 0 3px rgba(255,46,108,0.1);
  background: white;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--brown-muted); opacity: 0.6;
}
.contact-form__field select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%232C1B0E' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.contact-form__field textarea { resize: vertical; min-height: 120px; }
.contact-form__field input[type="file"] {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.contact-form__submit {
  width: 100%; justify-content: center;
  font-size: 1.1rem; padding: 1rem 2rem; margin-top: var(--space-sm);
}
.contact-form__note {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-sm);
}

/* Sidebar cards */
.contact-infos { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-info-card {
  background: white; border: var(--border);
  border-radius: var(--radius-lg); padding: var(--space-md);
  transition: all 0.3s var(--ease-bounce);
}
.contact-info-card:hover {
  transform: rotate(-1deg) translateY(-3px);
  box-shadow: var(--shadow-pop-sm);
}
.contact-info-card__icon { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }
.contact-info-card h3 {
  font-family: var(--font-display); font-size: 0.85rem;
  text-transform: uppercase; color: var(--brown-deep); margin-bottom: 0.25rem;
}
.contact-info-card p { font-size: 0.92rem; color: var(--text-body); line-height: 1.5; }
.contact-info-card p a {
  color: var(--pop-pink); font-weight: 600;
  text-decoration: none; transition: color 0.3s ease;
}
.contact-info-card p a:hover { color: var(--brown-deep); }
.contact-info-card__note {
  font-family: var(--font-hand); font-size: 0.95rem !important;
  color: var(--text-muted) !important; margin-top: 0.15rem;
}
.contact-info-card--highlight {
  background: var(--pop-yellow);
  border-color: var(--brown-deep);
  box-shadow: 3px 3px 0 var(--brown-deep);
}
.contact-trust {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: var(--space-sm);
  background: var(--cream-dark);
  border-radius: var(--radius-md);
}
.contact-trust__item {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--brown-mid);
}

/* ============================================================
   PRODUCTION LINE — real drawn conveyor belt
   ============================================================ */
.production-line {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--brown-deep);
  overflow: hidden; position: relative;
}
.production-line::before {
  content: '';
  position: absolute; inset: -15%;
  background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(255,255,255,0.02) 14px, rgba(255,255,255,0.02) 28px);
  pointer-events: none;
}

/* Scene wrapper — positions products over SVG */
.conveyor-scene {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: 200px;
  overflow: visible;
}

/* The SVG conveyor drawing */
.conveyor-svg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
}
/* Animate belt slats */
.belt-slats {
  animation: beltSlatsMove 2s linear infinite;
}
@keyframes beltSlatsMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

/* Products floating above belt, scrolling left → right */
.conveyor-products {
  position: absolute;
  top: 12%;
  left: 5%; right: 5%;
  height: 50%;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 3;
}
.conveyor-products__track {
  display: flex;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  width: max-content;
  animation: conveyorLTR 20s linear infinite;
}
.conveyor-products__track:hover {
  animation-play-state: paused;
}

.conveyor-products__item {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  display: inline-flex;
  align-items: flex-end;
  animation: itemBob 0.7s ease-in-out infinite alternate;
  filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.35));
  cursor: pointer;
  transition: transform 0.3s var(--ease-bounce), filter 0.3s ease;
  position: relative;
  z-index: 1;
}
.conveyor-products__item--img {
  font-size: 1rem;
}
.conveyor-products__item--img img {
  height: clamp(40px, 6vw, 70px);
  width: auto;
  object-fit: contain;
}
.conveyor-products__item:hover {
  transform: scale(2.2) translateY(-15px) !important;
  animation-play-state: paused;
  filter: drop-shadow(3px 8px 6px rgba(0,0,0,0.45));
  z-index: 99;
}

/* Left→Right scroll */
@keyframes conveyorLTR {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes itemBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Machine labels at edges */
.conveyor-label {
  position: absolute;
  bottom: 8px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--pop-yellow);
  letter-spacing: 0.05em;
  z-index: 4;
}
.conveyor-label--left { left: 2%; }
.conveyor-label--right { right: 2%; }

/* ============================================================
   RESPONSIVE — INNER PAGES
   ============================================================ */
@media (max-width: 1024px) {
  .about-story__inner { grid-template-columns: 1fr; }
  .about-story__visual { max-width: 380px; margin: 0 auto; order: -1; }
  .about-values__grid { grid-template-columns: 1fr 1fr; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
  .about-partners__inner { grid-template-columns: 1fr; }
  
  .product-detail__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .product-gallery { position: static; max-width: 380px; margin: 0 auto; }
  .product-description__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .product-description__visual { max-width: 380px; margin: 0 auto; }
  .product-process__steps { grid-template-columns: repeat(2, 1fr); }
  
  .page-hero__sticker { display: none; }
  
  .contact-section__inner { grid-template-columns: 1fr; }
  .contact-infos { flex-direction: row; flex-wrap: wrap; }
  .contact-info-card { flex: 1 1 200px; }
}

@media (max-width: 768px) {
  .about-values__grid { grid-template-columns: 1fr; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats-banner__inner { gap: var(--space-lg); }
  
  .category-filters__inner { flex-direction: column; align-items: flex-start; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  
  .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .product-process__steps { grid-template-columns: 1fr 1fr; }

  .related-products__grid { grid-template-columns: 1fr; }
  
  .contact-form__row--2col { grid-template-columns: 1fr; }
  .contact-infos { flex-direction: column; }
}

@media (max-width: 480px) {
  .about-team__grid { grid-template-columns: 1fr 1fr; }
  .about-stats-banner__inner { flex-direction: column; gap: var(--space-md); }
  .category-grid { grid-template-columns: 1fr; }
  .product-process__steps { grid-template-columns: 1fr; }
}

/* ---- DYNAMIC PRODUCT IMAGES ---- */
.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
.product-card__visual {
  position: relative;
}

/* Gallery with real images */
.product-gallery__main-img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}