/* 2026-09-25: the id matters. This block styles markup that only exists inside the AJAX-loaded
   mini-cart, so WP Rocket's Remove Unused CSS saw no .psab-* elements when it rendered the page and
   stripped .psab-bar / .psab-nav from the stored used-CSS - while KEEPING .psab-thumb
   (position:absolute; height:100%; width:30%; background:#171717). With no .psab-bar to give it a
   4px, position:relative, overflow:hidden parent, the thumb became a full-height ~130px BLACK BAR
   down the left of the side cart, over the close button (Alex's screenshot). The id is registered in
   rocket_rucss_inline_atts_exclusions (prideshop-rocket-throttle.php) so this block is never folded
   into used-CSS and can never be half-stripped again. */
/* The light grey band every recommendation on the site now sits on (.psrow-rec is the same
   #f4f4f4 / 12px). It replaces a raised white card with a shadow ring, which read as a third
   kind of object in a drawer that already has white cart lines on white. */
.psab{font-family:"Montserrat",sans-serif;max-width:440px;margin:1.25rem 0 0;padding:14px 14px 8px;background:#f4f4f4;border-radius:12px;box-shadow:none}
.psab-li{display:block;padding:0;margin:0;border:0}
/* Elementor's .elementor-menu-cart__products has overflow:hidden (it's the
   scroll area), so the card needs side margin >= its shadow spread or the
   shadow/ring gets clipped at the edges. */
.psab-li .psab{max-width:none;margin:0;box-shadow:none}
/* Subtotal row: label hard-left, amount hard-right (owner request). */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:left!important}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal>strong{margin-inline-end:auto}
/* Side-cart footer (owner request 2026-08-28): products → subtotal → buttons,
   subtotal pinned at the bottom of the panel with the buttons under it.
   .widget_shopping_cart_content is a flex column, so `order` + margin-top:auto
   on the subtotal push both to the bottom. */
.elementor-menu-cart__main .widget_shopping_cart_content>.elementor-menu-cart__products{order:1}
.elementor-menu-cart__main .widget_shopping_cart_content>.elementor-menu-cart__subtotal{order:2;margin-top:auto;padding-top:14px;padding-bottom:12px;border-width:1px 0 0 0!important}
.elementor-menu-cart__main .widget_shopping_cart_content>.elementor-menu-cart__footer-buttons{order:3;margin-top:0;padding-top:0}
/* Wider side cart so product names wrap less (owner request 2026-08-28).
   Elementor default is 350px; 480px felt too wide, settled on 440px. Panel
   padding is left at Elementor's 20px 30px so both inner margins stay equal. */
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main{width:min(440px,100vw)!important}
/* The drawer used to show the suggestions directly under the cart lines, leaving ~380px of dead
   space above Subtotal (Alex 2026-09-05). __main is already a flex column whose subtotal is
   pushed down by margin-top:auto; letting the product list GROW and giving the block its own
   margin-top:auto lands it against the footer instead. It stays in flow, so with a full cart it
   scrolls away with the lines rather than covering them. */
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__products{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* block children could not shrink; flex children can (flex:0 1 auto) — without this a long cart
   squashes its own lines instead of scrolling. */
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__products>*{flex-shrink:0}
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__products>.psab-li{margin-top:auto;padding-top:16px}
/* Elementor's own 64px gap under the product list existed to hold the subtotal down while the
   list was short; the list now grows, so that much air just separates the band from the footer. */
/* 2026-09-18 (Alex, phone): Subtotal + buttons were floating 35px above the bottom of the drawer.
   Elementor caps the product list at max-height:calc(100vh - 250px); once the list hit that cap it
   could not grow any further, and the 18px!important below had already overridden the margin-top:auto
   that was meant to push the footer down, so the leftover space collected UNDER the buttons instead.
   Lift the cap (the list is a flex child with min-height:0, so it still scrolls inside whatever space
   is left) and keep the 18px of air as a margin on the list rather than on the subtotal. */
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__products{max-height:none!important;margin-bottom:18px}
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__subtotal{margin-top:auto!important}
/* ...and the drawer body must be a SHRINKABLE flex item of the panel, not Elementor's height:100%
   (which resolved to the whole panel and pushed the buttons off the bottom once the list was
   allowed to grow). Panel is a fixed-height flex column; body takes what is left after the close
   strip, the list scrolls inside the body, subtotal and buttons keep their own height. */
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main>.widget_shopping_cart_content{height:auto!important;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__subtotal,.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__footer-buttons{flex:0 0 auto}
/* View cart + Checkout side by side, equal size. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:48px;height:auto;padding:12px 8px!important;margin:0;text-align:center;font-size:.8em;white-space:nowrap}
.psab-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.75rem}
/* 2026-09-05: was UPPERCASE with a 4px red bar, and declared Roboto (which the site-wide
   Montserrat !important in prideshop-fonts.php overrode anyway — it never actually rendered).
   Now the same heading as every other recommendation row, just sized for a 440px drawer. */
.psab-title{margin:0;flex:1 1 100%;font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif;font-size:17px;font-weight:700;line-height:1.25;color:#171717}
/* Control bar under the track (2026-09-02): Show all · progress bar · N of M ·
   ‹ ›. Same look as the product-row phone bar (.psrow-nav) so the two feel
   like one system. Buttons are 44px targets; 40px inside a ≤560px drawer
   where the card's inner width drops to ~290px. */
.psab-nav{display:flex;align-items:center;gap:10px;margin:.85rem 0 .1rem;width:100%}
.psab-showall{appearance:none;border:0;background:none;padding:0 2px;margin:0;font:inherit;font-size:.86rem;font-weight:600;color:#7f54b3;cursor:pointer;white-space:nowrap;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.psab-showall:hover{color:#5b3a86;background:none}
.psab-showall:focus{outline:none}
.psab-showall:focus-visible{outline:2px solid #7f54b3;outline-offset:2px}
.psab-bar{flex:1;min-width:36px;position:relative;height:4px;border-radius:2px;background:#e4e4e4;overflow:hidden}
/* 2026-09-25 hardening: height is 4px EXPLICITLY, not 100% of the track. Identical visually (the
   track is 4px), but it removes the dependency that turned this into a full-height black bar when
   .psab-bar was stripped from used-CSS. Even if every other rule here is lost, the worst case is now
   a 4px smudge, not a 130px black column over the side cart. max-height is a second belt. */
.psab-thumb{position:absolute;top:0;left:0;height:4px;max-height:4px;width:30%;border-radius:2px;background:#171717}
.psab-count{font-size:.82rem;color:#595959;white-space:nowrap;min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
.psab-btns{display:flex;gap:8px}
/* Black circle + white chevron, same as the product-row arrows (Alex 2026-09-02
   evening: the white/#cfcfcf version's pressed grey matched the grey behind it). */
.psab-arrow{width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:#171717;color:#fff;appearance:none;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:background .15s,transform .1s,box-shadow .15s}
.psab-arrow svg{width:20px;height:20px;display:block;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.psab-arrow:not([aria-disabled=true]):hover{background:#000;color:#fff;transform:scale(1.08);box-shadow:0 4px 12px rgba(0,0,0,.32)}
.psab-arrow:active{background:#000;transform:scale(.94)}
.psab-arrow:focus{outline:none;background:#171717}
.psab-arrow:focus-visible{outline:2px solid #7f54b3;outline-offset:2px}
.psab-arrow[aria-disabled=true]{opacity:.3;cursor:default;box-shadow:none}
.psab-arrow[aria-disabled=true]:active{transform:none;background:#171717}
/* Track: one full-width slide at a time. Briefly had a peek of the next slide
   (calc(100% - 40px) + 12px gap) on 2026-09-02; owner removed it the same day —
   the "N of M" + arrows already make it obvious there is more. */
/* 2026-09-05 (Alex): the slide was a cart-line lookalike — 72px thumb left, name and price
   beside it. It is now the site's product card, shrunk: photo on top, name, price, button.
   Three to a view in a 440px drawer, scrolling for the rest, which is what makes it read as a
   suggestion rather than a fourth thing already in the basket. */
.psab-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.psab-track::-webkit-scrollbar{display:none}
/* One recommendation per slide (Alex 2026-09-05, reverting the 3-across grid): a full-width
   horizontal card — thumb, name + price, then Add and View. */
.psab-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;gap:.7rem;min-width:0;box-sizing:border-box;background:#fff;border:1px solid var(--ps-line);border-radius:9px;padding:10px}
/* Show all: the track becomes a plain vertical list of every recommendation. */
.psab-expanded .psab-track{display:flex;flex-direction:column;overflow:visible;scroll-snap-type:none;gap:10px}
.psab-expanded .psab-slide{flex:none;width:auto}
.psab-expanded .psab-bar,.psab-expanded .psab-count,.psab-expanded .psab-btns{display:none}
.psab-expanded .psab-showall{margin:0 auto}
@media(prefers-reduced-motion:reduce){.psab-arrow,.psab-btn{transition:none}.psab-btn:active{transform:none}}
@media(max-width:560px){.psab-nav{gap:8px}.psab-arrow{width:40px;height:40px}.psab-btns{gap:6px}}
.psab-img{position:relative;flex:0 0 68px;width:68px;height:68px;display:flex;border:0;border-radius:6px;background:#fff;align-items:center;justify-content:center;overflow:hidden}
.psab-img img{width:100%;height:100%;object-fit:contain;margin:0}
/* prideshop-card.php styles .psrow-vchip/.psab-vchip/.ps-loop-vchip as an absolute overlay on the
   photo. That works on a 220px+ card; on this 68px thumbnail the chip was 56px wide and blanketed
   the product (Alex 2026-09-05). Overridden HERE ONLY - the shared rule is untouched, so the
   rails, archive grid and search cards keep the overlay. */
.psab-chipslot{display:flex;align-items:center;min-height:17px;margin-top:1px}
.psab-slide .psab-vchip{position:static;flex:0 0 auto;display:inline-block;margin:0;background:#e8e8e8;color:#4a4a4a;font-size:10.5px;padding:3px 7px;pointer-events:auto}
.psab-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
/* Two name lines and the chip line are RESERVED whether or not they are filled (Alex 2026-09-05),
   so the price and the chip sit at the same height on every card and the list reads as a grid
   rather than a ragged stack. Same convention the shared card uses for its name and rating rows.
   The name is BOTTOM-aligned in its two-line box, so a one-line name sits on the second line hard
   against the price instead of stranding an empty line beneath it. */
/* font-size + line-height are repeated here on purpose: `2.6em` must compute against the NAME's
   14.7px type, not the 16px it would otherwise inherit, or the reserved box is not exactly two
   name lines and one- vs two-line cards differ by 2px. */
.psab-namebox{display:flex;align-items:flex-end;font-size:.92rem;line-height:1.3;min-height:2.6em}
.psab-name{font-size:.92rem;line-height:1.3;color:#171717!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.psab-name:hover{text-decoration:underline!important}
.psab-name:hover{text-decoration:underline!important}
/* The chip briefly lived INSIDE this nowrap/ellipsis box, so once price + chip exceeded the ~198px
   text column the CHIP was the part clipped away — it vanished entirely on longer names and longer
   labels like "2 lapel pin types". It now gets its own line under the price (Alex 2026-09-05:
   "possibly under the price or above it"), so nothing can clip it and its width never competes
   with the price. */
.psab-price{font-size:.92rem;font-weight:600;color:#171717;line-height:1.2;min-width:0}
.psab-priceval{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psab-price del{color:#6b6b6b;font-weight:400;margin-right:.35em} /* same muted token as every other struck price */
.psab-price ins{background:none;text-decoration:none;color:#CD1B1E}
/* Same button as the shared card's (prideshop-card.php .psrow-addbtn): white on the grey band,
   #cfcfcf hairline, 8px radius, 600. The old .psab-view hover painted the pill #a81619 while
   leaving the label #171717 — dark red under near-black, all but unreadable. Fixed here by
   using the card's own hover, which flips the text to white with it. */
.psab-acts{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
/* Specificity note (2026-09-05): the drawer sits inside a .woocommerce wrapper, and the site sets
   ".woocommerce .button{font-size:15px!important}" at 0,2,0 - which beat a plain ".psab-btn"
   !important at 0,1,0. That is why Add rendered at 15px while View rendered at 13px. The "button"
   class has been dropped from the Add span (WC binds to .add_to_cart_button, not .button) and this
   selector is 0,2,0 so it cannot lose that way again. */
.psab .psab-btn{display:flex!important;align-items:center;justify-content:center;min-width:66px;min-height:32px;padding:0 12px;border-radius:8px;background:#fff;color:#171717!important;border:1px solid var(--ps-edge);font-size:13px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:0!important;text-align:center;text-transform:none;white-space:nowrap;text-decoration:none!important;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.psab-btn:hover,.psab-btn:focus-visible{background:#a81619;color:#fff!important;border-color:#a81619}
.psab-btn:active{transform:scale(.96)}
.psab-btn.loading{opacity:.6}
.psab-btn.added{background:#171717;color:#fff!important;border-color:#171717}
/* "Select options" is 3 characters longer than "Add to cart" and wrapped in a 119px card,
   which made those cards taller and the Show-all grid ragged. */
.psab-soldout{background:none;border-color:var(--ps-line);color:#6b6b6b!important;cursor:default}
.psab-soldout:hover{background:none;color:#6b6b6b!important;border-color:var(--ps-line)}
/* WC appends its own "View cart" link after a successful AJAX add — the drawer already IS the cart. */
.psab-slide .added_to_cart{display:none!important}
@media(max-width:560px){.elementor-menu-cart__main{padding:16px 12px!important}}

/* --- Accessibility fixes for the side cart (WCAG 2.1 AA) --- */
/* Remove button. Elementor draws the x as two rotated bars on the WRAPPER
   ::before/::after (the <a> tags are invisible click overlays). Default colour
   is a faint #d5d8dc via --remove-item-button-color. Just recolour to near-black
   and thicken so it matches the drawer's own close x; NO circle (that read as a
   spinner). Red on hover to signal delete. */
.elementor-menu-cart__product-remove{
  --remove-item-button-color:#171717!important;
  --remove-item-button-hover-color:#CD1B1E!important}
.elementor-menu-cart__product-remove::before,
.elementor-menu-cart__product-remove::after{
  background:#171717!important;height:2px!important;margin-top:-1px!important}
.elementor-menu-cart__product-remove:hover{border:0!important}
.elementor-menu-cart__product-remove:hover::before,
.elementor-menu-cart__product-remove:hover::after{background:#CD1B1E!important}
.elementor-menu-cart__product-remove>a:focus-visible{outline:3px solid #004dff!important;outline-offset:2px!important;opacity:1!important}
/* Close (x) of the drawer: ensure a 44px target + visible focus */
.elementor-menu-cart__close-button{min-width:44px!important;min-height:44px!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.elementor-menu-cart__close-button:focus-visible{outline:3px solid #004dff!important;outline-offset:2px!important}
/* When the side cart is OPEN, hide the Tinsel launcher/panel so it can't sit
   over the Checkout button (Tinsel's z-index is above the drawer). Belt: JS in
   the Tinsel widget also toggles body.psa-cart-open as a fallback for browsers
   without :has(). */
body:has(.elementor-menu-cart__container[aria-hidden="false"]) #psa-btn,
body:has(.elementor-menu-cart__container[aria-hidden="false"]) #psa-panel,
body.psa-cart-open #psa-btn,
body.psa-cart-open #psa-panel{display:none!important}