@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg:           #e8e1d2;
  --bg-card:      #f5f0e8;
  --bg-white:     #ffffff;
  --primary:      #701605;
  --primary-dk:   #4a0e03;
  --gold:         #bf9c50;
  --gold-lt:      #d4b574;
  --text:         #625555;
  --text-dk:      #2c1a1a;
  --text-lt:      #8a7070;
  --border:       rgba(112,22,5,0.13);
  --shadow:       0 2px 16px rgba(112,22,5,0.10);
  --header-h:     66px;
  --drawer-w:     290px;
  --r:            5px;
  --ease:         0.28s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100vw; }

body {
  font-family:'Heebo', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:clamp(14px, 4vw, 17px);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
body.rtl  { direction:rtl; text-align:right; }
body:not(.rtl) { direction:ltr; text-align:left; }

img { max-width:100%; height:auto; border:0; }
a   { color:var(--primary); text-decoration:none; }

/* ── HEADER ─────────────────────────────────────── */
.mh {
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  background:var(--primary);
  border-bottom:2px solid var(--gold);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  z-index:900;
  box-shadow:0 2px 14px rgba(0,0,0,0.28);
}
.mh__logo { height:34px; width:auto; display:block; flex-shrink:0; }
.mh__logo-link {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-decoration:none; pointer-events:auto;
}
.mh__slogan {
  font-family:'Crimson Pro','Georgia',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(13px, 3.2vw, 18px);
  color:var(--gold-lt);
  line-height:1.2;
  letter-spacing:0.02em;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
  margin:0; padding:0; border:none;
}
/* Start group: hamburger + WhatsApp */
.mh__start {
  display:flex; align-items:center; gap:2px;
  flex-shrink:0;
}
html[dir="rtl"] .mh .mh__start { order:-1; }
body:not(.rtl) .mh .mh__start { order:-1; }

/* WhatsApp button */
.mh__wa {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:var(--r);
  transition:opacity var(--ease);
  flex-shrink:0;
}
.mh__wa:hover { opacity:.8; }
.mh__wa svg { width:32px; height:32px; display:block; }
@media(max-width:360px) { .mh .mh__slogan { display:none; } }
.mh__logo:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

.mh__row { display:flex; align-items:center; gap:10px; }

.mh__langs { display:flex; gap:8px; align-items:center; }
.mh__langs a {
  display:flex; align-items:center;
  opacity:.65; transition:opacity var(--ease);
  padding:6px 4px; min-width:44px; min-height:44px;
  justify-content:center;
}
.mh__langs a:hover, .mh__langs a.cur { opacity:1; }
/* Language flag images — large enough to tap comfortably */
.mh__langs img { width:32px; height:22px; border:1px solid rgba(255,255,255,.35); border-radius:3px; display:block; }

/* Hamburger */
.hbg {
  width:44px; height:44px; background:none; border:none;
  cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  padding:8px; border-radius:var(--r);
  transition:background var(--ease);
}
.hbg:hover { background:rgba(255,255,255,.12); }
.hbg span {
  display:block; width:22px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform var(--ease), opacity var(--ease);
}
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── DRAWER OVERLAY ──────────────────────────────── */
.doverlay {
  position:fixed; inset:0;
  background:rgba(44,26,26,.5);
  backdrop-filter:blur(3px);
  z-index:901;
  opacity:0; pointer-events:none;
  transition:opacity var(--ease);
}
.doverlay.open { opacity:1; pointer-events:all; }

/* ── DRAWER ──────────────────────────────────────── */
.drawer {
  position:fixed; top:0; bottom:0;
  width:var(--drawer-w);
  background:var(--bg-card);
  z-index:902;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:6px 0 40px rgba(112,22,5,.22);
  transition:transform var(--ease);
}
body:not(.rtl) .drawer { left:0; transform:translateX(calc(-1 * var(--drawer-w))); }
body.rtl       .drawer { right:0; transform:translateX(var(--drawer-w)); box-shadow:-6px 0 40px rgba(112,22,5,.22); }
/* Open state — specificity must beat body:not(.rtl) .drawer (0,2,1) → use body .drawer.open (0,2,1) same + later order wins */
body .drawer.open { transform:translateX(0); }

.drawer__top {
  flex-shrink:0;
  background:var(--primary);
  border-bottom:2px solid var(--gold);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.drawer__top img { height:34px; }
.drawer__top a { display:flex; flex-direction:column; align-items:center; gap:3px; }
.drawer__slogan {
  color:var(--gold-lt);
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
  letter-spacing:0.04em;
}
.drawer__x {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.drawer__x:hover { background:rgba(255,255,255,.28); }

/* Search bar in drawer */
.drawer__search {
  flex-shrink:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 14px;
}
.drawer__search form { display:flex; gap:6px; }
.drawer__search input {
  flex:1; height:38px; border:1px solid var(--border);
  border-radius:var(--r); padding:0 10px;
  font:14px 'Heebo',Arial,sans-serif; color:var(--text);
  background:var(--bg);
}
.drawer__search button {
  height:38px; padding:0 13px;
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--r); font:13px 'Heebo',Arial,sans-serif;
  cursor:pointer; white-space:nowrap;
  transition:background var(--ease);
}
.drawer__search button:hover { background:var(--primary-dk); }

/* Scrollable nav area */
.drawer__nav { flex:1; overflow-y:auto; }

.drawer__label {
  display:block;
  padding:14px 18px 5px;
  font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-lt);
}

.drawer__link {
  display:flex; align-items:center;
  min-height:46px; padding:0 18px;
  font-size:14px; font-weight:500;
  color:var(--text-dk);
  border-bottom:1px solid var(--border);
  transition:background var(--ease), color var(--ease);
  position:relative;
}
.drawer__link:hover  { background:rgba(112,22,5,.05); color:var(--primary); }
.drawer__link.active {
  color:var(--primary); font-weight:700;
  background:rgba(191,156,80,.1);
}
.drawer__link.active::after {
  content:''; position:absolute;
  top:0; bottom:0; width:3px;
  background:var(--gold);
}
body:not(.rtl) .drawer__link.active::after { left:0; }
body.rtl       .drawer__link.active::after { right:0; }

/* Category links */
.drawer__cat {
  display:flex; align-items:center;
  min-height:44px; padding:0 18px;
  font-size:13.5px; color:var(--text);
  border-bottom:1px solid rgba(112,22,5,.06);
  gap:8px;
  transition:background var(--ease), color var(--ease);
}
.drawer__cat::before { content:'›'; color:var(--gold); font-size:16px; font-weight:bold; flex-shrink:0; }
body.rtl .drawer__cat::before { content:'‹'; }
.drawer__cat:hover { background:rgba(112,22,5,.05); color:var(--primary); }

.drawer__sub { padding-inline-start:14px; }
.drawer__sub .drawer__cat { font-size:12.5px; min-height:40px; opacity:.88; }

/* Lang strip at bottom of drawer */
.drawer__langs {
  flex-shrink:0;
  border-top:1px solid var(--border);
  padding:14px 18px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.drawer__langs a {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text);
  padding:6px 10px; border-radius:20px;
  border:1px solid var(--border);
  min-height:44px;
  transition:background var(--ease);
}
.drawer__langs a.cur { background:rgba(112,22,5,.08); color:var(--primary); font-weight:600; }
.drawer__langs a:hover { background:rgba(112,22,5,.07); }
.drawer__langs img { width:26px; height:18px; border-radius:2px; border:1px solid rgba(0,0,0,.12); display:block; }

/* ── PAGE BODY ───────────────────────────────────── */
.mpage { margin-top:var(--header-h); min-height:calc(100vh - var(--header-h)); display:flex; flex-direction:column; width:100%; }
.mcontent { flex:1; padding:14px; max-width:100%; overflow-x:hidden; width:100%; }

/* ── FORCE EXISTING MODULE TABLES RESPONSIVE ─────── */
.mcontent table { max-width:100% !important; width:100% !important; table-layout:auto !important; }
.mcontent img   { max-width:100%; height:auto; }

/* ── PRODUCT GRID: convert fixed table to flex ────── */
/* Targets the 534px product listing table in category.php and mainpage.php */
.mcontent table[width="534"] {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:14px !important;
  padding:6px !important;
  width:100% !important;
  box-sizing:border-box !important;
  border-spacing:0 !important;
}
/* Make tbody/tr transparent so cells become direct flex children */
.mcontent table[width="534"] > tbody,
.mcontent table[width="534"] > tr { display:contents !important; }
.mcontent table[width="534"] > tbody > tr { display:contents !important; }

/* Product detail outer wrapper cell: full-width flex item (has valign, no class) */
.mcontent table[width="534"] > tbody > tr > td[valign]:not([class]) {
  flex:0 0 100% !important;
  max-width:100% !important;
  display:block !important;
}

/* Hide all spacer cells */
.mcontent table[width="534"] td[width="12"],
.mcontent table[width="534"] td[width="19"],
.mcontent table[width="534"] td[height="7"],
.mcontent table[width="534"] td[height="12"],
.mcontent table[width="534"] td[height="13"],
.mcontent table[width="534"] td[height="15"],
.mcontent table[width="534"] td[width="170"]:not([class]),
.mcontent table[width="534"] td[width="534"]:not([class]) { display:none !important; }

/* Product cards — flex items */
.mcontent .box_product1,
.mcontent .box_product2,
.mcontent .box_product3 {
  flex:0 0 calc(33.333% - 10px) !important;
  max-width:calc(33.333% - 10px) !important;
  min-width:100px !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
  background:var(--bg-card);
  border-radius:10px;
  padding:8px 6px 12px !important;
  box-shadow:
    0 0 0 1px rgba(191,156,80,0.35),
    0 4px 18px rgba(112,22,5,0.16),
    0 0 28px rgba(191,156,80,0.12);
  transition:box-shadow var(--ease), transform var(--ease);
}
.mcontent .box_product1:hover,
.mcontent .box_product2:hover,
.mcontent .box_product3:hover {
  box-shadow:
    0 0 0 1px rgba(191,156,80,0.6),
    0 8px 28px rgba(112,22,5,0.22),
    0 0 40px rgba(191,156,80,0.2);
  transform:translateY(-2px);
}
/* Keep 3 columns on all phones; thumbnail height adapts to small screens */
@media(max-width:440px) {
  .mcontent .img_bg a { height:110px; }
}
@media(max-width:340px) {
  .mcontent .img_bg a { height:90px; }
  .mcontent .box_product1,
  .mcontent .box_product2,
  .mcontent .box_product3 { flex:0 0 calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; }
}

.mcontent .box_catalog { width:auto !important; min-width:0 !important; }
.mcontent .img_bg { width:100% !important; height:auto !important; display:block !important; padding:4px !important; }
.mcontent .img_bg table { width:100% !important; }

/* Decorative thumbnail frame */
/* Decorative thumbnail frame — uniform fixed height for grid consistency */
.mcontent .img_bg a {
  display:block !important;
  padding:5px;
  height:150px;
  background:var(--bg);
  border-radius:6px;
  border:1.5px solid rgba(191,156,80,0.55);
  box-shadow:
    0 0 0 3px rgba(232,225,210,0.9),
    0 0 0 4.5px rgba(191,156,80,0.35),
    inset 0 1px 3px rgba(112,22,5,0.08);
  transition:box-shadow var(--ease), border-color var(--ease);
  line-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.mcontent .img_bg a:hover {
  border-color:rgba(191,156,80,0.85);
  box-shadow:
    0 0 0 3px rgba(232,225,210,0.9),
    0 0 0 4.5px rgba(191,156,80,0.65),
    0 4px 14px rgba(112,22,5,0.18),
    inset 0 1px 3px rgba(112,22,5,0.06);
}
.mcontent .img_bg img {
  max-width:100%; height:100% !important; width:100% !important;
  object-fit:contain; display:block; border-radius:3px;
}
.mcontent #right { width:auto !important; display:block !important; float:none !important; }
.mcontent .content_top,
.mcontent .content_top_pages,
.mcontent .homepage_content1 { width:100% !important; }

/* ── PRODUCT PAGE ─────────────────────────────────── */
/* Break fixed 534px table, stack image + details columns */
.mcontent table[width="534"],
.mcontent table[width="792"] { width:100% !important; }
/* Override hard-coded height="600" on outer product wrapper so frame expands with content */
.mcontent td[bgcolor="#f4f0e9"],
.mcontent td[bgcolor="#F4F0E9"] { height:auto !important; }
#pageContent { line-height:1.6 !important; }
#pageContent td[width="280"] {
  display:block !important;
  width:100% !important;
  padding:0 0 14px !important;
}
/* Image column: stack main image above thumbnail strip with no overlap */
#pageContent td[width="220"] {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  padding:0 0 10px !important;
  box-sizing:border-box !important;
}
/* suppress double-<br> spacers in product detail; only direct-child <br> tags are spacers */
#pageContent td[width="280"] > br { display:none !important; height:0 !important; line-height:0 !important; }
#pageContent hr { margin:7px 0 !important; border:none !important; border-top:1px solid var(--border) !important; }
.mcontent .pageTitle {
  display:block !important; width:100% !important;
  font-size:clamp(18px, 5.5vw, 24px) !important; font-weight:700;
  line-height:1.4 !important; color:var(--primary);
  margin:10px 0 8px !important; padding:0 4px !important;
  border-bottom:2px solid var(--gold); padding-bottom:6px !important;
  text-align:center !important;
}
.page-static .mcontent .pageTitle { display:none !important; }
/* Leading-side padding adapts automatically: right in RTL, left in LTR */
.page-static .mcontent { padding-inline-start:22px; }
/* ── SUB-CATEGORIES BOX ──────────────────────────────── */
.mcontent .subcategories-box {
  border:1.5px solid rgba(191,156,80,0.55);
  border-radius:8px;
  padding:12px 16px 14px;
  margin:4px 0 16px;          /* tight gap above = close to page title */
  background:var(--bg-card);
  box-shadow:0 2px 12px rgba(112,22,5,0.09);
}
.mcontent .subcategories-heading {
  font-size:clamp(14px, 4vw, 17px);
  font-weight:700;
  color:var(--primary);
  border-bottom:1px solid rgba(191,156,80,0.45);
  padding-bottom:6px;
  margin:0 0 10px;
}
.mcontent .subcategories-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
}
.mcontent .subcategories-list a {
  color:var(--primary);
  font-size:clamp(13px, 3.8vw, 15px);
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid rgba(191,156,80,0.45);
  background:var(--bg);
  transition:background var(--ease), border-color var(--ease);
  text-decoration:none;
}
.mcontent .subcategories-list a:hover {
  background:rgba(112,22,5,0.07);
  border-color:var(--gold);
}

/* ── CATEGORY/MAINPAGE BUTTONS ─────────────────────────── */
/* Hide the old GIF button images */
.mcontent div.buttons img,
.mcontent a.buttons img { display:none !important; }
/* Style a.buttons like a view button (catalog.php) */
.mcontent a.buttons {
  display:inline-flex !important; align-items:center !important;
  background:var(--primary) !important; color:#fff !important;
  padding:7px 18px !important; border-radius:var(--r) !important;
  font:600 13px 'Heebo',Arial,sans-serif !important; min-height:36px !important;
}
/* div.buttons wrapper (mainpage.php): center its child button */
.mcontent div.buttons { display:flex !important; justify-content:center !important; }
/* Product main image — small enough that product details stay in view */
.mcontent .propage_img_main,
.mcontent td.propage_img_main { width:100% !important; max-width:100% !important; overflow:hidden; text-align:center; position:relative; }
.mcontent .propage_img_main img,
.mcontent td.propage_img_main img {
  max-width:100% !important;
  max-height:36vh !important;
  width:auto !important; height:auto !important;
  display:block; margin:0 auto; object-fit:contain;
}

/* ── IMAGE LOADERS ────────────────────────────────────── */
@keyframes orya-spin { to { transform:rotate(360deg); } }

/* Product page main-image overlay spinner */
.img-loader {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  z-index:2; border-radius:4px;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.img-loader__ring {
  width:50px; height:50px;
  border:4px solid rgba(191,156,80,0.2);
  border-top-color:var(--primary);
  border-right-color:var(--gold);
  border-radius:50%;
  animation:orya-spin 0.85s linear infinite;
}

/* Grid thumbnail spinner — CSS-only, no extra DOM nodes */
.mcontent .img_bg a.img-loading {
  position:relative;
}
.mcontent .img_bg a.img-loading::before {
  content:'';
  position:absolute; inset:0;
  background:var(--bg);
  border-radius:3px;
  z-index:1;
}
.mcontent .img_bg a.img-loading::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border:3px solid rgba(191,156,80,0.2);
  border-top-color:var(--primary);
  border-right-color:var(--gold);
  border-radius:50%;
  animation:orya-spin 0.85s linear infinite;
  z-index:2;
}

/* Thumbnail strip: decorative frame matching product listing style */
.mcontent td.propage_img_thumb {
  background:var(--bg) !important;
  border-radius:5px !important;
  border:1.5px solid rgba(191,156,80,0.55) !important;
  padding:3px !important;
  cursor:pointer;
  box-sizing:border-box !important;
  transition:border-color var(--ease), box-shadow var(--ease);
  vertical-align:middle !important;
}
.mcontent td.propage_img_thumb:hover {
  border-color:rgba(191,156,80,0.85) !important;
  box-shadow:0 2px 10px rgba(112,22,5,0.18) !important;
}
.mcontent td.propage_img_thumb img {
  width:54px !important; height:54px !important;
  object-fit:contain !important; display:block !important;
  border-radius:3px !important;
}
/* Thumbnail strip table: flex row so thumbs line up horizontally */
.mcontent #pageContent td[width="220"] table[width="215"] + table[width="215"] {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  width:100% !important;
  border-spacing:0 !important;
}
.mcontent #pageContent td[width="220"] table[width="215"] + table[width="215"] tbody,
.mcontent #pageContent td[width="220"] table[width="215"] + table[width="215"] tr { display:contents !important; }
/* Hide spacer cells inside thumbnail strip */
.mcontent td.propage_img_thumb ~ td[width="13"] { display:none !important; }

.mcontent table[width="215"] { width:100% !important; }

/* Product page only: image stacked above details (column-reverse puts image first visually) */
.page-mod-product .mcontent #pageContent > tbody > tr { display:flex !important; flex-direction:column-reverse !important; width:100%; max-width:100%; overflow-x:hidden; }
/* Medium screens: side-by-side */
@media(min-width:460px) {
  .page-mod-product .mcontent #pageContent > tbody > tr { flex-direction:row-reverse !important; align-items:flex-start !important; gap:14px; }
  .page-mod-product #pageContent td[width="220"] { flex:0 0 44% !important; width:44% !important; max-width:280px !important; padding:0 !important; }
  .page-mod-product #pageContent td[width="280"] { flex:1 !important; width:auto !important; min-width:0 !important; padding:0 !important; }
  .mcontent .propage_img_main img,
  .mcontent td.propage_img_main img { max-height:52vh !important; }
}

/* Product card text area */
.mcontent .bold { font-size:clamp(12px, 3.5vw, 15px) !important; font-weight:600; line-height:1.4; margin-top:6px; }
.mcontent .bold a { color:var(--primary); }
.mcontent .text  { font-size:11px !important; color:var(--text-lt); margin-top:3px; line-height:1.4; }
/* Hide description inside grid thumbnail cards — it varies per product and causes unequal card heights */
.mcontent .box_product1 .text,
.mcontent .box_product2 .text,
.mcontent .box_product3 .text { display:none !important; }
.mcontent .box_product1 .button,
.mcontent .box_product2 .button,
.mcontent .box_product3 .button,
.mcontent .box_product1 > a.buttons,
.mcontent .box_product2 > a.buttons,
.mcontent .box_product3 > a.buttons,
.mcontent .box_product1 > .buttons,
.mcontent .box_product2 > .buttons,
.mcontent .box_product3 > .buttons { margin-top:auto !important; padding-top:6px; }
.mcontent .button { margin-top:6px; }
.mcontent .button img,
.mcontent .buttons img { max-width:100%; height:auto; }

/* Catalog grid override */
.mcontent .box_catalog {
  float:none !important;
  display:inline-block !important;
  width:47% !important;
  margin:1.5% !important;
  vertical-align:top;
}

/* Product name + ID: break onto separate line, readable */
.mcontent .bold { word-break:break-word; }
.mcontent .bold a { display:block; }

/* ── PAGINATION ───────────────────────────────────── */
.mcontent table[id="#pagenation"] {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  padding:10px 0 !important;
}
.mcontent table[id="#pagenation"] tbody,
.mcontent table[id="#pagenation"] tr,
.mcontent table[id="#pagenation"] td { display:contents !important; }
.mcontent a.more_articles {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--primary) !important;
  color:#fff !important;
  padding:8px 18px !important;
  border-radius:var(--r) !important;
  font:600 13px 'Heebo',Arial,sans-serif !important;
  text-transform:capitalize !important;
  text-decoration:none !important;
  transition:background var(--ease) !important;
  min-height:40px !important;
  min-width:44px !important;
  border:1px solid rgba(191,156,80,0.45) !important;
}
.mcontent a.more_articles:hover { background:var(--primary-dk) !important; color:#fff !important; }
/* Current page indicator — filled rectangle with down-pointer above */
.mcontent .current-page {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  background:var(--gold) !important;
  color:var(--primary-dk) !important;
  padding:8px 18px !important;
  border-radius:var(--r) !important;
  font:700 13px/1 'Heebo',Arial,sans-serif !important;
  min-height:40px !important;
  min-width:44px !important;
  margin-top:8px !important;
}
.mcontent .current-page::before {
  content:'' !important;
  position:absolute !important;
  top:-8px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:0 !important; height:0 !important;
  border-left:7px solid transparent !important;
  border-right:7px solid transparent !important;
  border-top:8px solid var(--gold) !important;
}

/* ── PRODUCT ID LINE (relocated after product title) ─ */
.product-id-line {
  display:block;
  font-size:clamp(12px, 3.2vw, 14px);
  color:var(--text-lt);
  margin:2px 0 5px;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:not(.rtl) .product-id-line { text-align:left; }
body.rtl       .product-id-line { text-align:right; }
.product-id-line span + span { color:var(--primary); font-weight:700; }

/* ── PRODUCT / CATEGORY NATIVE GRIDS ─────────────── */
.m-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px; padding:6px 0;
}
@media(min-width:500px) { .m-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:360px) { .m-grid { grid-template-columns:1fr; } }

.m-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.m-card__img {
  aspect-ratio:1; background:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.m-card__img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.m-card__body { padding:9px 10px 12px; flex:1; display:flex; flex-direction:column; }
.m-card__name { font-size:13px; font-weight:600; color:var(--primary); line-height:1.3; margin-bottom:8px; }
.m-card__btn {
  display:flex; align-items:center; justify-content:center;
  margin-top:auto; padding:7px 10px;
  background:var(--primary); color:#fff;
  border-radius:var(--r); font-size:12px; font-weight:600;
  min-height:36px; transition:background var(--ease);
}
.m-card__btn:hover { background:var(--primary-dk); }

/* ── FOOTER ──────────────────────────────────────── */
.mfooter {
  background:var(--primary);
  color:rgba(255,255,255,.8);
  padding:22px 16px 28px;
  border-top:2px solid var(--gold);
  width:100%;
  box-sizing:border-box;
  flex-shrink:0;
}
.mfooter__text {
  text-align:center; font-size:clamp(14px, 4vw, 18px);
  color:var(--gold-lt); font-weight:600;
  word-break:keep-all; overflow-wrap:normal; white-space:pre-line;
  line-height:1.65; margin-bottom:14px;
  padding:12px 14px; background:rgba(0,0,0,.18);
  border-radius:var(--r);
}
.mfooter__text a { color:#fff; text-decoration:underline; font-weight:700; }
.mfooter__text .wa-link {
  display:inline-flex; align-items:center; gap:8px;
  background:#25D366; color:#fff !important;
  text-decoration:none !important;
  padding:8px 18px 8px 14px; border-radius:24px;
  font-weight:700; font-size:clamp(14px,4vw,17px);
  margin-top:6px;
  box-shadow:0 2px 10px rgba(37,211,102,0.4);
}
html[dir="rtl"] .mfooter__text .wa-link { padding:8px 14px 8px 18px; }
.mfooter__text .wa-link::before {
  content:'';
  display:inline-block; width:22px; height:22px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* ── SOCIAL MEDIA ICON ROW ───────────────────────── */
.sm-links {
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin:10px 0 4px;
}
.sm-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  text-decoration:none; flex-shrink:0;
  transition:transform var(--ease), opacity var(--ease);
}
.sm-link:hover { transform:scale(1.12); opacity:.9; }
.sm-link::before {
  content:''; display:block; width:22px; height:22px;
  background:no-repeat center/contain;
}
.sm-link--fb { background:#1877F2; }
.sm-link--fb::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.908 4.512 10.784 10.366 11.647z'/%3E%3C/svg%3E"); }
.sm-link--ig { background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.sm-link--ig::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E"); }
.sm-link--yt { background:#FF0000; }
.sm-link--yt::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.sm-link--tt { background:#010101; }
.sm-link--tt::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }

.mfooter__nav {
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:2px 14px;
  margin-bottom:14px;
}
.mfooter__nav a {
  color:rgba(255,255,255,.72); font-size:12.5px;
  padding:4px 0; min-height:32px;
  display:flex; align-items:center;
  transition:color var(--ease);
}
.mfooter__nav a:hover { color:#fff; }
.mfooter__langs {
  display:flex; justify-content:center;
  gap:14px; margin-bottom:14px;
}
.mfooter__langs a {
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.65); font-size:12px;
  transition:color var(--ease);
  min-height:44px;
}
.mfooter__langs a:hover { color:#fff; }
.mfooter__langs img { width:24px; height:17px; border-radius:2px; border:1px solid rgba(255,255,255,.25); display:block; }
.mfooter__copy {
  text-align:center; font-size:11px;
  color:rgba(255,255,255,.35);
  padding-top:12px; border-top:1px solid rgba(255,255,255,.1);
}
.mfooter__copy a { color:rgba(255,255,255,.35); }

/* ── FIRST-LETTER CAPITALIZE (LTR languages only) ── */
body:not(.rtl) .mcontent .bold a::first-letter,
body:not(.rtl) .mcontent .text::first-letter,
body:not(.rtl) .mcontent .pageTitle::first-letter { text-transform:uppercase; }

/* ── DRAWER NAV: larger font, bolder, thicker dividers ──────── */
.drawer__link {
  font-size:clamp(14px, 4.5vw, 17px) !important;
  font-weight:700 !important;
  border-bottom-width:2px !important;
}
.drawer__cat {
  font-size:clamp(13px, 4vw, 16px) !important;
  font-weight:700 !important;
  border-bottom-width:2px !important;
}
.drawer__sub .drawer__cat {
  font-size:clamp(12px, 3.6vw, 15px) !important;
  font-weight:600 !important;
  border-bottom-width:1.5px !important;
}

/* ── VIEW BUTTON (replaces button_product_view.gif) ─────────── */
.mcontent .button a img { display:none !important; }
.mcontent .button a,
.mcontent a.mobile-view-btn {
  display:inline-flex !important;
  align-items:center !important;
  background:var(--primary) !important;
  color:#fff !important;
  padding:7px 18px !important;
  border-radius:var(--r) !important;
  font:600 13px 'Heebo',Arial,sans-serif !important;
  text-transform:capitalize !important;
  letter-spacing:.03em !important;
  transition:background var(--ease) !important;
  min-height:36px !important;
  text-decoration:none !important;
}
.mcontent .button a:hover,
.mcontent a.mobile-view-btn:hover { background:var(--primary-dk) !important; color:#fff !important; }
/* propage_button.gif: hide GIF, link acts as styled button */
.mcontent a[href*="f=order"] img[src*="propage_button"] { display:none !important; }
.mcontent a[href*="f=order"] {
  display:inline-flex !important; align-items:center !important;
  background:var(--primary) !important; color:#fff !important;
  padding:10px 26px !important; border-radius:var(--r) !important;
  font:700 15px 'Heebo',Arial,sans-serif !important;
  min-height:44px !important; text-decoration:none !important;
  transition:background var(--ease) !important;
}
.mcontent a[href*="f=order"]:hover { background:var(--primary-dk) !important; }
/* button_send_form.gif: GIF hidden, real <button> injected via JS */
.mcontent img[src*="button_send_form"] { display:none !important; }
button.mobile-view-btn {
  display:inline-flex !important; align-items:center !important;
  background:var(--primary) !important; color:#fff !important;
  padding:9px 24px !important; border-radius:var(--r) !important;
  font:700 14px 'Heebo',Arial,sans-serif !important;
  border:none !important; cursor:pointer !important;
  min-height:42px !important; transition:background var(--ease) !important;
}
button.mobile-view-btn:hover { background:var(--primary-dk) !important; }
/* Contact page — always single-column, full-width form */
.page-contact .mcontent {
  padding-top:16px !important;
  padding-inline-start:0 !important;  /* form needs every pixel */
}

/* Collapse ALL tables to single-column block flow */
.page-contact .mcontent table,
.page-contact .mcontent tbody,
.page-contact .mcontent tr,
.page-contact .mcontent td {
  display:block !important;
  width:100% !important; max-width:100% !important;
  box-sizing:border-box !important;
  height:auto !important;        /* prevent height="32" attrs from clipping taller content */
  min-height:0 !important;
  float:none !important;
}

/* Height-only spacer rows: collapse completely */
.page-contact .mcontent td[height]:not([bgcolor]):not([valign]):not([id]) {
  padding:0 !important;
}

/* Inputs, textarea, and select fill their row */
.page-contact .mcontent input[type="text"],
.page-contact .mcontent textarea,
.page-contact .mcontent select {
  display:block !important;
  width:100% !important; max-width:100% !important;
  box-sizing:border-box !important; min-width:0 !important;
  resize:none !important;
}

/* Send button */
.page-contact .mcontent #send-cell { padding:8px !important; }
.page-contact .mcontent #send-cell .mobile-view-btn {
  width:100% !important; box-sizing:border-box !important;
}

/* ── HOMEPAGE TEXT (restore Heebo inside .ignore-css) ── */
.mcontent .ignore-css {
  font-family:'Heebo', Arial, sans-serif !important;
  color:var(--text) !important;
  font-size:clamp(14px, 4vw, 17px) !important;
  line-height:1.6 !important;
  display:block !important;
}

/* ── CONTACT PAGE: remove white cell backgrounds ─────── */
.mcontent td[bgcolor="#FFFFFF"],
.mcontent td[bgcolor="#ffffff"],
.mcontent td[bgcolor="white"] { background-color:transparent !important; }
/* Contact/order form inputs: full width on mobile */
.mcontent form input[type="text"],
.mcontent form textarea,
.mcontent form select {
  width:100% !important; max-width:100% !important;
  box-sizing:border-box !important;
  padding:6px 10px !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  font:14px 'Heebo',Arial,sans-serif !important;
  color:var(--text) !important;
  background:var(--bg) !important;
}
.mcontent form select { appearance:auto; cursor:pointer; }

/* ── TABLET (768px+) ─────────────────────────────── */
@media(min-width:768px) {
  :root { --header-h:72px; --drawer-w:320px; }
  .mcontent { padding:20px; max-width:1000px; margin:0 auto; }
  .mcontent .box_product1,
  .mcontent .box_product2,
  .mcontent .box_product3 {
    flex:0 0 calc(33.333% - 10px) !important;
    max-width:calc(33.333% - 10px) !important;
  }
}
/* ── DESKTOP (1024px+) ───────────────────────────── */
@media(min-width:1024px) {
  .mcontent { padding:28px 32px; max-width:1400px; }
  /* Switch product listing grid to 4 columns */
  .mcontent table[width="534"] {
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:18px !important;
  }
  .mcontent .box_product1,
  .mcontent .box_product2,
  .mcontent .box_product3 {
    flex:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  /* Product detail page: wrapper cell spans all 4 columns (full width) */
  .mcontent table[width="534"] td[bgcolor="#f4f0e9"],
  .mcontent table[width="534"] td[bgcolor="#F4F0E9"] {
    grid-column: 1 / -1 !important;
    width:100% !important;
  }
  /* Product detail page: wider image + content columns */
  #pageContent { padding:20px 24px 0 !important; }
  .page-mod-product .mcontent #pageContent > tbody > tr {
    align-items:stretch !important;
  }
  .page-mod-product #pageContent td[width="220"] {
    flex:0 0 42% !important;
    width:42% !important;
    max-width:560px !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .page-mod-product #pageContent td[width="280"] {
    font-size:16px !important;
    line-height:1.7 !important;
  }
  /* Main image fills its column height exactly — no overflow, no scrollbar */
  .mcontent .propage_img_main,
  .mcontent td.propage_img_main {
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .mcontent .propage_img_main img,
  .mcontent td.propage_img_main img {
    max-height:calc(100vh - var(--header-h) - 60px) !important;
    height:auto !important;
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }
}

/* ── ACCESSIBILITY ───────────────────────────────── */
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }