:root { --elco-primary: #1a56db; --elco-primary-dark: #1244b0; --elco-secondary: #0ea5e9; --elco-success: #10b981; --elco-danger: #ef4444; --elco-warning: #f59e0b; --elco-dark: #1e293b; --elco-light: #f8fafc; --elco-gray: #64748b; --elco-border: #e2e8f0; --elco-shadow: 0 1px 3px rgba(0,0,0,.1); --elco-shadow-lg: 0 10px 25px rgba(0,0,0,.1); --elco-radius: 12px; --elco-transition: all 0.2s ease; --font-primary: var(--font-sans); } * { box-sizing: border-box; } body { font-family: var(--font-primary); background-color: #fff; color: var(--elco-dark); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--elco-primary); transition: var(--elco-transition); } body:not(.elco-theme-premium) a:hover { color: var(--elco-primary-dark); } img { max-width: 100%; height: auto; } html[dir="rtl"] .table td[dir="ltr"], html[dir="rtl"] .table th[dir="ltr"], html[dir="rtl"] table td[dir="ltr"], html[dir="rtl"] table th[dir="ltr"] { text-align: right; } .elco-header { z-index: 1030; } .header-topbar { font-size: 0.8rem; } .header-search .form-control { border: 2px solid var(--elco-border); padding: 0.6rem 1.2rem; font-size: 0.9rem; transition: var(--elco-transition); } .header-search .form-control:focus { border-color: var(--elco-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); } .header-nav .nav-link { padding: 0.6rem 1rem; font-weight: 500; color: var(--elco-dark); font-size: 0.9rem; } .header-nav .nav-link:hover { color: var(--elco-primary); } .section-title { font-size: 1.3rem; position: relative; } .section-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--elco-primary); border-radius: 3px; margin-top: 8px; } .product-card { border-radius: var(--elco-radius); overflow: hidden; transition: var(--elco-transition); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--elco-shadow-lg); } .product-card .card-img-top { transition: transform 0.3s; } .product-card:hover .card-img-top { transform: scale(1.03); } .product-badges .badge { font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; } .wishlist-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--elco-wishlist-idle, rgba(100, 116, 139, 0.85)); background: transparent; border: 1px solid rgba(148, 163, 184, 0.35); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .wishlist-btn i { font-size: 1rem; line-height: 1; transition: color 0.2s ease, transform 0.2s ease; } .wishlist-btn:hover { color: var(--elco-wishlist-hover, #f87171); border-color: rgba(239, 68, 68, 0.35); } .wishlist-btn:hover i { transform: scale(1.06); } .wishlist-btn.active { color: var(--elco-wishlist-active, #ef4444); border-color: var(--elco-wishlist-active-border, rgba(239, 68, 68, 0.55)); background: var(--elco-wishlist-active-bg, rgba(239, 68, 68, 0.1)); box-shadow: 0 0 12px var(--elco-wishlist-active-glow, rgba(239, 68, 68, 0.22)); } .wishlist-btn.active i { color: var(--elco-wishlist-active, #ef4444); } .add-to-cart-btn { border-radius: 8px; font-weight: 500; } .category-card { transition: var(--elco-transition); border: 2px solid transparent; } .category-card:hover { border-color: var(--elco-primary); background: rgba(26,86,219,.05) !important; transform: translateY(-2px); } .hero-slider .carousel-item img { max-height: 500px; object-fit: cover; } .hero-slider .carousel-caption { background: rgba(0,0,0,.5); border-radius: var(--elco-radius); padding: 1.5rem 2rem; backdrop-filter: blur(4px); } .elco-footer { font-size: 0.9rem; } .footer-links li { margin-bottom: 0.4rem; } .footer-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 0.85rem; transition: var(--elco-transition); } .footer-links a:hover { color: #fff; padding-inline-start: 4px; } .footer-social .btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .footer-design-credit { font-size: 0.8rem; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.03em; } .footer-design-credit a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: var(--elco-transition); } .footer-design-credit a:hover { color: #fff !important; } .elco-footer__trust-badges { margin: 0; } .elco-footer__trust-badges-title { margin: 0 0 0.85rem; font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-align: start; } .elco-footer__trust-badges-list { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 0.65rem 0.75rem; } .elco-footer__trust-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: rgba(255, 255, 255, 0.05); text-decoration: none; } .elco-footer__trust-badge img { display: block; height: 68px; width: auto; max-width: 90px; object-fit: contain; } .product-gallery { max-width: min(100%, 380px); margin-inline: auto; } .product-gallery .main-image { aspect-ratio: 1 / 1; max-height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-gallery .main-image, .product-gallery .main-image img, .product-gallery__main-img { cursor: grab; } .product-gallery .main-image.is-dragging, .product-gallery .main-image.is-dragging img, .product-gallery .main-image.is-dragging .product-gallery__main-img { cursor: grabbing; } .product-gallery img { border-radius: var(--elco-radius); } .product-gallery-thumbs img { border-radius: 8px; cursor: pointer; opacity: 0.6; transition: var(--elco-transition); } .product-gallery-thumbs img:hover, .product-gallery-thumbs img.active { opacity: 1; border: 2px solid var(--elco-primary); } .product-detail-price { font-size: 1.5rem; } .product-info-panel { --product-info-border: rgba(72, 96, 140, 0.14); --product-info-muted: #64748b; --product-info-surface: rgba(248, 250, 252, 0.92); } .product-info-tabs { border-bottom: 1px solid var(--product-info-border); gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .product-info-tabs::-webkit-scrollbar { display: none; } .product-info-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; font-size: 0.875rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; border-radius: 10px 10px 0 0; color: var(--product-info-muted); white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .product-info-tabs .nav-link .bi { font-size: 0.95rem; opacity: 0.85; } .product-info-tabs .nav-link:hover, .product-info-tabs .nav-link:focus { color: var(--elco-primary, #0c1833); border-color: transparent; background: rgba(201, 162, 39, 0.08); } .product-info-tabs .nav-link.active { color: var(--elco-primary, #0c1833); background: #fff; border-color: var(--product-info-border) var(--product-info-border) transparent; } .product-info-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(201, 162, 39, 0.14); color: inherit; font-size: 0.6875rem; font-weight: 700; line-height: 1; } .product-info-tabs__content { padding: 0.85rem 0 0; } .product-prose { color: #334155; font-size: 0.9375rem; line-height: 1.65; } .product-prose > :last-child { margin-bottom: 0; } .product-prose p, .product-prose ul, .product-prose ol { margin-bottom: 0.65rem; } .product-prose h2, .product-prose h3, .product-prose h4 { margin: 0.85rem 0 0.45rem; font-size: 1rem; font-weight: 700; color: #0f172a; } .product-specs { display: grid; gap: 0.35rem; margin: 0; } @media (min-width: 768px) { .product-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.65rem; } } .product-specs__row { display: grid; grid-template-columns: minmax(42%, 1fr) minmax(0, 1fr); align-items: center; gap: 0.5rem 0.75rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--product-info-border); border-radius: 10px; background: var(--product-info-surface); } .product-specs__label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--product-info-muted); } .product-specs__value { margin: 0; font-size: 0.875rem; font-weight: 700; color: #0f172a; text-align: end; } .product-reviews { display: grid; gap: 0.75rem; } .product-review-form__body { padding: 0.85rem 1rem !important; } .product-review-form__title { margin: 0 0 0.65rem; font-size: 0.9375rem; font-weight: 700; } .product-review-form__label { margin-bottom: 0.25rem !important; font-size: 0.8125rem; font-weight: 600; } .product-review-form__hint { margin: 0; font-size: 0.875rem; color: var(--product-info-muted); } .product-review-form__textarea { min-height: 4.5rem; font-size: 0.875rem; resize: vertical; } .product-reviews__empty { margin: 0; padding: 0.75rem 0.9rem; border: 1px dashed var(--product-info-border); border-radius: 10px; font-size: 0.875rem; color: var(--product-info-muted); text-align: center; } .product-reviews__list { display: grid; gap: 0.45rem; } .product-review-item { padding: 0.7rem 0.85rem; border: 1px solid var(--product-info-border); border-radius: 10px; background: #fff; } .product-review-item__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; } .product-review-item__author { font-size: 0.875rem; font-weight: 700; color: #0f172a; } .product-review-item__date { font-size: 0.75rem; color: var(--product-info-muted); white-space: nowrap; } .product-review-item__stars { margin-bottom: 0.25rem; color: #d97706; font-size: 0.8125rem; letter-spacing: 0.03em; line-height: 1; } .product-review-item__title { margin: 0 0 0.2rem; font-size: 0.875rem; font-weight: 700; color: #0f172a; } .product-review-item__body { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #475569; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "/"; float: right; padding-left: 0.5rem; padding-right: 0; } .auth-wrapper { max-width: 420px; margin: 2rem auto; padding: 2rem; border-radius: var(--elco-radius); box-shadow: var(--elco-shadow-lg); background: #fff; } .pagination .page-link { border-radius: 8px !important; margin: 0 2px; } .pagination .page-item.active .page-link { background: var(--elco-primary); border-color: var(--elco-primary); } @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .fade-in { animation: fadeIn 0.4s ease; } @media (max-width: 768px) { .hero-slider .carousel-item img { max-height: 250px; } .hero-slider .carousel-caption { display: none; } .section-title { font-size: 1.1rem; } .product-card .card-img-top { height: 150px !important; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--elco-light); } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .form-group-float { position: relative; } .form-control-float { width: 100%; padding: 0.9rem 0.75rem 0.35rem 0.75rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 1rem; transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out; } .form-control-float:focus { outline: none; border-color: var(--elco-primary, var(--bs-primary)); box-shadow: 0 0 0 0.15rem rgba(51,153,221,0.12); } .form-label-float { position: absolute; right: 12px; top: 8px; pointer-events: none; font-size: 0.85rem; color: #6c757d; transition: transform 0.12s ease, font-size 0.12s ease, top 0.12s ease; } .form-control-float:not(:placeholder-shown) + .form-label-float, .form-control-float:focus + .form-label-float { transform: translateY(-1.05rem); font-size: 0.75rem; opacity: 0.95; display: inline-block; padding: 0 0.5rem; background: #fff; border-radius: 4px; z-index: 3; right: 0; } .form-group-float:focus-within .form-label-float, .form-group-float.is-active .form-label-float { transform: translateY(-1.05rem); font-size: 0.75rem; opacity: 0.95; display: inline-block; padding: 0 0.5rem; background: #fff; border-radius: 4px; z-index: 3; } .product-review-form .card-body { position: relative; z-index: 1; } .product-rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.25rem; direction: ltr; position: relative; } .product-rating-input__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; pointer-events: none; } .product-rating-input__star { display: inline-block; border: 0; background: transparent; color: #cbd5e1; font-size: 1.5rem; line-height: 1; padding: 0; margin: 0; cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; user-select: none; position: relative; z-index: 1; pointer-events: auto; } .product-rating-input__radio:focus-visible + .product-rating-input__star, .product-rating-input__star:focus-visible { outline: 2px solid var(--elco-primary, var(--bs-primary, #3399dd)); outline-offset: 2px; border-radius: 2px; } .product-rating-input__radio:checked ~ .product-rating-input__star { color: #fbbf24; } .product-rating-input__star:hover, .product-rating-input__star:hover ~ .product-rating-input__star { color: #fbbf24; transform: scale(1.05); } .loading-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(255,255,255,.8); z-index:9999; display: flex; align-items:center; justify-content:center; }