/*
Theme Name: ركن Rukn
Theme URI: https://ses1.net
Author: Rukn
Description: ثيم متجر "ركن" — في كل ركن حكاية وحياة. ثيم مستقل متوافق مع WooCommerce بنفس هوية الموقع (بني دافئ، كريمي، أخضر زيتوني). يعمل RTL بالكامل، ومتجاوب للموبايل والديسكتوب.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: rukn
WC requires at least: 7.0
WC tested up to: 9.0
Tags: e-commerce, rtl-language-support, custom-menu, featured-images, translation-ready
*/

/* =========================================
   ركن — Design Tokens
   ========================================= */
:root{
  --brown-900: #2E211C;
  --brown-800: #4D342F;
  --brown-700: #6B4A42;
  --cream-100: #FBF3E7;
  --cream-200: #F2E1C3;
  --sage-600:  #6E7C5A;
  --sage-700:  #56624A;
  --amber-600: #C2842D;
  --amber-700: #A66E22;
  --white: #FFFFFF;

  --font-display: 'Aref Ruqaa', serif;
  --font-body: 'Tajawal', sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --container-w: 1180px;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--brown-900);
  background: var(--cream-100);
  line-height: 1.6;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2, h3{
  font-family: var(--font-display);
  color: var(--brown-800);
  line-height: 1.25;
}

/* =========================================
   Buttons
   ========================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 34px;
  border-radius: var(--radius-lg);
  font-weight:700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn-primary{
  background: var(--brown-800);
  color: var(--cream-200);
}
.btn-primary:hover{
  background: var(--amber-700);
  transform: translateY(-2px);
}
.btn-outline{
  border-color: var(--brown-800);
  color: var(--brown-800);
  background: transparent;
}
.btn-outline:hover{
  background: var(--brown-800);
  color: var(--cream-200);
}
.btn-block{ width:100%; }

/* =========================================
   Announcement bar
   ========================================= */
.announce-bar{
  background: var(--brown-900);
  color: var(--cream-200);
  text-align:center;
  font-size: 0.82rem;
  padding: 9px 12px;
  letter-spacing: .2px;
}

/* =========================================
   Header
   ========================================= */
.site-header{
  background: var(--cream-100);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(77,52,47,0.12);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
}
.logo{ height: 56px; width:auto; }

.main-nav{
  display:flex;
  gap: 32px;
  font-weight: 500;
  font-size: 0.98rem;
}
.main-nav a{ position:relative; padding-bottom:4px; }
.main-nav a::after{
  content:"";
  position:absolute;
  right:0; left:0; bottom:0;
  height:2px;
  background: var(--amber-600);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-icons{ display:flex; align-items:center; gap: 14px; }
.icon-btn{
  background:none; border:none; cursor:pointer;
  width: 40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  color: var(--brown-800);
  position: relative;
}
.icon-btn svg{ width:22px; height:22px; }
.cart-count{
  position:absolute;
  top: -2px; left: -2px;
  background: var(--amber-600);
  color:#fff;
  font-size: 0.65rem;
  font-weight:700;
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.menu-toggle span{ width:22px; height:2px; background: var(--brown-800); display:block; }

/* =========================================
   Hero
   ========================================= */
.hero{
  position:relative;
  min-height: 78vh;
  overflow:hidden;
}
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  visibility:hidden;
  transition: opacity .6s ease;
}
.hero-slide.active{ opacity:1; visibility:visible; position:relative; }
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(46,33,28,0.35) 0%, rgba(46,33,28,0.55) 65%, rgba(46,33,28,0.75) 100%);
}
.hero-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(251,243,231,0.85);
  color: var(--brown-800);
  border:none; width:42px; height:42px; border-radius:50%;
  font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index: 5;
}
.hero-arrow-prev{ right:20px; }
.hero-arrow-next{ left:20px; }
.hero-dots{
  position:absolute; bottom:22px; right:50%; transform: translateX(50%);
  display:flex; gap:8px; z-index:5;
}
.hero-dot{
  width:9px; height:9px; border-radius:50%;
  border: 1.5px solid var(--cream-200);
  background: transparent;
  cursor:pointer;
  padding:0;
}
.hero-dot.active{ background: var(--cream-200); }
.hero-content{
  position:relative;
  text-align:center;
  color: var(--cream-200);
  max-width: 640px;
  padding: 0 20px;
}
.hero-eyebrow{
  display:inline-block;
  font-size: 0.8rem;
  letter-spacing: 1px;
  background: rgba(242,225,195,0.15);
  border: 1px solid rgba(242,225,195,0.5);
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.hero-content h1{
  color: var(--cream-200);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 18px;
}
.hero-content p{
  font-size: 1.05rem;
  margin-bottom: 30px;
  opacity: .95;
}

/* =========================================
   Section heads
   ========================================= */
.section-head{
  text-align:center;
  max-width: 560px;
  margin: 0 auto 42px;
}
.eyebrow{
  display:block;
  color: var(--sage-700);
  font-weight:700;
  font-size: 0.85rem;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* =========================================
   Categories
   ========================================= */
.categories{ padding: 84px 24px 40px; }
.category-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.category-card{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 14px;
}
.category-image{
  width:100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: cover;
  background-position:center;
  transition: transform .3s ease;
}
.category-card:hover .category-image{ transform: scale(1.04); }
.cat-1{ background: radial-gradient(circle at 35% 30%, #E9C77E, var(--amber-600)); }
.cat-2{ background: radial-gradient(circle at 35% 30%, #C9B79A, var(--brown-700)); }
.cat-3{ background: radial-gradient(circle at 35% 30%, #B9C4A6, var(--sage-600)); }
.cat-4{ background: radial-gradient(circle at 35% 30%, #E4D3B8, var(--brown-800)); }
.category-card h3{ font-size: 1.05rem; font-family: var(--font-body); font-weight:700; }

/* =========================================
   Product grid
   ========================================= */
.featured{ padding: 60px 24px 90px; }
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.product-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid rgba(77,52,47,0.1);
  transition: box-shadow .25s ease, transform .25s ease;
}
.product-card:hover{
  box-shadow: 0 18px 34px rgba(46,33,28,0.12);
  transform: translateY(-4px);
}
.product-image{
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--cream-200), #E4CFA0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.product-image span{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--brown-700);
  opacity:.55;
}
.product-badge{
  position:absolute; top:12px; right:12px;
  background: var(--amber-600); color:#fff;
  font-size: 0.7rem; font-weight:700;
  padding: 4px 10px; border-radius: 20px;
}
.product-info{ padding: 16px 18px 20px; }
.product-info h3{
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight:700;
  margin-bottom: 6px;
}
.product-info .price{
  color: var(--sage-700);
  font-weight:700;
  margin-bottom: 12px;
  display:block;
}
.add-btn{
  width:100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brown-800);
  background: transparent;
  color: var(--brown-800);
  font-weight:700;
  font-family: var(--font-body);
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease;
}
.add-btn:hover{ background: var(--brown-800); color: var(--cream-200); }

/* =========================================
   Story section
   ========================================= */
.story{
  background: var(--brown-800);
  color: var(--cream-200);
  padding: 90px 24px;
}
.story-inner{
  max-width: 720px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 26px;
}
.story-leaf{ width:56px; color: var(--sage-600); opacity:.85; }
.story-leaf svg{ width:100%; height:auto; }
.story blockquote{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.7;
}
.story .btn-outline{
  border-color: var(--cream-200);
  color: var(--cream-200);
}
.story .btn-outline:hover{
  background: var(--cream-200);
  color: var(--brown-800);
}

/* =========================================
   Newsletter
   ========================================= */
.newsletter{ padding: 80px 24px; background: var(--cream-100); }
.newsletter-inner{ text-align:center; max-width: 520px; }
.newsletter-inner p{ margin: 10px 0 26px; color: var(--brown-700); }
.newsletter-form{
  display:flex;
  gap: 10px;
  background: var(--white);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(77,52,47,0.15);
}
.newsletter-form input{
  flex:1;
  border:none;
  background:transparent;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline:none;
}
.newsletter-form .btn{ padding: 12px 26px; }

/* =========================================
   Footer
   ========================================= */
.site-footer{ background: var(--brown-900); color: var(--cream-200); padding-top: 70px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(242,225,195,0.15);
}
.footer-logo{ height:46px; filter: brightness(0) invert(1); opacity:.9; margin-bottom: 12px; }
.footer-brand p{ opacity:.7; font-size: 0.9rem; }
.footer-col h4{
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: var(--cream-200);
}
.footer-col{ display:flex; flex-direction:column; gap: 10px; }
.footer-col a{ opacity:.75; font-size: 0.9rem; }
.footer-col a:hover{ opacity:1; }
.footer-bottom{ text-align:center; padding: 22px 24px; font-size: 0.8rem; opacity:.6; }

/* =========================================
   Cart drawer
   ========================================= */
.cart-backdrop{
  position:fixed; inset:0;
  background: rgba(46,33,28,0.45);
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
  z-index: 60;
}
.cart-backdrop.open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width: min(400px, 92vw);
  background: var(--cream-100);
  z-index: 70;
  display:flex;
  flex-direction:column;
  transform: translateX(100%);
  transition: transform .35s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
}
.cart-drawer.open{ transform: translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(77,52,47,0.12);
}
.cart-drawer-head h3{ font-size: 1.2rem; }
.cart-drawer-head button{ background:none; border:none; font-size:1.1rem; cursor:pointer; color: var(--brown-800); }

.cart-items{ flex:1; overflow-y:auto; padding: 20px 22px; }
.cart-empty{ text-align:center; color: var(--brown-700); margin-top: 40px; font-size: 0.95rem; }

.cart-line{
  display:flex; align-items:center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(77,52,47,0.08);
}
.cart-line .thumb{
  width:56px; height:56px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--cream-200), #E4CFA0);
  flex-shrink:0;
}
.cart-line .details{ flex:1; }
.cart-line .details h4{ font-size: 0.92rem; margin-bottom: 4px; }
.cart-line .details span{ font-size: 0.85rem; color: var(--sage-700); font-weight:700; }
.cart-line .remove{ background:none; border:none; color: var(--brown-700); cursor:pointer; font-size:0.85rem; }

.cart-footer{ padding: 20px 22px; border-top: 1px solid rgba(77,52,47,0.12); }
.cart-total{ display:flex; justify-content:space-between; font-weight:700; margin-bottom: 16px; font-size:1.05rem; }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 960px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed;
    top: 0; right:0;
    height:100%;
    width: min(280px, 80vw);
    background: var(--cream-100);
    flex-direction:column;
    padding: 100px 30px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 55;
  }
  .main-nav.open{ transform: translateX(0); box-shadow: -10px 0 30px rgba(0,0,0,0.15); }
  .menu-toggle{ display:flex; }
  .header-inner{ justify-content: space-between; }
  .logo{ height:44px; }
}

/* =========================================
   صفحة العنوان الفرعي (لكل الصفحات الداخلية)
   ========================================= */
.page-head{
  background: var(--cream-200);
  padding: 46px 24px;
  text-align:center;
}
.page-head h1{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.breadcrumb{
  font-size: 0.85rem;
  color: var(--brown-700);
  margin-top: 8px;
}
.breadcrumb a:hover{ text-decoration: underline; }

/* =========================================
   صفحة كل المنتجات
   ========================================= */
.shop-layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  padding: 50px 24px 90px;
}
.shop-filters h4{
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 14px;
}
.filter-group{ margin-bottom: 30px; }
.filter-option{
  display:flex; align-items:center; gap:8px;
  padding: 6px 0;
  font-size: 0.92rem;
  cursor:pointer;
}
.filter-option input{ accent-color: var(--brown-800); }
.shop-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: var(--brown-700);
}
.shop-toolbar select{
  border: 1px solid rgba(77,52,47,0.25);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-body);
  background: var(--white);
}
.shop-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pagination{
  display:flex; justify-content:center; gap:8px; margin-top: 44px;
}
.pagination button{
  width:36px; height:36px;
  border-radius:50%;
  border: 1px solid rgba(77,52,47,0.2);
  background: var(--white);
  cursor:pointer;
  font-family: var(--font-body);
}
.pagination button.active{ background: var(--brown-800); color: var(--cream-200); border-color: var(--brown-800); }

/* =========================================
   صفحة المنتج المفرد
   ========================================= */
.product-detail{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 60px 24px 40px;
}
.gallery-main{
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 14px;
}
.gallery-main span{ font-family: var(--font-display); font-size: 5rem; color: rgba(77,52,47,0.35); }
.gallery-thumbs{ display:flex; gap: 12px; }
.gallery-thumbs div{
  width:70px; height:70px; border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor:pointer;
}
.gallery-thumbs div.active{ border-color: var(--brown-800); }

.pd-info .eyebrow{ margin-bottom: 6px; }
.pd-info h1{ font-family: var(--font-body); font-size: 1.6rem; font-weight:800; margin-bottom: 10px; }
.pd-price{ font-size: 1.3rem; font-weight:700; color: var(--sage-700); margin-bottom: 20px; display:block; }
.pd-price .old{ text-decoration: line-through; color: var(--brown-700); font-size: 1rem; font-weight:400; margin-inline-start: 10px; }
.pd-desc{ color: var(--brown-700); margin-bottom: 28px; line-height: 1.8; }

.qty-row{ display:flex; align-items:center; gap: 20px; margin-bottom: 24px; }
.qty-stepper{
  display:flex; align-items:center; border: 1.5px solid var(--brown-800); border-radius: var(--radius-lg); overflow:hidden;
}
.qty-stepper button{
  width:40px; height:40px; border:none; background:transparent; cursor:pointer; font-size:1.1rem; color: var(--brown-800);
}
.qty-stepper span{ width:36px; text-align:center; font-weight:700; }

.pd-actions{ display:flex; gap: 14px; }
.pd-actions .btn{ flex:1; }

.pd-meta{ margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(77,52,47,0.12); font-size: 0.88rem; color: var(--brown-700); display:flex; flex-direction:column; gap:8px; }

.related{ padding: 50px 24px 90px; }

/* =========================================
   صفحة السلة الكاملة
   ========================================= */
.cart-page{
  display:grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 44px;
  padding: 60px 24px 90px;
  align-items:start;
}
.cart-table{ width:100%; border-collapse: collapse; }
.cart-table th{
  text-align:right;
  font-size: 0.82rem;
  color: var(--brown-700);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(77,52,47,0.15);
  font-weight:700;
}
.cart-table td{ padding: 20px 0; border-bottom: 1px solid rgba(77,52,47,0.08); vertical-align:middle; }
.cart-row-info{ display:flex; align-items:center; gap: 14px; }
.cart-row-info .thumb{ width:64px; height:64px; border-radius: var(--radius-sm); flex-shrink:0; }
.cart-row-info h4{ font-size: 0.95rem; margin-bottom:4px; }
.cart-table .remove-row{ background:none; border:none; color: var(--brown-700); cursor:pointer; font-size: 0.85rem; }
.empty-cart-msg{ text-align:center; padding: 80px 20px; color: var(--brown-700); }
.empty-cart-msg .btn{ margin-top: 20px; }

.summary-card{
  background: var(--white);
  border: 1px solid rgba(77,52,47,0.12);
  border-radius: var(--radius-md);
  padding: 26px;
}
.summary-card h3{ font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 20px; }
.summary-row{ display:flex; justify-content:space-between; font-size: 0.92rem; margin-bottom: 12px; color: var(--brown-700); }
.summary-row.total{ font-weight:700; font-size: 1.1rem; color: var(--brown-900); border-top: 1px solid rgba(77,52,47,0.15); padding-top: 14px; margin-top: 6px; }
.coupon-row{ display:flex; gap: 8px; margin: 20px 0; }
.coupon-row input{
  flex:1; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid rgba(77,52,47,0.25); font-family: var(--font-body);
}
.coupon-row button{
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--brown-800); background:transparent; color: var(--brown-800);
  font-weight:700; cursor:pointer;
}

/* =========================================
   صفحة الدفع (Checkout)
   ========================================= */
.checkout-page{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 44px;
  padding: 50px 24px 90px;
  align-items:start;
}
.checkout-section{ margin-bottom: 34px; }
.checkout-section h3{ font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 16px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full{ grid-column: 1 / -1; }
.form-field label{ display:block; font-size: 0.85rem; color: var(--brown-700); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(77,52,47,0.25); font-family: var(--font-body); font-size: 0.95rem;
  background: var(--white);
}
.payment-option{
  display:flex; align-items:center; gap: 12px;
  border: 1.5px solid rgba(77,52,47,0.18);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor:pointer;
}
.payment-option.selected{ border-color: var(--brown-800); background: rgba(242,225,195,0.35); }
.payment-option input{ accent-color: var(--brown-800); }
.payment-option .p-name{ font-weight:700; font-size: 0.95rem; }
.payment-option .p-note{ font-size: 0.8rem; color: var(--brown-700); }

/* =========================================
   صفحات تسجيل الدخول / إنشاء حساب
   ========================================= */
.auth-page{
  min-height: 70vh;
  display:flex; align-items:center; justify-content:center;
  padding: 60px 24px;
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--white);
  border: 1px solid rgba(77,52,47,0.12);
  border-radius: var(--radius-md);
  padding: 40px 34px;
}
.auth-card h1{ font-family: var(--font-body); font-weight:800; font-size: 1.4rem; text-align:center; margin-bottom: 6px; }
.auth-card .sub{ text-align:center; color: var(--brown-700); font-size: 0.9rem; margin-bottom: 28px; }
.auth-field{ margin-bottom: 16px; }
.auth-field label{ display:block; font-size: 0.85rem; margin-bottom: 6px; color: var(--brown-800); }
.auth-field input{
  width:100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(77,52,47,0.25); font-family: var(--font-body); font-size:0.95rem;
}
.auth-note{
  background: rgba(198,153,60,0.12);
  border: 1px solid rgba(198,153,60,0.4);
  color: var(--amber-700);
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.auth-switch{ text-align:center; margin-top: 20px; font-size: 0.9rem; }
.auth-switch a{ color: var(--sage-700); font-weight:700; }

@media (max-width: 900px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-detail{ grid-template-columns: 1fr; }
  .cart-page{ grid-template-columns: 1fr; }
  .checkout-page{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   WooCommerce Bridge — يخلّي صفحات ووكومرس الحقيقية
   تاخد نفس شكل تصميم "ركن" (شبكة المنتجات، المنتج المفرد،
   السلة، الدفع، الحساب) من غير ما نعدّل قوالب ووكومرس نفسها.
   ========================================================= */

/* أزرار ووكومرس = أزرار ركن */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: var(--brown-800);
  color: var(--cream-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 12px 28px;
  border: 1.5px solid var(--brown-800);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background: var(--amber-700);
  border-color: var(--amber-700);
  color: var(--cream-200);
  transform: translateY(-2px);
}

/* إشعارات ووكومرس بألوان البراند */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice{
  border-top-color: var(--amber-600) !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}
.woocommerce-message::before{ color: var(--sage-700); }
.woocommerce-info::before{ color: var(--amber-600); }

/* ===== شبكة المتجر (Shop archive) — زي .shop-grid ===== */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px;
  margin: 0;
  justify-content: flex-start;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: calc(33.333% - 16px) !important; /* 3 items per row accounting for the gap */
  margin: 0 !important;
  /* Keep the rest of your existing styles below */
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(77,52,47,0.1);
  transition: box-shadow .25s ease, transform .25s ease;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 18px 34px rgba(46,33,28,0.12);
  transform: translateY(-4px);
}
.woocommerce ul.products li.product a img{
  margin: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-800);
  padding: 16px 18px 4px;
  margin: 0;
}
.woocommerce ul.products li.product .price{
  color: var(--sage-700);
  font-weight: 700;
  font-size: 1rem;
  padding: 0 18px 12px;
  display: block;
  margin: 0;
}
.woocommerce ul.products li.product .price del{ color: var(--brown-700); font-weight: 400; opacity: .7; }
.woocommerce ul.products li.product .price ins{ text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin: auto 18px 18px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brown-800);
  border: 1.5px solid var(--brown-800);
  text-align: center;
}
.woocommerce ul.products li.product .button:hover{
  background: var(--brown-800);
  color: var(--cream-200);
}
.woocommerce span.onsale{
  background: var(--amber-600);
  color: #fff;
  border-radius: 20px;
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
}

/* شريط أدوات المتجر (الترتيب + العدد) = .shop-toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ margin-bottom: 22px; }
.woocommerce .woocommerce-ordering select{
  border: 1px solid rgba(77,52,47,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  background: var(--white);
}

/* فلاتر جانبية (sidebar) = .shop-filters */
.shop-filters .filter-option a{ color: inherit; }
.shop-filters .filter-option a:hover{ color: var(--amber-700); }
.shop-filters .filter-option.active a{ color: var(--brown-800); font-weight: 700; }

/* ===== المنتج المفرد (Single product) = .product-detail ===== */
.woocommerce div.product{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 20px 0 40px;
}
.woocommerce div.product .woocommerce-product-gallery{ width: 100% !important; margin: 0; float: none; }
.woocommerce div.product .woocommerce-product-gallery img{ border-radius: var(--radius-md); }
.woocommerce div.product .summary{ width: 100% !important; margin: 0; float: none; }
.woocommerce div.product .product_title{
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brown-800);
  margin-bottom: 10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sage-700);
  margin-bottom: 20px;
}
.woocommerce div.product p.price del{ color: var(--brown-700); font-weight: 400; font-size: 1rem; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color: var(--brown-700);
  line-height: 1.8;
  margin-bottom: 28px;
}
.woocommerce .quantity .qty{
  border: 1.5px solid var(--brown-800);
  border-radius: var(--radius-lg);
  height: 44px;
  width: 70px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brown-800);
  background: transparent;
}
.woocommerce div.product form.cart{ margin-bottom: 28px; }
.woocommerce div.product form.cart .button{ flex: 1; padding: 13px 28px; }

/* التبويبات (وصف، مراجعات) */
.woocommerce div.product .woocommerce-tabs{ grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color: var(--amber-600); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color: var(--brown-800); }

/* منتجات مشابهة / متعلقة تحت المنتج */
.woocommerce .related.products,
.woocommerce .up-sells{ grid-column: 1 / -1; padding-top: 30px; }
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2{
  font-family: var(--font-display);
  color: var(--brown-800);
  text-align: center;
  margin-bottom: 30px;
}

/* ===== السلة (Cart page) = .cart-table + .summary-card ===== */
.woocommerce table.shop_table{
  border: none;
  border-collapse: collapse;
  border-radius: 0;
}
.woocommerce table.shop_table th{
  text-align: right;
  font-size: .82rem;
  color: var(--brown-700);
  border-bottom: 1px solid rgba(77,52,47,0.15);
  font-family: var(--font-body);
}
.woocommerce table.shop_table td{
  border-top: 1px solid rgba(77,52,47,0.08);
  padding: 18px 12px;
  vertical-align: middle;
}
.woocommerce table.cart img{ width: 64px; border-radius: var(--radius-sm); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals{
  width: 100% !important;
  float: none;
  background: var(--white);
  border: 1px solid rgba(77,52,47,0.12);
  border-radius: var(--radius-md);
  padding: 26px;
}
.woocommerce .cart_totals h2{ font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 16px; }
.woocommerce-cart table.cart td.actions .coupon .input-text{
  border: 1px solid rgba(77,52,47,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-body);
}

/* ===== الدفع (Checkout) = .form-field + .payment-option + .summary-card ===== */
.woocommerce form .form-row label,
.woocommerce-checkout label{
  font-size: .85rem;
  color: var(--brown-700);
  margin-bottom: 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce .select2-container .select2-selection,
.woocommerce-checkout select{
  border: 1px solid rgba(77,52,47,0.25) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--white);
  min-height: 44px;
}
.woocommerce-checkout #payment{
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods{
  border: none;
  padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border: 1.5px solid rgba(77,52,47,0.18);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  list-style: none;
}
.woocommerce-checkout #payment div.payment_box{
  background: rgba(242,225,195,0.35);
  border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before{ display: none; }
.woocommerce-checkout .woocommerce-checkout-review-order{
  background: var(--white);
  border: 1px solid rgba(77,52,47,0.12);
  border-radius: var(--radius-md);
  padding: 26px;
}
.woocommerce-checkout .woocommerce-checkout-review-order h3,
#order_review_heading{ font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 16px; }

/* ===== الحساب / تسجيل الدخول (My Account) = .auth-card ===== */
.woocommerce-account .woocommerce{
  max-width: 460px;
  margin-inline: auto;
}
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce .col2-set{ display: block; }
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2,
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
  width: 100%;
  float: none;
  background: var(--white);
  border: 1px solid rgba(77,52,47,0.12) !important;
  border-radius: var(--radius-md);
  padding: 34px 30px;
  margin-bottom: 24px;
}
.woocommerce-account .woocommerce h2{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 20px;
}
.woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li{
  border-bottom: 1px solid rgba(77,52,47,0.1);
  padding: 10px 0;
}
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--amber-700); font-weight: 700; }

/* أزرار العناوين في صفحة الحساب (تعديل / إضافة) */
.woocommerce-Address-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.woocommerce-Address-title h3{ margin: 0; }
.woocommerce-Address-title a,
.woocommerce-Address .title a{
  display: inline-block;
  padding: 10px 22px;
  border: 1.5px solid var(--brown-800);
  border-radius: var(--radius-lg);
  background: var(--brown-800);
  color: var(--cream-200) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.woocommerce-Address-title a:hover,
.woocommerce-Address .title a:hover{
  background: var(--amber-700);
  border-color: var(--amber-700);
  color: var(--cream-200) !important;
  transform: translateY(-2px);
}

/* درج السلة الجانبي مربوط بميني-كارت ووكومرس */
.cart-drawer .widget_shopping_cart_content{ padding: 20px 22px; flex: 1; overflow-y: auto; }
.cart-drawer .widget_shopping_cart_content ul.cart_list li.mini_cart_item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 30px 14px 0;
  border-bottom: 1px solid rgba(77,52,47,0.08);
  list-style: none;
  position: relative;
}
.cart-drawer .widget_shopping_cart_content ul.cart_list li.mini_cart_item > a:not(.remove){
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
  color: var(--brown-800);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.cart-drawer .widget_shopping_cart_content ul.cart_list li.mini_cart_item .quantity{
  margin-inline-start: 68px;
  background: var(--cream-200);
  color: var(--brown-800);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 11px;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}
.cart-drawer .widget_shopping_cart_content ul.cart_list li.mini_cart_item > a.remove{
  position: absolute;
  top: 18px;
  left: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: rgba(77,52,47,0.08);
  color: var(--brown-700) !important;
  font-size: 0.9rem;
}

.cart-drawer .widget_shopping_cart_content .buttons{ display: flex; gap: 8px; }
.cart-drawer .widget_shopping_cart_content .buttons a{ flex: 1; text-align: center; }
.cart-drawer .widget_shopping_cart_content p.total{
  border-top: 1px solid rgba(77,52,47,0.12);
  padding-top: 14px;
  font-size: 1.05rem;
}

/* ===== تجاوب الموبايل لصفحات ووكومرس ===== */
@media (max-width: 900px){
  /* 1. Fix container alignment and force RTL direction */
  .woocommerce ul.products,
  .woocommerce-page ul.products{ 
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    direction: rtl !important; /* Crucially fixes the right-side indent */
    align-items: stretch !important; /* Forces all boxes to have equal height in a row */
  }

  /* 2. Set the card to stretch full height */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    width: calc(50% - 10px) !important; /* 2 items per row accounting for the 20px gap */
    margin: 0 !important;
    height: 100% !important; 
  }

  /* 3. Make the Title/Price section take up all leftover space */
  .woocommerce ul.products li.product .product-info {
    flex: 1 !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* 4. Push the "Add to cart" button to the very bottom */
  .woocommerce ul.products li.product .product-info-btn {
    margin-top: auto !important;
  }
}
@media (max-width: 480px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    width: 100% !important; /* 1 item per row on very small mobiles */
  }
}

/* =========================================================
   Theme glue — لمسات ربط بين تصميم "ركن" وسلوك ووردبريس
   ========================================================= */

/* بنية كارت المنتج المقسّمة (رابط علوي + زر أسفل) */
.product-card{ display:flex; flex-direction:column; }
.product-card-link{ display:block; color:inherit; }
.product-info-top{ padding: 16px 18px 4px; }
.product-info-top h3{
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--brown-800);
}
.product-info-top .price{
  color: var(--sage-700);
  font-weight: 700;
  display: block;
}
.product-info-btn{ padding: 6px 18px 18px; margin-top: auto; }
.product-info-btn .add-btn,
.product-info-btn .added_to_cart{
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brown-800);
  background: transparent;
  color: var(--brown-800);
  font-weight: 700;
  font-family: var(--font-body);
  text-align: center;
  display: inline-block;
  transition: background-color .2s ease, color .2s ease;
}
.product-info-btn .add-btn:hover{ background: var(--brown-800); color: var(--cream-200); }
.product-info-btn .added_to_cart{ margin-top: 8px; }

/* شبكة صفحة المتجر (أرشيف) داخل تخطيط الفلاتر */
.rukn-shop-layout{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  padding: 50px 0 90px;
  align-items: start;
}
.rukn-shop-main .shop-toolbar-wc{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

/* بحث الهيدر (منسدل) */
.header-search{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: var(--cream-100);
  border-top: 1px solid rgba(77,52,47,0.08);
}
.header-search.open{ max-height: 120px; }
.header-search form{
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 16px 24px;
  display: flex;
  gap: 10px;
}
.header-search input[type="search"], .header-search input[type="text"]{
  flex: 1;
  padding: 11px 16px;
  border: 1px solid rgba(77,52,47,0.25);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  background: var(--white);
}
.header-search button{
  border: none;
  background: var(--brown-800);
  color: var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 0 24px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
}

/* المحتوى العام لصفحات ووكومرس */
.rukn-wc{ padding-block: 20px 60px; }

/* منطقة المحتوى العادية (صفحات/مقالات) */
.rukn-page{ padding: 50px 24px 80px; }
.rukn-page .entry-content{ max-width: 760px; margin-inline: auto; line-height: 1.9; }
.rukn-page .entry-content h1,
.rukn-page .entry-content h2{ margin: 24px 0 12px; }
.rukn-page .entry-content p{ margin-bottom: 16px; }

@media (max-width: 900px){
  .rukn-shop-layout{ grid-template-columns: 1fr; gap: 24px; }
}

/* شعار مخصّص من لوحة التحكم (Customizer) بنفس مقاس اللوجو */
.custom-logo-link{ display:inline-flex; align-items:center; }
.custom-logo{ height:56px; width:auto; }

/* المنتجات المميزة في الصفحة الرئيسية — 4 أعمدة */
/* المنتجات المميزة — ديسكتوب 4 كروت، تابلت/موبايل سلايدر منتج واحد */
.rukn-featured{ margin-top: 0; }

/* يسكتوب: جريد حقيقي 4 أعمدة (يتغلّب على x) 
.woocommerce.rukn-featured ul.products{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 26px !important;
}
.woocommerce.rukn-featured ul.products li.product{
	width: auto !important;
	margin: 0 !important;
}
*/

/* أسهم السلايدر — مخفية على الديسكتوب، بتظهر في وضع السلايدر بس (نفس ألوان أسهم الهيرو) */
.feat-arrow{
	display: none;
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(251, 243, 231, 0.96);
	color: var(--brown-800);
	box-shadow: 0 2px 10px rgba(46, 33, 28, 0.18);
	font-size: 1.6rem; line-height: 1;
	align-items: center; justify-content: center;
	cursor: pointer;
}
.feat-arrow-prev{ right: 4px; }
.feat-arrow-next{ left: 4px; }
.feat-arrow:disabled{ opacity: .35; cursor: default; }

/* تابلت + موبايل: سلايدر منتج واحد في المرة (≤ 960px) */
@media (max-width: 960px){
	.woocommerce.rukn-featured{ position: relative; }

	.woocommerce.rukn-featured ul.products{
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		gap: 16px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.woocommerce.rukn-featured ul.products::-webkit-scrollbar{ display: none; }

	.woocommerce.rukn-featured ul.products li.product{
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		scroll-snap-align: center;
	}

	.feat-arrow{ display: flex; }
}

/* مقاس اللوجو على الموبايل */
@media (max-width: 760px){
  .custom-logo{ height:44px; }
}

/* =========================================================
   إصلاح: شارة "تخفيض" في صفحة المنتج المفرد كانت بتاخد خلية
   في الجريد وتزحلق تفاصيل المنتج تحت الصورة. نخرّجها من الجريد.
   ========================================================= */
.woocommerce div.product{ position: relative; }
.woocommerce div.product > span.onsale{
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 3;
  margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img{
  aspect-ratio: 1;
  object-fit: cover;
}

/* =========================================================
   درج السلة: تثبيت مقاس صورة المنتج — كانت بتطول مع الصور
   الطولية (بورتريه) وتتداخل مع النص. نخلّيها مربّعة 56×56.
   ========================================================= */
.cart-drawer .widget_shopping_cart_content img,
.cart-drawer .widget_shopping_cart_content ul.cart_list li img,
.cart-drawer .widget_shopping_cart_content li.mini_cart_item img{
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: var(--radius-sm);
}


/* رابط إزالة الفلاتر في صفحة المتجر */
.filter-reset{
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--amber-700);
  text-decoration: underline;
}
.shop-filter-form .btn-block{ margin-top: 10px; }

/* ===== سلايدر السعر ===== */
.price-slider{ padding-top: 4px; }
.price-slider-values{
  display:flex; justify-content:space-between;
  font-size:0.85rem; font-weight:700; color: var(--brown-800);
  margin-bottom: 16px;
}
.price-slider-track{
  position: relative;
  height: 6px;
  margin: 0 9px 22px;
  direction: ltr;                 /* الأرقام تصاعديًا يسار→يمين */
  transform: scaleX(-1); 
}
.price-slider-track::before{
  content:""; position:absolute; inset:0;
  height:6px; border-radius:6px;
  background: rgba(77,52,47,0.18);
}
.price-slider-range{
  position:absolute; top:0; height:6px; border-radius:6px;
  background: var(--brown-800);
}
.price-slider-track input[type="range"]{
  position:absolute; top:-7px; left:0;
  width:100%; height:20px; margin:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; pointer-events:none;
}
.price-slider-track input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:18px; height:18px; border-radius:50%;
  background: var(--cream-100);
  border:2px solid var(--brown-800);
  box-shadow: 0 1px 4px rgba(46,33,28,0.28);
  cursor:pointer;
}
.price-slider-track input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:18px; height:18px; border-radius:50%;
  background: var(--cream-100);
  border:2px solid var(--brown-800);
  cursor:pointer;
}
.price-slider-track input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--amber-600); outline-offset:2px;
}
.price-apply{ padding:10px; font-size:0.9rem; }

/* تشجير فلتر الفئات (أم ← فروع) */
.filter-option.cat-depth-0{ font-weight: 600; }
.filter-option.cat-depth-1{
  padding-inline-start: 20px;
  font-size: 0.88rem;
  color: var(--brown-700);
}
.filter-option.cat-depth-2{
  padding-inline-start: 38px;
  font-size: 0.85rem;
}

/* قوائم الفئات المنسدلة */
.cat-item{ margin-bottom: 2px; }
.cat-parent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cat-parent-row .filter-option{ flex: 1; margin: 0; }
.cat-toggle{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brown-800);
  font-size: 1.99rem;
  line-height: 1;
  padding: 4px 8px;
  transition: transform .25s ease;
}
.cat-item.open > .cat-parent-row .cat-toggle{ transform: rotate(180deg); }
.cat-children{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.cat-item.open > .cat-children{ max-height: 600px; }

/* =========================================================
   كاروسيل الفئات في الصفحة الرئيسية
   ========================================================= */
.cat-carousel{
  position: relative;
  padding: 0 54px;            /* مساحة للأسهم على الجنبين (بعيد عن الفئات) */
}
.cat-track{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -ms-overflow-style: none;   /* إخفاء سكرول بار */
  scrollbar-width: none;
}
.cat-track::-webkit-scrollbar{ display: none; }

/* كل فئة في الكاروسيل بعرض ثابت */
.cat-track .category-card{
  flex: 0 0 auto;
  width: calc((100% - 66px) / 4);   /* 4 فئات ظاهرة في الشاشة */
  scroll-snap-align: start;
}

/* الأسهم — على الجنبين، مش فوق الفئات */
.cat-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(77,52,47,0.18);
  background: var(--white);
  color: var(--brown-800);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 6px 16px rgba(46,33,28,0.12);
  transition: background-color .2s ease, color .2s ease;
}
.cat-arrow:hover{ background: var(--brown-800); color: var(--cream-200); }
.cat-arrow-prev{ right: 4px; }   /* RTL: السابق يمين */
.cat-arrow-next{ left: 4px; }    /* RTL: التالي شمال */
.cat-arrow[disabled]{ opacity: .35; cursor: default; box-shadow: none; }

@media (max-width: 960px){
  .cat-track .category-card{ width: calc((100% - 22px) / 2); } /* 2 على التابلت */
}
@media (max-width: 560px){
  .cat-carousel{ padding: 0 44px; }
  .cat-track .category-card{ width: 70%; }                     /* 1 ونص على الموبايل */
}


/* =========================================================
   تبويبات صفحة الحساب (دخول / حساب جديد)
   ========================================================= */
.rukn-auth-tabs{
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto 20px;
}
.rukn-auth-tab{
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(77,52,47,0.18);
  background: var(--white);
  color: var(--brown-700);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.rukn-auth-tab.active{
  background: var(--brown-800);
  color: var(--cream-200);
  border-color: var(--brown-800);
}

/* إظهار/إخفاء الفورم حسب التبويب النشط */
#customer_login.rukn-auth-tabbed .col-1,
#customer_login.rukn-auth-tabbed .col-2{ display: none; }
#customer_login.rukn-auth-tabbed[data-active="login"] .col-1{ display: block; }
#customer_login.rukn-auth-tabbed[data-active="register"] .col-2{ display: block; }

/* نخفي عناوين h2 الأصلية لأن التبويبات بتغني عنها */
#customer_login.rukn-auth-tabbed .col-1 > h2,
#customer_login.rukn-auth-tabbed .col-2 > h2{ display: none; }