/* A link color change */

.product-detail-item a.doclink {
  color: #69c3ff;
}

/* custom css */

.gridlove-content.gridlove-page-layout-4 .entry-title {
  display: none;
}

.woocommerce h1.page-title {
  display: none;
}

.orderby {
  color: #ffffff;
  background-color: #0099ff;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: #0099ff;
  color: #ffffff;
}

/* --- Responsive Table Styles - Advanced Mobile Strategy --- */

/* Outer wrapper to handle overflow and horizontal padding */

.responsive-table-wrapper {
  overflow-x: auto;
  /* Adds horizontal scroll for very narrow screens if content can't fit */
  -webkit-overflow-scrolling: touch;
  /* Improves scrolling on iOS */
  width: 100%;
  /* Ensure the wrapper takes full width */
  margin: 0 auto;
  /* Center the wrapper */
  padding: 0;
  /* No default padding on desktop */
  box-sizing: border-box;
  text-align: center;
  /* Center the overall table/cards horizontally */
}

/* Base table styling (desktop first) */

.responsive-table-wrapper table {
  width: 100% !important;
  /* Force table to fill container */
  border-collapse: collapse;
  /* Cleaner borders */
  border: none !important;
  /* No outer table border, cells handle borders */
  table-layout: fixed !important;
  /* Critical for predictable column widths on desktop */
  height: auto !important;
  /* Remove fixed height */
  margin: 0 !important;
  /* Remove unwanted margins */
  padding: 0 !important;
  /* Remove unwanted padding */
  background-color: #1e1c29 !important;
  /* background */
}

/* Styling for all table cells (td) on desktop */

.responsive-table-wrapper td {
  border: 1px solid #ccc !important;
  /* Desktop cell borders */
  padding: 10px !important;
  /* Consistent padding inside cells */
  vertical-align: top !important;
  /* Align content to the top */
  text-align: center !important;
  /* Center align text */
  box-sizing: border-box !important;
  /* Include padding/border in width */
  height: auto !important;
  /* Remove fixed height */
  /* Text wrapping to prevent bleeding */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Image header row styling */

.responsive-table-wrapper table tr:first-child td {
  border: 1px solid #ccc !important;
  /* Keep border on the header image cell */
  padding: 15px !important;
}

.responsive-table-wrapper table tr:first-child td img {
  max-width: 100% !important;
  /* Image scales down to fit cell */
  height: auto !important;
  /* Maintain aspect ratio */
  display: block;
  /* Remove extra space below image */
  margin: 0 auto;
  /* Center the image */
}

/* Column widths for the data rows on desktop (4 columns) */

.responsive-table-wrapper table tr:nth-child(n+2) td {
  width: 25% !important;
}

/* Styling for the new inner div: .contact-info-card */

.responsive-table-wrapper .contact-info-card {
  width: 100%;
  /* Take full width of parent td */
  height: 100%;
  /* Take full height of parent td */
  box-sizing: border-box;
  /* Optional: min-height for consistent card height on desktop if content varies greatly */
  /* min-height: 120px; */
  display: flex;
  /* Use flex to center content vertically in TD */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* General text styling within cards */

.responsive-table-wrapper .contact-info-card span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: medium !important;
  color: #ffffff;
  /* Default text color */
  display: block;
  /* Each line breaks */
  line-height: 1.4em;
  /* Improve spacing */
}

/* Specific title styling */

.responsive-table-wrapper .contact-info-card strong em span {
  margin-bottom: 5px;
  /* Space below title */
}

/* Link styling */

.responsive-table-wrapper .contact-info-card a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* --- Media Queries for Responsive Layout --- */

/* For screens up to 768px wide (typical tablets, larger phones) */

@media (max-width: 768px) {
  /* Adjust table cells to be 2 columns */

  .responsive-table-wrapper table tr:nth-child(n+2) td {
    width: 50% !important;
    float: left !important;
    /* Use float for reliable 2-column layout */
    margin-bottom: 0 !important;
    /* Remove previous margins */
    border: none !important;
    /* TD borders are handled by .contact-info-card now */
    padding: 0 !important;
    /* Padding handled by .contact-info-card */
  }

  /* Ensure .contact-info-card handles the visual card styling */

  .responsive-table-wrapper .contact-info-card {
    margin: 0 auto 15px auto !important;
    /* Margin around each card */
    padding: 15px !important;
    /* Internal padding for card */
    border: 1px solid #555 !important;
    /* Card border */
    border-radius: 5px !important;
    /* Rounded corners */
    background-color: #111 !important;
    /* Card background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    /* Card shadow */
    min-height: auto !important;
    /* Reset min-height for mobile */
  }

  /* Clear floats after every two cards to keep rows clean */

  .responsive-table-wrapper table tr:nth-child(n+2) td:nth-child(odd) {
    clear: left !important;
  }

  /* Ensure rows contain their floated children */

  .responsive-table-wrapper table tr:nth-child(n+2) {
    display: block !important;
    /* TR acts as a block to contain floats */
    width: 100% !important;
    /* Full width for the TR block */
    float: none !important;
    /* Ensure TR doesn't float itself */
    clear: both !important;
    /* Clear previous floats for TR */
    margin-bottom: 15px !important;
    /* Space between logical rows */
  }

  /* Remove bottom margin from the very last card/tr */

  .responsive-table-wrapper table tr:last-child {
    margin-bottom: 0 !important;
  }
}

/* For screens up to 480px wide (typical mobile phones) */

@media (max-width: 480px) {
  .responsive-table-wrapper {
    padding: 0 !important;
    /* Add horizontal padding to the wrapper */
  }

  .responsive-table-wrapper table {
    width: 100% !important;
    /* Ensure table is full width */
    margin: 0 !important;
    padding: 0 10px !important;
  }

  .responsive-table-wrapper table tr:first-child td {
    border: none !important;
    /* Remove border from image header cell on smallest screens */
    padding: 10px 10px !important;
    /* Adjust padding for header image */
  }

  /* Force all table elements to block display for full stacking */

  .responsive-table-wrapper table,
  .responsive-table-wrapper tbody,
  .responsive-table-wrapper tr,
  .responsive-table-wrapper td {
    display: block !important;
    /* Make all table elements stack vertically */
    width: 100% !important;
    /* Force them to take full width */
    margin: 0 !important;
    /* Remove any margins */
    padding: 0 !important;
    /* Remove any padding */
    border: none !important;
    /* Remove all borders on these elements */
    float: none !important;
    /* Ensure no floats interfere */
    clear: both !important;
    /* Clear any lingering floats */
    box-sizing: border-box !important;
    text-align: center !important;
    /* Center align all text as a fallback */
  }

  /* Styles for the .contact-info-card div - now the primary visible element */

  .responsive-table-wrapper .contact-info-card {
    display: flex !important;
    /* Use flexbox for robust content centering */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: calc(100% - 10px) !important;
    /* Account for 15px wrapper padding on each side */
    /* OR simpler: width: 100% !important; margin: 0 auto; */
    margin: 10px 10px !important;
    /* Margin between cards, centered */
    padding: 10px 155px !important;
    /* Internal padding for card */
    border: 1px solid #555 !important;
    /* Border around the card */
    border-radius: 5px !important;
    /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    /* Subtle shadow */
    min-height: auto !important;
    /* Ensure height adjusts to content */
    height: auto !important;
    /* Ensure height adjusts to content */
    box-sizing: border-box !important;
    /* Crucial: Include padding/border in width */
  }

  /* Remove extra bottom margin from the last card */

  .responsive-table-wrapper .contact-info-card:last-child {
    margin-bottom: 0 !important;
  }

  /* Specific vertical spacing between text lines within a stacked entry */

  .responsive-table-wrapper .contact-info-card span {
    margin-bottom: 5px !important;
  }

  .responsive-table-wrapper .contact-info-card span:last-child {
    margin-bottom: 0 !important;
  }

  /* Remove specific margin from last TR */

  .responsive-table-wrapper table tr:last-child {
    margin-bottom: 0 !important;
  }
}