/* =============================================
   UkrLoft Custom Styles
   Design System: oneloft.pl replication
   ============================================= */

/* ===========================================
   1. OCT Theme Variable Overrides (oneloft.pl)
   =========================================== */

/* Prevent horizontal scroll from 100vw elements (scrollbar width) */
/* Using 'clip' instead of 'hidden' to avoid breaking position:sticky */
html, body {
  overflow-x: clip !important;
}

/* --- Logo: SVG, adaptive — smaller on mobile --- */
#logo {
  max-width: 250px !important;
  height: auto !important;
  width: 100%;
}
@media (max-width: 991px) {
  #logo {
    max-width: 180px !important;
  }
}
@media (max-width: 575px) {
  #logo {
    max-width: 120px !important;
  }
}

:root {
  /* --- Primary Colors --- */
  --ds-primary-color: #000000;
  --ds-blue-color: #000000;
  --ds-green-color: #327b7b;
  --ds-red-color: #c40000;
  --ds-yellow-color: #FBC756;

  /* --- Text Colors --- */
  --ds-primary-dark-color: #000000;
  --ds-primary-dark-color-light: #000000;
  --ds-dark-text-color: #000000;
  --ds-white-color-dark: #000000;
  --ds-secondary-dark-color: #666666;
  --ds-secondary-dark-color-light: #666666;
  --ds-secondary-text-color: #666666;
  --ds-light-text-color: #777777;
  --ds-light-text-color-light: #777777;

  /* --- Background Colors --- */
  --ds-body-bg-color: #ffffff;
  --ds-body-bg-light-color: #ffffff;
  --ds-primary-light-color: #ffffff;
  --ds-primary-light-color-light: #ffffff;
  --ds-light-bg-color: #ffffff;
  --ds-footer-bg-color: #ffffff;
  --ds-footer-bg-light-color: #ffffff;
  --ds-product-actions-bg: #ffffff;
  --ds-product-actions-bg-light: #ffffff;

  /* --- Border Colors --- */
  --ds-border-color: #d8d8d8;
  --ds-border-color-light: #d8d8d8;

  /* --- Links & Interactive --- */
  --ds-links-color: #000000;
  --ds-interactive-color: #29231c;

  /* --- Shadows (oneloft.pl exact values from Design Extractor) --- */
  --ds-light-shadow: 0px 2px 14px 0px rgba(0,0,0,0.03);
  --ds-light-shadow-light: 0px 2px 14px 0px rgba(0,0,0,0.03);
  --ds-medium-shadow: 0px 4px 20px 0px rgba(0,0,0,0.06);
  --ds-medium-shadow-light: 0px 4px 20px 0px rgba(0,0,0,0.06);
  --ds-dark-shadow: 0px 2px 24px 0px rgba(0,0,0,0.06);
  --ds-dark-shadow-light: 0px 2px 24px 0px rgba(0,0,0,0.06);

  /* Component-specific shadows (from Design Extractor) */
  --shadow-product-hover: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
  --shadow-category-tile: rgb(216, 216, 216) 0px 0px 0px 1px inset;
  --shadow-search-dropdown: rgba(16, 47, 102, 0.16) 0px 2px 9px 0px;
  --shadow-menu-dropdown: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;

  /* Legacy names for compatibility */
  --ds-product-hover-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1);
  --ds-product-hover-shadow-light: 0px 0px 40px 0px rgba(0,0,0,0.1);

  /* --- Form Controls --- */
  --ds-form-control-focus-color: #d8d8d8;
  --ds-form-control-focus-color-light: #d8d8d8;

  /* --- Typography --- */
  --ds-main-font: "Roboto", sans-serif;

  /* --- Spacing (oneloft.pl most frequent values) --- */
  --spacing-xs: 4px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 60px;
  /* Note: oneloft.pl doesn't use a strict spacing scale (base unit unclear),
     but these values appear most frequently: 10px (154×), 20px (65×), 16px (41×), 60px (17×) */

  /* --- Border Radius (oneloft.pl values) --- */
  --border-radius-sm: 13.2px;    /* Small tags */
  --border-radius-md: 16px;      /* Pagination */
  --border-radius-lg: 21px;      /* Buttons, inputs */
  --border-radius-xl: 24px;      /* Large buttons */
  --border-radius-circle: 50%;   /* Sale/new badges, arrows */
  --border-radius-arrow: 25px;   /* Arrow buttons */

  /* --- Popups --- */
  --ds-popup-close-btn-bg: #f5f5f5;
  --ds-popup-close-btn-bg-light: #f5f5f5;
}

/* ===========================================
   2. Global Typography (oneloft.pl exact values)
   =========================================== */

body {
  font-family: "Roboto", sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 18px !important;
  color: #000 !important;
  background-color: #fff !important;
}

/* Headings — exact oneloft.pl values from Design Extractor */
h1 {
  font-size: 35px !important;
  font-weight: 300 !important;
  line-height: 38.5px !important;
}
h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
}
h3 {
  font-size: 16px !important;
  font-weight: 400 !important;
}
h4, h5, h6 {
  font-weight: 500 !important;
}

/* Ensure font-weight 300 inheritance for text elements (matching oneloft.pl) */
.ds-price-new,
.ds-price-old,
.ds-module-manufacturer,
input,
textarea,
select,
.form-control,
.ds-module-item-name a,
.ds-module-item .ds-module-item-name {
  font-weight: 300;
}

/* Links — black, no underline, red on hover */
a {
  color: #000;
  transition: color 0.3s ease-in-out;
}
a:hover { color: #c40000; }

/* ===========================================
   3. Buttons (oneloft.pl exact style)
   =========================================== */

/* Primary/buy buttons — dark brown, rounded, lowercase */
.btn-primary,
.ds-btn-green,
.ds-buy-btn,
.ds-btn-primary,
.btn-success,
.ds-module-item .ds-buy-btn,
button.ds-buy-btn,
.oct-button,
.ds-cart-btn,
.ds-product-buy-btn,
.product-btn-buy,
.btn-buy {
  background-color: #29231c !important;
  border-color: #29231c !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
  border-radius: 21px !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
}

.btn-primary:hover,
.ds-btn-green:hover,
.ds-buy-btn:hover,
.ds-btn-primary:hover,
.btn-success:hover,
.ds-module-item .ds-buy-btn:hover,
button.ds-buy-btn:hover,
.oct-button:hover,
.ds-cart-btn:hover,
.ds-product-buy-btn:hover,
.product-btn-buy:hover,
.btn-buy:hover {
  background-color: #3d342a !important;
  border-color: #3d342a !important;
  color: #fff !important;
}

.btn-primary:focus,
.ds-btn-green:focus,
.ds-buy-btn:focus,
.btn-success:focus {
  background-color: #29231c !important;
  border-color: #29231c !important;
  box-shadow: 0 0 0 0.2rem rgba(41,35,28,0.25) !important;
}

/* Outline/secondary buttons — dark border */
.btn-outline-primary,
.ds-btn-outline {
  color: #29231c !important;
  border-color: #29231c !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.ds-btn-outline:hover {
  background-color: #29231c !important;
  border-color: #29231c !important;
  color: #fff !important;
}

/* Danger/red buttons — oneloft red */
.btn-danger,
.ds-btn-red {
  background-color: #c40000 !important;
  border-color: #c40000 !important;
}

.btn-danger:hover,
.ds-btn-red:hover {
  background-color: #a30000 !important;
  border-color: #a30000 !important;
}

/* ===========================================
   4. Product Cards (oneloft.pl exact style)
   =========================================== */

/* Product card borders and hover shadow */
.ds-module-item {
  border-color: #d8d8d8 !important;
  transition: box-shadow 0.3s ease-in-out;
}

.ds-module-item:hover {
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) !important;
}

/* Product name — black, normal weight */
.ds-module-item .ds-product-name a,
.ds-product-name a,
.product-name a {
  color: #000 !important;
  font-weight: 400 !important;
}

.ds-module-item .ds-product-name a:hover,
.ds-product-name a:hover,
.product-name a:hover {
  color: #c40000 !important;
}

/* Current price — black, bold */
.ds-module-item .ds-product-new-price,
.ds-product-new-price,
.price-new,
.ds-product-price {
  color: #000 !important;
  font-weight: 700 !important;
}

/* Old/strikethrough price — gray */
.ds-module-item .ds-product-old-price,
.ds-product-old-price,
.price-old {
  color: #777 !important;
}

/* Sale/discount badge — red */
.ds-module-item .ds-product-sticker-sale,
.ds-product-sticker-sale,
.ds-sticker-sale,
.sticker-sale {
  background-color: #c40000 !important;
  color: #fff !important;
}

/* Discount percentage badge */
.ds-product-discount-tag,
.oct-sticker-discount {
  background-color: #fb5642 !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* Product rating stars */
.ds-module-item .ds-product-rating .fa-star,
.ds-product-rating .fa-star {
  color: #FBC756 !important;
}

/* Wishlist/compare icons — gray, red on hover */
.ds-module-item .ds-product-actions button,
.ds-product-actions button {
  color: #adadad !important;
}

.ds-module-item .ds-product-actions button:hover,
.ds-product-actions button:hover {
  color: #c40000 !important;
}

/* Product availability text — teal (oneloft #327b7b) */
.ds-product-availability,
.ds-stock-status,
.green-text {
  color: #327b7b !important;
}

/* Sale price override — oneloft shows ALL prices in black, NOT red */
.ds-price-new.red-text,
.ds-module-item .ds-price-new.red-text,
.red-text.ds-price-new {
  color: #000 !important;
}

/* Cart button on product cards — solid dark brown, not outline */
.button-outline-primary.ds-module-cart-btn,
.ds-module-cart-btn,
.ds-module-item .ds-module-cart-btn {
  background-color: #29231c !important;
  border-color: #29231c !important;
  color: #fff !important;
}

.button-outline-primary.ds-module-cart-btn:hover,
.ds-module-cart-btn:hover,
.ds-module-item .ds-module-cart-btn:hover {
  background-color: #3d342a !important;
  border-color: #3d342a !important;
  color: #fff !important;
}

/* Cart button SVG icon — white fill (target path directly to override inline fill) */
.ds-module-cart-btn svg,
.ds-module-cart-btn svg path,
.ds-module-cart-btn svg circle,
.ds-module-cart-btn svg line,
.ds-module-cart-btn i {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Quantity +/- buttons on cards — subtle border */
.ds-module-quantity-btn {
  border-color: #d8d8d8 !important;
  color: #666 !important;
}

.ds-module-quantity-btn:hover {
  border-color: #29231c !important;
  color: #29231c !important;
}

/* "Показати ще" button — dark brown filled */
.ds-module-showmore a,
.ds-module-showmore button {
  background-color: #29231c !important;
  border-color: #29231c !important;
  color: #fff !important;
}

.ds-module-showmore a:hover,
.ds-module-showmore button:hover {
  background-color: #3d342a !important;
  border-color: #3d342a !important;
  color: #fff !important;
}

/* ===========================================
   5. Header & Navigation (oneloft.pl style)
   =========================================== */

/* Header top bar: WHITE background, spacious like oneloft.pl */
.ds-header,
#header {
  background-color: #fff !important;
  border-bottom: none !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* Header links & text: dark on white */
.ds-header a,
#header a {
  color: #000 !important;
}

.ds-header a:hover,
#header a:hover {
  color: #c40000 !important;
}

/* Header text elements */
.ds-header .dark-text,
.ds-header .fw-500,
.ds-header .ds-arrow-down {
  color: #000 !important;
}

.ds-header .secondary-text,
.ds-header .light-text {
  color: #666 !important;
}


/* Navigation bar: full-width dark background (oneloft.pl style) */
/* Element is OUTSIDE <header>, direct child of <body> — naturally full-width */
.ds-menu-fullwidth-bar {
  background-color: #000 !important;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease-in-out;
}

.ds-menu-fullwidth-bar:hover {
  background-color: #29231c !important;
}

/* Remove gradient fade on right edge of nav menu */
.ds-menu-maincategories-desktop-box .ds-menu-maincategories::after {
  display: none !important;
}

/* Remove border from nav menu */
.ds-menu-maincategories-desktop-box .ds-menu-maincategories {
  border: none !important;
}

/* Hide menu item icons in horizontal nav bar */
.ds-menu-fullwidth-bar .ds-menu-catalog-item-img {
  display: none !important;
}

/* Nav menu links: white on dark, exact oneloft.pl typography */
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box a,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .dark-text,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-item,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-item a,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-item-title,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box span {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box a:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* Dropdown menus: dark text on white background (higher specificity than nav white rule) */
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-dropdown a,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-dropdown span,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-dropdown .dark-text,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-catalog-item,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-catalog-item a {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-maincategories-dropdown a:hover,
.ds-menu-fullwidth-bar .ds-menu-maincategories-desktop-box .ds-menu-catalog-item a:hover {
  color: #c40000 !important;
}

/* Dropdown menu shadow (oneloft.pl exact value) */
.ds-menu-fullwidth-bar .ds-menu-catalog,
.ds-menu-fullwidth-bar .ds-menu-maincategories-dropdown {
  box-shadow: var(--shadow-menu-dropdown, rgba(0, 0, 0, 0.2) 0px 0px 10px 0px) !important;
  border-radius: 0 !important;
  background: #fff !important;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}

/* === Header center section: phone + email (oneloft.pl layout) === */
@media (min-width: 1200px) {
  .ds-header-center {
    flex: 1;
    justify-content: flex-start;
  }

  .ds-header-contact-info {
    margin-left: 30px;
    padding-left: 30px;
    border-left: 1px solid #e5e5e5;
  }

  .ds-header-contact-phone a {
    color: #000 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin-left: 8px;
  }

  .ds-header-contact-email {
    margin-top: 4px;
  }

  .ds-header-contact-email a {
    color: #666 !important;
    text-decoration: none;
    font-size: 13px;
    margin-left: 8px;
  }

  .ds-header-contact-email a:hover {
    color: #000 !important;
  }

  /* Stop ds-header-right from growing — now center section takes the space */
  .ds-header-right {
    flex-grow: 0 !important;
    gap: 15px !important;
    align-items: center !important;
  }

  /* Remove conflicting margins on icon wrappers for uniform gap */
  .ds-header-right .ds-dropdown-box,
  .ds-header-right .ds-dropdown-box .ds-dropdown-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hide phone dropdown on desktop (shown in center section instead) */
  .ds-header-right > .ds-dropdown-box.ds-header-mobile-btn {
    display: none !important;
  }

  /* Hide viewed/wishlist/compare icons on desktop */
  .ds-header-viewed-button,
  .ds-header-wishlist-button,
  .ds-header-compare-button {
    display: none !important;
  }

  /* === Circular icon styling (oneloft.pl style) === */

  /* User dropdown wrapper: fixed 44px height to align with other circles */
  .ds-dropdown-box:has(.ds-header-user-button) {
    position: relative;
    width: 44px;
    height: 44px;
  }

  /* Outlined circle behind user icon */
  .ds-dropdown-box:has(.ds-header-user-button)::before {
    content: '';
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.33);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
  }

  /* User button: centered over circle */
  .ds-header-user-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    width: 44px;
    height: 44px;
  }

  /* User icon: dark on outlined circle */
  .ds-header-user-button .button-icon-user {
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7) !important;
  }

  /* User label: hidden to keep alignment clean */
  .ds-header-user-button .dark-text {
    display: none !important;
  }

  /* Hide currency, page links, theme switcher from user dropdown */
  .ds-dropdown-box:has(.ds-header-user-button) #currency,
  .ds-dropdown-box:has(.ds-header-user-button) .ds-dropdown-links,
  .ds-dropdown-box:has(.ds-header-user-button) .ds-theme-switcher,
  .ds-dropdown-box:has(.ds-header-user-button) .ds-dropdown-inner > .d-flex.align-items-center.justify-content-between,
  .ds-dropdown-box:has(.ds-header-user-button) .ds-dropdown-inner > .dark-text.mt-3 {
    display: none !important;
  }

  /* Hide the dropdown arrow on desktop */
  .ds-header-user-button .ds-arrow-down {
    display: none !important;
  }

  /* Cart button: fixed 44px to align with other circles */
  .ds-header-cart-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  /* Outlined circle behind cart icon */
  .ds-header-cart-button::before {
    content: '';
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.33);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
  }

  /* Cart icon: dark, positioned over the outlined circle */
  .ds-header-cart-button .button-icon-cart {
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7) !important;
  }

  /* Cart badge: position at top-right of circle */
  .ds-header-cart-button .badge {
    z-index: 2;
    top: -4px !important;
    right: -4px !important;
  }
}

/* === Header Scroll Behavior (oneloft.pl style) === */

@media (min-width: 1200px) {
  .ds-header {
    transition: background-color 0.3s ease-in-out;
  }

  .ds-header .ds-menu-fullwidth-bar {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(0);
    transform-origin: top;
  }

  .ds-header.header-scrolled {
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  .ds-header.header-scrolled .ds-menu-fullwidth-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    left: 0;
  }

  .ds-header.header-scrolled:hover {
    background-color: #fff !important;
  }

  .ds-header.header-scrolled:hover .ds-menu-fullwidth-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    position: relative;
    width: auto;
    left: auto;
  }
}

/* === Module Pagination (numbered circles, oneloft.pl exact style) === */
.ds-module-pagination {
  gap: var(--spacing-sm, 8px);
  align-items: center;
}

.ds-module-pagination button {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-circle, 50%);
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  padding: 0;
  font-family: Roboto, sans-serif;
}

.ds-module-pagination button:hover:not(:disabled) {
  border-color: #000;
  background: #f5f5f5;
}

.ds-module-pagination button.active {
  background: #29231c;
  border-color: #29231c;
  color: #fff;
}

.ds-module-pagination button:disabled {
  opacity: 0.3;
  cursor: default;
}

.ds-module-pagination .ds-page-arrow {
  border: none;
  background: transparent;
  width: 32px;
  height: 38px;
  color: #000;
  transition: color 0.3s ease-in-out;
}

.ds-module-pagination .ds-page-arrow:hover:not(:disabled) {
  color: #29231c;
}

/* Product grid: 4 columns on desktop (instead of 5) — only in grid view */
@media (min-width: 1200px) {
  .ds-module[data-type="split"] > .ds-module-col.product-grid {
    width: 25% !important;
  }
  .ds-module[data-type="split"] > .ds-module-col.product-list,
  .ds-module[data-type="split"] > .ds-module-col.product-price {
    width: 100% !important;
  }
}

/* Search bar — rounded (oneloft uses 21px) */
.ds-search-input,
.ds-search .form-control,
#search input {
  border-radius: 21px !important;
  border-color: #d8d8d8 !important;
}

/* ---- Collapsible desktop search (icon → expand on click) ---- */
@media (min-width: 768px) {
  /* Collapsed state: just the icon */
  #search.ds-header-search {
    flex-grow: 0 !important;
    width: auto !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center;
    position: relative;
    overflow: visible;
    padding-left: 0 !important;
  }

  #search.ds-header-search #searchInput {
    width: 0;
    max-width: 0;
    opacity: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  #search.ds-header-search #ds-search-button {
    position: relative !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    flex-shrink: 0;
    background: transparent;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.33);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
  }

  #search.ds-header-search #ds-search-button:hover {
    border-color: rgba(0, 0, 0, 0.6);
    background: transparent;
  }

  /* Search icon: dark on outlined circle (collapsed) */
  #search.ds-header-search:not(.search-open) .ds-header-search-button > svg path {
    fill: rgba(0, 0, 0, 0.7) !important;
  }

  /* Expanded state */
  #search.ds-header-search.search-open #searchInput {
    max-width: 280px;
    width: 280px;
    opacity: 1;
    padding: 6px 40px 6px 16px !important;
    border: 1.5px solid #d8d8d8 !important;
    background: #fff;
    pointer-events: auto;
  }

  #search.ds-header-search.search-open #ds-search-button {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent;
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    border-radius: 0;
  }

  /* Search icon: dark on outlined circle when collapsed */
  #search.ds-header-search .ds-header-search-button > svg path {
    fill: rgba(0, 0, 0, 0.7) !important;
  }

  #search.ds-header-search.search-open .ds-header-search-button > svg path {
    fill: #666 !important;
  }

  /* Livesearch dropdown — align to right edge of expanded input */
  #search.ds-header-search #ds_livesearch {
    right: 0;
    left: auto;
    min-width: 320px;
  }
}

/* Header toolbar SVG icons — dark fill on white background */
.ds-header-wishlist-button > svg path,
.ds-header-compare-button > svg path,
.ds-header-cart-button > svg path,
.ds-header-search-button > svg path,
.ds-header-phone-button > svg path,
.ds-header-user-button > svg path {
  fill: #000 !important;
}

/* Dropdown toggle icons */
.ds-header-wishlist-button > svg,
.ds-header-compare-button > svg,
.ds-header-cart-button > svg,
.ds-header-search-button > svg {
  color: #000 !important;
}

/* Cart icon badge */
.ds-cart-count,
.ds-popup-cart-count {
  background-color: #c40000 !important;
  color: #fff !important;
}

/* === Product card hover image swap (oneloft.pl exact timing) === */

.ds-product-img-link {
  position: relative;
  overflow: hidden;
}

.ds-product-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.ds-module-img-box:hover .ds-product-img-hover {
  opacity: 1;
}

/* Manufacturer row (oneloft.pl style) */
.ds-module-manufacturer {
  font-size: 12px;
  color: #adadad;
  margin-top: 4px;
}

.ds-module-manufacturer em {
  font-style: normal;
  font-weight: 300;
}

.ds-module-manufacturer span {
  color: #666;
  font-weight: 500;
}

/* Product basket wrapper (oneloft.pl structure: price + buttons together) */
.ds-product-basket {
  gap: 8px;
}

.ds-product-basket .ds-module-price {
  margin-bottom: 0;
}

/* ===========================================
   6. Category & Menu Links
   =========================================== */

/* Category links — black text */
.ds-category-list a,
.ds-sidebar-category a {
  color: #000 !important;
}

.ds-category-list a:hover,
.ds-sidebar-category a:hover {
  color: #c40000 !important;
}

/* Breadcrumbs */
.breadcrumb a {
  color: #666 !important;
}

.breadcrumb a:hover {
  color: #000 !important;
}

/* ===========================================
   7. Forms & Inputs (oneloft.pl style)
   =========================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  border-color: #d8d8d8 !important;
  color: #545454 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: #000 !important;
  box-shadow: none !important;
}

/* ===========================================
   8. Pagination (oneloft.pl exact style)
   =========================================== */

.pagination .page-link,
.ds-pagination a {
  color: #000 !important;
  border-color: #c7c7c7 !important;
  border-radius: var(--border-radius-md, 16px) !important;
  transition: all 0.3s ease-in-out !important;
}

.pagination .page-item.active .page-link,
.ds-pagination .active a {
  background-color: #29231c !important;
  border-color: #29231c !important;
  color: #fff !important;
}

.pagination .page-link:hover,
.ds-pagination a:hover {
  background-color: #f5f5f5 !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* ===========================================
   9. Badges, Labels, Tags (oneloft.pl exact style)
   =========================================== */

/* "New" badge — circular or rounded */
.ds-product-sticker-new,
.sticker-new,
.oct-sticker-new {
  background-color: #29231c !important;
  color: #fff !important;
  border-radius: var(--border-radius-circle, 50%) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}

/* "Promo" / "Sale" badge — circular or rounded */
.ds-product-sticker-promo,
.sticker-promo,
.ds-product-sticker-sale,
.sticker-sale {
  background-color: #c40000 !important;
  color: #fff !important;
  border-radius: var(--border-radius-circle, 50%) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}

/* Discount percentage badge — circular */
.ds-product-discount-tag,
.oct-sticker-discount {
  background-color: #c40000 !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ===========================================
   10. Tabs & Section Headers
   =========================================== */

/* Section headings — black */
.ds-module-title,
.py-3.fw-500.dark-text.fsz-20,
.content-block-title {
  color: #000 !important;
}

/* Nav tabs */
.nav-tabs .nav-link {
  color: #666 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: #000 !important;
  border-bottom-color: #29231c !important;
}

/* ===========================================
   11. Alerts & Notifications
   =========================================== */

.alert-success {
  background-color: #f0fff0 !important;
  border-color: #29231c !important;
  color: #29231c !important;
}

/* ===========================================
   12. Utility Class Overrides
   =========================================== */

/* red-bg (discount badges) — oneloft red */
.red-bg {
  background-color: #c40000 !important;
}

/* Muted/secondary text — oneloft #adadad */
.ds-module-item .ds-product-manufacturer,
.ds-product-manufacturer {
  color: #adadad !important;
}

/* Feedback widget — dark brown */
.ds-feedback-widget,
.ds-feedback-btn {
  background-color: #29231c !important;
  border-color: #29231c !important;
}

/* Scroll-to-top button */
.ds-scroll-to-top,
.scroll-top {
  border-color: #d8d8d8 !important;
  color: #29231c !important;
}

/* ===========================================
   13. Scrollbar & Misc
   =========================================== */

/* Selection color */
::selection {
  background-color: #29231c;
  color: #fff;
}

/* Body scroll */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #adadad;
}

/* ===========================================
   14. Responsive Breakpoints (oneloft.pl)
   =========================================== */

/* oneloft.pl uses these breakpoints:
   - 480px   — mobile
   - 767px   — tablet portrait
   - 979px   — tablet landscape (instead of OCT's 991px)
   - 1200px  — desktop
*/

/* --- Container width (oneloft.pl = 1180px) --- */
@media (min-width: 1200px) {
  .container-xl {
    max-width: 1180px !important;
  }
}

/* Override theme's 991px breakpoint where needed */
@media (min-width: 979px) and (max-width: 1199px) {
  /* Tablet landscape adjustments */
  .ukrloft-footer-col {
    width: 25%;
  }
}

/* --- Category Tiles Grid (oneloft.pl style) --- */

/* Remove wrapper margins when tiles module is inside */
.content-block:has(.ukrloft-tiles-wrap) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
}

.content-block-text:has(.ukrloft-tiles-wrap) {
  font-weight: inherit;
}

/* Full-width breakout from container */
.ukrloft-tiles-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* Tile row = flex container */
.ukrloft-tiles-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1px;
}

/* Responsive font sizing — exact oneloft.pl values */
@media screen and (min-width: 1455px) {
  .ukrloft-tiles-row { font-size: 30px; }
}
@media screen and (min-width: 493px) and (max-width: 1455px) {
  .ukrloft-tiles-row { font-size: 2.06vw; }
}
@media screen and (max-width: 493px) {
  .ukrloft-tiles-row { font-size: 14px; }
}

/* Individual tile */
.ukrloft-tile {
  width: calc(25% - 1px);
  margin-left: 1px;
  margin-bottom: 1px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 1px #d8d8d8 inset;
}

/* First tile in each row = large (50%) */
.ukrloft-tile:first-child {
  width: calc(50% - 1px);
}

/* Tile link — sets aspect ratio via padding */
.ukrloft-tile a {
  text-decoration: none;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  display: block;
  padding-bottom: 100%; /* square for small tiles */
  position: relative;
}
.ukrloft-tile a:hover { color: #fff; }

/* Large tile — 2:1 aspect ratio */
.ukrloft-tile:first-child a {
  padding-bottom: 50%;
}

/* Tile image — fills entire tile */
.ukrloft-tile a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 3s linear, opacity 1s ease-in-out;
  will-change: transform, opacity;
}

/* Dark overlay with text at bottom-left */
.ukrloft-tile .tile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.3em;
  background: rgba(0,0,0,0.5);
  transition: background-color .3s ease-in-out;
  will-change: background-color;
  display: flex;
  align-items: flex-end;
}

/* Hover: keep overlay static like oneloft.pl; only zoom image on hover */
.ukrloft-tile:hover .tile-overlay {
  background-color: rgba(0,0,0,0.5);
}

/* Text inside overlay */
.ukrloft-tile .tile-overlay .tile-text {
  font-size: 1em;
  line-height: 1em;
  display: block;
}

/* Reversed rows: first child (large tile) moves to right */
.ukrloft-tiles-row-rev .ukrloft-tile:first-child {
  order: 2;
}

/* Mobile: tiles stack 100% / 50% / 50% */
@media (max-width: 767px) {
  .ukrloft-tile {
    width: calc(50% - 1px);
  }
  .ukrloft-tile:first-child {
    width: calc(100% - 1px);
  }
}

/* --- SEO Content Block (before footer, oneloft.pl style) --- */

.ukrloft-seo-content {
  background: #fff;
  padding: 40px 0 60px;
}

.ukrloft-seo-text {
  font-size: 10pt;
  line-height: 1.5em;
  color: #333;
}

.ukrloft-seo-text h1,
.ukrloft-seo-text h2,
.ukrloft-seo-text h3 {
  font-size: 10pt;
  line-height: 1.5em;
  margin: 1em 0 0.5em;
}

.ukrloft-seo-text h1 {
  font-weight: 700;
}

.ukrloft-seo-text h2 {
  font-weight: 700;
}

.ukrloft-seo-text p {
  margin: 0.8em 0;
}

.ukrloft-seo-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 10pt;
}

.ukrloft-seo-text table th,
.ukrloft-seo-text table td {
  border: 1px solid #d8d8d8;
  padding: 8px 12px;
  text-align: left;
}

.ukrloft-seo-text table th {
  background: #f5f5f5;
  font-weight: 700;
}

@media (max-width: 767px) {
  .ukrloft-seo-content {
    padding: 30px 15px 40px;
  }
  .ukrloft-seo-text table {
    display: block;
    overflow-x: auto;
  }
}

/* --- Newsletter Subscription Block (oneloft.pl style) --- */

.ukrloft-newsletter {
  background: #f5f5f5;
  padding: 55px 0;
  text-align: center;
}

.ukrloft-newsletter-title {
  font-size: 28px;
  font-weight: 700;
  color: #29231c;
  margin: 0 0 10px;
}

.ukrloft-newsletter-subtitle {
  font-size: 15px;
  color: #666;
  margin: 0 0 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ukrloft-newsletter-form {
  max-width: 480px;
  margin: 0 auto 20px;
}

.ukrloft-newsletter-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.ukrloft-newsletter-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 20px;
  font-size: 14px;
  background: transparent;
  color: #333;
}

.ukrloft-newsletter-input::placeholder {
  color: #999;
}

.ukrloft-newsletter-btn {
  border: none;
  background: #29231c;
  color: #fff;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 50px;
  margin: 3px;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.ukrloft-newsletter-btn:hover {
  background: #3d342a;
}

.ukrloft-newsletter-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ukrloft-newsletter-msg {
  color: #c83c3c;
  font-size: 13px;
  margin-top: 10px;
}

.ukrloft-newsletter-success {
  font-size: 16px;
  color: #52bb38;
  font-weight: 500;
}

.ukrloft-newsletter-privacy {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.ukrloft-newsletter-privacy a {
  color: #999;
  text-decoration: underline;
}

.ukrloft-newsletter-privacy a:hover {
  color: #333;
}

@media (max-width: 767px) {
  .ukrloft-newsletter {
    padding: 40px 15px;
  }
  .ukrloft-newsletter-title {
    font-size: 22px;
  }
  .ukrloft-newsletter-subtitle {
    font-size: 14px;
  }
  .ukrloft-newsletter-btn {
    padding: 12px 20px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .ukrloft-newsletter-input-wrap {
    flex-direction: column;
    border-radius: 12px;
  }
  .ukrloft-newsletter-input {
    width: 100%;
    text-align: center;
    padding: 12px 15px;
  }
  .ukrloft-newsletter-btn {
    width: calc(100% - 6px);
    border-radius: 50px;
    padding: 12px;
  }
}

/* --- Promo Slider (full-width, between newsletter and logos) --- */

.ukrloft-promo-slider {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  background: #000;
}

.ukrloft-promo-slider .swiper {
  width: 100%;
}

.ukrloft-promo-slider .swiper-slide img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
}

.ukrloft-promo-slider .swiper-slide a {
  display: block;
  line-height: 0;
}

/* Navigation arrows — custom SVG, circular (oneloft.pl uses 25px arrow buttons) */
.ukrloft-promo-slider .swiper-button-prev,
.ukrloft-promo-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-circle, 50%);
  background: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease-in-out;
}

.ukrloft-promo-slider .swiper-button-prev:hover,
.ukrloft-promo-slider .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

.ukrloft-promo-slider .swiper-button-prev::after,
.ukrloft-promo-slider .swiper-button-next::after {
  content: '' !important;
  display: block;
  width: 20px;
  height: 20px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.ukrloft-promo-slider .swiper-button-next::after {
  transform: rotate(45deg);
  margin-left: -4px;
}

.ukrloft-promo-slider .swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 4px;
}

/* Pagination dots */
.ukrloft-promo-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.ukrloft-promo-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (max-width: 991px) {
  .ukrloft-promo-slider .swiper-slide img {
    height: 350px;
  }
}

@media (max-width: 767px) {
  .ukrloft-promo-slider .swiper-slide img {
    height: 250px;
  }
  .ukrloft-promo-slider .swiper-button-prev,
  .ukrloft-promo-slider .swiper-button-next {
    width: 36px;
    height: 36px;
  }
  .ukrloft-promo-slider .swiper-button-prev::after,
  .ukrloft-promo-slider .swiper-button-next::after {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}

/* --- Footer (oneloft.pl style, admin-configurable via CSS vars) --- */

.ukrloft-footer {
  background: var(--footer-bg, #29231c) !important;
  color: var(--footer-heading, #fff) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.ukrloft-footer-inner {
  padding: var(--footer-padding, 60px) 0;
}

.ukrloft-footer-columns {
  display: flex;
  flex-wrap: wrap;
}

.ukrloft-footer-col {
  width: 25%;
  box-sizing: border-box;
  font-size: 14px;
  padding-right: 15px;
}

.ukrloft-footer-heading {
  font-weight: 500;
  color: var(--footer-heading, #fff);
  padding-bottom: 15px;
  font-size: 14px;
}

.ukrloft-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ukrloft-footer-col ul li {
  padding: 0.2em 0;
}

.ukrloft-footer-col ul li a {
  color: var(--footer-link, rgba(255, 255, 255, 0.4));
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.ukrloft-footer-col ul li a:hover {
  color: var(--footer-hover, #fff);
}

.ukrloft-footer-address {
  color: var(--footer-link, rgba(255, 255, 255, 0.4));
}

.ukrloft-footer-subheading {
  color: var(--footer-heading, #fff);
  font-weight: 500;
  margin-top: 12px;
  padding-bottom: 4px;
}

.ukrloft-footer-col ul li a i.fas {
  width: 16px;
  text-align: center;
  margin-right: 4px;
  font-size: 12px;
}

.ukrloft-footer-bottom {
  font-size: 14px;
  color: var(--footer-link, rgba(255, 255, 255, 0.4));
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--footer-bottom-bg, transparent);
}

.ukrloft-footer-bottom a {
  color: var(--footer-link, rgba(255, 255, 255, 0.4));
}

.ukrloft-footer-bottom a:hover {
  color: var(--footer-hover, #fff);
}

/* Override theme ds-footer styles */
.ukrloft-footer .ds-footer-item-title,
.ukrloft-footer .dark-text {
  color: var(--footer-heading, #fff) !important;
}

@media (max-width: 991px) {
  .ukrloft-footer-col {
    width: 50%;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .ukrloft-footer-col {
    width: 50%;
    margin-bottom: 25px;
  }
  .ukrloft-footer-inner {
    padding: 40px 15px;
  }
}

@media (max-width: 479px) {
  .ukrloft-footer-col {
    width: 100%;
  }
}

/* --- Logo Grid (payment/partner logos, before footer) --- */

.ukrloft-logos {
  background: #fff;
  padding: 30px 0 40px;
  border-top: 1px solid #e5e5e5;
}

.ukrloft-logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 30px;
}

.ukrloft-logos-grid img {
  max-height: 40px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.ukrloft-logos-grid img:hover {
  opacity: 1;
}

.ukrloft-logos-grid a {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 767px) {
  .ukrloft-logos {
    padding: 20px 15px 30px;
  }
  .ukrloft-logos-grid {
    gap: 15px 20px;
  }
  .ukrloft-logos-grid img {
    max-height: 30px;
  }
}

/* --- Aktsii Product Carousel (oneloft.pl style) --- */

.ukrloft-aktsii-slider {
  overflow: visible;
  clip-path: inset(-15px);
  position: relative;
}

.ukrloft-aktsii-slider .swiper-slide {
  height: auto;
}

.ukrloft-aktsii-slider .swiper-slide > .ds-module-item {
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* Navigation arrows — circular (oneloft.pl style) */
.ukrloft-aktsii-slider .swiper-button-prev,
.ukrloft-aktsii-slider .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-circle, 50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 2px 9px 0px rgba(16, 47, 102, 0.16);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  top: 50%;
  margin-top: -18px;
  z-index: 10;
}

.ukrloft-aktsii-slider .swiper-button-prev {
  left: 4px;
}

.ukrloft-aktsii-slider .swiper-button-next {
  right: 4px;
}

.ukrloft-aktsii-slider .swiper-button-prev:hover,
.ukrloft-aktsii-slider .swiper-button-next:hover {
  background: #fff;
}

.ukrloft-aktsii-slider .swiper-button-prev::after,
.ukrloft-aktsii-slider .swiper-button-next::after {
  content: '' !important;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.ukrloft-aktsii-slider .swiper-button-next::after {
  transform: rotate(45deg);
  margin-left: -3px;
}

.ukrloft-aktsii-slider .swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.ukrloft-aktsii-slider .swiper-button-disabled {
  opacity: 0.3;
}

@media (max-width: 767px) {
  .ukrloft-aktsii-slider .swiper-button-prev,
  .ukrloft-aktsii-slider .swiper-button-next {
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }
  .ukrloft-aktsii-slider .swiper-button-prev::after,
  .ukrloft-aktsii-slider .swiper-button-next::after {
    width: 8px;
    height: 8px;
  }
}

/* --- Бестселери Product Carousel (oneloft.pl style) --- */
.ukrloft-bestseller-slider { overflow: visible; clip-path: inset(-15px); position: relative; }
.ukrloft-bestseller-slider .swiper-slide { height: auto; }
.ukrloft-bestseller-slider .swiper-slide > .ds-module-item { width: 100%; max-width: 100%; flex: none; }

.ukrloft-bestseller-slider .swiper-button-prev,
.ukrloft-bestseller-slider .swiper-button-next {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0px 2px 9px 0px rgba(16,47,102,0.16);
  transition: background-color 0.3s ease-in-out;
  top: 50%; margin-top: -18px; z-index: 10;
}
.ukrloft-bestseller-slider .swiper-button-prev { left: 4px; }
.ukrloft-bestseller-slider .swiper-button-next { right: 4px; }
.ukrloft-bestseller-slider .swiper-button-prev:hover,
.ukrloft-bestseller-slider .swiper-button-next:hover { background: #fff; }

.ukrloft-bestseller-slider .swiper-button-prev::after,
.ukrloft-bestseller-slider .swiper-button-next::after {
  content: '' !important; display: block; width: 10px; height: 10px;
  border-top: 2px solid #333; border-right: 2px solid #333;
}
.ukrloft-bestseller-slider .swiper-button-next::after { transform: rotate(45deg); margin-left: -3px; }
.ukrloft-bestseller-slider .swiper-button-prev::after { transform: rotate(-135deg); margin-left: 3px; }
.ukrloft-bestseller-slider .swiper-button-disabled { opacity: 0.3; }

@media (max-width: 767px) {
  .ukrloft-bestseller-slider .swiper-button-prev,
  .ukrloft-bestseller-slider .swiper-button-next {
    width: 28px; height: 28px; margin-top: -14px;
  }
  .ukrloft-bestseller-slider .swiper-button-prev::after,
  .ukrloft-bestseller-slider .swiper-button-next::after {
    width: 8px; height: 8px;
  }
}

/* ========================================
   Module View Switcher (Grid/List)
   ======================================== */

/* Switcher buttons */
.ds-module-view-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #d8d8d8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
  transition: all 0.2s ease;
  padding: 0;
}

.ds-module-view-btn:hover {
  border-color: #000;
  color: #000;
}

.ds-module-view-btn.active {
  border-color: #000;
  background: #000;
  color: #fff;
}

/* Module header border bottom */
.ds-module-header {
  border-bottom: 1px solid #d8d8d8;
}

.ds-module-header:not(:has(.ds-module-view-switcher)) {
  justify-content: center !important;
}

/* List mode: items full width */
@media (min-width: 768px) {
  .ds-module.ds-module-list-mode .ds-module-item:not(.product-layout) {
    width: 100% !important;
  }

  .ds-module.ds-module-list-mode .ds-module-item > .content-block {
    flex-direction: row !important;
    align-items: center;
    gap: 0;
  }

  .ds-module.ds-module-list-mode .ds-module-img {
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: 1px solid #d8d8d8;
    flex-shrink: 0;
  }

  .ds-module.ds-module-list-mode .ds-module-img img {
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .ds-module.ds-module-list-mode .ds-module-img-box {
    width: 200px;
  }

  .ds-module.ds-module-list-mode .ds-module-caption {
    flex-grow: 1;
  }

  .ds-module.ds-module-list-mode .ds-module-price {
    margin-top: 0 !important;
  }

  .ds-module.ds-module-list-mode .ds-module-cart {
    gap: 1rem;
    justify-content: flex-start !important;
  }

  .ds-module.ds-module-list-mode .ds-module-cart .button-outline {
    margin-left: 0;
    position: relative !important;
  }

  .ds-module.ds-module-list-mode .ds-module-buttons {
    position: static !important;
    flex-direction: row !important;
    margin-bottom: 0.5rem;
  }

  .ds-module.ds-module-list-mode .ds-module-stickers {
    position: static !important;
  }

  .ds-module.ds-module-list-mode .ds-product-img-hover {
    display: none;
  }
}

/* ===========================================
   PHASE 1 COMPLETE: CSS Design System ✅
   ===========================================

   Updated based on Design Extractor analysis of oneloft.pl:

   ✓ Colors: All variables updated (#29231c, #c40000, #327b7b, #d8d8d8)
   ✓ Typography: Exact font sizes, weights, line-heights
     - Body: 16px / 300 / 18px
     - h1: 35px / 300 / 38.5px
     - h2: 24px / 700
     - h3: 16px / 400
     - Paragraphs: 20px / 300 / 18px
     - Buttons: 14px / 500 / lowercase
     - Nav: 16px / 500 / 16px
   ✓ Spacing: CSS variables for common values (10px, 16px, 20px, 60px)
   ✓ Border Radius: All components (21px inputs/buttons, 50% circles, 16px pagination)
   ✓ Shadows: Product hover, category tiles, dropdowns (exact oneloft.pl values)
   ✓ Transitions: 0.3s ease-in-out for all interactive elements
   ✓ Responsive Breakpoints: 480px, 767px, 979px, 1200px
   ✓ Badges: Circular (50%) with proper padding and font-weight
   ✓ Pagination: Rounded (16px) with hover states

   ===========================================
   PHASE 2 COMPLETE: Header/Navigation ✅
   ===========================================

   Implemented oneloft.pl header structure:

   ✓ 3-Column Layout: Logo LEFT | Phone+Email CENTER | Search/User/Cart RIGHT
     - File: catalog/view/theme/oct_deals/template/common/header.twig (lines 164-451)
     - CSS: Lines 209-555 (header center section, circular icons, collapsible search)

   ✓ Contact Info in Center (desktop only, hidden <1200px):
     - Phone icon + number (clickable tel: link)
     - Email icon + address (clickable mailto: link)
     - Vertical border-left separator
     - File: catalog/controller/common/header.php (line 90 - main_contact_email added)

   ✓ Sticky Scroll Behavior:
     - Navigation fades out at scrollY > 50px
     - Shows on header hover (.header-scrolled class)
     - JS: catalog/view/theme/oct_deals/template/common/footer.twig (lines 401-421)
     - CSS: Lines 558-592 (transitions, opacity, max-height)

   ✓ Full-Width Navigation Bar:
     - Black background (#000), white text
     - Hover: dark brown (#29231c)
     - Inside <header> for sticky behavior
     - File: header.twig lines 453-461

   ✓ Mega Menu with Subcategories:
     - Template: catalog/view/theme/oct_deals/template/octemplates/menu/oct_menu_horizontal.twig
     - Supports multi-level dropdowns (children, oct_pages)
     - Dropdown shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px
     - Font: 14px / 400 (items), 16px / 500 (nav)
     - Hover: #c40000 (accent red)

   ✓ Circular Icon Buttons (oneloft.pl style):
     - Search, User, Cart: 44px circles with #1a1a1a background
     - White icons on dark circles
     - CSS: Lines 467-555

   ✓ Collapsible Search (desktop):
     - Icon-only collapsed state (44px circle)
     - Expands to 280px input on click
     - JS: footer.twig lines 375-400
     - CSS: Lines 659-754

   ===========================================
   PHASE 3 COMPLETE: Product Cards ✅
   ===========================================

   Implemented oneloft.pl product card structure:

   ✓ Hover Image Swap (exact oneloft.pl timing):
     - Second image with opacity fade (0.4s ease-in-out)
     - Files: oct_products_modules.twig (lines 272-274), oct_product_modules.php (lines 155-160)
     - CSS: Lines 782-801 (hover image transition)

   ✓ Manufacturer Row:
     - Displays "Виробник: {name}" below product name
     - Font: 12px / 300 (label), 500 (name)
     - Color: #adadad (label), #666 (name)
     - Added to controller: oct_product_modules.php (lines 203-212)
     - Template: oct_products_modules.twig (after product name)
     - CSS: Lines 803-815

   ✓ Product Basket Wrapper (oneloft.pl structure):
     - Wraps price + cart buttons together
     - Display: flex column with gap: 8px
     - Template: oct_products_modules.twig (wraps ds-module-price + ds-module-cart)
     - CSS: Lines 817-824

   ✓ Product Card Structure (matches oneloft.pl):
     - Image box with hover effect ✓
     - Product name (link) ✓
     - Manufacturer row ✓
     - Stock status ✓
     - Rating + reviews ✓
     - Price (old + new) ✓
     - Quantity selector + cart button ✓

   ✓ Tags/Stickers:
     - Already positioned absolute (ds-module-stickers)
     - Circular badges with proper border-radius
     - Sale/New/Promo variants

   ✓ Responsive Grid:
     - 25% on ≥1200px (4 columns) — CSS line 646
     - 33% on 768-1199px (3 columns) — theme default
     - 50% on 481-767px (2 columns) — theme default
     - 100% on ≤480px (1 column) — theme default

   ===========================================
   PHASE 4 COMPLETE: Homepage Modules ✅
   ===========================================

   All homepage modules already implemented and verified:

   ✓ Category Tiles (module_id=53):
     - Template: catalog/view/theme/oct_deals/template/extension/module/category_tiles.twig
     - Controller: catalog/controller/extension/module/category_tiles.php
     - CSS: Lines 1142-1262 (responsive grid, hover overlay fade, reversed rows)
     - Features:
       * 4 rows × 3 tiles (12 categories total)
       * Dark overlay (rgba(0,0,0,0.5)) fades to transparent on hover
       * Transition: 0.3s ease-in-out
       * Responsive: 50% width on 768px, 100% on mobile
       * Text overlay at bottom-left (white text, text-shadow)

   ✓ Promo Banner (module_id=56):
     - Template: catalog/view/theme/oct_deals/template/extension/module/promo_banner.twig
     - Full-width clickable image banner
     - Border-radius: 7px (br-7 class)
     - Responsive: img-fluid w-100
     - Links to /aktsii or custom URL

   ✓ Product Modules (3 variants):
     - #61: Рекомендовані (4-col grid, AJAX numbered pagination, 3 pages)
     - #60: Бестселери (4-col grid, sort by price DESC, limit 12)
     - #59: Акції (Swiper carousel, only_specials, limit 20)
     - Template: catalog/view/theme/oct_deals/template/octemplates/module/oct_products_modules.twig
     - AJAX Pagination: footer.twig lines 423-479 (XHR to modulePage endpoint)
     - Carousel CSS: Lines 1710-1784 (ukrloft-aktsii-slider)

   ✓ SEO Content Block (module_id=41):
     - HTML module with WYSIWYG editor
     - CSS: Lines 1266-1326 (ukrloft-seo-content)
     - Typography: 10pt, line-height 1.5em
     - Tables, headings, paragraphs styled
     - Responsive: padding adjustments

   ✓ Homepage Layout (layout_id=1):
     Sort order: Category Tiles (0) → Promo Banner (1) → Рекомендовані (3)
     → Бестселери (4) → Акції (5) → SEO Text (6)

   All modules admin-configurable through:
   - Extensions → Modules → [Module Name]
   - Design → Layouts → Homepage → Edit Modules

/* =============================================================================
   Phase 5: Footer/Newsletter — COMPLETED 2026-02-16
   ============================================================================= */

/*
   ✓ Newsletter Subscription Block (lines 1326-1461):
     - Background: #f5f5f5, centered layout
     - Title: 28px bold, subtitle: 15px gray
     - Input wrapper: 50px border-radius, flex horizontal
     - Submit button: dark bg (#29231c), uppercase, hover effect
     - Success/error messages, privacy checkbox text
     - Responsive: 767px (smaller fonts), 400px (vertical stack)
     - Admin settings: title, subtitle, placeholder, button text, privacy text/link
     - Controller: footer.php lines 88-97 (newsletter_*)

   ✓ Promo Slider (lines 1463-1560):
     - Full-width (100vw), Swiper carousel
     - Image height: 500px desktop → 350px tablet → 250px mobile
     - Navigation: 48px circular arrows, dark bg, white borders
     - Pagination: 10px white dots
     - Admin configurable: autoplay, delay, speed, loop, arrows, pagination
     - Controller: footer.php lines 108-141
     - Template: footer.twig lines 10-60
     - JavaScript: Swiper init with breakpoints

   ✓ Logo Grid (lines 1664-1707):
     - Flex centered grid, gap 20px/30px
     - Logos: max-height 40px, opacity 0.7 → 1 hover
     - Admin: upload logos + links (footer_links module)
     - Controller: footer.php lines 74-86 (footer_logos)
     - Template: footer.twig lines 114-128
     - Responsive: 767px (30px logos, smaller padding)

   ✓ Footer Columns (lines 1561-1663):
     - 5-column layout (20% each), dark background (#29231c)
     - Admin-configurable CSS vars: bg_color, heading_color, link_color, hover_color, padding
     - Link colors: rgba(255,255,255,0.4) → #fff hover
     - Footer bottom: copyright section, border-top
     - Controller: footer.php lines 59-106 (footer_columns, SEO content, design settings)
     - Template: footer.twig lines 129-157
     - Responsive: 991px (3 cols), 767px (2 cols), 479px (1 col)

   ✓ JavaScript Enhancements (footer.twig lines 200-480):
     - Scroll handler: header-scrolled class at scrollY > 50 (lines 401-421)
     - Product Swiper init for Акції carousel (lines 312-373)
     - AJAX pagination handler (lines 422-480)
     - Collapsible search behavior (lines 375-400)
     - Back-to-top button with scroll progress (lines 210-223)

   All footer components fully admin-manageable via:
   - Extensions → Modules → Footer Links (module_id=57)
   - Extensions → Modules → Promo Slider (module_id=58)
   - DB tables: oc_module (JSON settings)

/* =============================================================================
   Phase 6: Admin Interfaces — COMPLETED 2026-02-16
   ============================================================================= */

/*
   ✓ All 4 custom modules have fully functional admin panels in Ukrainian:

   1. Category Tiles (category_tiles, module_id=53)
      Controller: admin/controller/extension/module/category_tiles.php (149 lines)
      Template: admin/view/template/extension/module/category_tiles.twig
      Language: admin/language/uk-ua/extension/module/category_tiles.php
      Features:
        - Name, status, image dimensions (width/height)
        - Dynamic rows management (add/remove rows)
        - Each row: 1 large + 2 small category selects
        - Reverse option for row layout
        - Auto cache clearing on save

   2. Promo Banner (promo_banner, module_id=56)
      Controller: admin/controller/extension/module/promo_banner.php (115 lines)
      Template: admin/view/template/extension/module/promo_banner.twig (64 lines)
      Language: admin/language/uk-ua/extension/module/promo_banner.php
      Features:
        - Name, status
        - Image upload with Image Manager integration
        - Link URL with help text
        - Thumbnail preview with placeholder fallback
        - Form validation (name required)

   3. Footer Links (footer_links, module_id=57) — MOST COMPREHENSIVE
      Controller: admin/controller/extension/module/footer_links.php (221 lines)
      Template: admin/view/template/extension/module/footer_links.twig (439 lines)
      Language: admin/language/uk-ua/extension/module/footer_links.php (44 lines)
      Features:
        - Name, status
        - Design settings panel:
          · Color pickers for bg, heading, link, hover colors
          · Padding control (0-200px)
          · Live preview with real-time color updates
          · Reset to defaults button
        - SEO content: WYSIWYG editor (Summernote) for pre-footer text
        - Logos grid: add/remove logos with Image Manager, optional links
        - Newsletter settings:
          · Status (enabled/disabled)
          · Title, subtitle, placeholder, button text
          · Success message, privacy text/link/label
        - Footer columns:
          · Add/remove columns dynamically
          · Each column: title + links (title + href)
          · Add/remove links per column
          · Drag-and-drop NOT implemented (uses sequential order)
        - JavaScript features:
          · Dynamic HTML generation for columns/links/logos
          · Color picker ↔ hex input sync
          · Live footer preview
          · Summernote + CodeMirror integration
        - Auto cache clearing on save

   4. Promo Slider (promo_slider, module_id=58)
      Controller: admin/controller/extension/module/promo_slider.php (156 lines)
      Template: admin/view/template/extension/module/promo_slider.twig
      Language: admin/language/uk-ua/extension/module/promo_slider.php
      Features:
        - Tab interface: General / Settings / Slides
        - General tab: name, status
        - Settings tab:
          · Autoplay (enabled/disabled)
          · Delay (milliseconds, min 1000, step 500)
          · Speed (milliseconds, min 100, step 100)
          · Loop (enabled/disabled)
          · Arrows (enabled/disabled)
          · Pagination dots (enabled/disabled)
        - Slides tab:
          · Add/remove slides dynamically
          · Each slide: image (Image Manager), link, title
          · Empty slides filtered out on save
        - Auto cache clearing on save

   All modules follow OpenCart 3.x patterns:
     - POST validation with error handling
     - Breadcrumbs navigation
     - Permission checks (hasPermission 'modify')
     - Module data loading from oc_module table
     - JSON storage in DB (UTF-8 safe with JSON_UNESCAPED_UNICODE)
     - User token for CSRF protection
     - Image Manager integration (data-toggle="image")
     - Bootstrap 3 admin UI styling

   Admin panel access:
     - Extensions → Modules → [Module Name]
     - Click "Edit" icon next to installed module
     - URL format: /admin/index.php?route=extension/module/MODULE_NAME&user_token=...&module_id=XX

   Database structure:
     - Table: oc_module
     - Columns: module_id, name, code, setting (JSON TEXT)
     - Setting JSON contains all module configuration
     - Updated via model_setting_module->editModule()

   Phase 6 COMPLETE — All custom modules fully admin-manageable!
*/

/* ========================================================================
   Product Page Tabs (oneloft.pl style)
   ======================================================================== */

/* Tabs container */
.ds-product-tabs {
    background: #ffffff;
    border-bottom: none;
    margin-bottom: 0;
}

.ds-product-tabs-box {
    gap: 10px;
    padding: 15px 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* Individual tab button — pill style like oneloft.pl */
.ds-product-tabs-item {
    color: #666666;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 24px;
    border: 1px solid #d8d8d8;
    border-radius: 25px;
    background: #f7f7f7;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.ds-product-tabs-item:hover {
    color: #000000;
    border-color: #999999;
    background: #f0f0f0;
}

.ds-product-tabs-item.active {
    color: #000000;
    font-weight: 500;
    border-color: #000000;
    background: #ffffff;
}

/* Tab badge (review count) */
.ds-product-tabs-badge {
    background: #e0e0e0;
    color: #666666;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
}

.ds-product-tabs-item.active .ds-product-tabs-badge {
    background: #000000;
    color: #ffffff;
}

/* Tab content — hide/show like oneloft.pl */
.ds-product-tab-content {
    display: none; /* Hide all tab panes by default */
}

.ds-product-tab-content.active {
    display: block; /* Show only active tab pane */
}

/* Main product content area must ALWAYS be visible */
.ds-product-tab-main-content.ds-product-tab-content {
    display: block !important;
}

.ds-product-tab-content-title {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.ds-product-tab-content-title svg {
    fill: #000000;
}

/* Delivery tab table */
.ds-product-delivery-content .table {
    width: 100%;
    margin-bottom: 20px;
}

.ds-product-delivery-content .table thead th {
    background: #f5f5f5;
    color: #000000;
    font-weight: 500;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
}

.ds-product-delivery-content .table tbody td {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    color: #333333;
}

.ds-product-delivery-content .table tbody tr:hover {
    background: #fafafa;
}

.ds-product-delivery-content .alert-info {
    background: #e8f4f8;
    border: 1px solid #b8dce8;
    border-radius: 4px;
    padding: 15px;
    color: #00171F;
}

.ds-product-delivery-content .alert-info strong {
    color: #000000;
}

/* Attributes table styling */
.ds-product-attributes-item {
    padding: 12px 0;
    border-bottom: 1px dotted #e0e0e0;
}

.ds-product-attributes-item:last-child {
    border-bottom: none;
}

.ds-product-attributes-item .secondary-text {
    flex: 1;
    color: #666666;
    padding-right: 20px;
}

.ds-product-attributes-item span:last-child {
    color: #000000;
    font-weight: 400;
}

/* Responsive */
@media (max-width: 767px) {
    .ds-product-tabs-box {
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .ds-product-tabs-item {
        font-size: 13px;
        padding: 8px 16px;
    }

    .ds-product-tab-content {
        padding: 20px 15px;
    }

    .ds-product-delivery-content .table {
        font-size: 14px;
    }

    .ds-product-delivery-content .table thead th,
    .ds-product-delivery-content .table tbody td {
        padding: 8px 12px;
    }
}

/* End Product Page Tabs */

/* ========================================================================
   oneloft.pl Card Refinement — Phase 7
   ======================================================================== */

/* --- Hide non-essential card elements (grid mode only) --- */
.ds-module:not(.ds-module-list-mode) .ds-module-buttons {
  display: none !important;
}

.ds-module .ds-module-rating,
.ds-module .ds-module-reviews {
  display: none !important;
}

.ds-module .ds-module-stock {
  display: none !important;
}

.ds-module:not(.ds-module-list-mode) .ds-module-quantity {
  display: none !important;
}

.ds-module .ds-module-code {
  display: none !important;
}

.ds-module .ds-module-attributes {
  display: none !important;
}

/* --- Hide standard pagination on category/special/search pages --- */
#product-category .pagination,
#product-special .pagination,
#product-search .pagination,
#product-manufacturer-info .pagination {
  display: none !important;
}

/* --- Product name: 15px, weight 400, border-bottom separator --- */
.ds-module-caption .ds-module-title {
  font-size: 15px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0 !important;
  line-height: 1.3 !important;
}

/* --- Images & content blocks: no border-radius --- */
.ds-module-img-box img,
.ds-module-img img {
  border-radius: 0 !important;
}

.ds-module-item > .content-block {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Manufacturer: hide "Виробник:" label, show name in gray --- */
.ds-module-manufacturer em {
  display: none !important;
}

.ds-module-manufacturer,
.ds-module-manufacturer span {
  color: #adadad !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* --- Price: 20px weight 400, italic for discounted --- */
.ds-module-item .ds-price-new {
  font-size: 20px !important;
  font-weight: 400 !important;
}

.ds-module-item .ds-price-new.red-text {
  font-style: italic;
  color: #000 !important;
}

.ds-module-item .ds-price-old {
  color: #777 !important;
  font-size: 14px !important;
}

/* Price margin adjustment */
.ds-module-item .ds-module-price {
  margin: 10px 0 !important;
}

/* --- Cart button: pill-shaped, outline style (oneloft.pl) --- */
.ds-module:not(.ds-module-list-mode) .ds-module-cart {
  position: static !important;
  gap: 8px;
  margin-bottom: 10px;
}

.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn {
  background: #fff !important;
  border: 1px solid #29231c !important;
  color: #29231c !important;
  border-radius: 21px !important;
  height: 42px;
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  position: static !important;
  margin: 0 !important;
  transition: all 0.3s ease-in-out !important;
}

.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn:hover {
  background: #29231c !important;
  color: #fff !important;
}

.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn svg,
.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn svg path {
  fill: #29231c !important;
  stroke: none !important;
  transition: fill 0.3s ease-in-out;
}

.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn:hover svg,
.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn:hover svg path {
  fill: #fff !important;
}

.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn .button-text {
  display: inline !important;
}

/* --- Quickview button: circular, next to cart (oneloft.pl) --- */
.ds-module-quickview-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 21px;
  border: 1px solid #c7c7c7;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding: 0;
}

.ds-module-quickview-btn:hover {
  border-color: #29231c;
  background: #f5f5f5;
}

.ds-module-quickview-btn svg path {
  fill: #666;
  transition: fill 0.3s ease-in-out;
}

.ds-module-quickview-btn:hover svg path {
  fill: #29231c;
}

/* --- Card hover: L-shaped expanding corner borders (oneloft.pl) --- */
@media (min-width: 979px) {
  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover {
    box-shadow: none !important;
  }

  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block {
    position: relative;
  }

  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block::before,
  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 0;
    height: 0;
    border-color: #29231c;
    border-style: solid;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
    /* Reset theme's .product-grid .content-block::before/::after overrides */
    background: transparent !important;
    border-radius: 0 !important;
    transition: none;
  }

  /* Top-left corner: top + right borders */
  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block::before {
    top: -10px !important;
    left: -10px !important;
    right: auto !important;
    bottom: auto !important;
    border-width: 1px 1px 0 0;
  }

  /* Bottom-right corner: bottom + left borders */
  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block::after {
    bottom: -10px !important;
    right: -10px !important;
    top: auto !important;
    left: auto !important;
    border-width: 0 0 1px 1px;
  }

  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover > .content-block::before,
  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover > .content-block::after {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    opacity: 1;
    will-change: opacity, width, height;
  }

  /* Sequential animation: top-left draws first (0-0.2s), bottom-right second (0.2-0.4s) */
  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover > .content-block::before {
    transition: opacity .1s linear, width .1s linear, height .1s linear .1s;
  }

  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover > .content-block::after {
    transition: opacity 0s linear .2s, width .1s linear .2s, height .1s linear .3s;
  }

  /* Ensure overflow visible on parents for -10px corner offset */
  .ds-module:not(.ds-module-list-mode) .ds-module-item {
    overflow: visible !important;
  }

  .ds-module:not(.ds-module-list-mode) .ds-module-item > .content-block {
    overflow: visible !important;
  }
}

/* --- Product name: 2-line clamp with expand on hover (oneloft.pl) --- */
.ds-module:not(.ds-module-list-mode) .ds-module-caption .ds-module-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media (min-width: 979px) {
  .ds-module:not(.ds-module-list-mode) .ds-module-item:hover .ds-module-caption .ds-module-title {
    -webkit-line-clamp: unset;
    overflow: visible;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 -10px 0 0 rgba(255,255,255,0.7);
  }
}

/* --- Stickers: text style, no solid background (oneloft.pl) --- */
.ds-module-stickers .ds-module-sticker:not(.red-bg) {
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
}

.ds-module-stickers .ds-module-sticker.ds-module-sticker-sale,
.ds-module-stickers .ds-module-sticker.ds-module-sticker-promo {
  color: #c40000 !important;
}

.ds-module-stickers .ds-module-sticker.ds-module-sticker-new {
  color: #327b7b !important;
}

/* Discount badges next to price: text style instead of filled pill */
.ds-module-caption .ds-module-sticker.red-bg {
  background: transparent !important;
  color: #c40000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- Section headers: 35px weight 300 (oneloft.pl) --- */
.ds-module-header .fw-500.dark-text.fsz-20,
.ds-module-header .fw-500.dark-text {
  font-size: 35px !important;
  font-weight: 300 !important;
  line-height: 1.1em !important;
}

.ds-module-header {
  border-bottom: 1px solid #d8d8d8 !important;
  padding-bottom: 15px !important;
  padding-top: 20px !important;
}

.ds-module[data-type="split"],
.ds-module[data-type="width100"] {
  border-top: none !important;
  padding-top: 0;
}

/* --- Border-radius normalization --- */
.promo-banner img {
  border-radius: 0 !important;
}

.br-7 {
  border-radius: 0 !important;
}

/* --- Grid gap: 20px on desktop --- */
@media (min-width: 768px) {
  .ds-module.row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }
}

/* --- Category page heading --- */
.ds-category-title,
#content h1 {
  font-weight: 300 !important;
  font-size: 35px !important;
}

/* --- Sticker images row: keep visible --- */
.ds-module-sticker-images {
  display: flex !important;
}

/* --- Column sidebar card adjustments (keep existing overlay in sidebar) --- */
.ds-column-products .ds-module-buttons {
  display: flex !important;
}

.ds-column-products .ds-module-rating,
.ds-column-products .ds-module-reviews,
.ds-column-products .ds-module-stock {
  display: block !important;
}

/* ==========================================================================
   Fine-tuning Phase — design-extractor diff (oneloft.pl exact match)
   ========================================================================== */

/* Cart button: 12px/500 to match oneloft.pl */
.ds-module:not(.ds-module-list-mode) .ds-module-cart-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Product name: weight 300 (oneloft.pl uses 300, not 400) */
.ds-module-caption .ds-module-title {
  font-weight: 300 !important;
}

/* Pagination buttons: 42px to match oneloft.pl */
.ds-page-num {
  width: 42px !important;
  height: 42px !important;
  border-color: #b8b8b8 !important;
}

.ds-page-num.active {
  border-color: #29231c !important;
}

/* View switcher active: #29231c instead of #000 */
.ds-module-view-btn.active {
  background-color: #29231c !important;
  border-color: #29231c !important;
}

/* Newsletter form: pill-split style matching oneloft.pl (53px height) */
.ukrloft-newsletter-input-wrap {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ukrloft-newsletter-input {
  height: 53px !important;
  border-radius: 53px 0 0 53px !important;
  border: 1px solid #d8d8d8 !important;
  border-right: none !important;
  font-size: 16px !important;
  padding: 0 16px !important;
}

.ukrloft-newsletter-btn {
  height: 53px !important;
  border-radius: 0 53px 53px 0 !important;
  padding: 0 28px !important;
  font-size: 14px !important;
}

/* Additional border-radius cleanup in product/content areas */
.ds-module .br-8,
.ds-module .br-10,
.ds-module .br-12,
#content .br-8,
#content .br-10,
#content .br-12 {
  border-radius: 0 !important;
}

/* --- Sidebar Specials (Акції) — oneloft.pl style --- */
.ukrloft-sidebar-specials {
  background: #f5f5f5;
  padding: 20px 15px;
  margin-top: 15px;
}
.ukrloft-sidebar-specials-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #29231c;
  color: #29231c;
}
.ukrloft-sidebar-special-item {
  margin-bottom: 20px;
  text-align: center;
}
.ukrloft-sidebar-special-item:last-child {
  margin-bottom: 0;
}
.ukrloft-sidebar-special-image {
  position: relative;
  margin-bottom: 10px;
}
.ukrloft-sidebar-special-image img {
  max-width: 100%;
  height: auto;
}
.ukrloft-sidebar-special-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #c40000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  line-height: 1.3;
}
.ukrloft-sidebar-special-name {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ukrloft-sidebar-special-name:hover {
  color: #c40000;
}
.ukrloft-sidebar-special-price {
  margin-bottom: 10px;
}
.ukrloft-sidebar-special-price .price-new {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  display: block;
}
.ukrloft-sidebar-special-price .price-old {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
  display: block;
}
.ukrloft-sidebar-special-price .price-current {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.ukrloft-sidebar-cart-btn {
  display: inline-block;
  background: #29231c;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}
.ukrloft-sidebar-cart-btn:hover {
  background: #000;
}
.ukrloft-sidebar-cart-btn i {
  margin-right: 5px;
}

/* ==========================================================================
   Language Switcher (flag dropdown)
   ========================================================================== */

/* Container */
.ukrloft-lang {
  position: relative;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Trigger button — matches header icon buttons (44×44) */
.ukrloft-lang-trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.33);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.ukrloft-lang-trigger:hover {
  border-color: rgba(0, 0, 0, 0.6);
}
.ukrloft-lang.open .ukrloft-lang-trigger {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Language code text in trigger */
.ukrloft-lang-code {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #333;
  letter-spacing: 0.02em;
}
.ukrloft-lang-trigger .ukrloft-lang-code {
  font-size: 13px;
}

/* Language code in dropdown options */
.ukrloft-lang-option .ukrloft-lang-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  flex-shrink: 0;
}
.ukrloft-lang-option.active .ukrloft-lang-code {
  background: #29231c;
  color: #fff;
}

/* Dropdown menu */
.ukrloft-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1050;
  pointer-events: none;
}
.ukrloft-lang.open .ukrloft-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu option */
.ukrloft-lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  transition: background 0.15s;
}
.ukrloft-lang-option:hover {
  background: #f5f5f5;
}
.ukrloft-lang-option.active {
  background: #f0f0f0;
  cursor: default;
}
.ukrloft-lang-option-label {
  font-weight: 400;
  line-height: 1.2;
}
.ukrloft-lang-option.active .ukrloft-lang-option-label {
  font-weight: 600;
}

/* Checkmark for active */
.ukrloft-lang-check {
  margin-left: auto;
  opacity: 0;
  color: #29231c;
}
.ukrloft-lang-option.active .ukrloft-lang-check {
  opacity: 1;
}

/* Overlay (for click outside) */
.ukrloft-lang-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1049;
}
.ukrloft-lang.open .ukrloft-lang-overlay {
  display: block;
}

/* Hide on mobile (shown only in sidebar) */
@media (max-width: 767px) {
  .ukrloft-lang--header {
    display: none;
  }
  /* Hide user dropdown on mobile — moved to sidebar */
  .ds-dropdown-box:has(.ds-header-user-button) {
    display: none !important;
  }

  /* === Mobile header icon circles (oneloft.pl style) === */

  /* Consistent gap between circle icons */
  .ds-header-right {
    gap: 8px !important;
  }

  /* Phone icon wrapper */
  .ds-dropdown-box.ds-header-mobile-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border: 1px solid rgba(0, 0, 0, 0.33);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .ds-dropdown-box.ds-header-mobile-btn .ds-dropdown-toggle {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Search toggle button */
  .ds-header-search-toggle-button.ds-header-mobile-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border: 1px solid rgba(0, 0, 0, 0.33) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Cart button */
  .ds-header-cart-button.ds-header-mobile-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border: 1px solid rgba(0, 0, 0, 0.33) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* Cart badge: position at top-right of circle */
  .ds-header-cart-button.ds-header-mobile-btn .badge {
    top: -4px !important;
    right: -4px !important;
  }
}

/* ========================================
   Client bar (mobile sidebar)
   ======================================== */
.ukrloft-client-bar {
  display: none;
  margin: 0 16px 4px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .ukrloft-client-bar {
    display: block;
  }
}
.ukrloft-client-bar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  text-decoration: none;
}
.ukrloft-client-bar-link:hover {
  text-decoration: none;
  color: #333;
}
.ukrloft-client-bar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #29231c;
  flex-shrink: 0;
}
.ukrloft-client-bar-icon svg {
  display: block;
}
.ukrloft-client-bar-chevron {
  margin-left: auto;
  color: #999;
}

/* Mobile sidebar — full-width language bar */
.ukrloft-lang-bar {
  display: none;
  margin: 0 16px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .ukrloft-lang-bar {
    display: block;
  }
}

/* Bar trigger row */
.ukrloft-lang-bar-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #333;
}
.ukrloft-lang-bar-trigger .ukrloft-lang-code {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #29231c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.ukrloft-lang-bar-label {
  font-weight: 400;
}
.ukrloft-lang-bar-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  color: #999;
}
.ukrloft-lang-bar.open .ukrloft-lang-bar-chevron {
  transform: rotate(180deg);
}

/* Expandable options */
.ukrloft-lang-bar-options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.ukrloft-lang-bar.open .ukrloft-lang-bar-options {
  max-height: 120px;
}
.ukrloft-lang-bar-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-top: 1px solid #e0e0e0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  transition: background 0.15s;
}
.ukrloft-lang-bar-option:hover {
  background: #f5f5f5;
}
.ukrloft-lang-bar-option.active {
  background: #f8f8f8;
  cursor: default;
}
.ukrloft-lang-bar-option .ukrloft-lang-code {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  background: #f0f0f0;
  color: #333;
}
.ukrloft-lang-bar-option.active .ukrloft-lang-code {
  background: #29231c;
  color: #fff;
}
.ukrloft-lang-bar-option .ukrloft-lang-check {
  margin-left: auto;
  opacity: 0;
  color: #29231c;
}
.ukrloft-lang-bar-option.active .ukrloft-lang-check {
  opacity: 1;
}

/* ========================================
   Full Catalog Sidebar (mobile bottom bar)
   ======================================== */
.ukrloft-catalog-sidebar {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12500;
}
@media (max-width: 991px) {
  .ukrloft-catalog-sidebar { display: block; pointer-events: none; }
  .ukrloft-catalog-sidebar.open { pointer-events: auto; }
}

.ukrloft-catalog-sidebar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
}
.ukrloft-catalog-sidebar.open .ukrloft-catalog-sidebar-overlay {
  opacity: 1;
}

.ukrloft-catalog-sidebar-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}
.ukrloft-catalog-sidebar.open .ukrloft-catalog-sidebar-panel {
  transform: translateX(0);
}

.ukrloft-catalog-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 16px 8px;
  flex-shrink: 0;
}
.ukrloft-catalog-sidebar-title {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.ukrloft-catalog-sidebar-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  transition: background 0.15s;
}
.ukrloft-catalog-sidebar-close:hover {
  background: #eee;
}

.ukrloft-catalog-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.ukrloft-catalog-sidebar-item {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.ukrloft-catalog-sidebar-item:hover {
  background: #f9f9f9;
  text-decoration: none;
  color: #000;
}
.ukrloft-catalog-sidebar-item:last-child {
  border-bottom: none;
}
.ukrloft-catalog-sidebar-item-accent {
  color: #c40000;
  font-weight: 500;
}
.ukrloft-catalog-sidebar-item-accent:hover {
  color: #c40000;
}