/* PARROT FORM interface audit — shared design system
   Apple HIG principles adapted for the web + emil-design-eng interaction rules. */

:root {
  --pf-blue: #214ed9;
  --pf-blue-hover: #1648bd;
  --pf-ink: #102d63;
  --pf-text: #17376b;
  --pf-secondary: #526985;
  --pf-canvas: #f4f8fd;
  --pf-collection-canvas: #f4f9ff;
  --pf-separator: rgba(18, 55, 105, .12);
  --pf-glass: rgba(247, 251, 255, .78);
  --pf-glass-strong: rgba(250, 253, 255, .9);
  --pf-highlight: rgba(255, 255, 255, .9);
  --pf-shadow-sm: 0 8px 24px rgba(27, 62, 114, .08);
  --pf-shadow-md: 0 18px 48px rgba(27, 62, 114, .12);
  --pf-shadow-lg: 0 28px 72px rgba(20, 52, 103, .18);
  --pf-radius-sm: 14px;
  --pf-radius-md: 22px;
  --pf-radius-lg: 30px;
  --pf-ease-out: cubic-bezier(.23, 1, .32, 1);
  --pf-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --pf-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --pf-duration-fast: 160ms;
  --pf-duration-ui: 240ms;
  --pf-duration-panel: 380ms;
  --pf-section-title: clamp(36px, 4.4vw, 64px);
  --pf-page-title: clamp(42px, 5vw, 72px);
  --blue: var(--pf-blue);
  --deep: var(--pf-ink);
  --muted: var(--pf-secondary);
  --pale: var(--pf-canvas);
  --glass: var(--pf-glass);
  color: var(--pf-ink);
  background: var(--pf-canvas);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

html { color-scheme: light; }
body {
  color: var(--pf-text);
  background: var(--pf-canvas);
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pf-footer, .pf-tools { font-family: inherit; }
.main-nav a { font-size: clamp(15px, 1.15vw, 20px); }
.guide-index-heading h1, .guide-hero h1, .bird-page-content h1 {
  font-size: var(--pf-page-title); font-weight: 650; letter-spacing: -.04em; line-height: 1.08;
}
.guide-index-heading, .guide-hero, .guide-index, .guide-more h2, .guide-more > div { padding-inline: clamp(20px, 4vw, 56px); }
.guide-index-heading p, .guide-hero p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; }
.guide-article { max-width: 880px; }
.guide-tile span { gap: 12px; align-items: center; line-height: 1.3; }
.guide-tile morph-icon { flex: none; }
.pf-newsletter-form:focus-within { outline: 3px solid #b9d8ff; outline-offset: 4px; }
.pf-language-search:focus-within, .pf-chat-form:focus-within { outline: 2px solid var(--pf-blue); outline-offset: 2px; }
.search-field:focus-within { outline: 2px solid var(--pf-blue); outline-offset: -2px; }
.search-field input:focus-visible { outline: 0; }
.pf-tool-panel-copy span, .pf-language-list small, .pf-tool-status,
.pf-chat-chips button { font-size: 11px; color: var(--pf-secondary); }
.pf-language-list strong, .pf-chat-row p, .pf-chat-bubble { font-size: 12px; line-height: 1.5; }
.pf-chat-time { font-size: 10px; color: var(--pf-secondary); }
.pf-language-search input, .pf-chat-form input { font-size: 12px; }
.pf-tools .pf-tool-panel { background: #f8fbff; }
.pf-tool-status { height: auto; min-height: 18px; }
@media (max-width: 700px) {
  .search-field input, .auth-form input, .catalog-search input,
  .pf-language-search input, .pf-chat-form input { font-size: 16px; }
  .site-header { grid-template-columns: minmax(0,1fr) auto; }
  .site-header .brand { width:min(165px,100%); min-width:0; }
  body { min-width:0; }
}
@media(max-width:1050px) { .section-heading { flex-wrap:wrap; } }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--pf-ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(46, 126, 255, .78);
  outline-offset: 3px;
}
:where(button, a, [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(.primary-link, .primary-button, .add-button, .icon-button, .close-button,
  .favorite, .quantity button, .remove, .catalog-view-button, .detail-size,
  .detail-photo-arrow, .detail-expand, .guide-open, .showcase-card-link,
  .showcase-control, .bird-card-explore, .bird-detail-back, .bird-detail-product) {
  transition-timing-function: var(--pf-ease-out);
}
:where(.primary-link, .primary-button, .add-button, .icon-button, .close-button,
  .favorite, .quantity button, .remove, .catalog-view-button, .detail-size,
  .detail-photo-arrow, .detail-expand, .guide-open, .showcase-card-link,
  .showcase-control, .bird-card-explore, .bird-detail-back, .bird-detail-product):active {
  transform: scale(.97);
  transition-duration: var(--pf-duration-fast);
}

.glass,
.benefits,
.panel,
.mega-menu,
.pf-tool-panel {
  border: 1px solid rgba(255, 255, 255, .72);
  background-color: var(--pf-glass);
  box-shadow: var(--pf-shadow-md), inset 0 1px 0 var(--pf-highlight);
  backdrop-filter: blur(28px) saturate(1.24);
  -webkit-backdrop-filter: blur(28px) saturate(1.24);
}
.mega-menu-content::after { display: none; }
.product-card,
.guide-tile,
.detail-related-card {
  border: 1px solid rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.product-card { border-radius: var(--pf-radius-md); }
.product-photo { border-radius: calc(var(--pf-radius-md) - 6px); }

.section-heading h2,
.catalog h1,
.catalog-hero-copy h1,
.guide-index-heading h1,
.bird-page-content h1 {
  letter-spacing: -.045em;
  line-height: 1.02;
}
.section-heading p,
.catalog-top p,
.product-info p,
.detail-subtitle,
.guide-index-heading p,
.guide-hero p,
.bird-page-content > p:not(.eyebrow) {
  color: var(--pf-secondary);
  line-height: 1.55;
}
.eyebrow { letter-spacing: .2em; }
.product-info h3 { line-height: 1.25; letter-spacing: -.015em; }
.product-info strong { letter-spacing: -.015em; }

.site-header { color: var(--pf-ink); }
.main-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  position: relative;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: color var(--pf-duration-fast) ease;
}
.main-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  margin: 0;
}
.icon-button,
.close-button { min-width: 44px; min-height: 44px; }
.icon-button {
  transition: background-color var(--pf-duration-fast) ease, transform var(--pf-duration-fast) var(--pf-ease-out);
}

.product-card {
  transition: transform var(--pf-duration-ui) var(--pf-ease-out), box-shadow var(--pf-duration-ui) ease, border-color var(--pf-duration-ui) ease;
}
.favorite { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.add-button { min-height: 44px; }
.swatch { min-width: 28px; min-height: 28px; }
.catalog-grid .add-button { min-height: 48px; }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 148, 226, .32);
    box-shadow: 0 20px 52px rgba(24, 61, 116, .14), inset 0 1px 0 #fff;
  }
  .icon-button:hover { transform: translateY(-1px); }
}

.mega-menu {
  border-radius: var(--pf-radius-lg);
  background:
    radial-gradient(circle at 18% 5%, #fff, #f8fbff 45%, #eef6fd 74%),
    linear-gradient(145deg, #f7fbff, #e0effc);
  box-shadow: var(--pf-shadow-lg), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(-8px) scale(.985);
  transition: opacity 180ms ease, transform 240ms var(--pf-ease-out), visibility 0s linear 240ms;
}
.mega-menu[aria-hidden="false"] { transition-delay: 0s; }
.mega-feature img { transition-duration: 320ms; transition-timing-function: var(--pf-ease-out); }
.mega-list a {
  min-height: 48px;
  animation-duration: 260ms;
  animation-timing-function: var(--pf-ease-out);
}

.overlay.drawer-mode .scrim { transition: opacity 300ms ease; }
.overlay.drawer-mode .panel {
  box-shadow: -18px 0 64px rgba(21, 55, 108, .2);
  transition: transform var(--pf-duration-panel) var(--pf-ease-drawer), opacity 260ms ease;
}
.overlay.drawer-mode [data-drawer-reveal] {
  filter: blur(6px);
  transform: translate3d(24px, 0, 0);
  transition: opacity 300ms var(--pf-ease-out), filter 320ms var(--pf-ease-out), transform 320ms var(--pf-ease-out);
}
.overlay.drawer-mode.is-open [data-drawer-reveal] {
  transition-delay: calc(70ms + var(--drawer-reveal-index) * 42ms);
}
.panel-header h2 { letter-spacing: -.035em; line-height: 1.05; }
.cart-item { min-height: 108px; }
.quantity button { min-width: 36px; min-height: 36px; }
.cart-summary { background: transparent; }
.product-detail-sheet {
  box-shadow: 0 -22px 72px rgba(13, 42, 84, .24);
  animation-duration: 420ms;
  animation-timing-function: var(--pf-ease-drawer);
}
.product-detail-backdrop { animation-duration: 260ms; }
/* Compact factual introduction shared by bird dialogs and direct bird pages. */
.bird-science { margin-top:20px; color:#173a75; }
.bird-science h4 { margin:0 0 12px; font-size:18px; letter-spacing:-.02em; }
.bird-science dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.bird-science dt { color:#587397; font-size:12px; line-height:1.4; }
.bird-science dd { margin:4px 0 0; font-size:15px; line-height:1.4; font-weight:600; }
.bird-science p { max-width:55ch; margin:12px 0 6px; font-size:15px; line-height:1.55; }
.bird-science a { display:inline-flex; align-items:center; min-height:44px; margin-right:12px; color:#2155d4; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:400px) { .bird-science dl { grid-template-columns:1fr; } }
.product-detail-close {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: rgba(248, 252, 255, .88);
  box-shadow: var(--pf-shadow-sm), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

.showcase-card,
.guide-card,
.bird-card-face {
  border-color: rgba(255,255,255,.72);
  box-shadow: var(--pf-shadow-md), inset 0 1px 0 rgba(255,255,255,.88);
}
.guide-card::after { display: none; }
.guide-card { transition-timing-function: var(--pf-ease-in-out), ease, ease; }
.showcase-card > img { transition-duration: 320ms; transition-timing-function: var(--pf-ease-out); }
.showcase-control { width: 52px; height: 52px; }
.showcase-card-link,
.guide-open { box-shadow: var(--pf-shadow-sm); }
.bird-card-face { transition-duration: 220ms; }
.bird-card-explore { min-width: 44px; min-height: 44px; }

.arrow-motion-target { transition: color 240ms ease, box-shadow 280ms ease; }
@media (hover: hover) and (pointer: fine) {
  .arrow-motion-target:is(:hover, :focus-visible)::before {
    animation-duration: 480ms;
    animation-timing-function: var(--pf-ease-out);
  }
  .arrow-motion-target.is-arrow-leaving { animation-duration: 520ms; }
  .arrow-motion-target.is-arrow-leaving::before {
    animation-duration: 520ms;
    animation-timing-function: var(--pf-ease-in-out);
  }
}

.pf-footer { background: var(--pf-blue); }
.pf-float-word {
  transform: translateY(24%) rotateX(-18deg);
  transition: opacity 380ms ease, transform 520ms var(--pf-ease-out);
  transition-delay: calc(min(var(--pf-word), 12) * 42ms);
}
.pf-footer-nav nav a { min-height: 36px; display: inline-flex; align-items: center; gap: .25em; }
.pf-newsletter-form { min-height: 52px; }
.pf-newsletter-form label { min-width: 0; }
.pf-newsletter-form button { flex: none; }
@media (min-width: 901px) {
  .pf-newsletter { grid-column: 2 / span 2; width: min(560px, 100%); }
}
.pf-socials a { min-width: 44px; min-height: 44px; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .benefits, .panel, .mega-menu, .pf-tool-panel,
  .guide-card, .bird-card-face {
    background: #f8fbff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pf-footer-marquee > div { transform: none !important; }
  .pf-float-word { opacity: 1; transform: none; }
}

/* Keep transformed controls anchored while applying tactile press feedback. */
.detail-photo-arrow:active { transform: translateY(-50%) scale(.94); }
.bird-card-explore {
  min-width: 31px;
  min-height: 31px;
  height: 31px;
}
.bird-card-explore::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
}

@media (max-width: 700px) {
  :root { --pf-radius-md: 18px; --pf-radius-lg: 24px; }
  .site-header { gap: 8px; }
  .main-nav a { min-height: 40px; }
  .favorite { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .add-button { min-height: 44px; font-size: 12px; }
  .product-grid, .catalog .product-grid { gap: 12px; }
  .product-info { padding: 11px 9px 10px; }
  .panel { border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0; }
}

.catalog-grid .product-photo { border-radius: 0; background-size: var(--photo-size,cover); }
.catalog-group { margin-top: 40px; scroll-margin-top: 140px; }
.catalog-group > .catalog-title { margin-bottom: 24px; flex-wrap: wrap; }
@media(max-width:700px) { .catalog-group { scroll-margin-top: 155px; } }

/* Shared inset scroll affordances: no native arrows against rounded surfaces. */
:is(.bird-detail-scroll,.bird-detail-panel,.pf-select-options,.product-detail-sheet,.cart-list,.catalog-sidebar-scroll,.pf-language-list,.pf-chat-log) {
 scrollbar-width:thin; scrollbar-color:#a5bdd9 transparent;
}
:is(.bird-detail-scroll,.bird-detail-panel,.pf-select-options,.product-detail-sheet,.cart-list,.catalog-sidebar-scroll,.pf-language-list,.pf-chat-log)::-webkit-scrollbar { width:6px; height:6px; }
:is(.bird-detail-scroll,.bird-detail-panel,.pf-select-options,.product-detail-sheet,.cart-list,.catalog-sidebar-scroll,.pf-language-list,.pf-chat-log)::-webkit-scrollbar-track { background:transparent; margin-block:16px; }
:is(.bird-detail-scroll,.bird-detail-panel,.pf-select-options,.product-detail-sheet,.cart-list,.catalog-sidebar-scroll,.pf-language-list,.pf-chat-log)::-webkit-scrollbar-thumb { border:0; border-radius:999px; background:#a5bdd9; }
:is(.bird-detail-scroll,.bird-detail-panel,.pf-select-options,.product-detail-sheet,.cart-list,.catalog-sidebar-scroll,.pf-language-list,.pf-chat-log)::-webkit-scrollbar-button { display:none!important; width:0!important; height:0!important; }
.pf-select { position:relative; min-width:0; font-size:14px; font-weight:500; }
.pf-select summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:46px; padding:11px 20px; border:1px solid var(--pf-separator); border-radius:14px; background:var(--pf-glass-strong); color:var(--pf-text); list-style:none; cursor:pointer; }
.pf-select summary::-webkit-details-marker { display:none; }
.pf-select summary > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-select summary morph-icon { width:16px; height:16px; flex:none; color:var(--pf-secondary); }
.pf-select summary[aria-disabled=true] { opacity:.5; cursor:default; }
.pf-select summary:focus-visible { outline:2px solid var(--pf-blue); outline-offset:3px; }
.pf-select-menu { position:absolute; z-index:35; left:0; right:0; top:calc(100% + 8px); padding:6px; border:1px solid var(--pf-highlight); border-radius:18px; background:rgba(248,252,255,.94); box-shadow:var(--pf-shadow-md),inset 0 1px 0 #fff; backdrop-filter:blur(22px) saturate(1.12); -webkit-backdrop-filter:blur(22px) saturate(1.12); }
.pf-select.is-above .pf-select-menu { top:auto; bottom:calc(100% + 8px); }
.pf-select-options { max-height:280px; padding-block:8px; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:12px; mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent); }
.pf-select .pf-select-options button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; margin:0; padding:9px 12px; border:0; border-radius:11px; background:transparent; color:var(--pf-text); text-align:left; font:inherit; line-height:1.4; }
.pf-select-options button::after { content:'✓'; visibility:hidden; color:var(--pf-blue); flex:none; }
.pf-select-options button[aria-selected=true] { background:#e5eeff; color:var(--pf-blue); }
.pf-select-options button[aria-selected=true]::after { visibility:visible; }
.pf-select-options button:is(:hover,:focus-visible) { background:#edf3ff; outline:none; }
.pf-select:not(.is-keyboard)[open] .pf-select-menu { animation:pf-menu-in 160ms var(--pf-ease-out) both; }
.catalog-sort-menu { background:rgba(248,252,255,.94); border-color:var(--pf-highlight); box-shadow:var(--pf-shadow-md),inset 0 1px 0 #fff; }
.catalog-sort summary { padding-right:20px; }
@keyframes pf-menu-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-transparency:reduce) { .pf-select-menu,.detail-image-viewer { background:#f7fbff; backdrop-filter:none; -webkit-backdrop-filter:none; } .detail-image-viewer::backdrop { background:#e6eef9; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(forced-colors:active) { .pf-select-options { mask-image:none; } .pf-select-menu { background:Canvas; border:1px solid CanvasText; } .pf-select-options button[aria-selected=true] { background:Highlight; color:HighlightText; } }
/* Shared five-destination navigation scale, including the community route. */
:root { --pf-nav-font:clamp(13px,1.08vw,18px); --pf-nav-gap:clamp(12px,1.35vw,24px); --pf-header-logo:clamp(188px,18vw,280px); }
.site-header .brand { width:var(--pf-header-logo); }
.site-header .main-nav { gap:var(--pf-nav-gap); }
.site-header .main-nav a { font-size:var(--pf-nav-font); font-weight:650; }
body[data-page="bird"] .bird-page { padding-top:127px; min-height:100vh; }
@media(max-width:700px) {
 :root { --pf-header-logo:clamp(128px,35vw,165px); }
 body[data-page="bird"] .bird-page { padding-top:166px; }
}
@media(max-width:600px) {
 :root { --pf-nav-font:clamp(11px,3.3vw,14px); --pf-nav-gap:clamp(6px,2vw,12px); }
 .site-header .main-nav { justify-content:space-between; }
 .site-header .main-nav a { min-height:44px; }
}

/* Keep native wheel, touch and keyboard scrolling without visible progress tracks. */
html { scrollbar-gutter:auto; }
html,body,body * { scrollbar-width:none!important; -ms-overflow-style:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar { display:none!important; width:0!important; height:0!important; }

/* Translation must not turn labels into icons or change the shared row structure. */
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:clamp(500px,36vw,600px);max-width:100%;gap:14px}
.benefits>div{min-width:0;align-content:start}
.benefit-label{display:block;width:100%;min-width:0;text-align:center;white-space:nowrap;line-height:1.45}
.shop-section .section-heading>div:first-child{flex:1;min-width:0}
.shop-section .section-heading h2{display:flex;align-items:center;gap:18px;min-width:0}
.section-title-text{display:block;min-width:0;white-space:nowrap}
.shop-section .section-heading h2 small{flex:none;letter-spacing:0;line-height:1.2}
.shop-section .section-heading h3{white-space:nowrap}
.site-header .main-nav{min-width:0}
.site-header .main-nav a{min-width:0;flex-shrink:1}
.add-button>[data-pf-source]{font-size:inherit;line-height:inherit}
@media(max-width:1050px){.shop-section .section-heading{display:block}.shop-section .benefits{margin-top:20px}}
@media(max-width:700px){.shop-section .benefits{width:100%}.shop-section .section-heading h2{gap:12px}}

/* Equal text slots keep product rows aligned while long translations wrap. */
.product-grid:not(.is-list) .product-info>p{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;height:calc(2 * 1.55 * 14px);line-height:1.55}
.product-card .swatches{min-width:0;gap:clamp(4px,.5vw,8px)}
.product-card .swatches>span{min-width:0;white-space:nowrap}
.guide-copy h3{overflow-wrap:anywhere}
@media(max-width:700px){.product-card .swatch{width:20px;height:20px;min-width:20px;flex:0 0 20px}.product-card .swatches{gap:4px}}

.catalog-filter>span{min-width:0;white-space:nowrap}
.product-card .product-info [data-pf-source]{font-size:inherit;line-height:inherit;letter-spacing:inherit}
.product-card .swatches [data-pf-source]{margin:0}
@media(max-width:700px){.collection-layout .product-card .swatch{width:20px;height:20px;min-width:20px;min-height:20px;flex:0 0 20px}.collection-layout .product-card .swatches{gap:4px;flex-wrap:nowrap}}

.product-grid:not(.is-list) .product-info h3{height:2.6em;min-height:2.6em;line-height:1.3;white-space:normal}
.product-grid:not(.is-list) .product-info h3 button{height:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.care-card h3,.care-stage-grid h3,.care-reading h2,.care-step h3{overflow-wrap:anywhere}
.community-follow .social-follow-label{width:100%;min-width:0;white-space:nowrap}
.social-follow-label [data-pf-source]{font-size:inherit;line-height:inherit}