/*
 * Ala Kuru Kahve — Mobile App Experience v2
 * Tum kurallar @media (max-width: 1023px) icinde.
 * Desktop'a dokunmaz. Build gerektirmez.
 * public/css/mobile-app.css
 *
 * FELSEFE: Bu bir web sitesi degil, bir kahve uygulamasi.
 * Her section bir "screen", her kart bir "component".
 */

/* ═══════════════════════════════════════
   0. CSS VARIABLES
   ═══════════════════════════════════════ */
:root {
  --ala-primary: #00392A;
  --ala-accent: #F7B03E;
  --ala-light: #F4F0E8;
  --ala-secondary: #E8E2D6;
  --ala-dark: #1C1A1A;
  --ala-cream: #FAF8F4;
  --ala-bottom-nav-h: 64px;
  --ala-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ala-safe-top: env(safe-area-inset-top, 0px);
  --ala-radius-sm: 12px;
  --ala-radius-md: 16px;
  --ala-radius-lg: 20px;
  --ala-radius-xl: 24px;
  --ala-card-shadow: 0 2px 16px rgba(0,0,0,0.06);
  --ala-card-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
}

@media (max-width: 1023px) {

/* ═══════════════════════════════════════
   1. APP SHELL — Body & Global Reset
   ═══════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-top: 64px !important;
  padding-bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom) + 8px) !important;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-bottom-nav {
  padding-bottom: 0 !important;
}

/* Kill desktop grain texture on mobile — performance */
body {
  background-attachment: scroll !important;
}

/* Page transition */
@keyframes appScreenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

main {
  animation: appScreenIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Global tap feedback */
@keyframes tapPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Momentum scroll containers */
.app-scroll-x {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: 20px;
}
.app-scroll-x::-webkit-scrollbar { display: none; }
.app-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* ═══════════════════════════════════════
   2. HEADER — Slim App Bar
   ═══════════════════════════════════════ */
.ala-header {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.ala-header #header-container {
  padding: 10px 16px !important;
}

.ala-header .logo-img {
  height: 32px !important;
}

/* Hamburger — hidden, bottom nav handles it */
.ala-header button[aria-label="Menuyu Ac"],
.ala-header button[aria-label="Menüyü Aç"] {
  display: none !important;
}

/* Account icon header — hidden, in bottom nav */
.ala-header a[aria-label="Hesabim"],
.ala-header a[aria-label="Hesabım"] {
  display: none !important;
}

/* Header icons — bigger tap targets */
.ala-header .icon-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ala-header .icon-link:active {
  background: rgba(0,0,0,0.05);
}

/* Header hide on scroll — smoother on mobile */
.ala-header.is-hidden {
  transform: translateY(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ala-header {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s !important;
}

/* Scrolled header — frosted glass */
.ala-header.is-scrolled {
  background: rgba(250, 248, 244, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.04) !important;
}

/* FIX: Homepage header — mobilde transparent bg yok, body padding-top var
   Bu yüzden header altında hero değil cream boşluk görünüyor.
   Mobilde her zaman cream bg + dark icons göster */
.ala-header.is-home {
  background: rgba(250, 248, 244, 0.95) !important;
}

.ala-header.is-home .icon-link {
  color: var(--ala-dark) !important;
}

.ala-header.is-home .icon-link:hover {
  color: var(--ala-accent) !important;
}

/* ═══════════════════════════════════════
   3. BOTTOM NAVIGATION — iOS Tab Bar
   ═══════════════════════════════════════ */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom));
  padding-bottom: var(--ala-safe-bottom);
  background: rgba(250, 248, 244, 0.92);
  border-top: 0.5px solid rgba(28, 26, 26, 0.08);
  box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-around;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

body.no-bottom-nav .mobile-bottom-nav {
  display: none !important;
}

.mobile-bottom-nav .bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 0;
  text-decoration: none;
  color: var(--ala-dark);
  opacity: 0.3;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mobile-bottom-nav .bnav-item.active {
  opacity: 1;
  color: var(--ala-primary);
}

/* Active indicator dot */
.mobile-bottom-nav .bnav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ala-primary);
}

.mobile-bottom-nav .bnav-item i {
  font-size: 22px;
  line-height: 1;
}

.mobile-bottom-nav .bnav-item span {
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cart — elevated center button */
.mobile-bottom-nav .bnav-cart .bnav-cart-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ala-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: 0 4px 20px rgba(0, 57, 42, 0.3);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav .bnav-cart:active .bnav-cart-circle {
  transform: scale(0.92);
}

.mobile-bottom-nav .bnav-cart .bnav-cart-circle i {
  color: #fff;
  font-size: 20px;
}

.mobile-bottom-nav .bnav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ala-accent);
  color: var(--ala-dark);
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--ala-cream);
}

/* ═══════════════════════════════════════
   4. HIDE / REPOSITION ELEMENTS
   ═══════════════════════════════════════ */

/* Footer — completely hidden (app UX) */
footer {
  display: none !important;
}

/* Footer watermark */
.footer-watermark {
  display: none !important;
}

/* WhatsApp — RIGHT side, small, above bottom nav */
.fixed.bottom-8.left-8,
div[class*="fixed"][class*="bottom-8"][class*="left-8"] {
  bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom) + 14px) !important;
  left: auto !important;
  right: 14px !important;
  z-index: 9990 !important;
}

.fixed.bottom-8.left-8 a,
div[class*="fixed"][class*="bottom-8"][class*="left-8"] a {
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 2px 12px rgba(37,211,102,0.3) !important;
}

.fixed.bottom-8.left-8 a i,
div[class*="fixed"][class*="bottom-8"][class*="left-8"] a i {
  font-size: 22px !important;
}

.fixed.bottom-8.left-8 a span,
div[class*="fixed"][class*="bottom-8"][class*="left-8"] a span {
  display: none !important;
}

/* Scroll to top — hidden */
#scrollTopBtn { display: none !important; }

/* Custom cursor — hidden */
#custom-cursor { display: none !important; }


/* ═══════════════════════════════════════
   5. TYPOGRAPHY — App Scale
   ═══════════════════════════════════════ */

/* Section labels */
.app-section-label {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.35;
}

/* App-style section title */
.app-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Body text — readable on mobile */
.font-sans { font-size: inherit; }

/* iOS input zoom prevention */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-size: 16px !important;
  min-height: 48px;
  border-radius: var(--ala-radius-sm) !important;
}

/* ═══════════════════════════════════════
   6. CONTAINER — App Padding
   ═══════════════════════════════════════ */
.container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ═══════════════════════════════════════
   7. BUTTONS — Touch Optimized
   ═══════════════════════════════════════ */
.btn-ala,
.btn-accent,
[class*="btn-outline"] {
  width: 100%;
  text-align: center;
  justify-content: center;
  border-radius: var(--ala-radius-sm) !important;
  padding: 15px 24px !important;
  font-size: 11px !important;
  min-height: 48px;
  transition: transform 0.15s, background 0.2s, opacity 0.2s;
}

.btn-ala:active,
.btn-accent:active,
[class*="btn-outline"]:active {
  transform: scale(0.97);
  opacity: 0.9;
}


/* ═══════════════════════════════════════
   ═══ HOME PAGE SECTIONS ═══
   ═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   H1. HERO — Compact App Screen
   ═══════════════════════════════════════ */
#hero-section {
  min-height: auto !important;
}

#hero-section > div:first-child {
  padding: 64px 20px 20px 20px !important;
  width: 100% !important;
}

/* Kicker text — minimal */
#hero-section .font-sans.text-\[9px\] {
  font-size: 8px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 12px !important;
  opacity: 0.25;
}

/* Mobile hero image — full bleed with rounded bottom corners */
#hero-section .lg\:hidden {
  margin: 0 -20px 14px -20px !important;
  border-radius: 0 0 var(--ala-radius-lg) var(--ala-radius-lg);
  overflow: hidden;
  max-height: 240px;
}

#hero-section .lg\:hidden img {
  border-radius: 0 0 var(--ala-radius-lg) var(--ala-radius-lg);
  max-height: 240px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Hero H1 — bold, compact */
#hero-section h1 {
  font-size: 1.75rem !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.03em !important;
}

/* Hero subtitle */
#hero-section h1 + p,
#hero-section .max-w-sm {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
  opacity: 0.4;
}

/* Hero CTAs — stacked, pill shape */
#hero-section .flex.flex-wrap.gap-3 {
  flex-direction: column !important;
  gap: 10px !important;
}

#hero-section .flex.flex-wrap.gap-3 a {
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 11px !important;
  border-radius: 14px !important;
  min-height: 50px;
}

#hero-section .flex.flex-wrap.gap-3 a:active {
  transform: scale(0.97);
}

/* Trust bar — horizontal, compact */
#hero-section .flex.items-center.gap-6.mt-10 {
  margin-top: 20px !important;
  padding-top: 16px !important;
  gap: 0 !important;
  justify-content: space-between;
}

#hero-section .flex.items-center.gap-6.mt-10 > div:not(.w-px) {
  flex: 1;
  text-align: center;
}

#hero-section .flex.items-center.gap-6.mt-10 .font-serif {
  font-size: 1.1rem !important;
}

#hero-section .flex.items-center.gap-6.mt-10 .w-px {
  height: 24px !important;
  opacity: 0.1;
}

/* ═══════════════════════════════════════
   H2. MARQUEE — Thin accent line
   ═══════════════════════════════════════ */
.marquee-band {
  padding: 8px 0 !important;
  font-size: 9px !important;
}

/* ═══════════════════════════════════════
   H3. HIGHLIGHTS — Stories (tighter)
   ═══════════════════════════════════════ */
.highlights-section {
  padding: 12px 0 !important;
  background: transparent !important;
}

.highlights-section .flex.gap-4,
.highlights-section .flex.gap-5,
.highlights-section .flex.gap-6 {
  gap: 12px !important;
  padding: 0 16px !important;
}

/* Story circle — slightly smaller */
.highlights-section img[class*="rounded-full"],
.highlights-section .rounded-full {
  width: 60px !important;
  height: 60px !important;
}

/* Story label text */
.highlights-section .text-xs,
.highlights-section .text-\[10px\],
.highlights-section span {
  font-size: 9px !important;
}


/* ═══════════════════════════════════════
   H4. KAMPANYA — Inline banner card
   ═══════════════════════════════════════ */
.py-16.md\:py-20.bg-accent\/10 {
  padding: 20px 0 !important;
  border: none !important;
  background: transparent !important;
}

.py-16.md\:py-20.bg-accent\/10 > .container {
  padding: 0 20px !important;
}

.py-16.md\:py-20.bg-accent\/10 > .container > .max-w-2xl {
  max-width: none !important;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFF3D6 100%);
  border-radius: var(--ala-radius-lg) !important;
  padding: 24px 20px !important;
  text-align: left !important;
  border: 1px solid rgba(247, 176, 62, 0.15);
}

.py-16.md\:py-20.bg-accent\/10 h2 {
  font-size: 1.3rem !important;
  margin-bottom: 8px !important;
}

.py-16.md\:py-20.bg-accent\/10 .inline-block.bg-accent {
  margin-bottom: 12px !important;
}

.py-16.md\:py-20.bg-accent\/10 p {
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

.py-16.md\:py-20.bg-accent\/10 .btn-ala {
  width: 100% !important;
}


/* ═══════════════════════════════════════
   H5. AYIN KAHVESi — App-style Featured Card
   Tek bir kart: Üstte küçük badge + başlık,
   ortada ürün görseli (dikey, kompakt),
   altta bilgi + CTA. Her şey TEK kart içinde.
   ═══════════════════════════════════════ */
#ayin-kahvesi-section {
  padding: 20px 0 !important;
  background: transparent !important;
}

#ayin-kahvesi-section .container {
  padding: 0 16px !important;
}

/* ═══════════════════════════════════════
   AYIN KAHVESi — Canlıdaki HTML yapısına uygun
   Not: Canlıda #ayin-kahvesi-grid ID'si YOK.
   #ayin-kahvesi-card üzerinden parent'a ulaşıyoruz.
   ═══════════════════════════════════════ */

/* Grid parent → tek kolon stack */
#ayin-kahvesi-card {
  border-radius: var(--ala-radius-md) !important;
  overflow: hidden;
}

/* Grid parent = #ayin-kahvesi-card'ın parent'ının parent'ı */
/* Canlıdaki yapı: section > .container > .grid.grid-cols-2 */
/* grid-cols-2'yi tek kolona çeviriyoruz */
.py-8.md\:py-12.bg-light .grid.grid-cols-2 {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  background: var(--ala-primary);
  border-radius: var(--ala-radius-lg) !important;
  overflow: hidden;
}

/* 1) Başlık kartı (%15 İndirim + Ayın Kahvesi) — daha geniş */
.py-8.md\:py-12.bg-light .grid.grid-cols-2 > div:first-child {
  padding: 20px 20px 14px !important;
  border-radius: 0 !important;
  min-height: auto !important;
}

.py-8.md\:py-12.bg-light .grid.grid-cols-2 > div:first-child h2 {
  font-size: 1.4rem !important;
  line-height: 1.1 !important;
}

/* 2) Product card (görsel) */
#ayin-kahvesi-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#ayin-kahvesi-card .product-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#ayin-kahvesi-card .card-img-wrapper {
  aspect-ratio: auto !important;
  max-height: 360px !important;
  border-radius: 0 !important;
  background: var(--ala-primary) !important;
}

#ayin-kahvesi-card .card-img-wrapper img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

#ayin-kahvesi-card .card-wishlist-btn {
  display: none !important;
}

/* 3) Info card (bilgi + fiyat + HEMEN AL) */
.py-8.md\:py-12.bg-light .grid.grid-cols-2 > a {
  border-radius: 0 !important;
  padding: 16px 20px 20px !important;
  grid-column: 1 / -1;
}

.py-8.md\:py-12.bg-light .grid.grid-cols-2 > a h3 {
  font-size: 1rem !important;
}

.py-8.md\:py-12.bg-light .grid.grid-cols-2 > a .inline-flex.items-center {
  font-size: 8px !important;
  padding: 8px 16px !important;
}


/* ═══════════════════════════════════════
   H6. KOLEKSIYON — Product Scroll
   ═══════════════════════════════════════ */
.py-20.md\:py-28.bg-cream {
  padding: 28px 0 !important;
  background: transparent !important;
}

/* Section header — with padding, swiper full-bleed */
.py-20.md\:py-28.bg-cream .flex.items-end.justify-between.mb-12 {
  margin-bottom: 16px !important;
  padding: 0 20px;
}

/* Swiper container — slight left padding for peek */
.py-20.md\:py-28.bg-cream .container {
  padding: 0 !important;
}

.py-20.md\:py-28.bg-cream .home-product-swiper {
  padding-left: 20px !important;
}

.py-20.md\:py-28.bg-cream .mb-12 h2 {
  font-size: 1.4rem !important;
  letter-spacing: -0.02em;
}

.py-20.md\:py-28.bg-cream .mb-12 span {
  font-size: 9px !important;
  margin-bottom: 2px !important;
}

/* "Tumunu Gor" link */
.py-20.md\:py-28.bg-cream .text-center.mt-12 {
  margin-top: 16px !important;
  padding: 0 20px;
}

.py-20.md\:py-28.bg-cream .text-center.mt-12 a {
  border-radius: var(--ala-radius-sm) !important;
  font-size: 10px !important;
  padding: 12px 24px !important;
}

/* Home product swiper — let Swiper handle slide width (slidesPerView: 1.15) */
/* Kart icindeki bosluk kompakt */
.home-product-swiper .swiper-slide .product-card {
  margin: 0 !important;
}

/* Swiper pagination — compact */
.home-product-swiper .swiper-pagination {
  position: relative !important;
  margin-top: 12px !important;
}

.home-product-swiper .swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  opacity: 0.2 !important;
}

.home-product-swiper .swiper-pagination-bullet-active {
  width: 20px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  background: var(--ala-primary) !important;
}


/* ═══════════════════════════════════════
   H7. INSTAGRAM — Edge-to-edge gallery
   ═══════════════════════════════════════ */
.insta-swiper .swiper-slide img {
  height: 220px !important;
}


/* ═══════════════════════════════════════
   H8. PROMO BANNER
   ═══════════════════════════════════════ */
.py-12.md\:py-16.bg-light {
  padding: 16px 0 !important;
}


/* ═══════════════════════════════════════
   H9. BOLGELER TEASER — Horizontal Scroll
   ═══════════════════════════════════════ */
#regions-teaser {
  padding: 28px 0 !important;
}

#regions-teaser .container {
  padding: 0 !important;
}

/* Section header — with padding */
#regions-teaser .flex.items-end.justify-between.mb-12 {
  margin-bottom: 16px !important;
  padding: 0 20px;
}

#regions-teaser .mb-12 h2 {
  font-size: 1.4rem !important;
}

/* Grid → horizontal scroll */
#regions-teaser .grid {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  gap: 12px !important;
  padding: 0 20px !important;
  scrollbar-width: none;
}

#regions-teaser .grid::-webkit-scrollbar {
  display: none;
}

#regions-teaser .grid > a {
  flex: 0 0 42vw !important;
  min-width: 160px !important;
  max-width: 180px;
  scroll-snap-align: start;
  aspect-ratio: 3/4 !important;
  border-radius: var(--ala-radius-md) !important;
}

#regions-teaser .grid > a:active {
  transform: scale(0.97);
  transition: transform 0.15s;
}

#regions-teaser .grid a .absolute.bottom-0 {
  padding: 12px !important;
}

#regions-teaser .grid a .absolute.bottom-0 h3 {
  font-size: 13px !important;
}


/* ═══════════════════════════════════════
   H10. B2B — Compact card
   ═══════════════════════════════════════ */
.py-16.md\:py-20.lg\:py-16.bg-dark {
  padding: 0 !important;
  margin: 12px 20px 20px 20px !important;
  border-radius: var(--ala-radius-xl) !important;
  overflow: hidden;
}

.py-16.md\:py-20.lg\:py-16.bg-dark > .absolute {
  border-radius: var(--ala-radius-xl) !important;
}

.py-16.md\:py-20.lg\:py-16.bg-dark > .relative {
  padding: 32px 24px !important;
}

.py-16.md\:py-20.lg\:py-16.bg-dark h2 {
  font-size: 1.3rem !important;
  margin-bottom: 10px !important;
}

.py-16.md\:py-20.lg\:py-16.bg-dark p {
  font-size: 13px !important;
  margin-bottom: 20px !important;
  line-height: 1.6;
}

.py-16.md\:py-20.lg\:py-16.bg-dark .flex.flex-wrap.gap-4 {
  flex-direction: column !important;
  gap: 10px !important;
}

.py-16.md\:py-20.lg\:py-16.bg-dark .flex.flex-wrap.gap-4 a {
  width: 100% !important;
  justify-content: center !important;
  padding: 13px 20px !important;
  border-radius: var(--ala-radius-sm) !important;
  font-size: 10px !important;
  min-height: 44px !important;
}

.py-16.md\:py-20.lg\:py-16.bg-dark .flex.flex-wrap.gap-4 a:active {
  transform: scale(0.97);
  opacity: 0.9;
}


/* ═══════════════════════════════════════
   H11. BLOG/STORIES SLIDER
   ═══════════════════════════════════════ */
/* Featured stories section — tighter padding */
section:has(.featured-stories-slider),
.featured-stories-section {
  padding: 28px 0 !important;
}

/* Blog slider section — compact */
.py-24.bg-\[\#003b2a\] {
  padding: 24px 0 !important;
  margin: 0 !important;
}

.py-24.bg-\[\#003b2a\] .container {
  padding: 0 20px !important;
}

/* Blog section label */
.py-24.bg-\[\#003b2a\] .font-sans.text-\[10px\],
.py-24.bg-\[\#003b2a\] .font-sans.text-\[9px\] {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}

/* Blog section title — compact */
.py-24.bg-\[\#003b2a\] h2 {
  font-size: 1.3rem !important;
  margin-bottom: 4px !important;
}

/* "Tum Yazilari Gor" link */
.py-24.bg-\[\#003b2a\] a[href*="blog"] {
  font-size: 10px !important;
}

/* Blog story cards — compact, not 4:5 portrait */
#story-slider {
  gap: 12px !important;
  padding: 0 20px 16px 20px !important;
}

#story-slider > div {
  width: 72vw !important;
  max-width: 280px !important;
  flex-shrink: 0;
}

/* Blog card image — shorter aspect ratio */
#story-slider .aspect-\[4\/5\] {
  aspect-ratio: 3 / 4 !important;
}

#story-slider .rounded-2xl {
  border-radius: var(--ala-radius-md) !important;
}

/* Blog card bottom text — tighter */
#story-slider .absolute.bottom-8 {
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
}

#story-slider h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* Blog section header margin */
.py-24.bg-\[\#003b2a\] .mb-12 {
  margin-bottom: 16px !important;
}

/* Scroll navigation arrows — hide on mobile */
.story-nav,
.story-nav-prev,
.story-nav-next,
.home-product-swiper .swiper-button-prev,
.home-product-swiper .swiper-button-next {
  display: none !important;
}


/* ═══════════════════════════════════════
   ═══ PRODUCT PAGES ═══
   ═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   P1. PRODUCT CARDS — 2-Column Grid, Compact
   ═══════════════════════════════════════ */

/* Product list — single column, clean feed */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  max-width: none;
  margin: 0;
}

/* Product card — compact, touch-first */
.product-card {
  border-radius: var(--ala-radius-md) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-card:hover {
  transform: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}

.product-card:active {
  transform: scale(0.98) !important;
}

/* ── ARCHIVE PAGE — 2 column grid on mobile ── */
/* Tek kolon çok yer kaplıyor, 2 kolon daha app-like */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Grid item'lar — eşit genişlik zorunlu (min-width:auto bug fix) */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > div {
  min-width: 0 !important;
}

/* IMAGE — compact square */
.product-card .card-img-wrapper {
  aspect-ratio: 1 / 1 !important;
}

/* Product name — 2-col compact */
.product-card .card-product-name {
  font-size: 12px !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body area — tight padding for 2-col */
.product-card .card-body-area {
  padding: 8px 10px 4px !important;
}

/* Origin label */
.product-card .card-origin-label {
  font-size: 7px !important;
  padding: 2px 6px !important;
  margin-bottom: 3px !important;
}

/* Tasting notes — single line, smaller */
.product-card .card-body-area .flex.flex-wrap {
  flex-wrap: nowrap !important;
  overflow: hidden;
  gap: 2px !important;
  margin-top: 2px !important;
  margin-bottom: 3px !important;
}

.product-card .card-body-area .flex.flex-wrap span {
  font-size: 7px !important;
  padding: 1px 5px !important;
}

/* CART WRAPPER — price left, button right, doğal aralık */
.card-cart-wrapper {
  padding: 0 10px 10px !important;
  gap: 8px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Price — compact */
.card-price-main {
  font-size: 14px !important;
}

.card-price-old-inline {
  font-size: 10px !important;
}

/* SEPETE EKLE BUTTON — minimal "+" circle button */
.card-add-btn-fixed {
  min-height: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  flex: none !important;
  padding: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  border-radius: 50% !important;
  white-space: nowrap !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-add-btn-fixed span {
  display: none !important;
}

.card-add-btn-fixed i {
  font-size: 14px !important;
  margin: 0 !important;
}

.card-add-btn-fixed:active {
  transform: scale(0.92);
}

/* Wishlist button */
.product-card .card-wishlist-btn {
  width: 28px !important;
  height: 28px !important;
  top: 6px !important;
  right: 6px !important;
}

.product-card .card-wishlist-btn i {
  font-size: 12px !important;
}

/* Discount badge */
.product-card .card-img-wrapper .absolute.top-3.left-3 {
  top: 8px !important;
  left: 8px !important;
}

.product-card .card-img-wrapper .absolute.top-3.left-3 span {
  font-size: 8px !important;
  padding: 3px 8px !important;
}


/* ═══════════════════════════════════════
   P2. PRODUCT ARCHIVE — App-like Browse
   ═══════════════════════════════════════ */

/* Archive outer wrapper (products/index.blade.php) — body already handles header clearance */
.bg-transparent.min-h-screen.pt-12.pb-20 {
  padding-top: 0px !important;
  padding-bottom: 8px !important;
  min-height: auto !important;
}

/* Inner Livewire wrapper — NO extra padding */
.bg-transparent.min-h-screen.pt-12.pb-20 .min-h-screen.pt-12.pb-24 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  min-height: auto !important;
}

/* Archive page heading area — ultra compact */
.min-h-screen.pt-12 .container .mb-10,
.bg-transparent.min-h-screen .container .mb-10 {
  margin-bottom: 8px !important;
}

/* Breadcrumb — hide on archive, waste of space */
.min-h-screen.pt-12 .container .mb-10 > nav,
.bg-transparent.min-h-screen .container .mb-10 > nav {
  display: none !important;
}

/* Title — compact, 2 lines max */
.min-h-screen.pt-12 .container .mb-10 h1,
.bg-transparent.min-h-screen .container .mb-10 h1 {
  font-size: 1.1rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

/* Subtitle — smaller */
.min-h-screen.pt-12 .container .mb-10 h1 + p,
.bg-transparent.min-h-screen .container .mb-10 h1 + p {
  font-size: 10px !important;
  margin-top: 2px !important;
  opacity: 0.4;
}

/* Subtitle — tighter */
.min-h-screen.pt-12 > .container > .mb-10 p {
  font-size: 11px !important;
  margin-top: 2px !important;
}

/* Sort + count row — inline, compact */
.min-h-screen.pt-12 > .container > .mb-10 .flex.flex-col.sm\:flex-row {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.min-h-screen.pt-12 > .container > .mb-10 .flex.items-center.gap-6 {
  gap: 8px !important;
}

.min-h-screen.pt-12 > .container > .mb-10 .font-sans.text-xs {
  font-size: 10px !important;
}

.min-h-screen.pt-12 > .container > .mb-10 select {
  font-size: 11px !important;
  min-height: 32px !important;
  padding: 4px 24px 4px 0 !important;
}

/* Filter chips bar — horizontal scroll, full bleed feel */
.min-h-screen.pt-12 .mb-8.border-y {
  margin-bottom: 12px !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  padding: 8px 20px !important;
  border-color: rgba(28,26,26,0.04) !important;
}

.filter-chip {
  min-height: 36px !important;
  font-size: 10px !important;
  white-space: nowrap;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center;
  gap: 5px;
}

.filter-chip-icon {
  font-size: 14px;
  opacity: 0.5;
}

.filter-chip.active .filter-chip-icon {
  opacity: 0.8;
}

/* Skeleton — single column */
.skeleton-container .grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Pagination — compact */
.min-h-screen.pt-12 .mt-20 {
  margin-top: 16px !important;
}

/* Promo banner at bottom — tighter */
.min-h-screen.pt-12 .mt-16 {
  margin-top: 12px !important;
}


/* ═══════════════════════════════════════
   P3. PRODUCT DETAIL — True Native App Experience
   Felsefe: Bu bir ürün web sayfası değil, bir ürün ekranı.
   Görsel hero olarak başlar, bilgi kartı gibi akar.
   ═══════════════════════════════════════ */

/* ── Hide desktop sticky bar on mobile — we use our own ── */
.sticky-product-bar {
  display: none !important;
}

/* ── HERO SECTION — Image-first, immersive ── */
#product-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  background: #fff !important;
}

#product-hero > .container {
  padding: 0 !important;
  max-width: none !important;
}

/* Hide mobile title block above image — we'll show info BELOW image */
#product-hero .lg\:hidden.mb-8 {
  display: none !important;
}

/* Layout — kill flex row, full stack */
#product-hero .flex.flex-col.lg\:flex-row {
  gap: 0 !important;
  flex-direction: column !important;
}

/* ── IMAGE GALLERY — Full bleed, edge-to-edge ── */
#product-hero .w-full.lg\:w-\[55\%\] {
  width: 100% !important;
  order: 1;
}

#product-hero .w-full.lg\:w-\[55\%\] > .sticky {
  position: relative !important;
  top: auto !important;
}

/* Kill flex gap between thumbnail strip and main image */
#product-hero .w-full.lg\:w-\[55\%\] .flex.gap-4 {
  gap: 0 !important;
}

/* Main image container — no rounding, full bleed */
#product-hero .flex-1.relative.overflow-hidden.rounded-2xl {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Main image — 4:5 portrait, fills screen width like a shopping app */
#product-hero .flex-1.relative.overflow-hidden.rounded-2xl .aspect-square {
  aspect-ratio: 4 / 5 !important;
}

/* Discount badge on image */
#product-hero .flex-1 .absolute.top-5.left-5 {
  top: 12px !important;
  left: 12px !important;
  font-size: 10px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
}

/* Hide desktop thumbnails */
#product-hero .hidden.lg\:flex {
  display: none !important;
}

/* Mobile thumbnails — sleek horizontal strip */
#product-hero .flex.gap-3.mt-4.overflow-x-auto {
  margin: 0 !important;
  padding: 10px 16px !important;
  gap: 8px !important;
  background: #fff;
}

#product-hero .flex.gap-3.mt-4.overflow-x-auto .thumb-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  border-width: 2px !important;
}

/* Hide desktop curator note below image */
#product-hero .hidden.lg\:block.pt-8 {
  display: none !important;
}

/* ── PRODUCT INFO CARD — Below image, card-like ── */
#product-hero .w-full.lg\:w-\[45\%\] {
  width: 100% !important;
  order: 2;
  padding: 20px 16px 16px !important;
  background: #fff;
}

#product-hero .w-full.lg\:w-\[45\%\] > .lg\:sticky {
  position: relative !important;
  top: auto !important;
}

/* Desktop breadcrumb+title inside sidebar — show it as mobile info header */
#product-hero .w-full.lg\:w-\[45\%\] .hidden.lg\:block.mb-8 {
  display: block !important;
  margin-bottom: 12px !important;
}

#product-hero .w-full.lg\:w-\[45\%\] .hidden.lg\:block.mb-8 nav {
  display: none !important;
}

#product-hero .w-full.lg\:w-\[45\%\] .hidden.lg\:block.mb-8 .label-gold {
  font-size: 8px !important;
  padding: 3px 10px !important;
}

#product-hero .w-full.lg\:w-\[45\%\] .hidden.lg\:block.mb-8 h1 {
  font-size: 1.35rem !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

/* Section labels — tight, uppercase micro */
#product-hero .w-full.lg\:w-\[45\%\] .font-sans.text-\[10px\] {
  font-size: 9px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.2em !important;
}

/* Tasting notes — horizontal scroll pills */
#product-hero .w-full.lg\:w-\[45\%\] .mb-6:has(.taste-tag) {
  margin-bottom: 14px !important;
}

#product-hero .w-full.lg\:w-\[45\%\] .flex.flex-wrap.gap-2 {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  gap: 6px !important;
}
#product-hero .w-full.lg\:w-\[45\%\] .flex.flex-wrap.gap-2::-webkit-scrollbar { display: none; }

.taste-tag {
  white-space: nowrap !important;
  font-size: 10px !important;
  padding: 5px 12px !important;
}

/* ── Package selector — horizontal, compact ── */
.pkg-option {
  padding: 10px 16px !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-size: 13px !important;
}

.pkg-option .pkg-weight {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pkg-option .pkg-price {
  font-size: 11px !important;
}

/* Grind options — compact, horizontal scroll if needed */
.grind-option {
  padding: 8px 14px !important;
  font-size: 10px !important;
  border-radius: 10px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
}

/* ── Price — BIG and prominent ── */
#product-hero .flex.items-baseline.gap-3.mb-5 {
  margin-bottom: 14px !important;
  margin-top: 4px !important;
}

#product-hero .flex.items-baseline.gap-3.mb-5 .font-serif.text-3xl,
#product-hero #display-price {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
}

/* ── CTA area — Quantity + Sepete Ekle ── */
#product-hero .flex.gap-2\.5.items-stretch {
  gap: 8px !important;
}

/* Quantity stepper — compact */
#product-hero .flex.gap-2\.5.items-stretch > .flex.items-center.border {
  border-radius: 12px !important;
  min-height: 48px;
}

#product-hero .flex.gap-2\.5.items-stretch > .flex.items-center.border button {
  width: 42px !important;
}

/* Sepete Ekle button — main CTA */
#product-hero #main-add-to-cart,
#product-hero .btn-ala {
  padding: 14px 20px !important;
  font-size: 11px !important;
  border-radius: 14px !important;
  min-height: 50px !important;
  letter-spacing: 0.08em !important;
}

/* Favorites button — inline, not full width, subtle */
#product-hero .btn-outline-primary {
  padding: 12px 16px !important;
  font-size: 10px !important;
  border-radius: 12px !important;
  min-height: 46px !important;
}

/* Trust badges — 2x2 grid, compact app icons */
#product-hero .grid.grid-cols-2.gap-3 {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#product-hero .grid.grid-cols-2.gap-3 > div {
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

/* Toptan button — subtle */
#product-hero .border.border-primary {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
}

/* Share — minimal */
#product-hero .flex.items-center.gap-3:last-child {
  font-size: 10px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════
   DROPDOWN PILL SELECTORS — Paket & Öğütme Derecesi
   Kompakt pill, tıkla → dropdown aç
   ══════════════════════════════════════════════════ */

.selector-dropdown-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(244, 240, 232, 0.6);
  border: 1px solid rgba(28, 26, 26, 0.06);
  border-radius: var(--ala-radius-sm);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ala-dark);
  cursor: pointer;
  transition: all 0.15s ease;
}

.selector-dropdown-pill:active {
  background: rgba(244, 240, 232, 0.9);
}

.selector-dropdown-pill i:first-child {
  font-size: 15px;
  color: var(--ala-primary);
  opacity: 0.5;
}

.selector-pill-price {
  font-weight: 800;
  color: var(--ala-dark);
  margin-left: auto;
  margin-right: 4px;
}

.selector-dropdown-options {
  margin-top: 6px;
  background: #fff;
  border: 1px solid rgba(28, 26, 26, 0.06);
  border-radius: var(--ala-radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.selector-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(28, 26, 26, 0.7);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(28, 26, 26, 0.04);
  cursor: pointer;
  transition: background 0.1s ease;
}

.selector-dropdown-option:last-child {
  border-bottom: none;
}

.selector-dropdown-option:active,
.selector-dropdown-option.active {
  background: rgba(0, 57, 42, 0.04);
  color: var(--ala-primary);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════
   SIDEBAR SECTION CARDS — Icon + Label + Content
   Mobile-only card wrappers for sidebar sections
   ══════════════════════════════════════════════════ */

.sidebar-section-card {
  background: rgba(244, 240, 232, 0.5);
  border-radius: var(--ala-radius-sm);
  padding: 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(28, 26, 26, 0.04);
}

.section-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.section-icon {
  font-size: 14px !important;
  color: var(--ala-primary);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════
   BELOW-FOLD SECTIONS — Card-based editorial layout
   ══════════════════════════════════════════════════ */

/* Product swipe container */
#product-swipe-container {
  background: #fff;
}

/* ── Mobil: Ana görselde swipe desteği ── */
/* JS ile #mainImage touch swipe yapılıyor, ek CSS gerekmiyor */

/* Sentinel */
#product-form-sentinel { margin: 0 !important; }

/* ── Menşei banner photo ── exclude Benzer Kahveler (has --primary bg) */
#product-swipe-container > .relative.overflow-hidden:not([style*="--primary"]) {
  height: 200px !important;
  margin: 0 !important;
}

#product-swipe-container > .relative.overflow-hidden:not([style*="--primary"]) h2 {
  font-size: 1.3rem !important;
}

#product-swipe-container > .relative.overflow-hidden:not([style*="--primary"]) p {
  font-size: 11px !important;
  max-width: none !important;
}

/* Benzer Kahveler — overflow visible for horizontal scroll */
#product-swipe-container > .relative.overflow-hidden[style*="--primary"] {
  overflow: visible !important;
  height: auto !important;
}

/* ── DETAIL INFO CARDS — Unified card component ── */
.detail-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.detail-card-icon {
  font-size: 13px;
  color: var(--ala-primary);
  opacity: 0.4;
}

/* Section label font — proportional to mobile content */
.detail-card-header span {
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
}

/* ── Ürün Detayları section (bg-cream) ── */
/* ── Below-fold: Tekrar eden bölümleri mobilde gizle ── */
/* Tadım Notları → sidebar'da zaten var, burada tekrar etmesin */
.bg-cream.py-20.md\:py-28 .lg\:col-span-3 > .mb-8:first-child {
  display: none !important;
}

/* Teknik Bilgiler kartı → menşei rehberinde aynı bilgiler var */
.bg-cream.py-20.md\:py-28 .lg\:col-span-2 {
  display: none !important;
}

/* Küratör Notu — kompakt, amber accent */
.bg-cream.py-20.md\:py-28 .lg\:hidden.mt-8.pt-6 {
  margin-top: 12px !important;
  padding-top: 0 !important;
  border-top: none !important;
  border-left: 3px solid var(--ala-accent);
  padding-left: 14px !important;
  background: rgba(247,176,62,0.04);
  border-radius: 0 4px 4px 0;
  padding: 12px 14px !important;
}

.bg-cream.py-20.md\:py-28 .lg\:hidden.mt-8.pt-6 blockquote {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.bg-cream.py-20.md\:py-28 .lg\:hidden.mt-8.pt-6 .flex.items-center.gap-3 {
  margin-top: 6px !important;
}

/* Hikaye text — kompakt */
.bg-cream.py-20.md\:py-28 .font-serif.text-base.md\:text-lg {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.bg-cream.py-20.md\:py-28 {
  padding: 16px 0 !important;
  background: #FAF8F4 !important;
}

.bg-cream.py-20.md\:py-28 > .container {
  padding: 0 16px !important;
}

.bg-cream.py-20.md\:py-28 .grid.grid-cols-1.lg\:grid-cols-5 {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* Each detail card inside bg-cream → white card */
.bg-cream.py-20.md\:py-28 .detail-info-card {
  background: #fff;
  border-radius: var(--ala-radius-sm);
  padding: 14px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(28, 26, 26, 0.05);
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}

.bg-cream.py-20.md\:py-28 .taste-tag {
  font-size: 10px !important;
  padding: 4px 10px !important;
}

/* Story/description text — proportional */
.bg-cream.py-20.md\:py-28 .font-serif.text-base.md\:text-lg {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* Curator quote card — special styling */
.curator-quote-card {
  background: linear-gradient(135deg, #fff 0%, rgba(244,240,232,0.4) 100%) !important;
  border-left: 3px solid var(--ala-accent) !important;
  margin-top: 0 !important;
  padding-top: 16px !important;
}

.curator-quote-card blockquote {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(28,26,26,0.55) !important;
}

/* Curator card — compact */
.curator-quote-card {
  padding: 14px 14px 14px 16px !important;
}

/* Story text — Read more collapse */
.story-text-content.story-collapsed {
  max-height: 4.5em !important;
  overflow: hidden !important;
  position: relative;
}

.story-text-content.story-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

.story-text-content.story-expanded {
  max-height: none !important;
}

.story-read-more {
  display: block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ala-primary);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.story-read-more:active {
  opacity: 1;
}

/* Specs card — keep green header, refine rows */
.bg-cream.py-20.md\:py-28 .detail-info-card[data-card="specs"] {
  padding: 0 !important;
  overflow: hidden;
}

.spec-card-header {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 12px 16px !important;
}

.spec-row {
  padding: 12px 16px !important;
}

.spec-row-icon {
  font-size: 13px !important;
}

/* ── Region Guide Block — Card-based mobile ── */

/* Farmer görseli — mobilde gizle, menşei banner zaten görseli gösteriyor */
.bg-light.py-16.md\:py-20.border-t .lg\:col-span-4 {
  display: none !important;
}

/* Region specs grid (2x4 grid) — mobilde gizle, kompakt kart varsa onun yerine */
.bg-light.py-16.md\:py-20.border-t .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 10px !important;
  margin-bottom: 12px !important;
}

.bg-light.py-16.md\:py-20.border-t .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4 > div span:first-child {
  font-size: 7px !important;
}

.bg-light.py-16.md\:py-20.border-t .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4 > div span:last-child {
  font-size: 11px !important;
}

.bg-light.py-16.md\:py-20.border-t {
  padding: 16px 0 !important;
  background: #fff !important;
}

.bg-light.py-16.md\:py-20.border-t > .container {
  padding: 0 16px !important;
}

/* Region guide header icon */
.region-guide-icon {
  font-size: 12px;
  margin-right: 3px;
  vertical-align: middle;
}

/* Başlık bölümü — kompakt */
.bg-light.py-16.md\:py-20.border-t .mb-10 {
  margin-bottom: 10px !important;
}

.bg-light.py-16.md\:py-20.border-t .mb-10 h2 {
  font-size: 1.1rem !important;
}

.bg-light.py-16.md\:py-20.border-t .mb-10 p {
  font-size: 12px !important;
  margin-top: 2px !important;
}

.bg-light.py-16.md\:py-20.border-t .grid.grid-cols-1.lg\:grid-cols-12 {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Region specs — compact single card, row-based */
.region-specs-compact-card {
  background: #fff;
  border-radius: var(--ala-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(28, 26, 26, 0.05);
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}

.region-specs-compact-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: var(--ala-primary);
  font-family: 'Manrope', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
}

.region-specs-compact-header i {
  font-size: 11px;
}

.region-specs-compact-body {
  padding: 0;
}

.region-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(28, 26, 26, 0.04);
}

.region-spec-row:last-child {
  border-bottom: none;
}

.region-spec-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(28, 26, 26, 0.35);
}

.region-spec-label i {
  font-size: 12px;
  color: var(--ala-primary);
  opacity: 0.35;
}

.region-spec-value {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(28, 26, 26, 0.8);
  text-align: right;
}

.bg-light.py-16.md\:py-20.border-t h2 {
  font-size: 1.2rem !important;
}

.bg-light.py-16.md\:py-20.border-t .max-w-xs {
  max-width: 180px !important;
}

/* Highlights section — compact */
.bg-light.py-16.md\:py-20.border-t .space-y-2 li {
  background: rgba(244, 240, 232, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px !important;
}

.bg-light.py-16.md\:py-20.border-t .space-y-2 li span:last-child {
  font-size: 12px !important;
}

/* Öne Çıkan Nitelikler başlığı */
.bg-light.py-16.md\:py-20.border-t .mb-6 > span {
  font-size: 8px !important;
}

/* Region description text — Read more collapse */
.region-desc-text {
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.region-desc-collapsed {
  max-height: 3.6em !important;
  overflow: hidden !important;
  position: relative;
}

.region-desc-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

.region-desc-expanded {
  max-height: none !important;
}

/* Region guide blockquote */
.bg-light.py-16.md\:py-20.border-t blockquote {
  background: rgba(247, 176, 62, 0.06);
  border-radius: 8px;
  padding: 8px 12px !important;
  border-left: 3px solid var(--ala-accent);
}

.bg-light.py-16.md\:py-20.border-t blockquote p {
  font-size: 12px !important;
}

/* Region guide heading — tighter */
.bg-light.py-16.md\:py-20.border-t .mb-10 {
  margin-bottom: 10px !important;
}

/* Highlights — more compact */
.bg-light.py-16.md\:py-20.border-t .space-y-2 {
  gap: 4px !important;
}

/* Rehberini Oku linki — compact */
.bg-light.py-16.md\:py-20.border-t .mt-6 {
  margin-top: 10px !important;
}

.bg-light.py-16.md\:py-20.border-t .mt-6 a {
  font-size: 9px !important;
}

.bg-light.py-16.md\:py-20.border-t .space-y-2 li {
  padding: 6px 8px !important;
  font-size: 12px !important;
}

/* "Rehberini Oku" link — compact */
.bg-light.py-16.md\:py-20.border-t .mt-6 {
  margin-top: 8px !important;
}

/* ── YouTube Video ── */
.bg-dark.py-4 {
  padding: 0 !important;
}

.bg-dark.py-4 .aspect-video {
  border-radius: 0 !important;
}

/* ── Related Products (Dark Section) ── */
div[style*="--primary"].relative.overflow-hidden.py-20 {
  padding: 24px 0 !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 > .container {
  padding: 0 16px !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 h2 {
  font-size: 1.2rem !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 .mb-10 {
  margin-bottom: 12px !important;
}

/* Related products — 2 col grid */
div[style*="--primary"].relative.overflow-hidden.py-20 .grid.grid-cols-2 {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 .grid.grid-cols-2 a {
  border-radius: var(--ala-radius-sm) !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 .grid.grid-cols-2 .p-4 {
  padding: 10px !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 .grid.grid-cols-2 h3 {
  font-size: 12px !important;
  margin-bottom: 3px !important;
}

div[style*="--primary"].relative.overflow-hidden.py-20 .grid.grid-cols-2 .font-serif.text-sm.text-accent {
  font-size: 13px !important;
}

/* ── Reviews Section ── */
#yorumlar {
  padding: 24px 0 !important;
  background: #FAF8F4 !important;
}

#yorumlar > .container {
  padding: 0 16px !important;
}

/* Reviews header with icon */
.reviews-header-icon {
  font-size: 14px;
  margin-right: 4px;
  vertical-align: middle;
  color: var(--ala-primary);
  opacity: 0.4;
}

#yorumlar .reviews-header {
  margin-bottom: 14px !important;
}

#yorumlar .reviews-header h2 {
  font-size: 1.2rem !important;
  margin-bottom: 4px !important;
}

#yorumlar .space-y-4.mb-12 {
  margin-bottom: 14px !important;
}

/* Review cards */
#yorumlar .bg-white.rounded-2xl {
  border-radius: var(--ala-radius-sm) !important;
  padding: 14px !important;
  border: 1px solid rgba(28, 26, 26, 0.04) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;
}

#yorumlar .bg-white.rounded-2xl .w-9.h-9 {
  width: 30px !important;
  height: 30px !important;
}

#yorumlar .bg-white.rounded-2xl.p-8 {
  padding: 16px !important;
}

#yorumlar .bg-white.rounded-2xl.p-8 h3 {
  font-size: 1rem !important;
  margin-bottom: 10px !important;
}

#yorumlar textarea {
  min-height: 80px !important;
  border-radius: var(--ala-radius-sm) !important;
}

/* ── Product swipe navigation ── */
.product-swipe-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 57, 42, 0.03);
  border-radius: var(--ala-radius-sm);
  margin: 10px 16px;
}

.product-swipe-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--ala-primary);
  text-decoration: none;
  opacity: 0.6;
  padding: 8px;
  border-radius: 8px;
}

.product-swipe-nav a:active { opacity: 1; background: rgba(0,57,42,0.05); }
.product-swipe-nav a.disabled { opacity: 0.15; pointer-events: none; }

/* ── Sticky cart bar (custom classes) ── */
.mobile-sticky-cart-bar {
  position: fixed;
  bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom));
  left: 0; right: 0;
  z-index: 9998;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(28,26,26,0.06);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sticky-cart-bar.visible { transform: translateY(0); }

.mobile-sticky-cart-bar .mscb-price {
  font-family: 'Manrope', sans-serif;
  font-size: 18px; font-weight: 800;
  color: var(--ala-dark); white-space: nowrap;
}

.mobile-sticky-cart-bar .mscb-price small {
  font-size: 12px; opacity: 0.35;
  text-decoration: line-through; margin-left: 6px;
}

.mobile-sticky-cart-bar .mscb-btn {
  flex: 1;
  background: var(--ala-primary); color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 14px 20px;
  border-radius: 14px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px;
  transition: transform 0.15s, background 0.2s;
}

.mobile-sticky-cart-bar .mscb-btn:active {
  background: #002e22; transform: scale(0.97);
}

/* ── TOAST — appear near button, not slide from bottom ── */
#ala-card-cart-toast {
  position: fixed !important;
  top: auto !important;
  bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom) + 70px) !important;
  left: 16px !important;
  right: 16px !important;
  transform: none !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(0,57,42,0.08) !important;
  z-index: 10002 !important;
  animation: toastAppear 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes toastAppear {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ═══════════════════════════════════════
   ═══ CART PAGE ═══
   ═══════════════════════════════════════ */

/* Cart items */
.cart-item-mobile {
  background: #fff;
  border-radius: var(--ala-radius-md);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.cart-item-mobile img {
  width: 72px; height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.cart-item-mobile .cart-item-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--ala-dark);
  line-height: 1.3;
  margin-bottom: 2px;
}

.cart-item-mobile .cart-item-meta {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  color: var(--ala-dark); opacity: 0.4;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.cart-item-mobile .cart-item-price {
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 800;
  color: var(--ala-dark);
  margin-top: 6px;
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(28,26,26,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.qty-stepper button {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  font-size: 16px; color: var(--ala-dark);
}

.qty-stepper button:active { background: rgba(0,57,42,0.05); }

.qty-stepper .qty-value {
  width: 32px; text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--ala-dark);
  border-left: 1.5px solid rgba(28,26,26,0.08);
  border-right: 1.5px solid rgba(28,26,26,0.08);
  padding: 6px 0;
}

/* Sticky checkout bar */
.mobile-checkout-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10001;
  background: rgba(250,248,244,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(28,26,26,0.08);
  padding: 12px 16px calc(12px + var(--ala-safe-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
}

.mobile-checkout-bar .mcb-total {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 10px;
}

.mobile-checkout-bar .mcb-total-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ala-dark); opacity: 0.5;
}

.mobile-checkout-bar .mcb-total-value {
  font-family: 'Manrope', sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--ala-dark);
}

.mobile-checkout-bar .mcb-btn {
  width: 100%;
  background: var(--ala-primary);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 16px;
  border-radius: 14px;
  border: none;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 52px;
}

.mobile-checkout-bar .mcb-btn:active {
  background: #002e22;
  transform: scale(0.98);
}

/* Free shipping progress */
.mobile-shipping-bar {
  background: rgba(0,57,42,0.04);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.mobile-shipping-bar .msb-text {
  font-family: 'Manrope', sans-serif;
  font-size: 10px; font-weight: 600;
  color: var(--ala-dark); opacity: 0.5;
  margin-bottom: 4px;
}

.mobile-shipping-bar .msb-track {
  height: 4px;
  background: rgba(28,26,26,0.06);
  border-radius: 4px; overflow: hidden;
}

.mobile-shipping-bar .msb-fill {
  height: 100%;
  background: var(--ala-primary);
  border-radius: 4px;
  transition: width 0.5s ease;
}


/* ═══════════════════════════════════════
   ═══ GENERAL PAGE SECTIONS ═══
   ═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   G1. SECTION PADDING — Consistent App Spacing
   ═══════════════════════════════════════ */
section {
  --section-px: 20px;
}

/* Border-top/bottom'lar mobilde gereksiz — app'lerde yok */
main > section {
  border-top: none !important;
  border-bottom: none !important;
}

/* Promo banner section — minimal */
.py-12.md\:py-16.bg-light {
  padding: 8px 0 !important;
}


/* ═══════════════════════════════════════
   BENZER KAHVELER — Horizontal scroll slider
   Grid yerine yatay kaydırma. Her kart kompakt.
   ═══════════════════════════════════════ */

/* Dark section wrapper — compact */
div[style*="--primary"].py-20.md\:py-24 {
  padding: 28px 0 !important;
}

/* Section header — compact */
div[style*="--primary"] .flex.items-end.justify-between.mb-10 {
  margin-bottom: 16px !important;
}

div[style*="--primary"] .flex.items-end.justify-between.mb-10 h2 {
  font-size: 1.25rem !important;
}

/* Grid → horizontal scroll */
div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 10px !important;
  padding-bottom: 4px;
}

div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4::-webkit-scrollbar {
  display: none;
}

/* Her kart → sabit genişlik, snap */
div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a {
  flex: 0 0 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  scroll-snap-align: start;
  border-radius: var(--ala-radius-sm) !important;
}

/* İçindeki görsel — küçük kare */
div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a .aspect-square {
  aspect-ratio: 1 / 1 !important;
  max-height: 160px !important;
}

/* İçindeki metin — kompakt */
div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a .p-4 {
  padding: 10px 12px !important;
}

div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a h3 {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a .font-serif.text-sm.text-accent {
  font-size: 13px !important;
}

/* Tasting notes — gizle, yer tasarrufu */
div[style*="--primary"] .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 > a p {
  display: none !important;
}

/* "Tümünü Gör" linki — mobilde göster */
div[style*="--primary"] .hidden.sm\:flex {
  display: flex !important;
  font-size: 10px !important;
}


/* ═══════════════════════════════════════
   G2. GRID OVERRIDES — Single column
   ═══════════════════════════════════════ */
/* Exclude: ayin-kahvesi, regions-teaser, related products, trust badges, region specs */
.grid.grid-cols-2:not(#ayin-kahvesi-grid):not(#regions-teaser .grid):not(.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4):not(#product-hero .grid.grid-cols-2):not(.region-specs-grid):not(div[style*="--primary"] .grid.grid-cols-2):not(.py-8 .grid.grid-cols-2) {
  grid-template-columns: 1fr !important;
}

.grid.grid-cols-3,
.grid.md\:grid-cols-3 {
  grid-template-columns: 1fr !important;
}


/* ═══════════════════════════════════════
   G3. CONTENT PAGES — Hero compact
   ═══════════════════════════════════════ */
.min-h-screen.pt-28,
.min-h-screen.pt-32,
.bg-primary.pt-32,
.bg-primary.pt-32.pb-16,
[class*="pt-32"][class*="pb-16"],
[class*="pt-32"][class*="pb-20"] {
  padding-top: 72px !important;
  padding-bottom: 24px !important;
}

.bg-primary h1,
.bg-dark h1 {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}

.bg-primary h1 + p,
.bg-primary .font-serif.italic {
  font-size: 13px !important;
}


/* ═══════════════════════════════════════
   G4. BLOG PAGES
   ═══════════════════════════════════════ */
.bg-primary.pt-32.pb-16 {
  padding-top: 72px !important;
  padding-bottom: 20px !important;
}

.bg-primary.pt-32.pb-16 h1 {
  font-size: 1.5rem !important;
  margin-bottom: 8px !important;
}

.bg-primary.pt-32.pb-16 p {
  font-size: 13px !important;
}

.bg-primary.pt-32.pb-16 form {
  margin-top: 16px !important;
}

.bg-primary.pt-32.pb-16 input {
  padding: 12px 12px 12px 44px !important;
  font-size: 14px !important;
  border-radius: var(--ala-radius-sm) !important;
}

/* Blog category chips */
#blog-category-chips {
  gap: 8px !important;
  padding: 12px 0 !important;
}

#blog-category-chips .blog-cat-chip {
  padding: 8px 14px !important;
  font-size: 10px !important;
  border-radius: 20px !important;
}

/* Blog grid — single column, card style */
.blog-grid,
.blog-content-area .grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.blog-card,
.blog-grid > a,
.blog-grid > div {
  border-radius: var(--ala-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--ala-card-shadow);
}

.blog-grid img,
.blog-card img {
  border-radius: var(--ala-radius-md) var(--ala-radius-md) 0 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ═══════════════════════════════════════
   G5. REGIONS PAGES
   ═══════════════════════════════════════ */
.relative.flex.flex-col.items-center.justify-center.text-center.bg-primary {
  min-height: 50vh !important;
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}

.relative.flex.flex-col.items-center.justify-center.text-center.bg-primary h1 {
  font-size: 2.5rem !important;
}

.relative.flex.flex-col.items-center.justify-center.text-center.bg-primary .flex.flex-wrap.justify-center.gap-2 {
  margin-top: 20px !important;
  gap: 6px !important;
}

.relative.flex.flex-col.items-center.justify-center.text-center.bg-primary .flex.flex-wrap.justify-center.gap-2 a {
  font-size: 8px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
}

/* Scroll indicator — hide on mobile */
.relative.flex.flex-col.items-center.justify-center.text-center.bg-primary > .absolute.bottom-8 {
  display: none !important;
}

/* Region editorial sections */
.region-editorial-section {
  grid-template-columns: 1fr !important;
}

.region-editorial-section .region-editorial-img {
  min-height: 220px !important;
  border-radius: var(--ala-radius-md) !important;
  overflow: hidden;
}

.region-editorial-section .region-editorial-content {
  padding: 20px 0 !important;
}

.region-editorial-section .region-editorial-content h2 {
  font-size: 1.35rem !important;
}

.region-editorial-section .grid {
  grid-template-columns: 1fr !important;
}


/* ═══════════════════════════════════════
   G6. TOPTAN / PRIVATE LABEL
   ═══════════════════════════════════════ */
.bg-primary.text-white.pt-32.pb-20 {
  padding-top: 72px !important;
  padding-bottom: 24px !important;
}

.bg-primary.text-white.pt-32.pb-20 h1 {
  font-size: 1.6rem !important;
  margin-bottom: 10px !important;
}

.bg-primary.text-white.pt-32.pb-20 p {
  font-size: 14px !important;
}

.bg-light.py-20 {
  padding: 24px 0 !important;
}

.bg-light.py-20 .grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.bg-light.py-20 .bg-white {
  padding: 20px !important;
  border-radius: var(--ala-radius-md) !important;
}

.bg-light.py-20 .bg-white h3 {
  font-size: 1.1rem !important;
}

/* Page builder */
.page-builder section {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.page-builder .bg-primary {
  padding-top: 72px !important;
}

.page-builder .grid.lg\:grid-cols-2,
.page-builder .flex.lg\:flex-row {
  grid-template-columns: 1fr !important;
  flex-direction: column !important;
}

.page-builder .region-card,
.page-builder .bg-cover {
  border-radius: var(--ala-radius-md) !important;
  min-height: 200px !important;
}

.page-builder h2 { font-size: 1.35rem !important; }
.page-builder h3 { font-size: 1.05rem !important; }

.page-builder .prose,
.page-builder .max-w-3xl {
  padding: 0 4px !important;
}

.page-builder .prose p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}


/* ═══════════════════════════════════════
   G7. FAQ
   ═══════════════════════════════════════ */
.faq-item,
details {
  border-radius: var(--ala-radius-sm) !important;
  margin-bottom: 8px !important;
}

details summary {
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 600;
  min-height: 48px;
}

details[open] .faq-answer,
details p {
  padding: 0 16px 14px !important;
  font-size: 13px !important;
}


/* ═══════════════════════════════════════
   G8. CONTACT
   ═══════════════════════════════════════ */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: var(--ala-radius-sm) !important;
}

.contact-info-card {
  padding: 16px !important;
  border-radius: var(--ala-radius-md) !important;
}

.contact-map,
iframe[src*="google.com/maps"] {
  border-radius: var(--ala-radius-md) !important;
  height: 250px !important;
}

table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════
   G9. PROFILE
   ═══════════════════════════════════════ */
#profile-sidebar {
  width: 100% !important;
}

#profile-sidebar > .sticky {
  position: relative !important;
  top: auto !important;
}

#profile-sidebar .relative.overflow-hidden {
  border-radius: var(--ala-radius-md) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

#profile-sidebar nav.flex.flex-col {
  flex-direction: row !important;
  overflow-x: auto;
  gap: 6px !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
#profile-sidebar nav.flex.flex-col::-webkit-scrollbar { display: none; }

#profile-sidebar .profile-nav-link {
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 8px 14px !important;
}

#profile-sidebar nav .mt-4.pt-4.border-t {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.flex.flex-col.lg\:flex-row.gap-8 {
  flex-direction: column !important;
}

.min-h-screen.pt-28 {
  padding-top: 76px !important;
}


/* ═══════════════════════════════════════
   G10. CHECKOUT FORM
   ═══════════════════════════════════════ */
.checkout-form-mobile input,
.checkout-form-mobile select,
.checkout-form-mobile textarea {
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: var(--ala-radius-sm) !important;
  padding: 12px 16px !important;
}

.checkout-form-mobile label {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px !important;
}


/* ═══════════════════════════════════════
   G11. SEARCH OVERLAY
   ═══════════════════════════════════════ */
#search-overlay {
  padding-top: 76px !important;
}

#search-overlay .text-center.mb-12 {
  margin-bottom: 20px !important;
}

#search-overlay .text-center.mb-12 h2 {
  font-size: 1.3rem !important;
}

#search-overlay input[type="text"] {
  font-size: 18px !important;
  padding: 12px 0 !important;
}

#search-overlay .flex.flex-wrap.gap-4 a {
  font-size: 11px !important;
  padding: 10px 16px !important;
  border-radius: 20px !important;
}


/* ═══════════════════════════════════════
   G12. OFFCANVAS / DRAWER
   ═══════════════════════════════════════ */
.offcanvas-end {
  width: 100% !important;
  max-width: 100% !important;
}

#cartDrawer .offcanvas-body {
  padding: 16px !important;
}


/* ═══════════════════════════════════════
   G13. MOBILE MENU OVERLAY
   ═══════════════════════════════════════ */
.mobile-menu-overlay {
  padding-bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom) + 16px) !important;
}


/* ═══════════════════════════════════════
   G14. TOAST / POPUPS
   ═══════════════════════════════════════ */
#ala-card-cart-toast {
  position: fixed !important;
  bottom: calc(var(--ala-bottom-nav-h) + var(--ala-safe-bottom) + 12px) !important;
  left: 16px !important;
  right: 16px !important;
  top: auto !important;
  transform: translateY(20px) !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: var(--ala-radius-sm) !important;
}

#ala-card-cart-toast[style*="opacity: 1"],
#ala-card-cart-toast[style*="opacity:1"] {
  transform: translateY(0) !important;
}


/* ═══════════════════════════════════════
   G15. AUTH PAGES
   ═══════════════════════════════════════ */
.auth-form-container {
  padding: 20px !important;
}

.auth-form-container input {
  min-height: 48px !important;
  font-size: 16px !important;
}


/* ═══════════════════════════════════════
   G16. ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════ */

/* Reduce motion for perf */
.reveal {
  transition-duration: 0.3s !important;
}

/* Skeleton shimmer */
@keyframes mobileShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.mobile-skeleton,
.skeleton {
  background: linear-gradient(90deg, #f0ece4 25%, #e8e2d6 50%, #f0ece4 75%) !important;
  background-size: 400px 100% !important;
  animation: mobileShimmer 1.2s infinite !important;
  border-radius: var(--ala-radius-sm) !important;
}

/* Swipe hint */
.swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  opacity: 0.2;
}

.swipe-hint::before,
.swipe-hint::after {
  content: '';
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--ala-dark);
}

/* Horizontal scroll sections — subtle fade edges */
.app-scroll-x::before,
.app-scroll-x::after {
  content: '';
  position: sticky;
  flex-shrink: 0;
  width: 20px;
  z-index: 1;
}

/* Overscroll — allow normal scroll, contain bounce */

/* Touch target minimum */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}


/* ═══════════════════════════════════════
   G17. VALUE CARDS — Compact horizontal
   ═══════════════════════════════════════ */
/* Value proposition cards on home — horizontal scroll */


/* ═══════════════════════════════════════
   G18. MARQUEE — Region cards horizontal
   ═══════════════════════════════════════ */
.region-grid-mobile {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 0 20px;
  scrollbar-width: none;
}
.region-grid-mobile::-webkit-scrollbar { display: none; }

.region-grid-mobile > * {
  scroll-snap-align: start;
  flex: 0 0 65%;
  min-width: 220px;
}


/* ═══════════════════════════════════════
   UTILITY: Horizontal product scroll
   ═══════════════════════════════════════ */
.mobile-product-scroll {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 0 20px;
  scrollbar-width: none;
}
.mobile-product-scroll::-webkit-scrollbar { display: none; }

.mobile-product-scroll > * {
  scroll-snap-align: start;
  flex: 0 0 75%;
  min-width: 280px;
}

} /* ═══ End @media (max-width: 1023px) ═══ */