/* File: assets/css/components/offcanvas.css */
/* Drawer menu: slides down from under header + nicer animations */

.site-burger{
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:rgba(255,255,255,.06);
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.site-burger:active{ transform:scale(.985); }
.site-burger:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.site-burger__label{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--dag-muted);
}

.site-burger__icon{
  position:relative;
  width:18px;
  height:2px;
  background:rgba(229,231,235,.92);
  border-radius:2px;
}
.site-burger__icon::before,
.site-burger__icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:rgba(229,231,235,.92);
  border-radius:2px;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), top .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.site-burger__icon::before{ top:-6px; }
.site-burger__icon::after{ top:6px; }

.site-burger[aria-expanded="true"] .site-burger__icon{ background:transparent; }
.site-burger[aria-expanded="true"] .site-burger__icon::before{ top:0; transform:rotate(45deg); }
.site-burger[aria-expanded="true"] .site-burger__icon::after{ top:0; transform:rotate(-45deg); }

/* Root */
.site-offcanvas{
  position:fixed;
  inset:0;
  z-index:100000;
}
.site-offcanvas[hidden]{ display:none !important; }

/* Backdrop with gradient */
.site-offcanvas__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 380px at 70% 0%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(900px 360px at 15% 0%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.66));
  opacity:0;
  transition:opacity .22s ease;
}

/* Panel dropdown under header */
.site-offcanvas__panel{
  position:absolute;
  left:0;
  right:0;
  top: var(--dag-header-h, 74px);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(96,165,250,.20), transparent 58%),
    linear-gradient(180deg, rgba(17,26,43,.98), rgba(10,16,28,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  padding:16px 0 18px;

  transform:translateY(-18px) scale(.985);
  opacity:0;
  filter:blur(0px);
  pointer-events:none;
  transition:
    transform .30s cubic-bezier(.16,.9,.18,1),
    opacity .22s ease;
  will-change:transform, opacity;

  max-height: min(72vh, 560px);
  overflow:auto;
}

.site-offcanvas__panel::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(96,165,250,.35), transparent);
  opacity:.9;
  pointer-events:none;
}

/* Open state */
html.is-nav-open,
body.is-nav-open{ overflow:hidden; }

html.is-nav-open .site-offcanvas__backdrop{ opacity:1; }
html.is-nav-open .site-offcanvas__panel{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Top row */
.site-offcanvas__top{
  width:100%;
  max-width:var(--dag-container);
  padding-inline:var(--dag-gutter);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.site-offcanvas__title{
  font-family:var(--dag-font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.site-offcanvas__close{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  cursor:pointer;
}

.site-offcanvas__close span{
  font-size:26px;
  line-height:1;
  transform:translateY(-1px);
  display:block;
}

/* Menu */
.site-offcanvas__nav{
  width:100%;
  max-width:var(--dag-container);
  padding-inline:var(--dag-gutter);
  margin-inline:auto;
}

.site-offcanvas__menu{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

/* Stagger animation for items */
.site-offcanvas__menu > li{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .30s cubic-bezier(.16,.9,.18,1);
}

html.is-nav-open .site-offcanvas__menu > li{
  opacity:1;
  transform:translateY(0);
}

/* simple stagger delays */
html.is-nav-open .site-offcanvas__menu > li:nth-child(1){transition-delay:40ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(2){transition-delay:70ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(3){transition-delay:100ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(4){transition-delay:130ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(5){transition-delay:160ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(6){transition-delay:190ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(7){transition-delay:220ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(8){transition-delay:250ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(9){transition-delay:280ms}
html.is-nav-open .site-offcanvas__menu > li:nth-child(n+10){transition-delay:300ms}

.site-offcanvas__menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  text-decoration:none;
  color:var(--dag-text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.site-offcanvas__menu a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background:rgba(96,165,250,.14);
  border-color:rgba(96,165,250,.22);
}

/* Responsive */
@media (max-width: 980px){
  .site-offcanvas__menu{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .site-offcanvas__panel{ max-height: min(78vh, 640px); }
  .site-offcanvas__menu{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-offcanvas__backdrop,
  .site-offcanvas__panel,
  .site-burger__icon::before,
  .site-burger__icon::after,
  .site-offcanvas__menu > li,
  .site-offcanvas__menu a{
    transition:none !important;
  }
  .site-offcanvas__menu > li{opacity:1 !important; transform:none !important;}
}

.site-burger{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
}

.site-burger:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.18) !important;
}

.site-burger__label{
  color:#f8fafc !important;
}

.site-burger__icon,
.site-burger__icon::before,
.site-burger__icon::after{
  background:rgba(248,250,252,.92) !important;
}

.site-offcanvas__backdrop{
  background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.66)) !important;
}

.site-offcanvas__panel{
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(225,29,72,.18), transparent 58%),
    radial-gradient(900px 360px at 85% 0%, rgba(15,118,110,.14), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.98)) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.42) !important;
}

.site-offcanvas__panel::after{
  background:linear-gradient(90deg, transparent, rgba(225,29,72,.35), transparent) !important;
}

.site-offcanvas__title,
.site-offcanvas__close,
.site-offcanvas__close span{
  color:#f8fafc !important;
}

.site-offcanvas__menu a{
  color:#f8fafc !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
}

.site-offcanvas__menu a:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#ffffff !important;
}

.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background:rgba(225,29,72,.18) !important;
  border-color:rgba(225,29,72,.28) !important;
  color:#ffffff !important;
}

.site-offcanvas__panel{
  --site-offcanvas-palette-v13: 1;
  background: #0f172a !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.42) !important;
}
.site-offcanvas__backdrop{
  background: rgba(15,23,42,.34) !important;
}
.site-offcanvas__title,
.site-offcanvas__close,
.site-offcanvas__close span,
.site-offcanvas__menu a,
.site-offcanvas__contact-title,
.site-offcanvas .site-pill__k,
.site-offcanvas .site-pill__v,
.site-burger,
.site-burger__label{
  color: #f8fafc !important;
}
.site-burger{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.site-burger:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.site-burger__icon,
.site-burger__icon::before,
.site-burger__icon::after{
  background: #ffffff !important;
}
.site-offcanvas__menu a{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.site-offcanvas__menu a:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background: rgba(225,29,72,.18) !important;
  border-color: rgba(225,29,72,.28) !important;
  color: #ffffff !important;
}

/* SITE OFFCANVAS PALETTE V17 */
:root{
  --site-offcanvas-palette-v17: 1;
}
.site-offcanvas__backdrop{
  background: rgba(15,23,42,.34) !important;
}
.site-offcanvas__panel{
  border-top: 1px solid rgba(15,23,42,.08) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  background:
    radial-gradient(1100px 380px at 10% 0%, rgba(225,29,72,.10), transparent 60%),
    radial-gradient(900px 360px at 100% 0%, rgba(15,118,110,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.98)) !important;
  box-shadow: 0 28px 90px rgba(15,23,42,.18) !important;
}
.site-offcanvas__panel::after{
  background: linear-gradient(90deg, transparent, rgba(225,29,72,.18), transparent) !important;
}
.site-offcanvas__title,
.site-offcanvas__close,
.site-offcanvas__close span,
.site-burger__label{
  color: var(--dag-text) !important;
}
.site-burger,
.site-offcanvas__close{
  border-color: rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.88) !important;
}
.site-burger:hover,
.site-offcanvas__close:hover{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(15,23,42,.16) !important;
}
.site-burger__icon,
.site-burger__icon::before,
.site-burger__icon::after{
  background: var(--dag-text) !important;
}
.site-offcanvas__menu a{
  color: var(--dag-text) !important;
  border-color: rgba(15,23,42,.08) !important;
  background: rgba(15,23,42,.03) !important;
}
.site-offcanvas__menu a:hover{
  background: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.12) !important;
}
.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background: rgba(225,29,72,.10) !important;
  border-color: rgba(225,29,72,.22) !important;
  color: var(--dag-primary) !important;
}
.site-offcanvas .site-pill{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(15,23,42,.10) !important;
  color: var(--dag-text) !important;
}
.site-offcanvas .site-pill__k{
  color: var(--dag-muted) !important;
}
.site-offcanvas .site-pill__v,
.site-offcanvas .site-pill__v a{
  color: var(--dag-text) !important;
}

/* SITE OFFCANVAS CONFLICT LOCK V20 */
:root{
  --site-offcanvas-conflict-lock-v20: 1;
}
.site-burger:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.site-burger__icon,
.site-burger__icon::before,
.site-burger__icon::after{
  background: #ffffff !important;
}
.site-offcanvas__backdrop{
  background: rgba(2,6,23,.58) !important;
}
.site-offcanvas__panel{
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,26,43,.98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.42) !important;
}
.site-offcanvas__panel::after{
  background: linear-gradient(90deg, transparent, rgba(225,29,72,.25), transparent) !important;
}
.site-offcanvas__menu a{
  color: #f8fafc !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.site-offcanvas__menu a:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
}

.site-burger{
  min-height:46px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  border:1px solid var(--crwda-header-border,rgba(255,255,255,.12)) !important;
  background:var(--crwda-header-surface,rgba(255,255,255,.08)) !important;
  color:var(--crwda-header-text,#ffffff) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

.site-burger:hover{
  border-color:var(--crwda-header-accent,#e11d48) !important;
  color:var(--crwda-header-accent,#e11d48) !important;
}

.site-offcanvas__panel{
  border-left:1px solid var(--crwda-header-border,rgba(255,255,255,.12)) !important;
  background:linear-gradient(180deg,var(--crwda-header-bg,#0f172a),var(--crwda-header-bg-2,#1e293b)) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.42) !important;
}

.site-offcanvas__title{
  color:var(--crwda-header-text,#ffffff) !important;
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
}

.site-offcanvas__close{
  min-height:46px !important;
  min-width:46px !important;
  border-radius:14px !important;
  border:1px solid var(--crwda-header-border,rgba(255,255,255,.12)) !important;
  background:var(--crwda-header-surface,rgba(255,255,255,.08)) !important;
  color:var(--crwda-header-text,#ffffff) !important;
}

.site-offcanvas__menu a{
  min-height:56px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  border:1px solid var(--crwda-header-border,rgba(255,255,255,.12)) !important;
  background:var(--crwda-header-surface,rgba(255,255,255,.08)) !important;
  color:var(--crwda-header-text,#ffffff) !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  box-shadow:0 10px 24px rgba(15,23,42,.12) !important;
}

.site-offcanvas__menu a:hover{
  border-color:var(--crwda-header-accent,#e11d48) !important;
  color:var(--crwda-header-accent,#e11d48) !important;
  background:var(--crwda-header-surface,rgba(255,255,255,.12)) !important;
}

.site-offcanvas__menu .current-menu-item > a,
.site-offcanvas__menu .current_page_item > a{
  background:var(--crwda-header-accent,#e11d48) !important;
  border-color:var(--crwda-header-accent,#e11d48) !important;
  color:#ffffff !important;
}

.site-offcanvas__menu .menu-item-crwda-sold > a{
  white-space:nowrap !important;
}

:root{
  --crwda-offcanvas-switch-final-v1:1;
}

.site-offcanvas__panel{
  overflow-x:hidden !important;
}

.site-offcanvas__menu .menu-item-crwda-sold{
  display:none !important;
}

.site-offcanvas__inventory-switch{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:14px 0 18px !important;
}

.site-offcanvas__inventory-switch .dag-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:48px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.site-offcanvas__menu a{
  word-break:break-word !important;
}

@media (max-width: 575px){
  .site-offcanvas__inventory-switch{
    gap:10px !important;
    margin:12px 0 16px !important;
  }

  .site-offcanvas__inventory-switch .dag-btn{
    min-height:44px !important;
    font-size:13px !important;
  }
}