/**
 * Someh Homepage Identity — the looks
 *
 * Five independent axes, combined by inc/someh-identity.php. What varies
 * between sites is the SHAPE of the page: heading marks, hero treatment, chip
 * shape, card style and spacing.
 *
 * ── COLOUR ────────────────────────────────────────────────────────────────
 * The palette is the site's own. Every accent mark below reads
 * var(--someh-market-accent) — the variable the storefront already uses — so
 * a red site stays red and a blue one stays blue. Nothing here invents a hue.
 *
 * ── THE READABILITY RULE ──────────────────────────────────────────────────
 * Wherever this file paints a background, it sets the text colour on that
 * same element with !important.
 *
 * That !important is not decoration. The storefront's marketplace layer sets
 * `.someh-sf-section-head span { color:#81858b !important }`, so a rule that
 * only painted the pill behind it left grey text on a coloured pill. Any
 * background introduced here has to win the text colour too, or it must not
 * be introduced at all.
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
body.someh-id-on .someh-home-scope {
  --someh-id-accent: var(--someh-market-accent, #ef4056);

  /* Tints are mixed toward white, so text sitting on them stays dark-on-light
     no matter which accent the site uses. */
  --someh-id-tint: color-mix(in srgb, var(--someh-id-accent) 9%, #fff);
  --someh-id-wash: color-mix(in srgb, var(--someh-id-accent) 4%, #fff);

  /*
   * A deeper tone of the same colour, for small text on a filled shape.
   * The site's accent is chosen to look good as a large button, and at that
   * size white on it is fine. A 10px label is not that: on the default red
   * white text measures 3.79:1, under the 4.5:1 needed for small text. Mixing
   * a quarter black in keeps the hue and clears the bar.
   */
  --someh-id-accent-deep: color-mix(in srgb, var(--someh-id-accent) 74%, #000);

  --someh-id-radius: 18px;
  --someh-id-radius-sm: 12px;
  --someh-id-gap: 18px;
}

/*
 * Buttons, badges, hero dots and prices are deliberately absent from this
 * file. The storefront already paints them with the site accent and pairs
 * them with white text; re-stating that here would only add a second place
 * for the two halves to drift apart.
 */

/* ------------------------------------------------------------------ *
 * Readability of the small section label
 * ------------------------------------------------------------------ *
 * The storefront sets this label to #81858b, which on white measures 3.71:1
 * — under the 4.5:1 small text needs. It is a neutral grey going to a darker
 * neutral grey, so no brand colour is touched; it just becomes legible.
 */
body.someh-id-on .someh-home-scope.someh-marketplace-ui .someh-sf-section-head > div > span {
  color: #5f636a !important;
}

/* ------------------------------------------------------------------ *
 * Axis 1 — section headings
 * ------------------------------------------------------------------ */

/* bar: a solid accent rule standing before the title */
body.someh-id-head-bar .someh-storefront-active .someh-sf-section-head > div {
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--someh-id-accent);
}

/* underline: the title sits on a short accent rule */
body.someh-id-head-underline .someh-home-scope.someh-marketplace-ui .someh-sf-section-head h2,
body.someh-id-head-underline .someh-storefront-active .someh-sf-section-head h2 {
  padding-bottom: 9px !important;
  background-image: linear-gradient(var(--someh-id-accent), var(--someh-id-accent));
  background-repeat: no-repeat;
  background-size: 54px 3px;
  background-position: right bottom;
}

[dir="ltr"] body.someh-id-head-underline .someh-home-scope.someh-marketplace-ui .someh-sf-section-head h2,
body.someh-id-head-underline .someh-storefront-active .someh-sf-section-head h2 {
  background-position: left bottom;
}

body.someh-id-head-underline .someh-storefront-active .someh-sf-section-head > div > span::before {
  display: none;
}

/* boxed: the eyebrow becomes a filled chip */
body.someh-id-head-boxed .someh-home-scope.someh-marketplace-ui .someh-sf-section-head > div > span,
body.someh-id-head-boxed .someh-storefront-active .someh-sf-section-head > div > span {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--someh-id-accent);
  background: var(--someh-id-accent-deep);
  /* The marketplace layer forces #81858b here; the pill has to win it back. */
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.someh-id-head-boxed .someh-storefront-active .someh-sf-section-head > div > span::before {
  display: none;
}

/* minimal: no marks at all, the type carries it */
body.someh-id-head-minimal .someh-home-scope.someh-marketplace-ui .someh-sf-section-head > div > span {
  letter-spacing: .16em !important;
  font-size: 9px !important;
  opacity: .85;
}

body.someh-id-head-minimal .someh-storefront-active .someh-sf-section-head > div > span::before {
  display: none;
}

body.someh-id-head-minimal .someh-storefront-active .someh-sf-section-head h2 {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------------ *
 * Axis 2 — hero
 * ------------------------------------------------------------------ */

/* stacked: a tinted band behind the whole hero, copy sits lower */
body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero {
  background: linear-gradient(160deg, var(--someh-id-tint), #fff 72%);
}

body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero-copy {
  justify-content: flex-end;
  padding-bottom: 6px;
}

body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero-slide {
  align-items: end;
}

/* framed: the artwork gets a real frame in the accent colour */
body.someh-id-hero-framed .someh-home-scope.someh-marketplace-ui .someh-sf-hero-media,
body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero-media {
  border: 3px solid var(--someh-id-accent) !important;
  border-radius: var(--someh-id-radius);
  padding: 12px !important;
  background: #fff !important;
}

body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero {
  background: var(--someh-id-wash);
}

/* split is the theme's own hero, deliberately left alone. */

/* ------------------------------------------------------------------ *
 * Axis 3 — category chips
 * ------------------------------------------------------------------ */
body.someh-id-chip-squircle .someh-home-scope.someh-marketplace-ui .someh-sf-category-image,
body.someh-id-chip-squircle .someh-storefront-active .someh-sf-category-image {
  border-radius: 26% !important;
}

body.someh-id-chip-square .someh-home-scope.someh-marketplace-ui .someh-sf-category-image,
body.someh-id-chip-square .someh-storefront-active .someh-sf-category-image {
  border-radius: 8px !important;
}

body.someh-id-chip-square .someh-storefront-active .someh-sf-category:hover .someh-sf-category-image,
body.someh-id-chip-squircle .someh-storefront-active .someh-sf-category:hover .someh-sf-category-image {
  box-shadow: 0 0 0 3px var(--someh-id-accent);
}

/* circle is the theme's own chip. */

/* ------------------------------------------------------------------ *
 * Axis 4 — cards
 * ------------------------------------------------------------------ *
 * The marketplace layer puts the product cards inside one bordered strip
 * (`.someh-sf-products-track` with gap:0 and its own border). Only the
 * "outline" style keeps that strip; the other three break the cards apart so
 * their own edge, shadow or fill is actually visible. Every rule needs
 * !important because the rules it replaces use it.
 */

/* outline: the joined strip the marketplace layer draws by default */
body.someh-id-card-outline .someh-home-scope.someh-marketplace-ui .someh-sf-product-card,
body.someh-id-card-outline .someh-storefront-active .someh-sf-article-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.someh-id-card-outline .someh-storefront-active .someh-sf-article-card {
  border: 1.5px solid var(--someh-market-line, var(--someh-sf-border)) !important;
  border-radius: var(--someh-id-radius-sm) !important;
}

/* The three separated styles all need the strip taken apart first. */
body.someh-id-card-elevated .someh-home-scope.someh-marketplace-ui .someh-sf-products-track,
body.someh-id-card-raised .someh-home-scope.someh-marketplace-ui .someh-sf-products-track,
body.someh-id-card-flat .someh-home-scope.someh-marketplace-ui .someh-sf-products-track {
  gap: var(--someh-id-gap) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.someh-id-card-elevated .someh-home-scope.someh-marketplace-ui .someh-sf-product-card,
body.someh-id-card-elevated .someh-storefront-active .someh-sf-article-card {
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .12) !important;
  border-radius: var(--someh-id-radius) !important;
}

body.someh-id-card-raised .someh-home-scope.someh-marketplace-ui .someh-sf-product-card,
body.someh-id-card-raised .someh-storefront-active .someh-sf-article-card {
  border: 1px solid var(--someh-market-line, var(--someh-sf-border)) !important;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(16, 42, 67, .13) !important;
  border-radius: var(--someh-id-radius) !important;
}

body.someh-id-card-raised .someh-storefront-active .someh-sf-product-card:hover,
body.someh-id-card-raised .someh-storefront-active .someh-sf-article-card:hover {
  transform: translateY(-8px);
}

/*
 * flat: card and page share one ground, separated only by a wash. The wash
 * stays near-white, so the card's existing dark text is untouched.
 */
body.someh-id-card-flat .someh-home-scope.someh-marketplace-ui .someh-sf-product-card,
body.someh-id-card-flat .someh-storefront-active .someh-sf-article-card {
  border: 0 !important;
  background: var(--someh-id-wash) !important;
  box-shadow: none !important;
  border-radius: var(--someh-id-radius) !important;
}

body.someh-id-card-flat .someh-home-scope.someh-marketplace-ui .someh-sf-product-image {
  background: transparent !important;
}

/* ------------------------------------------------------------------ *
 * Axis 5 — density
 * ------------------------------------------------------------------ *
 * --someh-id-gap is read by the card axis above, so the two compose: how the
 * cards are separated, and by how much.
 */
body.someh-id-density-compact .someh-home-scope {
  --someh-id-gap: 10px;
}

body.someh-id-density-normal .someh-home-scope {
  --someh-id-gap: 18px;
}

body.someh-id-density-airy .someh-home-scope {
  --someh-id-gap: 28px;
}

body.someh-id-density-compact .someh-home-scope.someh-marketplace-ui .someh-sf-section {
  margin-top: 24px !important;
}

body.someh-id-density-compact .someh-home-scope.someh-marketplace-ui .someh-sf-section-head {
  margin-bottom: 9px !important;
}

body.someh-id-density-compact .someh-home-scope.someh-marketplace-ui .someh-sf-article-grid {
  gap: 10px !important;
}

body.someh-id-density-compact .someh-home-scope.someh-marketplace-ui .someh-sf-product-body {
  padding: 9px 11px 11px !important;
}

body.someh-id-density-normal .someh-home-scope.someh-marketplace-ui .someh-sf-section {
  margin-top: 46px !important;
}

body.someh-id-density-normal .someh-home-scope.someh-marketplace-ui .someh-sf-section-head {
  margin-bottom: 16px !important;
}

body.someh-id-density-airy .someh-home-scope.someh-marketplace-ui .someh-sf-section {
  margin-top: 78px !important;
}

body.someh-id-density-airy .someh-home-scope.someh-marketplace-ui .someh-sf-section-head {
  margin-bottom: 28px !important;
}

body.someh-id-density-airy .someh-home-scope.someh-marketplace-ui .someh-sf-article-grid {
  gap: 24px !important;
}

body.someh-id-density-airy .someh-home-scope.someh-marketplace-ui .someh-sf-product-body {
  padding: 19px 19px 21px !important;
}

/* ------------------------------------------------------------------ *
 * Night skin
 * ------------------------------------------------------------------ *
 * Only the two places where a light ground was assumed. Everything else
 * uses the accent, which reads on both grounds.
 */
html.dark-mode body.someh-id-card-flat .someh-storefront-active .someh-sf-product-card,
html.dark-skin body.someh-id-card-flat .someh-storefront-active .someh-sf-product-card,
html[data-theme="dark"] body.someh-id-card-flat .someh-storefront-active .someh-sf-product-card,
html.dark-mode body.someh-id-card-flat .someh-storefront-active .someh-sf-article-card,
html.dark-skin body.someh-id-card-flat .someh-storefront-active .someh-sf-article-card,
html[data-theme="dark"] body.someh-id-card-flat .someh-storefront-active .someh-sf-article-card {
  background: #111b26;
}

html.dark-mode body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero-media,
html.dark-skin body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero-media,
html[data-theme="dark"] body.someh-id-hero-framed .someh-home-scope.someh-marketplace-ui .someh-sf-hero-media,
body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero-media {
  background: #0d1721 !important;
}

html.dark-mode body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero,
html.dark-skin body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero,
html[data-theme="dark"] body.someh-id-hero-stacked .someh-storefront-active .someh-sf-hero,
html.dark-mode body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero,
html.dark-skin body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero,
html[data-theme="dark"] body.someh-id-hero-framed .someh-storefront-active .someh-sf-hero {
  background: linear-gradient(120deg, #182b3b, #10252c);
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.someh-id-card-raised .someh-storefront-active .someh-sf-product-card:hover,
  body.someh-id-card-raised .someh-storefront-active .someh-sf-article-card:hover {
    transform: none;
  }
}