/**
 * TDA Luxury Shop & Product Listing Styles
 * Extracted from woocommerce/archive-product.php
 */

/* ==========================================================================
     FULL-WIDTH ASTRA OVERRIDES (FORCE FULL SCREEN WIDTH WITHOUT SQUEEZING)
     ========================================================================== */
  .woocommerce.archive .site-content,
  .woocommerce.archive .site-content > .ast-container,
  .woocommerce.archive .ast-container,
  .post-type-archive-product .site-content,
  .post-type-archive-product .site-content > .ast-container,
  .post-type-archive-product .ast-container,
  .tax-product_cat .site-content,
  .tax-product_cat .site-content > .ast-container,
  .tax-product_cat .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .woocommerce.archive #primary,
  .post-type-archive-product #primary,
  .tax-product_cat #primary {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .woocommerce.archive #main,
  .post-type-archive-product #main,
  .tax-product_cat #main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Prevent WooCommerce default BlockUI from blinding/blanking the screen */
  .blockUI.blockOverlay {
    display: none !important;
  }

  /* ==========================================================================
     TDA WELLNESS - D2C LUXURY SHOP STYLES
     ========================================================================== */
  .tda-shop-wrapper {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: 
      radial-gradient(ellipse 950px 650px at 12% 18%, rgba(212, 165, 116, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 900px 600px at 88% 28%, rgba(16, 185, 129, 0.14) 0%, transparent 60%),
      radial-gradient(ellipse 1000px 700px at 50% 68%, rgba(212, 165, 116, 0.14) 0%, transparent 70%),
      radial-gradient(ellipse 850px 550px at 15% 92%, rgba(16, 185, 129, 0.12) 0%, transparent 65%),
      linear-gradient(180deg, #FAF8F5 0%, #F3F8F4 45%, #FBF6EF 100%) !important;
    color: #11281E !important;
    min-height: 85vh !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
  }

  /* ===== HERO BANNER ===== */
  .tda-shop-hero {
    background: linear-gradient(135deg, #0F251B 0%, #163828 50%, #1A4331 100%) !important;
    color: #FFFFFF !important;
    padding: 38px 24px 85px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(212, 165, 116, 0.35) !important;
    width: 100% !important;
  }
  .tda-shop-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 80% 20%, rgba(212, 165, 116, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(16, 150, 72, 0.22) 0%, transparent 50%) !important;
    pointer-events: none !important;
  }
  .tda-shop-hero-inner {
    max-width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .tda-shop-breadcrumbs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #A3BFB0 !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.3px !important;
  }
  .tda-shop-breadcrumbs a {
    color: #D4A574 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
  .tda-shop-breadcrumbs a:hover {
    color: #FFFFFF !important;
  }
  .tda-shop-hero-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
  }
  .tda-shop-hero-desc {
    font-size: 14px !important;
    color: #D1E2D9 !important;
    line-height: 1.5 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
  }

  /* ===== FULL-WIDTH CONTAINER (ELEVATED TO RED LINE: -78px) ===== */
  .tda-shop-container {
    max-width: 1420px !important;
    width: 100% !important;
    margin: -78px auto 0 !important;
    padding: 0 28px !important;
    position: relative !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  /* ===== CONTROLS & FILTER BAR (GLASS-GOLD LUXURY) ===== */
  .tda-shop-controls {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212, 165, 116, 0.35) !important;
    padding: 12px 18px !important;
    box-shadow: 0 10px 30px rgba(212, 165, 116, 0.12), 0 2px 8px rgba(17, 40, 30, 0.03) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 25px !important;
  }
  .tda-cat-pills-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .tda-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4A5568 !important;
    background: #FAF8F5 !important;
    border: 1px solid #E2DCD2 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
  }
  .tda-cat-pill:hover,
  .tda-cat-pill.active {
    background: #11281E !important;
    color: #FFFFFF !important;
    border-color: #11281E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(17, 40, 30, 0.15) !important;
  }
  
  /* Sorting Dropdown */
  .tda-shop-sorting-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .tda-shop-sorting-wrap form.woocommerce-ordering {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .tda-shop-sorting-wrap select.orderby {
    background: #FAF8F5 !important;
    border: 1px solid #E2DCD2 !important;
    border-radius: 99px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #11281E !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    height: auto !important;
  }
  .tda-shop-sorting-wrap select.orderby:focus {
    border-color: #109648 !important;
  }

  /* ===== PRODUCT GRID (4 COLUMNS FULL WIDTH) ===== */
  .tda-shop-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Register property for card animated border angle */
  @property --card-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @keyframes tdaCardBorderBeam {
    0% {
      --card-border-angle: 0deg;
    }
    100% {
      --card-border-angle: 360deg;
    }
  }

  /* ===== PRODUCT CARD (PREMIUM CLEAN LUXURY) ===== */
  .tda-product-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF7 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212, 165, 116, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.35s ease, 
                background 0.4s ease !important;
    box-shadow: 0 4px 18px rgba(212, 165, 116, 0.1), 0 2px 6px rgba(17, 40, 30, 0.02) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Animated Traveling Gradient Border Beam on Hover (Rich Gold + Emerald Shimmer) */
  .tda-product-card::before {
    content: '' !important;
    position: absolute !important;
    inset: -1.5px !important;
    border-radius: 17.5px !important;
    padding: 1.5px !important;
    background: conic-gradient(
      from var(--card-border-angle, 0deg),
      transparent 0%,
      transparent 58%,
      rgba(212, 165, 116, 0.35) 68%,
      #D4A574 76%,
      #F59E0B 82%,
      #10B981 88%,
      #34D399 93%,
      #D4A574 97%,
      transparent 100%
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 22 !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    animation: tdaCardBorderBeam 4s linear infinite !important;
  }

  /* Soft Premium Green + Warm Gold Gradient Background INSIDE Entire Card on Hover (Ratinia Luxury Aura) */
  .tda-product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(212, 165, 116, 0.65) !important;
    background: linear-gradient(160deg, #FFFFFF 0%, #F1F8F4 45%, #FAF4E6 100%) !important;
    box-shadow: 0 20px 48px rgba(212, 165, 116, 0.28), 
                0 0 36px rgba(212, 165, 116, 0.24), 
                0 0 20px rgba(16, 185, 129, 0.16) !important;
  }
  .tda-product-card:hover::before {
    opacity: 1 !important;
  }

  /* Card Image Media Area with Subtle Radial Glow on Hover */
  .tda-card-media-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.08 !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(236, 231, 223, 0.7) !important;
    transition: background 0.4s ease !important;
  }
  .tda-product-card:hover .tda-card-media-wrap {
    background: radial-gradient(circle at 50% 50%, #FFFFFF 25%, #F2F8F4 60%, #FAF4E8 100%) !important;
  }
  .tda-card-media-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  /* Soft Ambient Radial Light on Hover (Product remains bright and prominent) */
  .tda-card-media-wrap::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 30%, rgba(16, 185, 129, 0.05) 70%, rgba(212, 165, 116, 0.07) 100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    z-index: 12 !important;
    pointer-events: none !important;
  }
  .tda-product-card:hover .tda-card-media-wrap::after {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .tda-card-img-primary,
  .tda-card-img-secondary {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
  }
  .tda-card-img-primary {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 1 !important;
  }
  .tda-card-img-secondary {
    opacity: 0 !important;
    transform: scale(1.06) !important;
    z-index: 2 !important;
  }

  /* Hover Gallery Cross-fade */
  .tda-product-card:hover .tda-card-img-primary {
    transform: scale(1.05) !important;
  }
  .tda-product-card.has-secondary:hover .tda-card-img-primary {
    opacity: 0 !important;
  }
  .tda-product-card.has-secondary:hover .tda-card-img-secondary {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* Single Clean Discount Badge (Top-Left Only) */
  .tda-card-badge-left {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 15 !important;
  }
  .tda-badge-sale-pill {
    background: #E63946 !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(230, 57, 70, 0.25) !important;
    display: inline-block !important;
  }

  /* Exact Centered Quick Actions Bar on Hover */
  .tda-card-quick-actions {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 25 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .tda-product-card:hover .tda-card-quick-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
  }
  .tda-quick-btn,
  button.tda-quick-btn,
  a.tda-quick-btn {
    all: unset !important;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  .tda-quick-btn i,
  button.tda-quick-btn i,
  a.tda-quick-btn i {
    font-size: 18px !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    height: 18px !important;
    width: 18px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    transform: none !important;
  }
  .tda-quick-btn i::before,
  button.tda-quick-btn i::before,
  a.tda-quick-btn i::before {
    display: block !important;
    line-height: 1 !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .tda-quick-btn:hover,
  button.tda-quick-btn:hover,
  a.tda-quick-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.42), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  }
  .tda-quick-btn:active,
  button.tda-quick-btn:active,
  a.tda-quick-btn:active {
    transform: translateY(0) scale(0.95) !important;
  }

  /* Card Body */
  .tda-card-body {
    padding: 16px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }

  /* Product Title */
  .tda-card-title {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #11281E !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 42px !important;
  }
  .tda-card-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
  .tda-card-title a:hover {
    color: #109648 !important;
  }

  /* Excerpt */
  .tda-card-subtitle {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Rating Row */
  .tda-card-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 11.5px !important;
    color: #F59E0B !important;
    margin-bottom: 10px !important;
  }
  .tda-card-rating-row span {
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    margin-left: 4px !important;
  }

  /* Price Row */
  .tda-card-price-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    margin-top: auto !important;
  }
  .tda-card-price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #11281E !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
  }
  .tda-card-price del {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
  }
  .tda-card-price ins {
    text-decoration: none !important;
    color: #109648 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
  }
  .tda-card-save-badge {
    background: #DCFCE7 !important;
    color: #15803D !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
  }

  /* Full-Width ADD TO CART Button */
  .tda-card-btn-wrap {
    width: 100% !important;
    margin-top: 2px !important;
  }
  .tda-shop-add-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #109648 !important;
    background-color: #109648 !important;
    color: #FFFFFF !important;
    border: 1px solid #0D7E3C !important;
    padding: 11px 16px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(16, 150, 72, 0.2) !important;
    box-sizing: border-box !important;
  }
  .tda-shop-add-btn:hover {
    background: #0D7E3C !important;
    background-color: #0D7E3C !important;
    color: #FFFFFF !important;
    border-color: #0D7E3C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 150, 72, 0.35) !important;
  }
  .tda-shop-add-btn.loading {
    opacity: 0.75 !important;
  }

  /* ===== TRUST BAR (GLASS-GOLD LUXURY) ===== */
  .tda-shop-trust-strip {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(212, 165, 116, 0.35) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    margin-top: 50px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    box-shadow: 0 10px 30px rgba(212, 165, 116, 0.12), 0 2px 8px rgba(17, 40, 30, 0.02) !important;
  }
  .tda-trust-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .tda-trust-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 10px !important;
    background: #EFF6F2 !important;
    color: #109648 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }
  .tda-trust-text h6 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #11281E !important;
    margin: 0 0 2px 0 !important;
  }
  .tda-trust-text p {
    font-size: 11.5px !important;
    color: #64748B !important;
    margin: 0 !important;
  }

  /* ===== RESPONSIVE BREAKPOINTS ===== */
  @media (max-width: 1200px) {
    .tda-shop-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
    .tda-shop-container { padding: 0 20px !important; }
  }
  @media (max-width: 860px) {
    .tda-shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .tda-shop-trust-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; padding: 18px !important; }
    .tda-shop-hero { padding: 32px 16px 65px !important; }
    .tda-shop-hero-title { font-size: 26px !important; }
    .tda-card-body { padding: 12px 14px 14px !important; }
    .tda-card-title { font-size: 14px !important; min-height: 38px !important; }
    .tda-shop-container { margin-top: -55px !important; }
  }
  @media (max-width: 540px) {
    .tda-shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .tda-shop-container { padding: 0 10px !important; margin-top: -45px !important; }
    .tda-shop-controls { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .tda-cat-pills-wrap { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }
    .tda-shop-trust-strip { grid-template-columns: 1fr !important; padding: 16px !important; }
    .tda-shop-add-btn { font-size: 11px !important; padding: 9px 10px !important; }
  }