/* ALOFTAURA — category panel.
   Shared verbatim by both install routes (one-upload widget, and Site
   Settings -> Custom CSS). Never fork it.

   ---- the panel: sized here, but height stays animatable ----------------
   Home.php opens this with jQuery slideDown(), which animates an inline
   height. `height:auto !important` would beat that inline style and the
   panel would just appear. Specificity alone is enough to beat Home.php's
   `.home-category-menu{height:270px}`, so no !important on height.        */
body .home-category-menu{
  width:min(1000px,92vw)!important;   /* Home.php sets width with !important */
  height:auto;
  max-height:84vh;
}
body .home-category-menu .search-form{
  overflow:hidden!important;
  max-height:84vh;
  padding:0;
}

/* Content eases in behind the slide instead of snapping into place.
   Scoped to .home-category-menu on purpose: the widget has to render at full
   opacity anywhere else it is dropped. An unscoped `.aura-cat{opacity:0}`
   leaves the panel permanently invisible on any page that is not the home
   flyout, which is a silent, total failure. */
.home-category-menu .aura-cat{
  opacity:0; transform:translateY(8px);
  transition:opacity .46s var(--aura-ease) .1s, transform .46s var(--aura-ease) .1s;
}
.home-category-menu.is-open .aura-cat{ opacity:1; transform:none; }

/* ---- tokens + shell ---------------------------------------------------- */
.aura-cat{
  --aura-ink:#0C0C0E;
  --aura-line:rgba(12,12,14,.12);
  --aura-skin:#f1f1f4;
  --aura-ease:cubic-bezier(.22,.61,.36,1);
  --rail:58vh;
  --fade:22px;

  display:grid; grid-template-columns:1fr 1px 2fr; gap:0;
  position:relative;
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  color:var(--aura-ink); text-align:left;
  -webkit-font-smoothing:antialiased;
}
.aura-cat *{ box-sizing:border-box; }
.aura-cat-rule{ background:rgba(12,12,14,.14); }

/* The loading hairline. Sits over the top edge of the products column, so a
   category swap reads as "working" without blanking what is already there. */
.aura-cat::after{
  content:''; position:absolute; top:0; left:calc(33.333% + 1px); right:0; height:1px;
  background:var(--aura-ink); transform-origin:0 50%; transform:scaleX(0);
  opacity:0; pointer-events:none;
}
.aura-cat.is-busy::after{ opacity:.85; animation:aura-bar 1.1s var(--aura-ease) infinite; }
@keyframes aura-bar{
  0%{ transform:scaleX(0); transform-origin:0 50%; }
  50%{ transform:scaleX(1); transform-origin:0 50%; }
  50.1%{ transform:scaleX(1); transform-origin:100% 50%; }
  100%{ transform:scaleX(0); transform-origin:100% 50%; }
}

/* ---- both scrollers fade at the edge they can still scroll toward -------
   A custom property does not animate unless it has been registered with a
   type, so the two @property rules are what make the fade ease in rather than
   snap. Browsers without @property simply get the snap — nothing breaks. */
@property --fade-top{ syntax:'<length>'; inherits:false; initial-value:0px; }
@property --fade-bot{ syntax:'<length>'; inherits:false; initial-value:0px; }
.aura-cat-list,
.aura-cat-grid{
  --fade-top:0px; --fade-bot:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bot)),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bot)),transparent 100%);
  transition:--fade-top .2s linear, --fade-bot .2s linear;
}

/* ---- categories: two levels, and they stay put while products scroll ---- */
.aura-cat-list{
  display:flex; flex-direction:column; gap:0;
  position:sticky; top:0; align-self:start;
  max-height:var(--rail); overflow-y:auto;
  padding:28px 22px 24px 28px;
  scrollbar-width:none; overscroll-behavior:contain;
}
.aura-cat-list::-webkit-scrollbar{ display:none; }

.aura-grp + .aura-grp{ margin-top:18px; }

.aura-cat .aura-cat-item{
  display:flex!important; align-items:center; gap:9px; flex:none;
  background:none!important; background-color:transparent!important;
  border:0!important; box-shadow:none!important; border-radius:0!important;
  padding:0!important; margin:0!important; width:auto!important;
  min-height:0!important; height:auto!important;
  color:var(--aura-ink)!important; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .18s var(--aura-ease);
}
.aura-cat .aura-cat-item::before{
  content:''; width:0; height:1px; background:var(--aura-ink);
  transition:width .26s var(--aura-ease); flex:none;
}
.aura-cat .aura-cat-item.is-on::before{ width:14px; }

.aura-cat .aura-cat-item.is-parent{
  font-size:12.5px!important; font-weight:700!important;
  letter-spacing:.12em!important; text-transform:uppercase!important;
  line-height:1.3!important; opacity:.55;
}
.aura-cat .aura-cat-item.is-child{
  font-size:11px!important; font-weight:500!important;
  letter-spacing:.05em!important; text-transform:none!important;
  line-height:1.3!important; opacity:.4; margin-top:9px!important;
}
.aura-sub{ display:flex; flex-direction:column; padding-left:2px; margin-top:2px; }
.aura-cat .aura-cat-item:hover{ opacity:.8; }
.aura-cat .aura-cat-item.is-on{ opacity:1; }
.aura-cat .aura-cat-item:focus-visible{ outline:1px solid rgba(12,12,14,.35); outline-offset:3px; }

/* ---- products: a grid, edge to edge, square corners -------------------- */
.aura-cat-grid{
  height:var(--rail); overflow-y:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:grid; grid-template-columns:1fr; gap:0;
  align-content:start;
  border-left:0;
}
.aura-cat-grid::-webkit-scrollbar{ display:none; }
.aura-cat-grid.cols-2{ grid-template-columns:1fr 1fr; }
/* A swap in flight keeps the old tiles readable but not clickable, so a
   second click cannot queue a third render on top of the one arriving. */
.aura-cat.is-busy .aura-cat-grid{ pointer-events:none; }

.aura-tile{
  display:block; text-decoration:none; color:inherit;
  position:relative;
  border-right:1px solid var(--aura-line);
  border-bottom:1px solid var(--aura-line);
  background:#fff;
}
.aura-cat-grid:not(.cols-2) .aura-tile{ border-right:0; }
.aura-cat-grid.cols-2 .aura-tile:nth-child(2n){ border-right:0; }

.aura-tile-img{ aspect-ratio:1/1; overflow:hidden; background:var(--aura-skin); }
.aura-tile-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--aura-ease), opacity .3s linear;
}
.aura-tile:hover .aura-tile-img img{ transform:scale(1.035); }
.aura-tile-meta{ display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; }
.aura-tile-name{
  font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.aura-tile-price{ font-size:10.5px; opacity:.6; }
.aura-tile-price .price,
.aura-tile-price .woocommerce-Price-amount{ font-size:inherit; color:inherit; margin:0; }
.aura-tile-price del{ opacity:.45; margin-right:5px; }
.aura-tile-price ins{ text-decoration:none; }

/* Two states the API already tells us about and the old build threw away. */
.aura-flag{
  position:absolute; top:0; left:0; z-index:2;
  font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 8px; background:var(--aura-ink); color:#fff;
}
.aura-tile.is-out .aura-flag{ background:rgba(12,12,14,.42); }
.aura-tile.is-out .aura-tile-img img{ opacity:.42; }
.aura-tile.is-out .aura-tile-name{ opacity:.55; }

/* tiles arrive in a short cascade rather than all at once */
.aura-cat-grid.is-fresh .aura-tile{ animation:aura-in .42s var(--aura-ease) both; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(1){ animation-delay:0ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(2){ animation-delay:26ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(3){ animation-delay:52ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(4){ animation-delay:78ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(5){ animation-delay:98ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(6){ animation-delay:114ms; }
.aura-cat-grid.is-fresh .aura-tile:nth-child(n+7){ animation-delay:126ms; }
@keyframes aura-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- skeleton: the same geometry as the thing it stands in for ---------
   clip-path, not overflow:hidden, and that is load-bearing. overflow:hidden
   makes a grid item a scroll container, which zeroes its content-based minimum
   size — the skeleton row collapsed from 380px to an equal 174px share of the
   grid and the whole point of the skeleton (standing in the real tile's
   geometry) was lost. clip-path holds the sheen in without touching layout. */
.aura-sk{ position:relative; clip-path:inset(0); background:var(--aura-skin); }
.aura-sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:aura-sheen 1.25s var(--aura-ease) infinite;
}
@keyframes aura-sheen{ to{ transform:translateX(100%); } }

.aura-cat-skel{ display:flex; flex-direction:column; }
.aura-sk-row{ height:9px; width:64%; margin:0 0 15px; flex:none; }
.aura-sk-row.aura-sk-sub{ height:7px; width:44%; margin-left:2px; margin-bottom:12px; }

/* The two meta bars are painted as backgrounds so a skeleton tile stays a
   single element — no extra nodes to strip when the real tiles land. */
.aura-sk-tile{
  display:block; padding-bottom:46px; border-right:1px solid var(--aura-line);
  border-bottom:1px solid var(--aura-line);
  background:
    linear-gradient(var(--aura-skin),var(--aura-skin)) 12px calc(100% - 30px)/54% 8px no-repeat,
    linear-gradient(var(--aura-skin),var(--aura-skin)) 12px calc(100% - 15px)/28% 8px no-repeat,
    #fff;
}
.aura-sk-tile::before{ content:''; display:block; aspect-ratio:1/1; background:var(--aura-skin); }
.aura-cat-grid.cols-2 .aura-sk-tile:nth-child(2n){ border-right:0; }

/* Script never ran: stop pretending to load and say so. `is-boot` is removed
   the moment the script initialises, so neither of these ever fires when it
   did. */
.aura-cat-stall{ opacity:0; padding:14px 0 0; margin:0; }
.aura-cat.is-boot .aura-cat-stall{ animation:aura-stall .35s linear 6s both; }
.aura-cat.is-boot .aura-sk{ animation:aura-stall-out .35s linear 6s both; }
@keyframes aura-stall{ to{ opacity:.5; } }
@keyframes aura-stall-out{ to{ opacity:0; } }

.aura-cat-msg{ font-size:12px; letter-spacing:.04em; opacity:.5; padding:26px 24px; }
.aura-cat-grid > .aura-cat-msg{ grid-column:1/-1; }
.aura-cat .aura-retry{
  display:inline-block; margin-top:12px;
  background:none!important; border:0!important; border-bottom:1px solid var(--aura-ink)!important;
  border-radius:0!important; box-shadow:none!important; padding:0 0 2px!important;
  min-height:0!important; height:auto!important; width:auto!important;
  color:var(--aura-ink)!important; cursor:pointer;
  font:inherit; font-size:11px!important; font-weight:600!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
}

@media (max-width:767px){
  body .home-category-menu{ width:94%!important; }
  .aura-cat{ --rail:52vh; grid-template-columns:1fr 1px 2fr; }
  .aura-cat-list{ padding:20px 12px 18px 16px; }
  .aura-cat .aura-cat-item.is-parent{ font-size:10.5px!important; letter-spacing:.08em!important; }
  .aura-cat .aura-cat-item.is-child{ font-size:9.5px!important; margin-top:7px!important; }
  .aura-cat .aura-cat-item::before{ width:0; }
  .aura-cat .aura-cat-item.is-on::before{ width:9px; }
  .aura-tile-meta{ padding:8px 9px 10px; }
  .aura-tile-name{ font-size:9px; }
  .aura-tile-price{ font-size:9px; }
  .aura-flag{ font-size:7.5px; padding:4px 6px; }
}

@media (prefers-reduced-motion:reduce){
  .home-category-menu .aura-cat,
  .home-category-menu.is-open .aura-cat{ opacity:1; transform:none; transition:none; }
  .aura-cat *,
  .aura-cat::after{ animation:none!important; transition:none!important; }
  .aura-sk::after{ display:none; }
}