/* 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)}

/* Shared brand geometry: theme changes never move or resize the logo. */
html:root body .brand { padding:0;background:transparent;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
html:root body .brand-emblem,html:root body .brand-wordmark { background:transparent; }
html:root[data-theme=dark] body .brand img { filter:url(#brand-gold-alpha)!important;mix-blend-mode:normal; }
html:root[data-theme-switching] *,html:root[data-theme-switching] *::before,html:root[data-theme-switching] *::after { transition:none!important; }
.team-panel { max-width:680px;margin:0 auto; }
.team-panel>h2 { margin:8px 0 12px; }
.team-panel>.muted { line-height:1.6; }
.team-panel .stack-form { margin:24px 0; }
.team-list { display:grid;gap:12px;margin:24px 0; }
.team-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--liquid-edge);border-radius:18px;background:var(--liquid-surface); }
.team-row strong,.team-row small { display:block;overflow-wrap:anywhere; }
.team-row small { margin-top:6px; }
.team-row button { flex-shrink:0; }
@media(max-width:400px){.team-row{align-items:flex-start;flex-direction:column}.team-row button{align-self:flex-end}}

/* Native, accessible product gallery; no global touch handlers. */
html:root body .detail-photo .photo-rail { display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:inherit; }
.photo-rail::-webkit-scrollbar { display:none; }
html:root body .photo-slide { flex:0 0 100%;width:100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always; }
html:root body .photo-slide img { display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none; }
html:root body .photo-counter { pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--liquid-edge);font-variant-numeric:tabular-nums; }
html:root body .thumbnails { overflow-x:auto;max-width:100%;padding:3px 2px 6px;scrollbar-width:thin; }
html:root body .thumb { flex:0 0 64px;border-radius:12px;overflow:hidden;min-height:44px; }
html:root body .thumb.selected { border-color:var(--shop-accent); }
html:root body .photo-rail:focus-visible { outline:2px solid var(--shop-accent);outline-offset:-3px; }

/* The owner has four sections; the seller has only the product section. */
html:root body .admin-tabs { --admin-count:1;--admin-index:0;grid-template-columns:repeat(var(--admin-count),minmax(0,1fr)); }
html:root body .admin-tabs:has([data-admin-tab=team]) { --admin-count:4; }
html:root body .admin-tabs:has([data-admin-tab=team].active) { --admin-index:1; }
html:root body .admin-tabs:has([data-admin-tab=orders].active) { --admin-index:2; }
html:root body .admin-tabs:has([data-admin-tab=settings].active) { --admin-index:3; }
html:root body .admin-tabs button { padding:10px 4px;font-size:12px;white-space:nowrap; }
@media(max-width:360px){html:root body .admin-tabs{gap:2px;padding:5px}html:root body .admin-tabs button{font-size:10px}html:root body .admin-tabs::before{left:5px;top:5px;bottom:5px;width:calc((100% - 10px - (var(--admin-count) - 1)*2px)/var(--admin-count));transform:translateX(calc(var(--admin-index)*(100% + 2px)))}}
