/* =========================================================
   SP — BOOK EQUIPMENT PAGE (/equipment/)
   CSS-ONLY VERSION (NO JS)
   - Astra header scrolls away (not sticky) on this page
   - SP date/search bar becomes the top bar via sticky
   - Sidebar sticks below the bar
   - Full-bleed bar background
   - Square product images that fill tile
   ========================================================= */

/* =========================================================
   0) Scope + variables
   ========================================================= */
   body:has(#sp-book-equipment-header){
    --sp-adminbar: 0px;          /* WP admin bar height */
    --sp-bar-h: 132px;           /* IMPORTANT: set to your bar height (desktop) */
    --sp-gap: 12px;              /* breathing room */
  
    --sp-line: rgba(0,0,0,.10);
    --sp-line-strong: rgba(0,0,0,.14);
    --sp-text: #1a1a1a;
    --sp-muted: #6b7280;
    --sp-blue: #0b57d0;
    --sp-tile-bg: #EEEFF2;
    --sp-radius: 12px;
    --sp-tile-radius: 10px;
    --sp-shadow-soft: 0 8px 18px rgba(0,0,0,.08);
  }
  
  /* WP admin bar */
  body.admin-bar:has(#sp-book-equipment-header){ --sp-adminbar: 32px; }
  @media (max-width: 782px){
    body.admin-bar:has(#sp-book-equipment-header){ --sp-adminbar: 46px; }
  }
  
  /* Your bar is taller on small screens */
  @media (max-width: 768px){
    body:has(#sp-book-equipment-header){ --sp-bar-h: 176px; }
  }
  
  /* Keep Astra dropdown menus above everything */
  .main-header-menu .sub-menu,
  .ast-builder-menu .sub-menu{
    z-index: 999999 !important;
  }
  
  /* =========================================================
     1) Disable Astra sticky header on this page only
     (so the header scrolls away, letting your bar become top)
     ========================================================= */
  body:has(#sp-book-equipment-header) .ast-sticky-active,
  body:has(#sp-book-equipment-header) .ast-sticky-header,
  body:has(#sp-book-equipment-header) header#masthead.ast-sticky-active,
  body:has(#sp-book-equipment-header) header#masthead.ast-sticky-header{
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
  
  /* (If Hostinger/Astra plugin forces fixed positioning) */
  body:has(#sp-book-equipment-header) header#masthead{
    position: relative !important;
  }
  
  /* =========================================================
     2) SP BAR: sticky top bar (CSS-only)
     - Starts under the header naturally (normal flow)
     - Sticks to top after header scrolls away
     - Full-width background (bleed)
     ========================================================= */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header{
    position: sticky !important;
    top: var(--sp-adminbar) !important;
    z-index: 99990 !important; /* below dropdown menus, above page */
  
    /* Full-bleed background across viewport */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    padding: 14px 0 10px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
  }
  
  /* Keep inner content centered */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-inner{
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
  }
  
  /* =========================================================
     3) Date row + Search alignment
     ========================================================= */
  #sp-book-equipment-header .sp-date-row{
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  #sp-book-equipment-header .sp-date-row label{
    font-size:14px;
    line-height:1.1;
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#111;
  }
  #sp-book-equipment-header .sp-date-row input[type="date"]{
    height:40px;
    padding:6px 12px;
    border:1px solid rgba(0,0,0,.18);
    border-radius:10px;
    font-size:14px;
    min-width:190px;
    background:#eef6ff;
  }
  
  #sp-book-equipment-header .sp-inline-search-wrap{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex:1 1 420px;
    min-width:320px;
  }
  #sp-book-equipment-header .sp-inline-search{
    width:100%;
    max-width:640px;
    min-width:260px;
    height:40px;
    padding:6px 12px;
    border:1px solid rgba(0,0,0,.18);
    border-radius:10px;
    font-size:14px;
    background:#fff;
    outline:none;
  }
  #sp-book-equipment-header .sp-inline-search:focus{
    border-color: rgba(11,87,208,.45);
    box-shadow: 0 0 0 3px rgba(11,87,208,.12);
  }
  #sp-book-equipment-header .sp-inline-clear{
    height:40px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,.18);
    background: var(--sp-blue);
    color:#fff;
    cursor:pointer;
    font-weight:700;
  }
  #sp-book-equipment-header .sp-inline-clear:hover{ filter:brightness(.95); }
  
  @media (max-width: 768px){
    #sp-book-equipment-header .sp-date-row input[type="date"]{ min-width:160px; }
    #sp-book-equipment-header .sp-inline-search-wrap{ min-width:240px; }
  }
  
  /* =========================================================
     4) Category tabs (keep .sp-pill for your JS logic)
     ========================================================= */
  #sp-book-equipment-header .sp-pills{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    padding:6px 0 2px;
  }
  #sp-book-equipment-header .sp-pill{
    height:36px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.14);
    background:#fff;
    color:var(--sp-blue);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #sp-book-equipment-header .sp-pill.is-active{
    background: rgba(26,26,26,.08);
    border-color: rgba(0,0,0,.22);
    color:#111;
    text-decoration:none;
  }
  #sp-book-equipment-header .sp-pill:hover{
    border-color: rgba(0,0,0,.26);
    background: rgba(11,87,208,.06);
  }
  
  /* =========================================================
     5) Layout + sidebar sticky (never hides behind bar)
     ========================================================= */
  #sp-equipment-browser{
    display:flex;
    gap:28px;
    max-width:1100px;
    margin:0 auto;
    padding:0 18px;
  }
  
  #sp-equipment-browser .sp-sidebar{
    width:230px;
    flex:0 0 230px;
  
    border:1px solid var(--sp-line);
    border-radius:12px;
    background:#fff;
    padding:16px 18px;
    box-shadow:0 8px 18px rgba(0,0,0,.04);
  
    position: sticky;
    top: calc(var(--sp-adminbar) + var(--sp-bar-h) + var(--sp-gap)) !important;
    align-self:flex-start;
  }
  
  /* Mobile layout */
  @media (max-width: 500px){
    #sp-equipment-browser{ flex-direction:column; }
    #sp-equipment-browser .sp-sidebar{
      position: relative !important;
      top: auto !important;
      width:auto;
      flex: 1 1 auto;
    }
  }
  
  #sp-equipment-browser #sp-grid ul.products{
    gap:18px !important;
  }
  
  /* =========================================================
     6) Product cards + square images that fill
     ========================================================= */
  #sp-equipment-browser ul.products li.product{
    background:#fff !important;
    border:1px solid var(--sp-line) !important;
    border-radius: var(--sp-radius) !important;
    padding:14px !important;
    box-shadow:none !important;
  
    display:flex !important;
    flex-direction:column !important;
  
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  }
  #sp-equipment-browser ul.products li.product:hover{
    box-shadow: var(--sp-shadow-soft) !important;
    transform: translateY(-2px);
    border-color: var(--sp-line-strong) !important;
  }
  
  #sp-equipment-browser ul.products li.product a.woocommerce-LoopProduct-link{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    text-decoration:none !important;
    color: var(--sp-text) !important;
  }
  
  #sp-equipment-browser ul.products li.product a.woocommerce-LoopProduct-link img{
    width:100% !important;
    aspect-ratio: 1 / 1 !important;
    height:auto !important;
    object-fit: cover !important;
    background: var(--sp-tile-bg) !important;
    border-radius: var(--sp-tile-radius) !important;
    padding:0 !important;
    margin:0 0 12px !important;
    display:block !important;
  }
  
  #sp-equipment-browser ul.products li.product .woocommerce-loop-product__title{
    font-weight:800 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    margin:0 0 10px !important;
  
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    min-height:38px !important;
  }
  
  /* =========================================================
     7) Price bar + icon button
     ========================================================= */
  #sp-equipment-browser ul.products li.product .sp-pricebar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  
    margin-top:auto !important;
    padding-top:10px !important;
    border-top:1px solid rgba(0,0,0,.06);
    min-height:54px;
  }
  
  #sp-equipment-browser ul.products li.product .sp-pricebar .price{
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:baseline !important;
    gap:6px !important;
    white-space:nowrap !important;
  
    font-weight:800 !important;
    color:#111 !important;
  }
  
  #sp-equipment-browser ul.products li.product .sp-pricebar .sp-unit-day{
    font-weight:700 !important;
    opacity:.7 !important;
    font-size:12px !important;
  }
  
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  
    width:44px !important;
    height:44px !important;
  
    border-radius:10px !important;
    background: var(--sp-blue) !important;
    border:1px solid rgba(0,0,0,.08) !important;
  
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
  }
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn:hover{
    filter:brightness(.95) !important;
  }
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn .sp-cart-svg{
    width:20px !important;
    height:20px !important;
    fill:#fff !important;
  }
  
  /* Hide any buttons not moved into pricebar */
  #sp-equipment-browser ul.products li.product a.add_to_cart_button:not(.sp-moved),
  #sp-equipment-browser ul.products li.product a.ajax_add_to_cart:not(.sp-moved),
  #sp-equipment-browser ul.products li.product a.product_type_rentalbel:not(.sp-moved),
  #sp-equipment-browser ul.products li.product a.product_type_simple:not(.sp-moved),
  #sp-equipment-browser ul.products li.product a.button:not(.sp-moved){
    display:none !important;
  }
  /* Astra header + dropdown must be above the equipment bar */
  header#masthead{ position: relative; z-index: 1000000 !important; }
  .main-header-menu .sub-menu,
  .ast-builder-menu .sub-menu{ z-index: 1000001 !important; }
  
  body:has(#sp-book-equipment-header) #page,
  body:has(#sp-book-equipment-header) .site,
  body:has(#sp-book-equipment-header) #content,
  body:has(#sp-book-equipment-header) .site-content,
  body:has(#sp-book-equipment-header) #primary,
  body:has(#sp-book-equipment-header) .ast-container{
    overflow: visible !important;
    transform: none !important;
  }
  /* =========================================================
     PRODUCT CARD — FIGMA MATCH OVERRIDES
     Paste at END of your CSS
     ========================================================= */
  
  /* 0) Colors (match your figma: neutral/black UI + subtle lines) */
  body:has(#sp-book-equipment-header){
    --sp-text: #111111;
    --sp-muted: #6b7280;
    --sp-line: rgba(17,17,17,.10);
    --sp-line-strong: rgba(17,17,17,.16);
    --sp-tile-bg: #f3f4f6;
  
    /* Figma-style button/icon */
    --sp-icon-bg: #111111;     /* black circle/square */
    --sp-icon-fg: #ffffff;     /* white cart icon */
  }
  
  /* 1) Hide category completely on cards (only show name) */
  #sp-equipment-browser ul.products li.product .woocommerce-loop-product__category,
  #sp-equipment-browser ul.products li.product .posted_in,
  #sp-equipment-browser ul.products li.product .product-category,
  #sp-equipment-browser ul.products li.product .ast-woo-product-category,
  #sp-equipment-browser ul.products li.product .ast-woo-shop-product-category{
    display: none !important;
  }
  
  /* 2) Title smaller + allow more characters */
  #sp-equipment-browser ul.products li.product .woocommerce-loop-product__title{
    font-size: 14px !important;      /* smaller than before */
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  
    -webkit-line-clamp: 3 !important; /* show more */
    min-height: 52px !important;      /* stable height for 3 lines */
  }
  
  /* 3) Price bar spacing + prevent button shrinking on narrow screens */
  #sp-equipment-browser ul.products li.product .sp-pricebar{
    gap: 10px !important;
    min-height: 50px !important;
  }
  
  #sp-equipment-browser ul.products li.product .sp-pricebar .price{
    font-weight: 800 !important;
    color: var(--sp-text) !important;
  }
  
  /* If you have a "/ day" element, keep it muted */
  #sp-equipment-browser ul.products li.product .sp-pricebar .sp-unit-day{
    color: var(--sp-muted) !important;
    opacity: 1 !important;
  }
  
  /* 4) Cart button = ICON ONLY (no text), fixed size always */
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn{
    flex: 0 0 auto !important;     /* key: never shrink */
    width: 40px !important;
    height: 40px !important;
  
    border-radius: 999px !important; /* figma-style circle */
    background: var(--sp-icon-bg) !important;
    border: 1px solid rgba(17,17,17,.10) !important;
  
    box-shadow: none !important;
  }
  
  /* Hide “Add to Quote” text inside the button (keep SVG only) */
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn .sp-sr-only{
    display: none !important;
  }
  
  /* Cart icon color/size */
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn .sp-cart-svg{
    width: 20px !important;
    height: 20px !important;
    fill: var(--sp-icon-fg) !important;
  }
  
  /* Hover */
  #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn:hover{
    filter: brightness(.95) !important;
    transform: none !important;
  }
  
  /* 5) (Optional) tighten card a touch to match figma density */
  #sp-equipment-browser ul.products li.product{
    border-color: var(--sp-line) !important;
  }
  
  #sp-equipment-browser ul.products li.product:hover{
    border-color: var(--sp-line-strong) !important;
  }
  
  /* =========================================================
     SP — ADD TO CART: hide default Woo notices + "View cart" text
     Scope: only on pages that have the SP equipment header
     ========================================================= */
  body:has(#sp-book-equipment-header) .woocommerce-notices-wrapper,
  body:has(#sp-book-equipment-header) .woocommerce-message,
  body:has(#sp-book-equipment-header) .woocommerce-error,
  body:has(#sp-book-equipment-header) .woocommerce-info,
  body:has(#sp-book-equipment-header) .wc-block-components-notice-banner,
  body:has(#sp-book-equipment-header) .wc-block-store-notices{
    display: none !important;
  }
  
  /* Hide the "View cart" link Woo adds after ajax add-to-cart (next to your icon) */
  body:has(#sp-book-equipment-header) #sp-equipment-browser a.added_to_cart.wc-forward{
    display: none !important;
  }
  
  /* If any accessible label text is rendering next to the icon, hide it visually */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-pricebar .sp-sr-only{
    display: none !important;
  }
  
  /* =========================================================
     SP — Toast notifications (under header cart icon)
     ========================================================= */
  body:has(#sp-book-equipment-header) #sp-toast-host{
    position: fixed;
    right: 22px;
    top: calc(var(--sp-adminbar, 0px) + 76px); /* adjust if you want it lower/higher */
    z-index: 1000002; /* higher than your bar, below Astra dropdown (1000001+) is fine */
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 44px));
    pointer-events: none;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast{
    pointer-events: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    padding: 16px 18px 16px 18px;
    position: relative;
    opacity: 0;
    transform: translateY(-6px);
    animation: spToastIn .18s ease forwards;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast.is-hiding{
    animation: spToastOut .22s ease forwards;
  }
  
  @keyframes spToastIn{
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes spToastOut{
    to { opacity: 0; transform: translateY(-6px); }
  }
  
  body:has(#sp-book-equipment-header) .sp-toast h4{
    margin: 0 0 6px 0;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.02em;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast p{
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    color: rgba(0,0,0,.55);
    font-weight: 500;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast .sp-toast-close{
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #111;
    font-size: 22px;
    line-height: 1;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast .sp-toast-close:hover{
    background: rgba(0,0,0,.06);
  }
  /* =========================================================
     SP — Toast tweaks: ~40% smaller + longer fade
     (put this at the VERY END of your CSS)
     ========================================================= */
  
  body:has(#sp-book-equipment-header) #sp-toast-host{
    width: min(320px, calc(100vw - 44px)); /* smaller overall */
    gap: 8px;
  }
  
  /* Smaller toast box */
  body:has(#sp-book-equipment-header) .sp-toast{
    padding: 10px 12px;
    border-radius: 12px;
    animation: spToastIn .36s ease forwards; /* longer fade in */
  }
  
  /* Longer fade out */
  body:has(#sp-book-equipment-header) .sp-toast.is-hiding{
    animation: spToastOut .40s ease forwards; /* longer fade out */
  }
  
  /* Smaller typography (~40% smaller) */
  body:has(#sp-book-equipment-header) .sp-toast h4{
    font-size: 20px;   /* was 34px */
    margin: 0 0 4px 0;
  }
  
  body:has(#sp-book-equipment-header) .sp-toast p{
    font-size: 16px;   /* was 26px */
    line-height: 1.25;
  }
  
  /* Smaller close button */
  body:has(#sp-book-equipment-header) .sp-toast .sp-toast-close{
    width: 26px;
    height: 26px;
    border-radius: 8px;
    right: 8px;
    top: 6px;
    font-size: 18px;
  }
  /* =========================================================
     FIX: Toast close (×) perfectly centered + correct proportions
     (put AFTER the toast sizing rules)
     ========================================================= */
  
  body:has(#sp-book-equipment-header) .sp-toast .sp-toast-close{
    /* force a true square hit area */
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  
    /* perfect centering */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    /* prevent font baseline weirdness */
    line-height: 1 !important;
    font-size: 18px !important;
  
    /* make it feel clickable but not huge */
    border-radius: 8px !important;
  }
  
  /* optional: keep hover consistent */
  body:has(#sp-book-equipment-header) .sp-toast .sp-toast-close:hover{
    filter: none !important;
    background: rgba(0,0,0,.06) !important;
  }
  /* =========================================================
     SP icon button: prevent Woo/Astra "added" visuals
     ========================================================= */
  
  /* Hide any Woo-generated "View cart" link anywhere inside cards */
  #sp-equipment-browser ul.products li.product a.added_to_cart,
  #sp-equipment-browser ul.products li.product a.wc-forward{
    display:none !important;
  }
  
  /* If Astra/Woo adds a checkmark via pseudo-elements on the button, kill them */
  #sp-equipment-browser a.sp-icon-btn::after,
  #sp-equipment-browser a.sp-icon-btn::before,
  #sp-equipment-browser a.sp-icon-btn.added::after,
  #sp-equipment-browser a.sp-icon-btn.added::before{
    content: none !important;
    display:none !important;
  }
  
  /* Make the button a true centered icon container */
  #sp-equipment-browser a.sp-icon-btn{
    position: relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  
  /* Force both SVGs to be centered + same size */
  #sp-equipment-browser a.sp-icon-btn .sp-cart-svg,
  #sp-equipment-browser a.sp-icon-btn .sp-check-svg{
    width: 20px !important;
    height: 20px !important;
    fill: #fff !important;
    display:block !important;
  }
  
  /* Default state: show cart, hide check */
  #sp-equipment-browser a.sp-icon-btn .sp-check-svg{ display:none !important; }
  
  /* Temp added state: show check, hide cart */
  #sp-equipment-browser a.sp-icon-btn.is-added-temp .sp-cart-svg{ display:none !important; }
  #sp-equipment-browser a.sp-icon-btn.is-added-temp .sp-check-svg{ display:block !important; }
  
  /* =========================================================
     SP — LOCK HEADER + PAGE CONTENT TO SAME LEFT EDGE
     (fixes Astra wide-screen misalignment)
     Paste at VERY BOTTOM
     ========================================================= */
  
  body:has(#sp-book-equipment-header){
    /* TWEAK THESE TWO NUMBERS ONLY */
    --sp-page-max: 1200px;  /* try 1100px / 1128px / 1200px */
    --sp-page-pad: 32px;    /* try 18px / 24px / 32px */
  }
  
  /* 1) Make the header BACKGROUND full-bleed, but constrain its CONTENT */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  
  /* If you DO have .sp-inner, this works */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-inner{
    max-width: var(--sp-page-max) !important;
    margin: 0 auto !important;
    padding-left: var(--sp-page-pad) !important;
    padding-right: var(--sp-page-pad) !important;
  }
  
  /* If you DON'T have .sp-inner, force the same container on the actual rows */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-date-row,
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pills{
    max-width: var(--sp-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sp-page-pad) !important;
    padding-right: var(--sp-page-pad) !important;
  }
  
  /* 2) Constrain sidebar + product grid to SAME container as header content */
  body:has(#sp-book-equipment-header) #sp-equipment-browser{
    max-width: var(--sp-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sp-page-pad) !important;
    padding-right: var(--sp-page-pad) !important;
  
    /* keep your layout stable */
    width: 100% !important;
  }
  
  /* 3) Prevent the grid from “running to the edge” / overflow weirdness */
  body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products{
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* =========================================
     SP Sidebar — radio selected circle = black
     ========================================= */
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar input[type="radio"]{
    accent-color: #111111 !important; /* easiest + matches figma */
  }
  
  /* If some theme styles override accent-color, force it harder */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar input[type="radio"]:checked{
    accent-color: #111111 !important;
  }
  
  /* =========================================
     SP Sidebar — Reset button (Figma centered pill)
     Drop-in: paste at VERY END of your CSS
     ========================================= */
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar .sp-reset-all{
    /* center reliably in any layout */
    display: flex !important;              /* (not inline-flex) */
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;         /* if sidebar is a flex column */
  
    width: max-content !important;         /* shrink to content */
    max-width: calc(100% - 24px) !important;
    margin: 14px auto 0 !important;        /* horizontal centering */
  
    /* figma-ish sizing */
    height: 36px !important;
    padding: 0 18px !important;
  
    border-radius: 999px !important;
    border: 1px solid #C6C6C6 !important;
    background: #FFFFFF !important;
  
    color: #111111 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  
    box-shadow: none !important;
    cursor: pointer !important;
  }
  
  /* subtle hover */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar .sp-reset-all:hover{
    background: rgba(17,17,17,.04) !important;
  }
  
  /* optional: if some wrapper still prevents centering, this forces it */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
    text-align: center !important;
  }
  
  /* ----------------------------
     Fix: don’t center the whole sidebar
  ----------------------------- */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
    text-align: left !important;  /* put sidebar text back to normal */
  }
  
  /* ----------------------------
     Keep Reset button centered only
  ----------------------------- */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar .sp-reset-all{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* ----------------------------
     Force Sort label + dropdown LEFT aligned
  ----------------------------- */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar #sp-sort-wrap{
    text-align: left !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar #sp-sort-wrap > div{
    text-align: left !important; /* the “Sort” label */
  }
  /* =========================================================
     SP Sidebar title (e.g. "Camera (4)") — match Figma
     Paste at VERY END
     ========================================================= */
  
  /* 1) Preferred: if your sidebar title is a heading */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar h1:first-of-type,
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar h2:first-of-type,
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar h3:first-of-type{
    font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: 20px !important;     /* Figma-ish */
    font-weight: 590 !important;    /* close to SF Pro Semibold */
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #1A1A1A !important;
    margin: 0 0 14px 0 !important;
  }
  
  /* 2) Fallback: if the title is NOT a heading (div/p/etc.)
     Targets the first direct child text block in the sidebar. */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar > :first-child{
    font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: 16px !important;
    font-weight: 590 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #1A1A1A !important;
    margin: 0 0 14px 0 !important;
  }
  
  /* =========================================================
     SP — Tabs: remove dotted focus outline
     ========================================================= */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill:focus,
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill:active{
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Optional: also remove focus ring only when it's mouse-click (keeps keyboard focus) */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill:focus:not(:focus-visible){
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* If Astra adds an outline on inner elements */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill *:focus{
    outline: none !important;
  }
  
  /* =========================================================
     SP — Cards: NEVER underline title + NEVER green price
     Paste at VERY END of your CSS
     ========================================================= */
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product a,
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product a:visited,
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product a:hover{
    text-decoration: none !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product .woocommerce-loop-product__title{
    text-decoration: none !important;
  }
  
  /* Astra/Woo sometimes colors prices green — hard override */
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product .price,
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product .price *,
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product .amount{
    color: #111111 !important;
  }
  
  /* Make sure our icon button never gets hidden by theme states */
  body:has(#sp-book-equipment-header) #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Also kill any default focus outline on product title links (optional) */
  body:has(#sp-book-equipment-header) #sp-equipment-browser a:focus,
  body:has(#sp-book-equipment-header) #sp-equipment-browser a:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* =========================================================
     FIX: Cart icon overflows card on smaller widths
     - allow the price row to wrap
     - keep cart button pinned to the right
     - shrink button slightly on small screens
     ========================================================= */
  
  /* Always: prevent flex children from forcing overflow */
  #sp-equipment-browser ul.products li.product .sp-pricebar{
    min-width: 0 !important;
  }
  
  #sp-equipment-browser ul.products li.product .sp-pricebar .price{
    min-width: 0 !important;
  }
  
  /* Small cards: allow wrap so button never exits the card */
  @media (max-width: 980px){
    #sp-equipment-browser ul.products li.product .sp-pricebar{
      flex-wrap: wrap !important;
      row-gap: 8px !important;
      align-items: flex-end !important;
    }
  
    /* Let price take full row if needed */
    #sp-equipment-browser ul.products li.product .sp-pricebar .price{
      flex: 1 1 100% !important;
      white-space: normal !important;
    }
  
    /* Keep button on the right (new line if necessary) */
    #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn{
      margin-left: auto !important;
    }
  }
  
  /* Even smaller: reduce icon button size */
  @media (max-width: 640px){
    #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn{
      width: 36px !important;
      height: 36px !important;
    }
    #sp-equipment-browser ul.products li.product .sp-pricebar a.sp-icon-btn .sp-cart-svg{
      width: 18px !important;
      height: 18px !important;
    }
  }
  /* =========================================================
     SP — Card typography: smaller title + price (all screen sizes)
     Paste at VERY END
     ========================================================= */
  
  /* Equipment name (title) */
  #sp-equipment-browser ul.products li.product .woocommerce-loop-product__title{
    font-size: 14px !important;   /* was 14–15 */
    line-height: 1.1 !important;
  }
  
  /* Price row */
  #sp-equipment-browser ul.products li.product .sp-pricebar .price{
    font-size: 12px !important;   /* makes $ smaller */
    line-height: 1.1 !important;
  }
  
  /* If Woo wraps amounts in .amount, enforce it too */
  #sp-equipment-browser ul.products li.product .sp-pricebar .price .amount{
    font-size: 15px !important;
    line-height: 1 !important;
  }
  
  /* "/ day" text */
  #sp-equipment-browser ul.products li.product .sp-pricebar .sp-unit-day{
    font-size: 12px !important;
  }
  /* =========================================================
     SP — Responsive grid 4→3→2→1 + keep sidebar left longer
     Paste at VERY END
     ========================================================= */
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser{
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  
  /* Keep sidebar fixed, grid flexible */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
    flex: 0 0 230px !important;
    width: 230px !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid{
    flex: 1 1 auto !important;
    min-width: 0 !important; /* critical: allows grid to shrink instead of dropping */
  }
  
  /* Force Woo product list into a real CSS grid */
  body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* default = 4 */
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Make li.product behave nicely inside grid */
  body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products li.product{
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* ---------- 4 → 3 columns ---------- */
  @media (max-width: 1280px){
    body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  
  /* ---------- 3 → 2 columns (still keep sidebar on the left) ---------- */
  @media (max-width: 980px){
    body:has(#sp-book-equipment-header) #sp-equipment-browser{
      gap: 22px !important;
    }
  
    /* Optional: slightly narrower sidebar so 2-col grid fits beside it */
    body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
      flex: 0 0 210px !important;
      width: 210px !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  
  /* ---------- 2 → 1 column (mobile: stack sidebar above grid) ---------- */
  @media (max-width: 700px){
    body:has(#sp-book-equipment-header) #sp-equipment-browser{
      flex-direction: column !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
      width: 100% !important;
      flex: 0 0 auto !important;
      position: relative !important;
      top: auto !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid ul.products{
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
  }
  /* =========================================================
     HARD LOCK: never stack sidebar+grid until <=700px
     (fixes mystery breakpoints from Astra/other snippets)
     Paste at VERY END
     ========================================================= */
  
  /* Force row layout on tablet widths */
  @media (min-width: 701px){
    body:has(#sp-book-equipment-header) #sp-equipment-browser{
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: flex-start !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
      flex: 0 0 230px !important;
      width: 230px !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser #sp-grid{
      flex: 1 1 auto !important;
      min-width: 0 !important;  /* critical */
    }
  }
  
  /* Your intended stack point */
  @media (max-width: 700px){
    body:has(#sp-book-equipment-header) #sp-equipment-browser{
      flex-direction: column !important;
    }
  
    body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
      width: 100% !important;
      flex: 0 0 auto !important;
    }
  }