/* assets/css/home.css */

/* Hero Section */
.hero {
  margin-top: 80px;
  /* so content isn't hidden under fixed header */
  height: 85vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 69, 19, 0.1) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-20px, 20px) rotate(180deg);
  }
}

.hero-content {
  text-align: center;
  z-index: 1;
  animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  font-size: 4.5rem;
  color: var(--copper);
  margin-bottom: 1rem;
  letter-spacing: 3px;
  font-weight: 300;
}

.hero p {
  font-size: 1.3rem;
  color: var(--black);
  margin-bottom: 2.5rem;
  letter-spacing: 2px;
}

.cta-button {
  padding: 1rem 3rem;
  background: var(--copper);
  color: white;
  border: none;
  font-size: 1rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--dark-copper);
  transition: left 0.3s ease;
  z-index: -1;
}

.cta-button:hover::before {
  left: 0;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(139, 69, 19, 0.3);
}

/* Categories Section */
.categories {
  padding: 5rem 5%;
  max-width: 1400px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--copper);
  margin-bottom: 3rem;
  letter-spacing: 2px;
  font-weight: 300;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.category-card {
  height: 350px;
  background: var(--light-gray);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s ease;
  position: relative;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(139, 69, 19, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.category-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.category-card:hover::before {
  opacity: 1;
}

.category-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  color: white;
  transform: translateY(50px);
  transition: transform 0.5s ease;
}

.category-card:hover .category-content {
  transform: translateY(0);
}

.category-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.category-desc {
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

.category-card:hover .category-desc {
  opacity: 1;
}

/* Featured Products */
.featured-products {
  padding: 5rem 5%;
  background: var(--light-gray);
}

.products-container {
  max-width: 1400px;
  margin: 0 auto;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.product-card {
  background: white;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 320px;
  background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image::after {
  content: 'RAWKING';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(139, 69, 19, 0.1);
  font-weight: bold;
  letter-spacing: 3px;
}

.product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--copper);
  color: white;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  z-index: 1;
}

.product-info {
  padding: 1.5rem;
}

.product-name {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--black);
}

.product-price {
  font-size: 1.4rem;
  color: var(--copper);
  font-weight: bold;
}

.add-to-cart {
  width: 100%;
  padding: 0.8rem;
  background: transparent;
  border: 2px solid var(--copper);
  color: var(--copper);
  margin-top: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.add-to-cart:hover {
  background: var(--copper);
  color: white;
}

/* Testimonials */
.testimonials {
  padding: 5rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.testimonial-card {
  background: white;
  padding: 2.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.testimonial-text {
  font-style: italic;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.testimonial-author {
  font-weight: bold;
  color: var(--copper);
}

/* Newsletter */
.newsletter {
  padding: 5rem 5%;
  background: var(--copper);
  color: white;
  text-align: center;
}

.newsletter h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  font-weight: 300;
}

.newsletter p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  gap: 1rem;
}

.newsletter-input {
  flex: 1;
  padding: 1rem;
  border: none;
  font-size: 1rem;
}

.newsletter-button {
  padding: 1rem 2rem;
  background: var(--black);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.newsletter-button:hover {
  background: var(--dark-copper);
  transform: translateY(-2px);
}

/* Responsive (page-specific) */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .newsletter-form {
    flex-direction: column;
  }
}

.testimonial-title {
  color: var(--copper);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

/* =========================
   HOME: SQUARE PRODUCT IMAGES (fully visible)
   ========================= */

.product-card .product-image {
  aspect-ratio: 1 / 1;       /* square */
  height: auto !important;    /* override the fixed 320px height */
  background-size: contain;   /* if you set images as background-image */
  background-position: center;
  background-repeat: no-repeat;
}

/* if your JS inserts an <img> inside .product-image */
.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* fully visible (no crop) */
  display: block;
}



/* ---------------- Category hover modal ---------------- */
.rk-cat-modal {
  position: fixed;
  z-index: 9999;
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.rk-cat-modal.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rk-cat-modal__inner {
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.rk-cat-modal__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.rk-cat-modal__title {
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
}

.rk-cat-modal__all {
  color: var(--copper);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
}

.rk-cat-modal__all:hover {
  text-decoration: underline;
}

.rk-cat-modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 14px 14px;
}

.rk-cat-modal__coltitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.rk-cat-modal__list {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  padding-right: 4px;
}

.rk-cat-modal__item {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 13px;
}

.rk-cat-modal__item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

.rk-cat-modal__loading,
.rk-cat-modal__empty {
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Hide hover modal on touch devices */
@media (hover: none), (pointer: coarse) {
  .rk-cat-modal {
    display: none !important;
  }
}

/* =========================
   BIG LIGHT CATEGORY MODAL
   ========================= */

/* Full-screen overlay */
.rk-cat-modal {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

/* Use your existing .open toggle */
.rk-cat-modal.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Light overlay background */
.rk-cat-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* dim page behind */
  backdrop-filter: blur(6px);
}

/* Big centered panel */
.rk-cat-modal__inner {
  position: relative;
  width: min(1100px, calc(100vw - 56px));
  height: min(720px, calc(100vh - 80px));
  margin: 40px auto; /* centers + gives breathing room */
  background: #ffffff;                /* LIGHT MODE */
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(6px);
  transition: transform 180ms ease;
}

/* lift animation when open */
.rk-cat-modal.open .rk-cat-modal__inner {
  transform: translateY(0);
}

/* Header */
.rk-cat-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rk-cat-modal__title {
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #111;
  font-size: 14px;
  text-transform: uppercase;
}

.rk-cat-modal__all {
  color: var(--copper);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.rk-cat-modal__all:hover {
  text-decoration: underline;
}

/* Body layout */
.rk-cat-modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px 20px 20px;
  height: calc(100% - 62px); /* remaining height under header */
  background: #fff;
}

.rk-cat-modal__coltitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.60);
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Scrollable lists inside the big modal */
.rk-cat-modal__list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 6px;
  max-height: none;     /* override the old 210px */
  height: calc(100% - 24px);
}

/* Light items */
.rk-cat-modal__item {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  background: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.10);
  font-weight: 700;
  font-size: 14px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.rk-cat-modal__item:hover {
  background: #efefef;
  border-color: rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* Loading / empty (light) */
.rk-cat-modal__loading,
.rk-cat-modal__empty {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  background: #fafafa;
  border: 1px dashed rgba(0, 0, 0, 0.18);
}

/* Mobile: nearly full-screen */
@media (max-width: 768px) {
  .rk-cat-modal__inner {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    margin: 12px auto;
    border-radius: 16px;
  }

  .rk-cat-modal__body {
    grid-template-columns: 1fr; /* stack */
  }
}

/* Keep your existing touch rule if you want to hide hover modals.
   If you now want it to work on mobile too, REMOVE your old block:
   @media (hover: none), (pointer: coarse) { .rk-cat-modal{display:none!important;} }
*/


/* --- PATCH: don't rely on display:none for full-screen modal --- */
.rk-cat-modal {
  display: block !important;   /* keep it in layout (it's fixed anyway) */
  visibility: hidden;          /* actually hidden */
}

.rk-cat-modal.open {
  visibility: visible;
}

/* optional close button styling (if you add it in JS) */
.rk-cat-modal__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  color: #111;
}

.rk-cat-modal__close:hover {
  background: rgba(0,0,0,0.06);
}


/* =========================
   BIG LIGHT CATEGORY MODAL (override)
   Paste at END of home.css
   ========================= */

/* IMPORTANT: remove/disable this if you still have it earlier:
@media (hover: none), (pointer: coarse) { .rk-cat-modal { display:none!important; } }
It will make the modal NEVER show on many devices.
*/

/* Full-screen overlay container */
.rk-cat-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* Keep it mounted so it never "fails to show" بسبب display rules */
  display: block !important;

  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease;
}

/* Open state (your JS adds .open) */
.rk-cat-modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Dim + blur background */
.rk-cat-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

/* Big centered panel (LIGHT MODE) */
.rk-cat-modal__inner {
  position: relative;
  width: min(1200px, calc(100vw - 60px));
  height: min(760px, calc(100vh - 90px));
  margin: 45px auto;

  background: #fff;
  color: #111;

  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);

  overflow: hidden;

  transform: translateY(10px);
  transition: transform 180ms ease;
}

.rk-cat-modal.open .rk-cat-modal__inner {
  transform: translateY(0);
}

/* Header */
.rk-cat-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 18px 20px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rk-cat-modal__title {
  font-weight: 900;
  letter-spacing: 0.7px;
  font-size: 14px;
  text-transform: uppercase;
  color: #111;
}

.rk-cat-modal__all {
  color: var(--copper);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.rk-cat-modal__all:hover {
  text-decoration: underline;
}

/* If your JS includes a close button */
.rk-cat-modal__headerActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rk-cat-modal__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  color: #111;
}

.rk-cat-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Body layout */
.rk-cat-modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;

  padding: 18px 20px 20px;

  /* Fill remaining space under header */
  height: calc(100% - 62px);
  background: #fff;
}

.rk-cat-modal__coltitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.60);
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Lists: scroll inside panel */
.rk-cat-modal__list {
  display: grid;
  gap: 10px;

  overflow: auto;
  padding-right: 6px;

  /* Override your old max-height:210px */
  max-height: none;
  height: calc(100% - 24px);
}

/* Items: clean light style */
.rk-cat-modal__item {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;

  color: #111;
  background: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.10);

  font-weight: 800;
  font-size: 14px;

  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.rk-cat-modal__item:hover {
  background: #efefef;
  border-color: rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* Loading / Empty in light */
.rk-cat-modal__loading,
.rk-cat-modal__empty {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  background: #fafafa;
  border: 1px dashed rgba(0, 0, 0, 0.18);
}

/* Optional: lock scroll when modal open (your JS adds rk-modal-open) */
html.rk-modal-open,
body.rk-modal-open {
  overflow: hidden;
}

/* Mobile: almost full screen + stacked columns */
@media (max-width: 768px) {
  .rk-cat-modal__inner {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    margin: 12px auto;
    border-radius: 16px;
  }

  .rk-cat-modal__body {
    grid-template-columns: 1fr;
  }
}

/* =========================
   HERO BACKGROUND IMAGE (Option A)
   assets/images/hero.png
   Paste at END of home.css
   ========================= */

.hero{
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
    url("../images/hero.png"); /* ✅ correct path from assets/css/ */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Make hero text readable on the image */
.hero h1,
.hero p{
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Optional: tone down the floating radial blob so it doesn’t fight the photo */
.hero::before{
  opacity: 0.25;
}

/* --- CATEGORY MODAL ITEMS: plain bold words (no boxes) --- */
.rk-cat-modal__item{
  display: block;           /* one per line */
  padding: 6px 0;           /* simple spacing */
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;

  font-weight: 900;         /* bold */
  font-size: 14px;
  color: #111;
  text-decoration: none;
}

.rk-cat-modal__item:hover{
  background: transparent !important;
  transform: none !important;
  text-decoration: underline; /* simple hover */
}

/* Fix big vertical spacing between items in the modal lists */
.rk-cat-modal__list{
  align-content: start;        /* stop stretching rows */
  grid-auto-rows: max-content; /* each item takes only its natural height */
  gap: 6px;                    /* optional: tighter spacing */
}

/* === FIX: modal list items must stack tightly (no grid stretching) === */
.rk-cat-modal__list{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;

  gap: 6px !important;

  /* keep your scrolling behavior */
  overflow: auto !important;
  height: calc(100% - 24px) !important;
}

/* extra safety: remove any spacing that could be coming from elsewhere */
.rk-cat-modal__item{
  margin: 0 !important;
  padding: 4px 0 !important; /* adjust if you want tighter/looser */
}