/* =========================================================================
   DOLCE — MOBILE ENHANCEMENTS
   Applied on top of existing styles. Targets ≤768px.
   ========================================================================= */

/* ── HAMBURGER MENU ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--color-cream);
  border-top: 1px solid var(--color-line);
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mobile-nav.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.mobile-nav a {
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: background 0.15s;
}
.mobile-nav a:hover, .mobile-nav a.is-active {
  background: var(--color-cream-deep);
  color: var(--color-burgundy);
}

@media (max-width: 768px) {
  /* ── TOP STRIP ── */
  .topstrip { font-size: 10px; gap: 6px; padding: 8px 16px; }
  .topstrip__dot { display: none; }
  .topstrip span:not(:first-child) { display: none; }

  /* ── HEADER ── */
  .header { position: sticky; top: 0; z-index: 100; }
  .header__inner { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0; }
  .header__nav { display: none; }
  .header__actions .icon-btn:not([aria-label="Cart"]) { display: none; }
  .hamburger { display: flex; }

  /* ── BRAND ── */
  .brand__name { font-size: 22px !important; }
  .brand__tag { display: none; }

  /* ── HERO ── */
  .hero { padding-top: 24px; }
  .hero__inner { gap: 32px; padding-bottom: 32px; }
  .hero__title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero__lede { font-size: 15px; margin-top: 16px; }
  .hero__cta { margin-top: 24px; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; padding: 14px 20px; }
  .hero__art { max-height: 320px; aspect-ratio: 4/3; }
  .hero__stamp { width: 110px; height: 110px; bottom: -16px; left: -16px; }
  .hero__stamp svg { width: 100px; height: 100px; }
  .hero__price-tag { right: 8px; top: 12px; padding: 10px 14px; }
  .hero__price-tag strong { font-size: 16px; }
  .hero__meta { gap: 16px; margin-top: 24px; padding-top: 20px; }
  .hero__meta-value { font-size: 18px; }

  /* ── MARQUEE ── */
  .marquee__track { font-size: 22px; gap: 20px; }

  /* ── WHAT WE DO STRIP (inline styles override) ── */
  .dolce-what-strip { flex-direction: column !important; gap: 28px !important; }
  .dolce-what-strip > div { min-width: unset !important; width: 100% !important; }
  .dolce-what-strip .dolce-pillars { grid-template-columns: 1fr 1fr !important; }

  /* ── CATEGORIES ── */
  .categories__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-card__art { aspect-ratio: 1/1; }
  .cat-card__body { padding: 12px; }
  .cat-card__title { font-size: 16px; }
  .cat-card--feature .cat-card__body { padding: 20px; }
  .cat-card--feature .cat-card__title { font-size: 22px; }

  /* ── FEATURED PRODUCTS ── */
  .featured__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .featured__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .featured__head h2 { font-size: 1.8rem; }
  .product__title { font-size: 16px; }
  .product__body { padding: 12px; }

  /* ── STORY BAND ── */
  .storyband { padding: 48px 0; }
  .storyband__inner { gap: 32px; }
  .storyband__media { aspect-ratio: 4/3; }
  .storyband__photo--a { width: 65%; }
  .storyband__photo--b { width: 55%; }
  .storyband__numbercard { left: 0; bottom: 12%; }
  .storyband__copy h2 { font-size: 1.8rem; }
  .storyband__copy p { font-size: 15px; }

  /* ── PROMISE ── */
  .promise__grid { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 0; }
  .promise__item h4 { font-size: 18px; }

  /* ── TESTIMONIAL ── */
  .testimonial { padding: 48px 0; }
  .testimonial__mark { font-size: 5rem; height: 40px; }
  .testimonial__quote { font-size: 1.4rem; }

  /* ── CTA ── */
  .cta__copy h2 { font-size: 2rem; }
  .cta__copy p { font-size: 15px; }
  .cta__buttons .btn { width: 100%; justify-content: center; }
  .cta__notecard { display: none; }
  .cta__art { aspect-ratio: 16/9; max-height: 260px; }

  /* ── FOOTER ── */
  .footer { margin-top: 48px; padding-top: 40px; }
  .footer__grid { gap: 28px; }
  .footer__brand .brand__name { font-size: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__bottom .social { justify-content: center; }

  /* ── SECTION SPACING ── */
  .section { padding: 40px 0; }
  .section--tight { padding: 24px 0; }
  .section__head { margin-bottom: 32px; }
  .section__head h2 { font-size: 1.8rem; }
}

@media (max-width: 400px) {
  .categories__grid { grid-template-columns: 1fr; }
  .featured__grid { grid-template-columns: 1fr; }
  .promise__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 2rem; }
}