/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* 2. Toggle Styles (Product Page) */
.single-product .toggle[data-inner-wrap="true"] > div { padding:0; }
body.single-product div[data-style="minimal_small"] .toggle > div .inner-toggle-wrap { padding-top:1.4em; padding-bottom:0; }
div[data-style="minimal_small"] .toggle > .toggle-title { display:inline-block; padding:0 0 4px; }
div[data-style="minimal_small"] .toggle > .toggle-title a { padding:0; }
div[data-style="minimal_small"] .toggle.default > .toggle-title a:hover,
div[data-style="minimal_small"] .toggle.default.open > .toggle-title a { color:#000; }
div[data-style="minimal_small"] .toggle.default > .toggle-title:after { background-color:#000; }
div[data-style="minimal_small"] .toggle > .toggle-title:after, 
div[data-style="minimal_small"] .toggle > .toggle-title:before { display:block; content:""; position:absolute; bottom:0; width:100%; background-color:rgba(0,0,0,0.1); height:2px; left:0; pointer-events:none; }
div[data-style="minimal_small"] .toggle > .toggle-title:after { -webkit-transform:scaleX(0); transform:scaleX(0); -webkit-transition:transform 0.5s cubic-bezier(0.3,0.4,0.1,1); transition:transform 0.5s cubic-bezier(0.3,0.4,0.1,1); transform-origin:left; }
div[data-style="minimal_small"] .toggle.open > .toggle-title:after, 
div[data-style="minimal_small"] .toggle:hover > .toggle-title:after { -webkit-transform:scaleX(1); transform:scaleX(1); }
div[data-style="minimal_small"] .toggle > div { padding-top:1.3em; padding-bottom:0; }
div[data-style="minimal_small"] .toggle > .toggle-title i { display:none; }
div[data-style="minimal_small"] .toggle { margin-bottom:1.4em; }

/* 3. Attribute Labels on Product Grid */
.prod-pattern-type, .prod-style { display: block; font-size: 0.9em; color: #666; margin: 2px 0; }

/* 4. WPForms Custom Styles */
div.wpforms-container-full input[type=radio], 
div.wpforms-container-full input[type=checkbox] { background: #f5f5f5 !important; }
div.wpforms-container-full input::placeholder { color: white !important; opacity: .7 !important; }
div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column select::placeholder { color: red !important; }
div.wpforms-container-full input:checked { background-color: #f5f5f5 !important; }
body[data-form-style="minimal"] input:hover, 
body[data-form-style="minimal"] select:hover { border-color: #B9913F !important; }
div.wpforms-container-full input:focus, 
div.wpforms-container-full select:focus { border-color: #B9913F !important; }
body[data-form-style="minimal"] input, 
body[data-form-style="minimal"] textarea, 
body[data-form-style="minimal"] select { color: white !important; background: transparent !important; border-color: #5e5e5e !important; }
.wpforms-container .wpforms-form .wpforms-field-label { color: white; }
div.wpforms-container-full .wpforms-field-radio ul li input+label, 
div.wpforms-container-full .wpforms-field-checkbox ul li input+label { color: white; }

/* 5. Breadcrumb Styling (Downloads pages only) */
body.single-category_page .container-wrap-breadcrumb { border-top: 1px white solid !important; border-bottom: 1px white solid !important; background-color: transparent !important; }
body.single-category_page .woocommerce-breadcrumb a { background-image: linear-gradient(to right, #dcb968 0, #b9913f 100%) !important; color: white !important; background-repeat: no-repeat !important; background-size: 0 2px !important; background-position: left bottom !important; transition: background-size .55s cubic-bezier(.2,.75,.5,1) !important; }
body.single-category_page .woocommerce-breadcrumb a:hover { background-size: 100% 2px !important; }
body.single-category_page .woocommerce-breadcrumb span:last-child { opacity: .8 !important; color: #dcb968 !important; }
body.single-category_page .woocommerce-breadcrumb [class*=fa-] { line-height: 0px !important; color: white !important; opacity: .8 !important; }

@media only screen and (max-width: 767px) {
    body.single-category_page .woocommerce .woocommerce-breadcrumb { margin: 0.6em 0.4em 0.6em 0.4em !important; font-size: 0.8em !important; }
    body.single-category_page .woocommerce-breadcrumb [class*=fa-] { line-height: 0px !important; top: -1px !important; width: 10px !important; }
    body.single-category_page .full-width-content .woocommerce-breadcrumb { text-align: center !important; margin: 0.6em 0.4em !important; padding: 0 !important; text-transform: uppercase !important; font-size: 0.8em !important; }
}

/* 6. Product UI Cleanups */
.single_variation_wrap { display: none !important; }
body.single-category_page .heading-title, 
body.single-category_page .page-header-no-bg, 
body.single-category_page #page-header-wrap { display: none !important; } 
body.single-category_page .container-wrap { padding-top: 0 !important; }

/* 7. Short Description Read More */
.short-description-wrapper { margin-bottom: 1em; } 
.read-more-link, .read-less-link { color: #B9913F; text-decoration: none; font-weight: 600; display: inline-block; margin-left: 5px; } 
.read-more-link:hover, .read-less-link:hover { text-decoration: underline; }

/* 8. Fabric Specs Table */
.product-specifications-table { margin-top: 24px; } 
.product-specifications-table table.shop_attributes { width: 100% !important; border-collapse: collapse !important; background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; border-top: none !important; table-layout: fixed !important; } 
.product-specifications-table table.shop_attributes tr { background: transparent !important; } 
.product-specifications-table table.shop_attributes th.woocommerce-product-attributes-item__label { border-right: solid 1px #000 !important; width: 56% !important; color: #000 !important; padding: 0.5em 0.7em !important; text-align: left !important; vertical-align: middle !important; font-weight: bold !important; background: transparent !important; text-transform: uppercase !important; font-size: 70% !important; border-bottom: none !important; border-top: none !important; } 
.product-specifications-table table.shop_attributes td.woocommerce-product-attributes-item__value { width: 50% !important; color: #000 !important; padding: 0.5em 0.7em !important; text-align: left !important; vertical-align: middle !important; background: transparent !important; font-size: 70% !important; border: none !important; }

/* 9. RTL Fixes */
body.rtl .single-product .row > .product[data-gallery-style] .single-product-main-image, 
body.rtl .single-product .product[data-gallery-style] .single-product-main-image {
    @media only screen and (min-width: 1000px) {
        margin-right: 0 !important;
        margin-left: 5% !important;
        float: right !important;
    }
}
body.rtl .single-product .row > .product[data-gallery-style] .summary,
body.rtl .single-product .product[data-gallery-style] .summary {
    @media only screen and (min-width: 1000px) {
        float: left !important;
    }
}
body.rtl .product_title, body.rtl .product-collection, body.rtl .collection-description, body.rtl .pp-details, body.rtl .vc_row_inner {
    text-align: right !important;
    direction: rtl !important;
}

/* 10. Language Switcher (Footer) */
.sarelli-lang-switcher { margin-top: 6px; }
.sarelli-lang-switcher ul { 
    list-style: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    display: flex !important; 
    flex-direction: row !important;
    gap: 15px; 
}
.sarelli-lang-switcher li { 
    display: inline-block !important; 
    margin: 0 !important; 
    padding: 0 !important;
    background: transparent !important;
}
.sarelli-lang-switcher li:before { content: none !important; } /* Remove any theme bullets */
.sarelli-lang-switcher a,
.sarelli-lang-switcher .no-translation { 
    color: rgba(255,255,255,0.45); 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 11px; 
    letter-spacing: 1px; 
}
.sarelli-lang-switcher li.current-lang a { color: rgba(255,255,255,0.9); font-weight: 600; }
.sarelli-lang-switcher a:hover { color: #fff; }






/* ─────────────────────────────────────────────────────────────────
 * Mobile homepage hero — fix overlapping titles.
 *
 * The desktop layout pulls `.homepage-hero-text` up via translateY(-100px)
 * AND positions it absolutely with `top: 650px`. On phones the parent row
 * collapses to the video aspect (~243px tall), the absolute positioning
 * resets the title back into normal flow, and the -100px translate then
 * lifts it directly into the paragraph above — visible as overlap of
 * "SARELLI INTERIORS TEXTILES" on top of the intro copy.
 *
 * Below 691px we drop the translate, let the absolute row flow as static,
 * and add a clean stack with breathing room.
 * ───────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 690px) {
  /* Lift ONLY the main "SARELLI INTERIORS TEXTILES" overlay (the absolute
   * `.homepage-hero-text` row) 150px upward so it sits over the hero video
   * instead of crashing into the paragraph below. HERITAGE and the intro
   * paragraph stay in their original positions. */
  /* Drop Salient's desktop -100px translate that pulled SARELLI into the
   * paragraph below; pin the title via JS-friendly inline-style override
   * (see snippet in functions.php) so it sits 200px above the hero's
   * bottom edge. */
  .homepage-hero-text,
  .nectar-responsive-text.homepage-hero-text {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Classic-fabrics overview (parent page id = 6864) — mobile layout.
 *
 * Default WPBakery `vc_col-sm-3` stacks each collection tile to a single
 * full-width column on phones. We pack two tiles per row, snug the title
 * and DOWNLOAD button up to the image, and left-align everything for a
 * cleaner editorial feel on small screens.
 * ───────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 690px) {
  body.page-id-6864 .vc_col-sm-3.column_container.col,
  body.page-id-6864 .vc_col-sm-3.column_container.col.right_margin_tablet_15pct,
  body.page-id-6864 .vc_col-sm-3.column_container.col.left_margin_tablet_15pct {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin: 0 0 36px !important;          /* gap between tiles within the same page-builder row */
    text-align: left !important;
  }
  body.page-id-6864 .vc_col-sm-3.column_container.col .vc_column-inner {
    text-align: left !important;
  }
  /* Snug the title up to the image: kill the spacer divider entirely.
   * Visual hierarchy of gaps (smallest → largest):
   *   image → title         : 6px
   *   title → button        : 4px
   *   button → next tile    : 36px (col margin-bottom)
   *   row of 4 → next row   : 36 + 32 = 68px (col + page-builder row)
   */
  body.page-id-6864 .vc_col-sm-3 .divider-wrap,
  body.page-id-6864 .vc_col-sm-3 .divider-wrap .divider {
    height: 0 !important;
  }
  body.page-id-6864 .vc_col-sm-3 .wpb_text_column {
    margin: 0 !important;
  }
  body.page-id-6864 .vc_col-sm-3 .wpb_text_column h2 {
    margin: 6px 0 4px !important;
    font-size: 13px !important;
    text-align: left !important;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }
  /* DISCOVER button — Salient theme JS sets `transform: translateX(-18px)`
   * on the button label and `position: absolute; left: 27px` on the arrow
   * (its desktop reveal-on-hover animation), which leaks text outside the
   * button bounds on mobile. We pin both back to a clean static layout
   * inside an inline-flex button. */
  body.page-id-6864 .vc_col-sm-3 .nectar-button,
  body.page-id-6864 .vc_col-sm-3 .nectar-button span {
    font-weight: 400 !important;
  }
  body.page-id-6864 .vc_col-sm-3 .nectar-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
    padding: 0 14px !important;
    min-height: 30px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  body.page-id-6864 .vc_col-sm-3 .nectar-button > span {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    transition: none !important;
  }
  body.page-id-6864 .vc_col-sm-3 .nectar-button .icon-button-arrow {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  /* Uniform spacing between every tile row, regardless of whether it sits
   * within the same page-builder row of 4 or between adjacent rows. */
  body.page-id-6864 .vc_row.wpb_row.full-width-section,
  body.page-id-6864 .vc_row.wpb_row {
    margin-bottom: 0 !important;
  }
  body.page-id-6864 .vc_row.wpb_row + .vc_row.wpb_row {
    margin-top: 0 !important;
  }
  /* Hide the last breadcrumb item (current page name) and its separator. */
  body.page-id-6864 .woocommerce-breadcrumb > span:last-of-type,
  body.page-id-6864 .woocommerce-breadcrumb > i:last-of-type {
    display: none !important;
  }
  /* Image: tight, no extra margin, fills the column. */
  body.page-id-6864 .vc_col-sm-3 .img-with-aniamtion-wrap {
    margin: 0 !important;
  }
  body.page-id-6864 .vc_col-sm-3 .img-with-aniamtion-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* The actual flex container Salient renders is `.row_col_wrap_12_inner`
   * (not `.vc_row.wpb_row`). Make sure it wraps so 50%-wide columns lay
   * out 2-up instead of stacking past the right edge. */
  body.page-id-6864 .row_col_wrap_12_inner {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
}
@media only screen and (max-width: 420px) {
  body.page-id-6864 .vc_col-sm-3 .wpb_text_column h2 {
    font-size: 12px !important;
  }
  body.page-id-6864 .vc_col-sm-3 .nectar-button {
    padding: 0 10px !important;
    font-size: 9.5px !important;
  }
}