/* ------------------------------------------------------------------
   Palette. Three greys (text, secondary text, lines), one neutral
   background, one dark for buttons and hover fills, one accent, one
   green for stock/success. Change a colour here, not in the rules.
   ------------------------------------------------------------------ */
:root {
    --color-text: #333333;
    --color-text-secondary: #777777;
    --color-line: #e0e0e0;
    --color-surface: #f5f5f5;
    --color-dark: #333333;
    /* Antique bronze gold: hover fills, badges, headings, active states. */
    --color-accent: #9c7c46;
    /* Green for "Skladom" and success notices (dark enough for small text). */
    --color-success: #2e7d32;
}

/* Theme rules that hard-code the old coral accent, pulled onto the palette:
   link hover, header badges, scroll-to-top, primary buttons, sale prices,
   select2 highlight, checkbox tint — and YITH's green stock label. */
a:hover,
.text-primary,
.product-info .price span.new,
.product-info .price ins,
.product-info .price ins .amount,
.product-info .price ins bdi,
.myaccount-content.address .title .edit-link:hover {
    color: var(--color-accent);
}

.header-tools > div a span,
#scrollUp,
.bg-primary,
.btn-primary,
.btn-hover-primary:hover,
.btn-outline-hover-primary:hover,
.btn-outline-primary:hover,
.select2-results__options .select2-results__option.select2-results__option--highlighted,
.product-info .product-buttons .product-button:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

.btn-outline-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Every .btn hovers the same way as the shop buttons: gold fill, white text
   (the theme had dark, primary and outline variants each hovering differently). */
.btn:hover,
.btn:focus-visible,
.btn-hover-dark:hover,
.btn-outline-hover-dark:hover,
.btn-dark:hover,
.btn-outline-body:hover {
    color: #fff;
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

.form-check input[type="checkbox"] {
    accent-color: var(--color-accent);
    border-color: var(--color-accent);
}

.wishlist_table .product-stock-status span.wishlist-in-stock {
    color: var(--color-success);
}

/* Remaining theme colours off the palette: hero link hover (teal), category
   and footer link hovers (dark), rating stars (yellow), placeholder and
   WooCommerce input text greys, the close "×", the shop filter toggle. */
.category-banner1 .inner .content .title a:hover,
.widget-list li a:hover,
.product-filter-toggle:hover,
.woocommerce .star-rating span::before,
.product-ratings .star-rating .rating-active::before {
    color: var(--color-accent);
}

.widget-list li a:hover {
    border-color: var(--color-accent);
}

.product-filter-toggle,
.offcanvas-close,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
    color: var(--color-text);
}

textarea::placeholder,
input::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

.category-banner1 .inner .content .title .number::before {
    background-color: var(--color-line);
}

/* Hero "Nakupovať": plain text; the underline appears on hover, like the
   menu items. */
.home1-slide1-content .link {
    margin-top: 28px;
}

.home1-slide1-content .link a {
    font-size: 20px;
    letter-spacing: 1.5px;
    padding-bottom: 4px;
    border-bottom-color: transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

@media only screen and (max-width: 767px) {
    .home1-slide1-content .link a {
        font-size: 16px;
    }
}

.home1-slide1-content .link a:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

/* The hero's teal subtitle and dashed ring follow the accent. */
.home1-slide1-content .sub-title {
    color: var(--color-accent);
}

.home1-slide1-content .slide-border {
    border-color: var(--color-accent);
}

/* The theme's own greys pulled onto the palette: dimgray body text,
   #7e7e7e menu items, #999 footer links, breadcrumb and copyright,
   #dedede/#ebebeb rules, #f8f8f8 footer, WooCommerce's #32373c buttons. */
body {
    color: var(--color-text);
}

.menu-text,
.site-main-menu > ul > li > a,
.page-title .breadcrumb .breadcrumb-item,
.page-title .breadcrumb .breadcrumb-item a,
.widget-list li a,
.widget-social a,
.copyright,
.product-summery .product-price del,
.wc-block-components-product-metadata,
.wc-block-components-totals-shipping__via {
    color: var(--color-text-secondary);
}

.site-menu-section,
.footer2-copyright,
.header-section,
.sticky-header {
    border-color: var(--color-line);
}

.footer2-section,
.footer2-copyright {
    background-color: var(--color-surface);
}

.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link) {
    color: #fff;
    background-color: var(--color-dark);
}

.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
    background-color: var(--color-accent);
}

.home1-slide1-content .title,
.home1-slide1-content .sub-title {
    text-align: center;
}

/* The theme removes every focus outline; keyboard users get one back
   (only for keyboard focus, so mouse clicks stay clean). */
:focus-visible {
    outline: 2px solid var(--color-dark) !important;
    outline-offset: 2px;
}

/* Skip link: hidden until it receives keyboard focus. */
.graceart-skip-link:focus {
    position: fixed !important;
    z-index: 100000;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    clip: auto;
    color: #fff;
    background: var(--color-dark);
}

/* Icon links in the header: comfortable tap targets. */
.header-tools > div > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

/* Slider dots: the visible dot stays 10px, the button around it is 24px so
   it can actually be tapped. Footer links get the same minimum height. */
.slick-dots li {
    margin: 0;
}

.slick-dots li button {
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: radial-gradient(circle, var(--color-dark) 5px, transparent 5.5px);
}

/* The active dot is the theme's ring; keep it a ring at the same 24px. */
.slick-dots li.slick-active button {
    width: 24px;
    height: 24px;
    background-image: none;
}

.widget-list li a {
    display: inline-block;
    padding: 2px 0;
}

/* Images carry width/height attributes for layout stability; without this
   a narrowed image would keep its attribute height and stretch. */
img {
    height: auto;
}

/* "Mohlo by sa vám páčiť": room between the heading and the cards, on the
   product page and in the cart's cross-sells. */
.related > h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > .wp-block-heading {
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .related > h2,
    .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > .wp-block-heading {
        margin-bottom: 30px;
    }
}

/* The mobile menu scrolls natively (perfect-scrollbar is no longer loaded). */
.offcanvas-mobile-menu .inner {
    overflow-y: auto;
}

/* Present for search engines and screen readers, not drawn. */
.graceart-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.graceart-404-code {
    margin-bottom: 10px;
    font-size: 120px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
}

.graceart-404-message {
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* The branding band on the product page shows the same logo.jpg as the header,
   at its natural width. The JPG has a white background; multiply blending
   drops it out over the band's photo while the black lettering stays black. */
.page-title .page-title-logo {
    margin-bottom: 30px;
}

.page-title .page-title-logo img {
    display: block;
    width: 463px;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* The header already shows the logo on phones; the band keeps just the breadcrumb. */
@media only screen and (max-width: 767px) {
    .page-title .page-title-logo {
        display: none;
    }
}

/* Footer: the same logo.jpg as the header, its white box blended away over
   the grey footer. */
.widget-about .footer-logo {
    width: 463px;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.product:hover .product-info .title,
.product:hover .product-info .price {
    visibility: visible !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.product-info .title {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.product-info .title a {
    color: var(--color-text);
}

.product-info .title a:hover {
    color: var(--color-accent);
}

/* One add-to-cart button style: the listing's buy button and the product
   detail's add-to-cart. The !important is for the detail button, where
   WooCommerce's "button.button.alt" and the theme's .btn-dark outrank this. */
.graceart-loop-buy-button,
.product-summery .product-buttons .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text) !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 500px;
    background-color: #fff !important;
}

/* Cards in a row are equal height (flex row / matchHeight); make the card a
   column and pin the button to the bottom so buttons line up even when a
   title wraps onto a second line. */
.products .product .product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.products .product .product .product-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.graceart-loop-buy-button {
    align-self: center;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.products .product .product .product-info .price {
    margin-bottom: 30px;
}

.graceart-loop-buy-button i,
.product-summery .product-buttons .single_add_to_cart_button i {
    margin: 0;
    font-size: 11px;
}

.graceart-loop-buy-button:hover,
.product-summery .product-buttons .single_add_to_cart_button:hover,
.product-summery .product-buttons .single_add_to_cart_button:focus {
    color: #fff !important;
    border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

/* Category banners share the product card title typography. */
.category-banner1 .content .title {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    align-items: center;
}

.category-banner1 .content .title a {
    color: var(--color-text);
}

.category-banner1 .content .title a:hover {
    color: var(--color-accent);
}

.category-banner1 .inner .content .title .number {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0;
}

/* Cards stack in one column on phones; the theme's 28px between image and
   title reads as a hole there. */
@media only screen and (max-width: 767px) {
    .product-info:not(:first-child) {
        margin-top: 14px;
    }
}

/* Search: a small dropdown under the magnifier icon (main.js positions it
   from the clicked icon), instead of the theme's full-screen takeover. */
.offcanvas.offcanvas-search {
    top: 0;
    right: 0;
    bottom: auto; /* bootstrap's .offcanvas pins it to the bottom too */
    left: auto;
    width: 630px;
    max-width: calc(100vw - 32px);
    height: auto;
    padding: 16px 52px 16px 20px;
    visibility: hidden;
    transform: translateY(-8px);
    transition: transform 0.25s ease 0s, opacity 0.25s ease 0s, visibility 0s linear 0.25s;
    opacity: 0;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.offcanvas.offcanvas-search.offcanvas-open {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.25s ease 0s, opacity 0.25s ease 0s, visibility 0s linear 0s;
    opacity: 1;
}

/* The theme's white "wipe" that reveals the form after the panel slides in. */
.offcanvas-search::before {
    display: none;
}

.offcanvas-search .inner {
    padding-right: 0;
}

.offcanvas.offcanvas-search .inner .offcanvas-close {
    top: 50%;
    right: -36px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
}

/* A plain "x": no spin of the two strokes on hover. */
.offcanvas.offcanvas-search .inner .offcanvas-close::before,
.offcanvas.offcanvas-search .inner .offcanvas-close::after {
    width: 24px;
    transition: none;
}

.offcanvas.offcanvas-search .inner .offcanvas-close:hover::before {
    transform: rotate(45deg);
}

.offcanvas.offcanvas-search .inner .offcanvas-close:hover::after {
    transform: rotate(-45deg);
}

.offcanvas-search-form input[type="search"] {
    font-size: 20px;
    line-height: 1.5;
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--color-text);
    border-radius: 0;
    background-color: #fff;
}

/* The underline is the field; no ring on top of it. */
.offcanvas-search-form input[type="search"]:focus,
.offcanvas-search-form input[type="search"]:focus-visible {
    outline: none !important;
    box-shadow: none;
    border-bottom-color: var(--color-accent);
}

.offcanvas-search-form input[type="search"]::placeholder {
    opacity: 0.5;
}

/* Product cards: the same 30px below the buy button as above it, matching
   the product detail. The theme puts 50px on both card wrappers (they do not
   collapse inside the flex row), and woocommerce.css zeroes
   ".woocommerce div.product" on product pages, which hit the related grid. */
.products {
    margin-bottom: -30px;
}

.products .product,
.woocommerce .products div.product,
#shop-products.isotope-grid .grid-item {
    margin-bottom: 30px;
}

.products .product .product,
.woocommerce .products div.product div.product {
    margin-bottom: 0;
}

.product-main-section.section-padding {
    padding-bottom: 50px;
}

@media (max-width: 767px) {
    .product-main-section.section-padding {
        padding-bottom: 35px;
    }
}

/* Description tabs sit under the gallery now, so they get column-sized type. */
.product-gallery-tabs {
    margin-top: 40px;
}

/* On phones and tablets the two columns stack, which would put the
   description (it sits under the gallery on desktop) ahead of the price and
   the add-to-cart button. Flatten the columns and the summary into the row so
   the description can be ordered after the add-to-cart form. */
@media only screen and (max-width: 991px) {
    .product-main-section > .container > .row > .col-lg-7,
    .product-main-section > .container > .row > .col-lg-5,
    .product-main-section .product-summery {
        display: contents;
    }

    .product-main-section .product-images,
    .product-main-section .product-gallery-tabs,
    .product-main-section .product-summery > * {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }

    /* Replaces the column's learts-mb-40. */
    .product-main-section .product-images {
        margin-bottom: 40px;
    }

    .product-main-section .product-gallery-tabs {
        order: 1;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    /* The shipping block and everything after it (free shipping line, meta)
       stay together below the description. */
    .product-main-section .product-shipping-info,
    .product-main-section .product-shipping-info ~ * {
        order: 2;
    }

    .product-main-section .product-summery > :last-child {
        margin-bottom: 40px;
    }
}

.product-gallery-tabs .product-info-tab-list {
    justify-content: flex-start;
    margin: 0 -12px 20px;
}

.product-gallery-tabs .product-info-tab-list li {
    padding: 0 12px 10px;
}

/* The theme fades inactive tabs to 20% opacity; keep them black and mark the
   active one with weight and an underline instead. */
.product-gallery-tabs .product-info-tab-list li a {
    font-size: 22px;
    opacity: 1;
    color: var(--color-text);
}

.product-gallery-tabs .product-info-tab-list li a.active {
    font-weight: 600;
    border-bottom: 2px solid var(--color-dark);
}

.product-gallery-tabs .product-infor-tab-content {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .product-gallery-tabs .product-infor-tab-content {
        font-size: 20px;
    }
}

/* One frame for every photo, sized to the tallest upload (1280x1191) so the
   images fill it as much as possible — like sashe, which scales each photo to a
   fixed frame height. Shorter shots keep their proportions and get white bars. */
.product-gallery-slider .product-zoom,
.product-gallery-slider .product-video-slide {
    display: flex !important;

    /* Top-aligned, not centred: a wide photo letterboxed in the middle of the
       frame would start below the thumbnails and the title. */
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1.075 / 1;

    background-color: #ffffff;
}

.product-gallery-slider .product-zoom img,
.product-gallery-slider .product-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.product-thumb-slider-vertical .item,
.product-thumb-slider .item {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1.075 / 1;

    background-color: #ffffff;
}

.product-thumb-slider-vertical .item img,
.product-thumb-slider .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* No arrows under the thumb rail — the strip follows the main slider anyway. */
.product-thumb-slider-vertical .slick-arrow,
.product-thumb-slider .slick-arrow {
    display: none !important;
}

.product-thumb-slider-vertical {
    padding-bottom: 0;
}

/* Thumb strip sits under the main image. */
.product-thumb-slider {
    margin-top: 10px;
}

/* Single product summary: keep the column compact enough to sit beside the gallery */
/* Title, price and availability share one 15px rhythm; only the card-payment
   line keeps a 30px gap below it. */
/* Title and description in the same face as the product cards. */
.product-summery .product-title {
    margin-bottom: 15px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .product-summery .product-title {
        font-size: 26px;
    }
}

/* Reviews sit under the shipping block. */
.product-summery .product-ratings {
    margin-top: 18px;
    margin-bottom: 0;
    padding: 0;
}

.product-summery .product-price {
    margin-bottom: 15px;
    font-size: 25px;
}

/* WooCommerce paints span.price green; the selected variant's price is injected
   with that wrapper, so keep every price in the summary the same black. */
.product-summery .product-price,
.product-summery .product-price .price,
.product-summery .product-price .amount,
.product-summery .product-price bdi {
    color: var(--color-text);
}

/* Same 16px as a variant row, so both read as one list. */
/* Availability and card-payment lines in the product cards' face. Jost ships
   in weights 300–500, so the emphasised parts use 500. */
.product-summery .product-availability,
.product-summery .product-availability strong,
.product-summery .product-availability .graceart-availability-value,

/* The theme's body text is dimgray; the product detail reads black throughout. */
.product-summery,
.product-summery p,
.product-gallery-tabs,
.product-gallery-tabs p,
.product-gallery-tabs li,
.product-gallery-tabs td,
.product-gallery-tabs th {
    color: var(--color-text);
}

.product-availability {
    margin-bottom: 30px;
    color: var(--color-text);
}

.graceart-availability-value {
    font-weight: 500;
    color: var(--color-text);
}





/* The add-to-cart row: same gap below it (to the shipping block on desktop,
   the description on phones) as the 30px above it. Centre the items so the
   button does not stretch to the row's height. */
.product-summery .product-buttons {
    align-items: center;
    margin-bottom: 0;
}

/* woocommerce.css puts 2em under the add-to-cart form; the shipping block
   (desktop) and the description (mobile) carry their own top margin. */
.woocommerce div.product .product-summery form.cart {
    margin-bottom: 0;
}

.product-shipping-info {
    margin-top: 30px;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* Shipping block and variant options in the product cards' face. Buttons do
   not inherit the font, so the tabs get it explicitly. Jost ships in weights
   300–500, so the emphasised parts use 500. */
.product-shipping-info,
.product-shipping-info__title,
.product-shipping-info__tab,
.product-free-shipping,
.graceart-variation-option {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.product-shipping-info__title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
}

.product-shipping-info__tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
}

.product-shipping-info__tab {
    padding: 6px 14px;
    font-size: 16px;
    cursor: pointer;
    color: var(--color-text);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
}

.product-shipping-info__tab.active {
    color: var(--color-text);
    border-bottom-color: var(--color-dark);
}

.product-shipping-info__list {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-shipping-info__list.active {
    display: flex;
}

.product-shipping-info__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--color-text);
}

.product-shipping-info__list i {
    color: var(--color-text);
}

.product-shipping-info__list strong {
    margin-left: auto;
}

.graceart-variations-table {
    display: none;
}

/* The price is shown once in the summary, like on simple products, so hide the
   one WooCommerce injects into .single_variation when a variation is selected. */
.single_variation_wrap .woocommerce-variation-price {
    display: none;
}

.graceart-variation-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.graceart-variation-option {
    display: flex;
    align-items: center;
    gap: 12px;

    /* Bootstrap gives every label a 0.5rem bottom margin — drop it so the rows
       sit on the same rhythm as the "Dostupnosť" line. */
    margin: 0;
    padding: 0;

    cursor: pointer;
    border: none;
    line-height: 1.5;

    /* The theme tracks every label out by 1.6px. */
    letter-spacing: normal;
}

.graceart-variation-option__content {
    gap: 0;
}

.graceart-variation-option:has(.graceart-variation-radio:checked) .graceart-variation-option__meta {
    font-weight: 500;
}

.graceart-variation-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

.graceart-variation-option__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

/* Same size and weight as the "Dostupnosť" line. */
.graceart-variation-option__meta {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
}

.graceart-variation-option__stock {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

.graceart-variation-option__stock.is-in-stock {
    color: var(--color-success);
}

/* Wishlist table (YITH). The theme's ".product-price" rule (block, 24px bold,
   25px margin) leaks into the price cells and breaks the header row, and the
   plugin's responsive JS is dequeued, so the rows are laid out with flex:
   the remove "x" goes to the right and the cells wrap on phones. The
   add-to-cart column is dropped: the product page handles that. */
.wishlist_table th.product-price,
.wishlist_table td.product-price {
    margin: 0;
    line-height: inherit;
}

.wishlist_table td.product-price,
.wishlist_table td.product-stock-status {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

/* No frame around the table; woocommerce.css draws one on table.shop_table. */
.woocommerce table.shop_table.wishlist_table,
.wishlist_table.shop_table {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    border-radius: 0;
}

.wishlist_table thead,
.wishlist_table tbody {
    display: block;
}

.wishlist_table tr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-line);
}

.wishlist_table thead tr {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--color-line);
}

/* Outranks ".woocommerce table.shop_table.wishlist_table tr td" (YITH) and
   ".woocommerce table.shop_table td" (WooCommerce). */
.woocommerce table.shop_table.wishlist_table tr th,
.woocommerce table.shop_table.wishlist_table tr td,
.wishlist_table th,
.wishlist_table td {
    display: block;
    padding: 0;
    text-align: left;
    color: var(--color-text);
    border: none;
    background: none;
}

/* Same as the cart's column headers (YITH bolds th, hence the specificity). */
.woocommerce table.shop_table.wishlist_table thead th,
.wishlist_table th {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
}

.wishlist_table td {
    font-size: 16px;
}

.woocommerce table.shop_table.wishlist_table tr .product-add-to-cart {
    display: none;
}

.wishlist_table .product-thumbnail {
    flex: 0 0 72px;
    order: 1;
}

.wishlist_table .product-thumbnail img {
    display: block;
    width: 72px;
    height: auto;
}

.wishlist_table .product-name {
    flex: 1 1 200px;
    order: 2;
}

.wishlist_table .product-name a {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
}

.wishlist_table .product-name a:hover {
    color: var(--color-accent);
}

.wishlist_table .product-price {
    flex: 0 0 130px;
    order: 3;
}

.wishlist_table .product-stock-status {
    flex: 0 0 130px;
    order: 4;
}

.wishlist_table .wishlist-in-stock {
    color: var(--color-success);
}

.wishlist_table .wishlist-out-of-stock {
    color: var(--color-text-secondary);
}

.wishlist_table .product-remove {
    flex: 0 0 34px;
    order: 5;
    margin-left: auto;
}

/* WooCommerce styles "a.remove" red with !important; here it is the cart's
   trash icon (the "×" text is hidden, the icon drawn as a background). */
.woocommerce .wishlist_table .product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    color: var(--color-text) !important;
    border: 0;
    border-radius: 0;
    background: none !important;
}

.woocommerce .wishlist_table .product-remove a.remove::before {
    width: 22px;
    height: 22px;
    content: "";
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5-1-1h-5l-1 1H5v2h14V4h-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5-1-1h-5l-1 1H5v2h14V4h-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .wishlist_table .product-remove a.remove:hover {
    color: var(--color-accent) !important;
    background: none !important;
}

@media only screen and (max-width: 767px) {
    .wishlist_table thead {
        display: none;
    }

    .wishlist_table tr {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .wishlist_table .product-thumbnail {
        flex-basis: 64px;
    }

    .wishlist_table .product-thumbnail img {
        width: 64px;
    }

    .wishlist_table .product-name {
        flex: 1 1 0;
        min-width: 0;
    }

    .wishlist_table .product-remove {
        order: 3;
        margin-left: auto;
    }

    /* A full-width flex item that forces the line break after the "x". */
    .wishlist_table tbody tr::after {
        content: "";
        flex-basis: 100%;
        order: 4;
        height: 0;
    }

    /* Second line: price and stock, indented under the name. */
    .wishlist_table .product-price,
    .wishlist_table .product-stock-status {
        flex: 0 0 auto;
    }

    .wishlist_table td.product-price {
        order: 5;
        margin-left: 76px;
    }

    .wishlist_table .product-stock-status {
        order: 6;
    }
}

/* Round wishlist button, the same height as the add-to-cart pill beside it. */
.product-buttons .graceart-wishlist-button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 15px;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: #fff;
}

.product-buttons .graceart-wishlist-button i {
    font-size: 13px;
    line-height: 1;
}

.product-buttons .graceart-wishlist-button:hover {
    color: #fff;
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

/* Already in the wishlist: filled gold heart; hovering hints at removal. */
.product-buttons .graceart-wishlist-button.is-active {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.product-buttons .graceart-wishlist-button.is-active:hover {
    color: #fff;
    background-color: var(--color-accent);
}

/* Futura's webfont has no Slovak diacritics (Ž, Ú, Š, …); Jost is a Futura-style
   geometric sans with full Latin Extended coverage. Variable weight 300–500. */
@font-face {
    font-family: "Jost";
    font-weight: 300 500;
    font-style: normal;

    font-display: swap;
    src: url("../fonts/jost/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Jost";
    font-weight: 300 500;
    font-style: normal;

    font-display: swap;
    src: url("../fonts/jost/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Replace decorative "Modesty" script font (missing Slovak diacritic glyphs) with Dancing Script */
@font-face {
    font-family: "Modesty";
    font-weight: 400 700;
    font-style: normal;

    font-display: swap;
    src: url("../fonts/dancing-script/dancing-script-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Modesty";
    font-weight: 400 700;
    font-style: normal;

    font-display: swap;
    src: url("../fonts/dancing-script/dancing-script-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* One face for all text: Jost, the product cards' font. Excluded are the
   icon fonts (Font Awesome, Themify, WooCommerce's star rating), the Modesty
   script used for decorative titles, and the product detail price, which
   keeps Inter. The :not() list gives the rule enough specificity to outrank
   the theme's own per-component font-family declarations. */
body,
body *:not(
    i,
    .fa, .fas, .far, .fab,
    [class^="ti-"], [class*=" ti-"],
    .star-rating, .star-rating *,
    .title-script,
    .home1-slide1-content .title,
    .section-title .sub-title,
    .product-summery .product-price, .product-summery .product-price *
) {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.product-summery .product-price {
    font-family: "Inter", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.product-info .price,
.product-info .price .amount,
.product-info .price bdi {
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--color-text);
}

.product-info .price {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-info .price del,
.product-info .price del .amount,
.product-info .price del bdi {
    color: var(--color-text-secondary);
}

.product-info .price ins {
    margin-left: 10px;
    color: var(--color-accent);
    text-decoration: none;
}

.product-info .price ins .amount,
.product-info .price ins bdi {
    color: var(--color-accent);
}

.woocommerce-notices-wrapper {
    margin-bottom: 30px;
}

.graceart-woo-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0 0 30px;
    padding: 18px 22px;
    list-style: none;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    background: #fff;
}

.graceart-woo-notice--success {
    border-left: 4px solid var(--color-success);
}

/* WooCommerce paints its own coloured icon (green tick, blue "i", red "!")
   as a ::before over ours. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.graceart-woo-notice::before {
    display: none !important;
}

.graceart-woo-notice--info,
.woocommerce-info {
    border-left: 4px solid var(--color-accent);
}

.graceart-woo-notice--info .graceart-woo-notice__icon,
.woocommerce-info .graceart-woo-notice__icon {
    color: var(--color-accent);
}

.graceart-woo-notice--error,
.woocommerce-error {
    border-left: 4px solid #b32d2e;
}

.graceart-woo-notice--error .graceart-woo-notice__icon,
.woocommerce-error .graceart-woo-notice__icon {
    color: #b32d2e;
}

/* Block notices in the cart and checkout (coupon applied, errors, info). */
.wc-block-components-notice-banner {
    color: var(--color-text);
    border-width: 1px 1px 1px 4px;
    border-color: var(--color-line);
    border-radius: 0;
    background-color: var(--color-surface);
}

.wc-block-components-notice-banner.is-success {
    border-left-color: var(--color-success);
}

.wc-block-components-notice-banner.is-success > svg {
    fill: var(--color-success);
    background-color: transparent;
}

.wc-block-components-notice-banner.is-info {
    border-left-color: var(--color-accent);
}

.wc-block-components-notice-banner.is-info > svg {
    fill: var(--color-accent);
    background-color: transparent;
}

.wc-block-components-notice-banner.is-error {
    border-left-color: #b32d2e;
}

.wc-block-components-notice-banner.is-error > svg {
    fill: #b32d2e;
    background-color: transparent;
}

.graceart-woo-notice__icon {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--color-success);
}

.graceart-woo-notice__content {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 16px;
    justify-content: space-between;
}

/* The notice's "View cart" link is the same pill as the shop and cart buttons.
   The !important is for WooCommerce's ".woocommerce a.button", which outranks
   this and paints the grey default. */
.graceart-woo-notice .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    order: 2;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 22px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text) !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 500px;
    background-color: #fff !important;
}

.graceart-woo-notice .button:hover,
.graceart-woo-notice .button:focus,
.woocommerce-message .button:hover,
.woocommerce-message .button:focus,
.woocommerce-info .button:hover,
.woocommerce-info .button:focus,
.woocommerce-error .button:hover,
.woocommerce-error .button:focus {
    color: #fff !important;
    border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

@media only screen and (max-width: 767px) {
    .graceart-woo-notice,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        align-items: flex-start;
        padding: 16px;
    }

    .graceart-woo-notice__content {
        align-items: flex-start;
        flex-direction: column;
    }

    .graceart-woo-notice .button,
    .woocommerce-message .button,
    .woocommerce-info .button,
    .woocommerce-error .button {
        margin-left: 0;
    }
}

.product-video-slide {
    display: flex;
    width: 100%;
}

.product-video-slide video {
    width: 100%;
    max-height: 550px;
    background-color: var(--color-dark);
}

.product-thumb-slider .item.item-video {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--color-dark);
}

.product-thumb-slider .item.item-video::before {
    content: "";

    display: block;

    padding-top: 100%;
}

.product-thumb-slider .item.item-video .video-thumb-icon {
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    transform: translate(-50%, -50%);

    color: #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
}

.product-thumb-slider .item.item-video .video-thumb-icon i {
    font-size: 12px;

    margin-left: 2px;
}

.woocommerce-cart-form .product-quantity .quantity {
    margin: 0;
}

.woocommerce-cart-form .product-quantity input.qty {
    width: 70px;
    text-align: center;
}

.cart-collaterals .cart_totals {
    float: none;
    width: 100%;
}

.cart-totals .wc-proceed-to-checkout {
    padding: 0;
}

.cart-totals .checkout-button {
    margin-top: 20px;
}

.checkout-billing-fields,
.checkout-shipping-fields,
.woocommerce-additional-fields {
    margin-bottom: 40px;
}

.checkout .form-row {
    display: block;
    float: none;
    width: 100%;
}

.checkout .form-row-first,
.checkout .form-row-last {
    width: 50%;
}

.checkout .form-row-first {
    float: left;
    padding-right: 15px;
}

.checkout .form-row-last {
    float: right;
    padding-left: 15px;
}

.checkout .form-row-wide {
    clear: both;
}

.checkout input.input-text,
.checkout textarea,
.checkout select,
.cart-coupon input {
    width: 100%;
}

.woocommerce-checkout-review-order::before,
.woocommerce-checkout-review-order::after,
.checkout-billing-fields .row::after,
.checkout-shipping-fields .row::after,
.woocommerce-additional-fields .row::after {
    display: table;
    clear: both;
    content: "";
}

.payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment_methods .card {
    margin-bottom: 10px;
}

.payment_methods .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment_methods .card-header label {
    flex: 1 1 auto;
    margin-bottom: 0;
    cursor: pointer;
}

.payment_methods .payment_box {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
}

.payment_methods .payment_box::before {
    display: none;
}

.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .checkout .form-row-first,
    .checkout .form-row-last {
        float: none;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Section heading rendered in the decorative sub-title face & colour */
.section-title .title.title-script {
    font-family: "Modesty";
    font-size: 72px;
    font-weight: 300;
    color: var(--color-accent);
}

/* Modesty renders small for its font-size, so the script heading is scaled
   up above the theme's 56/44/30/24px steps for .section-title .title. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title .title.title-script {
        font-size: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title .title.title-script {
        font-size: 46px;
    }
}

@media only screen and (max-width: 575px) {
    .section-title .title.title-script {
        font-size: 38px;
    }
}

/* The leaf decorations are pale green webp images (54×24); drawn as masks
   they take the heading's colour. Sized relative to the font. */
.section-title .title.title-script.title-icon-both::before,
.section-title .title.title-script.title-icon-both::after {
    display: inline-block;
    width: 1.1em;
    height: 0.5em;
    margin: 0 0.25em;
    padding: 0;
    content: "";
    vertical-align: middle;
    background-color: currentColor;
    filter: none;
}

.section-title .title.title-script.title-icon-both::before {
    -webkit-mask: url("../images/title/title-decor-left.webp") center / contain no-repeat;
    mask: url("../images/title/title-decor-left.webp") center / contain no-repeat;
}

.section-title .title.title-script.title-icon-both::after {
    -webkit-mask: url("../images/title/title-decor-right.webp") center / contain no-repeat;
    mask: url("../images/title/title-decor-right.webp") center / contain no-repeat;
}

/* Category filter on the shop toolbar links to the category archives, so the
   button styling from style.css needs to apply to anchors too. */
.shop-product-filter a {
    font-size: 18px;
    line-height: 1;
    margin: 0 20px 10px;
    padding: 0;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border: none;
    background-color: transparent;
}

.shop-product-filter a:hover,
.shop-product-filter a.active {
    color: var(--color-text);
}

@media only screen and (max-width: 1199px) {
    .shop-product-filter a {
        font-size: 16px;
        margin: 0 15px 10px;
    }
}

@media only screen and (max-width: 575px) {
    .shop-product-filter a {
        font-size: 14px;
        margin: 0 10px 10px;
    }
}

/* "O nás" page content */
.graceart-about-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.graceart-about-content > *:first-child {
    margin-top: 0;
}

.graceart-about-content > *:last-child {
    margin-bottom: 0;
}

.graceart-about-content p {
    margin-bottom: 24px;
}

.graceart-about-content h2,
.graceart-about-content h3,
.graceart-about-content h4 {
    margin-bottom: 18px;
    color: var(--color-text);
}

.graceart-about-content h2 {
    font-size: 30px;
}

.graceart-about-content h3 {
    font-size: 24px;
}

.graceart-about-content img {
    max-width: 100%;
    height: auto;
}

.graceart-about-content .wp-block-gallery {
    margin: 40px 0;
}

.graceart-about-content .wp-block-image {
    margin-bottom: 24px;
}

.graceart-about-content .wp-block-image img {
    display: block;
}

/* Kontakt page */
.graceart-contact-intro {
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.8;
}


.graceart-contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.graceart-contact-notice {
    margin-bottom: 25px;
    padding: 12px 16px;
    font-size: 15px;
    border-left: 3px solid var(--color-success);
    background-color: var(--color-surface);
}

.graceart-contact-notice.is-error {
    border-left-color: #b32d2e;
    background-color: var(--color-surface);
}

/* Free shipping threshold notice on the product detail */
.product-free-shipping {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 0;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--color-text);
    background-color: var(--color-surface);
}

.product-free-shipping i {
    flex: 0 0 auto;
    font-size: 18px;
}

.product-free-shipping strong {
    font-weight: 600;
}

/* O mne gallery: one photo per row, full column width */
.graceart-about-content .wp-block-gallery.columns-1 {
    display: block;
}

.graceart-about-content .wp-block-gallery.columns-1 .wp-block-image {
    width: 100%;
    max-width: 100%;
    margin: 0 0 30px;
}

.graceart-about-content .wp-block-gallery.columns-1 .wp-block-image:last-child {
    margin-bottom: 0;
}

.graceart-about-content .wp-block-gallery.columns-1 .wp-block-image img {
    width: 100%;
    height: auto;
}

/* Cart info lines (via [graceart_cart_info]) */
.graceart-cart-info {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.graceart-cart-info__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--color-text);
    background-color: var(--color-surface);
}

.graceart-cart-info__item:last-child {
    margin-bottom: 0;
}

.graceart-cart-info__item i {
    flex: 0 0 auto;
    font-size: 18px;
}

.graceart-cart-info__icons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.graceart-cart-info__icons img {
    display: block;
    height: 20px;
    width: auto;
}

/* Block checkout: place-order button in the product-detail green, and larger */
/* Cart block: WooCommerce sizes it at 13px; read it like the rest of the site.
   Several of its rules take the "small" preset, so it is raised here too. */
.wp-block-woocommerce-cart {
    --wp--preset--font-size--small: 16px;
}

.wp-block-woocommerce-cart .wc-block-cart-items__header,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-totals-item,
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon-link,
.wp-block-woocommerce-cart .wc-block-components-panel__button,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-text-input label,
.wp-block-woocommerce-cart .wc-block-components-notice-banner {
    font-size: 16px;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 17px;
}

/* Cart block: once a line item reaches everything that can be sold, the plus
   button is only disabled by WooCommerce; hide it instead. visibility keeps
   the selector's width so the number does not shift. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--plus:disabled {
    visibility: hidden;
}

@media only screen and (min-width: 782px) {
    .wp-block-woocommerce-checkout .wc-block-checkout__main {
        flex-basis: 56.25% !important;
        max-width: 56.25% !important;
        width: 56.25% !important;
    }

    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        flex-basis: 43.75% !important;
        max-width: 43.75% !important;
        width: 43.75% !important;
    }
}

/* Cart line items and the checkout order summary carry the product's short
   description under its name; neither is the place to read it. Variation
   details stay. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata__description {
    display: none;
}

/* The "Dostupnosť" line under a cart line item and a checkout summary item
   (item data added in inc/woocommerce/product.php): the same size as the
   quantity line, the value emphasised as on the product page. It also says
   how many pieces are made to order, so the blocks' grey "Na objednávku"
   badge would only repeat it. */
.wp-block-woocommerce-cart .wc-block-components-product-backorder-badge,
.wp-block-woocommerce-checkout .wc-block-components-product-backorder-badge {
    display: none;
}

.wp-block-woocommerce-cart .graceart-cart-item-availability,
.wp-block-woocommerce-checkout .graceart-cart-item-availability {
    display: block;
    font-size: var(--wp--preset--font-size--small, 14px);
    line-height: 1.4;
    color: inherit;
}

/* Same size as the "1 ks" quantity line; the "Dostupnosť:" label is bold and
   in the product name's colour, the value stays like the quantity line. */
.wp-block-woocommerce-cart .graceart-cart-item-availability .wc-block-components-product-details__name,
.wp-block-woocommerce-checkout .graceart-cart-item-availability .wc-block-components-product-details__name {
    font-weight: 500;
    color: var(--color-text);
}

.wp-block-woocommerce-cart .graceart-cart-item-availability .wc-block-components-product-details__value,
.wp-block-woocommerce-checkout .graceart-cart-item-availability .wc-block-components-product-details__value {
    font-weight: inherit;
}

/* On narrow layouts WooCommerce repeats the order summary in full above the
   place-order button, so the collapsible copy at the top of the sidebar is
   the same summary twice. Same breakpoint as the repeat. */
@container (max-width: 699px) {
    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
        display: none;
    }
}

/* Checkout order summary: no quantity badge over the thumbnail and no line
   total; the unit price sits to the right of the name and the quantity
   (added by checkout-blocks.js) reads as a line under it. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
    display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details {
    display: none;
}

/* ...except the "Dostupnosť" line, which stays with the quantity line. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details:has(.graceart-cart-item-availability) {
    display: block;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    flex-grow: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description > * {
    grid-column: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description > .wc-block-cart-item__prices {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
}

.wp-block-woocommerce-checkout .graceart-order-summary-item__quantity {
    font-size: var(--wp--preset--font-size--small, 14px);
    line-height: 1.4;
}

/* The "Medzisúčet" row in the cart totals and the checkout order summary
   repeats the total whenever there is no discount; the total row is enough. */
.wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
    display: none;
}

/* Thank-you page: the order overview (number, date, total, payment method)
   reads as one line with each label followed by its value, instead of
   WooCommerce's stacked small-caps label over a large value. Items keep the
   dashed divider and wrap on narrow screens. */
.woocommerce ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 0 0 30px;
    padding: 0;
}

.woocommerce ul.order_details li {
    float: none;
    margin: 0 20px 0 0;
    padding: 0 20px 0 0;
    font-size: 16px;
    line-height: 1.5;
    text-transform: none;
}

.woocommerce ul.order_details li strong {
    display: inline;
    font-size: inherit;
    line-height: inherit;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 22px;
}

.graceart-cart-info__item {
    font-size: 16px;
}

/* WooCommerce's block buttons (cart "Prejsť k objednávke", empty-cart
   "Pokračovať v nákupe", checkout "Objednať") in the
   same pill as every other button on the site. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wp-block-button__link,
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text) !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 500px !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus,
.wp-block-woocommerce-cart .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wp-block-button__link:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:hover,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus {
    color: #fff !important;
    border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

/* The coupon "Použiť" button sits beside a 50px field; keep WooCommerce's
   height so the pill lines up with it. */
.wc-block-components-totals-coupon__button {
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Empty cart: no icon, a larger title and room between it and the
   "Pokračovať v nákupe" button. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
    margin-bottom: 32px;
    font-size: 28px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title + .wp-block-buttons,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title + .wp-block-button,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title + p {
    margin-top: 32px;
}

/* The wishlist title is filtered out; drop its empty wrapper too. */
.wishlist-title-container {
    display: none;
}

/* Empty wishlist: no header row, a plain centred message. */
.wishlist_table:has(.wishlist-empty) thead {
    display: none;
}

.woocommerce table.shop_table.wishlist_table tr td.wishlist-empty {
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

/* Shop colour filter: the selected colour gets a ring. */
.widget-colors li a.is-active span {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-text);
}

/* Cart info lines only make sense with items in the cart; the block swaps
   to the empty-cart markup without a reload. */
body:has(.wp-block-woocommerce-empty-cart-block) .graceart-cart-info {
    display: none;
}

/* Category carousel on touch screens: the theme reveals its arrows only on
   hover and parks them outside the container, so phones never see them. */
@media only screen and (max-width: 991px) {
    .category-banner1-carousel .slick-arrow {
        width: 40px;
        height: 40px;
        justify-content: center;
        opacity: 1;
        color: var(--color-text);
        border: 1px solid var(--color-line);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .category-banner1-carousel .slick-arrow i {
        font-size: 16px;
    }

    .category-banner1-carousel .slick-arrow.slick-prev {
        left: 8px;
    }

    .category-banner1-carousel .slick-arrow.slick-next {
        right: 8px;
    }
}

/* Logged in on a phone: WordPress positions #wpadminbar absolutely, and the
   theme's "body { position: relative }" makes the body its containing block,
   which starts below WordPress's own 46px html margin — so the bar dropped
   down over the site header. Body needs no positioning of its own. */
body.admin-bar {
    position: static;
}

/* Checkout/cart fields: WooCommerce adds a 1px box-shadow ring on focus on
   top of the field's border, and the theme's focus outline came on top of
   that — three lines. One darker border is enough. */
.wc-block-components-text-input input:focus,
.wc-block-components-text-input input:focus-visible,
.wc-block-components-textarea textarea:focus,
.wc-block-components-textarea textarea:focus-visible,
.wc-block-components-country-input select:focus,
.wc-block-components-country-input select:focus-visible,
.wc-block-components-state-input select:focus,
.wc-block-components-state-input select:focus-visible,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-combobox .components-combobox-control__input:focus-visible,
.wc-block-components-checkbox__input:focus-visible,
.wc-block-components-radio-control__input:focus-visible,
.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-totals-coupon__input input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--color-text) !important;
}

.wc-block-components-checkbox__input:focus-visible,
.wc-block-components-radio-control__input:focus-visible {
    outline: 2px solid var(--color-text) !important;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Order-received ("thank you") page, woocommerce/checkout/thankyou.php.
   Same parts as the cart: uppercase column headers over a divided list
   of items, the total at 22px, grey surface cells for the overview,
   pill buttons.
   ------------------------------------------------------------------ */
.graceart-order__received {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.graceart-order__received > strong {
    font-weight: 500;
}

.graceart-order__received-note {
    display: block;
    margin-top: 2px;
    font-weight: 300;
    color: var(--color-text-secondary);
}

.graceart-order__received-note strong {
    font-weight: 400;
    color: var(--color-text);
}

/* Overview strip: number, date, total, payment method. WooCommerce floats
   these and separates them with a dashed line; here they are surface cells. */
.woocommerce .graceart-order__overview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.woocommerce .graceart-order__overview li {
    flex: 1 1 160px;
    float: none;
    margin: 0;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 1.4;
    text-transform: none;
    color: var(--color-text);
    border: none;
    background-color: var(--color-surface);
}

.graceart-order__overview-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.woocommerce .graceart-order__overview li strong {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

/* Bank transfer details and whatever else gateways print. */
.graceart-order__instructions {
    margin: 0 0 40px;
    padding: 20px 24px;
    border: 1px solid var(--color-line);
}

.graceart-order__instructions > :last-child {
    margin-bottom: 0;
}

.graceart-order__instructions h2,
.graceart-order__instructions h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
}

/* The bank-details list also carries WooCommerce's .order_details class. */
.woocommerce .graceart-order__instructions ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.graceart-order__instructions li {
    font-size: 16px;
    line-height: 1.7;
}

.graceart-order__title,
.graceart-order__subtitle {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

/* Column headers, like the cart's "PRODUKT / SPOLU". */
.graceart-order__head {
    display: flex;
    justify-content: space-between;
    padding: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-line);
}

.graceart-order__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.graceart-order__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-line);
}

.graceart-order__item-thumb {
    flex: 0 0 72px;
}

.graceart-order__item-thumb img {
    display: block;
    width: 72px;
    height: auto;
}

.graceart-order__item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.graceart-order__item-name {
    display: block;
    font-size: 16px;
    line-height: 1.4;
}

.graceart-order__item-name a {
    color: var(--color-text);
}

.graceart-order__item-name a:hover {
    color: var(--color-accent);
}

/* Variation details (wc_display_item_meta prints a ul.wc-item-meta). */
.graceart-order__item-meta .wc-item-meta {
    margin: 4px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.graceart-order__item-meta .wc-item-meta li {
    display: flex;
    gap: 4px;
    margin: 0;
}

.graceart-order__item-meta .wc-item-meta p,
.graceart-order__item-meta .wc-item-meta strong {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.graceart-order__item-qty,
.graceart-order__item-unit {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.graceart-order__item-total {
    flex: 0 0 auto;
    font-size: 16px;
    text-align: right;
}

/* Totals under the items: shipping, discounts, and the total at 22px like
   the cart's "Suma". */
.graceart-order__totals {
    margin: 0;
}

.graceart-order__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--color-line);
}

.graceart-order__total dt {
    font-weight: 400;
}

.graceart-order__total dd {
    margin: 0;
    text-align: right;
}

.graceart-order__total .shipped_via,
.graceart-order__total .graceart-packeta-point {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.graceart-order__total--order_total {
    padding: 18px 0 0;
    font-size: 22px;
    font-weight: 500;
    border-bottom: none;
}

/* Addresses beside the items. */
.graceart-order__address {
    margin-bottom: 30px;
}

.graceart-order__address:last-child {
    margin-bottom: 0;
}

/* WooCommerce frames the address and draws phone and envelope icons
   before those lines; plain text here, like the checkout. */
.woocommerce-customer-details .graceart-order__address address,
.graceart-order__address p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-style: normal;
    line-height: 1.7;
    border: none;
    border-radius: 0;
}

.woocommerce-customer-details .graceart-order__address .woocommerce-customer-details--phone,
.woocommerce-customer-details .graceart-order__address .woocommerce-customer-details--email {
    padding-left: 0;
    color: var(--color-text-secondary);
}

.woocommerce-customer-details .graceart-order__address .woocommerce-customer-details--phone::before,
.woocommerce-customer-details .graceart-order__address .woocommerce-customer-details--email::before {
    display: none;
}

.graceart-order__note p {
    font-weight: 300;
}

/* "Continue shopping" and the invoice link, in the site's pill. The
   !important is for WooCommerce's ".woocommerce a.button" on the invoice. */
.graceart-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 50px 0 0;
}

.graceart-order__button,
.woocommerce a.graceart-order__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text) !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 500px;
    background-color: #fff !important;
}

.graceart-order__button:hover,
.graceart-order__button:focus,
.woocommerce a.graceart-order__button:hover,
.woocommerce a.graceart-order__button:focus {
    color: #fff !important;
    border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

/* E-mail verification asked of a guest who returns to the page later. */
.woocommerce form.woocommerce-verify-email {
    max-width: 560px;
}

.woocommerce form.woocommerce-verify-email p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
}

.woocommerce form.woocommerce-verify-email .form-row {
    padding: 0;
}

.woocommerce form.woocommerce-verify-email label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
}

.woocommerce form.woocommerce-verify-email .input-text {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: 0;
    background: #fff;
}

.woocommerce form.woocommerce-verify-email .input-text:focus {
    outline: none;
    border-color: var(--color-text);
}

/* Account forms (login, register, lost password, verify e-mail) and the
   account pages otherwise get WooCommerce's grey 3px-radius button. */
.woocommerce form.woocommerce-verify-email .button,
.woocommerce form.woocommerce-form-login .button,
.woocommerce form.woocommerce-form-register .button,
.woocommerce form.woocommerce-ResetPassword .button,
.woocommerce form.woocommerce-EditAccountForm .button,
.woocommerce-MyAccount-content .button {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    font-family: "Jost", "Futura", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: 500px;
    background-color: #fff;
}

.woocommerce form.woocommerce-verify-email .button:hover,
.woocommerce form.woocommerce-verify-email .button:focus,
.woocommerce form.woocommerce-form-login .button:hover,
.woocommerce form.woocommerce-form-login .button:focus,
.woocommerce form.woocommerce-form-register .button:hover,
.woocommerce form.woocommerce-form-register .button:focus,
.woocommerce form.woocommerce-ResetPassword .button:hover,
.woocommerce form.woocommerce-ResetPassword .button:focus,
.woocommerce form.woocommerce-EditAccountForm .button:hover,
.woocommerce form.woocommerce-EditAccountForm .button:focus,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .button:focus {
    color: #fff;
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

@media only screen and (max-width: 767px) {
    .woocommerce .graceart-order__overview li {
        flex-basis: calc(50% - 5px);
    }

    .graceart-order__item {
        gap: 12px;
    }

    .graceart-order__item-thumb {
        flex-basis: 56px;
    }

    .graceart-order__item-thumb img {
        width: 56px;
    }

    .graceart-order__actions {
        margin-top: 40px;
    }
}

/* Checkout: Packeta pickup point picker (checkout-packeta.js) under the
   shipping options. A boxed step of its own; the border turns to the error
   colour once the place-order button asks for a point. */
.wp-block-woocommerce-checkout .graceart-packeta {
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px solid var(--color-line);
    background-color: var(--color-surface);
}

.wp-block-woocommerce-checkout .graceart-packeta--error {
    border-color: #cc1818;
}

.wp-block-woocommerce-checkout .graceart-packeta__label {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

.wp-block-woocommerce-checkout .graceart-packeta__hint {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.wp-block-woocommerce-checkout .graceart-packeta__point {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.5;
}

.wp-block-woocommerce-checkout .graceart-packeta__name {
    font-weight: 500;
    color: var(--color-text);
}

.wp-block-woocommerce-checkout .graceart-packeta__address {
    color: var(--color-text-secondary);
}

.wp-block-woocommerce-checkout .graceart-packeta__button.wc-block-components-button {
    width: auto;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 14px;
}

.wp-block-woocommerce-checkout .graceart-packeta__button.wc-block-components-button.outlined {
    color: var(--color-text);
    border-color: var(--color-dark);
    background-color: #fff;
}

.wp-block-woocommerce-checkout .graceart-packeta__button.wc-block-components-button.outlined:hover {
    color: #fff;
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

.wp-block-woocommerce-checkout .graceart-packeta__error,
.wp-block-woocommerce-checkout .graceart-packeta .wc-block-components-validation-error {
    margin-top: 10px;
    font-size: 14px;
    color: #cc1818;
}

.wp-block-woocommerce-checkout .graceart-packeta .wc-block-components-validation-error p {
    margin: 0;
}