/* =============================================
   Carpet Point — Home Extra Sections
   public/css/home-style.css
   ملاحظة: هذا الملف يحتوي فقط على السكشنات
   الجديدة ولا يعيد تعريف أي كلاس موجود في
   store-style.css لتفادي التعارض
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

   /* ── Variables إضافية ── */
   :root {
       --gold-dark: #8c6a41;
       --gold-pale: #fdf8f2;
       --dark-bg:   #1a1410;
       --ink:       #2d2d2d;
       --cp-muted:  #6b7280;
       --cp-border: #f0ebe3;
   }
   
   /* ══════════════════════════════════════
      Hero Section
   ══════════════════════════════════════ */
   .hero-section {
       position: relative;
       min-height: 500px;
       display: flex;
       align-items: center;
       overflow: hidden;
       background: linear-gradient(160deg, #1a1410 0%, #2e1f0e 50%, #3d2c10 100%);
   }
   
   .hero-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b18b5e' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
   }
   
   .hero-bg-img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: .22;
   }
   
   .hero-content {
       position: relative;
       z-index: 2;
       padding: 60px 0;
   }
   
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(177,139,94,.15);
       border: 1px solid rgba(177,139,94,.3);
       color: #b18b5e;
       padding: 6px 16px;
       border-radius: 50px;
       font-size: .82rem;
       font-weight: 700;
       margin-bottom: 20px;
   }
   
   .hero-title {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2rem, 5vw, 3.2rem);
       font-weight: 700;
       color: #fff;
       line-height: 1.25;
       margin-bottom: 16px;
   }
   
   .hero-title span { color: #b18b5e; }
   
   .hero-subtitle {
       font-size: .95rem;
       color: rgba(255,255,255,.6);
       line-height: 1.8;
       margin-bottom: 30px;
       max-width: 480px;
   }
   
   .hero-cta {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: linear-gradient(135deg, #b18b5e, #d4af72);
       color: #fff !important;
       padding: 13px 28px;
       border-radius: 50px;
       font-weight: 700;
       font-size: .92rem;
       text-decoration: none;
       transition: all .3s;
       box-shadow: 0 6px 20px rgba(177,139,94,.4);
   }
   
   .hero-cta:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 28px rgba(177,139,94,.5);
       color: #fff !important;
   }
   
   .hero-cta-outline {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       border: 1.5px solid rgba(255,255,255,.3);
       color: #fff !important;
       padding: 13px 24px;
       border-radius: 50px;
       font-weight: 600;
       font-size: .92rem;
       text-decoration: none;
       transition: all .3s;
   }
   
   .hero-cta-outline:hover { background: rgba(255,255,255,.08); color: #fff !important; }
   
   .hero-stats {
       display: flex;
       gap: 28px;
       margin-top: 36px;
       padding-top: 28px;
       border-top: 1px solid rgba(255,255,255,.08);
       flex-wrap: wrap;
   }
   
   .hero-stat-num {
       font-family: 'Playfair Display', serif;
       font-size: 1.7rem;
       font-weight: 700;
       color: #b18b5e;
       line-height: 1;
   }
   
   .hero-stat-label {
       font-size: .76rem;
       color: rgba(255,255,255,.4);
       margin-top: 4px;
   }
   
   /* ══════════════════════════════════════
      مميزات المتجر
   ══════════════════════════════════════ */
   .features-section {
       background: var(--gold-pale);
       padding: 52px 0;
       border-top: 1px solid var(--cp-border);
       border-bottom: 1px solid var(--cp-border);
   }
   
   .feature-card {
       text-align: center;
       padding: 26px 18px;
       border-radius: 14px;
       background: #fff;
       border: 1px solid var(--cp-border);
       transition: all .3s;
       height: 100%;
   }
   
   .feature-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 28px rgba(177,139,94,.1);
       border-color: #b18b5e;
   }
   
   .feature-icon {
       width: 56px;
       height: 56px;
       background: linear-gradient(135deg, #b18b5e, #d4af72);
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 14px;
       font-size: 1.3rem;
       color: #fff;
       box-shadow: 0 5px 14px rgba(177,139,94,.3);
   }
   
   .feature-title { font-weight: 800; font-size: .92rem; color: var(--dark-bg); margin-bottom: 5px; }
   .feature-desc  { font-size: .8rem; color: var(--cp-muted); line-height: 1.6; }
   
   /* ══════════════════════════════════════
      عناوين السكشنات الجديدة
   ══════════════════════════════════════ */
   .section-head { text-align: right; margin-bottom: 32px; }
   
   .section-head .s-tag {
       display: inline-block;
       font-size: .72rem;
       font-weight: 700;
       color: #b18b5e;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 6px;
   }
   
   .section-head h2 {
       font-family: 'Playfair Display', serif;
       font-size: clamp(1.4rem, 3vw, 1.9rem);
       font-weight: 700;
       color: var(--dark-bg);
       margin: 0;
       position: relative;
       display: inline-block;
   }
   
   .section-head h2::after {
       content: '';
       position: absolute;
       bottom: -5px; right: 0;
       width: 44px; height: 3px;
       background: linear-gradient(90deg, #b18b5e, #d4af72);
       border-radius: 2px;
   }
   
   /* ══════════════════════════════════════
      الأقسام — pill style
   ══════════════════════════════════════ */
   .category-pill {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       text-decoration: none;
       transition: all .3s;
   }
   
   .category-pill:hover { transform: translateY(-4px); }
   
   .category-pill-img {
       width: 96px; height: 96px;
       border-radius: 50%;
       overflow: hidden;
       border: 3px solid var(--cp-border);
       box-shadow: 0 4px 12px rgba(0,0,0,.06);
       transition: all .3s;
       background: #fff;
   }
   
   .category-pill:hover .category-pill-img {
       border-color: #b18b5e;
       box-shadow: 0 6px 18px rgba(177,139,94,.2);
   }
   
   .category-pill-img img { width: 100%; height: 100%; object-fit: cover; }
   
   .category-pill-name {
       font-size: .85rem;
       font-weight: 700;
       color: var(--ink);
       transition: color .2s;
   }
   
   .category-pill:hover .category-pill-name { color: #b18b5e; }
   
   /* ══════════════════════════════════════
      آراء العملاء
   ══════════════════════════════════════ */
   .testimonials-section {
       background: var(--dark-bg);
       padding: 64px 0;
       position: relative;
       overflow: hidden;
   }
   
   .testimonials-section::before {
       content: '';
       position: absolute; inset: 0;
       background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b18b5e' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E");
   }
   
   .testimonials-head { text-align: center; margin-bottom: 44px; position: relative; }
   .testimonials-head .s-tag { display: block; margin-bottom: 8px; }
   .testimonials-head h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem,3vw,2rem); color: #fff; font-weight: 700; margin: 0; }
   
   .testimonial-card {
       background: rgba(255,255,255,.04);
       border: 1px solid rgba(177,139,94,.15);
       border-radius: 18px;
       padding: 26px;
       height: 100%;
       transition: all .3s;
       position: relative;
   }
   
   .testimonial-card:hover {
       background: rgba(255,255,255,.07);
       border-color: rgba(177,139,94,.35);
       transform: translateY(-3px);
   }
   
   .testimonial-stars { color: #b18b5e; font-size: .9rem; margin-bottom: 12px; }
   .testimonial-text  { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 16px; }
   .testimonial-author { display: flex; align-items: center; gap: 10px; }
   
   .testimonial-avatar {
       width: 38px; height: 38px;
       border-radius: 50%;
       background: linear-gradient(135deg, #b18b5e, #d4af72);
       display: flex; align-items: center; justify-content: center;
       color: #fff; font-size: .82rem; font-weight: 700; flex-shrink: 0;
   }
   
   .testimonial-name { font-size: .85rem; font-weight: 700; color: #fff; }
   .testimonial-city { font-size: .73rem; color: rgba(255,255,255,.35); }
   
   /* ══════════════════════════════════════
      بانر التواصل
   ══════════════════════════════════════ */
   .cta-banner {
       background: linear-gradient(135deg, #b18b5e 0%, #8c6a41 100%);
       padding: 56px 0;
       text-align: center;
       position: relative;
       overflow: hidden;
   }
   
   .cta-banner::before {
       content: '';
       position: absolute; inset: 0;
       background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M30 30h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
   }
   
   .cta-banner h2 {
       font-family: 'Playfair Display', serif;
       font-size: clamp(1.5rem,4vw,2.2rem);
       color: #fff; font-weight: 700;
       margin-bottom: 10px; position: relative;
   }
   
   .cta-banner p { color: rgba(255,255,255,.8); font-size: .92rem; margin-bottom: 26px; position: relative; }
   
   .cta-btn-white {
       display: inline-flex; align-items: center; gap: 8px;
       background: #fff; color: #8c6a41 !important;
       padding: 12px 28px; border-radius: 50px;
       font-weight: 700; font-size: .9rem;
       text-decoration: none; transition: all .3s;
       position: relative; box-shadow: 0 5px 18px rgba(0,0,0,.12);
   }
   
   .cta-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); color: #8c6a41 !important; }
   
   /* ══════════════════════════════════════
      Footer
   ══════════════════════════════════════ */
   .site-footer { background: var(--dark-bg); padding: 44px 0 20px; }
   
   .footer-logo {
       font-family: 'Playfair Display', serif;
       font-size: 1.4rem; color: #b18b5e; font-weight: 700; margin-bottom: 8px;
   }
   
   .footer-desc { font-size: .83rem; color: rgba(255,255,255,.38); line-height: 1.7; max-width: 260px; }
   
   .footer-heading {
       font-size: .78rem; font-weight: 800; color: #b18b5e;
       letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px;
   }
   
   .footer-link {
       display: block; font-size: .83rem;
       color: rgba(255,255,255,.45); text-decoration: none;
       margin-bottom: 7px; transition: color .2s;
   }
   
   .footer-link:hover { color: #b18b5e; }
   
   .footer-divider { border-color: rgba(255,255,255,.05); margin: 28px 0 16px; }
   .footer-copy    { font-size: .78rem; color: rgba(255,255,255,.28); }
   
   .footer-social { display: flex; gap: 8px; margin-top: 14px; }
   
   .social-btn {
       width: 34px; height: 34px; border-radius: 50%;
       border: 1px solid rgba(255,255,255,.1);
       display: flex; align-items: center; justify-content: center;
       color: rgba(255,255,255,.45); text-decoration: none;
       font-size: .85rem; transition: all .2s;
   }
   
   .social-btn:hover { border-color: #b18b5e; color: #b18b5e; }
   
   /* ── Responsive ── */
   @media (max-width: 768px) {
       .hero-section  { min-height: auto; }
       .hero-content  { padding: 40px 0; }
       .hero-stats    { gap: 18px; }
       .features-section { padding: 36px 0; }
       .testimonials-section { padding: 44px 0; }
       .cta-banner    { padding: 40px 0; }
   }
   
   /* ══ إصلاح تعارض store-style.css مع الصفحة الرئيسية ══ */
   
   /* إصلاح ارتفاع صندوق الصورة */
   .product-img-box {
       height: auto !important;
       aspect-ratio: 1 / 1 !important;
   }
   
   /* إصلاح الأقسام — منع التراص */
   .category-pill {
       min-width: 90px;
       flex-shrink: 0;
   }
   
   /* إصلاح اسم المنتج — منع القطع */
   .product-name {
       height: auto !important;
       -webkit-line-clamp: unset !important;
       overflow: visible !important;
       white-space: normal;
   }
   
   /* إصلاح عنوان السكشن */
   .section-head .s-tag {
       display: block !important;
   }
   
   .section-head h2 {
       display: block !important;
   }
   
   /* إصلاح سكشن الأقسام — توسيط الكل */
   #categories .section-head {
       text-align: center !important;
   }
   
   #categories .section-head h2::after {
       right: 50% !important;
       transform: translateX(50%) !important;
   }
   
   /* إصلاح الأقسام — توسيط قوي */
   #categories .d-flex {
       justify-content: center !important;
       text-align: center !important;
   }
   
   /* تكبير الأقسام */
   .category-pill-img {
       width: 130px !important;
       height: 130px !important;
   }
   
   .category-pill-name {
       font-size: 1rem !important;
   }