/* Herlan Review Section styles */
.herlan-single-product-herlan-review-section {
  /* Make this section full-bleed (edge-to-edge) with white background */
  background: #ffffff;
  /* White background from edge to edge */
  position: relative;
  width: 100%;
  /* Use 100% instead of 100vw to prevent horizontal overflow */
  max-width: 100%;
  /* Ensure it doesn't exceed container width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 32px;
  /* Use Inter for all text in the review section */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  padding: 0;
  /* Add more bottom padding to extend white background down */
  z-index: 1;
  overflow-x: hidden;
  /* Prevent horizontal scroll */
  box-sizing: border-box;
}

/* Remove top margin and padding specifically when inside product div */
div[id^="product-"] > .herlan-single-product-herlan-review-section {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 32px;
}

/* Override parent .col-full styles to remove grey background and constraints */
.col-full:has(.herlan-single-product-herlan-review-section),
.col-full > .herlan-single-product-herlan-review-section {
  background: transparent !important;
/*  padding: 0 !important;
  margin: 0 !important; 
  max-width: 100vw !important;*/
}

/* Ensure the section wrapper spans full width regardless of parent container */
.herlan-single-product-herlan-review-section {
  box-sizing: border-box;
}

.herlan-single-product-herlan-review-section .container {
  background: transparent;
  /* Remove inner container background since section now has white bg */
  border-radius: 0;
  /* Remove rounded corners */
  padding: 2rem;
  max-width: 1200px;
  /* Constrain the container width */
  margin: 0 auto;
  /* Center the container */
}
.herlan-single-product-herlan-review-section .herlan-review-section-inner {
  /* constrain inner content so it doesn't stretch with the full-bleed background */
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  background: transparent;
}
/* Mobile padding for review section */
@media (max-width: 768px) {
  .herlan-single-product-herlan-review-section {
    /* Remove full-bleed effect on mobile - fit within parent container */
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    position: static;
    overflow-x: hidden;
    /* Ensure no horizontal overflow on mobile */
  }
  
  .herlan-single-product-herlan-review-section .container {
    /* Reduce container padding on mobile to prevent overflow */
    padding: 1rem 15px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .herlan-single-product-herlan-review-section .herlan-review-section-inner {
    padding: 0 15px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }
}
.herlan-single-product-herlan-review-section h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #222;
}
.herlan-single-product-herlan-review-section p {
  margin: 0;
  color: #000000;
  /* changed to black for auto-update test */
}
/* Tabs styles */
.herlan-tabs-wrapper {
  margin-bottom: 1rem;
}
.herlan-tabs {
  display: flex;
  width: 100%;
  align-items: center;
}
.herlan-tab-button {
  flex: 1 1 50%;
  width: 50%;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-bottom: 5px solid #DADADA;
  /* inactive line color */
  color: inherit;
}
.herlan-tab-button.herlan-tab-active {
  border-bottom-color: #222222;
  /* active line color */
}
.herlan-tab-panels {
  margin-top: 0.5rem;
}
.herlan-tab-panel {
  display: none;
}
.herlan-tab-panel.herlan-tab-panel--active {
  display: block;
}
.herlan-qa-placeholder p {
  margin: 0;
  color: #666;
}
/* small responsive tweak */
@media (max-width: 768px) {
  .herlan-single-product-herlan-review-section {
    padding: 1.25rem 0;
  }
}
/* Ratings distribution overrides - moved from main.css so this template can control layout */
/* Main row container: two sections side by side */
.herlan-rating-row {
  display: flex;
  gap: 12px;
  /* slightly reduced gap between left and right columns */
  align-items: stretch;
  margin-top: 4px;
  /* compacted vertical spacing */
  padding-top: 16px;
  /* reduced top padding to make row tighter */
}
/* LEFT CONTAINER: Average Rating - flexible width, center aligned */
.herlan-average-rating-container {
  flex: 1 1 auto;
  /* Takes remaining space */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  /* reduced from 150px to make the block more compact */
  padding: 4px 0;
  /* small vertical padding to keep content breathing */
}
.herlan-average-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* compact spacing between number, stars and count per request */
  text-align: center;
}
.herlan-rating-number {
  font-weight: 400;
  font-size: 28px;
  /* smaller number for a compact layout */
  line-height: 28px;
  color: #222;
}
.herlan-rating-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.herlan-rating-count {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2px;
  /* tighten spacing under stars */
}
/* RIGHT CONTAINER: Ratings Distribution - fixed width, right aligned */
.herlan-ratings-distribution-container {
  flex: 0 0 640px;
  /* Fixed 640px width */
  display: flex;
  justify-content: flex-end;
  /* Right align the card inside */
}
/* Card wrapper for ratings distribution */
.herlan-card {
  border: 1px solid #E9E9E9;
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
}
.herlan-ratings-card {
  width: 100%;
  max-width: 640px;
}
/* Ratings distribution styles */
.herlan-ratings-distribution {
  max-width: 100%;
  margin: 0;
}
.herlan-ratings-distribution__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  color: #666;
  text-transform: uppercase;
}
/* Specific override for the distribution title h3 inside the reviews display
   Use the requested typography: bold 700, 14px size, 18px line-height, and #666666 color */
#herlanReviewsDisplay > div.herlan-rating-row > div.herlan-ratings-distribution-container > div > div > h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
  margin: 0 0 8px;
  /* small bottom margin for spacing */
}
.herlan-ratings-distribution__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.herlan-ratings-distribution__label {
  width: 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
  color: #222;
}
.herlan-ratings-distribution__star-number {
  font-weight: 600;
}
.herlan-ratings-distribution__star-text {
  font-size: 0.875rem;
  color: #222;
}
/* Star bar: flexible but capped */
.herlan-ratings-distribution__bar {
  flex: 1 1 auto;
  max-width: 460px;
  background: #f0f0f0;
  height: 10px;
  border-radius: 8px;
  overflow: hidden;
}
.herlan-ratings-distribution__bar-fill {
  background: #222;
  height: 100%;
  width: 0%;
  transition: width 0.4s ease;
}
.herlan-ratings-distribution__count {
  width: 40px;
  text-align: right;
  font-size: 0.9rem;
  color: #666;
}
/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .herlan-rating-row {
    flex-direction: column;
    gap: 24px;
  }
  .herlan-average-rating-container {
    min-height: auto;
    padding: 0;
    /* compact on mobile per request */
  }
  .herlan-ratings-distribution-container {
    flex: 1 1 auto;
    justify-content: center;
  }
  .herlan-ratings-card {
    width: 100%;
    max-width: 100%;
  }
  .herlan-ratings-distribution__bar {
    max-width: 100%;
  }
}
/* Product Reviews List */
.herlan-product-reviews {
  margin-top: 32px;
}
.herlan-product-reviews__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 20px;
  color: #222;
  padding-bottom: 16px;
  border-bottom: 1px solid #C4C4C4;
}
/* Specific override for the product reviews H3 when rendered inside the herlan reviews display container
   Requested: font-weight 700, font-size 18px, line-height 18px, color #222222 */
#herlanReviewsDisplay > div.herlan-product-reviews > h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #222222;
  margin: 0 0 12px;
}
/* Mirror the reviews H3 typography for questions H3 inside the questions display */
#herlanQuestionsDisplay > div > h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #222222;
  margin: 0 0 12px;
}
.herlan-product-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Individual Review Item */
.herlan-review-item {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 16px;
  transition: opacity 0.3s ease, max-height 0.5s ease;
}
.herlan-review-item--hidden {
  display: none;
}
.herlan-review-item:last-child {
  border-bottom: none;
}
.herlan-review-item__header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.herlan-review-item__avatar {
  flex-shrink: 0;
}
.herlan-review-item__avatar img, .herlan-review-item__avatar .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.herlan-review-item__meta {
  flex: 1;
}
.herlan-review-item__stars-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.herlan-review-item__stars {
  display: flex;
  gap: 2px;
}
.herlan-review-star {
  width: 12px;
  height: 12px;
}
.herlan-review-item__date {
  font-size: 0.85rem;
  color: #666;
  font-weight: 400;
  margin-left: auto;
}
.herlan-review-item__author {
  /* Author name styling: stronger emphasis per design request */
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: #222;
  /* Ensure proper case for names (capitalize first letter of each word) */
  text-transform: capitalize;
}
.herlan-review-item__content {
  margin-bottom: 12px;
}
/* Review content paragraphs (apply to all review items) */
.herlan-review-item__content > p {
  color: #666666;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  /* keep readable line-height for 16px text */
}
/* First review item's H4/title styles (scoped per request) */
#herlanReviewsDisplay > div.herlan-product-reviews > div.herlan-product-reviews__list > div:nth-child(1) > div.herlan-review-item__content > h4 {
  color: #222222;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 8px;
}
.herlan-review-item__title {
  /* Review heading/title - apply consistent typography */
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 8px;
  color: #222222;
}
.herlan-review-item__text {
  /* Review comment text */
  font-size: 16px;
  line-height: 20px;
  color: #666666;
  font-weight: 400;
  margin: 0;
}
.herlan-review-item__media {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.herlan-review-item__media-item {
  width: 110px;
  height: 110px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.herlan-review-item__media-item:hover {
  transform: scale(1.05);
}
.herlan-review-item__media-item img, .herlan-review-item__media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.herlan-review-item__media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  pointer-events: none;
}
.herlan-product-reviews__footer {
  margin-top: 24px;
  text-align: center;
}
/* Underline the view more / footer button inside reviews display */
#herlanReviewsDisplay > div.herlan-product-reviews > div.herlan-product-reviews__footer > button, .herlan-product-reviews__footer > button, .herlan-view-more-btn {
  text-decoration: underline;
}
/* Load More button typography overrides (specific selector to ensure precedence) */
#herlanReviewsDisplay > div.herlan-product-reviews > div.herlan-product-reviews__footer > button {
  color: #222222 !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  text-decoration: underline;
}
#herlanReviewsDisplay > div.herlan-product-reviews > div.herlan-product-reviews__footer > button:hover {
  font-weight: 500 !important;
  /* keep color stable on hover */
  color: #222222 !important;
}
/* Make the Questions footer button match the Reviews footer button (underline + typography) */
#herlanQuestionsDisplay > div > div.herlan-product-questions__footer > button, .herlan-product-questions__footer > button {
  text-decoration: underline;
  color: #222222 !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}
#herlanQuestionsDisplay > div > div.herlan-product-questions__footer > button:hover, .herlan-product-questions__footer > button:hover {
  font-weight: 500 !important;
  color: #222222 !important;
}
.herlan-view-more-btn {
  background: transparent;
  border: 1px solid #222;
  padding: 10px 32px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #222;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.herlan-view-more-btn:hover {
  background: #222;
  color: #fff;
}
/* Responsive adjustments for reviews */
@media (max-width: 768px) {
  /* Mobile: make both 'load more' / footer buttons use 14px inside the reviews/questions displays */
  /* Ensure the question form lines up with the questions heading width on mobile
     Side padding removed per request (padding zero) */
  .herlan-product-reviews {
    margin-top: 24px;
  }
  .herlan-review-item__content {
    margin-bottom: 12px;
    display: block;
    visibility: visible;
    overflow: visible;
  }
  .herlan-review-item__content > p {
    color: #666666;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 8px 0;
    display: block;
    visibility: visible;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .herlan-review-item__media-item {
    /* Make images fit 4 per row on mobile: use calc to account for gaps between items (gap is 8px) */
    flex: 0 0 calc((100% - 3 * 8px) / 4);
    width: calc((100% - 3 * 8px) / 4);
    aspect-ratio: 1;
    /* keep images square dynamically */
    height: auto;
  }
  #herlanReviewsDisplay > div.herlan-product-reviews > div.herlan-product-reviews__footer > button, #herlanQuestionsDisplay > div > div.herlan-product-questions__footer > button {
    font-size: 14px !important;
  }
  #herlanQuestionForm {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    /* zero padding on mobile as well */
    margin: 0;
    max-width: none;
  }
}
/* Hide back-to-top button when PhotoSwipe is open */
body.pswp--open #back-to-top, body.pswp--open .back-to-top {
  display: none !important;
}
/* Hide the built-in reviews H2 when the theme's review sections are rendered via custom templates.
   This avoids editing other template files: we suppress the <h2> that some review templates output
   and allow our custom layout (herlan-* wrappers) to control headings instead. */
.herlan-single-product-review-section .woocommerce-tabs h2 {
  display: none;
}
/* Remove padding, border-radius, and border from the inner div of the herlan reviews tab
   so the custom review section can control spacing and visual chrome. The rule is specific
   to the tab content wrapper (#herlan-tab-reviews > div) and uses !important to override
   any existing theme rules. */
#herlan-tab-reviews > div {
  background: transparent !important;
}
/* Create Review Button */
.herlan-create-review-btn {
  display: block;
  margin: 0 auto 24px;
  padding: 10px 24px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.herlan-create-review-btn:hover {
  background-color: #333;
}
/* Create Review Form */
.herlan-create-review-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}
.herlan-create-review__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 24px 0;
  color: #222;
}
/* Verification Message */
.herlan-verification-message {
  padding: 16px;
  margin-bottom: 24px;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.herlan-verification-message.error {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}
.herlan-verification-message.success {
  background-color: #d1e7dd;
  border-color: #badbcc;
  color: #0f5132;
}
/* Verification Action Buttons */
.herlan-verification-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
.herlan-login-btn, .herlan-verification-cancel-btn {
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  display: inline-block;
  text-align: center;
}
.herlan-login-btn {
  background-color: #000;
  color: #fff;
}
.herlan-login-btn:hover {
  background-color: #333;
  color: #fff;
}
.herlan-verification-cancel-btn {
  background-color: #f5f5f5;
  color: #222;
  border: 1px solid #ddd;
}
.herlan-verification-cancel-btn:hover {
  background-color: #e5e5e5;
  border-color: #ccc;
}
.herlan-review-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.herlan-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.herlan-form-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #222;
}
.herlan-form-label .herlan-required {
  color: #e74c3c;
  margin-left: 2px;
}
/* Star Rating Input */
.herlan-star-rating {
  display: flex;
  gap: 8px;
}
.herlan-star-rating .herlan-star-input {
  cursor: pointer;
  transition: all 0.2s ease;
}
.herlan-star-rating .herlan-star-input:hover {
  transform: scale(1.1);
}
.herlan-star-rating .herlan-star-input.active path {
  fill: #222222;
}
/* Form Inputs */
.herlan-form-input, .herlan-form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.herlan-form-input:focus, .herlan-form-textarea:focus {
  outline: none;
  border-color: #222;
}
.herlan-form-textarea {
  resize: vertical;
  min-height: 120px;
}
/* Image Upload */
.herlan-image-upload-wrapper {
  margin-bottom: 12px;
}
.herlan-upload-btn {
  padding: 10px 24px;
  background-color: #fff;
  color: #222;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.herlan-upload-btn:hover {
  background-color: #f5f5f5;
  border-color: #222;
}
.herlan-image-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.herlan-image-preview {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.herlan-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.herlan-image-preview .herlan-remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.herlan-image-preview .herlan-remove-image:hover {
  background: rgba(0, 0, 0, 0.9);
}
/* Form Actions */
.herlan-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.herlan-submit-review-btn, .herlan-cancel-review-btn {
  padding: 12px 32px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.herlan-submit-review-btn {
  background-color: #000;
  color: #fff;
}
.herlan-submit-review-btn:hover {
  background-color: #333;
}
.herlan-cancel-review-btn {
  background-color: #f5f5f5;
  color: #222;
  border: 1px solid #ddd;
}
.herlan-cancel-review-btn:hover {
  background-color: #e0e0e0;
}
/* Mobile Responsive */
@media (max-width: 768px) {
  .herlan-create-review-form {
    padding: 16px;
  }
  .herlan-verification-actions {
    flex-direction: column;
  }
  .herlan-verification-actions .herlan-login-btn, .herlan-verification-actions .herlan-verification-cancel-btn {
    width: 100%;
  }
  .herlan-form-actions {
    flex-direction: column;
  }
  .herlan-form-actions .herlan-submit-review-btn, .herlan-form-actions .herlan-cancel-review-btn {
    width: 100%;
  }
  .herlan-star-rating {
    gap: 4px;
  }
  .herlan-star-rating .herlan-star-input {
    width: 28px;
    height: 28px;
  }
}
/* No ratings yet section */
.herlan-average-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* match compact spacing */
}
.herlan-no-ratings {
  font-size: 1rem;
  color: #666;
  text-align: center;
  padding: 20px;
  margin-bottom: 0;
}
/* ==========================================
   Q&A Section Styles
   ========================================== */
.herlan-qa-section-inner {
  max-width: 100%;
  margin: 0;
}
/* Ask Question Button */
.herlan-ask-question-btn {
  display: block;
  margin: 24px auto;
  padding: 10px 24px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.herlan-ask-question-btn:hover {
  background-color: #333;
}
/* Ask Question Form */
.herlan-ask-question-form {
  max-width: 100%;
  margin: 0 0 40px 0;
  padding: 0;
  /* ensure ask question form has zero padding */
  background: transparent;
  border-radius: 0;
}
/* Ensure the question form wrapper has zero padding across viewports */
#herlanQuestionForm {
  padding: 0;
}
.herlan-ask-question__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 24px 0;
  color: #222;
}
.herlan-question-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.herlan-terms-group {
  margin-top: 0;
}
.herlan-terms-text {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}
.herlan-terms-text a {
  color: #666;
  text-decoration: underline;
}
.herlan-terms-text a:hover {
  color: #000;
}
.herlan-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: #666;
  cursor: pointer;
  line-height: 1.5;
}
.herlan-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.herlan-checkbox-label a {
  color: #666;
  text-decoration: underline;
}
.herlan-checkbox-label a:hover {
  color: #000;
}
.herlan-submit-question-btn, .herlan-cancel-question-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 100%;
}
.herlan-submit-question-btn {
  background-color: #000;
  color: #fff;
}
.herlan-submit-question-btn:hover {
  background-color: #333;
}
.herlan-submit-question-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.herlan-cancel-question-btn {
  background-color: #f5f5f5;
  color: #222;
  border: 1px solid #ddd;
}
.herlan-cancel-question-btn:hover {
  background-color: #e0e0e0;
}
/* Questions Display */
.herlan-questions-display-section {
  margin-top: 40px;
}
.herlan-no-questions {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 1rem;
  margin-bottom: 0;
}
.herlan-product-questions {
  margin-top: 0;
}
.herlan-product-questions__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 32px 0;
  color: #000;
  padding-bottom: 16px;
  border-bottom: 1px solid #C4C4C4;
}
.herlan-product-questions__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* adjusted gap per request */
}
/* Individual Question Item */
.herlan-question-item {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 8px;
  /* reduced bottom padding per request */
  transition: opacity 0.3s ease;
}
.herlan-question-item--hidden {
  display: none;
}
.herlan-question-item:last-child {
  border-bottom: none;
}
.herlan-question-item__header {
  margin-bottom: 8px;
}
.herlan-question-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.herlan-question-item__author {
  /* Question author styling: updated per request */
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  color: #222222;
  /* Ensure proper case for question authors */
  text-transform: capitalize;
}
.herlan-question-item__date {
  font-size: 0.875rem;
  color: #666;
  margin-left: auto;
}
.herlan-question-item__content {
  margin-bottom: 16px;
}
/* Specific typography for the first question item's paragraph as requested */
#herlanQuestionsDisplay > div > div.herlan-product-questions__list > div:nth-child(1) > div.herlan-question-item__content > p {
  font-weight: 400;
  color: #454545;
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}
.herlan-question-item__text {
  /* Question item text: desktop 16px, mobile 14px */
  font-size: 16px;
  line-height: 20px;
  color: #454545;
  font-weight: 400;
  margin: 0;
}
/* Answers List */
.herlan-answers-list {
  margin-top: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Individual Answer Item */
.herlan-answer-item {
  padding: 16px 20px;
  background-color: #f5f5f5;
  border-radius: 0;
  border-left: none;
}
.herlan-answer-item.herlan-answer-item--official {
  background-color: #f5f5f5;
  border-left: none;
}
.herlan-answer-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.herlan-answer-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  color: #000;
}
.herlan-answer-badge__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.herlan-answer-badge__text {
  font-weight: 600;
}
.herlan-answer-item__author {
  font-weight: 600;
  font-size: 0.875rem;
  color: #000;
  /* Ensure proper case for answer authors */
  text-transform: capitalize;
}
/* Make answer badge text match author typography (desktop) */
.herlan-answer-badge, .herlan-answer-badge__text {
  color: #222222;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  text-transform: capitalize;
}
.herlan-answer-item__date {
  font-size: 0.875rem;
  color: #666;
  margin-left: auto;
}
.herlan-answer-item__content {
  margin: 0;
}
.herlan-answer-item__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #000;
  margin: 0;
}
/* View All Button */
.herlan-product-questions__footer {
  margin-top: 24px;
  text-align: center;
}
.herlan-view-all-btn {
  background: transparent;
  border: 1px solid #222;
  padding: 10px 32px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #222;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.herlan-view-all-btn:hover {
  background: #222;
  color: #fff;
}
/* Mobile Responsive for Q&A */
@media (max-width: 768px) {
  /* Mobile override for question author font-size */
  /* Mobile override for answer badge text to match mobile author sizing */
  .herlan-qa-section-inner {
    padding: 0 16px;
  }
  .herlan-ask-question-form {
    padding: 0;
    /* keep ask-question form padding zero on mobile */
  }
  .herlan-form-actions {
    flex-direction: column;
  }
  .herlan-form-actions .herlan-submit-question-btn, .herlan-form-actions .herlan-cancel-question-btn {
    width: 100%;
  }
  .herlan-answers-list {
    padding-left: 12px;
  }
  .herlan-answer-item {
    padding: 12px;
  }
  .herlan-question-item__author-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .herlan-question-item__author {
    font-size: 12px;
  }
  .herlan-answer-badge, .herlan-answer-badge__text, .herlan-answer-item__author {
    font-size: 12px;
  }
}
/* Apply same typography to the Reviews tab container */
#herlan-tab-reviews {
  color: #454545;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  /* Ensure headings and paragraphs inside follow the same sizing */
}
#herlan-tab-reviews h2, #herlan-tab-reviews h3, #herlan-tab-reviews h4, #herlan-tab-reviews p, #herlan-tab-reviews .herlan-review-item__title, #herlan-tab-reviews .herlan-review-item__text {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
@media (max-width: 768px) {
  #herlan-tab-reviews {
    font-size: 14px;
  }
}

/* Toastify Progress Bar Styles */
.toast-with-progress .toastify {
  position: relative;
  overflow: hidden;
}

.toast-with-progress .toastify::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  animation: toastProgress 6s linear forwards;
  transform-origin: left;
}

@keyframes toastProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* Ensure progress bar shows on hover pause */
.toast-with-progress .toastify:hover::after {
  animation-play-state: paused;
}

/* Position close button to top-right of toast */
.toastify-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  opacity: 0.7;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}

.toastify-close:hover {
  opacity: 1;
}

/* Remove box-shadow from all toasts */
.toastify {
  box-shadow: none !important;
}

/* Mobile responsive toast styles */
@media (max-width: 768px) {
  .toastify {
    max-width: calc(100vw - 32px) !important;
    min-width: 280px !important;
    margin: 16px !important;
    padding: 14px 40px 14px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }
  
  .toastify-close {
    top: 6px !important;
    right: 6px !important;
    font-size: 18px !important;
  }
  
  .toast-with-progress .toastify::after {
    height: 3px;
  }
}