/**
 * Custom Design Enhancement Layer — Classic Theme
 * Builds on top of theme.css without modifying core files.
 * Primary: #24b9d7  |  Font: Manrope  |  Text: #232323
 */

/* ── 1. Global design tokens ─────────────────────────────────────────────── */
:root {
  --ps-primary:        #24b9d7;
  --ps-primary-dark:   #1a9db8;
  --ps-primary-light:  rgba(36,185,215,.09);
  --ps-text:           #232323;
  --ps-text-muted:     #7a7a7a;
  --ps-border:         #e2e8f0;
  --ps-bg:             #f6f6f6;
  --ps-white:          #ffffff;
  --ps-radius:         6px;
  --ps-radius-sm:      4px;
  --ps-shadow:         0 2px 12px rgba(0,0,0,.07);
  --ps-shadow-sm:      0 1px 4px rgba(0,0,0,.05);
  --ps-shadow-hover:   0 4px 18px rgba(0,0,0,.11);
  --ps-transition:     0.18s ease;
}

/* ── 2. Base typography ──────────────────────────────────────────────────── */
body {
  color:       var(--ps-text);
  font-family: "Manrope", sans-serif;
  background:  var(--ps-bg);
}

a {
  color:      var(--ps-primary);
  transition: color var(--ps-transition);
}

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

/* ── 3. Header ───────────────────────────────────────────────────────────── */
#header {
  background:  var(--ps-white);
  box-shadow:  0 2px 8px rgba(0,0,0,.06);
  position:    sticky;
  top:         0;
  z-index:     1000;
}

#header .header-top {
  padding-top:    8px;
  padding-bottom: 8px;
}

/* Logo */
#header .logo {
  display: block;
  line-height: 1;
}

/* Nav utility bar (language, currency, account, cart) */
#header .header-nav {
  border-bottom: 1px solid var(--ps-border);
  font-size:     13px;
  padding:       5px 0;
}

#header .header-nav a,
#header .header-nav span {
  color: var(--ps-text-muted);
}

#header .header-nav a:hover {
  color: var(--ps-primary);
}

/* User info & cart icon links */
.user-info a,
#header a._blank {
  font-weight: 600;
  color:       var(--ps-text);
}

.user-info a:hover,
#header a._blank:hover {
  color: var(--ps-primary);
}

/* Cart block */
.cart-preview .header {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-weight: 700;
  color:       var(--ps-text);
}

.cart-preview .cart-products-count {
  background:    var(--ps-primary);
  color:         var(--ps-white);
  border-radius: 50%;
  width:         20px;
  height:        20px;
  line-height:   20px;
  text-align:    center;
  font-size:     11px;
  font-weight:   700;
  display:       inline-block;
}

/* ── 4. Main nav / menu ──────────────────────────────────────────────────── */
#header .top-menu > li > a {
  font-weight:    700;
  font-size:      14px;
  color:          var(--ps-text);
  padding:        12px 16px;
  transition:     color var(--ps-transition);
  position:       relative;
}

#header .top-menu > li > a::after {
  content:    "";
  display:    block;
  position:   absolute;
  bottom:     0;
  left:       50%;
  right:      50%;
  height:     2px;
  background: var(--ps-primary);
  transition: left var(--ps-transition), right var(--ps-transition);
}

#header .top-menu > li > a:hover,
#header .top-menu > li.current > a {
  color: var(--ps-primary);
}

#header .top-menu > li > a:hover::after,
#header .top-menu > li.current > a::after {
  left:  16px;
  right: 16px;
}

/* Dropdown sub-menu */
.popover,
#header .top-menu .sub-menu {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow:    var(--ps-shadow);
}

#header .top-menu .sub-menu a {
  font-size:  13.5px;
  color:      var(--ps-text);
  padding:    7px 16px;
  transition: color var(--ps-transition), padding-left var(--ps-transition);
}

#header .top-menu .sub-menu a:hover {
  color:        var(--ps-primary);
  padding-left: 22px;
  background:   var(--ps-primary-light);
}

/* ── 5. Search bar ───────────────────────────────────────────────────────── */
#search_widget form {
  position: relative;
}

#search_widget input[type="text"] {
  border:        1.5px solid var(--ps-border);
  border-radius: 20px;
  padding:       8px 42px 8px 16px;
  font-size:     13.5px;
  height:        38px;
  transition:    border-color var(--ps-transition), box-shadow var(--ps-transition);
  background:    var(--ps-bg);
  color:         var(--ps-text);
  width:         100%;
}

#search_widget input[type="text"]:focus {
  border-color: var(--ps-primary);
  box-shadow:   0 0 0 3px rgba(36,185,215,.14);
  outline:      none;
  background:   var(--ps-white);
}

#search_widget button[type="submit"] {
  position:   absolute;
  right:      6px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--ps-primary);
  padding:    4px 8px;
  cursor:     pointer;
}

/* ── 6. Breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb {
  background:    transparent;
  border:        none;
  padding:       10px 0;
  margin-bottom: 16px;
  font-size:     13px;
}

.breadcrumb li,
.breadcrumb li a {
  color: var(--ps-text-muted);
}

.breadcrumb li.active,
.breadcrumb li:last-child {
  color: var(--ps-text);
  font-weight: 600;
}

.breadcrumb-separator {
  color:   var(--ps-border);
  margin:  0 4px;
}

/* ── 7. Product cards (catalog / home) ───────────────────────────────────── */
.product-miniature .card,
.product-miniature article {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow:    var(--ps-shadow-sm);
  transition:    box-shadow var(--ps-transition), transform var(--ps-transition);
  overflow:      hidden;
  background:    var(--ps-white);
}

.product-miniature .card:hover,
.product-miniature article:hover {
  box-shadow: var(--ps-shadow-hover);
  transform:  translateY(-3px);
}

/* Product image wrapper */
.product-miniature .product-thumbnail {
  overflow:        hidden;
  background:      #fafafa;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.product-miniature .product-thumbnail img {
  transition: transform 0.3s ease;
}

.product-miniature:hover .product-thumbnail img {
  transform: scale(1.04);
}

/* Product title */
.product-miniature .product-title a {
  font-weight:  700;
  font-size:    14px;
  color:        var(--ps-text);
  line-height:  1.35;
}

.product-miniature .product-title a:hover {
  color: var(--ps-primary);
}

/* Product price */
.product-miniature .price {
  font-size:   16px;
  font-weight: 800;
  color:       var(--ps-primary);
}

.product-miniature .regular-price {
  font-size:       13px;
  color:           var(--ps-text-muted);
  text-decoration: line-through;
}

/* Quick add / Add to cart button on card */
.product-miniature .btn-primary,
.product-miniature .add-to-cart {
  border-radius: var(--ps-radius-sm);
  font-weight:   700;
  font-size:     13px;
  padding:       8px 16px;
  transition:    background var(--ps-transition), box-shadow var(--ps-transition);
}

.product-miniature .btn-primary:hover,
.product-miniature .add-to-cart:hover {
  box-shadow: 0 3px 10px rgba(36,185,215,.35);
}

/* Discount badge */
.product-miniature .discount-percentage,
.product-miniature .discount-amount,
.product-flag.discount {
  background:    var(--ps-primary);
  color:         var(--ps-white);
  border-radius: var(--ps-radius-sm);
  font-size:     11px;
  font-weight:   700;
  padding:       2px 7px;
}

/* "New" / "Pack" flags */
.product-flag.new,
.product-flag.on-sale {
  border-radius: var(--ps-radius-sm);
  font-size:     11px;
  font-weight:   700;
}

/* ── 8. Buttons — global ─────────────────────────────────────────────────── */
.btn-primary {
  background:    var(--ps-primary);
  border-color:  var(--ps-primary);
  border-radius: var(--ps-radius-sm);
  font-weight:   700;
  letter-spacing: 0.02em;
  transition:    background var(--ps-transition), border-color var(--ps-transition), box-shadow var(--ps-transition);
}

.btn-primary:hover,
.btn-primary:focus {
  background:   var(--ps-primary-dark);
  border-color: var(--ps-primary-dark);
  box-shadow:   0 3px 10px rgba(36,185,215,.35);
}

.btn-secondary {
  border-radius: var(--ps-radius-sm);
  font-weight:   600;
  transition:    background var(--ps-transition), border-color var(--ps-transition);
}

.btn-outline-secondary {
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  font-weight:   600;
  color:         var(--ps-text);
  transition:    border-color var(--ps-transition), color var(--ps-transition);
}

.btn-outline-secondary:hover {
  border-color: var(--ps-primary);
  color:        var(--ps-primary);
  background:   var(--ps-primary-light);
}

/* ── 9. Product page ─────────────────────────────────────────────────────── */
/* Main image */
.product-cover {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  overflow:      hidden;
  background:    var(--ps-white);
  box-shadow:    var(--ps-shadow-sm);
}

/* Thumbnails */
.product-images > li.thumb-container .thumb {
  border:        1.5px solid transparent;
  border-radius: var(--ps-radius-sm);
  transition:    border-color var(--ps-transition);
  cursor:        pointer;
}

.product-images > li.thumb-container .thumb:hover,
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container.selected .thumb {
  border-color: var(--ps-primary);
}

/* Product name / title */
.page-product h1.h1 {
  font-size:   24px;
  font-weight: 800;
  color:       var(--ps-text);
  line-height: 1.25;
}

/* Prices */
.product-price .current-price-value,
.product-price .price {
  font-size:   28px;
  font-weight: 800;
  color:       var(--ps-primary);
}

.product-price .regular-price {
  font-size:       16px;
  color:           var(--ps-text-muted);
  text-decoration: line-through;
}

.product-price .discount {
  background:    var(--ps-primary);
  color:         var(--ps-white);
  border-radius: var(--ps-radius-sm);
  font-size:     12px;
  font-weight:   700;
  padding:       2px 8px;
  vertical-align: middle;
}

/* Short description */
.product-description-short {
  font-size:   14.5px;
  color:       var(--ps-text-muted);
  line-height: 1.6;
}

/* Variant selectors */
.product-variants .product-variants-item select.form-control {
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  height:        40px;
  padding:       0 12px;
  font-size:     13.5px;
  transition:    border-color var(--ps-transition), box-shadow var(--ps-transition);
}

.product-variants .product-variants-item select.form-control:focus {
  border-color: var(--ps-primary);
  box-shadow:   0 0 0 3px rgba(36,185,215,.14);
  outline:      none;
}

/* Color swatches */
.input-color + span.color {
  border-radius: 50%;
  border:        2px solid transparent;
  transition:    border-color var(--ps-transition), box-shadow var(--ps-transition);
}

.input-color:checked + span.color,
.input-color + span.color:hover {
  border-color: var(--ps-primary);
  box-shadow:   0 0 0 2px rgba(36,185,215,.30);
}

/* Add to cart button */
.product-add-to-cart .btn-primary {
  min-width:   200px;
  padding:     13px 28px;
  font-size:   15px;
  font-weight: 700;
  border-radius: var(--ps-radius);
  box-shadow:  0 3px 12px rgba(36,185,215,.28);
}

.product-add-to-cart .btn-primary:hover {
  box-shadow: 0 5px 18px rgba(36,185,215,.42);
  transform:  translateY(-1px);
}

/* Quantity input */
.product-quantity #quantity_wanted {
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm) 0 0 var(--ps-radius-sm);
  height:        42px;
  font-size:     14px;
  font-weight:   600;
  text-align:    center;
}

.product-quantity .bootstrap-touchspin .input-group-btn-vertical .btn {
  border:        1.5px solid var(--ps-border);
  background:    var(--ps-bg);
  transition:    background var(--ps-transition);
}

.product-quantity .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
  background: var(--ps-border);
}

/* ── 10. Product tabs (description, specs, reviews) ──────────────────────── */
.tabs .nav-tabs {
  border-bottom: 2px solid var(--ps-border);
  margin-bottom: 20px;
}

.tabs .nav-tabs .nav-link {
  font-weight:   700;
  font-size:     14px;
  color:         var(--ps-text-muted);
  border:        none;
  padding:       10px 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:    color var(--ps-transition), border-color var(--ps-transition);
  border-radius: 0;
}

.tabs .nav-tabs .nav-link:hover {
  color:        var(--ps-text);
  border-color: transparent;
}

.tabs .nav-tabs .nav-link.active {
  color:        var(--ps-primary);
  border-bottom: 2px solid var(--ps-primary);
  background:   transparent;
}

/* ── 11. Category / listing page sidebar ─────────────────────────────────── */
#left-column .block-categories,
#left-column .facet,
.block-categories {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  margin-bottom: 16px;
  background:    var(--ps-white);
  box-shadow:    var(--ps-shadow-sm);
  overflow:      hidden;
}

#left-column .block-categories .title,
#left-column .facet .facet-title,
#left-column .facets-title {
  font-size:     13.5px;
  font-weight:   700;
  color:         var(--ps-text);
  padding:       12px 16px;
  border-bottom: 1px solid var(--ps-border);
  margin:        0;
  background:    var(--ps-white);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

#left-column .block-categories .category-sub-menu,
#left-column .facet .facet-list {
  padding: 10px 16px 12px;
}

#left-column .block-categories .category-sub-menu li a {
  font-size:  13.5px;
  color:      var(--ps-text);
  padding:    5px 0;
  display:    block;
  transition: color var(--ps-transition), padding-left var(--ps-transition);
}

#left-column .block-categories .category-sub-menu li a:hover {
  color:        var(--ps-primary);
  padding-left: 6px;
}

/* Price range slider */
#left-column .facet .ui-slider-range {
  background: var(--ps-primary);
}

#left-column .facet .ui-slider-handle {
  border-color: var(--ps-primary);
}

/* ── 12. Listing toolbar (sort / per page / grid-list toggle) ─────────────── */
.products-sort-order .select-title,
.products-per-page .select-title,
#js-product-list-header select {
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  padding:       7px 12px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--ps-text);
  transition:    border-color var(--ps-transition);
}

.products-sort-order .select-title:hover,
.products-per-page .select-title:hover {
  border-color: var(--ps-primary);
}

.pagination .page-list {
  display:    flex;
  gap:        4px;
  list-style: none;
  padding:    0;
  flex-wrap:  wrap;
}

.pagination .page-item a,
.pagination .page-item span {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         34px;
  height:        34px;
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  font-size:     13px;
  font-weight:   600;
  color:         var(--ps-text);
  transition:    border-color var(--ps-transition), background var(--ps-transition), color var(--ps-transition);
}

.pagination .page-item a:hover,
.pagination .page-item.active span {
  border-color: var(--ps-primary);
  background:   var(--ps-primary);
  color:        var(--ps-white);
}

/* ── 13. Cart page ───────────────────────────────────────────────────────── */
.page-cart .cart-item {
  border-bottom: 1px solid var(--ps-border);
  padding:       16px 0;
}

.page-cart .cart-item:last-child {
  border-bottom: none;
}

.page-cart .cart-item .product-name {
  font-weight: 700;
  font-size:   14.5px;
  color:       var(--ps-text);
}

.page-cart .cart-item .product-price {
  font-weight: 700;
  font-size:   15px;
  color:       var(--ps-primary);
}

.page-cart .card {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow:    var(--ps-shadow-sm);
  background:    var(--ps-white);
}

.page-cart .cart-summary-line {
  font-size:     14px;
  padding:       5px 0;
}

.page-cart .cart-summary-line.cart-total {
  font-size:   16px;
  font-weight: 800;
  color:       var(--ps-text);
  border-top:  2px solid var(--ps-border);
  padding-top: 10px;
  margin-top:  6px;
}

.page-cart .cart-summary-line .value {
  font-weight: 700;
  color:       var(--ps-primary);
}

.page-cart .btn-primary {
  padding:       12px 28px;
  font-size:     14.5px;
  border-radius: var(--ps-radius);
  box-shadow:    0 3px 12px rgba(36,185,215,.28);
}

/* ── 14. Forms — global ──────────────────────────────────────────────────── */
.form-control {
  border:        1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  font-size:     13.5px;
  color:         var(--ps-text);
  transition:    border-color var(--ps-transition), box-shadow var(--ps-transition);
}

.form-control:focus {
  border-color: var(--ps-primary);
  box-shadow:   0 0 0 3px rgba(36,185,215,.14);
  outline:      none;
}

.label,
label {
  font-weight: 600;
  font-size:   13px;
  color:       var(--ps-text);
}

/* ── 15. Alerts ──────────────────────────────────────────────────────────── */
.alert {
  border:        none;
  border-left:   3px solid;
  border-radius: var(--ps-radius-sm);
  font-size:     13.5px;
}

.alert-success {
  background:   #f0fff4;
  border-color: #4cbb6c;
  color:        #276749;
}

.alert-danger {
  background:   #fff5f5;
  border-color: #ff4c4c;
  color:        #c53030;
}

.alert-warning {
  background:   #fffbf0;
  border-color: #ff9a52;
  color:        #975800;
}

.alert-info {
  background:   #ebf8ff;
  border-color: var(--ps-primary);
  color:        #1a6e8a;
}

/* ── 16. Account pages ───────────────────────────────────────────────────── */
.page-my-account .links a {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  padding:       20px 16px;
  color:         var(--ps-text);
  font-weight:   600;
  font-size:     13.5px;
  transition:    border-color var(--ps-transition), box-shadow var(--ps-transition), color var(--ps-transition);
  background:    var(--ps-white);
  box-shadow:    var(--ps-shadow-sm);
}

.page-my-account .links a:hover {
  border-color: var(--ps-primary);
  color:        var(--ps-primary);
  box-shadow:   var(--ps-shadow);
}

.page-my-account .links a i {
  font-size:     28px;
  margin-bottom: 8px;
  color:         var(--ps-primary);
}

/* ── 17. Footer ──────────────────────────────────────────────────────────── */
#footer {
  background: #1e2330;
  color:      #c8d0de;
  padding:    40px 0 20px;
}

#footer a {
  color:      #c8d0de;
  font-size:  13.5px;
  transition: color var(--ps-transition);
}

#footer a:hover {
  color: var(--ps-primary);
}

#footer h4 {
  color:       #fff;
  font-size:   14px;
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#footer .footer-container li {
  margin-bottom: 6px;
}

.footer-bottom-copyright {
  border-top:  1px solid rgba(255,255,255,.08);
  margin-top:  24px;
  padding-top: 16px;
  font-size:   12.5px;
  color:       #7a8899;
}

/* ── 18. Reassurance block ───────────────────────────────────────────────── */
#blockreassurance_displayHome .blockreassurance_product,
.blockreassurance_product {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background:    var(--ps-white);
  box-shadow:    var(--ps-shadow-sm);
  transition:    box-shadow var(--ps-transition);
  padding:       16px;
}

.blockreassurance_product:hover {
  box-shadow: var(--ps-shadow);
}

.blockreassurance_product .block-icon img,
.blockreassurance_product .block-icon svg {
  width:  42px;
  height: 42px;
  color:  var(--ps-primary);
}

.blockreassurance_product p.block-title {
  font-weight: 700;
  font-size:   14px;
  color:       var(--ps-text);
  margin:      8px 0 4px;
}

.blockreassurance_product p.block-description {
  font-size: 13px;
  color:     var(--ps-text-muted);
  margin:    0;
}

/* ── 19. Newsletter / email subscribe ────────────────────────────────────── */
#ps_emailsubscription_displayFooterBefore {
  background:    var(--ps-primary);
  color:         var(--ps-white);
  padding:       30px 0;
  margin-bottom: 0;
}

#ps_emailsubscription_displayFooterBefore .block_newsletter_content {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}

#ps_emailsubscription_displayFooterBefore p {
  color:       rgba(255,255,255,.85);
  font-size:   13.5px;
  margin:      0;
}

#ps_emailsubscription_displayFooterBefore input[type="email"] {
  border:        2px solid rgba(255,255,255,.4);
  background:    rgba(255,255,255,.15);
  color:         var(--ps-white);
  border-radius: var(--ps-radius-sm);
  padding:       9px 16px;
  font-size:     13.5px;
  height:        42px;
  transition:    border-color var(--ps-transition);
}

#ps_emailsubscription_displayFooterBefore input[type="email"]::placeholder {
  color: rgba(255,255,255,.65);
}

#ps_emailsubscription_displayFooterBefore input[type="email"]:focus {
  border-color: rgba(255,255,255,.9);
  outline:      none;
}

#ps_emailsubscription_displayFooterBefore .btn {
  background:    var(--ps-white);
  color:         var(--ps-primary);
  border:        2px solid var(--ps-white);
  font-weight:   700;
  border-radius: var(--ps-radius-sm);
  padding:       9px 22px;
  height:        42px;
  transition:    background var(--ps-transition), color var(--ps-transition);
}

#ps_emailsubscription_displayFooterBefore .btn:hover {
  background: var(--ps-primary-dark);
  color:      var(--ps-white);
}

/* ── 20. Image slider / hero ─────────────────────────────────────────────── */
.images-container,
#carousel .carousel {
  border-radius: var(--ps-radius);
  overflow:      hidden;
  box-shadow:    var(--ps-shadow);
}

.carousel-caption h2,
.carousel-caption .caption-title {
  font-size:   32px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ── 21. Order confirmation ──────────────────────────────────────────────── */
.order-confirmation-summary,
.card.order-confirmation {
  border:        1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow:    var(--ps-shadow-sm);
  background:    var(--ps-white);
  padding:       24px;
}

.order-confirmation-summary .order-line {
  border-bottom: 1px solid var(--ps-border);
  padding:       10px 0;
}

/* ── 22. Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #header {
    position: relative;
  }

  .product-add-to-cart .btn-primary {
    width:     100%;
    min-width: unset;
  }
}

@media (max-width: 767px) {
  .page-product h1.h1 {
    font-size: 20px;
  }

  .product-price .current-price-value,
  .product-price .price {
    font-size: 22px;
  }

  .page-cart .btn-primary {
    width:     100%;
    min-width: unset;
  }

  .blockreassurance_product {
    margin-bottom: 12px;
  }

  #ps_emailsubscription_displayFooterBefore .block_newsletter_content {
    flex-direction: column;
    align-items:    stretch;
    text-align:     center;
  }
}