/* ═══════════════════════════════════════════════════════════
   PAGE BUILDER — frontend structural CSS
   Enqueued only on a singular post/page with _lx_pb_enabled set
   (see inc/page-builder-render.php). Per-node dynamic values
   (colors, spacing, backgrounds, responsive overrides) are inline
   style / the collected <style id="lx-pb-css"> block — this file
   only carries what's the same for every instance: the structural
   grid, enum-shaped style tiers, and animation keyframes.
   ═══════════════════════════════════════════════════════════ */

.lx-pb-page {
    /* isolates builder content from ambient page.php/theme spacing rules
       it no longer sits inside (.section, .content-wrap padding, etc.) */
    width: 100%;
}

.lx-pb-section {
    position: relative;
    width: 100%;
}

.lx-pb-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.lx-pb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.lx-pb-column {
    flex: 1 1 0;
    min-width: 0; /* a flex child's automatic min-width is its content's, which is what let a long word push a narrow column wider than its share */
}

.lx-pb-element {
    max-width: 100%;
}

.lx-pb-heading {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.lx-pb-text {
    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.7;
}
.lx-pb-text p { margin: 0 0 1em; }
.lx-pb-text p:last-child { margin-bottom: 0; }

/* ─── Responsive visibility ──────────────────────────────────
   Mirrors the Advanced Builder's lx-el--desktop-only/--mobile-only
   split into three explicit tiers, matching this system's own
   tablet/mobile breakpoints (1024 / 767) used for the dynamic CSS. */
@media (min-width: 1025px) {
    .lx-pb-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .lx-pb-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
    .lx-pb-hide-mobile { display: none !important; }
    .lx-pb-row { gap: 16px; }
    .lx-pb-container { padding: 0 18px; }
}

/* ─── Shadow tiers (md matches the theme's own --shadow token) ─ */
.lx-pb-shadow-sm { box-shadow: 0 2px 12px rgba(14, 12, 11, .08); }
.lx-pb-shadow-md { box-shadow: var(--shadow); }
.lx-pb-shadow-lg { box-shadow: 0 20px 60px rgba(14, 12, 11, .16); }

/* ─── Animation (load-triggered; no scroll-observer JS is shipped
       to the frontend for this — see Phase 2 report) ───────── */
.lx-pb-anim {
    animation-fill-mode: both;
    animation-timing-function: ease;
}
@keyframes lx-pb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-pb-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lx-pb-fade-down { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes lx-pb-zoom-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lx-pb-slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes lx-pb-slide-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

.lx-pb-anim--fade-in { animation-name: lx-pb-fade-in; }
.lx-pb-anim--fade-up { animation-name: lx-pb-fade-up; }
.lx-pb-anim--fade-down { animation-name: lx-pb-fade-down; }
.lx-pb-anim--zoom-in { animation-name: lx-pb-zoom-in; }
.lx-pb-anim--slide-left { animation-name: lx-pb-slide-left; }
.lx-pb-anim--slide-right { animation-name: lx-pb-slide-right; }

@media (prefers-reduced-motion: reduce) {
    .lx-pb-anim { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Basic + Content element pack (Phase 5)
   ═══════════════════════════════════════════════════════════ */

/* ─── Button ─────────────────────────────────────────────── */
.lx-pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
    white-space: nowrap;
}
.lx-pb-btn--solid { background: var(--ink); color: var(--cream); }
.lx-pb-btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lx-pb-btn--outline { background: transparent; color: var(--ink); }
.lx-pb-btn--outline:hover { background: var(--ink); color: var(--cream); }
.lx-pb-btn--ghost { background: transparent; border-color: transparent; color: var(--ink); }
.lx-pb-btn--ghost:hover { color: var(--gold); }
.lx-pb-btn--sm { padding: 8px 18px; font-size: 13px; }
.lx-pb-btn--md { padding: 12px 28px; font-size: 15px; }
.lx-pb-btn--lg { padding: 16px 36px; font-size: 16px; }

/* ─── Image ──────────────────────────────────────────────── */
.lx-pb-image { margin: 0; }
.lx-pb-image-img { display: block; width: 100%; height: auto; border-radius: inherit; }
.lx-pb-image-caption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ─── Spacer / Divider ──────────────────────────────────── */
.lx-pb-spacer { width: 100%; }
.lx-pb-divider { display: block; }

/* ─── Icon ───────────────────────────────────────────────── */
.lx-pb-icon-wrap { display: inline-flex; color: var(--gold); }
.lx-pb-icon-svg { display: block; }

/* ─── List ───────────────────────────────────────────────── */
.lx-pb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body);
    color: var(--ink);
}
.lx-pb-list--bullet .lx-pb-list-item { padding-left: 20px; position: relative; }
.lx-pb-list--bullet .lx-pb-list-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
.lx-pb-list-item { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.lx-pb-list--check .lx-pb-list-item .lx-pb-icon-svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* ─── Icon Box ───────────────────────────────────────────── */
.lx-pb-iconbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.lx-pb-iconbox--center { align-items: center; text-align: center; }
.lx-pb-iconbox--left { align-items: flex-start; text-align: left; }
.lx-pb-iconbox-icon { color: var(--gold); }
.lx-pb-iconbox-heading {
    font-family: var(--font-display);
    color: var(--ink);
    margin: 0;
    font-size: 20px;
}
.lx-pb-iconbox-text {
    font-family: var(--font-body);
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

/* ─── Testimonial ────────────────────────────────────────── */
.lx-pb-testimonial {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lx-pb-testimonial-stars { display: flex; gap: 2px; }
.lx-pb-star { color: var(--border); }
.lx-pb-star.is-filled { color: var(--gold); }
.lx-pb-testimonial-quote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-style: italic;
    color: var(--ink);
    line-height: 1.5;
}
.lx-pb-testimonial-author { display: flex; align-items: center; gap: 12px; }
.lx-pb-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.lx-pb-testimonial-author-text { display: flex; flex-direction: column; }
.lx-pb-testimonial-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.lx-pb-testimonial-role { font-size: 12px; color: var(--muted); }

/* ─── Call to Action ─────────────────────────────────────── */
.lx-pb-cta { display: flex; flex-direction: column; gap: 14px; }
.lx-pb-cta--center { align-items: center; text-align: center; }
.lx-pb-cta--left { align-items: flex-start; text-align: left; }
.lx-pb-cta-heading { font-family: var(--font-display); color: var(--ink); margin: 0; font-size: 28px; }
.lx-pb-cta-text { font-family: var(--font-body); color: var(--muted); margin: 0; max-width: 560px; line-height: 1.6; }

/* ─── Alert ──────────────────────────────────────────────── */
.lx-pb-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 6px;
    font-family: var(--font-body);
    line-height: 1.5;
}
.lx-pb-alert-icon { flex-shrink: 0; margin-top: 1px; }
.lx-pb-alert--info { background: #eef3f8; color: #2c4a63; }
.lx-pb-alert--success { background: #e9f5ec; color: #2e6b3e; }
.lx-pb-alert--warning { background: var(--gold-light); color: #5a4415; }
.lx-pb-alert--error { background: #fbeceb; color: var(--red); }

/* ─── Accordion (native <details>/<summary>, no JS) ─────── */
.lx-pb-accordion { display: flex; flex-direction: column; gap: 10px; }
.lx-pb-accordion-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.lx-pb-accordion-title {
    padding: 14px 18px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lx-pb-accordion-title::-webkit-details-marker { display: none; }
.lx-pb-accordion-title::after {
    content: "+";
    font-size: 18px;
    color: var(--gold);
    transition: transform var(--tr);
    flex-shrink: 0;
    margin-left: 12px;
}
.lx-pb-accordion-item[open] .lx-pb-accordion-title::after { transform: rotate(45deg); }
.lx-pb-accordion-body {
    padding: 0 18px 16px;
    color: var(--muted);
    font-family: var(--font-body);
    line-height: 1.6;
}
.lx-pb-accordion-body p:first-child { margin-top: 0; }
.lx-pb-accordion-body p:last-child { margin-bottom: 0; }

/* ─── Gallery ────────────────────────────────────────────── */
.lx-pb-gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}
.lx-pb-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.lx-pb-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.lx-pb-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
.lx-pb-gallery-item {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1;
}
.lx-pb-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tr);
}
.lx-pb-gallery-item:hover img { transform: scale(1.06); }

@media (max-width: 767px) {
    .lx-pb-gallery--cols-3, .lx-pb-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   WordPress + WooCommerce element pack (Phase 6)
   Product Grid / Products by ID reuse .pgrid/.pcard/.lx-prail —
   already fully styled elsewhere in this file, nothing new here.
   ═══════════════════════════════════════════════════════════ */

/* ─── Menu ───────────────────────────────────────────────── */
.lx-pb-menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lx-pb-menu[style*="center"] .lx-pb-menu-list { justify-content: center; }
.lx-pb-menu[style*="right"] .lx-pb-menu-list { justify-content: flex-end; }
.lx-pb-menu-list a {
    font-family: var(--font-body);
    color: var(--ink);
    text-decoration: none;
    transition: color var(--tr);
}
.lx-pb-menu-list a:hover { color: var(--gold); }
.lx-pb-menu-list ul { list-style: none; margin: 4px 0 0 16px; padding: 0; }

/* ─── Search form ────────────────────────────────────────── */
.lx-pb-search-form form { display: flex; gap: 8px; max-width: 420px; }
.lx-pb-search-form input[type="search"],
.lx-pb-search-form input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-body);
}
.lx-pb-search-form button,
.lx-pb-search-form input[type="submit"] {
    padding: 10px 18px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
}
.lx-pb-search-form button:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ─── Recent posts ───────────────────────────────────────── */
.lx-pb-recentposts { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.lx-pb-recentposts--cols-1 { grid-template-columns: 1fr; }
.lx-pb-recentposts--cols-2 { grid-template-columns: repeat(2, 1fr); }
.lx-pb-recentposts--cols-3 { grid-template-columns: repeat(3, 1fr); }
.lx-pb-recentpost {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow var(--tr);
}
.lx-pb-recentpost:hover { box-shadow: var(--shadow); }
.lx-pb-recentpost-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.lx-pb-recentpost-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.lx-pb-recentpost-title { font-family: var(--font-display); color: var(--ink); margin: 0; font-size: 18px; }
.lx-pb-recentpost-date { font-size: 12px; color: var(--muted); }
.lx-pb-recentpost-excerpt { font-family: var(--font-body); color: var(--muted); margin: 4px 0 0; line-height: 1.6; font-size: 14px; }

@media (max-width: 767px) {
    .lx-pb-recentposts--cols-2, .lx-pb-recentposts--cols-3 { grid-template-columns: 1fr; }
}

/* ─── Custom HTML / Shortcode wrappers ───────────────────── */
.lx-pb-custom-html, .lx-pb-shortcode { max-width: 100%; overflow-x: auto; }

/* ─── Product categories grid ────────────────────────────── */
.lx-pb-catgrid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.lx-pb-catgrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.lx-pb-catgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.lx-pb-catgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.lx-pb-catcard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: var(--warm);
    transition: box-shadow var(--tr);
}
.lx-pb-catcard:hover { box-shadow: var(--shadow); }
.lx-pb-catcard-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lx-pb-catcard-img--placeholder { background: linear-gradient(135deg, var(--gold-light), var(--warm)); }
.lx-pb-catcard-body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-pb-catcard-name { font-family: var(--font-display); color: var(--ink); font-size: 16px; }
.lx-pb-catcard-count { font-size: 12px; color: var(--muted); }

@media (max-width: 767px) {
    .lx-pb-catgrid--cols-3, .lx-pb-catgrid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   SECTION CONTENT WIDTH
   `boxed` is .lx-pb-container above and stays the default. These
   two exist because the homepage renders through the builder now:
   the theme's own hero and product rails set their own width and
   bleed to the viewport edge, so boxing them would visibly shrink
   a page that used to be full-bleed. See lauxuria_pb_render_section().
   ═══════════════════════════════════════════════════════════ */
.lx-pb-container--wide { max-width: 1360px; padding: 0 32px; }

@media (max-width: 767px) {
    .lx-pb-container--wide { padding: 0 18px; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT RAIL
   Structure only. Everything an admin can change about a rail —
   columns, gap, card radius, image ratio, which parts of a card
   show — compiles to CSS scoped to that one node's #lx-pb-<id>
   (lauxuria_pb_rail_css()), so two rails on one page can look
   nothing alike without either of them reaching the other, the
   shop archive, or the search results.
   ═══════════════════════════════════════════════════════════ */
.lx-pb-rail { position: relative; }

.lx-pb-rail .lx-pb-rail-grid { display: grid; }

/* Heading alignment. The shipped rail head is a flex row with the copy left
   and "View All" right; centring it means the link drops under the copy
   rather than being pushed off the centre line by it. */
.lx-pb-rail--head-center .lx-sec-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.lx-pb-rail--head-center .lx-sec-head-text { align-items: center; text-align: center; }

.lx-pb-rail--head-right .lx-sec-head { flex-direction: row-reverse; }
.lx-pb-rail--head-right .lx-sec-head-text { text-align: right; }

/* Slider layout is a scroll container rather than a JS carousel: scroll-snap
   gives it the same feel with no script, and it degrades to a plain
   horizontal scroll wherever snap is unsupported. */
.lx-pb-rail--slider .lx-pb-rail-grid { scrollbar-width: thin; }
.lx-pb-rail--slider .lx-pb-rail-grid::-webkit-scrollbar { height: 6px; }
.lx-pb-rail--slider .lx-pb-rail-grid::-webkit-scrollbar-thumb {
    background: rgba(14, 12, 11, .18);
    border-radius: 3px;
}