/*
Theme Name: Twenty Twenty-Five for Only Wrong Things
Template: twentytwentyfive
Version: 0.9.4
Author: Mediadistributions
Description: Child theme of Twenty Twenty-Five for OnlyWrongThings.com
*/


/* --------------------------------------------------------
   1. GLOBAL DESKTOP BACKGROUND & MOBILE WRAPPER
   -------------------------------------------------------- */
body {
    background-color: #f3f4f6;
    margin: 0;
    padding: 0;
}

.owt-shop-main-wrapper {
    width: 100%;
    max-width: 480px;      /* Locks desktop width to mobile proportions */
    margin: 0 auto;        /* Centers the column on desktop */
    background-color: #ffffff;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
    overflow-x: hidden;
}

/* --------------------------------------------------------
   2. THE 85VH HERO CONTAINER
   -------------------------------------------------------- */
.owt-shop-hero {
    width: 100%;
    height: 85vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes the headline & CTA to the bottom */
    overflow: hidden;
}

/* --------------------------------------------------------
   3. FULL-HEIGHT CAROUSEL (Acts as Background)
   -------------------------------------------------------- */
.product-carousel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Forces wrapper to fill the 85vh hero */
    z-index: 1;
}

.product-slider {
    display: flex;
    width: 100%;
    height: 100%; /* Forces slider track to fill wrapper */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hides scrollbar globally */
.product-slider::-webkit-scrollbar {
    display: none;
}

.slider-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%; /* Forces image to fill the 85vh height */
    object-fit: cover; /* Crops center perfectly without squishing */
    object-position: center center;
    scroll-snap-align: start;
    display: block;
}

/* --------------------------------------------------------
   4. SLIDER NAVIGATION BUTTONS (No Media Queries)
   -------------------------------------------------------- */
.slider-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%; /* Invisible tap hotspot covering edges */
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0;
    user-select: none;
}

.slider-btn-prev {
    left: 0;
    justify-content: flex-start;
}

.slider-btn-next {
    right: 0;
    justify-content: flex-end;
}

/* Permanently visible, touch-friendly arrow circles */
.slider-btn::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border-radius: 50%;
    font-size: 20px;
}

.slider-btn-prev::before {
    content: '\276E';
    margin-left: 12px;
}

.slider-btn-next::before {
    content: '\276F';
    margin-right: 12px;
}

/* --------------------------------------------------------
   5. TEXT OVERLAY, SCRIM & BUTTON
   -------------------------------------------------------- */
.owt-shop-hero-content {
    position: relative;
    z-index: 2; /* Sits above the absolute carousel */
    padding: 32px 24px;
    width: 100%;
    box-sizing: border-box; /* Prevents padding from breaking width */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff;
}

.owt-shop-headline {
    font-size: clamp(24px, 6vw, 32px); /* Fluid size, no media queries */
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 16px;
    text-shadow: 0px 2px 8px rgba(0,0,0,0.6);
}

/* Ensure the button matches your brand and fills the column */
.owt-shop-buy-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    background-color: #ff3b30; /* High contrast CTA color */
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 8px;
}