/*
Theme Name: TRON KURDPHONE Storefront Upgrade
Author: TRON KURDPHONE
Description: Responsive TRON KURDPHONE storefront, shop map, catalog and checkout.
Version: 8.0.7
*/

.tron-checkout-fields{display:grid;gap:8px;margin:18px 0;text-align:start}
.tron-checkout-fields label{font-weight:650;font-size:13px}
.tron-checkout-fields input,.tron-checkout-fields textarea,.tron-checkout-fields select{box-sizing:border-box;width:100%;max-width:100%;min-height:44px;border:1px solid #ccd5d8;border-radius:9px;padding:10px 12px;font:inherit;background:#fff;color:#182528}
.tron-checkout-fields textarea{min-height:76px;resize:vertical}
.tron-checkout-fields :focus-visible,#account-verify-view :focus-visible{outline:2px solid #147889;outline-offset:2px}
.tron-order-confirm{padding:12px;margin-top:12px;border-radius:9px;background:#eaf7f4;color:#153b38;overflow-wrap:anywhere}
#account-verify-view label{display:block;text-align:start;margin-top:10px;font-weight:650}
#account-verify-view input{box-sizing:border-box;width:100%;min-height:44px}
#account-verify-view button{margin-top:8px}
@media(min-width:720px){.tron-checkout-fields{grid-template-columns:1fr 1fr}.tron-checkout-fields label{grid-column:1/-1}.tron-checkout-fields input,.tron-checkout-fields textarea,.tron-checkout-fields select{grid-column:1/-1}}
[dir="rtl"] .tron-checkout-fields,[dir="rtl"] .tron-order-confirm{direction:rtl;text-align:right}
.tron-phone-link{display:grid;gap:8px;text-align:start;margin:20px 0;padding:16px;border:1px solid #dce6e8;border-radius:12px}
.tron-phone-link h3,.tron-phone-link p{margin:0}
.tron-phone-link input{box-sizing:border-box;width:100%;min-height:44px}
.tron-phone-link .add-cart-btn{margin:0}

/* TRON KURDPHONE 7.0 — storefront shell rebuilt from the approved TRON-US
   information architecture. Phone remains the primary layout. */
.tron-v7-announcement{background:#101214;color:#fff;text-align:center;padding:8px 44px;font-size:12px;font-weight:750;letter-spacing:.02em;position:relative;z-index:510}
.tron-v7-announcement a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tron-v7-nav{display:flex;align-items:center;justify-content:center;gap:22px;flex:1;min-width:0}
.tron-v7-nav a{font-size:13px;font-weight:750;color:#181a1d;white-space:nowrap;position:relative;padding:10px 0}
.tron-v7-nav a::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:2px;background:#111;transform:scaleX(0);transition:transform .18s ease}
.tron-v7-nav a:hover::after,.tron-v7-nav a:focus-visible::after{transform:scaleX(1)}
.tron-mega{position:relative}.tron-mega summary{list-style:none;cursor:pointer;font-size:13px;font-weight:750;color:#181a1d;white-space:nowrap;padding:10px 0}.tron-mega summary::-webkit-details-marker{display:none}.tron-mega summary::after{content:"⌄";font-size:12px;margin-inline-start:5px}.tron-mega-panel{display:none;position:absolute;top:calc(100% + 7px);inset-inline-start:50%;transform:translateX(-50%);z-index:700;width:210px;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.16)}.tron-mega[open] .tron-mega-panel{display:grid;gap:2px}.tron-mega-panel b{font-size:12px;color:#6b7280;padding:4px 7px 7px}.tron-mega-panel a{padding:8px 7px;font-size:13px;border-radius:7px}.tron-mega-panel a:hover,.tron-mega-panel a:focus-visible{background:#f2f5f6}.tron-mega-panel a::after{display:none}
.tron-v7-trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e8eaed;border-bottom:1px solid #e8eaed}
.tron-v7-trustbar div{background:#fff;padding:12px 10px;text-align:center;font-size:11px;color:#454b52}
.tron-v7-trustbar b{display:block;color:#121417;font-size:12px;margin-bottom:2px}
#tron-hero-banner{position:relative;min-height:min(72vh,760px);overflow:hidden;background:#eef1f2}
#tron-hero-banner picture,#tron-hero-banner picture img{width:100%;height:100%}
#tron-hero-banner picture{position:absolute;inset:0}
#tron-hero-banner picture img{object-fit:cover;object-position:center}
@media(max-width:980px){.tron-v7-nav{display:none}.tron-v7-trustbar{grid-template-columns:repeat(2,1fr)}header.top{padding:10px 12px}.tron-language-switcher{order:2}.icons{order:3}}
@media(max-width:640px){.tron-v7-announcement{padding:7px 12px;font-size:10px}.tron-v7-trustbar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.tron-v7-trustbar div{min-width:50%;scroll-snap-align:start}#tron-hero-banner{min-height:72svh}#tron-hero-banner .hero-copy{min-height:72svh;padding:30px 18px 26px;align-items:flex-end}#tron-hero-banner .hero-copy-inner{width:100%;padding-bottom:0px}#tron-hero-banner .hero-h1{font-size:26px;line-height:1.15;margin:0 0 10px}#tron-hero-banner .hero-body{font-size:13px;line-height:1.4;margin:0 0 16px}#tron-hero-banner .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}#tron-hero-banner .hero-btn{padding:0 8px;font-size:11px;min-height:42px}}

:root {
  /* Brand palette — matches TRON's own site (white/near-black + teal accent) */
  --tron-ink: #1e1e1e;
  --tron-ink-soft: rgba(30, 30, 30, .75);
  --tron-bg: #ffffff;
  --tron-bg-soft: #f6f6f6;
  --tron-line: #e9e9e9;
  --tron-accent: #147889;       /* primary teal — links, prices, active states */
  --tron-accent-bright: #0fbfff; /* secondary bright cyan — badges, highlights */
  --tron-accent-ink: #ffffff;    /* text color placed on top of --tron-accent */
  --tron-danger: #d64545;
  --tron-warn: #c98a1c;

  /* Type */
  --tron-font: Inter, "Noto Sans Arabic", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;

  /* Shape */
  --tron-radius-sm: 6px;
  --tron-radius-md: 14px;
  --tron-radius-lg: 20px;
  --tron-radius-pill: 999px;

  /* Motion */
  --tron-transition: .18s ease;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* Header */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--tron-bg);
  border-bottom: 1px solid var(--tron-line);
  position: sticky;
  top: 0;
  z-index: 500;
}
header.top .logo b { color: var(--tron-accent); font-weight: 800; }

header.top .logo .logo-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tron-accent-bright);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
header.top .ico:hover { background: var(--tron-accent); color: var(--tron-accent-ink); }
header.top .ico svg { width: 18px; height: 18px; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--tron-accent) 0%, #1c6f7d 100%);
  padding: 56px 20px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .devices { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .device {
  width: 64px;
  height: 118px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--tron-radius-md);
}

/* Tabs (New Arrivals / Best Sellers) */
.tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 20px 20px 8px;
  flex-wrap: wrap;
}
.tab {
  padding: 10px 24px;
  border-radius: var(--tron-radius-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--tron-ink-soft);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--tron-transition), color var(--tron-transition), border-color var(--tron-transition);
}
.tab.active {
  background: rgba(42, 159, 179, .08);
  border-color: rgba(42, 159, 179, .35);
  color: var(--tron-accent);
  font-weight: 700;
}

/* Product grid & cards */
.products {
  max-width: 1180px;
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  padding: 20px 20px 6px;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.products::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .card { flex-basis: 78%; width: 78%; }
}

.product-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 4px 0 32px;
}
.product-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tron-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.product-dot.active {
  width: 22px;
  border-radius: 5px;
  background: var(--tron-accent);
}
@media (max-width: 760px) {
  .product-dot { width: 7px; height: 7px; }
  .product-dot.active { width: 18px; }
}
.card:hover {
  box-shadow: 0 10px 24px rgba(30, 30, 30, .08);
  transform: translateY(-3px);
  border-color: var(--tron-accent);
}
.card .pic, .card .prod {
  height: 150px;
  background: var(--tron-bg-soft);
  border-radius: var(--tron-radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.card .prod { display: block; width: 100%; height: 100%; background: #fff; border-radius: var(--tron-radius-md); }
.card .price {
  font-size: 15px;
  font-weight: 700;
  color: var(--tron-ink);
}
.search-container { padding: 14px; border-bottom: 1px solid var(--tron-line); }
.tron-filter-row { display: flex; gap: 6px; padding: 0 14px 12px; flex-wrap: wrap; }
.tron-filter-btn {
  padding: 7px 12px;
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-pill);
  background: var(--tron-bg-soft);
  color: var(--tron-ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tron-transition);
  white-space: nowrap;
}
.tron-filter-btn.active {
  background: var(--tron-accent);
  border-color: var(--tron-accent);
  color: var(--tron-accent-ink);
}
.tron-view-row { display: flex; gap: 6px; padding: 14px 14px 0; }
.tron-view-btn {
  padding: 7px 12px;
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-pill);
  background: var(--tron-bg-soft);
  color: var(--tron-ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tron-transition);
}
.tron-view-btn.active { background: var(--tron-accent); border-color: var(--tron-accent); color: var(--tron-accent-ink); }
.tron-browse-toggle.active { background: #c7621b; color: #fff; border-color: #c7621b; }
.tron-browse-row[hidden] { display: none; }
.tron-browse-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 14px 12px; padding: 10px; background: #fff8f0; border: 1px dashed #e3b98a; border-radius: 10px; }
.tron-browse-note { width: 100%; font-size: 11px; color: #8a5a2c; font-weight: 600; }
.tron-browse-row .tron-filter-btn { border-color: #e3b98a; color: #8a4b12; background: #fff; border-radius: 20px; }
.tron-browse-row .tron-filter-btn.active { background: #c7621b; color: #fff; border-color: #c7621b; }
.tron-active-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; font-size: 11.5px; }
.tron-active-filters span { background: var(--tron-bg-soft); padding: 4px 9px; border-radius: 14px; color: var(--tron-ink); font-weight: 600; }
.tron-active-filters span b { color: var(--tron-accent); }

/* Bigger, unmissable tap target — this is the easy way to go big/full-screen. */
.fullscreen-btn {
  position: absolute;
  top: 60px;
  inset-inline-end: 30px;
  z-index: 10;
  background: var(--tron-accent);
  color: var(--tron-accent-ink);
  border: none;
  border-radius: var(--tron-radius-pill);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  box-shadow: 0 6px 16px rgba(30, 30, 30, .18);
  transition: filter var(--tron-transition), transform var(--tron-transition);
}
.fullscreen-btn:hover { filter: brightness(1.08); }
.fullscreen-btn:active { transform: scale(.97); }

/* Overlays (product / search / account / contact / cart / menu / catalog) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, .45);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 1000;
}
.overlay.open { display: flex; }

.overlay-head, .overlay-body {
  background: var(--tron-bg);
  width: 100%;
  max-width: 480px;
}
.overlay-close { font-size: 22px; color: var(--tron-ink-soft); line-height: 1; }
.overlay-close:hover { color: var(--tron-ink); }

#detail-name { font-size: 20px; margin: 4px 0; }
#detail-label { color: var(--tron-ink-soft); margin: 0 0 6px; }
#detail-price { color: var(--tron-accent); font-size: 22px; margin: 0 0 14px; }

.add-cart-btn, .wa-btn {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  padding: 14px;
  border-radius: var(--tron-radius-md);
  font-weight: 700;
  font-size: 15px;
  background: var(--tron-accent);
  color: var(--tron-accent-ink);
  transition: filter var(--tron-transition);
}
.add-cart-btn:hover, .wa-btn:hover { filter: brightness(1.08); }
.wa-btn { background: #25d366; margin-top: 14px; }

input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-sm);
  margin-bottom: 10px;
  font-size: 14px;
  background: var(--tron-bg-soft);
}
input:focus, textarea:focus { outline: 2px solid var(--tron-accent); outline-offset: 1px; background: var(--tron-bg); }

/* Search overlay results */
#search-results .search-result-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--tron-line);
  cursor: pointer;
}
#search-results .search-result-img {
  width: 52px;
  height: 52px;
  border-radius: var(--tron-radius-sm);
  overflow: hidden;
  background: var(--tron-bg-soft);
  flex-shrink: 0;
}
#search-results .search-result-info h5 { margin: 0; font-size: 14px; }
#search-results .search-result-info p { margin: 2px 0 0; font-size: 12px; color: var(--tron-ink-soft); }

/* Cart */
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tron-line);
  font-size: 14px;
}
.cart-item-controls button {
  min-width: 28px;
  min-height: 28px;
  border: 1px solid var(--tron-line);
  border-radius: 6px;
  background: var(--tron-bg-soft);
  color: var(--tron-ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.cart-item-controls button:hover { background: var(--tron-line); }

/* Menu */
.menu-item {
  display: block;
  padding: 13px 4px;
  font-size: 15px;
  color: var(--tron-ink);
  border-bottom: 1px solid var(--tron-line);
  transition: color var(--tron-transition);
}
.menu-item:hover { color: var(--tron-accent); }

/* Catalog overlay (shop-level product catalog) */
.catalog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, .45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.catalog-overlay.open { display: flex; }
.catalog-close {
  border: none;
  background: none;
  font-size: 22px;
  color: var(--tron-ink-soft);
  cursor: pointer;
}
.catalog-media { padding: 0 22px; }
.catalog-media:empty { display: none; }
.catalog-video-link { display: inline-block; margin-top: 14px; padding: 8px 14px; background: var(--tron-accent); color: var(--tron-accent-ink); border-radius: var(--tron-radius-pill); font-weight: 700; font-size: 13px; text-decoration: none; }
.catalog-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-pill);
  margin-bottom: 10px;
  background: var(--tron-bg-soft);
}
.cat-btn.active { background: var(--tron-accent); color: var(--tron-accent-ink); border-color: var(--tron-accent); }
.item-card {
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-md);
  padding: 12px;
}
.item-card h4 { margin: 0 0 4px; font-size: 14px; }
.item-price { color: var(--tron-accent); font-weight: 700; margin: 4px 0; }
.item-stock.none { color: var(--tron-danger); }
.dealer-tag { display: inline-block; background: var(--tron-accent-bright); color: #06303a; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 4px; margin: 2px 0; }
.price-lock-link:hover { text-decoration: underline; }

.site-footer { background: var(--tron-bg); color: var(--tron-ink-soft); padding: 52px 24px 18px; margin-top: 24px; border-top: 1px solid var(--tron-line); }
.footer-container { max-width: 1180px; margin: auto; display: flex; flex-wrap: wrap; gap: 32px; }
.footer-col { flex: 1; min-width: 160px; }
.footer-col h4 { color: var(--tron-ink); margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: var(--tron-ink-soft); font-size: 14px; transition: color var(--tron-transition); }
.footer-col ul li a:hover { color: var(--tron-accent); }

.subscribe-form { display: flex; gap: 8px; margin-top: 8px; max-width: 320px; }
.subscribe-form input {
  margin: 0;
  background: var(--tron-bg-soft);
  border: none;
  border-bottom: 1px solid var(--tron-ink);
  border-radius: 0;
  color: var(--tron-ink);
  padding: 10px 4px;
}
.social-icons a:hover { background: var(--tron-line); }

.footer-bottom {
  max-width: 1180px;
  margin: 28px auto 0;
  padding-top: 18px;
  padding-inline: 0;
  border-top: 1px solid var(--tron-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--tron-ink-soft);
}
/* FIX: keep copyright text clear of the floating TRON video widget (bottom-left) */
.payments span {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 3px 9px;
  border: 1px solid var(--tron-line);
  border-radius: var(--tron-radius-sm);
  font-weight: 600;
  font-size: 11px;
}

/* Responsive */
@media (max-width: 760px) {
  
  header.top { padding: 10px 12px; gap: 8px; }
  header.top .logo { font-size: 21px; gap: 7px; }
  header.top .logo .logo-sub { font-size: 9px; padding-inline-start: 7px; margin-inline-start: 0; }
  header.top .icons { gap: 5px; }
  header.top .ico { width: 34px; height: 34px; }
  header.top .ico svg { width: 16px; height: 16px; }

  .hero { padding: 40px 16px; min-height: 160px; }
  
  .tron-filter-row, .tron-browse-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .tron-filter-btn { flex-shrink: 0; }
  .tron-browse-note { width: auto; flex-shrink: 0; white-space: nowrap; }
  .tron-view-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 0; }
  .tron-view-btn, .tron-browse-toggle { flex-shrink: 0; }

  
  .fullscreen-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    margin: 0 0 10px;
    font-size: 14px;
    border-radius: 50%;
  }
  .fullscreen-btn::before {
    content: none;
    font-size: 17px;
    line-height: 1;
  }

  
  .overlay-close, .catalog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -11px;
  }
  .catalog-header { padding: 14px 16px; }
  .catalog-controls { padding: 12px 16px; }
  .catalog-items { padding: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
}

@media (max-width: 380px) {
  .cart-item-controls {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .cart-item-controls button:last-child {
    flex: 1 1 100%;
  }
}

.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 950;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform var(--tron-transition), box-shadow var(--tron-transition);
}
.whatsapp-float:hover { transform: scale(1.07); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
@media (max-width: 760px) {
  .whatsapp-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

.hero.hero-slider{position:relative!important;overflow:hidden!important;display:block!important;padding:0!important;height:auto!important;min-height:0!important;background:#0b0d10!important;aspect-ratio:16/9;}
.hero-slide.active{opacity:1;pointer-events:auto;}
.hero-dot.active{width:22px;border-radius:5px;background:#fff;}
@media (max-width:760px){
  .hero.hero-slider{aspect-ratio:4/5;}
  .hero-slide{padding:14px;}
  .hero-dot{width:7px;height:7px;}
  .hero-dot.active{width:18px;}
}

/* TRON floating video widget (bottom-left, scroll-triggered) */
.tron-video-widg{position:fixed;left:14px;bottom:14px;z-index:900;width:170px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.45);background:#000;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;}
.tron-video-widg.tvw-show{opacity:1;transform:translateY(0);pointer-events:auto;}
.tvw-video{width:100%;height:100%;object-fit:cover;display:block;}
.tvw-close,.tvw-sound,.tvw-full{position:absolute;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;}
.tvw-close{top:6px;right:6px;}
.tvw-sound{bottom:6px;left:6px;}
.tvw-full{bottom:6px;right:6px;}
.tvw-tag{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:6px;z-index:2;}
@media (min-width:761px){
  .tron-video-widg{width:240px;left:20px;bottom:20px;border-radius:18px;}
  .tvw-close,.tvw-sound,.tvw-full{width:30px;height:30px;font-size:15px;}
}

.tvw-close svg,.tvw-sound svg,.tvw-full svg{width:55%;height:55%;display:block;}

.tron-auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tron-auth-tab { flex: 1; padding: 10px 8px; border: 1px solid #e3b98a; background: #fff8f0; border-radius: var(--tron-radius-pill); font-weight: 700; font-size: 13px; cursor: pointer; color: #8a5a2b; }
.tron-auth-tab.active { background: var(--tron-accent); color: var(--tron-accent-ink); border-color: var(--tron-accent); }
.catalog-whatsapp-link { display: inline-block; margin-top: 14px; margin-inline-start: 8px; padding: 8px 14px; background: #25D366; color: #fff; border-radius: var(--tron-radius-pill); font-weight: 700; font-size: 13px; text-decoration: none; }

/* PRODUCT DETAIL PAGE (v4.9) */
.product-main { display: flex; flex-direction: column; gap: 18px; }
.product-main-image { position: relative; border-radius: var(--tron-radius-lg); overflow: hidden; background: var(--tron-bg-soft); }
.detail-image-placeholder { width: 100%; height: 220px; display: grid; place-items: center; }
.detail-product-visual { width: 45%; height: 60%; min-width: 90px; min-height: 110px; border-radius: 24px; background: linear-gradient(145deg, #555, #151515); position: relative; }
.detail-product-visual:after { content: "TRON"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 900; letter-spacing: 2px; font-size: 13px; }
#detail-image { width: 100%; height: 220px; object-fit: contain; display: block; }
.detail-quantity button { border: 0; background: none; font-size: 18px; cursor: pointer; width: 32px; height: 32px; color: var(--tron-ink); }
.detail-quantity span { font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-actions .add-cart-btn { padding: 12px; font-size: 14px; }
.detail-buy-now { border: none; border-radius: var(--tron-radius-md); font-weight: 700; font-size: 14px; padding: 12px; background: var(--tron-ink); color: #fff; cursor: pointer; transition: filter var(--tron-transition); }
.detail-buy-now:hover { filter: brightness(1.15); }
.benefits-box { border: 1px solid var(--tron-line); border-radius: var(--tron-radius-md); overflow: hidden; }
.benefits-box > div { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--tron-line); font-size: 12.5px; }
.benefits-box > div:last-child { border-bottom: 0; }
.benefits-box span { color: var(--tron-ink-soft); margin-inline-start: auto; text-align: end; }
.related-products { margin-top: 26px; }
.related-products h2 { font-size: 15px; margin: 0 0 12px; }
.related-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.related-card { border: 1px solid var(--tron-line); border-radius: var(--tron-radius-md); background: var(--tron-bg); text-align: start; cursor: pointer; padding: 10px; }
.related-pic { height: 90px; border-radius: var(--tron-radius-sm); display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; background: var(--tron-bg-soft); }
.related-pic img { width: 100%; height: 100%; object-fit: contain; }
.related-visual { width: 40px; height: 55px; border-radius: 8px; background: linear-gradient(145deg,#555,#151515); }
.related-card b { display: block; font-size: 12.5px; line-height: 1.3; }
.related-card > span:last-child { display: block; font-weight: 700; margin-top: 5px; color: var(--tron-accent); font-size: 13px; }

/* TRON KURDPHONE - Mobile Scroll Buttons */
.tron-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 100px;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px;
}
.tron-bento-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--tron-bg-soft);
  text-decoration: none;
  display: block;
}
.tron-bento-tile.large { grid-column: span 2; grid-row: span 2; }
.tron-bento-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 66%);
}
.tron-bento-tile.large .name { font-size: 16px; }

@media (min-width: 768px) {
  .tron-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; max-width: 1100px; padding: 0 24px; }
  .tron-bento-tile .name { font-size: 14px; }
  .tron-bento-tile.large .name { font-size: 20px; }
}

@media (max-width: 767px) {
  #tron-shop-by-category .tron-bento, .tron-bento {
    display: flex !important;
    grid-template-columns: none;
    grid-auto-rows: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 0 14px 6px;
    scrollbar-width: none;
  }
  .tron-bento::-webkit-scrollbar { display: none; }
  .tron-bento-tile {
    flex: 0 0 78%;
    scroll-snap-align: center;
    height: 190px;
  }
  .tron-bento-tile.large {
    grid-column: unset;
    grid-row: unset;
    flex-basis: 78%;
  }
}

.tron-swyc { padding: 0 14px; max-width: 1100px; margin: 0 auto; }
.tron-swyc-head { text-align: center; margin-bottom: 16px; }
.tron-swyc-head h2 { font-size: 20px; margin: 0 0 5px; color: var(--tron-ink); letter-spacing: -.3px; }
.tron-swyc-head p { font-size: 12px; color: var(--tron-ink-soft); margin: 0; line-height: 1.5; }
.tron-story-stack { display: flex; flex-direction: column; gap: 12px; }
.tron-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(158deg, rgba(9,11,13,.88), rgba(9,11,13,.46) 44%, rgba(9,11,13,.08) 76%),
    linear-gradient(0deg, rgba(9,11,13,.55) 0%, rgba(0,0,0,0) 46%);
}
.tron-story-card .eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}
.tron-story-card .cta svg { width: 14px; height: 14px; }

@media (min-width: 768px) {
  .tron-story-stack { flex-direction: row; }
  .tron-story-card { flex: 1; height: 320px; }
  .tron-story-card .cardtitle { font-size: 26px; }
}

/* 1. Global stability / accessibility */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--tron-accent-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 2. Header: prevent RTL flex surprises and small-screen squeeze */
header.top {
  min-width: 0;
}header.top .logo .logo-sub { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tron-ink-soft); border-inline-start: 1px solid var(--tron-line); padding-inline-start: 10px; margin-inline-start: 2px; white-space: nowrap; }

@media (max-width: 420px) {
  header.top .logo {
    font-size: 19px;
    gap: 5px;
  }

  header.top .logo .logo-o {
    width: 23px;
    height: 23px;
    font-size: 13px;
  }

  header.top .logo .logo-sub {
    display: none;
  }

  header.top .icons {
    gap: 3px;
  }

  header.top .ico {
    width: 32px;
    height: 32px;
  }
}

/* 3. Hero: fix the documented desktop ratio and avoid padded image gaps */
.hero.hero-slider {
  aspect-ratio: 16 / 7 !important;
  min-height: 0 !important;
}.hero-slider-track { position: relative; width: 100%; height: 100%; min-height: 0; }.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; padding: 0 !important; box-sizing: border-box; }.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; padding: 0; cursor: pointer; transition: width .25s ease,background .25s ease; min-width: 8px; min-height: 8px; }

@media (max-width: 760px) {
  .hero.hero-slider {
    aspect-ratio: 4 / 5 !important;
  }
}

/* 4. Product strip: keep it smooth without accidental page width */
.products {
  width: 100%;
  max-width: 1180px;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 20px;
}.card { background: var(--tron-bg); border: 1px solid var(--tron-line); border-radius: var(--tron-radius-lg); padding: 14px; width: 190px; flex: 0 0 190px; scroll-snap-align: start; transition: box-shadow var(--tron-transition), transform var(--tron-transition), border-color var(--tron-transition); min-width: 0; }

.card .pic,
.card .prod {
  contain: layout paint;
}

.card .name,
.card .label {
  overflow-wrap: anywhere;
}

@media (min-width: 761px) {
  .products {
    scrollbar-width: thin;
  }

  .products::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .products::-webkit-scrollbar-thumb {
    background: var(--tron-line);
    border-radius: var(--tron-radius-pill);
  }
}.tron-browse-toggle { margin-inline-start: 4px; padding: 7px 12px; border: 1px solid #c7621b; border-radius: var(--tron-radius-pill); background: #fff; color: #c7621b; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: var(--tron-transition); position: relative; margin-inline-end: 0; }.tron-browse-toggle::before { content: ''; position: absolute; left: auto; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--tron-line); right: auto; inset-inline-start: -6px; }.search-input { width: 100%; padding: 10px 14px; border: 1px solid var(--tron-line); border-radius: var(--tron-radius-pill); font-size: 14px; background: var(--tron-bg-soft); min-width: 0; }

/* 7. Overlays: modern bottom-sheet behavior without breaking desktop */
.overlay {
  padding: 0;
  overscroll-behavior: contain;
}

.overlay-head,
.overlay-body {
  min-width: 0;
}

.overlay-close,
.catalog-close {
  flex: 0 0 auto;
}

@media (min-width: 761px) {
  .overlay-head,
  .overlay-body {
    max-width: 520px;
  }
}

@media (max-width: 760px) {
  .overlay-head {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .overlay-body {
    max-height: min(82dvh, 760px);
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }.catalog-box { width: min(94vw, 640px); max-height: 90dvh; }
}

/* 8. Catalog: prevent long names/URLs from breaking the layout */
.catalog-box,
.catalog-items,
.item-card {
  min-width: 0;
}

.item-card h4,
.price-lock-link,
.catalog-video-link {
  overflow-wrap: anywhere;
}

/* 9. Cart/details: better mobile controls */
.cart-item {
  min-width: 0;
}

.cart-item > * {
  min-width: 0;
}.detail-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 18px; align-items: stretch; }

.detail-actions > * {
  min-width: 0;
}

@media (max-width: 380px) {
  .detail-actions {
    grid-template-columns: 1fr;
  }

  .detail-quantity {
    width: 100%;
    max-width: 160px;
  }
}

/* 10. Footer: remove direction-specific padding bug */
.footer-bottom {
  padding-inline: 0;
}

@media (max-width: 480px) {.footer-bottom { padding-left: 0; padding-bottom: 130px; }
}

/* 11. Floating video: safe-area spacing + consistent stacking */
.tron-video-widg {
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
}

@media (min-width: 761px) {
  .tron-video-widg {
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

.tvw-close,
.tvw-sound,
.tvw-full {
  min-width: 30px;
  min-height: 30px;
}

@media (max-width: 760px) {
  .tvw-close,
  .tvw-sound,
  .tvw-full {
    min-width: 30px;
    min-height: 30px;
  }
}

/* 12. WhatsApp: keep the button clear of phone safe areas */
.whatsapp-float {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}

@media (min-width: 761px) {
  .whatsapp-float {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* 13. Bento/story sections: spacing, text safety and touch feedback */
.tron-bento,
.tron-swyc {
  width: 100%;
  min-width: 0;
}

.tron-bento-tile,
.tron-story-card {
  min-width: 0;
  isolation: isolate;
}

.tron-bento-tile .name,
.tron-bento-tile .meta,
.tron-story-card .cardtitle,
.tron-story-card .cardsub {
  overflow-wrap: anywhere;
}

.tron-bento-tile:focus-visible,
.tron-story-card:focus-visible {
  outline: 3px solid var(--tron-accent-bright);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .tron-bento {
    grid-auto-rows: clamp(86px, 25vw, 110px);
    gap: 8px;
    padding-inline: 12px;
  }

  .tron-story-card {
    height: clamp(190px, 58vw, 240px);
  }
}/* 15. Final stacking order: interactive controls stay clickable */
.fullscreen-btn,.whatsapp-float{
  touch-action: manipulation;
}

/* TRON KURDPHONE v5.1 interaction polish */
html { scroll-behavior: smooth; }
button, a { touch-action: manipulation; }
.search-result-item, .item-card, .related-card { min-width: 0; }
.search-result-item h5, .search-result-item p, .item-card h4, .related-card b {
  overflow-wrap: anywhere;
}.price-lock-link { color: var(--tron-accent); font-weight: 700; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
@media (max-width: 600px) {
  #tron-hero-banner img { width: 100%; height: auto; }
  .products { padding-inline: 12px; gap: 12px; }
  .card { border-radius: 16px; padding: 11px; }
}

/* Added: tron-us.com-style polish for the bento category tiles (additive only, appended at end of file) */
.tron-bento-tile { border-radius: 20px; transition: box-shadow .22s cubic-bezier(.32,.72,0,1), transform .22s cubic-bezier(.32,.72,0,1); }.tron-bento-tile .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.tron-bento-tile .go svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .tron-bento-tile:hover { box-shadow: 0 12px 32px rgba(15,18,22,.25); transform: translateY(-3px); }
  .tron-bento-tile:hover .go { background: rgba(255,255,255,0.3); transform: translateX(2px); }
}
.tron-bento-tile:active { transform: scale(0.97); }
@media (max-width: 767px) {
  .tron-bento-tile .go { width: 28px; height: 28px; }
  .tron-bento-tile .go svg { width: 12px; height: 12px; }
}

/* Added: tron-us.com-style hero overlay (additive only, appended at end of file) */
#tron-hero-banner { position: relative; max-height: 560px; overflow: hidden; }
#tron-hero-banner picture, #tron-hero-banner img { max-height: 560px; object-fit: cover; width: 100%; height: 100%; background:#eef1f2; }#tron-hero-banner .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to left, rgba(8,10,12,0) 30%, rgba(8,10,12,.55) 62%, rgba(8,10,12,.88) 100%); z-index: 1; }#tron-hero-banner .hero-copy-inner { width: min(590px,92%); max-width: 420px; text-align: start; }#tron-hero-banner .hero-body { font-size: 15px; line-height: 1.5; margin: 0 0 26px; max-width: 320px; color: rgba(255,255,255,.85); margin-top: 12px; }#tron-hero-banner .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }#tron-hero-banner .hero-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; }#tron-hero-banner .hero-btn--solid { background: #fff; color: #111418; }#tron-hero-banner .hero-btn--ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent; backdrop-filter: blur(5px); }
@media (max-width: 767px) {
  #tron-hero-banner picture, #tron-hero-banner img { max-height: none; object-fit: cover; width: 100%; height: auto; background: transparent; }
}

/* Added: tron-us.com-style hover polish for the story-card promo tiles (additive only) */
.tron-story-card { transition: box-shadow .22s cubic-bezier(.32,.72,0,1), transform .22s cubic-bezier(.32,.72,0,1); }.tron-story-card .cta { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 8px 14px; transition: background .2s, transform .22s cubic-bezier(.32,.72,0,1); }
@media (hover: hover) and (pointer: fine) {
  .tron-story-card:hover { box-shadow: 0 14px 36px rgba(15,18,22,.3); transform: translateY(-3px); }
  .tron-story-card:hover .cta { background: rgba(255,255,255,0.26); }
}
.tron-story-card:active { transform: scale(0.98); }

/* =======================================================================
   v5.2 — consolidated mobile layout and template compatibility
   CSS only: product data, authentication and orders stay in the PHP/JS layer.
   ======================================================================= */
html { scroll-padding-top: 130px; }body { margin: 0; font-family: var(--tron-font); color: var(--tron-ink); background: var(--tron-bg); -webkit-font-smoothing: antialiased; min-width: 0; min-height: 100dvh; line-height: 1.6; }
[hidden] { display: none !important; }
button, input, textarea, select { color: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button:disabled, [aria-disabled="true"] { opacity: .6; cursor: not-allowed; }input, textarea, select { font-family: inherit; min-width: 0; font-size: 16px; }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; padding: 0; accent-color: var(--tron-accent); }
input[type="email"], input[type="tel"], #phone-code-input { direction: ltr; text-align: start; }
textarea { resize: vertical; }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 3px solid #147889; outline-offset: 3px; }
:where(.products,.tron-filter-row,.tron-view-row,.tron-browse-row,#category-buttons) { scrollbar-width: thin; }
:is(.overlay-close,.catalog-close,.cart-item-controls button,.detail-quantity button,.tvw-close,.tvw-sound,.tvw-full) { min-width: 44px; min-height: 44px; }
.overlay-close,.catalog-close { margin: 0; flex-shrink: 0; }.detail-quantity { width: 144px; height: auto; border: 1px solid var(--tron-line); border-radius: var(--tron-radius-pill); display: flex; align-items: center; justify-content: space-between; padding: 0 6px; margin-bottom: 14px; min-height: 48px; }
.card .pic img { width: 100%; height: 100% !important; object-fit: contain !important; }.card .name { font-size: 14px; font-weight: 600; color: var(--tron-accent); line-height: 1.6; }.card .label { font-size: 13px; font-weight: 500; color: var(--tron-ink-soft); margin: 3px 0 4px; line-height: 1.65; }
.card .price,.item-price,#detail-price { font-variant-numeric: tabular-nums; }
.search-result-info,.footer-col,.subscribe-form input { min-width: 0; }.subscribe-form button { border: none; background: transparent; color: var(--tron-ink); width: 32px; font-size: 18px; flex: 0 0 44px; min-height: 44px; }
.cart-item { flex-wrap: wrap; }
.cart-item > span:first-child { flex: 1 1 140px; overflow-wrap: anywhere; }.cart-item-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.wa-btn,.catalog-whatsapp-link { background: #14783d; color: #fff; }.item-stock { font-size: 12px; font-weight: 600; color: #267639; }.item-stock.low { color: #885a0f; }.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tron-bg-soft); color: var(--tron-ink); font-size: 15px; margin-inline-end: 10px; transition: background var(--tron-transition); }

/* Dots keep a small visual marker inside a separate, non-overlapping tap area. */
.product-dots { justify-content: flex-start; max-width: 100%; overflow-x: auto; gap: 0; padding: 4px 12px 20px; }
.product-dot,.product-dot.active,.hero-dot,.hero-dot.active { position: relative; flex: 0 0 32px; width: 32px; height: 44px; min-width: 32px; min-height: 44px; border: 0; border-radius: 0; background: transparent; }
.product-dot::after,.hero-dot::after { content: ""; position: absolute; width: 7px; height: 7px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 999px; background: #b5bfc3; }
.product-dot.active::after,.hero-dot.active::after { width: 20px; background: var(--tron-accent); }
.hero-dot::after { background: rgba(255,255,255,.65); }
.hero-dot.active::after { background: #fff; }.hero-dots { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 0; z-index: 2; max-width: calc(100% - 24px); overflow-x: auto; }
.hero-slide:not(.active) { visibility: hidden; }

/* A second header row preserves readable language choices and four touch targets. */
header.top { flex-wrap: wrap; }header.top .logo { display: flex; direction: ltr; align-items: center; gap: 5px; font-weight: 900; font-size: 26px; letter-spacing: -.5px; text-transform: none; color: var(--tron-ink); cursor: pointer; user-select: none; min-width: 0; flex: 0 1 auto; white-space: nowrap; }header.top .icons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-inline-start: auto; }header.top .ico { border: none; background: var(--tron-bg-soft); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tron-ink); transition: background var(--tron-transition), color var(--tron-transition); flex: 0 0 44px; }
.tron-language-switcher { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: #f3f4f6; direction: ltr; }
.tron-language-switcher button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; }
.tron-language-switcher button.active { background: #111; color: #fff; }
body.admin-bar header.top { top: 32px; }
@media(max-width:782px) { body.admin-bar header.top { top: 46px; } }
@media(max-width:600px) { body.admin-bar header.top { top: 0; } }

/* The title and description are siblings in the existing category markup. */
.tron-bento-tile .body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; align-items: end; }.tron-bento-tile .name { display: block; color: #fff; font-size: 15px; font-weight: 700; grid-column: 1; grid-row: 1; line-height: 1.5; }.tron-bento-tile .meta { display: block; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 500; margin-top: 2px; grid-column: 1; grid-row: 2; line-height: 1.5; }.tron-bento-tile .go { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; color: #fff; transition: background .2s, transform .22s cubic-bezier(.32,.72,0,1); grid-column: 2; grid-row: 1 / span 2; }
.tron-bento-tile::after,.tron-story-card::after { pointer-events: none; }.tron-story-card { position: relative; border-radius: 18px; overflow: hidden; height: auto; display: grid; text-decoration: none; background-size: cover; background-position: center; align-items: end; min-height: 260px; }.tron-story-card .cardbody { position: relative; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; inset: auto; width: 100%; }.tron-story-card .cardtitle { display: block; color: #fff; font-size: 19px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; }.tron-story-card .cardsub { display: block; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 500; line-height: 1.65; margin-bottom: 12px; max-width: 320px; }
html[dir="rtl"] :is(.hero-h1,.cardtitle,.eyebrow,.tk-title,.tk-pname) { letter-spacing: normal; }
html[dir="rtl"] .tron-bento-tile .go svg,html[dir="rtl"] .tron-story-card .cta svg { transform: scaleX(-1); }#tron-hero-banner .hero-copy { position: absolute; z-index: 2; min-height: min(72vh,760px); display: flex; align-items: center; max-width: 1240px; margin: auto; padding: 0 34px; line-height: 1.6; color: #fff; inset: 0; justify-content: flex-start; }#tron-hero-banner .hero-h1 { font-size: clamp(24px, 4.2vw, 42px); line-height: 1.4; letter-spacing: -0.02em; margin: 0; font-weight: 600; color: #fff; }
html[dir="rtl"] #tron-hero-banner .hero-scrim { background: linear-gradient(to right,rgba(8,10,12,0) 20%,rgba(8,10,12,.7) 65%,rgba(8,10,12,.9)); }

/* Shrinking flex children lets content scroll without pushing Close off screen. */
.overlay { height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); }.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--tron-line); border-radius: var(--tron-radius-lg) var(--tron-radius-lg) 0 0; flex: 0 0 auto; }.overlay-body { padding: 20px 22px 28px; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--tron-radius-lg) var(--tron-radius-lg); overscroll-behavior: contain; flex: 0 1 auto; min-height: 0; padding-bottom: max(28px,env(safe-area-inset-bottom)); }.catalog-box { background: var(--tron-bg); width: 92%; max-width: 640px; max-height: 90dvh; border-radius: var(--tron-radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }.catalog-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--tron-line); flex: 0 0 auto; position: sticky; top: 0; background: #fff; z-index: 2; }
.catalog-media,.catalog-controls { flex: 0 0 auto; }.catalog-items { padding: 18px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; flex: 0 0 auto; overflow: visible; }.catalog-controls { padding: 14px 22px; border-bottom: 1px solid var(--tron-line); min-width: 0; }#category-buttons { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }.cat-btn { border: 1px solid var(--tron-line); background: var(--tron-bg); color: var(--tron-ink-soft); padding: 6px 16px; border-radius: var(--tron-radius-pill); font-size: 13px; font-weight: 600; flex-shrink: 0; }.catalog-photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; margin-top: 14px; display: block; max-width: 100%; height: auto; }
body.tron-dialog-open { overflow: hidden; }body.tron-dialog-open :is(.whatsapp-float,#tronVideoWidget){ visibility: hidden; }
body:has(.overlay.open,.catalog-overlay.open,#tron-install-modal:not([hidden])) { overflow: hidden; }body:has(.overlay.open,.catalog-overlay.open,#tron-install-modal:not([hidden])) :is(.whatsapp-float,#tronVideoWidget){ visibility: hidden; }
.fullscreen-btn { z-index: 600; width: auto; height: auto; min-height: 44px; padding: 10px 16px; font-size: 14px; border-radius: 999px; }
.fullscreen-btn::before { content: none; }

@media(max-width:767px) {

  header.top { padding: 8px 12px; gap: 6px; }
  header.top .logo { font-size: 21px; }
  header.top .icons { gap: 2px; order: 1; }
  header.top .ico { width: 44px; height: 44px; }
  header.top .tron-language-switcher { order: 2; flex: 1 0 100%; width: 100%; max-width: 100%; justify-content: center; margin: 0; }
  header.top .tron-language-switcher button { font-size: 12px; padding: 8px; }
  #tron-hero-banner { display: flex !important; flex-direction: column; max-height: none; }
  #tron-hero-banner picture,#tron-hero-banner img { display: block; max-height: none; width: 100%; height: auto; }
  
  #tron-hero-banner .hero-copy { padding: 24px 20px; inset: 0; }
  #tron-hero-banner .hero-copy-inner { max-width: 100%; }
  #tron-hero-banner .hero-h1 { font-size: clamp(24px,6.5vw,32px); }
  #tron-hero-banner .hero-body { max-width: none; }
  #tron-hero-banner .hero-btn { min-height: 44px; }
  .products { scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
  .products .card { flex-basis: 78%; width: 78%; }
  .tron-bento { grid-auto-rows: minmax(128px,auto); }
  .tron-story-card { height: auto; min-height: 240px; }
  .overlay-head,.overlay-body { width: 100%; }
  .catalog-items { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 12px; }
  .item-card { padding: 10px; }
  .footer-container { gap: 24px; }
  .footer-col { flex-basis: 100%; }
  .footer-col ul li a { display: inline-flex; align-items: center; min-height: 44px; }
  .tron-view-row,.tron-filter-row { flex-wrap: nowrap; overflow-x: auto; }
  .search-input,.catalog-search { font-size: 16px; min-height: 44px; }
}
@media(max-width:340px) {
  header.top .logo { font-size: 18px; gap: 3px; }
  header.top .logo .logo-sub { display: none; }
  header.top .icons { gap: 0; }
  .tron-bento { grid-template-columns: minmax(0,1fr); }
  .tron-bento-tile.large { grid-column: auto; grid-row: span 2; }
}
@media(hover:none) {
  .card:hover { transform: none; box-shadow: none; border-color: var(--tron-line); }
  header.top .ico:hover { background: var(--tron-bg-soft); color: var(--tron-ink); }
}
@media(prefers-reduced-motion:reduce) {
  html,body,*,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Filter/toggle chips normal-size fix (mobile) - user-approved override, appended at end of file */
/* Fix regression from horizontal-scroll chips (caused clipping on mobile RTL) - revert to wrap, no-shrink */
@media (max-width: 767px) {.tron-view-row,
  .tron-filter-row { flex-wrap: wrap !important; overflow-x: visible !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 0 !important; }.tron-view-btn,
  .tron-filter-btn,
  .tron-browse-toggle { flex-shrink: 0 !important; white-space: nowrap !important; }
}

/* Store locator normal-size fix (mobile) - RESTORED, was accidentally lost in an earlier save */

/* TRON header logo image sizing */
.logo-img { height: 40px; width: auto; vertical-align: middle; display: inline-block; }
.logo { display: flex; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .logo-img { height: 32px; }
}

@media (max-width: 760px) {
  .tron-browse-row .tron-filter-btn { font-size: 12.5px; padding: 11px 18px; min-height: 46px; border-width: 1.6px; }
  .tron-browse-row { height: auto !important; min-height: 68px; overflow-y: visible; align-items: center; }
}

/* social icons fit fix - 7 icons, 3x size */
.social-icons { display:flex !important; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; max-width:100%; }
.social-icons a, .social-icons .social-icon-disabled { width:84px !important; height:84px !important; margin-inline-end:0 !important; }
.social-icons a svg { width:40px !important; height:40px !important; }

/* TRON: shop popup single scrollable sheet + photo gallery */
.shop-gallery { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#tron-hero-banner picture,#tron-hero-banner img { width:100%; }
/* v7.1.0 mobile safety: the old control must never reappear,even if a cache
   serves an earlier inline rule. Avoid a fixed artificial hero height. */
@media (max-width:767px){
  #tron-hero-banner { min-height:0 !important; background:#eef1f2; }
  #tron-hero-banner picture,#tron-hero-banner picture img { min-height:0 !important; }
  #tron-hero-banner .hero-copy { min-height:0 !important; }
}
/* If a remote legacy hero ever fails, preserve a branded, readable hero rather
   than leaving customers with a black or empty phone screen. */
#tron-hero-banner.tron-hero-image-failed{min-height:520px!important;background:radial-gradient(circle at 78% 22%,#1d8b9d 0,rgba(29,139,157,.14) 25%,transparent 45%),linear-gradient(135deg,#111920,#087d91 58%,#d8eef0)}
#tron-hero-banner.tron-hero-image-failed picture{display:none!important}
@media(max-width:767px){#tron-hero-banner.tron-hero-image-failed{min-height:560px!important}}

/* Text must never inherit an icon font. The previous live stylesheet allowed
   a plugin/icon rule to turn normal Kurdish, Arabic and English letters into
   symbols. Keep SVG paths untouched, but force readable system text fonts for
   all public interface controls and content. */
:where(body,body button,body input,body textarea,body select,body a,body p,body h1,body h2,body h3,body h4,body h5,body h6,body li,body span,body label,body small,body strong,body b) {
  font-family: Arial,"Noto Sans Arabic","Noto Sans",Tahoma,sans-serif !important;
  font-variant-ligatures: normal;
}

/* Iraq map on phones: one finger controls the map itself in every direction;
   the rest of the page still scrolls normally when touched outside the map. */

/* Mobile navigation: large, native disclosure controls are reliable on touch
   screens and do not rely on a page navigation merely to reveal categories. */
.tron-mobile-menu .menu-item,.tron-mobile-nav summary{min-height:48px;display:flex;align-items:center;padding:0 4px;font-weight:750;color:#17191c;text-decoration:none}.tron-mobile-rule{height:1px;background:#e5e7eb;margin:10px 0}.tron-mobile-nav{border-bottom:1px solid #eceff1}.tron-mobile-nav summary{cursor:pointer;list-style:none}.tron-mobile-nav summary::-webkit-details-marker{display:none}.tron-mobile-nav summary::after{content:'+';margin-inline-start:auto;font-size:22px;font-weight:400}.tron-mobile-nav[open] summary::after{content:'−'}.tron-mobile-nav a{display:block;min-height:44px;padding:10px 14px;color:#3f4850;text-decoration:none;font-size:14px}.tron-mobile-nav a:active{background:#f2f5f6}

/* Mobile fix: hero scrim was too dark over the new beach hero photo, hiding it almost entirely on phones */
@media (max-width: 600px) {
  html[dir="rtl"] #tron-hero-banner .hero-scrim,
  #tron-hero-banner .hero-scrim {
    background: linear-gradient(to top, rgba(8,10,12,.5) 0%, rgba(8,10,12,0) 55%) !important;
  }
  #tron-hero-banner { max-height: 420px !important; }
  #tron-hero-banner picture img { object-position: 30% 40% !important; }
}

/* Mobile fix: on phones the hero text panel (solid dark bg) was absolutely stacked over the photo instead of below it, hiding the photo completely. Put the photo in normal flow above the text panel. */
/* Mobile fix: shrink the dark text panel under the hero photo so it takes up less of the screen */
@media (max-width: 767px) {
  #tron-hero-banner .hero-cta { gap: 8px !important; }
}

/* Mobile fix v3: no separate black panel at all. Show the full uncropped photo, with the text overlaid directly on it using only a soft bottom gradient (like desktop), not a solid block. */
@media (max-width: 767px) {#tron-hero-banner { max-height: none; display: block; position: relative; overflow: hidden; }#tron-hero-banner picture { position: relative; inset: auto; display: block; width: 100%; height: auto; }#tron-hero-banner picture img { position: static; width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover; display: block; }#tron-hero-banner .hero-copy-inner { max-width: 100% !important; }
}

/* Mobile fix v5: smaller heading text, and shrink the dark gradient so it only sits near the bottom behind the text, not across most of the photo */
@media (max-width: 767px) {#tron-hero-banner .hero-h1 { font-size: 15px !important; line-height: 1.2 !important; margin: 0 0 4px !important; letter-spacing: normal !important; }#tron-hero-banner .hero-body { font-size: 11px !important; line-height: 1.3 !important; margin: 0 0 8px !important; }#tron-hero-banner .hero-cta a, #tron-hero-banner .hero-cta button { padding: 6px 12px !important; font-size: 12px !important; }#tron-hero-banner .hero-copy { position: absolute !important; padding: 26px 14px 12px !important; inset: auto 0 0 0 !important; z-index: 3 !important; min-height: 0 !important; display: block !important; background: linear-gradient(to top, rgba(8,10,12,.82) 0%, rgba(8,10,12,.2) 65%, rgba(8,10,12,0) 100%) !important; }
}.shop-gallery img { width: 100%; max-width: 260px; height: 140px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.shop-guarantee{font-size:11px;color:#0f766e;background:#f1f5f4;padding:5px 8px;border-radius:8px;margin:4px 0;display:none}

/* TRON: phone & map repair (mobile-only, from developer-provided repair package) */
@media (max-width:767px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
  body:not(.tron-dialog-open){position:static!important;overflow-y:auto!important}
}
/*
 * TRON KURDPHONE — safe phone-first map and scrolling repair.
 * Paste this complete block at the END of the existing style.css file.
 * Do not delete or replace the existing style.css content.
 */

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    touch-action: pan-y pinch-zoom;
  }

  body:not(.tron-dialog-open) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tron-shop-list,
  .shop-results,
  .shop-carousel {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .tron-shop-card,
  .shop-result,
  .shop-carousel-item {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
  }

  .tron-shop-card img,
  .shop-result img,
  .shop-carousel-item img {
    width: 100% !important;
    height: 88px !important;
    object-fit: cover !important;
  }
}

/* TRON FINAL MOBILE POPUP FIX v2 - highest-specificity override, must stay last in file */

/* TRON MOBILE MAP POPUP - single source of truth, do not duplicate */

/* ===== TRON MAP & STORE-LOCATOR: single consolidated source, do not duplicate elsewhere ===== */
/* Store locator */
#tron-locator{display:flex;gap:16px;border:1px solid var(--tron-line);border-radius:var(--tron-radius-lg);overflow:hidden;height:720px;min-height:420px;}
#store-list{width:100%;flex-shrink:0;border-inline-end:none;display:flex;flex-direction:column;border-bottom:1px solid var(--tron-line);max-height:260px;min-height:0;background:#fff;}
#list-items-wrapper{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;min-height:0;overscroll-behavior:contain;}
.list-item{padding:14px;border-bottom:1px solid var(--tron-line);cursor:pointer;transition:background var(--tron-transition);min-width:0;}
.list-item:hover, .list-item.active{background:var(--tron-bg-soft);}
.list-item .list-img{width:100%;height:110px;object-fit:cover;border-radius:var(--tron-radius-md);margin-bottom:8px;}
.list-item h4{margin:4px 0;font-size:14px;}
.list-item .stars{color:var(--tron-accent-bright);font-size:13px;letter-spacing:1px;direction:ltr;unicode-bidi:isolate;display:inline-block;}
.list-item .address{font-size:12px;color:var(--tron-ink-soft);}
#iraq-map{flex:1;min-height:0;background:var(--tron-bg-soft);touch-action:pan-y;min-width:0;isolation:isolate;}
.map-tap-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(30, 30, 30, .28);color:#fff;font-size:14px;font-weight:600;z-index:5;pointer-events:none;border-radius:inherit;}
/* Map popups (Leaflet content, styled to match the brand) */
.shop-popup h3{margin:0 0 4px;font-size:15px;}
.shop-popup img{border-radius:var(--tron-radius-sm);margin:6px 0;max-height:130px;width:100%;object-fit:cover;}
.shop-popup .stars{color:var(--tron-accent-bright);font-size:11px !important;direction:ltr;unicode-bidi:isolate;display:inline-block;}
.popup-actions{display:flex;gap:4px !important;margin-top:6px !important;flex-wrap:wrap !important;}
.popup-btn{flex:1;text-align:center;padding:6px 6px !important;border-radius:var(--tron-radius-sm);font-size:11px !important;font-weight:600;border:1px solid var(--tron-line);background:var(--tron-bg);color:var(--tron-ink);}
.popup-btn.btn-primary{background:var(--tron-accent);color:var(--tron-accent-ink);border-color:var(--tron-accent);width:100%;margin-bottom:6px;}
.popup-btn.btn-directions, .popup-btn.btn-streetview{color:var(--tron-accent);}
#tron-locator{flex-direction:column;}
/* 5. Store locator: cleaner sizing and correct logical-direction spacing */
#tron-locator{width:100%;min-width:0;position:relative;}
#store-list,
#list-items-wrapper,
#iraq-map{min-width:0;}
.list-item h4,
.list-item .address{overflow-wrap:anywhere;}
/* Leaflet must stay inside the locator instead of creating horizontal overflow. */
#iraq-map .leaflet-container{max-width:100%;}
.tron-bento-tile, .tron-story-card, .card, .list-item, .tron-filter-btn,
.tron-view-btn, .popup-btn, .cat-btn, .add-cart-btn, .buy-now-btn{-webkit-tap-highlight-color:transparent;}
:where(.card,.list-item,.search-result-item):focus-visible{outline-offset:-3px;}
:where(.tron-filter-btn,.tron-view-btn,.tron-browse-toggle,.cat-btn,.tab,.popup-btn,.hero-btn,.tron-auth-tab,.price-lock-link){min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
/* One bounded locator layout, with a usable map and scrollable shop panel. */
#tron-locator{isolation:isolate;min-width:0;}
#iraq-map.leaflet-container{max-width:100%;}
#tron-locator:is(:fullscreen,.is-fullscreen){width:100%;height:100dvh;min-height:0;border:0;border-radius:0;}
#tron-locator.is-fullscreen{position:fixed;inset:0;z-index:10000;background:#fff;}
#tron-locator:is(:fullscreen,.is-fullscreen) #iraq-map{min-height:0;touch-action:none;}
html.map-window-mode,html.map-window-mode body{height:100%;overflow:hidden;}html.map-window-mode :is(.site,.site-footer,.tron-end-showcase,.whatsapp-float,#tronVideoWidget,#tron-install-modal){display:none !important;}
html.map-window-mode #store-locator-section{position:fixed;inset:0;width:100%;max-width:none !important;margin:0;padding:calc(64px + env(safe-area-inset-top)) 0 0 !important;background:#fff;z-index:1000;}
html.map-window-mode #store-locator-section > h2{display:none;}
html.map-window-mode #store-locator-section #map-fullscreen-btn{display:inline-flex !important;position:absolute;top:max(10px,env(safe-area-inset-top)) !important;inset-inline-end:max(12px,env(safe-area-inset-right));margin:0;z-index:1010;}
html.map-window-mode #tron-locator{width:100%;height:100% !important;min-height:0 !important;border:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom);}
html.map-window-mode #iraq-map{min-height:0 !important;height:auto !important;touch-action:none;}
.shop-popup .popup-actions{flex-wrap:wrap;}
.shop-popup .popup-btn{min-height:44px;min-width:0;font-size:13px;padding:8px;}
.shop-popup p{font-size:13px;}
/* Fix: map drag left/right blocked in custom "Fullscreen" map-window-mode (touch-action was pan-y) */
html.map-window-mode #iraq-map{touch-action:none !important;}
/* Fix: shop map popup card too big on mobile (banner image had no height limit) */
.shop-popup img{width:100% !important;height:70px !important;object-fit:cover !important;margin:4px 0 !important;}
.shop-popup h3{font-size:13px !important;margin:0 0 2px !important;}
.shop-popup{font-size:12px !important;}
/* TRON: shop popup 2-page toggle */
.shop-popup-pages{position:relative;overflow:hidden;}
.shop-popup-pages .spp-page1{transition:transform .3s ease;}
.shop-popup-pages .spp-page2{position:absolute;top:0;left:0;width:100%;transform:translateX(100%);transition:transform .3s ease;}
.shop-popup-pages.show-page2 .spp-page1{transform:translateX(-100%);}
.shop-popup-pages.show-page2 .spp-page2{transform:translateX(0);}
.popup-page-nav{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;}
.popup-page-dot{width:7px;height:7px;border-radius:50%;background:#d0d5db;}
.popup-page-dot.active{background:#0f766e;}
.popup-nav-btn{border:none;background:#f1f5f4;color:#0f766e;font-weight:600;font-size:13px;padding:6px 14px;border-radius:20px;cursor:pointer;}
.shop-popup-body{max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:8px;}
/* TRON: let single-finger vertical swipe scroll the page over the map; pinch/2-finger still works the map; full drag inside fullscreen */
.leaflet-container{touch-action:pan-y;}
html.map-window-mode .leaflet-container{touch-action:none;}
#iraq-map .shop-popup{width:100%;min-width:0;}
/* Applied by the lightweight map observer below.  This prevents the optional
   video card from covering marker controls while a customer is using the map. */
#tronVideoWidget.tron-video-suppressed{opacity:0 !important;pointer-events:none !important;visibility:hidden !important;}
/* TRON: shop popup expand toggle */
.shop-popup{transition:max-width .25s ease;}
#iraq-map .shop-popup.expanded .shop-gallery img{width:130px!important;height:130px!important;}
.shop-popup.expanded .shop-guarantee{display:block;}
.popup-expand-btn{display:block;width:100%;text-align:center;background:#f1f5f4;color:#0f766e;font-weight:700;font-size:12px;padding:6px;border-radius:20px;border:none;margin:6px 0 0;cursor:pointer;}

@media (max-width:767px){
#tron-locator{flex-direction:column;height:auto;min-height:0 !important;}
#store-list{width:100%;flex:0 0 auto;max-height:none;overflow:visible;border-inline-end:0;}
#list-items-wrapper{display:flex;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;gap:10px;padding:8px 12px 12px;scroll-snap-type:x proximity;scroll-padding-inline:12px;}
.list-item{flex:0 0 86%;padding:12px;border:1px solid var(--tron-line);border-radius:12px;scroll-snap-align:start;}
.list-item .list-img{height:100px;}
.list-item h4{font-size:14px;}
.list-item .address{font-size:13px;line-height:1.6;}
#iraq-map{flex:0 0 auto;min-height:300px!important;height:min(48svh,390px)!important;}
html.map-window-mode #tron-locator,#tron-locator:is(:fullscreen,.is-fullscreen){flex-direction:column;}
html.map-window-mode #store-list,#tron-locator:is(:fullscreen,.is-fullscreen) #store-list{flex:0 1 45% !important;max-height:45% !important;min-height:0;overflow-y:auto !important;}
html.map-window-mode #iraq-map,#tron-locator:is(:fullscreen,.is-fullscreen) #iraq-map{flex:1 1 0;height:auto !important;min-height:0 !important;}
#list-items-wrapper .list-item{flex:0 0 62% !important;padding:10px !important;}
#list-items-wrapper .list-item .list-img{height:90px !important;}
#iraq-map,#iraq-map .leaflet-container{touch-action:pan-y!important;}
#store-locator-section,#tron-locator,#store-list{max-width:100%;min-width:0;}
html.map-window-mode #iraq-map,html.map-window-mode #iraq-map .leaflet-container{touch-action:none!important;}
#map-tap-hint{display:none!important;}
#iraq-map .shop-gallery,#iraq-map .shop-popup video,#iraq-map .popup-expand-btn{display:block;}
#iraq-map .shop-popup-body{max-height:min(38dvh,280px);overflow-y:auto;}
#store-list #list-items-wrapper{max-width:100%!important;gap:8px!important;padding:8px 12px 10px!important;overflow-x:auto!important;overscroll-behavior-x:contain;}
#store-list #list-items-wrapper .list-item{flex:0 0 min(72vw,250px)!important;min-height:126px!important;height:auto!important;padding:10px!important;box-sizing:border-box!important;overflow:hidden!important;}
#store-list #list-items-wrapper .list-img{display:block!important;width:72px!important;height:72px!important;float:inline-start!important;margin-inline-end:10px!important;object-fit:cover!important;border-radius:9px!important;}
#store-list #list-items-wrapper h4{margin:0 0 4px!important;font-size:14px!important;line-height:1.3!important;}
#store-list #list-items-wrapper .address{font-size:12px!important;line-height:1.35!important;}
#iraq-map{width:100% !important;max-width:100% !important;min-height:300px !important;height:clamp(300px, 58svh, 420px) !important;max-height:420px !important;touch-action:pan-y !important;overscroll-behavior:contain;}
.tron-map-fullscreen #iraq-map,
  #iraq-map:fullscreen{height:100svh !important;max-height:none !important;touch-action:none !important;}
#iraq-map .leaflet-control-zoom a{min-width:44px !important;min-height:44px !important;line-height:44px !important;}
}

/* TRON MOBILE HERO FIX v2: container height must hug the image, not force 72svh (was leaving a huge empty gap between the image and the overlaid text on short screens) */
@media (max-width:767px){
#tron-hero-banner{min-height:0!important;max-height:none!important;}
}

/* Keep the shop locator inside the page; fullscreen is opt-in. */
#store-locator-section{box-sizing:border-box;width:min(1280px,100%);margin:0 auto;padding:20px 18px 32px!important}
#tron-locator{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-rows:minmax(420px,min(68svh,680px));gap:0;width:100%;height:auto!important;min-height:0!important;overflow:hidden;border:1px solid var(--tron-line);border-radius:16px}
#store-list{grid-column:1;grid-row:1;display:flex;flex-direction:column;width:auto;min-width:0;min-height:0;max-height:none!important;height:auto;overflow:hidden;border:0;border-inline-end:1px solid var(--tron-line);border-bottom:0}
#list-items-wrapper{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
#iraq-map{grid-column:2;grid-row:1;width:100%;height:100%!important;min-width:0;min-height:0!important;max-height:none!important;touch-action:pan-y;overscroll-behavior:contain}
#iraq-map.leaflet-container{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important}
#store-locator-section>#map-fullscreen-btn{position:static;display:flex;align-items:center;justify-content:center;width:max-content;margin:0 0 12px auto}
.tron-map-open-btn{display:none}
@media(max-width:767px){
 .tron-map-open-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 12px;border:1px solid var(--tron-accent);border-radius:var(--tron-radius-pill);background:var(--tron-accent);color:var(--tron-accent-ink);font-size:12.5px;font-weight:600;cursor:pointer}
 html.map-window-mode .tron-map-open-btn{display:none}
}

#iraq-map{overscroll-behavior:auto}
#iraq-map .leaflet-popup-content-wrapper{box-sizing:border-box;min-width:0}
#iraq-map .leaflet-popup-content{box-sizing:border-box;overflow-wrap:anywhere}
#iraq-map .leaflet-popup-close-button{z-index:3}
#iraq-map .shop-popup{box-sizing:border-box;width:100%;min-width:0;overflow-wrap:anywhere}
#iraq-map .shop-popup h3{line-height:1.3;overflow-wrap:anywhere}
#iraq-map .shop-popup:not(.expanded) .shop-guarantee,
#iraq-map .shop-popup:not(.expanded) video,
#iraq-map .shop-popup:not(.expanded) .shop-gallery img:nth-child(n+2){display:none!important}
#iraq-map .shop-popup .popup-actions{display:flex;flex-wrap:wrap;gap:8px}
#iraq-map .shop-popup .popup-actions>*{flex:1 1 140px;min-width:0;min-height:44px}
#iraq-map .shop-popup .popup-expand-btn{min-height:44px;margin-top:8px}
@media(min-width:768px){
  #iraq-map .leaflet-popup{max-width:min(360px,calc(100% - 24px))!important}
  #iraq-map .leaflet-popup-content{width:auto!important;max-width:min(320px,calc(100vw - 48px))!important;max-height:min(58dvh,480px)!important;margin:12px!important;overflow:auto!important}
  #iraq-map .shop-gallery{display:flex;gap:8px;max-width:100%;overflow-x:auto}
  #iraq-map .shop-gallery img{max-width:100%;object-fit:cover}
}
@media(max-width:767px){
  #store-locator-section{width:100%;padding-inline:10px!important;overflow:hidden}
  #tron-locator{display:flex!important;flex-direction:column;gap:0;width:100%;height:auto!important;min-height:0!important;overflow:hidden}
  #store-list{display:flex;flex:0 0 auto;width:100%;max-height:none!important;min-height:0;overflow:hidden;border:0;border-bottom:1px solid var(--tron-line)}
  #store-list #list-items-wrapper{display:flex;flex:0 0 auto;gap:8px;width:100%;max-width:100%;min-height:0;padding:8px 10px 10px;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  #store-list #list-items-wrapper .list-item{flex:0 0 min(76vw,280px)!important;width:min(76vw,280px);min-width:0;min-height:118px;height:auto;padding:10px;overflow:hidden;box-sizing:border-box;scroll-snap-align:start}
  #store-list #list-items-wrapper .list-img{display:block;width:68px;height:68px;margin:0 10px 6px 0;float:inline-start;object-fit:cover;border-radius:9px}
  #store-list #list-items-wrapper h4{margin:0 0 4px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  #store-list #list-items-wrapper .address{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
  #iraq-map,#iraq-map.leaflet-container{position:relative;width:100%!important;height:clamp(320px,52svh,460px)!important;min-height:320px!important;max-height:460px!important;touch-action:pan-y!important;overscroll-behavior:auto!important}
  /* Each selected shop becomes a readable bottom card within the map.
     The older marker-anchored rules caused the card to get squeezed/clipped
     against the screen edge on narrow phones. */
  #iraq-map .leaflet-popup{position:absolute!important;top:auto!important;right:8px!important;left:8px!important;bottom:8px!important;inset-inline:8px!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;transform:none!important;z-index:900!important}
  #iraq-map .leaflet-popup-tip-container{display:none!important}
  #iraq-map .leaflet-popup-content-wrapper{display:block;width:100%!important;min-width:0!important;max-width:none!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(0,0,0,.24)!important}
  #iraq-map .leaflet-popup-content{display:block;width:auto!important;min-width:0!important;max-width:none!important;max-height:min(48svh,400px)!important;margin:12px 14px!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;box-sizing:border-box!important}
  #iraq-map .shop-popup-body{max-height:none!important;overflow:visible!important;padding:0 2px 2px!important}
  #iraq-map .shop-gallery{display:flex;gap:8px;max-width:100%;max-height:128px;overflow-x:auto;overscroll-behavior-x:contain}
  #iraq-map .shop-gallery img{display:block;flex:0 0 min(78%,300px);width:min(78%,300px)!important;height:116px!important;max-height:116px!important;object-fit:cover!important;border-radius:10px!important}
  #iraq-map .shop-popup video{display:block;width:100%;max-height:180px;object-fit:contain}
  #iraq-map .shop-popup .popup-actions>*{flex:1 1 42%;font-size:13px;line-height:1.25}
  #iraq-map .leaflet-control-zoom a{min-width:44px!important;min-height:44px!important;line-height:44px!important}
  html.map-window-mode #store-locator-section{padding:calc(56px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}
  html.map-window-mode #tron-locator{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(145px,34dvh) minmax(0,1fr);width:100%;height:100%!important;min-height:0!important}
  html.map-window-mode #store-list{grid-column:1;grid-row:1;width:100%;height:auto;max-height:none!important;min-height:0;overflow:hidden}
  html.map-window-mode #list-items-wrapper{flex:0 0 auto;overflow-x:auto!important;overflow-y:hidden}
  html.map-window-mode #iraq-map,html.map-window-mode #iraq-map.leaflet-container{grid-column:1;grid-row:2;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;touch-action:none!important}
  html.map-window-mode #iraq-map .leaflet-popup{bottom:max(8px,env(safe-area-inset-bottom))!important}
}
#iraq-map .leaflet-popup-content-wrapper{border-radius:12px}
#iraq-map .leaflet-popup-content{width:min(260px,calc(100vw - 112px))!important;max-height:min(45dvh,360px);overflow-x:hidden;overflow-y:auto;box-sizing:border-box;overflow-wrap:anywhere}
#iraq-map .leaflet-popup-content:has(.shop-popup.expanded){width:min(290px,calc(100vw - 112px))!important}
#iraq-map .shop-gallery{display:flex;max-width:100%;overflow-x:auto}
#iraq-map .popup-expand-btn{display:block;width:100%}
html.map-window-mode,html.map-window-mode body{width:100%;height:100%;min-height:0;overflow:hidden}
html.map-window-mode :is(.site,.site-footer,.tron-end-showcase,.whatsapp-float,#tronVideoWidget,#tron-mobile-scroll,#tron-install-modal){display:none!important}
html.map-window-mode #store-locator-section{position:fixed!important;inset:0!important;z-index:1000;width:100%;max-width:none!important;height:100dvh;min-height:0;margin:0!important;padding:calc(60px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;display:flex;flex-direction:column;gap:0;background:#fff}
html.map-window-mode #store-locator-section>h2{display:none}
html.map-window-mode #store-locator-section>#map-fullscreen-btn{position:fixed;top:max(8px,env(safe-area-inset-top));inset-inline-end:max(12px,env(safe-area-inset-right));z-index:1010;min-height:44px;margin:0}
html.map-window-mode #tron-locator{display:grid!important;flex:1 1 auto;grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;height:auto!important;min-height:0!important}
html.map-window-mode #store-list{grid-column:1;grid-row:1;width:auto;min-height:0;max-height:none!important;overflow:hidden}
html.map-window-mode #iraq-map{grid-column:2;grid-row:1;width:100%;height:100%!important;min-height:0!important;touch-action:none}
html.map-window-mode #iraq-map.leaflet-container{height:100%!important;min-height:0!important;touch-action:none}
@media(max-width:767px){
 #store-locator-section{padding:14px 10px 24px!important}
 #tron-locator{display:flex;flex-direction:column;grid-template-columns:minmax(0,1fr);grid-template-rows:auto clamp(320px,58svh,480px);height:auto!important;min-height:0!important;overflow:hidden}
 #store-list{width:100%;max-height:none!important;min-height:0;flex:0 0 auto;overflow:hidden;border:0;border-bottom:1px solid var(--tron-line)}
 #list-items-wrapper{display:flex;flex:0 0 auto;flex-direction:row;gap:8px;max-width:100%;min-height:0;padding:8px 12px 10px;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
 #store-list #list-items-wrapper .list-item{flex:0 0 min(72vw,250px)!important;width:min(72vw,250px);min-width:0;min-height:112px;height:auto;padding:10px;overflow:hidden;border:1px solid var(--tron-line);border-radius:12px;scroll-snap-align:start}
 #store-list #list-items-wrapper .list-img{display:block;width:64px;height:64px;margin:0 10px 6px 0;float:inline-start;object-fit:cover;border-radius:8px}
 #store-list #list-items-wrapper h4{margin:0 0 4px;font-size:14px;line-height:1.3}
 #store-list #list-items-wrapper .address{font-size:12px;line-height:1.35}
 #iraq-map{flex:0 0 auto;width:100%;height:clamp(320px,58svh,480px)!important;min-height:320px!important;max-height:480px!important;touch-action:pan-y}
 #iraq-map.leaflet-container{height:clamp(320px,58svh,480px)!important;min-height:320px!important;max-height:480px!important}
 #iraq-map .leaflet-popup-content{max-height:min(52dvh,calc(58svh - 84px))}
 html.map-window-mode #store-locator-section{padding:calc(56px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}
 html.map-window-mode #tron-locator{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,34dvh) minmax(0,1fr);gap:0}
 html.map-window-mode #store-list{grid-column:1;grid-row:1;width:100%;max-height:none!important;min-height:0;overflow:hidden;border:0;border-bottom:1px solid var(--tron-line)}
 html.map-window-mode #list-items-wrapper{flex:0 0 auto;overflow-x:auto!important;overflow-y:hidden}
 html.map-window-mode #iraq-map,html.map-window-mode #iraq-map.leaflet-container{grid-column:1;grid-row:2;width:100%;height:100%!important;min-height:0!important;max-height:none!important;touch-action:none}
}

/* TRON KURDPHONE Map Repair 8.0.5
   The authoritative responsive map rules are appended at the end of this file. */

/* TRON KURDPHONE map repair 8.0.5: final overrides for the locator only. */
#store-locator-section,#tron-locator,#store-list,#iraq-map{box-sizing:border-box;min-width:0;max-width:100%}
#store-locator-section{width:min(1180px,100%);margin-inline:auto;padding:20px!important;overflow:visible}
#tron-locator{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);grid-template-rows:minmax(430px,min(68svh,700px));gap:0;width:100%;height:auto!important;min-height:0!important;overflow:hidden;border:1px solid var(--tron-line);border-radius:16px}
#store-list{grid-column:1;grid-row:1;display:flex;flex-direction:column;width:auto;min-width:0;min-height:0;max-height:none!important;height:auto;overflow:hidden;border:0;border-inline-end:1px solid var(--tron-line);border-bottom:0}
#list-items-wrapper{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
#iraq-map,#iraq-map.leaflet-container{grid-column:2;grid-row:1;position:relative;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;touch-action:pan-y;overscroll-behavior:contain}
#store-locator-section>#map-fullscreen-btn{position:static;display:flex;align-items:center;justify-content:center;width:max-content;min-height:44px;margin:0 0 12px auto}
.tron-map-open-btn{display:none}
#iraq-map .leaflet-popup-content-wrapper{box-sizing:border-box;min-width:0;border-radius:14px}
#iraq-map .leaflet-popup-content{box-sizing:border-box;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto}
#iraq-map .leaflet-popup-close-button{z-index:3;min-width:36px;min-height:36px}
#iraq-map .shop-popup{box-sizing:border-box;width:100%;min-width:0;overflow-wrap:anywhere}
#iraq-map .shop-popup h3{line-height:1.3;overflow-wrap:anywhere}
#iraq-map .shop-popup:not(.expanded) .shop-guarantee,
#iraq-map .shop-popup:not(.expanded) video,
#iraq-map .shop-popup:not(.expanded) .shop-gallery img:nth-child(n+2){display:none!important}
#iraq-map .shop-popup .popup-actions{display:flex;flex-wrap:wrap;gap:8px}
#iraq-map .shop-popup .popup-actions>*{flex:1 1 140px;min-width:0;min-height:44px}
#iraq-map .shop-popup .popup-expand-btn{display:block;width:100%;min-height:44px;margin-top:8px}
@media(min-width:768px){
  #iraq-map .leaflet-popup{max-width:min(380px,calc(100% - 24px))!important}
  #iraq-map .leaflet-popup-content{width:auto!important;max-width:min(340px,calc(100vw - 64px))!important;max-height:min(58dvh,480px)!important;margin:12px!important}
  #iraq-map .shop-gallery{display:flex;gap:8px;max-width:100%;overflow-x:auto}
  #iraq-map .shop-gallery img{max-width:100%;object-fit:cover}
}
@media(max-width:767px){
  .tron-map-open-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 12px;border:1px solid var(--tron-accent);border-radius:var(--tron-radius-pill);background:var(--tron-accent);color:var(--tron-accent-ink);font-size:12.5px;font-weight:700;cursor:pointer}
  html.map-window-mode .tron-map-open-btn{display:none}
  #store-locator-section{width:100%;padding:14px 10px 24px!important;overflow:hidden}
  #tron-locator{display:flex!important;flex-direction:column;gap:0;width:100%;height:auto!important;min-height:0!important;overflow:hidden;border-radius:14px}
  #store-list{display:flex;flex:0 0 auto;width:100%;max-height:none!important;min-height:0;overflow:hidden;border:0;border-bottom:1px solid var(--tron-line)}
  #store-list #list-items-wrapper{display:flex;flex:0 0 auto;gap:8px;width:100%;max-width:100%;min-height:0;padding:8px 10px 10px;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  #store-list #list-items-wrapper .list-item{flex:0 0 min(78vw,290px)!important;width:min(78vw,290px);min-width:0;min-height:112px;height:auto;padding:10px;overflow:hidden;box-sizing:border-box;scroll-snap-align:start}
  #store-list #list-items-wrapper .list-img{display:block;width:64px;height:64px;margin:0 10px 6px 0;float:inline-start;object-fit:cover;border-radius:9px}
  #store-list #list-items-wrapper h4{margin:0 0 4px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  #store-list #list-items-wrapper .address{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
  #iraq-map,#iraq-map.leaflet-container{position:relative;flex:0 0 auto;width:100%!important;height:clamp(330px,54svh,460px)!important;min-height:330px!important;max-height:460px!important;touch-action:pan-y!important;overscroll-behavior:auto!important}
  /* On a phone a selected shop is a readable sheet inside the map, not a
     narrow marker popup that gets cut off by the screen edge. */
  #iraq-map .leaflet-popup{position:absolute!important;top:auto!important;right:8px!important;left:8px!important;bottom:8px!important;inset-inline:8px!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;transform:none!important;z-index:900!important}
  #iraq-map .leaflet-popup-tip-container{display:none!important}
  #iraq-map .leaflet-popup-content-wrapper{display:block;width:100%!important;min-width:0!important;max-width:none!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(0,0,0,.24)!important}
  #iraq-map .leaflet-popup-content{display:block;width:auto!important;min-width:0!important;max-width:none!important;max-height:min(48svh,400px)!important;margin:12px 14px!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;box-sizing:border-box!important}
  #iraq-map .shop-popup-body{max-height:none!important;overflow:visible!important;padding:0 2px 2px!important}
  #iraq-map .shop-gallery{display:flex;gap:8px;max-width:100%;max-height:128px;overflow-x:auto;overscroll-behavior-x:contain}
  #iraq-map .shop-gallery img{display:block;flex:0 0 min(78%,300px);width:min(78%,300px)!important;height:116px!important;max-height:116px!important;object-fit:cover!important;border-radius:10px!important}
  #iraq-map .shop-popup video{display:block;width:100%;max-height:180px;object-fit:contain}
  #iraq-map .shop-popup .popup-actions>*{flex:1 1 42%;font-size:13px;line-height:1.25}
  #iraq-map .leaflet-control-zoom a{min-width:44px!important;min-height:44px!important;line-height:44px!important}
  html.map-window-mode #store-locator-section{padding:calc(56px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}
  html.map-window-mode #tron-locator{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(145px,34dvh) minmax(0,1fr);width:100%;height:100%!important;min-height:0!important}
  html.map-window-mode #store-list{grid-column:1;grid-row:1;width:100%;height:auto;max-height:none!important;min-height:0;overflow:hidden}
  html.map-window-mode #list-items-wrapper{flex:0 0 auto;overflow-x:auto!important;overflow-y:hidden}
  html.map-window-mode #iraq-map,html.map-window-mode #iraq-map.leaflet-container{grid-column:1;grid-row:2;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;touch-action:none!important}
  html.map-window-mode #iraq-map .leaflet-popup{bottom:max(8px,env(safe-area-inset-bottom))!important}
}


/* v8.0.6: opaque Google Maps-style shop popup card. */
#iraq-map .leaflet-popup-content-wrapper{background:#fff!important;color:#171717!important;border-radius:16px!important;box-shadow:0 10px 34px rgba(0,0,0,.28)!important;opacity:1!important}
#iraq-map .leaflet-popup-content{background:#fff!important;color:#171717!important}
#iraq-map .shop-popup{background:#fff!important;color:#171717!important;border-radius:12px;padding:4px}
#iraq-map .leaflet-popup-close-button{color:#333!important;background:#fff!important;border-radius:50%;font-size:22px!important;text-align:center;line-height:32px!important}
#iraq-map .shop-popup .popup-expand-btn{background:#167d89!important;color:#fff!important;border-radius:999px!important;min-height:44px!important;padding:10px 14px!important}


/* v8.0.7: phone-only compact shop popup that expands on tap. Desktop remains unchanged. */
@media(max-width:767px){
  #iraq-map .leaflet-popup.tron-shop-popup-compact{max-width:calc(100% - 24px)!important}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .leaflet-popup-content{width:auto!important;max-width:none!important;max-height:25svh!important;margin:8px 12px!important;overflow:hidden!important}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-gallery,
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup .stars,
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup video,
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup .shop-guarantee,
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup .popup-actions{display:none!important}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup-body{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:2px!important}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup h3{flex:1 1 100%;font-size:15px!important;line-height:1.3;margin:0!important}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-popup p{flex:1 1 100%;margin:0!important;font-size:12px!important;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  #iraq-map .leaflet-popup.tron-shop-popup-compact .shop-detail-toggle,
  #iraq-map .leaflet-popup.tron-shop-popup-compact .popup-expand-btn{flex:1 1 calc(50% - 8px);width:auto!important;min-width:0;min-height:40px!important;margin:0!important;padding:8px!important;border:0;border-radius:999px!important;background:#167d89!important;color:#fff!important;font-size:12px!important;font-weight:700}
  #iraq-map .leaflet-popup.tron-shop-popup-expanded{max-width:calc(100% - 16px)!important}
  #iraq-map .leaflet-popup.tron-shop-popup-expanded .leaflet-popup-content{width:auto!important;max-width:none!important;max-height:min(62svh,540px)!important;margin:12px 14px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}
  #iraq-map .leaflet-popup.tron-shop-popup-expanded .shop-detail-toggle{min-height:44px;padding:9px 14px;border:1px solid #167d89;border-radius:999px;background:#fff;color:#126b75;font-weight:700}
}

/* TRON map integration: shared photo dialog, existing catalog, two real providers.
 * Keep the original appearance and catalogue rules above. */
#tron-locator > #tron-google-host {
  grid-column:2; grid-row:1; width:100%; min-width:0;
  height:100% !important; min-height:0; max-height:none; align-self:stretch;
}
/* A page-wide pan-y restriction prevents horizontal native shop-list scrolling. */
html, body { touch-action:auto; }
body:has(#tron-shop-dialog[open]) { overflow:hidden !important; }
html.map-window-mode #tron-locator {
  flex:1 1 0; height:auto !important; min-height:0 !important;
}
html.map-window-mode #tron-map-tools,
html.map-window-mode #tron-map-status { flex:0 0 auto; }
html.map-window-mode #tron-google-host {
  grid-column:2; grid-row:1; height:100% !important; min-height:0 !important;
}
/* Let the explicit Move map / Scroll page button control fullscreen too. */
html.map-window-mode #iraq-map:not(.tron-map-pan-enabled) {
  touch-action:pan-y !important;
}
@media (max-width:767px) {
  #tron-locator > #tron-google-host {
    grid-column:1; grid-row:2; flex:0 0 auto;
    height:clamp(330px,54svh,460px) !important;
    min-height:330px; max-height:460px;
  }
  html.map-window-mode #tron-locator > #tron-google-host {
    grid-column:1; grid-row:2; height:100% !important;
    min-height:0 !important; max-height:none !important;
  }
}