/*
 * Rulers TCG visual layer for PrestaShop front office.
 * This file intentionally changes only presentation styles.
 */

:root {
  --rulers-ink: #10131a;
  --rulers-panel: #171b24;
  --rulers-panel-soft: #202633;
  --rulers-text: #f8fafc;
  --rulers-muted: #a9b4c3;
  --rulers-cyan: #2dd4ff;
  --rulers-pink: #ff4da6;
  --rulers-yellow: #ffd166;
  --rulers-paper: #f7f8fb;
  --rulers-line: rgba(255, 255, 255, 0.14);
}

body {
  background:
    radial-gradient(circle at 10% 20%, rgba(45, 212, 255, 0.13), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(255, 77, 166, 0.14), transparent 30rem),
    var(--rulers-paper) !important;
  color: #1f2937;
}

#header {
  background: var(--rulers-ink) !important;
  color: var(--rulers-text) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22) !important;
}

#header .header-top,
#header .header-nav {
  background: transparent !important;
  border: 0 !important;
}

#header .header-nav,
#header .nav,
.header-nav,
.top-nav,
.header-top {
  background: #10131a !important;
}

#header a,
#header .top-menu a,
#header .header-nav a {
  color: var(--rulers-text) !important;
  font-weight: 800;
}

#header a:hover,
#header .top-menu a:hover {
  color: var(--rulers-cyan) !important;
}

#_desktop_logo img,
.logo {
  max-height: 56px;
}

#search_widget form input[type="text"],
#search_widget form input[type="search"],
.search-widget form input[type="text"],
.search-widget form input[type="search"] {
  border: 2px solid rgba(45, 212, 255, 0.7) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1f2937 !important;
  min-height: 52px !important;
  box-shadow: 0 16px 40px rgba(45, 212, 255, 0.14) !important;
}

#search_widget form button,
.search-widget form button,
.btn-primary,
.btn.btn-primary,
.product-add-to-cart .btn-primary,
.add-to-cart {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--rulers-cyan) !important;
  color: #061018 !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(45, 212, 255, 0.22) !important;
}

#search_widget form button:hover,
.search-widget form button:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.product-add-to-cart .btn-primary:hover,
.add-to-cart:hover {
  background: #7be8ff;
  color: #061018;
}

#wrapper {
  background:
    radial-gradient(circle at top left, rgba(45, 212, 255, 0.12), transparent 34rem),
    radial-gradient(circle at top right, rgba(255, 77, 166, 0.13), transparent 34rem),
    var(--rulers-paper) !important;
}

.page-home #wrapper,
body#index #wrapper,
main {
  background:
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f7f8fb 100%) !important;
}

#content-wrapper,
#left-column,
#right-column {
  padding-top: 1rem;
}

.breadcrumb {
  background: transparent;
  color: #64748b;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: #0f7792;
}

h1,
.h1,
.page-header h1,
.category-cover h1,
.title_block,
.section-title,
.ApColumn h4,
.products-section-title,
.featured-products h2,
.h1.products-section-title {
  color: #10131a !important;
  font-weight: 900 !important;
  letter-spacing: 0;
}

.products-section-title,
.featured-products h2,
.title_block,
.section-title,
.elementor-heading-title {
  position: relative;
  text-align: center;
}

.products-section-title::after,
.featured-products h2::after,
.title_block::after,
.section-title::after,
.elementor-heading-title::after {
  content: "";
  display: block;
  width: 86px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rulers-cyan), var(--rulers-pink));
}

.featured-products,
.product-accessories,
.product-miniature,
.card,
.block-categories,
.products-selection,
#js-product-list-top,
#js-product-list .products {
  border-radius: 8px;
}

.product-miniature .thumbnail-container,
.product-miniature,
.product-container,
.product-description {
  border-radius: 8px;
}

.product-miniature .thumbnail-container,
.product-miniature {
  border: 1px solid #e1e6ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.product-miniature:hover .thumbnail-container,
.product-miniature:hover {
  border-color: rgba(45, 212, 255, 0.75) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
  transform: translateY(-3px);
}

.product-miniature .product-title a,
.product-title a,
.product-name,
.h3.product-title {
  color: #1f2937 !important;
  font-weight: 900 !important;
}

.product-miniature .product-title a:hover,
.product-title a:hover {
  color: #0b8bac;
}

.product-price,
.current-price,
.price {
  color: #0f766e !important;
  font-weight: 900 !important;
}

.category-item,
.cat-content,
.category-card,
.ets_cat_item,
.ApCategoryImage,
.subcategories-list li,
#subcategories ul li {
  border-radius: 8px !important;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.category-item:hover,
.cat-content:hover,
.category-card:hover,
.ets_cat_item:hover,
.ApCategoryImage:hover,
.subcategories-list li:hover,
#subcategories ul li:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14) !important;
}

.category-item img,
.cat-content img,
.category-card img,
.ets_cat_item img,
.ApCategoryImage img,
#subcategories img {
  border-radius: 8px !important;
}

.psgdpr_consent_message,
.cookie,
.cookies,
.cookie-banner,
#cookie_notice,
#cookiesplus,
#cookieslaw,
.ets_cookie_banber_block,
.ets_cookie_banber_content {
  background: rgba(16, 19, 26, 0.92) !important;
  color: #fff !important;
}

.tabs,
.block-category,
.card-block,
.page-content,
.cart-grid-body,
.cart-grid-right .card {
  border-radius: 8px;
}

.block-category {
  border: 1px solid #e1e6ef;
  background: #fff;
}

.block-categories,
.facets,
.facet {
  border-radius: 8px;
  border: 1px solid #e1e6ef;
  background: #fff;
}

.block-categories .category-sub-menu li > a,
.facets-title,
.facet-title {
  color: #1f2937;
  font-weight: 800;
}

.pagination .current a,
.pagination a:hover {
  color: var(--rulers-cyan);
}

#footer {
  background: var(--rulers-ink);
  color: var(--rulers-muted);
}

#footer a {
  color: var(--rulers-text);
}

#footer a:hover {
  color: var(--rulers-cyan);
}

@media (max-width: 767px) {
  #header .header-top,
  #header .header-nav {
    padding-left: 12px;
    padding-right: 12px;
  }

  .product-miniature .thumbnail-container,
  .product-miniature {
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
  }
}