/*
Theme Name: LOL Theme
Theme URI: 
Author: SOHO Studio
Author URI: 
Description: Custom theme for LOL Roma with WooCommerce support.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lol-theme
*/

/* 
 * Reset and Base Styles
 */
:root {
    --text-color: #2c2921;
    --bg-color: #faf5ed;
    --primary-color: #e67e22;
    /* Approssimativo per il logo arancione */
    --border-color: #e2dcd1;
    --font-heading: articulat-cf, sans-serif;
    --font-body: "elza", sans-serif;
}

/* Typography Utility Classes */
.typo-body-13 {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
}

.typo-heading-28 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
}

.typo-heading-20 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
}

.typo-uppercase-12 {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    text-transform: uppercase;
}

.typo-uppercase-12-center {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
}

.typo-body-10-center {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Typography elements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* Utility classes */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* 
 * WooCommerce Custom Single Product
 */
.lol-single-product-container {
    padding: 40px;
    background-color: white;
    margin-bottom: 60px;
}

.lol-product-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 1024px) {
    /* Grid è più affidabile di flex per sticky + scroll naturale */
    .lol-product-layout {
        display: grid;
        grid-template-columns: 1fr 40%;
        gap: 40px;
        align-items: start;
    }
}

/* Left Column - Gallery */
.lol-product-gallery {
    width: 100%;
}

@media (min-width: 1024px) {
    .lol-product-gallery {
        width: auto; /* grid gestisce le dimensioni */
    }
}


/* Basic mockup of the asymmetrical gallery */
.woocommerce-product-gallery__wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}

.woocommerce-product-gallery__image:first-child {
    grid-column: 2;
    grid-row: 1 / span 4;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Right Column - Summary */
.lol-product-summary {
    width: 100%;
    position: relative;
}

@media (min-width: 1024px) {
    .lol-product-summary {
        width: auto; /* grid gestisce le dimensioni */
        position: sticky;
        top: 100px;
        align-self: start; /* OBBLIGATORIO con grid per far funzionare sticky */
        /* offset for sticky header */
    }
}

.lol-product-summary .wishlist-icon {
    width: 20px;
    height: 20px;
    stroke: var(--text-color);
    fill: none;
    cursor: pointer;
}

.lol-product-summary .product_title {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.lol-product-summary .price {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.lol-product-summary .price ins,
.lol-product-summary .price bdi {
    text-decoration: none;
    font-weight: 400;
}

/* Variable Swatches Mock / Add to cart form */
.variations_form {
    margin-bottom: 30px;
}

.variations {
    width: 100%;
    margin-bottom: 20px;
}

.variations label {
    display: block;
    margin-bottom: 15px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Style default select like a box for now, until swatches plugin is active */
.variations select {
    padding: 10px;
    border: 1px solid var(--border-color);
    width: 100%;
    margin-bottom: 10px;
    background: transparent;
    border-radius: 0;
}

/* Nasconde sempre la tabella variazioni — sostituita dagli swatch JS */
.variations_form table.variations {
    display: none !important;
}

/* Swatch container */
.lol-swatch-group {
    margin-bottom: 20px;
}

.lol-swatch-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
}
.mock-swatches {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mock-swatch {
    border: 1px solid transparent;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    background: #f5f3f0;
}

/* Swatch con immagine */
.mock-swatch img {
    display: block;
    width: 90px;
    height: 110px;
    object-fit: cover;
}

/* Swatch solo testo (es. taglie) */
.mock-swatch:not(:has(img)) {
    padding: 10px 15px;
    background: transparent;
    border-color: var(--border-color);
}

.mock-swatch.active {
    border: 1px solid var(--text-color);
}

.size-guide-link {
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 30px;
}

/* Add to cart / Actions wrapper */
.lol-cart-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    align-items: stretch;
    /* Ensure button and heart are same height */
}

/* Add to cart Button */
.lol-cart-actions form.cart {
    flex-grow: 1;
    display: flex;
    margin-bottom: 0;
}

.lol-cart-actions .single_add_to_cart_button {
    background-color: var(--primary-color) !important;
    color: white !important;
    flex-grow: 1;
    padding: 15px !important;
    border: none !important;
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 !important;
    transition: opacity 0.3s;
    margin: 0 !important;
    /* Reset woo default margins */
}

.lol-cart-actions .single_add_to_cart_button:hover {
    opacity: 0.9;
}

/* Nasconde il bottone "Aggiungi al carrello" dopo AJAX add (classe .added) */
.ajax_add_to_cart.added {
    display: none !important;
}

/* "Visualizza carrello" link — stesso stile del bottone */
a.added_to_cart.wc-forward {
    background: transparent;
    color: #999;
    padding: 0;
    text-transform: none;
    font-size: 12px;
    text-decoration: underline;
    border-radius: 0;
    display: inline-block;
    font-weight: 500;
}

.lol-cart-actions a.added_to_cart.wc-forward:hover {
    opacity: 0.9;
}

/* Wishlist Button inside cart actions */
.lol-cart-actions .add-to-wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    border: 1px solid var(--border-color);
    /* Lighter border than text color */
    background: transparent;
    cursor: pointer;
}

/* Accordions */
.lol-product-accordions details {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
}

.lol-product-accordions details:last-child {
    border-bottom: 1px solid var(--border-color);
}

.lol-product-accordions summary {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    /* hide default arrow */
    display: flex;
    justify-content: space-between;
}

.lol-product-accordions summary::-webkit-details-marker {
    display: none;
}

.lol-product-accordions summary::after {
    content: '+';
    font-size: 16px;
    font-weight: normal;
}

.lol-product-accordions details[open] summary::after {
    content: '-';
}

.lol-product-accordions .details-content {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.6;
}

/* Related Products overrides */
.lol-related-products-wrapper {
    background-color: var(--bg-color);
    /* Need to match gray-ish bg from figma if it's different */
    padding: 60px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
}

.lol-related-products-wrapper h2 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 30px;
}

.lol-related-products-wrapper .products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .lol-related-products-wrapper .products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 
 * Variation Swatches Overrides 
 * (Assuming the plugin structure)
 */
.woo-variation-swatches .variable-items-wrapper {
    gap: 10px;
}

.woo-variation-swatches .variable-item {
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px 15px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    color: var(--text-color) !important;
    background: transparent !important;
}

.woo-variation-swatches .variable-item:hover,
.woo-variation-swatches .variable-item.selected {
    border-color: var(--text-color) !important;
}

.woo-variation-swatches .variable-item.image-variable-item {
    padding: 0 !important;
    width: 60px !important;
    height: 80px !important;
}

.woo-variation-swatches .variable-item.image-variable-item img {
    border-radius: 0 !important;
    object-fit: cover !important;
}

.woocommerce-breadcrumb{
	margin: 0 !important
}

.single_add_to_cart_button{
	width: 100% !important
}

/* Custom Gallery Component - Internal logic only */
/* Container della Galleria - Desktop Flex */
.lol-custom-gallery {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch; /* Le miniature si allungano per coprire l'altezza della foto principale */
    line-height: 0; /* Rimuove gap bianchi sotto le immagini */
}

/* Colonna Miniature (Sinistra) */
.gallery-sidebar {
    width: 20%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
	height: 70vh;
}

.sidebar-thumb {
    width: 100%;
    flex: 1; /* Dividono l'altezza totale esattamente in 3 parti */
    cursor: pointer;
    overflow: hidden;
}

/* Immagine Principale (Destra) */
.gallery-main-featured {
    width: 75%;
    margin: 0;
    padding: 0;
}
.gallery-main-featured {
    flex: 1;
    overflow: hidden;
    height: 70vh; /* Altezza fissa per desktop */
    background-color: #f9f9f9;
}

.gallery-main-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene le proporzioni tagliando l'eccesso */
    display: block;
}

/* Regola Universale Immagini: Fondamentale per non avere distorsioni */
.lol-custom-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Taglia l'immagine per riempire il rettangolo senza schiacciarla */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-thumb.active {
    opacity: 0.7;
}

/* =====================================================
   DESKTOP VERTICAL SCROLL GALLERY (nuovo)
   Sostituisce sidebar+main nel template-parts.
   Visibilità gestita dalla sua regola CSS — NON usa
   hide-mobile per evitare il conflitto display:flex !important.
   ===================================================== */

/* Wrapper: hidden su mobile, block su desktop */
.gallery-desktop-wrapper {
    display: none;       /* mobile first */
    background-color: #f9f9f9;
}

@media (min-width: 576px) {
    .gallery-desktop-wrapper {
        display: block;
    }
}

/* Track: nessuna animazione, scorre con la pagina */
.gallery-track {}

/* Slide: larghezza piena, altezza naturale */
.gallery-slide {
    width: 100%;
}

/* Immagine: aspect ratio naturale */
.gallery-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pallini: nascosti su mobile */
.gallery-dots-wrapper {
    display: none;
}

/* Desktop: posizione fissa in basso a sinistra, visibilità controllata da JS */
@media (min-width: 1024px) {
    .gallery-dots-wrapper {
        display: block;
    }

    .gallery-dots {
        position: fixed;
        bottom: 40px;        /* JS sovrascrive dinamicamente */
        left: 40px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 100;
        visibility: hidden;  /* JS: visible quando gallery è a schermo */
        pointer-events: none;
    }

    .gallery-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid #000;
        display: block;
        padding: 0;
        transition: background 0.2s ease;
    }

    .gallery-dot.active {
        background: #000;
    }
}


/* Mobile View: Slider orizzontale compatto */
.gallery-mobile-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    margin-left: calc(50% - 50vw); /* Va a filo con i bordi dello schermo */
    padding: 0;
    gap: 0;
    scrollbar-width: none;
}

.gallery-mobile-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-image-item {
    flex: 0 0 80% !important;
    min-width: 80% !important;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5; /* Rapporto ritratto standard per prodotti moda */
    overflow: hidden;
    line-height: 0;
}

.mobile-image-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Visibility Utilities */
.hide-desktop { display: block; }
.hide-mobile  { display: none; }

@media (min-width: 576px) {
    .hide-desktop { display: none !important; }
    .hide-mobile  { display: flex !important; }
}

@media (min-width: 576px) {
    .hide-desktop { display: none !important; }
    .hide-mobile { display: flex !important; }
}

.reset_variations{
	display: none !important
}

.variations .variation {
	display: none !important;
}


/* WRAPPER CORRETTO (dentro Elementor) */
.page-id-12 .elementor-widget-shortcode .woocommerce {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 50px;
}

.woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce::before{
	content: none !important;
}

/* SIDEBAR */
.elementor-widget-shortcode .woocommerce-MyAccount-navigation {
  width: 220px !important;
  flex: 0 0 220px !important;
  float: none !important;
}

/* CONTENUTO */
.elementor-widget-shortcode .woocommerce-MyAccount-content {
  flex: 1 !important;
  width: auto !important;
  float: none !important;
}

/* FIX GLOBALI (tema che rompe tutto) */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  display: block !important;
}

/* MENU MINIMAL */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation li {
  margin-bottom: 12px;
}

.woocommerce-MyAccount-navigation a {
  text-decoration: none;
  color: #111;
}

/* ACTIVE */
.woocommerce-MyAccount-navigation .is-active a {
  font-weight: 600;
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {
  .elementor-widget-shortcode .woocommerce {
    flex-direction: column !important;
  }

  .elementor-widget-shortcode .woocommerce-MyAccount-navigation {
    width: 100% !important;
  }
}


/* =========================
   MESSAGGI COMPATTI E NETTI
========================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #000;
  background: none;
  font-size: 14px;
  color: #111;
}

/* rimuove icone */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after{
  display: none !important;
}

/* link a destra */
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward {
  margin-left: 20px;

  background: none;
  border: none;
  padding: 0;

  font-size: 14px;
  text-decoration: underline;
  color: #000;
  white-space: nowrap;
}

/* hover */
.woocommerce-message .wc-forward:hover {
  opacity: 0.6;
}



/* =========================
   WRAPPER INDIRIZZI
========================= */
.woocommerce-Addresses {
  display: flex;
  gap: 60px;
  margin-top: 20px;
}

/* singolo blocco */
.woocommerce-Address {
  flex: 1;
}

/* =========================
   TITOLI
========================= */
.woocommerce-Address-title h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* =========================
   LINK "AGGIUNGI / MODIFICA"
========================= */
.woocommerce-Address-title a {
  font-size: 14px;
  text-decoration: underline;
  color: #111;
}

/* rimuove stile bottone */
.woocommerce .woocommerce-Address-title .edit {
  float: none !important;
}

/* =========================
   TESTO INDIRIZZO
========================= */
.woocommerce-Address address {
  font-style: normal;
  line-height: 1.6;
  color: #333;
  margin-top: 10px;
}

/* =========================
   MESSAGGI (tipo "non hai ancora...")
========================= */
.woocommerce-Address p {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
  .woocommerce-Addresses {
    flex-direction: column;
    gap: 30px;
  }
}

.product-actions a {
    position: relative;
    z-index: 10;
}