/* One shape language for every tab. The site grew tab by tab, and an audit of all 25 workspaces found five field radii (6 to 12 px),
   six field heights (37 to 50 px), buttons that were rounded rectangles in some places and pills in others, text buttons as small
   as 9 px and nine different card radii. These rules set one scale and are loaded last. Components with their own field
   chrome (Finance, Price Search, the Add fragrance dialog) are excluded because they already follow it. */
:root {
  --ui-field-radius: 14px;
  --ui-field-height: 46px;
  --ui-card-radius: 22px;
  --ui-ring: 0 0 0 4px color-mix(in srgb, var(--accent-color, #5b6bb5) 16%, transparent);
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Form fields ---------- */
#workspace .page-panel :is(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=date], input[type=tel], select, textarea):not(:is(.fin-input, .fin-combo, .fin-seg, .fin-menu, .finder-input-wrap, .fin-field, .star-rating) *) {
  min-height: var(--ui-field-height);
  padding-block: 0;
  padding-inline: 14px;
  border: 1px solid var(--control-line, var(--line));
  border-radius: var(--ui-field-radius);
  background-color: var(--bg-surface);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.3;
  box-shadow: none;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
#workspace .page-panel textarea:not(:is(.fin-input, .fin-combo) *) { min-height: 96px; padding-block: 12px; line-height: 1.5; }
#workspace .page-panel :is(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=date], input[type=tel], select, textarea):not(:is(.fin-input, .fin-combo, .fin-seg, .fin-menu, .finder-input-wrap, .fin-field, .star-rating) *):hover { border-color: color-mix(in srgb, var(--accent-color, #5b6bb5) 45%, var(--control-line, var(--line))); }
#workspace .page-panel :is(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=date], input[type=tel], select, textarea):not(:is(.fin-input, .fin-combo, .fin-seg, .fin-menu, .finder-input-wrap, .fin-field, .star-rating) *):focus { outline: none; border-color: var(--accent-color, #5b6bb5); box-shadow: var(--ui-ring); background-color: var(--bg-card); }
#workspace .page-panel select:not(:is(.fin-input, .fin-combo, .fin-seg, .fin-menu) *) { cursor: pointer; }

/* ---------- Buttons ---------- */
body :is(.primary, .secondary, .compare-btn, .selected-button):not(.icon-button) { min-height: 44px; padding-inline: 20px; border-radius: 99px; font-size: .84rem; font-weight: 600; letter-spacing: .005em; }
/* a floor: text buttons were 9 to 11 px in places */
#workspace .text-button, dialog .text-button, body .text-button { font-size: max(.8rem, 12px) !important; font-weight: 600; text-underline-offset: 3px; }
body .text-button:not(:disabled):hover { text-decoration: underline; }

/* ---------- Cards share one corner radius ---------- */
#workspace .page-panel :is(.advanced-card, .toolbar, .workspace-toolbar, .explore-filters, .catalog-card, .review-card, .news-card, .note-library-card, .resale-card, .item-row, .total-panel, .market-stat > div, .bc-all-houses, .scent-compare-card, .quiz-question, .home-feature, .home-how, .home-contact) { border-radius: var(--ui-card-radius); }
#workspace .page-panel :is(.scent-palette-card, .tier-pool-card, .arabian-pair-card) { border-radius: 18px; }

/* ---------- Page headers: the same padding, radius and title scale on every tab that has one ---------- */
#workspace .page-panel .explore-heading { border-radius: calc(var(--ui-card-radius) + 6px); }
#workspace .page-panel .explore-heading h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; }
#workspace .page-panel .explore-heading aside { border-radius: var(--ui-card-radius, 20px); }

/* ---------- Focus is visible and the same everywhere ---------- */
body :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-color, #5b6bb5); outline-offset: 3px; }

@media (max-width: 640px) {
  #workspace .page-panel :is(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=date], input[type=tel], select, textarea):not(:is(.fin-input, .fin-combo, .fin-seg, .fin-menu, .finder-input-wrap, .fin-field, .star-rating) *) { font-size: 16px; }
}

/* Discover hero: "Start with a note" is a tidy card, not a pill */
#workspace .page-panel .catalog-hero .catalog-hero-notes { display: grid; align-content: center; gap: 12px; padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--bg-card) 86%, transparent); }
.catalog-hero-notes > .eyebrow { margin: 0; color: var(--muted); letter-spacing: .16em; }
.catalog-hero-notes .note-tokens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.catalog-hero-notes .note-tokens button { min-height: 34px; padding: 0 14px; border-radius: 99px; font: 600 .78rem/1 system-ui, sans-serif; color: var(--ink); transition: transform .2s, border-color .2s; }
.catalog-hero-notes .note-tokens button:hover { transform: translateY(-2px); border-color: var(--accent-color); }
.catalog-hero-notes .guide-entry { justify-self: start; padding: 2px 0; color: var(--accent-color); font: 700 .8rem/1.3 system-ui, sans-serif; }
.catalog-hero-notes .guide-entry:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Trending now: cards that sit in the page's theme, with the bottle photo blended into its tile */
#discover-trending { padding: 26px 26px 28px; border-radius: var(--radius-feature, 26px); }
#discover-trending > p:not(.fineprint) { margin: 8px 0 18px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.trending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.trending-grid article { display: grid; align-content: start; gap: 6px; padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-card, var(--white)); transition: transform .25s var(--ease-out, ease), border-color .25s, box-shadow .25s; }
.trending-grid article:hover { transform: translateY(-3px); border-color: var(--accent-color); box-shadow: 0 22px 34px -28px rgb(0 0 0 / .5); }
.trending-grid .catalog-art.product-photo { height: 176px; padding: 12px; margin-bottom: 8px; border-radius: 15px; overflow: hidden; background: var(--photo-bg); }
.trending-grid .catalog-art.product-photo img { mix-blend-mode: multiply; } /* the photo's white backdrop melts into the tile instead of showing as a box */
.trending-grid .photo-count { top: 9px; left: 9px; padding: 3px 9px; border: 0; border-radius: 99px; background: rgb(255 255 255 / .82); color: #39443e; font: 700 .62rem/1.3 system-ui, sans-serif; }
.trending-grid .photo-family { left: 9px; bottom: 9px; padding: 3px 9px; border-radius: 99px; background: rgb(255 255 255 / .82); color: #39443e; font: 700 .6rem/1.3 system-ui, sans-serif; letter-spacing: .06em; }
.trending-grid article > strong { padding: 0 4px; font: 600 1rem/1.25 var(--studio-serif); color: var(--ink); }
.trending-grid article > p { margin: 0; padding: 0 4px; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }