/* ============================================================
   skinspecialist.cz — ss-curated-1.css — v1 production
   SECTION: Must Have (C3 Editorial Polish, off-white cards)

   Architecture:
   - Editorial intro (eyebrow + heading + copy + signature) lives
     in Uvítací text editor (TinyMCE-safe HTML, divs+h2+p+span).
   - Product row (5 cards) is JS-rendered by ss-curated-1.js after
     fetching /derma-factory/ category.
   - Section ancestor reset (specific Shoptet wrapper classes only,
     no > * chains — lessons from discovery).
   ============================================================ */

/* ---- Ancestor reset (Shoptet wrapper widths) ----
   Only named Shoptet ancestors. Does NOT match .ss-curated
   itself (specificity-safe). */
.content-wrapper.welcome-wrapper,
.content-wrapper.welcome-wrapper > .content-wrapper-in,
.content-wrapper.welcome-wrapper .container,
.content-wrapper.welcome-wrapper .welcome-wrapper,
.content-wrapper.welcome-wrapper .welcome,
.content-wrapper.welcome-wrapper .welcome > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---- Section ---- */
.ss-curated {
  display: block !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 5vw, 80px) clamp(16px, 2vw, 32px) !important;
  background: var(--ss-canvas, #F2EBDB) !important;
  box-sizing: border-box !important;
}

/* ---- Editorial intro (heading + copy) ----
   v5 fix: intro div was constrained to 800px by Shoptet's inherited
   `.welcome div` rule. Force width 100% + max-width 100% !important
   to escape that constraint. Same pattern as discovery had with grid. */
.ss-curated__intro {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: clamp(32px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 56px);
  width: 100% !important;
  max-width: 100% !important;
}

/* Intro inner div columns — also force full width to escape any
   inherited Shoptet div max-width. */
.ss-curated__intro > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

.ss-curated__eyebrow {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ss-sage, #6B8B85);
  margin: 0 0 14px;
}

.ss-curated__heading {
  font-family: var(--ss-serif, serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ss-black, #0F0F0F);
  margin: 0;
  max-width: 480px;
}

.ss-curated__copy {
  font-family: var(--ss-sans, sans-serif);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.7;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}
/* Higher specificity to beat any Shoptet .welcome p rules.
   Forces copy to fill column to right edge (no inherited max-width). */
section.ss-curated .ss-curated__intro .ss-curated__copy {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.ss-curated__signature {
  display: block;
  margin-top: 18px;
}

.ss-curated__signature-name {
  display: block;
  font-family: var(--ss-serif, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ss-text, #0F0F0F);
}

.ss-curated__signature-role {
  display: block;
  margin-top: 4px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}

/* ---- Loading state (before JS renders) ---- */
.ss-curated__loading {
  text-align: center;
  padding: 40px 0;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  font-family: var(--ss-sans);
  font-size: 13px;
  font-style: italic;
}

/* ---- Product row ---- */
.ss-curated__row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: clamp(12px, 1.2vw, 18px);
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Card (C3 — Editorial Polish) ----
   Off-white card on cream backdrop. Hairline dividers between
   content sections. Hover lifts to white + sharper shadow. */
.ss-curated__card {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  background: #FAF6EE; /* warm off-white tint */
  border: 1px solid rgba(15, 15, 15, .06);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(15, 15, 15, .04);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              box-shadow .35s cubic-bezier(.4, 0, .2, 1),
              border-color .35s cubic-bezier(.4, 0, .2, 1),
              background .35s cubic-bezier(.4, 0, .2, 1);
}

.ss-curated__card:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: rgba(15, 15, 15, .12);
  box-shadow: 0 14px 36px rgba(15, 15, 15, .08);
}

/* Image — edge-to-edge, no padding around.
   v3: aspect 1:1 → 3:4 to match generated 3:4 editorial photos.
   Cards become taller portrait (matches Net-a-Porter / Glossier proportions). */
.ss-curated__img {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  text-decoration: none;
}

.ss-curated__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.ss-curated__card:hover .ss-curated__img img {
  transform: scale(1.03);
}

/* Tag (Bestseller/Novinka) — top-left overlay */
.ss-curated__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ss-sage, #6B8B85);
  color: #FFFFFF;
  font-family: var(--ss-sans, sans-serif);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 2;
}

/* Wishlist heart — top-right overlay */
.ss-curated__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  font-size: 16px;
  z-index: 2;
  cursor: pointer;
  transition: color .25s, transform .25s, background .25s;
}

.ss-curated__wish:hover {
  color: var(--ss-terracotta, #9A7A5F);
  background: #FFFFFF;
  transform: scale(1.08);
}

/* Name link wrapper */
.ss-curated__name-link {
  text-decoration: none;
  color: inherit;
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 15, 15, .06); /* hairline divider */
  margin-bottom: 10px;
}

.ss-curated__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ss-sans, sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ss-black, #0F0F0F);
  line-height: 1.35;
  margin: 0;
  min-height: 39px;
  max-height: 39px;
}

/* Price row + stock */
.ss-curated__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.ss-curated__price {
  font-family: var(--ss-sans, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ss-black, #0F0F0F);
}

.ss-curated__price-old {
  font-family: var(--ss-sans, sans-serif);
  font-size: 12.5px;
  color: var(--ss-hint, rgba(15, 15, 15, .46));
  text-decoration: line-through;
  margin-left: 6px;
}

.ss-curated__stock {
  font-family: var(--ss-sans, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  color: #3c840f;
}

/* Cart row — qty selector + add to cart button */
.ss-curated__cartrow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ss-curated__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(15, 15, 15, .12);
  border-radius: 6px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
  flex-shrink: 0;
}

.ss-curated__qty button {
  width: 28px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ss-black, #0F0F0F);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--ss-sans, sans-serif);
  padding: 0;
}
.ss-curated__qty button:hover {
  background: rgba(15, 15, 15, .04);
}

.ss-curated__qty input {
  width: 30px;
  height: 36px;
  border: 0;
  text-align: center;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}
.ss-curated__qty input::-webkit-outer-spin-button,
.ss-curated__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ss-curated__add {
  flex: 1;
  background: var(--ss-terracotta, #9A7A5F);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .25s;
  padding: 0 10px;
  height: 36px;
}

.ss-curated__add:hover {
  background: var(--ss-terracotta-deep, #7E6248);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ss-curated__row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* v6: stejný přístup jako ss-discovery — sekce padding 0 horizontal (base má
     `padding ... clamp(16px,2vw,32px) !important`, proto !important) → scroll teče
     k okrajům a hlavička i karty začínají na STEJNÉM 16px gutteru jako discovery
     sekce nad tím (proto se to „nezačínalo spolu s nadpisy"). */
  .ss-curated {
    padding: 48px 0 !important;
  }
  .ss-curated__intro {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 28px;
    align-items: start;
    padding: 0 16px;          /* hlavička gutter 16 */
  }
  .ss-curated__heading {
    font-size: clamp(26px, 7vw, 34px);
  }
  /* HORIZONTÁLNÍ SCROLL — 1 karta + ~10 % peek */
  .ss-curated__row {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 16px;          /* 1. karta na 16px = zarovnaná s hlavičkou i discovery */
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .ss-curated__row::-webkit-scrollbar {
    display: none;
  }
  .ss-curated__card {
    flex: 0 0 84vw;          /* 1 karta + ~10 % další peek (jako discovery) */
    scroll-snap-align: start;
  }
  /* výška karty ≈ discovery karty: obrázek z 3/4 (portrait → moc vysoké) na 1/1 */
  .ss-curated__img {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px) {
  /* v6: scroll řeší @768; grid-template je ve flexu ignorováno, držíme šířku karty */
  .ss-curated__card {
    flex: 0 0 84vw;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ss-curated__card,
  .ss-curated__wish,
  .ss-curated__img img,
  .ss-curated__add {
    transition: none;
  }
  .ss-curated__card:hover,
  .ss-curated__wish:hover,
  .ss-curated__card:hover .ss-curated__img img {
    transform: none;
  }
}