/* ====================================================
   Sibling Studio - Clean Offline Website
   Main Stylesheet
   ==================================================== */

/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--theme-primary, #d94f7a); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top Bar ---------- */
.top-bar {
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  padding: 8px 0;
  text-align: center;
  letter-spacing: 0.5px;
}
.top-bar a { color: var(--theme-primary-light, #ffc7d9); text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  position: relative;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.logo {
  font-family: 'Georgia', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a1a1a;
}
.logo span { color: var(--theme-primary, #d94f7a); }

/* ---------- Navigation ---------- */
.main-nav ul {
  display: flex;
  gap: 30px;
}
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s;
}
.main-nav a:hover {
  color: var(--theme-primary, #d94f7a);
}
.main-nav a.sale-link {
  color: var(--theme-primary, #d94f7a);
  font-weight: 700;
}

/* ---------- Header Icons ---------- */
.header-icons {
  display: flex;
  gap: 18px;
  align-items: center;
}
.header-icons button,
.header-icons a {
  font-size: 18px;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* ---------- Mobile Toggle ---------- */
.mobile-toggle {
  display: none;
  font-size: 22px;
}

/* ---------- Hero (base — single static hero) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #f6efe7;
}
/* Single-image hero (non-slider pages) */
.hero:not(.hero-slider) img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  max-width: 480px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2;
}
.hero-content h1 {
  font-family: 'Georgia', serif;
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.hero-content p {
  font-size: 16px;
  margin-bottom: 22px;
}

/* ---------- Hero Slider (multiple banners auto-rotating left→right) ---------- */
.hero.hero-slider {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: #f6efe7;
}
@media (max-width: 900px)  { .hero.hero-slider { height: 420px; } }
@media (max-width: 600px)  { .hero.hero-slider { height: 280px; } }

.hero-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* JS sets transform: translateX(...) to position and animate slides */
  will-change: transform;
}
/* .active class still used for dot highlighting only — layout is JS-driven */
.hero-slide.active { z-index: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: #1a1a1a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s;
}
.hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }

.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.hero-dot.active {
  background: #fff;
  transform: scale(1.15);
}
@media (max-width: 480px) {
  .hero-nav { width: 36px; height: 36px; font-size: 20px; }
}

.btn {
  display: inline-block;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  padding: 12px 30px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 30px;
  transition: background 0.3s, transform 0.2s;
}
.btn:hover {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  border: 2px solid #1a1a1a;
  color: #1a1a1a;
}
.btn-outline:hover {
  background: #1a1a1a;
  color: #fff;
}

/* ---------- Sections ---------- */
section { padding: 60px 0; }
.section-title {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
}
.section-sub {
  text-align: center;
  color: #666;
  margin-bottom: 40px;
  font-size: 15px;
}


/* ═══════════════════════════════════════════
   Horizontal Carousel  (hcarousel)
   Used for: Categories · New Arrivals · Bestsellers · Instagram
   ═══════════════════════════════════════════ */
.hcarousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hcarousel-viewport {
  flex: 1;
  min-width: 0;        /* critical: prevents flex child from overflowing */
  overflow-x: clip;    /* clips carousel slides horizontally only */
  overflow-y: visible; /* lets hovered cards lift above without clipping */
  padding: 10px 14px;  /* top/bottom: lift room; left/right: edge-card glow room */
}
.hcarousel-track {
  display: flex;
  flex-wrap: nowrap;   /* force single row always */
  gap: 20px;
  transition: transform 0.36s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.hcarousel-track > * {
  flex-shrink: 0;
  min-width: 0;
}
/* Arrow buttons */
.hcarousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  z-index: 2;
  padding: 0;
}
.hcarousel-btn:hover:not(:disabled) {
  background: #222;
  color: #fff;
  border-color: #222;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.hcarousel-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  box-shadow: none;
}

/* Instagram cards inside carousel */
.ig-card {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f0f0;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ig-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
  display: block;
}
.ig-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(217, 79, 122, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}
.ig-card:hover {
  box-shadow: 0 6px 22px rgba(217, 79, 122, 0.30);
  transform: translateY(-3px) scale(1.02);
}
.ig-card:hover img { transform: scale(1.08); opacity: 0.88; }
.ig-card:hover::after { background: rgba(217, 79, 122, 0.12); }

/* ---------- Category Grid ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: linear-gradient(135deg, #f0e8d8 0%, #e8d5c4 100%);
  text-decoration: none;
  display: block;
}
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.category-card:hover img { transform: scale(1.05); }
.category-card .label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  padding: 50px 20px 18px;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ---------- Product Grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.product-card,
.product-card:hover,
.product-card:focus,
.product-card *,
.product-card-inner,
.product-card-inner:hover,
.product-card-inner * {
  text-decoration: none;
}
.product-card:hover {
  background-color: #fdf6f8;
  border-color: #f0c2d2;
  box-shadow: 0 8px 36px rgba(217, 79, 122, 0.40), 0 0 0 1px rgba(217, 79, 122, 0.14);
  transform: translateY(-4px);
}
.product-card:hover .product-title,
.product-card-inner:hover .product-title {
  color: var(--theme-primary, #d94f7a);
}
.product-card:hover .product-img,
.product-card-inner:hover .product-img {
  background: #fdf6f8;
}
.product-img {
  position: relative;
  background: #f6f4f1;
  aspect-ratio: 3/4;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s;
}
.product-img img.alt-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .product-img img.alt-img { opacity: 1; }
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.product-info { padding: 14px; }
.product-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.product-price {
  font-weight: 700;
  color: #1a1a1a;
}
.product-price .old {
  text-decoration: line-through;
  color: #999;
  font-weight: 400;
  margin-right: 8px;
}
.product-price .new { color: var(--theme-primary, #d94f7a); }

/* ---------- Product card rating (stars + review count) ---------- */
.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.product-rating .stars-static {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
  color: #ddd;
  white-space: nowrap;
}
.product-rating .stars-static .stars-fg {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;
}
.product-rating .rating-count {
  font-size: 11.5px;
  color: #999;
}

/* ---------- Features Strip ---------- */
.features {
  background: #f6efe7;
  padding: 40px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.feature-item img {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
}
.feature-item h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.feature-item p { font-size: 13px; color: #666; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: #1a1a1a;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}
.newsletter h2 {
  font-family: 'Georgia', serif;
  font-size: 30px;
  margin-bottom: 10px;
}
.newsletter p { margin-bottom: 25px; color: #ccc; }
.newsletter-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  gap: 10px;
}
.newsletter-form input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: 30px;
  font-size: 14px;
}
.newsletter-form button {
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.3s;
}
.newsletter-form button:hover { background: #fff; color: #1a1a1a; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg, #1a1a1a);
  color: var(--footer-text, #ccc);
  padding: 60px 0 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  color: var(--footer-heading, #fff);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer-col ul li {
  margin-bottom: 10px;
  font-size: 13px;
}
.footer-col a:hover { color: var(--theme-primary-light, #ffc7d9); }
.footer-brand .logo { color: var(--footer-heading, #fff); }
.footer-brand .logo span { color: var(--theme-primary-light, #ffc7d9); }
.footer-brand p {
  font-size: 13px;
  margin-top: 14px;
  max-width: 300px;
  color: var(--footer-text, #aaa);
}
.social-links { display: flex; gap: 15px; margin-top: 18px; }
.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff !important;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}
.social-links a:hover,
.social-links a:focus {
  background: var(--theme-primary, #d94f7a) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
/* .contact-info i sets color:var(--theme-primary, #d94f7a) (pink) on every icon inside the
   contact page's info column, including these social icons — since that
   rule targets the <i> directly it overrides the inherited white color
   from .social-links a/:hover above, and on hover the icon (pink) becomes
   invisible against the pink hover background. Force it white and drop
   the unrelated icon margin here so the glyph stays centered and visible
   in both states. */
.social-links a i {
  color: #fff !important;
  margin-right: 0 !important;
}
/* Uploaded logo image in header */
.logo-img {
  max-height: 42px;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
.footer-bottom {
  border-top: 1px solid var(--footer-border, #333);
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--footer-text, #888);
}

/* ---------- Page Hero (subpages) ---------- */
.page-hero {
  background: #f6efe7;
  padding: 50px 20px;
  text-align: center;
}
.page-hero h1 {
  font-family: 'Georgia', serif;
  font-size: 42px;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.page-hero .breadcrumb {
  display: none;
}

/* ---------- Collection Toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}
.toolbar select {
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
/* Custom mobile sort dropdown (built in JS) — hidden by default here so
   desktop always shows the native select, even if the browser window
   is resized after the page has loaded. */
.sort-dd-toggle,
.sort-dd-list {
  display: none;
}

/* ---------- Product Detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 40px 0;
}
.product-gallery .main-img {
  background: #f6f4f1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 3/4;
}
.product-gallery .main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.thumb-list img {
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  aspect-ratio: 1;
  object-fit: cover;
}
.thumb-list img:hover,
.thumb-list img.active { border-color: var(--theme-primary, #d94f7a); }
.product-info-detail h1 {
  font-family: 'Georgia', serif;
  font-size: 30px;
  margin-bottom: 12px;
}
.product-info-detail .price {
  font-size: 26px;
  font-weight: 700;
  color: var(--theme-primary, #d94f7a);
  margin-bottom: 20px;
}
.product-info-detail .desc {
  color: #555;
  line-height: 1.7;
  margin-bottom: 24px;
}
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.size-option {
  padding: 10px 18px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.size-option:hover,
.size-option.active {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}
.qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.qty-control {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.qty-control button {
  padding: 10px 16px;
  font-size: 18px;
}
.qty-control input {
  width: 50px;
  border: none;
  text-align: center;
  font-size: 14px;
}
.add-to-cart { width: 100%; padding: 16px; font-size: 14px; }

/* ---------- About / Static Page ---------- */
.content-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 50px 20px;
}
.content-page h2 {
  font-family: 'Georgia', serif;
  font-size: 26px;
  margin: 30px 0 14px;
  color: #1a1a1a;
}
.content-page p { margin-bottom: 16px; line-height: 1.8; color: #444; }
.content-page ul {
  margin: 0 0 16px 20px;
  list-style: disc;
}
.content-page ul li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: #444;
}

/* ---------- Contact Form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding: 40px 0 70px;
}
/* extra.css's `section.container { padding-bottom: 0 }` is more specific
   (element+class) than `.contact-grid` (class only), so it was silently
   winning and zeroing out the bottom padding above. Override it here
   with matching specificity so the gap before the footer actually shows. */
section.container.contact-grid {
  padding-bottom: 70px;
}
.form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
}
.form-row label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}
.form-row input,
.form-row textarea,
.form-row select {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
/* The select is now wrapped in a div (for the mobile custom dropdown),
   so it's no longer a direct flex child of .form-row and loses the
   automatic full-width stretch the other fields get. Restore it. */
.subject-select-wrap { width: 100%; }
.subject-select-wrap select { width: 100%; }
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--theme-primary, #d94f7a);
}
/* Custom subject dropdown (built in JS) is mobile-only; hidden by
   default here so desktop always shows the native select, even if
   the browser window is resized after the page has loaded. */
.subject-dd-toggle,
.subject-dd-list {
  display: none;
}
.contact-info h3 {
  font-family: 'Georgia', serif;
  font-size: 22px;
  margin-bottom: 16px;
}
.contact-info p { margin-bottom: 10px; color: #555; }
.contact-info i { color: var(--theme-primary, #d94f7a); margin-right: 8px; }

/* Align the right column's first heading with the form's "Get in touch"
   heading so both columns start flush at the top — keeps the submit
   button from appearing to sit too low relative to the sidebar. */
.contact-info .cs-acc-item:first-child .cs-acc-toggle { margin-top: 0; }

/* Tighten the gap above the submit button slightly on all sizes */
#contactForm .btn { margin-top: 6px; }

/* ---------- Cart Page ---------- */
.cart-page { padding: 40px 0; }
.cart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.cart-item img { border-radius: 6px; }
.cart-item h4 { font-size: 15px; margin-bottom: 6px; }
.cart-item .price { color: var(--theme-primary, #d94f7a); font-weight: 700; }
.cart-summary {
  background: #f6f4f1;
  border-radius: 8px;
  padding: 24px;
  height: fit-content;
}
.cart-summary h3 { margin-bottom: 18px; font-family: 'Georgia', serif; }
.cart-summary .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}
.cart-summary .total {
  border-top: 1px solid #ccc;
  padding-top: 12px;
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .category-grid,
  .product-grid,
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-content h1 { font-size: 32px; }
  .hero-content { left: 5%; max-width: 80%; }
  .product-detail,
  .contact-grid,
  .cart-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 20px;
  }
  .main-nav.open ul { flex-direction: column; gap: 14px; }
  .mobile-toggle { display: inline-flex; }
  .logo { font-size: 22px; }
  .section-title { font-size: 24px; }
  .hero-content h1 { font-size: 24px; }
  .hero-content p { font-size: 13px; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .category-grid,
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-info { padding: 10px; }
  .product-title { font-size: 12px; }
}

/* =====================================================
   Bootstrap Hero Carousel overrides
   ===================================================== */
.hero-carousel {
  width: 100%;
  overflow: hidden;
  background: #f6efe7;
}

/* The carousel-inner is the height reference.
   The FIRST (active) slide sits in normal flow and defines the height.
   All other slides are layered on top via position:absolute.
   aspect-ratio matches HERO_DESKTOP_SIZE (1900x700, apps/hero/models.py)
   so the frame's actual on-screen shape tracks the recommended banner
   ratio at any screen width — previously a fixed height clamp made the
   frame far wider/shorter than the image on common desktop widths
   (e.g. ~3.84:1 at 1920px vs the image's 2.71:1), forcing object-fit:cover
   to zoom in hard and crop text off both edges. */
.hero-carousel .carousel-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1900 / 700;
  min-height: 360px;
  max-height: 700px;
}

/* All slides absolutely fill the container … */
.hero-carousel .carousel-item {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
/* … EXCEPT the active one, which stays in flow and now fills the fixed-height frame */
.hero-carousel .carousel-item.active {
  position: relative !important;
  height: 100%;
}

/* Image: fill the entire hero frame edge-to-edge, no side/top gaps.
   cover scales the image up so it always spans 100% width and 100%
   height of the frame, cropping any excess instead of letterboxing.
   Design banners at/near the recommended size below so cropping stays
   minimal (see note at bottom of this file). */
.hero-carousel-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #f6efe7;
}
.hero-carousel .carousel-item.active .hero-carousel-img {
  height: 100%;
  min-height: 0;
}

/* Caption — left-aligned text overlay */
.hero-caption {
  position: absolute;
  top: 50%;
  left: 8%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  text-align: left;
  max-width: 480px;
  padding: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hero-caption h1 {
  font-family: 'Georgia', serif;
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 12px;
  color: #fff;
}
.hero-caption p {
  font-size: 16px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 768px) {
  .hero-caption { left: 5%; max-width: 80%; }
  .hero-caption h1 { font-size: 28px; }
  .hero-caption p  { font-size: 13px; }
}
@media (max-width: 480px) {
  .hero-caption { left: 6%; max-width: 88%; }
  .hero-caption h1 { font-size: 20px; }
  .hero-caption p  { font-size: 12px; margin-bottom: 14px; }
}

/* Eyebrow label */
.hero-eyebrow {
  display: inline-block;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  text-shadow: none;
}

/* CTA buttons */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-btn {
  background: var(--theme-primary, #d94f7a);
  color: #fff !important;
  border: 2px solid var(--theme-primary, #d94f7a);
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.hero-btn:hover { background: var(--theme-primary-dark, #c2406a); border-color: var(--theme-primary-dark, #c2406a); transform: translateY(-1px); }
.hero-btn-outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.hero-btn-outline:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }

/* Dot indicators */
.hero-carousel .carousel-indicators li {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255,255,255,.35);
  margin: 0 4px;
}
.hero-carousel .carousel-indicators li.active {
  background: #fff;
}

/* Arrow controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: background .2s, transform .2s;
}
.hero-carousel .carousel-control-prev { left: 16px; }
.hero-carousel .carousel-control-next { right: 16px; }
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  filter: invert(1) brightness(0); /* make arrows dark on white bg */
  width: 20px; height: 20px;
}