/* Batanana storefront — design tokens + shared styles
   Ported 1:1 from the hi-fi design (.dc.html). No framework, no build. */

:root {
  /* Color */
  --bg:        #F7F3EC;  /* page canvas */
  --card:      #FFFDF9;  /* card surface */
  --panel:     #EDE4D3;  /* warm panel */
  --panel-2:   #EDE7DB;
  --footer:    #F2EBDD;
  --ink:       #221A12;  /* dark brand */
  --text:      #2B2118;
  --body:      #4A4035;
  --body-2:    #5A4F42;
  --muted:     #8A7E6E;
  --muted-2:   #9A8E7E;
  --muted-3:   #6B6052;
  --accent:    #B56A2E;  /* terracotta — primary CTA / links */
  --accent-h:  #a35e26;
  --gold:      #C98A45;
  --green:     #6F7A4F;
  --green-d:   #4F5A38;
  --red:       #B23A2E;
  --line:      #E7DFD2;
  --line-2:    #ECE3D4;
  --line-3:    #E2D9C9;
}

@font-face { font-family: 'Geranium'; src: url('../fonts/geranium.otf') format('opentype'); font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #E8C9A0; }
a { color: inherit; }
img { max-width: 100%; }

@keyframes bshop-slideup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.bshop-scroll::-webkit-scrollbar { width: 8px; }
.bshop-scroll::-webkit-scrollbar-thumb { background: #E0D6C6; border-radius: 8px; }

/* Layout helpers */
.wrap   { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; width: 100%; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding-left: 28px; padding-right: 28px; width: 100%; }
.font-head { font-family: 'Bricolage Grotesque', sans-serif; }
.font-logo { font-family: 'Geranium', serif; }

/* Hero thumbs responsive gallery */
.hero-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 4px !important;
}
.hero-thumb-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  flex: 0 0 64px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #EFE7D9 !important;
  border: 2px solid transparent;
  cursor: pointer !important;
  transition: border-color .2s ease, opacity .2s ease !important;
}

/* Hover utilities (replace the design's style-hover attribute) */
.h-nav        { transition: color .15s ease; }
.h-nav:hover  { color: var(--text) !important; }
.btn          { cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; transition: background .15s ease, color .15s ease; }
.btn-dark:hover    { background: #3a2e22 !important; }
.btn-accent:hover  { background: var(--accent-h) !important; }
.btn-ghost:hover   { background: #EFE7D9 !important; }
.btn-outline:hover { background: var(--ink) !important; color: var(--bg) !important; }
.lnk:hover    { color: var(--text) !important; }
.rm:hover     { color: var(--red) !important; }

/* Responsive grid & typographic scaling */
@media (max-width: 920px) {
  .grid-2, .grid-2-l, .grid-2-r, .grid-2q { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .hide-sm { display: none !important; }
  h1, .hero-title { font-size: 36px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.18 !important; }
}

@media (max-width: 760px) {
  /* Mobile safety net: collapse ANY inline grid to single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"],
  [style*="font-size: 54px"], [style*="font-size:54px"],
  [style*="font-size: 52px"], [style*="font-size:52px"],
  [style*="font-size: 50px"], [style*="font-size:50px"] { font-size: 32px !important; line-height: 1.12 !important; }
  [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"], [style*="font-size: 32px"] { font-size: 24px !important; line-height: 1.2 !important; }
  .hero-thumb-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    flex: 0 0 56px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .wrap, .wrap-narrow { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:56px"], [style*="padding: 56px"],
  [style*="padding:52px"], [style*="padding: 52px"],
  [style*="padding:48px"], [style*="padding: 48px"],
  [style*="padding:44px"], [style*="padding: 44px"],
  [style*="padding:60px"], [style*="padding: 60px"],
  [style*="padding:72px"], [style*="padding: 72px"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}