/* KUJUNDUS 02.10.2026 - kliendi Avaleht.html (Claude Design) mõõdud avalehele ja tootekaartidele.
   Võrreldud 1440px laiusel arvutatud stiilide järgi: fondid, värvid, vahed, allajooned.
   Kõik ühes failis ja laaditakse VIIMASENA (index.php), et mitte muuta ridu
   index.css/products.css sees. Tagasi võtmiseks eemalda see fail index.php-st.
   Lõikude vahed ainult avalehel: ".main-page ~" valib vaid main_page.tpl plokke
   (index.css laaditakse igal lehel). Mobiili reeglid (max-width 916px, !important) jäävad kehtima. */

/* ---------- Päis ---------- */
header.nav .nav-content ul.menu > li > a { font-weight: 600; color: #1A1A18; }
header.nav .nav-content ul.menu > li.active > a,
header.nav .nav-content ul.menu > li > a:hover { color: #8C6E50; }
header.nav .nav-content .user-profile .user-btn-text { font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #3C3C3B; }

/* ---------- Hero ---------- */
.banner_v2 .content h1,
.banner_v2 .content h3 { color: #1A1A18; }

/* ---------- Registreerimise + püsikliendi kast ---------- */
.register-banner-container.main-page { background: #F2F2F0; }
/* Kastid 10px ümarad (02.10): kollane + pruun pool lõigatakse ühe välise nurga järgi - töötab ka mobiilis, kus pooled on üksteise all */
.register-banner-container.main-page .register-banner { border-radius: 10px; overflow: hidden; }
.register-banner-container.main-page .left-side,
.register-banner-container.main-page .right-side { border-radius: 0; }
.register-banner-container.main-page .left-side h2 { font-family: 'Figtree', system-ui, sans-serif; }
.register-banner-container.main-page .right-side .firstLevelDiscountWrapper > span:not(.discountAmountWrapper),
.register-banner-container.main-page .right-side .secondLevelDiscountWrapper > span:not(.discountAmountWrapper) { font-size: 17px; }
.register-banner-container.main-page .right-side b { font-weight: 800; }

/* ---------- Uue toote bänner ---------- */
.newProductListWrapper { background: #F2F2F0; }
.newProductListWrapper .newProductWrapper { border-radius: 10px; }
.newProductListWrapper .newProductDescriptionBottom a { color: #8C6E50; font-weight: 700; font-size: 16px; text-decoration: none; }
.newProductListWrapper .newProductDescriptionBottom a:hover { color: #1A1A18; }

/* ---------- Tootelõik ---------- */
main .register-banner-container.main-page ~ .product-content { background: #F2F2F0; }
main .product-content > .slogan { font-family: 'Figtree', system-ui, sans-serif; font-size: 38px; letter-spacing: -.02em; color: #8C6E50; }

/* ---------- Tootekaart (avaleht + pelletite leht) ---------- */
/* 10px nurk ilma overflow:hiddenita - muidu lõikaks "UUS TOODE" sildi (top -14px) ära */
main .product-content > .products > .main-product-list > .product_thumb { border-radius: 10px; }
/* hind -> tabel 20px nagu kujunduses (seal price margin-bottom 20px); graanulis on vahel KM-ta hinna rida */
main .product-content > .products > .main-product-list > .product_thumb.style1 table { margin-top: 20px; }
main .product-content > .products > .main-product-list > .product_thumb.style1 .note { font-weight: 400; }
main .product-content > .products > .main-product-list > .product_thumb.style1 .price { font-size: 17px; font-weight: 700; color: #8C6E50; }
main .product-content > .products > .main-product-list > .product_thumb.style1 .price b { font-size: 26px; font-weight: 700; }
main .product-content > .products > .main-product-list > .product_thumb.style1 table td { color: #6B6259; }
main .product-content > .products > .main-product-list > .product_thumb.style1 table td:last-child { color: #1A1A18; }
main .product-content > .products > .main-product-list > .product_thumb.style1 .cart > div:first-child { font-size: 15px; color: #3C3C3B; }
main .product-content > .products > .main-product-list > .product_thumb.style1 .cart > .add_to_basket,
main .product-content > .products > .main-product-list > .product_thumb.style1 .cart > .add_to_basket span { font-size: 16px; color: #1A1A18; }

/* Kogusekast (kaart + uue toote bänner - mõlemal .style1 .cart): kujunduses "1" 16px/600, ühik 16px */
.style1 .cart .quantityWrapper input.quantity-input { font-family: inherit; font-size: 16px; font-weight: 600; color: #1A1A18; }
.style1 .cart .quantityWrapper .unit { font-size: 16px; color: #3C3C3B; }

/* ---------- Pelletite leht (/pelletid/, /granulas/): kastid 10px ümarad nagu avalehel ---------- */
.firstComparisonBlock .firstComparisonWrapper,
.firstComparisonBlock .comparisonProducts .eachComparison,
.secondComparisonBlock .eachComparisonOption { border-radius: 10px; }
/* tabelis on värviline 07 veerg - overflow:hidden, et päise/ridade taust nurgast välja ei paistaks */
.secondComparisonBlock .comparisonTableWrapper { border-radius: 10px; overflow: hidden; }
/* Viimase rea alumine joon (#F0EEEA) jäi kohe raami (#E5E3DF) kohale - kaks joont kõrvuti nägid välja nagu vari.
   Tabel on 3 veergu (Tööstuslik välja 05.10.2026), seega viimased 3 lahtrit = viimane rida. */
main > .secondComparisonBlock .comparisonTableWrapper > :nth-last-child(-n+3) { border-bottom: 0; }

/* ---------- Pelletite infolõik ---------- */
main > .info .infoContent .content > h2,
main > .info .infoContent .content > h2:first-child { font-family: 'Figtree', system-ui, sans-serif; font-size: 36px; line-height: 1.15; letter-spacing: -.02em; }
main > .info .infoContent .content > span,
main > .info .infoContent .content > span:last-child,
main > .info .infoContent .content > p { font-size: 17px; line-height: 1.65; color: #3C3C3B !important; } /* !important: CMS-i tekstil on inline color:#333 */
main > .info .button > a { font-size: 16px; }

/* ---------- Ainult laiale ekraanile: vahed ja paddingud ---------- */
@media all and (min-width: 917px) {
    /* Hero tekst sama vasaku serva pealt mis allolevad 1160px kastid (ka ultrawide ekraanil).
       Padding % = .banner_v2 laiusest; alla 1240px on kastidel 40px aar, siis ka tekstil 40px. */
    .banner_v2 .content { box-sizing: content-box; max-width: 676px; padding-left: max(40px, calc((100% - 1160px) / 2)); padding-right: 48px; }

    /* Lõikude vahed nagu kujunduses: riba -> kast 56px, kast -> bänner 40px, bänner -> pealkiri 56px */
    .register-banner-container.main-page { padding-top: 56px; }
    /* kujunduses 1.55fr / 1fr ehk 705px + 455px */
    .register-banner-container.main-page .left-side { flex: 0 0 60.78%; box-sizing: border-box; min-width: 0; }
    .register-banner-container.main-page .right-side { flex: 1 1 auto; box-sizing: border-box; min-width: 0; }
    .register-banner-container.main-page ~ .newProductListWrapper { padding: 40px 0 0; }
    main .register-banner-container.main-page ~ .product-content { padding: 56px 48px 76px; }
    main .register-banner-container.main-page ~ .product-content > .slogan { margin-bottom: 8px; }
    /* alapealkiri -> kaardid 44px (kaardil on 32px margin-top uue toote sildi jaoks) */
    main .register-banner-container.main-page ~ .product-content .subSlogan { margin-bottom: 12px; }
    /* vertikaalne vahe ara (kujunduses 76+76px paddingut), aga auto jaab: index.css max-width 1440px hoiab loigu laial ekraanil keskel */
    main .register-banner-container.main-page ~ .info { margin: 0 auto; }

    main .product-content > .products > .main-product-list > .product_thumb.style1 { padding: 28px; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 .cart > .add_to_basket { padding: 13px 24px; }

    .style1 .cart .quantityWrapper { padding: 5px 6px 5px 12px; }
    .style1 .cart .quantityWrapper input.quantity-input { width: 16px; padding: 0; }
    .style1 .cart .quantityWrapper .arrows.desktop { margin-left: 0; }
    /* banneri nooltel puudub klass .desktop, seega products.css 10px reegel neid ei tabanud (kast oli 52px korge) */
    .newProductCartWrapper .quantityWrapper .arrows .custom_arrow { font-size: 10px; line-height: 1; padding: 2px 5px; color: #1A1A18; cursor: pointer; }
    .newProductCartWrapper .quantityWrapper .arrows .custom_arrow:hover { color: #8C6E50; }

    main > .info .infoContent .content > h2,
    main > .info .infoContent .content > h2:first-child { margin-bottom: 22px; }
    main > .info .button { width: 233px; padding: 15px 0; margin-top: 30px; border-radius: 100px; }
}
@media all and (min-width: 1101px) {
    /* 3 kaarti 1160px sees: 28px vahe nagu kujunduses (kaart 368px) */
    main .product-content > .products > .main-product-list { column-gap: 28px; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 { width: calc((100% - 56px) / 3); box-sizing: border-box; }
}

/* ---------- Pelletite leht: pealkirjad ja värvid nagu kujunduses (Pelletid.html) ---------- */
/* pellets.css laaditakse PÄRAST seda faili - selektorid on seepärast ühe astme võrra täpsemad kui seal.
   profile.css-is on üldine "h2 { font-family: Gilroy }" - kujunduses on kõik Figtree. Ainult selle lehe plokid,
   et profiili/KKK lehed jääksid nagu on. ".firstComparisonBlock ~ .wrapper" = ainult pelletite lehe infoplokid. */
main > .firstComparisonBlock h2,
main > .secondComparisonBlock h2,
main > .firstComparisonBlock ~ .wrapper > .container > .content > h2 { font-family: 'Figtree', system-ui, sans-serif; }
main > .firstComparisonBlock > h2,
main > .secondComparisonBlock .whichOne > h2,
main > .secondComparisonBlock .comparisonTable > h2,
main > .firstComparisonBlock ~ .wrapper > .container > .content > h2 { letter-spacing: -.02em; }
main > .firstComparisonBlock ~ .wrapper#b > .container > .content > h2 { font-size: 32px; }
main > .firstComparisonBlock ~ .wrapper#b > .container > .content > span { font-size: 17px; line-height: 1.65; }
/* !important: CMS-i tekstil on inline color:#333 (#b-l on valge tekst, seda ei puuduta) */
main > .firstComparisonBlock ~ .wrapper:not(#b) > .container > .content > span { color: #3C3C3B !important; }
main > .firstComparisonBlock .firstComparisonRight table td { color: #3C3C3B; }
main > .firstComparisonBlock .firstComparisonRight table td:last-child { color: #1A1A18; }
main > .firstComparisonBlock .comparisonProducts .eachComparison:not(.newProduct) .description { color: #3A2F1F; }
main > .secondComparisonBlock .comparisonTableWrapper .heavyWeight:not(.firstColumn) { color: #3C3C3B; }
main > .secondComparisonBlock .comparisonTableWrapper .mediumWeight { color: #6B6259; }

/* ---------- Telefon (Avaleht mobiil.html / Pelletid mobiil.html): kujunduses väiksemad fondid ---------- */
@media all and (max-width: 600px) {
    /* avaleht */
    .register-banner-container.main-page .left-side h2 { font-size: 19px !important; }
    .register-banner-container.main-page .left-side p { font-size: 15px !important; line-height: 1.55; }
    .register-banner-container.main-page .right-side .discountAmountWrapper { font-size: 27px !important; }
    .register-banner-container.main-page .right-side .firstLevelDiscountWrapper > span:not(.discountAmountWrapper),
    .register-banner-container.main-page .right-side .secondLevelDiscountWrapper > span:not(.discountAmountWrapper) { font-size: 16px !important; }
    .newProductListWrapper .newProductLabel { font-size: 11px; padding: 4px 11px; letter-spacing: .12em; }
    .newProductListWrapper .newProductAvailable { font-size: 16px; line-height: 1.3; }
    .newProductListWrapper .newProductDescriptionMiddle { font-size: 14px; line-height: 1.5; }
    .newProductListWrapper .newProductDescriptionBottom a { font-size: 14.5px; }
    main .product-content > .slogan { font-size: 27px !important; }
    main .product-content .subSlogan { font-size: 15.5px !important; line-height: 1.55; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 h3 { font-size: 18px; line-height: 1.28; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 .note { font-size: 14px; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 .price { font-size: 16px; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 .price b { font-size: 24px; }
    main .product-content > .products > .main-product-list > .product_thumb.style1 table td { font-size: 14.5px; }
    main > .info .slogan { font-size: 13px; }
    main > .info .infoContent .content > h2,
    main > .info .infoContent .content > h2:first-child { font-size: 27px !important; line-height: 1.2 !important; }
    main > .info .infoContent .content > span,
    main > .info .infoContent .content > span:last-child { font-size: 16px !important; line-height: 1.6 !important; }
    main > .info .button > a { font-size: 15px; }

    /* pelletite leht */
    main > .firstComparisonBlock > h2,
    main > .secondComparisonBlock .whichOne > h2,
    main > .secondComparisonBlock .comparisonTable > h2 { font-size: 26px !important; }
    main > .firstComparisonBlock ~ .wrapper > .container > .content > h2 { font-size: 26px !important; line-height: 1.27 !important; }
    main > .firstComparisonBlock ~ .wrapper#b > .container > .content > h2 { font-size: 25px !important; }
    main > .firstComparisonBlock ~ .wrapper > .container > .content > span { font-size: 16px !important; line-height: 1.6 !important; }
    main > .firstComparisonBlock > p { font-size: 15.5px !important; line-height: 1.6; }
    main > .firstComparisonBlock .firstComparisonLeft .onlyDifference { font-size: 13.5px !important; }
    main > .firstComparisonBlock .firstComparisonLeft .onlyDifference2 { font-size: 15px !important; line-height: 1.5; }
    main > .firstComparisonBlock .firstComparisonLeft .name { font-size: 14.5px !important; }
    main > .firstComparisonBlock .firstComparisonLeft .overalDescription { font-size: 14px !important; line-height: 1.55; }
    main > .firstComparisonBlock .firstComparisonRight > h2 { font-size: 13.5px !important; }
    main > .firstComparisonBlock .firstComparisonRight table td { font-size: 15px !important; }
    main > .secondComparisonBlock .eachComparisonOption h3 { font-size: 19px !important; }
    main > .secondComparisonBlock .comparisonTableWrapper .tableHeader { font-size: 13px !important; }
    main > .secondComparisonBlock .comparisonTableWrapper .lihgtWeight,
    main > .secondComparisonBlock .comparisonTableWrapper .heavyWeight,
    main > .secondComparisonBlock .comparisonTableWrapper .mediumWeight { font-size: 13.5px !important; }
    main > .secondComparisonBlock .comparisonTable > .note { line-height: 1.48; }
}

/* ---------- 07 bänner: telefonis lühem tekst koos hinnaga (Avaleht mobiil.html) ----------
   Kuni 916px on bänneri ostukorvi osa peidus (index.css), seal näidatakse new_product_desc_mobile. */
.newProductListWrapper .newProductDescriptionMiddle .descMobile { display: none; }
@media all and (max-width: 916px) {
    .newProductListWrapper .newProductDescriptionMiddle .descDesktop { display: none; }
    .newProductListWrapper .newProductDescriptionMiddle .descMobile { display: inline; }
}

/* ---------- Poe teade avalehe ülaosas (05.10.2026) ----------
   shop_class::shopAlert() - teade (nt võltsitud e-kirjade hoiatus) on enne "Telli mugavamalt
   kasutajana" kasti ja sama laiusega (1160px), mitte 55% laiusena toodete kohal. */
.store_down.shopAlertTop { background: #F2F2F0; padding: 56px 40px 0; }
.store_down.shopAlertTop .slogan { width: 100%; max-width: 1160px; box-sizing: border-box; }
@media all and (min-width: 917px) {
    .shopAlertTop + .register-banner-container.main-page { padding-top: 32px; }
}
@media all and (max-width: 916px) {
    /* parem serv 30px: teate nurgas olev pruun ring (:before) ulatub kastist välja */
    .store_down.shopAlertTop { padding: 30px 30px 0 15px !important; }
    .store_down.shopAlertTop .slogan { width: 100% !important; }
    .shopAlertTop + .main-page.register-banner-container { padding-top: 24px !important; }
}