/* 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; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.font-head { font-family: 'Bricolage Grotesque', sans-serif; }
.font-logo { font-family: 'Geranium', serif; }

/* 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: collapse two-column grids on small screens */
@media (max-width: 920px) {
  .grid-2, .grid-2-l, .grid-2-r { 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: 38px !important; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .wrap, .wrap-narrow { padding-left: 18px; padding-right: 18px; }
}

/* Mobile safety net: collapse ANY inline grid (incl. converted design pages) to one column */
@media (max-width: 760px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="font-size: 50px"], [style*="font-size:50px"] { font-size: 36px !important; }
  [style*="font-size: 38px"] { font-size: 30px !important; }
}