/* שימוש ב-variables ו-מחלקות קיימות מ-main.css ו-additionalProductPages.css */
body.websiteBuildingPage {
  direction: rtl;
}

/* HERO */

section.header .heroSub {
  font-size: 20px;
  color: var(--text-muted);
  margin-top: 12px;
}
section.header .heroArt img {
  width: 100%;
  max-width: 420px;
}

/* WHY SITE */
section.mainContainer.whySite .contentContainer {
  margin-top: 12px;
}
section.mainContainer .remark {
  background: #fff7ea;
  border: 1px solid #ffd9a6;
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-block;
  margin-top: 10px;
}

/* must-have icons grid */
.mustHave { margin-top: 28px; }
.mustHave .subTitle { font-weight: 800; text-align: center; margin-bottom: 16px; }
.mustHaveGrid {
    margin-top: 60px;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
}

.mhItem {
    margin-bottom: 20px;
}

.mhItem img { width: 140px; height: 146px;}
.mhItem .mhTitle { font-size: 28px; font-weight: 700; margin-top: 8px; }
.mhItem .mhText  { font-size: 14px; color: var(--text-muted); }

.websiteBuildingPackages {
    margin-top: 35px;
    margin-bottom: 115px;
}

.websiteBuildingPackages .row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    color: var(--secondary);
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 15px;
}

.websiteBuildingPackages .row .column {
    padding: 20px;
    width: calc(100% - 40px);
    border-radius: 10px;
    border: 2px solid var(--secondary);
    box-shadow: 4px 4px 4px 0 rgba(102, 46,135, 0.56);
}

.websiteBuildingPackages .row.header {
    display: none;
    padding: 0 20px;
    font-size: 32px;
    font-weight: 700;
}

.websiteBuildingPackages .priceCell {
  white-space: nowrap;
}

.websiteBuildingPackages .priceCell .priceHighlight img {
    width: 60px;
}

.websiteBuildingPackages .priceWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.websiteBuildingPackages .priceWrapper .priceHighlight {
  font-size: 28px;
}

.websiteBuildingPackages .salePrice {
  font-weight: 700;
}

.websiteBuildingPackages .oldPriceValue {
  text-decoration: line-through;
  color: #888;
  font-size: 0.9em;
}


section.mainContainer .addToCartButton {
    margin-bottom: 100px;
    text-align: center;
}

section.mainContainer .addToCartButton button {
    font-size: 30px;
    padding: 20px 30px;
    border-radius: 40px;
    border: 3px solid white;
    box-shadow: 4px 4px 4px 0 var(--secondary);
}

/* TRUST STRIP */
.trustStrip .headerImage {
    text-align: center;
}

.trustStrip .headerImage img {
    width: 181px;
}

.trustStrip .trustGrid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.trustStrip .trustItem {
    width: 277px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.trustStrip .trustItem img { width: 65px; height: 58px; }
.trustStrip .trustText {
    font-size: 28px;
    text-align: center;
}

/* EXAMPLES */
.examples .examplesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.examples .examplesGrid img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e7ecff;
  box-shadow: 0 6px 16px rgba(20,40,120,.06);
}
.examples .center { text-align: center; margin-top: 16px; }

/* FAQ */
.faqBlock .faq .faqItem {
  border: 1px solid #e7ecff;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
.faqBlock .faqQ {
  width: 100%;
  text-align: right;
  padding: 14px 16px;
  font-weight: 700;
  background: #f7f9ff;
  border: none;
  cursor: pointer;
}
.faqBlock .faqA { display: none; padding: 12px 16px; }
.faqBlock .faqItem.open .faqA { display: block; }

/* נקודת שבירה עיקרית – 1280px */
@media only screen and (min-width: 1280px) {
    section.header .heroContent {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .websiteBuildingPage section.mainContainer .columnsContainer {
      justify-content: center;
      margin-bottom: 70px;
    }
    .mustHaveGrid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .mhItem {
        margin-bottom: 0;
    }
    .websiteBuildingPackages .row.header {
        display: flex;
    }
    .websiteBuildingPackages .row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .websiteBuildingPackages .row .column {
        width: 176px;
        height: 81px;
        padding: 10px 20px 0 20px;
    }

    .websiteBuildingPackages .row .column.large {
        width: 360px;
    }

    .websiteBuildingPackages .row.header .column {
        height: 52px;
    }
    section.mainContainer .addToCartButton button {
        padding: 20px 100px;
    }
    .trustStrip .trustGrid {
        flex-direction: row;
    }
}

@media (max-width: 1279px) {
    /* הכותרת לפני התוכן */
    .websiteBuildingPackages .row:not(.header) > .column::before {
        display: block;
        margin-bottom: 6px;
        font-weight: 700;
        font-size: 26px;
        color: var(--secondary);
        content: "";
    }

    /* שמות הכותרות (כמו בשורה העליונה בדסקטופ) */
    .websiteBuildingPackages .row:not(.header) > div:nth-child(1)::before { content: "סוג חבילה"; }
    .websiteBuildingPackages .row:not(.header) > div:nth-child(2)::before { content: "מתאים ל:"; }
    .websiteBuildingPackages .row:not(.header) > div:nth-child(3)::before { content: "מחיר"; }
    .websiteBuildingPackages .row:not(.header) > div:nth-child(4)::before { content: "מה כלול בחבילה:"; }
}