/*
 * SMILCO market storefront
 * One catalog and component system, with six market-specific editorial themes.
 */

body.smilco-market-shop,
body[data-smilco-preview]:has(.shop-page) {
  --shop-bg: #fff;
  --shop-surface: #f6f6f6;
  --shop-ink: #111;
  --shop-muted: #656565;
  --shop-line: #dedede;
  --shop-accent: #d50068;
  --shop-accent-2: #111;
  --shop-display: var(--font-display);
  --shop-grid-columns: 4;
  --shop-image-ratio: 4 / 5;
  --shop-radius: 0;
  background: var(--shop-bg);
}

body.market-cn,
html[lang^="zh"] body:has(.shop-page) {
  --shop-bg: #fbf7ef;
  --shop-surface: #f2eadf;
  --shop-ink: #201b18;
  --shop-muted: #71665e;
  --shop-line: #ded2c4;
  --shop-accent: #a91f2c;
  --shop-accent-2: #47675b;
  --shop-display: "Songti SC", "STSong", "Noto Serif SC", var(--font-display);
  --shop-grid-columns: 3;
}

body.market-jp,
html[lang^="ja"] body:has(.shop-page) {
  --shop-bg: #f9f8f4;
  --shop-surface: #f0efe9;
  --shop-ink: #181818;
  --shop-muted: #696863;
  --shop-line: #d9d7cf;
  --shop-accent: #a43a3a;
  --shop-accent-2: #343a3b;
  --shop-display: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", var(--font-display);
  --shop-grid-columns: 2;
  --shop-image-ratio: 5 / 6;
}

body.market-kr,
html[lang^="ko"] body:has(.shop-page) {
  --shop-bg: #fcfcfd;
  --shop-surface: #f4f1f5;
  --shop-ink: #161519;
  --shop-muted: #727079;
  --shop-line: #e3e0e6;
  --shop-accent: #d45c87;
  --shop-accent-2: #8a8191;
  --shop-display: "Nanum Myeongjo", "Noto Serif KR", var(--font-display);
  --shop-grid-columns: 4;
  --shop-radius: 18px;
}

body.market-de,
html[lang^="de"] body:has(.shop-page) {
  --shop-bg: #f4f2ee;
  --shop-surface: #eae7e1;
  --shop-ink: #202323;
  --shop-muted: #626665;
  --shop-line: #cfd0cc;
  --shop-accent: #7f2631;
  --shop-accent-2: #3d4746;
  --shop-display: "Baskerville", "Times New Roman", serif;
  --shop-grid-columns: 4;
  --shop-image-ratio: 3 / 4;
}

body.market-fr,
html[lang^="fr"] body:has(.shop-page) {
  --shop-bg: #fbf6ed;
  --shop-surface: #efe5d9;
  --shop-ink: #171311;
  --shop-muted: #756b65;
  --shop-line: #d9ccc0;
  --shop-accent: #771f31;
  --shop-accent-2: #b18087;
  --shop-display: "Didot", "Bodoni 72", var(--font-display);
  --shop-grid-columns: 3;
  --shop-image-ratio: 3 / 4;
}

.smilco-market-shop .commerce-main,
body[data-smilco-preview] .shop-page {
  color: var(--shop-ink);
  background: var(--shop-bg);
}

.smilco-market-shop .commerce-main.shell {
  width: 100%;
}

.smilco-market-shop .woocommerce-products-header {
  width: 100%;
  max-width: none;
  margin: 0;
}

.smilco-market-shop .smilco-commerce-content > :not(.shop-market-hero):not(.shop-market-guide),
.smilco-market-shop .woocommerce-notices-wrapper,
.smilco-market-shop .woocommerce-result-count,
.smilco-market-shop .woocommerce-ordering,
.smilco-market-shop ul.products,
.smilco-market-shop .woocommerce-pagination {
  width: var(--shell);
  margin-inline: auto;
}

.shop-market-hero,
body[data-smilco-preview] .shop-hero {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(470px, 47vw, 650px);
  padding: clamp(72px, 9vw, 132px) max(32px, calc((100vw - 1320px) / 2));
  grid-template-columns: minmax(310px, .88fr) minmax(440px, 1.12fr);
  grid-template-rows: 1fr auto auto;
  gap: 0 clamp(40px, 6vw, 100px);
  overflow: hidden;
  background: var(--shop-bg);
  border-bottom: 1px solid var(--shop-line);
}

.shop-market-hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 620px;
}

.shop-market-hero h1,
body[data-smilco-preview] .shop-hero h1 {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--shop-ink);
  font-family: var(--shop-display);
  font-size: clamp(3.8rem, 6.6vw, 7.3rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .94;
}

body.market-cn .shop-market-hero h1,
html[lang^="zh"] body[data-smilco-preview] .shop-hero h1,
body.market-jp .shop-market-hero h1,
html[lang^="ja"] body[data-smilco-preview] .shop-hero h1,
body.market-kr .shop-market-hero h1,
html[lang^="ko"] body[data-smilco-preview] .shop-hero h1 {
  font-size: clamp(3.5rem, 5.2vw, 5.8rem);
  line-height: 1.02;
}

.shop-market-hero__copy > p,
body[data-smilco-preview] .shop-hero > p:not(.section-eyebrow) {
  max-width: 590px;
  margin-bottom: 34px;
  color: var(--shop-muted);
  font-size: clamp(.96rem, 1.15vw, 1.12rem);
  line-height: 1.75;
}

.shop-market-hero__media {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 51%;
  margin: 0;
  overflow: hidden;
}

.shop-market-hero__media::after,
body[data-smilco-preview] .shop-hero::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: linear-gradient(90deg, var(--shop-bg), transparent);
  content: "";
  pointer-events: none;
}

.shop-market-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% center;
}

body[data-smilco-preview] .shop-hero::after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: url("../images/hero-smilco.jpg") center / cover no-repeat;
  content: "";
}

body[data-smilco-preview] .shop-hero > * {
  position: relative;
  z-index: 2;
  grid-column: 1;
}

body[data-smilco-preview] .shop-hero .section-eyebrow {
  display: none;
}

.shop-market-collections,
body[data-smilco-preview] .shop-quick-links {
  position: relative;
  z-index: 3;
  display: flex;
  margin: 60px 0 0;
  padding: 0;
  grid-column: 1 / -1;
  gap: clamp(24px, 4vw, 58px);
  overflow-x: auto;
  border: 0;
  scrollbar-width: thin;
}

.shop-market-collections a,
body[data-smilco-preview] .shop-quick-links a {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 0;
  color: var(--shop-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shop-market-collections a:first-child,
.shop-market-collections a:hover,
body[data-smilco-preview] .shop-quick-links a:first-child,
body[data-smilco-preview] .shop-quick-links a:hover {
  color: var(--shop-accent);
}

.shop-market-collections a:first-child::after,
.shop-market-collections a:hover::after,
body[data-smilco-preview] .shop-quick-links a:first-child::after,
body[data-smilco-preview] .shop-quick-links a:hover::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
}

.shop-market-proof {
  position: relative;
  z-index: 3;
  display: grid;
  margin: 25px 0 0;
  padding: 22px 0 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-top: 1px solid var(--shop-line);
}

.shop-market-proof li {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  color: var(--shop-muted);
  border-right: 1px solid var(--shop-line);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .035em;
}

.shop-market-proof li + li { padding-left: clamp(18px, 3vw, 38px); }
.shop-market-proof li:last-child { border-right: 0; }
.shop-market-proof li > span { width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid var(--shop-accent); transform: rotate(45deg); }

body[data-smilco-preview] .account-preview-note {
  margin: 0;
  padding: 15px max(32px, calc((100vw - 1320px) / 2));
  color: var(--shop-muted);
  background: var(--shop-surface);
  border: 0;
  font-size: .69rem;
  text-align: center;
}

.shop-market-anchor { display: block; scroll-margin-top: 96px; }

.smilco-market-shop .woocommerce-result-count,
.smilco-market-shop .woocommerce-ordering,
body[data-smilco-preview] .shop-toolbar {
  min-height: 78px;
  margin-top: 0;
  margin-bottom: 0;
  padding-block: 20px;
  color: var(--shop-muted);
  border-color: var(--shop-line);
}

.smilco-market-shop .woocommerce-result-count { display: flex; align-items: center; float: left; font-size: .76rem; }
.smilco-market-shop .woocommerce-ordering { display: flex; align-items: center; justify-content: flex-end; float: none; }
.smilco-market-shop .woocommerce-ordering select,
body[data-smilco-preview] .shop-toolbar select {
  min-height: 42px;
  padding: 8px 34px 8px 13px;
  color: var(--shop-ink);
  background-color: var(--shop-bg);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  font-size: .74rem;
}

body[data-smilco-preview] .shop-filter-panel {
  color: var(--shop-ink);
  background: var(--shop-surface);
  border-color: var(--shop-line);
}

body[data-smilco-preview] .shop-filter-panel legend { font-family: var(--shop-display); }
body[data-smilco-preview] .shop-filter-panel label { color: var(--shop-muted); }

.smilco-market-shop ul.products,
body[data-smilco-preview] .catalog-grid {
  display: grid;
  padding-block: clamp(44px, 5vw, 76px);
  grid-template-columns: repeat(var(--shop-grid-columns), minmax(0, 1fr));
  gap: clamp(44px, 5vw, 76px) clamp(16px, 2.2vw, 30px);
}

.smilco-market-shop ul.products::before,
.smilco-market-shop ul.products::after { display: none; }

.smilco-market-shop ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  color: var(--shop-ink);
}

.smilco-market-shop ul.products li.product a img,
body[data-smilco-preview] .catalog-card img {
  width: 100%;
  margin: 0 0 17px;
  aspect-ratio: var(--shop-image-ratio);
  object-fit: cover;
  background: var(--shop-surface);
  border-radius: var(--shop-radius);
  transition: transform .55s ease, filter .35s ease;
}

.smilco-market-shop ul.products li.product:hover a img,
body[data-smilco-preview] .catalog-card:hover img { transform: translateY(-4px); }

.smilco-market-shop ul.products li.product .woocommerce-loop-product__title,
body[data-smilco-preview] .catalog-card h2 {
  margin: 8px 0 7px;
  color: var(--shop-ink);
  font-family: var(--shop-display);
  font-size: clamp(1.3rem, 1.8vw, 1.85rem);
  font-weight: 400;
  line-height: 1.08;
}

.smilco-market-shop ul.products li.product .price,
body[data-smilco-preview] .catalog-card strong {
  color: var(--shop-ink);
  font-size: .82rem;
  font-weight: 700;
}

body[data-smilco-preview] .catalog-card span { color: var(--shop-accent); }
body[data-smilco-preview] .catalog-card p { color: var(--shop-muted); }

.smilco-market-shop ul.products li.product .button {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  color: var(--shop-bg);
  background: var(--shop-ink);
  border-color: var(--shop-ink);
}

.smilco-market-shop ul.products li.product .button:hover { color: #fff; background: var(--shop-accent); border-color: var(--shop-accent); }

.market-jp ul.products,
html[lang^="ja"] body[data-smilco-preview] .catalog-grid { row-gap: 96px; }

.market-jp ul.products li.product:nth-child(even),
html[lang^="ja"] body[data-smilco-preview] .catalog-card:nth-child(even) { transform: translateY(44px); }

.market-kr ul.products li.product a img,
html[lang^="ko"] body[data-smilco-preview] .catalog-card img { box-shadow: 0 16px 34px rgba(80, 68, 88, .09); }

.market-de ul.products li.product,
html[lang^="de"] body[data-smilco-preview] .catalog-card { padding-bottom: 18px; border-bottom: 1px solid var(--shop-line); }

.market-fr ul.products li.product:nth-child(3n + 2) a img,
html[lang^="fr"] body[data-smilco-preview] .catalog-card:nth-child(3n + 2) img { aspect-ratio: 4 / 5; }

.shop-market-empty {
  display: flex;
  width: var(--shell);
  min-height: 300px;
  margin: clamp(45px, 7vw, 90px) auto;
  padding: clamp(34px, 6vw, 78px);
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  color: var(--shop-ink);
  background: var(--shop-surface);
  border-top: 3px solid var(--shop-accent);
}

.shop-market-empty h2,
.shop-market-guide h2 {
  max-width: 760px;
  margin-bottom: 16px;
  font-family: var(--shop-display);
  font-size: clamp(2.3rem, 4.5vw, 5rem);
}

.shop-market-empty p,
.shop-market-guide p { max-width: 670px; margin: 0; color: var(--shop-muted); }

.shop-market-guide,
body[data-smilco-preview] .shop-help {
  display: flex;
  width: var(--shell);
  margin: clamp(55px, 8vw, 110px) auto;
  padding: clamp(34px, 6vw, 76px);
  align-items: flex-end;
  justify-content: space-between;
  gap: 46px;
  color: var(--shop-ink);
  background: color-mix(in srgb, var(--shop-surface) 76%, var(--shop-bg));
  border: 1px solid var(--shop-line);
  border-left: 4px solid var(--shop-accent);
}

body[data-smilco-preview] .shop-help h2 { color: var(--shop-ink); font-family: var(--shop-display); }
body[data-smilco-preview] .shop-help p { color: var(--shop-muted); }

.smilco-market-shop .button--dark,
body[data-smilco-preview] .shop-page .button--dark { color: var(--shop-bg); background: var(--shop-ink); }
.smilco-market-shop .button--dark:hover,
body[data-smilco-preview] .shop-page .button--dark:hover { color: #fff; background: var(--shop-accent); }
.smilco-market-shop .button--outline,
body[data-smilco-preview] .shop-page .button--outline { color: var(--shop-ink); background: transparent; border-color: var(--shop-accent); }

/* Beat WooCommerce's anchor-button defaults inside the market experience. */
.smilco-market-shop .shop-market-hero a.button--dark,
.smilco-market-shop .shop-market-empty a.button--dark,
.smilco-market-shop .shop-market-guide a.button--dark {
  color: var(--shop-bg);
  background: var(--shop-ink);
  border-color: var(--shop-ink);
}
.smilco-market-shop .shop-market-hero a.button--outline,
.smilco-market-shop .shop-market-empty a.button--outline,
.smilco-market-shop .shop-market-guide a.button--outline {
  color: var(--shop-ink);
  background: transparent;
  border-color: var(--shop-accent);
}
.smilco-market-shop .shop-market-hero a.button:hover,
.smilco-market-shop .shop-market-empty a.button:hover,
.smilco-market-shop .shop-market-guide a.button:hover {
  color: #fff;
  background: var(--shop-accent);
  border-color: var(--shop-accent);
}

.market-de .shop-market-hero,
html[lang^="de"] body[data-smilco-preview] .shop-hero { grid-template-columns: .78fr 1.22fr; }

.market-fr .shop-market-hero,
html[lang^="fr"] body[data-smilco-preview] .shop-hero { min-height: 720px; grid-template-columns: 1.04fr .96fr; }
.market-fr .shop-market-hero__media,
html[lang^="fr"] body[data-smilco-preview] .shop-hero::after { left: 56%; }

.market-jp .shop-market-hero,
html[lang^="ja"] body[data-smilco-preview] .shop-hero { min-height: 760px; grid-template-columns: 1fr 1fr; }
.market-jp .shop-market-hero__copy,
html[lang^="ja"] body[data-smilco-preview] .shop-hero > :not(.shop-quick-links) { max-width: 520px; }

@media (max-width: 1080px) {
  body.smilco-market-shop,
  body[data-smilco-preview]:has(.shop-page) { --shop-grid-columns: 3; }
  body.market-jp,
  html[lang^="ja"] body:has(.shop-page) { --shop-grid-columns: 2; }
  .shop-market-hero,
  body[data-smilco-preview] .shop-hero { grid-template-columns: minmax(300px, .95fr) minmax(360px, 1.05fr); }
}

@media (max-width: 760px) {
  body.smilco-market-shop,
  body.market-cn.smilco-market-shop,
  body.market-jp.smilco-market-shop,
  body.market-kr.smilco-market-shop,
  body.market-de.smilco-market-shop,
  body.market-fr.smilco-market-shop,
  html[lang^="zh"] body[data-smilco-preview]:has(.shop-page),
  html[lang^="ja"] body[data-smilco-preview]:has(.shop-page),
  html[lang^="ko"] body[data-smilco-preview]:has(.shop-page),
  html[lang^="de"] body[data-smilco-preview]:has(.shop-page),
  html[lang^="fr"] body[data-smilco-preview]:has(.shop-page),
  body[data-smilco-preview]:has(.shop-page) { --shop-grid-columns: 2; --shop-radius: 0; }

  .shop-market-hero,
  body[data-smilco-preview] .shop-hero,
  .market-fr .shop-market-hero,
  .market-jp .shop-market-hero,
  html[lang^="fr"] body[data-smilco-preview] .shop-hero,
  html[lang^="ja"] body[data-smilco-preview] .shop-hero {
    min-height: auto;
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 54svh) auto auto auto;
  }

  body[data-smilco-preview] .shop-hero {
    display: flex;
    flex-direction: column;
  }

  body[data-smilco-preview] .shop-hero::after {
    order: -1;
    width: 100%;
    min-height: max(320px, 54svh);
  }

  body[data-smilco-preview] .shop-hero::before { display: none; }

  .shop-market-hero__media,
  body[data-smilco-preview] .shop-hero::after,
  .market-fr .shop-market-hero__media,
  html[lang^="fr"] body[data-smilco-preview] .shop-hero::after {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-height: 320px;
  }

  body[data-smilco-preview] .shop-hero::after { display: block; grid-column: 1; }
  .shop-market-hero__media::after,
  body[data-smilco-preview] .shop-hero::before { inset: auto 0 0; width: auto; height: 24%; background: linear-gradient(0deg, var(--shop-bg), transparent); }

  .shop-market-hero__copy,
  body[data-smilco-preview] .shop-hero > :not(.shop-quick-links) { width: auto; max-width: none; margin: 0 22px; grid-row: 2; }
  body[data-smilco-preview] .shop-hero > .section-eyebrow { margin-top: 28px; }
  body[data-smilco-preview] .shop-hero h1 { margin-top: 32px; }
  .shop-market-hero h1,
  body[data-smilco-preview] .shop-hero h1 { font-size: clamp(3rem, 15vw, 5.2rem); }

  .shop-market-collections,
  body[data-smilco-preview] .shop-quick-links { margin: 28px 22px 0; grid-column: 1; grid-row: 3; gap: 28px; }

  .shop-market-proof { margin: 24px 22px 28px; padding-top: 18px; grid-column: 1; grid-row: 4; grid-template-columns: 1fr 1fr; }
  .shop-market-proof li { min-height: 44px; border: 0; }
  .shop-market-proof li + li { padding-left: 0; }

  body[data-smilco-preview] .shop-toolbar { margin-inline: 22px; }
  body[data-smilco-preview] .shop-filter-panel { margin-inline: 22px; padding: 24px; }

  .smilco-market-shop ul.products,
  body[data-smilco-preview] .catalog-grid { gap: 42px 12px; }
  body[data-smilco-preview] .catalog-card h2 { max-width: none; font-size: 1.24rem; }
  body[data-smilco-preview] .catalog-card strong { position: static; display: block; margin-top: 9px; }
  body[data-smilco-preview] .catalog-card p { display: none; }
  .market-jp ul.products li.product:nth-child(even),
  html[lang^="ja"] body[data-smilco-preview] .catalog-card:nth-child(even) { transform: translateY(22px); }

  .shop-market-empty,
  .shop-market-guide,
  body[data-smilco-preview] .shop-help { width: calc(100% - 44px); padding: 32px 24px; align-items: stretch; flex-direction: column; gap: 28px; }
  .shop-market-empty .button-row,
  .shop-market-guide .button,
  body[data-smilco-preview] .shop-help .button-row { width: 100%; }
  .shop-market-empty .button,
  .shop-market-guide .button,
  body[data-smilco-preview] .shop-help .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .smilco-market-shop ul.products li.product a img,
  body[data-smilco-preview] .catalog-card img { transition: none; }
}