@charset "utf-8";
/* ==========================================================================
   restore.css - smart technology Senegal

   REPLACEMENT stylesheet. The site's only stylesheet was a LiteSpeed combined
   cache file:

       /wp-content/litespeed/css/2ba4bc91dcf31ef73de3195022932c95.css

   That file - and the whole /wp-content/ tree - is gone from the server, so
   every page rendered as unstyled text. LiteSpeed cache filenames are content
   hashes that change on every purge and were never archived, so the original
   is not recoverable.

   This file is hand-written against the Flatsome + WooCommerce markup that the
   pages actually contain. It approximates the layout; it is NOT the original
   Flatsome theme and will not match it pixel for pixel. Delete this file and
   restore the real theme when /wp-content/ is put back.
   ========================================================================== */

:root {
    --st-primary:   #0a5c9e;
    --st-dark:      #1f2933;
    --st-body:      #4b5563;
    --st-muted:     #7b8794;
    --st-line:      #e3e8ee;
    --st-bg:        #ffffff;
    --st-bg-alt:    #f6f8fa;
    --st-sale:      #d64545;
    --st-radius:    4px;
    --st-container: 1200px;
}

/* ------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--st-bg);
    color: var(--st-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--st-primary); text-decoration: none; }
a:hover { color: #08487c; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--st-dark);
    font-weight: 700;
    line-height: 1.25;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* skip link and screen-reader text must never take space */
.screen-reader-text,
.skip-link { position: absolute !important; width: 1px; height: 1px;
             overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- container --- */

.container, .row {
    width: 100%;
    max-width: var(--st-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.row { display: flex; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
.row-small { margin-left: -10px; margin-right: -10px; }
.row-small > .col { padding: 0 10px 20px; }

.col { position: relative; width: 100%; padding: 0 15px 30px; }
.col-inner { position: relative; width: 100%; }

/* Flatsome column widths ------------------------------------------------ */
.large-1  { flex-basis: 8.333%;  max-width: 8.333%; }
.large-2  { flex-basis: 16.66%;  max-width: 16.66%; }
.large-3  { flex-basis: 25%;     max-width: 25%; }
.large-4  { flex-basis: 33.33%;  max-width: 33.33%; }
.large-5  { flex-basis: 41.66%;  max-width: 41.66%; }
.large-6  { flex-basis: 50%;     max-width: 50%; }
.large-7  { flex-basis: 58.33%;  max-width: 58.33%; }
.large-8  { flex-basis: 66.66%;  max-width: 66.66%; }
.large-9  { flex-basis: 75%;     max-width: 75%; }
.large-10 { flex-basis: 83.33%;  max-width: 83.33%; }
.large-11 { flex-basis: 91.66%;  max-width: 91.66%; }
.large-12 { flex-basis: 100%;    max-width: 100%; }

/* grids: .large-columns-N sets how many children sit per row ------------- */
.large-columns-1 > .col { flex-basis: 100%;   max-width: 100%; }
.large-columns-2 > .col { flex-basis: 50%;    max-width: 50%; }
.large-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
.large-columns-4 > .col { flex-basis: 25%;    max-width: 25%; }
.large-columns-5 > .col { flex-basis: 20%;    max-width: 20%; }
.large-columns-6 > .col { flex-basis: 16.666%; max-width: 16.666%; }

/* ----------------------------------------------------------- header ---- */

#header { position: relative; z-index: 30; background: #fff; }
.header-wrapper { border-bottom: 1px solid var(--st-line); background: #fff; }
.header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.flex-row { display: flex; align-items: center; flex-wrap: wrap; }
.flex-col { display: flex; align-items: center; }
.flex-left  { margin-right: auto; }
.flex-right { margin-left: auto; }
#logo img { max-height: 60px; width: auto; }
#logo a { display: block; }

.header-top {
    background: var(--st-dark);
    color: #fff;
    font-size: 13px;
}
.header-top a { color: #fff; }

/* nav -------------------------------------------------------------------- */
.header-nav, ul.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.nav > li { position: relative; margin: 0; }
ul.nav > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--st-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.nav-uppercase > li > a { text-transform: uppercase; letter-spacing: .02em; font-size: 13px; }
ul.nav > li > a:hover { color: var(--st-primary); }
ul.nav > li.active > a { color: var(--st-primary); }

/* dropdowns: hidden until hover (the theme's JS is gone, so CSS drives it) */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: 0 6px 24px rgba(20, 30, 40, .12);
}
li:hover > .nav-dropdown { display: block; }
.nav-dropdown li a {
    display: block;
    padding: 7px 16px;
    color: var(--st-body);
    font-size: 14px;
}
.nav-dropdown li a:hover { background: var(--st-bg-alt); color: var(--st-primary); }

/* ---------------------------------------------------------- buttons ---- */

.button, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 1em;
    padding: 10px 20px;
    border: 1px solid var(--st-primary);
    border-radius: var(--st-radius);
    background: var(--st-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}
.button:hover, button:hover { background: #08487c; border-color: #08487c; color: #fff; }
.button.is-outline { background: transparent; color: var(--st-primary); }
.button.is-outline:hover { background: var(--st-primary); color: #fff; }
.button.is-small { padding: 6px 12px; font-size: 13px; }
.button.circle, .circle { border-radius: 999px; }
.button.secondary { background: var(--st-dark); border-color: var(--st-dark); }

/* ----------------------------------------------------- product grid ---- */

.products { display: flex; flex-wrap: wrap; }
.product-small.box { position: relative; height: 100%; }
/* Cards must be equal height, so the image box gets a fixed square ratio and
   the picture is contained inside it rather than driving the card's height. */
.products.row { align-items: stretch; }
.product-small.col > .col-inner { display: flex; flex-direction: column; height: 100%; }

.box-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* The homepage row is `large-columns-1`, so a card there is full width and
       a 1:1 ratio would make the image box ~1090px tall. Cap it. */
    max-height: 320px;
    background: var(--st-bg-alt);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
}
/* On a single-column row a card spans the full width. Constrain the whole
   card, not just the image, so the sale badge and text stay with it. */
.large-columns-1 > .product-small.col > .col-inner {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.large-columns-1 > .product-small.col .box-text { text-align: center; }

/* buttons must never stretch to the height of a flex parent */
.box-text .button, .product-small .button { align-self: center; }
.box-image img,
.box-image .image-fade_in_back,
.box-image a {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.box-text { padding: 12px 4px 0; text-align: center; }
.box-text .name,
.box-text .product-title,
.woocommerce-loop-product__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
.box-text .name a, .woocommerce-loop-product__title a { color: var(--st-dark); }
.box-text .name a:hover { color: var(--st-primary); }
.category-name, .product-cat { color: var(--st-muted); font-size: 12px; }

/* price ------------------------------------------------------------------ */
.price, .woocommerce-Price-amount { color: var(--st-dark); font-weight: 700; }
.price del { color: var(--st-muted); font-weight: 400; margin-right: 6px; }
.price del .amount { text-decoration: line-through; }
.price ins { text-decoration: none; color: var(--st-sale); }
.woocommerce-Price-currencySymbol { font-weight: 600; font-size: .88em; }

/* sale badge ------------------------------------------------------------- */
.badge-container { position: absolute; left: 8px; top: 8px; z-index: 2; }
.badge, .callout { display: inline-block; }
.badge-inner {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--st-sale);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge-inner .onsale { color: #fff; }

/* hover tools (wishlist / quick view) ------------------------------------ */
.image-tools { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.image-tools .button { margin: 0 0 4px; }
.show-on-hover { opacity: 0; transition: opacity .15s ease; }
.box:hover .show-on-hover, .col-inner:hover .show-on-hover { opacity: 1; }
.tooltip { position: relative; }

/* --------------------------------------------------------- shop page --- */

.shop-container { width: 100%; }

/* The shop header (breadcrumb / title / filter / result count / sort) is a
   set of separate blocks that the theme laid out as a flex row. Without that
   they collide into one another - "SMART TVFILTERShowing all 7 results". */
.shop-page-title {
    width: 100%;
    margin: 0 0 6px;
    font-size: 22px;
}
.shop-page-title .is-large { font-size: 22px; }
.woocommerce-breadcrumb {
    display: block;
    margin: 0 0 14px;
    color: var(--st-muted);
    font-size: 13px;
}
.woocommerce-breadcrumb a { color: var(--st-muted); }

.category-filter-row,
.shop-page-title + .row,
.category-filtering {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 100%;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--st-line);
}
.category-filtering .flex-col,
.category-filter-row .flex-col { margin: 0; }
.flex-grow { flex: 1 1 auto; }
.filter-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    color: var(--st-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { width: auto; min-width: 190px; }

.woocommerce-result-count { color: var(--st-muted); font-size: 13px; margin: 0; }
.woocommerce-ordering select,
select, input[type="text"], input[type="email"], input[type="search"], textarea {
    width: 100%;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: #fff;
    color: var(--st-body);
    font: inherit;
    font-size: 14px;
}
textarea { min-height: 120px; }

/* sidebar widgets -------------------------------------------------------- */
.widget { margin: 0 0 28px; }
.widget-title {
    display: block;
    margin: 0 0 8px;
    color: var(--st-dark);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.is-divider {
    display: block;
    height: 2px;
    width: 44px;
    margin: 0 0 14px;
    background: var(--st-line);
}
.is-divider.small { width: 30px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li, .cat-item { border-bottom: 1px solid var(--st-line); }
.widget li a, .cat-item a {
    display: block;
    padding: 8px 0;
    color: var(--st-body);
    font-size: 14px;
}
.widget li a:hover, .cat-item a:hover { color: var(--st-primary); }

/* ------------------------------------------------- single product ------ */

.product-info, .product-main { padding-top: 20px; }
.product-title { font-size: 26px; }
.woocommerce-product-gallery img { width: 100%; height: auto; }
.product-footer, .woocommerce-tabs { margin-top: 30px; }

/* ------------------------------------------------------------ footer --- */

.footer-wrapper { margin-top: 40px; }
.footer-widgets {
    padding: 34px 0 10px;
    background: var(--st-bg-alt);
    border-top: 1px solid var(--st-line);
}
.footer-widgets.dark, .dark {
    background: var(--st-dark);
    color: rgba(255, 255, 255, .78);
}
.dark a, .dark .widget-title { color: #fff; }
.dark .widget li, .dark .cat-item { border-bottom-color: rgba(255, 255, 255, .12); }
.dark .is-divider { background: rgba(255, 255, 255, .25); }
.absolute-footer {
    padding: 14px 0;
    background: #12181f;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
}
.absolute-footer a { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------- hidden panels ------- */

/* These are off-screen panels the theme opens on demand (mini-cart, mobile
   sidebar, login lightbox, quick-view). Their hide rules lived in the missing
   theme CSS, so without this they all render inline and push the page apart -
   the mini-cart alone was 1355px tall. */
.mfp-hide,
.lightbox-content,
.mobile-sidebar,
.off-canvas,
.off-canvas-left,
.off-canvas-right,
.cart-popup,
.quick-view-container,
.account-container.lightbox-inner,
.widget_shopping_cart.mfp-hide { display: none !important; }

/* the mini-cart still opens on hover of the cart link */
.cart-item:hover .cart-popup,
.header-cart:hover .cart-popup {
    display: block !important;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: 0 8px 28px rgba(20, 30, 40, .16);
}
.cart-popup .cart_list img { width: 48px; height: auto; }
.cart-popup .cart_list li { padding: 8px 0; font-size: 13px; }

/* the sidebar menu is a mobile drawer, not page content */
.sidebar-menu, .nav-sidebar { display: none !important; }

/* --------------------------------------------------------- utilities --- */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; letter-spacing: .02em; }
.relative    { position: relative; }
.absolute    { position: absolute; }
.z-1         { z-index: 1; }
.mb-0        { margin-bottom: 0 !important; }
.pb-0        { padding-bottom: 0 !important; }
.pt-0        { padding-top: 0 !important; }
.is-small    { font-size: 13px; }
.hidden      { display: none !important; }

/* Flatsome uses these as positioning helpers inside .badge-container etc.,
   NOT as floats - scoping them prevents stray layout breakage. */
.badge-container.left  { left: 8px; right: auto; }
.badge-container.right { right: 8px; left: auto; }
.badge-container.top    { top: 8px; bottom: auto; }
.badge-container.bottom { bottom: 8px; top: auto; }

.icon { display: inline-block; line-height: 1; }

/* ------------------------------------------------------- responsive ---- */

@media (max-width: 1024px) {
    .large-3, .large-9 { flex-basis: 100%; max-width: 100%; }
    .large-columns-3 > .col, .large-columns-4 > .col { flex-basis: 33.333%; max-width: 33.333%; }
    .medium-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
    .medium-columns-2 > .col { flex-basis: 50%; max-width: 50%; }
    .hide-for-medium { display: none !important; }
}

@media (max-width: 767px) {
    body { font-size: 14.5px; }
    h1 { font-size: 24px; } h2 { font-size: 20px; }
    .container, .row { padding-left: 12px; padding-right: 12px; }
    .col { padding-bottom: 20px; }
    [class*="large-columns-"] > .col,
    [class*="medium-columns-"] > .col { flex-basis: 50%; max-width: 50%; }
    .small-columns-1 > .col { flex-basis: 100%; max-width: 100%; }
    .small-columns-2 > .col { flex-basis: 50%;  max-width: 50%; }
    .hide-for-small { display: none !important; }
    .header-inner { padding-top: 10px; padding-bottom: 10px; }
    #logo img { max-height: 46px; }
    .nav-dropdown { position: static; box-shadow: none; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}