/*
Theme Name: One Club
Theme URI: https://github.com/elementor/hello-theme/
Description: Det handlar om kreativitet och uttryck. Genom unika plagg och inspirerande design ger vi dig möjligheten att berätta din historia. Varje t-shirt, hoodie och keps är mer än bara mode
– det är ett budskap, en känsla, en berättelse. Tillsammans skapar vi något unikt, där konst, stil och personlighet möts.
Author: Aurora Profil
Author URI: https://www.auroraprofil.se/
Template: hello-elementor
Version: 2.0.0
Text Domain: oneclub
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Tablet (768px till 1024px) */
@media (min-width: 768px) and (max-width: 1024px) { body { margin: 10px; } }


/* WooCommerce */
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th { background-color: transparent; }
table tbody tr:hover > td, table tbody tr:hover > th { background-color: transparent; }
table th, table td { padding: 5px 5px 0 0 !important; text-align: left !important; border: 0px !important; vertical-align: middle !important; }
table th.label { width: 100px !important; }

/*****************************************
** Kod som styr färgringarna i swatches **
*****************************************/	
.sps-swatches > .swatchColor { border: 1px solid #cccccc !important; margin: 0 3px !important; }
.sps-swatches > .swatchColor, .sps-swatches > .swatchColor > div { width: 20px !important; height: 20px !important; line-height: 0; }
.sps-swatches > .swatchColor:hover, .sps-swatches .swatch:hover, .sps-swatches .swatch-label-circle:hover, .sps-swatches .swatch-label-square:hover { border: 1px solid #81d742 !important; }
.sps-swatches .swatch, .sps-swatches .swatch-label-circle, .sps-swatches .swatch-label-square { border: 1px solid #000000 !important; }
.sps-swatches .swatch-label-circle .selected, 
.sps-swatches .swatch.selected, 
.sps-swatches > .swatchColor.selected,
.sps-swatches .swatch-label-circle.selected { border: 1px solid #81d742 !important; }


/******************
** Scroll - menu **
******************/
.elementor-nav-menu__container { top: 0px !important; }
#menuhopin.headershow { transform: translateY(0); }

#menuhopin { position: fixed; z-index: 99999!important; top:0; width: 100%; -webkit-transition: transform 0.34s ease; transition : transform 0.34s ease; transform: translateY(-130px); /*adjust this value to the height of your header*/ }
#menuhopin { background: #ffffff; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); }


#menuhopin-tablet.headershow { transform: translateY(0); }

#menuhopin-tablet { position: fixed; z-index: 99999 !important; top:0; left:0; width: 100%; -webkit-transition: transform 0.34s ease; transition : transform 0.34s ease; transform: translateY(-100px); /*adjust this value to the height of your header*/ }
#menuhopin-tablet { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); }


/**********************************
** Kod som styr produktkort Main **
**********************************/

/* Förhindra att andra kort påverkas vid hover */
.jet-listing-grid, 
.jet-listing-grid__items, 
.jet-listing-grid__item {
  position: relative; 
  overflow: visible;
  z-index: auto;
}

.main-product-card-container {
    position: relative;
    overflow: visible;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 250px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gör så att kortet flyter över de andra vid hover */
.main-product-card-container:hover {
    position: absolute;
    z-index: 9999; /* Se till att den är högre än andra element */
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(1.05); /* Ger en lyfteffekt */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Styr info-rutan */
.main-product-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10;
}

.main-product-card-container:hover .main-product-info {
    transform: translateY(0);
    opacity: 1;
}

/* Göm text, knappar och menyer tills hover */
.main-product-text,
.main-product-button,
.main-product-menu {
    display: none;
}

.main-product-card-container:hover .main-product-text,
.main-product-card-container:hover .main-product-button,
.main-product-card-container:hover .main-product-menu {
    display: block;
}

/* Bild-container */
.main-product-image-container {
    position: relative;
    overflow: visible;
}

/* Meny som visas vid hover */
.main-product-menu {
    position: absolute;
    top: 40px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-product-card-container:hover .main-product-menu {
    opacity: 1;
    transform: translateX(0);
}



/*************************************
** Kod som fixar rubriker i slidern **
*************************************/

/* Gäller alla rubriker inom Depicter-slidern */
/* H1 */
.depicter h1 {
    font-size: 2.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 2.2rem !important;
    font-family: var(--e-global-typography-primary-font-family), sans-serif !important;
}

/* H2 */
.depicter h2 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 2.5rem !important;
    font-family: var(--e-global-typography-secondary-font-family), sans-serif !important;
}

/* H3 */
.depicter h3 {
    font-size: 1.8rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 1.8rem !important;
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
}

/* H4 */
.depicter h4 {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    line-height: 1rem !important;
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
}

/* H5 */
.depicter h5 {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 2rem !important;
    font-family: var(--e-global-typography-text-font-family), sans-serif !important;
}

/* Gäller vanlig brödtext inom slidern */
.depicter p,
.depicter span,
.depicter div {
    font-family: 'Rubik', sans-serif !important;
}