/* ===========================================================
   WooCommerce — full width container
   =========================================================== */
.woocommerce,
.woocommerce-page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .woocommerce,
  .woocommerce-page {
    padding: 15px 10px;
  }
}
/* Force grid items to align even if WC injects floats/clears between them */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products .clear,
.woocommerce ul.products br {
  display: none !important;
}
/* ===========================================================
   Product Grid
   Mobile: 2 cols | Tablet: 3 cols | Desktop: 4 cols
   columns-1 shortcode: 1 col (single featured product)
   =========================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

/* Single-product showcase (columns="1") */
.woocommerce ul.products.columns-1,
.woocommerce-page ul.products.columns-1,
ul.products.columns-1 {
  grid-template-columns: 1fr !important;
  max-width: 340px;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products:not(.columns-1),
  .woocommerce-page ul.products:not(.columns-1),
  ul.products:not(.columns-1) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products:not(.columns-1),
  .woocommerce-page ul.products:not(.columns-1),
  ul.products:not(.columns-1) {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===========================================================
   Product Card
   =========================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  /* Remove WooCommerce floated layout */
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  width: auto !important;

  /* Card design */
  background: var(--rn-white);
  border: 1px solid var(--rn-border-light);
  border-radius: var(--rn-radius-lg);
  padding: 0 0 60px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* ===========================================================
   WooCommerce link wrapper (wraps image + title + price)
   =========================================================== */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
/* ===========================================================
   Product image — flush, no border, no radius
   =========================================================== */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product a img,
ul.products li.product img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  box-shadow: none !important;
}

/* ===========================================================
   Product title
   =========================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 12px 10px 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--rn-text-black);
  margin: 0;
  line-height: 1.5;
  direction: rtl;
  word-break: normal;
  overflow-wrap: break-word;

  /* Clamp to 2 lines so all titles take the same vertical space */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}

/* ===========================================================
   Price
   =========================================================== */
/* ===========================================================
   Price (RTL-aware, supports sale prices)
   =========================================================== */
.woocommerce ul.products li.product .price {
  text-align: center;
  color: var(--rn-pink-dark);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 6px 10px;
  direction: rtl;
  unicode-bidi: plaintext;
}
.woocommerce ul.products li.product .price del {
  color: #999 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--rn-pink-dark) !important;
  text-decoration-thickness: 2px !important;
  -webkit-text-decoration-color: var(--rn-pink-dark) !important;
  -webkit-text-decoration-thickness: 2px !important;
  margin: 0 !important;
  opacity: 1 !important;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del bdi {
  color: inherit !important;
  text-decoration: inherit !important;
  -webkit-text-decoration-color: inherit !important;
  -webkit-text-decoration-thickness: inherit !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  background: transparent;
  color: var(--rn-pink-dark);
  font-weight: 900;
}
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount,
.woocommerce ul.products li.product .price > bdi {
  color: var(--rn-pink-dark) !important;
  font-weight: 900;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  unicode-bidi: plaintext;
  white-space: nowrap;
}

/* ===========================================================
   Star rating
   =========================================================== */
.woocommerce ul.products li.product .star-rating {
  margin: 2px auto 8px;
  font-size: 12px;
  color: var(--rn-beige);
}

/* ===========================================================
   On-sale badge
   =========================================================== */
.woocommerce ul.products li.product span.onsale {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  background: var(--rn-beige);
  color: var(--rn-white);
  border-radius: var(--rn-radius-xs);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  z-index: 10;
  margin: 0;
  min-height: auto;
  min-width: auto;
}

/* ===========================================================
   Add to cart button (absolute at bottom of card)
   =========================================================== */
.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: var(--rn-beige);
  color: var(--rn-text-black);
  border-radius: var(--rn-radius-sm);
  padding: 9px 5px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
  display: block;
  margin: 0;
  width: auto;
  font-family: 'Cairo', sans-serif;
  line-height: 1.4;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--rn-beige-hover);
}

/* View cart link that appears after AJAX add */
.woocommerce ul.products li.product .added_to_cart {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: var(--rn-text-black);
  color: var(--rn-white);
  border-radius: var(--rn-radius-sm);
  padding: 9px 5px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  display: block;
  margin: 0;
  text-decoration: none;
}

/* Hide "added" state once view-cart link appears */
.woocommerce ul.products li.product .button.added {
  display: none;
}

/* ===========================================================
   Shop page heading
   =========================================================== */
.woocommerce-products-header {
  text-align: center;
  margin: 20px 0;
}

/* ===========================================================
   SINGLE PRODUCT PAGE — brand styling
   =========================================================== */

/* Hide the sidebar entirely on single product pages */
.single-product .sidebar,
.single-product #secondary,
.single-product .widget-area,
.single-product aside.sidebar,
.single-product .woocommerce-sidebar,
/* Catch widget blocks (Gutenberg-era) */
.single-product .wp-block-search,
.single-product .wp-block-page-list,
.single-product .wp-block-archives,
.single-product .wp-block-categories,
.single-product .wp-block-tag-cloud,
.single-product .wp-block-latest-posts,
.single-product .wp-block-latest-comments,
.single-product .wp-block-rss,
.single-product .wp-block-calendar,
.single-product .wp-block-group:has(.wp-block-search),
.single-product .wp-block-group:has(.wp-block-page-list),
.single-product .wp-block-group:has(.wp-block-archives),
.single-product .wp-block-group:has(.wp-block-categories),
/* Catch classic widgets */
.single-product .widget,
.single-product .widget_search,
.single-product .widget_pages,
.single-product .widget_archive,
.single-product .widget_categories,
.single-product .widget_meta,
.single-product .widget_recent_entries,
.single-product .widget_recent_comments,
.single-product .widget_tag_cloud,
.single-product .widget_calendar,
.single-product .widget_nav_menu,
.single-product .widget_text,
.single-product .widget_rss,
/* Catch WC widgets */
.single-product .woocommerce.widget_products,
.single-product .woocommerce.widget_recently_viewed_products,
.single-product .woocommerce.widget_top_rated_products,
.single-product .woocommerce.widget_recent_reviews,
.single-product .woocommerce.widget_product_search,
.single-product .woocommerce.widget_product_tag_cloud,
.single-product .woocommerce.widget_product_categories,
.single-product .woocommerce.widget_layered_nav,
.single-product .woocommerce.widget_layered_nav_filters,
.single-product .woocommerce.widget_price_filter,
.single-product .woocommerce.widget_rating_filter,
/* Headings: "صفحات", "الأرشيف", "تصنيفات" */
.single-product h2.widgettitle,
.single-product h3.widgettitle,
.single-product h2.wp-block-heading + ul,
.single-product .widgettitle,
/* Anything in the post content that's clearly a sidebar widget list */
.single-product .entry-content > ul:has(li.cat-item),
.single-product .entry-content > ul:has(li.page_item) {
  display: none !important;
}

/* Make the main content full width when sidebar is hidden */
.single-product #primary,
.single-product .content-area,
.single-product main#content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Container spacing */
.single-product div.product {
  padding: 20px 15px;
}

/* ===== Product images column ===== */
.single-product div.product .woocommerce-product-gallery {
  border-radius: var(--rn-radius-lg);
  overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--rn-radius-md);
}

/* ===== Product title ===== */
.single-product div.product .product_title {
  color: var(--rn-text-black);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 14px;
  line-height: 1.4;
}

/* ===== Price ===== */
.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--rn-pink-dark) !important;
  font-size: 22px;
  font-weight: 900;
  margin: 10px 0 18px;
  direction: rtl;
  unicode-bidi: plaintext;
}
.single-product div.product p.price .woocommerce-Price-amount,
.single-product div.product span.price .woocommerce-Price-amount,
.single-product div.product p.price ins,
.single-product div.product span.price ins {
  color: var(--rn-pink-dark) !important;
  text-decoration: none;
  background: transparent;
  font-weight: 900;
}

/* Old (struck-through) price — visible strikethrough in brand color */
.single-product div.product p.price del,
.single-product div.product span.price del {
  color: #999 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--rn-pink-dark) !important;
  text-decoration-thickness: 2px !important;
  -webkit-text-decoration-color: var(--rn-pink-dark) !important;
  -webkit-text-decoration-thickness: 2px !important;
  opacity: 1 !important;
  margin-left: 10px;
}
.single-product div.product p.price del .woocommerce-Price-amount,
.single-product div.product p.price del bdi,
.single-product div.product span.price del .woocommerce-Price-amount,
.single-product div.product span.price del bdi {
  color: inherit !important;
  text-decoration: inherit !important;
  -webkit-text-decoration-color: inherit !important;
  -webkit-text-decoration-thickness: inherit !important;
}

/* ===== On-sale badge (the "تخفيض" tag) ===== */
.single-product div.product span.onsale {
  background: var(--rn-pink-dark) !important;
  color: var(--rn-white) !important;
  border-radius: var(--rn-radius-xs);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: none;
  min-height: auto;
  min-width: auto;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 10;
}

/* ===== Add to cart button + quantity ===== */
.single-product div.product form.cart {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.single-product div.product form.cart .quantity {
  margin: 0;
}
.single-product div.product form.cart .quantity .qty {
  width: 70px;
  padding: 10px;
  border: 1.5px solid var(--rn-beige);
  border-radius: var(--rn-radius-sm);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  background: var(--rn-white);
  color: var(--rn-text-black);
}
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart button.single_add_to_cart_button {
  background: var(--rn-beige) !important;
  color: var(--rn-text-black) !important;
  border: none !important;
  border-radius: var(--rn-radius-xl) !important;
  padding: 13px 30px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  font-family: 'Cairo', sans-serif !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(234, 213, 197, 0.4);
}
.single-product div.product form.cart .single_add_to_cart_button:hover {
  background: var(--rn-beige-hover) !important;
  transform: translateY(-2px);
}

/* ===== Hide SKU, categories, tags, meta info ===== */
.single-product div.product .product_meta,
.single-product div.product .sku_wrapper,
.single-product div.product .posted_in,
.single-product div.product .tagged_as {
  display: none !important;
}

/* ===== Product description tabs ===== */
.single-product div.product .woocommerce-tabs {
  margin-top: 30px;
  border-top: 1px solid var(--rn-cream-border);
  padding-top: 20px;
}
.single-product div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--rn-beige-light);
  padding: 0;
  margin-bottom: 20px;
}
.single-product div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 0 -2px 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
  color: var(--rn-text-muted);
  font-weight: 700;
  padding: 10px 18px;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--rn-pink-dark);
  border-bottom-color: var(--rn-pink-dark);
}
.single-product div.product .woocommerce-tabs .panel,
.single-product div.product .woocommerce-Tabs-panel {
  padding: 10px 4px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--rn-text-dark);
}
.single-product div.product .woocommerce-tabs .panel h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--rn-text-black);
  margin: 0 0 14px;
}

/* Hide reviews tab content noise if not used */
.single-product div.product #reviews .comments-area-empty {
  font-size: 14px;
  color: var(--rn-text-muted);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .single-product div.product .product_title {
    font-size: 18px;
  }
  .single-product div.product p.price,
  .single-product div.product span.price {
    font-size: 19px;
  }
  .single-product div.product form.cart .single_add_to_cart_button {
    flex: 1;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}