/* === Global Theme Variables (aligned with newsletter page) === */
:root {
  --bg-soft:#F2F6FC;
  --panel:#FFFFFF;
  --ink:#1f2d3d;
  --ink-soft:#5d6b78;
  --accent:#5A67D8;
  --accent-hover:#4856b8;
  /* Pink accent to match "Shop now" button on index (Tailwind pink-300) */
  --accent-pink:#f9a8d4;
  --warn:#E94E77;
  --danger:#ff6b6b;
  --danger-soft:#fff7f7;
  --border-soft:rgba(0,0,0,0.08);
  --shadow-soft:0 2px 8px rgba(0,0,0,0.08);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
}

body {
  background: var(--bg-soft);
  color: var(--ink);
}

/* === Left/Shop Overlay Menu (opens like wishlist but on the LEFT) === */
/* Keep container mounted to allow smooth transform transitions */
.lmenu{ position:fixed; inset:0; display:block; pointer-events:none; z-index:1300; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.lmenu.show{ pointer-events:auto; }
/* Backdrop timing mirrors wishlist overlay */
.lmenu-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:saturate(140%) blur(2px); opacity:0; transition:opacity .3s ease; }
.lmenu.show .lmenu-backdrop{ opacity:1; }
/* Drawer anchored on the LEFT, with mirrored shadow and border */
.lmenu-panel{ position:absolute; top:0; left:0; right:auto; height:100%; width:380px; max-width:100%; background:var(--panel); border-right:1px solid var(--border-soft); box-shadow:4px 0 22px -4px rgba(0,0,0,.25); transform:translateX(-110%); transition:transform .38s cubic-bezier(.65,.05,.36,1); display:flex; flex-direction:column; padding:18px 18px calc(20px + env(safe-area-inset-bottom, 0)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; will-change: transform; }
.lmenu.show .lmenu-panel{ transform:translateX(0); }
.lmenu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; background:#F5F3F0; border-bottom:1px solid #eee; padding:.9rem 1.1rem .85rem 1.1rem; border-top-left-radius:12px; border-top-right-radius:12px; }
.lmenu-brand{ display:flex; align-items:center; gap:10px; }
.lmenu-brand img{ height:56px; width:auto; display:block; border-radius:12px; border:1px solid var(--border-soft); background:#fff; }
.lmenu-close{ background:transparent; border:none; color:var(--ink-soft); font-size:14px; cursor:pointer; padding:6px 8px; border-radius:6px; }
.lmenu-close:hover{ color:var(--ink); background:#f3f4f6; }
.lmenu-nav{ margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.lm-link, .lm-trigger{ display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:var(--ink); padding:10px 10px; border-radius:12px; background:transparent; border:none; cursor:pointer; }
.lm-link:hover, .lm-trigger:hover{ background:#f9fafb; }
.lm-text{ font-size:16px; font-weight:700; letter-spacing:.01em; }
.lm-trigger.lm-group .lm-text{ font-size:20px; }
.lm-chevron{ width:16px; height:16px; color:var(--ink-soft); transition:transform .2s ease; margin-left:10px; }
.lm-trigger[aria-expanded="true"] .lm-chevron{ transform:rotate(180deg); color:var(--danger); }
.lm-panel{ overflow:hidden; max-height:0; transition:max-height .25s ease; border-left:3px solid transparent; margin-left:4px; }
.lm-panel.open{ border-left-color:#ffe0e0; }
.lm-sublist{ display:flex; flex-direction:column; gap:2px; padding:6px 0 6px 6px; }
.lm-subitem{ display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; color:var(--ink); text-decoration:none; }
.lm-subitem:hover{ background:var(--danger-soft); color:var(--ink); }
.lm-subitem img{ width:22px; height:22px; object-fit:contain; }
.lmenu-socials{ margin-top:auto; padding-top:18px; border-top:1px solid #eef1f4; }
.lm-socials-title{ color:var(--ink-soft); font-size:12px; font-weight:800; letter-spacing:.08em; margin-bottom:10px; text-transform:uppercase; text-align:center; }
.lm-socials{ display:flex; gap:18px; row-gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.lm-socials a{ color:#1f2937; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; transition:background .2s ease, transform .1s ease, color .2s ease; }
.lm-socials a:hover{ background:#eef2f7; color:#111827; transform:translateY(-1px); }
.lm-socials a:focus-visible{ outline:2px solid #cbd5e1; outline-offset:2px; background:#eef2f7; }
.lm-socials svg{ width:26px; height:26px; }

/* Small floating "Menu" trigger for pages without header */
.lmenu-fab{ position:fixed; top:18px; left:18px; z-index:1100; border:1px solid var(--border-soft); background:rgba(255,255,255,0.85); backdrop-filter:saturate(140%) blur(2px); border-radius:12px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.lmenu-fab:hover{ background:#fff; }
.lmenu-fab svg{ width:22px; height:22px; color:var(--ink-soft); }

/* Mobile: full-width drawer like wishlist */
@media (max-width:640px){
  .lmenu-panel{ width:100%; }
}

/* Generic responsive images */
img { max-width: 100%; height: auto; }

/* Product card images: constrain size (override generic img rule) */
.product-card img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.75rem auto;
}

/* Alias class for images injected without relying solely on parent selector */
.product-img { width:140px; height:140px; object-fit:contain; display:block; margin:0 auto 0.75rem auto; }

/* Wishlist heart button */
.heart-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: #ffffffcc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  z-index: 2;
  overflow: hidden; /* clip shimmer within circle */
}
.heart-btn:hover { transform: scale(1.06); background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.10); }
.heart-btn .icon { font-size: 16px; color: #b8c1cc; transition: color .2s ease, filter .2s ease, text-shadow .2s ease; }
/* If the icon is an SVG, size it similarly to the emoji */
.heart-btn .icon[type="svg"],
.heart-btn .icon svg { width: 18px; height: 18px; display: block; }
.heart-btn:hover .icon { filter: drop-shadow(0 1px 4px rgba(249,168,212,.35)); text-shadow: 0 1px 4px rgba(249,168,212,.25); }
.heart-btn.active .icon { color: var(--accent-pink); }
.heart-btn.active { border-color: #ffd6d6; background: var(--danger-soft); }

/* Shimmer sweep that traverses the whole button */
.heart-btn::after {
  content:"";
  position:absolute;
  top: -10px;          /* extend beyond circle to ensure full coverage */
  left: -48px;         /* start well outside left */
  width: 80px;         /* wide sweep to cover entire circle */
  height: 54px;        /* taller than button for rotated sweep */
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(25deg);
  opacity: 0;
  transition: left .45s ease, opacity .2s ease;
  border-radius: 8px;
}
.heart-btn:hover::after { left: 48px; opacity: 1; }

/* Header wishlist heart (index) – color + hover shine */
#wishlistBtn { position: relative; color: var(--accent-pink); }
#wishlistBtn svg { position: relative; z-index: 1; transition: transform .15s ease, filter .2s ease; }
#wishlistBtn:hover svg { transform: scale(1.12); filter: drop-shadow(0 2px 6px rgba(249,168,212,.45)); }
#wishlistBtn::after { content:""; position:absolute; top:-6px; left:-20px; width:10px; height:36px; pointer-events:none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); transform: rotate(25deg); opacity:0; transition: left .35s ease, opacity .2s ease; z-index: 0; }
#wishlistBtn:hover::after { left:18px; opacity:1; }
/* Keep header wishlist count badge above shine */
#wishlistBtn .nav-badge { z-index: 5; position: absolute; }

/* Shop page floating wishlist button (wishFab) */
/* Generic floating action button and badge (used by wishlist/cart FABs) */
.cart-fab { position: fixed; bottom: 18px; right: 18px; z-index: 1200; background:#F5F3F0; border:none; border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .25s ease, box-shadow .25s ease, background .25s; }
.cart-fab:hover { transform:scale(1.07); box-shadow:0 6px 18px rgba(0,0,0,.24); background:#EDEAE6; }
.cart-badge { position:absolute; top:-6px; right:-6px; background:#222; color:#fff; font-size:11px; line-height:1; padding:4px 6px; border-radius:14px; font-weight:600; min-width:22px; text-align:center; z-index:5; }
#wishFab { position: fixed; border-radius: 9999px; right: 18px !important; left: auto !important; }
/* Clipping container for shimmer + icon; badge remains outside and unclipped */
#wishFab .fab-clip { position:absolute; inset:0; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; z-index:0; pointer-events:none; }
#wishFab .heart-icon { width:28px; height:28px; display:block; color: var(--accent-pink); line-height:0; position: relative; z-index: 1; margin: 0; transform: translate(1px, 1px); transition: transform .15s ease, filter .2s ease; }
#wishFab:hover .heart-icon { transform: translate(1px, 1px) scale(1.12); filter: drop-shadow(0 2px 6px rgba(249,168,212,.45)); }
/* Shimmer lives on the clipped container so it cannot escape the circle */
#wishFab .fab-clip::after {
  content:"";
  position:absolute;
  top: -10px;
  left: -24px;          /* start outside left edge */
  width: 28px;
  height: 86px;         /* taller than circle for rotated sweep */
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(25deg);
  opacity: 0;
  transition: left .45s ease, opacity .25s ease;
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}
#wishFab:hover .fab-clip::after { left: 64px; opacity: 1; }
/* Badge stays above everything */
#wishFab .cart-badge { position: absolute; z-index: 6; }

/* Cart FAB shimmer and clipping (shop page) */
#cartFab { position: fixed; border-radius: 9999px; right: 18px; left: auto; }
#cartFab .fab-clip { position:absolute; inset:0; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; z-index:0; pointer-events:none; }
#cartFab img { position: relative; z-index: 1; width:34px; height:auto; display:block; }
#cartFab .fab-clip::after{
  content:"";
  position:absolute;
  top:-10px;
  left:-24px;
  width:28px;
  height:86px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(25deg);
  opacity:0;
  transition:left .45s ease, opacity .25s ease;
  border-radius:10px;
  pointer-events:none;
  z-index:0;
}
#cartFab:hover .fab-clip::after{ left:64px; opacity:1; }
/* Cart badge stays above shine */
#cartFab .cart-badge{ position:absolute; z-index:6; }

@media (max-width: 640px) {
  .product-card img { width: 110px; height: 110px; }
  .product-img { width:110px; height:110px; }
  .heart-btn { width: 32px; height: 32px; top: 6px; right: 6px; }
  .heart-btn .icon { font-size: 15px; }
  /* Vertical rhythm adjustments */
    .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
    /* Avoid parent padding clipping full-bleed sections */
    body { overflow-x: hidden; }
    /* Category horizontal scroll when many items */
    .categories-row { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; gap: 1rem !important; }
    .categories-row::-webkit-scrollbar { display: none; }
    .categories-row > div { flex: 0 0 auto; }
    .categories-row a { display: block; }
  .hero-section.full-bleed h1 { line-height: 1.15; margin-bottom: 0.75rem; }
  .hero-section.full-bleed h3 { margin-bottom: 0.35rem; letter-spacing: .5px; }
  .hero-section.full-bleed .carousel-container { height: 180px; }
  .category-section.full-bleed { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
  .category-section.full-bleed h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
  .category-section.full-bleed .flex.flex-col.items-center { margin-bottom: 0.75rem; }
  .category-section.full-bleed a[aria-label] { min-width: 120px; }
  /* Age cards tighten */
  .category-section.full-bleed .p-8 { padding: 1rem !important; }
  .category-section.full-bleed .text-2xl { font-size: 1.35rem !important; }
  .category-section.full-bleed .text-lg { font-size: 0.8rem !important; }
  /* Smooth scroll anchoring space */
  :root { scroll-padding-top: 72px; }
}

/* Unified site logo sizing */
.site-logo {
  height: 250px; 
  width: 400px;
  object-fit: cover;
  display: inline-block;
}

/* Cart logo (nav icon) – scalable similar style, smaller base */
.cart-logo {
  height: 28px; /* align with approximate emoji icon visual size */
  width: auto;
  vertical-align: middle;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
@media (max-width: 1024px) { .cart-logo { height: 26px; } }
@media (max-width: 768px) { .cart-logo { height: 25px; } }
@media (max-width: 640px) { .cart-logo { height: 24px; } }

/* Slightly crisper scaling on some browsers */
.site-logo { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

@media (max-width: 1280px) {
  .site-logo { height: 150px; }
}
@media (max-width: 1024px) {
  .site-logo { height: 120px; }
}
@media (max-width: 768px) {
  .site-logo { height: 100px; }
}
@media (max-width: 640px) {
  /* Größeres Logo auf sehr kleinen Screens + leichte Fluid-Skalierung */
  .site-logo { height: clamp(84px, 22vw, 108px); }
}

.to-top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  background: var(--danger);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 24px 4px rgba(255,107,107,0.35);
  z-index: 999;
  transition: transform 0.3s ease;
}

.to-top-button:hover {
  transform: scale(1.1);
}

.to-top-button .arrow {
  position: absolute;
  font-size: 20px;
  color: white;
  z-index: 10;
  pointer-events: none;
}

.text-circle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateCircle 10s linear infinite;
  pointer-events: none;
}

/* The following block seems to be misplaced and is missing a selector.
   If you need these styles, add a selector like .text-item, otherwise remove them. Example: */
/*
.text-item {
  position: absolute;
  font-size: 8px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.1px;
  font-weight: bold;
  transform-origin: center;
}
*/


.to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;           /* 👈 Button-Größe */
    height: 80px;
  background: var(--danger);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
    transition: transform 0.3s ease;
}

.to-top-button:hover {
    transform: scale(1.1);
}

.to-top-button .arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;       /* 👈 Kleinerer Pfeil */
  color: white;
  z-index: 10;
  pointer-events: none;
}

.to-top-button .text-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotateCircle 8s linear infinite;
    pointer-events: none;
}

.to-top-button .text-item {
    position: absolute;
    font-size: 6px;       /* 👈 Kleinere Schrift */
    color: white;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.5px;
    font-weight: normal;
    transform-origin: center;
}

/* Platzierung der Buchstaben im Kreis – jetzt mit translateX(30px) für mehr Abstand */
/*.text-item:nth-child(1) { transform: rotate(0deg) translateX(30px) rotate(0deg); }
.text-item:nth-child(2) { transform: rotate(300deg) translateX(30px) rotate(-30deg); }
.text-item:nth-child(3) { transform: rotate(60deg) translateX(30px) rotate(-60deg); }
.text-item:nth-child(4) { transform: rotate(90deg) translateX(30px) rotate(-90deg); }
.text-item:nth-child(5) { transform: rotate(120deg) translateX(30px) rotate(-120deg); }
.text-item:nth-child(6) { transform: rotate(150deg) translateX(30px) rotate(-150deg); }
.text-item:nth-child(7) { transform: rotate(180deg) translateX(30px) rotate(-180deg); }
.text-item:nth-child(8) { transform: rotate(210deg) translateX(30px) rotate(-210deg); }
.text-item:nth-child(9) { transform: rotate(240deg) translateX(30px) rotate(-240deg); }
.text-item:nth-child(10) { transform: rotate(270deg) translateX(30px) rotate(-270deg); }
.text-item:nth-child(11) { transform: rotate(300deg) translateX(30px) rotate(-300deg); }
.text-item:nth-child(12) { transform: rotate(330deg) translateX(30px) rotate(-330deg); }
.text-item:nth-child(13) { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
.text-item:nth-child(14) { transform: rotate(390deg) translateX(30px) rotate(-390deg); }*/
/* 12 Zeichen: T O   T O P   T O   T O P */
.text-item:nth-child(1) { transform: rotate(0deg) translateX(28px) rotate(0deg); }
.text-item:nth-child(2) { transform: rotate(30deg) translateX(28px) rotate(-30deg); }
.text-item:nth-child(3) { transform: rotate(60deg) translateX(28px) rotate(-60deg); }
.text-item:nth-child(4) { transform: rotate(90deg) translateX(28px) rotate(-90deg); }
.text-item:nth-child(5) { transform: rotate(120deg) translateX(28px) rotate(-120deg); }
.text-item:nth-child(6) { transform: rotate(150deg) translateX(28px) rotate(-150deg); }
.text-item:nth-child(7) { transform: rotate(180deg) translateX(28px) rotate(-180deg); }
.text-item:nth-child(8) { transform: rotate(210deg) translateX(28px) rotate(-210deg); }
.text-item:nth-child(9) { transform: rotate(240deg) translateX(28px) rotate(-240deg); }
.text-item:nth-child(10) { transform: rotate(270deg) translateX(28px) rotate(-270deg); }
.text-item:nth-child(11) { transform: rotate(300deg) translateX(28px) rotate(-300deg); }
.text-item:nth-child(12) { transform: rotate(330deg) translateX(28px) rotate(-330deg); }
.text-item:nth-child(13) { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
.text-item:nth-child(14) { transform: rotate(390deg) translateX(28px) rotate(-390deg); }
@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.carousel-container {
  position: relative;
  overflow: hidden;
  height: 300px; /* Desktop default */
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Utility color classes mapped to theme */
.bg-creme { background: var(--bg-soft); }
.border-creme { border-color: var(--bg-soft); }
.newsletter-bg { background: var(--panel); border-radius: 0.5rem; margin-top: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04); }
/* Ensure newsletter banner links use brand color (avoid default cyan/blue) */
.newsletter-bg a { color: var(--accent); }
.newsletter-bg a:hover { color: var(--accent-hover); }

/* Accordion (dropdown groups) */
.accordion-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease; }
.accordion-panel.open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
}
.accordion-trigger { cursor: pointer; }
.accordion-trigger[aria-expanded="true"] .accordion-arrow { transform: rotate(180deg); }
.accordion-arrow { transition: transform 0.25s ease; }


/* Mobile tweaks */
@media (max-width: 640px) {
  /* Shrink big utility heights on small screens */
  .h-36 { height: 56px !important; }
  
  /* Reduce large paddings commonly used in headers/sections */
  .px-16 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-16 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

  /* Ensure hero/media blocks fit the viewport width */
  .w-2\/5 { width: 100% !important; }
  .carousel-container { height: 200px; }

  /* To-top button smaller on phones */
  .to-top-button { width: 56px; height: 56px; }

  /* Header logo override (in case inline utility classes force larger sizes) */
  header img[alt="LuxCart Logo"] { height: 48px !important; }

  /* Hero Section stack */
  section.flex.items-center.justify-between.px-16.py-16 { flex-direction: column; gap: 1.5rem; padding: 2rem 1.25rem !important; }
  section.flex.items-center.justify-between.px-16.py-16 > div:first-child { text-align: center; }
  section.flex.items-center.justify-between.px-16.py-16 h1 { font-size: 1.9rem; }
  section.flex.items-center.justify-between.px-16.py-16 h3 { font-size: 0.85rem; }
  .carousel-container { width: 100% !important; }

  /* Age & Category cards shrink */
  section.text-center .p-8 { padding: 1.25rem !important; }
  section.text-center .p-8 .text-2xl { font-size: 1.5rem; }
  section.text-center .p-8 .text-lg { font-size: 0.85rem; }

  /* Round category circles smaller */
  .w-40.h-40 { width: 7.5rem !important; height: 7.5rem !important; }
  .h-24.w-24 { height: 4rem !important; width: 4rem !important; }

  /* Offers section stack */
  section.flex.px-16.py-12.gap-8 { flex-direction: column; padding: 2rem 1.25rem !important; }
  section.flex.px-16.py-12.gap-8 > div { width: 100%; }
  section.flex.px-16.py-12.gap-8 h3 { font-size: 1.1rem; }
  section.flex.px-16.py-12.gap-8 p { font-size: 0.85rem; }
  .shop-now-btn { padding: 0.5rem 1rem !important; font-size: 0.8rem; }

  /* Footer smaller */
  footer.py-6 { padding: 1.5rem 0 !important; font-size: 0.75rem; }
}

@media (max-width: 420px){
  /* Extra small tweaks */
  .site-logo { height: 60px !important; }
  section.flex.items-center.justify-between.px-16.py-16 h1 { font-size: 1.6rem; }
  .to-top-button { width: 50px; height: 50px; }
  section.text-center .p-8 { padding: 1rem !important; }
  .w-40.h-40 { width: 6.25rem !important; height: 6.25rem !important; }
  .h-24.w-24 { height: 3.25rem !important; width: 3.25rem !important; }
}