/*
 * Silvazar: Arabic (right-to-left) pages.
 * Loaded only when the page language is Arabic, after style.css. Storefront's own rtl.css
 * mirrors the parent theme; this file mirrors what the Silvazar theme adds on top.
 */

/* ---------------------------------------------------------------------
   Typeface. Arabic letters join, so letter spacing must always be zero:
   any spacing breaks the joins and makes words hard to read.
--------------------------------------------------------------------- */
:root {
	--sz-font: var(--sz-font-ar, "IBM Plex Sans Arabic"), "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] body *,
html[dir="rtl"] body *::before,
html[dir="rtl"] body *::after { letter-spacing: 0 !important; }

body { font-size: 17px; font-weight: 400; line-height: 1.8; }
h1, h2, h3, h4, h5, h6, .product_title, .woocommerce-loop-product__title { line-height: 1.45; font-weight: 500; }
h1, .product_title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; }
.sz-hero-content h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 400; line-height: 1.35; }
.sz-hero-content p { line-height: 1.85; }
.sz-menu a { font-size: 1.2rem; }
.sz-menu .sub-menu a { font-size: 1.05rem; }
.sz-menu-account a, .sz-panel summary, .sz-tag, .sz-eyebrow, table.shop_table th, table.cart th { font-size: 0.95rem; }

/* The brand word and Latin-only bits keep the brand face */
.sz-lang-item[lang="en"] { font-family: "Darker Grotesque", "Helvetica Neue", Arial, sans-serif; font-size: 1.05em; }

/* ---------------------------------------------------------------------
   Header
--------------------------------------------------------------------- */
.sz-bag-count { right: auto; left: 4px; }
.sz-account-pop { right: auto; left: 0; }

/* ---------------------------------------------------------------------
   Slide-out menu and search: the menu slides in from the right
--------------------------------------------------------------------- */
.sz-offcanvas {
	left: auto;
	right: 0;
	transform: translateX(102%);
	border-right: 0;
	border-left: 1px solid var(--sz-line);
}
.sz-offcanvas.is-open { transform: none; }
.sz-offcanvas .sz-close { right: auto; left: 1.25rem; }
.sz-menu .sub-menu { margin: 0 1.1em 0.5em 0; }
.sz-sub-toggle { right: auto; left: 0; }
.sz-search .sz-close { right: auto; left: 1rem; }

/* ---------------------------------------------------------------------
   Homepage slideshow
--------------------------------------------------------------------- */
.sz-hero-controls { right: auto; left: clamp(1rem, 5vw, 4rem); }
.sz-hero-dot::before, .sz-hero-dot i { left: auto; right: 0; }
@media (max-width: 767px) {
	.sz-hero-controls { right: auto; left: 1rem; }
}

/* Computers and tablets: the words sit on the right in Arabic, so the photos are mirrored
   to put the jewellery on the left, and the green veil is mirrored to sit behind the words.
   Phones keep the photos as they are: there the words sit below the photo, not over it. */
@media (min-width: 768px) {
	.sz-hero-slides > .sz-slide { transform: scaleX(-1); }
	.sz-hero-slides::before {
		background: linear-gradient(270deg, rgba(18, 52, 23, 0.86) 0%, rgba(18, 52, 23, 0.58) 38%, rgba(18, 52, 23, 0.14) 78%, rgba(18, 52, 23, 0.08) 100%);
	}
}

/* ---------------------------------------------------------------------
   Product cards and product page
--------------------------------------------------------------------- */
ul.products li.product,
.site-main ul.products li.product { text-align: right; }
.sz-tag { left: auto; right: 0; }
ul.products li.product .woocommerce-loop-product__title { padding: 0 0 0 2.4rem; }
.sz-fav { right: auto !important; left: 0 !important; }
.sz-soldout { margin-left: 0; margin-right: 0.5em; }
.sz-duties-note { border-left: 0; padding-left: 0; border-right: 2px solid var(--sz-grey-light); padding-right: 0.9em; }
@media (min-width: 768px) {
	.single-product div.product .sz-panels { margin-left: 0; margin-right: 47.0588235294%; }
}

/* ---------------------------------------------------------------------
   Notices
--------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
	border-left: 0;
	border-right: 3px solid var(--sz-green);
}
.woocommerce-error { border-right-color: #8a2c2c; }

/* ---------------------------------------------------------------------
   Phones
--------------------------------------------------------------------- */
@media (max-width: 767px) {
	body { font-size: 16.5px; }
	.sz-hero-content h1 { font-size: 1.9rem; }
	.site-main ul.products.columns-3 li.product,
	.site-main ul.products li.product { float: right; margin-right: 0 !important; margin-left: 1.2rem !important; }
	.site-main ul.products li.product:nth-child(2n) { margin-left: 0 !important; }
	ul.products li.product .woocommerce-loop-product__title { padding-right: 0; padding-left: 2rem; }
}

/* Numbers, emails, order numbers and card digits stay left-to-right inside Arabic text */
.amount, .woocommerce-Price-amount, bdi, input[type="email"], input[type="tel"], .woocommerce-order-overview__order strong { direction: ltr; unicode-bidi: isolate; }

/* Arabic script has no true italics: slanted Arabic looks broken, so emphasis stays upright */
em, i, cite, .sz-soldout, .price del, .sz-is-soldout .price,
.single-product div.product .woocommerce-product-details__short-description { font-style: normal; }
