/* Herboshakti storefront — ported from the Herboshakti.dc.html design canvas. */

:root {
  --hb-bg: #FBF8F1;
  --hb-surface: #FFFDF9;
  --hb-ink: #14251C;
  --hb-forest: #1C3427;
  --hb-forest-soft: #2C4436;
  --hb-muted: #5F6F62;
  --hb-faint: #8B8471;
  --hb-line: #E5DDCC;
  --hb-line-soft: #EBE3D2;
  --hb-gold: #B08D57;
  --hb-terracotta: #B5654A;
  --hb-terracotta-dark: #8E4A33;
  --hb-sand: #EFEADC;
}

body {
  margin: 0;
  background: var(--hb-bg);
  color: var(--hb-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--hb-terracotta); text-decoration: none; }
a:hover { color: var(--hb-terracotta-dark); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hb-gold);
  outline-offset: 3px;
}
input, select, textarea { font-family: inherit; }
img { display: block; }

/* Overlays carry an inline display:flex, which would otherwise beat the UA
   rule for [hidden]. Panels stay closed until JS (or nothing) opens them. */
[hidden] { display: none !important; }

@keyframes hbUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hbSlide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hbSlideL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes hbSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hbSway { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }

header button, header a { white-space: nowrap; }

/* ---- Media fill: every design image slot is an object-fit cover image ---- */
.hb-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-fill-contain { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--hb-sand); }

/* ---- Hover behaviours (replaces the canvas runtime's style-hover attr) ---- */
.hb-h-sand:hover { background: var(--hb-sand); }
.hb-h-dark:hover { background: var(--hb-forest) !important; color: var(--hb-bg) !important; }
.hb-h-terra:hover { background: var(--hb-terracotta) !important; color: var(--hb-bg) !important; }
.hb-h-gold:hover { background: var(--hb-gold) !important; color: var(--hb-bg) !important; }
.hb-h-cream:hover { background: var(--hb-bg) !important; color: var(--hb-forest) !important; }
.hb-h-line:hover { border-color: var(--hb-forest) !important; }
.hb-h-gold-line:hover { border-color: var(--hb-gold) !important; }
.hb-h-terra-text:hover { color: var(--hb-terracotta) !important; }
.hb-h-dark-text:hover { color: var(--hb-forest) !important; }
.hb-h-gold-text:hover { color: #D8B981 !important; }
.hb-h-scrim:hover { background: rgba(251, 248, 241, .14) !important; }
.hb-h-scrim-dark:hover { background: rgba(20, 37, 28, .55) !important; }
.hb-h-lift { transition: box-shadow .3s, transform .3s; }
.hb-h-lift:hover { box-shadow: 0 18px 40px rgba(20, 37, 28, .09); transform: translateY(-3px); }
.hb-h-shadow { transition: box-shadow .3s; }
.hb-h-shadow:hover { box-shadow: 0 16px 36px rgba(20, 37, 28, .08); }
.hb-h-tile { transition: border-color .2s, box-shadow .2s; }
.hb-h-tile:hover { border-color: var(--hb-gold); box-shadow: 0 12px 28px rgba(20, 37, 28, .07); }

/* Quick view reveals on card hover, as in the design */
.hb-card-media .hb-quickview { opacity: 0; transition: opacity .25s; }
.hb-card-media:hover .hb-quickview { opacity: 1; }

/* Links that have to look like the design's plain buttons */
.hb-plain { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; display: block; }
.hb-plain:hover { text-decoration: none; }

[data-tag-rail] { scrollbar-width: none; -ms-overflow-style: none; }
[data-tag-rail]::-webkit-scrollbar { display: none; }

@media (max-width: 1080px) {
  [data-desktop-nav] { display: none !important; }
  [data-hamburger] { display: flex !important; }
  [data-header-search] { display: none !important; }
}

@media (max-width: 900px) {
  [data-split] { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  [data-tiles] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-tiles] > * { grid-column: span 1 !important; height: 280px !important; }
  [data-shop-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-filter-aside] { display: none !important; }
  [data-grid-toolbar] { display: none !important; }
  [data-cat-tiles] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-footer-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 34px 20px !important; }
  [data-deal-terms] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-box-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  [data-footer-bar] { justify-content: flex-start !important; }
  [data-cat-tiles] {
    display: flex !important; overflow-x: auto !important; gap: 12px !important;
    padding-bottom: 10px !important; scroll-snap-type: x mandatory !important;
    margin: 0 -28px !important; padding-left: 28px !important; padding-right: 28px !important;
  }
  [data-cat-tiles] > * { flex: 0 0 112px !important; scroll-snap-align: start !important; }
  [data-mobile-tabbar] { display: block !important; }
  [data-sticky-atc] { display: flex !important; }
  [data-box-bar] { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
  [data-checkout-grid] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-checkout-grid] > label { grid-column: auto !important; }
  [data-header-signin] { display: none !important; }
  [data-header-account] { display: none !important; }
  [data-header-cart] { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; }
  [data-header-cart-icon] { display: flex !important; }
  [data-header-cart-label] { display: none !important; }
  [data-header-cart-count] {
    position: absolute !important; top: -3px; right: -3px; background: var(--hb-terracotta) !important;
    min-width: 18px; padding: 0 5px !important; font-size: 10px; line-height: 18px;
  }
  [data-header-row] { gap: 14px !important; padding: 12px 16px !important; }
  [data-header-actions] { gap: 2px !important; }
  [data-header-account-text] { display: none !important; }
  [data-trio] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-ingredient-card] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-ingredient-image] { height: 220px !important; }
  [data-cart-line] { flex-wrap: wrap !important; row-gap: 14px !important; }
  [data-product-hero] { height: 380px !important; }
  [data-product-thumb] { height: 90px !important; }
  [data-login-image] { display: none !important; }
  [data-login-form] { max-width: none !important; }
  [data-search-panel] { padding: 24px 18px 32px !important; }
  [data-search-input] { font-size: 20px !important; }
  [data-site-footer] { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
  [data-atc-spacer] { display: block !important; }
  [data-tag-rail] {
    margin-left: -28px !important; margin-right: -28px !important;
    padding-left: 28px !important; padding-right: 28px !important; scroll-padding-left: 28px !important;
  }
  [data-page-lede] { display: none !important; }
  [data-title-row] { flex-wrap: nowrap !important; gap: 12px !important; }
  [data-page-title] { font-size: 27px !important; }
  [data-page-tools] { gap: 18px !important; flex: none !important; }
  [data-page-tools] button { font-size: 14px !important; gap: 6px !important; }
  [data-tools-rule] { margin: 16px 0 16px !important; }
  [data-inline-search] input { padding: 12px 16px 12px 42px !important; }
  [data-tag-rail] > * { padding: 12px 18px !important; font-size: 13px !important; }

  /* Two-up product grid, as in the reference */
  [data-product-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  [data-product-grid] [data-card-media] { height: 168px !important; }
  [data-product-grid] [data-card-body] { padding: 12px !important; }
  [data-product-grid] [data-card-kicker] { font-size: 9px !important; letter-spacing: .14em !important; }
  [data-product-grid] [data-card-name] { font-size: 17px !important; margin: 6px 0 0 !important; }
  [data-product-grid] [data-card-desc] { display: none !important; }
  [data-product-grid] [data-card-meta] { margin-top: 10px !important; font-size: 11px !important; }
  [data-product-grid] [data-card-price] { margin-top: 8px !important; gap: 6px !important; }
  [data-product-grid] [data-card-price] > span:first-child { font-size: 18px !important; }
  [data-product-grid] [data-card-off] { font-size: 10px !important; padding: 2px 7px !important; }
  [data-product-grid] [data-card-save] { font-size: 11px !important; }
  [data-product-grid] [data-card-badge] { top: 10px !important; left: 10px !important; font-size: 9px !important; padding: 5px 9px !important; }
  [data-product-grid] [data-card-cta] { margin-top: 11px !important; padding: 10px !important; font-size: 10px !important; letter-spacing: .1em !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}