/* ============================================================
   BuildCom Storefront Design System
   Design tokens (colors set inline on <body>) + shared components
   used by every section partial. Shopify-grade baseline: generous
   whitespace, one accent color used sparingly, soft depth via
   shadows not borders, confident type scale.
   ============================================================ */

:root {
  --primary: #284b3f;
  --secondary: #17221c;
  --accent: #ffffff;
  --ink: #14151a;
  --ink-soft: #565a68;
  --ink-faint: #8b8fa3;
  --paper: #ffffff;
  --canvas: #f7f7f9;
  --line: #ececf0;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.05), 0 1px 1px rgba(20, 21, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 21, 26, 0.08), 0 2px 6px rgba(20, 21, 26, 0.04);
  --shadow-lg: 0 20px 48px rgba(20, 21, 26, 0.14), 0 6px 16px rgba(20, 21, 26, 0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
/* overflow-x: hidden here is a safety net, not the real fix for any one
   overflow bug -- several themes (Gridline's category pill row, Jewelry/
   Books/Gifts/Atelier's horizontal badge-and-shelf rails) use
   `overflow-x: auto` flex rows to scroll internally. Without an ancestor
   that clips horizontal overflow, a flex row like that can push the whole
   <body> wider than the viewport instead of scrolling within itself,
   shifting the entire page sideways on mobile (text clipped at one edge,
   blank space at the other). This stops that at the root regardless of
   which section causes it, current or future. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Plus Jakarta Sans", "Hind Siliguri", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.tight { padding: 48px 0; }
.section.on-canvas { background: var(--canvas); }
.section.on-paper { background: var(--paper); }
.section.on-ink { background: var(--ink); color: #fff; }

.eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 10px;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 10px; color: var(--ink);
}
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.02rem; }
.section.on-ink .section-head h2 { color: #fff; }
.section.on-ink .section-head p { color: rgba(255,255,255,0.7); }

/* Buttons */
body { --on-primary: #fff; }
@supports (color: oklch(from red l c h)) {
  body { --on-primary: oklch(from var(--primary) clamp(0, (l - 0.6) * -1000, 1) 0 0); }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--on-primary, #fff); border: none; cursor: pointer;
  padding: 14px 30px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--primary) 88%, black); }
.btn.btn-outline {
  background: transparent; color: inherit; box-shadow: none;
  border: 1.5px solid currentColor;
}
.btn.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn.btn-light { background: #fff; color: var(--ink); }
.btn.btn-sm { padding: 9px 20px; font-size: 0.85rem; }

/* Grid + Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.grid.grid-tight { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }

.product-card {
  background: var(--paper); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  position: relative; display: block; text-decoration: none; color: inherit;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.product-card .media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--line); }
/* Shown instead of a photo for products with no image yet -- a bare empty
   gray box reads as broken; a centered icon reads as "no photo uploaded
   yet," the same distinction most storefront builders make. */
.media-placeholder, .bento-cell .media-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); background: linear-gradient(135deg, var(--line), transparent);
}
.product-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .media img { transform: scale(1.06); }
.product-card .badge {
  position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff;
  font-size: 0.7rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  letter-spacing: 0.03em; text-transform: uppercase; z-index: 2;
}
.product-card .badge.badge-new { background: #2563eb; }
.product-card .badge.badge-hot { background: #dc2626; }
.product-card .badge.badge-bestseller { background: #d97706; }

.product-card .wishlist-btn {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; z-index: 2; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.product-card:hover .wishlist-btn { opacity: 1; transform: translateY(0); }
.product-card .wishlist-btn.on { opacity: 1; transform: translateY(0); color: #e11d48; }
.product-card .wishlist-btn.on svg { fill: #e11d48; stroke: #e11d48; }

.product-card .quick-view {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; text-align: center;
  background: rgba(20,21,26,0.82); color: #fff; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  transform: translateY(100%); transition: transform 0.3s var(--ease); z-index: 2;
}
.product-card:hover .quick-view { transform: translateY(0); }

.product-card .rating { color: #f5a623; font-size: 0.72rem; margin-bottom: 4px; letter-spacing: 1px; }
.product-card .rating .count { color: var(--ink-faint); margin-left: 4px; letter-spacing: normal; }

.product-card .body { padding: 16px 16px 18px; }
.product-card .name {
  font-weight: 600; font-size: 0.95rem; margin: 0 0 6px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; }
.product-card .price { font-weight: 800; font-size: 1.05rem; color: var(--primary); }
.product-card .compare-price { font-size: 0.85rem; color: var(--ink-faint); text-decoration: line-through; }

.category-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1;
  text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s var(--ease);
}
.category-card:hover { box-shadow: var(--shadow-md); }
.category-card img { width: 100%; height: 100%; object-fit: cover; }
.category-card .label {
  position: absolute; inset: auto 0 0 0; padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff; font-weight: 700; font-size: 0.95rem;
}
.category-card.no-image { background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: flex-end; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1200px; margin: 0 auto; }
.site-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.site-header .brand img { height: 36px; width: 36px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
/* Shown instead of store.logo when a merchant hasn't uploaded one yet --
   a plain text wordmark with nothing beside it reads as an unfinished
   page; a letter-mark avatar (same convention as Shopify/Stripe-style
   dashboards) fills that visual slot until they add a real logo. */
.site-header .brand-monogram {
  height: 36px; width: 36px; flex-shrink: 0; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; text-transform: uppercase;
}
.site-header .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header nav.site-nav { display: flex; gap: 28px; align-items: center; }
.site-header nav.site-nav > a,
.site-header nav.site-nav .site-nav-dropdown > a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; transition: color 0.2s; }
.site-header nav.site-nav > a:hover,
.site-header nav.site-nav .site-nav-dropdown > a:hover { color: var(--primary); }
/* Not scoped to .site-header nav.site-nav (unlike the two rules above it) --
   deliberately reusable inside any of the 20 theme-specific headers'
   own nav markup/classes, so a theme's own link styling still applies to
   the <a> tags while this only adds the dropdown's position/reveal behavior. */
.site-nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.site-nav-caret { font-size: 0.7em; display: inline-block; transition: transform 0.2s; }
.site-nav-dropdown:hover .site-nav-caret { transform: rotate(180deg); }
.site-nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  min-width: 180px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s; z-index: 50;
}
.site-nav-dropdown:hover .site-nav-dropdown-menu,
.site-nav-dropdown:focus-within .site-nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px);
}
.site-nav-dropdown-menu a {
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.88rem;
  padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.site-nav-dropdown-menu a:hover { background: var(--bg-soft, #f4f4f5); color: var(--primary); }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 56px 0 28px; margin-top: 40px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-bottom: 32px; }
.site-footer :is(h2,h4) { color: #fff; font-size: 0.9rem; margin: 0 0 14px; }
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; display: block; padding: 4px 0; font-size: 0.9rem; }
.site-footer a:hover { color: #fff; }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.5); text-align: center; }

/* Misc components */
.pill-badge { display: inline-block; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.quote-card { background: var(--paper); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.quote-card .stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; font-size: 0.9rem; }
.quote-card p.quote { font-size: 1rem; color: var(--ink); margin: 0 0 16px; line-height: 1.7; }
.quote-card .author { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; }
.quote-card .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); flex-shrink: 0; }

/* Scroll-reveal animations — elements get .reveal (via _scripts.html), then
   .visible when they enter the viewport. Cards inside a grid stagger. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.32s; }
.grid > .reveal:nth-child(n+6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hero-animate > * { animation: heroFadeIn 0.9s var(--ease) both; }
.hero-animate > *:nth-child(2) { animation-delay: 0.15s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.3s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.45s; }

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float-slow { animation: floatSlow 5s ease-in-out infinite; }

/* Hero stats bar (e.g. "14k+ Product Varieties") */
.hero-stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; }
.hero-stats .stat span { font-size: 0.8rem; opacity: 0.75; color: #fff; }

/* Hero slider mechanics — shared across every theme's hero_banner.html. Each
   theme controls its own slide *layout*; this only controls which slide shows,
   the dots, and the arrows. Single-slide heroes render identically with no nav. */
.hero-slider { position: relative; overflow: hidden; }
.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroSlideIn 0.6s var(--ease); }
@keyframes heroSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.45);
  cursor: pointer; padding: 0; transition: all 0.25s var(--ease);
}
.hero-dots button.active { background: #fff; width: 22px; border-radius: 4px; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--ink); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background 0.2s;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }
@media (max-width: 640px) { .hero-arrow { display: none; } }

@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .site-header nav { display: none; }
  .container { padding: 0 18px; }
  /* Without this, .brand (plain text when a store has no logo) has no width
     constraint and wraps to 2-3 lines on a phone-width screen; .bar's
     align-items:center then vertically centers the single-line search/
     language/cart siblings in the middle of that now-tall row, visually
     overlapping the wrapped brand text. Truncating the name with an
     ellipsis instead of letting it wrap is what keeps the row a single
     line. */
  .site-header .bar { flex-wrap: nowrap; gap: 8px; padding: 14px 18px; }
  /* Brand gets a capped width (not flex:1) so the search box -- the thing
     someone on mobile actually needs to type into -- gets the real estate
     instead. A fixed 84px search box was too narrow for the suggestions
     dropdown below it to fit a product name + price on one line (it copies
     the input's own width via JS, see _scripts.html); giving search flex:1
     here means the dropdown is comfortably wide on every phone size instead
     of just the smallest ones. */
  .site-header .brand { flex: 0 1 110px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
  .site-header .bar form { flex: 1 1 auto; min-width: 90px; }
  .site-header .bar form input[type="search"] { width: 100%; min-width: 0; }
}

/* ── Canvas (free-form row/column/widget page builder, 2026-09) ─────────── */
.bc-canvas { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.bc-row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.bc-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .bc-row { flex-direction: column; } }

.bc-w-heading { color: var(--ink); margin: 0 0 12px; line-height: 1.2; }
.bc-w-text { color: var(--ink-soft); line-height: 1.7; margin: 0 0 12px; }
.bc-w-image { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.bc-w-spacer { width: 100%; }

.bc-w-button { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700;
  font-size: 0.92rem; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.bc-w-button--primary { background: var(--primary, var(--ink)); color: #fff; box-shadow: var(--shadow-sm); }
.bc-w-button--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.bc-w-button--secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.bc-w-button--secondary:hover { border-color: var(--ink); }

.bc-w-product-grid { display: grid; gap: 20px; }
.bc-w-product-card { text-decoration: none; color: var(--ink); display: block; }
.bc-w-product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; }
.bc-w-product-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.bc-w-product-price { font-weight: 700; color: var(--primary, var(--ink)); }
@media (max-width: 720px) { .bc-w-product-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── Slideshow widget (2026-09) -- 4 design variants a merchant picks from,
   same slide data underneath, see SlideshowStyle's docstring. ─────────── */
.bc-w-slideshow { position: relative; overflow: hidden; aspect-ratio: 16/7; background: var(--line); }
.bc-w-slideshow-track { position: relative; width: 100%; height: 100%; }
.bc-w-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.bc-w-slide.is-active { opacity: 1; pointer-events: auto; }
.bc-w-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-w-slide-content h3 { margin: 0 0 8px; font-weight: 800; line-height: 1.2; }
.bc-w-slide-content p { margin: 0 0 16px; opacity: 0.92; }
.bc-w-slide-btn {
  display: inline-block; padding: 11px 24px; border-radius: 999px; font-weight: 700;
  font-size: 0.9rem; text-decoration: none; background: var(--primary, #fff); color: #fff;
}

.bc-w-slideshow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--ink); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.bc-w-slideshow-arrow:hover { background: #fff; }
.bc-w-slideshow-arrow.prev { left: 16px; }
.bc-w-slideshow-arrow.next { right: 16px; }

.bc-w-slideshow-dots { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 8px; }
.bc-w-slideshow-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.55);
  cursor: pointer; padding: 0; transition: background 0.15s, transform 0.15s;
}
.bc-w-slideshow-dot.is-active { background: #fff; transform: scale(1.25); }

/* Overlay — Centered: dark gradient, centered text block over the full image */
.bc-w-slideshow--overlay_center .bc-w-slide-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 60%);
}
.bc-w-slideshow--overlay_center .bc-w-slide-content h3 { font-size: clamp(1.4rem, 4vw, 2.4rem); }

/* Overlay — Left aligned: text anchored bottom-left */
.bc-w-slideshow--overlay_left .bc-w-slide-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; text-align: left; padding: 40px; color: #fff; max-width: 60%;
  background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.bc-w-slideshow--overlay_left .bc-w-slide-content h3 { font-size: clamp(1.3rem, 3.4vw, 2.1rem); }

/* Classic — Caption below: image stays full-bleed, caption sits in its own
   band under the image rather than overlaid on top of it. */
.bc-w-slideshow--classic_caption { aspect-ratio: auto; }
.bc-w-slideshow--classic_caption .bc-w-slide { position: relative; opacity: 1; display: none; }
.bc-w-slideshow--classic_caption .bc-w-slide.is-active { display: block; }
.bc-w-slideshow--classic_caption .bc-w-slide img { aspect-ratio: 16/7; }
.bc-w-slideshow--classic_caption .bc-w-slide-content {
  padding: 20px 8px 8px; color: var(--ink); text-align: center;
}
.bc-w-slideshow--classic_caption .bc-w-slideshow-dots { position: static; margin-top: 8px; }
.bc-w-slideshow--classic_caption .bc-w-slideshow-dot { background: var(--line); }
.bc-w-slideshow--classic_caption .bc-w-slideshow-dot.is-active { background: var(--primary, var(--ink)); }

/* Rounded Card: the whole slideshow sits in a boxed, shadowed card with
   rounded corners and breathing room, like a promo tile rather than a
   full-bleed hero banner. */
.bc-w-slideshow--split_card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin: 0 auto; }
.bc-w-slideshow--split_card .bc-w-slide-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; text-align: left; padding: 32px; color: #fff; max-width: 65%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 65%);
}

@media (max-width: 640px) {
  .bc-w-slideshow { aspect-ratio: 4/5; }
  .bc-w-slideshow--overlay_left .bc-w-slide-content,
  .bc-w-slideshow--split_card .bc-w-slide-content { max-width: 100%; }
  .bc-w-slideshow-arrow { width: 34px; height: 34px; font-size: 1.2rem; }
}