/* Popup timing adapted from yui540/css-animations, 2026-04-17/tips-1.html.
 * Copyright (c) 2026 yui540, MIT. Full license: ../licenses/yui540-css-animations-MIT.txt
 * Other effects and site styling below are original implementations.
 */
.coway-logo { display: block; width: 128px; height: auto; }
.brand-logo { padding: 8px 0; border-radius: 4px; }
.storefront > .site-header { min-height: 76px; }
@media (min-width: 1024px) {
  .storefront > .site-header { grid-template-columns: minmax(110px, 1fr) auto minmax(36px, 1fr); gap: 24px; padding: 12px max(28px, calc((100vw - 1224px) / 2)); min-height: 64px; }
  .site-header .coway-logo { width: 108px; }
  .site-header .brand-logo { padding: 4px 0; }
  .site-header .store-nav { grid-column: 2; width: auto; min-width: 0; height: 38px; gap: 6px; }
  .site-header .store-nav button { flex: 0 0 auto; height: 38px; min-height: 38px; padding: 8px 16px; border-radius: 9px; transition: background .2s, color .2s; }
  .site-header .store-nav button span { font-size: 13px; line-height: 20px; }
  .site-header .store-nav button:hover { background: #f5fafc; }
  .site-header .store-nav button.text-brand-red { color: #0088c5; background: #eff8fc; }
  .site-header .nav-indicator { bottom: -4px; height: 2px; }
  .menu-toggle { grid-column: 3; justify-self: end; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #15364a; border-color: #e4ebf0; }
  .menu-toggle:hover { background: #f4fafc; color: #0088c5; border-color: #c8e4ef; }
  .menu-toggle span { width: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .store-nav { top: 76px; }
  .storefront > .store-main { margin-top: 62px; }
}
@media (max-width: 767px) {
  .storefront > .site-header { min-height: 68px; padding: 14px 18px !important; flex-wrap: nowrap; }
  .coway-logo { width: 110px; }
  .menu-toggle { margin-left: auto; }
}
.menu-toggle { position: relative; overflow: hidden; }
.menu-toggle:hover span:nth-child(2) { width: 12px; }
.menu-toggle span { transition: width .25s, transform .25s, opacity .25s; }
.side-menu[open]:not(.closing) .drawer-links button { animation: menu-item-rise .55s cubic-bezier(.22,.61,.36,1) both; }
.drawer-links button:nth-child(1) { animation-delay: .08s !important; }
.drawer-links button:nth-child(2) { animation-delay: .13s !important; }
.drawer-links button:nth-child(3) { animation-delay: .18s !important; }
.drawer-links button:nth-child(4) { animation-delay: .23s !important; }
.side-menu[open]:not(.closing) .drawer-links button > svg:first-child { animation: coway-popup .6s ease-in-out both; animation-delay: inherit; transform-origin: center; }
@keyframes coway-popup {
  from { opacity: 0; transform: scale(0); }
  20%, to { opacity: 1; }
  50% { transform: scale(1.08, 1.12); }
  75% { transform: scale(.96, .98); }
  to { transform: scale(1); }
}
@keyframes menu-item-rise { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.product-grid img { transition: transform .65s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) { .product-grid > div:hover img { transform: scale(1.035); } }
button.motion-button { position: relative; overflow: hidden; }
.press-wave { position: absolute; border-radius: 50%; background: currentColor; opacity: .12; pointer-events: none; z-index: 4; }
.category-list > div { transition: border-color .25s, transform .25s, box-shadow .25s; }
.category-list > div:hover { box-shadow: 0 5px 20px #0088c508; }
@media (prefers-reduced-motion: reduce) {
  .side-menu[open] .drawer-links button, .side-menu[open] .drawer-links button > svg:first-child { animation: none !important; }
  .product-grid img, .nav-indicator { transition: none !important; }
}