/* Shared geometry comes from linku-theme.css. Theme differences are colors only.
   Edit these tokens to customize a merchant. No global footer recoloring. */
html[data-theme="modern"] {
  --theme-accent: #ff5900;
  --theme-accent-fill: linear-gradient(#ff5900,#ff5900);
  --theme-action: #1a1a1a;
}
html[data-theme="lovely"] {
  --theme-accent: #a548ab;
  --theme-accent-fill: linear-gradient(135deg, #d4639a, #8b5cf6);
  --theme-action: linear-gradient(135deg, #d4639a, #8b5cf6);
}
/* Category selection tabs: identical in all homes and the shared category page. */
html[data-theme] .phone .category-pills-new {
  box-sizing: border-box; width: calc(100% - var(--lu-gutter)*2); max-width: var(--lu-width);
  margin: 0 auto; padding: 0; display: flex; justify-content: flex-start; gap: 4px;
  overflow-x: auto; border-bottom: 1px solid var(--lu-border);
}
html[data-theme] .phone .category-pills-new .pill {
  position: relative; flex: 0 0 auto; min-height: 44px; max-width: none;
  padding: 10px 12px; margin: 0; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; font: 400 13px/22px var(--lu-font);
  color: var(--lu-ink); text-decoration: none; white-space: nowrap;
}
html[data-theme] .phone .category-pills-new .pill.active,
html[data-theme] .phone .sub-pill.active {
  font-weight: 600; color: var(--theme-accent); border-bottom-color: var(--theme-accent);
}
html[data-theme="lovely"] .phone .category-pills-new .pill.active,
html[data-theme="lovely"] .phone .sub-pill.active {
  border-bottom-color: transparent; background: var(--theme-accent-fill);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  border-image: var(--theme-accent-fill) 1;
}
html[data-theme] :is(.cart-checkout,.cta-btn-default,.lookup-submit),
html[data-theme] .product-purchase .cta-wrap > #a_order {
  background: var(--theme-action); color: #fff; border-color: transparent;
}
/* Lovely uses the common transparent header and outlined secondary cart button.
   The primary purchase button keeps its theme color through the shared rule above. */
html[data-theme="lovely"] .more-btn {
  background: var(--theme-action); color: #fff; border-color: transparent;
}
html[data-theme] .nav-title a { color: inherit; text-decoration: none; }
html[data-theme] .linku-shared-nav .nav-back { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; margin-right: 4px; }
html[data-theme] .linku-shared-nav:has(.nav-back) { column-gap: 0; }
html[data-theme] .linku-shared-nav .nav-back img { display: block; width: 24px; height: 24px; }
html[data-theme] .nav-actions { margin-left: auto; }
html[data-theme] .shop-actions .shop-action-btn { border: none; background: transparent; box-shadow: none; }
html[data-theme] :is(a,button,summary):focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }

html[data-theme="linklist"] {
  --theme-accent: #6e5b47; --theme-accent-fill: linear-gradient(#6e5b47,#6e5b47); --theme-action: #6e5b47;
}
html[data-theme="minimal"] {
  --theme-accent: #1a1a1a; --theme-accent-fill: linear-gradient(#1a1a1a,#1a1a1a); --theme-action: #1a1a1a;
}
html[data-theme] .div_inc pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.8 var(--lu-font); }
html[data-theme] .div_inc { box-sizing: border-box; width: calc(100% - 32px); max-width: 1120px; margin: 32px auto; }
html[data-theme] { --lu-accent: var(--theme-accent); }