/* 
* Freedom - Tienda de Calzado y Accesorios
* Main Stylesheet - Consolidated CSS
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-appearance: textfield; /* 1 */
    appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    -moz-appearance: button; /* 1 */
    appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
  
  /* Variables CSS */
  :root {
      /* Color palette */
      --primary: #C41E3A;
      --primary-light: #E63E56;
      --primary-dark: #9A0F25;
      --secondary-color: #D4AF37;
      --accent: #4A4A4A;
      --accent-color: #8B8383;
      --accent-light: #ABABAB;
      --neutral-bg: #F5F5F5;
      --text-dark: #2B2B2B;
      --text-light: #FFFFFF;
      --border-color: #E0E0E0;
      --gray-light: #F8F8F8;
      --gray-medium: #E5E5E5;
      --success: #28a745;
      --danger: #dc3545;
      --warning: #ffc107;
      
      /* Typography */
      --font-heading: 'Quicksand', sans-serif;
      --font-body: 'Nunito', sans-serif;
      --font-accent: 'Playfair Display', serif;
      
      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-xxl: 3rem;
      
      /* Borders */
      --border-radius-sm: 0.25rem;
      --border-radius-md: 0.5rem;
      --border-radius-lg: 1rem;
      
      /* Shadows */
      --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);
      
      /* Transitions */
      --transition-fast: all 0.2s ease;
      --transition-normal: all 0.3s ease;
      --transition-slow: all 0.5s ease;
  }
  
  /* Base Styles */
  body {
      font-family: var(--font-body);
      color: var(--text-dark);
      line-height: 1.6;
      background-color: var(--neutral-bg);
      overflow-x: hidden;
      font-weight: 400;
      letter-spacing: 0.1px;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      margin-top: 0;
      margin-bottom: 1rem;
      letter-spacing: 0.2px;
  }
  
  a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition-normal);
  }
  
  a:hover {
      color: var(--primary-light);
  }
  
  /* Breadcrumb Styles */
  .breadcrumb-wrapper {
      background-color: var(--neutral-bg);
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
  }
  
  .breadcrumb {
      margin-bottom: 0;
      flex-wrap: wrap;
  }
  
  .breadcrumb-item a {
      color: var(--text-dark);
      font-size: 0.9rem;
      transition: var(--transition-normal);
  }
  
  .breadcrumb-item a:hover {
      color: var(--primary);
      text-decoration: none;
  }
  
  .breadcrumb-item.active {
      color: var(--primary);
      font-weight: 500;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
      color: var(--text-dark);
  }
  
  /* Breadcrumb responsivo */
  @media (max-width: 575.98px) {
      .breadcrumb-wrapper {
          padding: 8px 0;
      }
      
      .breadcrumb {
          font-size: 0.8rem;
      }
      
      .breadcrumb-item a {
          font-size: 0.8rem;
      }
  }
  
  /* Buttons */
  .btn {
      border-radius: var(--border-radius-md);
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      transition: var(--transition-normal);
  }
  
  .btn-ver-todos {
      background: linear-gradient(to right, var(--primary), var(--primary-dark));
      color: var(--text-light);
      padding: 0.7rem 2rem;
      border-radius: 30px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 0.95rem;
      box-shadow: var(--shadow-md);
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s ease;
  }
  
  .btn-ver-todos:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      color: var(--text-light);
      background: linear-gradient(to right, var(--primary-dark), var(--primary));
  }
  
  .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
  }
  
  .btn-primary:hover {
      background-color: var(--primary-dark);
      border-color: var(--primary-dark);
  }
  
  .btn-outline-primary {
      color: var(--primary);
      border-color: var(--primary);
  }
  
  .btn-outline-primary:hover {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  /* Form Controls */
  .form-control:focus {
      border-color: var(--primary-light);
      box-shadow: 0 0 0 0.2rem rgba(123, 30, 43, 0.25);
  }
  
  /* Utility Classes */
  .text-primary {
      color: var(--primary) !important;
  }
  
  .bg-primary {
      background-color: var(--primary) !important;
  }
  
  .border-primary {
      border-color: var(--primary) !important;
  }
  
  /* Toast Messages */
  .toast-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 350px;
  }
  
  .toast {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.3s ease;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0;
      border: none;
  }
  
  .toast.show {
      opacity: 1;
      transform: translateY(0);
  }
  
  .toast-icon {
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: #fff;
  }
  
  .toast-content {
      padding: 12px 15px;
      flex-grow: 1;
  }
  
  .toast-title {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 5px;
      color: var(--primary-color);
  }
  
  .wholesale-price {
      font-size: 0.75rem;
      color: var(--accent-color);
      margin-bottom: 0.4rem;
      min-height: 0.9rem;
      font-style: italic;
      background-color: var(--gray-light);
      display: inline-block;
      padding: 0.1rem 0.4rem;
      border-radius: 10px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .toast-message {
      font-size: 0.9rem;
      color: var(--accent-color);
      margin: 0;
  }
  
  .toast-close {
      background: transparent;
      border: none;
      color: var(--accent-color);
      font-size: 1.2rem;
      cursor: pointer;
      padding: 0 15px;
      align-self: flex-start;
      padding-top: 10px;
  }
  
  .toast-close:hover {
      color: var(--primary-color);
  }
  
  .toast-success {
      border-left: 4px solid var(--success);
  }
  
  .toast-success .toast-icon {
      background-color: var(--success);
  }
  
  .toast-error {
      border-left: 4px solid var(--danger);
  }
  
  .toast-error .toast-icon {
      background-color: var(--danger);
  }
  
  .toast-warning {
      border-left: 4px solid var(--warning);
  }
  
  .toast-warning .toast-icon {
      background-color: var(--warning);
  }
  
  .toast-info {
      border-left: 4px solid var(--secondary-color);
  }
  
  .toast-info .toast-icon {
      background-color: var(--secondary-color);
  }
  
  @media (max-width: 575.98px) {
      .toast-container {
          bottom: 10px;
          right: 10px;
          left: 10px;
          max-width: none;
      }
  }
  
  .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      font-weight: 600;
      transition: all 0.3s ease;
      letter-spacing: 0.3px;
  }
  
  .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
      background-color: var(--primary-light);
      border-color: var(--primary-light);
  }
  
  .btn-outline-primary {
      color: var(--primary);
      border-color: var(--primary);
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  .btn-outline-light {
      color: var(--text-light);
      border-color: var(--text-light);
  }
  
  .btn-outline-light:hover,
  .btn-outline-light:focus {
      background-color: var(--text-light);
      color: var(--primary);
  }
  
  .section-header {
      margin-bottom: 2.5rem;
      text-align: center;
  }
  
  .section-header h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.25rem;
      margin-bottom: 0.5rem;
      position: relative;
      display: inline-block;
      color: var(--primary);
      font-weight: 700;
  }
  
  .section-header h2:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background-color: var(--primary);
  }
  
  .section-header p {
      color: #666;
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto;
  }
  
  /* Header Styles */
  .header-main {
      position: relative;
      z-index: 1000;
  }
  
  .top-bar {
      background-color: var(--primary);
      color: var(--text-light);
      font-size: 0.9rem;
  }
  
  .contact-info span {
      margin-right: 15px;
  }
  
  .social-links a {
      color: var(--text-light);
      margin-left: 15px;
      font-size: 0.9rem;
  }
  
  .social-links a:hover {
      color: rgba(255, 255, 255, 0.8);
  }
  
  .navbar {
      background: rgba(255, 255, 255, 0.95);
      padding: 1.5rem 0;
      box-shadow: 0 2px 30px rgba(196, 30, 58, 0.08), 0 1px 0 rgba(196, 30, 58, 0.05);
      position: sticky;
      top: 0;
      z-index: 1000;
      backdrop-filter: saturate(180%) blur(20px);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border-bottom: 1px solid rgba(196, 30, 58, 0.08);
  }
  
  .navbar.scrolled {
      padding: 1rem 0;
      box-shadow: 0 4px 40px rgba(196, 30, 58, 0.12), 0 2px 0 rgba(196, 30, 58, 0.08);
      background: rgba(255, 255, 255, 0.98);
  }
  
  .navbar-brand {
      padding: 0;
  }
  
  .logo {
      height: 60px;
      width: auto;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: brightness(1) contrast(1.05);
  }
  
  .logo:hover {
      transform: scale(1.08) rotate(-2deg);
      filter: brightness(1.1) contrast(1.1) drop-shadow(0 5px 15px rgba(196, 30, 58, 0.25));
  }
  
  .navbar-nav .nav-item {
      position: relative;
  }
  
  .navbar-nav .nav-link {
      color: #2B2B2B;
      font-weight: 500;
      padding: 0.8rem 1.5rem;
      position: relative;
      font-size: 0.92rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      transition: all 0.35s ease;
      overflow: visible;
      display: inline-block;
  }
  
  .navbar-nav .nav-link:hover {
      color: var(--primary);
      transform: translateY(-2px);
      letter-spacing: 1.2px;
  }
  
  .navbar-nav .nav-link.active {
      color: var(--primary);
      font-weight: 600;
      letter-spacing: 1px;
  }
  
  .navbar-nav .dropdown-toggle::after {
      margin-left: 0.4rem;
      vertical-align: 0.2em;
      transition: all 0.3s ease;
      color: #666;
      font-size: 0.7em;
      opacity: 0.6;
  }
  
  .navbar-nav .dropdown-toggle:hover::after {
      color: var(--primary);
      opacity: 1;
  }
  
  .navbar-nav .dropdown {
      position: relative;
  }
  
  .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
  }
  
  .dropdown-menu {
      border-radius: 0;
      border: none;
      border-top: 3px solid var(--primary);
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(196, 30, 58, 0.08);
      padding: 1.2rem 0;
      margin-top: 0;
      animation: dropdownSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      backdrop-filter: saturate(180%) blur(20px);
      background: rgba(255, 255, 255, 0.98);
      min-width: 220px;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
  }
  
  .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      height: 10px;
      background: transparent;
  }
  
  @keyframes dropdownSlide {
      from {
          opacity: 0;
          transform: translateY(-20px) scale(0.95);
      }
      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }
  
  .dropdown-item {
      padding: 0.85rem 2rem;
      font-weight: 400;
      font-size: 0.88rem;
      color: #4A4A4A;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }
  
  .dropdown-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, rgba(196, 30, 58, 0.15), rgba(196, 30, 58, 0.05));
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: -1;
  }
  
  .dropdown-item::after {
      content: '→';
      position: absolute;
      right: 1.5rem;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.35s ease;
      color: var(--primary);
      font-weight: 700;
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus {
      background: transparent;
      color: var(--primary);
      padding-left: 2.5rem;
      letter-spacing: 1px;
  }
  
  .dropdown-item:hover::before,
  .dropdown-item:focus::before {
      width: 100%;
  }
  
  .dropdown-item:hover::after,
  .dropdown-item:focus::after {
      opacity: 1;
      transform: translateX(0);
  }
  
  .navbar-actions {
      display: flex;
      align-items: center;
  }
  
  .navbar-actions .btn-search,
  .navbar-actions .btn-cart,
  .navbar-actions .btn-user,
  .navbar-actions button,
  .navbar-actions a {
      background: transparent;
      border: 2px solid transparent;
      color: #2B2B2B;
      font-size: 1.25rem;
      margin-left: 1.2rem;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
  }
  
  .navbar-actions .btn-search::before,
  .navbar-actions .btn-cart::before,
  .navbar-actions .btn-user::before,
  .navbar-actions button::before,
  .navbar-actions a::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 8px;
      padding: 2px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s ease;
  }
  
  .navbar-actions .btn-search:hover,
  .navbar-actions .btn-cart:hover,
  .navbar-actions .btn-user:hover,
  .navbar-actions button:hover,
  .navbar-actions a:hover {
      color: var(--primary);
      background: rgba(196, 30, 58, 0.05);
      transform: translateY(-4px) rotate(5deg);
      box-shadow: 0 8px 25px rgba(196, 30, 58, 0.2);
  }
  
  .navbar-actions .btn-search:hover::before,
  .navbar-actions .btn-cart:hover::before,
  .navbar-actions .btn-user:hover::before,
  .navbar-actions button:hover::before,
  .navbar-actions a:hover::before {
      opacity: 1;
  }
  
  .navbar-actions .btn-search:active,
  .navbar-actions .btn-cart:active,
  .navbar-actions .btn-user:active,
  .navbar-actions button:active,
  .navbar-actions a:active {
      transform: translateY(-2px) rotate(2deg) scale(0.98);
  }
  
  .cart-count {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--primary);
      color: var(--text-light);
      font-size: 0.7rem;
      font-weight: 700;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(196, 30, 58, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9);
      border: none;
      animation: pulse 2s infinite, glow 2s ease-in-out infinite alternate;
  }
  
  @keyframes glow {
      from {
          box-shadow: 0 4px 12px rgba(196, 30, 58, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9);
      }
      to {
          box-shadow: 0 4px 20px rgba(196, 30, 58, 0.8), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 20px rgba(196, 30, 58, 0.3);
      }
  }
  
  @keyframes pulse {
      0% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.1);
      }
      100% {
          transform: scale(1);
      }
  }
  
  .navbar-toggler {
      border: none;
      padding: 0.6rem;
      border-radius: 6px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      background: transparent;
      position: relative;
      overflow: hidden;
  }
  
  .navbar-toggler::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(196, 30, 58, 0.05));
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .navbar-toggler:hover {
      transform: scale(1.1) rotate(90deg);
  }
  
  .navbar-toggler:hover::before {
      opacity: 1;
  }
  
  .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.2);
      outline: none;
  }
  
  .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28196, 30, 58, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      transition: transform 0.3s ease;
  }
  
  /* Search Bar */
  .search-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: var(--text-light);
      padding: 2rem 0;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      z-index: 1100;
      transform: translateY(-100%);
      transition: transform 0.4s ease;
  }
  
  .search-bar.active {
      transform: translateY(0);
  }
  
  .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
  }
  
  .search-header h5 {
      margin-bottom: 0;
      font-size: 1.25rem;
  }
  
  .btn-close-search {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
  }
  
  .search-form {
      position: relative;
      margin-bottom: 1.5rem;
  }
  
  .search-input-wrapper {
      position: relative;
  }
  
  .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
  }
  
  .search-form input {
      width: 100%;
      padding: 0.75rem 1rem 0.75rem 2.5rem;
      border: 1px solid var(--border-color);
      border-radius: 0;
      font-size: 1rem;
  }
  
  .search-form input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 0.2rem rgba(123, 30, 43, 0.25);
  }
  
  .btn-clear-search {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      display: none;
  }
  
  .search-submit {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: var(--primary);
      color: var(--text-light);
      border: none;
      padding: 0 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  .search-submit:hover {
      background-color: var(--primary-light);
  }
  
  .search-trending {
      margin-top: 1.5rem;
  }
  
  .search-trending h6 {
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
      color: #666;
  }
  
  .trending-tags a {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      margin: 0 0.5rem 0.5rem 0;
      background-color: var(--gray-light);
      color: var(--text-dark);
      font-size: 0.85rem;
      border-radius: 2px;
  }
  
  .trending-tags a:hover {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  /* Hero Carousel Section */
  .hero-carousel {
      position: relative;
      color: var(--text-light);
  }
  
  .carousel-inner {
      overflow: hidden;
  }
  
  .hero-slide {
      position: relative;
      height: 650px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      overflow: hidden;
  }
  
  .hero-slide::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
      z-index: 1;
      pointer-events: none;
  }
  
  .hero-slide:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1));
      pointer-events: none;
      z-index: 1;
  }
  
  .hero-content {
      position: relative;
      z-index: 2;
      padding: 2rem;
      text-align: center;
      width: 100%;
  }
  
  .hero-title {
      font-size: 4rem;
      font-weight: 800;
      margin-bottom: 1.2rem;
      line-height: 1.1;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s forwards;
      animation-delay: 0.3s;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
      text-transform: uppercase;
      letter-spacing: -1px;
  }
  
  .hero-subtitle {
      font-size: 1.6rem;
      margin-bottom: 2.2rem;
      max-width: 700px;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s forwards;
      animation-delay: 0.5s;
      font-weight: 500;
      letter-spacing: 1px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
      text-transform: lowercase;
      margin-left: auto;
      margin-right: auto;
  }
  
  .hero-badge {
      display: inline-block;
      background: linear-gradient(45deg, var(--primary), var(--accent));
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 25px;
      font-weight: 700;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 1.5rem;
      box-shadow: 0 5px 15px rgba(123, 30, 43, 0.3);
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s forwards;
      animation-delay: 0.1s;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  }
  
  .hero-actions {
      display: flex;
      gap: 1.2rem;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s forwards;
      animation-delay: 0.7s;
      justify-content: center;
      margin: 0 auto;
  }
  
  .hero-actions .btn {
      padding: 0.9rem 2.2rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      text-transform: uppercase;
      font-size: 0.9rem;
  }
  
  .hero-actions .btn-primary {
      background: linear-gradient(45deg, var(--primary), var(--primary-dark));
      border: none;
      box-shadow: 0 4px 12px rgba(123, 30, 43, 0.3);
  }
  
  .hero-actions .btn-outline-primary {
      background: transparent;
      border: 2px solid var(--accent-light);
      color: white;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0 4px 12px rgba(63, 81, 181, 0.2);
  }
  
  .hero-actions .btn:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  @keyframes fadeInUp {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  /* Carousel Controls */
  .carousel-indicators {
      margin-bottom: 2rem;
  }
  
  .carousel-indicators [data-bs-target] {
      width: 30px;
      height: 6px;
      border-radius: 3px;
      background-color: rgba(255, 255, 255, 0.5);
      border: none;
      opacity: 0.8;
      transition: all 0.3s ease;
      margin: 0 5px;
  }
  
  .carousel-indicators .active {
      background-color: var(--primary-light);
      transform: scaleX(1.5);
      opacity: 1;
      box-shadow: 0 0 15px rgba(167, 66, 82, 0.7);
  }
  
  .carousel-control-prev,
  .carousel-control-next {
      width: 8%;
      opacity: 0.8;
      transition: all 0.3s ease;
      z-index: 10;
      position: absolute;
  }
  
  .hero-carousel:hover .carousel-control-prev,
  .hero-carousel:hover .carousel-control-next {
      opacity: 1;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      width: 50px;
      height: 50px;
      background-color: rgba(123, 30, 43, 0.3);
      border-radius: 10px;
      background-size: 50%;
      background-position: center;
      box-shadow: 0 0 20px rgba(63, 81, 181, 0.3);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .carousel-control-prev:hover .carousel-control-prev-icon,
  .carousel-control-next:hover .carousel-control-next-icon {
      background-color: rgba(123, 30, 43, 0.5);
      transform: scale(1.1);
  }
  
  /* Categories Section */
  .categories-section {
      padding: 5rem 0;
  }
  
  .category-card {
      position: relative;
      overflow: hidden;
      height: 300px;
      margin-bottom: 1.5rem;
  }
  
  .category-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }
  
  .category-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem;
      color: var(--text-light);
      transition: all 0.3s ease;
  }
  
  .category-card:hover img {
      transform: scale(1.05);
  }
  
  .category-card:hover .category-overlay {
      background: linear-gradient(to bottom, rgba(123, 30, 43, 0.4), rgba(123, 30, 43, 0.8));
  }
  
  .category-overlay h3 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
  }
  
  /* Seasonal Collection */
  .seasonal-collection {
      padding: 5rem 0;
  }
  
  /* Product Detail Page - Gallery & Zoom */
  .product-gallery {
      position: relative;
      margin-bottom: 2rem;
  }
  
  .main-image-container {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      margin-bottom: 1rem;
      margin-left: 1rem;
      margin-right: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .main-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      border-radius: 6px;
      transition: transform 0.3s ease;
  }
  
  .image-zoom-lens {
      position: absolute;
      border: 1px solid var(--secondary-color);
      width: 100px;
      height: 100px;
      background-color: rgba(183, 147, 71, 0.1);
      cursor: crosshair;
      display: none;
      pointer-events: none;
  }
  
  .image-zoom-result {
      position: absolute;
      top: 0;
      left: 100%;
      width: 300px;
      height: 300px;
      border: 1px solid #d4d4d4;
      background-repeat: no-repeat;
      display: none;
      z-index: 10;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      background-color: white;
  }
  
  /* Responsive adjustments */
  @media (max-width: 992px) {
      .gallery-nav {
          width: 35px;
          height: 35px;
      }
      
      .gallery-fullscreen {
          width: 35px;
          height: 35px;
      }
  }
  
  @media (max-width: 576px) {
      .gallery-nav {
          width: 30px;
          height: 30px;
      }
      
      .gallery-fullscreen {
          width: 30px;
          height: 30px;
      }
  }
  
  .thumbnail img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      transition: all 0.3s ease;
  }
  
  /* Gallery navigation controls */
  .gallery-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.2s ease;
      z-index: 2;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      color: var(--primary-color);
  }
  
  .gallery-nav:hover {
      opacity: 1;
      background-color: white;
  }
  
  .gallery-nav.prev {
      left: 10px;
  }
  
  .gallery-nav.next {
      right: 10px;
  }
  
  /* Fullscreen button */
  .gallery-fullscreen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.2s ease;
      z-index: 2;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      color: var(--primary-color);
  }
  
  .gallery-fullscreen:hover {
      opacity: 1;
      background-color: white;
  }
  
  /* Thumbnails Slider */
  .thumbnails-container {
      margin-top: 1rem;
      position: relative;
  }
  
  .thumbnails-slider-wrapper {
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 0.5rem;
  }
  
  .thumbnails-slider {
      flex: 1;
      overflow: hidden;
      position: relative;
  }
  
  .thumbnails-track {
      display: flex;
      transition: transform 0.3s ease;
  }
  
  .thumbnail-item {
      flex: 0 0 16.666%;
      padding: 0 5px;
      box-sizing: border-box;
  }
  
  .thumbnails-nav {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--text-light);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--primary);
      transition: all 0.2s ease;
      margin: 0 5px;
      flex-shrink: 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .thumbnails-nav:hover {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  .thumbnails-nav.disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }
  
  .thumbnails-pagination {
      text-align: center;
      font-size: 0.85rem;
      color: var(--accent);
  }
  
  @media (max-width: 767px) {
      .thumbnail-item {
          flex: 0 0 25%;
      }
  }
  
  @media (max-width: 575px) {
      .thumbnail-item {
          flex: 0 0 33.333%;
      }
  }
  
  .thumbnail {
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s ease;
  }
  
  .thumbnail.active {
      border-color: var(--secondary-color);
  }
  
  .thumbnail:hover {
      border-color: var(--accent-color);
  }
  
  .thumbnail img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin: 0 auto;
      display: block;
  }
  
  @media (max-width: 991.98px) {
      .image-zoom-result {
          display: none !important;
      }
      
      .image-zoom-lens {
          display: none !important;
      }
      
      .main-image-container {
          height: 350px;
      }
  }
  
  @media (max-width: 575.98px) {
      .thumbnail img {
          height: 55px;
      }
      
      .product-title {
          font-size: 1.3rem;
          margin-bottom: 0.75rem;
      }
      
      .product-price-container {
          margin-bottom: 1rem;
          padding: 1rem;
          gap: 0.75rem;
          flex-wrap: wrap;
      }
      
      .product-price-original {
          font-size: 0.95rem;
      }
      
      .product-price-discount {
          font-size: 1.6rem;
      }
      
      .product-discount-badge {
          font-size: 0.85rem;
          padding: 0.4rem 0.75rem;
          margin-left: 0;
      }
      
      .product-rating .stars {
          font-size: 0.9rem;
      }
      
      .product-rating .rating-count {
          font-size: 0.8rem;
      }
      
      .product-short-description {
          font-size: 0.9rem;
          margin-bottom: 1rem;
      }
      
      .product-options {
          margin-bottom: 0.5rem;
      }
      
      .product-size,
      .product-color,
      .product-quantity {
          margin-bottom: 0.75rem !important;
      }
      
      .size-options,
      .color-options {
          gap: 0.35rem;
      }
      
      .size-option {
          width: 32px;
          height: 32px;
          font-size: 0.85rem;
      }
      
      .size-guide-link {
          font-size: 0.8rem;
      }
      
      .product-actions {
          margin-bottom: 1.5rem;
      }
      
      .btn-add-cart,
      .btn-buy-now {
          font-size: 0.85rem;
          padding: 0.5rem 0.75rem;
      }
      
      .btn-icon {
          width: 36px;
          height: 36px;
      }
      
      .meta-item {
          font-size: 0.8rem;
          margin-bottom: 0.35rem;
      }
  }
  
  /* Product Detail - Options & Quantity */
  .product-details {
      padding: 0 1rem;
  }
  
  /* Wholesale Promotion Section */
  .wholesale-promo {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 15px;
      position: relative;
      margin-top: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
  .promo-badge {
      position: absolute;
      top: -10px;
      left: 15px;
      background-color: var(--primary);
      color: white;
      font-size: 0.8rem;
      padding: 3px 10px;
      border-radius: 15px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
  }
  
  .promo-title {
      margin-top: 15px;
      margin-bottom: 10px;
      color: var(--primary);
      font-weight: 600;
      font-size: 1.1rem;
  }
  
  .promo-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      flex-wrap: wrap;
      gap: 10px;
  }
  
  .promo-price {
      display: flex;
      flex-direction: column;
  }
  
  .regular-price {
      text-decoration: line-through;
      color: #6c757d;
      font-size: 0.9rem;
  }
  
  .discount-price {
      color: var(--primary);
      font-weight: 600;
      font-size: 1.1rem;
  }
  
  .promo-savings {
      background-color: #e8f4f8;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 0.9rem;
      color: #0a6ebd;
      font-weight: 500;
  }
  
  .promo-action {
      text-align: right;
  }
  
  @media (max-width: 576px) {
      .promo-details {
          flex-direction: column;
          align-items: flex-start;
      }
      
      .promo-action {
          text-align: center;
          margin-top: 10px;
      }
  }
  
  .product-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;
      letter-spacing: -0.5px;
      color: var(--dark);
  }
  
  .product-brand {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--primary);
      letter-spacing: 1px;
      margin-bottom: 0.25rem;
  }
  
  .product-price-container {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
      gap: 1rem;
      padding: 1.25rem;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      border-radius: 12px;
      border: 2px solid #f0f0f0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
  }
  
  .product-price-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  }
  
  .product-price-original {
      font-size: 1.1rem;
      color: #999;
      text-decoration: line-through;
      font-weight: 500;
      opacity: 0.8;
  }
  
  .product-price-discount {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.5px;
      text-shadow: 0 2px 4px rgba(196, 30, 58, 0.1);
  }
  
  .product-card .product-info .product-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .product-card .product-info .product-title:hover {
    color: var(--primary);
  }

  .product-card .product-info .product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
  }

  .product-discount-badge {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
    padding: 0.5rem 0.9rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    letter-spacing: 0.5px;
    animation: pulse-badge 2s ease-in-out infinite;
  }
  
  @keyframes pulse-badge {
      0%, 100% {
          transform: scale(1);
          box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
      }
      50% {
          transform: scale(1.05);
          box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
      }
  }
  
  .product-rating {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
  }
  
  .product-rating .stars {
      color: var(--secondary-color);
      margin-right: 0.5rem;
  }
  
  .product-rating .rating-count {
      color: var(--accent-color);
      font-size: 0.9rem;
  }
  
  .product-short-description {
      margin-bottom: 1.5rem;
      color: var(--accent-color);
      line-height: 1.6;
  }
  
  .product-options h6 {
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: var(--primary-color);
  }
  
  /* Size Options */
  .size-select-container {
      position: relative;
      max-width: 200px;
      margin-bottom: 12px;
  }
  
  .size-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 100%;
      padding: 10px 15px;
      font-size: 0.95rem;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background-color: #fff;
      color: var(--primary-color);
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  .size-select:hover {
      border-color: var(--primary-color);
  }
  
  .size-select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(5, 10, 48, 0.1);
  }
  
  .select-arrow {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--primary-color);
      font-size: 0.8rem;
  }
  
  .size-select option {
      padding: 10px;
  }
  
  /* Disposición en fila para opciones de producto */
  .product-options-row {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: flex-start;
  }
  
  .product-options-row > div {
      flex: 1;
      min-width: 200px;
  }
  
  /* Responsive: 2 columnas en móviles */
  @media (max-width: 767.98px) {
      .product-options-row {
          gap: 15px;
      }
      
      .product-options-row > div {
          flex: 0 0 calc(50% - 7.5px);
          min-width: 0;
      }
  }
  
  @media (max-width: 575.98px) {
      .product-options-row {
          gap: 12px;
      }
      
      .product-options-row > div {
          flex: 0 0 calc(50% - 6px);
      }
  }
  
  /* Estilos para el combobox de colores */
  .color-select-container {
      position: relative;
      max-width: 200px;
      margin-bottom: 12px;
  }
  
  .color-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 100%;
      padding: 10px 15px;
      font-size: 0.95rem;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background-color: #fff;
      color: var(--primary-color);
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  .color-select:hover {
      border-color: var(--primary-color);
  }
  
  .color-select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(5, 10, 48, 0.1);
  }
  
  .color-preview {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-block;
      margin-top: 10px;
      border: 2px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .size-guide-link {
      font-size: 0.9rem;
      color: var(--primary-color);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
  }
  
  .size-guide-link:hover {
      color: var(--secondary-color);
  }
  
  /* Color Options */
  .color-options {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
  }
  
  .color-option {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
  }
  
  .color-option::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      border: 2px solid transparent;
      border-radius: 50%;
      transition: all 0.3s ease;
  }
  
  .color-option:hover::after {
      border-color: var(--accent-color);
  }
  
  .color-option.active::after {
      border-color: var(--secondary-color);
  }
  
  .selected-color {
      font-size: 0.9rem;
      color: var(--accent-color);
      display: block;
      margin-top: 0.5rem;
  }
  
  /* Quantity Selector */
  .quantity-selector {
      display: flex;
      align-items: center;
      width: 120px;
      flex-shrink: 0;
  }
  
  .btn-quantity {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border: 1px solid var(--accent-color);
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  .btn-quantity:first-child {
      border-radius: 4px 0 0 4px;
  }
  
  .btn-quantity:last-child {
      border-radius: 0 4px 4px 0;
  }
  
  .btn-add-cart-inline,
  .btn-view-details-inline {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      white-space: nowrap;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .btn-quantity:hover {
      background-color: var(--secondary-color);
      color: white;
  }
  
  .quantity-input {
      width: 60px;
      height: 40px;
      border: 1px solid var(--accent-color);
      border-left: none;
      border-right: none;
      text-align: center;
      font-weight: 500;
      appearance: textfield;
      -moz-appearance: textfield;
  }
  
  .quantity-input::-webkit-outer-spin-button,
  .quantity-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  
  .stock-status {
      display: block;
      font-size: 0.9rem;
      margin-top: 0.5rem;
  }
  
  .stock-status.in-stock {
      color: var(--success);
  }
  
  .stock-status.low-stock {
      color: var(--warning);
  }
  
  .stock-status.out-of-stock {
      color: var(--danger);
  }
  
  /* Product Actions */
  .product-actions {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
  }
  
  .btn-add-cart,
  .btn-view-details,
  .btn-buy-now {
      padding: 0.75rem 1.5rem;
      font-weight: 600;
  }
  
  .btn-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #f5f5f5;
      border: 1px solid var(--accent-color);
      font-size: 1.2rem;
      color: var(--primary-color);
      transition: all 0.3s ease;
  }
  
  .btn-icon:hover {
      background-color: var(--secondary-color);
      color: white;
  }
  
  .btn-wishlist.active {
      background-color: var(--danger);
      color: white;
      border-color: var(--danger);
  }
  
  /* Product Meta */
  .product-meta {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: 1.5rem;
  }
  
  .meta-item {
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
  }
  
  .meta-label {
      font-weight: 600;
      color: var(--primary-color);
      margin-right: 0.5rem;
  }
  
  .meta-value a {
      color: var(--secondary-color);
      text-decoration: none;
  }
  
  .meta-value a:hover {
      text-decoration: underline;
  }
  
  .product-share {
      display: inline-flex;
      gap: 0.75rem;
      margin-top: 0.25rem;
  }
  
  .product-share a {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 50%;
      color: var(--primary-color);
      transition: all 0.3s ease;
  }
  
  .product-share a:hover {
      background-color: var(--secondary-color);
      color: white;
  }
  
  @media (max-width: 767.98px) {
      .product-title {
          font-size: 1.5rem;
      }
      
      .product-price-discount {
          font-size: 1.5rem;
      }
      
      .product-actions {
          flex-wrap: wrap;
          gap: 0.75rem;
      }
      
      .btn-add-cart,
      .btn-buy-now {
          flex: 1;
          padding: 0.6rem 1rem;
          font-size: 0.9rem;
      }
      
      .btn-icon {
          width: 40px;
          height: 40px;
          font-size: 1rem;
      }
      
      .product-meta {
          padding-top: 1rem;
      }
      
      .product-details {
          padding: 0;
      }
      
      .product-options h6 {
          font-size: 0.95rem;
      }
      
      .size-option {
          width: 35px;
          height: 35px;
          font-size: 0.9rem;
      }
      
      .color-option {
          width: 25px;
          height: 25px;
      }
      
      .selected-color {
          font-size: 0.85rem;
      }
      
      .quantity-selector {
          max-width: 120px;
      }
      
      .btn-quantity {
          width: 35px;
          height: 35px;
      }
      
      .quantity-input {
          width: 50px;
          height: 35px;
      }
      
      .stock-status {
          font-size: 0.85rem;
      }
  }
  
  /* Product Cards */
  .product-card {
      background-color: #fff;
      margin-bottom: 1.5rem;
      border-radius: 12px;
      overflow: hidden;
      background-color: var(--text-light);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-normal);
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--gray-light);
  }
  
  .product-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
      border-color: var(--primary-light);
  }
  
  .product-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: var(--primary);
      color: var(--text-light);
      padding: 0.35rem 0.85rem;
      font-size: 0.8rem;
      z-index: 1;
      border-radius: 20px;
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .product-badge.sale {
      background-color: var(--danger);
      left: auto;
      right: 10px;
  }
  
  .product-badge.out-of-stock {
      background-color: var(--danger);
  }
  
  .product-badge.available {
      background-color: var(--success);
  }
  
  .product-image {
      position: relative;
      overflow: hidden;
      padding-top: 100%; /* Creates a square aspect ratio (1:1) */
      height: 0; /* Height is controlled by padding-top */
      background-color: var(--neutral-bg);
  }
  
  .product-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }
  
  .product-card:hover .product-image img {
      transform: scale(1.05);
  }
  
  .visually-hidden,
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
      white-space: nowrap;
  }
  
  .product-actions {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      opacity: 0;
      transform: translateX(20px);
      transition: all 0.3s ease;
  }
  
  .product-card:hover .product-actions {
      opacity: 1;
      transform: translateX(0);
  }
  
  .product-actions button {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: var(--text-light);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15);
      font-size: 0.9rem;
  }
  
  .product-actions button:hover {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  .product-info {
      padding: 0.7rem 0.7rem 0.6rem;
      text-align: center;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(to bottom, #ffffff, var(--gray-light));
      border-top: 1px solid var(--gray-medium);
  }
  
  .product-title {
      font-size: 0.95rem;
      margin-bottom: 0.25rem;
      font-weight: 600;
      min-height: 2rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-dark);
      font-family: var(--font-heading);
  }
  
  .product-price {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.3rem;
      letter-spacing: 0.5px;
  }
  
  .price-old {
      text-decoration: line-through;
      color: #999;
      font-weight: 400;
      margin-right: 0.5rem;
  }
  
  .btn-add-cart,
  .btn-view-details {
      width: 100%;
      background-color: var(--text-light);
      border: 1px solid var(--primary);
      color: var(--primary);
      font-size: 0.9rem;
      transition: all 0.3s ease;
      font-weight: 600;
      letter-spacing: 0.3px;
      margin-bottom: 1rem;
  }
  
  .btn-add-cart:hover,
  .btn-view-details:hover {
    background-color: var(--primary);
    color: var(--text-light);
    box-shadow: 0 4px 8px rgba(196, 30, 58, 0.3);
    transform: translateY(-2px);
}


@media (max-width: 767px) {
    .product-info {
        padding: 0.75rem;
    }

    .product-title {
          font-size: 0.85rem;
          min-height: 1.8rem;
          margin-bottom: 0.2rem;
      }
      
      .product-price {
          font-size: 0.95rem;
          margin-bottom: 0.2rem;
      }
      
      .wholesale-price {
          font-size: 0.7rem;
          margin-bottom: 0.3rem;
          padding: 0.1rem 0.3rem;
          border-radius: 8px;
          height: auto;
          min-height: 2.4rem;
          display: block;
          overflow: visible;
          line-height: 1.2;
          white-space: normal;
      }
      
      /* Aseguramos que todos los wholesale-price ocupen el mismo espacio */
      .product-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 170px;
      }
      
      .wholesale-price.special-price {
          font-size: 0.65rem;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          line-height: 1.1;
          padding: 0.15rem 0.3rem;
      }
      
      .wholesale-price.special-price i {
          margin-right: 0.2rem;
          color: #DAA520;
      }
      
      .product-title {
          min-height: 2.5rem;
      }
      
      .btn-add-cart {
          padding: 0;
          height: 2.5rem !important;
          font-size: 0.8rem;
          border-radius: 30px;
          width: 100%;
          text-align: center;
          font-weight: 600;
          margin-top: 0.5rem;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: var(--primary);
          border: 1px solid var(--primary);
      }
      
      .product-badge {
          font-size: 0.3rem;
          padding: 0.02rem 0.1rem;
          border-radius: 3px;
          top: 1px;
          left: 1px;
          letter-spacing: 0;
          font-weight: 500;
          box-shadow: none;
          line-height: 1;
          transform: scale(0.6);
      }
      
      .product-badge.sale {
          right: 5px;
          left: auto;
      }
      
      /* Cuando hay dos badges en el mismo producto */
      .product-badge + .product-badge {
          top: 1px;
          left: auto;
          right: 1px;
      }
      
      .product-actions button {
          width: 32px;
          height: 32px;
          font-size: 0.8rem;
      }
  }
  
  /* Offers Section */
  .offers-section {
      padding: 5rem 0;
  }
  
  .offer-banner {
      background-color: var(--primary);
      color: var(--text-light);
      padding: 3rem;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
  }
  
  .offer-content {
      position: relative;
      z-index: 1;
  }
  
  .offer-badge {
      display: inline-block;
      background-color: var(--text-light);
      color: var(--primary);
      padding: 0.25rem 0.75rem;
      font-size: 0.9rem;
      margin-bottom: 1rem;
      font-weight: 500;
  }
  
  .offer-content h2 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
  }
  
  .offer-content h3 {
      font-size: 2rem;
      margin-bottom: 1rem;
  }
  
  .offer-content p {
      margin-bottom: 1.5rem;
      max-width: 500px;
  }
  
  .offer-image img {
      border-radius: 5px;
  }
  
  /* Testimonials Section */
  .testimonials-section {
      padding: 5rem 0;
  }
  
  .rating-stars {
      color: var(--warning);
      margin-bottom: 2rem;
  }
  
  .rating-text {
      color: #666;
      margin-left: 0.5rem;
  }
  
  .testimonial-card {
      background-color: var(--text-light);
      padding: 2rem;
      border-radius: 5px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      margin-bottom: 1.5rem;
      height: 100%;
  }
  
  .testimonial-rating {
      color: var(--warning);
      margin-bottom: 1rem;
  }
  
  .testimonial-card p {
      font-style: italic;
      margin-bottom: 1.5rem;
  }
  
  .testimonial-author {
      display: flex;
      align-items: center;
  }
  
  .testimonial-author img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
  }
  
  .testimonial-author > i.fa-user {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-size: 1.5rem;
      flex-shrink: 0;
  }
  
  .testimonial-author h6 {
      margin-bottom: 0;
      font-weight: 600;
  }
  
  .testimonial-author h3 {
      margin-bottom: 0;
      font-weight: 600;
      font-size: 1rem;
  }
  
  .testimonial-author span {
      font-size: 0.85rem;
      color: #666;
      display: block;
      margin-top: 0.25rem;
  }
  
  .testimonial-author span i {
      font-size: 0.75rem;
      margin-right: 0.25rem;
  }
  
  /* Newsletter Section */
  .newsletter-section {
      padding: 5rem 0;
  }
  
  .newsletter-wrapper {
      background-color: var(--primary);
      color: var(--text-light);
      padding: 3rem;
      border-radius: 5px;
  }
  
  .newsletter-wrapper h3 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
  }
  
  .newsletter-form .input-group {
      margin-bottom: 1rem;
  }
  
  .newsletter-form .form-control {
      border-radius: 0;
      padding: 0.75rem 1.5rem;
      border: none;
  }
  
  .newsletter-form .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 0;
  }
  
  .newsletter-form .form-check-label {
      font-size: 0.85rem;
  }
  
  .newsletter-form .form-check-label a {
      color: var(--text-light);
      text-decoration: underline;
  }
  
  /* Footer */
  .footer-main {
      background-color: #222;
      color: var(--text-light);
      position: relative;
      overflow: hidden;
      padding: 5rem 0;
  }
  
  .footer-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-light));
  }
  
  /* Estilos originales del footer-logo reemplazados por la nueva implementación */
  
  .footer-about p {
      margin-bottom: 1.5rem;
      opacity: 0.8;
  }
  
  /* Category Page Styles - Freedom Online Store
  -------------------------------------------------- */
  
  /* Category Header */
  .category-header {
      padding: 1rem 0;
      border-bottom: 1px solid var(--border-color);
  }
  
  .category-title {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      color: var(--primary);
  }
  
  .category-description {
      color: var(--text-dark);
      max-width: 800px;
      line-height: 1.6;
  }
  
  /* Breadcrumb styles específicos para categorías */
  .breadcrumb-item.active {
      color: var(--primary);
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
      content: ">";
      color: var(--text-dark);
  }
  
  /* Filters Sidebar */
  .filters-sidebar {
      background-color: #fff;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .filters-header {
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border-color);
  }
  
  .filter-group {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--border-color);
  }
  
  .filter-group:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }
  
  .filter-title {
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--text-dark);
  }
  
  .form-check {
      margin-bottom: 0.5rem;
  }
  
  .form-check-label {
      color: var(--text-dark);
      cursor: pointer;
  }
  
  .form-check-input:checked {
      background-color: var(--primary);
      border-color: var(--primary);
  }
  
  /* Color Options */
  .color-options {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 12px;
  }
  
  .color-checkbox {
      display: none;
  }
  
  .color-option-wrapper {
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 2px;
      transition: all 0.3s ease;
  }
  
  .color-option-wrapper:hover {
      transform: scale(1.08);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  
  .color-option {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      border: 2px solid #fff;
      transition: all 0.3s ease;
  }
  
  .color-option-wrapper.active {
      box-shadow: 0 0 0 2px var(--secondary-color);
      transform: scale(1.05);
  }
  
  .color-option.active {
      border: 2px solid #fff;
  }
  
  .color-option.active::after {
      content: '\f00c';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 12px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .selected-color {
      display: block;
      margin-top: 8px;
      font-size: 0.9rem;
      color: var(--primary-color);
      font-weight: 500;
  }
  
  .color-name {
      font-size: 0.9rem;
      color: var(--text-dark);
  }
  
  /* Price Slider */
  .price-slider {
      padding: 10px 0;
  }
  
  .price-range {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
  }
  
  .price-input {
      width: 45%;
      display: flex;
      align-items: center;
  }
  
  .price-input span {
      margin-right: 5px;
      color: var(--text-dark);
  }
  
  .price-input input {
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 5px;
      font-size: 0.9rem;
  }
  
  .slider-container {
      position: relative;
      height: 5px;
      background-color: var(--border-color);
      border-radius: 5px;
  }
  
  .slider-track {
      position: absolute;
      height: 100%;
      background-color: var(--primary);
      border-radius: 5px;
  }
  
  input[type="range"] {
      position: absolute;
      width: 100%;
      height: 5px;
      background: none;
      pointer-events: none;
      -webkit-appearance: none;
      appearance: none;
  }
  
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      background: var(--primary);
      cursor: pointer;
      pointer-events: auto;
      margin-top: -5px;
  }
  
  input[type="range"]::-moz-range-thumb {
      height: 15px;
      width: 15px;
      border-radius: 50%;
      background: var(--primary);
      cursor: pointer;
      pointer-events: auto;
      border: none;
  }
  
  /* Filter Actions */
  .filter-actions {
      margin-top: 1.5rem;
  }
  
  /* Sort Options */
  .sort-options {
      padding: 1rem 0;
      border-bottom: 1px solid var(--border-color);
  }
  
  .results-count {
      color: var(--text-dark);
      margin-bottom: 0;
  }
  
  .btn-filter {
      background-color: transparent;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 0.5rem 1rem;
      color: var(--text-dark);
      transition: var(--transition-normal);
  }
  
  .btn-filter:hover {
      background-color: var(--neutral-bg);
  }
  
  .sort-dropdown .form-select {
      border-color: var(--border-color);
      color: var(--text-dark);
      cursor: pointer;
      padding-right: 2rem;
  }
  
  .sort-dropdown .form-select:focus {
      box-shadow: none;
      border-color: var(--primary);
  }
  
  /* Products Grid - Category specific styles */
  /* Note: Main product-card styles are defined in the Product Cards section */
  /* These are only category-specific overrides */
  
  .product-badge.stock {
      background-color: #F0AD4E;
  }
  
  .product-image {
      position: relative;
      overflow: hidden;
      padding-top: 100%; /* 1:1 aspect ratio (square) */
  }
  
  .product-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-normal);
  }
  
  .product-image .img-hover {
      opacity: 0;
  }
  
  .product-card:hover .img-main {
      opacity: 0;
  }
  
  .product-card:hover .img-hover {
      opacity: 1;
  }
  
  .wholesale-price {
      font-size: 0.85rem;
      margin-bottom: 0.75rem;
      font-weight: 600;
      display: block;
      color: var(--accent);
      background: linear-gradient(to right, var(--accent), var(--accent-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }
  
  .special-price {
      font-size: 0.9rem;
      font-weight: 700;
      background: linear-gradient(to right, #DAA520, #B8860B); /* Gradiente dorado */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0px 0px 1px rgba(0,0,0,0.1);
      position: relative;
      padding-left: 20px;
      transition: var(--transition-normal);
  }
  
  /* Promotional Banner */
  .promo-banner {
      margin: 2rem 0;
  }
  
  .banner-container {
      height: 200px;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
  }
  
  .banner-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
  }
  
  .banner-content {
      position: relative;
      z-index: 1;
      padding: 2rem;
      color: #fff;
      max-width: 50%;
  }
  
  .banner-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
  }
  
  .banner-text {
      margin-bottom: 1rem;
  }
  
  /* Pagination */
  .pagination-container {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border-color);
  }
  
  .pagination {
      margin-bottom: 0;
  }
  
  .page-item .page-link {
      color: var(--text-dark);
      border-color: var(--border-color);
      margin: 0 3px;
      border-radius: 4px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .page-item.active .page-link {
      background-color: var(--primary);
      border-color: var(--primary);
  }
  
  .page-item .page-link:hover {
      background-color: var(--neutral-bg);
      color: var(--text-dark);
  }
  
  .page-item.active .page-link:hover {
      background-color: var(--primary-light);
      color: #fff;
  }
  
  .load-more {
      border-color: var(--primary);
      color: var(--primary);
  }
  
  .load-more:hover {
      background-color: var(--primary);
      color: #fff;
  }
  
  /* Mobile Filters */
  /* Estilos para dispositivos móviles */
  @media (max-width: 575.98px) {
      /* Ajustes para tarjetas de producto en vista móvil (2 columnas) */
      /* Note: Consolidated product-card mobile styles are defined at the end of the category section */
      
      .product-info {
          padding: 0.75rem;
      }
      
      .product-title {
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
      }
      
      .product-price {
          font-size: 0.9rem;
      }
      
      .product-price .original-price {
          font-size: 0.8rem;
      }
      
      .product-rating {
          font-size: 0.7rem;
      }
      
      .product-badge {
          font-size: 0.7rem;
          padding: 0.15rem 0.5rem;
      }
      
      .btn-add-cart {
          font-size: 0.8rem;
          padding: 0.3rem 0.5rem;
      }
      
      .product-actions {
          gap: 5px;
      }
      
      .btn-wishlist,
      .btn-quickview {
          width: 30px;
          height: 30px;
          font-size: 0.8rem;
      }
      
      /* Ajustes para controles de ordenamiento y filtros */
      .results-count {
          font-size: 0.8rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      
      .sort-options {
          margin-bottom: 0.75rem;
      }
      
      .btn-filter {
          padding: 0.3rem 0.5rem;
          font-size: 0.85rem;
      }
      
      .filter-text {
          display: none;
      }
      
      .sort-dropdown .form-select {
          font-size: 0.8rem;
          padding: 0.3rem 1.5rem 0.3rem 0.5rem;
          height: auto;
      }
      
      .category-title {
          font-size: 1.5rem;
      }
      
      .category-description {
          font-size: 0.9rem;
      }
  }
  
  @media (max-width: 991.98px) {
      .filters-sidebar {
          position: fixed;
          top: 0;
          left: -100%;
          width: 85%;
          max-width: 350px;
          height: 100vh;
          overflow-y: auto;
          z-index: 1050;
          transition: left 0.3s ease;
          padding-top: 1rem;
          background-color: #fff;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      }
      
      .filters-sidebar.show {
          left: 0;
      }
      
      .btn-close-filters {
          background: none;
          border: none;
          font-size: 1.2rem;
          color: var(--text-dark);
      }
      
      .filters-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 1040;
          display: none;
      }
      
      .filters-overlay.show {
          display: block;
      }
  }
  
  /* Filter Notification */
  .filter-notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--primary);
      color: #fff;
      padding: 12px 20px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      z-index: 1060;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
      transform: translateX(-50%) translateY(20px);
      font-size: 0.9rem;
      text-align: center;
      min-width: 250px;
  }
  
  .filter-notification.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
  }
  
  .filter-notification.warning {
      background-color: #F0AD4E;
  }
  
  /* Responsive Adjustments for Category Page */
  @media (max-width: 767.98px) {
      .category-title {
          font-size: 2rem;
      }
      
      .banner-content {
          max-width: 80%;
      }
      
      .banner-title {
          font-size: 1.5rem;
      }
  }
  
  @media (max-width: 575.98px) {
      /* Consolidated product-card mobile styles */
      .product-card {
          max-width: 300px;
          margin-left: auto;
          margin-right: auto;
      }
      
      .banner-content {
          max-width: 100%;
          padding: 1.5rem;
      }
  }
  
  .footer-social a {
      color: var(--text-light);
      margin-right: 1rem;
      font-size: 1.2rem;
  }
  
  .footer-social a:hover {
      color: var(--primary-light);
  }
  
  .footer-title {
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
  }
  
  .footer-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: var(--primary);
  }
  
  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .footer-links li {
      margin-bottom: 0.75rem;
  }
  
  .footer-links a {
      color: var(--text-light);
      opacity: 0.8;
  }
  
  .footer-links a:hover {
      color: var(--primary-light);
      opacity: 1;
  }
  
  .footer-contact {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .footer-contact li {
      display: flex;
      margin-bottom: 1rem;
  }
  
  .footer-contact li i {
      margin-right: 1rem;
      color: var(--primary-light);
  }
  
  /* Estilos para el logo del footer */
  .footer-logo-container {
      display: inline-block;
      margin-bottom: 1.5rem;
      position: relative;
      padding: 8px;
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(123, 30, 43, 0.1), rgba(63, 81, 181, 0.1));
      animation: logoPulse 3s infinite alternate;
  }
  
  @keyframes logoPulse {
      0% {
          box-shadow: 0 0 5px rgba(123, 30, 43, 0.2);
      }
      100% {
          box-shadow: 0 0 15px rgba(63, 81, 181, 0.4);
      }
  }
  
  .footer-logo {
      max-width: 180px;
      height: auto;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      transition: all 0.3s ease;
  }
  
  .footer-logo-container:hover .footer-logo {
      transform: scale(1.05);
  }
  
  .footer-logo-container:after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      width: 40%;
      height: 3px;
      background: linear-gradient(90deg, var(--primary-light), var(--accent));
      transform: translateX(-50%);
      border-radius: 3px;
  }
  
  .footer-bottom {
      background-color: #1a1a1a;
      font-size: 0.9rem;
  }
  
  /* Footer Styles */
  .footer {
      background-color: var(--text-dark);
      color: var(--text-light);
  }
  
  .footer-bottom {
      background-color: #2a2a2a;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .footer-newsletter {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  .footer-newsletter h4 {
      font-weight: 500;
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
      letter-spacing: 0.8px;
  }
  
  .footer-newsletter p {
      font-size: 1rem;
      opacity: 0.9;
      font-weight: 300;
      letter-spacing: 0.3px;
  }
  
  .footer-subscribe-form .form-control {
      border-radius: 0;
      border: none;
      padding: 0.75rem 1.25rem;
  }
  
  .footer-subscribe-form .btn {
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  background-color: var(--text-dark);
  border-color: var(--text-dark);
  }
  
  .footer-subscribe-form .btn:hover {
  background-color: #000;
  border-color: #000;
  }
  
  .footer-logo {
  height: 40px;
  width: auto;
  }
  
  .footer-brand-name {
      font-family: var(--font-heading);
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-light);
      margin: 0;
      letter-spacing: 1px;
      text-transform: uppercase;
  }
  
  .footer-about p {
      opacity: 0.8;
      line-height: 1.7;
  }
  
  .footer-social {
      display: flex;
      gap: 1rem;
  }
  
  .footer-social .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--text-light);
      border-radius: 50%;
      transition: all 0.3s ease;
  }
  
  .footer-social .social-icon:hover {
      background-color: var(--primary);
      color: var(--text-light);
      transform: translateY(-3px);
  }
  
  .footer-title {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: relative;
      padding-bottom: 0.75rem;
  }
  
  .footer-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: var(--primary);
  }
  
  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .footer-links li {
      margin-bottom: 0.75rem;
  }
  
  .footer-links a {
      color: var(--text-light);
      opacity: 0.8;
      transition: all 0.3s ease;
      position: relative;
      padding-left: 0;
      display: inline-block;
      font-size: 0.95rem;
      letter-spacing: 0.3px;
      font-weight: 300;
  }
  
  .footer-links a:before {
      content: '›';
      position: absolute;
      left: -10px;
      top: 0;
      opacity: 0;
      transition: all 0.3s ease;
  }
  
  .footer-links a:hover {
      color: var(--primary-light);
      opacity: 1;
      padding-left: 10px;
  }
  
  .footer-links a:hover:before {
      opacity: 1;
      left: 0;
  }
  
  .footer-contact {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .footer-contact li {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1rem;
  }
  
  .footer-contact li i {
      color: var(--primary-light);
      margin-right: 1rem;
      margin-top: 0.25rem;
  }
  
  .footer-contact li span {
      opacity: 0.8;
      font-weight: 300;
      letter-spacing: 0.3px;
      font-size: 0.95rem;
  }
  
  .footer-bottom {
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 0.9rem;
  }
  
  .copyright {
      opacity: 0.8;
      font-weight: 300;
      letter-spacing: 0.4px;
      font-size: 0.9rem;
  }
  
  .payment-methods {
      display: flex;
      align-items: center;
      justify-content: flex-end;
  }
  
  .payment-methods span {
      margin-right: 1rem;
      opacity: 0.8;
  }
  
  .payment-methods img {
      height: 25px;
  }
  
  .developer-credit {
      font-size: 0.85rem;
      opacity: 0.8;
      margin-top: 0.5rem;
  }
  
  .developer-credit a {
      color: var(--text-light);
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.3s ease;
  }
  
  .developer-credit a:hover {
      opacity: 0.8;
      text-decoration: underline;
  }
  
  /* Navbar Actions Styles */
  .navbar-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
  }
  
  /* Estilos para el menú principal */
  .main-menu {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .main-menu .nav-item {
      position: relative;
      margin: 0 5px;
  }
  
  .main-menu .nav-link {
      font-size: 1rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 10px 15px;
      color: #333;
      position: relative;
      transition: all 0.3s ease;
  }
  
  .main-menu .nav-link:hover,
  .main-menu .nav-link.active {
      color: #c59d5f; /* Color dorado para hover y activo */
  }
  
  .main-menu .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: #c59d5f;
      transition: all 0.3s ease;
      transform: translateX(-50%);
  }
  
  .main-menu .nav-link:hover::after,
  .main-menu .nav-link.active::after {
      width: 70%;
  }
  
  .main-menu .dropdown-menu {
      border: none;
      border-radius: 0;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      padding: 10px 0;
      margin-top: 10px;
  }
  
  .main-menu .dropdown-item {
      font-size: 0.9rem;
      padding: 8px 20px;
      transition: all 0.2s ease;
  }
  
  .main-menu .dropdown-item:hover {
      background-color: #f8f9fa;
      color: #c59d5f;
      padding-left: 25px;
  }
  
  /* Estilos específicos para el menú móvil */
  @media (max-width: 991px) {
      .navbar {
          padding: 1.2rem 0;
      }
      
      .navbar-collapse.show {
          display: block !important;
          opacity: 1;
          visibility: visible;
          height: auto;
          padding: 2rem 0;
          transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 10px 40px rgba(196, 30, 58, 0.1);
          border-radius: 0;
          margin-top: 1rem;
          animation: slideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
          border-top: 2px solid rgba(196, 30, 58, 0.1);
      }
      
      @keyframes slideDown {
          from {
              opacity: 0;
              transform: translateY(-30px) scale(0.95);
          }
          to {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }
      
      .navbar-collapse {
          opacity: 0;
          visibility: hidden;
          height: 0;
          overflow: hidden;
          transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      
      .main-menu {
          flex-direction: column;
          align-items: stretch;
          padding: 0 1.5rem;
      }
      
      .main-menu .nav-item {
          width: 100%;
          margin: 0.5rem 0;
          border-bottom: 1px solid rgba(196, 30, 58, 0.1);
          border-radius: 0;
          transition: all 0.35s ease;
      }
      
      .main-menu .nav-item:hover {
          background: rgba(196, 30, 58, 0.03);
          border-bottom-color: var(--primary);
      }
      
      .main-menu .nav-link {
          padding: 1.2rem 0;
          font-size: 0.95rem;
          border-radius: 0;
          letter-spacing: 1px;
      }
      
      .main-menu .nav-link::before,
      .main-menu .nav-link::after {
          display: none;
      }
      
      .main-menu .nav-link:hover {
          transform: translateX(8px);
          letter-spacing: 1.5px;
      }
      
      .main-menu .dropdown-menu {
          box-shadow: none;
          border-left: 3px solid var(--primary);
          border-top: none;
          background: rgba(196, 30, 58, 0.02);
          margin: 0.5rem 0 0.5rem 1.5rem;
          border-radius: 0;
          animation: none;
          padding: 0.5rem 0;
      }
      
      .main-menu .dropdown-item {
          padding: 0.9rem 1.5rem;
          font-size: 0.85rem;
          letter-spacing: 0.8px;
      }
      
      .main-menu .dropdown-item::after {
          right: 1rem;
      }
      
      .navbar-actions {
          gap: 0.8rem;
      }
  }
  
  @media (max-width: 767px) {
      .navbar {
          padding: 1rem 0;
      }
      
      .logo {
          height: 50px;
      }
      
      .navbar-actions .btn-search,
      .navbar-actions .btn-cart,
      .navbar-actions .btn-user,
      .navbar-actions button,
      .navbar-actions a {
          width: 42px;
          height: 42px;
          font-size: 1.1rem;
          margin-left: 0.8rem;
      }
      
      .navbar-actions .btn-search:hover,
      .navbar-actions .btn-cart:hover,
      .navbar-actions .btn-user:hover,
      .navbar-actions button:hover,
      .navbar-actions a:hover {
          transform: translateY(-3px) rotate(3deg);
      }
      
      .main-menu {
          padding: 0 1rem;
      }
      
      .main-menu .nav-link {
          font-size: 0.88rem;
          padding: 1rem 0;
          letter-spacing: 0.6px;
      }
      
      .main-menu .dropdown-item {
          font-size: 0.82rem;
          padding: 0.8rem 1.2rem;
      }
  }
  
  @media (max-width: 575px) {
      .navbar {
          padding: 0.8rem 0;
      }
      
      .logo {
          height: 45px;
      }
      
      .navbar-collapse.show {
          padding: 1.5rem 0;
          margin-top: 0.8rem;
      }
      
      .main-menu {
          padding: 0 1rem;
      }
      
      .main-menu .nav-item {
          margin: 0.4rem 0;
      }
      
      .main-menu .nav-link {
          padding: 1rem 0;
          font-size: 0.85rem;
          letter-spacing: 0.5px;
      }
      
      .main-menu .nav-link:hover {
          transform: translateX(5px);
      }
      
      .main-menu .dropdown-menu {
          margin-left: 1rem;
      }
      
      .main-menu .dropdown-item {
          padding: 0.75rem 1rem;
          font-size: 0.8rem;
          letter-spacing: 0.4px;
      }
      
      .navbar-actions .btn-search,
      .navbar-actions .btn-cart,
      .navbar-actions .btn-user,
      .navbar-actions button,
      .navbar-actions a {
          width: 38px;
          height: 38px;
          font-size: 1rem;
          margin-left: 0.5rem;
      }
      
      .cart-count {
          min-width: 18px;
          height: 18px;
          font-size: 0.65rem;
      }
  }
  
  /* Search Bar Styles */
  .search-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0;
      color: var(--text-dark);
      display: block;
  }
  
  .trending-title {
      font-size: 1rem;
      font-weight: 600;
      margin: 0 0 0.75rem 0;
      color: var(--text-dark);
      display: block;
  }
  
  .search-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.98);
      z-index: 1050;
      padding-top: 2rem;
      transform: translateY(-100%);
      transition: transform 0.4s ease;
      overflow-y: auto;
  }
  
  .search-bar.active {
      transform: translateY(0);
  }
  
  .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
  }
  
  .btn-close-search {
      background: transparent;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text-dark);
      padding: 0.5rem;
  }
  
  .search-input-wrapper {
      position: relative;
      margin-bottom: 1rem;
  }
  
  .search-icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
  }
  
  .search-input-wrapper input {
      width: 100%;
      padding: 1rem 3rem;
      border: 1px solid var(--border-color);
      border-radius: 30px;
      font-size: 1rem;
      transition: border-color 0.3s ease;
  }
  
  .search-input-wrapper input:focus {
      outline: none;
      border-color: var(--primary);
  }
  
  .btn-clear-search {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1.2rem;
      display: none;
  }
  
  .search-submit {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 30px;
      padding: 0.75rem 2rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }
  
  .search-submit:hover {
      background-color: var(--primary-dark);
  }
  
  .search-trending {
      margin-top: 2rem;
  }
  
  .trending-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
  }
  
  .trending-tags a {
      display: inline-block;
      padding: 0.5rem 1rem;
      background-color: var(--bg-light);
      border-radius: 20px;
      color: var(--text-dark);
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.3s ease;
  }
  
  .trending-tags a:hover {
      background-color: var(--primary-light);
      color: var(--primary-dark);
  }
  
  @media (max-width: 767px) {
      .search-title {
          font-size: 1.1rem;
      }
      
      .search-input-wrapper input {
          padding: 0.75rem 2.5rem;
          font-size: 0.9rem;
      }
      
      .search-submit {
          padding: 0.6rem 1.5rem;
          font-size: 0.9rem;
      }
      
      .trending-tags a {
          padding: 0.4rem 0.8rem;
          font-size: 0.8rem;
      }
  }
  
  /* Offers Section Styles */
  .offers-section {
      background-color: var(--accent);
      padding: 4rem 0;
  }
  
  .offer-banner {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      position: relative;
  }
  
  .offer-content {
      padding: 2.5rem;
  }
  
  .offer-badge {
      display: inline-block;
      background: linear-gradient(45deg, var(--primary), var(--primary-dark));
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 25px;
      font-weight: 700;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 1.5rem;
      box-shadow: 0 5px 15px rgba(123, 30, 43, 0.3);
  }
  
  .offer-content h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--primary);
  }
  
  .offer-content h3 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: var(--primary);
  }
  
  .offer-content p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      color: var(--text-muted);
  }
  
  .offer-image {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .offer-image img {
      max-height: 400px;
      object-fit: cover;
  }
  
  /* Back to Top Button */
  .back-to-top {
      position: fixed;
      bottom: 90px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px;
      height: 55px;
      background-color: var(--primary);
      color: var(--text-light);
      border-radius: 50%;
      opacity: 0;
      visibility: hidden;
      z-index: 998;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      font-size: 1.4rem;
      text-decoration: none;
  }

  .back-to-top.show {
      opacity: 1;
      visibility: visible;
  }
  
  .back-to-top:hover {
      background-color: var(--primary-dark);
      color: var(--text-light);
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }
  
  /* WhatsApp Button */
  .whatsapp-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px;
      height: 55px;
      background-color: #25D366;
      color: #ffffff;
      border-radius: 50%;
      z-index: 999;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      font-size: 1.5rem;
      text-decoration: none;
  }
  
  .whatsapp-btn:hover {
      background-color: #20ba5a;
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 767.98px) {
    .back-to-top {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        right: 15px;
        bottom: 85px;
    }
    
    .whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        bottom: 20px;
        right: 15px;
    }
  }
  
  @media (max-width: 575.98px) {
    .back-to-top {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        right: 12px;
        bottom: 80px;
    }
    
    .whatsapp-btn {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        bottom: 18px;
        right: 12px;
    }
  }
  
  /* Responsive Footer Styles */
  @media (max-width: 991.98px) {
      .footer-newsletter {
          text-align: center;
      }
      
      .footer-subscribe-form {
          margin-top: 1rem;
      }
  }
  
  @media (max-width: 767.98px) {
      .footer-bottom {
          text-align: center;
      }
      
      .payment-methods {
          justify-content: center;
          margin-top: 1rem;
      }
  }
  
  /* Cart Sidebar */
  .cart-sidebar {
      position: fixed;
      top: 0;
      right: -400px;
      width: 350px;
      height: 100%;
      background-color: var(--text-light);
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
      z-index: 1200;
      transition: right 0.4s ease;
      overflow-y: auto;
  }
  
  .cart-sidebar.active {
      right: 0;
  }
  
  .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      border-bottom: 1px solid var(--border-color);
  }
  
  .cart-header h5 {
      margin-bottom: 0;
  }
  
  .btn-close-cart {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
  }
  
  .cart-body {
      padding: 1.5rem;
  }
  
  .cart-empty {
      text-align: center;
      padding: 2rem 0;
  }
  
  .cart-empty i {
      font-size: 3rem;
      color: #ccc;
      margin-bottom: 1rem;
  }
  
  .cart-empty p {
      color: #666;
      margin-bottom: 1.5rem;
  }
  
  /* Responsive Styles */
  @media (max-width: 991.98px) {
      .hero-slide {
          height: 550px;
      }
      
      .hero-title {
          font-size: 2.8rem;
      }
      
      .offer-banner {
          padding: 2rem;
      }
      
      .offer-content h2 {
          font-size: 2rem;
      }
      
      .offer-content h3 {
          font-size: 1.5rem;
      }
      
      .newsletter-wrapper {
          padding: 2rem;
      }
  }
  
  @media (max-width: 767.98px) {
      .hero-slide {
          height: 500px;
      }
      
      .hero-title {
          font-size: 2.2rem;
      }
      
      .hero-subtitle {
          font-size: 1.1rem;
          margin-bottom: 1.5rem;
      }
      
      .carousel-indicators {
          margin-bottom: 1rem;
      }
      
      .carousel-indicators [data-bs-target] {
          width: 10px;
          height: 10px;
          margin: 0 4px;
      }
      
      .section-header h2 {
          font-size: 1.75rem;
      }
      
      .offer-content h2 {
          font-size: 1.75rem;
      }
      
      .offer-content h3 {
          font-size: 1.25rem;
      }
      
      .newsletter-wrapper {
          text-align: center;
      }
      
      .newsletter-form {
          margin-top: 1.5rem;
      }
  }
  
  @media (max-width: 575.98px) {
      .hero-slide {
          height: 450px;
      }
      
      .hero-title {
          font-size: 1.8rem;
      }
      
      .hero-subtitle {
          font-size: 1rem;
      }
      
      .hero-actions {
          flex-direction: column;
          gap: 0.75rem;
          width: 100%;
      }
      
      .hero-actions .btn {
          width: 100%;
      }
      
      .cart-sidebar {
          width: 300px;
      }
      
      /* Estilos para productos en vista móvil (2 columnas) */
      /* Note: Mobile product-card styles are already defined in the Category Mobile section */
      
      .product-info {
          padding: 0.75rem;
      }
      
      .product-title {
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
      }
      
      .product-price {
          font-size: 0.9rem;
      }
      
      .product-price .original-price {
          font-size: 0.8rem;
      }
      
      .product-rating {
          font-size: 0.7rem;
      }
      
      .product-badge {
          font-size: 0.7rem;
          padding: 0.15rem 0.5rem;
      }
      
      .btn-add-cart {
          font-size: 0.8rem;
          padding: 0.3rem 0.5rem;
      }
      
      .product-actions {
          gap: 5px;
      }
      
      .btn-wishlist,
      .btn-quickview {
          width: 30px;
          height: 30px;
          font-size: 0.8rem;
      }
      
      /* Estilos para tarjetas de categoría en vista móvil */
      .category-card h3 {
          font-size: 1rem;
      }
      
      .category-card .btn {
          font-size: 0.8rem;
          padding: 0.3rem 0.75rem;
      }
      
      /* Estilos para el footer en vista móvil */
      .footer-about, 
      .footer-title, 
      .footer-links, 
      .footer-contact,
      .copyright,
      .payment-methods {
          text-align: center;
      }
      
      .footer-social {
          justify-content: center;
          margin-bottom: 1.5rem;
      }
      
      .footer-brand-name {
          font-size: 1.6rem;
          margin-bottom: 0.75rem;
      }
      
      .footer-about p {
          font-size: 0.9rem;
          margin-bottom: 1rem;
      }
      
      .footer-title {
          font-size: 1.1rem;
          margin-bottom: 0.75rem;
      }
      
      .footer-title:after {
          left: 50%;
          transform: translateX(-50%);
      }
      
      .footer-links li {
          margin-bottom: 0.4rem;
      }
      
      .footer-links a {
          font-size: 0.9rem;
      }
      
      .footer-contact li {
          font-size: 0.9rem;
          margin-bottom: 0.5rem;
          justify-content: center;
      }
      
      .footer-contact i {
          width: 20px;
      }
      
      .footer-bottom .col-md-6 {
          margin-bottom: 0.5rem;
      }
      
      .copyright {
          font-size: 0.8rem;
          margin-bottom: 0.5rem;
      }
      
      .payment-methods {
          font-size: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      .payment-methods span {
          margin-right: 0.5rem;
      }
      
      .payment-methods img {
          height: 24px;
      }
      
      /* Sección de Ofertas */
      .seccion-ofertas {
          background-color: var(--neutral-bg);
      }
      
      .oferta-banner {
          background-color: var(--text-light);
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
          margin-bottom: 30px;
      }
      
      .oferta-contenido {
          padding: 30px;
      }
      
      .oferta-etiqueta {
          display: inline-block;
          background-color: var(--primary);
          color: var(--text-light);
          padding: 5px 15px;
          border-radius: 20px;
          font-size: 0.9rem;
          font-weight: 600;
          margin-bottom: 15px;
      }
      
      .oferta-contenido h3 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 15px;
          color: var(--text-dark);
      }
      
      .oferta-descripcion {
          font-size: 1.1rem;
          margin-bottom: 20px;
          color: #666;
      }
      
      .oferta-tiempo {
          display: flex;
          gap: 15px;
          margin-bottom: 20px;
      }
      
      .tiempo-item {
          background: linear-gradient(45deg, var(--primary), var(--primary-dark));
          color: var(--text-light);
          border-radius: 8px;
          padding: 10px 15px;
          text-align: center;
          min-width: 70px;
      }
      
      .tiempo-numero {
          display: block;
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 1;
      }
      
      .tiempo-texto {
          display: block;
          font-size: 0.8rem;
          text-transform: uppercase;
          margin-top: 5px;
      }
      
      .oferta-imagen {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }
      
      .oferta-imagen img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      /* Tarjetas de Ofertas */
      .oferta-card {
          background-color: var(--text-light);
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
          height: 100%;
          position: relative;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      
      .oferta-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
      }
      
      .oferta-card-badge {
          position: absolute;
          top: 15px;
          right: 15px;
          background: var(--primary);
          color: var(--text-light);
          padding: 5px 12px;
          border-radius: 20px;
          font-weight: 700;
          font-size: 0.9rem;
          z-index: 2;
      }
      
      .oferta-card-imagen {
          height: 200px;
          overflow: hidden;
      }
      
      .oferta-card-imagen img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
      }
      
      .oferta-card:hover .oferta-card-imagen img {
          transform: scale(1.05);
      }
      
      .oferta-card-contenido {
          padding: 20px;
      }
      
      .oferta-card-contenido h4 {
          font-weight: 700;
          margin-bottom: 10px;
      }
      
      .oferta-card-contenido p {
          color: #666;
          margin-bottom: 15px;
      }
      
      @media (max-width: 991.98px) {
          .oferta-contenido {
              padding: 20px;
          }
          
          .oferta-contenido h3 {
              font-size: 2rem;
          }
          
          .tiempo-item {
              min-width: 60px;
              padding: 8px 12px;
          }
          
          .tiempo-numero {
              font-size: 1.5rem;
          }
      }
      
      @media (max-width: 767.98px) {
          .oferta-imagen {
              max-height: 300px;
          }
          
          .oferta-card-imagen {
              height: 180px;
          }
      }
      
      /* Estilos para la información de tienda en página de contacto */
      .h4-style {
          font-size: 8px;
          margin-bottom: 0.5rem;
          font-weight: 500;
          line-height: 1.2;
      }
  
      .store-card-header h2 {
          margin-top: 0;
      }
      
      .store-info-list {
          margin-left: 15px;
      }
      
      .store-info-list div {
          display: flex;
          align-items: flex-start;
          margin-bottom: 10px;
      }
      
      .store-info-list span {
          line-height: 1.5;
      }
      
      .store-info-list i {
          margin-right: 10px;
          color: var(--primary);
          min-width: 16px;
      }
  }
  
  /* Estilos para etiquetas de stock */
  .product-status-container {
      z-index: 10;
  }
  
  .product-badge {
      padding: 8px 15px;
      border-radius: 4px;
      font-weight: 600;
      display: inline-block;
      font-size: 0.9rem;
      margin-bottom: 10px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
      width: auto;
      min-width: 100px;
  }
  
  .in-stock {
      background-color: #28a745;
      color: white;
  }
  
  .out-of-stock {
      background-color: #dc3545;
      color: white;
  }
  
  /* Estilos para el indicador de stock simple */
  .simple-stock-indicator {
      font-size: 0.95rem;
      color: #555;
  }
  
  .simple-stock-indicator i {
      font-size: 0.8rem;
      margin-right: 5px;
  }
  
  /* Estilos para el botón de agregar al carrito */
  .btn-add-to-cart {
      padding: 12px 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      background-color: var(--primary);
      border-color: var(--primary);
  }
  
  .btn-add-to-cart:hover {
      background-color: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  @media (max-width: 768px) {
      .product-status-container {
          padding-top: 0;
          margin-top: 10px;
      }
  }
  
  /* Estilos para título mejorado */
  .enhanced-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 1.2rem;
      line-height: 1.1;
      letter-spacing: -0.5px;
  }
  
  .title-highlight {
      color: var(--primary);
      background: linear-gradient(45deg, var(--primary), var(--primary-light));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
  }
  
  .product-brand {
      font-size: 1.1rem;
      color: var(--accent);
      letter-spacing: 2px;
      display: inline-block;
      margin-bottom: 0.5rem;
  }
  
  /* Estilo global para asegurar que todos los botones Ver ficha tengan la misma altura */
  .btn-add-cart,
  .btn-view-details {
      height: 2.5rem !important;
      min-height: 2.5rem !important;
      max-height: 2.5rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin-top: auto !important;
      margin-bottom: 0.5rem !important;
  }