Skip to main content

GiftShop 2026

Документ
https://docs.google.com/document/d/1pO95UlSEafPDhxNuz5bwMacJa1eSUrzgRosgSbMc8EM/edit?tab=t.kgw9cb18t0qr 

Тренинг

https://fitnessmama.school/teach/control/stream/view/id/935405598/editable/1 

 

 

 

 

 

 

 

Html GiftShop 2026

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadouri pentru puncte | Fitness Mama</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root { --accent-pink:#ff2d87; --accent-green:#00f0a8; --soft-green:#e1fff4; --text-main:#111; --text-secondary:#777; --content-width:480px; --bg-light:#f6f6f6; --card-radius:28px; }
        * { box-sizing:border-box; margin:0; padding:0; }
        body { font-family:'Inter',sans-serif; background:#fff; color:var(--text-main); display:flex; flex-direction:column; align-items:center; }
        .site-header { width:100%; max-width:var(--content-width); padding:16px 20px 14px; background:#fff; position:sticky; top:0; z-index:1000; }
        .header-top-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; }
        .header-brand-group { display:flex; align-items:center; justify-content:flex-start; gap:12px; min-width:0; flex:1; }
        .header-right-group { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-shrink:0; }
        .header-logo { display:none; width:60px; height:auto; object-fit:contain; flex-shrink:0; }
        .main-brand-title { font-size:18px; font-weight:800; letter-spacing:-0.6px; text-align:left; white-space:nowrap; }
        .main-brand-title span { color:var(--accent-pink); }
        .header-nav { display:none; align-items:center; gap:10px; flex-wrap:wrap; }
        .header-nav-item { position:relative; }
        .header-nav-link { color:var(--text-main); text-decoration:none; font-size:14px; font-weight:700; padding:10px 4px; border-radius:0; background:transparent; border:none; transition:color .2s ease,opacity .2s ease; opacity:.82; }
        .header-nav-link:hover { color:var(--accent-pink); opacity:1; }
        .desktop-catalog-menu { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:320px; padding:12px; background:#fff; border:1px solid rgba(17,17,17,.08); border-radius:22px; box-shadow:0 18px 44px rgba(17,17,17,.1); z-index:1200; overflow:hidden; }
        .desktop-catalog-scroll { max-height:70vh; overflow:auto; padding:2px 8px 2px 2px; scrollbar-width:thin; scrollbar-color:rgba(255,45,135,.45) rgba(17,17,17,.06); }
        .desktop-catalog-scroll::-webkit-scrollbar { width:8px; }
        .desktop-catalog-scroll::-webkit-scrollbar-track { background:rgba(17,17,17,.05); border-radius:999px; }
        .desktop-catalog-scroll::-webkit-scrollbar-thumb { background:rgba(255,45,135,.45); border-radius:999px; border:2px solid rgba(255,255,255,.9); }
        .desktop-catalog-scroll::-webkit-scrollbar-thumb:hover { background:rgba(255,45,135,.62); }
        .desktop-catalog-group + .desktop-catalog-group { margin-top:12px; padding-top:12px; border-top:1px solid rgba(17,17,17,.06); }
        .desktop-catalog-label { display:block; margin-bottom:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-pink); }
        .desktop-catalog-option { display:block; padding:8px 10px; border-radius:12px; color:var(--text-main); text-decoration:none; font-size:14px; font-weight:600; line-height:1.35; }
        .desktop-catalog-option:hover { background:#fff5fa; color:var(--accent-pink); }
        .balance-badge { background:var(--soft-green); padding:7px 12px; border-radius:18px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
        .balance-prefix { display:none; font-size:14px; font-weight:800; color:var(--text-main); line-height:1.05; }
        .balance-num { font-size:18px; font-weight:800; color:var(--accent-green); line-height:1; }
        .balance-label { font-size:12px; font-weight:800; text-transform:none; line-height:1.05; }
        .catalog-box { display:flex; align-items:center; gap:10px; background:var(--bg-light); padding:10px 14px; border-radius:16px; }
        .catalog-label { font-size:12px; font-weight:700; color:var(--text-secondary); }
        .select-category { width:100%; border:none; background:transparent url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23777' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center; appearance:none; font-size:14px; font-weight:700; cursor:pointer; outline:none; padding-right:20px; min-width:0; }
        .main-content { width:100%; max-width:var(--content-width); padding:10px 20px 60px; }
        .title-section,.content-block,.contact-section,.timeline-section,.footer-brand { margin-bottom:30px; }
        .title-section h1,.block-title,.contact-title,.timeline-title { font-size:32px; font-weight:800; letter-spacing:-1px; margin-bottom:8px; }
        .title-section p,.block-text,.contact-text,.timeline-text-intro { font-size:14px; color:var(--text-secondary); line-height:1.5; }
        .block-text { margin-bottom:18px; }
        .slider-wrapper { position:relative; margin-bottom:24px; }
        .photo-outline { display:none; }
        .slider-container { position:relative; z-index:1; border-radius:24px; overflow:hidden; aspect-ratio:9 / 16; background:#f9f9f9; box-shadow:0 10px 30px rgba(0,0,0,0.05); }
        .slides { display:flex; width:100%; height:100%; transition:transform .5s ease-in-out; }
        .slide { flex:0 0 100%; width:100%; height:100%; background-color:#f3f3f3; background-size:cover; background-position:center; }
        .slide-placeholder { display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(180deg, #f8f8f8 0%, #efefef 100%); color:#8d8d8d; text-align:center; font-size:18px; font-weight:700; line-height:1.35; }
        .nav-arrows { position:absolute; top:50%; width:100%; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 15px; z-index:5; pointer-events:none; }
        .arrow { width:36px; height:36px; background:rgba(255,255,255,.7); backdrop-filter:blur(4px); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; border:none; box-shadow:0 2px 10px rgba(0,0,0,.1); }
        .arrow::after { content:''; width:8px; height:8px; border-top:2.5px solid var(--text-main); border-right:2.5px solid var(--text-main); display:block; }
        .prev::after { transform:rotate(-135deg); margin-left:3px; }
        .next::after { transform:rotate(45deg); margin-right:3px; }
        .gift-item { position:relative; padding-bottom:34px; margin-bottom:34px; }
        .gift-item::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(255,45,135,0), rgba(255,45,135,.22) 18%, rgba(255,45,135,.38) 50%, rgba(255,45,135,.22) 82%, rgba(255,45,135,0)); }
        .gift-catalog .gift-item:last-child::after { display:none; }
        .product-meta { text-align:left; margin-top:20px; margin-bottom:30px; }
        .category-tag { font-size:11px; font-weight:700; color:var(--accent-pink); text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px; }
        .product-name { font-size:24px; font-weight:800; margin-bottom:8px; }
        .product-desc { color:var(--text-secondary); font-size:15px; margin-bottom:20px; line-height:1.5; }
        .custom-select-wrapper { width:100%; margin-bottom:8px; position:relative; }
        .select-trigger { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border:1.5px solid #000; border-radius:12px; font-size:16px; font-weight:600; background:#fff; cursor:pointer; }
        .custom-options { position:absolute; top:100%; left:0; right:0; background:#fff; border:1.5px solid #000; border-top:none; border-bottom-left-radius:12px; border-bottom-right-radius:12px; display:none; z-index:15; overflow:hidden; }
        .custom-select-wrapper.open .custom-options { display:block; }
        .custom-select-wrapper.open .select-trigger { border-bottom-left-radius:0; border-bottom-right-radius:0; }
        .custom-option { padding:12px 18px; cursor:pointer; font-weight:500; background:#fff; }
        .custom-option:hover { background:var(--bg-light); color:var(--accent-pink); }
        .size-chart-link { font-size:12px; color:var(--text-main); text-decoration:underline; font-style:italic; display:block; margin-bottom:25px; }
        .purchase-card,.rules-card,.contact-card { background:var(--bg-light); border-radius:var(--card-radius); }
        .purchase-card { padding:30px 25px; text-align:center; }
        .price-text { font-size:24px; font-weight:800; margin-bottom:20px; display:block; }
        .btn-buy,.btn-question,.btn-season { width:100%; padding:18px; border-radius:18px; border:none; background:var(--accent-pink); color:#fff; font-size:20px; font-weight:800; box-shadow:0 4px 15px rgba(255,45,135,.3); cursor:pointer; }
        .btn-season { display:block; text-align:center; text-decoration:none; }
        .gift-catalog { display:grid; gap:38px; margin-bottom:34px; }
        .gift-note { display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; background:#fff; font-size:12px; font-weight:700; color:var(--text-main); margin-bottom:18px; }
        .rules-card { padding:14px 14px 16px; }
        .contact-copy { display:grid; gap:14px; }
        .contact-note { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:var(--soft-green); color:#0b8c65; font-size:12px; font-weight:800; width:max-content; }
        .contact-points { display:grid; gap:10px; margin-top:8px; }
        .contact-point { font-size:14px; line-height:1.5; color:var(--text-secondary); }
        .contact-point strong { color:var(--text-main); }
        .contact-card { padding:24px 22px; }
        .contact-text { margin-bottom:18px; }
        .rules-list { display:grid; gap:10px; margin-top:0; }
        .rule-item { padding:18px 20px; border:1px solid rgba(0,0,0,.03); border-radius:22px; background:rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(17,17,17,.025); }
        .rule-step { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#fff; color:var(--accent-pink); font-size:12px; font-weight:800; margin-bottom:10px; }
        .rule-title { font-size:16px; font-weight:700; margin-bottom:6px; }
        .rule-text { font-size:14px; line-height:1.5; color:var(--text-secondary); }
        .rule-points { margin-top:12px; display:grid; gap:10px; }
        .rule-point { font-size:14px; line-height:1.5; color:var(--text-secondary); }
        .rule-point strong { color:var(--text-main); }
        .timeline-shell { background:var(--bg-light); border-radius:var(--card-radius); padding:20px 18px; margin-top:18px; }
        .timeline-track { position:relative; display:grid; gap:12px; }
        .timeline-track::before { content:''; position:absolute; left:14px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, rgba(255,45,135,.55), rgba(255,45,135,.08)); }
        .timeline-item { position:relative; margin-left:34px; background:#fff; border:1px solid rgba(0,0,0,.04); border-radius:22px; padding:14px 16px 14px 18px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .35s ease; opacity:0; transform:translateY(10px); cursor:pointer; }
        .timeline-item.visible { opacity:1; transform:translateY(0); }
        .timeline-item::before { content:''; position:absolute; left:-27px; top:18px; width:14px; height:14px; border-radius:50%; background:#fff; border:4px solid var(--accent-pink); box-shadow:0 0 0 4px rgba(255,45,135,.12); }
        .timeline-item:hover,.timeline-item.active { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.06); border-color:rgba(255,45,135,.22); }
        .timeline-date { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:var(--soft-green); color:#0b8c65; font-size:11px; font-weight:700; margin-bottom:8px; }
        .timeline-name { font-size:17px; font-weight:800; line-height:1.2; margin-bottom:6px; }
        .timeline-action { margin-top:16px; }
        .form-grid { display:grid; gap:14px; margin:0 0 18px; }
        .form-field { display:grid; gap:8px; }
        .form-label { font-size:13px; font-weight:700; }
        .form-input,.form-textarea { width:100%; border:1.5px solid #e6e6e6; border-radius:16px; background:#fff; padding:15px 16px; font:inherit; color:var(--text-main); outline:none; }
        .form-textarea { min-height:140px; resize:vertical; }
        .size-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(17,17,17,.45); backdrop-filter:blur(4px); z-index:1200; }
        .size-modal.open { display:flex; }
        .size-modal-dialog { width:min(100%, 440px); max-width:100%; background:#fff; border-radius:28px; padding:24px 20px 20px; box-shadow:0 24px 60px rgba(17,17,17,.18); overflow:hidden; }
        .size-modal-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
        .size-modal-title { font-size:24px; font-weight:800; letter-spacing:-.6px; }
        .size-modal-close { width:38px; height:38px; border:none; border-radius:50%; background:var(--bg-light); color:var(--text-main); font-size:22px; line-height:1; cursor:pointer; }
        .size-modal-note { font-size:14px; line-height:1.45; color:var(--text-secondary); margin-bottom:16px; max-width:320px; }
        .size-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; }
        .size-table { width:100%; min-width:380px; border-collapse:collapse; overflow:hidden; border-radius:18px; background:var(--bg-light); }
        .size-table th,.size-table td { padding:14px 10px; font-size:13px; vertical-align:middle; }
        .size-table thead th { text-align:center; font-weight:800; white-space:nowrap; }
        .size-table thead th:first-child { text-align:left; }
        .size-table tbody th { width:64px; text-align:center; font-weight:800; white-space:nowrap; }
        .size-table td { color:var(--text-secondary); text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
        .size-table tr + tr td,.size-table tr + tr th { border-top:1px solid rgba(17,17,17,.06); }
        .footer-brand { padding:8px 0 6px; display:flex; justify-content:center; }
        .footer-logo-image { display:block; width:30%; height:auto; object-fit:contain; margin:0 auto; }
        @media (min-width: 1100px) {
            .site-header,.main-content { max-width:1400px; }
            .site-header { padding:18px 32px 16px; }
            .main-content { padding:18px 32px 80px; }
            .header-logo { display:none; width:124px; }
            .header-top-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-bottom:14px; }
            .header-brand-group { flex-direction:row; justify-self:start; align-items:center; gap:0; margin-left:-6px; }
            .header-right-group { display:contents; }
            .main-brand-title { font-size:28px; line-height:1; text-align:left; margin:0; }
            .main-brand-title span { color:var(--accent-pink); }
            .header-nav { display:flex; justify-content:center; align-items:center; gap:28px; margin-top:0; justify-self:center; }
            .header-nav-link { font-size:18px; font-weight:800; }
            .balance-badge { justify-self:end; margin-top:0; }
            .balance-prefix { display:inline; }
            .header-nav-item.catalog-item:hover .desktop-catalog-menu,
            .header-nav-item.catalog-item:focus-within .desktop-catalog-menu { display:block; }
            .catalog-box { display:none; }
            .catalog-box { width:min(560px, 100%); padding:10px 16px; border-radius:18px; }
            .catalog-label { display:none; }
            .select-category { font-size:15px; font-weight:700; }
            .title-section p,.block-text,.contact-text,.timeline-text-intro { font-size:18px; line-height:1.65; }
            .title-section p { max-width:980px; }
            .gift-catalog { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 28px; align-items:start; }
            .gift-catalog .gift-item { display:flex; flex-direction:column; height:100%; margin-bottom:0; padding-bottom:0; }
            .gift-catalog .gift-item::after { display:none; }
            .gift-catalog .product-meta { display:flex; flex:1; flex-direction:column; margin-bottom:0; }
            .gift-catalog .product-name { font-size:22px; line-height:1.15; min-height:52px; }
            .gift-catalog .purchase-card { margin-top:auto; }
            .gift-catalog .slider-container { aspect-ratio:9 / 16; }
            .content-block .block-text { max-width:760px; margin-bottom:26px; }
            .rules-card { padding:22px; border-radius:36px; }
            .rules-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
            .rule-item { min-height:100%; padding:24px 24px 26px; border-radius:28px; box-shadow:0 16px 30px rgba(17,17,17,.04); }
            .rule-step { width:34px; height:34px; font-size:17px; margin-bottom:14px; }
            .rule-title { font-size:18px; margin-bottom:10px; }
            .rule-text,.rule-point { font-size:15px; }
            .timeline-shell { padding:34px 28px 26px; border-radius:36px; }
            .timeline-text-intro { max-width:820px; }
            .timeline-track { grid-template-columns:1fr 1fr; gap:42px 88px; }
            .timeline-track::before { left:50%; top:4px; bottom:4px; transform:translateX(-50%); }
            .timeline-item { width:min(260px, 100%); margin-left:0; padding:14px 18px 16px; align-self:start; }
            .timeline-item:nth-child(odd) { grid-column:2; justify-self:start; margin-left:34px; text-align:left; }
            .timeline-item:nth-child(even) { grid-column:1; justify-self:end; margin-right:34px; text-align:right; }
            .timeline-item:nth-child(3) { margin-top:56px; }
            .timeline-item:nth-child(4) { margin-top:56px; }
            .timeline-item:nth-child(5) { margin-top:112px; }
            .timeline-item::before { left:auto; top:50%; transform:translateY(-50%); }
            .timeline-item:nth-child(odd)::before { left:-55px; right:auto; }
            .timeline-item:nth-child(even)::before { right:-55px; left:auto; top:26%; }
            .timeline-item:nth-child(even) .timeline-date { margin-left:auto; }
            .timeline-name { font-size:15px; margin-bottom:0; }
            .timeline-date { font-size:10px; margin-bottom:10px; }
            .timeline-action { margin-top:24px; max-width:420px; margin-left:auto; margin-right:auto; }
            .contact-section { display:grid; grid-template-columns:minmax(320px, 420px) minmax(520px, 760px); justify-content:space-between; column-gap:52px; align-items:start; }
            .contact-copy { grid-column:1; max-width:420px; padding-top:8px; }
            .contact-title { margin-bottom:0; }
            .contact-text { max-width:420px; }
            .contact-point { font-size:16px; line-height:1.6; }
            .contact-card { grid-column:2; width:100%; max-width:none; margin:0; padding:28px 30px; border-radius:32px; }
            .form-grid { gap:18px; margin-bottom:20px; }
            .form-textarea { min-height:220px; }
            .btn-question { max-width:420px; margin:0 auto; display:block; }
            .title-section,.content-block,.contact-section,.timeline-section,.footer-brand { margin-bottom:44px; }
            .footer-logo-image { width:14%; }
        }
        @media (max-width: 640px) {
            .size-modal { padding:14px; }
            .size-modal-dialog { width:100%; padding:20px 14px 16px; border-radius:24px; }
            .size-modal-top { margin-bottom:14px; }
            .size-modal-title { font-size:18px; letter-spacing:-.3px; }
            .size-modal-close { width:34px; height:34px; font-size:20px; flex-shrink:0; }
            .size-modal-note { font-size:13px; max-width:none; margin-bottom:12px; }
            .size-table-wrap { overflow-x:hidden; }
            .size-table { min-width:0; width:100%; table-layout:fixed; }
            .size-table th,.size-table td { padding:10px 4px; font-size:11px; }
            .size-table td { white-space:normal; line-height:1.25; }
            .size-table thead th:first-child,
            .size-table tbody th { width:42px; }
            .size-table thead th:nth-child(2) { width:34px; }
        }
    </style>
</head>
<body>
    <header class="site-header">
        <div class="header-top-row">
            <div class="header-brand-group">
                <h1 class="main-brand-title">Giftshop <span>Fitness Mama</span></h1>
            </div>
            <div class="header-right-group">
                <nav class="header-nav" aria-label="Secțiuni">
                    <div class="header-nav-item catalog-item">
                        <a class="header-nav-link" href="#catalog">Catalog</a>
                        <div class="desktop-catalog-menu" aria-label="Catalog desktop">
                            <div class="desktop-catalog-scroll">
                                <div class="desktop-catalog-group">
                                    <span class="desktop-catalog-label">Haine</span>
                                    <a class="desktop-catalog-option" href="#swallow-mamasita">Tricou Swallow Turcoaz Mamasita</a>
                                    <a class="desktop-catalog-option" href="#swallow-winner">Tricou Swallow Negru Winner</a>
                                    <a class="desktop-catalog-option" href="#boyfriend-winner">Tricou Boyfriend Negru Winner</a>
                                    <a class="desktop-catalog-option" href="#swallow-get-fit">Tricou Swallow Alb Get Fit</a>
                                    <a class="desktop-catalog-option" href="#swallow-iron-baby">Tricou Swallow Fucsia Iron Baby</a>
                                    <a class="desktop-catalog-option" href="#swallow-no-excuses">Tricou Swallow Albastru No Excuses</a>
                                    <a class="desktop-catalog-option" href="#boyfriend-no-excuses">Tricou Boyfriend Albastru No Excuses</a>
                                    <a class="desktop-catalog-option" href="#boyfriend-iron-baby">Tricou Boyfriend Fucsia Iron Baby</a>
                                    <a class="desktop-catalog-option" href="#boyfriend-mamasita">Tricou Boyfriend Turcoaz Mamasita</a>
                                    <a class="desktop-catalog-option" href="#top-black">Black top</a>
                                    <a class="desktop-catalog-option" href="#top-white">White top</a>
                                    <a class="desktop-catalog-option" href="#leggings-black">Black leggings</a>
                                </div>
                                <div class="desktop-catalog-group">
                                    <span class="desktop-catalog-label">Produse digitale</span>
                                    <a class="desktop-catalog-option" href="#skin-cleaning">Curățarea pielii feței și a gâtului</a>
                                    <a class="desktop-catalog-option" href="#skin-diagnostic">Diagnostic - descoperă tipul tău de piele</a>
                                    <a class="desktop-catalog-option" href="#face-lifting">Masaj facial Lifting</a>
                                    <a class="desktop-catalog-option" href="#planer-box">Planer Box</a>
                                    <a class="desktop-catalog-option" href="#five-techniques">5 tehnici care te ajută să nu te mai compari niciodată cu altcineva</a>
                                    <a class="desktop-catalog-option" href="#checklist-analyses">Check list analize</a>
                                    <a class="desktop-catalog-option" href="#travel-pack">Travel pack (3 antrenamente)</a>
                                    <a class="desktop-catalog-option" href="#flexible-back">Antrenament pentru spate flexibil</a>
                                    <a class="desktop-catalog-option" href="#sexual-energy">Practica pentru creșterea energiei sexuale</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="header-nav-link" href="#rules">Reguli</a>
                    <a class="header-nav-link" href="#programs">Programe</a>
                </nav>
                <div class="balance-badge"><span class="balance-prefix">Soldul tău:</span><span class="balance-num">500</span><span class="balance-label">puncte</span></div>
            </div>
        </div>
        <div class="catalog-box" id="catalog">
            <span class="catalog-label">Catalog:</span>
            <select class="select-category">
                <optgroup label="Haine">
                    <option selected value="swallow-mamasita">Tricou Swallow Turcoaz Mamasita</option>
                    <option value="swallow-winner">Tricou Swallow Negru Winner</option>
                    <option value="boyfriend-winner">Tricou Boyfriend Negru Winner</option>
                    <option value="swallow-get-fit">Tricou Swallow Alb Get Fit</option>
                    <option value="swallow-iron-baby">Tricou Swallow Fucsia Iron Baby</option>
                    <option value="swallow-no-excuses">Tricou Swallow Albastru No Excuses</option>
                    <option value="boyfriend-no-excuses">Tricou Boyfriend Albastru No Excuses</option>
                    <option value="boyfriend-iron-baby">Tricou Boyfriend Fucsia Iron Baby</option>
                    <option value="boyfriend-mamasita">Tricou Boyfriend Turcoaz Mamasita</option>
                    <option value="top-black">Black top</option>
                    <option value="top-white">White top</option>
                    <option value="leggings-black">Black leggings</option>
                </optgroup>
                <optgroup label="Produse digitale">
                    <option value="skin-cleaning">Curățarea pielii feței și a gâtului</option>
                    <option value="skin-diagnostic">Diagnostic - descoperă tipul tău de piele</option>
                    <option value="face-lifting">Masaj facial Lifting</option>
                    <option value="planer-box">Planer Box</option>
                    <option value="five-techniques">5 tehnici care te ajuta sa nu te mai compari niciodata cu altcineva</option>
                    <option value="checklist-analyses">Check list analize</option>
                    <option value="travel-pack">Travel pack (3 antrenamente)</option>
                    <option value="flexible-back">Antrenament pentru spate flexibil</option>
                    <option value="sexual-energy">Practica pentru creșterea energiei sexuale</option>
                </optgroup>
            </select>
        </div>
    </header>
    <main class="main-content">
        <section class="title-section">
            <h1>Cadouri pentru punctele tale</h1>
            <p>Participă la programele Fitness Mama, adună puncte și schimbă-le pe cadourile preferate:<br>haine branduite, ghiduri utile, antrenamente și bonusuri plăcute pentru tine.</p>
        </section>

        <section class="gift-catalog">
            <article class="gift-item" id="swallow-mamasita">
                <div class="slider-wrapper">
                    <div class="photo-outline"></div>
                    <div class="slider-container">
                        <div class="slides" data-slide-index="0">
                            <div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/a52599104e8f51a44d752c8d731e8db8.jpeg"></div>
                            <div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/e455476c905ef4ac6652846af74b9a48.jpg"></div>
                            <div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/d2a434b8a21fd2c4f64e30649166ed87.jpg"></div>
                            <div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/06358ae5a957cc81932040ccba33c890.jpeg"></div>
                        </div>
                        <div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div>
                    </div>
                </div>
                <div class="product-meta">
                    <span class="category-tag">Haine</span>
                    <h3 class="product-name">Tricou Swallow Turcoaz Mamasita</h3>
                    <div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M, L</span><span>▼</span></div></div>
                    <a href="#" class="size-chart-link">Tabel de mărimi</a>
                    <div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div>
                </div>
            </article>
            <article class="gift-item" id="swallow-winner"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/948a4bb2054aadcd395adc3d344a7fcf.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/7d91df58fc1759e2ec24638039c8407d.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/090f7dd5d14f10f2e7780aba41494137.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Swallow Negru Winner</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M, L</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="boyfriend-winner"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/59b8b25acf16febe30604d3e25baefc3.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/8cbbeff0f6ff611c5ef8b70f681e6dff.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/5d701dff102c1f87aa7a2d510f36435d.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Boyfriend Negru Winner</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="swallow-get-fit"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/6fee810f1ccf87ca9df76207feef79ee.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/1e31220db44043655dd34024f18f2800.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Swallow Alb Get Fit</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M, L</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="swallow-iron-baby"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/3c5a49b583b812821fdd4e7076d1ef04.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/eb778ff3cb25b702fa7ab962807d7316.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Swallow Fucsia Iron Baby</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M, L</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="swallow-no-excuses"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/1299c0f287cdbe45665de7532aec64ca.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/f3a367b345ce7982057c9ee3cfa29637.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Swallow Albastru No Excuses</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M, L</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="boyfriend-no-excuses"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/422b87e1c84f1dabdce85b19a3b6d190.jpeg"></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Boyfriend Albastru No Excuses</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="boyfriend-iron-baby"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/c878a37c1f5a10b42462fc5878551162.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Boyfriend Fucsia Iron Baby</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="boyfriend-mamasita"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/4468a04a01955bbc175020fa45a49b11.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/282e41e15ef3057e27672594d1af1902.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/c409f5e28fc675c734f734ebb3766ab9.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/fb4bf9ad1a4172c66a7a6b2432c33716.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Tricou Boyfriend Turcoaz Mamasita</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">560 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="top-black"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/5213d9e6c37c35927eed3541910b27e0.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/3ec7995ad4bc874cc6a806e3844cf517.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Black top</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: XS, S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">490 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="top-white"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slides" data-slide-index="0"><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/773becaa3647c9c8ca30fb8365372a31.jpg"></div><div class="slide" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/2c27ca8827e2498d68ccf034442b2015.jpg"></div></div><div class="nav-arrows"><button class="arrow prev" onclick="moveLocalSlide(this,-1)"></button><button class="arrow next" onclick="moveLocalSlide(this,1)"></button></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">White top</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: XS, S, M</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">490 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="leggings-black"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/97d7eca170b8378017c3853cd4aaf4c7.jpeg"></div></div></div><div class="product-meta"><span class="category-tag">Haine</span><h3 class="product-name">Black leggings</h3><div class="custom-select-wrapper"><div class="select-trigger"><span>Mărimi: 2XS, XS, S, M, L</span><span>▼</span></div></div><a href="#" class="size-chart-link">Tabel de mărimi</a><div class="purchase-card"><span class="price-text">500 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="skin-cleaning"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/66d362e8f4e4eb3e2f519a9c49510bef.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Curățarea pielii feței și a gâtului</h3><p class="product-desc">Lecție video de la cosmetologul Daria Goroșenco despre cum să-ți cureți corect pielea feței și a gâtului.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">300 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="skin-diagnostic"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/4b154e7df177b9396b2724aa492df13e.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Diagnostic - descoperă tipul tău de piele</h3><p class="product-desc">Un cadou practic, care te ajută să-ți înțelegi mai bine pielea și să alegi îngrijirea potrivită tipului tău de ten.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">520 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="face-lifting"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/19bfc8fe27f2b29f41683e59629762b0.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Masaj facial Lifting</h3><p class="product-desc">Un complex de mișcări cu efect de lifting, care reduc ridurile și cresc sinteza de propriul colagen și elastină.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">250 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="planer-box"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/c5733a4c4c3e10d36a907c3215289ecc.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Planer Box</h3><p class="product-desc">Acest box conține trackere și plannere care te ajută să-ți formezi obiceiuri sănătoase și să-ți organizezi activitățile.</p><span class="gift-note">Format: material digital</span><div class="purchase-card"><span class="price-text">110 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="five-techniques"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/b27db95f7e7b28cf5103b83f967d89eb.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">5 tehnici care te ajută să nu te mai compari niciodată cu altcineva</h3><p class="product-desc">Ghid cu 5 tehnici care te vor ajuta să-ți valorifici punctele forte și potențialul, dar și să te bucuri de viață.</p><span class="gift-note">Format: material digital</span><div class="purchase-card"><span class="price-text">110 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="checklist-analyses"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/9d1291a8703df379835e05e1d2ed3ea3.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Check list analize</h3><p class="product-desc">Vezi lista de analize pe care ți le recomand ție și familiei tale, pentru ca să ții sub control starea voastră de sănătate.</p><span class="gift-note">Format: material digital</span><div class="purchase-card"><span class="price-text">300 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="travel-pack"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/db666d3e9390640b6a382461922f72df.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Travel pack (3 antrenamente)</h3><p class="product-desc">Ia cu tine în vacanță 3 seturi de exerciții pe care le poți face oriunde, oricând, în doar câteva minute.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">500 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="flexible-back"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/4083cc9d62953c1eda0b0e46d9830721.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Antrenament pentru spate flexibil</h3><p class="product-desc">Un antrenament video de 20 de minute pentru ca să-ți scoți tensiunea din spate când simți că e încordat.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">350 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
            <article class="gift-item" id="sexual-energy"><div class="slider-wrapper"><div class="photo-outline"></div><div class="slider-container"><div class="slide" style="width:100%;" data-bg="https://fitnessmama.school/pl/fileservice/user/file/download/h/aa1c8bbf54e97d19b6f22c4a13040008.jpg"></div></div></div><div class="product-meta"><span class="category-tag">Produs digital</span><h3 class="product-name">Practica pentru creșterea energiei sexuale</h3><p class="product-desc">Antrenament video + meditație ghidată pentru deschiderea sexualității și creșterea libidoului.</p><span class="gift-note">Se va deschide automat în contul personal după schimb</span><div class="purchase-card"><span class="price-text">350 puncte</span><button class="btn-buy">Schimbă pe puncte</button></div></div></article>
        </section>

        <section class="content-block" id="rules">
            <h2 class="block-title">Cum funcționează sistemul de puncte</h2>
            <p class="block-text">Ne apreciem implicarea în tine! Special pentru participantele programelor noastre sezoniere am creat un sistem intern de recompense. Antrenează-te, mănâncă echilibrat și transformă-ți eforturile în cadouri reale.</p>
            <div class="rules-card">
                <div class="rules-list">
                    <div class="rule-item"><span class="rule-step">01</span><h3 class="rule-title">Cum câștigi puncte?</h3><p class="rule-text">Rezultatele tale din program se transformă în valuta Gift Shop în timp real. Toate activitățile sunt înregistrate în <strong>grupurile Telegram</strong> închise ale cursurilor sezoniere pe tariful PRO, iar uneori și pe Basic, dacă acest lucru este prevăzut de reguli. Acolo se întâmplă totul: provocări, rapoarte și viața comunității.</p><div class="rule-points"><p class="rule-point"><strong>Antrenamente și alimentație:</strong> îndeplinește sarcinile programului, trimite raportul în chat, iar botul nostru special îți va acorda instant punctele meritate.</p><p class="rule-point"><strong>Provocări speciale:</strong> participă la sarcinile suplimentare anunțate în grup ca să câștigi bonusuri extra și să urci în top.</p><p class="rule-point">Soldul tău este mereu la îndemână, chiar în partea de sus a paginii. Cu cât ești mai consecventă, cu atât ai mai multe opțiuni pentru shopping.</p></div></div>
                    <div class="rule-item"><span class="rule-step">02</span><h3 class="rule-title">Reguli de conversie</h3><p class="rule-text">Am simplificat calculele la maximum:</p><div class="rule-points"><p class="rule-point"><strong>1 punct = 1 unitate din valuta noastră internă.</strong></p><p class="rule-point">Toate produsele din catalog sunt deja indicate în puncte. De exemplu, dacă un tricou costă 500 de puncte, înseamnă că trebuie doar să strângi această sumă în contul tău.</p></div></div>
                    <div class="rule-item"><span class="rule-step">03</span><h3 class="rule-title">Cum schimbi punctele pe un produs?</h3><p class="rule-text">Alege produsul dorit și apasă butonul «Schimbă pe puncte».</p><div class="rule-points"><p class="rule-point"><strong>Produse digitale:</strong> ghidurile, rețetele și check-list-urile se vor deschide automat imediat după retragerea punctelor.</p><p class="rule-point"><strong>Produse fizice:</strong> pentru merch și inventar se va deschide un formular. Completează datele pentru livrare și noi vom crea solicitarea.</p></div></div>
                    <div class="rule-item"><span class="rule-step">04</span><h3 class="rule-title">Livrare și confirmare</h3><p class="rule-text">După ce trimiți cererea pentru un produs fizic, un manager te va contacta pentru a confirma detaliile.</p><div class="rule-points"><p class="rule-point"><strong>Important:</strong> te rugăm să indici date de contact actuale. Dacă nu vom putea lua legătura cu tine în mesagerie sau la telefon, comanda va fi anulată, iar punctele se vor întoarce în cont.</p><p class="rule-point"><strong>Disponibilitate:</strong> produsele se pot epuiza, mai ales mărimile populare, deoarece multe fete fac cumpărături în același timp. Dacă un produs nu mai este în stoc, managerul îți va propune o alternativă sau îți va returna punctele.</p></div></div>
                    <div class="rule-item"><span class="rule-step">05</span><h3 class="rule-title">Punctele nu expiră!</h3><p class="rule-text">Rezultatele tale îți aparțin. Dacă ai urmat programul anul trecut, punctele tale rămân în siguranță în cont. Nu au termen de valabilitate: le poți cheltui acum sau le poți aduna în continuare pentru un obiectiv mai mare în programul următor.</p></div>
                    <div class="rule-item"><span class="rule-step">06</span><h3 class="rule-title">Unde vezi soldul punctelor?</h3><p class="rule-text">Soldul tău este afișat în partea de sus a paginii, iar punctele acumulate se reflectă în sistem după activitățile confirmate.</p></div>
                </div>
            </div>
        </section>

        <section class="timeline-section" id="programs">
            <h2 class="timeline-title">Programe sezoniere</h2>
            <p class="timeline-text-intro">Aceasta este o cronologie informativă a programelor în care a funcționat sistemul nostru de acumulare a punctelor. Dacă ai participat la unul sau la mai multe dintre ele și ai îndeplinit sarcinile, punctele puteau fi acordate în cadrul acestor lansări.</p>
            <div class="timeline-shell">
                <div class="timeline-track">
                    <article class="timeline-item"><span class="timeline-date">Start 20.10.2025</span><h3 class="timeline-name">Body Transformation</h3></article>
                    <article class="timeline-item"><span class="timeline-date">Start 17.11.2025</span><h3 class="timeline-name">Anticelulitic Booster 2.0</h3></article>
                    <article class="timeline-item"><span class="timeline-date">Start 12.01.2026</span><h3 class="timeline-name">Metabolic Reset 2026</h3></article>
                    <article class="timeline-item"><span class="timeline-date">Start 09.02.2026</span><h3 class="timeline-name">Body Transformation 2.0</h3></article>
                    <article class="timeline-item"><span class="timeline-date">Start 09.03.2026</span><h3 class="timeline-name">Postura & Abdomen 2.0</h3></article>
                </div>
                <div class="timeline-action"><a class="btn-season" href="https://fitnessmama.school/seasonal_course" target="_blank" rel="noopener noreferrer">Înscrie-mă la noul curs sezonier</a></div>
            </div>
        </section>
        <section class="contact-section">
            <div class="contact-copy">
                <span class="contact-note">Suntem aici pentru tine</span>
                <h2 class="contact-title">Nu ai găsit răspunsul la întrebarea ta?</h2>
                <p class="contact-text">Scrie-ne întrebarea ta, iar albinuța Fitness Mama îți va răspunde. După trimitere, se creează automat o solicitare ca să nu pierdem nimic.</p>
                <div class="contact-points">
                    <p class="contact-point"><strong>Răspuns clar:</strong> poți întreba despre puncte, schimb, livrare sau produse digitale.</p>
                    <p class="contact-point"><strong>Totul se salvează:</strong> după trimitere, întrebarea ta intră imediat în lucru.</p>
                    <p class="contact-point"><strong>Mai rapid pentru tine:</strong> lasă cât mai multe detalii, ca să te putem ajuta din primul răspuns.</p>
                </div>
            </div>
            <div class="contact-card">
                <div class="form-grid">
                    <label class="form-field"><span class="form-label">Email</span><input class="form-input" type="email" placeholder="example@email.com" value="mama@email.com"></label>
                    <label class="form-field"><span class="form-label">Textul întrebării</span><textarea class="form-textarea" placeholder="Scrie întrebarea ta aici"></textarea></label>
                </div>
                <button class="btn-question">Trimite întrebarea</button>
            </div>
        </section>

        <section class="footer-brand">
            <img class="footer-logo-image" src="https://fitnessmama.school/pl/fileservice/user/file/download/h/293ebbb0588dbb1696344afce3d42906.png" alt="Fitness Mama" loading="lazy" decoding="async">
        </section>

        <div class="size-modal" id="sizeModal" aria-hidden="true">
            <div class="size-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="sizeModalTitle">
                <div class="size-modal-top">
                    <h3 class="size-modal-title" id="sizeModalTitle">Tabel de mărimi</h3>
                    <button class="size-modal-close" type="button" id="sizeModalClose" aria-label="Închide">×</button>
                </div>
                <p class="size-modal-note">Tabel orientativ după standarde europene pentru femei: bust, talie și șolduri.</p>
                <div class="size-table-wrap">
                    <table class="size-table">
                        <thead>
                            <tr>
                                <th>Mărime</th>
                                <th>EU</th>
                                <th>Bust</th>
                                <th>Talie</th>
                                <th>Solduri</th>
                            </tr>
                        </thead>
                        <tbody id="sizeModalBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <script>
        function loadBackgroundImage(target) {
            if (!target || !target.dataset.bg || target.dataset.bgLoaded === 'true') return;
            target.style.backgroundImage = `url('${target.dataset.bg}')`;
            target.dataset.bgLoaded = 'true';
        }

        function loadSliderImages(track, activeIndex = 0) {
            if (!track) return;
            const slides = Array.from(track.querySelectorAll('.slide'));
            const count = slides.length;
            if (!count) return;

            loadBackgroundImage(slides[activeIndex]);

            if (count > 1) {
                loadBackgroundImage(slides[(activeIndex + 1) % count]);
            }
        }

        function moveLocalSlide(button, direction) {
            const sliderContainer = button.closest('.slider-container');
            const localTrack = sliderContainer?.querySelector('.slides');
            if (!localTrack) return;

            const slidesCount = localTrack.querySelectorAll('.slide').length;
            const currentIndex = Number(localTrack.dataset.slideIndex || 0);
            const nextIndex = (currentIndex + direction + slidesCount) % slidesCount;

            localTrack.dataset.slideIndex = nextIndex;
            localTrack.style.transform = `translateX(-${nextIndex * (100 / slidesCount)}%)`;
            loadSliderImages(localTrack, nextIndex);
        }

        document.querySelectorAll('.slides').forEach((localTrack) => {
            const slides = localTrack.querySelectorAll('.slide');
            const slidesCount = slides.length;
            if (!slidesCount) return;

            localTrack.style.width = `${slidesCount * 100}%`;
            slides.forEach((slide) => {
                slide.style.width = `${100 / slidesCount}%`;
                slide.style.flexBasis = `${100 / slidesCount}%`;
            });
        });

        const lazyBackgroundObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) return;

                const target = entry.target;
                const track = target.querySelector('.slides');

                if (track) {
                    const activeIndex = Number(track.dataset.slideIndex || 0);
                    loadSliderImages(track, activeIndex);
                } else {
                    const slide = target.querySelector('.slide[data-bg]');
                    if (slide) loadBackgroundImage(slide);
                }

                observer.unobserve(target);
            });
        }, { rootMargin: '300px 0px' });

        document.querySelectorAll('.slider-container').forEach((container) => {
            lazyBackgroundObserver.observe(container);
        });

        const catalogSelect = document.querySelector('.select-category');
        catalogSelect.addEventListener('change', (event) => {
            const target = document.getElementById(event.target.value);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });

        const sizeWrappers = document.querySelectorAll('.custom-select-wrapper');
        sizeWrappers.forEach((wrapper) => {
            const trigger = wrapper.querySelector('.select-trigger');
            if (!trigger) return;

            const label = trigger.querySelector('span');
            if (!label) return;

            const text = label.textContent.trim();
            if (!text.startsWith('Mărimi:')) return;

            const sizesText = text.replace('Mărimi:', '').trim();
            const sizes = sizesText.split(',').map((item) => item.trim()).filter(Boolean);
            if (!sizes.length) return;

            const options = document.createElement('div');
            options.className = 'custom-options';

            sizes.forEach((size) => {
                const option = document.createElement('div');
                option.className = 'custom-option';
                option.textContent = size;
                option.addEventListener('click', () => {
                    label.textContent = `Mărime: ${size}`;
                    wrapper.classList.remove('open');
                });
                options.appendChild(option);
            });

            wrapper.appendChild(options);
            trigger.addEventListener('click', () => {
                const isOpen = wrapper.classList.contains('open');
                sizeWrappers.forEach((item) => item.classList.remove('open'));
                if (!isOpen) wrapper.classList.add('open');
            });
        });

        window.addEventListener('click', (event) => {
            sizeWrappers.forEach((wrapper) => {
                if (!wrapper.contains(event.target)) {
                    wrapper.classList.remove('open');
                }
            });
        });

        const timelineItems = document.querySelectorAll('.timeline-item');
        const timelineObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.2 });

        timelineItems.forEach((item, index) => {
            item.style.transitionDelay = `${index * 80}ms`;
            timelineObserver.observe(item);
            item.addEventListener('mouseenter', () => {
                timelineItems.forEach((node) => node.classList.remove('active'));
                item.classList.add('active');
            });
            item.addEventListener('click', () => {
                timelineItems.forEach((node) => node.classList.remove('active'));
                item.classList.add('active');
            });
        });

        const sizeModal = document.getElementById('sizeModal');
        const sizeModalBody = document.getElementById('sizeModalBody');
        const sizeModalClose = document.getElementById('sizeModalClose');
        const sizeChartLinks = document.querySelectorAll('.size-chart-link');

        const sizeGuide = {
            '2XS': { eu: '32', bust: '76-80 cm', waist: '58-62 cm', hips: '84-88 cm' },
            'XS': { eu: '34', bust: '80-84 cm', waist: '62-66 cm', hips: '88-92 cm' },
            'S': { eu: '36', bust: '84-88 cm', waist: '66-70 cm', hips: '92-96 cm' },
            'M': { eu: '38', bust: '88-92 cm', waist: '70-74 cm', hips: '96-100 cm' },
            'L': { eu: '40', bust: '92-96 cm', waist: '74-78 cm', hips: '100-104 cm' }
        };

        const openSizeModal = (rows) => {
            sizeModalBody.innerHTML = rows.map((row) => `
                <tr>
                    <th>${row.size}</th>
                    <td>${row.eu}</td>
                    <td>${row.bust}</td>
                    <td>${row.waist}</td>
                    <td>${row.hips}</td>
                </tr>
            `).join('');
            sizeModal.classList.add('open');
            sizeModal.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        };

        const closeSizeModal = () => {
            sizeModal.classList.remove('open');
            sizeModal.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
        };

        sizeChartLinks.forEach((link) => {
            link.addEventListener('click', (event) => {
                event.preventDefault();
                const card = link.closest('.product-meta');
                const sizeLabel = card?.querySelector('.select-trigger span');
                if (!sizeLabel) return;

                const rawSizes = sizeLabel.textContent.replace('Mărimi:', '').replace('Mărime:', '').trim();
                const sizes = rawSizes.split(',').map((item) => item.trim()).filter(Boolean);
                if (!sizes.length) return;

                const rows = sizes
                    .map((size) => ({ size, ...sizeGuide[size] }))
                    .filter((row) => row.eu);

                if (!rows.length) return;
                openSizeModal(rows);
            });
        });

        sizeModalClose.addEventListener('click', closeSizeModal);
        sizeModal.addEventListener('click', (event) => {
            if (event.target === sizeModal) {
                closeSizeModal();
            }
        });

        window.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && sizeModal.classList.contains('open')) {
                closeSizeModal();
            }
        });
    </script>
</body>
</html>