/* Sama Link – Product Specs Tab (storefront).
   All rules scoped under .sl-specs-tab / .sl-specs-mode so nothing leaks to other
   tabs or the rest of the theme. */

/* ---------------------------------------------------------------------------
   "Switch mode" for the XTRA sticky-product-tabs layout.

   The theme option body.codevz-sticky-product-tabs turns the product tabs into
   a stacked scrollspy: xtra-old/assets/css/woocommerce.css forces every panel
   visible with

       .codevz-sticky-product-tabs div.product .woocommerce-tabs .panel {
           display: block !important
       }

   so "opening" Specs normally requires scrolling ~1000px down past the full
   Description section — the page jump this plugin must prevent. While the
   user is viewing Specs, the compat script puts .sl-specs-mode on the
   .woocommerce-tabs wrapper and these rules collapse the other panels so the
   Specs panel renders in place directly under the tab nav, with no viewport
   movement. Clicking any other tab removes the class and restores the exact
   stacked layout the theme ships with.

   Specificity: :not(#tab-specs) carries an ID component, so (1,x,y) beats the
   theme's (0,4,1) rule above regardless of load order. */
/* Collapse to zero height but KEEP the panels in flow (display:block, not
   none): XTRA's scrollspy/sticky code reads offset().top and outerHeight() of
   every panel — display:none panels report offset 0, which makes the theme
   hide the whole tab nav (tabs.toggle) and skews its scroll math. Zero-height
   in-flow panels keep all theme measurements sane. display:block !important
   also defeats the inline display:none that WooCommerce's init/click handlers
   set, so the layout cannot be broken by the deferred init storm. */
.woocommerce-tabs.sl-specs-mode .panel:not(#tab-specs),
.woocommerce-tabs.sl-specs-mode .wc-tab:not(#tab-specs),
.woocommerce-tabs.sl-specs-mode .woocommerce-Tabs-panel:not(#tab-specs) {
    display: block !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.woocommerce-tabs.sl-specs-mode #tab-specs {
    display: block !important;
    visibility: visible !important;
}

.sl-specs-tab {
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.sl-specs-tab h1,
.sl-specs-tab h2,
.sl-specs-tab h3,
.sl-specs-tab h4,
.sl-specs-tab h5,
.sl-specs-tab h6 {
    margin: 1.2em 0 0.6em;
    line-height: 1.3;
}

.sl-specs-tab p,
.sl-specs-tab ul,
.sl-specs-tab ol {
    margin: 0 0 1em;
}

.sl-specs-tab ul,
.sl-specs-tab ol {
    padding-inline-start: 1.5em;
}

.sl-specs-tab li + li {
    margin-top: 0.25em;
}

.sl-specs-tab a {
    text-decoration: underline;
}

.sl-specs-tab img {
    max-width: 100%;
    height: auto;
}

/* Tables — readable on both LTR and RTL using logical properties. */
.sl-specs-tab table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25em;
    display: table;
}

.sl-specs-tab table th,
.sl-specs-tab table td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.65em 0.85em;
    vertical-align: top;
    text-align: start;
}

.sl-specs-tab table th {
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
}

.sl-specs-tab table tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.02);
}

/* Mobile: allow horizontal scrolling for wide tables without breaking the column grid. */
@media (max-width: 640px) {
    .sl-specs-tab {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sl-specs-tab table {
        font-size: 0.95em;
    }
    .sl-specs-tab table th,
    .sl-specs-tab table td {
        padding: 0.55em 0.65em;
    }
}

/* RTL refinement — the logical properties above already handle most of it.
   These extra rules just make table direction explicit. */
[dir="rtl"] .sl-specs-tab table {
    direction: rtl;
}