/* Source palette: layon.ru, measured 2026-10-03. Storefront overrides only. */
body.layon-natural:not(.staff-page) {
  --layon-primary: #13a7dd;
  --layon-primary-hover: #1fb5ec;
}
body.layon-natural:not(.staff-page) .btn:not(.secondary),
body.layon-natural:not(.staff-page) .search button,
body.layon-natural:not(.staff-page) .account-form button[type=submit],
body.layon-natural:not(.staff-page) .review-compose button[type=submit] {
  background: var(--layon-primary); border-color: transparent; color: var(--layon-primary-foreground);
}
body.layon-natural:not(.staff-page) .btn:not(.secondary):hover,
body.layon-natural:not(.staff-page) .search button:hover,
body.layon-natural:not(.staff-page) .account-form button[type=submit]:hover,
body.layon-natural:not(.staff-page) .review-compose button[type=submit]:hover {
  background: var(--layon-primary-hover); border-color: transparent; color: var(--layon-primary-foreground);
}
body.layon-natural:not(.staff-page) .btn.secondary,
body.layon-natural:not(.staff-page) .mini-btn {
  background: #fff; color: var(--layon-accent); border-color: var(--layon-control-border);
}
body.layon-natural:not(.staff-page) .btn.secondary:hover,
body.layon-natural:not(.staff-page) .mini-btn:hover {
  background: var(--layon-cream); color: var(--layon-accent); border-color: var(--layon-accent);
}
/* Use the complete horizontal source image, including the registered mark. */
.layon-natural .brand-logo {
  display: block; position: relative; width: 180px; height: 70px;
  flex: 0 0 180px; overflow: visible; line-height: 0;
}
.layon-natural .brand-logo img {
  display: block; position: static; inset: auto; width: 100%; height: 100%;
  max-width: 100%; object-fit: contain; object-position: center; transform: none;
}
.layon-natural .footer-main .brand-logo { width: 144px; height: 56px; }
.layon-natural.staff-page .staff-topbar .brand-logo {
  width: 108px; height: 42px; flex-basis: 108px;
}
/* Header actions and the source's eight categories are separate rows. */
body.layon-natural:not(.staff-page) .header-main {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 24px;
  align-items: center; padding-block: 10px 0;
}
body.layon-natural:not(.staff-page) .primary-nav {
  grid-row: 2; grid-column: 1/-1; display: flex; align-items: flex-start;
  width: 100%; margin: 0; gap: 20px; border-top: 1px solid var(--layon-line);
  font-size: 14px;
}
.catalog-menu { flex: 1; min-width: 0; }
.catalog-menu > summary { display: none; }
.catalog-roots, .catalog-child-list { list-style: none; padding: 0; margin: 0; }
.catalog-roots { display: flex; justify-content: space-between; gap: 10px; }
.catalog-root { position: relative; min-width: 0; }
.catalog-root-row { display: flex; align-items: center; }
.catalog-root-row > a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; line-height: 1.35; }
.catalog-root-row > a:hover, .catalog-root.is-active > .catalog-root-row > a { text-decoration: underline; text-underline-offset: 5px; }
.catalog-branch > summary, .catalog-child-row summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; cursor: pointer; list-style: none;
}
.catalog-branch > summary::-webkit-details-marker, .catalog-child-row summary::-webkit-details-marker,
.catalog-menu > summary::-webkit-details-marker { display: none; }
.catalog-branch > summary span, .catalog-child-row summary span, .catalog-menu > summary span { width: 8px; height: 8px; font-size: 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.catalog-branch[open] > summary span, .catalog-child-row details[open] > summary span { transform: rotate(225deg); }
.catalog-submenu {
  position: absolute; top: 100%; left: 0; width: 320px; max-width: 80vw;
  max-height: min(70vh,620px); overflow: auto; padding: 12px;
  background: #fff; border: 1px solid var(--layon-line); border-radius: 6px;
  box-shadow: 0 8px 20px rgb(0 0 0 / .08); z-index: 31;
}
.catalog-root:nth-last-child(-n+3) .catalog-submenu { left: auto; right: 0; }
.catalog-child-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: start; }
.catalog-child-row > a, .catalog-lego-link { display: flex; align-items: center; min-height: 44px; padding: 8px; overflow-wrap: anywhere; line-height: 1.4; }
.catalog-child-row > a:hover, .catalog-child-row > a[aria-current] { background: var(--layon-cream); }
.catalog-child-row > details { display: contents; }
.catalog-child-row > details > summary { grid-column: 2; grid-row: 1; }
.catalog-child-row > details > .catalog-child-list { grid-column: 1/-1; padding-left: 12px; border-left: 1px solid var(--layon-line); margin-left: 8px; }
.catalog-lego-link { border-top: 1px solid var(--layon-line); margin-top: 8px; }
body.layon-natural:not(.staff-page) .primary-nav > .journal-nav-link { min-height: 48px; display: flex; align-items: center; padding: 8px 0; }
body.layon-natural:not(.staff-page) .header-icon,
body.layon-natural:not(.staff-page) .header-menu > summary { width: 44px; }
/* Transparent icon target; the glyph remains compact, selected state is filled. */
.favorite-glyph { display: inline-block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; vertical-align: middle; }
body.layon-natural:not(.staff-page) .favorite-button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  min-height: 44px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #333; font: inherit; cursor: pointer;
}
body.layon-natural:not(.staff-page) .favorite-button.selected { background: transparent; color: #13a7dd; border: 0; }
.favorite-button.selected .favorite-glyph { fill: currentColor; }
body.layon-natural:not(.staff-page) .favorite-button:hover { color: #13a7dd; background: transparent; }
.favorites-heading-icon { display: inline-flex; margin-left: 8px; }
.favorites-heading-icon .favorite-glyph { width: 28px; height: 28px; }
/* Existing factual badges, with the source's compact 6px shape. */
body.layon-natural:not(.staff-page) .product-badge { border-radius: 6px; padding: 3px 7px; font-size: 12px; line-height: 1.3; }
body.layon-natural:not(.staff-page) .badge-sage { background: #13a7dd; color: #1b2738; border-color: transparent; }
body.layon-natural:not(.staff-page) .badge-sand { background: #f7f7f7; color: #333; border-color: #ededed; }
body.layon-natural:not(.staff-page) .badge-ink { background: #1b2738; color: #fff; border-color: transparent; }
/* Arrow enhancement keeps native touch scrolling and no-JS fallback. */
.recent-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.recent-controls > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.recent-frame { position: relative; }
.recent-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.recent-arrows[hidden] { display: none; }
body.layon-natural:not(.staff-page) .recent-frame .recent-arrow {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  position: absolute; top: 158px; transform: translateY(-50%); pointer-events: auto; padding: 0; background: #fff; color: var(--layon-ink); border: 1px solid var(--layon-control-border); border-radius: 50%; box-shadow: 0 2px 8px rgb(0 0 0 / .08);
}
.recent-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.recent-arrow:hover:not(:disabled) { background: var(--layon-cream); }
.recent-arrow[data-recent-prev] { left: 0; }
.recent-arrow[data-recent-next] { right: 0; }
.recent-arrow:disabled { visibility: hidden; }
@media(max-width:720px){.recent-arrows{display:none}}
.recently-viewed[data-enhanced=true] .recent-strip { scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 6px; }
.recently-viewed[data-enhanced=true] .recent-strip::-webkit-scrollbar { display: none; }
.recent-strip .recent-card { scroll-snap-align: start; }
.recent-strip:focus-visible { outline: 2px solid var(--layon-accent); outline-offset: 2px; }
@media (max-width:1100px) {
  .layon-natural .store-header .brand-logo { width: 144px; height: 56px; flex-basis: 144px; }
  body.layon-natural:not(.staff-page) .primary-nav { gap: 16px; justify-content: space-between; }
  .catalog-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
  .catalog-menu[open] > summary span { transform: rotate(225deg); }
  .catalog-roots { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; max-height: 70vh; overflow: auto; padding: 12px 20px; background: #fff; border: 1px solid var(--layon-line); box-shadow: 0 8px 20px rgb(0 0 0 / .08); }
  .catalog-root-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; border-bottom: 1px solid var(--layon-line); }
  .catalog-root-row > a { padding: 8px 4px; }
  .catalog-branch { display: contents; }
  .catalog-branch > summary { grid-column: 2; grid-row: 1; }
  .catalog-submenu { position: static; width: auto; max-width: none; max-height: none; overflow: visible; grid-column: 1/-1; border: 0; box-shadow: none; padding: 0 0 12px; }
}
@media (max-width:720px) {
  body.layon-natural:not(.staff-page) .header-main { gap: 4px 8px; padding-top: 8px; }
  .layon-natural .store-header .brand-logo { width: 124px; height: 49px; flex-basis: 124px; }
  .recent-heading { gap: 8px 16px; align-items: flex-start; }
  .recent-heading h2 { margin: 0; font-size: 26px; }
  .recent-controls { width: 100%; justify-content: space-between; gap: 8px; }
}
@media (max-width:540px) { .catalog-roots { grid-template-columns: 1fr; padding: 8px 12px; } }
@media (prefers-reduced-motion:reduce) { .recent-strip { scroll-behavior: auto; } }

body.layon-natural:not(.staff-page) .chat-widget-launch,body.layon-natural:not(.staff-page) .chat-widget-send{color:var(--layon-primary-foreground)}

/* Public storefront only; shared Onest, blue logo and accepted 6/10px shape. */
body.layon-natural:not(.staff-page) .disclosure-chevron{display:inline-block;width:8px;height:8px;flex:none;margin:0 3px 3px 12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);font-size:0}
body.layon-natural:not(.staff-page) details[open]>summary>.disclosure-chevron{transform:rotate(225deg);margin-bottom:0}
body.layon-natural:not(.staff-page) .catalog-controls .filter-toggle-icon{margin-left:auto}
body.layon-natural:not(.staff-page) .catalog-controls .real-filters{border-radius:6px}
@media(min-width:721px){
 body.layon-natural:not(.staff-page) .catalog-controls{border:0;background:transparent;margin-bottom:28px}
 body.layon-natural:not(.staff-page) .catalog-controls>summary,body.layon-natural:not(.staff-page) .catalog-controls .filter-collapse{display:none}
 body.layon-natural:not(.staff-page) .catalog-controls>.real-filters{display:flex;flex-wrap:wrap;border:1px solid var(--layon-line);background:#f7f7f7;padding:20px;gap:16px;align-items:end}
 .catalog-controls .real-filters label{flex:1 1 170px;max-width:none;min-width:0}
 .catalog-controls .real-filters .price-filter{flex:0 1 125px;min-width:100px}
 .catalog-controls .real-filters select,.catalog-controls .real-filters input{width:100%;min-height:44px}
}
.product-detail .variant-form{display:grid;gap:10px;max-width:100%;margin:0 0 20px}
.product-detail .variant-form label{font-size:14px;font-weight:500}
.product-detail .variant-form select{width:100%;max-width:100%;min-height:48px;border:1px solid var(--layon-control-border);border-radius:6px;background:#fff;padding:12px;font-size:16px}
.product-detail .variant-form .purchase-note{margin:0;font-size:12px}
.product-detail .variant-form [role=status]:empty{display:none}
.product-detail .product-section-nav{margin-top:20px;margin-bottom:24px;padding:8px 0;gap:4px 24px}
@media(min-width:721px){.catalog-controls .real-filters label:has(select[name="sort"]){flex:0 1 260px}}
.brand-size-guide{max-width:900px;scroll-margin-top:24px}
.brand-size-guide>h2{font-size:clamp(26px,3vw,36px);margin-bottom:20px}
.size-guide-group{border:1px solid var(--layon-line);border-radius:10px;margin:0 0 12px;overflow:hidden}
.size-guide-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 18px;font-size:16px;font-weight:500;background:#f7f7f7}
.size-guide-group>summary::-webkit-details-marker{display:none}
.size-guide-group .size-scroll{margin:0}
.size-guide-group table{margin:0;width:100%;border-collapse:collapse}
.size-guide-group th,.size-guide-group td{padding:12px 16px;text-align:left;font-size:14px;line-height:1.4;border:0;border-bottom:1px solid var(--layon-line)}
.size-guide-group thead{background:#fafafa}
.size-guide-group tbody tr:last-child>*{border-bottom:0}
.size-guide-group tbody tr:nth-child(even){background:#fafafa}
.brand-size-guide>p{font-size:13px;color:var(--layon-secondary);line-height:1.6}
@media(max-width:520px){.size-guide-group th,.size-guide-group td{padding:10px 12px;font-size:13px}.size-guide-group>summary{padding:14px 12px}}

body.layon-natural:not(.staff-page) .lh-home .lh-control,body.layon-natural:not(.staff-page) .lh-home .lh-rail-arrow{border-radius:50%}

.size-guide-group>summary{text-decoration:none}.size-guide-group>h3{padding:14px 18px;background:#f7f7f7;margin:0;font-size:16px;font-weight:500}

/* Quiet empty journal state; no invented editorial content. */
.journal-grid:has(.journal-empty){display:block}.journal-empty{max-width:760px;padding:32px;background:var(--layon-cream);border:1px solid var(--layon-line);border-radius:10px;margin:32px 0}.journal-empty h2{margin-top:0}.journal-empty-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}.journal-empty-actions .text-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:720px){.journal-empty{padding:24px}.journal-empty-actions{gap:12px}}

/* Customer account presentation; staff branches and business rules unchanged. */
body.layon-natural:not(.staff-page) :is(.customer-order-list,.customer-return-list) .purchase-empty{max-width:760px;padding:32px;border:1px solid var(--layon-line);background:var(--layon-cream);border-radius:10px;margin:32px 0}
body.layon-natural:not(.staff-page) :is(.customer-loyalty,.customer-bonuses,.customer-order-list,.customer-return-list) h2{font-size:24px;line-height:1.35;letter-spacing:-.02em}
body.layon-natural:not(.staff-page) .customer-bonuses .purchase-panel{border:1px solid var(--layon-line);border-left:3px solid var(--layon-primary);border-radius:10px;padding:24px;margin:24px 0;max-width:960px}
.customer-bonuses .purchase-panel h2{margin-top:0}.customer-loyalty{max-width:960px}.customer-loyalty p,.customer-loyalty li,.customer-bonuses p{line-height:1.65}
@media(max-width:720px){body.layon-natural:not(.staff-page) :is(.customer-order-list,.customer-return-list) .purchase-empty{padding:24px}body.layon-natural:not(.staff-page) :is(.customer-loyalty,.customer-bonuses,.customer-order-list,.customer-return-list) h2{font-size:22px}body.layon-natural:not(.staff-page) .customer-bonuses .purchase-panel{padding:20px}}

body.layon-natural:not(.staff-page) .btn:not(.secondary):disabled{background:var(--layon-button-soft);border-color:var(--layon-line);color:var(--layon-secondary)}
