/* lună storefront page layout (TASK-026). Built on tokens.css and components.css: every colour, font size and radius
   is a --ds-* token (REQ-26; the TASK-024 literal checks run on this file too). No URL function here: images are <img>
   elements, so every asset URL carries its ?v= (REQ-32). */

/* the menu button is shown by storefront.js; without JS the footer carries the navigation (REQ-29) */
.ds-menu-toggle[hidden] {
  display: none;
}
.sf-header-end {
  width: var(--ds-control-height);
}
@media (min-width: 960px) {
  .sf-header-end {
    display: none;
  }
}

.sf-skip {
  position: absolute;
  left: var(--ds-space-2);
  top: calc(-1 * var(--ds-space-16));
  z-index: var(--ds-z-drawer);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-color-surface);
}
.sf-skip:focus {
  top: var(--ds-space-2);
}

/* long unbroken names, SKUs and descriptions wrap instead of widening the page (REQ-27) */
.sf-break {
  overflow-wrap: anywhere;
  min-width: 0;
}
.sf-grid-item {
  min-width: 0;
}
.sf-flush {
  margin: 0;
}
.sf-center {
  margin: var(--ds-space-10) 0 0;
  text-align: center;
}
.sf-section-title {
  margin-bottom: var(--ds-space-6);
}
.sf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-6);
}
.sf-lead {
  max-width: 32rem;
  margin-top: var(--ds-space-3);
}
.sf-prose > * + * {
  margin-top: var(--ds-space-4);
}
.sf-crumbs {
  margin: 0 0 var(--ds-space-6);
}

/* home hero: the picture above the text on phones; text beside the lamp from 960 px */
.sf-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ds-color-surface-2);
}
.sf-hero__img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}
.sf-hero__text {
  position: relative;
  padding-block: var(--ds-space-8) var(--ds-space-12);
}
@media (min-width: 960px) {
  .sf-hero {
    min-height: 60vh;
    justify-content: flex-end;
  }
  .sf-hero__img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .sf-hero__text {
    padding-block: var(--ds-space-12);
  }
}
.sf-intro {
  background: var(--ds-color-surface);
}
.sf-intro .ds-text {
  margin-top: var(--ds-space-4);
}

/* catalog filters: one column on phones, a row from 640 px */
.sf-filters {
  display: grid;
  gap: var(--ds-space-4);
  margin: var(--ds-space-6) 0 var(--ds-space-8);
}
@media (min-width: 640px) {
  .sf-filters {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
  }
}
.sf-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.sf-count {
  margin: 0 0 var(--ds-space-4);
}
.sf-empty {
  padding-block: var(--ds-space-12);
  text-align: center;
}
.sf-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-10);
}

/* product page */
.sf-product--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--ds-container-narrow);
}
.ds-product__info {
  min-width: 0;
}
.ds-gallery__main img {
  display: block;
}
.sf-thumb {
  display: block;
}
.sf-media-title {
  margin-top: var(--ds-section-gap);
}
.sf-media {
  display: grid;
  gap: var(--ds-space-4);
}
@media (min-width: 640px) {
  .sf-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sf-media video,
.sf-media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ds-color-surface-2);
}

.sf-contacts {
  margin-top: var(--ds-space-12);
}