/* ============================================================
   Advanced WooCommerce Sidebar Menu – Styles
   advanced-sidebar-menu.css

   EVERY visual token is a CSS custom property.
   To restyle the menu, override any variable inside :root {}
   from your theme's stylesheet — no file editing required.
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {

  /* --- Layout & Sizing --- */
  --asm-col-w:                      clamp(300px, 13vw, 340px);
  --asm-col-w-mobile:               72vw;
  --asm-col-w-secondary-mobile:     65vw;
  --asm-header-h:                   58px;
  --asm-header-h-mobile:            54px;
  --asm-z-index:                    99999;

  /* --- Animation --- */
  --asm-speed:                      320ms;
  --asm-speed-fast:                 140ms;
  --asm-speed-mid:                  180ms;
  --asm-speed-btn:                  200ms;
  --asm-ease:                       cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Typography --- */
  --asm-font:                       'poppins', system-ui, -apple-system, sans-serif;
  --asm-font-size-trigger:          0.875rem;
  --asm-font-size-title:            1rem;
  --asm-font-size-item:             1rem;
  --asm-font-size-item-mobile:      0.95rem;
  --asm-font-size-badge:            0.7rem;
  --asm-font-size-view-all:         1rem;
  --asm-font-size-loading:          0.8rem;
  --asm-font-size-empty:            0.85rem;

  /* --- Core Palette --- */
  --asm-bg:                         #FFF;
  --asm-bg-secondary:               #FFF;
  --asm-bg-hover:                   #FFF;
  --asm-bg-header:                  #ea0029;
  --asm-accent:                     #971b26;
  --asm-text:                       #424143;
  --asm-text-hover:                 #971b26;
  --asm-muted:                      #FFF;

  /* --- Borders --- */
  --asm-border:                     #EAEAEA;
  --asm-border-width:               1px;

  /* --- Backdrop --- */
  --asm-backdrop-color:             rgba(0,0,0,0.62);
  --asm-backdrop-color-closed:      rgba(0,0,0,0);

  /* --- Sidebar Shadow --- */
  --asm-shadow:                     4px 0 32px rgba(0,0,0,0.45);

  /* --- Trigger Button --- */
  --asm-trigger-bg:                 transparent;
  --asm-trigger-bg-hover:           rgba(255,255,255,0.08);
  --asm-trigger-border:             currentColor;
  --asm-trigger-border-width:       1.5px;
  --asm-trigger-border-radius:      4px;
  --asm-trigger-padding:            8px 16px;

  /* --- Header --- */
  --asm-header-padding:             0 14px;
  --asm-header-gap:                 8px;

  /* --- Column Title --- */
  --asm-title-color:                var(--asm-muted);

  /* --- Back / Close Buttons --- */
  --asm-btn-color:                  var(--asm-muted);
  --asm-btn-color-hover:            #FFF;
  --asm-btn-bg-hover:               rgba(255,255,255,0.07);
  --asm-btn-padding:                6px;
  --asm-btn-radius:                 4px;

  /* --- Item Rows --- */
  --asm-item-min-height:            48px;
  --asm-item-padding:               15px;
  --asm-item-gap:                   10px;
  --asm-item-radius:                0px;

  /* --- Accent Bar (left edge on hover) --- */
  --asm-accent-bar-width:           3px;
  --asm-accent-bar-color:           var(--asm-accent);
  --asm-accent-bar-radius:          0 2px 2px 0;

  /* --- Thumbnail --- */
  --asm-thumb-size:                 40px;
  --asm-thumb-radius:               5px;
  --asm-thumb-opacity:              1;
  --asm-thumb-placeholder-bg:       rgba(255,255,255,0.06);
  --asm-thumb-placeholder-color:    var(--asm-muted);

  /* --- Count Badge --- */
  --asm-badge-color:                var(--asm-muted);
  --asm-badge-bg:                   rgba(255,255,255,0.06);
  --asm-badge-radius:               10px;
  --asm-badge-padding:              2px 6px;

  /* --- Scrollbar --- */
  --asm-scrollbar-w:                4px;
  --asm-scrollbar-thumb:            rgba(255,255,255,0.12);
  --asm-scrollbar-track:            transparent;
  --asm-scrollbar-radius:           2px;

  /* --- Spinner --- */
  --asm-spinner-size:               28px;
  --asm-spinner-border:             2.5px;
  --asm-spinner-track:              rgba(255,255,255,0.1);
  --asm-spinner-color:              var(--asm-accent);

  /* --- Focus Ring --- */
  --asm-focus-color:                var(--asm-accent);
  --asm-focus-width:                2px;
  --asm-focus-offset:               2px;
}


.asm-trigger{display:inline-flex;align-items:center;color:#FFF!important;gap:8px;padding:var(--asm-trigger-padding)!important;background:#ea0029!important;border:none!important;border-radius:10px!important;cursor:pointer;font-family:var(--asm-font)!important;font-size:1rem!important;font-weight:500;transition:background var(--asm-speed) var(--asm-ease),color var(--asm-speed) var(--asm-ease)!important;line-height:1;vertical-align:middle}
.asm-trigger:hover{background:#424143!important;border-radius:10px!important}
.asm-trigger__icon{font-size:1.15em;line-height:1}
.asm-overlay{position:fixed;inset:0;z-index:var(--asm-z-index);display:flex;align-items:stretch;pointer-events:none}
.asm-overlay[hidden]{display:flex!important;visibility:hidden}
.asm-overlay.asm-overlay--open{visibility:visible;pointer-events:auto}
.asm-backdrop{flex:1;background:var(--asm-backdrop-color-closed);transition:background var(--asm-speed) var(--asm-ease);cursor:pointer}
.asm-overlay--open .asm-backdrop{background:var(--asm-backdrop-color)}
.asm-sidebar{display:flex;flex-direction:row;align-items:stretch;height:100%;position:relative;flex-shrink:0;transform:translateX(-100%);transition:transform var(--asm-speed) var(--asm-ease);will-change:transform;box-shadow:var(--asm-shadow)}
.asm-overlay--open .asm-sidebar{transform:translateX(0)}
.asm-col{display:flex;flex-direction:column;width:var(--asm-col-w);height:100%;background:var(--asm-bg);border-right:var(--asm-border-width) solid var(--asm-border);overflow:hidden;flex-shrink:0;position:relative}
.asm-col--secondary{background:var(--asm-bg-secondary);border-right:none;transform:translateX(0);transition:width var(--asm-speed) var(--asm-ease),opacity var(--asm-speed) var(--asm-ease)}
.asm-col--secondary[hidden]{display:flex!important;width:0;opacity:0;pointer-events:none;overflow:hidden;border-right:none}
.asm-col--secondary.asm-col--visible{width:var(--asm-col-w);opacity:1;pointer-events:auto;border-left:var(--asm-border-width) solid var(--asm-border)}
.asm-col__header{display:flex;align-items:center;height:var(--asm-header-h);padding:var(--asm-header-padding);border-bottom:var(--asm-border-width) solid var(--asm-border);gap:var(--asm-header-gap);flex-shrink:0;background:var(--asm-bg-header)}
.asm-col__title{flex:1;font-family:var(--asm-font);font-size:var(--asm-font-size-title);font-weight:500;color:var(--asm-title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asm-btn-back,.asm-btn-close{display:inline-flex;align-items:center;gap:0;background:none!important;border:none!important;cursor:pointer;color:var(--asm-btn-color)!important;padding:var(--asm-btn-padding)!important;border-radius:var(--asm-btn-radius)!important;transition:color var(--asm-speed-mid),background var(--asm-speed-mid)!important;flex-shrink:0;line-height:1}
.asm-btn-back:hover,.asm-btn-close:hover{color:var(--asm-btn-color-hover)!important;background:var(--asm-btn-bg-hover)!important}
.asm-btn-back[hidden]{display:none!important}
#asm-btn-back-secondary{display:none}
.asm-btn-back__label{font-size:var(--asm-font-size-title);font-family:var(--asm-font);font-weight:600;letter-spacing:.04em}
.asm-col__body{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;position:relative}
.asm-col__body::-webkit-scrollbar{width:var(--asm-scrollbar-w)}
.asm-col__body::-webkit-scrollbar-track{background:var(--asm-scrollbar-track)}
.asm-col__body::-webkit-scrollbar-thumb{background:var(--asm-scrollbar-thumb);border-radius:var(--asm-scrollbar-radius)}
.asm-list{list-style:none;margin:0;padding:6px 0}
@keyframes asm-slide-in-right {
from{opacity:0;transform:translateX(28px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes asm-slide-in-left {
from{opacity:0;transform:translateX(-28px)}
to{opacity:1;transform:translateX(0)}
}
.asm-list--enter-right{animation:asm-slide-in-right var(--asm-speed) var(--asm-ease) both}
.asm-list--enter-left{animation:asm-slide-in-left var(--asm-speed) var(--asm-ease) both}
.asm-item{display:flex!important;align-items:center;width:100%!important;padding:var(--asm-item-padding)!important;min-height:var(--asm-item-min-height)!important;gap:var(--asm-item-gap);cursor:pointer;border:none;border-radius:var(--asm-item-radius);background:none!important;text-align:left!important;color:var(--asm-text)!important;font-family:var(--asm-font)!important;font-size:var(--asm-font-size-item);font-weight:400;line-height:1.3;text-decoration:none;border:none!important;border-bottom:var(--asm-border-width) solid var(--asm-border)!important;transition:background var(--asm-speed-fast),color var(--asm-speed-fast),padding-left var(--asm-speed-fast);box-sizing:border-box;position:relative;-webkit-tap-highlight-color:transparent}
.asm-item:last-child{border-bottom:none}
.asm-item:hover,.asm-item:focus-visible{background:var(--asm-bg-hover);color:var(--asm-text-hover);outline:none;border-radius:0!important}
.asm-item:hover .asm-item__name,.asm-item:focus-visible .asm-item__name{transform:translateX(3px)}
.asm-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--asm-accent-bar-color);transition:width var(--asm-speed-fast) var(--asm-ease);border-radius:var(--asm-accent-bar-radius)}
.asm-item:hover::before,.asm-item:focus-visible::before{width:var(--asm-accent-bar-width)}
.asm-item__thumb{width:var(--asm-thumb-size);height:var(--asm-thumb-size);border-radius:var(--asm-thumb-radius);object-fit:cover;flex-shrink:0;opacity:var(--asm-thumb-opacity);background-color:#EAEAEA;padding:5px}
.asm-item__thumb-placeholder{width:var(--asm-thumb-size);height:var(--asm-thumb-size);border-radius:var(--asm-thumb-radius);background:var(--asm-thumb-placeholder-bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--asm-thumb-placeholder-color)}
.asm-item__name{flex:1;transition:transform var(--asm-speed-fast) var(--asm-ease)}
.asm-item__count{font-size:var(--asm-font-size-badge);color:var(--asm-badge-color);background:var(--asm-badge-bg);padding:var(--asm-badge-padding);border-radius:var(--asm-badge-radius);flex-shrink:0;font-variant-numeric:tabular-nums}
.asm-item__chevron{flex-shrink:0;color:var(--asm-muted);transition:transform var(--asm-speed-btn),color var(--asm-speed-btn)}
.asm-item:hover .asm-item__chevron{color:var(--asm-accent);transform:translateX(3px)}
.asm-item--view-all{color:var(--asm-accent);font-size:var(--asm-font-size-view-all);font-weight:500;border-top:var(--asm-border-width) solid var(--asm-border);margin-top:4px}
.asm-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px;color:var(--asm-muted);font-family:var(--asm-font);font-size:var(--asm-font-size-loading)}
.asm-spinner{width:var(--asm-spinner-size);height:var(--asm-spinner-size);border:var(--asm-spinner-border) solid var(--asm-spinner-track);border-top-color:var(--asm-spinner-color);border-radius:50%;animation:asm-spin 700ms linear infinite;display:block}
@keyframes asm-spin {
to{transform:rotate(360deg)}
}
.asm-empty{padding:32px 16px;text-align:center;color:var(--asm-muted);font-family:var(--asm-font);font-size:var(--asm-font-size-empty)}
@media (max-width: 768px) {
.asm-sidebar{position:relative;overflow:hidden;width:var(--asm-col-w-mobile)}
.asm-col{width:var(--asm-col-w-mobile)}
.asm-col__header{height:var(--asm-header-h-mobile)}
.asm-item{min-height:52px;padding:0 12px;font-size:var(--asm-font-size-item-mobile)}
.asm-col--secondary{position:absolute;inset:0;width:100%!important;transform:translateX(100%);transition:transform var(--asm-speed) var(--asm-ease)!important;opacity:1!important;border-left:none!important}
.asm-col--secondary[hidden]{display:flex!important;width:100%!important;opacity:1!important;pointer-events:none}
.asm-col--secondary.asm-col--visible{width:100%!important;transform:translateX(0);pointer-events:auto;border-left:none!important}
#asm-btn-back-secondary{display:inline-flex!important}
}
.asm-item:focus-visible,.asm-btn-back:focus-visible,.asm-btn-close:focus-visible,.asm-trigger:focus-visible{outline:var(--asm-focus-width) solid var(--asm-focus-color);outline-offset:var(--asm-focus-offset)}
body.asm-no-scroll{overflow:hidden}
@media (max-width:480px) {
.asm-trigger{display:inline-flex;align-items:center;color:#FFF!important;background:#424143!important;border-radius:0!important;width:100%;text-align:center;justify-content:center;margin-bottom:15px;padding:10px!important}
.asm-trigger:hover{background:#ea0029!important;border-radius:0!important}
}