:root {
    --primary: #194798;
    --secondary: #660033;
    --black: #1f1f1f;
    --white: #F2EEE7;
    --grey-bg: #EFEFEF;
    --dark-grey: #C7C7C7;
    --darker: #858585;
    --error: #B74648;
    --success: #43A47D;
    --red: #9e0000;

    --h1: 50px;
    --h2: 40px;
    --h3: 30px;
    --h4: 18px;
    --h5: 16px;
    --h6: 14px;

    --p: 14px;

    --caption: 16px;

    --font-family: 'Montserrat';

    --normal: 400;
    --medium: 500;
    --semi-bold: 600;
    --bold: 700;
}


body {
    font-family: var(--font-family);
    font-size: var(--p);
    background-color: #1F2021;
    height: 100%;
    font-weight: 400;

    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding-top: 87px;
}

/* Front page and About page heroes sit directly under the header (no
   spacer) so the fixed header's translucent-at-top background shows
   the hero photo through it instead of a gap of plain body background. */
body.home,
body.page-template-page-about-php,
body.single-printlab_service,
body.single-photo_service {
    padding-top: 0;
}

/* Custom checkbox for the auth modals (Sign in "Запомни ме" / Sign up
   "terms"). Defined here rather than as Tailwind CDN utility classes -
   Tailwind CDN injects its generated stylesheet after first paint, and
   checkboxes/radios lock in native widget rendering at that first paint
   in a way a later-injected appearance:none doesn't reliably undo. */
.auth-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    color-scheme: dark;
    width: 16px !important;
    height: 16px !important;
    background-color: #2F2F2F !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    border: 1px solid #F6B847 !important;
    cursor: pointer;
}
.auth-checkbox:checked {
    background-color: #2F2F2F !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8'%3E%3Cpath fill='%23F6B847' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

/* h2 headings are medium (500), not the browser's default bold. */
h2 {
    font-weight: 500;
}

.nav-menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding: 10px 8px;
    transition: background-color .2s ease, color .2s ease;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-parent > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current_page_item > a,
.nav-menu li.current_page_ancestor > a {
    background-color: #2F2F2F;
    color: #F6B847;
}

#mobile-menu-list li a {
    display: flex;
    width: 100%;
    white-space: normal;
    font-size: 16px;
    padding: 12px 8px;
}

/* GTranslate language switcher (BG | EN) — keep the header's gold styling */
.gt-lang-switcher a {
    color: rgba(242, 238, 231, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.gt-lang-switcher a:hover,
.gt-lang-switcher a.gt-current-lang {
    color: #F6B847;
}

body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* The studio/service gallery's prev-next buttons sit half outside the slider
   (-19px). The page wrappers only pad 10px, so without this the buttons spill
   past the viewport edge and add horizontal overflow. */
.studio-gallery-wrap,
.museum-gallery-wrap {
    margin-left: 19px;
    margin-right: 19px;
}

/* Museum era tabs: centred while they all fit, left-aligned (and swipeable)
   as soon as they overflow. The class is toggled from Swiper's lock state. */
.era-tabs-swiper.era-tabs-fit .swiper-wrapper {
    justify-content: center;
}

/* Swiper puts spaceBetween as a margin on every slide, including the last -
   that trailing margin offsets the centring, so drop it while centred. */
.era-tabs-swiper.era-tabs-fit .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* Product gallery (Swiper) */
.product-gallery-thumbs .swiper-slide {
    opacity: 0.5;
    border: 1px solid transparent;
    cursor: pointer;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: #F6B847;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* WooCommerce's own stylesheet targets #payment by id (higher specificity
   than utility classes), painting it light grey - repaint to match the
   checkout sidebar's dark card. */
.woocommerce-checkout #payment {
    background: #191919;
    border-radius: 0;
}

.woocommerce-checkout #payment #place_order {
    float: none;
}

/* WooCommerce wraps sale prices in <ins>, which browsers underline by default */
ins .woocommerce-Price-amount,
ins {
    text-decoration: none;
}

/* WooCommerce add-to-cart form */
.product-add-to-cart form.cart {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

@media (min-width: 576px) {
    .product-add-to-cart form.cart {
        gap: 40px;
    }
}

.product-add-to-cart .quantity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-add-to-cart .quantity .qty {
    width: 40px;
    height: 40px;
    background: #191919;
    color: #F2EEE7;
    border: none;
    padding: 0;
    font-size: 15px;
    text-align: center;
    -moz-appearance: textfield;
}

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

.product-add-to-cart .qty-btn {
    background: none;
    color: #F6B847;
    border: none;
    width: auto;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.product-add-to-cart .qty-btn:hover {
    color: #ffd280;
}

.product-add-to-cart .single_add_to_cart_button {
    background: #E8AD43 !important;
    color: #20201F !important;
    border: none;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    font-size: 13px;
    padding: 0 15px;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .product-add-to-cart .single_add_to_cart_button {
        flex: none;
        min-width: 220px;
    }
}

.product-add-to-cart .single_add_to_cart_button:hover {
    opacity: .9;
}

.product-add-to-cart .stock {
    width: 100%;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    margin-top: 8px;
}

/* WooCommerce notices (add-to-cart success/error, stock errors, etc.) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    list-style: none;
    background: #191919;
    color: #F2EEE7;
    padding: 15px 20px;
    margin: 0 0 25px;
    font-size: 14px;
    border: none;
    border-left: 3px solid #43A47D;
    border-radius: 0;
}

/* .woocommerce-message/-info normally carry a single line of text plus an
   optional button ("Product added to cart. View cart") - flex-row suits
   that. .woocommerce-error is different: checkout validation puts every
   failed field as its own <li> inside the SAME list, so flex-row was
   cramming them all onto one line instead of stacking them. */
.woocommerce-message,
.woocommerce-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.woocommerce-error {
    display: block;
}

.woocommerce-info {
    border-left-color: #F6B847;
}

.woocommerce-error {
    border-left-color: #B74648;
    color: #B74648;
}

.woocommerce-message li,
.woocommerce-info li {
    list-style: none;
    margin: 0;
}

.woocommerce-error li {
    list-style: none;
    margin: 0 0 10px;
}

.woocommerce-error li:last-child {
    margin-bottom: 0;
}

/* Hide WooCommerce's default icon-font marker - it overlaps the text on our
   flex layout; the coloured left bar signals the notice type instead. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none;
}

.woocommerce-message .button,
.woocommerce-error .button {
    background: #E8AD43 !important;
    color: #191919 !important;
    border: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    font-size: 12px;
    padding: 10px 18px;
    white-space: nowrap;
}

/* Long-form legal/content pages (Terms, Privacy Policy) */
.terms-content h2 {
    color: #F2EEE7;
    font-size: 20px;
    font-weight: 500;
    margin: 40px 0 15px;
}

.terms-content h2:first-child {
    margin-top: 0;
}

.terms-content p {
    margin-bottom: 15px;
}

.terms-content a {
    color: #F6B847;
    text-decoration: underline;
}

/* Shop page (Купи Online) - category tabs slider (Swiper) */

.category-tabs-prev,
.category-tabs-next {
    cursor: pointer;
    transition: opacity .2s;
}

.category-tabs-prev.swiper-button-disabled,
.category-tabs-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Shop page - subcategory pills shown under the active parent category */

.subcategory-tabs-prev,
.subcategory-tabs-next {
    cursor: pointer;
    transition: opacity .2s;
}

.subcategory-tabs-prev.swiper-button-disabled,
.subcategory-tabs-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.sort-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B847' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
    cursor: pointer;
}

/* Студио Atelier32 - space gallery slider (Swiper) */
.studio-gallery-prev,
.studio-gallery-next {
    cursor: pointer;
    transition: opacity .2s;
}

.studio-gallery-prev.swiper-button-disabled,
.studio-gallery-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Студио Atelier32 - video lightbox embed */
.studio-video-embed iframe {
    width: 100%;
    height: 100%;
}

/* Студио Atelier32 - WS Form reservation form styling to match theme fields */
.studio-reservation-form .wsf-field-wrapper {
    margin-bottom: 15px;
    position: relative;
}

.studio-reservation-form .wsf-field-wrapper:not([data-type="checkbox"]) .wsf-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.studio-reservation-form input.wsf-field:not([type="checkbox"]),
.studio-reservation-form select.wsf-field,
.studio-reservation-form textarea.wsf-field {
    width: 100%;
    background: #191919;
    color: #F2EEE7;
    border: none;
    border-radius: 0;
    padding: 13px 16px;
    font-size: 13px;
    resize: none;
}

.studio-reservation-form input.wsf-field::placeholder,
.studio-reservation-form textarea.wsf-field::placeholder {
    color: rgba(255, 255, 255, .5);
}

.studio-reservation-form .wsf-input-icon-wrap input.wsf-field::placeholder,
.studio-reservation-form .wsf-input-icon-wrap select.wsf-field {
    color: #F2EEE7;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.studio-reservation-form select.wsf-field {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Same gold chevron as the date/time fields - !important so it beats
       WS Form's own default select-arrow background. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B847' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}

.studio-reservation-form [data-type="checkbox"] .wsf-label,
.studio-reservation-form input[type="checkbox"].wsf-field + label.wsf-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .7) !important;
}

.studio-reservation-form input[type="checkbox"].wsf-field {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-color: #2F2F2F;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    border: 1px solid #F6B847;
    border-radius: 0;
    cursor: pointer;
}

/* WS Form hides the real <input> and draws the checkbox with the label's
   ::before (box) and ::after (tick) pseudo-elements - restyle those to the
   16px gold / #2F2F2F box with a gold tick instead of WS Form's blue default. */
.studio-reservation-form input[type="checkbox"].wsf-field + label.wsf-label::before,
.studio-reservation-form input[type="checkbox"].wsf-field:checked + label.wsf-label::before {
    width: 16px !important;
    height: 16px !important;
    top: 0 !important;
    background-color: #2F2F2F !important;
    border: 1px solid #F6B847 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.studio-reservation-form input[type="checkbox"].wsf-field + label.wsf-label::after {
    width: 16px !important;
    height: 16px !important;
    top: 0 !important;
}

.studio-reservation-form input[type="checkbox"].wsf-field:checked + label.wsf-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8'%3E%3Cpath fill='%23F6B847' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
    background-size: 10px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.studio-reservation-form [data-row-checkbox] {
    display: flex;
    align-items: flex-start;
}

.studio-reservation-form .wsf-invalid-feedback {
    color: #B74648;
    font-size: 12px;
    margin-top: 5px;
}

.studio-reservation-form button.wsf-button.wsf-button-primary {
    width: 100%;
    background: #F6B847;
    color: #20201F;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px;
    cursor: pointer;
}

.studio-reservation-form button.wsf-button.wsf-button-primary:hover {
    opacity: .9;
}

/* Студио Atelier32 - reservation form field icons (service/date/time) */
.studio-reservation-form .wsf-input-icon-wrap {
    position: relative;
}

.studio-reservation-form .wsf-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #F6B847;
    pointer-events: none;
    z-index: 2;
    display: flex;
}

.studio-reservation-form .wsf-input-icon-wrap input.wsf-field,
.studio-reservation-form .wsf-input-icon-wrap select.wsf-field {
    padding-left: 42px;
}

.studio-reservation-form .wsf-input-icon-wrap select.wsf-field {
    background-position: right 14px center;
}

.studio-reservation-form .wsf-field-wrapper[data-id="2"] input.wsf-field,
.studio-reservation-form .wsf-field-wrapper[data-id="3"] input.wsf-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B847' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* No focus outline/ring; active/focused field just switches to the hover card
   colour (#2F2F2F). background-color keeps any chevron/checkmark image. */
.studio-reservation-form .wsf-field:focus,
.studio-reservation-form .wsf-field:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: #2F2F2F !important;
}

/* All checkboxes site-wide match the login modal's "Запомни ме" box:
   16px, #2F2F2F fill, gold border, gold checkmark when checked.
   Wrapped in the same @layer overrides as the checkout-specific rules
   further down - Flowbite declares its checkbox reset inside its own
   @layer, and !important declarations inside a layer always beat
   !important declarations outside any layer, regardless of specificity.
   Without this, Flowbite's [type=checkbox]:checked{background-color:
   currentColor!important; border-color:#0000!important} wins outright
   on any page this site-wide (unscoped) rule is the only one in play -
   e.g. the cart page, which isn't covered by the .woocommerce-checkout
   -scoped rules below. */
@layer overrides {
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    color-scheme: dark;
    width: 16px !important;
    height: 16px !important;
    background-color: #2F2F2F !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 10px !important;
    border: 1px solid #F6B847 !important;
    border-radius: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

input[type="checkbox"]:checked {
    background-color: #2F2F2F !important;
    border-color: #F6B847 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8'%3E%3Cpath fill='%23F6B847' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
}
}

/* All radio buttons site-wide match the photo-print "Гланцова/Матова" paper
   radios (16px circle, #2F2F2F fill, gold ring, gold centre dot when checked).
   Same technique as .pp-paper-radio: the ring is an inset box-shadow and the
   fill uses color:#2F2F2F so the forms-reset's layered `background-color:
   currentColor !important` on :checked still resolves to #2F2F2F. */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #2F2F2F;
    background-color: #2F2F2F !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #F6B847 !important;
    outline: none !important;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F6B847;
    transform: translate(-50%, -50%);
}

/* No textarea drag-resize handle anywhere. */
textarea {
    resize: none;
}

/* Flatpickr calendar/time picker - dark theme to match the form */
.flatpickr-calendar {
    background: #202020;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-weekday {
    background: #202020;
    color: #F2EEE7;
    fill: #F2EEE7;
}

.flatpickr-current-month input.cur-year {
    color: #F2EEE7;
}

.flatpickr-day {
    color: #F2EEE7;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, .3);
}

.flatpickr-day.today {
    border-color: #F6B847;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #F6B847;
    border-color: #F6B847;
    color: #191919;
}

.flatpickr-day:hover {
    background: rgba(246, 184, 71, .2);
}

.flatpickr-time {
    background: #202020;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    background: #202020;
    color: #F2EEE7;
}

.flatpickr-time input.flatpickr-hour:focus,
.flatpickr-time input.flatpickr-minute:focus,
.flatpickr-time input.flatpickr-second:focus {
    background: #F6B847;
    color: #191919;
}

.flatpickr-time .numInputWrapper:hover {
    background: rgba(246, 184, 71, .15);
}

.flatpickr-time .flatpickr-time-separator {
    color: #F2EEE7;
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: #F2EEE7;
}

.numInputWrapper span.arrowDown:after {
    border-top-color: #F2EEE7;
}

/* Музей на фотографията - gallery slider + era tabs (Swiper) */
.museum-gallery-prev,
.museum-gallery-next {
    cursor: pointer;
    transition: opacity .2s;
}

.museum-gallery-prev.swiper-button-disabled,
.museum-gallery-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.era-tabs-swiper {
    max-width: 100%;
}

.exhibit-card img {
    transition: transform .3s;
}

.exhibit-card:hover img {
    transform: scale(1.03);
}

/* "Added to shopping bag" cart drawer */
.cart-drawer-item .qty-btn {
    background: #191919;
    color: #F6B847;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.cart-drawer-item .qty-btn:hover {
    background: #2a2a2a;
}

.cart-drawer-item .qty-btn:disabled,
.cart-drawer-remove:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#cart-drawer-items .product-price del {
    color: #676767;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 400;
}

#cart-drawer-items .product-price ins {
    color: #F6B847;
    text-decoration: none;
    font-weight: 500;
}

/* "Количка" cart page */
.cart-page-item .qty-btn {
    background: none;
    color: #F6B847;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.cart-page-item .qty-btn:hover {
    background: #2a2a2a;
}

.cart-page-item .qty-btn:disabled,
.cart-page-remove:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#cart-page-items .product-price del {
    display: block;
    color: #676767;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.3;
    margin-bottom: 6px;
}

#cart-page-items .product-price ins {
    display: block;
    color: #F6B847;
    text-decoration: none;
    font-weight: 500;
}

/* Cart/drawer product thumbnails. The templates already ask for
   "w-full h-full object-contain", but WooCommerce's own stylesheet has
   ".woocommerce img, .woocommerce-page img { height: auto }" - specificity
   (0,1,1) against Tailwind's .h-full (0,1,0) - so the height never applied
   and the image sat short inside its box. Most obvious on Fancy Product
   Designer items (чаша etc.): FPD swaps the src for its own wide, letter-
   boxed design render, which with height:auto ended up well under half the
   box height. Scoped to .cart-item-thumb rather than the row so it can't
   catch the trash icon. Only the height is forced - each template keeps its
   own object-cover/object-contain class, which Woo never overrides. */
.cart-item-thumb img {
    height: 100% !important;
    width: 100%;
}

/* Calculator qty buttons - same look/hover as the cart drawer's */
#pp-calculator .qty-btn,
#wf-calculator .qty-btn {
    background: none;
    color: #F6B847;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#pp-calculator .qty-btn:hover,
#wf-calculator .qty-btn:hover {
    background: #2a2a2a;
}

/* Native <select> option lists render with the OS default (often white)
   background; force the dark theme colours so they're readable. */
#pp-calculator select option,
#wf-calculator select option {
    background-color: #191919;
    color: #F2EEE7;
}

/* Paper-type cards: grey icon goes gold (with a gold border + #2F2F2F fill)
   when selected. Class .pp-selected is toggled in JS; :has() is the CSS-only
   fallback for the same state. */
.pp-paper-option:has(input:checked),
.pp-paper-option.pp-selected {
    border-color: #F6B847;
    background: #2F2F2F;
}

.pp-paper-option:has(input:checked) .pp-paper-icon,
.pp-paper-option.pp-selected .pp-paper-icon {
    color: #F6B847;
}

/* Custom radio for the paper cards: 20px circle, gold border, #2F2F2F fill,
   7.5px gold dot when checked. The #pp-order-section ID scope + !important is
   needed to beat the forms reset's `[type=radio]:checked { background-color:
   currentColor !important }` (its `.dark` variant ties plain-class specificity
   and, being injected later, would otherwise win → black fill). Setting color
   also makes any leftover `currentColor` resolve to the same #2F2F2F. */
#pp-order-section .pp-paper-radio,
#pp-order-section .pp-paper-radio:checked,
#pp-order-section .pp-paper-radio:focus {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #2F2F2F;
    background-color: #2F2F2F !important;
    background-image: none !important;
    /* The forms reset forces border-color:transparent!important from inside a
       Tailwind @layer (which beats unlayered !important), so draw the gold ring
       with an inset box-shadow instead - it isn't reset. */
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #F6B847 !important;
    outline: none !important;
    position: relative;
    cursor: pointer;
}

.pp-paper-radio:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #F6B847;
    transform: translate(-50%, -50%);
}

/* Frame-builder custom radios: 16px circle, gold ring, #2F2F2F fill, 6px gold
   dot. Same box-shadow-ring approach as the paper radios (border-color is reset
   by a layered !important from the forms plugin). */
#fb-panel-custom .fb-radio,
#fb-panel-custom .fb-radio:checked,
#fb-panel-custom .fb-radio:focus {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #2F2F2F;
    background-color: #2F2F2F !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #F6B847 !important;
    outline: none !important;
    position: relative;
    cursor: pointer;
}

#fb-panel-custom .fb-radio:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F6B847;
    transform: translate(-50%, -50%);
}

/* Frame-builder custom checkbox: 16px square, gold border, #2F2F2F fill,
   gold check when ticked. Same reset-beating approach as .fb-radio. */
#fb-panel-custom .fb-checkbox,
#fb-panel-custom .fb-checkbox:checked,
#fb-panel-custom .fb-checkbox:focus {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #2F2F2F;
    background-color: #2F2F2F !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #F6B847 !important;
    outline: none !important;
    position: relative;
    cursor: pointer;
}

#fb-panel-custom .fb-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 4px;
    height: 8px;
    border: solid #F6B847;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.pp-disabled {
    opacity: .4;
    pointer-events: none;
    user-select: none;
}

/* Disabled action buttons (gold CTAs): grey #2F2F2F fill + grey #676767 text
   instead of a dimmed gold, per the design's disabled-button spec. */
button.bg-gold:disabled,
.product-add-to-cart .single_add_to_cart_button:disabled {
    background-color: #2F2F2F !important;
    background-image: none !important;
    color: #676767 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Inline "uploading" spinner shared by every photo uploader (photo-print,
   wide-format, frame-builder). Injected as the dropzone's sibling from
   js/custom.js via ctUploadSpinner() and shown in the dropzone's own spot
   while the AJAX upload runs. h-full lets it fill fixed-height wrappers
   (the frame-builder aspect-square frame); min-height holds the space in
   the flex cards where the hidden dropzone would otherwise collapse. */
.ct-inline-spinner {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 200px;
    align-items: center;
    justify-content: center;
}

.ct-upload-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(246, 184, 71, .25);
    border-top-color: #F6B847;
    border-radius: 50%;
    animation: ct-upload-spin .8s linear infinite;
}

@keyframes ct-upload-spin {
    to { transform: rotate(360deg); }
}

/* Aspect-ratio lock toggle (frame-builder + wide-format): the link icon is
   muted grey when unlocked and gold when locked. Driven off aria-pressed so
   it wins deterministically over the button's Tailwind text-[#676767] class
   (which otherwise ties on specificity and can beat a toggled text-gold). */
#fb-aspect-lock[aria-pressed="true"],
#wf-aspect-lock[aria-pressed="true"] {
    color: #F6B847;
}

/* Selected "Популярни размери" chip (frame-builder + wide-format): gold
   border + gold text, matching the hover. Two-class selector so it beats
   the chip's Tailwind border-white/10 / text colour on specificity. */
.fb-popular-size.is-selected,
.wf-popular-size.is-selected {
    border-color: #F6B847;
    color: #F6B847;
}

/* Golden button fill is #E8AD43 site-wide (slightly deeper than the #F6B847
   gold used for text/borders/icons). Scoped to interactive elements that use
   the gold fill - buttons, gold CTA links, and the WooCommerce add-to-cart /
   notice buttons - so gold text, borders and icon accents stay #F6B847.
   Also covers the hover-fill state on outline buttons (hover:bg-gold). */
button.bg-gold,
a.bg-gold,
input.bg-gold,
.single_add_to_cart_button,
.woocommerce-message .button,
.woocommerce-error .button {
    background-color: #E8AD43 !important;
}

.hover\:bg-gold:hover {
    background-color: #E8AD43 !important;
}

/* Files tab 3-dots: gold while its menu is open (aria-expanded=true). Hover
   gold is handled by the Tailwind hover:text-gold utility; this covers the
   click-open state which a stylesheet hover can't. */
.file-menu-btn[aria-expanded="true"] {
    color: #F6B847;
}

/* Order-history line-item price. WooCommerce's get_price_html() outputs the
   sale price as <del>old</del><ins>new</ins>; render them stacked - old price
   struck through in grey, current price gold - per the orders design. A
   non-sale product prints a single amount, styled gold by the base rule. */
.order-item-price {
    color: #F6B847;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .05em;
    white-space: nowrap;
}
.order-item-price del {
    display: block;
    color: #676767;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: line-through;
}
.order-item-price ins {
    display: block;
    color: #F6B847;
    text-decoration: none;
}

/* Photo-print ZIP strip kebab: gold while its options menu is open (matches
   the profile files-tab dots). Hover-gold is handled by the Tailwind utility. */
.pp-zip-menu-btn[aria-expanded="true"] {
    color: #F6B847;
}

/* "Изделия със снимки" price (old struck grey, current gold) below the FPD
   designer, matching the product-page price treatment. */
.pp-product-price { color: #F6B847; font-size: 18px; font-weight: 500; letter-spacing: .05em; }
.pp-product-price del { display: block; color: #676767; font-size: 13px; font-weight: 400; letter-spacing: 0; text-decoration: line-through; }
.pp-product-price ins { color: #F6B847; text-decoration: none; }

/* "Изделия със снимки" quantity +/- (from the WooCommerce add-to-cart form):
   proper square hit area with the theme's subtle hover instead of the washed
   pale-gold that the shared .product-add-to-cart rule gives. */
.pp-add-to-cart .quantity { gap: 14px; }
.pp-add-to-cart .qty-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #F6B847;
}
.pp-add-to-cart .qty-btn:hover {
    background: #2a2a2a;
    color: #F6B847;
}

/* "Изделия със снимки" price/qty/add-to-cart on small screens: keep the qty
   control and add-to-cart on one row (compact qty per the design) and shrink
   the price a touch, so nothing is pushed off-screen. */
@media (max-width: 575px) {
    .pp-add-to-cart form.cart { gap: 20px; flex-wrap: nowrap; }
    .pp-add-to-cart .quantity { gap: 12px; }
    .pp-add-to-cart .qty-btn { width: auto; height: auto; font-size: 20px; }
    .pp-add-to-cart .qty-btn:hover { background: none; }
    .pp-add-to-cart .quantity .qty { width: 32px; height: 32px; font-size: 13px; }
    .pp-add-to-cart .single_add_to_cart_button { flex: 0 1 auto; min-width: 0; }
    .pp-product-price { font-size: 15px; }
    .pp-product-price del { font-size: 12px; }
}

/* ------------------------------------------------------------------ *
 * Centered card grids
 *
 * Selected card sections use flexbox instead of display:grid so a PARTIAL
 * last row centers rather than left-aligning (CSS grid can't center orphan
 * items). Each child's flex-basis + the gap reproduce the former grid column
 * counts at every theme breakpoint (sm 320 / md 576 / lg 768 / xl 992 /
 * xxl 1230 / 2xl 1660).
 * ------------------------------------------------------------------ */
.cards-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.cards-grid > * { flex-grow: 0; flex-shrink: 1; min-width: 0; }

/* front page "Всичко за печата": 2 / 4 @lg / 6 @xl / 8 @2xl; gap 20 */
.cards-hero8 { gap: 20px; }
.cards-hero8 > * { flex-basis: calc(50% - 10px); }
@media (min-width:768px){ .cards-hero8>*{ flex-basis:calc(25% - 15px) } }
@media (min-width:992px){ .cards-hero8>*{ flex-basis:calc(16.666% - 16.667px) } }
@media (min-width:1660px){ .cards-hero8>*{ flex-basis:calc(12.5% - 17.5px) } }

/* front page hero directions: 2 / 3 @md / 4 @lg / 5 @xl; gap 20 */
.cards-dir5 { gap: 20px; }
.cards-dir5 > * { flex-basis: calc(50% - 10px); }
@media (min-width:576px){ .cards-dir5>*{ flex-basis:calc(33.333% - 13.333px) } }
@media (min-width:768px){ .cards-dir5>*{ flex-basis:calc(25% - 15px) } }
@media (min-width:992px){ .cards-dir5>*{ flex-basis:calc(20% - 16px) } }

/* studio "За какви проекти": 2 @sm / 6 @lg; gap 20 */
.cards-studio6 { gap: 20px; }
.cards-studio6 > * { flex-basis: 100%; }
@media (min-width:320px){ .cards-studio6>*{ flex-basis:calc(50% - 10px) } }
@media (min-width:768px){ .cards-studio6>*{ flex-basis:calc(16.666% - 16.667px) } }

/* studio "Какво е включено в цената": 2 @sm / 4 @lg / 7 @xl; gap 20 */
.cards-studio7 { gap: 20px; }
.cards-studio7 > * { flex-basis: 100%; }
@media (min-width:320px){ .cards-studio7>*{ flex-basis:calc(50% - 10px) } }
@media (min-width:768px){ .cards-studio7>*{ flex-basis:calc(25% - 15px) } }
@media (min-width:992px){ .cards-studio7>*{ flex-basis:calc(14.285% - 17.143px) } }

/* about "Защо да изберете": 2 / 3 @md / 6 @xl; gap 20 -> 30 @md */
.cards-about6 { gap: 20px; }
.cards-about6 > * { flex-basis: calc(50% - 10px); }
@media (min-width:576px){ .cards-about6{ gap:30px } .cards-about6>*{ flex-basis:calc(33.333% - 20px) } }
@media (min-width:992px){ .cards-about6>*{ flex-basis:calc(16.666% - 25px) } }

/* about stats (last section): 2 / 4 @xl; gap 20 -> 40 @1200 */
.cards-about4 { gap: 20px; }
.cards-about4 > * { flex-basis: calc(50% - 10px); }
@media (min-width:992px){ .cards-about4>*{ flex-basis:calc(25% - 15px) } }
@media (min-width:1200px){ .cards-about4{ gap:40px } .cards-about4>*{ flex-basis:calc(25% - 30px) } }

/* Scrollable lists (checkout order review, cart page items) that get long -
   a slim gold-on-dark scrollbar so a tall item list doesn't push the summary
   far down the page. */
.ct-scroll-y { scrollbar-width: thin; scrollbar-color: #E8AD43 #2F2F2F; }
.ct-scroll-y::-webkit-scrollbar { width: 8px; }
.ct-scroll-y::-webkit-scrollbar-track { background: #2F2F2F; }
.ct-scroll-y::-webkit-scrollbar-thumb { background: #E8AD43; border-radius: 0; }
.ct-scroll-y::-webkit-scrollbar-thumb:hover { background: #F6B847; }

/* Photo-print per-photo "remove from order" ✕ button: gold circle with a dark
   ✕; on hover the whole circle darkens (#2F2F2F) and the ✕ turns gold. Defined
   here rather than via Tailwind hover: utilities because the button is injected
   into the strip at runtime, where the CDN's arbitrary hover variants don't
   reliably apply. */
.pp-zip-deselect { background: #F6B847; color: #20201F; }
.pp-zip-deselect:hover { background: #2F2F2F; color: #F6B847; }

/* ==================================================================
 * Standard WooCommerce checkout, restyled to the theme (dark/gold).
 * We moved from the fully-custom checkout template to WooCommerce's
 * default one so the Speedy (legacy) office/city selector works
 * natively; this styles that default markup to match the previous
 * design. Scoped to body.woocommerce-checkout.
 * ================================================================== */
body.woocommerce-checkout .woocommerce { max-width: 100%; }

/* Single column - everything stacked, full width. */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: block;
	max-width: 100%;
	margin: 0;
}
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review { width: 100%; float: none; }
body.woocommerce-checkout #order_review_heading { margin: 30px 0 24px; }

/* col2-set (billing / shipping) stacked into the one column too. */
body.woocommerce-checkout .col2-set { display: block; }
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; padding: 0; margin: 0; }

/* Coupon (toggle + form) on the checkout. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: #191919; color: #F2EEE7; border: 0; padding: 15px 20px; margin: 0 0 20px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: #F6B847; }
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon {
	background: #191919; border: 0; border-radius: 0; padding: 20px; margin: 0 0 20px; color: #F2EEE7;
}
body.woocommerce-checkout form.checkout_coupon .button {
	width: 100%; background: #F6B847; color: #20201F; border: 0; border-radius: 0;
	text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 13px; padding: 13px 15px; margin-top: 10px;
}

/* Checkboxes (terms) - WooCommerce's .input-checkbox rule was overriding the
   site-wide 16px box and collapsing it to a line. Re-assert the square box
   with higher specificity so it renders as a proper checkbox.
   Wrapped in @layer: Flowbite (loaded after this file) declares its own
   base styles inside @layer theme/base/utilities, and per the CSS Cascade
   Layers spec, !important declarations INSIDE any layer always beat
   !important declarations OUTSIDE a layer (unlayered), no matter the
   selector specificity - that's why Flowbite's [type=checkbox]:checked{
   background-color:currentColor!important} was winning over a plain
   unlayered rule here even though this selector is far more specific.
   Since this stylesheet loads before Flowbite's, declaring our own layer
   here makes it the first layer in the page's layer order - and for
   !important declarations specifically, the first layer wins. */
@layer overrides {
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input.input-checkbox {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	flex: 0 0 16px !important;
	background-color: #2F2F2F !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 10px 10px !important;
	border: 1px solid #F6B847 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	vertical-align: middle;
}
body.woocommerce-checkout input[type="checkbox"]:checked,
body.woocommerce-checkout input.input-checkbox:checked {
	background-color: #20201F !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8'%3E%3Cpath fill='%23F6B847' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E") !important;
}
}
body.woocommerce-checkout input[type="radio"] { flex: 0 0 16px; }
body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .validate-required > label.checkbox {
	display: flex; align-items: flex-start; gap: 10px; color: #F2EEE7; font-size: 12px; line-height: 1.4;
}
body.woocommerce-checkout .woocommerce-form__label-for-checkbox input { margin-top: 2px; }

/* Section headings */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout h3#ship-to-different-address label,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
	color: #F6B847;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 24px;
}

/* Customer detail groups as dark cards */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	background: #191919;
	padding: 25px 20px;
	margin-bottom: 20px;
}

/* Field rows + labels */
body.woocommerce-checkout .form-row { margin: 0 0 15px; padding: 0; }
body.woocommerce-checkout .form-row label { display: block; color: #F2EEE7; font-size: 13px; margin-bottom: 6px; }
body.woocommerce-checkout .form-row .required { color: #F6B847; text-decoration: none; }
body.woocommerce-checkout .form-row .optional { color: #676767; }

/* Inputs / selects / textareas - scoped to .form-row (WooCommerce's own
   wrapper, only present around fields rendered via woocommerce_form_field(),
   i.e. the Speedy delivery fields). "Вашите данни" is hand-rolled with its
   own Tailwind classes and isn't wrapped in .form-row, so it's untouched by
   this block - it used to be (bare input[type]/textarea selectors), which
   is why it looked inconsistent and fought the textarea's own resize-none. */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row input[type="number"],
body.woocommerce-checkout .form-row input[type="search"],
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select {
	width: 100% !important;
	min-height: 48px;
	background: #20201F !important;
	border: 1px solid transparent !important;
	color: #F2EEE7 !important;
	font-size: 15px !important;
	padding: 12px 16px !important;
	border-radius: 0 !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
body.woocommerce-checkout .form-row textarea { min-height: 90px; resize: vertical; }
body.woocommerce-checkout textarea[name="order_comments"] { resize: none !important; }
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus { outline: none !important; border-color: #F6B847 !important; }
body.woocommerce-checkout ::placeholder { color: #676767 !important; opacity: 1; }
/* Autofill keeps its own colours - override to the dark field look. */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:focus {
	-webkit-text-fill-color: #F2EEE7;
	-webkit-box-shadow: 0 0 0 1000px #20201F inset;
	caret-color: #F2EEE7;
}

/* select2 (WooCommerce country + the city/office dropdowns Speedy builds).
   !important because the select2 CDN stylesheet loads after style.css. The
   dropdown is appended to <body>, which carries .woocommerce-checkout on the
   checkout page, so scoping by that keeps other pages untouched. */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: #20201F !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 16px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #F2EEE7 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #676767 !important; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 10px !important; }
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: #F6B847 !important; }

body.woocommerce-checkout .select2-dropdown { background: #20201F !important; border: 1px solid #2F2F2F !important; color: #F2EEE7 !important; }
body.woocommerce-checkout .select2-container--default .select2-results__option { color: #F2EEE7 !important; background: #20201F !important; }
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted,
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #2F2F2F !important; color: #F6B847 !important; }
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"] { background: #191919 !important; color: #F6B847 !important; }
body.woocommerce-checkout .select2-search--dropdown .select2-search__field { background: #191919 !important; color: #F2EEE7 !important; border: 1px solid #2F2F2F !important; }

/* Order review box + table */
body.woocommerce-checkout #order_review { background: #191919; padding: 20px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; color: #F2EEE7; font-size: 13px; border: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table th { color: #F2EEE7; text-align: left !important; padding: 10px 0; font-weight: 500; border: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { color: #F6B847; text-align: right !important; padding: 10px 0; border: 0; white-space: nowrap; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td { text-align: right !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr { border-bottom: 1px solid #2F2F2F; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: #F2EEE7; text-align: left; }
body.woocommerce-checkout .order-total th { text-transform: uppercase; }
body.woocommerce-checkout .order-total .amount { color: #F6B847; font-size: 20px; }

/* Shipping method rows (where "Доставка със Speedy" appears) */
body.woocommerce-checkout #shipping_method { list-style: none; margin: 0; padding: 0; }
body.woocommerce-checkout #shipping_method li { margin: 8px 0; color: #F2EEE7; }
body.woocommerce-checkout #shipping_method label { display: inline; color: #F2EEE7; margin: 0 0 0 6px; }
body.woocommerce-checkout #shipping_method input[type="radio"],
body.woocommerce-checkout #payment input[type="radio"] { accent-color: #F6B847; }
body.woocommerce-checkout .speedy-service-selector th,
body.woocommerce-checkout .speedy-shipping-error-row td { color: #F2EEE7; }

/* Inline notice when a chosen city has no Speedy offices/automats and
   "Доставка до" silently reverts to "Адрес" - see speedyShowNoOfficesNotice()
   in checkout.js. Matches .woocommerce-error's red accent. */
body.woocommerce-checkout .speedy-no-offices-notice {
	color: #B74648;
	font-size: 12px;
	margin-top: 8px;
}

/* WooCommerce's own per-field inline validation error ("This field is
   required" shown directly under an invalid input) - core CSS gives it no
   top spacing at all (margin-bottom:0 only), so it sits flush against the
   field above it. */
.checkout-inline-error-message {
	margin-top: 10px;
}

/* Улица/Квартал/№/Блок all show "(незадължително)" since Speedy's own field
   defs mark each one individually optional - but speedy_validate_checkout()
   (in the plugin, not ours) actually blocks the order unless (Улица or
   Квартал) AND (№ or Блок) are filled, or an address note is given instead.
   None of them is truly optional on its own, so the "(optional)" label was
   misleading; hiding it rather than marking one field as required (which
   would be misleading the other way, since any of the valid combinations
   works) or touching the plugin's own validation/field definitions. */
body.woocommerce-checkout #billing_neighborhood_field .optional,
body.woocommerce-checkout #billing_street_field .optional,
body.woocommerce-checkout #billing_street_number_field .optional,
body.woocommerce-checkout #billing_block_field .optional {
	display: none;
}

/* Payment methods */
body.woocommerce-checkout #payment { background: transparent; border: 0; }
body.woocommerce-checkout #payment ul.wc_payment_methods { list-style: none; margin: 0 0 20px; padding: 0; border: 0; }
body.woocommerce-checkout #payment ul.wc_payment_methods li { background: #20201F; padding: 15px; margin: 0 0 10px; }
body.woocommerce-checkout #payment label { color: #F2EEE7; }
body.woocommerce-checkout #payment .payment_box { background: #20201F; color: #676767; font-size: 13px; }
body.woocommerce-checkout #payment .payment_box::before { display: none; }

/* Place order button */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .place-order button {
	width: 100%; background: #F6B847; color: #20201F; border: 0; border-radius: 0;
	text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 13px;
	padding: 15px; cursor: pointer; transition: opacity .2s; float: none;
}
body.woocommerce-checkout #place_order:hover { opacity: .9; }

/* Terms + misc */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: #F2EEE7; font-size: 12px; margin: 15px 0; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: #F6B847; }
body.woocommerce-checkout .woocommerce-privacy-policy-text { color: #676767; font-size: 12px; }

/* --- Checkout field fixes (borders / select options / row gaps) --- */

/* Active (focused) fields get a clear gold border. box-shadow ring as well so
   it stays visible even if another stylesheet re-asserts the border colour. */
body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
	outline: none !important;
	border-color: #F6B847 !important;
	box-shadow: 0 0 0 1px #F6B847 !important;
}
body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border: 1px solid #F6B847 !important;
}

/* Native <select> option list was white-on-white - make it dark/readable. */
body.woocommerce-checkout select option {
	background: #20201F !important;
	color: #F2EEE7 !important;
}

/* Paired fields on one row (e.g. Име / Фамилия) need a gutter. Lay each field
   group out as a flex row with a gap; the *-first / *-last pair share it. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
	flex: 1 1 100%;
	width: auto;
	float: none;
	margin: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	flex: 1 1 calc(50% - 8px);
}

/* ==================================================================
 * Custom checkout + Speedy delivery fields (form-checkout.php renders
 * Speedy's own registered billing fields via woocommerce_form_field() so
 * its checkout.js can drive city/office/service selection - see
 * class-checkout.php). Those fields carry Speedy's own float/fixed-width
 * classes (form-row-first/last, .poledrugo) from its own layout system;
 * flatten them to full width here and let our own .speedy-detail-pair
 * grids (street №/Block, Entrance/Floor) handle the pairing instead.
 * ================================================================== */
body.woocommerce-checkout .speedy-delivery-fields .form-row {
	float: none !important;
	width: 100% !important;
	clear: both;
}
body.woocommerce-checkout .speedy-delivery-fields .speedy-detail-pair {
	clear: both;
}
body.woocommerce-checkout .speedy-delivery-fields .speedy-detail-pair .form-row {
	margin: 0 !important;
}

/* Foreign-address-only fields (abroad office autocomplete, "Адрес (2)") -
   this is a BG-only store, but Speedy's checkout.js still expects these IDs
   to exist in the DOM, so they're hidden rather than removed. */
body.woocommerce-checkout #billing_abroadoffice_field,
body.woocommerce-checkout #billing-abroadoffice-suggestions,
body.woocommerce-checkout #billing_street2_field {
	display: none !important;
}

/* #billing_address_2_field is only kept around for checkout.js to append its
   "pick office from map" button into (see class-checkout.php) - style that
   button to match the theme instead of the plugin's own blue default. */
body.woocommerce-checkout #billing_address_2_field label { display: none; }
body.woocommerce-checkout #billing_address_2_field .btn-primary,
body.woocommerce-checkout .btn-primary#openModalBtn {
	display: inline-block;
	background: #F6B847 !important;
	color: #20201F !important;
	padding: 10px 15px !important;
	border-radius: 0 !important;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;
	margin: 0 !important;
}
body.woocommerce-checkout #billing_address_2_field .btn-primary:hover,
body.woocommerce-checkout .btn-primary#openModalBtn:hover {
	background: #e0a53f !important;
}

/* "Pay for order" page - plain WooCommerce/BORICA default markup (no
   template overrides), reskinned entirely with CSS. woocommerce/templates/
   checkout/order-receipt.php prints the order summary as ul.order_details,
   then the gateway's own receipt_page() method (not a template file, so it
   can't be overridden - see class-borica-woo-payment-gateway.php) echoes
   the payment button/form into .borica-payment-wrapper right after it. */
body.woocommerce-checkout ul.order_details {
	list-style: none;
	max-width: 100%;
	margin: 0 auto 25px;
	padding: 20px;
	background: #191919;
	color: #F2EEE7;
}
body.woocommerce-checkout ul.order_details li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 0;
	border: 0;
	font-size: 14px;
	text-align: left;
}
body.woocommerce-checkout ul.order_details li strong { color: #F6B847; font-weight: 500; }
/* WooCommerce core prints these with a dashed bottom border by default. */
.woocommerce ul.order_details li { border: none; }

body.woocommerce-checkout .borica-payment-wrapper {
	display: block;
	max-width: 560px;
	margin: 0 auto;
	background: #191919;
	color: #F2EEE7;
	padding: 25px;
	text-align: center;
}
body.woocommerce-checkout .borica-payment-wrapper .borica_panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
body.woocommerce-checkout .borica-payment-wrapper .borica_cards { max-width: 220px; height: auto; }
body.woocommerce-checkout .borica-payment-wrapper .borica_panel h4 {
	color: #F6B847;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	margin: 0;
}
body.woocommerce-checkout .borica-payment-wrapper p {
	color: #F2EEE7 !important;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	margin: 0 0 15px;
}
body.woocommerce-checkout .borica-payment-wrapper form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
body.woocommerce-checkout .borica-payment-wrapper .button.alt,
body.woocommerce-checkout .borica-payment-wrapper input[type="submit"] {
	background: #F6B847 !important;
	color: #191919 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 14px 26px !important;
	cursor: pointer;
	transition: opacity .2s;
}
body.woocommerce-checkout .borica-payment-wrapper .button.alt:hover,
body.woocommerce-checkout .borica-payment-wrapper input[type="submit"]:hover { opacity: .9; }
body.woocommerce-checkout .borica-payment-wrapper .button.cancel {
	background: transparent !important;
	border: 0 !important;
	padding: 4px !important;
	color: #F2EEE7 !important;
	font-size: 13px;
	text-decoration: underline;
	opacity: .7;
}
body.woocommerce-checkout .borica-payment-wrapper .button.cancel:hover { opacity: 1; color: #F6B847 !important; }

/* borica_direct mode's auto-redirect overlay ("Please wait, you are being
   redirected...") - the plugin prints its own inline <style> forcing a
   plain white full-screen overlay; override its colors so a card payment
   doesn't flash white mid-checkout on a dark-themed site. */
body.woocommerce-checkout .borica-payment-wrapper #borica_overlay { background: #1F2021 !important; }
body.woocommerce-checkout .borica-payment-wrapper .borica_direct_notice {
	background: #191919 !important;
	color: #F2EEE7 !important;
	border: 1px solid #2F2F2F;
}
body.woocommerce-checkout .borica-payment-wrapper .borica_direct_notice p { color: #F2EEE7 !important; }
body.woocommerce-checkout .borica-payment-wrapper .borica_loading_dot { background: #F6B847 !important; }

/* BORICA payment RESULT page (the page a customer lands on after paying -
   URL is ?wc-api=borica_woo_payment_gateway_impl). Built by
   borica_woo_payment_gateway_impl() in borica-payments/includes/
   functions.php, which calls get_header()/get_footer() itself and echoes
   plain, inline-styled markup into #borica_primary/#borica_main instead of
   using a proper WooCommerce template - not something we can override with
   a template file, and the plugin itself isn't to be modified, so this is
   reskinned with CSS only, using !important where needed to beat the
   plugin's own inline styles. */
#borica_primary {
	max-width: 720px !important;
	margin: 130px auto 60px !important;
	padding: 40px 30px;
	background: #191919;
	color: #F2EEE7;
	text-align: center;
}
/* Pay/Cancel only exist here because the plugin renders this whole order-
   details table (via order/order-details.php's wc_get_account_orders_actions())
   *before* it updates the order's status to paid - update_status() runs
   only after this HTML has already been sent, so WooCommerce still treats
   the order as unpaid at render time and offers actions for it. That's a
   genuine ordering bug in the plugin's own code, not something CSS can fix
   at the root, but these buttons never belong on this landing page either
   way, so they're just hidden here. */
#borica_primary tr:has(.order-actions-button) {
	display: none !important;
}
#borica_main > div {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #F2EEE7 !important;
	margin-bottom: 12px;
}
#borica_main > div:first-child {
	font-size: 20px !important;
	font-weight: 500 !important;
	margin-bottom: 20px;
}
/* The failure message is the only one wrapped in its own inline-red span. */
#borica_main span[style] { color: #B74648 !important; }
#borica_main strong { color: #F6B847; font-weight: 500; }
#borica_primary .button.button-secondary {
	display: inline-block;
	background: #F6B847 !important;
	color: #191919 !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 14px 26px !important;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	text-decoration: none !important;
	transition: opacity .2s;
}
#borica_primary .button.button-secondary:hover { opacity: .9; }

/* The BORICA result page also duplicates the chatbot widget - its callback
   handler calls wp_footer() twice (once inside get_footer(), then again
   directly), so the widget's markup gets printed twice - and the chatbot
   plugin's own stylesheet doesn't even load in this unusual render path
   (position comes out "static", not the plugin's own "fixed"), so the ball
   just sits wherever it lands in the raw markup instead of floating in the
   corner. Scoped to this page only via :has(), so the widget's normal
   position/behaviour elsewhere on the site is untouched. */
body:has(#borica_primary) #wp-chatbot-chat-container {
	position: fixed !important;
	z-index: 999998 !important;
	bottom: 20px !important;
	right: 20px !important;
	top: auto !important;
	left: auto !important;
}
body:has(#borica_primary) #wp-chatbot-chat-container ~ #wp-chatbot-chat-container {
	display: none !important;
}

/* WooCommerce's own default "order details" template family
   (woocommerce/templates/order/order-details.php,
   order-details-item.php, order-details-customer.php - never overridden
   by this theme). Two places embed it raw, unstyled:
   - My Account -> Orders -> [view an order] (core WC: woocommerce_view_order
     -> woocommerce_order_details_table).
   - The BORICA plugin's own payment-RESULT page (not the order-pay page
     above) on a *successful* payment - it hardcodes a near-copy of
     core WooCommerce's checkout/thankyou.php directly in its own PHP
     instead of calling wc_get_template('checkout/thankyou.php', ...), so
     it bypasses our themed thankyou.php override entirely and falls back
     to this same raw default markup. Styled generically here since it's
     the identical unstyled markup either way. */
.woocommerce-order-details,
.woocommerce-customer-details {
	color: #F2EEE7;
	max-width: 720px;
	margin: 30px auto;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
	font-family: 'Montserrat', Arial, sans-serif;
	color: #F6B847;
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 15px;
}
table.shop_table.order_details,
ul.order_details {
	width: 100%;
	background: #191919;
	border-collapse: collapse;
	margin-bottom: 30px;
	list-style: none;
	padding: 0;
}
table.shop_table.order_details th,
table.shop_table.order_details td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #2F2F2F;
	color: #F2EEE7;
	font-size: 14px;
}
table.shop_table.order_details thead th {
	color: #F6B847;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .05em;
}
table.shop_table.order_details tfoot th { color: #F2EEE7; font-weight: 500; }
table.shop_table.order_details tfoot td,
table.shop_table.order_details .product-total { color: #F6B847; text-align: right; }
table.shop_table.order_details a { color: #F6B847; }
table.shop_table.order_details .order-actions--heading { display: none; } /* label redundant next to the buttons themselves */

ul.order_details li {
	padding: 12px 15px;
	border-bottom: 1px solid #2F2F2F;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	font-size: 14px;
}
ul.order_details li:last-child { border-bottom: 0; }
ul.order_details li strong { color: #F6B847; font-weight: 500; }

.order-actions-button {
	display: inline-block;
	background: #F6B847 !important;
	color: #191919 !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 10px 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none !important;
	margin: 5px 10px 5px 0;
}
.order-actions-button.cancel {
	background: transparent !important;
	border: 1px solid #676767 !important;
	color: #F2EEE7 !important;
}

.woocommerce-columns--addresses {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
}
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
	flex: 1 1 220px;
	background: #191919;
	padding: 20px;
}
.woocommerce-customer-details address {
	font-style: normal;
	color: #F2EEE7;
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce-notice.woocommerce-thankyou-order-received {
	font-family: 'Montserrat', Arial, sans-serif;
	color: #F2EEE7;
	font-size: 16px;
	text-align: center;
	margin: 20px 0;
}
.woocommerce-notice--error { color: #B74648; }

/* The BORICA plugin renders billing/shipping addresses with its own
   completely unclassed markup (plain <section style="display:flex...">
   with bare <h2>/<p> inside) rather than the WC core order-details-
   customer.php template above - so none of the .woocommerce-customer-
   details rules reach it. Matched by exclusion (the only other top-level
   <section> here besides .woocommerce-order-details) since there's no
   class to hook onto. Scoped to #borica_primary so it can't affect
   anything elsewhere that happens to use a plain <section>. */
#borica_primary section:not(.woocommerce-order-details) {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	text-align: left;
	margin-top: 20px;
}
#borica_primary section:not(.woocommerce-order-details) > div { flex: 1 1 220px; }
#borica_primary section:not(.woocommerce-order-details) h2 {
	color: #F6B847;
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 10px;
}
#borica_primary section:not(.woocommerce-order-details) p {
	color: #F2EEE7;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* The plugin's own order-overview <ul> prints a stray empty <li> before
   the real "Total" one (a duplicate/blank loop iteration in its markup). */
#borica_primary li:empty { display: none; }

/* Chatbot widget container - shrink to its content instead of full width. */
#wp-chatbot-chat-container {
	width: fit-content !important;
}

@media (max-width: 575px) {
	#wp-chatbot-chat-container {
		bottom: 75px !important;
	}
}

/* Complianz cookie banner.

   Both values below come from the stylesheet Complianz generates into
   uploads/complianz/css/ from its banner settings, so they can't be edited
   at the source - it rewrites that file whenever the settings are saved.

   z-index: the generated banner sits at 99999 while the chatbot widget is at
   999998, so the chat ball floated over the banner (same bottom-right corner).
   Matched with a two-class selector rather than !important, so it outranks the
   plugin's own single-class rule no matter which stylesheet loads last. */
body .cmplz-cookiebanner,
body #cmplz-manage-consent .cmplz-manage-consent {
	z-index: 1000000;
}

/* Square corners, on the banner itself and on its buttons. The generated CSS
   reads both radii from custom properties defined on :root; redefining them
   here wins on proximity alone (a property set on the element itself beats one
   inherited from :root), which again keeps this independent of stylesheet
   order. */
.cmplz-cookiebanner {
	--cmplz_banner_border_radius: 0;
	--cmplz_button_border_radius: 0;
}