/*
 * atlas_theme.css
 * Tema dark premium para el webshop de Atlas Digital
 * Se inyecta via web_include_css en hooks.py
 * Scope: body.product-page — nunca afecta otras páginas
 *
 * Ubicación final: erpnext_mercadopago/public/css/atlas_theme.css
 * Después de agregar: bench build --app erpnext_mercadopago
 */

/* ═══════════════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   TOKENS — solo bajo .product-page para no contaminar
═══════════════════════════════════════════════════════════ */
body.product-page {
  --ws-bg:        #0d0f0e;
  --ws-bg2:       #131715;
  --ws-bg3:       #1a1e1b;
  --ws-bg4:       #222823;

  --ws-border:    rgba(255,255,255,.08);
  --ws-border-g:  rgba(0,197,98,.25);
  --ws-border-gh: rgba(0,197,98,.55);

  --ws-g1:        #00c562;
  --ws-g2:        #00875a;
  --ws-g-grad:    linear-gradient(135deg,#00c562 0%,#00a050 50%,#007a3d 100%);

  --ws-ink:       #f0f2f0;
  --ws-ink-2:     #a8b0a8;
  --ws-ink-3:     #6a736a;
  --ws-ink-4:     #3d453d;

  --ws-r-sm:      8px;
  --ws-r-md:      14px;
  --ws-r-lg:      20px;

  --ws-shadow:    0 4px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
  --ws-shadow-g:  0 0 20px rgba(0,197,98,.12);

  --ws-font-d:    'Syne', sans-serif;
  --ws-font-b:    'Outfit', sans-serif;
  --ws-font-m:    'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════
   FONDO GLOBAL + GRAIN
═══════════════════════════════════════════════════════════ */
body.product-page {
  background: var(--ws-bg) !important;
  color: var(--ws-ink) !important;
  font-family: var(--ws-font-b) !important;
}

body.product-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════
   PAGE WRAPPER & HEADERS
═══════════════════════════════════════════════════════════ */
body.product-page .page-content-wrapper {
  position: relative;
  z-index: 1;
}

body.product-page .page-header-wrapper {
  padding: 32px 0 20px;
}

body.product-page .page-header .mb-6 {
  font-family: var(--ws-font-d) !important;
  font-size: clamp(24px, 4vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  background: linear-gradient(90deg, #ffffff 0%, #a8d8b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0 !important;
}

/* breadcrumbs */
body.product-page .breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
}
body.product-page .breadcrumb-item a {
  color: var(--ws-ink-3) !important;
  font-size: 12px;
  font-family: var(--ws-font-m);
  letter-spacing: .3px;
  text-decoration: none;
}
body.product-page .breadcrumb-item.active {
  color: var(--ws-ink-4) !important;
  font-size: 12px;
  font-family: var(--ws-font-m);
}
body.product-page .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ws-ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS — vista de cards
═══════════════════════════════════════════════════════════ */
body.product-page .item-card-group-section .card,
body.product-page #product-listing .card {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-lg) !important;
  box-shadow: var(--ws-shadow) !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
  position: relative;
}

/* línea superior al hover */
body.product-page .item-card-group-section .card::before,
body.product-page #product-listing .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ws-g-grad);
  opacity: 0;
  transition: opacity .25s;
  z-index: 2;
}

body.product-page .item-card-group-section .card:hover,
body.product-page #product-listing .card:hover {
  border-color: var(--ws-border-g) !important;
  box-shadow: var(--ws-shadow), var(--ws-shadow-g) !important;
  transform: translateY(-3px);
}

body.product-page .item-card-group-section .card:hover::before,
body.product-page #product-listing .card:hover::before {
  opacity: 1;
}

/* imagen de card */
body.product-page .card-img-top {
  border-bottom: 1px solid var(--ws-border) !important;
  background: var(--ws-bg3) !important;
}

/* body de card */
body.product-page .card-body {
  background: transparent !important;
  color: var(--ws-ink) !important;
  padding: 14px 16px !important;
}

body.product-page .card-body .item-title,
body.product-page .card-body h5,
body.product-page .card-body .product-title {
  font-family: var(--ws-font-d) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ws-ink) !important;
  letter-spacing: -.2px;
  margin-bottom: 6px !important;
}

/* precio */
body.product-page .card-body .product-price,
body.product-page .card-body .price {
  font-family: var(--ws-font-d) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ws-g1) !important;
}

/* footer de card */
body.product-page .card-footer {
  background: var(--ws-bg3) !important;
  border-top: 1px solid var(--ws-border) !important;
  padding: 10px 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT LIST ROWS — vista de lista
═══════════════════════════════════════════════════════════ */
body.product-page .item-card-group-section .row > [class*="col"],
body.product-page #product-listing .products-list .row {
  position: relative;
}

/* cada fila de producto en list view */
body.product-page .item-card-group-section .product-list-item,
body.product-page #product-listing .product-list-item {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-md) !important;
  margin-bottom: 10px !important;
  padding: 14px 18px !important;
  transition: border-color .2s, box-shadow .2s !important;
  display: flex;
  align-items: center;
  gap: 16px;
}

body.product-page .item-card-group-section .product-list-item:hover,
body.product-page #product-listing .product-list-item:hover {
  border-color: var(--ws-border-g) !important;
  box-shadow: var(--ws-shadow-g) !important;
}

body.product-page .product-list-item .product-title {
  font-family: var(--ws-font-d) !important;
  font-weight: 600 !important;
  color: var(--ws-ink) !important;
  font-size: 15px !important;
}

body.product-page .product-list-item .product-price {
  color: var(--ws-g1) !important;
  font-family: var(--ws-font-d) !important;
  font-weight: 700 !important;
}

body.product-page .product-list-item .product-description {
  color: var(--ws-ink-3) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
}

/* ═══════════════════════════════════════════════════════════
   FILTERS SECTION
═══════════════════════════════════════════════════════════ */
body.product-page .filters-section {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-lg) !important;
  padding: 20px 18px !important;
}

body.product-page .filters-title {
  font-family: var(--ws-font-d) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ws-ink) !important;
  letter-spacing: -.2px;
}

body.product-page .clear-filters {
  font-family: var(--ws-font-m) !important;
  font-size: 10px !important;
  color: var(--ws-ink-4) !important;
  text-decoration: none;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: color .15s;
}
body.product-page .clear-filters:hover {
  color: var(--ws-g1) !important;
}

body.product-page .filter-label {
  font-family: var(--ws-font-m) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--ws-ink-4) !important;
  margin-bottom: 10px !important;
}

body.product-page .filter-block {
  border-bottom: 1px solid var(--ws-border) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}
body.product-page .filter-block:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

body.product-page .filter-lookup-wrapper label {
  color: var(--ws-ink-2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.product-page .filter-lookup-wrapper label:hover {
  color: var(--ws-ink) !important;
}

body.product-page .filter-lookup-wrapper input[type="checkbox"] {
  accent-color: var(--ws-g1) !important;
}

/* ═══════════════════════════════════════════════════════════
   SHOP BY CATEGORY — category cards
═══════════════════════════════════════════════════════════ */
body.product-page .shop-by-category-content {
  padding-top: 16px;
}

body.product-page .category-card {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-lg) !important;
  box-shadow: var(--ws-shadow) !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .22s !important;
  position: relative;
}

body.product-page .category-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ws-g-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

body.product-page .category-card:hover {
  border-color: var(--ws-border-g) !important;
  box-shadow: var(--ws-shadow), var(--ws-shadow-g) !important;
  transform: translateY(-4px);
}

body.product-page .category-card:hover::after {
  transform: scaleX(1);
}

body.product-page .category-card .card-body {
  background: var(--ws-bg3) !important;
  color: var(--ws-ink-2) !important;
  font-family: var(--ws-font-d) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  text-align: center;
  border-top: 1px solid var(--ws-border) !important;
}

body.product-page .category-card .card-img-top {
  background: var(--ws-bg3) !important;
  border-bottom: none !important;
  transition: opacity .2s;
}
body.product-page .category-card:hover .card-img-top {
  opacity: .9;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY SECTION LABEL & TABS
═══════════════════════════════════════════════════════════ */
body.product-page .category-slideshow .text-center h2,
body.product-page .category-slideshow h2 {
  color: var(--ws-ink) !important;
}

/* nav tabs del shop-by-category */
body.product-page .nav-tabs {
  border-bottom: 1px solid var(--ws-border) !important;
  margin-bottom: 20px;
}

body.product-page .nav-tabs .nav-link {
  font-family: var(--ws-font-m) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--ws-ink-3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  transition: color .15s, border-color .15s !important;
  background: transparent !important;
}

body.product-page .nav-tabs .nav-link:hover {
  color: var(--ws-ink) !important;
  border-bottom-color: var(--ws-border-g) !important;
}

body.product-page .nav-tabs .nav-link.active {
  color: var(--ws-g1) !important;
  border-bottom-color: var(--ws-g1) !important;
  background: transparent !important;
}

/* section title */
body.product-page .section-title {
  font-family: var(--ws-font-d) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ws-ink) !important;
  letter-spacing: -.5px !important;
  margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   ITEM GROUP DESCRIPTION
═══════════════════════════════════════════════════════════ */
body.product-page .item-group-description {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-left: 3px solid var(--ws-g1) !important;
  border-radius: var(--ws-r-md) !important;
  padding: 20px 24px !important;
  color: var(--ws-ink-2) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}

body.product-page .item-group-description h2,
body.product-page .item-group-description h3,
body.product-page .item-group-description h4 {
  color: var(--ws-ink) !important;
  font-family: var(--ws-font-d) !important;
}

body.product-page .item-group-description strong {
  color: var(--ws-ink) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   CAROUSEL (hero slider shop-by-category)
═══════════════════════════════════════════════════════════ */
body.product-page .section-carousel .carousel-inner {
  border-radius: var(--ws-r-lg) !important;
  overflow: hidden;
  border: 1px solid var(--ws-border) !important;
  box-shadow: var(--ws-shadow) !important;
}

body.product-page .section-carousel .carousel-body {
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%) !important;
}

body.product-page .section-carousel .carousel-content h1 {
  font-family: var(--ws-font-d) !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 3vw, 36px) !important;
  color: #fff !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

body.product-page .section-carousel .carousel-content p {
  color: rgba(255,255,255,.75) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}

body.product-page .section-carousel .carousel-control {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  transition: border-color .15s, background .15s !important;
}
body.product-page .section-carousel .carousel-control:hover {
  background: var(--ws-bg3) !important;
  border-color: var(--ws-border-g) !important;
}

body.product-page .section-carousel .carousel-indicators li {
  background-color: rgba(255,255,255,.3) !important;
  border-radius: 100px !important;
  width: 8px !important;
  height: 8px !important;
}
body.product-page .section-carousel .carousel-indicators li.active {
  background-color: var(--ws-g1) !important;
  width: 24px !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTONES DE WEBSHOP
═══════════════════════════════════════════════════════════ */
body.product-page .btn-primary,
body.product-page .btn-add-to-cart {
  background: var(--ws-g-grad) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: var(--ws-font-d) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .3px !important;
  box-shadow: 0 2px 12px rgba(0,197,98,.3) !important;
  transition: transform .15s, box-shadow .15s !important;
  color: #fff !important;
}
body.product-page .btn-primary:hover,
body.product-page .btn-add-to-cart:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0,197,98,.4) !important;
}
body.product-page .btn-primary:active,
body.product-page .btn-add-to-cart:active {
  transform: scale(.97) !important;
}

body.product-page .btn-secondary,
body.product-page .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--ws-border-g) !important;
  color: var(--ws-g1) !important;
  border-radius: 100px !important;
  font-family: var(--ws-font-d) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background .15s, border-color .15s !important;
}
body.product-page .btn-secondary:hover,
body.product-page .btn-outline-primary:hover {
  background: rgba(0,197,98,.08) !important;
  border-color: var(--ws-border-gh) !important;
}

/* wishlist / cart icon buttons */
body.product-page .like-action,
body.product-page .wishlist-icon {
  color: var(--ws-ink-4) !important;
  transition: color .15s !important;
}
body.product-page .like-action:hover,
body.product-page .wishlist-icon:hover {
  color: var(--ws-g1) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════ */
body.product-page .btn-prev,
body.product-page .btn-next {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  color: var(--ws-ink-2) !important;
  border-radius: var(--ws-r-sm) !important;
  font-family: var(--ws-font-m) !important;
  font-size: 12px !important;
  padding: 8px 18px !important;
  transition: border-color .15s, color .15s !important;
}
body.product-page .btn-prev:hover,
body.product-page .btn-next:hover {
  border-color: var(--ws-border-g) !important;
  color: var(--ws-g1) !important;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH BAR (si existe en webshop)
═══════════════════════════════════════════════════════════ */
body.product-page .search-bar input,
body.product-page .product-search input {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-sm) !important;
  color: var(--ws-ink) !important;
  font-family: var(--ws-font-b) !important;
}
body.product-page .search-bar input:focus,
body.product-page .product-search input:focus {
  border-color: var(--ws-border-g) !important;
  box-shadow: 0 0 0 3px rgba(0,197,98,.1) !important;
  outline: none !important;
}
body.product-page .search-bar input::placeholder {
  color: var(--ws-ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════
   SORT / VIEW TOGGLES
═══════════════════════════════════════════════════════════ */
body.product-page .sort-by-section select,
body.product-page .product-sort select {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-r-sm) !important;
  color: var(--ws-ink-2) !important;
  font-family: var(--ws-font-m) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
}

body.product-page .view-type button,
body.product-page .toggle-view {
  background: var(--ws-bg2) !important;
  border: 1px solid var(--ws-border) !important;
  color: var(--ws-ink-3) !important;
  border-radius: var(--ws-r-sm) !important;
  transition: border-color .15s, color .15s !important;
}
body.product-page .view-type button.active,
body.product-page .toggle-view.active {
  border-color: var(--ws-border-g) !important;
  color: var(--ws-g1) !important;
  background: rgba(0,197,98,.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGE / TAGS en cards (Nuevo, Oferta, etc)
═══════════════════════════════════════════════════════════ */
body.product-page .badge-pill,
body.product-page .item-tag {
  font-family: var(--ws-font-m) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}

body.product-page .badge-success,
body.product-page .item-tag-success {
  background: rgba(0,197,98,.15) !important;
  border: 1px solid rgba(0,197,98,.25) !important;
  color: var(--ws-g1) !important;
}

body.product-page .badge-danger,
body.product-page .item-tag-danger {
  background: rgba(255,77,77,.12) !important;
  border: 1px solid rgba(255,77,77,.22) !important;
  color: #ff6b6b !important;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — entrada de cards
═══════════════════════════════════════════════════════════ */
@keyframes ws-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.product-page #product-listing .card,
body.product-page #product-listing .product-list-item,
body.product-page .category-card {
  animation: ws-card-in .4s cubic-bezier(.22,1,.36,1) both;
}

body.product-page #product-listing .card:nth-child(1),
body.product-page .category-card:nth-child(1) { animation-delay: .04s; }
body.product-page #product-listing .card:nth-child(2),
body.product-page .category-card:nth-child(2) { animation-delay: .08s; }
body.product-page #product-listing .card:nth-child(3),
body.product-page .category-card:nth-child(3) { animation-delay: .12s; }
body.product-page #product-listing .card:nth-child(4),
body.product-page .category-card:nth-child(4) { animation-delay: .16s; }
body.product-page #product-listing .card:nth-child(5),
body.product-page .category-card:nth-child(5) { animation-delay: .20s; }
body.product-page #product-listing .card:nth-child(6),
body.product-page .category-card:nth-child(6) { animation-delay: .24s; }
body.product-page #product-listing .card:nth-child(7),
body.product-page .category-card:nth-child(7) { animation-delay: .28s; }
body.product-page #product-listing .card:nth-child(8),
body.product-page .category-card:nth-child(8) { animation-delay: .32s; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR global de páginas webshop
═══════════════════════════════════════════════════════════ */
body.product-page ::-webkit-scrollbar { width: 6px; height: 6px; }
body.product-page ::-webkit-scrollbar-track { background: transparent; }
body.product-page ::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: 4px; }
body.product-page ::-webkit-scrollbar-thumb:hover { background: var(--ws-border-g); }