/*
 * ============================================================================
 * Triterra — Additional CSS (WordPress Customizer)
 * ============================================================================
 *
 * Phase 1 cleanup: removed duplicate Google Fonts @import (Alef loaded locally)
 * Phase 2 cleanup: leading zeros stripped, hex colors shortened, whitespace cleaned
 * Phase 3 cleanup: this TOC added
 *
 * This file is loaded INTO every page via WordPress Customizer.
 * Edit at: WP Admin → Appearance → Customize → Additional CSS
 *
 * ----------------------------------------------------------------------------
 *
 * Table of Contents:
 *
 *   1. תיקונים כלליים (Contact Form 7 ושדות נסתרים)                 (line 33)
 *   2. עיצוב ממותג לטופס הרשמה ודשבורד - Triterra Farm              (line 55)
 *   3. כפתור הוספה לסל מעוצב (תקף לכל המקומות באתר)                 (line 284)
 *   4. עיצוב עמוד עגלה (Cart Page)                                  (line 335)
 *   5. עיצוב הודעות התקדמות - גרסה משודרגת לשלב הראשוני             (line 388)
 *
 * ----------------------------------------------------------------------------
 */
/* =================================================
   1. תיקונים כלליים (Contact Form 7 ושדות נסתרים)
   ================================================= */

/* הסרת מסגרת למכלי שדות נסתרים ב-Contact Form 7 */
fieldset.hidden-fields-container {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
}

/* ליתר ביטחון - איפוס כללי ל-fieldset בטפסים */
.wpcf7-form fieldset {
    border: none !important;
    min-width: 0;
}

/* =================================================
   2. עיצוב ממותג לטופס הרשמה ודשבורד - Triterra Farm
   ================================================= */

/* --- חלק א': טופס ההרשמה (חיצוני) --- */

/* 1. המסגרת הראשית והכותרת */
.slicewp-form {
    max-width: 750px;
    margin: 40px auto;
    padding: 50px;
    background-color: #fff;
    border: 1px solid #e5e5e5;

    /* מיתוג עליון ותחתון */
    border-top: 5px solid #4a7c59;
    border-bottom: 5px solid #4a7c59;

    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    position: relative;
}

/* הוספת הכותרת "טריטרה פארם" באמצעות CSS */
.slicewp-form::before {
    content: "טריטרה פארם - תמצית רפואת הפטריות";
    display: block;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #2f4f38; /* ירוק יער כהה */
    margin-bottom: 10px;
    font-family: assistant, sans-serif; /* פונט האתר */
}

/* הוספת תת-כותרת קטנה */
.slicewp-form::after {
    content: "טופס הצטרפות למטפלים";
    display: block;
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
}

/* ריווח עליון כדי לפנות מקום לכותרות */
.slicewp-form .slicewp-field-wrapper:first-child {
    margin-top: 20px;
}

/* 2. עיצוב השדות (Input Fields) - שיראו אותם ברור */
.slicewp-form input[type="text"],
.slicewp-form input[type="email"],
.slicewp-form input[type="password"],
.slicewp-form input[type="tel"],
.slicewp-form select,
.slicewp-form textarea {
    border: 2px solid #a0a0a0 !important; /* מסגרת אפורה ברורה */
    background-color: #fcfcfc !important;
    color: #333 !important;
    padding: 14px !important;
    border-radius: 8px !important;
    width: 100%;
    font-size: 16px;
    transition: all .3s ease;
    box-shadow: none !important;
}

/* כשלוחצים על שדה - הוא נצבע בירוק של המותג */
.slicewp-form input:focus,
.slicewp-form select:focus,
.slicewp-form textarea:focus {
    border-color: #4a7c59 !important; /* ירוק טריטרה */
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(74, 124, 89, .1) !important; /* הילה ירוקה עדינה */
    outline: none !important;
}

/* תוויות השדות (Labels) */
.slicewp-field-label {
    font-weight: 700;
    font-size: 15px;
    color: #2f4f38; /* ירוק כהה */
    margin-bottom: 8px;
    display: block;
}

/* 3. כפתור ההרשמה - המהפך הגדול */
.slicewp-form-submit button {
    background: linear-gradient(135deg, #4a7c59 0%, #2f4f38 100%) !important; /* גרדיאנט ירוק יוקרתי */
    color: #fff !important;
    padding: 16px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 50px !important; /* כפתור עגול */
    width: 100%;
    border: none !important;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(47, 79, 56, .3);
    transition: all .3s;
}

.slicewp-form-submit button:hover {
    transform: translateY(-2px); /* אפקט ריחוף */
    box-shadow: 0 6px 20px rgba(47, 79, 56, .4);
}

/* 4. קישור תנאי השימוש */
.slicewp-field-checkbox a {
    color: #4a7c59;
    font-weight: bold;
    text-decoration: underline;
}

/* --- חלק ב': הדשבורד הפנימי (למטפלים מחוברים) --- */

/* המסגרת הראשית של הדשבורד */
.slicewp-dashboard {
    max-width: 1100px;
    margin: 40px auto !important;
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border: 1px solid #f0f0f0;
    border-top: 5px solid #4a7c59; /* מיתוג גם בדשבורד */
}

/* תפריט הניווט העליון */
.slicewp-dashboard-nav {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.slicewp-dashboard-nav a {
    text-decoration: none !important;
    color: #555 !important;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #f9f9f9;
    transition: all .3s ease;
}

/* כפתור בתפריט כשעוברים עליו */
.slicewp-dashboard-nav a:hover {
    background-color: #4a7c59 !important; /* ירוק */
    color: #fff !important;
    transform: translateY(-2px);
}

/* הלינק הפעיל כרגע */
.slicewp-dashboard-nav a.active {
    background-color: #2f4f38 !important; /* ירוק כהה */
    color: #fff !important;
}

/* כרטיסיות המידע (הקוביות עם המספרים) */
.slicewp-card {
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    padding: 25px !important;
    background: #fff;
    text-align: center;
    transition: all .3s;
}

.slicewp-card:hover {
    border-color: #4a7c59 !important;
    box-shadow: 0 5px 15px rgba(76, 175, 80, .1);
}

.slicewp-card-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #2f4f38 !important; /* ירוק כהה */
    margin-bottom: 5px;
}

.slicewp-card-label {
    color: #888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* טבלאות נתונים בדשבורד */
.slicewp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.slicewp-table th {
    background-color: #f4f8f5; /* רקע ירקרק עדין לכותרת */
    padding: 15px;
    font-size: 14px;
    color: #2f4f38;
    text-align: right;
    font-weight: bold;
}

.slicewp-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: right;
}

/* --- חלק ג': תיקונים קטנים (RTL Fixes) --- */

.slicewp-dashboard-filters button,
.slicewp-dashboard-filters .slicewp-dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.slicewp-dashboard-filters svg {
    margin-left: 5px !important;
}

/* =================================================
   3. כפתור הוספה לסל מעוצב (תקף לכל המקומות באתר)
   ================================================= */
/* סלקטורים חכמים שתופסים גם את דף המוצר, גם קטגוריות וגם קרוסלות */
.single_add_to_cart_button,              /* דף מוצר */
.woocommerce ul.products li.product .button, /* דפי קטגוריה */
.add_to_cart_button,                      /* קרוסלות וכפתורים כלליים */
.wp-block-button__link {                 /* כפתורי גוטנברג */

    /* הגדרת הפונט והמשקל */
    font-family: 'Alef', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;

    /* עיצוב הכפתור - צורת גלולה */
    padding: 10px 30px !important;
    border-radius: 50px !important;
    line-height: 1 !important;

    /* חובה: סידור פנימי למרכז (פותר את בעיית המירכוז) */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;

    /* חובה: קיבוע הצבע ללבן (פותר את הבעיה שהמחיר שחור) */
    color: #fff !important;
    text-decoration: none !important; /* מסיר קו תחתון אם יש */
}

/* תיקון ספציפי למחיר הדינמי שיצרנו עם ה-JS */
.my-dynamic-price {
    font-weight: 400 !important;
    font-size: 1em !important;
    margin-right: 6px !important;  /* רווח קטן בין הטקסט למחיר */

    /* וידוא שהמחיר לבן תמיד */
    color: #fff !important;
    opacity: 1 !important;           /* שלא יהיה שקוף */
}

/* אפקט מעבר עכבר לכל הכפתורים */
.single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.add_to_cart_button:hover {
    opacity: .9;
    transform: translateY(-2px);
    color: #fff !important; /* שומר על הטקסט לבן גם במעבר עכבר */
}

/* =================================================
   4. עיצוב עמוד עגלה (Cart Page)
   ================================================= */

/* עיצוב המסגרת של העגלה (מראה כרטיס יוקרתי) */
.woocommerce-cart .woocommerce {
    max-width: 1000px;         /* רוחב מקסימלי */
    margin: 40px auto;         /* מרכוז לאמצע */
    background: #fff;       /* רקע לבן נקי */
    padding: 40px;             /* ריווח פנימי */
    border-radius: 10px;       /* פינות עגולות */
    box-shadow: 0 5px 25px rgba(0,0,0,.05); /* צללית עדינה */
}

/* צביעת כפתור "המשך לתשלום" לירוק מותג */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #4a7c59 !important; /* הירוק של טריטרה */
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px !important;       /* התאמה לכפתורי הגלולה של שאר האתר */
    padding: 15px 30px;
    transition: all .3s ease;
    display: block;                       /* מבטיח שתופס נוכחות */
    text-align: center;
}

/* אפקט כשעומדים על כפתור התשלום */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #365e42 !important; /* ירוק קצת יותר כהה */
    transform: translateY(-2px);
}

/* עיצוב כפתורים משניים בעגלה (כמו "עדכן עגלה") - שיהיו עדינים יותר */
.woocommerce-cart button.button {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border-radius: 50px !important;       /* גם פה פינות עגולות */
    font-weight: normal;
}

.woocommerce-cart button.button:hover {
    background-color: #e0e0e0 !important;
}

/* התאמה למובייל לעמוד העגלה */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce {
        padding: 15px;
        width: 95%;
    }
}

/* =================================================
   5. עיצוב הודעות התקדמות - גרסה משודרגת לשלב הראשוני
   ================================================= */

#triterra-bulk-progress {
    border-radius: 12px !important;
    padding: 18px 25px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.08) !important;
    margin: 25px 0 !important;
    border: 1px solid !important;
    transition: all .3s ease;
    text-align: right;
    line-height: 1.5;
}

/* שלב 1: "ההזדמנות" - חסר יחידות להנחה (מנטה רענן ובולט) */
#triterra-bulk-progress[style*="background-color: rgb(249, 249, 249)"],
#triterra-bulk-progress[style*="background-color:#f9f9f9"] {
    background-color: #f0fdf4 !important; /* רקע ירקרק חי */
    border-color: #4a7c59 !important;    /* מסגרת בצבע המותג */
    color: #2f4f38 !important;            /* טקסט ירוק כהה */
    border-right: 8px solid #659450 !important; /* דגש ימני חזק */
}

/* שלב 2: "כמעט שם" - הנחת 4% (זהב/כתום) */
#triterra-bulk-progress[style*="background-color: rgb(255, 243, 224)"],
#triterra-bulk-progress[style*="background-color:#fff3e0"] {
    background-color: #fffaf0 !important;
    border-color: #ff9800 !important;
    color: #855a00 !important;
    border-right: 8px solid #ff9800 !important;
}

/* שלב 3: "הנחת מקסימום" - 8% (ירוק טריטרה כהה) */
#triterra-bulk-progress[style*="background-color: rgb(232, 245, 233)"],
#triterra-bulk-progress[style*="background-color:#e8f5e9"] {
    background-color: #2f4f38 !important;
    border-color: #2f4f38 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-right: 8px solid #659450 !important;
}

/* הדגשות בתוך הטקסט */
#triterra-bulk-progress strong {
    font-size: 1.15em;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* הוספת אנימציה עדינה לשלב הראשון כדי להעיר את המשתמש */
#triterra-bulk-progress[style*="background-color: rgb(249, 249, 249)"] {
    animation: slideInRTL .5s ease-out;
}

@keyframes slideInRTL {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.header__basket button,
.header__basket div {
    pointer-events: none;
}



.section-quiz .option-microcopy {
	margin: 0;
	color: #fff;
	opacity: 0.85;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.01em;
}

@media (max-width: 991px) {
	.section-quiz .option-microcopy {
		color: #324b27;
		opacity: 0.75;
		font-size: 13px;
		padding: 0 8px;
		font-weight: 500;
	}
	.section-quiz .option-skip {
		color: #324b27;
		opacity: 0.7;
		font-size: 13px;
	}
}

/* הגדלת כפתור הוואטסאפ הכללי באתר */
#ht-ctc-chat {
    transform: scale(1.20) !important; /* הגדלה של 15% */
    transform-origin: bottom left; 
}

/* ==========================================================
   Triterra Pipette Video Block
   Vertical (9:16) YouTube Short embed
   Mobile-first, Tesla-restrained, brand-green CTA
   Append to titration-page.css OR Customizer Additional CSS
   ========================================================== */

.triterra-pipette-video {
	padding: 60px 20px;
	background: #fafafa;
}

.triterra-pipette-video__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.triterra-pipette-video__header {
	margin-bottom: 32px;
}

.triterra-pipette-video__title {
	font-size: clamp(22px, 4vw, 30px);
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 12px;
	line-height: 1.3;
}

.triterra-pipette-video__subtitle {
	font-size: clamp(15px, 2vw, 17px);
	color: #555;
	margin: 0;
	line-height: 1.5;
}

/* Player container — vertical 9:16 aspect, max 360px wide on desktop */
.triterra-pipette-video__player {
	position: relative;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	background: #000;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.triterra-pipette-video__player:hover,
.triterra-pipette-video__player:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
	outline: none;
}

.triterra-pipette-video__player:focus-visible {
	outline: 3px solid #324b27;
	outline-offset: 4px;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 9 / 16) {
	.triterra-pipette-video__player {
		padding-bottom: 177.78%; /* 16/9 inverted */
		height: 0;
	}
}

/* Poster image fills the container */
.triterra-pipette-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play button — centered, brand-green */
.triterra-pipette-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease;
	z-index: 2;
	padding: 0;
}

.triterra-pipette-video__play svg {
	width: 40px;
	height: 28px;
}

.triterra-pipette-video__player:hover .triterra-pipette-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

/* Duration badge — bottom-right corner */
.triterra-pipette-video__duration {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	z-index: 2;
	font-variant-numeric: tabular-nums;
}

/* Playing state — hide overlay UI */
.triterra-pipette-video__player.is-playing .triterra-pipette-video__play,
.triterra-pipette-video__player.is-playing .triterra-pipette-video__duration,
.triterra-pipette-video__player.is-playing .triterra-pipette-video__poster {
	display: none;
}

.triterra-pipette-video__player.is-playing {
	cursor: default;
}

.triterra-pipette-video__player.is-playing:hover {
	transform: none;
}

/* Caption below player */
.triterra-pipette-video__caption {
	max-width: 540px;
	margin: 28px auto 0;
	font-size: clamp(14px, 1.8vw, 16px);
	line-height: 1.6;
	color: #444;
}

.triterra-pipette-video__caption strong {
	color: #324b27;
	font-weight: 700;
}

/* RTL & narrow mobile tweaks */
@media (max-width: 480px) {
	.triterra-pipette-video {
		padding: 40px 16px;
	}

	.triterra-pipette-video__player {
		max-width: 280px;
	}

	.triterra-pipette-video__play {
		width: 64px;
		height: 64px;
	}

	.triterra-pipette-video__play svg {
		width: 32px;
		height: 22px;
	}
}

/* === TT-ATC-ORANGE (staging test 2026-07-25): add-to-cart buttons in the side-cart basket orange.
   Triple-class specificity beats the WPCode inline rules (.single-product .single_add_to_cart_button #2f4f38 !important). === */
html body .single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button,
html body a.add_to_cart_button.add_to_cart_button.add_to_cart_button,
html body a.product_type_gift-card.product_type_gift-card.product_type_gift-card.product_type_gift-card,
html body .single_add_to_cart_button_gift.single_add_to_cart_button_gift.single_add_to_cart_button_gift {
  background-color: #e87a00 !important;
  border-color: #e87a00 !important;
}
html body .single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button:hover,
html body a.add_to_cart_button.add_to_cart_button.add_to_cart_button:hover,
html body a.product_type_gift-card.product_type_gift-card.product_type_gift-card.product_type_gift-card:hover,
html body .single_add_to_cart_button_gift.single_add_to_cart_button_gift.single_add_to_cart_button_gift:hover {
  background-color: #c96a00 !important;
}

/* === TT: the variation-swatches plugin hides its raw <select> via .cfvsw-hidden-select,
   but WP Rocket used-CSS strips that rule on archive pages and the dropdown leaks out.
   Inline here so it survives (2026-07-25). === */
.cfvsw-hidden-select { display: none !important; }

/* gift-card loop: keep the label readable on the solid CTA (the theme's ghost-button rule wins on color otherwise) */
html body a.product_type_gift-card.product_type_gift-card.product_type_gift-card.product_type_gift-card {
  color: #fff !important;
}

/* === TT-GOALS-STRIP (staging 2026-07-25): the shop-by-goal pills were an unlabeled 2x4
   rainbow block that read as decoration. Now: a labeled, single-row swipeable chip strip
   in the brand language; the active goal chip fills orange (the action color). === */
/* clamp: without it the nowrap chip row inflates .container-l beyond the viewport on
   mobile (the strip pushed the page wide instead of scrolling inside itself) */
.section-products__tags .container-l {
  max-width: 100vw !important;
  overflow: hidden;
}
.section-products__tags .list {
  max-width: 100% !important;
}
.section-products__tags .tt-goals-head {
  /* now an h2 element (it is the question this page answers — real heading value for search/AI),
     so neutralise the browser's default h2 sizing/margins */
  font-size: 15px;
  font-weight: 700;
  color: #014421;
  margin: 0 16px 10px; /* this section has no side padding on mobile — keep off the viewport edge */
}
.section-products__tags .list {
  display: flex !important;
  justify-content: flex-start !important; /* the old design centered the pill grid — centered + overflow makes the strip open mid-scroll on mobile */
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 16px 10px !important;
  scroll-padding-inline-start: 16px;
  scroll-snap-type: x proximity;
}
.section-products__tags .list::-webkit-scrollbar { display: none; }

/* tt-chips-fade — mobile scroll affordance for the goal strip.
   No scrollbar furniture: the strip itself fades out at the leading (left, RTL) edge, so the
   half-visible chip reads as "there is more this way". A mask is used rather than an overlay so
   it works over any background and scrolls correctly with the content. */
@media (max-width: 600px) {
  .section-products__tags .list {
    -webkit-mask-image: linear-gradient(to left, #000 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to left, #000 84%, rgba(0,0,0,0) 100%);
    padding-left: 26px !important;   /* room for the fade so the last chip is never cut mid-word */
  }
}
html body .section-products__tags .list a.item.item {
  flex: 0 0 auto !important;
  /* solid brand green = "this is a control you press". Keeps the three-role colour system
     distinct: green = choose, orange = commerce action / active, quiet = information. */
  background: #324B27 !important;          /* kills the inline rainbow colors */
  color: #ffffff !important;
  border: 1.5px solid #324B27 !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
  transition: background .15s ease, border-color .15s ease;
}
html body .section-products__tags .list a.item.item:hover {
  background: #26391d !important;
  border-color: #26391d !important;
  color: #ffffff !important;
}
html body .section-products__tags .list a.item.item.tt-active {
  background: #4A6672 !important;
  border-color: #4A6672 !important;
  color: #fff !important;
}

/* tt: the category side-title ("המקור עצמו.") had no styling at all and read as an orphan
   line between the goal strip and the grid — give it its intended role: a brand statement. */
.section-products__side {
  font-size: 22px;
  font-weight: 700;
  color: #014421;
  text-align: right;
  margin: 26px 16px 18px;
  letter-spacing: .2px;
}
@media (min-width: 768px) {
  .section-products__side { font-size: 26px; margin: 34px 2px 22px; }
}