/* ALQQAMAR — Boutique listing page styles.
   Pixel-perfect gate pass 2026-07-09.
   Source: Figma "💙 BOUTIQUE - PRODUCT LISTING PAGE", absoluteRenderBounds.
   Frames: 😻 Boutique — Catalog — Desktop 1440px (ID 464:20879)
           📱 Boutique — Catalog — Mobile 390px (ID 464:21155)
   Updated 2026-08-02: all clamp() formulas updated to 320→1920px range (divisor 1600).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Page wrapper top offset ── */
.bc-boutique {
  padding-top: var(--alq-header-h) !important;
}

/* ══════════════════════════════════════
   SECTION 1 — PAGE INTRO
   ══════════════════════════════════════ */

.bc-intro {
  text-align: center !important;
  padding-top:    clamp(32px, calc(32px + 16 * ((100vw - 320px) / 1600)), 48px) !important;
  padding-bottom: clamp(32px, calc(32px + 24 * ((100vw - 320px) / 1600)), 56px) !important;
}

.bc-intro__title,
h1.bc-intro__title {
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    400 !important;
  text-transform: uppercase !important;
  color:          #111111 !important;
  font-size:      clamp(32px, calc(32px + 32 * ((100vw - 320px) / 1600)), 64px) !important;
  line-height:    clamp(39px, calc(39px + 39 * ((100vw - 320px) / 1600)), 78px) !important;
  letter-spacing: 0 !important;
  margin-bottom:  12px !important;
}

.bc-intro__copy {
  display:        block !important;
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    400 !important;
  color:          #757575 !important;
  text-align:     center !important;
  letter-spacing: 0 !important;
  font-size:      clamp(22px, calc(22px + 23 * ((100vw - 320px) / 1600)), 45px) !important;
  line-height:    clamp(27px, calc(27px + 29 * ((100vw - 320px) / 1600)), 56px) !important;
  max-width:      clamp(300px, calc(300px + 340 * ((100vw - 320px) / 1600)), 640px) !important;
  margin:         0 auto !important;
  transition:     color 0.15s !important;
}

.bc-intro__link {
  text-decoration: none !important;
  color:           inherit !important;
  display:         block !important;
}

.bc-intro__link:hover .bc-intro__copy {
  text-decoration:       underline !important;
  text-underline-offset: 3px !important;
}

/* ══════════════════════════════════════
   SECTION 2 — FILTER BAR
   ══════════════════════════════════════ */

.bc-toolbar {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  padding-left:    clamp(24px, calc(24px + 64 * ((100vw - 320px) / 1600)), 88px) !important;
  padding-right:   clamp(24px, calc(24px + 64 * ((100vw - 320px) / 1600)), 88px) !important;
  padding-top:     clamp(14px, calc(14px + 2 * ((100vw - 320px) / 1600)), 16px) !important;
  padding-bottom:  clamp(14px, calc(14px + 2 * ((100vw - 320px) / 1600)), 16px) !important;
  border-bottom:   0.5px solid rgba(11, 64, 180, 0.18) !important;
  position:        relative !important;
  box-sizing:      border-box !important;
}

.bc-mask {
  position:   fixed !important;
  inset:      0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  z-index:    200 !important;
  display:    none !important;
}
.bc-mask.is-active { display: block !important; }

.bc-cats {
  display:         flex !important;
  flex-wrap:       nowrap !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  gap:             clamp(58px, calc(58px + 18 * ((100vw - 320px) / 1600)), 76px) !important;
  list-style:      none !important;
  margin:          0 !important;
  padding:         0 !important;
}

.bc-cat[data-category="accessories"],
.bc-cat[data-category="candles"],
.bc-cat[data-category="uncategorized"] {
  display: none !important;
}

.bc-cat {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  box-sizing:      border-box !important;
  border-radius:   0 !important;
  border:          none !important;
  background:      transparent !important;
  cursor:          pointer !important;
  white-space:     nowrap !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       clamp(10px, calc(10px + 2 * ((100vw - 320px) / 1600)), 12px) !important;
  font-weight:     400 !important;
  line-height:     15px !important;
  letter-spacing:  clamp(0.4px, calc(0.4px + 0.1 * ((100vw - 320px) / 1600)), 0.5px) !important;
  color:           rgba(0, 0, 0, 0.35) !important;
  padding:         0 0 4px !important;
  border-bottom:   2px solid transparent !important;
  text-transform:  uppercase !important;
  transition:      color 0.2s, border-color 0.2s !important;
}

.bc-cat:hover { color: rgba(0, 0, 0, 0.7) !important; }

.bc-cat.active,
.bc-cat.on {
  background:    transparent !important;
  color:         #0b40b4 !important;
  font-weight:   400 !important;
  border-bottom: 2px solid #0b40b4 !important;
}

.bc-cat[data-category="tarot"],
.bc-cat[data-category="oracle"] { width: auto !important; }

/* ══════════════════════════════════════
   SECTION 3 — PRODUCT GRID
   ══════════════════════════════════════ */

#grid-container {
  display:               grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  padding-top:           clamp(24px, calc(24px + 8 * ((100vw - 320px) / 1600)), 32px) !important;
  padding-left:          clamp(24px, calc(24px + 64 * ((100vw - 320px) / 1600)), 88px) !important;
  padding-right:         clamp(24px, calc(24px + 64 * ((100vw - 320px) / 1600)), 88px) !important;
  column-gap:            clamp(12px, calc(12px + 32 * ((100vw - 320px) / 1600)), 44px) !important;
  row-gap:               20px !important;
  box-sizing:            border-box !important;
}

@media (min-width: 1264px) {
  #grid-container {
    grid-template-columns: repeat(3, 392px) !important;
    justify-content:       center !important;
    max-width:             1344px !important;
    margin-left:           auto !important;
    margin-right:          auto !important;
    padding-left:          0 !important;
    padding-right:         0 !important;
  }
}

.bc-card {
  cursor:          pointer !important;
  display:         block !important;
  text-decoration: none !important;
}

/* Image wrap — 1:1 mobile → 392:240 desktop */
.bc-card__img-wrap {
  display:      block !important;
  position:     relative !important;
  overflow:     hidden !important;
  background:   #f5f5f5 !important;
  cursor:       pointer !important;
  aspect-ratio: 1 / 1 !important;
}

@media (min-width: 1264px) {
  .bc-card__img-wrap { aspect-ratio: 392 / 240 !important; }
}

.bc-card__img-wrap img,
.bc-img-primary {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  transition: transform 0.5s ease, opacity 0.5s ease !important;
}

.bc-img-secondary {
  position:   absolute !important;
  inset:      0 !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  opacity:    0 !important;
  transition: opacity 0.5s ease !important;
}

.bc-card:hover .bc-img-primary        { opacity: 0 !important; }
.bc-card:hover .bc-img-secondary      { opacity: 1 !important; }
.bc-card:hover .bc-card__img-wrap img { transform: scale(1.04) !important; }

/* ── Card info
   Figma: zero horizontal padding, name flush left, bag flush right.
   Mobile: top 15px, row-gap 6px (CSS), bottom 15px
   Desktop: top 18px, row-gap 12px (CSS), bottom 45px
   ── */
.bc-card__info {
  display:               grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap:            0 !important;
  row-gap:               clamp(6px, calc(6px + 6 * ((100vw - 320px) / 1600)), 12px) !important;
  padding-top:           clamp(15px, calc(15px + 3 * ((100vw - 320px) / 1600)), 18px) !important;
  padding-bottom:        clamp(15px, calc(15px + 30 * ((100vw - 320px) / 1600)), 45px) !important;
  padding-left:          0 !important;
  padding-right:         0 !important;
  align-items:           start !important;
  box-sizing:            border-box !important;
}

/* Card name — 9px/11px mobile → 11px/13px desktop */
.bc-card__name {
  grid-column:     1 !important;
  grid-row:        1 !important;
  font-family:     'Montserrat', sans-serif !important;
  font-weight:     600 !important;
  text-transform:  uppercase !important;
  color:           #111111 !important;
  display:         block !important;
  margin-bottom:   0 !important;
  text-decoration: none !important;
  transition:      opacity 0.2s !important;
  font-size:       clamp(9px, calc(9px + 2 * ((100vw - 320px) / 1600)), 11px) !important;
  line-height:     clamp(11px, calc(11px + 2 * ((100vw - 320px) / 1600)), 13px) !important;
  letter-spacing:  0.1em !important;
}
.bc-card__name:hover { opacity: 0.6 !important; }

/* Price row — display:contents dissolves it; children participate in info grid directly */
.bc-card__price-row {
  display: contents !important;
}

/* Card price — 11px/13px mobile → 13px/16px desktop */
.bc-card__price {
  grid-column:    1 !important;
  grid-row:       2 !important;
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    400 !important;
  color:          #808080 !important;
  letter-spacing: 0 !important;
  font-size:      clamp(11px, calc(11px + 2 * ((100vw - 320px) / 1600)), 13px) !important;
  line-height:    clamp(13px, calc(13px + 3 * ((100vw - 320px) / 1600)), 16px) !important;
}

.bc-card__price .woocommerce-Price-amount,
.bc-card__price bdi {
  font-family:    inherit !important;
  font-size:      inherit !important;
  font-weight:    inherit !important;
  color:          inherit !important;
  letter-spacing: inherit !important;
  line-height:    inherit !important;
}

/* Bag form — grid row 1, col 2 (same row as name, flush right) */
form.cart.bc-quick-add {
  grid-column:     2 !important;
  grid-row:        1 !important;
  display:         flex !important;
  align-items:     flex-start !important;
  justify-content: center !important;
  width:           16px !important;
  margin:          0 !important;
  padding:         0 !important;
}

.bc-card__bag {
  width:       16px !important;
  height:      16px !important;
  flex-shrink: 0 !important;
  background:  none !important;
  border:      none !important;
  cursor:      pointer !important;
  padding:     0 !important;
  margin:      0 !important;
  color:       #111111 !important;
  display:     flex !important;
  align-items: center !important;
  line-height: 0 !important;
  transition:  opacity 0.2s !important;
  overflow:    hidden !important;
}
.bc-card__bag svg {
  display:     block !important;
  width:       16px !important;
  height:      16px !important;
  flex-shrink: 0 !important;
}
.bc-card__bag:hover { opacity: 0.5 !important; }

/* Sold out label */
.bc-card__sold-out {
  font-family:    'Montserrat', sans-serif !important;
  font-size:      13px !important;
  line-height:    15px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color:          #808080 !important;
}

.pd-bc-sep { color: #808080; }

/* ══════════════════════════════════════
   SECTION 4 — CART ERROR DRAWER
   Source: Figma "Cart Error State Options — For Review" (1094:5033)
   Frame: option-b-drawer-error (1094:5068)
   Note: z-index > 1000 to clear the site header (.alq-header z-index:1000)
   ══════════════════════════════════════ */

/* Backdrop */
.bc-error-drawer__backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.32);
  z-index:    1001;
}

/* Outer wrapper — sits above backdrop */
.bc-error-drawer {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  1002;
  pointer-events: none;
}

.bc-error-drawer.is-open {
  display: block;
}

.bc-error-drawer.is-open .bc-error-drawer__backdrop {
  display: block;
  pointer-events: all;
}

/* Panel — slides in from the right */
.bc-error-drawer__panel {
  position:         fixed;
  top:              0;
  right:            0;
  bottom:           0;
  width:            360px;
  max-width:        100vw;
  background:       #ffffff;
  display:          flex;
  flex-direction:   column;
  z-index:          1003;
  pointer-events:   all;
  transform:        translateX(100%);
  transition:       transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.bc-error-drawer.is-open .bc-error-drawer__panel {
  transform: translateX(0);
}

/* Header — red bar */
.bc-error-drawer__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  background:       #910813;
  height:           56px;
  padding:          0 20px;
  flex-shrink:      0;
}

.bc-error-drawer__header-label {
  font-family:    'Montserrat', sans-serif;
  font-weight:    500;
  font-size:      12px;
  line-height:    1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #ffffff;
}

.bc-error-drawer__close {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  color:       #ffffff;
  font-size:   16px;
  line-height: 1;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       24px;
  height:      24px;
  transition:  opacity 0.15s;
}
.bc-error-drawer__close:hover { opacity: 0.7; }

/* Body — centered content area */
.bc-error-drawer__body {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  padding:         40px 40px;
  gap:             28px;
  flex:            1;
  box-sizing:      border-box;
}

/* Narrow screens (< 360px): reduce horizontal padding so content has room */
@media (max-width: 359px) {
  .bc-error-drawer__body {
    padding: 32px 20px;
  }
}

/* Headline */
.bc-error-drawer__headline {
  font-family:    'Montserrat', sans-serif;
  font-weight:    500;
  font-size:      16px;
  line-height:    1.4;
  letter-spacing: 0;
  color:          #0b40b4;
  text-align:     center;
  margin:         0;
  width:          100%;
}

/* Sub-copy */
.bc-error-drawer__sub {
  font-family:    'Montserrat', sans-serif;
  font-weight:    400;
  font-size:      14px;
  line-height:    1.5;
  letter-spacing: 0;
  color:          #111111;
  text-align:     center;
  margin:         0;
  width:          100%;
}

/* "here" link */
.bc-error-drawer__link {
  color:           #0b40b4;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family:     inherit;
  font-size:       inherit;
  font-weight:     inherit;
}
.bc-error-drawer__link:hover { opacity: 0.75; }

/* TRY AGAIN button */
.bc-error-drawer__retry {
  display:         block;
  width:           100%;
  height:          44px;
  background:      #ffffff;
  border:          1px solid #111111;
  font-family:     'Montserrat', sans-serif;
  font-weight:     500;
  font-size:       12px;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           #111111;
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s;
  box-sizing:      border-box;
}
.bc-error-drawer__retry:hover {
  background: #111111;
  color:      #ffffff;
}

/* CONTINUE SHOPPING link-button */
.bc-error-drawer__continue {
  background:      none;
  border:          none;
  padding:         0;
  cursor:          pointer;
  font-family:     'Montserrat', sans-serif;
  font-weight:     400;
  font-size:       12px;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           #111111;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:      opacity 0.15s;
  width:           100%;
  text-align:      center;
}
.bc-error-drawer__continue:hover { opacity: 0.6; }

/* Prevent body scroll when drawer open */
body.bc-drawer-open {
  overflow: hidden;
}