/* ==========================================================================
   MDT Store — storefront: category bar, home banners, category tiles, product shelves.
   Logical properties only, so English (LTR) and Arabic (RTL) share this file.
   ========================================================================== */

.mdt-btn-accent { background: var(--mdt-accent); color: var(--mdt-dark); }
.mdt-btn-accent:hover { background: color-mix(in srgb, var(--mdt-accent) 86%, #fff); color: var(--mdt-dark); box-shadow: 0 10px 24px -12px var(--mdt-accent); }

/* ---------- Category bar (desktop) ---------- */
.mdt-catbar { display: none; position: relative; z-index: 45; background: #fff; border-block-end: 1px solid var(--mdt-line); }
@media (min-width: 1024px) { .mdt-catbar { display: block; } }
.mdt-catbar-inner { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.mdt-catbar-all { position: relative; flex: none; }
.mdt-catbar-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding-inline: 18px; border: 0; border-radius: 12px; background: var(--mdt-dark); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s var(--mdt-ease); }
.mdt-catbar-toggle:hover, .mdt-catbar-toggle[aria-expanded="true"] { background: var(--mdt-primary-strong); }
.mdt-catbar-caret { transform: rotate(90deg); transition: transform .2s var(--mdt-ease); }
.mdt-catbar-toggle[aria-expanded="true"] .mdt-catbar-caret { transform: rotate(-90deg); }
.mdt-catbar-panel { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0; z-index: 60; width: min(900px, calc(100vw - 64px)); display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 28px; padding: 26px; background: #fff; border: 1px solid var(--mdt-line); border-radius: var(--mdt-radius-lg); box-shadow: var(--mdt-shadow-lg); }
.mdt-catbar-panel[hidden] { display: none; }
.mdt-catcol-title { display: block; margin-block-end: 8px; font-weight: 700; color: var(--mdt-dark); text-decoration: none; }
.mdt-catcol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mdt-catcol li a { display: block; padding-block: 5px; color: var(--mdt-muted); font-size: .94rem; text-decoration: none; }
.mdt-catcol li a:hover, .mdt-catcol-title:hover { color: var(--mdt-primary); }
.mdt-catbar .mdt-search { flex: 1 1 auto; max-width: 680px; }
.mdt-catbar .mdt-search input[type="search"] { min-height: 46px; background: var(--mdt-bg); }
.mdt-catbar-links { display: flex; gap: 22px; margin-inline-start: auto; white-space: nowrap; }
.mdt-catbar-links a { color: var(--mdt-dark); font-size: .92rem; font-weight: 600; text-decoration: none; }
.mdt-catbar-links a:hover { color: var(--mdt-primary); }

/* ---------- Home: hero banners ---------- */
.mdt-st-hero { padding-block: 18px 6px; }
.mdt-st-hero-grid { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); gap: 16px; }
.mdt-slider { position: relative; min-height: 410px; border-radius: var(--mdt-radius-lg); overflow: hidden; background: var(--mdt-dark); }
.mdt-slides { position: relative; min-height: inherit; height: 100%; }
.mdt-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 12px; padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(48px, 5vw, 64px); color: #fff; opacity: 0; visibility: hidden; transition: opacity .55s var(--mdt-ease), visibility .55s; }
.mdt-slide.is-active { opacity: 1; visibility: visible; }
.mdt-slide.tone-navy { background: radial-gradient(90% 120% at 100% 0%, #1f5f8b 0%, transparent 60%), linear-gradient(135deg, #0d2137, #12395a); }
.mdt-slide.tone-teal { background: radial-gradient(90% 120% at 100% 0%, #35c4bd 0%, transparent 55%), linear-gradient(135deg, #00585f, #007880 60%, #0b9a98); }
.mdt-slide.tone-dark { background: radial-gradient(80% 110% at 100% 100%, rgba(244, 123, 32, .38) 0%, transparent 60%), linear-gradient(135deg, #08131f, #0d2137 60%, #163450); }
.mdt-slide-eyebrow { margin: 0 0 10px; color: #5eead4; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mdt-slide-title { margin: 0 0 14px; color: #fff; font-size: clamp(1.55rem, 1rem + 1.9vw, 2.55rem); line-height: 1.16; }
:lang(ar) .mdt-slide-title { line-height: 1.4; }
:lang(ar) .mdt-slide-eyebrow { letter-spacing: 0; }
.mdt-slide-text { margin: 0 0 24px; max-width: 46ch; color: rgba(255, 255, 255, .84); font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); }
.mdt-slide-media { display: grid; place-items: center; min-width: 0; }
.mdt-slide-media img { width: auto; max-width: 100%; max-height: 310px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .38)); }
.mdt-slider-nav { position: absolute; inset-block-end: 18px; inset-inline-start: clamp(24px, 4vw, 48px); z-index: 2; display: flex; gap: 8px; }
.mdt-slider-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .25s var(--mdt-ease), background-color .25s; }
.mdt-slider-dot.is-active { width: 28px; background: #fff; }
.mdt-st-tiles { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.mdt-st-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 150px; padding: 20px 22px; overflow: hidden; background: #fff; border: 1px solid var(--mdt-line); border-radius: var(--mdt-radius-lg); color: var(--mdt-dark); text-decoration: none; transition: transform .25s var(--mdt-ease), box-shadow .25s var(--mdt-ease); }
.mdt-st-tile:hover { transform: translateY(-3px); box-shadow: var(--mdt-shadow); color: var(--mdt-dark); }
.mdt-st-tile-copy { display: grid; gap: 4px; min-width: 0; }
.mdt-st-tile-copy strong { font-size: 1.04rem; line-height: 1.3; }
.mdt-st-tile-copy span { color: var(--mdt-muted); font-size: .88rem; }
.mdt-st-tile-copy em { display: inline-flex; align-items: center; gap: 2px; margin-block-start: 6px; color: var(--mdt-primary); font-size: .9rem; font-style: normal; font-weight: 600; }
.mdt-st-tile-media { flex: none; display: grid; place-items: center; width: 42%; }
.mdt-st-tile-media img { max-width: 100%; max-height: 118px; object-fit: contain; transition: transform .4s var(--mdt-ease); }
.mdt-st-tile:hover .mdt-st-tile-media img { transform: scale(1.06); }

/* ---------- Home: benefits strip ---------- */
.mdt-usp { padding-block: 14px 4px; }
.mdt-usp-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mdt-usp-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--mdt-line); border-radius: var(--mdt-radius); }
.mdt-usp-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mdt-primary-soft); color: var(--mdt-primary); }
.mdt-usp-text { display: grid; line-height: 1.4; }
.mdt-usp-text strong { font-size: .95rem; }
.mdt-usp-text span { color: var(--mdt-muted); font-size: .84rem; }

/* ---------- Home: sections, category tiles ---------- */
.mdt-st-section { padding-block: clamp(22px, 3.6vw, 40px); }
.mdt-cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
.mdt-cat-tile { display: grid; justify-items: center; gap: 10px; color: var(--mdt-dark); text-align: center; text-decoration: none; }
.mdt-cat-tile-media { display: grid; place-items: center; width: min(112px, 100%); aspect-ratio: 1; padding: 14px; overflow: hidden; background: #fff; border: 1px solid var(--mdt-line); border-radius: 50%; color: var(--mdt-primary); transition: transform .25s var(--mdt-ease), box-shadow .25s var(--mdt-ease), border-color .25s; }
.mdt-cat-tile-media img { width: 100%; height: 100%; object-fit: contain; }
.mdt-cat-tile:hover .mdt-cat-tile-media { transform: translateY(-4px); border-color: var(--mdt-primary); box-shadow: var(--mdt-shadow); }
.mdt-cat-tile-name { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.mdt-cat-tile:hover .mdt-cat-tile-name { color: var(--mdt-primary); }

/* ---------- Home: product shelves ---------- */
.mdt-shelf-tools { display: flex; align-items: center; gap: 10px; }
.mdt-shelf-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mdt-line); border-radius: 50%; background: #fff; color: var(--mdt-dark); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.mdt-shelf-btn:hover { background: var(--mdt-primary); border-color: var(--mdt-primary); color: #fff; }
.mdt-shelf-prev svg { transform: scaleX(-1); }
[dir="rtl"] .mdt-shelf-prev svg { transform: none; }
[dir="rtl"] .mdt-shelf-next svg { transform: scaleX(-1); }
.mdt-shelf .woocommerce ul.products, .mdt-shelf ul.products { display: flex; gap: 14px; margin: 0; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mdt-shelf .woocommerce ul.products li.product, .mdt-shelf ul.products li.product { flex: 0 0 clamp(190px, 19.2%, 280px); width: auto; margin: 0; scroll-snap-align: start; }
@media (max-width: 1100px) { .mdt-shelf .woocommerce ul.products li.product, .mdt-shelf ul.products li.product { flex-basis: clamp(180px, 30%, 240px); } }
@media (max-width: 640px) { .mdt-shelf .woocommerce ul.products li.product, .mdt-shelf ul.products li.product { flex-basis: 62%; } }

/* ---------- Home: Panasonic series, services, about ---------- */
.mdt-st-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mdt-st-series-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 190px; padding: 24px; overflow: hidden; border-radius: var(--mdt-radius-lg); color: #fff; text-decoration: none; transition: transform .25s var(--mdt-ease), box-shadow .25s var(--mdt-ease); }
.mdt-st-series-card:hover { transform: translateY(-4px); box-shadow: var(--mdt-shadow-lg); color: #fff; }
.mdt-st-series-card.tone-navy { background: linear-gradient(135deg, #0d2137, #1b4f78); }
.mdt-st-series-card.tone-teal { background: linear-gradient(135deg, #00585f, #0b9a98); }
.mdt-st-series-card.tone-dark { background: linear-gradient(135deg, #14283b, #34495d); }
.mdt-st-series-copy { display: grid; gap: 8px; min-width: 0; }
.mdt-st-series-copy strong { font-size: 1.25rem; }
.mdt-st-series-copy span { color: rgba(255, 255, 255, .82); font-size: .88rem; line-height: 1.5; }
.mdt-st-series-copy em { display: inline-flex; align-items: center; gap: 2px; color: #5eead4; font-size: .9rem; font-style: normal; font-weight: 600; }
.mdt-st-series-media { flex: none; width: 36%; display: grid; place-items: center; }
.mdt-st-series-media img { max-width: 100%; max-height: 130px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .4)); }
.mdt-st-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mdt-st-service-list li { display: grid; gap: 8px; align-content: start; padding: 24px; background: #fff; border: 1px solid var(--mdt-line); border-radius: var(--mdt-radius-lg); }
.mdt-st-service-list strong { font-size: 1.05rem; }
.mdt-st-service-list li > span:last-child { color: var(--mdt-muted); font-size: .94rem; }
.mdt-st-service-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-block-end: 4px; border-radius: 14px; background: var(--mdt-primary-soft); color: var(--mdt-primary); }
.mdt-st-about-inner { max-width: 900px; }
.mdt-st-about h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.mdt-st-about p { color: var(--mdt-muted); }
.mdt-st-about a { font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.mdt-st-hero-grid { grid-template-columns: 1fr; }
	.mdt-st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.mdt-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mdt-usp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.mdt-st-series, .mdt-st-service-list { grid-template-columns: 1fr; }
	.mdt-slider { min-height: 500px; }
	.mdt-slide { grid-template-columns: 1fr; align-content: start; gap: 6px; padding-block-end: 56px; }
	.mdt-slide-media { order: 2; }
	.mdt-slide-media img { max-height: 170px; }
}
@media (max-width: 600px) {
	.mdt-st-tiles { grid-template-columns: 1fr; }
	.mdt-st-tile { min-height: 120px; }
	.mdt-cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
	.mdt-usp-list { grid-template-columns: 1fr; }
	.mdt-shelf-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mdt-slide, .mdt-st-tile, .mdt-st-series-card, .mdt-cat-tile-media { transition: none; }
}