/*
Theme Name: Canjup Child
Template: astra
Version: 1.0
Description: Canjup.com - Premium Fashion Store Child Theme
Author: Canjup
*/

/* ===========================
   CANJUP.COM — RED & WHITE
   PREMIUM FASHION STORE
=========================== */

:root {
  --red: #c8102e;
  --red2: #e8112e;
  --red-light: #fff0f3;
  --red-border: #ffc0cc;
  --white: #ffffff;
  --bg: #f7f7f7;
  --text: #1a1a1a;
  --text2: #555555;
  --text3: #999999;
  --border: #e5e5e5;
  --green: #00873d;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --shadow2: 0 4px 24px rgba(0,0,0,0.12);
  --radius: 8px;
}

/* ===========================
   GLOBAL
=========================== */
body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

* { box-sizing: border-box; }

/* ===========================
   TOPBAR
=========================== */
.canjup-topbar {
  background: var(--red);
  padding: 8px 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}
.canjup-topbar a { color: rgba(255,255,255,0.85); margin: 0 12px; }
.canjup-topbar a:hover { color: #fff; }

/* ===========================
   HEADER / NAVBAR
=========================== */
.site-header,
.ast-primary-header-bar,
#masthead {
  background: var(--red) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(200,16,46,0.3) !important;
}

/* Logo */
.site-title a,
.site-title,
.custom-logo-link {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: -0.5px !important;
}

/* Nav Links */
.main-navigation a,
.ast-builder-menu a,
#site-navigation a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: all 0.2s !important;
}
.main-navigation a:hover,
.ast-builder-menu a:hover,
#site-navigation a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
}

/* Nav Current */
.main-navigation .current-menu-item > a,
.ast-builder-menu .current-menu-item > a {
  color: #ffffff !important;
  border-bottom: 2px solid #fff !important;
}

/* Dropdown Menu */
.main-navigation ul ul,
.ast-builder-menu ul ul {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--red) !important;
  box-shadow: var(--shadow2) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.main-navigation ul ul a,
.ast-builder-menu ul ul a {
  color: var(--text2) !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}
.main-navigation ul ul a:hover,
.ast-builder-menu ul ul a:hover {
  color: var(--red) !important;
  background: var(--red-light) !important;
}

/* Search in Header */
.ast-search-icon svg,
.ast-header-search svg {
  fill: #fff !important;
}
.ast-search-icon:hover {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
}

/* Cart Icon */
.ast-site-header-cart a,
.woocommerce-cart-link {
  color: #fff !important;
}
.ast-cart-menu-wrap .count {
  background: #fff !important;
  color: var(--red) !important;
  font-weight: 800 !important;
}

/* Mobile Menu Toggle */
.ast-mobile-menu-trigger-fill,
.menu-toggle {
  color: #fff !important;
}

/* ===========================
   HERO SECTION
=========================== */
.canjup-hero {
  background: linear-gradient(135deg, #c8102e 0%, #8b0a20 50%, #5a0615 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.canjup-hero::before {
  content: 'CANJUP';
  position: absolute;
  right: -30px; bottom: -20px;
  font-size: 200px; font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1; pointer-events: none;
}
.canjup-hero-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.canjup-hero-text {}
.canjup-hero-chip {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px; padding: 4px 14px;
  font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 18px;
}
.canjup-hero-title {
  font-size: 52px; font-weight: 800;
  color: #fff; line-height: 1.15; margin-bottom: 12px;
}
.canjup-hero-title em { font-style: italic; color: #ffb3c1; }
.canjup-hero-sub {
  font-size: 16px; color: rgba(255,255,255,0.75);
  margin-bottom: 32px; line-height: 1.7; font-weight: 300;
}
.canjup-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.canjup-btn-white {
  padding: 13px 28px; background: #fff; color: var(--red);
  font-size: 14px; font-weight: 700; border-radius: var(--radius);
  border: none; cursor: pointer; transition: all 0.2s;
  display: inline-block; text-decoration: none;
}
.canjup-btn-white:hover {
  background: #f5f5f5; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.canjup-btn-outline {
  padding: 13px 28px; background: transparent; color: #fff;
  font-size: 14px; font-weight: 500; border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.45); cursor: pointer;
  transition: all 0.2s; display: inline-block; text-decoration: none;
}
.canjup-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.canjup-hero-img { font-size: 160px; text-align: center; }

@media(max-width: 768px) {
  .canjup-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .canjup-hero { padding: 48px 0; }
  .canjup-hero-title { font-size: 32px; }
  .canjup-hero-img { font-size: 100px; }
}

/* ===========================
   ANNOUNCEMENT STRIP
=========================== */
.canjup-strip {
  background: var(--red);
  overflow: hidden; padding: 10px 0;
}
.canjup-strip-track {
  display: flex; width: max-content;
  animation: canjup-scroll 28s linear infinite;
}
.canjup-strip-item {
  font-size: 12px; font-weight: 600; color: #fff;
  padding: 0 24px; white-space: nowrap;
}
@keyframes canjup-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===========================
   SECTION HEADERS
=========================== */
.canjup-sec-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.canjup-sec-title {
  font-size: 22px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.canjup-sec-title::before {
  content: ''; width: 4px; height: 24px;
  background: var(--red); border-radius: 2px; flex-shrink: 0;
}
.canjup-view-all {
  font-size: 13px; font-weight: 600; color: var(--red);
  border: 1px solid var(--red-border); padding: 7px 18px;
  border-radius: 20px; transition: all 0.2s; text-decoration: none;
}
.canjup-view-all:hover { background: var(--red); color: #fff; }

/* ===========================
   CATEGORY BOXES
=========================== */
.canjup-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px; margin-bottom: 32px;
}
@media(max-width: 900px) { .canjup-cats { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 480px) { .canjup-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.canjup-cat-box {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer; transition: all 0.2s;
  text-align: center; text-decoration: none;
}
.canjup-cat-box:hover {
  border-color: var(--red); background: var(--red-light);
  transform: translateY(-3px); box-shadow: var(--shadow);
}
.canjup-cat-icon { font-size: 36px; }
.canjup-cat-name { font-size: 13px; font-weight: 600; color: var(--text); }
.canjup-cat-count { font-size: 11px; color: var(--text3); }

/* ===========================
   WOOCOMMERCE PRODUCTS
=========================== */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
}
@media(max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; } }
@media(max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media(max-width: 580px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } }

.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  transition: all 0.25s !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow2) !important;
  transform: translateY(-4px) !important;
  border-color: var(--red-border) !important;
}

/* Product Image */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  transition: transform 0.3s !important;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04) !important;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding: 12px 12px 4px !important;
  line-height: 1.4 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  color: var(--red) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 0 12px 8px !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--text3) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  background: var(--red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  padding: 10px !important;
  width: 100% !important;
  text-align: center !important;
  border: none !important;
  transition: background 0.2s !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--red2) !important;
}

/* Sale Badge */
.woocommerce ul.products li.product .onsale {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  top: 10px !important; left: 10px !important;
  min-height: auto !important; min-width: auto !important;
  line-height: 1.4 !important;
}

/* ===========================
   SINGLE PRODUCT PAGE
=========================== */
.woocommerce div.product .product_title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--red) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: 16px !important;
}

.woocommerce div.product .cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--red) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 40px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  transition: all 0.2s !important;
}
.woocommerce div.product .cart .button:hover {
  background: var(--red2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,16,46,0.3) !important;
}

/* ===========================
   CART & CHECKOUT
=========================== */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce .checkout-button {
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  transition: all 0.2s !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--red2) !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  background: var(--red) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  padding: 16px 32px !important;
  width: 100% !important;
  transition: all 0.2s !important;
}
.woocommerce #payment #place_order:hover {
  background: var(--red2) !important;
}

/* Cart Table */
.woocommerce-cart-form .shop_table {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}
.woocommerce-cart-form .shop_table th {
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
}

/* ===========================
   BANNER SECTION
=========================== */
.canjup-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 24px 0;
}
@media(max-width: 768px) { .canjup-banners { grid-template-columns: 1fr; } }
.canjup-banner {
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; position: relative;
  background: linear-gradient(135deg, var(--red), #8b0a20);
  padding: 28px 24px; min-height: 160px;
  display: flex; flex-direction: column;
  justify-content: flex-end; transition: transform 0.2s;
}
.canjup-banner:hover { transform: scale(1.02); }
.canjup-banner:nth-child(2) { background: linear-gradient(135deg, #8b0a20, #5a0615); }
.canjup-banner:nth-child(3) { background: linear-gradient(135deg, #5a0615, #3d0410); }
.canjup-banner-emoji {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); font-size: 72px; opacity: 0.2;
}
.canjup-banner-tag {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px;
}
.canjup-banner-title {
  font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px;
}
.canjup-banner-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--red);
  padding: 7px 18px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  border: none; width: fit-content;
  text-decoration: none; transition: all 0.2s;
}
.canjup-banner-btn:hover { background: #f5f5f5; }

/* ===========================
   FEATURES BAR
=========================== */
.canjup-features {
  background: var(--red);
  padding: 20px 0; margin: 0;
}
.canjup-features-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media(max-width: 768px) {
  .canjup-features-inner { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}
.canjup-feat {
  display: flex; align-items: center; gap: 12px;
}
.canjup-feat-icon { font-size: 26px; flex-shrink: 0; }
.canjup-feat-title { font-size: 13px; font-weight: 700; color: #fff; }
.canjup-feat-sub { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }

/* ===========================
   FOOTER
=========================== */
.site-footer,
#colophon,
.ast-small-footer,
.footer-widget-area {
  background: var(--red) !important;
  color: #fff !important;
  border-top: none !important;
}

.site-footer a,
#colophon a,
.ast-small-footer a,
.footer-widget-area a {
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.2s !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: #fff !important;
}

.site-footer .widget-title,
#colophon .widget-title {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.ast-small-footer-section {
  color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
}

/* Footer Widgets */
.footer-widget-area {
  padding: 48px 0 32px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ===========================
   WOOCOMMERCE NOTICES
=========================== */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--red) !important;
}
.woocommerce-message::before { color: var(--red) !important; }
.woocommerce-message .button {
  background: var(--red) !important;
  color: #fff !important;
}

/* ===========================
   BUTTONS GLOBAL
=========================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--red2) !important;
  color: #fff !important;
}

/* ===========================
   BREADCRUMB
=========================== */
.woocommerce .woocommerce-breadcrumb {
  background: #fff !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  font-size: 13px !important;
  color: var(--text3) !important;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--red) !important; }

/* ===========================
   PAGINATION
=========================== */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

/* ===========================
   MOBILE RESPONSIVE
=========================== */
@media(max-width: 768px) {
  .canjup-hero-title { font-size: 28px; }
  .canjup-sec-title { font-size: 18px; }
  .woocommerce div.product .product_title { font-size: 20px !important; }
  .woocommerce div.product p.price { font-size: 24px !important; }
}