/** Shopify CDN: Minification failed

Line 38:0 Unexpected "}"

**/
.size-guide-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

.size-guide-header {
  text-align: center;
  margin-bottom: 30px;
}

.size-guide-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.size-guide-header p {
  color: #555;
  font-size: 0.95rem;
}

/* Unit Toggle
.unit-toggle {
  display: inline-flex;
  background: #f0f0f0;
  border-radius: 30px;
  padding: 4px;
  margin-top: 16px;
  direction: ltr; /* keep buttons order logical */
} */

.unit-btn {
  padding: 8px 24px;
  border: none;
  background: transparent;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  font-family: inherit;
}

.unit-btn.active {
  background: #1a1a1a;
  color: #fff;
}

/* Tab Nav */
.tab-nav {
  display: flex;
  flex-direction: row-reverse; /* RTL tab order */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
}

.tab-btn {
  flex: 1;
  padding: 14px;
  border: none;
  background: #f7f7f7;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: #555;
  transition: all 0.2s;
  font-family: inherit;
}

.tab-btn:not(:last-child) {
  border-left: 1px solid #e0e0e0; /* RTL: left border instead of right */
}

.tab-btn.active {
  background: #fff;
  color: #111;
  font-weight: 700;
}

/* Tab Content */
.tab-content {
  display: none;
}

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

/* Grid Layout */
.size-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px;
}

/* Image on LEFT side (visually), info on RIGHT in RTL */
.size-guide-image {
  order: 2;
}

.size-guide-info {
  order: 1;
}

.size-guide-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.size-guide-info h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.size-guide-info p {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.7;
}

/* Table */
.size-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9rem;
  text-align: right;
}

.size-table thead tr {
  background: #1a1a1a;
  color: #fff;
}

.size-table th,
.size-table td {
  padding: 10px 14px;
  text-align: right;
}

.size-table tbody tr:nth-child(even) {
  background: #f9f9f9;
}

.size-table tbody tr:hover {
  background: #f0f0f0;
}

.size-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #777;
}

/* Responsive */
@media (max-width: 640px) {
  .size-guide-grid {
    grid-template-columns: 1fr;
  }

  .size-guide-image {
    order: 1;
  }

  .size-guide-info {
    order: 2;
  }

  .tab-btn {
    font-size: 0.8rem;
    padding: 10px 6px;
  }
}
/* ── Level 2: Sub Navigation ── */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.sub-btn {
  padding: 8px 18px;
  border: 2px solid #e0e0e0;
  background: #fff;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: #555;
  transition: all 0.2s;
  font-family: inherit;
}

.sub-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.sub-btn:hover:not(.active) {
  border-color: #999;
  color: #111;
}

/* Sub content visibility */
.sub-content {
  display: none;
}

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

/* Mobile: stack sub buttons */
@media (max-width: 640px) {
  .sub-nav {
    gap: 6px;
  }
  .sub-btn {
    font-size: 0.8rem;
    padding: 7px 12px;
  }
}
/* ── LTR overrides (English) ── */
/* ══════════════════════════════════════
   LTR OVERRIDES — English
══════════════════════════════════════ */

[dir="ltr"] .size-guide-page {
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: left;
}

[dir="ltr"] .size-guide-header {
  text-align: center;
}

[dir="ltr"] .size-guide-header p {
  text-align: center;
  direction: ltr;
}

/* Fix tab order — LTR flows left to right naturally */
[dir="ltr"] .tab-nav {
  flex-direction: row;
}

[dir="ltr"] .tab-btn:not(:last-child) {
  border-right: 1px solid #e0e0e0;
  border-left: none;
}

/* Fix sub-nav pills */
[dir="ltr"] .sub-nav {
  flex-direction: row;
  justify-content: flex-start;
}

/* Fix grid — image left, text right */
[dir="ltr"] .size-guide-image {
  order: 1;
}

[dir="ltr"] .size-guide-info {
  order: 2;
  text-align: left;
}

[dir="ltr"] .size-guide-info p {
  text-align: left;
  direction: ltr;
}

[dir="ltr"] .size-guide-info h3 {
  text-align: left;
}

/* Fix table — columns in correct order, text left */
[dir="ltr"] .size-table {
  direction: ltr;
  text-align: left;
}

[dir="ltr"] .size-table th,
[dir="ltr"] .size-table td {
  text-align: left;
  direction: ltr;
}

/* Fix unit toggle */
[dir="ltr"] .unit-toggle {
  direction: ltr;
}

/* Fix size note */
[dir="ltr"] .size-note {
  text-align: left;
  direction: ltr;
}
[dir="ltr"] .sub-nav {
  text-align: left;
  direction: ltr;
}

/* Mobile LTR */
@media (max-width: 640px) {
  [dir="ltr"] .size-guide-image {
    order: 1;
  }
  [dir="ltr"] .size-guide-info {
    order: 2;
  }
}