/*
 * Complete page system shared by the pink, green, blue, orange, black gold and
 * black rose storefront themes. Theme-specific files provide color and shape
 * tokens.
 */

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) {
  --theme-surface: #fff;
  --theme-surface-alt: var(--tone-soft);
  --theme-page-bg: var(--tone-pale, var(--tone-cream, #fff));
  --theme-border: var(--tone-line);
  --theme-radius: 1rem;
  --theme-radius-sm: .65rem;
  --theme-border-width: 1px;
  --theme-shadow: 0 18px 48px rgba(12, 20, 32, .08);
  --theme-shadow-hover: 0 24px 58px rgba(12, 20, 32, .14);
  --theme-card-shift: translateY(-3px);
  --theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tone-accent) 24%, transparent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing main {
  min-height: 56vh;
  color: var(--tone-ink);
  background: var(--theme-page-bg);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing main > :where(.site-page-hero, .site-section, .site-article-doc) {
  color: var(--tone-ink);
  background: var(--theme-page-bg);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--theme-border-width) solid var(--theme-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tone-accent) 12%, var(--theme-page-bg)), var(--theme-page-bg) 62%);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-page-hero::after {
  position: absolute;
  top: -7rem;
  right: -5rem;
  width: 19rem;
  height: 19rem;
  content: "";
  border: var(--theme-border-width) solid color-mix(in srgb, var(--tone-accent) 26%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone-accent) 8%, transparent);
  pointer-events: none;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner) {
  width: min(1280px, calc(100% - 2.5rem));
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-page-title,[data-checkout-title]), .site-article-doc > div > section[data-page-kind="article"] > header > h1, .site-shop-detail-title, :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2)) {
  color: var(--tone-ink);
  letter-spacing: -.035em;
  text-wrap: balance;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-page-lead, .site-muted, .muted, .site-rating-text) {
  color: var(--tone-muted);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  .site-article-doc-body,
  .site-shop-sidebar,
  .site-mobile-cat-menu > div,
  .site-wide-card,
  :is(.site-checkout-panel,[data-checkout-panel]),
  .site-shop-cart-panel,
  .site-search-result-group,
  .site-article-toc,
  :is(.site-shop-detail-info,[data-shop-detail-info]),
  :is(.site-shop-detail-desc,[data-shop-detail-description]),
  :is(.site-shop-detail-reviews,[data-shop-reviews]),
  .site-shop-review-detail-panel,
  .site-category-block
) {
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-body {
  margin-block: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3.5vw, 3rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-sidebar, .site-mobile-cat-menu > div) {
  padding: 1rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-cat-link, .site-news-cat-link) {
  border-radius: var(--theme-radius-sm);
  color: var(--tone-muted);
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-cat-link, .site-news-cat-link):hover,
:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-cat-link[data-current], .site-news-cat-link[data-current]) {
  color: var(--tone-accent-dark);
  background: var(--theme-surface-alt);
  transform: translateX(2px);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  :is(.site-shop-card,[data-shop-review-product-card]),
  .site-news-article-card,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-article-product-rec-card,
  .site-shop-review-card,
  .site-category-review-card
) {
  overflow: hidden;
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  :is(.site-shop-card,[data-shop-review-product-card]),
  .site-news-article-card,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-article-product-rec-card
):hover {
  border-color: color-mix(in srgb, var(--tone-accent) 58%, var(--theme-border));
  box-shadow: var(--theme-shadow-hover);
  transform: var(--theme-card-shift);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-card-media, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > div:first-child, :where(.site-news-article-thumb, .site-news-article-card > a:first-child), .site-article-product-rec-media) {
  background: var(--theme-surface-alt);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-card-title, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption > :is(h2, h3), :where(.site-news-article-title, .site-news-article-card > div > h2), :is(.site-search-item-title, .site-search-root > section[role="dialog"] > ul > li > a > span > strong)) {
  color: var(--tone-ink);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-shop-price-now,[data-price-kind="now"]), :is(.site-shop-card,[data-shop-review-product-card]) > footer > p > strong, .site-shop-detail-price-now, .site-article-product-rec-price) {
  color: var(--tone-accent-dark);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  .site-tag-pill,
  :is(.site-article-tags,[data-shop-tags]) a,
  :where(.site-news-tag, .site-news-article-card > div > nav > a),
  :is(.site-search-item-kind, .site-search-root > section[role="dialog"] > ul > li > a > span > small),
  .pill
) {
  border: var(--theme-border-width) solid color-mix(in srgb, var(--tone-accent) 32%, var(--theme-border));
  border-radius: 999px;
  color: var(--tone-accent-dark);
  background: var(--theme-surface-alt);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-tag-pill, :is(.site-article-tags,[data-shop-tags]) a, :where(.site-news-tag, .site-news-article-card > div > nav > a)):hover {
  border-color: var(--tone-accent);
  color: #fff;
  background: var(--tone-accent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-checkout-panel,[data-checkout-panel]) input,
  :is(.site-checkout-panel,[data-checkout-panel]) select,
  :is(.site-checkout-panel,[data-checkout-panel]) textarea
) {
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius-sm);
  color: var(--tone-ink);
  background: var(--theme-surface);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-checkout-panel,[data-checkout-panel]) input,
  :is(.site-checkout-panel,[data-checkout-panel]) select,
  :is(.site-checkout-panel,[data-checkout-panel]) textarea
):focus {
  border-color: var(--tone-accent);
  box-shadow: var(--theme-focus-ring);
  outline: 0;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn) {
  border-radius: var(--theme-radius-sm);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn):not(:disabled):active {
  filter: brightness(.94);
  transform: scale(.98);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn):focus-visible {
  box-shadow: var(--theme-focus-ring);
  outline: 0;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-btn-primary,[data-button-variant="primary"],[data-cart-button][data-button-variant="primary"]), .btn.primary, .admin-btn.primary) {
  border-color: var(--tone-accent);
  color: #fff;
  background: var(--tone-accent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-btn-outline,[data-cart-button][data-button-variant="outline"]), .site-btn-ghost, .admin-btn:not(.primary)) {
  border-color: var(--theme-border);
  color: var(--tone-ink);
  background: var(--theme-surface);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) {
  color: var(--tone-muted);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) a:hover {
  color: var(--tone-accent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-shop-detail-gallery,[data-shop-detail-gallery]), .site-shop-detail-main-img) {
  border-radius: var(--theme-radius);
  background: var(--theme-surface-alt);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-thumb-btn {
  overflow: hidden;
  border-radius: var(--theme-radius-sm);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-thumb-btn.is-active {
  border-color: var(--tone-accent);
  box-shadow: var(--theme-focus-ring);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-spec-pill {
  border-radius: 999px;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-spec-pill.is-active {
  border-color: var(--tone-accent);
  color: #fff;
  background: var(--tone-accent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
  color: var(--tone-ink);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) a {
  color: var(--tone-accent-dark);
  text-decoration-color: color-mix(in srgb, var(--tone-accent) 45%, transparent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) blockquote {
  border-left: .3rem solid var(--tone-accent);
  border-radius: 0 var(--theme-radius-sm) var(--theme-radius-sm) 0;
  background: var(--theme-surface-alt);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-pager a, .site-pager span) {
  border-radius: var(--theme-radius-sm);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-pager a:hover, .site-pager .is-current) {
  border-color: var(--tone-accent);
  color: #fff;
  background: var(--tone-accent);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal {
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--tone-accent) 16%, transparent), transparent 32rem),
    var(--theme-page-bg);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal .auth-card {
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  box-shadow: var(--theme-shadow-hover);
  backdrop-filter: blur(18px);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal :where(.auth-card .h1, .auth-card .lead) {
  color: var(--tone-ink);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin {
  --admin-accent: var(--tone-accent);
  --admin-accent-hover: var(--tone-accent-dark);
  --admin-bg: var(--theme-page-bg);
  --admin-panel: var(--theme-surface);
  --admin-border: var(--theme-border);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin :where(.user-center-sidebar, .user-center-topbar) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin :where(
  .user-center-panel,
  .account-address-form,
  .account-bind-modal__panel,
  .account-ticket-panel,
  .user-center-main > .card,
  .admin-table-wrap
) {
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin :where(.admin-table-row, .account-ticket-bubble) {
  border-color: var(--theme-border);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin :where(.admin-btn, .account-ticket-title-btn):focus-visible {
  box-shadow: var(--theme-focus-ring);
  outline: 0;
}

html[data-site-theme="pink"] {
  --theme-surface: #fffafb;
  --theme-page-bg: #fff7fa;
  --theme-radius: 1.5rem;
  --theme-radius-sm: .9rem;
  --theme-shadow: 0 18px 52px rgba(91, 31, 57, .09);
  --theme-shadow-hover: 0 28px 68px rgba(91, 31, 57, .15);
}

html[data-site-theme="pink"] body.marketing :where(.site-article-doc-body, .auth-card) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,245,249,.96));
}

html[data-site-theme="pink"] body.marketing :where(:is(.site-shop-card,[data-shop-review-product-card]), .site-news-article-card):nth-child(3n + 2) {
  border-radius: 2.2rem 1rem 2.2rem 1rem;
}

html[data-site-theme="green"] {
  --theme-surface: #fbfcf5;
  --theme-page-bg: #f2f4e8;
  --theme-radius: 1.1rem 2rem 1.1rem 2rem;
  --theme-radius-sm: .7rem 1rem .7rem 1rem;
  --theme-shadow: 0 17px 46px rgba(19, 62, 41, .09);
  --theme-shadow-hover: 0 25px 58px rgba(19, 62, 41, .14);
}

html[data-site-theme="green"] body.marketing .site-page-hero::after {
  border-radius: 75% 25% 65% 35%;
  transform: rotate(-18deg);
}

html[data-site-theme="green"] body.marketing :where(:is(.site-shop-card,[data-shop-review-product-card]), .site-news-article-card):nth-child(even) {
  border-radius: 2rem 1rem 2rem 1rem;
}

html[data-site-theme="blue"] {
  --theme-surface: #fff;
  --theme-page-bg: #f5f8fd;
  --theme-radius: .55rem;
  --theme-radius-sm: .35rem;
  --theme-shadow: 0 16px 42px rgba(7, 24, 47, .08);
  --theme-shadow-hover: 0 23px 54px rgba(7, 24, 47, .14);
}

html[data-site-theme="blue"] body.marketing main {
  background-image:
    linear-gradient(rgba(23, 105, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, .025) 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-site-theme="blue"] body.marketing :where(.site-list-titlebar, .site-shop-detail-price-row, .site-search-result-heading) {
  border-left: .25rem solid var(--tone-accent);
  padding-left: 1rem;
}

html[data-site-theme="orange"],

html[data-site-theme="blackgold"] {
  --theme-surface: #fffaf0;
  --theme-page-bg: #fff5df;
  --theme-border: #191612;
  --theme-border-width: 2px;
  --theme-radius: .22rem;
  --theme-radius-sm: .16rem;
  --theme-shadow: 5px 5px 0 #191612;
  --theme-shadow-hover: 8px 8px 0 #191612;
  --theme-card-shift: translate(-2px, -2px);
}

html[data-site-theme="orange"],

html[data-site-theme="blackgold"] body.marketing :where(:is(.site-page-title,[data-checkout-title]), .site-article-doc > div > section[data-page-kind="article"] > header > h1, .site-shop-detail-title, :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2)) {
  font-weight: 950;
  letter-spacing: -.055em;
}

html[data-site-theme="orange"],

html[data-site-theme="blackgold"] body.marketing :where(:is(.site-shop-card,[data-shop-review-product-card]), .site-news-article-card, :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li)):hover {
  border-color: var(--tone-ink);
}

html[data-site-theme="orange"],

html[data-site-theme="blackgold"] body.marketing :where(.site-tag-pill, :is(.site-article-tags,[data-shop-tags]) a, :where(.site-news-tag, .site-news-article-card > div > nav > a), .pill) {
  border-color: var(--tone-ink);
  box-shadow: 2px 2px 0 var(--tone-ink);
}

@media (max-width: 900px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner) {
    width: min(100% - 1.5rem, 1280px);
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-article-doc-body {
    padding: 1.25rem;
  }
}

@media (max-width: 640px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) {
    --theme-radius: .85rem;
    --theme-radius-sm: .55rem;
    --theme-shadow: 0 10px 30px rgba(12, 20, 32, .08);
    --theme-shadow-hover: 0 14px 36px rgba(12, 20, 32, .11);
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-page-hero::after {
    top: -5rem;
    right: -7rem;
    width: 15rem;
    height: 15rem;
  }

  html[data-site-theme="orange"],

  html[data-site-theme="blackgold"] {
    --theme-border-width: 1.5px;
    --theme-shadow: 3px 3px 0 #191612;
    --theme-shadow-hover: 4px 4px 0 #191612;
  }
}

/*
 * Visual refinement layer
 * -----------------------
 * The four color themes share one complete page contract. Keep their page
 * density, type hierarchy and control rhythm aligned here; theme files remain
 * responsible for palette and shape personality.
 */
:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) {
  --theme-content-max: 76rem;
  --theme-reading-max: 48rem;
  --theme-section-space: clamp(3.75rem, 6vw, 6rem);
  --theme-page-space: clamp(2rem, 4vw, 3.5rem);
  --theme-card-padding: clamp(1rem, 1.8vw, 1.4rem);
  --theme-control-height: 2.75rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing {
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-header > div {
  width: min(100%, var(--theme-content-max));
  min-height: 4.25rem;
  padding-block: .65rem;
  gap: clamp(.9rem, 2vw, 1.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where([data-site-brand], [data-footer-brand] > header strong) {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.015em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is([data-site-nav-link], .site-nav-item > a, .site-nav-mobile-group > summary, [data-site-mobile-nav] > div > a) {
  padding: .55rem .8rem;
  font-size: .9rem;
  font-weight: 600;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where([data-site-header-search] > button, [data-site-cart-link], [data-site-user-login], [data-site-user-menu] > summary) {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-section {
  padding-top: var(--theme-section-space);
  padding-bottom: var(--theme-section-space);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner) {
  width: min(var(--theme-content-max), calc(100% - 2.5rem));
  max-width: none;
  padding-inline: 0;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-page-hero {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-page-title,[data-checkout-title]) {
  max-width: 22ch;
  margin-bottom: .85rem;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 750;
  line-height: 1.04;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-page-lead {
  max-width: var(--theme-reading-max);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.7;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-inner {
  padding-block: var(--theme-page-space) clamp(3.5rem, 6vw, 6rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-body--marketing-list :is(.site-page-title,[data-checkout-title]) {
  max-width: 24ch;
  margin-bottom: .9rem;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.05;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-body--marketing-list .site-page-lead {
  max-width: var(--theme-reading-max);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-body--marketing-list :where(.site-shop-layout, .site-news-layout) {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-sidebar, .site-news-sidebar, .site-mobile-cat-menu > div) {
  padding: 1rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-sidebar > h2, .site-news-sidebar > h2) {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-cat-link, .site-news-cat-link) {
  min-height: 2.75rem;
  padding: .65rem .75rem;
  font-size: .9rem;
  line-height: 1.35;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-grid,[data-shop-grid]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-link, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child) {
  transform: none;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-media, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > div:first-child) {
  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-media img, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > div:first-child > img) {
  border-radius: inherit;
  object-fit: contain;
  transition: transform .24s ease;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(:is(.site-shop-card,[data-shop-review-product-card]):hover .site-shop-card-media img, :is(.site-shop-card,[data-shop-review-product-card]):hover > a:first-child > figure > div:first-child > img) {
  transform: scale(1.025);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-body, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption) {
  padding: 1rem var(--theme-card-padding) .25rem;
  gap: .35rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-title, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption > :is(h2, h3)) {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-rating, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption > p) {
  margin-top: .15rem;
  font-size: .8rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-card-foot, :is(.site-shop-card,[data-shop-review-product-card]) > footer) {
  min-height: 3.25rem;
  padding: .55rem var(--theme-card-padding) 1rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(:is(.site-shop-price-now,[data-price-kind="now"]), :is(.site-shop-card,[data-shop-review-product-card]) > footer > p > strong) {
  font-size: 1.05rem;
  font-weight: 800;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-news-article-list {
  gap: .85rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-news-article-card {
  min-height: 7rem;
  padding: var(--theme-card-padding);
  gap: 1rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-news-article-title, .site-news-article-card > div > h2) {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.4;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-news-article-meta, .site-news-article-card > div > p) {
  margin-top: .4rem;
  font-size: .8rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-breadcrumb-list, :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) > ol) {
  margin-bottom: 1rem;
  font-size: .82rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]) {
  gap: clamp(2rem, 4vw, 4rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-detail-main-img {
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-detail-title {
  margin-bottom: .75rem;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  line-height: 1.08;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-detail-price-row {
  margin-bottom: .75rem;
  padding-block: .9rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-detail-price-now {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-desc,[data-shop-detail-description]) {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
  max-width: 52rem;
  font-size: clamp(1rem, 1.08vw, 1.08rem);
  line-height: 1.78;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(h2, h3, h4) {
  margin-top: 1.8em;
  margin-bottom: .65em;
  line-height: 1.25;
  letter-spacing: -.02em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where([data-cart-summary], :is(.site-checkout-col,[data-checkout-column]):last-child :is(.site-checkout-panel,[data-checkout-panel])) {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: var(--theme-border-width) solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-cart-page, .site-checkout-page) {
  padding-block: clamp(3rem, 6vw, 5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-shop-cart-page, .site-checkout-page) :is(.site-page-title,[data-checkout-title]) {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-checkout-panel-title,[data-checkout-heading]) {
  margin-bottom: 1rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-checkout-field,[data-checkout-field]) input,
  :is(.site-checkout-field,[data-checkout-field]) select,
  :is(.site-checkout-address-picker-trigger,[data-checkout-address-trigger])
) {
  min-height: var(--theme-control-height);
  padding-inline: .85rem;
  font-size: .95rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-btn,[data-checkout-button],[data-cart-button]) {
  min-height: var(--theme-control-height);
  padding: .7rem 1.15rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-btn-lg,[data-cart-button][data-button-size="large"]) {
  min-height: 3rem;
  padding-inline: 1.45rem;
  font-size: .95rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal .auth-shell > main {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal .auth-card {
  width: min(100%, 32rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.auth-portal .auth-card .h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1.15;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin .user-center-main.admin-main {
  padding: 1.25rem clamp(1rem, 2.5vw, 2rem) 2rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.user-center-admin :where(
  .user-center-panel,
  .account-address-form,
  .account-bind-modal__panel,
  .account-ticket-panel,
  .user-center-main > .card,
  .admin-table-wrap
) {
  padding: clamp(1rem, 2vw, 1.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-footer > div:first-of-type {
  width: min(100%, var(--theme-content-max));
  padding-block: clamp(3rem, 5vw, 4.5rem);
  gap: clamp(2rem, 5vw, 4.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing [data-footer-brand] {
  gap: 1.1rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where([data-footer-brand] > header p, [data-footer-columns] > section) {
  font-size: .88rem;
  line-height: 1.55;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing [data-footer-columns] > section > h2 {
  margin-bottom: .65rem;
  font-size: .72rem;
  letter-spacing: .1em;
}

html[data-site-theme="pink"] body.marketing :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2),
html[data-site-theme="pink"] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

html[data-site-theme="green"] body.marketing :where(:is(.site-page-title,[data-checkout-title]), :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2), .site-article-doc > div > section[data-page-kind="article"] > header > h1) {
  letter-spacing: -.045em;
}

html[data-site-theme="blue"] body.marketing :where(:is(.site-page-title,[data-checkout-title]), :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2), .site-article-doc > div > section[data-page-kind="article"] > header > h1) {
  font-weight: 800;
  letter-spacing: -.045em;
}

html[data-site-theme="orange"],

html[data-site-theme="blackgold"] body.marketing :where(:is(.site-page-title,[data-checkout-title]), :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2), .site-article-doc > div > section[data-page-kind="article"] > header > h1) {
  text-transform: uppercase;
}

@media (max-width: 900px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner) {
    width: min(var(--theme-content-max), calc(100% - 2rem));
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
    padding: 1.25rem;
  }
}

@media (max-width: 640px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) {
    --theme-section-space: 3.25rem;
    --theme-page-space: 1.5rem;
    --theme-card-padding: 1rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-header > div {
    min-height: 3.75rem;
    padding-block: .5rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner) {
    width: min(var(--theme-content-max), calc(100% - 1.5rem));
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-page-hero {
    padding-block: 2.75rem 3.25rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(:is(.site-page-title,[data-checkout-title]), .site-article-doc-body--marketing-list :is(.site-page-title,[data-checkout-title])) {
    font-size: clamp(1.85rem, 9.5vw, 2.55rem);
    line-height: 1.08;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-grid,[data-shop-grid]) {
    gap: 1rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]) {
    gap: 1.5rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
    padding: 1.1rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(.site-shop-cart-page, .site-checkout-page) {
    padding-block: 2.5rem 3.5rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(.site-shop-cart-page, .site-checkout-page) :is(.site-page-title,[data-checkout-title]) {
    font-size: clamp(1.9rem, 10vw, 2.65rem);
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-footer > div:first-of-type {
    padding-block: 2.75rem 2.25rem;
  }

  html[data-site-theme="orange"],

  html[data-site-theme="blackgold"] {
    --theme-radius: .18rem;
    --theme-radius-sm: .12rem;
  }
}

/*
 * Full-screen composition
 * -----------------------
 * Keep page sections open and full-width. Text remains bounded to a generous
 * reading measure, while product media, grids and rich media can use the
 * available screen width without being trapped inside an outer card.
 */
:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) {
  --theme-screen-gutter: clamp(1rem, 3.5vw, 4.5rem);
  --theme-reading-wide: 72rem;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(
  :is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div),
  .site-article-doc-inner,
  .site-footer > div:first-of-type,
  .tone-shell > aside[role="note"] > div,
  [data-pink-hero] > div,
  [data-pink-collections] > div,
  [data-pink-products] > div,
  [data-pink-journal] > div,
  [data-green-hero] > div,
  [data-green-manifesto] > div,
  [data-green-paths] > div,
  [data-green-products] > div,
  [data-green-journal] > div,
  [data-blue-hero] > div,
  [data-blue-stats] > div,
  [data-blue-callout] > div,
  [data-blue-categories] > div,
  [data-blue-products] > div,
  [data-blue-journal] > div,
  [data-orange-hero-inner],
  [data-orange-promises-inner],
  [data-orange-banner-inner],
  [data-tone-benefits] > div
) {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-header > div {
  width: 100%;
  max-width: none;
  padding-inline: var(--theme-screen-gutter);
  box-sizing: border-box;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(:is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div), .site-article-doc-inner, .site-footer > div:first-of-type) {
  padding-inline: var(--theme-screen-gutter);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .tone-shell > aside[role="note"] > div {
  padding-inline: var(--theme-screen-gutter);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-inner {
  padding-top: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc-body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]) {
  width: 100%;
  gap: clamp(2rem, 4.5vw, 5.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
  padding: clamp(.25rem, 1.25vw, 1.25rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :is(.site-shop-detail-desc,[data-shop-detail-description]) {
  width: 100%;
  margin-top: clamp(3.5rem, 7vw, 7rem);
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--theme-border) 76%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-shop-detail-desc-h {
  width: min(100%, var(--theme-reading-wide));
  margin: 0 auto clamp(1.25rem, 2vw, 2rem);
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
  width: min(100%, var(--theme-reading-wide));
  max-width: var(--theme-reading-wide);
  margin-inline: auto;
  color: var(--tone-ink);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.82;
  letter-spacing: .002em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-rich-layout {
  width: 100%;
  gap: clamp(1.5rem, 3.5vw, 4rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-doc > div > section[data-page-kind="article"] > header > h1, .site-article-doc > div > section[data-page-kind="article"] > header > p) {
  width: min(100%, var(--theme-reading-wide));
  max-width: var(--theme-reading-wide);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.04;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > p {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(p, ul, ol, blockquote, pre) {
  margin-top: 0;
  margin-bottom: 1.15em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(ul, ol) {
  padding-left: 1.4em;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(h2, h3, h4, h5, h6) {
  margin-top: 2em;
  margin-bottom: .75em;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(img, video, iframe, table, figure) {
  max-width: 100%;
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(figure, table) {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

:is(
  html[data-site-theme="pink"],
  html[data-site-theme="green"],
  html[data-site-theme="blue"],
  html[data-site-theme="orange"],
  html[data-site-theme="blackgold"],
  html[data-site-theme="blackrose"]
) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) blockquote {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--tone-accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--tone-accent) 7%, transparent);
}

@media (max-width: 900px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) {
    --theme-screen-gutter: clamp(1rem, 3vw, 2rem);
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
    padding: 0;
  }
}

@media (max-width: 640px) {
  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) {
    --theme-screen-gutter: 1rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-article-doc-inner {
    padding-top: 1rem;
    padding-bottom: 3.5rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :is(.site-shop-detail-desc,[data-shop-detail-description]) {
    margin-top: 3rem;
    padding-top: 1.75rem;
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1 {
    font-size: clamp(1.8rem, 10vw, 2.75rem);
  }

  :is(
    html[data-site-theme="pink"],
    html[data-site-theme="green"],
    html[data-site-theme="blue"],
    html[data-site-theme="orange"],
    html[data-site-theme="blackgold"],
    html[data-site-theme="blackrose"]
  ) body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
    width: 100%;
    max-width: none;
    font-size: 1rem;
    line-height: 1.75;
  }
}