/*
Theme Name: TIV.NET
Template:   storefront
Version:    1.0.0
*/

.storefront-sorting {
    display: none;
}

#site-header-cart {
    /*display: none;*/
}

footer .site-info {
    /*display: none;*/
}

.site-footer {
    padding: 0;
}

.product_meta {
    display: none
}

.site-search {
    /*display: none*/
}

.hentry .entry-content .wp-block-button .wp-block-button__link, .editor-styles-wrapper .wp-block-button .wp-block-button__link {
    border-radius: 2em;
}

/*.woocommerce-product-gallery__wrapper,*/
.wc-block-grid__product-image,
ul.products li.product .woocommerce-LoopProduct-link {
    border: 1px solid #ddd;
}

.wc-block-grid__products .wc-block-grid__product-image {
    min-height: 362px;
}

ul.products li.product .woocommerce-LoopProduct-link {
    min-height: 360px;
    margin-bottom: 15px;
}


h2 {
    font-weight: 400
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments, .demo_store {
    color: #ffffff;
    background-color: hsl(240, 40%, 40%);
}

/*
 From Storefront customizer
 */

.site-header, .secondary-navigation ul ul, .main-navigation ul.menu > li.menu-item-has-children:after, .secondary-navigation ul.menu ul, .storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.menu-toggle, button.menu-toggle:hover,
.main-navigation ul.menu ul.sub-menu {
    color: #ffffff;
    background-color: hsl(171, 90%, 27%);
}

p.site-description, .site-header, .site-branding .site-title a, #masthead a, #site-navigation a, .storefront-handheld-footer-bar, a.wp-block-button__link.has-background {
    color: #ffffff;
}

.woopaywall-table-my-products .woopaywall_expired .order-status {
    color: red;
}

/* Tweaks */
/* Storefront's own desktop breakpoint (~1064px), kept in its em unit to stay in step. */
@media (min-width: 66.4989378333em) {
    .storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide, .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
        width: auto;
        max-width: 1000%;
        padding-left: 0;
        padding-right: 0;
        clear: both;
    }
}

.wp-block-media-text .wp-block-media-text__media {
    margin: 0 10px 0 10px;
}

/*
 *Hide the header
 */
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    /*opacity: 0;*/
}

.site-branding a {
    /*display: none;*/
}

/* Page colors */
#page {
    background-color: #f5f5f5;
    color: #000;
}

h1, h2, h3 {
    color: #7c56a3;
}

/**
 * Post layout: thumbnail floats left, body text wraps around it.
 * On narrow screens the thumbnail unfloats and sits on top.
 */
.tiv-post-layout {
    display: flow-root;
}

.tiv-post-thumb {
    float: left;
    margin: 0 1.5em 1em 0;
    max-width: 50%;
}

/* Storefront sets `clear: both` on headings; undo that inside the wrap */
.tiv-post-layout h1,
.tiv-post-layout h2,
.tiv-post-layout h3,
.tiv-post-layout h4,
.tiv-post-layout h5,
.tiv-post-layout h6 {
    clear: none;
}

/* 600px: the width at which WordPress core stacks blocks (media-text). */
@media (max-width: 600px) {
    .tiv-post-thumb {
        float: none;
        margin: 0 0 1em 0;
        max-width: 100%;
    }
}

/* Fix posts block */
.wp-block-query .wp-block-post-featured-image {
    max-width: 400px !important;
    margin: 0 !important;
}

.wp-post-image {
    border: 1px solid #aaa !important;
}

.wp-block-post-date {
    display: none
}

.hentry .entry-content h2 a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.hentry .entry-content h2 a:hover {
    border-bottom: 1px dotted black;
}

/* Do not center the text on shop description */
.storefront-full-width-content .woocommerce-products-header {
    text-align: initial;
}

/* Style preformatted text */
.entry-content pre {
    background: transparent;
    border: 1px solid #aaa;
}

/*
 Side-by-side media-text only: core stacks it at max-width 600px, so the border
 starts at 601px - at exactly 600px the block is already stacked.
 */
@media (min-width: 601px) {
    .home .wp-block-media-text img {
        border-right: solid silver 1px;
    }

    .home .wp-block-media-text.has-media-on-the-right img {
        border-right: none;
        border-left: solid silver 1px;
    }
}

.secondary-navigation {
    width: auto !important;
    margin-right: 0 !important;
}

/* Storefront's menu breakpoint: desktop menus at 768px and up, handheld below. */
@media (min-width: 768px) {
    .main-navigation ul li, .secondary-navigation ul li {
        margin: 0 4px;
    }
}

/* ==========================================================================
 Switchers (tiv-switcher library: WooMC currency, tiv-globus language)
 ========================================================================== */

/*
 Currency/language switchers in the header (desktop and handheld): white dropdown
 panel, dark text. "#masthead a { color: #fff }" above is an ID selector and would
 paint the links white on the white panel - and on hover, the library's inherited
 hover color is that same white. Repeating #masthead here outranks both without
 !important. Hover background is the library's own light grey.
 */
#masthead .tiv-switcher-list {
    background-color: #ffffff;
}

/*
 Also undo Storefront's submenu-link styling, which reaches the language items (<a>)
 but not the currency items (<button>): ".secondary-navigation .menu ul a" gives a
 permanent 5% grey background (so hover changed nothing), its own padding (plus
 1em extra on the first/last item), and "ul ul li a" a fixed 200px width.
 Background reset at this specificity also beats the library's hover rule, so the
 hover is restated here with the library's own variable.
 */
#masthead .tiv-switcher-list .tiv-switcher-link {
    color: #000000;
    background: none;
    padding: var(--tiv-switcher-item-padding);
    width: 100%;
}

#masthead .tiv-switcher-list .tiv-switcher-link:hover,
#masthead .tiv-switcher-list .tiv-switcher-link:focus {
    background: var(--tiv-switcher-hover-bg);
}