/**
 * Custom overrides for Codazon ThemeLayoutPro generated stylesheets.
 *
 * The theme's product-view-styles.css / main-styles.css under
 * pub/media/codazon/themelayout/ are regenerated whenever the theme layout is
 * saved in admin, so overrides must not be made there. Those files are injected
 * after theme assets by Codazon\ThemeLayoutPro\Helper\Data::getCssScript(),
 * hence !important is required here.
 */

/* Drop the reviews-summary bottom padding on desktop. */
@media only screen and (min-width: 768px) {
    .product-view-style-01 .product-main-wrapper .product-reviews-summary {
        padding-bottom: 0 !important;
    }
}

/* Unify image swatch sizing on the product page. Magento_Swatches::css/swatches.css
   is removed in default_head_blocks.xml, so sizes must be stated explicitly. */
body.catalog-product-view .swatch-attribute .swatch-attribute-options .swatch-option.image,
body.catalog-product-view .product-options-wrapper .swatch-option.image {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    background-size: contain !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 6px !important;
}
/* Mobile account sidebar: make both nav blocks behave like plain collapsible bars.

   Three stylesheets disagree about this markup:

     - Magento blank hides `.account-nav .title` with the visually-hidden mixin at
       every breakpoint (Magento_Customer/_module.less), assuming the mobile toggle
       is a separate `.block-collapsible-nav .title`.
     - ThemeLayoutPro's generated main-styles.css re-shows it below 768px, but as a
       35x35 icon button pinned at `top:-40px; right:0` with `strong { font-size: 0 }`,
       and hides the panel with `.block.account-nav .content { height:0; opacity:0;
       visibility:hidden }`. It is revealed only by `.block.account-nav.active .content`
       (wrapper gets the class -- what Codazon's `collapsible` widget does) or by
       `.sidebar .content.account-nav-content.active`.
     - Webkul_Marketplace::account/navigation.phtml reuses BOTH class names on one
       wrapper (`block account-nav block-collapsible-nav wk-mp-main`) but toggles with
       `toggleAdvanced`, which puts `active` on the CONTENT div and names it
       `block-collapsible-nav-content`. Neither reveal selector matches, so the seller
       menu stays at height 0 / opacity 0 no matter how often the bar is tapped.

   Below 768px: put both blocks in the flow as labelled bars and accept either
   "active" convention when revealing the panel. !important throughout because
   ThemeLayoutPro injects its generated stylesheets after all theme assets
   (Codazon\ThemeLayoutPro\Helper\Data::getCssScript). */
@media only screen and (max-width: 767px) {
    /* Blank puts .block-collapsible-nav out of flow at top:-21px so it can overlay
       the page title; with two of these blocks stacked that just makes them collide. */
    .sidebar .block.account-nav {
        position: static !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 0 10px !important;
    }

    .sidebar .block.account-nav > .title {
        clip: auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        height: auto !important;
        width: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        display: block !important;
        cursor: pointer;
        padding: 12px 40px 12px 15px !important;
        text-align: left !important;
        border: 1px solid #d1d1d1 !important;
        border-radius: 3px !important;
        background: #fff !important;
        color: #333 !important;
    }

    /* The icon-button styling shrinks the label to font-size 0 and swaps in a
       CodazonFont glyph; both bars need readable text instead. */
    .sidebar .block.account-nav > .title strong {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    .sidebar .block.account-nav > .title strong:before {
        display: none !important;
    }

    .sidebar .block.account-nav > .title:after {
        content: '\e622';
        font-family: 'icons-blank-theme';
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -14px;
    }

    .sidebar .block.account-nav.active > .title:after,
    .sidebar .block.account-nav > .title.active:after {
        content: '\e621';
    }

    /* Reveal on either convention: `.active` on the wrapper (collapsible widget,
       customer nav) or on the content itself (toggleAdvanced, marketplace nav). */
    .sidebar .block.account-nav.active > .content,
    .sidebar .block.account-nav > .content.active {
        height: auto !important;
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
        visibility: visible !important;
        overflow: visible !important;
        transform: translateY(0) !important;
        margin-bottom: 20px !important;
    }
}