/* ====== Base Styles ====== */

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f8ff;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}

body.dark-mode {
background-color: #1a1a1a;
color: #f0f0f0;
}

h1, h2, h3 {
color: #007BFF;
}

a {
color: #007BFF;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #0056b3;
}
/* ====== Header ====== */
header {
position:  relative;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #007BFF, #00BFFF);
padding: 15px 25px;
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
inset-inline-start: 0; /* replaces 'left: 0' */
inset-inline-end: 0;   /* replaces 'right: 0' */
width: 100%;
top: 0;
z-index: 10;
animation: techHeader 0.8s ease-out;
flex-wrap: wrap;
}

/* Logo */
header .logo {
display: flex;
align-items: center;
font-size: 22px;
font-weight: bold;
}

header .logo img {
/* increased ~8% from 48px -> 52px */
height: 70px;
/* use logical margin so it behaves correctly in RTL/LTR */
margin-inline-end: 15px;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
transition: transform 0.3s ease;
}

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

/* Header Title */
header .header-title {
flex: 1;
text-align: center;
min-width: 180px;
}

header .header-title h1 {
margin: 0;
font-size: clamp(18px, 2.2vw, 28px);
font-weight: 600;
text-align: right;
direction: rtl;
letter-spacing: -0.5px;
}

/* Navigation */
nav {
margin-left: auto;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
flex-wrap: wrap;
}

nav ul li a {
color: white;
font-weight: 500;
padding: 8px 14px;
border-radius: 8px;
transition: all 0.3s ease;
font-size: clamp(14px, 1.4vw, 16px);
}

nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ====== Responsive Tweaks ====== */

/* Tablet screens */
@media (max-width: 900px) {
header {
padding: 10px 15px;
flex-wrap: wrap;
justify-content: space-between;
}

header .logo {
margin-bottom: 10px;
}

nav ul {
width: 100%;
justify-content: center;
gap: 15px;
}
}

/* Small screens / mobile */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
gap: 10px;
}

nav ul li a {
padding: 10px 18px;
background: rgba(255, 255, 255, 0.1);
width: 100%;
text-align: center;
}
}

/* ====== Header Animation ====== */
@keyframes techHeader {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ====== Theme Switcher ====== */
.theme-switcher {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
}

.theme-switcher button,
.light-mode-button,
.dark-mode-button {
border: none;
color: white;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.theme-switcher button {
background: linear-gradient(135deg, #ff7eb3, #85b932);
}

.theme-switcher button:hover {
background: linear-gradient(135deg, #8e0e23, #ff7eb3);
transform: scale(1.1);
}

.light-mode-button {
background: linear-gradient(135deg, #ffdd00, #fbb034);
}

.light-mode-button:hover {
background: linear-gradient(135deg, #fbb034, #ffdd00);
transform: scale(1.1);
}

.dark-mode-button {
background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.dark-mode-button:hover {
background: linear-gradient(135deg, #2a5298, #1e3c72);
transform: scale(1.1);
}

/* ====== Language Switcher ====== */
.language-switcher {
display: flex;
gap: 10px;
}

.language-switcher button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.language-switcher button:hover {
background: rgba(255, 255, 255, 0.3);
}

/* ====== Slideshow (legacy) ====== */
.slideshow {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
border-radius: 15px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slides img {
width: 100%;
height: 450px;
object-fit: cover;
}

.slideshow-prev, .slideshow-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
z-index: 10;
}

.slideshow-prev { left: 10px; }
.slideshow-next { right: 10px; }

.slideshow-prev:hover, .slideshow-next:hover {
background: rgba(0, 0, 0, 0.8);
}

.slides img { display: none; width: 100%; height: auto; }
.slides img.active { display: block; }

/* ====== About, Products, Contact, Location Sections ====== */
.about, .products, .contact, .location {
background: white;
padding: 40px;
border-radius: 15px;
margin: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dark-mode .about, .dark-mode .products, .dark-mode .contact, .dark-mode .location {
background: #333;
color: #f0f0f0;
}

.about h2, .products h2, .contact h2, .location h2 {
margin-bottom: 25px;
font-size: 30px;
color: #007BFF;
}

.about p { font-size: 18px; line-height: 1.8; }

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

.product-box img {
width: 100%;
height: auto;               /* let height follow aspect ratio */
aspect-ratio: 4 / 3;       /* consistent product aspect */
object-fit: cover;         /* crop without empty space */
display: block;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}

.product-box p {
margin: 12px;
font-size: 18px;
color: #007BFF;
font-weight: 500;
}

/* ====== Video and Image Grid ====== */
.video-grid, .image-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}

.video-box, .image-box {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: stretch;
background: white;
border: 1px solid #e0e0e0;
border-radius: 15px;
overflow: hidden;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-mode .video-box, .dark-mode .image-box {
background: #444;
border-color: #555;
}

.video-box:hover, .image-box:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.video-box video, .image-box img {
width: 100%;
height: auto;               /* let height follow aspect ratio */
aspect-ratio: 16 / 9;      /* consistent media aspect */
object-fit: cover;         /* crop without empty space */
display: block;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}

.video-box p, .image-box p {
margin: 12px;
font-size: 18px;
color: #007BFF;
font-weight: 500;
}

/* ====== Popup ====== */
.popup {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 10px;
box-sizing: border-box;
}

.popup[style*="display: flex"] { display: flex !important; }

.popup-content {
background: white;
padding: 30px;
border-radius: 15px;
width: 100%;
max-width: 600px;
max-height: 90%;
overflow-y: auto;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.popup-content img, .popup-content video {
max-width: 100%;
max-height: 70vh;
border-radius: 10px;
}

.popup-content .close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #333;
cursor: pointer;
background: none;
border: none;
}

/* ====== Enhanced Media Popup ====== */
.media-popup {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
z-index: 2000;
padding: 20px;
}
.media-popup .popup-body {
display: flex;
gap: 18px;
width: min(1100px, 96%);
background: #fff;
border-radius: 10px;
padding: 16px;
max-height: 90vh;
overflow: hidden;
}
.media-popup-content {
max-width: 90vw;
max-height: 90vh;
background: #fff;
color: #111;
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}

.media-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
}

.media-wrapper img, .media-wrapper video {
width: auto;
height: auto;
max-width: 80vw;        /* constrain width to viewport */
max-height: 50vh;       /* smaller height so details visible */
object-fit: contain;
}

.media-col { flex: 1 1 60%; display:flex; flex-direction:column; align-items:center; }
.info-col  { flex: 1 1 40%; overflow:auto; padding-right:10px; }

/* ====== Contact Section ====== */
.contact form {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact {
max-width: 700px;
margin: 40px auto;
padding: 20px;
background: #fdfdfd;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact h2 {
text-align: center;
font-size: 1.8rem;
margin-bottom: 25px;
}

.input-group {
display: flex;
align-items: center;
background: #f9f9f9;
padding: 12px 15px;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
gap: 10px;
}

.input-group img {
width: 36px;
height: 36px;
flex-shrink: 0;
object-fit: contain;
}

.input-content {
flex: 1;
display: flex;
flex-direction: column;
}

.input-content label {
font-size: 0.9rem;
color: #777;
margin-bottom: 4px;
}

.input-content input {
border: none;
background: transparent;
font-size: 1rem;
font-weight: 500;
color: #333;
width: 100%;
}

.copy-btn {
background: #007bff;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 0.9rem;
}

.copy-btn:hover {
background: #0056b3;
}

.social-links {
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 20px 0;
flex-wrap: wrap;
gap: 10px;
}

.social-links a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
background: #f0f0f0;
padding: 8px 14px;
border-radius: 8px;
transition: background 0.3s ease;
color: #222;
font-weight: 500;
}

.social-links a:hover {
background: #e3e3e3;
}

.social-links img {
width: 28px;
height: 28px;
}

.more-info {
display: block;
text-align: center;
margin-top: 10px;
color: #007bff;
font-weight: 600;
text-decoration: none;
}

.more-info:hover {
text-decoration: underline;
}

/* نسخه موبایل */
@media (max-width: 600px) {
.input-group {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}

.input-group img {
width: 32px;
height: 32px;
}

.copy-btn {
align-self: flex-end;
}
}

/* ====== Location Section ====== */
.map-container {
display: flex;
gap: 20px;
align-items: center;
}

.map-text {
flex: 1;
font-size: 18px;
line-height: 1.8;
}

.map {
flex: 2;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.map iframe {
width: 100%;
height: 300px;
border: none;
}

/* ====== Footer ====== */
footer {
background: linear-gradient(135deg, #007BFF, #00BFFF);
background-size: 200% 200%;
color: white;
padding: 40px;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: auto;
animation: techFooter 1s ease-in, animatedFooterGradient 5s linear infinite;
}

footer .footer-left, footer .footer-middle, footer .footer-right {
flex: 1;
padding: 0 20px;
}

footer .footer-left a {
color: white;
font-weight: 500;
display: block;
margin-bottom: 10px;
}

footer .footer-right button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

footer .footer-right button:hover {
background: rgba(255, 255, 255, 0.3);
}

footer .footer-right {
text-align: right;
display: flex;
justify-content: flex-end;
gap: 10px;
}

/* ====== Footer Socials Layout ====== */
.footer-instagram a,
.footer-whatsapp a {
color: #a259e6 !important; /* purple */
font-size: 14px !important;
font-weight: 500;
text-decoration: underline;
transition: color 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.footer-instagram a:hover,
.footer-whatsapp a:hover {
color: #7c3aed !important; /* darker purple on hover */
}

/* Make the icon a bit bigger for visual balance */
.footer-instagram img,
.footer-whatsapp img {
width: 32px !important;
height: auto !important;
}

/* ====== Footer Navigation ====== */
.footer-nav {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
margin-bottom: 18px;
margin-top: 8px;
}
.footer-nav a {
color: white;
font-size: 15px;
font-weight: 500;
padding: 6px 14px;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s, color 0.3s;
background: rgba(255,255,255,0.08);
}
.footer-nav a:hover {
background: #a259e6;
color: #fff;
}

/* Directionality for footer nav */
html[dir="rtl"] .footer-nav {
flex-direction: row-reverse;
}
html[dir="ltr"] .footer-nav {
flex-direction: row;
}

/* ====== Phone Number Direction Fix ====== */
.ltr-number {
direction: ltr !important;
unicode-bidi: plaintext !important;
font-family: 'Vazirmatn', monospace, sans-serif;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
}

/* ====== Keyframes ====== */
@keyframes techHeader {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes techFooter {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes animatedFooterGradient {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}

/* ====== Utility Classes ====== */
.no-margin { margin: 0; }

img {
max-width: 100%;
height: auto;
display: block;
object-fit: contain; /* or cover if you prefer crop */
}

.main-content img, .slideshow img, .product-box img, .image-grid img {
max-width: 100%;
height: auto;
}

@media (min-width: 1200px) {
.main-content img, .slideshow img, .product-box img, .image-grid img {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.slideshow { height: 400px; }

.slides img.active { height: 400px; }
}

/* ====== HERO SLIDER ====== */
:root {
--container-max: 1200px;
--thumb-size: 72px;
--thumb-gap: 10px;
--radius: 16px;
--shadow: 0 10px 25px rgba(0,0,0,.25);
--accent: #0ea5e9;
}

.slider-source { display: none; }

.hero {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: clamp(320px, 55vh, 560px);
background: #10161d no-repeat center;
background-size: auto;
box-shadow: var(--shadow);
display: grid;
}

.hero::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2) 30%, rgba(0,0,0,.55));
pointer-events: none;
}

.hero__content {
position: relative;
z-index: 1;
align-self: end;
padding: 18px 18px 110px;
pointer-events: none;
}

.hero__content a, .hero__content button { pointer-events: auto; }

.hero__title {
font-size: clamp(22px, 3.2vw, 38px);
margin: 0 0 4px;
color: #e6edf3;
}

.hero__subtitle {
opacity: .85;
margin: 0;
font-size: clamp(14px, 1.6vw, 16px);
color: #e6edf3;
}

.navBtn {
position: absolute;
top: 0;
bottom: 0;
width: 44px;
z-index: 5;
display: flex;
align-items: center;
pointer-events: none;
}

.navBtn--prev { left: 12px; }
.navBtn--next { right: 12px; }

.navBtn button {
pointer-events: auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.15);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
transition: background .2s ease, transform .15s ease;
z-index: 6;
position: relative;
}

.navBtn button:hover {
background: rgba(0,0,0,.7);
transform: scale(1.05);
}

.thumbs {
--safe: max(env(safe-area-inset-left), 12px);
position: absolute; left: var(--safe); right: var(--safe); bottom: 14px;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: var(--thumb-gap);
align-items: center;
padding: 8px 10px;
border-radius: 999px;
background: rgba(5,10,15,.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow-x: auto;
z-index: 4;
}

.thumbs::-webkit-scrollbar { height: 8px; }
.thumbs::-webkit-scrollbar-track { background: transparent; }
.thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.thumbs::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

.thumbs__item {
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 12px;
overflow: hidden;
border: 2px solid transparent;
background: #0a0f14;
cursor: pointer;
outline: none;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.thumbs__item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}

.thumbs__item:hover { transform: translateY(-2px); }
.thumbs__item:focus-visible { box-shadow: 0 0 0 3px rgba(14,165,233,.65); }
.thumbs__item[aria-current="true"] { border-color: var(--accent); }

/* accessibility nicety: focus ring on hero when keyboarding */
.hero:focus { outline: 2px solid rgba(14,165,233,.65); outline-offset: 2px; }

/* Products page: footer row styling (moved from inline) */
.footer-row {
display: flex;
align-items: center;
gap: 5px;
}

/* Apply Firefox-only scrollbar styling without upsetting other browsers */
@supports (scrollbar-width: thin) {
.thumbs { scrollbar-width: thin; }
}

/* Utilities to replace inline styles */
.footer-row { display: flex; align-items: center; gap: 5px; }
.no-margin { margin: 0; }

/* === Place popup controls BELOW media (no overlay) === */
.media-popup .controls {
position: static;              /* no overlay */
width: 100%;
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
padding: 10px 12px;
background: transparent;
}

.media-popup .controls .counter {
font-size: 14px;
opacity: .8;
}

.media-title {
margin: 0 0 6px;
text-align: center;
}


.media-wrapper img,
.media-wrapper video{
max-width: 100%;
max-height: 70vh;
display: block;
margin: 0 auto;
}

/* Product Popup */
.product-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 33vw;
height: 66vh;
padding: 20px;
max-width: 400px;
max-height: 600px;
background: #fff;
color: #111;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
z-index: 1001;
overflow: hidden;
}

.media-details { max-height: 180px; overflow-y: auto; padding: 8px 6px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: 6px; }
.media-details p { margin: 6px 0; font-size: 14px; color: inherit; }

@media (max-width: 900px) {
.product-popup {
width: 90vw;
height: 70vh;
max-width: none;
max-height: none;
}
}


.products-hero-slider {
position: relative;
max-width: 800px;
margin: 40px auto;
background: linear-gradient(135deg, #007BFF, #00BFFF);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
padding: 32px 0;
display: flex;
align-items: center;
justify-content: center;
}
.products-hero-video-container {
width: 80%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
overflow: hidden;
background: #10161d;
}
.products-hero-video-container video {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.45);
color: #fff;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
font-size: 28px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.1s;
}
.slider-arrow.left {
left: 16px;
}
.slider-arrow.right {
right: 16px;
}
.slider-arrow:hover {
background: rgba(0,0,0,0.7);
transform: translateY(-50%) scale(1.08);
}
@media (max-width: 900px) {
.products-hero-slider {
max-width: 98vw;
padding: 16px 0;
}
.products-hero-video-container {
height: 220px;
width: 98vw;
}
}
.products-hero h2 {
text-align: center;
margin-bottom: 18px;
}

.ltr-number {
direction: ltr;
unicode-bidi: plaintext;
}

/* Make media boxes use aspect-ratio and avoid large empty areas */
.product-box, .image-box, .video-box {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: stretch;
}

.product-box img, .image-box img, .video-box video {
width: 100%;
height: auto;
object-fit: contain;      /* show whole image */
background: #0a0f14;     /* fallback background when letterboxing */
display: block;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}

/* Keep product titles and captions compact */
.image-box p, .video-box p { margin: 12px; }
.product-box p, .product-box .caption, .product-box .title {
position: static !important;
background: none !important;
padding: 0 !important;
}

.media-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
width:100%;  
min-height:280px;
}
.media-container img, .media-container video { max-width:100%; max-height:72vh; border-radius:6px; }

.media-wrapper img, .media-wrapper video {
width: auto;
height: auto;
max-width: 80vw;        /* constrain width to viewport */
max-height: 50vh;       /* smaller height so details visible */
object-fit: contain;
}

/* For very wide screens allow larger popup media but still constrained */
@media (min-width: 1200px) {
.media-wrapper img, .media-wrapper video { max-width: 900px; max-height: 60vh; }
}

/* Ensure details area scrolls if content large */
.media-details { max-height: 35vh; overflow-y: auto; padding: 8px 6px; border-top: 1px solid rgba(0,0,0,0.06); }

/* Adjust controls spacing to avoid overlap */
.media-popup .controls { gap: 18px; padding: 12px 8px; }

/* Improve contrast for popup title in dark mode */
.media-title { color: #111; font-weight: 600; }
body.dark-mode .media-title { color: #0ea5e9; }


@media (max-width: 900px) {
.header-container {
flex-wrap: wrap;
}

.header-nav {
order: 3;
width: 100%;
justify-content: center;
margin-top: 1rem;
}

.header-nav ul {
gap: 1rem;
}
}

/* arrows & thumbs */
.arrow { background:transparent; border:none; font-size:28px; cursor:pointer; -webkit-user-select:none; user-select:none; padding:8px; }
.thumb-row { display:flex; gap:8px; margin-top:12px; overflow:auto; padding-bottom:6px; width:100%; }
.thumb { border:1px solid #e3e3e3; padding:4px; background:#fafafa; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:64px; min-height:48px; }
.thumb img { height:48px; display:block; }
.thumb .video-thumb { font-size:22px; padding:6px 10px; }


/* active thumb */
.thumb.active { outline:3px solid #007BFF; box-shadow:0 4px 12px rgba(0,0,0,0.08); }

/* close button */
.popup-close { position: absolute; right:18px; top:18px; border:none; background:transparent; font-size:22px; color:#fff; }

/* Mobile tweaks: smaller media and details height */
@media (max-width: 600px) {
.product-box, .image-box, .video-box { max-width: 100%; }
.product-box img, .image-box img, .video-box video { aspect-ratio: 4 / 3; }
.media-wrapper img, .media-wrapper video { max-height: 45vh; }
.media-details { max-height: 28vh; }
}
.company-titles {
display: flex;
flex-direction: column;
}

.company-subtitle {
font-size: 0.8rem;   /* smaller than the company name */
line-height: 1.2;
color: #555;         /* adjust if needed */
}
html[dir="rtl"] body {
direction: rtl;
text-align: right;
}

html[dir="ltr"] body {
direction: ltr;
text-align: left;
}
body, html {
font-family: 'Vazirmatn', sans-serif;
}
.fullvideo-hero {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.fullvideo-hero-title {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: white;
font-size: clamp(22px, 3vw, 38px);
margin: 0;
pointer-events: none;
}

.fullvideo-hero-slider {
width: 100%;
height: 100%;
position: relative;
}

.fullvideo-hero-video-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.fullvideo-hero-video {
width: 100%;
height: 100%;
object-fit: cover; /* use "contain" if you don’t want cropping */
display: block;
}

.fullvideo-arrow {
font-size: 3rem;
background: none;
border: none;
color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 4;
padding: 0 10px;
}

.fullvideo-arrow.left {
left: 20px;
}

.fullvideo-arrow.right {
right: 20px;
}
.popup-nav {
position: absolute;
top: 50%;
font-size: 2rem;
background: rgba(0,0,0,0.4);
color: white;
border: none;
cursor: pointer;
padding: 8px 12px;
transform: translateY(-50%);
z-index: 1000;
}

.popup-nav.left {
left: 10px;
}

.popup-nav.right {
right: 10px;
}

/* Vertical gallery to replace fullvideo hero */
.vertical-gallery {
width: 100%;
height: 100vh;               /* match previous full viewport hero */
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 vertical tiles */
gap: 0;
background: #000;            /* black background for covered areas */
overflow: hidden;
align-items: stretch;
justify-items: stretch;
}

/* Each tile is a link filling its grid cell */
.vertical-item {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
text-decoration: none;
}

/* Image fills tile, cropping overflow */
.vertical-item img {
width: 100%;
height: 100%;
object-fit: cover;   /* crops extra parts, preserves vertical fill */
object-position: center;
display: block;
}

/* Responsive: 2 columns on medium screens, 1 column on small */
@media (max-width: 700px) {
.vertical-gallery { grid-template-columns: repeat(2, 1fr); height: 70vh; }
}
@media (max-width: 480px) {
.vertical-gallery { grid-template-columns: 1fr; height: 60vh; }
.product-grid  { grid-template-columns: 1fr; }
.product-media { padding-top: 56.25%; } /* 16:9 for phones */
.product-title { font-size: 0.95rem; }
.hero__content { padding-bottom: 96px; }
:root { --thumb-size: 56px; }
}

/* Ensure gallery respects RTL/LTR layout (icons/text not involved) */
/* ====== Button system (visual improvement) ====== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
border: 0;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
vertical-align: middle;
text-decoration: none;
-ms-user-select: none;
-webkit-user-select: none; /* Safari 3+ */
-moz-user-select: none;
user-select: none;
}

.btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); outline: none; }

.btn-primary {
background: linear-gradient(135deg,#a259e6,#7c3aed);
color: #fff;
}

.btn-outline {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
padding: 8px 12px;
}
/* small icon-only button (round) */
.btn-icon {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
justify-content: center;
background: rgba(0,0,0,0.55);
color: #fff;
}
/* align copy-btn with .btn system (replaced invalid 'composes') */
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg,#a259e6,#7c3aed);
color: #fff;
border: none;
padding: 8px 12px;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
transition: transform .12s ease, filter .12s ease;
min-width: 110px;
text-decoration: none;
}

/* visually-hidden utility for accessible labels that shouldn't remove icons */
.sr-only,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

/* Standard small social icon and clickable wrapper */
.social-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
color: inherit;
}
.social-icon {
width: 24px !important;
height: auto !important;
display: inline-block;
vertical-align: middle;
object-fit: contain;
}

/* Ensure footer icon rule doesn't override small size when .social-icon used */
.footer-icon img.social-icon,
.footer-middle img.social-icon,
.qr-field img.social-icon {
width: 24px !important;
height: auto !important;
}
.qr-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.qr-field {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.social-icon {
width: 40px;
height: 40px;
}

.qr-code {
width: 120px;  /* adjust as needed */
height: auto;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.qr-label {
font-size: 14px;
color: #333;
text-align: center;
}
@media (max-width: 600px) {
.qr-container {
flex-direction: column;
align-items: center;
}
}
.company-name {
font-weight: 700;
font-size: 18px;
color: #333;
} 
.company-subtitle {
font-size: 14px;
color: #666;
}
.company-titles {
display: flex;
flex-direction: column;
align-items: center;
}
.company-titles.center {
text-align: center;
}
.company-titles.left {
text-align: left;
align-items: flex-start;
}
/* ====== Product Grid ====== */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
align-items: start;
margin-top: 1rem;
padding: 8px 4px;
} 
.product-box {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(16,24,40,0.06);
transition: transform .18s ease, box-shadow .18s ease;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 240px;
}

.product-box:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(16,24,40,0.10); }

/* media wrapper so image keeps aspect ratio and doesn't overflow */
.product-media {
width: 100%;
height: 0;
padding-top: 66.6667%; /* 3:2 aspect ratio (change if you prefer) */
position: relative;
overflow: hidden;
background: linear-gradient(180deg,#f6f8fb,#fff);
}
.product-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Title / caption under image */
.product-title {
margin: 12px;
font-weight: 600;
text-align: center;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark-mode .product-box {
background: #444;
border-color: #555;
}
.product-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.product-box img {
width: 100%;
height: auto;               /* let height follow aspect ratio */
aspect-ratio: 4 / 3;       /* consistent product aspect */
object-fit: cover;         /* crop without empty space */
display: block;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Add image zoom effect */
.product-gallery img {
transition: transform 0.5s ease;
}
.product-box:hover .product-gallery img {
transform: scale(1.05);
}
/* Add "Click to view" indicator */
.product-box::after {
content: '🔍';
position: absolute;
right: 10px;
top: 10px;
background: rgba(255,255,255,0.9);
padding: 5px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}

.product-box:hover::after {
opacity: 1;
}
.product-box p {
margin: 0;
padding: 0.8rem;
background: #f8f8f8;
font-weight: 600;
color: #333;
}
/* ====== Image and Video Boxes ====== */ 
.image-box, .video-box {
width: 100%;
max-width: 320px;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
} 

.product-popup-content {
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
border-radius: 20px;
padding: 25px;
width: 90%;
max-width: 900px;
max-height: 85vh;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: popup-enter 0.4s ease-out;
}

/* Add loading skeleton */
.product-box.loading {
background: linear-gradient(90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Close button top-right */
.product-popup-content .close {
position: absolute;
top: 12px;
right: 12px;
font-size: 1.4rem;
background: transparent;
border: none;
color: #666;
cursor: pointer;
transition: color 0.2s;
}
.product-popup-content .close:hover {
color: #000;
}

/* Popup title */
.product-popup-content h3 {
font-size: 1.4rem;
margin-bottom: 12px;
color: #007BFF;
text-align: center;
}

/* Popup image */
#popup-image {
max-width: 70%; /* smaller than full width */
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: block;
margin: 0 auto 12px auto;
}

/* Description */
#popup-description {
font-size: 0.95rem;
color: #444;
text-align: center;
margin: 8px 0;
}

/* Extra details box */
.product-popup-textbox {
background: rgba(248, 249, 250, 0.9);
border-radius: 12px;
padding: 20px;
margin-top: 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px;
border-top: 1px solid #eee;
background: #fafafa;
width: 100%;
min-height: 60px;
max-height: 200px;
overflow-y: auto;
font-size: 0.9rem;
color: #333;
line-height: 1.5;
}

/* Buttons inside popup */
.product-popup-content .btn {
padding: 10px 18px;
font-size: 0.95rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
min-width: 100px;
}
.product-popup-content .btn-outline {
background: transparent;
border: 2px solid #007BFF;
color: #007BFF;
}
.product-popup-content .btn-outline:hover {
background: #007BFF;
color: #fff;
}

/* Fade-in animation */
@keyframes popupFade {
from { opacity: 0; transform: translateY(-20px); }
to   { opacity: 1; transform: translateY(0); }
}


.product-popup-content h3 {
margin-top: 0;
}

.popup-image-wrapper {
position: relative;
margin: 20px 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

#popup-image {
width: 100%;
height: auto;
max-height: 50vh;
object-fit: contain;
border-radius: 12px;
transition: transform 0.3s ease;
}

.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-btn.left { left: 15px; }
.nav-btn.right { right: 15px; }

.nav-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

button.close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 77, 77, 0.9);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(255, 77, 77, 0.3);
}

button.close:hover {
background: #ff3333;
transform: scale(1.1);
}

/* Popup Animation */
@keyframes popup-enter {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* Dark mode adjustments */
.dark-mode .product-popup-content {
background: linear-gradient(to bottom, #2d3748, #1a202c);
color: #e2e8f0;
}

.dark-mode .product-popup-textbox {
background: rgba(45, 55, 72, 0.9);
border-color: rgba(255, 255, 255, 0.1);
}

.product-popup-textbox p {
margin: 0.4em 0;
line-height: 1.5;
}
.input-group {
display: flex;
gap: 10px;
margin-top: 20px;
}
.input-group input {
flex: 1;
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.input-group button {
padding: 10px 18px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.input-group button:hover {
background: #0056b3;
}
.input-group button:disabled {
background: #999;
cursor: not-allowed;
}

footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 20px;
background: linear-gradient(270deg, #3a80c6, #8b22b8, #3a80c6, #8b22b8 , #3a80c6);
background-size: 600% 600%;
color: white;
flex-wrap: wrap;
animation: animatedFooterGradient 15s ease infinite alternate;
}
/* Hero Section */
.ae-hero {
position: relative;
width: 100%;
min-height: clamp(380px, 55vh, 720px); /* height shrinks on mobile */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
direction: rtl;
}

.ae-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;     /* ensures landscape crop, not stretch */
object-position: center; /* always center horizon */
z-index: 0;
}

.ae-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.55) 70%
);
z-index: 1;
}

.ae-inner {
position: relative;
z-index: 2;
max-width: 1200px;
padding: 20px;
text-align: right;
box-sizing: border-box;
}

/* Headline scales with viewport */
.ae-headline {
margin: 0 0 12px;
color: #00d9ff;
font-family: 'Vazirmatn', sans-serif;
font-size: clamp(20px, 4.5vw, 56px); /* shrinks with width, never <20px */
font-weight: 800;
line-height: 1.2;
text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
}

/* Subhead also scales */
.ae-subhead {
margin: 0;
color: #ffa95c;
font-family: 'Vazirmatn', sans-serif;
font-size: clamp(14px, 2vw, 24px); /* shrinks but readable */
line-height: 1.5;
text-shadow: 0 0 16px rgba(255, 170, 90, 0.8);
}

/* Responsive: center text on small screens */
@media (max-width: 900px) {
.header-container {
flex-wrap: wrap;
.ae-inner { text-align: center; }
.ae-headline, .ae-subhead { text-align: center; }
}
.header-nav {
order: 3;
width: 100%;
justify-content: center;
margin-top: 1rem;
}
.header-nav ul {
gap: 1rem;
}
}

/* Remove sub-header on very small/narrow viewports:
   - when width is <= 450px and height between 450px and 900px
   - and also when width <= 450px and height <= 450px (covers very short screens)
*/
@media (max-width: 450px) and (min-height: 450px) and (max-height: 900px),
       (max-width: 450px) and (max-height: 450px) {
  .company-subtitle {
    display: none !important;
  }
}
/* Small-screen polish: make thumbnails and hero/product media safe & compact on very small devices */
@media (max-width: 450px) {
  /* Thumbnails: fixed small height, never expand to full-width; allow horizontal scrolling */
  .media-grid {
    gap: 6px !important;
    padding-bottom: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero / product main image: keep inside a compact frame and don't let it fill the screen */
  .hero-media {
    padding: 8px !important;
    min-height: 140px !important;
  }
  .hero-media img,
  .hero-media video,
  .product-media img,
  .product-media video {
    max-height: 180px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Product media cards: keep aspect and avoid full-bleed images */
  .product-media {
    padding-top: 56.25% !important; /* 16:9 feel on small screens */
    position: relative;
  }
  .product-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Popup: tighter controls and smaller media so buttons don't spread */
  .media-popup .media-popup-inner {
    padding: 8px !important;
    border-radius: 8px !important;
  }
  .media-popup .media-popup-inner img,
  .media-popup .media-popup-inner video {
    max-height: 50vh !important;
  }
  .popup-controls, .popup-controls .popup-action-btn {
    gap: 6px !important;
  }
  .popup-action-btn {
    padding: 6px 8px !important;
    font-size: 13px !important;
    min-width: 40px !important;
  }

  /* Side arrows a bit smaller */
  .popup-side-btn { width: 40px !important; height: 40px !important; }

  /* Prevent hero or other blocks from pushing content off-screen */
  .product-page--boxed .product-layout { padding: 8px !important; gap: 10px !important; }
  .detail-box { padding: 12px !important; }

  /* Keep focus outlines visible but subtle */
  .hero-media:focus, .media-thumb:focus { outline: 2px solid rgba(14,165,233,0.18) !important; outline-offset: 2px !important; }
}

.header-container {
max-width: 1400px;
margin: 0 auto;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}

.header-left {
display: flex;
align-items: center;
gap: 1rem;
}

.header-nav {
flex: 1;
display: flex;
justify-content: center;
}

.header-nav ul {
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}

.header-nav a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: background-color 0.3s;
}

.header-nav a:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.header-controls {
display: flex;
align-items: center;
gap: 1rem;
}

.lang-switcher {
display: flex;
gap: 0.5rem;
}

.lang-switcher button {
padding: 0.4rem 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background: transparent;
color: white;
cursor: pointer;
transition: all 0.3s;
}

.lang-switcher button:hover {
background: rgba(255, 255, 255, 0.1);
}
/* ===== ثابت: ناوبری همیشه افقی نگه داشته بشود ===== */
.header-nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;              /* نذار هر آیتم بره خط بعدی */
gap: 1rem;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;               /* اگر جا نشد، اسکرول افقی بیاد */
white-space: nowrap;
}

/* آیتم‌ها را به صورت inline-flex کابردی کن */
.header-nav ul li { display: inline-flex; align-items:center; }

/* لینک‌ها هم جلوی شکستن متن رو می‌گیرند */
.header-nav a { white-space: nowrap; display:inline-block; padding:10px 12px; }

/* ===== هدر: ساختار فلکسی با آیکن و منو ===== */
.header-container {
display: flex;
align-items: center;     /* وسط‌چین اجزا به‌صورت عمودی */
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;       /* پیش‌فرض: نذار بشکنه — در موبایل کنترل می‌کنیم */
}

/* لوگو و متن شرکت کنار هم؛ متن را جمع کن در موبایل */
.header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.logo img { height:70px; width:auto; max-width:100%; object-fit:contain; }

/* عنوان شرکت: اگر فضا نبود، کوتاهش کن یا مخفی کن */
.company-titles { display:flex; flex-direction:column; min-width:0; }
.company-titles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Breakpoints: موبایل — فشرده‌سازی و اجازهٔ اسکرول به ناوبری ===== */
@media (max-width: 900px) {
/* اجازه بده عناصر بسته به فضا دربیان ولی منو رو عمود نکن */
.header-container { flex-wrap: wrap; align-items:center; }
.media-popup .popup-body { flex-direction: column; width: 96%; padding: 12px; }
.media-col, .info-col { flex-basis: auto; width:100%; }
.thumb-row { justify-content:center; }
/* کوچکتر کردن لوگو تا فضای افقی برای منو باز بشه */
.logo img { height:52px; }

/* عنوان را کوچکتر کن؛ اگر هنوز جا کم بود مخفی‌ش کن (در 700px پایین‌تر) */
.company-titles { min-width: 100px; font-size: 0.95rem; }

/* ناوبری رو اجازه بده پهنای کامل بگیره اما آیتم‌ها افقی بمونند */
.header-nav {
order: 3;
width: 100%;           /* اگر میخوای کنار لوگو بمونه از auto استفاده کن */
display: block;        /* wrapper برای ul، خود ul کنترل می‌کنه نمایش */
margin-top: 0.6rem;
}
.header-nav ul { justify-content:center; }

/* کنترل روی language/theme: جمع‌شون کن کنار هم و به راست/چپ بچسبان */
.header-controls { display:flex; gap:10px; align-items:center; order:2; }
}

/* اگر خیلی فضا کم شد، عنوان را مخفی کن (صفحات موبایل تنگ‌تر) */
@media (max-width: 700px) {
.company-titles { display: none; }   /* عنوان حذف می‌شود تا منو بماند افقی */
.header-nav { width: 100%; order:3; }
.header-container { gap:8px; }
}
/* پایه برای modal داینامیک script.js */
.media-popup { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:2000; padding:20px; }
.media-popup .media-popup-content { background:#fff; border-radius:10px; padding:16px; max-width:1100px; width:95%; max-height:90vh; overflow:auto; }
.media-wrapper img, .media-wrapper video { max-width:100%; max-height:70vh; display:block; margin:0 auto; }
.controls { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:8px; }
.controls .prev, .controls .next { cursor:pointer; }
.counter { font-weight:600; }
.media-details { margin-top:12px; color:#444; line-height:1.45; }

/* Constrain images used inside product cards */
.product-box img,
.image-box img,
.video-box video,
.media-wrapper img,
.media-wrapper video {
display: block !important;
width: auto !important;           /* don't force full width */
max-width: 100% !important;       /* allow shrinking to fit card */
height: auto !important;          /* keep natural aspect ratio */
max-height: 35vh !important;      /* prevent images from growing to full viewport */
object-fit: contain !important;   /* preserve entire image inside box */
object-position: center center !important;
}

html, body {
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; /* iOS Safari + old Safari */
text-size-adjust: 100%;   
}

*, *::before, *::after {
box-sizing: border-box;
}
/* flex compatibility */
.flex, .d-flex {
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-flex;     /* Chrome */
display: -ms-flexbox;      /* IE 10 */
display: flex;
}


/* hero / big background tweaks so text doesn't get cut on small screens */
.hero, .ae-hero, .products-hero, .hero__content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* backdrop-filter prefix for Safari */
.backdrop-blur {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}

/* small-screen thumb strip fix */
.thumbs__item img, .product-thumb img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 6px;
}

/* prevent overflow on iOS safari when using 100vh */
.fullscreen {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}


html, body {
overflow-x: hidden;
}


/* ===== KEEP TITLE + SUBTITLE ON MOBILE ===== */
@media (max-width: 900px) {
  .company-titles {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    white-space: normal;
  }

  .company-titles span[data-translate="companyName"] {
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #fff;
  }

  .company-subtitle span[data-translate="subtitle"] {
    font-weight: 500;
    font-size: clamp(0.8rem, 1.4vw, 0.9rem);
    color: rgba(43, 39, 39, 0.85);
  }

  .logo img {
    height: 55px;
  }

  /* Ensure logo + titles stay together */
  .header-left {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
  }

  /* Center everything nicely in mobile view */
  .header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Move nav + language below title */
  .header-nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .header-controls {
    order: 2;
    justify-content: center;
  }
}
/* ===== SMALLER MOBILE PHONES (≤ 600px) ===== */
@media (max-width: 600px) {
  header {
    padding: 0.5rem 0.4rem;
  }

  .header-left {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
  }

  .logo img {
    height: 45px;
    width: auto;
  }

  .company-titles {
    text-align: center;
    align-items: center;
    font-size: 0.85rem;
  }

  .company-titles span[data-translate="companyName"] {
    font-size: 1rem;
    font-weight: 700;
  }

  .company-subtitle span[data-translate="subtitle"] {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  /* Keep title/subtitle ABOVE nav + language switch */
  .header-container {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
  }

  /* Nav below titles, centered */
  .header-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
  }

  .header-nav a {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
  }

  /* Smaller language buttons */
  .lang-switcher {
    order: 2;
    margin-top: 0.3rem;
  }

  .lang-switcher button {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
  }

  /* Prevent horizontal overflow (white edges) */
  html, body {
    overflow-x: hidden;
  }
}
/* ======= FORCED HERO / IMAGE BEHAVIOR (Place at VERY END of styles.css) ======= */

/* make hero a stable container and remove any background-image interference */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;   /* prefer the <img> layer, not background */
  background-size: auto !important;
  background-position: center center !important;
  min-height: clamp(200px, 40vh, 560px) !important; /* safe default */
  display: block !important;
}

/* visible image layer that always fits fully (no crop, no zoom) */
.hero-img {
  position: absolute !important;
  inset: 0 !important;                 /* top:0; right:0; bottom:0; left:0 */
  margin: auto !important;
  width: auto !important;              /* allow natural width */
  height: 100% !important;             /* fit hero height */
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;      /* IMPORTANT: show whole image always */
  object-position: center center !important;
  display: block !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ensure hero content (title/subtitle) sits on top of image */
.hero__content {
  position: relative !important;
  z-index: 2 !important;
  padding: 18px 18px calc(6vw + 24px) !important;
  box-sizing: border-box !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

.hero__subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;    /* show at most 2 lines on small screens */
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

/* title: responsive size and avoid overflow */
.hero__title {
  font-size: clamp(18px, 3.2vw, 38px) !important;
  margin: 0 0 6px !important;
  word-break: break-word !important;
  line-height: 1.05 !important;
  z-index: 3 !important;
  color: #e6edf3 !important;
  text-align: center !important;
}

/* make thumbs / arrows on top */
.navBtn, .thumbs { z-index: 4 !important; }

/* If any inline style or script added background-size, our mobile rule must win */
@media (max-width: 900px) {
  .hero { min-height: clamp(200px, 40vh, 420px) !important; }
  .hero[style] { background-size: contain !important; background-position: center center !important; }
  .hero-img { height: 100% !important; object-fit: contain !important; }
  .hero__content { padding-bottom: 56px !important; }
}
@media (max-width: 520px) {
  .hero__subtitle {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

/* ...existing code... */

/* Wherever -webkit-overflow-scrolling was used (e.g. .media-grid, .thumbs), we already
   added scroll-behavior and overscroll-behavior. If you have other small scrollable
   elements, add the same three lines for consistent behavior: */
.thumb-row,
.media-popup .popup-body {
  overflow-x: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}
@keyframes animatedFooterGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* Product gallery / popup */
.hero-media{background:#fff;border:1px solid rgba(0,0,0,.06);padding:12px;border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:280px;cursor:pointer}
.media-thumb{width:80px;height:80px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid rgba(0,0,0,.06)}
.detail-box{background:#f8f9fb;padding:18px;border-radius:10px;border:1px solid rgba(0,0,0,.03)}
.media-content{max-width:100%;max-height:100%;display:block;-webkit-user-select:none;user-select:none}
.media-popup-inner{position:relative;max-width:1100px;width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-content{max-width:100%;max-height:100%;display:block;user-select:none}
.media-content img{max-width:100%;max-height:100%;display:block;border-radius:6px}
.media-content video{max-width:100%;max-height:100%;display:block;border-radius:6px;background:#000}
.popup-side-btn{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010}
.popup-side-btn.left{left:18px}
.popup-side-btn.right{right:18px}
.popup-controls{position:relative;margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:center}
.popup-action-btn{background:#fff;color:#111;border-radius:8px;padding:8px 10px;border:0;cursor:pointer}
.volume-slider{width:120px}
.zoomed{cursor:zoom-out;transform-origin:center center;transition: transform .2s ease}
.media-popup-inner.zoom-wrap{overflow:auto} /* allow panning when zoomed */
@media (max-width:700px){
  .popup-side-btn{width:44px;height:44px}
  .volume-slider{width:90px}
}
/* =========================
   Gallery/Product Page — Non-Stretch, Full-Image Style
   ========================= */

/* container layout */
.product-page--boxed .product-layout {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 12px;
  box-sizing: border-box;
}


/* hero container */
.hero-media {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 4px;
}

/* hero media (image/video) — show full image, no crop, no stretch */
.hero-media img,
.hero-media video {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
}

/* fallback for <img> inside media-grid if class missing */
.media-grid img {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* hide duplicate hero if exists */
.product-media-col .hero-media + .hero-media {
  display: none !important;
  flex: 1 1 580px;
  min-width: 280px;
  box-sizing: border-box;
}


/* detail box */
.detail-box {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  border: 1px solid rgba(0,0,0,0.03);
  box-sizing: border-box;
}

/* product nav row */
.product-nav-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: space-between;
}
.product-nav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
}

/* popup style */
.media-popup {
  position: fixed;
  inset: 0;
  display: none; /* hidden until JS shows */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
}
.media-popup .media-popup-inner {
  width: calc(100% - 48px);
  max-width: 1100px;
  max-height: 90vh;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
  box-sizing: border-box;
  text-align: center;
}
.media-popup .media-popup-inner img,
.media-popup .media-popup-inner video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  margin: 0 auto;
}

/* zoomed images */
.media-popup .zoom-wrap img.zoomed {
  transform: scale(2);
  transition: transform .25s ease;
  cursor: zoom-out;
}

/* focus outlines */
.media-thumb:focus,
.product-nav-link:focus,
.hero-media:focus {
  outline: 3px solid rgba(66,153,225,0.12);
  outline-offset: 2px;
}

/* responsive adjustments (mobile) */
@media (max-width: 820px) {
  .product-page--boxed .product-layout {
    flex-direction: column-reverse;
  }
  .hero-media img,
  .hero-media video {
    max-height: 260px;
  }
  .media-grid .media-thumb,
  .media-grid img {
    height: 40px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    margin-right: 6px !important;
  }

  .detail-box {
    width: 100%;
  }
}
/* ============================
  Responsive Product Media CSS
  - Never stretch or crop images
  - Show images at intrinsic size; shrink only when needed
  - Thumbnails small, preserve aspect ratio
  - Horizontal scrolling for thumbs on small screens
  - Works from ~300px up to very large screens
  ============================ */

/* ---------- Utilities ---------- */
:root {
  --thumb-height: clamp(40px, 6.5vw, 84px); /* responsive thumb height */
  --hero-max-height-desktop: 420px;
  --hero-max-height-mobile: 260px;
}

/* reset possible conflicting inline rules (strong but necessary if inline styles exist) */
.product-media-col img,
.product-media-col video {
  width: auto !important;        /* do not stretch to fill width */
  height: auto !important;       /* preserve aspect ratio */
  max-width: 100% !important;    /* allow shrink-to-fit inside container */
  max-height: var(--hero-max-height-desktop) !important; /* desktop cap */
  object-fit: contain !important;/* show full media, no cropping */
  display: inline-block !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* ensure hero-video uses similar constraints */
.product-media-col video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--hero-max-height-desktop) !important;
}

/* ---------- Layout containers ---------- */
.product-media-col {
  box-sizing: border-box;
  width: 100%;
  display: block;
}

/* hero wrapper - centers media, prevents overflow and layout shifts */
.hero-media {
  width: 100%;
  text-align: center;
  padding: 6px 4px;
  box-sizing: border-box;
  overflow: visible; /* allow zooming without clipping */
  position: relative;
  background: transparent;
}

/* defensive: if duplicate hero nodes appear, hide the second */
.product-media-col .hero-media + .hero-media {
  display: none !important;
}

/* ---------- Thumbnails ---------- */
/* horizontal scroll container on small screens (no wrapping) */
.media-grid {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;                /* keep a single row; allow horizontal scroll */
  overflow-x: auto;
  scroll-behavior: smooth ;
  padding: 10px 6px 6px 6px;
  margin-top: 12px;
  box-sizing: border-box;
}

/* thumbnail appearance: fixed height (responsive), width auto (keeps aspect ratio) */
.media-grid .media-thumb,
.media-grid img {
  height: var(--thumb-height) !important;  /* responsive height */
  width: auto !important;                  /* keep intrinsic ratio */
  flex: 0 0 auto !important;               /* do not shrink to 0 or grow */
  object-fit: contain !important;          /* show full thumbnail */
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-block !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-right: 6px !important;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}

/* if a thumbnail image is larger than its container, fit it inside */
.media-grid .media-thumb img,
.media-grid img {
  max-height: var(--thumb-height) !important;
  max-width: calc(var(--thumb-height) * 2.5) !important; /* prevent super-wide thumbs */
}

/* ensure thumbnails are keyboard accessible look-good when focused */
.media-grid .media-thumb:focus,
.media-grid img:focus {
  outline: 3px solid rgba(66,153,225,0.14);
  outline-offset: 2px;
}

/* ---------- Popup / large view (if used) ---------- */
.media-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* inner popup - media should be fully visible, scaled down if needed */
.media-popup .media-popup-inner {
  width: calc(100% - 48px);
  max-width: 1200px;
  max-height: 92vh;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  overflow: auto;
  text-align: center;
}

.media-popup .media-content img,
.media-popup .media-content video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 88vh !important;
  object-fit: contain !important;
  margin: 0 auto;
  display:block;
}

/* ---------- Detail box fallback (keeps text boxed) ---------- */
.detail-box {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  border: 1px solid rgba(0,0,0,0.03);
  box-sizing: border-box;
}

/* ---------- Accessibility helpers ---------- */
.hero-media[role="button"] { cursor: pointer; }
.hero-media:focus { outline: 3px solid rgba(66,153,225,0.12); outline-offset: 2px; }

/* ---------- Responsive breakpoints ---------- */
/* small phones */
@media (max-width: 360px) {
  :root { --thumb-height: 40px; }
  .product-media-col img, .product-media-col video {
    max-height: 220px !important;
  }
}

/* phones */
@media (min-width: 361px) and (max-width: 480px) {
  :root { --thumb-height: 44px; }
  .product-media-col img, .product-media-col video {
    max-height: 260px !important;
  }
}

/* small tablets */
@media (min-width: 481px) and (max-width: 820px) {
  :root { --thumb-height: 56px; }
  .product-media-col img, .product-media-col video {
    max-height: 320px !important;
  }
}

/* tablets / small desktops */
@media (min-width: 821px) and (max-width: 1200px) {
  :root { --thumb-height: 72px; }
  .product-media-col img, .product-media-col video {
    max-height: 380px !important;
  }
}

/* large desktops */
@media (min-width: 1201px) {
  :root { --thumb-height: 84px; }
  .product-media-col img, .product-media-col video {
    max-height: var(--hero-max-height-desktop) !important;
  }
}

/* ---------- Safety fallback: ensure no image is forced to stretch by other rules ---------- */
.product-media-col img[width],
.product-media-col img[height] {
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- Prevent layout crushing when thumbs overflow: add horizontal padding scrollbar safe area ---------- */
.media-grid::-webkit-scrollbar { height: 8px; }
.media-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius:6px; }

/* ---------- Final cleanup: avoid duplicated definitions from older CSS interfering ---------- */
/* If another rule forces .media-grid to wrap, prefer no-wrap here */
.media-grid { flex-wrap: nowrap !important; }

/* If the hero image is small (intrinsic) do NOT upscale it: */
.hero-media img,
.hero-media video { image-rendering: auto; max-width: 100%; height: auto; object-fit: contain; }
/* =========================
  Animated Hero Section CSS
  - Fullscreen hero with background image/video
  - Overlay gradient for text readability
  - Responsive headline and subhead
  - Centered content with max-width
  ========================= */
.ae-hero {
position: relative;
width: 100%;
min-height: clamp(300px, 50vh, 600px); /* responsive height
*/
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ae-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
z-index: 1;
}
.ae-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
/* Headline scales responsively */
.ae-headline {
margin: 0 0 0.5rem 0;
color: #0099ff;
font-family: 'Vazirmatn', sans-serif;
font-size: clamp(24px, 5vw, 48px); /* scales between 24px and 48px */
line-height: 1.1;
text-shadow: 0 0 20px rgba(0, 153, 255, 0.7);
}
.ae-subhead {
margin: 0;
color: #ffaa5a;
font-size: clamp(16px, 3vw, 24px); /* scales between 16px and 24px */
line-height: 1.3;
} 
/* Responsive adjustments */
@media (max-width: 900px) {
.ae-headline { font-size: clamp(20px, 6vw, 36px); }
.ae-subhead { font-size: clamp(14px, 4vw, 20px); }
}
@media (max-width: 600px) {
.ae-hero {
justify-content: center;
}
.ae-headline { font-size: clamp(18px, 7vw, 28px); }
.ae-subhead { font-size: clamp(12px, 5vw, 18px); }
}
/* ===== VERY SMALL SCREENS: HIDE SUBTITLE TO SAVE SPACE =====
   - when width <= 450px and height > 450px (normal small phones)
@media (max-width: 450px) and (min-height: 451px) {
  .company-subtitle {
    display: none !important;
  }
}
   - when height <= 450px (very short screens, landscape phones)
@media (max-height: 450px) {
  .company-subtitle {
    display: none !important;
  }
}
*/  
/* ===== MOBILE PRODUCT MEDIA ADJUSTMENTS ===== */
@media (max-width: 820px) {
  /* Thumbnails: smaller, horizontal scroll, no wrap */
  .media-grid .media-thumb,
  .media-grid img {
    height: 48px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    margin-right: 6px !important;
  }
  .media-grid {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  /* Hero media: smaller max height to fit mobile screens */
  .product-media-col img,
  .product-media-col video {
    max-height: 260px !important;
  }
}
/* ===== MOBILE POPUP + MEDIA ADJUSTMENTS ===== */
@media (max-width: 600px) {
  /* Hero media: even smaller max height on very small screens */
  .product-media-col img,
  .product-media-col video {
    max-height: 200px !important;
  }
}
@media (max-width: 480px) {
  /* Hero media: tight fit on smallest phones */
  .product-media-col img,
  .product-media-col video {
    max-height: 150px !important;
  }

  /* Ensure product media always fits without cropping/stretching */
  .product-media {
    overflow: visible !important;
  }
}
@media (max-width: 700px) {
  /* Popup inner: more padding, rounded corners */
  .media-popup .popup-body {
    flex-direction: column !important;
    width: 96% !important;
    padding: 12px !important;
  }
}
  .media-col, .info-col {
    flex-basis: auto !important;
    width: 100% !important;
  }
  .thumb-row {
    justify-content: center !important;
  }

  /* Popup controls: smaller buttons, less padding */
  .media-popup .popup-body {
    gap: 12px !important;
    padding: 8px !important;
  }

@media (max-width: 600px) {
  .popup-side-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .volume-slider {
    width: 90px !important;
  }
}
@media (max-width: 500px) {
  .media-popup .popup-body {
    flex-direction: column !important;
    width: 100% !important;
    padding: 8px !important;
  }
}

/* =========================
  END OF Responsive Product Media CSS
  ========================= */

/* ======= END OF styles.css ======= */