/* Storefront home page sections: banner, categories, product grids and the
   Local Guide strip. The header, nav, footer and mobile dock live in
   assets/css/shop-chrome.css, which every storefront page loads. */

/* ---- Banner -------------------------------------------------------------- */

.shop-banner { margin-top: 24px; }

.shop-banner-track {
  position: relative;
  border-radius: var(--radius-lg, 28px);
  overflow: hidden;
  background: var(--sage, #eaeaef);
  /* A fixed ratio stops the page jumping as slides swap or images load. */
  aspect-ratio: 1180 / 380;
}
@media (max-width: 720px) { .shop-banner-track { aspect-ratio: 4 / 3; } }

.shop-banner-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  text-decoration: none;
  color: #fff;
}
.shop-banner-slide.active { opacity: 1; visibility: visible; }
.shop-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-banner-copy {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 100%);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Text sits over uncontrolled artwork, so it carries its own scrim. */
  background: linear-gradient(to right, rgba(12, 10, 30, 0.65), rgba(12, 10, 30, 0));
}
.shop-banner-copy h2 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.2; }
.shop-banner-copy p { margin: 8px 0 0; font-size: 15px; opacity: 0.92; }
.shop-banner-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #131316);
  font-weight: 600;
  font-size: 14px;
}

.shop-banner-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.shop-banner-dots button {
  width: 30px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line, #dedee7);
  cursor: pointer;
}
.shop-banner-dots button[aria-selected="true"] { background: var(--ink, #131316); }

@media (max-width: 720px) {
  .shop-banner-slide img { object-position: 68% center; }
  .shop-banner-copy {
    top: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    background: linear-gradient(to top, rgba(12, 10, 30, 0.9), rgba(12, 10, 30, 0.25));
  }
  .shop-banner-copy h2 { max-width: 320px; }
  .shop-banner-copy p { max-width: 340px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-banner-slide { transition: none; }
}

.shop-banner-empty {
  display: grid;
  gap: 16px;
  padding: clamp(32px, 6vw, 64px);
  border-radius: var(--radius-lg, 28px);
  background: linear-gradient(135deg, var(--violet, #5848ff), #7a5cff);
  color: #fff;
}
.shop-banner-empty small {
  font: 600 11px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.16em;
}
.shop-banner-empty h2 { margin: 10px 0 0; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.15; }
.shop-banner-empty p { margin: 10px 0 20px; font-size: 16px; opacity: 0.92; }
.shop-banner-empty .shop-button { background: #fff; color: var(--ink, #131316); }
.shop-banner-hint {
  justify-self: start;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

/* ---- Sections ------------------------------------------------------------ */

.shop-categories,
.shop-products,
.shop-stores,
.shop-how { margin-top: clamp(36px, 6vw, 64px); }

.shop-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.shop-section-head h2 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); }
.shop-section-head a {
  color: var(--violet-dark, #4435ed);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.shop-category-row,
.shop-store-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.shop-category-row a,
.shop-store-row a {
  display: grid;
  gap: 4px;
  padding: 18px 16px;
  border: 1px solid var(--line, #dedee7);
  border-radius: var(--radius-md, 20px);
  background: var(--surface, #fff);
  text-decoration: none;
  color: var(--ink, #131316);
}
.shop-category-row a:hover,
.shop-store-row a:hover { border-color: var(--violet, #5848ff); }
.shop-category-row a > span,
.shop-store-row a > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--violet-soft, #eceaff);
  color: var(--violet-dark, #4435ed);
  font: 700 15px/1 var(--body, system-ui, sans-serif);
}
.shop-category-row b,
.shop-store-row b { font-size: 15px; }
.shop-category-row small,
.shop-store-row small { font-size: 12.5px; color: var(--ink-soft, #666570); }

.shop-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.home-card {
  display: grid;
  /* Fixed row track for the meta line so a long shop name cannot push the
     title and price out of line with the cards beside it. */
  grid-template-rows: auto auto auto 1fr auto;
  gap: 6px;
  padding-bottom: 14px;
  border: 1px solid var(--line, #dedee7);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  background: var(--surface, #fff);
  text-decoration: none;
  color: var(--ink, #131316);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-card:hover { border-color: var(--violet, #5848ff); transform: translateY(-2px); }
.home-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--sage, #eaeaef);
}
.home-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--product-color, #eceaff);
  font: 700 26px/1 var(--body, system-ui, sans-serif);
  color: var(--ink, #131316);
}
.home-card-media em {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--saffron, #c8f15a);
  color: var(--ink, #131316);
  font: 600 11px/1 var(--body, system-ui, sans-serif);
  font-style: normal;
}
.home-card-sold {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  font: 600 14px/1 var(--body, system-ui, sans-serif);
  color: var(--ink, #131316);
}
.home-card small,
.home-card h3,
.home-card b { padding-inline: 14px; }
.home-card small {
  font-size: 11.5px;
  color: var(--ink-soft, #666570);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  /* Two lines keeps every card in a row the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card b { align-self: end; font-size: 17px; }

.shop-empty {
  padding: 40px;
  border: 1px dashed var(--line, #dedee7);
  border-radius: var(--radius-md, 20px);
  text-align: center;
  color: var(--ink-soft, #666570);
}
.shop-empty a { color: var(--violet-dark, #4435ed); }

/* ---- Local Guide strip --------------------------------------------------- */

.shop-guide-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(36px, 6vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg, 28px);
  background: var(--forest, #17171b);
  color: #fff;
  overflow: hidden;
}
.shop-guide-strip small {
  font: 600 11px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.16em;
  color: var(--saffron, #c8f15a);
}
.shop-guide-strip h2 { margin: 12px 0 0; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.22; }
.shop-guide-strip p { margin: 12px 0 22px; font-size: 15px; opacity: 0.82; }
.shop-guide-strip .shop-button.ghost { border-color: #fff; color: #fff; }
.shop-guide-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md, 20px);
}
@media (max-width: 820px) {
  .shop-guide-strip { grid-template-columns: 1fr; }
  .shop-guide-strip img { order: -1; }
}

/* ---- How it works -------------------------------------------------------- */

.shop-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-steps li {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line, #dedee7);
  border-radius: var(--radius-md, 20px);
  background: var(--surface, #fff);
}
.shop-steps b {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--violet, #5848ff);
  color: #fff;
  font: 700 14px/1 var(--utility, "Space Grotesk", sans-serif);
}
.shop-steps h3 { margin: 0 0 4px; font-size: 15px; }
.shop-steps p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #666570); }

@media (prefers-reduced-motion: reduce) {
  .shop-banner-slide { transition: none; }
  .home-card:hover { transform: none; }
}