/*
 * Fixed left/right "Category Menu" edge tabs (mobile only).
 * See inc/edge-category-tabs.php for what this belongs to and how to revert.
 *
 * The slide-out panel's menu reuses .em-cats-nav / .em-cat-head / .em-cat-list
 * (see style.css's unscoped, always-expanded rules — the same ones the
 * desktop sidebar uses) so it looks and behaves like the desktop menu, not
 * like the Shop Categories bar's collapsed mobile accordion. Only the panel
 * shell, the tabs, and a couple of narrow-panel overrides are styled here.
 */

.em-edge-tabs,
.em-edge-overlay,
.em-edge-panel{display:none;}

/* The fixed copy is created on the homepage only. Keep it suppressed above
   the edge-navigation breakpoint even though the shared shopbar becomes
   visible at the wider 860px responsive breakpoint in style.css. */
.em-sticky-shopbar-clone{display:none !important;}

@media (max-width:600px){
  :root{
    --em-edge-tab-w:40px;
    --em-edge-admin-offset:0px;
    /* Deliberately its own color, not var(--em-green) — client wants this
       tab lighter than the site's usual green (used for category headers,
       the Shop Categories bar, etc.), sampled directly from the client's
       reference screenshot rather than eyeballed. */
    --em-edge-tab-green:#1e7916;
  }

  /* The rounded ends expose the page behind the tabs. The legacy desktop
     page background is dark red, but the client's mobile reference uses a
     clean white field around both rounded ends. Keep this mobile-only. */
  html,
  body{background:#fff;}

  /* WordPress's front-end admin bar is 46px tall below its 782px breakpoint.
     Fixed controls otherwise begin behind it, hiding the rounded tab tops
     and the panel close button from logged-in editors. */
  body.admin-bar{--em-edge-admin-offset:46px;}

  /* The client's A/B test is settled: both tabs use the full-height right-tab
     treatment and reserve matching gutters so neither overlaps content. */
  body{
    padding-left:var(--em-edge-tab-w);padding-right:var(--em-edge-tab-w);
    touch-action:pan-y pinch-zoom;overscroll-behavior-x:none;
  }

  /* The client wants every horizontal swipe to control the category panel,
     including gestures that begin on the site's horizontal product/book
     strips. Keep vertical page scrolling and pinch zoom available there. */
  .em-books,
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products{
    touch-action:pan-y pinch-zoom;
  }

  /* style.css's own mobile .em-main{padding:12px} would add a second gap
     inside the reserved gutters. Keep the requested 2px clearance on both
     edges so content sits equally close to the two tabs. */
  .em-main{padding-left:2px;padding-right:2px;}

  /* The homepage keeps the page-wide swipe gesture and slide-out panel, but
     the client does not want visible edge bars or their reserved gutters
     there. Restore the regular mobile content inset after removing them. */
  body.home{padding-left:0;padding-right:0;}
  body.home .em-main{padding-left:12px;padding-right:12px;}
  body.home .em-edge-tabs{display:none;}

  .em-edge-tabs{display:block;}

  /* The original homepage shopbar remains in normal document flow. This
     fixed clone appears only after that original has scrolled above the
     viewport, so there is no jump or covered-content gap. */
  .em-sticky-shopbar-clone{
    display:flex !important;position:fixed;
    top:var(--em-edge-admin-offset);left:8px;right:8px;
    width:auto;margin:0;z-index:44;background:#fff;
    opacity:0;pointer-events:none;
    transform:translateY(-110%);
    transition:transform .2s ease,opacity .2s ease;
  }
  .em-sticky-shopbar-clone.is-visible{
    opacity:1;pointer-events:auto;transform:translateY(0);
  }
  /* Keep the in-flow controls compact. Only the fixed homepage clone grows
     after the original bar has scrolled away, as requested by the client. */
  .em-sticky-shopbar-clone .em-mobile-menu-toggle,
  .em-sticky-shopbar-clone .em-mobile-cart-shortcut .em-cart-btn{
    height:56px;line-height:54px;
  }

  /*
   * Deliberately NOT writing-mode:vertical-rl on .em-edge-tab itself.
   * flex-direction's row/column axes are defined relative to the writing
   * mode of whatever element has it — under vertical-rl, "column" stacks
   * along the (horizontal, right-to-left) block axis, not top-to-bottom in
   * real screen coordinates, which silently put the arrow back beside the
   * label instead of above it. Keeping the writing-mode off the flex
   * container and only on the label (below) keeps flex-direction:column an
   * unambiguous, ordinary top-to-bottom stack in real page coordinates, so
   * the arrow (first child) reliably renders directly above the label.
   */
  .em-edge-tab{
    position:fixed;width:var(--em-edge-tab-w);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    background:var(--em-edge-tab-green);color:#fff;border:0;
    padding:6px 2px 14px;font-weight:bold;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    z-index:40;cursor:pointer;
  }
  /* Full height, flush with each edge, inside matching reserved gutters.
     A half-width radius gives the top and bottom the client's requested
     semicircular/pill ends while leaving the long sides straight. */
  .em-edge-tab--left,
  .em-edge-tab--right{top:var(--em-edge-admin-offset);bottom:0;border-radius:20px;}
  .em-edge-tab--left{left:0;}
  .em-edge-tab--right{right:0;}
  .em-edge-tab-arrow{
    display:block;width:13px;height:19px;flex:0 0 auto;overflow:visible;
  }
  .em-edge-tab-arrow path{
    fill:none;stroke:currentColor;stroke-width:6;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .em-edge-tab-label{
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:18px;letter-spacing:.03em;line-height:1;
  }

  .em-edge-overlay:not([hidden]){
    display:block;position:fixed;
    top:var(--em-edge-admin-offset);right:0;bottom:0;left:0;
    background:rgba(0,0,0,.4);z-index:45;
  }

  .em-edge-panel:not([hidden]){
    display:block;position:fixed;top:var(--em-edge-admin-offset);bottom:0;width:70%;max-width:240px;
    background:#fff;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 0 18px rgba(0,0,0,.35);padding:14px 10px 24px;
    transition:transform .28s ease;
  }
  .em-edge-panel[data-em-edge-side="left"]{left:0;transform:translateX(-105%);}
  .em-edge-panel[data-em-edge-side="right"]{right:0;transform:translateX(105%);}
  .em-edge-panel.is-open{transform:translateX(0);}

  .em-edge-panel-home{
    margin:0 34px 13px;text-align:center;font:bold 15px/20px Arial,Helvetica,sans-serif;
  }
  .em-edge-panel-home a{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    color:var(--em-nav);text-decoration:underline;
  }
  .em-edge-panel-home-icon{display:block;width:18px;height:18px;flex:0 0 18px;}
  .em-edge-panel-home a:hover{color:var(--em-nav-hover);}

  .em-edge-panel-top{
    position:relative;display:flex;align-items:center;justify-content:center;
    min-height:28px;margin:0;padding:0 0 20px;
  }
  .em-edge-panel-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:0;transform:translateY(-50%);
    width:30px;height:28px;margin:0;padding:0;background:none;border:0;
    font-size:26px;line-height:1;color:var(--em-green);cursor:pointer;
  }

  /* The row's 20px bottom padding + .em-cats-nav's 2px top margin preserves the
     desktop sidebar's exact 22px cart-to-first-heading rhythm. */
  .em-edge-panel-cart{padding:0;}

  /* style.css has an unscoped mobile .em-cats{display:grid;...} meant for
     the Shop Categories bar's narrower dropdown — override it back to the
     plain, single-column, always-expanded desktop layout in this panel. */
  .em-edge-panel-menu .em-cats{display:block;padding:0;}

  /* style.css also has an unscoped mobile .em-cat-head{text-align:center}
     (written for the Shop Categories bar's dropdown) — left-align both the
     green category headers and the subcategory links in this panel. */
  .em-edge-panel-menu .em-cat-head,
  .em-edge-panel-menu .em-cat-head a,
  .em-edge-panel-menu .em-cat-list li a{text-align:left;}
  .em-edge-panel-menu .em-cat-head a{font-size:16px;line-height:1.25;}
  .em-edge-panel-menu .em-cat-list li a{
    padding-top:5px;padding-bottom:5px;font-size:15px;line-height:1.25;
  }

  .em-edge-panel-search{margin-top:10px;}

  body.em-edge-open{overflow:hidden;}

}