/* Juman Lux (Storefront) — Damas-inspired luxury layer for OpenCart/Journal3
   Scope: body.juman-design-storefront only.
   Route classes live on <html> (e.g. html.route-common-home). */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

body.juman-design-storefront {
  --sf-bg: #faf9f7;
  --sf-surface: #ffffff;
  --sf-ink: #1a1a1a;
  --sf-muted: #6b6b6b;
  --sf-line: #e8e4df;
  --sf-accent: #b8956c;
  --sf-accent-dark: #9a7a4f;
  --sf-sale: #a33b3b;
  --sf-radius: 0;
  --sf-font-display: 'Cormorant Garamond', Georgia, serif;
  --sf-font-body: 'Cairo', 'Segoe UI', sans-serif;
  --sf-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--sf-font-body) !important;
  color: var(--sf-ink);
  background: var(--sf-bg);
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

body.juman-design-storefront h1,
body.juman-design-storefront h2,
body.juman-design-storefront h3,
body.juman-design-storefront .title,
body.juman-design-storefront .module-title,
body.juman-design-storefront .title.module-title,
body.juman-design-storefront .page-title {
  font-family: var(--sf-font-display) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-ink);
}

/* ---------- Announcement (optional) ---------- */
body.juman-design-storefront .juman-announce {
  background: var(--sf-ink);
  color: #f5f0ea;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  margin: 0;
}

/* ---------- Header ---------- */
body.juman-design-storefront .header,
body.juman-design-storefront header.header,
body.juman-design-storefront .desktop-header-wrapper,
body.juman-design-storefront .mobile-header-wrapper {
  background: var(--sf-surface) !important;
  border-bottom: 1px solid var(--sf-line);
  box-shadow: none !important;
}

body.juman-design-storefront .header a,
body.juman-design-storefront .top-menu a,
body.juman-design-storefront .main-menu > li > a {
  font-family: var(--sf-font-body);
  font-weight: 450;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-ink) !important;
}

body.juman-design-storefront .main-menu > li > a:hover,
body.juman-design-storefront .top-menu a:hover {
  color: var(--sf-accent) !important;
}

body.juman-design-storefront .logo img,
body.juman-design-storefront .desktop-logo img,
body.juman-design-storefront .mobile-logo img {
  max-height: 48px;
  width: auto;
}

body.juman-design-storefront .search-wrapper input,
body.juman-design-storefront .search input[type="text"] {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  background: var(--sf-bg) !important;
  font-family: var(--sf-font-body);
  font-size: 13px;
}

body.juman-design-storefront .cart-content,
body.juman-design-storefront .cart-heading,
body.juman-design-storefront #cart .btn-cart,
body.juman-design-storefront .desktop-cart-wrapper .cart-heading {
  font-family: var(--sf-font-body);
  letter-spacing: 0.04em;
}

/* ---------- Home / section titles ---------- */
html.route-common-home body.juman-design-storefront .module-title,
html.route-common-home body.juman-design-storefront .title.module-title {
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin: 2.5rem 0 1.25rem;
  position: relative;
}

html.route-common-home body.juman-design-storefront .module-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--sf-accent);
  margin: 0.75rem auto 0;
}

/* ---------- Category tiles (rectangular, not circular) ---------- */
body.juman-design-storefront .module-categories .item,
body.juman-design-storefront .module-categories .swiper-slide,
body.juman-design-storefront .categories-grid .item,
body.juman-design-storefront .category-grid .item,
body.juman-design-storefront .module .category-layout .item {
  text-align: center;
}

body.juman-design-storefront .module-categories .image,
body.juman-design-storefront .module-categories .item .image,
body.juman-design-storefront .categories-grid .image,
body.juman-design-storefront .category-grid .image,
body.juman-design-storefront .module-categories a > img,
body.juman-design-storefront .module-categories .image img,
body.juman-design-storefront .categories-grid img,
body.juman-design-storefront .category-thumb .image,
body.juman-design-storefront .category-thumb .image img,
body.juman-design-storefront .refine-search .image,
body.juman-design-storefront .refine-search .image img,
body.juman-design-storefront .subcategory .image img {
  border-radius: var(--sf-radius) !important;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--sf-line);
  box-shadow: none !important;
  border: none !important;
}

body.juman-design-storefront .module-categories .image,
body.juman-design-storefront .categories-grid .image,
body.juman-design-storefront .category-thumb .image,
body.juman-design-storefront .refine-search .image {
  display: block;
  border-radius: var(--sf-radius) !important;
  overflow: hidden;
}

/* Kill circular category look from Journal skins */
body.juman-design-storefront .module-categories .image,
body.juman-design-storefront .module-categories .image img,
body.juman-design-storefront .module-categories .swiper-slide .image,
body.juman-design-storefront .module-categories .swiper-slide img {
  border-radius: var(--sf-radius) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.juman-design-storefront .module-categories .name,
body.juman-design-storefront .module-categories .caption,
body.juman-design-storefront .categories-grid .name a,
body.juman-design-storefront .category-thumb .name a,
body.juman-design-storefront .refine-search .name a {
  font-family: var(--sf-font-body) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-ink) !important;
  margin-top: 0.75rem;
  background: transparent !important;
}

body.juman-design-storefront .module-categories .item:hover img,
body.juman-design-storefront .categories-grid .item:hover img {
  transform: scale(1.03);
  transition: transform 0.55s var(--sf-ease);
}

/* ---------- Product cards ---------- */
body.juman-design-storefront .product-thumb,
body.juman-design-storefront .product-grid-item,
body.juman-design-storefront .product-list .product-thumb,
body.juman-design-storefront .module-products-grid .product-thumb {
  background: var(--sf-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: opacity 0.35s var(--sf-ease);
}

body.juman-design-storefront .product-thumb .image,
body.juman-design-storefront .module-products-grid .product-thumb .image,
body.juman-design-storefront .product-grid .product-thumb .image {
  background: #f0ebe6;
  border-radius: 0 !important;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

body.juman-design-storefront .product-thumb .image img,
body.juman-design-storefront .module-products-grid .product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sf-ease);
}

body.juman-design-storefront .product-thumb:hover .image img {
  transform: scale(1.04);
}

body.juman-design-storefront .product-thumb .caption,
body.juman-design-storefront .product-thumb .name,
body.juman-design-storefront .product-grid .caption {
  padding: 0.85rem 0.15rem 0.35rem !important;
  text-align: center;
  background: transparent !important;
}

body.juman-design-storefront .product-thumb .name a,
body.juman-design-storefront .product-thumb .caption .name a {
  font-family: var(--sf-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sf-ink) !important;
  text-decoration: none !important;
  line-height: 1.35;
}

body.juman-design-storefront .product-thumb .price,
body.juman-design-storefront .product-thumb .price-new,
body.juman-design-storefront .product-thumb .price-normal {
  font-family: var(--sf-font-body) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sf-ink) !important;
  margin-top: 0.35rem;
}

body.juman-design-storefront .product-thumb .price-old {
  color: var(--sf-muted) !important;
  font-weight: 400;
  text-decoration: line-through;
  margin-inline-start: 0.35rem;
}

body.juman-design-storefront .product-thumb .price-new {
  color: var(--sf-sale) !important;
}

/* Lighter cart button — outline / text, not heavy Journal bar */
body.juman-design-storefront .product-thumb .button-group,
body.juman-design-storefront .product-grid-item .button-group {
  display: flex !important;
  justify-content: center;
  gap: 0.35rem;
  background: transparent !important;
  border: none !important;
  padding: 0.35rem 0 0.85rem !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
}

body.juman-design-storefront .product-thumb .button-group button,
body.juman-design-storefront .product-thumb .button-group .btn,
body.juman-design-storefront .product-thumb .btn-cart,
body.juman-design-storefront .product-thumb .cart button {
  background: transparent !important;
  color: var(--sf-accent-dark) !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  font-family: var(--sf-font-body) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1rem !important;
  min-width: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
  box-shadow: none !important;
  transition: border-color 0.25s var(--sf-ease), color 0.25s var(--sf-ease), background 0.25s var(--sf-ease);
}

body.juman-design-storefront .product-thumb .button-group button:hover,
body.juman-design-storefront .product-thumb .btn-cart:hover {
  border-color: var(--sf-accent) !important;
  color: var(--sf-ink) !important;
  background: #f3eee8 !important;
}

body.juman-design-storefront .product-thumb .labels .label-sale,
body.juman-design-storefront .product-thumb .labels .label-special {
  background: var(--sf-ink) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Category / listing pages ---------- */
html.route-product-category body.juman-design-storefront #content h1,
html.route-product-category body.juman-design-storefront .title.page-title,
html.route-product-special body.juman-design-storefront #content h1,
html.route-product-search body.juman-design-storefront #content h1 {
  font-family: var(--sf-font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-align: center;
  margin: 1.5rem 0 1rem;
}

html.route-product-category body.juman-design-storefront .category-description {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  text-align: center;
  color: var(--sf-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- PDP ---------- */
html.route-product-product body.juman-design-storefront .product-info .title.page-title,
html.route-product-product body.juman-design-storefront h1.page-title,
html.route-product-product body.juman-design-storefront .product-info h1 {
  font-family: var(--sf-font-display) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
}

html.route-product-product body.juman-design-storefront .product-info .price-group,
html.route-product-product body.juman-design-storefront .product-info .price {
  font-family: var(--sf-font-body);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

html.route-product-product body.juman-design-storefront .btn-cart,
html.route-product-product body.juman-design-storefront #button-cart,
html.route-product-product body.juman-design-storefront .product-info .button-group .btn-cart {
  background: var(--sf-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sf-radius) !important;
  font-family: var(--sf-font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem !important;
  box-shadow: none !important;
}

html.route-product-product body.juman-design-storefront .btn-cart:hover,
html.route-product-product body.juman-design-storefront #button-cart:hover {
  background: var(--sf-accent-dark) !important;
}

/* ---------- Footer ---------- */
body.juman-design-storefront footer,
body.juman-design-storefront .footer,
body.juman-design-storefront .desktop-footer-wrapper,
body.juman-design-storefront .mobile-footer-wrapper {
  background: #1c1a18 !important;
  color: #c9c0b6 !important;
  border-top: none !important;
  margin-top: 3rem;
}

body.juman-design-storefront footer a,
body.juman-design-storefront .footer a,
body.juman-design-storefront .footer-menu a {
  color: #e8e0d8 !important;
  font-size: 13px;
  letter-spacing: 0.04em;
}

body.juman-design-storefront footer a:hover,
body.juman-design-storefront .footer a:hover {
  color: #fff !important;
}

body.juman-design-storefront footer .title,
body.juman-design-storefront .footer .module-title,
body.juman-design-storefront .footer-menu .title {
  font-family: var(--sf-font-display) !important;
  color: #faf8f6 !important;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

/* ---------- Cart / checkout soft polish ---------- */
html.route-checkout-cart body.juman-design-storefront #content h1,
html.route-checkout-checkout body.juman-design-storefront #content h1 {
  font-family: var(--sf-font-display) !important;
  text-align: center;
}

html.route-checkout-cart body.juman-design-storefront .btn-primary,
html.route-checkout-checkout body.juman-design-storefront .btn-primary {
  background: var(--sf-ink) !important;
  border-color: var(--sf-ink) !important;
  border-radius: var(--sf-radius) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  body.juman-design-storefront .logo img,
  body.juman-design-storefront .mobile-logo img {
    max-height: 40px;
  }

  body.juman-design-storefront .product-thumb .name a {
    font-size: 0.95rem !important;
  }

  body.juman-design-storefront .product-thumb .button-group button,
  body.juman-design-storefront .product-thumb .btn-cart {
    padding: 0.45rem 0.75rem !important;
    font-size: 10px !important;
  }

  html.route-common-home body.juman-design-storefront .module-title {
    font-size: 1.55rem;
    margin: 1.75rem 0 1rem;
  }
}
