/* Global Styles */
:root {
    --primary-color: #667eea;
    --primary-dark: #5a67d8;
    --secondary-color: #764ba2;
    --success-color: #48bb78;
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --bg-light: #f7fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
}


/*  Main App Section  */

.main-app {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #F6F7F8BA;
  border: #E4E4E4;
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  color: #202020;
  padding: 22px;
  margin: 22px auto;
}

.main-app-info-wrap {
  
}

.title-image-wrapper {
  margin-bottom: 12px;
  display: flex;
}

.main-app__image {
  flex-shrink: 0;
  background: transparent;
  border-radius: 10px;
  width: 82px;
  height: 82px;
  overflow: hidden;
  margin-right: 12px;
}

.main-app__image img {
  width: 100%;
  height: 100%;
}

.main-app .section__heading--1 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 4px;
}

.main-app__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 0;
}

.main-app__info li {
  position: relative;
}

.main-app__info li.main-app__item--developer {
  display: block;
}

.main-app__info .main-app__item--developer::after {
  display: none;
}

.main-app__info li::after {
  content: "\2022";
  position: absolute;
  top: 0;
  right: -16px;
}

.main-app__info li:last-child::after {
  display: none;
}

.main-app__link {
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
}

a.main-app__link:hover {
  opacity: 0.9;
  text-decoration: none;
}

.main-app__links {
  font-size: 14px;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  max-width: fit-content;
}

.main-app__links a {
  width: 100%;
  margin: 0;
  font-weight: 700;
  background: var(--accent-color);
  color: white;
  padding: 10px 15px;
  border-radius: 40px;
  border: 1px solid var(--accent-color);
}

.main-app__links a:hover {
  text-decoration: none;
}

.main-app .section__description {
  font-size: 14px;
  color: #78726E;
  max-width: 670px;
}

.poduct-card-meta-holder {
  /* Note: This appears to be a typo - should be "product-card-meta-holder" */
}

/*  App card  */

.app-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--color-primary);
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  text-decoration: none;
  color: #202020;
  cursor: pointer;
}

.app-card:hover {
  text-decoration: none;
  color: #202020;
}

.app-card__meta {
  display: inline-flex;
  padding: 2px 15px;
  background-color: #202020;
  border-radius: 20px;
  gap: 8px;
  margin-top: auto;
}

.app-card__meta .app-card__rate {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
}

.app-card__meta .main-app__link {
  color: #fff;
}

.app-card__reviews {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: flex;
  gap: 6px;
  align-items: center;
}

.app-card__reviews span {
  text-decoration: underline;
}

.build-for-shopify-badge {
  padding: 2px 12px;
  display: inline-block;
  background-color: #CAE3FF;
  border-radius: 20px;
  color: #202020;
  font-size: 14px;
}

.build-for-shopify-badge svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

.text-align-left {
  text-align: left;
}

.app-card__img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1/1;
  border-radius: 8px;
}

.app-card__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #202020;
  margin-bottom: 8px;
}

.app-card__rate {
  padding: 4px 6px;
  border-radius: 20px;
  background-color: #202020;
  column-gap: 4px;
  white-space: nowrap;
}

.app-card__rate .star-wrapper {
  display: flex;
  column-gap: 4px;
  padding-bottom: 2px;
}

.app-card__rate .review-star-icon {
  display: none;
}

.app-card__rate .review-star-icon:first-child {
  display: flex;
}

.app-card__rate .review-star-icon > svg {
  width: 15px;
  height: 15px;
}

.app-card__rate .review-star-icon path {
  fill: #F1C644;
}

.app-card__rate--no-reviews {
  color: var(--text-secondary);
}

.app-card__rate--no-reviews .block-img-wrap {
  color: var(--text-secondary);
}

.app-card__rate .shopify-icon {
  font-size: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5575 6.00937C18.5449 5.89687 18.4443 5.84687 18.3688 5.84687C18.2933 5.84687 16.6451 5.72187 16.6451 5.72187C16.6451 5.72187 15.5002 4.58437 15.3618 4.47187C15.2359 4.34687 14.9969 4.38437 14.8962 4.40937C14.8837 4.40937 14.6446 4.48438 14.2546 4.60938C13.8645 3.49688 13.1977 2.48438 12.0025 2.48438H11.8892C11.5621 2.05937 11.1343 1.85938 10.782 1.85938C8.01405 1.85938 6.68039 5.29688 6.2652 7.04688C5.18317 7.38438 4.41569 7.60937 4.32761 7.64687C3.72369 7.83437 3.71111 7.84687 3.63562 8.40937C3.57271 8.83437 2 20.9219 2 20.9219L14.242 23.1969L20.8851 21.7719C20.8977 21.7469 18.5701 6.12187 18.5575 6.00937ZM13.5752 4.78437C13.2732 4.87187 12.9083 4.98438 12.5435 5.10938V4.88437C12.5435 4.20937 12.4554 3.65937 12.2918 3.22187C12.9209 3.29687 13.3109 3.98437 13.5752 4.78437ZM11.5243 3.35938C11.6879 3.78437 11.8011 4.38437 11.8011 5.20937V5.33437C11.1217 5.54687 10.4046 5.75937 9.66226 5.99687C10.0775 4.42187 10.8701 3.64688 11.5243 3.35938ZM10.7191 2.58437C10.8449 2.58437 10.9708 2.63437 11.0714 2.70937C10.1781 3.12187 9.23448 4.15937 8.84444 6.25937C8.2531 6.44687 7.68693 6.60937 7.14592 6.78437C7.59886 5.18437 8.73121 2.58437 10.7191 2.58437Z' fill='%2395BF47'/%3E%3Cpath d='M18.3693 5.82109C18.2938 5.82109 16.6456 5.69609 16.6456 5.69609C16.6456 5.69609 15.5007 4.55859 15.3623 4.44609C15.312 4.39609 15.2491 4.37109 15.1987 4.37109L14.2803 23.1961L20.9234 21.7711C20.9234 21.7711 18.5958 6.12109 18.5832 6.00859C18.5329 5.89609 18.4448 5.84609 18.3693 5.82109Z' fill='%235E8E3E'/%3E%3Cpath d='M12.0024 9.47105L11.1972 11.8836C11.1972 11.8836 10.4675 11.4961 9.59934 11.4961C8.30342 11.4961 8.24051 12.3086 8.24051 12.5086C8.24051 13.6086 11.1343 14.0336 11.1343 16.6211C11.1343 18.6586 9.83839 19.9711 8.08953 19.9711C5.97581 19.9711 4.91895 18.6711 4.91895 18.6711L5.48512 16.8211C5.48512 16.8211 6.59231 17.7711 7.52336 17.7711C8.13986 17.7711 8.39149 17.2961 8.39149 16.9461C8.39149 15.5086 6.02613 15.4461 6.02613 13.0711C6.02613 11.0836 7.46045 9.15855 10.3668 9.15855C11.4488 9.14605 12.0024 9.47105 12.0024 9.47105Z' fill='white'/%3E%3C/svg%3E%0A");

}

.app-card__description {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.app-card__rate-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px;
}



.app-card__compare.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.app-card.app-unavailable .app-card__title {
  opacity: 0.5;
}

.app-card.app-unavailable img {
  filter: grayscale(1);
  opacity: 0.5;
}

.app-card__trial {
  background-color: #f7f7f7;
  padding: 6px 16px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  margin-top: 2px;
  border-radius: 0 0 8px 8px;
  color: #4c4c4c;
  font-size: 12px;
}


@media (min-width: 600px) {
  .app-card__title {
    font-size: 20px;
  }
}

.categories__list {
  display: none;
  grid-template-columns: 1fr;
  width: fit-content;
  height: fit-content;
  gap: 30px;
  margin-top: 20px;
}

.categories__list[active] {
  display: grid;
}

@media (min-width: 600px) {
  .categories__list {
    gap: 16px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .categories__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1240px) {
  .categories__list {
    margin-top: 0px;
    gap: 60px;
  }
  .app-card__trial {
    font-size: 14px;
  }
}
.main-app__links a:hover {
  color: var(--accent-color);
  background: white;
  border: 1px solid var(--accent-color);
}



@media (max-width: 480px) {
    .app-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-install,
    .btn-save {
        width: 100%;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}






/* App Main Wapper Layout CSS */



.main-app-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
    padding: 2rem 0;
}

.main-app-content {
    min-width: 0;
}

.s-app-content {
    width: 100%;
}

.s-app-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.s-app-content__description {
    margin-bottom: 2.5rem;
}

.content {
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
}

.s-app-content__features {
    margin-top: 2.5rem;
}

.section__heading--3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
}

.text-align- {
    /* Empty class for potential alignment */
}

.s-app-content__features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.s-app-content__features li {
    padding: 0.75rem 0;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}

.s-app-content__features li:last-child {
    border-bottom: none;
}

/* Conditional Sticky Sidebar */
.main-app-sidebar {
    width: 100%;
    flex-shrink: 0;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    height: fit-content;
}

/* Only make sticky when main content is taller than sidebar */
@media (min-width: 1024px) {
    .main-app-sidebar {
        position: sticky;
        top: 2rem;
    }
}

.app-sidebar-inner {
    padding: 1.5rem;
}

.app-information {
    width: 100%;
}

.app-information__item {
    margin-bottom: 2rem;
}

.app-information__item:last-child {
    margin-bottom: 0;
}

.app-information__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.app-information__list--wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-information__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-information__list li,
.app-information__list--integrations li {
    font-size: 0.875rem;
    color: #6b7280;
    padding: 0.375rem 0;
    line-height: 1.5;
}

.app-information__list--categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-information__list_link {
    display: inline-block;
    text-decoration: none;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    background: #eff6ff;
    border-radius: 6px;
    transition: all 0.15s ease;
    border: 1px solid #dbeafe;
}

.app-information__list_link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    text-decoration: none;
}


.app-description ul {
  margin: 0;
  padding: 0;
}
.app-description li {
  list-style: none;
  padding-left: 15px;
  font-size: 18px;
	font-weight: 400;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #59695F;
}


.app-description ul {
	list-style-type: none;
	margin-inline-start: 1em;
	margin-left: 0px;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #98B2A1;
}
.key-features {
	margin-bottom: 40px;
	margin-top: 25px;
}
.app-description  h3 {
	margin-bottom: 15px;
}


/* Mobile Responsive */
@media (max-width: 1023px) {
    .main-app-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .main-app-sidebar {
        width: 100%;
        position: static;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .main-app-wrapper {
        padding: 1rem 0;
    }
    
    .s-app-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    .gap-3rem {
        gap: 1.5rem;
    }
    
    .app-sidebar-inner {
        padding: 1rem;
    }
    
    .s-app-content__description {
        margin-bottom: 2rem;
    }
    
    .s-app-content__features {
        margin-top: 2rem;
    }
}