/* Webboll Page Builder - Frontend CSS */

/* Section */
.wpb-section { width: 100%; box-sizing: border-box; }
.wpb-section--full .wpb-section-inner { max-width: 100% !important; padding: 0 !important; }
.wpb-section-inner { box-sizing: border-box; }

/* Grid - inline style ile override edilir, bu sadece fallback */
.wpb-columns-grid {
    display: grid;
    grid-template-columns: repeat(var(--wpb-cols, 1), 1fr);
    gap: 24px;
    box-sizing: border-box;
}

/* Column */
.wpb-column { box-sizing: border-box; min-width: 0; }

/* Block */
.wpb-block { box-sizing: border-box; }

/* Responsive grid - data attribute ile */
@media (max-width: 768px) {
    .wpb-columns-grid[data-col-tablet="1"] { grid-template-columns: 1fr !important; }
    .wpb-columns-grid[data-col-tablet="2"] { grid-template-columns: repeat(2, 1fr) !important; }
    .wpb-columns-grid[data-col-tablet="3"] { grid-template-columns: repeat(3, 1fr) !important; }
    .wpb-columns-grid[data-col-tablet="4"] { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 480px) {
    .wpb-columns-grid[data-col-mobile="1"] { grid-template-columns: 1fr !important; }
    .wpb-columns-grid[data-col-mobile="2"] { grid-template-columns: repeat(2, 1fr) !important; }
    .wpb-hide-mobile { display: none !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .wpb-hide-tablet { display: none !important; }
}
@media (min-width: 769px) {
    .wpb-hide-desktop { display: none !important; }
}

/* Sticky / Fixed */
.wpb-sticky { position: sticky; top: 0; z-index: 100; }
.wpb-fixed  { position: fixed;  top: 0; z-index: 100; }

/* -- SLIDER ------------------------------------------------- */
.wsl-slider { position: relative; overflow: hidden; user-select: none; }
.wsl-track  { display: flex; height: 100%; }
.wsl-slide  { min-width: 100%; height: 100%; position: relative; overflow: hidden; flex-shrink: 0; }
.wsl-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsl-bg-color { position: absolute; inset: 0; }
.wsl-layers { position: absolute; inset: 0; }
.wsl-layer  { position: absolute; opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.wsl-layer.on { opacity: 1; }

/* -- WOOCOMMERCE --------------------------------------------- */
.wpb-add-to-cart { transition: opacity .2s; }
.wpb-add-to-cart:hover { opacity: .85; }

/* -- ANIMATION ----------------------------------------------- */
[data-wpb-anim] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-wpb-anim].wpb-animated { opacity: 1; transform: none; }