/* Book Grid (Alma) Elementor widget.
   Scoped under .woo-books-grid-widget so it cannot collide with the
   inline-CSS copies still used by the [woo_books_my_books] shortcode and
   order/account views.

   TWO selectable styles (Elementor "Grid Style" control), isolated by a
   modifier class on the .woo-books-bookshelf container:
     • .wbg-style-classic — clean white "product cards" matching the
       /he/books/ shop grid: cover floating on white, centered navy title,
       a thin divider, and a centered primary-blue button.
     • .wbg-style-shelf   — the 3D "floating bookshelf": CSS-3D hardcover
       books (after realvjy's 3D book, codepen.io/realvjy/pen/KKEdXOa) on a
       white metal board, per-row cubby scenes, JS re-chunking.

   Theme tokens come from BuddyBoss CSS custom properties with literal
   fallbacks captured from the live theme. */

.woo-books-grid-widget {
    --wbg-primary: var(--bb-primary-color, #4261AD);
    --wbg-btn-bg: var(--bb-primary-button-background-regular, #4261AD);
    --wbg-btn-bg-hover: var(--bb-primary-button-background-hover, #B9BDE0);
    --wbg-btn-text: var(--bb-primary-button-text-regular, #FFFFFF);
    --wbg-heading: var(--bb-heading-text-color, #1E2132);
    --wbg-text: var(--bb-body-text-color, #5A5A5A);
    --wbg-border: var(--bb-content-border-color, #D6D9DD);
    --wbg-surface: var(--bb-content-background-color, #FFFFFF);
    --wbg-surface-alt: var(--bb-content-alternate-background-color, #F2F4F5);
    --wbg-radius: var(--bb-block-radius, 10px);
    --wbg-btn-radius: var(--bb-button-radius, 6px);
    --wbg-card-w: 190px;
    --wbg-gap: 34px;
    --wbg-book-d: 34px;   /* book thickness */
    --wbg-tilt: 26deg;    /* resting shelf tilt of each book */
    margin: 8px 0 56px;
    text-align: center;
}

/* Section heading — theme heading color with a short primary accent bar
   (shared by both styles) */
.woo-books-grid-widget .woo-books-grid-heading {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wbg-heading);
    text-align: center;
    margin: 0;
}

.woo-books-grid-widget .woo-books-grid-heading::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--wbg-primary);
    margin: 12px auto 0;
}

/* =====================================================================
   PRODUCT CARDS — matches the /he/books/ shop grid (the Elementor
   woocommerce-products widget, BuddyBoss-themed): clean white cards with
   a soft offset shadow, a cover floating on white, a centered navy title,
   a thin divider, and a centered primary-blue button. No JS, no price.
   Captured values: card radius 10px, shadow 4px 0 10px rgba(0,0,0,.15);
   title #263553 16/600 centered; button border-top #D6D9DD, primary text.
   ===================================================================== */

/* Flexbox grid (not CSS grid) so a partial last row CENTERS instead of
   sitting at the row start. Card width is computed per column count; full
   rows fill edge-to-edge, the trailing row is centered by justify-content. */
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-classic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 40px 20px;            /* row / column, matching the shop grid */
    max-width: 1200px;
    margin: 20px auto;
    padding: 6px 0;
}

/* The card — width derives from the Columns control (column gap = 20px) */
.woo-books-grid-widget .wbg-style-classic .woo-books-book {
    flex: 0 0 auto;
    width: calc((100% - 1 * 20px) / 2);   /* default 2-up */
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Card width per Columns control at desktop; 2-up tablet (base), 1-up phone */
@media (min-width: 768px) {
    .woo-books-grid-widget .wbg-style-classic.columns-2 .woo-books-book { width: calc((100% - 1 * 20px) / 2); }
    .woo-books-grid-widget .wbg-style-classic.columns-3 .woo-books-book { width: calc((100% - 2 * 20px) / 3); }
    .woo-books-grid-widget .wbg-style-classic.columns-4 .woo-books-book { width: calc((100% - 3 * 20px) / 4); }
    .woo-books-grid-widget .wbg-style-classic.columns-5 .woo-books-book { width: calc((100% - 4 * 20px) / 5); }
    .woo-books-grid-widget .wbg-style-classic.columns-6 .woo-books-book { width: calc((100% - 5 * 20px) / 6); }
}

@media (max-width: 479px) {
    .woo-books-grid-widget .wbg-style-classic .woo-books-book { width: 100%; }
}

.woo-books-grid-widget .wbg-style-classic .woo-books-book:hover {
    transform: translateY(-4px);
    box-shadow: 4px 6px 18px 0 rgba(0, 0, 0, 0.18);
}

/* Cover floats on white (book mockups / flat covers both centre cleanly) */
.woo-books-grid-widget .wbg-style-classic .woo-books-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 22px 22px 8px;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
}

.woo-books-grid-widget .wbg-style-classic .woo-books-cover img,
.woo-books-grid-widget .wbg-style-classic .book-cover-placeholder {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* The product mockups are mostly opaque (white-background) JPEGs; multiply
   blends that white into the white card so there's no visible square, while
   the mockup's own baked-in shadow still shows. */
.woo-books-grid-widget .wbg-style-classic .woo-books-cover img {
    mix-blend-mode: multiply;
}

.woo-books-grid-widget .wbg-style-classic .book-cover-placeholder {
    width: 70%;
    height: 80%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eee, #f8f8f8);
    color: #999;
}

.woo-books-grid-widget .wbg-style-classic .book-cover-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

/* Centered navy title (theme heading colour) */
.woo-books-grid-widget .wbg-style-classic .woo-books-title {
    display: block;
    padding: 10px 14px 12px;
    color: var(--wbg-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woo-books-grid-widget .wbg-style-classic .woo-books-title:hover {
    color: var(--wbg-primary);
}

/* Button: a full-width footer link with a thin divider on top (the shop
   card's "add to cart" treatment) — primary colour, centered, no price. */
.woo-books-grid-widget .wbg-style-classic .woo-books-read-button {
    display: block;
    margin-top: auto;
    padding: 13px 12px;
    border-top: 1px solid var(--wbg-border);
    background: #fff;
    color: var(--wbg-primary);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.woo-books-grid-widget .wbg-style-classic .woo-books-read-button:hover {
    background: var(--wbg-surface-alt);
    color: var(--wbg-heading);
}

/* =====================================================================
   3D BOOKSHELF — the floating-shelf style (scoped under .wbg-style-shelf)
   ===================================================================== */

/* ---------------------------------------------------------------- case -- */

.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf {
    --wbg-case-pad: 0px;
    /* floating shelves: no case around the books, so modest side air */
    --wbg-cubby-pad: 64px;
    /* board strip below each cubby (the shelf's visible thickness) */
    --wbg-plank-front: 18px;
    display: block;
    margin: 30px auto 10px;
    padding: 0;
    /* floating shelves: no case box — just the boards (see .woo-books-shelf) */
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* The widget's Columns control caps the case width (cards stay fixed-size) */
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf.columns-2 { max-width: calc(2 * var(--wbg-card-w) + 1 * var(--wbg-gap) + 2 * (var(--wbg-case-pad) + var(--wbg-cubby-pad))); }
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf.columns-3 { max-width: calc(3 * var(--wbg-card-w) + 2 * var(--wbg-gap) + 2 * (var(--wbg-case-pad) + var(--wbg-cubby-pad))); }
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf.columns-4 { max-width: calc(4 * var(--wbg-card-w) + 3 * var(--wbg-gap) + 2 * (var(--wbg-case-pad) + var(--wbg-cubby-pad))); }
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf.columns-5 { max-width: calc(5 * var(--wbg-card-w) + 4 * var(--wbg-gap) + 2 * (var(--wbg-case-pad) + var(--wbg-cubby-pad))); }
.woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf.columns-6 { max-width: calc(6 * var(--wbg-card-w) + 5 * var(--wbg-gap) + 2 * (var(--wbg-case-pad) + var(--wbg-cubby-pad))); }

/* -------------------------------------------------------------- cubby -- */

/* The cubby is a clipped 3D stage, after the "book shelf cuboid" pen Ron
   referenced (codepen.io/OzCodes/pen/ZERyQjX): strong 500px perspective,
   deep cuboid, faces sized to the cubby so the perspective shrink REVEALS
   the cubby background at the edges — that reveal is the side panels. */
.woo-books-grid-widget .woo-books-shelf {
    --wbs-depth: 120px;
    /* white shelf */
    --wbs-floor: #F4F5F8;       /* board top surface (brushed silver) */
    --wbs-board: #F0F1F5;       /* board front edge */
    --wbs-shadow: #4A4E58;      /* shadow ink */
    position: relative;
    /* no clipping in the floating-shelf look: hovered books must paint OVER
       the board (the row handles its own scroll fallback) */
    overflow: visible;
    /* thin metal front edge: vertical sheen via border-image */
    border-bottom: var(--wbg-plank-front) solid var(--wbs-board);
    border-image: linear-gradient(180deg, #FFFFFF 0%, #F2F4F7 45%, #DDE0E7 100%) 1;
    background: none;
    margin-bottom: 30px;
    /* soft shadow under the board's bottom edge only (filter: drop-shadow
       would flatten the 3D transforms inside) */
    box-shadow: 0 14px 12px -11px rgba(74, 78, 88, 0.18);
}

.woo-books-grid-widget .woo-books-shelf:last-child {
    margin-bottom: 0;
}

.woo-books-grid-widget .wbs-scene {
    position: absolute;
    inset: 0;
    perspective: 500px;
    pointer-events: none;
}

.woo-books-grid-widget .wbs-cuboid {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.woo-books-grid-widget .wbs-face {
    position: absolute;
}

/* Back wall — hidden in the floating-shelf look (only the board remains) */
.woo-books-grid-widget .wbs-face--back {
    display: none;
}

/* Floor plane — lies into the screen from the cubby's bottom edge */
.woo-books-grid-widget .wbs-face--floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--wbs-depth);
    transform-origin: bottom center;
    transform: rotateX(90deg);
    background:
        /* brushed-metal grain: anisotropic SVG fractal noise (long
           horizontal streaks), seamless tile, very low alpha */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.45 0 0 0 0 0.5 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        /* in shade at the back, light catching the front edge */
        linear-gradient(180deg, #E3E5EA 0%, var(--wbs-floor) 60%, #FCFDFE 96%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 1px 2px 0 rgba(74, 78, 88, 0.15);
}

/* Brushed grain on the board's front edge too (overlays the border zone;
   positioned pseudos paint above borders) */
.woo-books-grid-widget .woo-books-shelf::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--wbg-plank-front));
    height: var(--wbg-plank-front);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.43 0 0 0 0 0.48 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The scrolling row of books, layered in front of the 3D interior. */
.woo-books-grid-widget .wbs-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--wbg-gap);
    padding: 38px var(--wbg-cubby-pad) 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    box-shadow: none; /* no case above in the floating-shelf look */
}

.woo-books-grid-widget .wbs-row::-webkit-scrollbar {
    display: none;
}

/* book-grid.js adds .wbg-fit when every shelf's books fit the width: the
   rows stop clipping, so a hovered book pulled toward the viewer overlaps
   the board in FRONT of it (no-JS keeps the scroll fallback above) */
.woo-books-grid-widget .wbg-fit .wbs-row {
    overflow-x: visible;
}

.woo-books-grid-widget .woo-books-shelf:hover {
    z-index: 2;
}

.woo-books-grid-widget .wbg-style-shelf .woo-books-book:hover {
    z-index: 3;
}

/* Safe centering: centers when the shelf fits, stays reachable when it
   overflows and scrolls (justify-content:center would clip the row start) */
.woo-books-grid-widget .woo-books-shelf .woo-books-book:first-child { margin-inline-start: auto; }
.woo-books-grid-widget .woo-books-shelf .woo-books-book:last-child { margin-inline-end: auto; }

/* ------------------------------------------------------- the 3D book -- */

/* The card is a transparent column holding the 3D book. */
.woo-books-grid-widget .wbg-style-shelf .woo-books-book {
    position: relative;
    flex: 0 0 var(--wbg-card-w);
    width: var(--wbg-card-w);
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    overflow: visible;
    scroll-snap-align: center;
    perspective: 1100px;
}

/* The book itself: a 3D scene resting at a shelf-display tilt */
.woo-books-grid-widget .wbg-style-shelf .woo-books-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transform: rotateY(var(--wbg-tilt));
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.25, 1);
    text-decoration: none;
}

/* Hover pulls the book OUT of the case toward the viewer (and turns it
   partly toward you), like taking it off the shelf */
.woo-books-grid-widget .wbg-style-shelf .woo-books-book:hover .woo-books-cover {
    transform: translateZ(88px) rotateY(9deg);
}

/* Front cover (Hebrew binding: spine on the right, opening on the left —
   so the left corners are the rounded page-side ones) */
.woo-books-grid-widget .wbg-style-shelf .woo-books-cover img,
.woo-books-grid-widget .wbg-style-shelf .book-cover-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transform: translateZ(calc(var(--wbg-book-d) / 2));
    border-radius: 6px 2px 2px 6px;
    box-shadow:
        inset 4px 0 6px -4px rgba(255, 255, 255, 0.5),
        inset -6px 0 8px -6px rgba(0, 0, 0, 0.4),
        0 6px 5px -4px rgba(18, 20, 26, 0.32),
        0 14px 18px -10px rgba(18, 20, 26, 0.3);
    backface-visibility: hidden;
    transition: box-shadow 0.55s ease;
}

/* Pulled-out book throws a longer, softer shadow back onto the shelf */
.woo-books-grid-widget .wbg-style-shelf .woo-books-book:hover .woo-books-cover img,
.woo-books-grid-widget .wbg-style-shelf .woo-books-book:hover .book-cover-placeholder {
    box-shadow:
        inset 4px 0 6px -4px rgba(255, 255, 255, 0.5),
        inset -6px 0 8px -6px rgba(0, 0, 0, 0.4),
        0 12px 9px -6px rgba(18, 20, 26, 0.25),
        0 24px 30px -14px rgba(18, 20, 26, 0.35);
}

.woo-books-grid-widget .wbg-style-shelf .book-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #39476B, var(--wbg-primary));
    color: rgba(255, 255, 255, 0.85);
}

.woo-books-grid-widget .wbg-style-shelf .book-cover-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

/* Page block: paper fore-edge on the LEFT (where a Hebrew book opens) */
.woo-books-grid-widget .wbg-style-shelf .woo-books-cover::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: var(--wbg-book-d);
    transform: translateX(calc(var(--wbg-book-d) / -2 + 3px)) rotateY(90deg);
    background: linear-gradient(90deg,
        #FFFFFF 0%, #F4F0E4 6%, #FFFFFF 12%, #F4F0E4 18%, #FFFFFF 24%,
        #F4F0E4 30%, #FFFFFF 36%, #F4F0E4 42%, #FFFFFF 48%, #F4F0E4 54%,
        #FFFFFF 60%, #F4F0E4 66%, #FFFFFF 72%, #F4F0E4 78%, #FFFFFF 84%,
        #F4F0E4 90%, #FFFFFF 96%, #EFEADB 100%);
    border-radius: 1px;
}

/* Back cover */
.woo-books-grid-widget .wbg-style-shelf .woo-books-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--wbg-book-d) / -2));
    background: linear-gradient(105deg, #1B1E2C, #2A2F45 60%, #232738);
    border-radius: 6px 2px 2px 6px;
    /* the book's shadow on the wall behind: cast from the back-cover plane
       so the 3D projection skews it naturally (light from upper-left) */
    box-shadow: 14px 18px 30px 0 rgba(15, 17, 22, 0.15);
    transition: box-shadow 0.55s ease;
}

/* a pulled-out book moves away from the wall: its wall shadow drifts
   further, grows and softens */
.woo-books-grid-widget .wbg-style-shelf .woo-books-book:hover .woo-books-cover::before {
    box-shadow: 30px 36px 50px 6px rgba(15, 17, 22, 0.13);
}

/* ------------------------------------------------------------ focus -- */

.woo-books-grid-widget .wbg-style-shelf .woo-books-cover:focus-visible {
    outline: 2px solid var(--wbg-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* -------------------------------------------------------- animation -- */

/* One orchestrated load: books rise into place, then settle into their
   display tilt (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
    .woo-books-grid-widget .wbg-style-shelf .woo-books-book {
        animation: wbg-rise 0.45s ease-out backwards;
    }

    .woo-books-grid-widget .wbg-style-shelf .woo-books-book:nth-child(2) { animation-delay: 0.06s; }
    .woo-books-grid-widget .wbg-style-shelf .woo-books-book:nth-child(3) { animation-delay: 0.12s; }
    .woo-books-grid-widget .wbg-style-shelf .woo-books-book:nth-child(4) { animation-delay: 0.18s; }
    .woo-books-grid-widget .wbg-style-shelf .woo-books-book:nth-child(5) { animation-delay: 0.24s; }
    .woo-books-grid-widget .wbg-style-shelf .woo-books-book:nth-child(n+6) { animation-delay: 0.3s; }

    .woo-books-grid-widget .woo-books-shelf .woo-books-cover {
        animation: wbg-tilt 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.5s backwards;
    }

    /* book-grid.js adds .wbg-settled after the entrance, so books moved
       between shelves during responsive re-chunking don't replay it */
    .woo-books-grid-widget .wbg-settled .woo-books-book,
    .woo-books-grid-widget .wbg-settled .woo-books-cover {
        animation: none;
    }
}

@keyframes wbg-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes wbg-tilt {
    from {
        transform: rotateY(0deg);
    }
}

/* ------------------------------------------------------ empty states -- */
/* (shared by both styles) */

.woo-books-grid-widget .woo-books-empty-notice {
    padding: 18px 22px;
    background: var(--wbg-surface-alt);
    border: 1px solid var(--wbg-border);
    border-inline-start: 4px solid var(--wbg-primary);
    border-radius: var(--wbg-btn-radius);
    color: var(--wbg-text);
    margin: 20px auto;
    max-width: 600px;
    text-align: start;
}

.woo-books-grid-widget .woo-books-grid-placeholder {
    padding: 40px 20px;
    border: 2px dashed var(--wbg-border);
    border-radius: var(--wbg-radius);
    color: var(--wbg-text);
    background: var(--wbg-surface-alt);
}

/* ------------------------------------------ 3D bookshelf — responsive -- */

@media (max-width: 959px) {
    .woo-books-grid-widget {
        --wbg-card-w: 168px;
        --wbg-gap: 26px;
        --wbg-book-d: 30px;
    }

    .woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf {
        --wbg-cubby-pad: 40px;
    }
}

@media (max-width: 599px) {
    .woo-books-grid-widget {
        --wbg-card-w: 118px;
        --wbg-gap: 14px;
        --wbg-book-d: 22px;
        margin-bottom: 40px;
    }

    .woo-books-grid-widget .woo-books-grid-heading {
        font-size: 22px;
    }

    .woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf {
        --wbg-case-pad: 0px;
        --wbg-cubby-pad: 28px;
        --wbg-plank-front: 13px;
        margin-top: 24px;
    }

    .woo-books-grid-widget .woo-books-shelf {
        --wbs-depth: 70px;
    }

    .woo-books-grid-widget .wbs-row {
        padding-top: 26px;
        padding-bottom: 10px;
    }
}

@media (max-width: 359px) {
    .woo-books-grid-widget {
        --wbg-card-w: 104px;
        --wbg-gap: 12px;
        --wbg-book-d: 18px;
    }

    .woo-books-grid-widget .woo-books-bookshelf.wbg-style-shelf {
        --wbg-cubby-pad: 20px;
    }
}