/*
  SARH storefront layer for the Kinder theme.

  Kinder declares `@layer reset, base, components, utilities, sections, snippets, overrides;`
  Everything here lives in `overrides`, so it beats section/snippet styles by layer order,
  not by !important. Where Kinder itself uses !important (header grid on mobile, collection
  tile titles), the change is made in Kinder's own file or through the CSS variable it reads,
  because an !important in a later layer loses to one in an earlier layer.
*/
@layer overrides {
  :root {
    --sarh-navy: #0F1D2E;
    --sarh-ink: #1B2533;
    --sarh-muted: #5B6677;
    --sarh-gold: #C9A227;
    --sarh-gold-soft: #F7F0DA;
    --sarh-sale: #C62828;
    --sarh-line: #E3E7ED;
    --sarh-field: #F4F6F9;
    --sarh-surface: #F6F7F9;
  }

  body {
    background-color: #FFFFFF;
    color: var(--sarh-ink);
  }

  /* ── Announcement: one static line, no ticker ─────────────────────────── */
  .sarh-announce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4) var(--spacing-10);
    min-height: 34px;
    padding: 6px var(--spacing-16);
    background-color: var(--sarh-navy);
    color: #FFFFFF;
    font: var(--font-label-xs);
    text-align: center;
  }

  .sarh-announce .sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--sarh-gold);
  }

  .sarh-announce a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ── Header: always-visible search ─────────────────────────────────────── */
  [ui-layout=header] .search-area {
    grid-area: search;
    min-width: 0;
  }

  .sarh-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    height: 46px;
    padding-inline: var(--spacing-14) var(--spacing-4);
    border: 1px solid var(--sarh-line);
    border-radius: 10px;
    background-color: var(--sarh-field);
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }

  .sarh-search:focus-within {
    border-color: var(--sarh-navy);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgb(15 29 46 / 0.08);
  }

  .sarh-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sarh-ink);
    font: var(--font-body-md);
  }

  .sarh-search input::placeholder {
    color: #7C8696;
  }

  .sarh-search input::-webkit-search-cancel-button {
    display: none;
  }

  .sarh-search button {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background-color: var(--sarh-navy);
    color: #FFFFFF;
    cursor: pointer;
  }

  .sarh-search button:focus-visible {
    outline: 2px solid var(--sarh-gold);
    outline-offset: 2px;
  }

  @media (min-width: 769.02px) {
    [ui-layout=header][data-header-layout=logo-first-menu-center] .links {
      justify-content: flex-start;
      gap: var(--spacing-24);
      padding-block-start: var(--spacing-12);
      border-block-start: 1px solid var(--sarh-line);
    }
  }

  /* ── Section heads: marketplace density, not landing-page scale ────────── */
  [ui-slot=head] .heading {
    font: 700 24px/32px var(--font-heading-family);
    text-wrap: balance;
  }

  [ui-slot=head] .description {
    color: color-mix(in srgb, currentColor 62%, transparent);
    font: var(--font-body-sm);
  }

  @media (max-width: 769px) {
    [ui-slot=head] .heading {
      font: 700 19px/27px var(--font-heading-family);
    }
  }

  /* ── Category tiles: 3 across on mobile so 9 departments fit one screen ── */
  [ui-block=collection] .title {
    --font-label-md: 600 14px/20px var(--font-family);
    --collection-alignment: center;
    text-align: center;
  }

  @media (max-width: 769px) {
    [ui-section=collections] {
      --per-page: 3;
      --gap: var(--spacing-12);
      gap: var(--spacing-16);
    }

    [ui-section=collections] [ui-block=collection],
    [ui-section=list-collections] [ui-block=collection] {
      gap: var(--spacing-6);
    }

    [ui-block=collection] .title {
      --font-label-md: 600 12.5px/17px var(--font-family);
      min-height: 34px;
      align-items: flex-start;
    }
  }

  /* ── Product card: image, name, price, one action ───────────────────────── */
  [ui-block=product] {
    border: 1px solid var(--sarh-line);
    background-color: #FFFFFF;
  }

  [ui-block=product] .media {
    background-color: #FFFFFF;
  }

  [ui-block=product] .media > img {
    object-fit: contain;
  }

  .sarh-discount {
    position: absolute;
    z-index: 2;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background-color: var(--sarh-sale);
    color: #FFFFFF;
    font: 700 12px/18px var(--font-family);
  }

  [ui-block=product] .info {
    padding: var(--spacing-12);
    gap: var(--spacing-6);
  }

  [ui-block=product] .info .name {
    display: -webkit-box;
    order: -1;
    width: auto;
    min-height: 42px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--sarh-ink);
    font: 500 14px/21px var(--font-family);
  }

  [ui-block=product] .info .price {
    flex-wrap: wrap;
    row-gap: 0;
    gap: var(--spacing-6);
    font: 700 16px/22px var(--font-family);
  }

  [ui-block=product] .info .price .current-price {
    color: var(--sarh-navy);
  }

  [ui-block=product] .info .price .compare-at-price {
    font: 400 13px/18px var(--font-family);
  }

  [ui-block=product] .actions {
    padding: 0 var(--spacing-12) var(--spacing-12);
  }

  /* ── Product page ───────────────────────────────────────────────────────── */
  [ui-section=product-information] [ui-block=title] {
    font-weight: 700;
    text-wrap: balance;
  }

  [ui-section=product-information] [ui-block=price] .original-price {
    color: var(--sarh-navy);
  }

  [ui-section=product-information] [ui-block=statistics] [ui-slot=status-badge].saving {
    background-color: #FDECEC;
    color: var(--sarh-sale);
  }

  [ui-section=product-information] [ui-block=feature-list] {
    gap: var(--spacing-12);
    padding: var(--spacing-16);
    border: 1px solid var(--sarh-line);
    border-radius: 12px;
    background-color: #FAFBFC;
  }

  [ui-section=product-information] [ui-block=feature-list] .icon {
    color: var(--sarh-navy);
  }

  [ui-section=product-information] [ui-block=collapsible-content] article {
    color: var(--sarh-muted);
    font: var(--font-body-sm);
    line-height: 1.7;
  }

  /* ── Trust strip / how-to-order steps (sections/sarh-trust.liquid) ──────── */
  .sarh-trust {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
  }

  .sarh-trust__head h2 {
    font: 700 24px/32px var(--font-heading-family);
    text-wrap: balance;
  }

  .sarh-trust__head p {
    margin-block-start: var(--spacing-4);
    color: color-mix(in srgb, var(--fg-color) 62%, var(--bg-color));
    font: var(--font-body-sm);
  }

  .sarh-trust__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-12);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sarh-step;
  }

  .sarh-trust__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-12);
    padding: var(--spacing-14);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--fg-color) 4%, var(--bg-color));
  }

  .sarh-trust__icon {
    display: grid;
    position: relative;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--sarh-gold-soft);
    color: var(--sarh-navy);
  }

  .sarh-trust__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .sarh-trust__text strong {
    font: var(--font-label-sm);
  }

  .sarh-trust__text span {
    color: color-mix(in srgb, var(--fg-color) 64%, var(--bg-color));
    font: var(--font-body-xs);
    line-height: 1.55;
  }

  .sarh-trust[data-style=steps] .sarh-trust__item {
    counter-increment: sarh-step;
  }

  .sarh-trust[data-style=steps] .sarh-trust__icon::after {
    content: counter(sarh-step);
    position: absolute;
    inset-block-start: -4px;
    inset-inline-end: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--sarh-navy);
    color: #FFFFFF;
    font: 700 11px/18px var(--font-family);
    text-align: center;
  }

  @media (max-width: 769px) {
    .sarh-trust__head h2 {
      font: 700 19px/27px var(--font-heading-family);
    }

    .sarh-trust[data-style=strip] .sarh-trust__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-8);
    }

    .sarh-trust[data-style=strip] .sarh-trust__item {
      gap: var(--spacing-8);
      padding: var(--spacing-10);
    }

    .sarh-trust[data-style=strip] .sarh-trust__icon {
      width: 34px;
      height: 34px;
    }

    .sarh-trust[data-style=steps] .sarh-trust__items {
      grid-template-columns: 1fr;
      gap: var(--spacing-8);
    }
  }

  /* ── Search page: popular searches ─────────────────────────────────────── */
  .sarh-popular {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
    padding-block: var(--spacing-24);
  }

  .sarh-popular h2 {
    font: var(--font-label-md);
  }

  .sarh-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-8);
  }

  .sarh-chips a {
    padding: 7px 14px;
    border: 1px solid var(--sarh-line);
    border-radius: 999px;
    background-color: #FFFFFF;
    color: var(--sarh-ink);
    font: var(--font-label-sm);
  }

  .sarh-chips a:hover,
  .sarh-chips a:focus-visible {
    border-color: var(--sarh-navy);
  }

  /* ── WhatsApp (renders only when a number is set) ──────────────────────── */
  .sarh-wa {
    display: grid;
    position: fixed;
    z-index: 60;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1FAF5A;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
    color: #FFFFFF;
    inset-block-end: 20px;
    inset-inline-end: 16px;
  }

  body:has(ui-shop-bar) .sarh-wa {
    inset-block-end: 96px;
  }

  /* ── Sheets (menu, cart, "Order now" form) ────────────────────────────────
     Kinder keeps closed sheets rendered off-screen (display:flex + visibility:hidden). On phones
     that off-screen box widened the layout viewport, so the order sheet resolved its 100% width
     to 732px on a 390px screen and opened half off-screen. Closed sheets leave layout, and phone
     sheets are sized from the viewport. */
  [ui-slot=sheet-content]:not(:popover-open) {
    display: none;
  }

  @media (max-width: 769px) {
    [ui-slot=sheet-content] {
      --sheet-width: calc(100vw - var(--margin-offset));
    }
  }

  /* ── Product rails: a heading row; a rail with no products is not shown ─── */
  [ui-section=featured-collection]:has(> .sarh-rail-head) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
  }

  .sarh-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-16);
  }

  .sarh-rail-head [ui-slot=head] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: start;
  }

  .sarh-rail-head [ui-slot=link-button] {
    flex-shrink: 0;
    white-space: nowrap;
  }

  [id^="youcan-section--"]:has([ui-section=featured-collection]):not(:has([ui-block=product])) {
    display: none;
  }

  /* ── Department grid on wider screens: all nine in one row (no orphan row) ─ */
  @media (min-width: 769.02px) and (max-width: 1024px) {
    [ui-section=collections] {
      --per-page: 3;
    }
  }

  @media (min-width: 1025px) {
    [ui-section=collections] {
      --per-page: 9;
      --gap: var(--spacing-16);
    }
  }

  /* ── Subcategory tiles on a department page ─────────────────────────────── */
  [ui-section=single-collection] .sub-collections-area .sub-collection > a {
    gap: var(--spacing-10);
  }

  [ui-section=single-collection] .sub-collections-area .sub-collection > a .media {
    width: 64px;
    height: 64px;
  }

  [ui-section=single-collection] .sub-collections-area .sub-collection > a .title {
    font: 600 14px/20px var(--font-family);
  }

  /* ── Product-page trust list: plain labels, not link-looking text ────────── */
  [ui-section=product-information] [ui-block=feature-list] .feature-text .label {
    color: var(--sarh-ink);
    font: 600 14px/20px var(--font-family);
    text-decoration: none;
  }

  [ui-section=product-information] [ui-block=feature-list] .feature-text .description {
    color: var(--sarh-muted);
    font: var(--font-body-xs);
  }

  /* YouCan's own "Powered by" badge was 20px wider than a phone screen. */
  [id^="powered-by-youcan"] {
    max-width: calc(100vw - 40px);
  }

  /* ── Footer ─────────────────────────────────────────────────────────────── */
  [ui-layout=footer] .brand-name {
    font-weight: 800;
  }
}