@import url('custom-style.css');

  /* PRODUCT CARD */
  .card {
      width: 100%;
      background: #ffffff;
      border-radius: 26px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      overflow: hidden;
      min-height: 580px;
      justify-content: space-between;
  }

  .card:hover {
      box-shadow: 0 28px 42px -14px rgba(0, 0, 0, 0.18);
  }

  /* IMAGE / MEDIA SECTION */
  .card-media {
      max-height: 250px;
      display: flex;
      align-items: baseline;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  .card-media img {
      max-width: 100%;
      height: auto;
  }

  .card_badge {
      position: absolute;
      top: 16px;
      left: 18px;
      background: var(--primary-terracotta);
      backdrop-filter: blur(4px);
      font-size: 0.8rem;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 30px;
      color: #ffffff;
      letter-spacing: 0.3px;
      line-height: 1;
  }

  /* CONTENT AREA */
  .card-content {
      padding: 1rem 1.1rem 1rem 1.1rem;
      border-top: 1px solid #f5f5f5;
  }

  /* Headline */
  .headline {
      margin-bottom: 1rem;
  }

  .headline a {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      text-decoration: none;
      font-weight: 600;
      line-height: 1.2;
      color: #0b2b33;
      text-transform: capitalize;
  }

  /* ========= SUBHEAD + REVIEWS ICON + RATING ========= */
  /* This is the key section: subhead + reviews icon inline */
  .subhead-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1.2rem;
  }

  /* reviews container: stars + icon + count */
  .reviews-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f5f5f5;
      padding: 5px 12px 5px 10px;
      border-radius: 40px;
      transition: background 0.2s;
  }

  /* star rating icons (simple SVG stars) */
  .stars {
      display: flex;
      align-items: center;
      gap: 2px;
  }

  .star-icon {
      width: 16px;
      height: 16px;
      fill: #f5b342;
  }

  .star-icon.half {
      fill: url(#halfGrad);
  }

  .rating-value {
      font-weight: 600;
      font-size: 0.85rem;
      color: #2c4e62;
      margin-left: 2px;
  }

  /* review icon (speech bubble / comment icon) */
  .review-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
  }

  .review-count {
      font-size: 0.8rem;
      font-weight: 500;
      color: #4f6f8a;
  }

  .separator-dot {
      width: 3px;
      height: 3px;
      background: #b9cee4;
      border-radius: 50%;
      margin: 0 2px;
  }

  /* description paragraph */
  .description {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #2c4258;
      margin-bottom: 1.5rem;
      font-weight: 400;
      word-break: break-word;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* price row */
  .price-row {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
  }

  .current-price {
      font-size: 1.2rem;
      font-weight: 700;
      color: #292929;
  }

  .current-price small {
      font-size: 0.85rem;
      font-weight: 500;
      color: #6c89a3;
  }

  .old-price {
      font-size: 0.85rem;
      text-decoration: line-through;
      color: #a5a5a5;
      font-weight: 500;
  }

  /* BUTTON GROUP */
  .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 6px;
      align-items: center;
  }

  .product_btn {
      background: #42a547;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 60px;
      font-size: 0.9rem;
      font-weight: 600;
      color: white;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      flex: 1;
      text-align: center;
      text-decoration: none;
  }

  .product_btn:hover {
      background: #358438;
      color: #fff;
  }

  .product_btn:active {
      transform: scale(0.97);
  }

  .btn_secondary {
      background: transparent;
      border: 1.5px solid #e2f6e3;
      padding: 0.5rem 1rem;
      border-radius: 60px;
      font-size: 0.9rem;
      font-weight: 500;
      color: #292929;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
  }

  .btn_secondary:hover {
      background: #e2f6e3;
      border-color: #e2f6e3;
      color: #101010;
  }

  .btn_secondary:active {
      transform: scale(0.97);
  }

  .btn_secondary:disabled {
      background: #f7f7f7;
      color: grey;
      cursor: not-allowed;
  }

  .footnote {
      margin-top: 1.5rem;
      text-align: center;
      font-size: 0.7rem;
      color: #8ea1b6;
      border-top: 1px solid #eef2f8;
      padding-top: 1rem;
      letter-spacing: 0.2px;
  }

  @media (max-width: 480px) {
      .card-content {
          padding: 1.3rem;
      }

      .headline {
          font-size: 1.6rem;
      }

      .subhead-row {
          flex-direction: column;
          align-items: flex-start;
      }

      .reviews-wrapper {
          align-self: flex-start;
      }

      .product_btn,
      .btn_secondary {
          flex: 1;
          text-align: center;
          width: max-content;
      }
  }

  .product_btn:focus-visible,
  .btn_secondary:focus-visible {
      outline: 2px solid #1f6e8a;
      outline-offset: 2px;
  }

  /* Product card */


  /* prodcut category */

  .page-banner {
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 50px;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .page-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
  }

  .page-banner .inner {
      position: relative;
      z-index: 1;
      text-align: center;
  }

  .page-banner .inner h1 {
      color: #fff;
      font-size: 42px;
      font-weight: 600;
      font-family: var(--font-heading);
      margin: 0;
  }


  .category-header {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 2px solid #d4d4d4cc;
  }

  .category-header h3 {
      font-size: 24px;
      font-weight: 500;
      color: var(--secondary);
      margin: 0;
      font-family: var(--font-heading);
  }

  .category-header h3 span {
      color: var(--primary);
      background: linear-gradient(135deg, var(--primary), var(--primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 600;
  }

  .page .col-md-3 h3 {
      font-size: 28px;
      font-weight: 500;
      color: var(--secondary);
      margin-bottom: 30px;
      font-family: var(--font-heading);
      padding-bottom: 20px;
      border-bottom: 2px solid #d4d4d4cc;
  }

  /* Product Grid */
  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 20px;
  }

  /* Product Card */
  .product-card {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: var(--transition);
      position: relative;
  }

  .product-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-xl);
  }

  /* Product Image */
  .product-image {
      position: relative;
      background: var(--light);
      height: 250px;
      overflow: hidden;
      cursor: pointer;
  }

  .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
  }

  .product-card:hover .product-image img {
      transform: scale(1.1);
  }


  /* Product Info */
  .product-info {
      padding: 20px;
  }

  .product-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.4;
  }

  .product-title a {
      color: var(--dark);
      text-decoration: none;
      transition: var(--transition);
  }

  .product-title a:hover {
      color: var(--primary-color);
  }

  /* Rating Stars */
  .product-rating {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .stars {
      display: inline-flex;
      gap: 3px;
  }

  .stars i {
      color: #ffc107;
      font-size: 14px;
  }

  .stars i.bi-star-o {
      color: #e4e5e9;
  }

  .rating-count {
      font-size: 12px;
      color: var(--gray);
  }

  /* Price */
  .product-price {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .current-price {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
  }

  .old-price {
      font-size: 16px;
      color: #222222;
      text-decoration: line-through;
  }

  .discount {
      background: var(--red);
      color: var(--white);
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
  }

  /* Action Buttons */
  .product-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
      justify-content: space-between;
      width: 100%;
  }

  .btn-cart {
      flex: 1;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
      color: var(--white);
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      text-align: center;
      text-decoration: none;
      display: inline-block;
  }

  .btn-cart:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
  }

  .btn-view {
      background: var(--light);
      color: var(--dark);
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      text-align: center;
      text-decoration: none;
      display: inline-block;
  }

  .btn-view:hover {
      background: var(--dark);
      color: var(--white);
  }

  /* Out of Stock */
  .out-of-stock {
      background: var(--red);
      color: var(--white);
      text-align: center;
      padding: 10px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
  }

  /* Empty State */
  .empty-state {
      text-align: center;
      padding: 60px 20px;
      background: var(--light);
      border-radius: 16px;
  }

  .empty-state i {
      font-size: 64px;
      color: var(--gray);
      margin-bottom: 20px;
  }

  .empty-state p {
      font-size: 18px;
      color: var(--gray);
      margin: 0;
  }


  /* Responsive */
  @media (max-width: 768px) {
      .page-banner {
          padding: 50px 0;
      }

      .page-banner .inner h1 {
          font-size: 28px;
      }

      .product-grid {
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 20px;
      }

      .product-info {
          padding: 15px;
      }

      .current-price {
          font-size: 20px;
      }
  }

  @media (max-width: 576px) {
      .product-grid {
          grid-template-columns: 1fr;
      }
  }

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

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

  .product-card {
      animation: fadeInUp 0.6s ease forwards;
      opacity: 0;
  }

  .product-card:nth-child(1) {
      animation-delay: 0.1s;
  }

  .product-card:nth-child(2) {
      animation-delay: 0.2s;
  }

  .product-card:nth-child(3) {
      animation-delay: 0.3s;
  }

  .product-card:nth-child(4) {
      animation-delay: 0.4s;
  }

  .product-card:nth-child(5) {
      animation-delay: 0.5s;
  }

  .product-card:nth-child(6) {
      animation-delay: 0.6s;
  }

  /* prodcut category */


  .modal-content {
      border-radius: 10px;
  }

  .modal-header {
      background: #e67e22;
      color: white;
      border-radius: 10px 10px 0 0;
  }

  .modal-header .btn-close {
      filter: brightness(0) invert(1);
  }

  .btn-primary {
      background: #e67e22;
      border: none;
  }

  .btn-primary:hover {
      background: #d35400;
  }

  /* payment successfull */
  .payment-success {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
  }

  .success-box {
      background: white;
      border-radius: 15px;
      padding: 50px;
      text-align: center;
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }

  .success-box h3 {
      color: #28a745;
      font-size: 28px;
      margin-top: 0;
      margin-bottom: 20px;
  }

  .success-box p {
      color: #666;
      font-size: 16px;
      margin-bottom: 30px;
  }

  .success-box .btn-success {
      background: #28a745;
      padding: 12px 30px;
      border-radius: 50px;
      font-weight: 600;
  }

  .success-box .btn-success:hover {
      background: #218838;
      transform: translateY(-2px);
  }

  @media (max-width: 768px) {
      .success-box {
          padding: 30px 20px;
      }

      .success-box h3 {
          font-size: 22px;
      }
  }



  /* about us page manufacture section */

  .brand-opening {
      margin-bottom: 40px;
  }

  .brand-opening h2 {
      font-size: 28px;
      margin-bottom: 15px;
      color: #2e7d32;
  }

  .brand-opening h2 i {
      margin-right: 10px;
      color: #ffc107;
  }

  .brand-opening p {
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      margin-bottom: 15px;
  }

  .contract-manufacturing h2 {
      font-size: 32px;
      color: #2e7d32;
      margin-bottom: 25px;
      padding-bottom: 10px;
      border-bottom: 2px solid #ffc107;
  }

  .contract-manufacturing h3 {
      font-size: 22px;
      color: #1b5e20;
      margin: 25px 0 15px 0;
  }

  .contract-manufacturing p {
      font-size: 15px;
      line-height: 1.6;
      color: #444;
      margin-bottom: 12px;
  }

  .contract-manufacturing ul {
      margin: 10px 0 15px 25px;
  }

  .contract-manufacturing ul li {
      font-size: 15px;
      line-height: 1.6;
      color: #444;
      margin-bottom: 5px;
  }

  .contract-manufacturing strong {
      color: #2e7d32;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
      .brand-opening h2 {
          font-size: 22px;
      }

      .contract-manufacturing h2 {
          font-size: 26px;
      }

      .contract-manufacturing h3 {
          font-size: 18px;
      }

      .brand-opening p,
      .contract-manufacturing p,
      .contract-manufacturing ul li {
          font-size: 14px;
      }
  }


  /* about us page manufacture section */


  /* password reset success */

  .forgot-success-page {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .success-card {
      max-width: 500px;
      width: 100%;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 24px;
      padding: 50px 40px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid gainsboro;
  }

  .success-card:hover {}

  /* Success Icon */
  .success-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(145deg, #28a745, #1e7e34);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      animation: scaleIn 0.4s ease 0.2s both;
  }

  .success-icon i {
      font-size: 36px;
      color: white;
  }

  /* Title */
  .success-title {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 12px;
      animation: fadeIn 0.5s ease 0.3s both;
  }

  /* Message */
  .success-message {
      font-size: 16px;
      line-height: 1.6;
      color: #6c757d;
      margin-bottom: 30px;
      animation: fadeIn 0.5s ease 0.4s both;
  }

  /* Login Button */
  .login-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(145deg, #e4144d, #c40e42);
      color: white;
      padding: 14px 35px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(228, 20, 77, 0.3);
      animation: fadeIn 0.5s ease 0.5s both;
  }

  .login-link:hover {
      background: linear-gradient(145deg, #c40e42, #a00c38);
      transform: translateY(-2px);
      color: white;
  }

  .login-link:active {
      transform: translateY(0);
  }

  .login-link i {
      font-size: 18px;
      transition: transform 0.2s ease;
  }

  .login-link:hover i {
      transform: translateX(4px);
  }

  /* Animations */
  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(40px);
      }

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

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scale(0);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

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

  /* Responsive Design */
  @media (max-width: 768px) {
      .forgot-success-page {
          padding: 40px 20px;
          min-height: 50vh;
      }

      .success-card {
          padding: 35px 25px;
      }

      .success-icon {
          width: 75px;
          height: 75px;
      }

      .success-icon i {
          font-size: 40px;
      }

      .success-title {
          font-size: 24px;
      }

      .success-message {
          font-size: 14px;
      }

      .login-link {
          padding: 12px 28px;
          font-size: 14px;
      }
  }

  @media (max-width: 576px) {
      .success-card {
          padding: 30px 20px;
      }

      .success-icon {
          width: 65px;
          height: 65px;
      }

      .success-icon i {
          font-size: 35px;
      }

      .success-title {
          font-size: 22px;
      }

      .login-link {
          padding: 10px 25px;
          font-size: 14px;
          width: 100%;
      }
  }

  /* password reset success */




















































































































































































  /* ========== HERO SECTION ========== */
  .category-hero-artistic {
      position: relative;
      min-height: 40vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
      background: var(--dark);
  }

  .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.3;
  }

  .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(45, 62, 80, 0.9) 0%, rgba(44, 125, 160, 0.85) 100%);
  }

  .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 40px 20px;
  }

  .hero-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: white;
      margin-bottom: 15px;
      letter-spacing: -0.02em;
  }

  .hero-description {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.5;
  }

  .hero-stats {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-top: 30px;
      flex-wrap: wrap;
  }

  .stat-item {
      text-align: center;
  }

  .stat-number {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      display: block;
  }

  .stat-label {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.8);
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  /* ========== BREADCRUMB ========== */
  .breadcrumb-artistic {
      background: transparent;
      padding: 10px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--gray-light);
  }

  .breadcrumb-artistic .breadcrumb {
      background: transparent;
      padding: 0;
      margin: 0;
  }

  .breadcrumb-artistic .breadcrumb-item {
      color: var(--gray);
      font-size: 0.85rem;
  }

  .breadcrumb-artistic .breadcrumb-item a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition-base);
  }

  .breadcrumb-artistic .breadcrumb-item a:hover {
      color: var(--accent);
  }

  .breadcrumb-artistic .breadcrumb-item.active {
      color: var(--dark);
      font-weight: 500;
  }

  /* ========== FILTER BAR ========== */
  .filter-bar-artistic {
      background: white;
      border-radius: 12px;
      padding: 15px 20px;
      margin-bottom: 30px;
      border: 1px solid var(--gray-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
  }

  .results-info {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
  }

  .results-count {
      font-size: 0.85rem;
      color: var(--gray);
  }

  .results-number {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--primary);
  }

  .results-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--dark);
  }

  .filter-controls {
      display: flex;
      gap: 15px;
      align-items: center;
      flex-wrap: wrap;
  }

  .filter-group {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .filter-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--dark);
  }

  .filter-select {
      padding: 6px 12px;
      border: 1px solid var(--gray-light);
      border-radius: 8px;
      background: white;
      color: var(--dark);
      cursor: pointer;
      font-size: 0.85rem;
  }

  .view-toggle {
      display: flex;
      gap: 5px;
      background: var(--gray-light);
      padding: 4px;
      border-radius: 8px;
  }

  .view-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: var(--gray);
  }

  .view-btn.active {
      background: white;
      color: var(--primary);
  }

  /* ========== PRODUCT GRID ========== */
  .product-grid-artistic {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
  }

  .product-grid-artistic.list-view {
      grid-template-columns: 1fr;
  }

  .product-card-artistic {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--gray-light);
      transition: var(--transition-base);
  }

  .product-card-artistic:hover {
      transform: translateY(-2px);
      border-color: var(--primary-light);
  }

  /* Image Container */
  .card-image-container {
      position: relative;
      padding-top: 100%;
      overflow: hidden;
      background: var(--light);
  }

  .product-image-artistic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  .product-card-artistic:hover .product-image-artistic {
      transform: scale(1.05);
  }

  /* Badges */
  .card-badges {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      display: flex;
      gap: 8px;
  }

  .badge-artistic {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.5px;
  }

  .badge-discount {
      background: var(--accent);
      color: white;
  }

  .badge-new {
      background: var(--success);
      color: white;
  }

  .badge-stock {
      background: rgba(0, 0, 0, 0.7);
      color: white;
  }

  /* Quick Actions Overlay */
  .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      transition: var(--transition-base);
      z-index: 3;
  }

  .product-card-artistic:hover .card-overlay {
      opacity: 1;
  }

  .overlay-btn {
      width: 38px;
      height: 38px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--primary);
      font-size: 1rem;
      transition: var(--transition-base);
      transform: translateY(10px);
      opacity: 0;
  }

  .product-card-artistic:hover .overlay-btn {
      transform: translateY(0);
      opacity: 1;
  }

  .overlay-btn:hover {
      background: var(--primary);
      color: white;
  }

  .overlay-btn:nth-child(1) {
      transition-delay: 0.05s;
  }

  .overlay-btn:nth-child(2) {
      transition-delay: 0.1s;
  }

  .overlay-btn:nth-child(3) {
      transition-delay: 0.15s;
  }

  /* Card Content */
  .product-category-link {
      display: inline-block;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--primary);
      text-decoration: none;
      margin-bottom: 8px;
  }

  .product-title-artistic {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.4;
  }

  .product-title-artistic a {
      color: var(--dark);
      text-decoration: none;
      transition: var(--transition-base);
  }

  .product-title-artistic a:hover {
      color: var(--primary);
  }

  /* Rating Stars */
  .rating-artistic {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
  }

  .stars-artistic {
      display: flex;
      gap: 2px;
  }

  .stars-artistic i {
      font-size: 0.75rem;
      color: var(--warning);
  }

  .rating-count-artistic {
      font-size: 0.7rem;
      color: var(--gray);
  }

  /* Price Section */
  .price-artistic {
      margin-bottom: 15px;
  }

  .current-price-artistic {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--primary);
  }

  .old-price-artistic {
      font-size: 0.8rem;
      color: var(--gray);
      text-decoration: line-through;
      margin-left: 6px;
  }

  /* Add to Cart Button */
  .add-to-cart-btn {
      width: 100%;
      padding: 10px;
      background: var(--primary-terracotta);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      font-size: 0.85rem;
      cursor: pointer;
      transition: var(--transition-base);
  }

  .add-to-cart-btn:hover {
      background: #FF9933;
  }

  .add-to-cart-btn:disabled {
      background: #85c088;
      cursor: not-allowed;
  }

  /* List View Styles */
  .product-grid-artistic.list-view .product-card-artistic {
      display: flex;
      flex-direction: row;
  }

  .product-grid-artistic.list-view .card-image-container {
      width: 200px;
      padding-top: 0;
  }

  .product-grid-artistic.list-view .card-content {
      flex: 1;
  }

  @media (max-width: 768px) {
      .product-grid-artistic.list-view .product-card-artistic {
          flex-direction: column;
      }

      .product-grid-artistic.list-view .card-image-container {
          width: 100%;
          padding-top: 100%;
      }
  }

  /* ========== PAGINATION ========== */
  .pagination-artistic {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 40px;
      margin-bottom: 40px;
      flex-wrap: wrap;
  }

  .page-link-artistic {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      border: 1px solid var(--gray-light);
      border-radius: 8px;
      color: var(--dark);
      text-decoration: none;
      font-size: 0.85rem;
      transition: var(--transition-base);
  }

  .page-link-artistic:hover,
  .page-link-artistic.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
  }

  /* ========== SIDEBAR ========== */
  .sidebar-artistic {
      position: sticky;
      top: 20px;
  }

  .sidebar-widget-artistic {
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 25px;
      border: 1px solid var(--gray-light);
  }

  .widget-title-artistic {
      font-size: 1rem;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--primary);
      display: inline-block;
  }

  /* Category Menu */
  .category-menu-artistic {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .category-menu-artistic li {
      margin-bottom: 8px;
  }

  .category-menu-artistic li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--light);
      border-radius: 8px;
      color: var(--gray);
      text-decoration: none;
      font-size: 0.85rem;
      transition: var(--transition-base);
  }

  .category-menu-artistic li a:hover,
  .category-menu-artistic li.active a {
      background: var(--primary);
      color: white;
  }

  .category-count {
      background: rgba(0, 0, 0, 0.1);
      padding: 2px 6px;
      border-radius: 12px;
      font-size: 0.65rem;
  }

  /* Price Range */
  .price-range {
      margin-top: 15px;
  }

  .price-inputs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
  }

  .price-inputs input {
      flex: 1;
      padding: 6px 10px;
      border: 1px solid var(--gray-light);
      border-radius: 6px;
      font-size: 0.85rem;
  }

  /* ========== NEWSLETTER SECTION ========== */
  .newsletter-section {
      background: var(--dark);
      border-radius: 12px;
      padding: 40px;
      text-align: center;
      margin: 40px 0;
  }

  .newsletter-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      margin-bottom: 10px;
  }

  .newsletter-text {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 20px;
      font-size: 0.9rem;
  }

  .newsletter-form {
      display: flex;
      gap: 10px;
      max-width: 450px;
      margin: 0 auto;
      flex-wrap: wrap;
  }

  .newsletter-input {
      flex: 1;
      padding: 10px 15px;
      border: none;
      border-radius: 8px;
      font-size: 0.85rem;
  }

  .newsletter-btn {
      padding: 10px 20px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition-base);
  }

  .newsletter-btn:hover {
      background: var(--accent-dark);
  }

  /* ========== BACK TO TOP BUTTON ========== */
  .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-decoration: none;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition-base);
      z-index: 100;
  }

  .back-to-top.show {
      opacity: 1;
      visibility: visible;
  }

  .back-to-top:hover {
      background: var(--primary-dark);
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 992px) {
      .hero-title {
          font-size: 2rem;
      }

      .product-grid-artistic {
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 20px;
      }
  }

  @media (max-width: 768px) {
      .category-hero-artistic {
          min-height: 35vh;
      }

      .hero-title {
          font-size: 1.5rem;
      }

      .hero-description {
          font-size: 0.85rem;
      }

      .hero-stats {
          gap: 20px;
          margin-top: 20px;
      }

      .stat-number {
          font-size: 1.2rem;
      }

      .filter-bar-artistic {
          flex-direction: column;
          align-items: stretch;
      }

      .filter-controls {
          justify-content: space-between;
      }

      .newsletter-section {
          padding: 30px 20px;
      }

      .newsletter-title {
          font-size: 1.2rem;
      }
  }

  @media (max-width: 576px) {
      .product-grid-artistic {
          grid-template-columns: 1fr;
      }

      .filter-controls {
          flex-direction: column;
          align-items: stretch;
      }

      .filter-group {
          justify-content: space-between;
      }
  }



  .product-share {
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
  }

  .product-share>span {
      font-weight: 600;
      color: #333;
  }

  .social-share-buttons {
      display: flex;
      gap: 10px;
  }

  .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      text-decoration: none;
      color: white;
      font-size: 18px;
      transition: all 0.3s ease;
  }

  .share-btn:hover {
      transform: translateY(-3px);
      opacity: 0.9;
      color: #fff;
  }

  .share-btn.facebook {
      background: #3b5998;
  }

  .share-btn.twitter {
      background: #000000;
  }

  .share-btn.whatsapp {
      background: #25d366;
  }

  .share-btn.linkedin {
      background: #0077b5;
  }