html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #fffaf8;
  color: #333;
  animation: pageFade 0.7s ease;
}

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TOP BAR */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f2dede;
}

.logo {
  font-size: 1.25rem;
  font-weight: bold;
}

nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #444;
  font-weight: 600;
}

/* HERO */
.hero {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: url("hero-bg.png") no-repeat center -65px;
  background-size: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0.58)
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  padding: 20px;
  margin-top: 75px;
}

.welcome {
  color: #ff5fa2;
  letter-spacing: 4px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: bold;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.tagline {
  max-width: 620px;
  margin: 0 auto 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* SHARED SECTIONS */
.featured,
.cart-section,
.why,
.about,
.social,
.contact {
  padding: 80px 20px;
  border-top: 1px solid #f3eaea;
}

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 35px;
}

.section-label {
  color: #ff5fa2;
  letter-spacing: 3px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.section-heading h2 {
  font-size: 2.1rem;
  margin-bottom: 14px;
}

.section-text {
  color: #666;
  line-height: 1.7;
  font-size: 1rem;
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.btn.primary {
  background: #ff5fa2;
  color: white;
}

.btn.secondary {
  background: #8ee3db;
  color: #333;
}

.btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.btn.primary:hover {
  box-shadow: 0 10px 22px rgba(255, 95, 162, 0.35);
}

.btn.secondary:hover {
  box-shadow: 0 10px 22px rgba(142, 227, 219, 0.35);
}

.shop-btn:active,
.btn:active {
  transform: scale(0.96);
}

/* PRODUCTS */
.product-grid {
  max-width: 1200px;
  margin: 35px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  align-items: stretch;
}

.product-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0;
  transform: translateY(24px);
  animation: cardRise 0.7s ease forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.product-card:nth-child(1) { animation-delay: 0.08s; }
.product-card:nth-child(2) { animation-delay: 0.16s; }
.product-card:nth-child(3) { animation-delay: 0.24s; }
.product-card:nth-child(4) { animation-delay: 0.32s; }

@keyframes cardRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-soft-featured {
  box-shadow: 0 14px 30px rgba(255, 95, 162, 0.12);
  border: 1px solid rgba(255, 95, 162, 0.16);
}

.product-image {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #ffd6e7, #c8f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* HOMEPAGE CATEGORY PREVIEW STRIPS */
.category-image-title {
  display: block;
  margin-bottom: 12px;
  font-size: 1rem;
  color: #444;
  z-index: 2;
}

/* HOMEPAGE AUTO-ROTATING CATEGORY IMAGE */
.category-rotator {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
}

.category-rotate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

 /* control focus */
  object-position: center 71%;

 /* control zoom */
  transform: scale(1.20);
  transform-origin: 42% center;

  filter: contrast(1.03) saturate(1.04);

  border-radius: 22px;
  opacity: 0;
  animation: categoryImageFade 8s infinite;
}

.category-rotate-img.img-one {
  opacity: 1;
  animation-delay: 0s;
}

.category-rotate-img.img-two {
  animation-delay: 4s;
}

@keyframes categoryImageFade {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.category-preview-strip img {
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 22px;
  background: white;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.product-card:hover .product-image {
  transform: scale(1.05);
  filter: brightness(1.05);
}

.product-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 95, 162, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 5;
}

.product-badge-alt {
  background: #8ee3db;
  color: #333;
}

.product-badge-soon {
  background: #999;
  color: white;
}

.product-info {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #999;
  margin-bottom: 8px;
  font-weight: 700;
}

.product-info h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.product-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.price {
  font-weight: bold;
  color: #444;
}

.price-note {
  font-size: 0.82rem;
  color: #999;
}

.shop-btn {
  background: #ff5fa2;
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  margin-top: auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.shop-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 22px rgba(255, 95, 162, 0.3);
}

.shop-btn.disabled {
  background: #cccccc;
  cursor: not-allowed;
  box-shadow: none;
}

/* WHY */
.why-grid {
  max-width: 1100px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.why-card {
  background: white;
  padding: 24px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.why-card h3 {
  margin-bottom: 10px;
}

.why-card p {
  color: #666;
  line-height: 1.6;
}

/* SOCIAL */
.social {
  max-width: 1100px;
  margin: 0 auto 20px;
  background: white;
  border-radius: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.social-btn {
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  color: white;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.social-btn:hover {
  transform: translateY(-2px) scale(1.04);
}

.social-btn.instagram {
  background: linear-gradient(45deg, #ff5fa2, #8ee3db);
}

.social-btn.instagram:hover {
  box-shadow: 0 10px 22px rgba(255, 95, 162, 0.25);
}

.social-btn.tiktok {
  background: linear-gradient(45deg, #111, #444);
}

.social-btn.tiktok:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

/* LEGAL PAGES */
.legal-page {
  max-width: 800px;
  margin: 60px auto;
  padding: 20px;
}

.legal-page h1 {
  margin-bottom: 20px;
}

.legal-page h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.legal-page p {
  line-height: 1.7;
  color: #555;
}

/* FOOTER */
.footer {
  background: linear-gradient(to top, #fff, #fffaf8);
  border-top: 1px solid #f2dede;
  margin-top: 80px;
  padding: 40px 20px;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.footer-links {
  margin-bottom: 15px;
}

.footer-links a {
  margin: 0 16px;
  text-decoration: none;
  color: #777;
  font-weight: 500;
  transition: 0.25s ease;
}

.footer-links a:hover {
  color: #ff5fa2;
}

.footer-copy {
  font-size: 0.85rem;
  color: #999;
  margin-top: 10px;
}

/* COLLECTION FEATURE LAYOUT */
.collection-page {
  padding: 80px 20px 40px;
}

.collection-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.collection-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.collection-header h1 {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.collection-header p {
  color: #666;
  line-height: 1.8;
}

.feature-option-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.feature-option-card {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}

.feature-option-image {
  min-height: 380px;
  background: linear-gradient(135deg, #ffd6e7, #c8f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #555;
  font-weight: 700;
}

.feature-option-image {
  cursor: pointer;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.feature-option-card:hover .feature-option-image {
  transform: translateY(-4px);

  box-shadow:
    0 18px 38px rgba(0,0,0,0.08);
}

.feature-option-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 71%;
  display: block;
  border-radius: inherit;
}

/* =========================
   STICKER COLLECTION IMAGES
========================= */

.feature-option-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-option-image {
  min-height: 320px;
  overflow: hidden;
}

/* NAME LABEL SHOWCASE */
.name-label-showcase {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #fff6f8 0%,
      #fdf1ff 45%,
      #eefcff 100%
    );
}

/* NAME LABEL REMODEL PAGE */
.name-label-page {
  padding: 80px 20px 40px;
}

.name-label-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.name-label-note {
  max-width: 760px;
  margin: 0 auto 28px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.name-label-note span {
  background: white;
  border: 1px solid #f2dede;
  color: #777;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.name-label-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.name-label-theme-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 95, 162, 0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.name-label-theme-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.09);
}

.name-label-theme-card img {
  transition:
    transform 0.45s ease,
    filter 0.35s ease;
}

.name-label-theme-card:hover img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.name-label-theme-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.name-label-card-info {
  padding: 20px;
}

.name-label-card-info h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.name-label-card-info p {
  color: #666;
  line-height: 1.6;
  font-size: 0.94rem;
  margin-bottom: 14px;
}

.name-label-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.name-label-options span {
  background: #fffaf8;
  border: 1px solid #f2dede;
  color: #d94a8c;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .name-label-theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .name-label-theme-grid {
    grid-template-columns: 1fr;
  }

  .name-label-theme-card img {
    height: 230px;
  }
}

/* NAME LABEL ACTION BUTTONS */
.name-label-shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.name-label-standard-btn {
  background: #ffd8e8;
  color: #444;
}

.name-label-personalized-btn {
  background: #b8efe8;
  color: #444;
}

.name-label-standard-btn:hover,
.name-label-personalized-btn:hover {
  transform: translateY(-2px);
}

.label-card-preview {
  position: absolute;
  width: 58%;
  border-radius: 20px;
  overflow: hidden;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.10),
    0 3px 10px rgba(255,255,255,0.28);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.label-card-preview img {
  width: 100%;
  display: block;
}

.label-preview-one {
  left: 7%;
  top: 10%;
  transform: rotate(-7deg);
  z-index: 2;
}

.label-preview-two {
  right: 6%;
  top: 20%;
  transform: rotate(7deg);
  z-index: 1;
}

.name-label-showcase:hover .label-preview-one {
  transform: rotate(-4deg) translateY(-4px);
}

.name-label-showcase:hover .label-preview-two {
  transform: rotate(4deg) translateY(-4px);
}

.label-mix-badge {
  position: absolute;
  bottom: 22px;
  left: 18px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ff5fa2;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06);
}

.feature-option-info {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-option-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #999;
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-option-info h2 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.feature-option-info p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 18px;
}

.feature-option-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.bundle-section {
  margin-top: 36px;
}

.bundle-box {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 32px;
  text-align: center;
}

.bundle-box h2 {
  margin-bottom: 12px;
}

.bundle-box p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 18px;
}

.collection-back {
  text-align: center;
  margin: 40px 0;
}

/* DETAIL PAGES */
.detail-page {
  padding: 80px 20px 40px;
}

.detail-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.detail-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}

.detail-gallery,
.detail-info,
.detail-note-box {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.detail-gallery {
  padding: 24px;
}

.detail-main-image {
  min-height: 340px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffd6e7, #c8f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-weight: 700;
  color: #555;
  margin-bottom: 18px;
}

.detail-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.detail-thumb {
  min-height: 170px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffe5ef, #ddfaf6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: #666;
  font-size: 0.92rem;
  font-weight: 700;
}

.detail-main-image img,
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
}

/* PRODUCT IMAGE LIGHTBOX */
.detail-thumb img {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 3000;
}

.image-lightbox.show {
  display: flex;
}

.image-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 24px;
  background: white;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.image-lightbox-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.22);
  color: white;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.detail-info {
  padding: 30px;
}

.detail-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #999;
  font-weight: 700;
  margin-bottom: 10px;
}

.detail-info h1 {
  font-size: 2.1rem;
  margin-bottom: 14px;
}

.detail-desc {
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

.detail-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.detail-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
}

.detail-note {
  font-size: 0.9rem;
  color: #999;
}

.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.detail-note-box {
  padding: 24px;
}

.detail-note-box h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.detail-note-box p {
  color: #666;
  line-height: 1.8;
}

/* UPGRADED CART UI */
.cart-shell {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-cart-box {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 40px 24px;
  text-align: center;
}

.empty-cart-box h3 {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.empty-cart-box p {
  color: #666;
  line-height: 1.7;
}

.cart-item {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1.4fr auto auto;
  gap: 18px;
  align-items: center;
}

.cart-item-left {
  min-width: 0;
}

.cart-item-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.cart-item-details {
  color: #777;
  font-size: 0.95rem;
}

.cart-item-middle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffaf8;
  border: 1px solid #f2dede;
  border-radius: 999px;
  padding: 6px 10px;
}

.qty-btn {
  border: none;
  background: white;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.qty-number {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
}

.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-line-total {
  font-weight: 700;
  font-size: 1.05rem;
}

.remove-btn {
  background: #222;
  color: white;
  border: none;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.remove-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.cart-summary {
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 24px;
  text-align: center;
}

.cart-summary h3 {
  margin-bottom: 18px;
  font-size: 1.3rem;
}

.cart-summary .btn {
  margin: 6px;
}

/* ABOUT / CONTACT */
.about,
.contact {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* MOBILE */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
  }

.category-image-title {
  margin-top: 8px;
}

  .logo {
    text-align: center;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
  }

  nav a {
    margin: 0;
  }

  .hero {
    height: 320px;
    background-position: center;
  }

  .hero-content {
    margin-top: 30px;
    padding: 16px;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .tagline {
    font-size: 0.95rem;
  }

  .hero-buttons,
  .feature-option-actions,
  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn,
  .feature-option-actions .btn,
  .feature-option-actions .shop-btn,
  .detail-actions .btn,
  .detail-actions .shop-btn {
    width: 100%;
    text-align: center;
  }

  .product-grid,
  .why-grid {
    gap: 18px;
  }

  .feature-option-card,
  .detail-top {
    grid-template-columns: 1fr;
  }

  .feature-option-image,
  .detail-main-image {
    min-height: 220px;
  }

  .feature-option-info,
  .detail-info {
    padding: 22px;
  }

  .feature-option-info h2,
  .detail-info h1,
  .collection-header h1 {
    font-size: 1.8rem;
  }

  .price-row,
  .detail-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .detail-thumb-grid {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .cart-item-middle {
    justify-content: center;
  }

  .cart-item-right {
    width: 100%;
    align-items: flex-start;
  }

  .cart-summary .btn {
    width: 100%;
    margin: 6px 0;
  }
}

/* CART TOAST */
.cart-toast {
  position: fixed;
  top: 90px;
  right: 20px;
  background: #333;
  color: white;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2000;
}

.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.personalization-box {
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
  background: #f9f9f9;
}

.personalization-options {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-input-box {
  margin-top: 10px;
  display: none;
}

.custom-input-box input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.personalization-note {
  font-size: 12px;
  margin-top: 10px;
  color: #777;
}

/* PREMIUM PERSONALIZATION UI */
.premium-personalization {
  margin: 22px 0;
  padding: 22px;
  border-radius: 20px;
  background: #fffaf8;
  border: 1px solid #f2dede;
}

.premium-personalization h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.personalization-subtext {
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}

.personalization-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.personalization-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: white;
  border: 1px solid #eadede;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.personalization-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.personalization-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.personalization-card.active-option {
  border-color: #ff5fa2;
  box-shadow: 0 10px 22px rgba(255, 95, 162, 0.12);
}

.personalization-card-title {
  font-weight: 700;
  color: #333;
}

.personalization-card-text {
  font-size: 0.92rem;
  color: #777;
  line-height: 1.5;
}

.custom-input-box {
  display: none;
  margin-top: 12px;
}

.custom-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #444;
}

.custom-input-box input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: white;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-input-box input:focus {
  border-color: #ff5fa2;
  box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.12);
}

.name-preview-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: white;
  border: 1px dashed #f2dede;
}

.preview-label {
  display: inline-block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  font-weight: 700;
  margin-bottom: 8px;
}

.name-preview-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #444;
}

.personalization-note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #777;
  margin-top: 16px;
}

/* MOBILE PERSONALIZATION */
@media (max-width: 768px) {
  .personalization-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* PREMIUM PERSONALIZATION UI */
.premium-personalization {
  margin: 22px 0;
  padding: 22px;
  border-radius: 20px;
  background: #fffaf8;
  border: 1px solid #f2dede;
}

.premium-personalization h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.personalization-subtext {
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}

.personalization-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.personalization-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: white;
  border: 1px solid #eadede;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.personalization-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.personalization-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.personalization-card.active-option {
  border-color: #ff5fa2;
  box-shadow: 0 10px 22px rgba(255, 95, 162, 0.12);
}

.personalization-card-title {
  font-weight: 700;
  color: #333;
}

.personalization-card-text {
  font-size: 0.92rem;
  color: #777;
  line-height: 1.5;
}

.custom-input-box {
  display: none;
  margin-top: 12px;
}

.custom-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #444;
}

.custom-input-box input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: white;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-input-box input:focus {
  border-color: #ff5fa2;
  box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.12);
}

.name-preview-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: white;
  border: 1px dashed #f2dede;
}

.preview-label {
  display: inline-block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  font-weight: 700;
  margin-bottom: 8px;
}

.name-preview-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #444;
}

.personalization-note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #777;
  margin-top: 16px;
}

/* REAL LABEL PREVIEW */
.real-label-preview-box {
  background: #fff;
}

.real-label-card {
  width: 220px;
  min-height: 90px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e6d7ff, #d6ecff);
  border: 2px solid #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin-top: 10px;
}

.real-label-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #4b4b5f;
  text-align: center;
  word-break: break-word;
}

/* MOBILE PERSONALIZATION */
@media (max-width: 768px) {
  .personalization-choice-grid {
    grid-template-columns: 1fr;
  }

  .real-label-card {
    width: 100%;
  }
}

/* CART BUBBLE */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #444;
  font-weight: 600;
}

.cart-count-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff5fa2;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* DYNAMIC PRICE LOOK */
.dynamic-price-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dynamic-price-note {
  font-size: 0.9rem;
  color: #999;
}

/* MOBILE CART BADGE */
@media (max-width: 768px) {
  .cart-link {
    justify-content: center;
  }
}

.cart-bump {
  animation: cartPop 0.35s ease;
}

@keyframes cartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* CART DRAWER */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1998;
}

.cart-drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  background: #fffaf8;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1999;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid #f2dede;
  background: white;
}

.cart-drawer-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.cart-drawer-close {
  border: none;
  background: #fffaf8;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  font-size: 1.4rem;
  cursor: pointer;
  font-weight: 700;
}

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-drawer-footer {
  border-top: 1px solid #f2dede;
  padding: 20px;
  background: white;
  text-align: center;
}

.cart-drawer-footer h3 {
  margin-bottom: 14px;
}

.cart-drawer-footer .btn {
  width: 100%;
  margin: 6px 0;
}

@media (max-width: 768px) {
  .cart-drawer {
    width: 100%;
    max-width: 100%;
  }
}

.cart-added-msg {
  font-size: 0.8rem;
  color: #888;
  margin-top: 4px;
}

/* ORDER SUMMARY PAGE */

.summary-page {
  padding: 40px 20px;
}

.summary-wrap {
  max-width: 1100px;
  margin: auto;
}

.summary-header {
  text-align: center;
  margin-bottom: 30px;
}

.summary-header h1 {
  margin-bottom: 6px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-item {
  background: #fff;
  border: 1px solid #eee;
  padding: 16px;
  border-radius: 10px;
}

.summary-item-name {
  font-weight: 600;
}

.summary-item-meta {
  font-size: 0.9rem;
  color: #777;
}

.summary-box {
  background: #fffaf8;
  border: 1px solid #f2dede;
  padding: 20px;
  border-radius: 12px;
  height: fit-content;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-weight: bold;
  font-size: 1.1rem;
}

.summary-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #777;
  text-align: center;
}

@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}

.summary-page {
  padding: 56px 28px;
}

.summary-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

.summary-header {
  text-align: center;
  margin-bottom: 38px;
}

.summary-header h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.summary-header p {
  font-size: 1.15rem;
  color: #666;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 30px;
  align-items: start;
}

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.summary-item {
  background: #fff;
  border: 1px solid #ececec;
  padding: 24px;
  border-radius: 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-item-name {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.summary-item-meta {
  font-size: 1rem;
  color: #777;
}

.summary-box {
  background: #fffaf8;
  border: 1px solid #f2dede;
  padding: 26px;
  border-radius: 18px;
  min-height: 320px;
}

.summary-box h3 {
  font-size: 1.8rem;
  margin-bottom: 18px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-line {
  font-size: 1rem;
  margin: 12px 0;
}

.summary-total {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eadede;
  font-size: 1.35rem;
  font-weight: 700;
}

.summary-box .btn.primary,
.summary-box .btn.ghost {
  width: 100%;
}

.summary-box .btn.primary {
  margin-top: 18px;
}

.summary-note {
  margin: 16px 0 10px;
  font-size: 0.95rem;
  color: #777;
  text-align: center;
}

.btn.ghost {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 1px solid #ddd;
  color: #555;
  padding: 12px;
  border-radius: 12px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-header h1 {
    font-size: 2.3rem;
  }
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.summary-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.summary-item-thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff4f7;
}

.summary-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== BUNDLE SYSTEM ===== */

.bundle-box {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #f1dede;
  border-radius: 16px;
  background: #fffaf8;
}

.bundle-subtext {
  color: #777;
  margin-bottom: 16px;
}

.bundle-options {
  display: grid;
  gap: 14px;
}

.bundle-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 16px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bundle-option-card input {
  display: none;
}

.bundle-option-card:hover {
  border-color: #ff7eb3;
}

.bundle-option-card.active-option {
  border-color: #ff7eb3;
  box-shadow: 0 0 0 2px rgba(255, 126, 179, 0.12);
}

.bundle-option-card.best-value {
  background: #fff7fb;
  border-color: #ff7eb3;
}

.bundle-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #d94a8c;
}

.bundle-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.bundle-price {
  font-size: 1.1rem;
  font-weight: 700;
}

.bundle-note {
  font-size: 0.92rem;
  color: #777;
}

/* ===== FREE SHIPPING MESSAGE ===== */

.free-shipping-message {
  margin-top: 12px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #d94a8c;
}

/* Bundle Discount Styling */
.summary-line span:last-child {
  font-weight: 500;
}

#summary-discount {
  color: #e63946;
  font-weight: bold;
}

/* FREE SHIPPING MESSAGE */
.free-shipping-message {
  margin-top: 10px;
  font-size: 14px;
  color: #2a9d8f;
  font-weight: 600;
}

/* PAYMENT PAGE */
.payment-layout {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 28px;
  align-items: start;
}

.payment-form-wrap,
.payment-summary-wrap {
  width: 100%;
}

.payment-section-card {
  background: #fff;
  border: 1px solid #f0e4e7;
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.payment-section-card h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.payment-form-grid {
  display: grid;
  gap: 14px;
}

.payment-form-grid.single {
  grid-template-columns: 1fr;
}

.payment-form-grid.two-col {
  grid-template-columns: 1fr 1fr;
}

.payment-form-grid.three-col {
  grid-template-columns: 1.2fr 1fr 0.8fr;
}

.payment-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payment-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.payment-optional {
  font-weight: 400;
  color: #777;
}

.payment-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-field input:focus {
  border-color: #d98bb6;
  box-shadow: 0 0 0 3px rgba(217, 139, 182, 0.12);
}

.payment-method-box {
  background: #fff8fb;
  border: 1px solid #f2dbe8;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.payment-method-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.payment-method-note {
  font-size: 0.93rem;
  color: #666;
  line-height: 1.5;
}

.payment-checkbox-wrap {
  margin-top: 4px;
}

.payment-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #333;
}

.payment-action-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-submit-btn {
  width: 100%;
  font-size: 1rem;
  padding: 14px 18px;
}

.payment-submit-note {
  font-size: 0.92rem;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.payment-back-link {
  text-align: center;
}

.payment-summary-box {
  position: sticky;
  top: 100px;
}

@media (max-width: 920px) {
  .payment-layout {
    grid-template-columns: 1fr;
  }

  .payment-form-grid.two-col,
  .payment-form-grid.three-col {
    grid-template-columns: 1fr;
  }

  .payment-summary-box {
    position: static;
  }
}

.free-shipping-message {
  margin: 12px 0;
  padding: 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ff4d8d;
  background: rgba(255, 77, 141, 0.08);
  border-radius: 10px;
}

.label-card-preview {
  position: absolute;
  width: 50%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.09);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.label-preview-one {
  left: 3%;
  top: 22%;
  transform: rotate(-3deg);
  z-index: 2;
}

.label-preview-two {
  right: 3%;
  top: 22%;
  transform: rotate(3deg);
  z-index: 1;
}

.name-label-showcase:hover .label-preview-one {
  transform: rotate(-2deg) translateY(-4px);
}

.name-label-showcase:hover .label-preview-two {
  transform: rotate(2deg) translateY(-4px);
}

.label-mix-badge {
  position: absolute;
  bottom: 20px;
  left: 18px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ff5fa2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.feature-option-image {
  position: relative;
  overflow: hidden;
}

/* =========================
   WOODEN LETTER TAG PICKER
========================= */

.letter-grid {
  display: grid;
  grid-template-columns: repeat(8, 44px);
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.letter-btn {
  width: 44px;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 180, 205, 0.55);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7fb, #e9fbff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  color: #252525;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.letter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.letter-btn.active {
  background: linear-gradient(
    135deg,
    #ff7fa8,
    #8fe7e8
  ) !important;

  color: #fff !important;

  transform: scale(1.08);

  border: none;

  box-shadow:
    0 0 0 4px rgba(255,127,168,.18),
    0 10px 24px rgba(143,231,232,.45);
}

#selected-letter-note {
  margin-top: 26px;
  margin-bottom: 32px;
  padding: 18px 22px;
  border-radius: 18px;
  background: #f9ffff;
  border: 2px solid #c8f0f0;
  font-weight: 800;
  color: #333;
  box-shadow: 0 4px 12px rgba(143,231,232,.12);
}

.detail-note-box {
  text-align: left;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.detail-note-box h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.wooden-tag-page .detail-note-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(143,231,232,.18);
}

.detail-note-box p {
  line-height: 1.8;
}

.wooden-tag-page .detail-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wooden-tag-page .detail-note-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.wooden-tag-page .detail-note-box h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.wooden-tag-page .detail-note-box p {
  line-height: 1.8;
}

.wooden-thumb-grid {
  align-items: start;
}

.wooden-thumb-item {
  text-align: center;
}

.wooden-thumb-caption {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  line-height: 1.25;
}

.wooden-thumb-caption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: #333;
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.selected-letter-value{
  color:#ff6f9c;
  font-weight:900;
}

/* =========================
   GIFT DETAIL GALLERY FIX
========================= */

.gift-detail-page .detail-thumb {
  min-height: 190px;
}

.gift-detail-page .detail-main-image {
  min-height: 320px;
}

.name-label-live-preview-box{
  margin-top:16px;
  padding:20px;
  border-radius:16px;
  background:#f8f8f8;
  border:1px solid #e8e8e8;
  text-align:center;
}

.name-label-live-preview-box p{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#888;
  margin-bottom:10px;
}

#live-name-preview{
  font-size:34px;
  margin:0;
  line-height:1.2;
  word-break:break-word;
}

.personalize-form label{
  display:block;
  margin-top:14px;
  margin-bottom:6px;
  font-weight:600;
}

.personalize-form input,
.personalize-form select,
.personalize-form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
}

#label-quantity{
  max-width:120px;
}

/* =========================
  NAME LABEL ZOOM IMAGE
========================= */

.name-label-zoom-thumb {
  cursor: zoom-in;
}

.name-label-zoom-thumb img {
  width: 100%;
  display: block;
  border-radius: 18px;
}

.name-label-card-info {
  cursor: pointer;
}

/* =========================
   CUSTOM NAME LABEL FONTS
========================= */

@font-face {
  font-family: "Carnevalee Freakshow";
  src: url("assets/fonts/carnevalee-freakshow.ttf");
}

@font-face {
  font-family: "Life Savers";
  src: url("assets/fonts/lifesavers-regular.ttf");
}

@font-face {
  font-family: "Teen It";
  src: url("assets/fonts/teen-it.otf");
}

@font-face {
  font-family: "Old Standard";
  src: url("assets/fonts/oldstandard-regular.ttf");
}

@font-face {
  font-family: "Chanticleer Roman";
  src: url("assets/fonts/chanticleer-roman.otf");
}

@font-face {
  font-family: "Bree Serif";
  src: url("assets/fonts/bree-serif.ttf");
}

/* =========================
   NAME LABEL LIVE FONT PREVIEW
========================= */

.name-label-live-preview-box {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 24px 18px;
  border-radius: 18px;
  background: #fff8fb;
  border: 1px solid rgba(214, 91, 140, 0.18);
  text-align: center;
}

.name-label-live-preview-box p {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9b7b86;
  font-weight: 700;
}

#live-name-preview {
  margin: 0;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.15;
  color: #222;
  word-break: break-word;
}

.label-preview-image-wrap {
  cursor: zoom-in;
}

/* =========================
   ACTIVITY KIT BUNDLE BUILDER
========================= */

.activity-bundle-builder {
  margin: 34px 0 42px;
  padding: 28px;
  border-radius: 26px;
  background: #fff8fb;
  border: 1px solid rgba(214, 91, 140, 0.16);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
}

.activity-bundle-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px;
}

.activity-bundle-header h2 {
  margin: 6px 0 10px;
}

.activity-bundle-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.activity-bundle-card {
  border: 2px solid transparent;
  background: #ffffff;
  border-radius: 20px;
  padding: 14px;
  cursor: pointer;
  transition: 0.2s ease;
  text-align: center;
}

.activity-bundle-card img {
  width: 100%;
  border-radius: 16px;
  display: block;
  margin-bottom: 12px;
}

.activity-bundle-card span {
  font-weight: 700;
}

.activity-bundle-card.active {
  border-color: #d65b8c;
  box-shadow: 0 10px 25px rgba(214, 91, 140, 0.18);
  transform: translateY(-2px);
}

.activity-bundle-summary {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  text-align: center;
}

.activity-bundle-summary h3 {
  margin-top: 0;
}

.activity-bundle-selection {
  margin: 14px 0 18px;
  font-weight: 700;
  color: #333;
}

#activity-bundle-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  .activity-bundle-options {
    grid-template-columns: 1fr;
  }
}

.shopify-checkout-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 16px 22px;
  margin-top: 18px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shopify-checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.shopify-checkout-note {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  color: #7a6f68;
}

.summary-item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.summary-item-options span {
  background: #fff4f7;
  border: 1px solid #f3d6e2;
  color: #9a4f6f;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
}

.summary-item {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 14px 18px;
}

.summary-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff4f7;
}

.summary-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.summary-item-content {
  min-width: 0;
}

.summary-item-name {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.summary-item-meta {
  font-size: 0.9rem;
  color: #777;
}

.summary-box {
  position: sticky;
  top: 95px;
}

.summary-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.summary-item-controls button {
  border: 1px solid #eadede;
  background: #fff;
  color: #333;
  border-radius: 999px;
  min-width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: 800;
}

.summary-item-controls span {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
}

.summary-remove-btn {
  padding: 0 12px;
  color: #b84d68 !important;
}

.summary-item-line-total {
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #444;
}

.shopify-secure-note {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: #7a6f68;
  font-weight: 600;
}
/* =========================
   ACTIVITY KIT PAGE POLISH
========================= */

.activity-bundle-builder {
  max-width: 1040px;
  margin: 34px auto 44px;
  padding: 34px 32px;
  border-radius: 26px;
  background: #fffaf8;
  border: 1px solid #f4dfe6;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
}

.activity-bundle-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 26px;
}

.activity-bundle-header h2 {
  margin: 8px 0 10px;
}

.activity-bundle-header p {
  color: #6f6662;
  line-height: 1.55;
}

.activity-bundle-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 28px;
}

.activity-bundle-card {
  min-height: 150px;
  padding: 18px 14px;
  border: 1px solid #f0d9e2;
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.045);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.activity-bundle-card:hover {
  transform: translateY(-3px);
  border-color: #e999b5;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.075);
}

.activity-bundle-card.active {
  border-color: #e46f9b;
  background: #fff4f8;
  box-shadow: 0 0 0 3px rgba(228, 111, 155, 0.14);
}

.activity-bundle-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 18px;
  background: #fff1f6;
}

.activity-bundle-card span {
  font-weight: 800;
  color: #2f2f2f;
}

.activity-bundle-summary {
  max-width: 520px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #f0d9e2;
  text-align: center;
}

.activity-bundle-summary h3 {
  margin-bottom: 8px;
}

.activity-bundle-selection {
  margin: 12px auto 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff4f8;
  color: #9d496a;
  font-weight: 800;
  display: inline-block;
}

#activity-bundle-add-btn {
  min-width: 220px;
}

@media (max-width: 800px) {
  .activity-bundle-builder {
    padding: 26px 18px;
  }

  .activity-bundle-options {
    grid-template-columns: 1fr;
  }
}

/* =========================
   ACTIVITY KIT PAGE CHIPS
========================= */

.name-label-note {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 38px;
  flex-wrap: wrap;
}

.name-label-note span {
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ead0dc;
  color: #6f6662;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 24px rgba(140, 80, 105, 0.08);
  transition: all 0.2s ease;
}

.name-label-note span:hover {
  transform: translateY(-2px);
  border-color: #e999b5;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
}

.name-label-note span:nth-child(1) {
  background: #fff8fb;
}

.name-label-note span:nth-child(2) {
  background: #f9fffc;
}

.name-label-note span:nth-child(3) {
  background: #fff7f2;
}

.name-label-note {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   PREMIUM OPTION PAGE V2
========================= */

.premium-option-page {
  padding: 48px 20px 70px;
  background:
    radial-gradient(circle at top left, rgba(255, 230, 238, 0.75), transparent 36%),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 100%);
}

.premium-breadcrumb {
  max-width: 1180px;
  margin: 0 auto 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  color: #9c6f67;
}

.premium-breadcrumb a {
  color: #9c6f67;
  text-decoration: none;
}

.premium-breadcrumb strong {
  color: #4c2f2a;
}

.premium-product-hero {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 38px;
  align-items: center;
}

.premium-main-image-card {
  background: #ffffff;
  border-radius: 34px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(136, 83, 72, 0.18);
  border: 1px solid rgba(255, 214, 205, 0.9);
}

.premium-main-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

.premium-thumbnail-row {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.premium-thumbnail-row img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: #fff;
  border: 2px solid rgba(255, 207, 198, 0.95);
  padding: 6px;
  box-shadow: 0 12px 26px rgba(136, 83, 72, 0.12);
}

.premium-product-info {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 213, 204, 0.9);
  border-radius: 34px;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(136, 83, 72, 0.14);
}

.premium-product-info h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  margin: 10px 0 16px;
  color: #3f2824;
}

.premium-product-copy {
  color: #77544d;
  line-height: 1.7;
  font-size: 1rem;
}

.premium-price-line {
  margin: 22px 0;
  font-weight: 700;
  color: #6d463f;
}

.premium-price-line span {
  font-size: 1.8rem;
  color: #d96f84;
}

.premium-benefit-list {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.premium-benefit-list span {
  background: #fff4f0;
  border: 1px solid rgba(255, 203, 194, 0.8);
  border-radius: 999px;
  padding: 10px 14px;
  color: #6c4540;
  font-weight: 700;
  font-size: 0.92rem;
}

.premium-soft-box {
  margin-top: 22px;
  background: linear-gradient(135deg, #fff2b8, #ffe4ec);
  border-radius: 24px;
  padding: 18px;
  color: #60413b;
  line-height: 1.6;
}

.premium-section-heading {
  max-width: 1180px;
  margin: 56px auto 20px;
  text-align: center;
}

.premium-section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 6px 0 0;
  color: #3f2824;
}

.premium-option-grid {
  max-width: 1180px;
  margin: 0 auto;
}

.premium-option-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 202, 0.9);
  box-shadow: 0 20px 45px rgba(136, 83, 72, 0.14);
}

.premium-option-card::before {
  content: "Bundle Ready";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255, 244, 240, 0.92);
  color: #b95d72;
  border: 1px solid rgba(255, 205, 200, 0.9);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.75rem;
  font-weight: 800;
}

.premium-pair-section {
  max-width: 1180px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: #ffffff;
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 20px 45px rgba(136, 83, 72, 0.12);
  border: 1px solid rgba(255, 210, 202, 0.9);
}

.premium-pair-section h2 {
  margin: 5px 0 8px;
  color: #3f2824;
}

.premium-pair-section p {
  color: #77544d;
}

.premium-pair-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.premium-pair-links a {
  text-decoration: none;
  background: #fff4f0;
  color: #b95d72;
  border: 1px solid rgba(255, 203, 194, 0.9);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
}

.premium-trust-bar {
  max-width: 1180px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.premium-trust-bar span {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 210, 202, 0.9);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
  color: #6c4540;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(136, 83, 72, 0.08);
}

@media (max-width: 860px) {
  .premium-product-hero,
  .premium-pair-section {
    grid-template-columns: 1fr;
  }

  .premium-product-info {
    padding: 26px;
  }

  .premium-trust-bar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .premium-option-page {
    padding: 30px 14px 50px;
  }

  .premium-trust-bar {
    grid-template-columns: 1fr;
  }

  .premium-thumbnail-row {
    gap: 10px;
  }
}

.premium-pair-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 14px;
}

.premium-pair-card {
  text-decoration: none;
  background: #fff4f0;
  border: 1px solid rgba(255, 203, 194, 0.9);
  border-radius: 22px;
  padding: 10px;
  color: #6c4540;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(136, 83, 72, 0.1);
}

.premium-pair-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin-bottom: 9px;
}

.premium-pair-card span {
  display: block;
  text-align: center;
}

/* =========================
   SHOPIFY IMAGE HOVER ZOOM
========================= */

.feature-image-link,
.name-label-theme-card,
.premium-main-image-card,
.premium-pair-card {
  overflow: hidden;
}

.shopify-card-image {
  transition: transform 0.35s ease, filter 0.35s ease;
}

.shopify-card-image:hover {
  transform: scale(1.06);
  filter: brightness(1.03);
}

.shopify-sticker-card .shopify-card-image {
  cursor: zoom-in;
}

/* =========================
   PREMIUM PAIR IT WITH FIX
========================= */

.premium-pair-section {
  grid-template-columns: minmax(260px, 0.8fr) 2fr;
  align-items: stretch;
}

.premium-pair-section > div:first-child {
  max-width: 320px;
}

.premium-pair-section > div:first-child h2 {
  line-height: 1.15;
}

.premium-pair-section > div:first-child p {
  line-height: 1.55;
}

.premium-pair-cards {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  align-items: stretch;
}

.premium-pair-card {
  padding: 8px;
}

.premium-pair-card img {
  aspect-ratio: 4 / 3;
  max-height: 190px;
}

@media (max-width: 860px) {
  .premium-pair-section {
    grid-template-columns: 1fr;
  }

  .premium-pair-section > div:first-child {
    max-width: none;
  }
}

/* =========================
   PREMIUM HOMEPAGE REDESIGN
========================= */

.home-top-message {
  background: #fff4f0;
  border-bottom: 1px solid rgba(255, 210, 202, 0.9);
  font-size: 0.82rem;
  color: #6c4540;
}

.home-top-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.home-social-quick {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.home-social-quick a,
.home-top-inner a {
  color: #b95d72;
  font-weight: 800;
  text-decoration: none;
}

.home-top-inner p {
  font-weight: 700;
  text-align: right;
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 210, 202, 0.9);
  padding: 18px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-logo {
  text-decoration: none;
  color: #3f2824;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.home-logo span {
  font-size: 1.45rem;
  font-weight: 900;
}

.home-logo small {
  margin-top: 4px;
  color: #b95d72;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.home-nav a {
  margin: 0;
  color: #60413b;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.94rem;
}

.home-hero {
  min-height: 560px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255, 230, 238, 0.8), transparent 36%),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 100%);
}

.home-hero-bg {
  position: absolute;
  inset: 28px;
  border-radius: 40px;
  background:
    linear-gradient(rgba(255,255,255,0.48), rgba(255,255,255,0.65)),
    url("hero-bg.png") center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(136, 83, 72, 0.14);
}

.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 40px 24px;
}

.home-kicker {
  color: #b95d72;
  letter-spacing: 3.5px;
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.home-hero h1 {
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 0.95;
  color: #3f2824;
  margin-bottom: 18px;
}

.home-hero p {
  color: #6d463f;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
}

.home-hero-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.home-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #fff7fa, #fff1f6, #fff7fa);
  color: #6c4540;
  padding: 34px 0;
  border-top: 1px solid #f0d6e0;
  border-bottom: 1px solid #f0d6e0;
  box-shadow: 0 10px 30px rgba(214, 91, 140, 0.08);
}

.home-marquee-track {
  display: flex;
  gap: 78px;
  width: max-content;
  animation: homeMarquee 28s linear infinite;
}

.home-marquee-track span {
  white-space: nowrap;
  font-weight: 900;
  font-size: 1.08rem;
  color: #7a4b5f;
}

@keyframes homeMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.home-premium-main {
  padding: 70px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 230, 238, 0.62), transparent 34%),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 100%);
}

.home-story-row {
  max-width: 1180px;
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 28px;
  align-items: stretch;
}

.home-story-row.reverse {
  grid-template-columns: 1.08fr 0.92fr;
}

.home-story-card {
  min-height: 430px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 210, 202, 0.95);
  border-radius: 34px;
  padding: 42px;
  box-shadow: 0 22px 54px rgba(136, 83, 72, 0.13);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-story-card h2 {
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1;
  color: #3f2824;
  margin-bottom: 18px;
}

.home-story-card p {
  color: #77544d;
  line-height: 1.75;
  font-size: 1.03rem;
  max-width: 460px;
}

.home-story-link {
  margin-top: 28px;
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
  color: white;
  background: #b95d72;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(185, 93, 114, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-story-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(185, 93, 114, 0.32);
}

.home-story-image {
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  display: block;
  background: #fff;
  border: 1px solid rgba(255, 210, 202, 0.95);
  box-shadow: 0 22px 54px rgba(136, 83, 72, 0.13);
}

.home-story-image img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff4f1;
}

.home-story-image:hover img {
  transform: scale(1.07);
  filter: brightness(1.04);
}

.home-trust-bar {
  max-width: 1180px;
  margin: 0 auto 70px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.home-trust-bar div {
  background: white;
  border: 1px solid rgba(255, 210, 202, 0.95);
  border-radius: 20px;
  padding: 18px 14px;
  text-align: center;
  color: #6c4540;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(136, 83, 72, 0.08);
}

.home-footer {
  background: #3f2824;
  color: #fffaf7;
  padding: 60px 22px 24px;
}

.home-footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
  gap: 32px;
}

.home-footer h3 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.home-footer h4 {
  margin-bottom: 14px;
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.home-footer p {
  color: rgba(255, 250, 247, 0.72);
  line-height: 1.7;
}

.home-footer a {
  display: block;
  color: rgba(255, 250, 247, 0.78);
  text-decoration: none;
  margin-bottom: 10px;
  font-weight: 700;
}

.home-footer a:hover {
  color: #ffd6e7;
}

.home-family-box {
  margin-top: 26px;
}

.home-family-box form {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.home-family-box input {
  min-width: 0;
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
}

.home-family-box button {
  border: none;
  border-radius: 999px;
  background: #ffd6e7;
  color: #3f2824;
  font-weight: 900;
  padding: 12px 16px;
  cursor: pointer;
}

.home-footer-bottom {
  max-width: 1180px;
  margin: 38px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 250, 247, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .home-top-inner,
  .home-header,
  .home-nav {
    flex-direction: column;
    text-align: center;
  }

  .home-top-inner p {
    text-align: center;
  }

  .home-nav {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .home-story-row,
  .home-story-row.reverse {
    grid-template-columns: 1fr;
  }

  .home-story-row.reverse .home-story-image {
    order: 2;
  }

  .home-story-row.reverse .home-story-card {
    order: 1;
  }

  .home-story-card,
  .home-story-image {
    min-height: 330px;
  }

  .home-trust-bar,
  .home-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .home-header {
    padding: 16px 18px;
  }

  .home-hero {
    min-height: 500px;
  }

  .home-hero-bg {
    inset: 14px;
    border-radius: 28px;
  }

  .home-story-card {
    padding: 30px 24px;
  }

  .home-trust-bar,
  .home-footer-grid {
    grid-template-columns: 1fr;
  }

  .home-family-box form {
    flex-direction: column;
  }

  .home-family-box button {
    width: 100%;
  }
}

/* =========================
   HOMEPAGE MOCKUP FIX
========================= */

/* FULL WIDTH FEEL */
.home-premium-main {
  padding: 20px 8px 50px !important;
}

/* MOVING BAR */
.home-marquee {
  padding: 42px 0 !important;
}

.home-marquee-track {
  gap: 90px !important;
}

.home-marquee-track span {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

/* HERO */
.home-hero {
  max-width: 1750px !important;
  margin: 12px auto 20px !important;

  min-height: 420px !important;

  grid-template-columns:
    0.75fr
    1.25fr !important;
}

.home-hero-content {
  padding: 50px 60px !important;
}

.home-hero-image {
  min-height: 420px !important;
}

.home-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* COLLECTION ROWS */
.home-story-row,
.home-story-row.reverse {
  max-width: 1750px !important;

  gap: 8px !important;

  margin-bottom: 8px !important;
}

/* IMAGE SIDE BIGGER */
.home-story-row {
  grid-template-columns:
    0.68fr
    1.32fr !important;
}

.home-story-row.reverse {
  grid-template-columns:
    1.32fr
    0.68fr !important;
}

/* SHORTER */
.home-story-card,
.home-story-image {
  height: 320px !important;
}

/* IMAGE LOOK */
.home-story-image {
  border-radius: 14px !important;
}

.home-story-image img {
  object-fit: cover;
}

/* CARD LOOK */
.home-story-card {
  padding: 30px 42px !important;

  justify-content: flex-start !important;
}

.home-story-card h2 {
  font-size: clamp(2rem, 3vw, 3.4rem) !important;

  margin-bottom: 10px !important;
}

.home-story-card p {
  font-size: 0.95rem !important;

  line-height: 1.6 !important;

  max-width: 500px !important;
}

.home-story-link {
  margin-top: 18px !important;
}

/* TRUST BAR */
.home-trust-bar {
  max-width: 1750px !important;

  padding: 0 8px !important;
}

/* FOOTER */
.home-footer-grid,
.home-footer-bottom {
  max-width: 1750px !important;
}

/* MOBILE */
@media (max-width: 900px) {

  .home-hero,
  .home-story-row,
  .home-story-row.reverse {
    grid-template-columns: 1fr !important;
  }

  .home-story-card,
  .home-story-image,
  .home-hero-image {
    min-height: 260px !important;
  }

  .home-story-card {
    padding: 28px !important;
  }
}

/* =========================
   HERO POSITIONING FIX
========================= */

.home-hero {
  max-width: 1750px !important;

  grid-template-columns:
    0.62fr
    1.38fr !important;
}

.home-hero-content {
  padding: 50px 70px 50px 50px !important;

  text-align: left !important;

  align-items: flex-start !important;
}

.home-hero-content p,
.home-hero-content h1,
.home-hero-content .home-kicker {
  text-align: left !important;
}

.home-hero-actions {
  justify-content: flex-start !important;
}

.home-hero-image {
  width: 100%;
}

.home-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-content {
  padding-left: 35px !important;
}

.home-hero {
  grid-template-columns:
    0.58fr
    1.42fr !important;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: 55px;
}

/* =========================
   HOMEPAGE PREMIUM POLISH
========================= */

body {
  background:
    radial-gradient(circle at top left, rgba(255, 224, 234, 0.55), transparent 34%),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 48%, #fffaf7 100%);
}

/* Header premium glass look */
.home-header {
  border-radius: 0 0 28px 28px;
  box-shadow: 0 14px 38px rgba(92, 54, 47, 0.08);
}

.home-logo span {
  letter-spacing: -0.7px;
}

.home-nav a {
  position: relative;
}

.home-nav a:not(.cart-link)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: #b95d72;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.home-nav a:not(.cart-link):hover::after {
  width: 100%;
}

/* Hero premium card */
.home-hero {
  border-radius: 32px !important;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(92, 54, 47, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.72) !important;
}

.home-hero-content {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,245,240,0.76));
}

.home-hero h1 {
  letter-spacing: -2px;
}

.home-hero-image img {
  transition: transform 1.1s ease, filter 0.45s ease;
}

.home-hero:hover .home-hero-image img {
  transform: scale(1.035);
  filter: brightness(1.04);
}

/* Premium moving bar */
.home-marquee {
  box-shadow: 0 16px 34px rgba(63, 40, 36, 0.12);
}

.home-marquee-track span {
  letter-spacing: 0.2px;
}

/* Collection panels */
.home-story-card,
.home-story-image {
  border-radius: 28px !important;
  border: 1px solid rgba(255, 213, 204, 0.95);
  box-shadow:
    0 20px 52px rgba(92, 54, 47, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.55);
}

.home-story-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,246,242,0.9));
}

.home-story-card::before {
  content: "";
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: #d8899c;
  margin-bottom: 18px;
}

.home-story-card h2 {
  letter-spacing: -1.4px;
}

.home-story-link {
  background: linear-gradient(135deg, #b95d72, #d8899c) !important;
}

.home-story-image {
  position: relative;
}

.home-story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(to bottom, transparent 60%, rgba(63,40,36,0.08));
  pointer-events: none;
}

.home-story-row:hover .home-story-card {
  transform: translateY(-2px);
}

/* Trust bar premium chips */
.home-trust-bar div {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,246,242,0.9));
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(92, 54, 47, 0.09);
}

/* Footer premium */
.home-footer {
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -18px 45px rgba(63, 40, 36, 0.12);
}

/* STOP HEADER FROM FOLLOWING SCROLL */
.home-header {
  position: relative !important;
  top: auto !important;
}

/* MAKE TOP BAR NOT STICKY EITHER */
.home-top-message {
  position: relative !important;
  top: auto !important;
}

/* SOFTER PREMIUM PAGE */
.home-premium-main {
  background: linear-gradient(180deg, #fffaf7 0%, #fff2ee 45%, #fffaf7 100%) !important;
}

/* HERO NEEDS MORE DEPTH */
.home-hero {
  background: #fff7f4 !important;
  border: 1px solid rgba(216, 137, 156, 0.22) !important;
  box-shadow: 0 24px 70px rgba(92, 54, 47, 0.14) !important;
}

/* COLLECTION PANELS MORE PREMIUM */
.home-story-card {
  background: linear-gradient(135deg, #fff, #fff4f1) !important;
  border: 1px solid rgba(216, 137, 156, 0.28) !important;
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13) !important;
}

.home-story-image {
  background: #fff4f1 !important;
  border: 1px solid rgba(216, 137, 156, 0.28) !important;
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13) !important;
}

/* PREMIUM CARD ACCENT COLORS */
.home-story-row:nth-child(1) .home-story-card {
  background: linear-gradient(135deg, #fff7f8, #ffffff) !important;
}

.home-story-row:nth-child(2) .home-story-card {
  background: linear-gradient(135deg, #faf6ff, #ffffff) !important;
}

.home-story-row:nth-child(3) .home-story-card {
  background: linear-gradient(135deg, #fffaf1, #ffffff) !important;
}

.home-story-row:nth-child(4) .home-story-card {
  background: linear-gradient(135deg, #f7fff5, #ffffff) !important;
}

.home-story-card {
  position: relative;
  overflow: hidden;
}

.home-story-card::after {
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 3.4rem;
  opacity: 0.12;
  pointer-events: none;
}

.home-story-row:nth-child(1) .home-story-card::after {
  content: "🎁";
}

.home-story-row:nth-child(2) .home-story-card::after {
  content: "👜";
}

.home-story-row:nth-child(3) .home-story-card::after {
  content: "✨";
}

.home-story-row:nth-child(4) .home-story-card::after {
  content: "🌱";
}

/* STOP HEADER FROM FOLLOWING SCROLL */
.home-header {
  position: relative !important;
  top: auto !important;
}

/* MAKE TOP BAR NOT STICKY EITHER */
.home-top-message {
  position: relative !important;
  top: auto !important;
}

/* SOFTER PREMIUM PAGE */
.home-premium-main {
  background: linear-gradient(180deg, #fffaf7 0%, #fff2ee 45%, #fffaf7 100%) !important;
}

/* HERO NEEDS MORE DEPTH */
.home-hero {
  background: #fff7f4 !important;
  border: 1px solid rgba(216, 137, 156, 0.22) !important;
  box-shadow: 0 24px 70px rgba(92, 54, 47, 0.14) !important;
}

/* COLLECTION PANELS MORE PREMIUM */
.home-story-card {
  background: linear-gradient(135deg, #fff, #fff4f1) !important;
  border: 1px solid rgba(216, 137, 156, 0.28) !important;
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13) !important;
}

.home-story-image {
  background: #fff4f1 !important;
  border: 1px solid rgba(216, 137, 156, 0.28) !important;
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13) !important;
}

/* PREMIUM CARD ACCENT COLORS */
.home-story-row:nth-child(1) .home-story-card {
  background: linear-gradient(135deg, #fff7f8, #ffffff) !important;
}

.home-story-row:nth-child(2) .home-story-card {
  background: linear-gradient(135deg, #faf6ff, #ffffff) !important;
}

.home-story-row:nth-child(3) .home-story-card {
  background: linear-gradient(135deg, #fffaf1, #ffffff) !important;
}

.home-story-row:nth-child(4) .home-story-card {
  background: linear-gradient(135deg, #f7fff5, #ffffff) !important;
}

.logo-main {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}

.logo-sub {
  font-size: 0.75rem;
  letter-spacing: 4px;
  margin-top: 4px;
}

/* =========================
   TOP SOCIAL SPACING + IMAGE HOVER FIX
========================= */

/* Space out Instagram, TikTok, and email */
.home-social-quick {
  gap: 34px !important;
}

.home-social-quick a {
  display: inline-block;
  padding: 4px 0;
  letter-spacing: 0.3px;
}

/* Stop homepage images from moving/zooming out of frame */
.home-story-image img,
.home-hero-image img {
  transform: none !important;
  transition: none !important;
}

.home-story-image:hover img,
.home-hero:hover .home-hero-image img,
.home-hero-image:hover img {
  transform: none !important;
  filter: none !important;
}

/* Keep image frames clean */
.home-story-image,
.home-hero-image {
  overflow: hidden !important;
}

/* TOP BAR CLEAN FIX */
.home-top-inner {
  max-width: 1750px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 42px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
}

.home-social-quick {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 48px !important;
  white-space: nowrap !important;
}

.home-top-inner p {
  text-align: center !important;
  margin: 0 !important;
}

/* TOP BAR RIGHT MESSAGE SPACING */
.home-top-inner p {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 28px;

  margin: 0;

  text-align: right;

  font-weight: 600;

  white-space: nowrap;
}

/* HERO TAGLINES */

.home-hero-kicker{
  margin:18px 0 10px;
  font-size:1.15rem;
  font-weight:600;
  color:#5f4b46;
  line-height:1.6;
}

.home-hero-sub{
  margin:0 0 12px;
  font-size:1.05rem;
  font-weight:700;
  color:#8a5f73;
}

.home-hero-features{
  margin:0 0 26px;
  font-size:.95rem;
  font-weight:700;
  color:#7a6f68;
  letter-spacing:.4px;
}

.home-story-image {
  height: 300px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-story-image {
  height: 300px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible !important;

  background: #fff;
}

.home-story-image img {
  width: auto !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: 100% !important;

  object-fit: contain !important;
}

.home-story-image {
  height: 300px !important;
  overflow: hidden !important;
  border-radius: 32px;
}

.home-story-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

.home-story-card,
.home-story-image {
  height: 390px !important;
}

.home-story-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 45% !important;
}

.home-story-card,
.home-story-image {
  height: 360px !important;
}

.home-story-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #fff4f1 !important;
}

.home-story-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.home-story-card,
.home-story-image {
  height: 360px !important;
}

.home-story-image {
  overflow: hidden !important;
}

.home-story-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: fill !important;

  display: block;
}

.home-story-row {
  grid-template-columns: 0.8fr 1.2fr;
}

.home-story-row.reverse {
  grid-template-columns: 1.2fr 0.8fr;
}

.home-story-card,
.home-story-image {
  height: 360px !important;
}

.home-story-row {
  grid-template-columns: 0.8fr 1.2fr !important;
}

.home-story-row.reverse {
  grid-template-columns: 1.2fr 0.8fr !important;
}

.home-story-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* =========================
   STICKER COLLECTION PAGE
========================= */

.stickers-hero {
  max-width: 1750px;
  margin: 18px auto 10px;
  padding: 70px 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(255, 224, 234, 0.7), transparent 34%),
    linear-gradient(135deg, #fffaf7, #fff1f5);
  border: 1px solid rgba(216, 137, 156, 0.24);
  box-shadow: 0 24px 70px rgba(92, 54, 47, 0.12);
  text-align: center;
}

.stickers-hero-content {
  max-width: 850px;
  margin: 0 auto;
}

.stickers-hero h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  color: #3f2824;
  margin-bottom: 18px;
}

.stickers-hero p {
  color: #77544d;
  line-height: 1.7;
  font-size: 1.08rem;
}

/* short moving bar for sticker page */
.sticker-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #fff7fa, #fff1f6, #fff7fa);
  border-top: 1px solid #f0d6e0;
  border-bottom: 1px solid #f0d6e0;
  box-shadow: 0 10px 26px rgba(214, 91, 140, 0.06);
  padding: 14px 0;
}

.sticker-marquee .home-marquee-track {
  display: flex;
  gap: 58px;
  width: max-content;
  animation: homeMarquee 28s linear infinite;
}

.sticker-marquee .home-marquee-track span {
  white-space: nowrap;
  color: #7a4b5f;
  font-size: 0.95rem;
  font-weight: 900;
}

/* rows */
.sticker-premium-main {
  padding: 22px 8px 48px;
  background: linear-gradient(180deg, #fffaf7 0%, #fff2ee 45%, #fffaf7 100%);
}

.sticker-row,
.sticker-row.reverse {
  max-width: 1750px;
  margin: 0 auto 36px;
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.sticker-row {
  grid-template-columns: 0.8fr 1.2fr;
}

.sticker-row.reverse {
  grid-template-columns: 1.2fr 0.8fr;
}

.sticker-card,
.sticker-image {
  height: 360px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(216, 137, 156, 0.28);
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13);
}

.sticker-card {
  position: relative;
  padding: 32px 42px;
  background: linear-gradient(135deg, #ffffff, #fff4f1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sticker-card::before {
  content: "";
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: #d8899c;
  margin-bottom: 18px;
}

.sticker-row:nth-child(1) .sticker-card {
  background: linear-gradient(135deg, #fff7f8, #ffffff);
}

.sticker-row:nth-child(2) .sticker-card {
  background: linear-gradient(135deg, #faf6ff, #ffffff);
}

.sticker-row:nth-child(3) .sticker-card {
  background: linear-gradient(135deg, #fffaf1, #ffffff);
}

.sticker-row:nth-child(4) .sticker-card {
  background: linear-gradient(135deg, #f7fff5, #ffffff);
}

.sticker-row:nth-child(5) .sticker-card {
  background: linear-gradient(135deg, #f5fbff, #ffffff);
}

.sticker-card h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  color: #3f2824;
  margin-bottom: 12px;
  letter-spacing: -1.2px;
}

.sticker-card p {
  color: #77544d;
  line-height: 1.6;
  font-size: 0.96rem;
  max-width: 520px;
}

.sticker-image {
  display: block;
  background: #fff4f1;
}

.sticker-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* no hover zoom on collection lifestyle images */
.sticker-image img,
.sticker-image:hover img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

@media (max-width: 900px) {
  .sticker-row,
  .sticker-row.reverse {
    grid-template-columns: 1fr;
  }

  .sticker-card,
  .sticker-image {
    height: 300px;
  }

  .sticker-card {
    padding: 28px;
  }

  .stickers-hero {
    margin: 12px 10px;
    padding: 50px 20px;
  }
}

.home-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.home-logo-image {
  height: 85px;
  width: auto;
  display: block;
}

/* =========================
   SPECIAL GIFTS FEATURE PAGE
========================= */

.gift-hero {
  max-width: 1750px;
  margin: 18px auto 10px;
  padding: 70px 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(255, 224, 234, 0.7), transparent 34%),
    linear-gradient(135deg, #fffaf7, #fff1f5);
  border: 1px solid rgba(216, 137, 156, 0.24);
  box-shadow: 0 24px 70px rgba(92, 54, 47, 0.12);
  text-align: center;
}

.gift-hero-content {
  max-width: 850px;
  margin: 0 auto;
}

.gift-hero h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  color: #3f2824;
  margin-bottom: 18px;
}

.gift-hero p {
  color: #77544d;
  line-height: 1.7;
  font-size: 1.08rem;
}

.gift-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #fff7fa, #fff1f6, #fff7fa);
  border-top: 1px solid #f0d6e0;
  border-bottom: 1px solid #f0d6e0;
  box-shadow: 0 10px 26px rgba(214, 91, 140, 0.06);
  padding: 14px 0;
}

.gift-marquee .home-marquee-track {
  display: flex;
  gap: 58px;
  width: max-content;
  animation: homeMarquee 28s linear infinite;
}

.gift-marquee .home-marquee-track span {
  white-space: nowrap;
  color: #7a4b5f;
  font-size: 0.95rem;
  font-weight: 900;
}

.gift-feature-main {
  padding: 24px 8px 54px;
  background: linear-gradient(180deg, #fffaf7 0%, #fff2ee 45%, #fffaf7 100%);
}

.gift-feature-row {
  max-width: 1750px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  align-items: stretch;
}

.gift-feature-card,
.gift-feature-image {
  height: 390px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(216, 137, 156, 0.28);
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13);
}

.gift-feature-card {
  position: relative;
  padding: 34px 42px;
  background: linear-gradient(135deg, #fff7f8, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.gift-feature-card::before {
  content: "";
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: #d8899c;
  margin-bottom: 18px;
}

.gift-feature-card h2 {
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1;
  color: #3f2824;
  margin-bottom: 12px;
  letter-spacing: -1.2px;
}

.gift-feature-card p {
  color: #77544d;
  line-height: 1.6;
  font-size: 0.96rem;
  max-width: 560px;
}

.gift-feature-image {
  display: block;
  background: #fff4f1;
}

.gift-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gift-feature-image img,
.gift-feature-image:hover img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

.gift-feature-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 8px;
}

.gift-feature-points span {
  background: #fff4f8;
  border: 1px solid rgba(216, 137, 156, 0.22);
  color: #9b4d65;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.gift-benefits {
  max-width: 1750px;
  margin: 0 auto 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gift-benefit-card {
  background: linear-gradient(135deg, #ffffff, #fff7f4);
  border: 1px solid rgba(216, 137, 156, 0.22);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 16px 38px rgba(92, 54, 47, 0.1);
}

.gift-benefit-card h3 {
  margin-bottom: 10px;
  color: #3f2824;
}

.gift-benefit-card p {
  color: #77544d;
  line-height: 1.6;
}

.gift-coming-soon {
  max-width: 1750px;
  margin: 0 auto;
  padding: 40px 28px;
  border-radius: 32px;
  background: linear-gradient(135deg, #fffaf7, #fff1f5);
  border: 1px solid rgba(216, 137, 156, 0.2);
  box-shadow: 0 18px 45px rgba(92, 54, 47, 0.1);
}

.gift-coming-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px;
}

.gift-coming-header h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #3f2824;
  margin-bottom: 10px;
}

.gift-coming-header p {
  color: #77544d;
  line-height: 1.6;
}

.gift-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gift-preview-card {
  min-height: 160px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(216, 137, 156, 0.22);
  box-shadow: 0 14px 32px rgba(92, 54, 47, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.gift-preview-card span {
  font-size: 2.4rem;
}

.gift-preview-card h3 {
  color: #3f2824;
  font-size: 1.1rem;
}

@media (max-width: 900px) {
  .gift-feature-row,
  .gift-benefits,
  .gift-preview-grid {
    grid-template-columns: 1fr;
  }

  .gift-feature-card,
  .gift-feature-image {
    height: 320px;
  }

  .gift-feature-card {
    padding: 28px;
  }

  .gift-hero {
    margin: 12px 10px;
    padding: 50px 20px;
  }

  .gift-coming-soon {
    margin: 0 10px;
    padding: 34px 20px;
  }
}

/* =========================
   LEARNING CARDS COLLECTION PAGE
========================= */

.learning-hero {
  max-width: 1750px;
  margin: 18px auto 10px;
  padding: 70px 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(255, 224, 234, 0.7), transparent 34%),
    linear-gradient(135deg, #fffaf7, #fff1f5);
  border: 1px solid rgba(216, 137, 156, 0.24);
  box-shadow: 0 24px 70px rgba(92, 54, 47, 0.12);
  text-align: center;
}

.learning-hero-content {
  max-width: 850px;
  margin: 0 auto;
}

.learning-hero h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  color: #3f2824;
  margin-bottom: 18px;
}

.learning-hero p {
  color: #77544d;
  line-height: 1.7;
  font-size: 1.08rem;
}

/* smaller moving bar for learning page */
.learning-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #fff7fa, #fff1f6, #fff7fa);
  border-top: 1px solid #f0d6e0;
  border-bottom: 1px solid #f0d6e0;
  box-shadow: 0 10px 26px rgba(214, 91, 140, 0.06);
  padding: 14px 0;
}

.learning-marquee .home-marquee-track {
  display: flex;
  gap: 58px;
  width: max-content;
  animation: homeMarquee 28s linear infinite;
}

.learning-marquee .home-marquee-track span {
  white-space: nowrap;
  color: #7a4b5f;
  font-size: 0.95rem;
  font-weight: 900;
}

.learning-premium-main {
  padding: 22px 8px 48px;
  background: linear-gradient(180deg, #fffaf7 0%, #fff2ee 45%, #fffaf7 100%);
}

.learning-row,
.learning-row.reverse {
  max-width: 1750px;
  margin: 0 auto 32px;
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.learning-row {
  grid-template-columns: 0.8fr 1.2fr;
}

.learning-row.reverse {
  grid-template-columns: 1.2fr 0.8fr;
}

.learning-card,
.learning-image {
  height: 360px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(216, 137, 156, 0.28);
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13);
}

.learning-card {
  position: relative;
  padding: 32px 42px;
  background: linear-gradient(135deg, #ffffff, #fff4f1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.learning-card::before {
  content: "";
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: #d8899c;
  margin-bottom: 18px;
}

.learning-row:nth-child(1) .learning-card {
  background: linear-gradient(135deg, #fff7f8, #ffffff);
}

.learning-row:nth-child(2) .learning-card {
  background: linear-gradient(135deg, #faf6ff, #ffffff);
}

.learning-row:nth-child(3) .learning-card {
  background: linear-gradient(135deg, #fffaf1, #ffffff);
}

.learning-row:nth-child(4) .learning-card {
  background: linear-gradient(135deg, #f7fff5, #ffffff);
}

.learning-card h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  color: #3f2824;
  margin-bottom: 12px;
  letter-spacing: -1.2px;
}

.learning-card p {
  color: #77544d;
  line-height: 1.6;
  font-size: 0.96rem;
  max-width: 520px;
}

.learning-image {
  display: block;
  background: #fff4f1;
}

.learning-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* no hover zoom on learning collection images */
.learning-image img,
.learning-image:hover img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

@media (max-width: 900px) {
  .learning-row,
  .learning-row.reverse {
    grid-template-columns: 1fr;
  }

  .learning-card,
  .learning-image {
    height: 300px;
  }

  .learning-card {
    padding: 28px;
  }

  .learning-hero {
    margin: 12px 10px;
    padding: 50px 20px;
  }
}

/* =========================
   ACTIVITY KIT PAGE
========================= */

.activity-premium-main {
  padding: 35px 8px 48px;
  background: linear-gradient(
    180deg,
    #fffaf7 0%,
    #fff2ee 45%,
    #fffaf7 100%
  );
}

.activity-row,
.activity-row.reverse {
  max-width: 1750px;
  margin: 0 auto 32px;
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.activity-row {
  grid-template-columns: 0.8fr 1.2fr;
}

.activity-row.reverse {
  grid-template-columns: 1.2fr 0.8fr;
}

.activity-card,
.activity-image {
  height: 360px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(216, 137, 156, 0.28);
  box-shadow: 0 22px 55px rgba(92, 54, 47, 0.13);
}

.activity-card {
  position: relative;
  padding: 32px 42px;
  background: linear-gradient(135deg, #ffffff, #fff4f1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.activity-card::before {
  content: "";
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: #d8899c;
  margin-bottom: 18px;
}

.activity-card h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  color: #3f2824;
  margin-bottom: 12px;
  letter-spacing: -1.2px;
}

.activity-card p {
  color: #77544d;
  line-height: 1.6;
  font-size: 0.96rem;
  max-width: 520px;
}

.activity-image {
  display: block;
  background: #fff4f1;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* disable zoom on collection images */
.activity-image img,
.activity-image:hover img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* subtle different card tones */
.activity-row:nth-child(1) .activity-card {
  background: linear-gradient(135deg, #fff7f8, #ffffff);
}

.activity-row:nth-child(2) .activity-card {
  background: linear-gradient(135deg, #faf6ff, #ffffff);
}

.activity-row:nth-child(3) .activity-card {
  background: linear-gradient(135deg, #fffaf1, #ffffff);
}

.activity-row:nth-child(4) .activity-card {
  background: linear-gradient(135deg, #f7fff5, #ffffff);
}

@media (max-width: 900px) {
  .activity-row,
  .activity-row.reverse {
    grid-template-columns: 1fr;
  }

  .activity-card,
  .activity-image {
    height: 300px;
  }

  .activity-card {
    padding: 28px;
  }
}

.activity-hero {
  max-width: 1750px;
  margin: 18px auto;
  padding: 80px 40px;
  text-align: center;
  border-radius: 32px;
  background: linear-gradient(
    135deg,
    #fffaf7,
    #fff1f5
  );
}

.activity-hero h1 {
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 0.95;
  margin-bottom: 18px;
  color: #3f2824;
}

.activity-hero p {
  max-width: 700px;
  margin: 0 auto;
  color: #77544d;
  line-height: 1.7;
  font-size: 1.05rem;
}

.activity-card .home-story-link {
  margin-top: 18px;
  align-self: flex-start;
}

.activity-card .shopify-card-description {
  margin-bottom: 18px;
}

/* ACTIVITY CARD SAFE SPACING FIX */

.activity-card {
  justify-content: flex-start !important;
  padding: 30px 42px !important;
}

.activity-card .shopify-card-description {
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  max-height: none !important;
  overflow: visible !important;
}

.activity-card .price-row {
  margin: 10px 0 14px !important;
}

.activity-card .home-story-link {
  margin-top: 0 !important;
  align-self: flex-start !important;
}

/* FIX MISSING ACTIVITY DESCRIPTIONS */

.activity-card,
.activity-card .shopify-card-description {
  overflow: visible !important;
}

.activity-card .shopify-card-description {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  height: auto !important;
  white-space: normal !important;
}

.activity-card,
.activity-image {
  height: 460px !important;
}

.description-read-more {
  width: fit-content;
  margin: 6px 0 10px;
  border: none;
  background: transparent;
  color: #b95d72;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}

.description-read-more:hover {
  text-decoration: underline;
}

.description-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(63, 40, 36, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.description-modal.show {
  display: flex;
}

.description-modal-box {
  max-width: 620px;
  width: 100%;
  background: #fffaf7;
  border-radius: 26px;
  padding: 30px;
  position: relative;
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
}

.description-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}

.description-modal-box h3 {
  margin-bottom: 14px;
  color: #3f2824;
}

.description-modal-box p {
  color: #77544d;
  line-height: 1.7;
}

/* =========================
   HALLOWEEN BAG PRODUCT PAGE
   Mockup-style product layout
========================= */

.halloween-product-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #fff7fa, #fff1f6, #fff7fa);
  border-top: 1px solid #f0d6e0;
  border-bottom: 1px solid #f0d6e0;
  box-shadow: 0 10px 26px rgba(214, 91, 140, 0.06);
  padding: 13px 0;
}

.halloween-product-marquee .home-marquee-track {
  display: flex;
  gap: 58px;
  width: max-content;
  animation: homeMarquee 28s linear infinite;
}

.halloween-product-marquee .home-marquee-track span {
  white-space: nowrap;
  color: #7a4b5f;
  font-size: 0.94rem;
  font-weight: 900;
}

.product-page {
  background: #fffaf7;
  padding: 34px 18px 60px;
}

.product-breadcrumb {
  max-width: 1180px;
  margin: 0 auto 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
  color: #7a5b54;
}

.product-breadcrumb a {
  color: #7a5b54;
  text-decoration: none;
}

.product-main-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.product-gallery-card,
.product-details-card,
.product-pair-box,
.product-info-box,
.you-may-like {
  background: #fff;
  border: 1px solid rgba(216, 137, 156, 0.28);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(92, 54, 47, 0.09);
}

.product-gallery-card {
  padding: 14px;
}

.product-main-image-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff5f2;
}

.product-main-image-wrap img {
  width: 100%;
  height: 650px;
  object-fit: contain;
  object-position: center;
  display: block;
  cursor: zoom-in;
}

.product-thumbnail-grid {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.halloween-thumb-grid {
  grid-template-columns: repeat(5, 1fr);
}

.product-thumb-btn {
  border: 2px solid transparent;
  background: #fff5f2;
  border-radius: 14px;
  padding: 5px;
  cursor: pointer;
  transition: 0.2s ease;
}

.product-thumb-btn.active {
  border-color: #d65b8c;
  box-shadow: 0 0 0 3px rgba(214, 91, 140, 0.12);
}

.product-thumb-btn:hover {
  transform: translateY(-2px);
}

.product-thumb-btn img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.product-details-card {
  padding: 26px;
}

.product-details-card h1 {
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 0.98;
  margin: 8px 0 14px;
  color: #3f2824;
}

.product-price-line {
  margin: 12px 0 16px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #d65b8c;
}

.product-description-box {
  color: #77544d;
  line-height: 1.6;
  font-size: 0.95rem;
  max-height: 175px;
  overflow-y: auto;
  padding-right: 8px;
}

.product-benefit-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.product-benefit-list span {
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(216, 137, 156, 0.18);
  background: #fff7fa;
  color: #7a4b5f;
  font-size: 0.82rem;
  font-weight: 800;
}

.halloween-design-picker {
  margin: 18px 0;
}

.halloween-variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.halloween-variant-btn {
  border: 1px solid rgba(216, 137, 156, 0.3);
  background: #fff;
  color: #6c4540;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  transition: 0.2s ease;
}

.halloween-variant-btn.active,
.halloween-variant-btn:hover {
  background: #b95d72;
  color: #fff;
  border-color: #b95d72;
}

.product-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.product-lower-grid {
  max-width: 1180px;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
}

.product-pair-box,
.product-info-box {
  padding: 24px;
}

.product-pair-box h2 {
  color: #3f2824;
  margin: 6px 0 10px;
}

.product-pair-box p,
.product-info-box p {
  color: #77544d;
  line-height: 1.6;
}

.product-pair-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.product-pair-mini a {
  text-decoration: none;
  color: #3f2824;
  font-weight: 900;
}

.product-pair-mini img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 8px;
}

.product-info-box {
  display: grid;
  gap: 18px;
}

.product-info-box h3 {
  color: #3f2824;
  margin-bottom: 6px;
}

.you-may-like {
  max-width: 1180px;
  margin: 34px auto 0;
  padding: 26px;
}

.you-may-like h2 {
  text-align: center;
  color: #3f2824;
  margin-bottom: 22px;
}

.you-may-like-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.you-may-card {
  text-decoration: none;
  color: #3f2824;
  background: #fffaf7;
  border: 1px solid #f1d8df;
  border-radius: 18px;
  overflow: hidden;
  font-weight: 900;
}

.you-may-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.you-may-card h3 {
  padding: 12px;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .product-main-grid,
  .product-lower-grid,
  .you-may-like-grid {
    grid-template-columns: 1fr;
  }

  .product-main-image-wrap img {
    height: 430px;
  }

  .halloween-thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-thumb-btn img {
    height: 90px;
  }
}

/* =========================
   ALPHABET PAGE THUMBNAILS ONLY
========================= */

.alphabet-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 92px));
  gap: 12px;
  margin-top: 16px;
}

.alphabet-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.alphabet-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   ALPHABET IMAGE HEIGHT
========================= */

.alphabet-product-page .product-main-image-wrap {
  height: 500px;
}

/* =========================
   LEARNING CARDS THUMBNAILS
========================= */

.alphabet-product-page .product-thumbnail-grid,
.numbers-product-page .product-thumbnail-grid,
.affirmation-product-page .product-thumbnail-grid,
.communication-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 92px));
  gap: 12px;
  margin-top: 16px;
}

.alphabet-product-page .product-thumb-btn,
.numbers-product-page .product-thumb-btn,
.affirmation-product-page .product-thumb-btn,
.communication-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.alphabet-product-page .product-thumb-btn img,
.numbers-product-page .product-thumb-btn img,
.affirmation-product-page .product-thumb-btn img,
.communication-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.numbers-product-page .product-main-image-wrap {
  height: 500px;
}

.numbers-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   LEARNING CARD PRODUCT PAGES
   Alphabet / Numbers / Affirmation
========================= */

.alphabet-product-page .product-thumbnail-grid,
.numbers-product-page .product-thumbnail-grid,
.affirmation-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 92px));
  gap: 12px;
  margin-top: 16px;
}

.alphabet-product-page .product-thumb-btn,
.numbers-product-page .product-thumb-btn,
.affirmation-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.alphabet-product-page .product-thumb-btn img,
.numbers-product-page .product-thumb-btn img,
.affirmation-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alphabet-product-page .product-main-image-wrap,
.numbers-product-page .product-main-image-wrap,
.affirmation-product-page .product-main-image-wrap {
  height: 500px;
}

.alphabet-product-page .product-gallery-card,
.numbers-product-page .product-gallery-card,
.affirmation-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   COMMUNICATION CARD PAGE
========================= */

.communication-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 92px));
  gap: 12px;
  margin-top: 16px;
}

.communication-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.communication-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.communication-product-page .product-main-image-wrap {
  height: 610px;
}

.communication-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   HERO BRAND IMAGE CONTROL
========================= */

.home-hero-wordmark img {
  display: block;

  /* Width control */
  width: 1000px;

  /* Height control */
  height: 280px;

  /* Sharpness controls */
  filter:
    contrast(1.2)
    saturate(1.25)
    brightness(0.97);

  /* Optional */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* CENTER ONLY THE HERO "WELCOME TO" */
.home-hero-content > .home-kicker {
  width: 100% !important;
  text-align: center !important;
}

/* =========================
   ACTIVITY KIT PRODUCT THUMBNAILS
========================= */

.explorer-kit-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 105px));
  gap: 12px;
  margin-top: 16px;
}

.explorer-kit-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.explorer-kit-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   EXPLORER KIT IMAGE HEIGHT CONTROL
========================= */

.explorer-kit-product-page .product-main-image-wrap {
  height: var(--explorer-image-height, 600px);
}

.explorer-kit-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   LEARNER KIT PRODUCT PAGE
========================= */

.learner-kit-product-page {
  --learner-image-height: 610px;
}

.learner-kit-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 105px));
  gap: 12px;
  margin-top: 16px;
}

.learner-kit-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.learner-kit-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learner-kit-product-page .product-main-image-wrap {
  height: var(--learner-image-height);
}

.learner-kit-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   BEDTIME KIT PRODUCT PAGE
========================= */

.bedtime-kit-product-page {
  --bedtime-image-height: 600px;
}

.bedtime-kit-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 105px));
  gap: 12px;
  margin-top: 16px;
}

.bedtime-kit-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e9e3dc;
  background: #fff;
  cursor: pointer;
}

.bedtime-kit-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bedtime-kit-product-page .product-main-image-wrap {
  height: var(--bedtime-image-height);
}

.bedtime-kit-product-page .product-gallery-card {
  align-self: start;
}

/* =========================
   WOODEN LETTER BAG TAGS
========================= */

.wooden-tag-product-page {
  --wooden-image-height: 430px;
}

.wooden-tag-product-page .product-main-grid {
  align-items: start !important;
}

.wooden-tag-product-page .product-gallery-card,
.wooden-tag-product-page .product-details-card {
  height: auto !important;
  min-height: 0 !important;
}

.wooden-tag-product-page .product-main-image-wrap {
  height: var(--wooden-image-height) !important;
}

.wooden-tag-product-page .product-gallery-card {
  align-self: start !important;
}

.wooden-tag-product-page .product-details-card {
  padding-bottom: 24px !important;
}

.wooden-tag-product-page .shopify-secure-note {
  margin-top: 12px !important;
}

.wooden-tag-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 105px));
  gap: 12px;
  margin-top: 16px;
}

.wooden-tag-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e9e3dc;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wooden-tag-product-page .product-thumb-btn:hover {
  transform: translateY(-2px);
}

.wooden-tag-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LETTER PICKER */

.letter-picker {
  margin-top: 18px;
}

.letter-picker-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.letter-btn {
  height: 42px;
  border: 1px solid #e3d9cf;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.letter-btn:hover {
  transform: translateY(-2px);
}

.letter-btn.active {
  background: #f6e9df;
  border-color: #d6b79d;
}

.selected-letter-value {
  font-weight: 700;
}

/* MOBILE */

@media (max-width: 768px) {
  .letter-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================
   WOODEN LETTER SELECTOR
========================= */

.wooden-letter-selection-card {
  background: #ffffff;
  border: 1px solid #eee7df;
  border-radius: 24px;
  padding: 40px;
  margin: 32px 0;
  text-align: center;
}

.wooden-letter-selection-card h2 {
  margin-bottom: 24px;
  font-size: 32px;
}

.wooden-letter-selection-card .letter-picker {
  margin-top: 0;
}

.wooden-letter-selection-card .letter-grid {
  max-width: 900px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 10px;
}

.wooden-letter-selection-card .letter-btn {
  height: 54px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
}

.wooden-letter-selection-card .personalization-note {
  margin-top: 20px;
  font-size: 18px;
}

.wooden-letter-selection-card .product-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wooden-letter-selection-card .shopify-secure-note {
  margin-top: 18px;
  text-align: center;
}

/* MOBILE */

@media (max-width: 768px) {

  .wooden-letter-selection-card {
    padding: 24px;
  }

  .wooden-letter-selection-card .letter-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .wooden-letter-selection-card h2 {
    font-size: 24px;
  }

}

.wooden-letter-selection-card .letter-grid {
  display: grid;
  grid-template-columns: repeat(13, 60px);
  justify-content: center;
  gap: 12px;
  margin: 24px auto;
}

.wooden-letter-selection-card .product-actions {
  justify-content: center;
}

.wooden-letter-selection-card .shopify-secure-note {
  text-align: center;
  margin-top: 16px;
}

.wooden-letter-selection-card {
  max-width: 950px;
  margin: 40px auto;
}

.wooden-tag-product-page {
  --wooden-image-height: 540px;
}

.wooden-tag-product-page .product-main-image-wrap {
  height: var(--wooden-image-height);
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(13, 55px);
  justify-content: center;
  gap: 10px;
}

/* =========================
   STOP SIDEWAYS PAGE SHIFT
========================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.activity-kit-page,
.activity-kit-main,
.activity-kit-section,
.activity-kit-grid,
.product-page,
.home-premium-main {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* =========================
   LEGAL POLICY PAGES
========================= */

.policy-embed-page {
  max-width: 1100px;
  margin: 60px auto;
  padding: 40px;
  background: #fff;
  border-radius: 24px;
}

.policy-iframe-wrap {
  width: 100%;
  height: 700px;
  margin: 30px 0;
  border: 1px solid #eee1d8;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.policy-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.legal-extra-links {
  margin: 30px 0;
}

.legal-extra-links a {
  font-weight: 700;
}

/* =========================
   LEGAL PAGE BUTTON SPACING
========================= */

.policy-embed-page .btn {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 12px;
}

.policy-embed-page .btn.secondary {
  margin-left: 12px;
}

/* =========================
   CONTACT PAGE FORM
========================= */

.contact-page {
  max-width: 800px;
}

.contact-form {
  display: grid;
  gap: 18px;
  margin: 30px 0;
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #eadfd7;
  border-radius: 14px;
  font: inherit;
  background: #fff;
}

.contact-form textarea {
  resize: vertical;
}

.optional-text {
  font-weight: 400;
  opacity: 0.7;
}

.contact-support-note {
  margin-top: 18px;
}

.thank-you-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* =========================
   STICKER PRODUCT PAGE THUMBNAILS
========================= */

.sticker-product-page .product-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 92px));
  gap: 12px;
  margin-top: 16px;
}

.sticker-product-page .product-thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.sticker-product-page .product-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   AFFIRMATION STICKERS IMAGE HEIGHT
========================= */

.sticker-product-page .product-main-image-wrap {
  height: 560px;
}

.sticker-product-page #shopify-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special-occasion-page .shopify-card-price {
  display: none !important;
}

.special-occasion-page .shopify-read-more-btn {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: #b96f80;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.special-occasion-page .shopify-read-more-btn:hover {
  text-decoration: underline;
}

/* =========================
   DESCRIPTION READ MORE MODAL
========================= */

.description-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(45, 35, 35, 0.45);
}

.description-modal.show {
  display: flex;
}

.description-modal-content {
  position: relative;
  width: min(92vw, 520px);
  max-height: 80vh;
  overflow-y: auto;
  background: #fffaf7;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(80, 50, 50, 0.22);
}

.description-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #8b5f66;
}

#description-modal-title {
  margin: 0 36px 12px 0;
  font-size: 24px;
}

#description-modal-text {
  margin: 0;
  line-height: 1.7;
  color: #5f4a4d;
}

.easter-product-page .product-main-image-wrap {
  height: 460px;
}

.easter-product-page #shopify-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   PRODUCT PAGES — DESKTOP HEIGHT CONTROL
========================= */

@media (min-width: 769px) {

  .product-page .product-gallery-card {
    min-height: 720px !important;
  }

  .product-page .product-main-image-wrap {
    height: 650px !important;
  }

  .product-page .product-details-card {
    min-height: 720px !important;
  }

  .product-page .product-description-box {
    max-height: none !important;
    overflow: visible !important;
  }

}

.cart-item-options {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: #7a5f58;
  line-height: 1.3;
}

.cart-item-options span {
  display: block;
}

#shopify-main-image,
.product-main-image-wrap img {
  cursor: zoom-in;
}

.checkout-policy-links {
  margin: 14px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  font-size: 0.85rem;
}

.checkout-policy-links a {
  color: #7a5f58;
  text-decoration: underline;
}

/* =========================
   COMING SOON PRODUCTS ONLY
========================= */

.coming-soon-link {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.coming-soon-card {
  position: relative;
}

.coming-soon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  background: #e8c8a0;
  color: #5f4b32;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.85);
  color: #6b4f3f;

  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-arrow:hover {
  background: #fff;
}

/* =========================
   OUR STORY PAGE
========================= */

.story-page-hero {
  position: relative;
  padding: 95px 24px 85px;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.9),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #fff8f3 0%,
      #fce9e4 50%,
      #f7ded8 100%
    );
  text-align: center;
  overflow: hidden;
}

.story-page-hero::before,
.story-page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.story-page-hero::before {
  width: 240px;
  height: 240px;
  top: -110px;
  left: -70px;
  background: rgba(255, 255, 255, 0.45);
}

.story-page-hero::after {
  width: 310px;
  height: 310px;
  right: -130px;
  bottom: -170px;
  background: rgba(255, 255, 255, 0.32);
}

.story-page-hero-inner {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  margin: 0 auto;
}

.story-page-hero .home-kicker {
  margin-bottom: 14px;
}

.story-page-hero h1 {
  margin: 0;
  color: #5e4038;
  font-size: clamp(42px, 7vw, 78px);
  line-height: 1;
  letter-spacing: -2px;
}

.story-page-hero-inner > p:last-child {
  width: min(680px, 100%);
  margin: 24px auto 0;
  color: #725850;
  font-size: 18px;
  line-height: 1.8;
}


/* =========================
   OUR STORY MARQUEE
========================= */

.story-marquee {
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  background: #ead8c8;
  color: #5e4038;
}

.story-marquee .home-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 42px;
  animation: storyMarqueeMove 32s linear infinite;
}

.story-marquee .home-marquee-track span {
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.story-marquee .home-marquee-track span::after {
  content: "✦";
  position: absolute;
  right: -26px;
  color: #a97b6d;
}

@keyframes storyMarqueeMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================
   STORY PAGE MAIN AREA
========================= */

.story-page-main {
  background: #fffaf7;
}

.story-content-section {
  padding: 90px 24px 70px;
}

.story-content-card {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 60px;
  background: #ffffff;
  border: 1px solid rgba(112, 75, 65, 0.12);
  border-radius: 30px;
  box-shadow: 0 24px 65px rgba(99, 66, 57, 0.1);
}

.story-content-card .home-kicker {
  margin-bottom: 12px;
}

.story-content-card h2 {
  margin: 0 0 30px;
  color: #5e4038;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
}

.story-shopify-body {
  color: #604c46;
  font-size: 17px;
  line-height: 1.9;
}

.story-shopify-body p {
  margin: 0 0 22px;
}

.story-shopify-body p:last-child {
  margin-bottom: 0;
}

.story-shopify-body h1,
.story-shopify-body h2,
.story-shopify-body h3,
.story-shopify-body h4 {
  margin: 34px 0 16px;
  color: #5e4038;
  line-height: 1.25;
}

.story-shopify-body h2 {
  font-size: 30px;
}

.story-shopify-body h3 {
  font-size: 24px;
}

.story-shopify-body ul,
.story-shopify-body ol {
  margin: 20px 0;
  padding-left: 28px;
}

.story-shopify-body li {
  margin-bottom: 10px;
}

.story-shopify-body strong {
  color: #4f352e;
}

.story-shopify-body a {
  color: #a85f51;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story-shopify-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 30px auto;
  border-radius: 20px;
}


/* =========================
   OUR STORY VALUES
========================= */

.story-values-section {
  padding: 70px 24px 90px;
}

.story-values-heading {
  width: min(720px, 100%);
  margin: 0 auto 45px;
  text-align: center;
}

.story-values-heading h2 {
  margin: 10px 0 18px;
  color: #5e4038;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
}

.story-values-heading > p:last-child {
  margin: 0;
  color: #715850;
  font-size: 17px;
  line-height: 1.75;
}

.story-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.story-value-card {
  padding: 38px 30px;
  background: #ffffff;
  border: 1px solid rgba(112, 75, 65, 0.12);
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 16px 38px rgba(99, 66, 57, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.story-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(99, 66, 57, 0.13);
}

.story-value-icon {
  display: flex;
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8e3dc;
  color: #754b40;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}

.story-value-card h3 {
  margin: 0 0 14px;
  color: #5e4038;
  font-size: 23px;
}

.story-value-card p {
  margin: 0;
  color: #735c55;
  font-size: 15px;
  line-height: 1.75;
}


/* =========================
   OUR STORY SHOP SECTION
========================= */

.story-shop-section {
  padding: 10px 24px 100px;
}

.story-shop-card {
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 65px 40px;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.62),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #f7ded8,
      #fceee9
    );
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
}

.story-shop-card::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  top: -120px;
  left: -90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.story-shop-card > * {
  position: relative;
  z-index: 1;
}

.story-shop-card h2 {
  width: min(720px, 100%);
  margin: 12px auto 18px;
  color: #5e4038;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
}

.story-shop-card > p:not(.home-kicker) {
  width: min(690px, 100%);
  margin: 0 auto;
  color: #70564f;
  font-size: 17px;
  line-height: 1.75;
}

.story-shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}

.story-shop-actions .btn {
  min-width: 190px;
  text-align: center;
}


/* =========================
   OUR STORY RESPONSIVE
========================= */

@media (max-width: 900px) {
  .story-values-grid {
    grid-template-columns: 1fr;
    width: min(620px, 100%);
  }

  .story-content-card {
    padding: 45px 34px;
  }
}

@media (max-width: 640px) {
  .story-page-hero {
    padding: 70px 20px 65px;
  }

  .story-page-hero h1 {
    letter-spacing: -1px;
  }

  .story-page-hero-inner > p:last-child {
    font-size: 16px;
    line-height: 1.7;
  }

  .story-content-section {
    padding: 55px 16px 45px;
  }

  .story-content-card {
    padding: 34px 22px;
    border-radius: 22px;
  }

  .story-shopify-body {
    font-size: 16px;
    line-height: 1.8;
  }

  .story-values-section {
    padding: 45px 16px 65px;
  }

  .story-value-card {
    padding: 32px 23px;
  }

  .story-shop-section {
    padding: 0 16px 70px;
  }

  .story-shop-card {
    padding: 48px 22px;
    border-radius: 24px;
  }

  .story-shop-actions {
    flex-direction: column;
  }

  .story-shop-actions .btn {
    width: 100%;
  }

  .story-marquee .home-marquee-track {
    gap: 34px;
    animation-duration: 25s;
  }

  .story-marquee .home-marquee-track span {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-marquee .home-marquee-track {
    animation: none;
  }

  .story-value-card {
    transition: none;
  }
}

/* =========================
   FINAL MOBILE FIXES
   KENZIEPRINTS
========================= */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* TOP MESSAGE BAR */

  .home-top-message {
    padding: 10px 16px;
  }

  .home-top-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .home-social-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    width: 100%;
  }

  .home-social-quick a {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }

  .home-brand-message {
    display: none;
  }


  /* HEADER */

  .home-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 16px;
  }

  .home-logo {
    display: block;
    width: min(250px, 80%);
    margin: 0 auto;
  }

  .home-logo-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }


  /* MOBILE NAVIGATION */

  .home-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    width: 100%;
  }

  .home-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f5e8dc;
    color: #5e4038;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .home-nav a:hover {
    background: #ead8c8;
  }

  .home-nav .cart-link {
    gap: 5px;
  }

  .cart-count-badge {
    position: static;
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border-radius: 50%;
    font-size: 11px;
  }


  /* HERO */

  .home-hero {
    min-height: auto;
    padding: 48px 18px;
  }

  .home-hero-inner,
  .home-hero-content {
    width: 100%;
    max-width: 100%;
  }

  .home-hero h1 {
    font-size: clamp(34px, 11vw, 52px);
    line-height: 1.05;
  }

  .home-hero p {
    font-size: 15px;
    line-height: 1.7;
  }


  /* MOVING BAR */

  .home-marquee,
  .story-marquee {
    overflow: hidden;
  }


  /* HOMEPAGE SHOPPING ROWS */

  .home-premium-main,
  .home-shop,
  .home-shop-section {
    width: 100%;
    max-width: 100%;
  }

  .home-premium-row,
  .home-shop-row,
  .home-collection-row,
  .home-category-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    margin-bottom: 28px;
  }

  .home-premium-row > *,
  .home-shop-row > *,
  .home-collection-row > *,
  .home-category-row > * {
    width: 100%;
    max-width: 100%;
  }

  .home-premium-copy,
  .home-shop-copy,
  .home-category-copy {
    padding: 28px 22px;
  }

  .home-premium-image,
  .home-shop-image,
  .home-category-image {
    width: 100%;
    min-height: 320px;
  }

  .home-premium-image img,
  .home-shop-image img,
  .home-category-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
  }

  .home-premium-row:nth-child(even) .home-premium-copy,
  .home-premium-row:nth-child(even) .home-premium-image {
    order: initial;
  }

  .home-premium-copy h2,
  .home-shop-copy h2,
  .home-category-copy h2 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.05;
  }

  .home-premium-copy p,
  .home-shop-copy p,
  .home-category-copy p {
    font-size: 15px;
    line-height: 1.65;
  }


  /* BUTTONS */

  .btn,
  .home-premium-copy .btn,
  .home-shop-copy .btn {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 13px 18px;
    text-align: center;
  }


  /* TRUST BAR */

  .home-trust-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-trust-bar div {
    padding: 14px 16px;
    text-align: center;
  }


  /* FOOTER */

  .home-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .home-footer-grid > div {
    width: 100%;
  }


  /* CART DRAWER */

  .cart-drawer {
    width: min(92vw, 420px);
    max-width: 92vw;
  }

}


/* EXTRA SMALL PHONES */

@media (max-width: 430px) {

  .home-top-message {
    padding: 8px 10px;
  }

  .home-social-quick {
    gap: 6px 10px;
  }

  .home-social-quick a {
    font-size: 11px;
  }

  .home-header {
    padding: 16px 12px;
  }

  .home-logo {
    width: min(225px, 82%);
  }

  .home-nav {
    gap: 7px;
  }

  .home-nav a {
    padding: 8px 10px;
    font-size: 11px;
  }

  .home-premium-main,
  .home-shop {
    padding-left: 12px;
    padding-right: 12px;
  }

  .home-premium-copy,
  .home-shop-copy,
  .home-category-copy {
    padding: 24px 18px;
  }

  .home-premium-image,
  .home-shop-image,
  .home-category-image,
  .home-premium-image img,
  .home-shop-image img,
  .home-category-image img {
    min-height: 280px;
  }

}

@media (max-width: 768px) {
  .home-top-inner {
    gap: 4px;
  }

  .home-social-quick {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 6px 18px;
  }

  .home-social-quick a:last-child {
    grid-column: 1 / -1;
  }

  .home-brand-message {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .home-premium-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
  }

  .home-premium-copy,
  .home-premium-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-premium-copy {
    padding: 28px 22px !important;
  }

  .home-premium-image img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .home-marquee-track,
  .story-marquee .home-marquee-track {
    flex-shrink: 0;
    min-width: max-content;
  }

  .home-marquee-track span,
  .story-marquee .home-marquee-track span {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* =========================
   FINAL HOMEPAGE MOBILE POLISH
========================= */

@media (max-width: 768px) {

  /* Stack each homepage collection vertically */

  .home-premium-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden;
  }

  /* Put the collection image first */

  .home-premium-row .home-premium-image {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  .home-premium-row .home-premium-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
  }

  /* Put the title, description and button beneath the image */

  .home-premium-row .home-premium-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 22px 32px !important;
    border-radius: 0 0 22px 22px;
  }

  .home-premium-copy h2 {
    margin-bottom: 14px;
  }

  .home-premium-copy p {
    margin-bottom: 22px;
  }

  /* Fix Browse Stickers and other collection buttons */

  .home-premium-copy .btn {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px;
    margin: 24px 0 0 !important;
    padding: 13px 18px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

}


/* Extra spacing for small phones */

@media (max-width: 430px) {

  .home-premium-row .home-premium-copy {
    padding: 24px 18px 28px !important;
  }

  .home-premium-copy .btn {
    margin-top: 20px !important;
  }

}

/* =========================================
   EXACT HOMEPAGE MOBILE COLLECTION FIX
========================================= */

@media (max-width: 768px) {

  .home-story-row,
  .home-story-row.reverse {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden;
    border-radius: 24px;
  }

  /* Image always appears first */

  .home-story-row .home-story-image,
  .home-story-row.reverse .home-story-image {
    order: 1 !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-story-row .home-story-image img,
  .home-story-row.reverse .home-story-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }

  /* Wording and button appear under image */

  .home-story-row .home-story-card,
  .home-story-row.reverse .home-story-card {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 28px 22px 32px !important;
    border-radius: 0 0 24px 24px;
    overflow: visible !important;
  }

  .home-story-card h2 {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 14px;
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .home-story-card p {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.65;
  }

  /* View Learning Cards and Browse Stickers */

  .home-story-link {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    box-sizing: border-box;
    margin-top: 22px !important;
    padding: 13px 18px !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    text-align: center;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

}

@media (max-width: 430px) {

  .home-story-row .home-story-card,
  .home-story-row.reverse .home-story-card {
    padding: 24px 18px 28px !important;
  }

  .home-story-card h2 {
    font-size: 34px !important;
  }

}

/* =========================================
   HOMEPAGE MOBILE HERO — FINAL LAYOUT
========================================= */

@media (max-width: 768px) {

  .home-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: 100%;
    padding: 48px 20px 54px !important;
    text-align: center;
  }

  .home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    max-width: 520px !important;
  }

  .home-hero .home-kicker {
    order: 1;
    margin: 0 0 22px !important;
  }

  .home-hero-wordmark {
    order: 2;
    width: min(300px, 82%) !important;
    margin: 0 auto 28px !important;
  }

  .home-hero-wordmark img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  /* Lifestyle image under the wordmark */

  .home-hero-image {
    order: 2;
    display: block;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 28px !important;
  }

  .home-hero-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
  }

  /* Button beneath the image */

  .home-hero-actions {
    order: 3;
    width: 100%;
    max-width: 320px;
    margin: 0 auto !important;
  }

  .home-hero-actions .btn {
    display: flex;
    width: 100% !important;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }

}


/* Smaller phones */

@media (max-width: 430px) {

  .home-hero {
    padding: 42px 16px 48px !important;
  }

  .home-hero-wordmark {
    width: min(270px, 84%) !important;
    margin-bottom: 24px !important;
  }

  .home-hero-image {
    margin-bottom: 24px !important;
  }

}

/* =========================================
   LEARNING PAGE MOBILE CARD ORDER + BUTTON FIX
========================================= */

@media (max-width: 768px) {

  .learning-row,
  .learning-row.reverse {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden;
    border-radius: 24px;
  }

  /* Always show image first */

  .learning-row .learning-image,
  .learning-row.reverse .learning-image {
    order: 1 !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .learning-row .learning-image img,
  .learning-row.reverse .learning-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }

  /* Text and button below image */

  .learning-row .learning-card,
  .learning-row.reverse .learning-card {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 28px 22px 32px !important;
    border-radius: 0 0 24px 24px;
    overflow: visible !important;
  }

  .learning-card h2 {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 14px;
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    word-break: normal;
    overflow-wrap: normal;
  }

  .learning-card p {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.65;
  }

  /* Exact button fix */

  .learning-card .home-story-link {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    box-sizing: border-box;
    margin-top: 22px !important;
    padding: 13px 14px !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* Slightly smaller text for the longest button */

  .learning-row:last-of-type .home-story-link {
    font-size: 14px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

}

@media (max-width: 430px) {

  .learning-row .learning-card,
  .learning-row.reverse .learning-card {
    padding: 24px 18px 28px !important;
  }

  .learning-card h2 {
    font-size: 34px !important;
  }

  .learning-row:last-of-type .home-story-link {
    font-size: 13px !important;
  }

}

/* =========================================
   FINAL LEARNING MOBILE HEIGHT FIX
========================================= */

@media (max-width: 768px) {

  .learning-row,
  .learning-row.reverse {
    height: auto !important;
    min-height: 0 !important;
  }

  .learning-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .learning-card .home-story-link {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
  }

}

/* =========================================
   STICKER PAGE MOBILE ORDER + BUTTON FIX
========================================= */

@media (max-width: 768px) {

  .sticker-row,
  .sticker-row.reverse {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border-radius: 24px;
  }

  /* Image first */

  .sticker-row .sticker-image,
  .sticker-row.reverse .sticker-image {
    order: 1 !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sticker-row .sticker-image img,
  .sticker-row.reverse .sticker-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }

  /* Text and button beneath image */

  .sticker-row .sticker-card,
  .sticker-row.reverse .sticker-card {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    padding: 28px 22px 32px !important;
    border-radius: 0 0 24px 24px;
    overflow: visible !important;
  }

  .sticker-card h2 {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 14px;
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    word-break: normal;
    overflow-wrap: normal;
  }

  .sticker-card p {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.65;
  }

  .sticker-card .home-story-link {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    box-sizing: border-box;
    margin: 22px 0 0 !important;
    padding: 13px 14px !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    text-align: center;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

}

@media (max-width: 430px) {

  .sticker-row .sticker-card,
  .sticker-row.reverse .sticker-card {
    padding: 24px 18px 28px !important;
  }

  .sticker-card h2 {
    font-size: 34px !important;
  }

  .sticker-card .home-story-link {
    font-size: 14px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

}

/* =========================================
   PRODUCT PAGES — FINAL MOBILE LAYOUT
========================================= */

@media (max-width: 768px) {

  /* Prevent equal-height cards and blank space */

  .product-main-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .product-gallery-card,
  .product-details-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: auto !important;
    box-sizing: border-box;
  }

  .product-gallery-card {
    display: block !important;
    padding-bottom: 20px !important;
  }


  /* Shorter main product image */

  .product-main-image-wrap {
    display: block !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 0 !important;
    max-height: 360px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px;
  }

  .product-main-image-wrap img,
  #shopify-main-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }


  /* Thumbnails directly beneath main image */

  .product-thumbnail-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
  }

  .product-thumb-btn {
    width: 100% !important;
    height: 92px !important;
    min-height: 0 !important;
  }

  .product-thumb-btn img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }


  /* Product information card */

  .product-details-card {
    display: block !important;
    padding: 28px 22px !important;
    overflow: visible !important;
  }


  /* Scrollable description */

  #shopify-product-description.product-description-box {
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    box-sizing: border-box !important;
    margin: 20px 0 !important;
    padding: 16px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(112, 75, 65, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
    line-height: 1.65 !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  #shopify-product-description.product-description-box > *:first-child {
    margin-top: 0 !important;
  }

  #shopify-product-description.product-description-box > *:last-child {
    margin-bottom: 0 !important;
  }

  #shopify-product-description.product-description-box::-webkit-scrollbar {
    width: 6px;
  }

  #shopify-product-description.product-description-box::-webkit-scrollbar-track {
    background: rgba(112, 75, 65, 0.08);
    border-radius: 999px;
  }

  #shopify-product-description.product-description-box::-webkit-scrollbar-thumb {
    background: rgba(188, 109, 126, 0.65);
    border-radius: 999px;
  }


  /* Purchase buttons immediately below description */

  .product-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
  }

  .product-actions .shop-btn,
  .product-actions .btn {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    text-align: center;
  }

}


@media (max-width: 430px) {

  .product-main-image-wrap {
    height: 320px !important;
    max-height: 320px !important;
  }

  .product-thumb-btn {
    height: 82px !important;
  }

  .product-details-card {
    padding: 25px 18px !important;
  }

  #shopify-product-description.product-description-box {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 14px 15px !important;
    font-size: 15px;
  }

}

/* =========================================
   PRODUCT PAGE — REMOVE EMPTY MOBILE SPACE
========================================= */

@media (max-width: 768px) {

  .product-main-grid {
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .product-gallery-card,
  .product-details-card {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;

    width: 100% !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
  }

  .product-gallery-card {
    padding-bottom: 18px !important;
  }

  .product-thumbnail-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .product-details-card {
    padding-bottom: 26px !important;
  }

  /* Slightly taller scrollable description */

  #shopify-product-description.product-description-box {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  .shopify-secure-note {
    margin-bottom: 0 !important;
  }

}

@media (max-width: 430px) {

  #shopify-product-description.product-description-box {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }

}