/**
 * Theme Name: Hello Elementor child
 * Template:   hello-elementor
 */
  

/**************************************************************
 * Hide the WooCommerce breadcrum, which is include by  the
 * 'woocommerce_before_main_content' action hook to the layout
 *************************************************************/

nav.woocommerce-breadcrumb {
    display: none;
}

.th-nc-store-header {
    margin-bottom: 24px;
}

.th-nc-store-footer {
    margin-top: 48px;
    margin-bottom: 48px;
}


/**************************************************************
 * The default font specification
 *
 *  --e-global-color-primary: #FFB803;      orange
 *  --e-global-color-secondary: #3855BA;    blue
 *  --e-global-color-text: #595959;         dark gray
 *  --e-global-color-accent: #008125;       green
 *  --e-global-color-b011710: #000000;      black
 *  --e-global-color-3ad5bb1: #FFFFFF;      white
 *  --e-global-color-8a8f950: #FFFFFF;      white
 *  --e-global-color-6a97e5b: #FFFFFF;      white
 *  --e-global-color-42d16ae: #CA0004;      red
 *  --e-global-color-fe07b55: #ECECEC;      light gray
 *  --e-global-color-991c9c4: #BFBFBF;      medium gray
 *
 * Font:
 * box-sizing border-box;
 * color: var(--e-global-color-text);
 * display: block;
 * font-family: HelveticaNowDisplay-Regular, sans-serif;
 * font-size: 20px;
 * font-weight: 400;
 * height: 30px;
 * letter-spacing: normal;
 * line-height: 33px;
 * text-size-adjust: 100%;
 * width 811.007px;
 *
 *************************************************************/
 
:root {
    --th-nc-store-font-family: HelveticaNowDisplay-Regular, sans-serif;
    --th-nc-store-font-size: 20px;
    --th-nc-store-font-weight: 400;
    --th-nc-store-line-height: 33px;
}


/**************************************************************
 * Base layout of <pre> HTML element
 *************************************************************/

.th-nc-store-info-column pre {
    margin-top: 12pt;
    display: block;
    color: var(--e-global-color-text);
    font-family: var(--th-nc-store-font-family);
    font-size: var(--th-nc-store-font-size);
    font-weight: var(--th-nc-store-font-weight);
    line-height: var(--th-nc-store-line-height);
}


/***********************************************************
 * General layout specifications for HTML elements
 **********************************************************/

/* Margin of lists */

.th-nc-store-description ul {
    margin-top: 12pt;
}


/***********************************************************
 * Create an overall responsive two column layout
 **********************************************************/

.th-nc-store-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
}
  
.th-nc-store-column {
    padding: 1rem;
    background-color: white
}

/* Responsive */
@media (max-width: 800px) {
    .th-nc-store-container {
        grid-template-columns: 1fr;
    }
}


/***********************************************************
 * The style of the button to open the reviesws
 **********************************************************/

#th-nc-store-review-container #th-nc-store-review-content {
    display: none;
}

#th-nc-store-review-container:target #th-nc-store-review-content {
    display: block;
}

#th-nc-store-review-container:target a {
    display: none;
}

#th-nc-store-review-container a.th-nc-store-review-button {
    padding: 6px 6px;
    border-radius: 5px;
    color: var(--e-global-color-text);
    background-color: var(--e-global-color-primary);
    text-decoration: none;
}


/***********************************************************
 * The style of all parts of the description
 **********************************************************/

.th-nc-store-image {
    margin-right: 24px;
}

.th-nc-store-image img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.th-nc-store-title {
    font-size: 24pt;
}

.th-nc-store-short-description {
    margin-top: 24pt;
    padding: 12pt;
}

.th-nc-store-languages {
    padding-bottom: 12pt;
    padding-left: 12pt;
    padding-right: 12pt;
    margin-bottom: 24px;
}
.th-nc-store-description {
    padding: 12pt;
}


.th-nc-store-variations {
    margin-top: 48pt;
    padding-left: 24pt;
    padding-right: 24pt;
    padding-top: 12pt;
    padding-bottom: 12pt;
}

.th-nc-store-rating {
    margin-top: 48pt;
}

.th-nc-store-review-container {
    margin-top: 24pt;
    margin-bottom: 18pt;
}

/***********************************************************
 * Private overwrites: https://woo.com/de/products/skincare/
 **********************************************************/

/***********************************************************
 * Private overwrites: https://preview.themeforest.net/item/alukas-modern-jewelry-store-wordpress-theme/full_screen_preview/45256351
 **********************************************************/

/***********************************************************
 * https://woo.com/de/products/luminate/
 **********************************************************/

:root {
    --th-nc-store-color: #252a2e;
    --th-nc-store-background-color-1: #f6f5f2;
    --th-nc-store-background-color-2: #b1a596;
    --th-nc-store-font-weight: 300;
    --th-nc-store-font-weight-em: 400;
}
  
.th-nc-store-container {
    color: var(--th-nc-store-color);
    font-weight: var(--th-nc-store-font-weight);
}

.th-nc-store-container .th-nc-store-info-column pre {
    color: var(--th-nc-store-color);
}

.th-nc-store-container .th-nc-store-title {
    font-weight: 400;
}

.th-nc-store-container .th-nc-store-short-description {
    background-color: var(--th-nc-store-background-color-1);
}

.th-nc-store-container .th-nc-store-languages {
    background-color: var(--th-nc-store-background-color-1);
}

.th-nc-store-container .th-nc-store-description {
    background-color: var(--th-nc-store-background-color-1);
    padding-top: 6px;
}
  
.th-nc-store-container .th-nc-store-description em {
    color: var(--th-nc-store-color);
    font-weight: var(--th-nc-store-font-weight-em);
}

.th-nc-store-container .th-nc-store-variations {
    background-color: var(--th-nc-store-background-color-1);
}


/***********************************************************
 * Footer layout
 **********************************************************/

 .th-nc-store-footer-container {
    margin-top: 24pt;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem;
}
  
.th-nc-store-footer-logo-column {
    padding: 1rem;
    background-color: white;
}
  
.th-nc-store-footer-logo-column img {
    height: 50%;
}
  
.th-nc-store-footer-menu-column {
    padding: 1rem;
    background-color: white;
}
  
.th-nc-store-footer-copyright-column {
    padding: 1rem;
    background-color: white;
}
  
.th-nc-store-footer-copyright-column a {
    display: flex; 
    justify-content: right; 
}

/* Center the menu inside the column */
.th-nc-store-footer-menu-div {
    display: flex; 
    justify-content: center; 
}

/* Display the menu horizontal */
.th-nc-store-footer-menu-div li {
    display: inline;
}

/*******************************************************************************************************************
 * Variations block (defined in th-nextcloud-connector/includes/templates/product-variations-block-template.php)
 ******************************************************************************************************************/

 .th-nc-store-variations .th-wc-pvb-row {
    display: grid;
    width: 100%;
}

.th-nc-store-variations .th-wc-pvb-col3 {
    display: grid;
    width: 100%;
}

.th-nc-store-variations .th-wc-pvb-products {
    display: grid;
    width: 100%;
}

.th-nc-store-variations .th-wc-pvb-products-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 4fr 2fr 1fr;
    gap: 1rem;
    width: 100%;
}

/* Responsive */
@media (max-width: 800px) {
    .th-nc-store-variations .th-wc-pvb-products {
        grid-template-columns: 1fr;
    }
}

.th-nc-store-variations .th-wc-pvb-products-col2 {
    text-align: right;
}

.th-nc-store-variations .th-wc-pvb-select-btn {
    background-color: var(--e-global-color-secondary);
    border: none;
    color: white;
    border-radius: 5px;
}