/* Home page composition layer */

.home-header .brand {
  margin-inline: 0;
}

.home-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ". brand cart"
    "nav nav nav"
    "search search search";
  align-items: center;
  gap: 10px 16px;
}

.home-header .cart-float.top-left {
  grid-area: cart;
  position: relative;
  top: auto;
  left: auto;
  justify-self: left;
}

.home-header .brand {
  grid-area: brand;
  justify-self: center;
  align-self: center;
}

.home-header .brand-link {
  gap: 8px;
  justify-content: center;
  min-width: max-content;
}

.home-header .brand-word {
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

.home-header .page-nav {
  grid-area: nav;
  width: 100%;
  justify-content: center;
  justify-self: center;
}

.home-header .global-search {
  grid-area: search;
  justify-self: center;
  margin: 0;
  width: min(100%, 720px);
}

header.page-header.home-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ". brand cart"
    "nav nav nav"
    "search search search";
  align-items: center;
  gap: 10px 16px;
}

header.page-header.home-header .cart-float.top-left {
  grid-area: cart;
  position: relative;
  top: auto;
  left: auto;
  justify-self: left;
}

header.page-header.home-header .brand {
  grid-area: brand;
  justify-self: center;
  align-self: center;
}

header.page-header.home-header .brand-link {
  gap: 8px;
  justify-content: center;
  min-width: max-content;
}

header.page-header.home-header .page-nav {
  grid-area: nav;
  width: 100%;
  justify-content: center;
  justify-self: center;
}

header.page-header.home-header .global-search {
  grid-area: search;
  justify-self: center;
  width: min(100%, 720px);
  margin: 0;
}

header.page-header.home-header .global-search-input {
  width: 100%;
}

.hero {
  min-height: clamp(360px, 58vh, 560px);
  padding: 0;
  display: grid;
  place-items: center;
}

.hero .slider-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero .slider-wrapper {
  display: flex;
  height: 100%;
  direction: ltr;
  transition: transform 0.5s ease-in-out;
}

.hero .slider-item {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.hero .slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: color-mix(in srgb, var(--theme-overlay-soft) 24%, var(--theme-hero-start));
}

.hero .slider-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-overlay-strong) 42%, transparent) 0%,
    color-mix(in srgb, var(--theme-overlay-strong) 18%, transparent) 42%,
    color-mix(in srgb, var(--theme-overlay-strong) 52%, transparent) 100%
  );
}

.hero .slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 3;
}

.hero .slider-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 90%, transparent);
  background: color-mix(in srgb, var(--theme-card-bg) 35%, transparent);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.hero .slider-dot.active {
  background: var(--theme-primary-btn-bg);
  border-color: color-mix(in srgb, var(--theme-primary-btn-bg) 65%, #fff);
  transform: scale(1.15);
}

.hero-content {
  text-align: center;
  z-index: 2;
  padding: clamp(8px, 1.4vw, 12px);
  border-radius: var(--sf-radius-lg);
  max-width: min(700px, 86vw);
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.hero-content h2 {
  color: #fff;
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 3.6vw, 2.05rem);
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
  display: inline;
  padding: 4px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #1e2430 42%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-content p {
  color: color-mix(in srgb, #fff 92%, #d9d9d9);
  margin: 12px 0 0;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.75;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  display: inline;
  padding: 4px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #1e2430 30%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero .cta-btn {
  margin-top: var(--sf-space-3);
  min-height: 46px;
  padding-inline: clamp(20px, 5vw, 34px);
  font-weight: 800;
}

.discount-banner {
  width: min(100%, var(--sf-container-max));
  margin: 0 auto var(--sf-space-4);
  padding: 12px 16px;
  border-radius: var(--sf-radius-md);
  border: 1px solid var(--theme-promo-border);
  background: linear-gradient(130deg, var(--theme-promo-start), var(--theme-promo-end));
  color: var(--theme-promo-text);
  font-weight: 700;
}

.section-title {
  text-align: center;
}

.offers-grid,
.grid,
.collections-grid,
.perfume-types-grid,
.reviews-section {
  margin-bottom: var(--sf-space-8);
}

.offer-card {
  display: grid;
  grid-template-rows: 170px auto;
}

.offer-image {
  position: relative;
  height: 170px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 4px;
}

.offer-image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  border-radius: 0;
}

.offer-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.offer-desc {
  font-size: 0.92rem;
  color: var(--theme-text-secondary);
}

.offer-meta {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  padding: 12px 10px;
}

.card img {
  width: clamp(90px, 9vw, 128px);
  height: clamp(90px, 9vw, 128px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
  background: color-mix(in srgb, var(--theme-section-bg) 85%, transparent);
  margin-inline: auto;
}

.card span {
  font-size: 0.95rem;
}

#categories.section-title,
#perfumeTypes.section-title {
  text-align: center;
}

#featured.section-title {
  text-align: center;
}

#categoriesList.grid,
#perfumeTypesList.perfume-types-grid {
  justify-items: center;
}

#categoriesList .card,
#perfumeTypesList .perfume-type-card {
  background: var(--theme-card-bg);
  border: 1px solid var(--sf-border-subtle);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-soft);
}

#categoriesList .card:hover,
#perfumeTypesList .perfume-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sf-shadow-elevated);
}

#categoriesList .card img,
#perfumeTypesList .perfume-type-card img {
  width: clamp(92px, 26vw, 112px);
  height: clamp(92px, 26vw, 112px);
  min-width: clamp(92px, 26vw, 112px);
  min-height: clamp(92px, 26vw, 112px);
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.featured-slider-container {
  width: min(100%, var(--sf-container-max));
  margin: 0 auto var(--sf-space-8);
  overflow: hidden;
  padding-inline: var(--sf-space-4);
}

.featured-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 3);
  gap: 10px;
  direction: ltr;
  transition: transform 0.35s ease;
}

.featured-card {
  cursor: pointer;
  min-width: 0;
  display: grid;
  grid-template-rows: 170px auto;
}

.featured-card-info {
  text-align: center;
}

.featured-card-info h3,
.featured-card-info p {
  text-align: center;
}

.featured-card-image {
  position: relative;
  height: 170px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 4px;
}

.featured-card-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

.featured-subtype-sticker {
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--theme-primary-btn-border) 70%, transparent);
  background: color-mix(in srgb, var(--theme-primary-btn-bg) 88%, #000 12%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

.collections-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.collection-card {
  display: grid;
  grid-template-rows: minmax(0, 180px) auto;
}

.collection-image {
  display: grid;
  place-items: center;
  padding: 10px;
}

.collection-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

.collection-meta {
  display: flex;
  justify-content: space-between;
  color: var(--theme-text-muted);
}

.perfume-type-card {
  display: grid;
  gap: 10px;
  cursor: pointer;
  justify-items: center;
  text-align: center;
  padding: 12px 10px;
  min-height: 150px;
}

.perfume-type-card img {
  width: clamp(90px, 9vw, 128px);
  height: clamp(90px, 9vw, 128px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
  background: color-mix(in srgb, var(--theme-section-bg) 85%, transparent);
  margin-inline: auto;
}

.perfume-type-card span {
  font-size: 0.95rem;
}

.reviews-section {
  width: min(100%, 980px);
  margin-inline: auto;
  padding: clamp(16px, 2.6vw, 24px);
  border-radius: var(--sf-radius-xl);
  border: 1px solid color-mix(in srgb, var(--theme-border) 75%, transparent);
  background: color-mix(in srgb, var(--theme-section-bg) 92%, transparent);
  box-shadow: var(--sf-shadow-soft);
}

.reviews-slider {
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(100%, 920px);
  margin-inline: auto;
  overflow: hidden;
  max-width: 100%;
}

.reviews-track {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  direction: ltr;
  border-radius: var(--sf-radius-lg);
  min-height: clamp(240px, 34vw, 320px);
  background: color-mix(in srgb, var(--theme-section-bg) 86%, transparent);
}

.reviews-slide {
  position: absolute;
  inset: 0;
  padding: clamp(14px, 2.8vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.reviews-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.reviews-slide img {
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: clamp(180px, 28vw, 240px);
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #f6efe4 0%, #ece3d6 100%);
  border: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
  box-shadow: 0 12px 22px rgba(var(--theme-shadow-rgb), 0.14);
}

.reviews-slide img.is-fallback {
  object-fit: cover;
}

.reviews-dots {
  margin-top: var(--sf-space-3);
  display: flex;
  justify-content: center;
  direction: rtl;
  gap: 6px;
}

.reviews-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--theme-primary-btn-bg) 85%, #c28d4f);
  background: transparent;
  padding: 0;
}

.reviews-dot.active {
  background: color-mix(in srgb, var(--theme-primary-btn-bg) 85%, #c28d4f);
}

.reviews-empty {
  text-align: center;
  color: var(--theme-text-muted);
}

.original-perfume-note {
  width: min(100%, var(--sf-container-max));
  margin: 0 auto var(--sf-space-8);
  padding-inline: var(--sf-space-4);
}

.original-perfume-card {
  padding: var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  border: 1px dashed color-mix(in srgb, var(--theme-border) 70%, transparent);
  background: color-mix(in srgb, var(--theme-section-bg) 92%, transparent);
}

.contact-info-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.contact-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.contact-icon-link {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  max-width: none;
  box-shadow: 0 8px 16px rgba(var(--theme-shadow-rgb), 0.18);
}

.contact-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.contact-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.contact-label {
  display: none;
}

.contact-icon-link[data-type='instagram'] {
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

.contact-icon-link[data-type='facebook'] {
  background: #1877f2;
}

.contact-icon-link[data-type='whatsapp'] {
  background: #25d366;
}

.contact-icon-link[data-type='phone'] {
  background: #20b46a;
}

.contact-icon-link[data-type='email'] {
  background: #ff6f61;
}

.contact-info-item a {
  color: var(--theme-footer-link);
}

#contact,
#contact .contact-heading,
#contact .contact-policy,
#contact .copyright,
#contact #contactFallback {
  text-align: center;
}

@media (max-width: 1200px) {
  .featured-slider {
    grid-auto-columns: calc((100% - 20px) / 3);
  }
}

@media (max-width: 900px) {
  header.page-header.home-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand cart"
      "search search"
      "nav nav nav";
    padding: 10px 12px;
    gap: 8px 10px;
  }

  header.page-header.home-header .global-search {
    width: 100%;
  }

  header.page-header.home-header .cart-float.top-left {
    grid-area: cart;
    justify-self: left;
  }

  header.page-header.home-header .brand {
    grid-area: brand;
    justify-self: center;
    min-width: 0;
  }

  header.page-header.home-header .brand-link {
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }

  header.page-header.home-header .brand-word {
    font-size: 0.86rem;
    white-space: nowrap;
  }

  header.page-header.home-header .brand-logo {
    width: 40px;
    height: 40px;
  }

  header.page-header.home-header .nav-toggle {
    grid-area: menu;
    justify-self: right;
    min-width: 58px;
    height: 36px;
    padding: 0 10px;
  }

  .home-header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "cart brand"
      "search search"
      "nav nav";
  }

  .home-header .global-search {
    justify-self: stretch;
    width: 100%;
  }

  .home-header .nav-toggle {
    grid-area: cart;
    justify-self: start;
  }

  .featured-slider {
    grid-auto-columns: calc((100% - 20px) / 3);
  }
}

@media (max-width: 640px) {
  header.page-header.home-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand cart"
      "search search search"
      "nav nav nav";
  }

  header.page-header.home-header .brand-link {
    min-width: 0;
  }

  header.page-header.home-header .cart-float.top-left {
    grid-area: cart;
    justify-self: left;
  }

  header.page-header.home-header .nav-toggle {
    grid-area: menu;
    justify-self: right;
  }

  header.page-header.home-header .global-search-input {
    height: 38px;
    font-size: 0.95rem;
  }

  .hero {
    min-height: 350px;
  }

  .hero-content {
    max-width: min(100% - 20px, 620px);
    padding: 8px;
    border-radius: 14px;
  }

  .hero-content h2 {
    font-size: clamp(1.25rem, 5.6vw, 1.6rem);
    margin-bottom: 6px;
  }

  .hero-content p {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
    line-height: 1.62;
    margin-top: 10px;
  }

  .hero .cta-btn {
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .hero .slider-dots {
    bottom: 12px;
    gap: 8px;
  }

  .hero .slider-dot {
    width: 10px;
    height: 10px;
  }

  .home-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand cart"
      "search search search"
      "nav nav nav";
  }

  .home-header .brand-link {
    min-width: 0;
  }

  .home-header .nav-toggle {
    grid-area: cart;
    justify-self: end;
  }

  .featured-slider {
    grid-auto-columns: calc((100% - 20px) / 3);
  }

  .featured-card {
    grid-template-rows: 132px auto;
  }

  .featured-card-image {
    height: 132px;
    padding: 6px 8px 2px;
  }

  .featured-card-info {
    padding: 8px;
  }

  .featured-card-info h3 {
    font-size: 0.7rem;
    line-height: 1.3;
    margin: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
  }

  .featured-card-info p {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.25;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
  }

  .contact-info-list {
    gap: 16px;
    flex-wrap: wrap;
  }

  .contact-icon-link {
    font-size: 0.92rem;
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .contact-icon,
  .contact-icon svg {
    width: 21px;
    height: 21px;
  }

  #categoriesList.grid,
  #perfumeTypesList.perfume-types-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  #categoriesList .card,
  #perfumeTypesList .perfume-type-card {
    flex: 0 1 clamp(140px, calc(50% - 6px), 180px);
    width: auto;
    margin: 0;
  }

  #categoriesList .card img,
  #perfumeTypesList .perfume-type-card img {
    width: clamp(84px, 25vw, 104px);
    height: clamp(84px, 25vw, 104px);
    min-width: clamp(84px, 25vw, 104px);
    min-height: clamp(84px, 25vw, 104px);
  }
}

@media (max-width: 480px) {
  header.page-header.home-header .global-search {
    width: 100%;
  }

  .featured-slider {
    grid-auto-columns: calc((100% - 20px) / 3);
  }

  .home-header .global-search {
    width: 100%;
  }

  .hero {
    min-height: 320px;
  }

  .hero-content {
    max-width: calc(100% - 16px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  header.page-header.home-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand cart"
      "search search search"
      "nav nav nav";
    padding: 8px 12px;
    gap: 6px 10px;
  }

  header.page-header.home-header .brand-link {
    min-width: 0;
    max-width: min(58vw, 440px);
    gap: 6px;
  }

  header.page-header.home-header .brand-word {
    font-size: 0.8rem;
  }

  header.page-header.home-header .brand-logo {
    width: 55px;
    height: 55px;
  }

  header.page-header.home-header .cart-float.top-left,
  header.page-header.home-header .nav-toggle {
    min-width: 52px;
    height: 34px;
    padding: 0 9px;
  }

  header.page-header.home-header .global-search-input {
    height: 34px;
    font-size: 0.9rem;
    padding-inline: 12px;
  }
}