/**
 * 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;
    }
}

/* Show/hide toggle injected into every password field by js/password-toggle.js.
   The wrapper also carries `.addon` so mage/validation keeps putting the error
   message after the field instead of inside it. */
.nb-password-field.addon {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.nb-password-field > input[type='password'],
.nb-password-field > input[type='text'] {
    width: 100%;
    padding-right: 42px;
    box-sizing: border-box;
}

button.nb-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #757575;
    cursor: pointer;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

button.nb-password-toggle:hover,
button.nb-password-toggle:focus,
button.nb-password-toggle:active {
    color: #1979c3;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

button.nb-password-toggle .nb-password-icon {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.nb-password-toggle .nb-password-icon-hide,
button.nb-password-toggle.is-visible .nb-password-icon-show {
    display: none;
}

button.nb-password-toggle.is-visible .nb-password-icon-hide {
    display: block;
}

/* Arabic / RTL storefront */
html[dir='rtl'] .nb-password-field > input[type='password'],
html[dir='rtl'] .nb-password-field > input[type='text'] {
    padding-right: 9px; /* @form-element-input__padding */
    padding-left: 42px;
}

html[dir='rtl'] button.nb-password-toggle {
    right: auto;
    left: 0;
}

/* Header dropdowns: minicart and the Preferences (settings) popup share one
   frame, a red top rule and a soft drop shadow. */
.minicart-wrapper .cdz-dropdown .cdz-dd-content,
.settings-link .settings-popup {
    border-top: 2px solid #ed3f46 !important;
    box-shadow: 0 3px 6px 1px #9E9E9E !important;
}

/* Minicart text. Header style 21 colors the block title and every price with
   @header_drop_hover_text (#c9c7c7), which is too faint to read. */
.block-minicart .block-title,
.minicart-items .product-item .price,
.block-minicart .cart-total .subtotal .amount .price-wrapper:first-child .price {
    color: #000 !important;
}

/* Minicart item layout:
     image | name (full width)
     image | qty +/-            price
   The item template splits the details into col-xs-14 name / col-xs-10
   pricing, so stack the two columns and lay the pricing out as one row. */
.minicart-items .product-item-details > .row {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
}
.minicart-items .product-item-details > .row > .product-info,
.minicart-items .product-item-details > .row > .product-item-actions {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.minicart-items .product-item .product-item-actions .product-item-pricing {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.minicart-items .product-item .product-item-pricing .details-qty {
    order: 1;
    float: none !important;
    margin: 0 !important;
}
.minicart-items .product-item .product-item-pricing > :not(.details-qty) {
    order: 2;
    margin-inline-start: auto;
    text-align: end;
}

/* Account side panel (right .cdz-sidebar, #utilities-main).
   Signed-in header: a soft band with a red avatar, the greeting and an
   outlined Sign Out pill. Menu: full-width rows with a tinted icon chip,
   sentence-case label and a chevron, separated by hairlines. */
.cdz-sidebar .account-info-summary.is-logged-in {
    background: #f7f7f7;
    border-bottom: 1px solid #ececec;
    padding: 28px 20px 22px;
    text-align: center;
}
.cdz-sidebar .account-info-summary.is-logged-in .info-summary-top,
.cdz-sidebar .account-info-summary.is-logged-in .info-summary-bottom,
.cdz-sidebar .account-info-summary.is-logged-in .md-content {
    padding: 0 !important;
    margin: 0 !important;
}
.cdz-sidebar .account-info-summary.is-logged-in .icon-account {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 12px !important;
    border-radius: 50%;
    background: #ed3f46 !important;
    box-shadow: 0 4px 12px rgba(237, 63, 70, .3);
}
.cdz-sidebar .account-info-summary.is-logged-in .icon-account:before {
    font-size: 28px !important;
    line-height: 1 !important;
    width: auto !important;
    color: #fff !important;
}
.cdz-sidebar .account-info-summary.is-logged-in p {
    margin: 0 !important;
}
.cdz-sidebar .account-info-summary.is-logged-in .title a {
    display: block;
    color: #222 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none !important;
    margin-bottom: 12px;
}
.cdz-sidebar .account-info-summary.is-logged-in .title a:hover {
    color: #ed3f46 !important;
}
.cdz-sidebar .account-info-summary.is-logged-in a.md-raised {
    display: inline-block;
    padding: 5px 22px !important;
    border: 1px solid #ed3f46;
    border-radius: 25px;
    background: #fff !important;
    color: #ed3f46 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background .2s, color .2s;
}
.cdz-sidebar .account-info-summary.is-logged-in a.md-raised:hover {
    background: #ed3f46 !important;
    color: #fff !important;
}

.cdz-sidebar .acount-menu .account-menu-items {
    padding: 8px 0 24px !important;
    margin: 0 !important;
}
.cdz-sidebar .acount-menu .account-menu-items > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a {
    display: flex !important;
    align-items: center;
    width: auto !important;
    padding: 11px 20px !important;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.4;
    text-transform: none !important;
    transition: background .2s, color .2s;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a:before {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px;
    line-height: 32px !important;
    margin: 0 14px 0 0 !important;
    border-radius: 50%;
    background: #f5f5f5;
    color: #ed3f46 !important;
    font-size: 14px !important;
    text-align: center;
    transition: background .2s, color .2s;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a:after {
    content: '\f105';
    font-family: FontAwesome;
    margin-left: auto;
    padding-left: 10px;
    color: #bbb;
    font-size: 16px;
    line-height: 1;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a:hover {
    background: #fdf1f1;
    color: #ed3f46 !important;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a:hover:before {
    background: #ed3f46;
    color: #fff !important;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a:hover:after {
    color: #ed3f46;
}
.cdz-sidebar .acount-menu .account-menu-items > li > a .counter {
    margin-left: 4px;
    color: #999;
}

/* Currency row: same geometry as the links above. */
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link {
    padding: 11px 20px !important;
}
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 32px;
    margin: 0 !important;
    padding: 0 20px 0 46px !important;
    border: 0 !important;
    color: #333 !important;
    font-size: 14px !important;
    text-transform: none !important;
    box-sizing: border-box;
}
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger:before {
    position: absolute;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 32px !important;
    height: 32px;
    line-height: 32px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: #f5f5f5;
    color: #ed3f46 !important;
    font-size: 14px !important;
    text-align: center;
}
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger:after {
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: -3px;
}
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger:hover {
    color: #ed3f46 !important;
}
.cdz-sidebar .acount-menu li.currency-link .switcher-dropdown {
    padding: 6px 0 0 46px !important;
}

.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher-dropdown li a {
    display: block;
    padding: 6px 0 !important;
    color: #555 !important;
    font-size: 13px !important;
    text-transform: none !important;
}
.cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher-dropdown li a:hover {
    color: #ed3f46 !important;
}

html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li > a:before {
    margin: 0 0 0 14px !important;
}
html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li > a:after {
    content: '\f104';
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 10px;
}
html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li > a .counter {
    margin-left: 0;
    margin-right: 4px;
}
html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger {
    padding: 0 46px 0 20px !important;
}
html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger:before {
    left: auto !important;
    right: 0 !important;
}
html[dir='rtl'] .cdz-sidebar .acount-menu .account-menu-items > li.currency-link .switcher .switcher-options .action.switcher-trigger:after {
    left: 0 !important;
    right: auto !important;
}
html[dir='rtl'] .cdz-sidebar .acount-menu li.currency-link .switcher-dropdown {
    padding: 6px 46px 0 0 !important;
}