/*
Theme Name: ELMALEK
Theme URI: https://elmalek.shop/
Author: ELMALEK
Description: Approved ELMALEK design system, built as a WooCommerce theme. Jost typography, ink and sand palette, full-bleed editorial bands, made-to-order product presentation.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elmalek
Tags: e-commerce, one-column, custom-menu, featured-images, full-width-template, rtl-language-support
WC requires at least: 6.0
WC tested up to: 9.9
*/

/* ==========================================================================
   ELMALEK Design System
   Tokens, type scale, rhythm and components — one source of truth.
   Values are the approved system; nothing new is introduced here.
   ========================================================================== */

:root {
  --em-ink:    #221E1F;
  --em-sand:   #CAB5A0;
  --em-stone:  #6E6A6B;
  --em-line:   #DCDAD5;
  --em-shell:  #EBEBE8;
  --em-white:  #FFFFFF;
  --em-muted:  #A5A1A0;
  --em-char:   #4A4647;

  --em-max:    1720px;
  --em-gutter: clamp(24px, 3vw, 56px);
  --em-rhythm: 128px;
  --em-gap:    32px;
  --em-gap-lg: 96px;

  --em-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --em-header: 88px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FFFFFF; }
body {
  font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #221E1F;
  font-weight: 300;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #CAB5A0; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ---- Layout ---- */
.em-container { max-width: 1720px; margin: 0 auto; padding-left: clamp(24px, 3vw, 56px); padding-right: clamp(24px, 3vw, 56px); }
.em-section   { padding-top: 128px; padding-bottom: 128px; }
.em-section--shell { background: #EBEBE8; }
.em-section--tight-top { padding-top: 0; }
.em-section--tight-bottom { padding-bottom: 0; }
.em-main { display: block; }
body.em-header-solid .em-main { padding-top: 88px; }

/* ---- Type ---- */
.em-h1 { font-size: 84px; line-height: 1.02; font-weight: 200; letter-spacing: 0.015em; margin: 0 0 24px; }
.em-h2 { font-size: 44px; line-height: 1.18; font-weight: 200; margin: 0 0 24px; }
.em-t3 { font-size: 22px; line-height: 1.3;  font-weight: 200; margin: 0; }
.em-body { font-size: 18px; line-height: 1.85; font-weight: 300; color: #6E6A6B; max-width: 460px; margin: 0; }
.em-body--wide { max-width: 720px; }
.em-body--light { color: #FFFFFF; }
.em-15 { font-size: 15px; font-weight: 300; color: #6E6A6B; line-height: 1.85; }
.em-lbl {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em;
  text-transform: uppercase; color: #6E6A6B; margin: 0;
}
.em-lbl--sand  { color: #CAB5A0; }
.em-lbl--light { color: #FFFFFF; }
.em-lbl--ink   { color: #221E1F; }
.em-rule { display: block; width: 40px; height: 1px; background: #CAB5A0; }

.em-stack { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.em-inline { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }

/* ---- Buttons ---- */
.em-btn {
  display: inline-block; background: #221E1F; color: #FFFFFF;
  padding: 18px 44px; font-size: 11px; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; border: 1px solid #221E1F; cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.em-btn:hover { background: #6E6A6B; border-color: #6E6A6B; color: #FFFFFF; }
.em-btn--ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.em-btn--ghost:hover { background: #FFFFFF; color: #221E1F; border-color: #FFFFFF; }
.em-link {
  display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px;
}

/* ---- Bands ---- */
.em-band { position: relative; width: 100%; overflow: hidden; background: #221E1F; }
.em-band--hero { height: 820px; }
.em-band--tall { height: 720px; }
.em-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,30,31,0.52) 0%, rgba(34,30,31,0.50) 18%, rgba(34,30,31,0.68) 38%, rgba(34,30,31,0.80) 70%, rgba(34,30,31,0.90) 100%);
}
.em-band__veil--side {
  background: linear-gradient(90deg, rgba(34,30,31,0.74) 0%, rgba(34,30,31,0.36) 55%, rgba(34,30,31,0.14) 100%);
}
.em-band__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 1720px; margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 56px) 96px; color: #FFFFFF;
}
.em-band__mid {
  position: relative; height: 100%; max-width: 1720px; margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 56px); display: flex; align-items: center; color: #FFFFFF;
}

/* ---- Grids ---- */
.em-grid    { display: grid; gap: 32px; }
.em-grid-2  { grid-template-columns: repeat(2, 1fr); }
.em-grid-3  { grid-template-columns: repeat(3, 1fr); }
.em-grid-4  { grid-template-columns: repeat(4, 1fr); }
.em-split   { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.4fr); gap: 96px; align-items: start; }
.em-split-media { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 96px; align-items: center; }
.em-split-media--flip { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.25fr); }
.em-rowhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 96px; margin-bottom: 64px; }
.em-rowhead--rule { border-bottom: 1px solid #DCDAD5; padding-bottom: 40px; margin-bottom: 0; }

/* ---- Media ---- */
.em-media { width: 100%; overflow: hidden; background: #DCDAD5; }
.em-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.em-media--1x1 { aspect-ratio: 1 / 1; }
.em-media--4x5 { aspect-ratio: 4 / 5; }
.em-media--3x4 { aspect-ratio: 3 / 4; }
.em-media--3x2 { aspect-ratio: 3 / 2; }
a:hover .em-media img { transform: scale(1.04); }

/* ---- Card ---- */
.em-card { display: block; }
.em-card__meta { padding-top: 24px; }
.em-card__meta .em-lbl { margin-bottom: 8px; }

/* ---- Spec rows ---- */
.em-specs { display: flex; flex-direction: column; border-top: 1px solid #DCDAD5; }
.em-spec { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid #DCDAD5; }
.em-swatch { width: 100%; aspect-ratio: 1 / 1; }
.em-swatch--natural { background: #EBEBE8; border: 1px solid #DCDAD5; }
.em-swatch--sand { background: #CAB5A0; }
.em-swatch--smoke { background: #6E6A6B; }
.em-swatch--ink { background: #221E1F; }
.em-swatch-name { padding-top: 16px; font-size: 15px; font-weight: 300; color: #6E6A6B; }

/* ---- Reveal ---- */
[data-reveal] { will-change: opacity, transform; }

/* ==========================================================================
   Header
   ========================================================================== */
.em-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
}
.em-header__bar {
  max-width: 1720px; margin: 0 auto; padding: 0 clamp(24px, 3vw, 56px);
  height: 88px;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center; column-gap: clamp(16px, 2vw, 40px);
}
.em-nav {
  display: flex; gap: clamp(16px, 1.8vw, 32px);
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; white-space: nowrap; color: #FFFFFF;
  align-items: center; margin: 0; padding: 0; list-style: none;
}
.em-nav--end { justify-content: flex-end; }
.em-nav li { list-style: none; }
.em-nav a { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color 0.4s ease; }
.em-nav a:hover { border-bottom-color: #CAB5A0; color: inherit; }
.em-nav .current-menu-item > a, .em-nav .current_page_item > a { border-bottom-color: #CAB5A0; }

/* Desktop dropdown menus */
.em-nav > li { position: relative; }
.em-nav .sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  background: rgba(255,255,255,0.98);
  border: 1px solid #DCDAD5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 120;
  box-shadow: 0 18px 40px rgba(34,30,31,0.08);
}
.em-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -19px; height: 19px;
}
.em-nav > li:hover > .sub-menu,
.em-nav > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.em-nav .sub-menu li { display: block; width: 100%; }
.em-nav .sub-menu a {
  display: block;
  width: 100%;
  padding: 11px 20px;
  border-bottom: 0;
  color: #221E1F !important;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.em-nav .sub-menu a:hover,
.em-nav .sub-menu .current-menu-item > a {
  background: #EBEBE8;
  color: #221E1F !important;
  border-bottom: 0;
}
.em-header__home { display: flex; justify-content: center; padding: 0 clamp(12px, 1.6vw, 32px); }
.em-header__logo { height: 30px; width: auto; object-fit: contain; filter: invert(1); }
.em-burger {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
}
.em-burger span { display: block; width: 24px; height: 1px; background: #FFFFFF; }
.em-drawer { display: none; flex-direction: column; gap: 32px; background: #221E1F; padding: 40px 24px 48px; }
.em-drawer a { font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #FFFFFF; padding: 4px 0; }
.em-drawer a:last-child { color: #CAB5A0; }
.em-drawer.is-open { display: flex; }
.em-drawer ul, .em-drawer .sub-menu { margin: 0; padding: 0; list-style: none; }
.em-drawer .sub-menu { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 0 18px; }
.em-drawer .sub-menu a { color: #A5A1A0; font-size: 10px; }

/* Solid state — on scroll, and permanently on pages with no dark hero */
.em-header.is-solid,
body.em-header-solid .em-header {
  background: rgba(255,255,255,0.96);
  border-bottom-color: #DCDAD5;
  backdrop-filter: blur(10px);
}
.em-header.is-solid .em-nav,
body.em-header-solid .em-header .em-nav { color: #221E1F; }
.em-header.is-solid .em-header__logo,
body.em-header-solid .em-header .em-header__logo { filter: none; }
.em-header.is-solid .em-burger span,
body.em-header-solid .em-header .em-burger span { background: #221E1F; }
.em-header.is-scrolled .em-header__bar { height: 72px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.em-footer { background: #221E1F; color: #FFFFFF; padding: 128px 0 40px; }
.em-footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 96px;
  padding-bottom: 64px; border-bottom: 1px solid #4A4647;
}
.em-footer__mark { height: 30px; width: auto; object-fit: contain; margin-bottom: 24px; filter: invert(1); }
.em-footer__blurb { font-size: 15px; line-height: 1.85; font-weight: 300; color: #A5A1A0; margin: 0; max-width: 300px; }
.em-footer__head { font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #CAB5A0; margin-bottom: 24px; }
.em-footer__links { display: flex; flex-direction: column; gap: 16px; font-size: 15px; font-weight: 300; color: #FFFFFF; margin: 0; padding: 0; list-style: none; }
.em-footer__links li { list-style: none; }
.em-footer__social { display: flex; gap: 24px; margin-top: 32px; font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #A5A1A0; }
.em-footer__base {
  display: flex; justify-content: space-between; gap: 96px; padding-top: 40px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #6E6A6B;
}
.em-footer__note { text-transform: none; letter-spacing: 0.02em; max-width: 620px; text-align: right; }

/* ==========================================================================
   WooCommerce — the store dressed in the system
   ========================================================================== */
.woocommerce-breadcrumb { display: none; }
.em-shop { padding-top: 128px; padding-bottom: 128px; }

/* Result count + ordering row */
.woocommerce-products-header__title { display: none; }
.em-shop-bar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  border-bottom: 1px solid #DCDAD5; padding-bottom: 40px; margin-bottom: 64px;
}
.woocommerce-result-count,
.woocommerce-ordering select {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: #6E6A6B; margin: 0;
}
.woocommerce-ordering select {
  border: 1px solid #DCDAD5; background: #FFFFFF; padding: 12px 16px;
  font-family: inherit; letter-spacing: 0.2em; cursor: pointer; border-radius: 0;
}

/* Product loop */
.woocommerce ul.products,
ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 32px;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important; margin: 0 !important; padding: 0; float: none !important; list-style: none;
  text-align: left;
}
.em-prod__link { display: block; }
.em-prod__media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #DCDAD5; }
.em-prod__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.em-prod__link:hover .em-prod__media img { transform: scale(1.04); }
.em-prod__meta { padding-top: 24px; }
.em-prod__cat { font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #6E6A6B; margin-bottom: 8px; }
.em-prod__title { font-size: 22px; line-height: 1.3; font-weight: 200; color: #221E1F; margin: 0; }
.em-prod__price { margin-top: 8px; font-size: 15px; font-weight: 300; color: #6E6A6B; }
.em-prod__price del { opacity: 0.5; margin-right: 8px; }
.em-prod__price ins { text-decoration: none; }
.em-prod__badge {
  position: absolute; top: 16px; left: 16px; background: #221E1F; color: #FFFFFF;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; padding: 6px 12px;
}
.em-prod__wrap { position: relative; }
.em-prod__actions { margin-top: 16px; }
.em-prod__actions .button, .em-prod__actions .added_to_cart {
  display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; border-bottom: 1px solid #221E1F; padding: 0 0 4px;
  background: transparent; color: #221E1F; border-radius: 0;
}
.em-prod__actions .button:hover { background: transparent; color: #CAB5A0; border-bottom-color: #CAB5A0; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 96px; text-align: left; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 8px; margin: 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 48px; height: 48px; line-height: 48px; padding: 0 12px; text-align: center;
  border: 1px solid #DCDAD5; font-size: 11px; letter-spacing: 0.2em; color: #221E1F;
  background: #FFFFFF;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #221E1F; color: #FFFFFF; border-color: #221E1F;
}

/* Single product */
.em-pdp__gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.em-pdp__gallery .flex-viewport, .em-pdp__gallery .woocommerce-product-gallery__image { background: #DCDAD5; }
.em-pdp__gallery ol.flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; }
.em-pdp__gallery ol.flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product div.summary { margin: 0; float: none; width: auto; }
.woocommerce div.product .product_title { font-size: 44px; line-height: 1.18; font-weight: 200; margin: 0 0 24px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 22px; font-weight: 200; color: #221E1F; margin: 0 0 32px;
}
.woocommerce div.product p.price del { opacity: 0.5; font-size: 18px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 18px; line-height: 1.85; font-weight: 300; color: #6E6A6B; max-width: 560px; margin-bottom: 40px;
}
.woocommerce div.product form.cart { margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.woocommerce div.product form.cart .variations { width: 100%; border: 0; margin-bottom: 24px; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { border: 0; padding: 12px 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations label {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #6E6A6B;
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  border: 1px solid #DCDAD5; background: #FFFFFF; padding: 14px 16px;
  font-family: inherit; font-size: 15px; font-weight: 300; color: #221E1F;
  border-radius: 0; height: auto; line-height: 1.4;
}
.woocommerce .quantity input.qty { width: 84px; text-align: center; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: #221E1F; color: #FFFFFF; border: 1px solid #221E1F;
  padding: 18px 44px; font-size: 11px; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; border-radius: 0; line-height: 1;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #6E6A6B; border-color: #6E6A6B; color: #FFFFFF;
}
.woocommerce .product_meta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #6E6A6B; border-top: 1px solid #DCDAD5; padding-top: 24px; }
.woocommerce .product_meta > span { display: block; margin-bottom: 8px; }

/* Tabs → stacked editorial blocks */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 40px; border: 0; display: flex; gap: 32px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: #6E6A6B; padding: 0 0 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: #221E1F; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #221E1F; }
.woocommerce div.product .woocommerce-tabs .panel { font-size: 18px; line-height: 1.85; font-weight: 300; color: #6E6A6B; max-width: 900px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }
.woocommerce table.shop_attributes { border: 0; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: 0; border-bottom: 1px solid #DCDAD5; padding: 24px 0; font-style: normal; background: transparent;
}
.woocommerce table.shop_attributes th { font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #6E6A6B; width: 200px; }
.woocommerce table.shop_attributes td { font-size: 15px; font-weight: 300; color: #6E6A6B; }
.woocommerce table.shop_attributes td p { margin: 0; }

/* Related / upsells */
.related > h2, .upsells > h2, .cross-sells > h2, .woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #order_review_heading {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: #6E6A6B; margin: 0 0 40px;
}

/* Cart, checkout, account, tables */
.woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th {
  border-color: #DCDAD5; border-radius: 0;
}
.woocommerce table.shop_table { border: 0; border-top: 1px solid #DCDAD5; }
.woocommerce table.shop_table th {
  font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: #6E6A6B; padding: 24px 12px;
}
.woocommerce table.shop_table td { padding: 24px 12px; font-size: 15px; font-weight: 300; }
.woocommerce-cart table.cart img { width: 96px; }
.woocommerce .cart-collaterals .cart_totals > h2 { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #6E6A6B; }
.woocommerce-checkout #payment { background: #EBEBE8; border-radius: 0; }
.woocommerce-checkout #payment div.payment_box { background: #FFFFFF; border-radius: 0; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  background: #EBEBE8; border-top: 2px solid #221E1F; color: #221E1F;
  font-size: 15px; font-weight: 300; border-radius: 0;
}
.woocommerce-info::before, .woocommerce-message::before { color: #221E1F; }
.woocommerce-error { border-top-color: #9A3B2F; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.woocommerce-MyAccount-navigation li a { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #6E6A6B; }
.woocommerce-MyAccount-navigation li.is-active a { color: #221E1F; border-bottom: 1px solid #221E1F; padding-bottom: 4px; }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon {
  border: 1px solid #DCDAD5; border-radius: 0; padding: 40px;
}
.woocommerce form .form-row label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #6E6A6B; margin-bottom: 8px; }
.woocommerce .woocommerce-form-login__rememberme, .woocommerce .woocommerce-form__label-for-checkbox { letter-spacing: 0; text-transform: none; font-size: 15px; }
.woocommerce ul#shipping_method li { font-size: 15px; font-weight: 300; }
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: #CAB5A0; }

/* Search, archive, single post, comments */
.em-entry { max-width: 900px; }
.em-entry h1, .em-entry h2, .em-entry h3 { font-weight: 200; }
.em-entry h1 { font-size: 44px; line-height: 1.18; margin: 0 0 24px; }
.em-entry h2 { font-size: 32px; line-height: 1.2; margin: 48px 0 16px; }
.em-entry h3 { font-size: 22px; margin: 40px 0 12px; }
.em-entry p, .em-entry li { font-size: 18px; line-height: 1.85; font-weight: 300; color: #6E6A6B; }
.em-entry a { border-bottom: 1px solid #DCDAD5; }
.em-entry blockquote { border-left: 1px solid #CAB5A0; margin: 40px 0; padding-left: 32px; }
.em-entry img { margin: 32px 0; }
.em-page-head { margin-bottom: 64px; }
.em-searchform { display: flex; gap: 16px; max-width: 560px; }
.em-searchform input[type="search"] { flex: 1; border: 1px solid #DCDAD5; padding: 16px; font-family: inherit; font-size: 15px; font-weight: 300; border-radius: 0; }

/* Screen reader */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* Admin bar offset */
body.admin-bar .em-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .em-header { top: 46px; } }

/* ==========================================================================
   Mobile tier — Design System §22. Second type tier, 80px rhythm.
   ========================================================================== */
@media (max-width: 767px) {
  .em-section, .em-shop { padding-top: 80px; padding-bottom: 80px; }
  .em-section--tight-top { padding-top: 0; }
  .em-section--tight-bottom { padding-bottom: 0; }
  body.em-header-solid .em-main { padding-top: 64px; }

  .em-h1 { font-size: 44px; line-height: 1.05; }
  .em-h2 { font-size: 32px; line-height: 1.2; }
  .em-t3, .em-prod__title { font-size: 20px; }
  .em-body { font-size: 16px; line-height: 1.8; max-width: none; }
  .em-15, .em-footer__blurb { font-size: 14px; }
  .em-lbl, .em-link, .em-prod__cat, .em-footer__head { font-size: 10px; letter-spacing: 0.24em; }
  .em-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #respond input#submit {
    display: block; width: 100%; padding: 16px 32px; text-align: center; font-size: 10px; letter-spacing: 0.24em;
  }

  .em-grid-2, .em-grid-3, .em-grid-4,
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr !important; gap: 32px !important; }
  .em-split, .em-split-media, .em-split-media--flip { grid-template-columns: 1fr !important; gap: 32px !important; }
  .em-rowhead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .em-footer__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .em-footer__base { flex-direction: column; gap: 24px; }
  .em-footer__note { text-align: left; max-width: none; }
  .em-spec { grid-template-columns: 1fr !important; gap: 8px !important; }
  .em-shop-bar { flex-direction: column; align-items: flex-start; gap: 16px; }

  .em-media--3x4, .em-media--3x2, .em-media--5x4, .em-media--16x9 { aspect-ratio: 4 / 5; }
  .em-band--hero { height: 560px; }
  .em-band--tall { height: 480px; }
  .em-band__foot { padding: 0 24px 48px; }
  .em-band__mid { padding: 0 24px; }

  .em-header__bar { height: 64px !important; padding: 0 24px; grid-template-columns: 1fr auto 1fr; column-gap: 16px; }
  .em-nav { display: none; }
  .em-header__home { grid-column: 2; justify-self: center; }
  .em-burger { display: flex; grid-column: 3; justify-self: end; }
  .em-header__logo { height: 24px; }
  .em-footer { padding: 80px 0 40px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .em-grid-3, .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); }
  .em-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .em-h1 { font-size: 64px; }
}

/* ==========================================================================
   RTL — applies only if the site runs a right-to-left locale
   ========================================================================== */
body.rtl { letter-spacing: 0; }
body.rtl .em-lbl, body.rtl .em-btn, body.rtl .em-link, body.rtl .em-nav,
body.rtl .em-prod__cat, body.rtl .em-footer__head, body.rtl .em-footer__base { letter-spacing: 0.06em; }
body.rtl .em-footer__note { text-align: left; }
body.rtl .em-band__foot, body.rtl .em-band__mid { text-align: right; }
body.rtl .woocommerce ul.products li.product { text-align: right; }


/* ==========================================================================
   Specificity guards
   WooCommerce's own stylesheet sets `.woocommerce img { height: auto }`, which
   outranks a single theme class on every store page — it uncrops the product
   cards and lets the wordmark render at its natural 1400px. These rules pin the
   sizes the design specifies, everywhere.
   ========================================================================== */
.em-header__logo,
.woocommerce .em-header__logo,
.woocommerce-page .em-header__logo { height: 30px !important; width: auto !important; }

.em-footer__mark,
.woocommerce .em-footer__mark,
.woocommerce-page .em-footer__mark { height: 30px !important; width: auto !important; }

.em-media img,
.woocommerce .em-media img,
.woocommerce-page .em-media img,
.em-prod__media img,
.woocommerce .em-prod__media img,
.woocommerce-page .em-prod__media img,
.em-band__img,
.woocommerce .em-band__img,
.woocommerce-page .em-band__img { height: 100% !important; width: 100% !important; object-fit: cover; }

.em-band { position: relative; }
.em-band--hero { height: 820px !important; }
.em-band--tall { height: 720px !important; }

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img { margin: 0; box-shadow: none; }

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title,
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb { display: none !important; }

@media (max-width: 767px) {
  .em-header__logo,
  .woocommerce .em-header__logo,
  .woocommerce-page .em-header__logo { height: 24px !important; }
  .em-band--hero { height: 560px !important; }
  .em-band--tall { height: 480px !important; }
}

/* ==========================================================================
   Store layout guards
   The shop and product views can be rendered by a page builder rather than by
   this theme's templates. When that happens WooCommerce's markup arrives with
   no container, so it runs edge to edge and slides under the fixed header.
   These rules give it the approved measure and rhythm wherever it renders.
   ========================================================================== */
.woocommerce .woocommerce-products-header,
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-page .woocommerce-notices-wrapper {
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 3vw, 56px);
  padding-right: clamp(24px, 3vw, 56px);
}

/* Inside the theme's own templates the container is already there. */
.em-container ul.products,
.em-container nav.woocommerce-pagination,
.em-container .woocommerce-result-count,
.em-container .woocommerce-ordering,
.em-container .woocommerce-notices-wrapper {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* A builder-rendered store page has no hero, so it needs the header's height
   as breathing room and a solid bar. The class is set by the theme's script. */
body.em-header-solid .woocommerce-products-header,
body.em-header-solid .entry-title,
body.em-header-solid .em-shop { padding-top: 40px; }

.woocommerce-products-header .woocommerce-products-header__title,
.woocommerce .page-title {
  font-size: 44px; line-height: 1.18; font-weight: 200; margin: 0 0 40px;
}

/* An uploaded logo is used exactly as supplied — never inverted. */
.em-header__logo--custom,
.em-footer__mark--custom { filter: none !important; }
.em-header.is-solid .em-header__logo--custom,
body.em-header-solid .em-header .em-header__logo--custom { filter: none !important; }
.em-footer__mark--custom { height: 44px !important; }

/* ==========================================================================
   Brand mark
   Two real artworks — the light lockup for dark bands, the ink lockup for the
   solid bar — swapped by state. No filters: the supplied artwork is used as
   drawn, so the gradient and the tagline survive intact.
   ========================================================================== */
.em-header__mark { position: relative; display: block; }
.em-header__logo { display: block; width: auto; filter: none !important; }
.em-header__logo--dark { position: absolute; inset: 0; opacity: 0; }
.em-header__logo--light { opacity: 1; }

.em-header.is-solid .em-header__logo--light,
body.em-header-solid .em-header .em-header__logo--light { opacity: 0; }
.em-header.is-solid .em-header__logo--dark,
body.em-header-solid .em-header .em-header__logo--dark { opacity: 1; }

.em-footer__mark { filter: none !important; height: 44px !important; width: auto !important; }

/* ==========================================================================
   Store pages rendered outside this theme's templates
   No hero, no container: the markup arrives bare. `em-unwrapped` is set by the
   theme's script when that is what happened, and gives the whole main column
   the approved measure and gutters in one place.
   ========================================================================== */
body.em-unwrapped .em-main {
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 3vw, 56px);
  padding-right: clamp(24px, 3vw, 56px);
}

/* The gutter now lives on the column, so the per-block copies come back off. */
body.em-unwrapped .woocommerce .woocommerce-products-header,
body.em-unwrapped .woocommerce ul.products,
body.em-unwrapped ul.products,
body.em-unwrapped .woocommerce nav.woocommerce-pagination,
body.em-unwrapped .woocommerce .woocommerce-result-count,
body.em-unwrapped .woocommerce .woocommerce-ordering,
body.em-unwrapped .woocommerce-cart .woocommerce,
body.em-unwrapped .woocommerce-checkout .woocommerce,
body.em-unwrapped .woocommerce-account .woocommerce,
body.em-unwrapped .woocommerce-notices-wrapper {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The page title is the only heading these views get, so it is shown and set
   in the approved scale rather than hidden. */
body.em-unwrapped .woocommerce-products-header,
body.em-unwrapped .woocommerce-products-header__title,
body.em-unwrapped .woocommerce .page-title,
body.em-unwrapped .em-main > .woocommerce > h1,
body.em-unwrapped .em-main > h1,
body.em-unwrapped h1.entry-title {
  display: block !important;
  font-size: 44px;
  line-height: 1.18;
  font-weight: 200;
  color: #221E1F;
  margin: 0 0 16px;
  padding: 0;
}

body.em-unwrapped .woocommerce-products-header::after,
body.em-unwrapped .em-main > .woocommerce > h1::after,
body.em-unwrapped h1.entry-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #CAB5A0;
  margin: 24px 0 48px;
}

@media (max-width: 767px) {
  body.em-unwrapped .woocommerce-products-header__title,
  body.em-unwrapped .woocommerce .page-title,
  body.em-unwrapped .em-main > .woocommerce > h1,
  body.em-unwrapped h1.entry-title { font-size: 32px; }
}
/* ===== PDP — الوصف القصير ياخد عرض العمود كامل ===== */
.woocommerce div.product .woocommerce-product-details__short-description {
  max-width: none !important;
  width: 100% !important;
}
.em-pdp__note .summary,
.em-pdp__note .entry-summary {
  max-width: none !important;
  width: 100% !important;
}
/* ===== PDP — تقليل الفراغ قبل الشروط والأحكام ===== */
.em-section:has(> .em-container.em-pdp) {
  padding-bottom: 40px !important;
}
.em-section.em-acc-wrap {
  padding-top: 0 !important;
}
/* ===== زرار السلة في الموبايل — أسود زي الكمبيوتر ===== */
@media (max-width: 768px) {
  body.single-product a.elmalek-reserve-btn {
    background: #221E1F !important;
    border-color: #221E1F !important;
    color: #FFFFFF !important;
  }
}