/* ============================================
   Ultra Modern 2026 Design - Books365
   Premium & Beautiful Design
   ============================================ */

/* CSS Variables - Facebook Style Color Palette */
:root {
  --primary-color: #5B9BD5;
  --primary-hover: #4A90E2;
  --text-primary: #050505;
  --text-secondary: #65676b;
  --text-light: #8a8d91;
  --bg-primary: #ffffff;
  --bg-secondary: #f0f2f5;
  --bg-dark: #1c1e21;
  --border-color: #dadde1;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.15);
  --space-section: 2.5rem;
  --space-module-tight: 1.25rem;
  --touch-target-min: 44px;
  --transition: all 0.2s ease;
  /* Shell: top bar & footer */
  --top-bar-bg: #ffffff;
  --top-bar-border: var(--border-color);
  --top-bar-text-muted: var(--text-secondary);
  --top-bar-locale-gap: 0.5rem;
  --footer-rule: rgba(255, 255, 255, 0.12);
  --footer-text: #cbd5e1;
  --footer-heading: #ffffff;
  /* Stronger “card” presence on gray page background */
  --catalog-content-radius: 1rem;
  --catalog-content-border: rgba(91, 155, 213, 0.22);
  --catalog-content-shadow: 0 10px 40px rgba(28, 30, 33, 0.09), 0 2px 8px rgba(91, 155, 213, 0.08);
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.7;
  width: 100%;
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

h2 {
  font-size: 1.625rem;
  font-weight: 600;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
}

h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

h5 {
  font-size: 1.1rem;
  font-weight: 600;
}

h6 {
  font-size: 1rem;
  font-weight: 600;
}

body.catalog-ui #content h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.125rem;
}

body.catalog-ui #content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

body.catalog-ui #content h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
  font-weight: 500;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

/* Font Awesome Icons */
.fa {
  font-size: 18px;
}

/* Form Elements */
legend {
  font-size: 1.5rem;
  padding: 1rem 0;
  font-weight: 700;
  color: var(--text-primary);
}

label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

select.form-control, 
textarea.form-control, 
input[type="text"].form-control, 
input[type="password"].form-control, 
input[type="datetime"].form-control, 
input[type="datetime-local"].form-control, 
input[type="date"].form-control, 
input[type="month"].form-control, 
input[type="time"].form-control, 
input[type="week"].form-control, 
input[type="number"].form-control, 
input[type="email"].form-control, 
input[type="url"].form-control, 
input[type="search"].form-control, 
input[type="tel"].form-control, 
input[type="color"].form-control {
  font-size: 16px;
  padding: 1rem 1.25rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

select.form-control:focus, 
textarea.form-control:focus, 
input[type="text"].form-control:focus, 
input[type="password"].form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.input-group input, 
.input-group select, 
.input-group .dropdown-menu, 
.input-group .popover {
  font-size: 16px;
}

.input-group .input-group-addon {
  font-size: 13px;
  height: auto;
  padding: 0.5rem 0.75rem;
  background: var(--primary-color);
  color: white;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
}

.input-group-sm .input-group-addon {
  font-size: 12px;
  padding: 0.375rem 0.625rem;
}

.navbar-label {
  text-align: center;
  color: white;
  font-weight: 700;
}

.nav-tabs {
  margin-bottom: 2rem;
  border-bottom: 3px solid var(--border-color);
  background: transparent;
}

.nav-tabs > li > a {
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1rem 2rem;
  color: var(--text-secondary);
  transition: var(--transition);
  font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-right: 0.5rem;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}

.nav-tabs > li > a:hover {
  background: transparent;
  border-bottom-color: var(--primary-color);
}

div.required .control-label:before {
  content: '* ';
  color: #ef4444;
  font-weight: bold;
}

/* Dropdown Menus - Simple Style */
.dropdown-menu {
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  margin-top: 0.5rem;
  background: var(--bg-primary);
}

.dropdown-menu li > a {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  transition: var(--transition);
  color: var(--text-primary);
  font-weight: 500;
}

.dropdown-menu li > a:hover {
  background: var(--primary-color);
  color: #ffffff;
  transform: translateX(4px);
}

/* Header row: flex on sm+ only; xs uses Bootstrap col-xs-* (8+4 beside logo row) */
.header_row {
  padding: 1.25rem 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .header_row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .header_row .header_logo {
    flex-shrink: 0;
    min-width: 150px;
    width: auto;
  }

  .header_search {
    flex: 1;
    max-width: 500px;
    margin: 0 auto;
    margin-right: 1.5rem;
  }

  .header_cart {
    flex-shrink: 0;
    min-width: fit-content;
    width: auto;
  }
}

@media (max-width: 767px) {
  header > .container {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Cancel Bootstrap row negative margin inside header (causes horizontal bleed) */
  header .row.header_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .header_row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0 0.65rem;
  }

  /* Full-width stack; cancel col float so search/cart align with container edges */
  .header_row > .header_logo,
  .header_row > .header_search,
  .header_row > .header_cart {
    float: none !important;
    width: 100% !important;
  }

  /* Logo centered above search + cart */
  .header_row .header_logo {
    order: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header_row .header_logo #logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .header_row .header_logo #logo a {
    display: inline-block;
  }

  .header_row .header_logo #logo img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 220px;
  }

  .header_row .header_logo #logo h1 {
    margin-bottom: 0;
    text-align: center;
  }

  .header_search {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1rem;
  }

  .header_cart {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0.25rem;
  }

  /* Keep search inside viewport (flex children default min-width: auto) */
  header .header_search #search {
    max-width: 100%;
    box-sizing: border-box;
  }

  header .header_search #search.input-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  /* Let the input shrink so the search button stays on screen (width:auto prevents this) */
  header .header_search #search.input-group .form-control {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  header #logo {
    margin-left: 0;
  }
}

/* Top Navigation Bar - Facebook Style */
#top {
  background: var(--top-bar-bg);
  border-bottom: 1px solid var(--top-bar-border);
  padding: 0.375rem 0;
  margin: 0;
  min-height: 52px;
  position: relative;
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}

#top .container.top-bar-inner {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: calc(var(--touch-target-min) - 4px);
}

body.catalog-ui #top .top-bar-locale {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--top-bar-locale-gap);
  padding-right: 0.75rem;
  margin-right: 0.25rem;
  border-right: 1px solid var(--top-bar-border);
  min-height: calc(var(--touch-target-min) - 8px);
}

@media (max-width: 767px) {
  body.catalog-ui #top .top-bar-locale {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    justify-content: flex-start;
    border-bottom: 1px solid var(--top-bar-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
  }
}

#top #top-links {
  margin-left: auto;
  float: none !important;
}

#top #top-links .list-inline {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.35rem;
}

#top .top-bar-link,
#top .dropdown-toggle.top-bar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--touch-target-min);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  line-height: 1.2;
}

/* Keep icon + label on one optical line (Font Awesome baseline) */
#top .top-bar-link .fa,
#top .dropdown-toggle.top-bar-link .fa {
  font-size: 15px;
  line-height: 1;
  width: 1.15em;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  top: 0;
}

#top .dropdown-toggle.top-bar-link .caret {
  flex-shrink: 0;
  margin-top: 0;
  vertical-align: middle;
}

#top .top-bar-link:focus-visible,
#top .dropdown-toggle.top-bar-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

#top #form-currency .currency-select,
#top #form-language .language-select {
  text-align: left;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  transition: var(--transition);
  font-weight: 500;
}

#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--primary-color);
}

#top .btn-link,
#top-links li,
#top-links a {
  color: var(--top-bar-text-muted);
  text-decoration: none;
  transition: var(--transition);
  font-weight: 500;
}

#top #form-currency,
#top #form-language {
  margin-bottom: 0;
  display: inline-block;
  vertical-align: middle;
}

#top #form-currency {
  margin-right: 0.5rem;
}

#top .btn-link:hover, 
#top-links a:hover {
  color: var(--primary-color);
}

#top-links .dropdown-menu {
  z-index: 1001 !important;
  position: absolute;
}

#top-links .dropdown-menu a {
  color: var(--text-primary);
}

#top-links .dropdown-menu a:hover {
  color: #ffffff;
}

#top-links .dropdown {
  position: relative;
  z-index: 1001;
}

#top .btn-link strong {
  font-size: 15px;
  line-height: 15px;
}

#top-links {
  padding-top: 0;
}

#top-links a + a {
  margin-left: 0;
}

/* Logo - Clean Style */
#logo {
  margin: 0;
  margin-left: 4rem;
  display: flex;
  align-items: center;
}

#logo h1 {
  margin: 0;
  line-height: 1.2;
}

#logo h1 a {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
}

#logo h1 a:hover {
  color: var(--primary-color);
}

#logo img {
  max-height: 80px;
  width: auto;
  transition: var(--transition);
  display: block;
}

#logo img:hover {
  opacity: 0.8;
}

/* Search - Modern Integrated Style */
#search {
  position: relative;
  width: 100%;
}

/* Search - Override Bootstrap table layout (#search and .input-group are the same element) */
#search.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  flex-direction: row !important;
  border-collapse: separate !important;
  position: relative !important;
}

#search.input-group .form-control {
  display: block !important;
  width: auto !important;
  flex: 1 !important;
  float: none !important;
  margin-bottom: 0 !important;
}

#search .input-lg {
  height: 42px !important;
  line-height: 1.5;
  padding: 0 1rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 21px 0 0 21px !important;
  border-right: none !important;
  font-size: 14px;
  transition: var(--transition);
  background: var(--bg-secondary);
  color: var(--text-primary);
  position: relative;
  z-index: 2;
}

#search .input-lg:focus {
  background: #ffffff;
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
  z-index: 3;
}

#search .input-group-btn {
  display: flex !important;
  flex-shrink: 0 !important;
  float: none !important;
  width: auto !important;
  position: relative !important;
  font-size: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#search .input-group-btn > .btn {
  position: relative !important;
  margin-left: 0 !important;
}

#search .btn-lg {
  font-size: 14px;
  line-height: 1.5;
  padding: 0 1.25rem;
  height: 42px !important;
  border-radius: 0 21px 21px 0 !important;
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-left: none !important;
  color: white !important;
  transition: var(--transition);
  font-weight: 500;
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 !important;
}

#search .btn-lg:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

#search .btn-lg:active {
  transform: scale(0.98);
}

/* Cart - Clean Integrated Style */
#cart {
  position: relative;
}

#cart > .btn,
#cart .cart-button {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  transition: var(--transition);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  white-space: nowrap;
}

#cart > .btn i,
#cart .cart-button i {
  font-size: 16px;
  color: var(--primary-color);
  flex-shrink: 0;
}

#cart > .btn:hover,
#cart .cart-button:hover {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  color: var(--text-primary);
}

#cart.open > .btn {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

#cart.open > .btn i {
  color: white;
}

#cart .dropdown-menu {
  background: var(--bg-primary);
  z-index: 1001;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  min-width: 100%;
  padding: 1rem;
}

#cart .dropdown-menu table {
  margin-bottom: 1.5rem;
}

#cart .dropdown-menu li > div {
  min-width: 427px;
  padding: 0 1.5rem;
}

@media (max-width: 478px) {
  #cart .dropdown-menu li > div {
    min-width: 100%;
  }
}

#cart .dropdown-menu li p {
  margin: 1.5rem 0;
}

.navbar-label {
  font-size: 1.25rem;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
}

/* Main navigation: primary shortcuts (bookstores, books, …) then product categories */
#menu .nav.catalog-nav > li.catalog-nav__primary > a {
  font-weight: 600;
}

@media (min-width: 768px) {
  #menu .nav.catalog-nav > li.catalog-nav__primary--sep {
    margin-right: 0.75rem;
    padding-right: 0.875rem;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }
}

@media (max-width: 767px) {
  #menu .nav.catalog-nav > li.catalog-nav__primary--sep {
    margin-bottom: 0.625rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }

  #menu .nav.catalog-nav > li.catalog-nav__category--first {
    margin-top: 0.35rem;
  }
}

/* Main navigation: categories + Books / Authors / Series */
#menu.navbar {
  margin-bottom: 0;
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--primary-color);
  min-height: 0;
}

#menu .navbar-header {
  position: relative;
  border: none;
  margin: 0;
}

#menu .navbar-collapse {
  border-top: none;
}

/* Desktop: category tree lives in the left column; top bar would duplicate it */
@media (min-width: 768px) {
  #menu.navbar {
    display: none !important;
  }
}

/* Shared link look; sizing is desktop vs mobile in media queries below */
#menu .nav > li > a {
  color: rgba(255, 255, 255, 0.98);
  background-color: transparent;
  font-weight: 500;
  transition: var(--transition);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

#menu .nav > li > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s;
}

#menu .nav > li > a:hover::before,
#menu .nav > li.open > a::before {
  left: 0;
}

#menu .nav > li > a:hover, 
#menu .nav > li.open > a {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#menu .dropdown-menu {
  padding: 1rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
  background: var(--bg-primary);
}

#menu .dropdown-inner {
  display: table;
}

#menu .dropdown-inner ul {
  display: table-cell;
}

#menu .dropdown-inner a {
  min-width: 200px;
  display: block;
  padding: 0.875rem 1.5rem;
  clear: both;
  line-height: 1.6;
  color: var(--text-primary);
  font-size: 15px;
  border-radius: var(--radius-md);
  transition: var(--transition);
  font-weight: 500;
}

#menu .dropdown-inner li a:hover {
  color: #ffffff;
  background: var(--primary-color);
}

#menu .see-all {
  display: block;
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--primary-color);
  transition: var(--transition);
  background: var(--bg-secondary);
}

#menu .see-all:hover, 
#menu .see-all:focus {
  text-decoration: none;
  color: #ffffff;
  background: var(--primary-color);
}

#menu #category {
  float: left;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  color: #fff;
}

#menu .btn-navbar,
#menu .navbar-toggle {
  font-size: 1.35rem;
  color: #fff;
  padding: 0.65rem 1rem;
  float: right;
  margin: 0.5rem 0.5rem 0.5rem 0;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

#menu .btn-navbar:hover,
#menu .btn-navbar:focus,
#menu .btn-navbar:active,
#menu .navbar-toggle:hover,
#menu .navbar-toggle:focus,
#menu .navbar-toggle:active {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: scale(1.02);
}

@media (max-width: 767px) {
  #menu.navbar {
    display: block !important;
  }

  /* Category list in sidebar duplicates the hamburger; keep filters/other modules */
  .catalog-sidebar__modules .category-menu {
    display: none !important;
  }

  /* Optional left column (e.g. filters): full width when shown; primary nav is hidden-xs in markup */
  #column-left.catalog-sidebar:not(.hidden-xs) {
    float: none;
    width: 100%;
  }

  #column-left.catalog-sidebar:not(.hidden-xs) + #content {
    float: none;
    width: 100%;
  }

  #logo img {
    max-height: 52px;
  }

  #search .input-lg {
    height: 36px !important;
    font-size: 13px;
    padding: 0 0.5rem;
    border-radius: 18px 0 0 18px !important;
  }

  #search .btn-lg {
    height: 36px !important;
    font-size: 13px;
    padding: 0 0.5rem;
    border-radius: 0 18px 18px 0 !important;
    flex-shrink: 0;
  }

  header .header_cart #cart {
    width: 100%;
  }

  #cart .cart-button.btn-lg {
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
  }

  #cart .cart-button.btn-lg i {
    font-size: 16px;
    flex-shrink: 0;
    margin: 0;
  }
  
  /* Light shell for mobile menu (matches cards / top bar, not solid blue) */
  #menu.navbar {
    border-radius: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
  }

  #menu.navbar.navbar-inverse {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
  }

  #menu .navbar-collapse {
    border-top: 1px solid var(--border-color);
    box-shadow: none;
  }

  #menu .nav > li > a {
    min-height: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0;
    color: var(--text-primary);
  }

  #menu .nav > li > a::before {
    background: rgba(0, 0, 0, 0.04);
  }

  #menu .nav > li > a:hover,
  #menu .nav > li.open > a {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
  }

  #menu .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    border: none;
    box-shadow: none;
  }

  #menu .navbar-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: var(--touch-target-min);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Center label in the full bar; hamburger stays in column 2 */
  #menu #category {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    float: none;
    margin: 0;
    padding: 0.35rem 3.25rem;
    text-align: center;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #menu .btn-navbar,
  #menu .navbar-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    z-index: 1;
    float: none;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    margin-right: 0.5rem;
    margin-left: 0;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
  }

  #menu .navbar-toggle:hover,
  #menu .navbar-toggle:focus,
  #menu .navbar-toggle:active,
  #menu .btn-navbar:hover,
  #menu .btn-navbar:focus,
  #menu .btn-navbar:active {
    background-color: var(--bg-primary);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  #menu div.dropdown-inner > ul.list-unstyled {
    display: block;
  }
  
  #menu div.dropdown-menu {
    margin-left: 0 !important;
    padding-bottom: 1.5rem;
    background-color: rgba(255, 255, 255, 0.98);
  }
  
  #menu .dropdown-inner {
    display: block;
  }
  
  #menu .dropdown-inner a {
    width: 100%;
    color: var(--text-primary);
  }
  
  #menu .dropdown-menu a:hover,
  #menu .dropdown-menu ul li a:hover {
    background: var(--primary-color);
    color: #ffffff;
  }
  
  #menu .see-all {
    margin-top: 0;
    border: none;
    border-radius: 0;
    color: var(--primary-color);
  }
}

/* Content */
#content {
  min-height: 600px;
  /* Only vertical padding — horizontal gutters come from Bootstrap .col-* on #content */
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}

/* Footer - Simple Style */
footer.catalog-footer,
footer {
  margin-top: var(--space-section);
  padding-top: var(--space-section);
  padding-bottom: 2rem;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-color);
  color: var(--footer-text);
}

footer .catalog-footer__inner {
  padding-left: 15px;
  padding-right: 15px;
}

footer hr,
footer .catalog-footer__rule {
  border-top: none;
  border-bottom: 1px solid var(--footer-rule);
  margin: 2rem 0 1.5rem;
}

footer a {
  color: var(--footer-text);
  transition: var(--transition);
  font-weight: 500;
}

footer a:hover {
  color: var(--footer-heading);
  transform: translateX(2px);
}

footer h5 {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--footer-heading);
  margin-bottom: 1.125rem;
  letter-spacing: -0.02em;
}

footer .catalog-footer__inner > p,
footer .catalog-footer__meta {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-light);
}

footer a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Alert - Facebook Style */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 400;
}

.alert-success {
  background-color: #e7f3ff;
  border: none;
  color: var(--text-primary);
}

.alert-success .alert-link {
  color: var(--primary-color);
  font-weight: 600;
}

/* Breadcrumb - Facebook Style */
.breadcrumb {
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.breadcrumb i {
  font-size: 14px;
}

.breadcrumb > li {
  text-shadow: none;
  padding: 0 1.25rem;
  position: relative;
  white-space: nowrap;
}

.breadcrumb > li + li:before {
  content: '›';
  padding: 0 0.75rem;
  color: var(--text-light);
  font-weight: 600;
}

.breadcrumb > li:after {
  display: none;
}

.breadcrumb > li > a {
  color: var(--text-secondary);
  font-weight: 500;
  transition: var(--transition);
}

.breadcrumb > li > a:hover {
  color: var(--primary-color);
}

.breadcrumb > li.active {
  color: var(--text-primary);
  font-weight: 600;
}

/* Pagination - Premium Style */
.pagination {
  margin: 3rem 0;
}

.pagination > li > a,
.pagination > li > span {
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  padding: 0.875rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: var(--radius-lg);
  transition: var(--transition);
  font-weight: 600;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--primary-color);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

/* Buttons - Ultra Premium Style */
.buttons {
  margin: 2rem 0;
}

.btn {
  padding: 0.5rem 1rem;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn:hover {
  opacity: 0.9;
}

.btn-xs {
  font-size: 13px;
  padding: 0.625rem 1.25rem;
}

.btn-sm {
  font-size: 14px;
  padding: 0.75rem 1.5rem;
}

.btn-lg {
  padding: 1.25rem 2.5rem;
  font-size: 18px;
}

.btn-group > .btn, 
.btn-group > .dropdown-menu, 
.btn-group > .popover {
  font-size: 16px;
}

.btn-default {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: none;
}

.btn-default:hover {
  background: #e4e6eb;
  color: var(--text-primary);
}

.btn-primary {
  color: #ffffff;
  background: var(--primary-color);
  border: none;
}

.btn-primary:hover, 
.btn-primary:active, 
.btn-primary.active {
  background: var(--primary-hover);
  color: #ffffff;
}

.btn-warning {
  color: #ffffff;
  background: #f59e0b;
  border-color: #f59e0b;
}

.btn-warning:hover, 
.btn-warning:active, 
.btn-warning.active {
  background: #d97706;
  border-color: #d97706;
}

.btn-danger {
  color: #ffffff;
  background: #ef4444;
  border-color: #ef4444;
}

.btn-danger:hover, 
.btn-danger:active, 
.btn-danger.active {
  background: #dc2626;
  border-color: #dc2626;
}

.btn-success {
  color: #ffffff;
  background: #10b981;
  border-color: #10b981;
}

.btn-success:hover, 
.btn-success:active, 
.btn-success.active {
  background: #059669;
  border-color: #059669;
}

.btn-info {
  color: #ffffff;
  background: #06b6d4;
  border-color: #06b6d4;
}

.btn-info:hover, 
.btn-info:active, 
.btn-info.active {
  background: #0891b2;
  border-color: #0891b2;
}

.btn-link {
  border: none;
  cursor: pointer;
  color: var(--primary-color);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.5rem 0;
}

.btn-link:hover {
  color: var(--primary-hover);
  transform: none;
  box-shadow: none;
  text-decoration: underline;
}

.btn-inverse {
  color: #ffffff;
  background: #1e293b;
  border-color: #1e293b;
}

.btn-inverse:hover, 
.btn-inverse:active, 
.btn-inverse.active {
  background: #0f172a;
  border-color: #0f172a;
}

/* List Group - Facebook Style with Better Separation */
.list-group a {
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: var(--transition);
  background: var(--bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  display: block;
}

.list-group .main-category {
  color: var(--text-primary);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.01em;
  transition: var(--transition);
}

.list-group a.active, 
.list-group a.active:hover, 
.list-group a:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  transform: translateX(4px);
}

#common-home {
  margin-top: 3rem;
}

/* Carousel */
.carousel-caption {
  color: #FFFFFF;
}

.carousel-control .icon-prev:before {
  content: '\f053';
  font-family: FontAwesome;
}

.carousel-control .icon-next:before {
  content: '\f054';
  font-family: FontAwesome;
}

/* Product List & Grid - Facebook Style Card Design */
.product-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-thumb {
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-thumb:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-color);
}

.product-thumb .image {
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb .image a {
  display: block;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.product-thumb .image a:hover {
  opacity: 0.95;
  transform: scale(1.08);
}

.product-thumb .image img {
  margin-left: auto;
  margin-right: auto;
  max-height: 320px;
  width: auto;
  object-fit: contain;
  display: block !important;
  border: 14px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.product-grid .product-thumb .image {
  float: none;
}

/* List view - horizontal layout */
.product-list .product-thumb {
  flex-direction: row; /* Horizontal layout for list view */
  min-height: 350px; /* Ensure minimum height for list items */
}

.product-list .product-thumb .image {
  width: 280px; /* Fixed width for image in list view */
  flex-shrink: 0;
  min-height: 350px; /* Match product-thumb min-height */
  float: none; /* Remove float, use flexbox */
}

/* Wrapper div in list view should take remaining space and be vertical */
.product-list .product-thumb > div {
  flex: 1;
  display: flex;
  flex-direction: column; /* Vertical layout for caption and buttons */
  position: relative;
}

/* Wrapper div in grid view should also take remaining space and be vertical - only for category.twig structure */
/* Only apply when caption is NOT a direct child of product-thumb (meaning it's wrapped in a div) */
#content .product-grid .product-thumb > div:not(.image):not(.caption):has(.caption),
#content .product-list .product-thumb > div:not(.image):not(.caption):has(.caption) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Ensure button-group stays at bottom in grid view - only for category.twig structure */
#content .product-grid .product-thumb > div:not(.image):not(.caption):has(.caption) .button-group {
  margin-top: auto;
}

.product-thumb h4 {
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-size: 1.7rem;
  min-height: 3.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center !important;
}

.product-thumb h4 a {
  color: var(--text-primary);
  transition: var(--transition);
}

.product-thumb h4 a:hover {
  color: var(--primary-color);
}

.product-thumb .caption {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* For category.twig structure where caption and button-group are wrapped in a div - only for grid/list view in category pages */
/* Only apply when caption is NOT a direct child of product-thumb (meaning it's wrapped in a div) */
#content .product-grid .product-thumb > div:not(.image):not(.caption):has(.caption),
#content .product-list .product-thumb > div:not(.image):not(.caption):has(.caption) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Ensure caption takes available space in grid view */
#content .product-grid .product-thumb > div:not(.image):not(.caption):has(.caption) .caption {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-thumb .caption p {
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3.5em;
  line-height: 1.5;
  word-break: break-word;
  text-align: center !important;
}

/* Don't center info-row paragraphs (author, year, pages, condition, price) */
.product-thumb .caption p.info-row {
  text-align: left;
}

.product-thumb .caption p strong {
  font-weight: 500;
}

/* Info row formatting - consistent label/value alignment */
.product-thumb .caption p.info-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  -webkit-line-clamp: none;
  -webkit-box-orient: horizontal;
  max-height: none;
  overflow: visible;
}

.product-thumb .caption p.info-row .label-text {
  display: inline-block;
  min-width: 100px;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1.5;
  color: var(--text-secondary);
}

.product-thumb .caption p.info-row .value-text {
  display: block;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-primary);
}

.product-thumb .caption p.info-row .value-text a {
  color: var(--primary-color);
  text-decoration: none;
}

.product-thumb .caption p.info-row .value-text a:hover {
  text-decoration: underline;
}

/* Condition formatting - proper label/value separation */
/* When condition-row is used with info-row, use info-row styles */
.product-thumb .caption p.info-row.condition-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.product-thumb .caption p.info-row.condition-row .label-text {
  min-width: 100px;
  font-weight: 500;
  flex-shrink: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.product-thumb .caption p.info-row.condition-row .value-text {
  display: block;
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 400;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5;
}

/* Condition info formatting - display partially with ellipsis */
.product-thumb .caption p.condition-row .condition-info {
  margin-top: 0.25rem;
  margin-left: 0;
  padding-left: 0;
  color: var(--text-light);
  font-size: 0.9em;
  line-height: 1.4;
  cursor: help;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-height: 1.4em;
  white-space: normal;
}

/* Ensure all product cards have equal height - works for both grid and list */
#content .row:has(.product-layout),
.product-grid .row,
#content .row:has(.product-grid) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
}

#content .row:has(.product-layout) > [class*="col-"],
.product-grid .row > [class*="col-"],
#content .row:has(.product-grid) > [class*="col-"] {
  display: flex !important;
  flex-direction: column;
}

#content .row:has(.product-layout) > [class*="col-"] > .product-layout,
.product-grid .row > [class*="col-"] > .product-layout,
#content .row:has(.product-grid) > [class*="col-"] > .product-layout {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Fallback for browsers that don't support :has() - apply to all rows with product-layout */
#content .row > [class*="col-"]:has(.product-layout),
#content .row > [class*="col-"]:has(.product-grid) {
  display: flex !important;
  flex-direction: column;
}

#content .row > [class*="col-"] > .product-layout {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Ensure product thumb fills the layout and has minimum height */
.product-layout .product-thumb {
  height: 100% !important;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Override for grid view - ensure equal heights */
.product-layout.product-grid .product-thumb {
  height: 100% !important;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Override for list view - different min-height and flex-direction */
.product-layout.product-list .product-thumb {
  flex-direction: row !important;
  min-height: 350px !important;
  height: auto !important; /* Allow height to adjust based on content */
}

.product-list .product-thumb .caption {
  margin-left: 0;
  margin-right: 0;
  padding-right: 1rem; /* Add some padding */
  flex: 1; /* Take remaining space */
  min-width: 0; /* Allow shrinking */
}

@media (max-width: 1200px) {
  .product-grid .product-thumb .caption {
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .product-list .product-thumb .caption {
    margin-left: 0;
    padding: 1.5rem;
  }
  
  .product-grid .product-thumb .caption {
    padding: 1.5rem;
  }
}

.product-thumb .rating {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.rating .fa-stack {
  font-size: 12px;
}

.rating .fa-star-o {
  color: var(--text-light);
  font-size: 18px;
}

.rating .fa-star {
  color: #fbbf24;
  font-size: 18px;
}

.rating .fa-star + .fa-star-o {
  color: #f59e0b;
}

h2.price {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
}

.product-thumb .price {
  color: var(--text-primary);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 1rem 0;
}

/* Smaller font size for price in related products (info-row structure) */
.product-thumb .info-row.price {
  font-size: 1.4rem;
}

.product-thumb .info-row.price .value-text {
  font-size: 1.4rem;
  white-space: nowrap;
}

.product-thumb .price-new {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.75rem;
}

.product-thumb .price-old {
  color: var(--text-light);
  text-decoration: line-through;
  margin-left: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
}

.product-thumb .price-tax {
  color: var(--text-light);
  font-size: 14px;
  display: block;
  margin-top: 0.5rem;
}

.product-thumb .button-group {
  border-top: 2px solid var(--border-color);
  background: var(--bg-secondary);
  overflow: hidden;
  display: flex;
  margin-top: auto;
}

.product-list .product-thumb .button-group {
  width: 100%; /* Full width for horizontal button group */
  border-left: none; /* Remove left border */
  border-top: 2px solid var(--border-color); /* Add top border */
  border-bottom: none;
  border-right: none;
  flex-direction: row; /* Horizontal buttons in list view */
  flex-shrink: 0;
  margin-top: auto; /* Push to bottom */
  align-self: stretch; /* Stretch to full width */
  height: auto; /* Auto height */
}

@media (max-width: 768px) {
  .product-list .product-thumb .button-group {
    border-left: none;
    border-top: 2px solid var(--border-color);
    flex-direction: row;
    width: 100%;
  }
}

.product-thumb .button-group button {
  width: 60%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  background-color: transparent;
  color: var(--text-primary);
  min-height: 52px;
  line-height: 1.2;
  padding: 0.65rem 0.4rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  transition: var(--transition);
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.product-thumb .button-group button:hover {
  color: #ffffff;
  background-color: var(--primary-color);
}

.product-thumb .button-group button i,
.product-thumb .button-group button span {
  position: relative;
  z-index: 1;
}

.product-thumb .button-group button i {
  font-size: 1.2rem;
}

.product-thumb .button-group button + button {
  width: 20%;
  border-left: 2px solid var(--border-color);
}

.product-list .product-thumb .button-group button {
  width: 60% !important; /* Main button width */
  border-left: none !important; /* Remove left border for main button */
  border-bottom: none !important; /* Remove bottom border */
  border-top: none;
  flex: none; /* Do not grow/shrink */
  min-height: 60px;
}

.product-list .product-thumb .button-group button + button {
  width: 20% !important; /* Secondary buttons width */
  border-left: 2px solid var(--border-color) !important; /* Add left border between buttons */
  border-bottom: none !important; /* Remove bottom border */
}

@media (max-width: 1200px) {
  .product-thumb .button-group button, 
  .product-thumb .button-group button + button {
    width: 33.33%;
  }
}

@media (max-width: 767px) {
  .product-thumb .button-group button,
  .product-thumb .button-group button + button {
    width: 33.33%;
    min-height: 56px;
    padding: 0.75rem 0.35rem;
  }

  .product-thumb .button-group button i {
    font-size: 1.45rem;
  }
}

.thumbnails {
  overflow: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important;
}

.thumbnails > li {
  display: block !important;
}

.thumbnails img {
  display: block !important;
  width: 100%;
}

.image-additional {
  display: block !important;
  max-width: 120px;
}

.image-additional a {
  display: block !important;
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.image-additional a:hover {
  border-color: var(--primary-color);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

.image-additional img {
  display: block !important;
  width: 100%;
}

/* Only clear for product listings, not product detail page */
.product-grid .thumbnails,
.product-list .thumbnails {
  clear: both;
}

.thumbnails > li {
  margin-left: 1.5rem;
}

.thumbnails {
  margin-left: -1.5rem;
}

.thumbnails > img {
  width: 100%;
}

.image-additional a {
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  display: block;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.image-additional a:hover {
  border-color: var(--primary-color);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

.image-additional {
  max-width: 120px;
}

.thumbnails .image-additional {
  float: left;
  margin-left: 1.5rem;
}

@media (min-width: 1200px) {
  #content .col-lg-2:nth-child(6n+1),
  #content .col-lg-3:nth-child(4n+1),
  #content .col-lg-4:nth-child(3n+1),
  #content .col-lg-6:nth-child(2n+1) {
    clear: left;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #content .col-md-2:nth-child(6n+1),
  #content .col-md-3:nth-child(4n+1),
  #content .col-md-4:nth-child(3n+1),
  #content .col-md-6:nth-child(2n+1) {
    clear: left;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #content .col-sm-2:nth-child(6n+1),
  #content .col-sm-3:nth-child(4n+1),
  #content .col-sm-4:nth-child(3n+1),
  #content .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}

/* Fixed Column Layouts */
@media (min-width: 768px) {
  #column-left .product-layout .col-md-3 {
    width: 100%;
  }

  #column-left + #content .product-layout .col-md-3 {
    width: 50%;
  }

  #column-left + #content + #column-right .product-layout .col-md-3 {
    width: 100%;
  }

  #content + #column-right .product-layout .col-md-3 {
    width: 100%;
  }
}

#column-left .product-layout, 
#column-right .product-layout {
  width: 100%;
}

/* Fixed Mobile Cart Quantity Input */
.input-group .form-control[name^=quantity] {
  min-width: 70px;
}

/* Compare link: do not use negative offset — it overlaps sort/limit controls */
.compare-label {
  margin-bottom: 0;
}

.compare-label-href {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

/* Cookie Banner - Premium Style */
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--bg-dark);
  color: #fff;
  text-align: center;
  padding: 1.5rem 0;
  box-shadow: var(--shadow-md);
  z-index: 9999;
  border-top: 2px solid var(--primary-color);
}

.cookie_button {
  background: var(--primary-color);
  border-radius: var(--radius-xl);
  border: none;
  color: white;
  padding: 1rem 2.5rem;
  font-weight: 700;
  margin-left: 1.5rem;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.cookie_button:hover {
  background: var(--primary-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* Popup */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 220px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  line-height: 1.6;
  margin-left: -110px;
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.98) transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Container Improvements */
.container {
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

/* Product page layout - ensure proper side-by-side layout */
#product-product #content > .row {
  margin-left: -15px;
  margin-right: -15px;
}

#product-product #content > .row::before,
#product-product #content > .row::after {
  content: "";
  display: table;
}

#product-product #content > .row::after {
  clear: both;
}

/* Force columns to float side by side */
#product-product #content > .row > .col-sm-6,
#product-product #content > .row > .col-sm-8,
#product-product #content > .row > .col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left !important;
  width: auto !important;
}

/* Specific widths for product page columns */
#product-product #content > .row > .col-sm-6 {
  width: 50% !important;
}

#product-product #content > .row > .col-sm-8 {
  width: 66.66666667% !important;
}

#product-product #content > .row > .col-sm-4 {
  width: 33.33333333% !important;
}

/* Ensure thumbnails don't break layout */
#product-product .thumbnails {
  clear: none !important;
  float: none !important;
  margin-left: 0 !important;
}

/* Responsive: stack on small screens */
@media (max-width: 767px) {
  #product-product #content > .row > .col-sm-6,
  #product-product #content > .row > .col-sm-8,
  #product-product #content > .row > .col-sm-4 {
    width: 100% !important;
    float: none !important;
  }
}

/* Ensure consistent font for all list items in product page */
#product-product ul.list-unstyled {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

#product-product ul.list-unstyled li {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* Info rows: equal-width columns so centered values align regardless of label length */
#product-product ul.list-unstyled li.info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.5rem;
}

#product-product ul.list-unstyled li.info-row .label-text {
  min-width: 0;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

#product-product ul.list-unstyled li.info-row .value-text {
  min-width: 0;
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.5;
  text-align: center !important;
}

#product-product ul.list-unstyled li.info-row .value-text a {
  color: var(--primary-color);
  text-decoration: none;
}

#product-product ul.list-unstyled li.info-row .value-text a:hover {
  text-decoration: underline;
}

/* Condition row specific styling */
#product-product ul.list-unstyled li.info-row.condition-row .value-text {
  display: block;
  text-align: center !important;
}

/* Style for labels in product page list (fallback for non-info-row items) */
#product-product ul.list-unstyled li > *:first-child {
  flex-shrink: 0;
  min-width: 120px;
  font-weight: 500;
}

/* Style for values in product page list (fallback for non-info-row items) */
#product-product ul.list-unstyled li > *:not(:first-child):not(.value-text) {
  text-align: right;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Condition info in product page list - match centered value column */
#product-product ul.list-unstyled li .condition-info {
  margin-top: 0.25rem;
  margin-left: 0;
  padding-left: 0;
  color: var(--text-light);
  font-size: 0.9em;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  width: 100%;
  display: block;
}

/* Header - Modern Clean Design */
header {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 100;
  transition: var(--transition);
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection Color */
::selection {
  background-color: var(--primary-color);
  color: white;
}

::-moz-selection {
  background-color: var(--primary-color);
  color: white;
}

/* Modern Tables */
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.table > thead > tr > th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bg-secondary);
}

.table-bordered {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid var(--border-color);
}

/* Modern Form Groups */
.form-group {
  margin-bottom: 2rem;
}

.form-control {
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), var(--shadow-md);
  transform: translateY(-2px);
}

/* Image Thumbnails */
.img-thumbnail {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  background-color: var(--bg-primary);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.img-thumbnail:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
  transform: scale(1.05);
}

/* Responsive Improvements */
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.875rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .btn-lg {
    padding: 1rem 2rem;
    font-size: 16px;
  }
  
  .product-thumb {
    margin-bottom: 2rem;
  }
}

/* Loading States - Only show when button has loading class */
.btn[data-loading-text].loading:after,
.btn[data-loading-text].btn-loading:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin-left: -9px;
  margin-top: -9px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.6s linear infinite;
  z-index: 1;
}

/* Hide spinner by default */
.btn[data-loading-text]:after {
  display: none;
}

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

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-hover);
}

/* Hide category module if displayed in content_top (duplicate categories) */
#content > .list-group:first-child,
.content-top .list-group:first-child {
  display: none !important;
}

/* Ensure category module only shows in column_left */
#column-left .list-group {
  display: block !important;
}

/* Category menu improvements */
.category-menu .category-children {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.category-menu .list-group-item.main-category {
  cursor: pointer;
  position: relative;
}

/* Show arrow only for categories that have children */
.category-menu .list-group-item.main-category.has-children.active::after {
  content: '▼';
  float: right;
  font-size: 10px;
  margin-top: 4px;
}

.category-menu .list-group-item.main-category.has-children:not(.active)::after {
  content: '▶';
  float: right;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.5;
}

/* Global catalog UI (default theme storefront; stylesheet not loaded in admin) */
.catalog-home {
  padding-bottom: var(--space-section);
}

.catalog-home__row {
  align-items: flex-start;
}

.catalog-home__content {
  padding-top: 0.25rem;
}

.catalog-module {
  margin-bottom: var(--space-section);
}

.catalog-module--banner + .catalog-module {
  margin-top: 0;
  padding-top: var(--space-module-tight);
}

.catalog-module:last-child {
  margin-bottom: 0;
}

.catalog-module__title {
  margin-top: 0;
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.catalog-module__title--h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.catalog-home__content > .catalog-module:first-of-type {
  margin-top: 0;
}

/* Home: show Latest products without visible section title (a11y: keep heading for screen readers) */
#common-home .catalog-module--latest .catalog-module__title--latest {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.catalog-module--banner .swiper-viewport {
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

#product-book .book-index__cell a {
  display: block;
  padding: 0.35rem 0;
  border-radius: var(--radius-sm);
}

#product-book .book-index__cell a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.product-thumb.product-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.product-thumb .button-group button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .product-list .product-thumb {
    flex-direction: column;
    min-height: 0;
  }

  .product-list .product-thumb .image {
    width: 100%;
    min-height: 220px;
  }
}

/* Catalog UI — obvious visual refresh (only storefront with body.catalog-ui) */
body.catalog-ui #top {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: linear-gradient(180deg, #dfeaf6 0%, #eef4fb 55%, #f5f9fd 100%);
  border-bottom-color: rgba(91, 155, 213, 0.4);
  box-shadow: 0 2px 12px rgba(91, 155, 213, 0.12);
}

body.catalog-ui > header {
  background: var(--bg-primary);
  border-bottom: 2px solid var(--primary-color);
  box-shadow: 0 8px 28px rgba(91, 155, 213, 0.14);
}

body.catalog-ui .catalog-page #content,
body.catalog-ui #common-home .catalog-home__content {
  background: var(--bg-primary);
  border-radius: var(--catalog-content-radius);
  box-shadow: var(--catalog-content-shadow);
  border: 1px solid var(--catalog-content-border);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  padding-right: clamp(1rem, 2.5vw, 1.75rem);
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

body.catalog-ui .catalog-sidebar__nav.catalog-sidebar__list {
  border-left: 4px solid var(--primary-color);
  box-shadow: var(--shadow-md);
  background: var(--bg-primary);
}

body.catalog-ui .catalog-sidebar .catalog-sidebar__link.list-group-item:hover,
body.catalog-ui .catalog-sidebar .catalog-sidebar__link.list-group-item:focus {
  background: rgba(91, 155, 213, 0.1);
  color: var(--primary-hover);
}

body.catalog-ui .product-thumb.product-card {
  box-shadow: 0 2px 10px rgba(28, 30, 33, 0.07);
  border-color: rgba(0, 0, 0, 0.08);
}

body.catalog-ui .product-thumb.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(91, 155, 213, 0.2);
  border-color: rgba(91, 155, 213, 0.45);
}

body.catalog-ui .catalog-search-form.well {
  box-shadow: var(--shadow-md);
  border-color: rgba(91, 155, 213, 0.25);
  background: linear-gradient(180deg, #fafcfe 0%, #ffffff 100%);
}

/* Catalog page shell (vitrina) */
body.catalog-ui .catalog-breadcrumb {
  margin-bottom: 0;
}

body.catalog-ui .catalog-breadcrumb .breadcrumb {
  margin-bottom: 1.25rem;
  padding: 0.65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  background: linear-gradient(135deg, #e8f1fa 0%, #ffffff 70%);
  border: 1px solid rgba(91, 155, 213, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.catalog-ui .catalog-page .breadcrumb {
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
}

body.catalog-ui .catalog-page__header {
  margin-bottom: 1.25rem;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid var(--border-color);
}

body.catalog-ui .catalog-page__header h1,
body.catalog-ui .catalog-page__header h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.35rem 0 0.35rem 0.75rem;
  border-left: 4px solid var(--primary-color);
  line-height: 1.35;
}

/* Book / author / serie info listing: one-line heading, no side accent (overrides default catalog-page__header h1 bar) */
body.catalog-ui #product-book.book-info-page .book-info__hero.catalog-page__header,
body.catalog-ui #product-author.author-info-page .book-info__hero.catalog-page__header,
body.catalog-ui #product-serie.serie-info-page .book-info__hero.catalog-page__header,
body.catalog-ui #product-bookstore.bookstore-info-page .book-info__hero.catalog-page__header {
  margin-bottom: 1.25rem;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid var(--border-color);
}

body.catalog-ui #product-book.book-info-page .book-info__title,
body.catalog-ui #product-author.author-info-page .book-info__title,
body.catalog-ui #product-serie.serie-info-page .book-info__title,
body.catalog-ui #product-bookstore.bookstore-info-page .book-info__title {
  margin: 0;
  padding: 0;
  border-left: none;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
}

body.catalog-ui #product-book.book-info-page .book-info__title-sep {
  color: #b0b0b0;
  font-weight: 400;
  margin: 0 0.15em;
}

body.catalog-ui #product-book.book-info-page .book-info__author-link {
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}

body.catalog-ui #product-book.book-info-page .book-info__author-link:hover,
body.catalog-ui #product-book.book-info-page .book-info__author-link:focus {
  text-decoration: underline;
}

body.catalog-ui .catalog-page__intro {
  margin-bottom: 1.5rem;
}

body.catalog-ui .catalog-page__intro .row {
  margin-bottom: 0;
}

body.catalog-ui .catalog-page__intro hr {
  margin-top: 1.25rem;
  margin-bottom: 0;
  border-color: var(--border-color);
}

body.catalog-ui .catalog-listing-toolbar {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-color);
  /* Clear floats from Bootstrap 3 columns so rows do not collapse/overlap */
}

body.catalog-ui .catalog-listing-toolbar::after {
  content: '';
  display: table;
  clear: both;
}

body.catalog-ui .catalog-listing-toolbar .form-group {
  margin-bottom: 0.5rem;
}

/* Bootstrap 3 input-group uses display:table — do not use flex here (breaks layout) */
body.catalog-ui .catalog-listing-toolbar .input-group {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
}

body.catalog-ui .catalog-listing-toolbar .input-group .input-group-addon,
body.catalog-ui .catalog-listing-toolbar .input-group .form-control {
  float: none !important;
}

body.catalog-ui .catalog-listing-toolbar .input-group .input-group-addon {
  display: table-cell;
  width: 1%;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.5rem 0.65rem;
  text-align: center;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

body.catalog-ui .catalog-listing-toolbar .input-group .form-control {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  font-size: 13px !important;
  font-weight: 500;
  padding: 0.5rem 0.65rem !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 36px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

body.catalog-ui .catalog-listing-toolbar [class*='col-'] {
  padding-left: 10px;
  padding-right: 10px;
}

@media (min-width: 768px) {
  body.catalog-ui .catalog-listing-toolbar .form-group {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  body.catalog-ui .catalog-listing-toolbar .compare-label {
    margin-bottom: 0.5rem;
  }
}

body.catalog-ui .catalog-listing-toolbar--compare {
  margin-top: -0.35rem;
  margin-bottom: 1.1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.35rem;
  border-top: 1px dashed rgba(91, 155, 213, 0.35);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

body.catalog-ui .catalog-listing-toolbar--controls {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 0;
  border-bottom: none;
}

body.catalog-ui .catalog-listing-toolbar--controls + .catalog-listing-toolbar--compare {
  margin-top: 0;
}

body.catalog-ui .catalog-product-grid {
  margin-bottom: 0.5rem;
}

body.catalog-ui .catalog-pagination-row {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.0625rem;
}

body.catalog-ui .catalog-pagination-row > [class*='col-'] {
  float: none;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

body.catalog-ui .catalog-pagination-row > .text-left {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  padding-bottom: 0.15rem;
}

body.catalog-ui .catalog-pagination-row .pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}

body.catalog-ui .catalog-pagination-row .pagination > li {
  display: block;
  float: none;
}

body.catalog-ui .catalog-pagination-row .pagination > li > a,
body.catalog-ui .catalog-pagination-row .pagination > li > span {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  border-width: 1px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 767px) {
  body.catalog-ui .catalog-pagination-row > .text-left {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

body.catalog-ui .catalog-results-count {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

body.catalog-ui .catalog-pdp__body {
  margin-top: 0.25rem;
}

/* More specific than #content h3 so PDP section headings stay 1.5rem */
body.catalog-ui #content .catalog-pdp__body h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

body.catalog-ui #content .catalog-pdp__body h3 a {
  font-size: inherit;
  font-weight: 600;
}

body.catalog-ui .catalog-pdp__body > .row:first-of-type {
  margin-bottom: 0;
}

body.catalog-ui .catalog-pdp.catalog-page .catalog-breadcrumb .breadcrumb {
  margin-bottom: 1rem;
}

body.catalog-ui #product-search h2.catalog-page__subheading {
  font-size: 1.375rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

body.catalog-ui .catalog-empty--search {
  margin-top: 1rem;
}

body.catalog-ui .catalog-empty--search .catalog-empty__text:last-child {
  margin-bottom: 0;
}

.catalog-sidebar {
  margin-bottom: 1.5rem;
}

.catalog-sidebar__nav.catalog-sidebar__list {
  margin-bottom: 1.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.catalog-sidebar .catalog-sidebar__link.list-group-item {
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition);
}

.catalog-sidebar .catalog-sidebar__link.list-group-item:last-child {
  border-bottom: none;
}

.catalog-sidebar .catalog-sidebar__link.list-group-item:hover,
.catalog-sidebar .catalog-sidebar__link.list-group-item:focus {
  background: var(--bg-secondary);
  color: var(--primary-color);
}

.catalog-sidebar .catalog-sidebar__link.list-group-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.catalog-sidebar__modules .list-group {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.catalog-sidebar__modules > * {
  margin-bottom: 1.25rem;
}

.catalog-sidebar__modules > *:last-child {
  margin-bottom: 0;
}

.catalog-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg-primary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
}

.catalog-empty__text {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.catalog-empty .buttons {
  margin: 0;
  justify-content: center;
}

.catalog-search-form.well {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

body.catalog-ui .search-filter-dropdown .dropdown-toggle {
  position: relative;
  padding-right: 28px;
}

body.catalog-ui .search-filter-dropdown .dropdown-toggle .caret {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -2px;
}

body.catalog-ui .search-filter-dropdown .dropdown-menu .checkbox {
  cursor: pointer;
}

#product-product .catalog-pdp__gallery .thumbnails {
  margin-bottom: 1.25rem;
}

#product-product .catalog-pdp__title {
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  margin: 1rem 0 1.25rem;
  line-height: 1.25;
}

#product-product .catalog-pdp__summary .nav-tabs {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

#product-product .catalog-pdp__summary .nav-tabs > li > a {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: 600;
  color: var(--text-secondary);
}

#product-product .catalog-pdp__summary .nav-tabs > li.active > a,
#product-product .catalog-pdp__summary .nav-tabs > li.active > a:hover {
  color: var(--text-primary);
  border-color: var(--border-color);
  border-bottom-color: transparent;
}

#product-product .catalog-pdp__summary .tab-content {
  padding-top: 0.5rem;
}

#product-product .catalog-pdp__summary ul.catalog-pdp__price {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  margin-bottom: 0;
  display: block;
  width: 100%;
  text-align: center;
}

#product-product .catalog-pdp__summary ul.catalog-pdp__price li {
  display: block;
  justify-content: center;
  text-align: center;
}

#product-product .catalog-pdp__summary ul.catalog-pdp__price li > *:first-child {
  min-width: 0;
}

#product-product .catalog-pdp__summary ul.catalog-pdp__price li h2 {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 767px) {
  body.catalog-ui .catalog-page #content,
  body.catalog-ui #common-home .catalog-home__content {
    padding: 1.25rem 1rem 2rem;
    border-radius: var(--radius-md);
  }

  body.catalog-ui > header {
    box-shadow: 0 4px 16px rgba(91, 155, 213, 0.12);
  }

  body.catalog-ui .product-thumb.product-card:hover {
    transform: none;
  }
}