/*
Theme Name: Hobot by Mamy Strategie
Theme URI: https://biznesgrafika.pl
Description: Motyw sklepu Hobot Polska, potomny wobec OceanWP. Tu trafiają wszystkie nadpisania wyglądu motywu i WooCommerce, żeby aktualizacja OceanWP ich nie skasowała. Style modułów wtyczki MS zostają w samej wtyczce.
Author: Mamy Strategie
Author URI: https://mamystrategie.pl
Template: oceanwp
Version: 1.0.0
Text Domain: oceanwp-child
*/

/* ==========================================================================
   Karta produktu
   ========================================================================== */

/* Cenę rysuje widget Elementora, nie szablon WooCommerce - stąd selektor
   po klasie widgetu. Była zielona i większa od nazwy produktu. */
.single-product .elementor-widget-woocommerce-product-price .price,
.single-product .elementor-widget-woocommerce-product-price .price .amount,
.single-product .elementor-widget-woocommerce-product-price .price bdi,
.single-product .elementor-widget-woocommerce-product-price .price ins,
.single-product .elementor-widget-woocommerce-product-price .price ins .amount,
.single-product .elementor-widget-woocommerce-product-price .price ins bdi {
    color: #2a2e33;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

.single-product .elementor-widget-woocommerce-product-price .price {
    margin-bottom: 14px;
    line-height: 1.2;
}

/* cena przed obniżką: szara i mniejsza, żeby różnica była widoczna */
.single-product .elementor-widget-woocommerce-product-price .price del,
.single-product .elementor-widget-woocommerce-product-price .price del .amount,
.single-product .elementor-widget-woocommerce-product-price .price del bdi {
    color: #8a949d;
    font-size: 17px;
    font-weight: 400;
}

.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-Price-currencySymbol {
    font-size: .8em;
    font-weight: 600;
}

/* Zdjęcie główne bywa wyższe niż cała kolumna z opisem - wtedy po prawej
   zostaje pusta plansza. */
.single-product .woocommerce-product-gallery__image img,
.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
    max-height: 520px;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
}

.single-product .woocommerce-product-gallery__image {
    text-align: center;
}

/* miniatury galerii równo, cztery w rzędzie */
.single-product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 0;
    list-style: none;
}

.single-product .flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.single-product .flex-control-thumbs img {
    width: 100%;
    height: auto;
    border: 1px solid #e2e7ec;
    border-radius: 4px;
    opacity: 1;
}

/* ==========================================================================
   Podobne produkty i produkty powiązane
   ========================================================================== */

/* Nad nazwą produktu wyświetlała się cała ścieżka kategorii, po trzy wiersze
   kursywą. Przy podobnych produktach kategoria jest ta sama co oglądany
   produkt, więc nic nie wnosi. */
.related .product .category,
.related .product .woo-product-category,
.upsells .product .category {
    display: none !important;
}

/* karty równej wysokości, przycisk zawsze na dole */
.related ul.woo-entry-inner,
.upsells ul.woo-entry-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
}

.related ul.woo-entry-inner > li.title,
.upsells ul.woo-entry-inner > li.title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 6px;
}

.related ul.woo-entry-inner > li.price,
.upsells ul.woo-entry-inner > li.price {
    margin-bottom: 12px;
}

.related ul.woo-entry-inner > li.woo-entry-buttons,
.related ul.woo-entry-inner > li.btn-wrap,
.upsells ul.woo-entry-inner > li.woo-entry-buttons,
.upsells ul.woo-entry-inner > li.btn-wrap {
    margin-top: auto;
}

/* zdjęcia w równej ramce - inaczej karty skaczą na różnej wysokości */
.related .woo-entry-image,
.upsells .woo-entry-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    margin-bottom: 14px;
    overflow: hidden;
}

.related .woo-entry-image img,
.upsells .woo-entry-image img {
    max-height: 230px;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   Przyklejony pasek zakupu
   ========================================================================== */

/* OceanWP ma własny pasek u góry (owp-floating-bar), wtyczka MS swój na dole
   (ms-pasek). Na telefonie zostaje nasz, na komputerze motywu - inaczej na
   małym ekranie wychodzą dwa paski naraz, góra i dół. */
@media (max-width: 767px) {
    .owp-floating-bar {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .related .woo-entry-image,
    .upsells .woo-entry-image {
        height: 170px;
    }

    .related .woo-entry-image img,
    .upsells .woo-entry-image img {
        max-height: 170px;
    }
}

/* ==========================================================================
   Pasek zaufania między dwiema liniami
   ========================================================================== */

/* Punkty mają różną długość tekstu. Wyśrodkowane w równych trzecich zaczynały
   się 17 px za linią, a kończyły 17 px przed nią. Rozkład space-between
   dociąga skrajne punkty do krawędzi linii. */
.single-product .ms-zaufanie,
.elementor-add-to-cart .ms-zaufanie {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 0;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    border-top: 1px solid #e8edf2;
}

.single-product .ms-zaufanie__punkt,
.elementor-add-to-cart .ms-zaufanie__punkt {
    flex: 0 1 auto;
    justify-content: flex-start;
}

/* Pod ikonami było 40 px, nad nimi 19 - pasek siedział za wysoko między
   liniami. Zdjęcie marginesu bloku z SKU wyrównuje odstępy. */
.single-product .product_meta {
    margin-top: 0 !important;
}

@media (max-width: 600px) {
    .single-product .ms-zaufanie,
    .elementor-add-to-cart .ms-zaufanie {
        justify-content: flex-start;
        gap: 12px;
    }

    .single-product .ms-zaufanie__punkt,
    .elementor-add-to-cart .ms-zaufanie__punkt {
        flex: 0 0 100%;
    }
}

/* ==========================================================================
   Wybór ilości przy przycisku zakupu
   ========================================================================== */

/* Pole ilości miało 36 px wysokości przy przycisku 46 px i zaczynało się
   5 px niżej, przez co rząd wyglądał na przekrzywiony. */
.single-product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.single-product form.cart .quantity {
    display: flex;
    align-items: stretch;
    height: 46px;
    margin: 0;
    border: 1px solid #d9e0e6;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    border: 0;
    background: #f4f6f8;
    color: #2a2e33;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease;
}

.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover {
    background: #e8edf2;
    color: #00aeef;
}

.single-product form.cart .quantity input.qty {
    width: 54px;
    height: 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid #d9e0e6;
    border-right: 1px solid #d9e0e6;
    border-radius: 0;
    background: #fff;
    color: #2a2e33;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.single-product form.cart .single_add_to_cart_button {
    height: 46px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Rozwijany koszyk w nagłówku (widget Menu Cart Elementora)
   ========================================================================== */

/* Zdjęcie produktu było wciskane w wąski pasek, bo widget nie trzymał
   proporcji. Stała ramka plus object-fit pokazują cały produkt. */
.elementor-menu-cart__product-image,
.elementor-menu-cart__product .product-thumbnail {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border: 1px solid #e2e7ec;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.elementor-menu-cart__product-image img,
.elementor-menu-cart__product .product-thumbnail img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.elementor-menu-cart__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.elementor-menu-cart__product-name {
    flex: 1 1 auto;
}

.elementor-menu-cart__product-name a {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #2a2e33;
}

/* ceny w koszyku były zielone, tak jak kiedyś na karcie produktu */
.elementor-menu-cart__product-price .quantity,
.elementor-menu-cart__product-price .amount,
.elementor-menu-cart__product-price bdi {
    color: #5b6670;
    font-size: 13px;
    font-weight: 500;
}

.elementor-menu-cart__subtotal,
.elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__subtotal bdi,
.elementor-menu-cart__subtotal strong {
    color: #2a2e33;
    font-size: 15px;
    font-weight: 700;
}

.elementor-menu-cart__footer-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.elementor-menu-cart__footer-buttons .elementor-button {
    flex: 1 1 0;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 700;
}

/* "Zamówienie" ma być pierwszym wyborem, "Zobacz koszyk" drugim.
   Elementor stylem z szablonu nagłówka maluje oba przyciski tak samo,
   dlatego tutaj trzeba wyższej wagi selektora. */
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart .elementor-button-text {
    background-color: #fff !important;
    color: #2a2e33 !important;
    border: 1px solid #d9e0e6 !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart .elementor-button-text {
    border: 0 !important;
    background: none !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
    border-color: #00aeef !important;
    color: #00aeef !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover .elementor-button-text {
    color: #00aeef !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout {
    background-color: #00aeef !important;
    color: #fff !important;
    border: 1px solid #00aeef !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
    background-color: #0093c9 !important;
    border-color: #0093c9 !important;
}

/* ---------- koszyk: poprawki po pierwszym przejrzeniu ---------- */

/* Napis "Zobacz koszyk" lamal sie na dwie linie i wychodzil poza przycisk. */
.elementor-menu-cart__footer-buttons a.elementor-button,
.elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text {
    white-space: nowrap;
    line-height: 1.1;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
    padding: 0 12px;
    font-size: 13px;
    letter-spacing: 0;
}

/* Przy dluzszej liscie koszyk rozpychal sie na cala wysokosc ekranu. */
.elementor-menu-cart__products {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.elementor-menu-cart__products::-webkit-scrollbar {
    width: 6px;
}

.elementor-menu-cart__products::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #d9e0e6;
}

/* Nazwa produktu: najwyzej dwie linie, reszta wielokropkiem. Pelna nazwa
   zostaje w atrybucie title, wiec nic nie ginie. */
.elementor-menu-cart__product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cena pozycji trzyma sie prawej krawedzi, zeby kwoty tworzyly kolumne. */
.elementor-menu-cart__product-price {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

/* Krzyzyk usuwania nie moze zachodzic na cene. */
.elementor-menu-cart__product-remove {
    flex: 0 0 22px;
    margin-left: 6px;
}

.elementor-menu-cart__product + .elementor-menu-cart__product {
    border-top: 1px solid #eef2f5;
}

.elementor-menu-cart__subtotal {
    padding: 12px 0 0;
    border-top: 1px solid #e2e7ec;
}

/* ---------- koszyk: oddech przy krawedziach ---------- */

/* Tresc dotykala ramki panelu, przez co koszyk wygladal na ciasny. */
.elementor-menu-cart__main {
    padding: 20px 20px 18px !important;
}

.elementor-menu-cart__products {
    margin-bottom: 4px;
}

.elementor-menu-cart__product {
    padding: 14px 2px;
}

.elementor-menu-cart__product:first-child {
    padding-top: 4px;
}

.elementor-menu-cart__subtotal {
    margin-top: 10px;
    padding-top: 14px;
}

.elementor-menu-cart__footer-buttons {
    margin-top: 16px;
}

/* Na telefonie panel i tak jest waski, wiec marginesy mniejsze. */
@media (max-width: 480px) {
    .elementor-menu-cart__main {
        padding: 14px 14px 12px !important;
    }

    .elementor-menu-cart__product {
        padding: 12px 0;
    }
}

/* ---------- koszyk: marginesy niezalezne od pojemnika ----------
   Panel koszyka renderuje sie w roznych oprawach, zaleznie od szablonu
   naglowka. Dlatego odstep od krawedzi dajemy samym elementom, a nie
   pojemnikowi, ktorego czasem po prostu nie ma. */

.elementor-menu-cart__products,
.elementor-menu-cart__subtotal,
.elementor-menu-cart__footer-buttons,
div.widget_shopping_cart_content > .woocommerce-mini-cart__total,
div.widget_shopping_cart_content > .woocommerce-mini-cart__buttons {
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.elementor-menu-cart__products {
    padding-top: 16px !important;
}

.elementor-menu-cart__footer-buttons {
    padding-bottom: 20px !important;
}

/* kreski maja konczyc sie tam, gdzie tresc, a nie na krawedzi panelu */
.elementor-menu-cart__subtotal {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 480px) {
    .elementor-menu-cart__products,
    .elementor-menu-cart__subtotal,
    .elementor-menu-cart__footer-buttons {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ---------- koszyk: przyciski nie moga wychodzic poza panel ----------
   Przy zakazie lamania tekstu element flex nie kurczy sie ponizej szerokosci
   swojej tresci (min-width: auto), wiec dluzszy napis rozpychal panel.
   min-width: 0 pozwala sie zmiescic, a przy bardzo waskim panelu przyciski
   ustawiaja sie jeden pod drugim zamiast uciekac za krawedz. */

.elementor-menu-cart__footer-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    font-size: 12.5px;
    overflow: hidden;
}

.elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* sam panel tez nie powinien sie rozpychac */
.elementor-menu-cart__container,
div.widget_shopping_cart_content {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

/* ---------- koszyk: przyciski jeden pod drugim ----------
   Na pelnej szerokosci panelu czytaja sie lepiej niz obok siebie,
   a przy okazji nie ma szans na wyjscie poza krawedz. */

.elementor-menu-cart__footer-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
    flex: 0 0 auto;
    width: 100%;
    height: 46px;
    font-size: 13.5px;
}

/* "Zamowienie" to glowna akcja, wiec idzie na gore */
.elementor-menu-cart__footer-buttons a.elementor-button--checkout {
    order: 1;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
    order: 2;
}

/* Elementor ustawia pasek przyciskow w rzedzie wlasnym stylem z szablonu
   naglowka, wiec kierunek i szerokosc trzeba wymusic. */
.elementor-menu-cart__footer-buttons {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* przy pelnej szerokosci nic nie trzeba ucinac */
.elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text {
    text-overflow: clip;
}

/* ---------- koszyk: tekst dokladnie na srodku przycisku ----------
   Przycisk renderowal sie jako display:block z paddingiem 12/28, przez co
   napis siedzial 13 px od gory i 18 px od dolu. Flex z wyzerowanym
   paddingiem i line-height ustawia go dokladnie posrodku w obu osiach. */

.elementor-menu-cart__footer-buttons a.elementor-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    line-height: 1;
}

.elementor-menu-cart__footer-buttons a.elementor-button .elementor-button-text {
    display: inline-block;
    width: auto;
    line-height: 1;
    text-align: center;
}