.new-arrival-desc,
.new-product-description,
.new-product-title,
.post-description,
.post-title {
-webkit-box-orient: vertical;
-webkit-box-orient: vertical;
}
.category-name,
.hero-content {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.new-arrival-desc,
.new-product-title {
-webkit-line-clamp: 2;
}
#quantity,
.alert-info,
.category-overlay,
.copyright,
.feature-box,
.section-title {
text-align: center;
}
.footer h5:after,
.newsletter-section::after,
.newsletter-section::before,
.section-title:after {
content: "";
content: "";
content: "";
}
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--accent-color: #3498db;
}
body {
font-family: Roboto, sans-serif;
color: #333;
background-color: #fff;
}
.top-bar {
background: var(--primary-color);
color: #fff;
padding: 8px 0;
font-size: 14px;
}
.navbar {
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 700;
color: var(--primary-color);
}
.hero-slider {
position: relative;
height: 600px;
}
.hero-slide {
height: 600px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
}
.hero-content {
color: #fff;
}
.category-card {
position: relative;
border-radius: 15px;
overflow: hidden;
margin-bottom: 30px;
padding-top: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: 0.3s;
}
.category-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.category-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.category-link:hover,
.social-icons a:hover {
transform: translateY(-3px);
}
.category-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: #fff;
transition: 0.3s;
}
.category-card:hover .category-overlay {
background: linear-gradient(transparent, rgba(var(--primary-color-rgb), 0.9));
}
.category-name {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.category-count {
font-size: 16px;
opacity: 0.9;
margin-bottom: 15px;
}
.footer h5,
.product-card {
margin-bottom: 25px;
}
.category-link {
display: inline-block;
padding: 8px 20px;
background: #fff;
color: var(--primary-color);
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}
.discount-percent,
.new-arrival-price,
.new-arrival-title a:hover,
.new-product-title a:hover,
.product-title a:hover {
color: var(--secondary-color);
}
.category-link:hover {
background: var(--secondary-color);
color: #fff;
}
.categories-grid,
.new-products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.bestsellers-section {
padding: 60px 0;
background: #f8f9fa;
}
.section-title:after {
display: block;
background: var(--secondary-color);
margin: 15px auto;
}
.product-image-wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.feature-box:hover .feature-icon,
.product-card:hover .product-image {
transform: scale(1.1);
}
.product-badge {
position: absolute;
top: -83px;
right: 10px;
background: var(--secondary-color);
font-size: 12px;
}
.product-content,
.product-info {
padding: 15px;
}
.new-arrival-title a,
.product-title a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s;
}
.product-price,
.product-rating {
display: flex;
align-items: center;
gap: 8px;
}
.discount-percent {
font-size: 13px;
}
.product-rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 12px;
}
.product-action {
display: flex;
gap: 10px;
}
.btn-view {
flex: 1;
padding: 8px 15px;
border: none;
border-radius: 5px;
font-size: 14px;
font-weight: 500;
transition: 0.3s;
}
.additional-info,
.copyright,
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-primary {
background: var(--primary-color);
color: #fff;
}
.btn-primary:hover,
.footer h5:after,
.new-tag,
.social-icons a:hover {
background: var(--secondary-color);
}
.new-arrivals,
.new-products-section {
padding: 60px 0;
background: #fff;
}
.new-arrival-item {
padding: 20px;
border-bottom: 1px solid #eee;
transition: 0.3s;
}
.new-arrival-item:hover {
background: #f8f9fa;
}
.new-arrival-content,
.new-arrival-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.new-arrival-info {
flex: 1;
}
.new-arrival-title {
color: var(--primary-color);
}
.new-arrival-title a {
color: inherit;
}
.new-arrival-desc,
.post-description,
.post-title {
display: -webkit-box;
}
.new-arrival-meta {
display: flex;
align-items: center;
gap: 15px;
}
.new-arrival-rating .stars,
.rating-stars,
.stars {
color: #ffc107;
font-size: 14px;
}
.count,
.new-arrival-rating .count {
font-size: 13px;
color: #666;
}
@media (max-width: 991px) {
.categories-grid,
.new-products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.new-products-grid {
grid-template-columns: 1fr;
}
}
.new-product-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
transition: 0.3s;
height: 100%;
display: flex;
flex-direction: column;
}
.feature-box:hover,
.new-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}
.new-product-image {
position: relative;
padding-top: 100%;
background: #f8f9fa;
}
.new-product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.new-product-card:hover .new-product-image img {
transform: scale(1.05);
}
.new-label {
position: absolute;
top: 12px;
left: 12px;
background: var(--secondary-color);
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
z-index: 1;
letter-spacing: 0.5px;
}
.new-product-details {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.new-product-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
height: 44px;
overflow: hidden;
display: -webkit-box;
}
.new-product-title a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.2s;
}
.new-product-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.new-arrival-desc,
.new-product-description {
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;
}
.new-arrival-price,
.new-product-price {
font-size: 18px;
font-weight: 600;
color: var(--secondary-color);
}
.new-product-date,
.rating-count {
font-size: 13px;
color: #6c757d;
}
.new-product-description {
font-size: 14px;
color: #6c757d;
margin-bottom: 15px;
line-height: 1.6;
height: 67px;
flex-grow: 1;
}
.footer h5,
.new-arrival-title {
font-size: 18px;
font-weight: 600;
}
.new-arrival-card {
background: #fff;
height: 100%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: 0.3s;
}
.new-arrival-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.new-arrival-title {
margin-bottom: 12px;
line-height: 1.4;
}
.footer-contact li,
.footer-links li,
.new-arrival-desc {
margin-bottom: 15px;
}
.new-tag {
font-size: 12px;
}
.new-arrival-desc {
font-size: 14px;
color: #666;
line-height: 1.6;
height: 67px;
}
.footer-contact li,
.new-arrival-rating,
.post-date {
display: flex;
align-items: center;
}
.new-arrival-rating {
gap: 5px;
}
.footer {
background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
color: #fff;
padding: 80px 0 40px;
width: 100%;
}
.footer h5 {
color: #fff;
position: relative;
}
.footer-contact li,
.footer-description,
.footer-links a {
font-size: 14px;
color: #ffffff99;
}
.footer h5:after {
position: absolute;
left: 0;
bottom: -10px;
width: 30px;
height: 2px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links a {
text-decoration: none;
transition: 0.3s;
}
.footer-links a:hover {
color: #fff;
padding-left: 5px;
}
.footer-contact i {
margin-right: 10px;
color: var(--secondary-color);
}
.social-icons {
margin-top: 20px;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 50%;
margin-right: 10px;
transition: 0.3s;
}
.footer-bottom {
margin-top: 60px;
padding-top: 20px;
}
.payment-methods img,
.shipping-partners img {
height: 30px;
margin-right: 15px;
filter: brightness(1) invert(0);
opacity: 0.7;
transition: opacity 0.3s;
}
.payment-methods img:hover,
.shipping-partners img:hover,
.swiper-slide-fully-visible,
.swiper-slide-visible {
opacity: 1;
}
.footer-logo {
max-width: 150px;
margin-bottom: 20px;
filter: brightness(1) invert(2);
}
.footer-description {
line-height: 1.6;
margin-bottom: 25px;
}
.additional-info {
margin-top: 40px;
padding-top: 30px;
}
.copyright {
color: #ffffff99;
font-size: 13px;
margin-top: 30px;
padding-top: 20px;
}
@media (max-width: 991px) {
.footer {
padding: 50px 0 30px;
}
.footer-col {
margin-bottom: 35px;
text-align: left;
}
.footer h5 {
font-size: 16px;
margin-bottom: 20px;
}
.footer-contact li,
.footer-links li {
margin-bottom: 12px;
}
.footer h5:after {
width: 40px;
height: 2px;
bottom: -8px;
}
.footer-links a {
font-size: 14px;
display: block;
padding: 5px 0;
}
.footer-contact li {
display: flex;
align-items: flex-start;
}
.footer-contact i {
margin-top: 4px;
min-width: 20px;
}
.social-icons {
margin-top: 15px;
display: flex;
gap: 12px;
}
.social-icons a {
width: 32px;
height: 32px;
margin-right: 0;
}
.footer-logo {
max-width: 120px;
margin-bottom: 15px;
}
.footer-description {
font-size: 13px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.footer {
padding: 40px 0 20px;
}
.additional-info {
margin-top: 30px;
padding-top: 20px;
}
.payment-methods,
.shipping-partners {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
}
.payment-methods img,
.shipping-partners img {
height: 25px;
margin-right: 0;
}
.additional-info h6 {
text-align: center;
margin-bottom: 15px;
font-size: 14px;
}
.footer .row {
row-gap: 30px;
}
.fb-page {
display: flex;
justify-content: center;
margin-top: 10px;
}
.footer-col:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 25px;
}
.footer .container {
padding-left: 20px;
padding-right: 20px;
}
.footer-contact,
.footer-contact li:last-child {
margin-bottom: 0;
}
.footer-bottom {
margin-top: 30px;
}
}
@media (max-width: 375px) {
.footer {
padding: 30px 0 15px;
}
.footer-col {
margin-bottom: 25px;
}
.social-icons {
justify-content: center;
}
.footer-links li {
margin-bottom: 8px;
}
.footer h5 {
font-size: 15px;
}
.footer-description {
font-size: 12px;
}
.payment-methods img,
.shipping-partners img {
height: 20px;
}
}
.feature-section {
background: #f8f9fa;
padding: 50px 0;
margin: 40px 0;
}
.feature-box {
padding: 30px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
transition: 0.3s;
height: 100%;
}
.feature-icon {
font-size: 40px;
color: var(--secondary-color);
margin-bottom: 20px;
display: inline-block;
transition: transform 0.3s;
}
.feature-box h4 {
font-size: 18px;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 12px;
}
.feature-box p {
font-size: 14px;
color: #6c757d;
margin-bottom: 0;
}
.newsletter-section {
background: linear-gradient(45deg, #2c3e50, #3498db);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.newsletter-section::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(/wp-content/css/images/pattern.png);
opacity: 0.1;
}
.newsletter-section h3 {
color: #fff;
font-size: 32px;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.newsletter-section p {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
margin-bottom: 30px;
}
.newsletter-form {
position: relative;
max-width: 550px;
margin: 0 auto;
}
.newsletter-section .form-control {
height: 54px;
padding: 0 160px 0 25px;
font-size: 16px;
border: none;
border-radius: 27px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.newsletter-section .form-control:focus {
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.newsletter-section .btn {
position: absolute;
right: 5px;
top: 5px;
height: 44px;
padding: 0 30px;
background: var(--secondary-color);
color: #fff;
font-weight: 600;
border-radius: 22px;
border: none;
transition: 0.3s;
}
.newsletter-section .btn:hover {
background: #c0392b;
transform: translateY(-1px);
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.newsletter-section::after {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
right: -100px;
top: -100px;
animation: 6s ease-in-out infinite float;
}
.product-detail {
padding: 60px 0;
}
.product-gallery {
position: relative;
width: 100%;
margin-bottom: 30px;
}
.mb-3,
.swiper-thumb-item {
margin-bottom: 1rem;
}
.thumbnail-item img {
width: 85px;
height: 85px;
}
.gallery-thumbs .swiper-slide img,
.swiper-thumb-item img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gallery-thumbs {
width: 100%;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 85px !important;
height: 85px !important;
opacity: 0.7;
cursor: pointer;
transition: 0.3s;
}
.gallery-thumbs .swiper-slide img {
border-radius: 4px;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
border: 2px solid var(--secondary-color);
}
.gallery-main,
.w-100 {
width: 100%;
}
.gallery-main .swiper-wrapper {
transform: translate3d(0, 0, 0);
}
.swiper-thumb-item {
height: 365px !important;
}
.gallery-main .swiper-button-next,
.gallery-main .swiper-button-prev {
color: #fff;
background: rgba(0, 0, 0, 0.3);
width: 40px;
height: 40px;
border-radius: 50%;
transition: 0.3s;
}
.gallery-main .swiper-button-next:hover,
.gallery-main .swiper-button-prev:hover {
background: rgba(0, 0, 0, 0.5);
}
.gallery-main .swiper-button-next:after,
.gallery-main .swiper-button-prev:after {
font-size: 18px;
}
.swiper-slide-active {
z-index: 1;
}
.h-auto {
height: auto;
}
.product-meta,
.product-price {
margin-bottom: 20px;
}
.product-meta {
display: flex;
align-items: center;
gap: 20px;
}
.original-price {
font-size: 18px;
text-decoration: line-through;
color: #666;
margin-left: 10px;
}
.product-description {
margin-bottom: 30px;
line-height: 1.6;
}
.product-actions {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.quantity-selector {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn-quantity {
padding: 10px 15px;
border: none;
background: 0 0;
cursor: pointer;
}
#quantity {
width: 60px;
border: none;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.btn-add-to-cart {
background: #1976d2;
}
.btn-buy-now {
background: #d32f2f;
}
.product-content {
margin-top: 0;
padding-top: 40px;
border-top: 1px solid #eee;
}
.product-content h2 {
margin-bottom: 30px;
}
.content-body {
line-height: 1.8;
}
@media (max-width: 991px) {
.swiper-thumb-item {
height: 300px !important;
}
.product-info {
padding-left: 0;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.swiper-thumb-item {
height: 250px !important;
}
.product-actions {
flex-direction: column;
}
.quantity-selector {
width: 100%;
justify-content: center;
}
.gallery-thumbs .swiper-slide {
width: 70px !important;
height: 70px !important;
}
}
@media (max-width: 480px) {
.swiper-thumb-item {
height: 200px !important;
}
.gallery-thumbs .swiper-slide {
width: 60px !important;
height: 60px !important;
}
}
.related-products {
padding: 40px 0;
border-top: 1px solid #eee;
}
.product-card {
border-radius: 8px;
overflow: hidden;
transition: 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.product-image {
position: relative;
padding-top: 1%;
}
.product-image img,
.swiper-slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-price {
color: var(--secondary-color);
font-weight: 600;
}
.post-card {
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.post-link {
color: inherit;
flex-direction: column;
height: 100%;
}
.post-header {
display: block;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
gap: 15px;
}
.post-title {
-webkit-line-clamp: 2;
flex: 1;
}
.post-description {
-webkit-line-clamp: 3;
}
@media (max-width: 576px) {
.categories-grid {
grid-template-columns: 1fr;
}
.post-header {
flex-direction: column;
gap: 10px;
}
.post-date {
align-self: flex-end;
}
}
.discount-badge,
.discount-percent,
.new-tag,
.product-badge {
background-color: #d32f2f;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
}
.current-price,
.sale-price {
color: #d32f2f;
font-weight: 600;
font-size: 18px;
}
.btn-add-to-cart,
.btn-buy-now {
cursor: pointer;
transition: 0.3s;
color: #fff;
padding: 12px 24px;
font-weight: 500;
}
.btn-add-to-cart {
background-color: #1976d2;
border: none;
border-radius: 4px;
}
.btn-buy-now {
background-color: #d32f2f;
border: none;
border-radius: 4px;
}
.product-card {
background: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-add-to-cart:hover {
background-color: #1565c0;
}
.btn-buy-now:hover {
background-color: #c62828;
}
.btn-add-to-cart:focus,
.btn-buy-now:focus {
outline: #2196f3 solid 3px;
outline-offset: 2px;
}
.product-title {
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 30px;
}
.section-title:after {
background: var(--secondary-color);
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: #3498db;
}
.product-card-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
color: #333;
}
.footer-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
.read-more-section {
background: #1a2027;
border-left-color: #90caf9;
}
.read-more-title {
color: #fff;
}
.read-more-link {
color: #90caf9;
}
.recent-posts {
background: #1a1a1a;
}
.post-description {
color: #bdc3c7;
}
body {
color: #e0e0e0;
background-color: #121212;
}
.post-card,
.product-card {
background: #1e1e1e;
border-color: #333;
}
.post-date {
color: #b0b0b0;
}
.current-price,
.sale-price {
color: #ef5350;
}
.footer-title,
.post-title,
.product-card-title,
.product-title,
.section-title {
color: #e0e0e0;
}
}
.read-more-section {
margin: 30px 0;
padding: 20px;
border-left: 3px solid #1565c0;
background: #f5f9ff;
border-radius: 0 8px 8px 0;
}
.read-more-title {
font-size: 16px;
font-weight: 600;
color: #1f1f1f;
margin-bottom: 10px;
}
.read-more-link {
display: inline-flex;
align-items: center;
color: #0d47a1;
text-decoration: none;
font-weight: 500;
font-size: 14px;
padding: 5px 0;
transition: 0.3s;
}
.read-more-link i {
font-size: 12px;
margin-left: 6px;
transition: transform 0.3s;
}
.read-more-link:hover {
color: #1976d2;
text-decoration: underline;
}
.read-more-link:hover i {
transform: translateX(4px);
}
@media (max-width: 768px) {
.post-card {
padding: 20px;
}
.post-title {
font-size: 16px;
}
.post-description {
font-size: 13px;
height: 62px;
}
.read-more-section {
margin: 20px 0;
padding: 15px;
}
.read-more-title {
font-size: 15px;
}
}
.recent-posts {
padding: 40px 0;
background: #f8f9fa;
}
.section-title {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
}
.post-card {
background: #fff;
border-radius: 8px;
padding: 25px;
height: 100%;
transition: 0.3s;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
border-color: #3498db;
}
.post-link {
text-decoration: none;
color: inherit;
display: block;
}
.post-description,
.post-title {
display: -webkit-box;
overflow: hidden;
}
.post-title {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
line-height: 1.4;
transition: color 0.3s;
-webkit-line-clamp: 2;
}
.post-card:hover .post-title {
color: #3498db;
}
.post-description {
font-size: 14px;
color: #666;
margin-bottom: 20px;
line-height: 1.6;
-webkit-line-clamp: 3;
height: 67px;
}
.post-date {
font-size: 13px;
color: #616161;
display: flex;
align-items: center;
white-space: nowrap;
}
.post-date:before {
content: "\f017";
font-family: "Font Awesome 5 Free";
margin-right: 5px;
font-size: 12px;
}
.alert-info {
background-color: #e1f0fa;
border: none;
color: #3498db;
padding: 15px 20px;
border-radius: 8px;
width: 100%;
}
@media (prefers-color-scheme: dark) {
.read-more-section {
background: #1a2027;
border-left-color: #64b5f6;
}
.read-more-title {
color: #e0e0e0;
}
.read-more-link {
color: #64b5f6;
}
.read-more-link:hover {
color: #90caf9;
}
.recent-posts {
background: #1a1a1a;
}
.post-title,
.section-title {
color: #ecf0f1;
}
.post-card {
background: #2c3e50;
border-color: #34495e;
}
.post-description {
color: #bdc3c7;
}
.post-date {
color: #7f8c8d;
}
.alert-info {
background-color: #2c3e50;
color: #3498db;
}
}
.category-image img {
width: 100%;
height: 100%;
}
.new-arrival-price {
color: #d32f2f;
font-size: 1.1rem;
font-weight: 700;
}
.new-arrival-card {
background-color: #fff;
border: 1px solid #e0e0e0;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.new-arrival-card h3 {
color: #212121;
font-weight: 600;
margin-bottom: 0.5rem;
}
.new-arrival-card p {
color: #424242;
line-height: 1.5;
}
.new-arrival-card .new-arrival-desc {
color: #424242;
}
.new-arrival-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.new-arrival-card a {
color: #1976d2;
text-decoration: none;
}
.new-arrival-card a:hover {
color: #1565c0;
text-decoration: underline;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
margin: 0 8px !important;
background-color: #000;
opacity: 0.2;
cursor: pointer;
border-radius: 50%;
transition: 0.3s;
outline: 0;
touch-action: manipulation;
font-size: 16px;
line-height: 44px;
text-align: center;
}
.swiper-pagination-bullet-active {
opacity: 1;
background-color: #007bff;
transform: scale(1.2);
}
.swiper-pagination-bullet:focus,
.swiper-pagination-bullet:hover {
opacity: 0.5;
background-color: #007bff;
}
.swiper-pagination {
position: relative;
bottom: 0;
padding: 20px 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.swiper-pagination-bullet:focus-visible {
box-shadow: 0 0 0 3px #007bff;
outline: #fff solid 2px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hero-slide,
.swiper-slide {
position: relative;
overflow: hidden;
}
.swiper-slide {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.hero-slide {
max-height: 600px;
}
.swiper-slide-next {
opacity: 1;
visibility: visible;
}
.swiper-container {
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
@media (max-width: 768px) {
.section-title {
font-size: 20px;
margin-bottom: 20px;
}
.post-card {
padding: 20px;
}
.post-title {
font-size: 16px;
margin-bottom: 10px;
}
.post-description {
font-size: 13px;
margin-bottom: 15px;
height: 62px;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
margin: 0 10px !important;
}
.swiper-slide {
padding-bottom: 75%;
}
.hero-slide {
max-height: 400px;
}
}
.product-description {
font-size: 14px;
color: #666;
margin: 10px 0;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.product-description {
font-size: 14px;
color: #666;
margin: 10px 0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-height: 2.8em;
}
@supports not (-webkit-line-clamp: 3) {
.product-description {
display: block;
position: relative;
max-height: 2.8em;
padding-right: 1em;
}
.product-description::before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.product-description::after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
}
}