/* Design Motion Principles: subtle feedback, quick repeated actions. */
html:root { --motion-quick:140ms; --motion-release:220ms; --motion-ease:cubic-bezier(.2,0,0,1); }
html:root body :is(button:not(#category-directory),.brand-contact,.contact-option,.directory-item,.footer-socials>a) {
 -webkit-tap-highlight-color:transparent;
 touch-action:manipulation;
}
@media(prefers-reduced-motion:no-preference){
 html:root body :is(button:not(#category-directory),.brand-contact,.contact-option,.directory-item,.footer-socials>a) {
  transition:transform var(--motion-release) var(--motion-ease),opacity var(--motion-quick) var(--motion-ease),background-color var(--motion-quick) var(--motion-ease),color var(--motion-quick) var(--motion-ease);
  transform:translateY(0) scale(1);
  transform-origin:center;
 }
 html:root body :is(button:not(#category-directory),.brand-contact,.contact-option,.directory-item,.footer-socials>a):not(:disabled):not([aria-disabled=true]):active:not(:focus-visible) {
  transform:scale(.96);
  transition-duration:100ms;
 }
 /* Long panels compress less than a small round control. */
 html:root body :is(.brand-contact,.contact-option,.directory-item,.size-filter-button):active:not(:focus-visible) { transform:scale(.985); }
 html:root body .quantity button { transition-duration:140ms; }
 html:root body #dialog[open] { animation:polished-dialog-in 220ms var(--motion-ease) both; }
 html:root body #dialog[open]::backdrop { animation:polished-backdrop-in 160ms var(--motion-ease) both; }
 html:root body #dialog .category-directory,html:root body #dialog .contact-checkout { animation:none; }
 html:root body .contact-option::before { transition:transform 320ms var(--motion-ease); }
 html:root body .catalog-switch:before,html:root body #navigation.bottom-nav::after { transition:transform 340ms cubic-bezier(.22,.8,.25,1),opacity 160ms var(--motion-ease); }
 @keyframes polished-dialog-in { from { opacity:0;transform:translateY(6px) scale(.99); } to { opacity:1;transform:translateY(0) scale(1); } }
 @keyframes polished-backdrop-in { from { opacity:0; } to { opacity:1; } }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:root body :is(.button,.secondary-button,.brand-contact,.contact-option):not(:disabled):not([aria-disabled=true]):hover:not(:active) { transform:translateY(-1px); }
}
@media(hover:none){
 html:root body .contact-option:hover::before { transform:translateX(-110%); }
}
html:root body button:disabled,html:root body [aria-disabled=true] { transform:none!important;cursor:default; }
@media(prefers-reduced-motion:reduce){
 html:root body :is(button:not(#category-directory),.brand-contact,.contact-option,.directory-item,.footer-socials>a) { transition:opacity 100ms linear,color 100ms linear;transform:none!important; }
 html:root body #dialog[open],html:root body #dialog[open]::backdrop { animation:none; }
 html:root body .contact-option::before { transition:none; }
}

/* Telegram-like sliding selection remains the main feedback for segmented tabs. */
@media(prefers-reduced-motion:no-preference){
 html:root body :is(.nav-item,.catalog-switch>a,.catalog-switch>button,.mode-switch>a) {
  transform:none;transition:color 160ms cubic-bezier(.2,0,0,1),opacity 160ms cubic-bezier(.2,0,0,1);
 }
 html:root body :is(.nav-item,.catalog-switch>a,.catalog-switch>button,.mode-switch>a):active { transform:none; }
 html:root body .nav-item .icon { transition:scale 180ms cubic-bezier(.2,0,0,1); }
 html:root body .nav-item:active .icon { scale:.92; }
 html:root body .mode-switch::after,html:root body .admin-tabs::before { transition:transform 340ms cubic-bezier(.22,.8,.25,1); }
}
/* Translucent Telegram-inspired segmented controls; content remains visible through glass. */
html:root { --liquid-surface:linear-gradient(125deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 55%,rgba(191,207,228,.12)); }
html:root[data-theme=dark] { --liquid-surface:linear-gradient(125deg,rgba(173,187,222,.14),rgba(102,122,168,.035) 55%,rgba(42,53,87,.10)); }
html:root body #navigation.bottom-nav {
 background:linear-gradient(125deg,rgba(255,255,255,.37),rgba(232,240,250,.16))!important;
 backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.16),0 6px 24px rgba(7,13,30,.14);
}
html:root[data-theme=dark] body #navigation.bottom-nav { background:linear-gradient(125deg,rgba(91,103,141,.23),rgba(28,35,59,.32))!important; }
html:root body #navigation.bottom-nav::after,html:root body .catalog-switch::before {
 background:linear-gradient(125deg,rgba(255,255,255,.35),rgba(255,255,255,.12));
 border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 8px rgba(0,0,0,.08);box-sizing:border-box;
}
html:root[data-theme=dark] body #navigation.bottom-nav::after,html:root[data-theme=dark] body .catalog-switch::before { background:linear-gradient(125deg,rgba(222,231,255,.21),rgba(201,215,255,.07));border-color:rgba(228,237,255,.2); }
html:root body #navigation,html:root body .catalog-switch,html:root body #navigation a,html:root body .catalog-switch>a,html:root body .catalog-switch>button { touch-action:pan-y;user-select:none;-webkit-user-select:none; }
@media(prefers-reduced-transparency:reduce){html:root body #navigation.bottom-nav { background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none; }}

/* Tap-to-select: one continuous glass capsule, no dragging. */
@media(prefers-reduced-motion:no-preference){
 html:root body #navigation.bottom-nav::after,html:root body .catalog-switch::before {
  transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 180ms cubic-bezier(.2,0,0,1);
 }
}
/* Compact assistance row and a distinct visual invitation to the women's shop. */
html:root body .brand-contacts { align-items:center; }
html:root body .brand-whatsapp { min-height:64px;padding:10px 14px;gap:10px; }
html:root body .brand-whatsapp strong { font-size:12px; }
html:root body .brand-whatsapp small { margin-top:2px;font-size:11px; }
html:root body .brand-womens { position:relative;display:grid;grid-template-columns:42% minmax(0,1fr);gap:0;padding:0;min-height:148px;overflow:hidden;border-radius:24px; }
html:root body .brand-womens-photo { display:block;width:100%;height:156px;border-radius:0;object-fit:cover;object-position:50% 28%;outline:none; }
html:root body .brand-womens .brand-contact-copy { padding:14px 12px 14px 16px; }
html:root body .brand-womens .brand-contact-eyebrow { font-size:8px;letter-spacing:.09em;margin-bottom:8px; }
html:root body .brand-womens strong { font-size:20px;line-height:1.12;font-weight:500;letter-spacing:-.025em; }
html:root body .brand-womens>.icon { display:none; }
html:root body .brand-channel-cta { display:inline-flex;align-items:center;gap:14px;margin-top:12px;padding:8px 12px;border-radius:20px;font-size:11px;line-height:1.2;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
html:root:not([data-theme=dark]) body .brand-channel-cta { background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(35,48,75,.06); }
@media(max-width:360px){html:root body .brand-womens strong{font-size:18px}html:root body .brand-womens .brand-contact-copy{padding-left:12px}html:root body .brand-whatsapp small{font-size:10px}}

/* Mobile: keep the first products above the floating navigation. */
@media(max-width:700px){
 html:root body .site-header{min-height:72px;padding-top:6px;padding-bottom:6px}
 html:root body .brand-contacts{gap:8px;margin-bottom:4px}
 html:root body .brand-whatsapp{min-height:56px;padding:8px 14px}
 html:root body .brand-womens{min-height:112px;grid-template-columns:34% minmax(0,1fr)}
 html:root body .brand-womens-photo{height:112px;object-position:50% 0%}
 html:root body .brand-womens .brand-contact-copy{padding:10px 14px}
 html:root body .brand-womens .brand-contact-eyebrow{margin-bottom:5px}
 html:root body .brand-womens strong{font-size:18px;line-height:1.12}
 html:root body .brand-channel-cta{margin-top:7px;padding:6px 10px}
 html:root body .catalog-layout .catalog-intro{padding:14px 0 6px}
 html:root body .catalog-layout .product-photo{aspect-ratio:4/5}
}

/* Keep glass contact surfaces stationary: moving backdrop layers can leave edge artifacts. */
html:root body .contact-option::before{content:none}
html:root body .contact-option{transform:none;transition:background-color 140ms ease-out,border-color 140ms ease-out}
html:root body .contact-option:hover,html:root body .contact-option:active:not(:focus-visible){transform:none}
@media(hover:hover) and (pointer:fine){html:root body .contact-option:hover{background-color:rgba(150,166,199,.10)}}
html:root body .contact-option:active{background-color:rgba(150,166,199,.16)}