/* Quick Order popup (reuse cart aesthetics, minimal) */
.order-popup{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:1000; }
.order-popup.active{ display:flex; }
.order-popup .order-modal{ width:min(420px, 92vw); max-height:90vh; overflow:auto; background:#fff; border-radius:18px; box-shadow:0 12px 36px rgba(0,0,0,.14); }
.order-popup .order-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #e5e5e7; }
.order-popup .order-close{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e5e7; border-radius:12px; background:#f7f7f9; color:#1d1d1f; font-size:20px; line-height:1; padding:0; }
.order-popup .order-form{ padding:10px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.order-popup .order-form.digital-only .np-fields, 
.order-popup .order-form.digital-only .cover-fieldset,
.order-popup .order-form.digital-only .delivery-static,
.order-popup .order-form.digital-only .bundle-variant-field{ display:none !important; }
.order-popup .qo-field{ display:flex; flex-direction:column; gap:6px; }

/* Bundle format UI (digital indicator) */
.bundle-format-badge{
  display:none;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#e8f1ff;
  color:#0b63ce;
}
.bundle-format-note{
  display:none;
  color:#6e6e73;
  font-size:12px;
  margin-top:4px;
}
.bundle-book-item{ position:relative; }
.bundle-digital-mark{
  display:none;
  position:absolute;
  top:8px; right:8px;
  background:rgba(255,255,255,.9);
  border:1px solid #e5e5e7;
  border-radius:8px;
  padding:2px 6px;
  font-size:12px;
}
.bundle--digital .bundle-format-badge,
.bundle--digital .bundle-format-note,
.bundle--digital .bundle-digital-mark{ display:inline-flex !important; }
.order-popup .qo-label{ font-size:12px; color:#1d1d1f; font-weight:600; letter-spacing:0; }
.order-popup .qo-input{ height:42px; border:1px solid #dcdcdf; border-radius:12px; padding:10px 12px; background:#fff; font-size:14px; color:#1d1d1f; -webkit-user-select:text; user-select:text; caret-color:#111; }
.order-popup .qo-input::placeholder{ color:#9b9ba0; opacity:1; }
.order-popup .qo-input::placeholder{ color:#9b9ba0; }
.order-popup .qo-input:focus{ outline:none; border-color:#0074d9; box-shadow:0 0 0 3px rgba(0,116,217,.12); }
.order-popup .qo-delivery{ display:flex; align-items:center; gap:10px; }
.order-popup .qo-delivery .qo-delivery-logo img{ width:16px; height:16px; display:block; }
.order-popup .order-submit{ height:46px; border:none; border-radius:12px; background:#0074d9; color:#fff; font-weight:800; letter-spacing:.2px; }
.order-popup .error{ color:#d93025; font-size:12px; }
.order-popup .order-summary{ border:1px solid #ededf0; border-radius:12px; padding:8px 10px; background:#f7f7f9; }
.order-popup .order-summary .os-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0; font-size:13px; }
.order-popup .order-summary .os-total{ display:flex; align-items:center; justify-content:space-between; font-weight:800; padding-top:6px; border-top:1px solid #e5e5e7; margin-top:2px; font-size:16px; }
.order-popup .order-summary .os-save{ display:flex; align-items:center; gap:8px; color:#0a7f27; font-weight:700; font-size:12px; }

/* Compact payment row */
.order-popup .pay-field .qo-delivery{ gap:12px; }
.order-popup .pay-field label{ font-size:13px; color:#1d1d1f; }

/* Delivery picked chip */
.order-popup .np-picked{ margin-top:6px; padding:8px 10px !important; border-radius:10px !important; font-size:12px !important; }
/* ===== Product page (mobile-first, classic look) ===== */

/* базові змінні для вертикального ритму в картці */
:root{
    /* наскільки .product-sheet перекриває hero */
    --stack-gap: 14px;   /* базовий крок між рядками */
  }

/* Бейдж: мобільний портрет — поверх верхньої частини фото; ландшафт — над фото */
.hero-image{ position: relative; }
.hero-badge{
  position:absolute; top:0; left:0; right:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:2px 12px;
  background: rgba(255,255,255,0.72);
  color: var(--color-text); font-weight:500; font-size: clamp(12px,3.4vw,14px);
  backdrop-filter: saturate(160%) blur(2px);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.hero-badge em{ margin-left:.35em; font-style:italic; font-weight:600; }
  
  /* Плаваюча картка під hero */
  .product-sheet{
    position: relative;
    z-index: 1;                      /* щоб точно не ховалось під фото/фільтром */
    margin-top: -34px;                   /* без заходу на зображення */  /* ПІДКРУТЬ ЦЕ ЧИСЛО: менший падінг = вище назва/автор */
    padding: 8px 0 var(--space-24);  /* було 20px — підняли на ~12px */
  }
  
  /* усередині картки — єдиний «стек» відступів */
  .product-sheet .container{ display:grid; row-gap: var(--stack-gap); }
  
  /* Заголовок / підзаголовок */
  :root{ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
  
  .product-title{
    margin: 0 0 var(--space-6);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: .2px;
  }
  .product-subtitle{
    margin: 0 0 var(--space-10);
    color: var(--color-muted);
    font-size: 16px;
  }

 /* Назва + автор — по центру рядка */
.product-title,
.product-author{
  text-align: center;
}

/* прибери непотрібні властивості, вони тут не працюють */
.product-title{
    margin:0;
    font-weight:700;
    font-size: clamp(22px, 5.2vw, 30px);
    line-height:1.15;          /* було 1.2 — ближче візуально */
    letter-spacing:.2px;
    text-align:center;
  }
  .product-author{
    margin:0;
    margin-top:-6px;            /* "з'їдаємо" частину grid-gap тільки між цими двома рядками */
    color:var(--color-muted);
    font-size: clamp(14px, 4.2vw, 18px);
    line-height:1.3;
    text-align:center;
  }
  
  /* ==== Rating: 4.6 + stars + (reviews) ==== */
  /* Рейтинг вертикально по центру */
.rating{
    --value: 4.62;
    --percent: calc(var(--value) / 5 * 100%);
    --star-size: 68px;
  
    display: grid;
    justify-items: center;   /* все по центру */
    row-gap: 6px;            /* відстань між рядком і посиланням */
    margin: 0;               /* щоб не дублювався з grid-gap картки */
  }
  
  .rating-line{
    display: inline-flex;    /* цифра + зірки в один ряд */
    align-items: center;
    gap: 8px;
  }
  
  .rating-value{
    font-size:20px;
    font-weight:800;
    color:var(--color-text);
    font-variant-numeric: tabular-nums;
    font-style: italic;
  }
  
  /* зірки залишаються як були (маска/градієнт) */
  .stars{
    width: calc(var(--star-size) * 5);
    height: var(--star-size);
    background: linear-gradient(90deg, #fec424 var(--percent), #d9d8d8 var(--percent));
    --star-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    -webkit-mask: var(--star-mask) left center/var(--star-size) var(--star-size) repeat-x;
            mask: var(--star-mask) left center/var(--star-size) var(--star-size) repeat-x;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
  }
  
  /* посилання під зірками по центру та як справжній лінк */
  .reviews-link{
    display: inline-block;
    text-align: center;
    font-size:14px;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
  }
  .reviews-link:hover{ text-decoration-thickness: 2px; }
  .reviews-link:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px; }
  
/* ==== Options (compact, mobile-first) ==== */
.options{ margin: 0; }
.product-sheet + .bundle{ margin-top: 12px; }

.segmented{
  display:flex;
  gap: var(--space-10);
  min-width:0;
}
.segmented input{ position:absolute; opacity:0; pointer-events:none; }

/* Пігулка: КУЛЬКА | ТЕКСТ | ПУСТО (для ідеального центру тексту) */
.segmented .opt{
  --slot:30px;                 /* службовий слот зліва/справа */
  --bullet-shift:6px;          /* посунути кульку ближче до краю */
  flex:1; min-width:0;

  display:grid;
  grid-template-columns: var(--slot) 1fr var(--slot);
  align-items:center;
  column-gap:14px;

  /* ВАЖЛИВО: компактна висота */
  padding:6px 12px;            /* вертикальний падінг ↓ */
  min-height:52px;             /* було 60+ → стало 48px */
  border-radius:999px;
  border:2px solid #c6cbd2;
  background:#f6f6f6;
  transition:border-color .15s, background .15s, color .15s;
}

/* Кулька (ліворуч) — маленька */
.opt-bullet{
    grid-column:1; justify-self:start;
    margin-left: calc(-1 * var(--bullet-shift, 6px));
  
    --bullet-size: 24px;             /* міняй розмір кульки тут */
    width: var(--bullet-size);
    height: var(--bullet-size);
  
    border-radius: 50%;
    background: #fff;
    border: 8px solid #c6cbd2;
    position: relative;              /* Потрібно для центрування ::after */
  }
.segmented input:checked + .opt .opt-bullet{
  border:0; background: var(--color-accent); position:relative;
}
.segmented input:checked + .opt .opt-bullet::after{
  content:""; position:absolute; left:3.5px; top:4px; width:9px; height:5px;
  border:2px solid #fff; border-top:none; border-right:none; transform: rotate(-45deg);
}

/* Текст — рівно по центру кнопки, щільно */
.opt-body{
  grid-column:2; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:2px;
}
.opt-body > *{ margin:0; }

.opt-title{
  font-size:14px; font-weight:350; line-height:1.05;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt-price{
  display:flex; align-items:baseline; gap:4px; line-height:1; white-space:nowrap;
}
.opt-amount{ font-size:14px; font-weight:650; line-height:1; }
.opt-currency{ color: var(--color-muted); line-height:1; }

/* Hover/Focus/Selected (без зміни висоти) */
.segmented .opt:hover{ border-color: var(--color-accent); }
.segmented input:focus-visible + .opt{ outline:2px solid rgba(0,116,217,.18); outline-offset:2px; }
.segmented input:checked + .opt{
  border-color: var(--color-accent);
  background:#eef5ff;
  color: var(--color-accent);
}
.segmented input:checked + .opt .opt-title,
.segmented input:checked + .opt .opt-amount{ color: var(--color-accent); }
.segmented input:checked + .opt .opt-bullet{
    border:0;
    background: var(--color-accent);
  }
  
  /* Галочка по ЦЕНТРУ кружка */
/* Кулька у вибраній кнопці */
.segmented input:checked + .opt .opt-bullet{
    border: 0;
    background: var(--color-accent);
  }
  
  /* ГАЛОЧКА — чітко по центру, стабільний розмір */
  .segmented input:checked + .opt .opt-bullet::after{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width:  calc(var(--bullet-size) * 0.48);
    height: calc(var(--bullet-size) * 0.32);
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
  
    /* Малюємо галочку лише двома лініями — чіткіше й без «зсувів» */
    border-left:   2px solid #fff;
    border-bottom: 2px солід #fff;
  }

  

 /* =============================================================== */



/* ===== Sticky CTA (mobile-first, clean) ===== */

/* запас під панель, щоб контент не перекривався */
.has-sticky-cta .main{
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
  
  /* сама панель */
  .sticky-cta{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: #f6f6f6;
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* контейнер усередині панелі з урахуванням safe-area */
  .sticky-cta .container{
    padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }
  
  /* сітка: 2 колонки, 2 рядки.
     1 рядок:  [ЦІНА | КНОПКА]
     2 рядок:  [ЦІНА | ПІДПИС ПІД КНОПКОЮ] */
  .cta-grid{
    display: grid;
    grid-template-columns: minmax(120px,auto) minmax(0,1fr); /* ціна | кнопка */
    grid-template-areas:
      "price  button"
      "price  note";
    align-items: center;
    column-gap: var(--space-12);
    row-gap: 2px;
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }
  
  /* ліворуч: ціни */
  .price-col{
    grid-area: price;
    display:flex; flex-direction:column; gap:0px;
  }
  .price-old{ display:flex; align-items:center; gap:2px; color:var(--color-muted); }
  .price-old s{ font-size:14px; opacity:.6; }
  .discount-badge{
    font-size:10px; font-weight:700; padding:3px 7px; border-radius:999px;
    background:#FFE6E6; color:#D92D20;
  }
  .price-new{ display:flex; align-items:baseline; gap:4px; }
  .new-amount{ font-size:26px; font-weight:800; color:var(--color-text); }
  .price-col .currency{ color:var(--color-muted); }
  
  /* права колонка: велика кнопка тягнеться на всю ширину колонки */
  .cta-btn{
    grid-area: button;
    justify-self: stretch;            /* не по центру, а на всю ширину правої колонки */
    min-height:48px; padding:12px 20px;
    border:0; border-radius:999px;
    background: var(--color-accent); color:#f6f6f6;
    font-weight:800; font-size:18px; letter-spacing:.3px;
    box-shadow: 0 8px 20px rgba(0,116,217,.18);
  }
  .cta-btn:active{ transform: translateY(1px); }
  .cta-btn:focus-visible{ outline:2px solid rgba(0,116,217,.35); outline-offset:2px; }
  
  /* дрібний підпис — ПІД кнопкою і по центру відносно неї */
 /* один рядок, по центру під кнопкою */
.note-under-btn{
    grid-area: note;
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;                 /* не переносити */
    text-align: center;
    font-size: clamp(8px, 3.2vw, 9px); /* трохи стискається на вузьких екранах */
    line-height: 1.1;
    color: var(--color-muted);
  }
  
  /* елементи в один рядок */
  .note-under-btn .note-line,
  .note-under-btn .note-qty{
    display: inline;
  }
  
  .note-under-btn .note-qty{
    font-weight: 800;
    color: var(--color-text);
  }
  
  /* very small screens */
  @media (max-width:360px){
    .new-amount{ font-size:24px; }
    .cta-btn{ min-height:52px; font-size:17px; }
    .note-under-btn{ font-size:11px; }
  }

    /* =============================================================== */

/* ===== Bundle Offer (Набір) ===== */
/* ============================
   Bundle (Набір) — mobile-first
   HTML:
   <section class="bundle container">
     <div class="bundle-card">
       <div class="bundle-flag">РАЗОМ ДЕШЕВШЕ</div>
       ... header, books, footer ...
     </div>
   </section>
   ============================ */

   .bundle{ margin: var(--space-16) 0; } /* контейнер сторінки без додаткових внутр. відступів */

   /* Вся картка з округленням і відсіканням країв */
   .bundle-card{
     background:#fff;
     border:1px solid var(--color-border);
     border-radius:20px;
     box-shadow: var(--shadow-1);
     overflow:hidden; /* щоб верхня синя смуга повторювала радіуси */
   }
   
   /* Синя смуга зверху картки */
/* Синя плашка з градієнтом і тінню */
.bundle-flag{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 42px;
  padding: 8px 12px;

  color:#fff;
  font-weight:800;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size: clamp(12px, 3.4vw, 14px);

  /* брендований градієнт */
  background: linear-gradient(180deg,
              #2a90f0 0%,     /* світліше зверху */
              #0074d9 55%,    /* основний */
              #065fbb 100%);  /* темніший внизу */

  /* «глибина» під плашкою усередині картки */
  box-shadow:
    0 10px 18px rgba(0,116,217,.20),         /* м'яка зовнішня тінь вниз */
    inset 0 -1px 0 rgba(255,255,255,.25);    /* тонкий внутрішній блік знизу */
}

/* легкий глянець зверху (без впливу на кліки) */
/* Плашка з градієнтом зліва → вправо */
.bundle-flag{
    position: relative;
    display:flex; align-items:center; justify-content:center;
    min-height:42px; padding:8px 12px;
    color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    font-size: clamp(12px, 3.4vw, 14px);
  
    /* L→R градієнт */
    background: linear-gradient(90deg,
                #0777d9 0%,
                #0074d9 55%,
                #0763c0 100%);
  
    box-shadow:
      0 10px 18px rgba(0,116,217,.20),
      inset 0 -1px 0 rgba(255,255,255,.25);
  }
  
  /* (опційно) відблиск також зліва → вправо */
  .bundle-flag::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.099), rgba(255,255,255,0) 35%);
    pointer-events:none;
  }
   
   /* Заголовок і підзаголовок */
   .bundle-header{
     padding:16px 16px 12px;
   }
   .bundle-title{
     margin:0;
     font-weight:800;
     font-size: clamp(18px, 5.2vw, 26px);
     text-align:center;
     letter-spacing:.2px;
   }
   .bundle-subtitle{
     margin-top:8px;
     text-align:center;
     color:var(--color-muted);
     font-size: clamp(14px, 4vw, 16px);
   }
   
   /* зелений бейдж економії */
   .savings-amount{
     display:inline-block;
     margin-left:.5em;
     padding:4px 8px;
     border-radius:10px;
     background:#E9F9ED;
     color:#1E8E3E;
     font-weight:700;
     font-size:.95em;
     border:1px solid #C6EFD0;
   }
   
   /* Сітка з трьох обкладинок */
   .bundle-books{
     list-style:none; margin:0; padding:12px;
     display:grid; grid-template-columns: repeat(3, 1fr);
     gap:12px;
     border-top:1px solid var(--color-border);
     border-bottom:1px solid var(--color-border);
   }
   .bundle-book-item{
     position:relative;
     border-radius:10px;
     overflow:hidden;
     background:#f7f7f8;
     box-shadow: 0 6px 16px rgba(0,0,0,.08);
     cursor:pointer;
   }
   .bundle-book-item img{
     width:100%;
     aspect-ratio:4/6;
     object-fit:cover;
     display:block;
   }
   /* Mobile-first affordance: subtle bottom badge + light overlay */
   .bundle-book-item::before{
     content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.08)); opacity:0; transition:opacity .18s ease;
   }
   .bundle-book-item::after{
     content:"Змінити"; position:absolute; left:8px; right:8px; bottom:8px;
     display:inline-flex; align-items:center; justify-content:center; gap:8px;
     min-height:28px; padding:4px 10px 4px 30px; border-radius:999px;
     background:#ffffff; color:#0a7f27; font-weight:700; font-size:12px; letter-spacing:.2px;
     border:1px solid #cfead7; box-shadow: 0 4px 12px rgba(0,0,0,.06);
     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%230a7f27'><path d='M20 7h-3.17A3 3 0 0 0 12 5.1 3 3 0 0 0 7.17 7H4a1 1 0 0 0-1 1v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a1 1 0 0 0-1-1ZM10 7a1 1 0 1 1 0-2c1.31 0 2 .86 2 2Zm4 0c0-1.14.69-2 2-2a1 1 0 1 1 0 2Zm5 12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V10h14Z'/><path d='M12 10h1v10h-1zM4 10h16v1H4z'/></svg>");
     background-repeat:no-repeat; background-size:16px 16px; background-position:12px center;
   }
   .bundle-book-item:active::before{ opacity:.15; }
   .bundle-book-item:focus-visible{ outline:2px solid #0074d9; outline-offset:2px; }
   
 
   
   /* Футер: ліворуч ціни, праворуч кнопка */
   .bundle-footer{
     padding:16px 16px 16px;
     display:grid;
     grid-template-columns: auto 1fr;   /* ціна | кнопка */
     align-items:center;
     column-gap:12px;
   }
   .bundle-prices{ display:flex; flex-direction:column; gap:4px; }
   .bundle-old{
     color:var(--color-muted);
     text-decoration: line-through;
     opacity:.7;
     font-size:14px;
   }
   .bundle-new{
     font-weight:800;
     font-size: clamp(22px, 6vw, 28px);
     color:var(--color-text);
   }
   
   /* Кнопка "Замовити" */
   .bundle-order-btn{
     justify-self:end;
     min-height:48px;
     padding:12px 22px;
     width:100%;
     border:0; border-radius:999px;
     background: var(--color-accent);
     color:#fff; font-weight:800; font-size:17px; letter-spacing:.2px;
     box-shadow: 0 8px 20px rgba(0,116,217,.16);
   }
   .bundle-order-btn:active{ transform: translateY(1px); }
   .bundle-order-btn:focus-visible{ outline:2px solid rgba(0,116,217,.35); outline-offset:2px; }
   
   /* Адаптації */
   @media (min-width:420px){
     .bundle-order-btn{ width:auto; } /* на ширших — кнопка не на всю ширину */
   }
   @media (max-width:360px){
     .bundle-footer{
       grid-template-columns: 1fr;
       row-gap:10px;
     }
     .bundle-order-btn{
       justify-self:stretch;
       width:100%;
     }
   }

   /* підпис під блоком "Набір" */
.bundle-note{
    margin: 8px 0 0;          /* невеликий відступ від картки */
    text-align: center;
    font-size: 12px;          /* маленький розмір */
    line-height: 1.2;
    color: var(--color-muted);
  }
  @media (min-width:480px){
    .bundle-note{ font-size:13px; }   /* трохи читабельніший на ширших */
  }

   /* =============================================================== */


   /* ===== Accordion (mobile-first) ===== */
.accordion{
    margin-top: 42px;   /* було var(--space-24) ≈ 24px */
    margin-bottom: 0; }

/* сині лінії як на макеті */
.acc-item{
  border-top: 1px solid var(--color-accent);
}
.acc-item:last-child{ border-bottom: 1px solid var(--color-accent); }

/* заголовок-рядок */
.acc-item > summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;   /* текст | плюс */
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 0;
}
.acc-item > summary::-webkit-details-marker{ display:none; }

/* текст заголовка */
.acc-title{
  margin:0;
  font-weight: 600;
  font-size: clamp(18px, 5.2vw, 26px);
  letter-spacing: .2px;
}
/* у відкритому стані — трохи більший, як на скріні */
.acc-item[open] .acc-title{
    font-size: clamp(18px, 5.2vw, 26px);
}

/* плюс / хрестик справа, малюємо 2 лінії */
.acc-icon{
  position: relative;
  width: 24px; height: 24px;
  color: var(--color-accent);
}
.acc-icon::before,
.acc-icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width: 22px; height: 2px;
  background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .18s ease;
}
/* вертикальна риска для «+» */
.acc-icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
/* у відкритому — «×» */
.acc-item[open] .acc-icon::before{ transform: translate(-50%,-50%) rotate(45deg); }
.acc-item[open] .acc-icon::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* панель контенту */
.acc-panel{
  padding: 6px 0 18px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
}
.acc-panel p{ margin: 0 0 12px; }
.acc-panel ul{ margin: 0; padding-left: 18px; }


/* ===== How to order (mobile-first) ===== */
.howto{ margin: var(--space-24) 0; }

.how-card{
  border-radius: 20px;
  background: linear-gradient(180deg, #1683f7 0%, #0a6fe8 100%);
  color:#fff;
  padding: 34px 18px 20px;
  box-shadow: 0 18px 40px rgba(10,111,232,.20);
}

/* Заголовок */
.how-title{
  margin:0 0 16px;
  text-align:center;
  font-weight:600;
  font-size: clamp(24px, 5.2vw, 32px);
  letter-spacing:.2px;
}

/* Кроки */
.how-steps{
  list-style:none; margin-top:30px; padding:0;
  display:grid; row-gap: 36px;
}
.how-step{
  display:grid;
  grid-template-columns: 44px 1fr;   /* крапка-номер | текст */
  column-gap: 10px;
  align-items:start;
}
.step-dot{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:600; font-size:14px;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.step-body{ min-width:0; }
.step-head{
  font-weight:600;
  font-size: clamp(12px, 4.8vw, 16px);
  line-height:1.15;
}
.step-desc{
  margin-top:6px;
  font-size: clamp(8px, 4vw, 12px);
  line-height:1.2;
  opacity:.85;
}

/* Переваги (чек-лист) */
.how-benefits{
  list-style:none; margin: 14px 0 0; padding: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.25);
  display:grid; row-gap: 10px;
  font-size: clamp(8px, 4vw, 12px);
}
.how-benefits li{
  position:relative; padding-left: 26px;
}
.how-benefits li::before{
  content:"";
  position:absolute; left:0; top:.35em;
  width:16px; height:10px;
  border-left: 3px solid #fff;
  border-bottom:3px solid #fff;
  transform: rotate(-45deg);
  opacity:.85;
}

/* трішки більше повітря на ширших */
@media (min-width:600px){
  .how-card{ padding: 24px 20px 22px; border-radius: 24px; }
  .how-steps{ row-gap: 20px; }
}

/* =============================================================== */


/* ===== Reviews (summary, mobile-first) ===== */
.reviews{ margin: var(--space-24) 0; }

.reviews-title{
  margin: 0 0 var(--space-12);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 32px);
  letter-spacing:.2px;
}

/* Карта завжди у 2 колонки навіть на мобільних */
.reviews-card{
  border-radius: 16px;
  background: #fbfbfc;
  padding: 14px;
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-columns: 1fr 110px;   /* ліворуч гнучко | праворуч фіксовано */
  align-items: center;
  gap: 16px;
}

/* Ліва колонка: розподіл оцінок 5→1 */
.dist-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; row-gap: 2px;
}
.dist-list li{
  display: grid;
  grid-template-columns: 12px 1fr;   /* цифра | прогрес */
  align-items: center;
  column-gap: 8px;
}
.dist-list .label{
  color: var(--color-muted);
  font-size: 12px;
}

/* Смуга прогресу з округлими кінцями (жовте заповнення, сірий трек) */
.bar{
  --h: 6px; height: var(--h); display: block; border-radius: 999px;
  background:
    linear-gradient(90deg, #f5b300 var(--p), #e6e8eb var(--p));
}

/* Права колонка: середня оцінка + зірки + кількість */
.reviews-summary{
  display: grid;
  justify-items: center;
  row-gap: 6px;
}
.reviews-summary .avg{
  font-weight: 900;
  font-size: clamp(34px, 12vw, 44px); /* велика, як на макеті */
  line-height: 1;
  color: var(--color-text);
}
.reviews-summary .count{
  color: var(--color-muted);
  font-size: 12px;
}

/* Reviews: full-bleed (краї як у сторінки, без білої «картки») */
.reviews--bleed{
    /* свої «краї» замість .container */
    padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }
  
  /* прибираємо фон/тінь/радіуси */
  .reviews--bleed .reviews-card{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;                 /* якщо треба трохи повітря: постав 6–10px */
    gap: 12px;                  /* компактніший інтервал між колонками */
  }

/* Зірки з маскою і заповненням по відсотку */
.stars{
  --s:18px; --value:4.8; --percent: calc(var(--value)/5*100%);
  width: calc(var(--s)*5); height: var(--s);
  background: linear-gradient(90deg,#f5b300 var(--percent), #e5e5e7 var(--percent));
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") left/var(--s) var(--s) repeat-x;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") left/var(--s) var(--s) repeat-x;
}

    /* =============================================================== */

 /* ============================
   Review item — mobile-first
   Структура HTML:
   <section class="reviews-list container">
     <article class="review">
       <header class="review-header">…</header>
       <div class="review-rating"><div class="stars" style="--value:5"></div></div>
       <div class="review-body">
         <img class="review-photo" src="…" alt="">
         <p class="review-text">…</p>
       </div>
       <footer class="review-actions">…</footer>
     </article>
   </section>
   ============================ */

/* список відгуків */
.reviews-list{ margin: var(--space-16) 0 var(--space-24); }

/* сам відгук + роздільники */
.review{
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}
.review:last-child{ border-bottom: 1px solid var(--color-border); }

/* ===== HEADER: аватар, ім'я, бейдж ===== */
.review-header{
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 10px;
}
.review-header .avatar{
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; background:#e9e9ec;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.06);
}
.review-header .name{
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
}
.review-header .verified{
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.review-header .verified .v-ico{
  width:14px; height:14px; display:inline-block; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 15 5h5v5l3 3-3 3v5h-5l-3 3-3-3H4v-5L1 13l3-3V5h5l3-3Zm-1 14 6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 5Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 15 5h5v5l3 3-3 3v5h-5l-3 3-3-3H4v-5L1 13l3-3V5h5l3-3Zm-1 14 6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 5Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Рейтинг під шапкою ===== */
.review-rating{ margin: 10px 0; }

/* ===== ТІЛО: фото зверху, текст ПІД фото ===== */
.review-body{
  display: flex;
  flex-direction: column;   /* mobile-first стек */
  gap: 12px;
}
.review-photo{
  width: 120px; height: 120px;
  border-radius: 14px; object-fit: cover;
  align-self: flex-start;   /* постав 'center' якщо хочеш фото по центру */
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.review-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text);
}

/* ===== ДІЇ: лайк/дизлайк ===== */
.review-actions{
  margin-top: 12px;
  display: flex; align-items: center; gap: 14px;
}
.review-actions .action{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
}
.review-actions .action .num{ font-size: 14px; }
.review-actions .action .ico{
  width: 18px; height: 18px; display: block; background-color: currentColor;
}
/* іконки */
.review-actions .action.like .ico{
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12Zm20-9c0-.8-.3-1.5-.9-2.1-.6-.6-1.3-.9-2.1-.9h-5.3l.8-3.6.1-.7c0-.3-.1-.6-.4-.9L13 3l-6 6v10h10c.8 0 1.5-.3 2.1-.9.6-.6.9-1.3.9-2.1v-4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12Zm20-9c0-.8-.3-1.5-.9-2.1-.6-.6-1.3-.9-2.1-.9h-5.3l.8-3.6.1-.7c0-.3-.1-.6-.4-.9L13 3l-6 6v10h10c.8 0 1.5-.3 2.1-.9.6-.6.9-1.3.9-2.1v-4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.review-actions .action.dislike .ico{
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h4v12H2V3Zm20 9c0 .8-.3 1.5-.9 2.1-.6.6-1.3.9-2.1.9h-5.3l.8 3.6.1.7c0 .3-.1.6-.4.9L13 21l-6-6V5h10c.8 0 1.5.3 2.1.9.6.6.9 1.3.9 2.1v4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h4v12H2V3Zm20 9c0 .8-.3 1.5-.9 2.1-.6.6-1.3.9-2.1.9h-5.3l.8 3.6.1.7c0 .3-.1.6-.4.9L13 21l-6-6V5h10c.8 0 1.5.3 2.1.9.6.6.9 1.3.9 2.1v4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* активні стани */
.review-actions .action.like{
  color: var(--color-accent);
  border-color: rgba(0,116,217,.35);
  background: #f5faff;
}
.review-actions .action:active{ transform: translateY(1px); }

/* ===== (опційно) на ширших екранах зробити фото зліва/текст справа ===== */
/*
@media (min-width: 600px){
  .review-body{ flex-direction: row; align-items: flex-start; }
  .review-photo{ width:110px; height:110px; margin-right: 14px; }
}
*/

/* =============================================================== */

/* ===== Reviews: pagination ===== */
.reviews-pager{
    margin: var(--space-16) 0 var(--space-24);
    display: grid;
    row-gap: var(--space-12);
    justify-items: center;
  }
  
  .page-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;         /* тримаємо в один ряд на мобільних */
  }
  
  /* кнопки-сторінки */
  .page a{
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  }
  .page a:hover{ border-color: #cfd1d5; }
  .page a:focus-visible{ outline: 2px solid rgba(0,116,217,.35); outline-offset: 2px; }
  
  /* активна сторінка */
  .page [aria-current="page"]{
    background: #e9eaee;
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }
  
  /* три крапки */
  .page-ellipsis{
    color: var(--color-muted);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
  }
  
  /* кнопка "Показати ще відгуки" */
  .load-more{
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }
  .load-more:hover{ border-color: #cfd1d5; }
  .load-more:active{ transform: translateY(1px); }
  .load-more:focus-visible{ outline: 2px solid rgba(0,116,217,.35); outline-offset: 2px; }

  /* =============================================================== */


  /* ===== Leave a review (mobile-first) ===== */
.review-leave{ margin: var(--space-24) 0 var(--space-24); }

.rf-card{
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.rf-title{
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(16px, 8vw, 20px);
}

.rf-field{ display:block; margin-bottom: 14px; }
.rf-label{ display:block; margin-bottom: 8px; font-weight: 500; }

.rf-card input[type="text"],
.rf-card textarea{
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  padding: 12px 14px;
  font: inherit;
}
.rf-card input[type="text"]{ height: 44px; }
.rf-card textarea{ min-height: 120px; resize: vertical; }

.rf-card input:focus,
.rf-card textarea:focus{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0,116,217,.15);
}

/* лічильник символів */
.rf-counter{
  margin-top: 6px;
  text-align: right;
  color: var(--color-muted);
  font-size: 13px;
}

/* Рядок з оцінкою */
/* mobile-first: напис окремим рядком, під ним зірки */
.rf-stars-row{
    display: block;
    margin: 10px 0 14px;
  }
  .rf-stars-row .rf-label{
    display: block;
    margin: 0 0 4px;
    font-weight: 500;
  }
  
  /* зірки + лічильник у одному рядку під написом */
  .rf-stars{
    direction: rtl;
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
  }
  .rf-score{
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: var(--color-muted);
    vertical-align: middle;
  }
  
  /* (необов'язково) на ширших екранах повернути у три колонки */
  @media (min-width: 600px){
    .rf-stars-row{
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
    }
    .rf-stars-row .rf-label{ margin: 0; }
  }

/* Зірки — інтерактивні */
.rf-stars{
  direction: rtl;               /* щоб hover підсвічував «вліво» */
  display: inline-flex;
  gap: 4px;
  color: #cfd3d8;               /* контур/неактивний */
}
.rf-stars input{ position:absolute; left:-9999px; }
.rf-stars label{
  width: 24px; height: 24px; cursor: pointer; display: block;
  color: inherit;
}
.rf-stars label::before{
  content:""; display:block; width:100%; height:100%; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* hover + checked підсвічують усі «лівіші» зірки завдяки RTL */
.rf-stars label:hover,
.rf-stars label:hover ~ label,
.rf-stars input:checked ~ label{
  color: #f5b300;
}

/* лічильник балів праворуч */
.rf-score{ color: var(--color-muted); font-size: 14px; }

/* Кнопка */
.rf-submit{
  display: inline-block;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 0;
  background: var(--color-accent);
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 18px rgba(0,116,217,.18);
}
.rf-submit:disabled{
  background: #a8c0ff; box-shadow: none; cursor: not-allowed;
}
.rf-submit:active{ transform: translateY(1px); }

    /* =============================================================== */

    /* ===== Help / Support (mobile-first) ===== */
.help{ margin: var(--space-24) 0;
padding-left: 16px;
padding-right: 16px; }

.help-card{
  color:#fff;
  border-radius: 20px;
  padding: 18px 16px 20px;
  background: linear-gradient(180deg, #1e8cff 0%, #0a6fe8 100%);
  box-shadow: 0 18px 40px rgba(10,111,232,.20);
  text-align:center;
}

.help-title{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 28px);
  letter-spacing: .2px;
}

/* кнопки-іконки */
.help-actions{
  display:flex;
  justify-content:center;
  gap: clamp(14px, 6vw, 24px);
}

.help-btn{
  --size: clamp(56px, 16vw, 72px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  display:grid; place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.help-btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.help-btn:active{ transform: translateY(0); }
.help-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* самі піктограми (білі через currentColor) */
.help-ico{ width: 40%; height: 40%; display:block; background:#fff; }

/* Telegram */
.ico-tg{
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3l5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3l5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Instagram */
.ico-ig{
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6Zm5.2-2.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6Zm5.2-2.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Facebook */
.ico-fb{
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (min-width:600px){
  .help-card{ padding: 22px 20px 24px; border-radius: 24px; }
}


/* =============================================================== */


/* ============================
   Footer (mobile-first)
   ============================ */

/* висота твоєє sticky-панелі "Купити" */
:root{ --sticky-cta-h: 116px; }

.site-footer{
  background:#0b1220;
  color:#e7ecf3;
  margin-top: var(--space-24);
  padding-block-start: 20px;            /* лише top; боки лишаємо .container */
}

/* щоб панель "Купити" не перекривала низ футера */
.has-sticky-cta .site-footer{
  padding-block-end: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom));
}

.site-footer a{ color:#e7ecf3; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* ----- Верхня частина футера ----- */
.site-footer .foot-top{
  /* УВАГА: не чіпаємо padding-inline .container */
  padding-block: 20px 12px;             /* top/bottom тільки */
  display:grid;
  row-gap: 12px;
}

.site-footer .brand .logo{
  height:26px; width:auto;
  filter: brightness(0) invert(1);      /* білий логотип */
}

.site-footer .tagline{
  margin:0;
  color:#b8c2cf;
  font-size:14px;
}

/* посилання: 2 колонки на мобільних */
.site-footer .foot-links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin: 6px 0 10px;
}
.site-footer .foot-links a{ padding-block: 2px; }

/* соцкнопки */
.site-footer .foot-social{ display:flex; gap:12px; }
.site-footer .sbtn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
}
.site-footer .sbtn:hover{ background: rgba(255,255,255,.14); }
.site-footer .sico{ width:20px; height:20px; display:block; background:#fff; }

/* Telegram */
.site-footer .sico.tg{
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3l5.1 1.6 9.5-6.1-8.3 9.1Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3l5.1 1.6 9.5-6.1-8.3 9.1Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Instagram — контурна іконка, БЕЗ переносів рядків */
.site-footer .sico.ig{
    width:20px; height:20px; background:#fff;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  }

/* Facebook */
.site-footer .sico.fb{
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ----- Нижня смуга ----- */
.site-footer .foot-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 10px 16px;            /* лише top/bottom */
  color:#b8c2cf;
  font-size:12px;
}

/* ширші екрани */
@media (min-width:600px){
  .site-footer .foot-links{ grid-template-columns: repeat(3,1fr); gap: 12px 24px; }
  .site-footer .foot-top{ row-gap:14px; padding-block: 22px 14px; }
}



    /*=========================================*/
    /*ТЕЛЕФОН ВЕЛИКИЙ / ПЕРЕВЕРНУТИЙ*/
    /*=========================================*/



    /* великі телефони (ще не планшет) */
@media (min-width:600px){
    /* трохи більше «повітря» */
    .product-sheet .container{ row-gap: 14px; }
  
    /* читабельність */
    .product-title{ font-size: 18px; }      /* +1–2px від бази */
    .product-author{ font-size: 14px; }
  
    /* рейтинг — щільніший, але без перебудови */
    .rating{ gap: 10px; }
    .rating-value{ font-size: 15px; }
    .reviews-link{ font-size: 14px; }
  
    /* опції залишаються в 1 колонці, лише розміри */
    .segmented{ gap: 10px; }
    .segmented .opt{
      padding: 12px 14px;
      min-height: 84px;
      border-radius: 18px;
    }
    .opt-title{ font-size: 15px; }
    .opt-amount{ font-size: 20px; }
  }
  
  /* (необов'язково) легкий тюнінг для ≥480px */
  @media (min-width:480px){
    .product-sheet .container{ row-gap: 12px; }
    .opt-amount{ font-size: 19px; }
  }

  /*=========================================*/
  /* Базово: inline-варіант ховаємо (мобайл портрет використовує липкий CTA) */
.buy-inline{ display:none; }

/* ЛАНДШАФТ телефони: показуємо inline під опціями, ховаємо липкий CTA
   max-height фільтрує саме «низькі» екрани телефонів у landscape */
@media (orientation: landscape) and (max-height: 500px){
  /* показати блок купівлі під опціями */
  .buy-inline{
    display:grid;
    grid-template-columns: minmax(140px,auto) minmax(0,1fr);
    grid-template-areas:
      "price  button"
      "note   button";
    align-items:center;
    column-gap:12px; row-gap:6px;
    padding-top: var(--space-12); border-top:1px solid var(--color-border);
    margin-top: 0;
  }
  .buy-inline .price-col{ grid-area:price; display:flex; flex-direction:column; gap:2px; }
  .buy-inline .buy-note{ grid-area:note; font-size:12px; color:var(--color-muted); }
  .buy-inline .buy-btn{
    grid-area:button; justify-self:stretch;
    min-height:48px; padding:12px 18px; border:0; border-radius:999px;
    background:var(--color-accent); color:#fff; font-weight:800; font-size:17px;
    box-shadow:0 8px 20px rgba(0,116,217,.18);
  }

  /* сховати липку панель унизу */
  .sticky-cta{ display:none; }

  /* прибрати резерв під липку панель (якщо він у тебе є) */
  body.has-sticky-cta .main{ padding-bottom:0; }
}

/* Додатковий запобіжник: великі телефони у ландшафті,
   якщо висота трішки більша, все одно показуємо inline */
@media (orientation: landscape) and (min-width:600px) and (max-height:640px){
  .buy-inline{ display:grid; }
  .sticky-cta{ display:none; }
  body.has-sticky-cta .main{ padding-bottom:0; }
}

    /*=========================================*/
    /*=========================================*/
    
    
    /* =========================================================
   PHONE LANDSCAPE layout (перевернутий телефон)
   квадратне фото ліворуч | праворуч: бестселер, назва, автор,
   рейтинг, вибір версії, "Купити"; далі — один стовпець
   ========================================================= */
@media (orientation: landscape) and (max-height: 560px){
    /* 1) Дві колонки тільки для верхньої частини (hero + product-sheet) */
    .main{
      display: grid;
      grid-template-columns: minmax(220px, 40%) 1fr; /* фото | контент */
      gap: var(--space-12);
      align-items: start;
    }
  
   /* Квадратне зображення з відступом згори + бейдж НАД фото (не перекриває) */
   .main .hero-image{
     grid-column: 1;
     margin: var(--space-12) 0 var(--space-12);
     display:flex; flex-direction:column; gap: var(--space-8);
     aspect-ratio: auto;                /* керуємо співвідношенням через сам img */
     border-radius: 0;                  /* щоб бейдж не обрізався */
     overflow: visible;
   }
   /* У ландшафті теж поверх фото, але як компактний пілл у верхньому лівому куті */
   .main .hero-image .hero-badge{ position:absolute; top:10px; left:50%; transform:translateX(-50%); right:auto; z-index:1; background: rgba(255,255,255,0.75); color: var(--color-text); }
   .main .hero-image img{
     width: 100%;
     padding:2px 12px;
     aspect-ratio: 1 / 1;               /* квадратне фото під бейджем */
     height: auto;
     object-fit: cover;
     display: block;
     border-radius: 12px;
   }
  
    /* Праворуч — карта продукту */
    .main .product-sheet{ grid-column: 2; margin: var(--space-12) 0 var(--space-12); }
    .product-sheet > .container{
      padding-left: 0; padding-right: 0; max-width: none;
      display: grid; row-gap: var(--space-12); justify-items: start; /* все ліворуч */
    }
  
    /* 2) Бейдж "Бестселер" праворуч, над назвою; з фото — ховаємо */
    /* Бейдж тепер у лівій колонці над фото → псевдоелемент у правій колонці більше не потрібен */
    .hero-badge{ display: inline-flex;padding:2px 12px; }
    .product-sheet > .container::before{ content: none; }
  
    /* 3) Назва / автор — ліворуч, компактно */
    .product-title{ margin: 0; font-size: 18px; line-height: 1.18; letter-spacing: .1px; }
    .product-author{ margin: 0; color: var(--color-muted); font-size: 14px; }
  
    /* 4) Рейтинг — в одну лінію, ліворуч */
    .rating{
      display: flex; align-items: center; gap: 8px; margin: 0;
      justify-content: flex-start;
    }
    .rating-value{ font-size: 15px; font-weight: 700; }
    .reviews-link{ font-size: 14px; color: var(--color-accent); }
  
    /* 5) Вибір версії — дві рівні картки */
    .options{ margin: 0; }
    .segmented{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-10);
      min-width: 0;
    }
    .segmented .opt{
      --slot: 20px;
      display: grid; grid-template-columns: var(--slot) 1fr var(--slot);
      align-items: center; column-gap: 8px;
      padding: 6px 8px;
      min-height: 44px; border-radius: 18px;
    }
    .opt-ico{ width: 18px; height: 18px; justify-self: center; }
    .opt-body{ grid-column: 2; display: grid; justify-items: center; gap: 4px; text-align: center; }
    .opt-title{ font-size: 15px; }
    .opt-amount{ font-size: 20px; }
  
    /* 6) "Купити" — під опціями (inline), sticky-CTA ховаємо */
    .buy-inline{
      display: grid;
      grid-template-columns: minmax(120px,auto) minmax(0,1fr);
      grid-template-areas:
        "price  button"
        "note   button";
      align-items: center;
      column-gap: 12px; row-gap: 6px;
      padding-top: var(--space-12); border-top: 1px solid var(--color-border);
      margin-top: 0;
    }
    .buy-inline .price-col{ grid-area: price; display: flex; flex-direction: column; gap: 2px; }
    .buy-inline .buy-note{ grid-area: note; font-size: 12px; color: var(--color-muted); justify-self:center; text-align:center; }
    .buy-inline .buy-btn{
      grid-area: button; justify-self: stretch;
      padding-inline: 22px;              /* легке подовження за рахунок внутрішнього відступу */
      min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px;
      background: var(--color-accent); color: #fff; font-weight: 800; font-size: 17px;
      box-shadow: 0 8px 20px rgba(0,116,217,.18);
    }
    .sticky-cta{ display: none; }
    body.has-sticky-cta .main{ padding-bottom: 0; } /* забрати резерв під липку панель */
  
    /* 7) УСЕ ІНШЕ після верхнього блоку — в один стовпець на всю ширину */
    .main > *:not(.hero-image):not(.product-sheet){
      grid-column: 1 / -1;
    }
  }

@media (min-width: 768px){
  .main{
    display:grid;
    grid-template-columns: minmax(360px, 60%) minmax(260px, 36vw); /* фото | компактний правий блок ~30–40% */
    gap: 20px;
    align-items:start;
    padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }
  .hero-image{ grid-column:1; margin: var(--space-16) 0; padding-top: 0; }
  .hero-image img{ width:100%; height:auto; aspect-ratio: 1 / 1; border-radius:16px; object-fit:cover; }
  /* Центруємо бейдж і кладемо на сам верх контейнера, щоб верхні краї колонок збігалися оптично */
  .hero-badge{ top:0; left:50%; transform:translateX(-50%); }

  .product-sheet{ grid-column:2; margin: var(--space-16) 0; }
  .product-sheet > .container{
    padding:16px; border:1px solid var(--color-border); border-radius:16px; background:#fff;
    box-shadow: var(--shadow-1);
    max-width: clamp(360px, 36vw, 520px);
    display:grid; row-gap:12px; justify-items:center;
  }
  .product-title, .product-author{ text-align:center; }

  .rating{ display:flex; align-items:center; gap:8px; margin:0; justify-content:center; }
  .segmented{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; width:100%; max-width:420px; }
  .segmented .opt{ min-height: 44px; padding: 6px 10px; column-gap: 8px; border-radius:14px; }
  .opt-title{ font-size: 14px; }
  .opt-amount{ font-size: 18px; }

  /* показуємо inline-купівлю і ховаємо нижню панель на планшетах */
  .buy-inline{
    display:grid; width:100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "price"
      "button"
      "note";
    align-items:center; justify-items:center;
    row-gap:8px;
    padding-top:12px; border-top:1px solid var(--color-border);
  }
  .buy-inline .price-col{ display:flex; flex-direction:row; align-items:baseline; gap:10px; justify-content:flex-start; width:100%; max-width:420px; }
  .price-new{ order:1; display:flex; align-items:baseline; gap:4px; }
  .price-old{ order:2; display:flex; align-items:baseline; gap:4px; opacity:.7; }
  .price-old s{ text-decoration:line-through; }
  .buy-inline .buy-btn{ width:100%; max-width:420px; min-height:50px; padding:12px 22px; border:0; border-radius:999px; background: var(--color-accent); color:#fff; font-weight:800; font-size:18px; letter-spacing:.2px; box-shadow: 0 10px 24px rgba(0,116,217,.18); }
  .buy-inline .buy-btn:active{ transform: translateY(1px); }
  .buy-inline .buy-btn:focus-visible{ outline:2px solid rgba(0,116,217,.3); outline-offset:2px; }
  .sticky-cta{ display:none; }
  body.has-sticky-cta .main{ padding-bottom:0; }
}

@media (min-width: 1024px){
  .main{ grid-template-columns: minmax(360px, 44%) 1fr; gap: 28px; }
  .product-title{ font-size: 30px; }
  .product-author{ font-size: 18px; }
  .new-amount{ font-size: 30px; }
  .buy-inline .buy-btn{ min-height:52px; font-size:18px; }
}

@media (orientation: landscape) and (max-height: 560px){
  /* Ensure equal top offset from the header for both columns */
  .main{ margin-top: var(--space-12); }
  .main .hero-image{ margin-top: 0; }
  .main .product-sheet{ margin-top: 0; padding-top: 0; }
}

@media (min-width: 768px){
  /* Equalize top spacing for image and right block */
  .hero-image{ margin-top: var(--space-16); }
  .product-sheet{ margin-top: var(--space-16); padding-top: 0; }
}

/* Center and span adjustments for sections below the buy block on tablets */
@media (min-width: 768px){
  /* Make every subsequent block (after image and product-sheet) span both columns and center */
  .main > *:not(.hero-image):not(.product-sheet){
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 1040px; /* match .container width on tablet */
  }
}

/* Bundle — tablet adaptations */
@media (min-width: 768px){
  .bundle{ margin: var(--space-24) 0; }
  .bundle-card{ border-radius: 24px; }
  .bundle-flag{ min-height: 50px; font-size: clamp(13px, 2vw, 15px); }
  .bundle-header{ padding: 18px 20px 12px; }
  .bundle-title{ font-size: clamp(22px, 4vw, 28px); }
  .bundle-subtitle{ font-size: clamp(14px, 2.6vw, 16px); }

  .bundle-books{ padding: 16px 20px; gap: 16px; }
  .bundle-book-item{ border-radius: 14px; }
  .bundle-book-item img{ aspect-ratio: 4 / 6; width: 75%; margin: 0 auto; display:block; border-radius: 12px; }

  .bundle-footer{
    padding: 16px 20px 18px;
    grid-template-columns: 1fr auto;   /* ціна | кнопка */
    column-gap: 16px;
  }
  .bundle-prices{ flex-direction: row; align-items: baseline; gap: 10px; }
  .bundle-old{ font-size: 16px; }
  .bundle-new{ font-size: clamp(24px, 3.4vw, 30px); }
  .bundle-order-btn{ min-height: 50px; padding: 12px 24px; width: auto; }
}

/* How to order — tablet adaptations */
@media (min-width: 768px){
  .howto{ margin: var(--space-24) 0; }
  .how-card{ padding: 28px 24px 24px; border-radius: 24px; }
  .how-title{ font-size: clamp(26px, 4.4vw, 32px); }

  /* Steps in two columns */
  .how-steps{ grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px; }
  .how-step{ grid-template-columns: 44px 1fr; column-gap: 12px; }
  .step-dot{ width: 40px; height: 40px; font-size: 15px; }
  .step-head{ font-size: clamp(14px, 2.2vw, 18px); }
  .step-desc{ font-size: clamp(12px, 2vw, 14px); }

  /* Benefits in two columns */
  .how-benefits{ grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; padding-top: 14px; }
}

/* How to order — desktop refinements */
@media (min-width: 1024px){
  .how-card{ padding: 34px 28px 28px; border-radius: 28px; }
  .how-title{ font-size: clamp(28px, 3.6vw, 36px); }

  /* Steps: 3 in a row */
  .how-steps{ grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 24px; }
  .how-step{ grid-template-columns: 48px 1fr; column-gap: 14px; }
  .step-dot{ width: 44px; height: 44px; font-size: 16px; }
  .step-head{ font-size: clamp(16px, 2vw, 20px); }
  .step-desc{ font-size: clamp(13px, 1.8vw, 15px); }

  /* Benefits: 3 columns */
  .how-benefits{ grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 12px; }
}

/* Bundle — desktop refinements */
@media (min-width: 1024px){
  .bundle{ margin: var(--space-24) 0; }
  .bundle-card{ border-radius: 28px; }
  .bundle-flag{ min-height: 54px; font-size: clamp(14px, 1.6vw, 16px); }
  .bundle-header{ padding: 22px 24px 14px; }
  .bundle-title{ font-size: clamp(24px, 3.4vw, 32px); }
  .bundle-subtitle{ font-size: clamp(15px, 2vw, 18px); }

  .bundle-books{ padding: 20px 24px; gap: 20px; }
  .bundle-book-item{ border-radius: 16px; }
  .bundle-book-item img{ width: 74%; border-radius: 14px; }

  .bundle-footer{
    padding: 18px 24px 20px;
    grid-template-columns: 1fr auto;   /* ціна | кнопка */
    column-gap: 20px;
  }
  .bundle-prices{ flex-direction: row; align-items: baseline; gap: 12px; }
  .bundle-old{ font-size: 18px; }
  .bundle-new{ font-size: clamp(26px, 3vw, 34px); }
  .bundle-order-btn{ min-height: 52px; padding: 14px 28px; width: auto; }
}

/* Bundle — tablet harmony refinements */
@media (min-width: 768px){
  .bundle-card{ max-width: none; width: 100%; margin: 0; box-shadow: var(--shadow-1); }

  .bundle-header{ padding: 18px 24px 10px; }
  .bundle-title{ margin: 0; letter-spacing: .2px; }
  .bundle-subtitle{ margin-top: 6px; }
  .savings-amount{ padding: 3px 8px; border-radius: 12px; font-size: .92em; }

  .bundle-books{ padding: 18px 24px; gap: 18px; }
  .bundle-book-item{ border-radius: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.06); }

  .bundle-footer{ padding: 16px 24px 18px; align-items: center; }
  .bundle-prices{ flex-direction: row; align-items: baseline; gap: 12px; }
  .bundle-old{ font-size: 15px; opacity: .65; }
  .bundle-new{ font-size: clamp(24px, 3.8vw, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
  .bundle-order-btn{ min-height: 50px; padding: 12px 24px; border-radius: 999px; }
}

/* Top two-column area width = same as below sections (tablet) */
@media (min-width: 768px){
  .main{
    max-width: 920px;              /* та сама ширина, що й у блоків нижче */
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(360px, 60%) minmax(260px, 40%);
  }
  /* Правий блок усередині не обмежуємо додатково */
  .product-sheet > .container{ max-width: 100%; }
}

/* Tablet: unify outer width with below blocks, 50/50 columns, matching container gutters */
@media (min-width: 768px){
  .main{
     padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
     padding-right: calc(var(--gutter) + env(safe-area-inset-right));
     max-width: 1040px;  /* same as .container on tablet */
     margin-left: auto;
     margin-right: auto;
     grid-template-columns: 1fr 1fr; /* 50 / 50 */
  }
}

/* Tablet: ensure inner column padding matches visual gutters below */
@media (min-width: 768px){
  .hero-image,
  .product-sheet{
    padding-left:  var(--gutter);
    padding-right: var(--gutter);
  }
  /* Remove unintended inner padding from the image for perfect edge alignment */
  .main .hero-image img{ padding-left: 0; padding-right: 0; }
}

/* Ensure rating stars are large on small screens (override generic .stars) */
.rating .stars{ --s: 36px; }
@media (max-width: 360px){ .rating .stars{ --s: 26px; } }

/* ===== Bundle affordance refinements (mobile-first) ===== */
/* Harmonize colors with site accent and use a pencil icon; hide on the first cover */
.bundle-book-item::after{
  color: var(--color-accent);
  border-color: #d7e6fb;
  box-shadow: 0 4px 12px rgba(0,116,217,.08);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%230074d9'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82Z'/></svg>");
}
.bundle-book-item::before{ background: linear-gradient(180deg, transparent 55%, rgba(0,116,217,.06)); }
.bundle-books .bundle-book-item:first-child::after{ display:none; }
.bundle-books .bundle-book-item:first-child::before{ display:none; }

/* =============================================================== */
/* ===== Promo Bundle (clone, independent namespace for promotions page) ===== */

.promo-bundle{ margin: var(--space-16) 0; }

.promo-bundle-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:20px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  position: relative; /* for subtle badge positioning */
}

.promo-bundle-header{ padding:22px 16px 12px; }
.promo-bundle-header{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; width:100%;
  padding:22px 16px 12px;
}
.promo-bundle-title{
  margin:0;
  font-weight:800;
  font-size: clamp(18px, 5.2vw, 26px);
  text-align:center;
  letter-spacing:.2px;
}

.promo-bundle-books{
  list-style:none; margin:0; padding:12px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.promo-bundle-book{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#f7f7f8;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: default; /* no swapping */
}
.promo-bundle-book img{
  width:100%;
  aspect-ratio:4/6;
  object-fit:cover;
  display:block;
}
/* remove interactive cues */
.promo-bundle-book::before,
.promo-bundle-book::after{ content:none !important; }

.promo-bundle-footer{
  padding:16px 16px 16px;
  display:grid;
  grid-template-columns: auto 1fr; /* price | button */
  align-items:center;
  column-gap:12px;
}
.promo-bundle-prices{ display:flex; flex-direction:column; gap:4px; }
.promo-bundle-old{ color:var(--color-muted); text-decoration:line-through; opacity:.7; font-size:14px; }
.promo-bundle-new{ font-weight:800; font-size: clamp(22px, 6vw, 28px); color:var(--color-text); }
.promo-bundle-order-btn{
  justify-self:end;
  min-height:48px;
  padding:12px 22px;
  width:100%;
  border:0; border-radius:999px;
  background: var(--color-accent);
  color:#fff; font-weight:800; font-size:17px; letter-spacing:.2px;
  box-shadow: 0 8px 20px rgba(0,116,217,.16);
}
.promo-bundle-order-btn:active{ transform: translateY(1px); }
.promo-bundle-order-btn:focus-visible{ outline:2px solid rgba(0,116,217,.35); outline-offset:2px; }

@media (min-width:420px){ .promo-bundle-order-btn{ width:auto; } }

@media (max-width:360px){
  .promo-bundle-footer{ grid-template-columns: 1fr; row-gap:10px; }
  .promo-bundle-order-btn{ justify-self:stretch; width:100%; }
}

/* Tablet */
@media (min-width:768px){
  .promo-bundle{ margin: var(--space-24) 0; }
  .promo-bundle-card{ border-radius:24px; }
  .promo-bundle-header{ padding:18px 20px 12px; }
  .promo-bundle-title{ font-size: clamp(22px, 4vw, 28px); }
  .promo-bundle-books{ padding:16px 20px; gap:16px; }
  .promo-bundle-book{ border-radius:14px; }
  .promo-bundle-book img{ aspect-ratio:4/6; width:75%; margin:0 auto; display:block; border-radius:12px; }
  .promo-bundle-footer{ padding:16px 20px 18px; grid-template-columns: 1fr auto; column-gap:16px; }
  .promo-bundle-prices{ flex-direction:row; align-items:baseline; gap:10px; }
  .promo-bundle-old{ font-size:16px; }
  .promo-bundle-new{ font-size: clamp(24px, 3.4vw, 30px); }
  .promo-bundle-order-btn{ min-height:50px; padding:12px 24px; width:auto; }
}

/* Desktop */
@media (min-width:1024px){
  .promo-bundle-card{ border-radius:28px; }
  .promo-bundle-header{ padding:22px 24px 14px; }
  .promo-bundle-title{ font-size: clamp(24px, 3.4vw, 32px); }
  .promo-bundle-books{ padding:20px 24px; gap:20px; }
  .promo-bundle-book{ border-radius:16px; }
  .promo-bundle-book img{ width:74%; border-radius:14px; }
  .promo-bundle-footer{ padding:18px 24px 20px; grid-template-columns: 1fr auto; column-gap:20px; }
  .promo-bundle-prices{ gap:12px; }
  .promo-bundle-old{ font-size:18px; }
  .promo-bundle-new{ font-size: clamp(26px, 3vw, 34px); }
  .promo-bundle-order-btn{ min-height:52px; padding:14px 28px; }
}

/* ===== Promotions intro (clean typographic block) ===== */
.promo-intro-card{ text-align: initial; }
.promo-intro-title{
  margin:0 0 6px;
  font-weight:900;
  font-size: clamp(24px, 6.2vw, 36px);
  letter-spacing:.2px;
  line-height:1.1;
  text-align:center;
}
.promo-intro-list{
  margin: 10px auto 8px;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 8px;
  max-width: 680px;
  color:#1d1d1f;
  justify-items: start;
  text-align: left;
}
.promo-intro-list li{
  display: flex;
  align-items: flex-start; /* keep bullet near first line when text wraps */
  justify-content: flex-start;
  gap: 8px;
  font-size: clamp(14px, 3.8vw, 18px);
}
.promo-intro-list li::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34c759;
  flex: 0 0 8px;
  margin-top: 0.35em; /* nudge dot toward first line baseline on multi-line */
}
.promo-intro-note{
  margin: 10px 0 0;
  color: #6e6e73;
  font-size: 14px;
  text-align:center;
}

/* ===== Format tabs (paper | digital) ===== */
.format-tabs{ display:flex; gap:8px; background:#f7f7f9; border:1px solid #ededf0; border-radius:12px; padding:6px; position:sticky; top: calc(var(--header-h, 60px) + 6px); z-index:10; }
.format-tab{
  flex:1; min-height:40px; border:1px solid transparent; border-radius:999px; background:#fff; color:#1d1d1f; font-weight:700; letter-spacing:.1px;
}
.format-tab.is-active{ background:#0074d9; color:#fff; border-color:#0074d9; }
.format-hint{ margin:6px 0 0; font-size:12px; color:#6e6e73; }

/* small badge inside bundle header */
.promo-format-badge{ display:none !important; }
.promo-format-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--format-dot, #9aa1a9); }
[data-format="paper"] .promo-format-badge{ --format-dot: #0b63ce; }
[data-format="digital"] .promo-format-badge{ --format-dot: #b45100; }
@media (max-width: 420px){
  .promo-bundle-header{ align-items:center; padding-top: 16px; }
}

/* create an inner edge mask so the badge looks like it peeks from behind */
.promo-bundle-card::after{ content:none; }
.promo-bundle-card::before{ content:none; }

/* Digital bundles: subtle e-books badge (top-right, mobile-first) */
.promo-bundle-card[data-format="digital"]::after{
  content: "e-books";
  position: absolute; top: 6px; right: 8px; z-index: 2;
  padding: 2px 4px; border-radius: 999px;
  font-size: 9px; font-weight: 600; letter-spacing: .2px;
  background: #fff8ef; color: #b45100; border: 1px solid #ffe1bf;
}
@media (min-width: 768px){
  .promo-bundle-card[data-format="digital"]::after{ top: 6px; right: 8px; font-size: 9px; padding: 2px 7px; }
}