@font-face { font-family: DroidArabicKufi; src: url('../../../assets/fonts/Droid.Arabic.Kufi.ttf'); font-display: swap; }
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* RTL Setup */
html {
    direction: rtl;
}

* {
    font-family: 'Cairo', 'DroidArabicKufi', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', 'DroidArabicKufi', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background: #f8fafc;
    direction: rtl;
    text-align: right;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    direction: rtl;
}

.logo {
    font-weight: bold;
    color: #6366f1;
    text-decoration: none;
    transition: transform 0.3s ease;
    order: 1; /* Move logo to right in RTL */
}

.logo:hover {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    order: 2;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: #6366f1;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    right: 0; /* Changed from left to right for RTL */
    background: #6366f1;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    order: 3; /* Move actions to left in RTL */
}

.search-btn, .cart-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}

.search-btn:hover, .cart-btn:hover {
    background: #f3f4f6;
    transform: scale(1.1);
}

.cart-count {
    position: absolute;
    top: -5px;
    left: -5px; /* Changed from right to left for RTL */
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Breadcrumb - RTL */
.breadcrumb {
    background: white;
    padding: 1rem 0;
    margin-top: 80px;
    border-bottom: 1px solid #e5e7eb;
}

.breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    direction: rtl;
}

.breadcrumb-nav a {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
    color: #4f46e5;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx=".66" cy=".31" r=".3"><stop offset=".2" stop-color="%23fb7185" stop-opacity=".5"/><stop offset=".9" stop-color="%23fb7185" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>') repeat;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.hero-content {
    text-align: center;
    color: white;
    z-index: 2;
    max-width: 800px;
    padding: 0 2rem;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    animation: slideUp 1s ease-out;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: slideUp 1s ease-out 0.2s both;
}

.cta-button {
    background: linear-gradient(45deg, #f59e0b, #f97316);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: slideUp 1s ease-out 0.4s both;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.4);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Products Section */
.products-section {
    padding: 5rem 0;
    background: #f8fafc;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #1f2937;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    group: hover;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


.productBadge{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    font-weight: bolder;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    animation: slideIn 0.5s ease;
    &.warning{
        background: #f59e0b;
        color: white;
    }
    &.outOfStock{
        background: #e12717;
        color: white;
    }
}

.product-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(45deg, #e5e7eb, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

/* Show the whole product, not a crop of it. `cover` filled the tile but ate the
   edges of anything that was not roughly square, which lost detail on the wider
   product shots. `contain` letterboxes instead; the padding and soft background
   keep the tile from looking empty around a tall image. */
.product-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.75rem;
    display: block;
}

.product-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100%; /* Changed from left to right for RTL */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: right 0.5s ease;
}

.product-card:hover .product-image::before {
    right: 100%; /* Changed from left to right for RTL */
}

.product-info {
    padding: 1.5rem;
}

.product-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 1rem;
}

.add-to-cart {
    &:not(.sm){
        background: linear-gradient(45deg, #6366f1, #8b5cf6);
        width: 100%;
    }
    &.sm{
        background: #dae1ea;
    }
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.add-to-cart.disabled {
    background: #cbd5e1; /* Light gray */
    color: #64748b;      /* Muted text */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.7;
    cursor: auto !important;
    pointer-events: none; /* Prevent clicks */
}

.add-to-cart:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

/* Product Section */
.product-section {
    padding: 3rem 0;
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

/* Product Images */
.product-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: white;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.main-image:hover {
    transform: scale(1.02);
}

.thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.thumbnail {
    height: 100px;
    background: linear-gradient(45deg, #e5e7eb, #f3f4f6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: #6366f1;
    transform: scale(1.05);
}

/* Product Title and Price */
.product-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

/* Product Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stars {
    color: #f59e0b;
    font-size: 1.2rem;
}

.rating-text {
    color: #6b7280;
}

.product-description {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
}

/* Product Options */
.product-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-label {
    font-weight: 600;
    color: #374151;
}

.color-options {
    display: flex;
    gap: 0.5rem;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.color-option.active {
    border-color: #6366f1;
    transform: scale(1.1);
}

.color-option.black { background: #1f2937; }
.color-option.blue { background: #3b82f6; }
.color-option.purple { background: #8b5cf6; }
.color-option.gold { background: #f59e0b; }

.size-options {
    display: flex;
    gap: 0.5rem;
}

.size-option {
    padding: 0.75rem 1.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.size-option:hover,
.size-option.active {
    border-color: #6366f1;
    background: #6366f1;
    color: white;
}

/* Quantity and Add to Cart */
.purchase-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quantity-label {
    font-weight: 600;
    color: #374151;
}

.quantity-controls {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    direction: ltr; /* Keep quantity controls LTR */
}

.quantity-btn {
    background: #f3f4f6;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background 0.3s ease;
}

.quantity-btn:hover {
    background: #e5e7eb;
}

.quantity-input {
    border: none;
    padding: 0.75rem;
    width: 60px;
    text-align: center;
    font-weight: 600;
    outline: none;
}

.add-to-cart-btn {
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

.buy-now-btn {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buy-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

/* Product Details Tabs */
.product-details {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    direction: rtl;
}

.tab {
    flex: 1;
    padding: 1.5rem;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tab.active {
    background: white;
    color: #6366f1;
    border-bottom: 3px solid #6366f1;
}

.tab-content {
    padding: 2rem;
    display: none;
    text-align: right;
}

.tab-content.active {
    display: block;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 10px;
}

.spec-label {
    font-weight: 600;
    color: #374151;
}

.spec-value {
    color: #6b7280;
}

/* Reviews */
.review {
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem 0;
}

.review:last-child {
    border-bottom: none;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.reviewer-name {
    font-weight: 600;
    color: #374151;
}

.review-date {
    color: #6b7280;
    font-size: 0.9rem;
}

.review-text {
    color: #6b7280;
    line-height: 1.6;
}

/* Related Products */
.related-products {
    margin-top: 4rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.related-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.related-image {
    height: 200px;
    background: linear-gradient(45deg, #e5e7eb, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.related-info {
    padding: 1.5rem;
}

.related-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.related-price {
    color: #6366f1;
    font-weight: 700;
    font-size: 1.2rem;
}

/* About Company Section */
.about-company {
    padding: 5rem 0;
    background: white;
    position: relative;
    overflow: hidden;
}

.about-company::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    pointer-events: none;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

.about-content {
    z-index: 2;
    position: relative;
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-intro {
    font-size: 1.25rem;
    color: #374151;
    line-height: 1.7;
    font-weight: 500;
}

.about-description {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.about-image {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.image-placeholder {
    font-size: 8rem;
    color: white;
    animation: float 3s ease-in-out infinite;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
}

.floating-item {
    position: absolute;
    font-size: 2rem;
    animation: orbit 10s linear infinite;
    animation-delay: var(--delay);
}

.floating-item:nth-child(1) {
    top: 10%;
    left: 10%; /* Changed from right to left for RTL */
}

.floating-item:nth-child(2) {
    bottom: 20%;
    right: 5%; /* Changed from left to right for RTL */
}

.floating-item:nth-child(3) {
    top: 50%;
    left: -10%; /* Changed from right to left for RTL */
}

@keyframes orbit {
    0% { transform: rotate(0deg) translateX(-150px) rotate(0deg); } /* Reversed direction for RTL */
    100% { transform: rotate(360deg) translateX(-150px) rotate(-360deg); }
}

.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #6366f1;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 50%;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.feature-description {
    color: #6b7280;
    line-height: 1.6;
    font-size: 1rem;
}

/* Newsletter Section */
.newsletter {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    padding: 4rem 0;
    color: white;
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.newsletter p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
    direction: ltr; /* Keep form LTR for email input */
}

.newsletter-input {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
    direction: ltr;
    text-align: left;
}

.newsletter-btn {
    background: linear-gradient(45deg, #f59e0b, #f97316);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-btn:hover {
    transform: scale(1.05);
}

/* Footer */
.footer {
    background: #111827;
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #f59e0b;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #f59e0b;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #9ca3af;
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    left: -400px; /* Changed from right to left for RTL */
    width: 400px;
    height: 100vh;
    background: white;
    z-index: 2000;
    transition: left 0.3s ease; /* Changed from right to left */
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1); /* Changed shadow direction */
    display: flex;
    flex-direction: column;
}

.cart-sidebar.open {
    left: 0; /* Changed from right to left */
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-header {
    padding: 2rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse; /* Reverse header layout for RTL */
}

.cart-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.close-cart {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.close-cart:hover {
    background: #f3f4f6;
}

.cart-items {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.cart-item-image {
    width: 60px;
    height: 60px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cart-item-price {
    color: #6366f1;
    font-weight: 600;
}

.cart-footer {
    padding: 2rem;
    border-top: 1px solid #e5e7eb;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    flex-direction: row-reverse; /* Reverse total layout for RTL */
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

.empty-cart {
    text-align: center;
    color: #6b7280;
    padding: 2rem;
}

/* RTL specific utility classes */
.icon-ltr {
    direction: ltr;
    display: inline-block;
}

.price-currency {
    margin-left: 0.25rem;
    margin-right: 0;
}

/* Breadcrumb RTL separator */
.breadcrumb-separator::before {
    content: '←';
    margin: 0 0.5rem;
}

/* Hamburger. Hidden on desktop, where the links sit inline. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* The links were dropped at 768px, which also took out every laptop width
   between 769px and the point the inline bar actually fits. Collapse to the
   panel at 992px instead, and make the panel reachable rather than absent. */
@media (max-width: 992px) {
    .nav-toggle {
        display: flex;
    }

    /* Presence is controlled by `display`, not by an animated `max-height`.
       Whether the menu is usable must not depend on a transition finishing:
       if frames are throttled (backgrounded tab, reduced-motion, low-end
       device) a half-run max-height animation leaves the panel stuck shut with
       no way to reach the links. The fade below is decoration only - the menu
       is already open and clickable on the first frame. */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        padding: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
        direction: rtl;
    }

    .nav-links.is-open {
        display: flex;
        animation: navPanelIn 0.2s ease-out;
    }

    @keyframes navPanelIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .nav-links.is-open {
            animation: none;
        }
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 1rem 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* The animated underline assumes an inline item; it looks broken stacked. */
    .nav-links a::after {
        display: none;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input {
        margin-bottom: 1rem;
    }

    .product-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-title {
        font-size: 2rem;
    }

    .main-image {
        height: 400px;
        font-size: 6rem;
    }

    .tabs {
        flex-direction: column;
    }

    .cart-sidebar {
        width: 100%;
        left: -100%;
    }

    .nav-container {
        flex-direction: row;
    }
}

/* ---------------------------------------------------------------------------
   Product share buttons
   Each button carries its platform colour in --share-color; the tile stays
   neutral until hover so the row does not turn into a wall of brand colours.
--------------------------------------------------------------------------- */
.share-box {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.share-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--share-color, #64748b);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.share-btn:hover,
.share-btn:focus-visible {
    background: var(--share-color, #64748b);
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

.share-btn svg {
    display: block;
}

.share-feedback {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: #16a34a;
}

@media (max-width: 480px) {
    .share-btn {
        width: 38px;
        height: 38px;
    }
}

/* Category checkbox list on the product form keeps a sane height. */
.category-picker {
    max-height: 180px;
    overflow-y: auto;
}