/* =============================================
   RESPONSIVE CSS — Biserka Ogrlić sajt
   Mobile: < 768px | Tablet: 768–1024px
   ============================================= */

/* ── Global fixes ── */
body { min-width: 0 !important; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── MOBILE: < 768px ── */
@media (max-width: 767px) {

  /* — Announcement bar — */
  .announce { 
    flex-wrap: wrap !important; justify-content: center !important; gap: 4px 8px !important;
    padding: 7px 12px !important; font-size: 9px !important; text-align: center;
  }
  .announce__dot { display: none !important; }

  /* — Header — */
  .hdr__inner {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 12px 16px !important;
  }
  .hdr__brand { font-size: 16px !important; letter-spacing: 0.10em !important; order: 2; }
  .hdr__brand-mark { font-size: 20px !important; }
  .hdr__left { order: 1; flex: 0 0 auto !important; }
  .hdr__right { order: 3; flex: 0 0 auto !important; }
  .hdr__nav { display: none !important; }
  .hdr__gift-btn { display: none !important; }
  .hdr__icon { width: 32px !important; height: 32px !important; }

  /* — Hamburger — */
  .hamburger { display: flex !important; }

  /* — ALL grids to 1 or 2 columns — */
  .grid--4,
  .grid--3,
  .grid,
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* — Any 2-column grid to 1 column — */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* — Hero — */
  .hero { padding: 32px 16px 24px !important; }
  .hero__inner { 
    display: flex !important; flex-direction: column !important; gap: 24px !important; 
  }
  .hero__h { font-size: 36px !important; line-height: 1 !important; }
  .hero__lede { font-size: 14px !important; }
  .hero__img, .hero__img--lg { display: none !important; }
  .hero__img--sm { display: block !important; width: 100% !important; }
  .hero__actions { flex-direction: column !important; gap: 10px !important; }
  .hero__actions .btn { width: 100% !important; justify-content: center !important; }

  /* — Page hero — */
  .page-hero { padding: 28px 16px 0 !important; }
  .page-hero__h { font-size: 36px !important; }
  .page-hero__lede { font-size: 14px !important; }

  /* — Section padding — all padded elements — */
  .section { padding: 48px 16px !important; }
  .section__h { font-size: 28px !important; }
  .section__hd { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 24px !important; }

  /* — Eyebrow — */
  .eyebrow { font-size: 10px !important; margin-bottom: 10px !important; }

  /* — Story / philosophy split sections — */
  .story, .philo, .philosophy,
  .story__inner, .promo,
  [class*="story"], [class*="philo"] {
    display: flex !important; flex-direction: column !important; gap: 24px !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .story__h, .philo__h, .philosophy__h { font-size: 28px !important; }
  .promo { padding: 48px 16px !important; }
  .promo__content { max-width: 100% !important; }
  .promo__h { font-size: 28px !important; }
  .promo__video { margin-top: 24px !important; }

  /* — Product grid / Shop — */
  .shop-grid { padding: 0 16px 40px !important; }
  .shop-hero { padding: 32px 16px 24px !important; }
  .shop-hero__title { font-size: 36px !important; }
  .shop-hero__lede { font-size: 14px !important; max-width: 100% !important; }
  .shop-search { max-width: 100% !important; margin: 0 0 24px !important; }
  .shop-search__input { padding: 12px 40px 12px 16px !important; font-size: 14px !important; }
  .filter-tabs { 
    padding: 0 16px 24px !important; gap: 6px !important;
    overflow-x: auto !important; flex-wrap: nowrap !important; 
    justify-content: flex-start !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { padding: 7px 12px !important; font-size: 11px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

  /* — Product cards — */
  .card__name { font-size: 12px !important; }
  .card__price { font-size: 10px !important; }
  .card__sub { font-size: 10px !important; margin-top: 2px !important; }
  .card__quick { display: none !important; }
  .card__tag { font-size: 9px !important; padding: 3px 8px !important; }

  /* — Categories grid — */
  .cats { 
    grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
    padding: 0 16px !important;
  }
  .cat__label { font-size: 11px !important; padding: 6px 10px !important; }
  .cat__n { font-size: 10px !important; }

  /* — Product detail — */
  .product-detail { 
    display: flex !important; flex-direction: column !important; gap: 20px !important;
    padding: 20px 16px 40px !important;
  }
  .product-gallery { position: static !important; }
  .product-gallery__main { border-radius: 8px !important; }
  .product-info { padding-top: 0 !important; }
  .product-info__name { font-size: 28px !important; margin-bottom: 10px !important; }
  .product-info__price { font-size: 16px !important; margin-bottom: 20px !important; }
  .product-info__desc { font-size: 13px !important; margin-bottom: 20px !important; line-height: 1.6 !important; }
  .product-info__desc p { margin: 0 0 10px !important; }
  .product-breadcrumb { margin-bottom: 12px !important; font-size: 10px !important; }
  .product-detail-row__label { min-width: 90px !important; font-size: 10px !important; }
  .product-detail-row__value { font-size: 13px !important; }
  .product-actions { flex-direction: column !important; gap: 10px !important; }
  .product-actions .btn { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .product-usp { flex-direction: column !important; gap: 12px !important; padding-top: 20px !important; margin-top: 24px !important; }
  .product-usp__item { font-size: 12px !important; }

  /* — Related — */
  .related { padding: 48px 16px !important; }
  .related__title { font-size: 24px !important; margin-bottom: 20px !important; }

  /* — Blog — */
  .blog-featured { 
    display: flex !important; flex-direction: column !important; gap: 20px !important;
    padding: 24px 16px !important;
  }
  .blog-featured__h { font-size: 28px !important; }
  .blog-featured__p { font-size: 13px !important; max-width: 100% !important; }
  .blog-featured__date { font-size: 10px !important; }
  .blog-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .blog-card__h { font-size: 20px !important; }
  .blog-card__p { font-size: 13px !important; }

  /* — Blog article — */
  .article-hero { padding: 24px 16px !important; }
  .article-hero__h { font-size: 28px !important; line-height: 1.1 !important; }
  .article-hero__meta { font-size: 10px !important; flex-wrap: wrap !important; }
  .article-content { padding: 24px 16px !important; max-width: 100% !important; }
  .article-content h2 { font-size: 22px !important; }
  .article-content h3 { font-size: 18px !important; }
  .article-content p, .article-content li { font-size: 14px !important; line-height: 1.65 !important; }
  .article-share { padding: 20px 16px !important; flex-wrap: wrap !important; gap: 12px !important; }
  .article-cta { margin: 24px 16px !important; padding: 28px 16px !important; }
  .article-cta__h { font-size: 22px !important; }
  .article-cta__p { font-size: 13px !important; }
  .breadcrumb { padding: 12px 16px 0 !important; font-size: 10px !important; flex-wrap: wrap !important; }

  /* — Contact — */
  .contact-grid, .contact, .contact__inner { 
    display: flex !important; flex-direction: column !important; gap: 24px !important; 
  }

  /* — About / O nama — */
  .about-hero, .about-split, .about-values { 
    display: flex !important; flex-direction: column !important; gap: 24px !important; 
  }
  .about-values__grid, .values-grid { 
    grid-template-columns: 1fr !important; gap: 20px !important; 
  }

  /* — Korpa — */
  .cart-layout { 
    display: flex !important; flex-direction: column !important; gap: 24px !important;
    padding: 24px 16px !important;
  }
  .cart-item { 
    grid-template-columns: 70px 1fr !important; gap: 12px !important;
    padding: 12px !important;
  }
  .cart-item__actions { grid-column: 1 / -1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
  .cart-summary { position: static !important; }

  /* — Checkout — */
  .checkout-layout { 
    display: flex !important; flex-direction: column !important; gap: 24px !important;
    padding: 24px 16px !important;
  }
  .checkout-row { 
    display: flex !important; flex-direction: column !important; gap: 12px !important; 
  }

  /* — Poklon vaučer — */
  .voucher-grid, .voucher-cards { 
    grid-template-columns: 1fr !important; gap: 16px !important; 
  }
  .voucher-hero__h { font-size: 32px !important; }

  /* — FAQ — */
  .faq { padding: 32px 16px !important; }

  /* — Testimonials / journal — */
  .journal-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .testi-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* — Newsletter — */
  .newsletter { 
    flex-direction: column !important; gap: 20px !important; 
    padding: 32px 16px !important; text-align: center !important;
  }
  .newsletter__form { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .newsletter__input { width: 100% !important; text-align: center !important; }
  .newsletter__h { font-size: 24px !important; }
  .newsletter__p { font-size: 13px !important; max-width: 100% !important; }

  /* — Divider — */
  .divider { padding: 0 16px !important; }

  /* — Footer — */
  .ftr { padding: 32px 16px 20px !important; margin-top: 0 !important; }
  .ftr__top { 
    display: flex !important; flex-direction: column !important; gap: 24px !important;
    padding-bottom: 24px !important;
  }
  .ftr__mark { font-size: 18px !important; }
  .ftr__tag { font-size: 12px !important; }
  .ftr__h { font-size: 10px !important; margin-bottom: 4px !important; }
  .ftr__col a { font-size: 12px !important; }
  .ftr__sub input { font-size: 12px !important; }
  .ftr__bot { 
    flex-wrap: wrap !important; justify-content: center !important; gap: 4px 8px !important; 
    text-align: center !important; font-size: 9px !important; padding-top: 16px !important;
  }
  .ftr__spc { display: none !important; }

  /* — Buttons — */
  .btn--lg { padding: 13px 20px !important; font-size: 13px !important; }
  .btn { padding: 10px 16px !important; font-size: 12px !important; }
  .link-arrow { font-size: 12px !important; }

  /* — General padding fix for any section-like wrapper — */
  [style*="padding"][style*="40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="max-width: 1600px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ── TABLET: 768px – 1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {

  .hamburger { display: none !important; }
  .hdr__inner { padding: 14px 24px !important; }
  .hdr__brand { font-size: 20px !important; }
  .hdr__nav { gap: 14px !important; }
  .hdr__nav-item { font-size: 11px !important; }

  .hero__h, .page-hero__h { font-size: 48px !important; }
  .hero { padding: 40px 24px !important; }

  .grid--4 { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .shop-hero__title { font-size: 48px !important; }
  .shop-grid { padding: 0 24px 48px !important; }
  .filter-tabs { padding: 0 24px 32px !important; }

  .product-detail { padding: 32px 24px 48px !important; gap: 32px !important; }
  .product-info__name { font-size: 36px !important; }

  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .blog-featured { padding: 40px 24px !important; gap: 32px !important; }

  .section { padding: 64px 24px !important; }
  .cats { grid-template-columns: repeat(3, 1fr) !important; }

  .ftr { padding: 40px 24px 20px !important; }
  .ftr__top { 
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 24px !important; 
  }

  .newsletter { padding: 40px 24px !important; }
  .promo { padding: 48px 24px !important; }

  .journal-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .article-content { padding: 32px 24px !important; }
  .article-hero { padding: 32px 24px !important; }
}

/* ── DESKTOP: ensure no leftover ── */
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  .mobile-nav { display: none !important; }
}

/* ── Hamburger menu component ── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 36px; height: 36px; gap: 5px;
  cursor: pointer; z-index: 100; border-radius: 999px;
  background: transparent; border: none; padding: 0;
}
.hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink, #1A1714); transition: all 0.25s ease;
}
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ── Mobile nav overlay ── */
.mobile-nav {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg, #F2EDE3); z-index: 90;
  flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transform: translateX(-100%); transition: transform 0.3s ease;
}
.mobile-nav.is-open { transform: translateX(0); display: flex !important; }
.mobile-nav a {
  font-family: var(--serif, Georgia); font-size: 24px; letter-spacing: 0.04em;
  color: var(--ink, #1A1714); padding: 6px 0;
}
.mobile-nav a:hover { color: var(--accent, #A56F5C); }
.mobile-nav__close {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; border: none; font-size: 28px; 
  color: var(--ink, #1A1714); line-height: 1;
}

/* ── O NAMA PAGE SPECIFIC FIXES ── */
@media (max-width: 767px) {
  /* About hero */
  .about-hero {
    display: flex !important; flex-direction: column !important;
    gap: 24px !important; padding: 32px 16px 0 !important;
  }
  .about-hero__h { font-size: 36px !important; }
  .about-hero__p { font-size: 14px !important; max-width: 100% !important; }

  /* Philosophy grid - 3 cols to 1 */
  .philosophy { padding: 48px 16px !important; }
  .philosophy__grid {
    grid-template-columns: 1fr !important; gap: 28px !important;
  }
  .philosophy__h { font-size: 22px !important; }
  .philosophy__p { font-size: 13px !important; }

  /* Quote */
  .quote { padding: 40px 16px !important; }
  .quote__text { font-size: 24px !important; line-height: 1.2 !important; max-width: 100% !important; }
  .quote__attr { font-size: 10px !important; }

  /* Materials grid - 6 cols to 2 */
  .materials { padding: 48px 16px !important; }
  .materials__h { font-size: 32px !important; margin-bottom: 28px !important; }
  .materials__grid {
    grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important;
  }
  .material__name { font-size: 15px !important; }
  .material__desc { font-size: 11px !important; }

  /* BFW section */
  .bfw {
    display: flex !important; flex-direction: column !important;
    gap: 24px !important; padding: 48px 16px !important;
  }
  .bfw__h { font-size: 28px !important; }
  .bfw__p { font-size: 14px !important; max-width: 100% !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .about-hero { gap: 32px !important; padding: 40px 24px 0 !important; }
  .about-hero__h { font-size: 48px !important; }
  .philosophy { padding: 64px 24px !important; }
  .philosophy__grid { gap: 28px !important; }
  .materials { padding: 64px 24px !important; }
  .materials__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .materials__h { font-size: 40px !important; }
  .bfw { gap: 32px !important; padding: 64px 24px !important; }
  .bfw__h { font-size: 36px !important; }
  .quote { padding: 56px 24px !important; }
  .quote__text { font-size: 32px !important; }
}

/* ── KONTAKT PAGE SPECIFIC FIXES ── */
@media (max-width: 767px) {
  /* Main contact layout - stack left/right */
  .contact {
    display: flex !important; flex-direction: column !important;
    gap: 32px !important; padding: 32px 16px 48px !important;
  }
  .contact__h { font-size: 36px !important; }
  .contact__p { font-size: 14px !important; }

  /* Contact cards - 1 column */
  .contact-cards {
    grid-template-columns: 1fr !important; gap: 12px !important;
    margin-bottom: 32px !important;
  }

  /* Form rows - 1 column */
  .form__row {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }

  /* FAQ grid - 1 column */
  .faq__grid {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .contact { gap: 40px !important; padding: 40px 24px 64px !important; }
  .contact-cards { gap: 16px !important; }
  .faq__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ── POKLON VAUČER PAGE SPECIFIC FIXES ── */
@media (max-width: 767px) {
  /* Hero - stack text + visual */
  .gift-hero {
    display: flex !important; flex-direction: column !important;
    gap: 28px !important; padding: 32px 16px !important;
  }
  .gift-hero__title { font-size: 36px !important; }
  .gift-hero__lede { font-size: 14px !important; max-width: 100% !important; }
  .gift-hero__cta { flex-direction: column !important; gap: 10px !important; }
  .gift-hero__cta .btn { width: 100% !important; justify-content: center !important; }

  /* Voucher card visual */
  .voucher-card { padding: 24px !important; }
  .voucher-card__value { font-size: 32px !important; }
  .voucher-card__tagline { font-size: 16px !important; }

  /* Values / price cards - 1 column */
  .values-section { padding: 48px 16px !important; }
  .values-section__title { font-size: 32px !important; }
  .values-grid {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
  .value-card { padding: 24px !important; }
  .value-card__amount { font-size: 48px !important; }

  /* How it works / steps - 1 column */
  .how-section { padding: 48px 16px !important; }
  .how-section__title { font-size: 32px !important; }
  .steps {
    grid-template-columns: 1fr !important; gap: 24px !important;
  }
  .step__title { font-size: 18px !important; }
  .step__desc { font-size: 13px !important; }

  /* Why section - 1 column on small, 2 on wider mobile */
  .why-section { padding: 48px 16px !important; }
  .why-section__title { font-size: 32px !important; }
  .why-grid {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }
  .why-item__title { font-size: 16px !important; }
  .why-item__desc { font-size: 13px !important; }

  /* FAQ on this page */
  .faq { padding: 48px 16px !important; }
  .faq__title { font-size: 32px !important; }
  .faq-grid, .faq__grid {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  /* Slightly wider mobile - 2 cols for why */
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .gift-hero { gap: 40px !important; padding: 40px 24px !important; }
  .gift-hero__title { font-size: 48px !important; }
  .values-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .values-section, .how-section, .why-section { padding: 64px 24px !important; }
  .steps { gap: 24px !important; }
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
}

/* ── Voucher card size fix ── */
@media (max-width: 767px) {
  .gift-hero__visual { width: 100% !important; }
  .voucher-card {
    width: 100% !important; max-width: 320px !important;
    margin: 0 auto !important;
    padding: 24px 28px !important;
  }
  .voucher-card__brand { font-size: 14px !important; }
  .voucher-card__tagline { font-size: 14px !important; }
  .voucher-card__value { font-size: 28px !important; }
  .voucher-card__details { font-size: 10px !important; }
  .voucher-card__label { font-size: 8px !important; padding: 4px 8px !important; }
}

/* ── HOMEPAGE SPECIFIC FIXES ── */
@media (max-width: 767px) {
  /* Stats strip (8 unikatnih, 6 materijala...) */
  .hero__strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important; padding-top: 16px !important;
  }
  .strip-num { font-size: 24px !important; }
  .strip-lbl { font-size: 9px !important; }

  /* Index strip / Pregled kolekcije */
  .indexstrip { padding: 20px 16px !important; }
  .indexstrip__row { font-size: 10px !important; margin-bottom: 16px !important; }
  .indexstrip__items {
    grid-template-columns: 1fr 1fr !important; gap: 12px !important;
  }
  .indexstrip__items li { font-size: 16px !important; gap: 8px !important; }
  .indexstrip__items li span { font-size: 9px !important; }

  /* Promo / Filozofija section */
  .promo {
    display: flex !important; flex-direction: column !important;
    gap: 28px !important; padding: 48px 16px !important;
  }
  .promo__h { font-size: 36px !important; }
  .promo__words p { font-size: 14px !important; max-width: 100% !important; }

  /* Categories grid */
  .cats {
    grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
  }

  /* Promises band (Ručno rađeno, Dostava, Poklon vaučeri...) */
  .promises {
    grid-template-columns: 1fr !important;
  }
  .promise {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 24px 16px !important;
  }
  .promise:last-child { border-bottom: none !important; }
  .promise__h { font-size: 20px !important; }
  .promise__p { font-size: 12px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__strip { gap: 16px !important; }
  .strip-num { font-size: 28px !important; }
  .indexstrip { padding: 24px 24px !important; }
  .indexstrip__items { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .promo { gap: 40px !important; padding: 48px 24px !important; }
  .promo__h { font-size: 48px !important; }
  .promises { grid-template-columns: repeat(2, 1fr) !important; }
  .promise { padding: 28px 24px !important; }
  .promise:nth-child(2) { border-right: none !important; }
}


/* ── KORPA, CHECKOUT & POTVRDA — Mobile Responsive Fixes ── */

/* ── MOBILE: < 768px ── */
@media (max-width: 767px) {

  /* === KORPA === */

  /* Page header */
  .page-hd {
    padding: 24px 16px 20px !important;
  }
  .page-hd__h {
    font-size: 32px !important;
    line-height: 1 !important;
  }
  .eyebrow {
    margin-bottom: 10px !important;
  }

  /* Cart container — stack columns */
  .cart-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding: 24px 16px 48px !important;
  }

  /* Cart items */
  .cart-item {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  .cart-item__img {
    width: 80px !important;
    height: 100px !important;
    border-radius: 4px !important;
  }
  .cart-item__name {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  .cart-item__price {
    font-size: 12px !important;
  }
  .cart-item__actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
  }
  .cart-item__total {
    font-size: 16px !important;
    order: 2 !important;
  }
  .qty-control {
    order: 1 !important;
  }
  .qty-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .qty-value {
    min-width: 32px !important;
    font-size: 13px !important;
  }
  .cart-item__remove {
    order: 3 !important;
    font-size: 11px !important;
  }

  /* Cart summary — unstick and full width */
  .cart-summary {
    position: static !important;
    padding: 24px 20px !important;
    border-radius: 8px !important;
  }
  .cart-summary__h {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  .summary-line {
    padding: 10px 0 !important;
    font-size: 13px !important;
  }
  .summary-line--total .summary-line__label {
    font-size: 16px !important;
  }
  .summary-line--total .summary-line__value {
    font-size: 20px !important;
  }
  .shipping-note {
    font-size: 11px !important;
    margin-top: 12px !important;
  }

  /* Empty cart */
  .cart-empty {
    padding: 56px 16px !important;
  }
  .cart-empty__icon {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 20px !important;
  }
  .cart-empty__h {
    font-size: 32px !important;
  }
  .cart-empty__p {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }


  /* === CHECKOUT === */

  /* Checkout container — stack columns */
  .checkout-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 20px 16px 40px !important;
  }
  /* Force full-width on all checkout children */
  .checkout-container > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .checkout-form {
    width: 100% !important;
  }
  .form-section {
    width: 100% !important;
  }
  .form-group {
    width: 100% !important;
  }
  .form-input,
  .form-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-row {
    width: 100% !important;
  }
  .payment-method {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .order-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Also fix cart container children */
  .cart-container > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .cart-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Form sections — tighter spacing */
  .form-section {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }
  .form-section__h {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  .checkout-form {
    gap: 20px !important;
  }

  /* Form rows — stack to 1 column */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Form inputs — iOS zoom fix */
  .form-input,
  .form-textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }
  .form-label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  .form-group {
    margin-bottom: 10px !important;
    gap: 4px !important;
  }

  /* Payment method */
  .payment-method {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }
  .payment-method__label {
    font-size: 13px !important;
  }
  .payment-method__label span {
    font-size: 12px !important;
  }

  /* Textarea */
  .form-textarea {
    min-height: 80px !important;
  }

  /* Order summary — unstick, full width, tighter */
  .order-summary {
    position: static !important;
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
  .order-summary__h {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  .summary-items {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    gap: 10px !important;
  }
  .summary-item {
    gap: 8px !important;
  }
  .summary-item__name {
    font-size: 13px !important;
  }
  .summary-item__qty {
    font-size: 11px !important;
  }
  .summary-item__price {
    font-size: 12px !important;
  }
  .summary-line {
    padding: 8px 0 !important;
    font-size: 13px !important;
  }
  .summary-line--total {
    padding-top: 14px !important;
  }
  .summary-line--total .summary-line__label {
    font-size: 16px !important;
  }
  .summary-line--total .summary-line__value {
    font-size: 18px !important;
  }
  .secure-note {
    font-size: 10px !important;
    margin-top: 12px !important;
  }

  /* Error message */
  .error-message {
    font-size: 12px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }


  /* === POTVRDA (Thank you page) === */

  /* Confirmation section */
  .confirmation {
    padding: 48px 16px 56px !important;
  }

  /* Success icon */
  .success-icon {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 24px !important;
  }
  .success-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  /* Title */
  .confirmation__h {
    font-size: 36px !important;
    margin-bottom: 14px !important;
  }

  /* Description */
  .confirmation__p {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }

  /* Order number badge */
  .order-number {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 20px !important;
    margin-bottom: 36px !important;
  }
  .order-number__label {
    font-size: 10px !important;
  }
  .order-number__value {
    font-size: 16px !important;
  }

  /* Order details card */
  .order-details {
    padding: 24px 16px !important;
    margin-bottom: 32px !important;
  }
  .order-details__h {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }
  .order-items {
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }
  .order-item__name {
    font-size: 13px !important;
  }
  .order-item__price {
    font-size: 12px !important;
  }
  .order-summary-line {
    padding: 8px 0 !important;
    font-size: 13px !important;
  }
  .order-summary-line--total .order-summary-line__label {
    font-size: 16px !important;
  }
  .order-summary-line--total .order-summary-line__value {
    font-size: 20px !important;
  }

  /* Info boxes — stack to 1 column */
  .info-boxes {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  /* Info box */
  .info-box {
    padding: 20px 16px !important;
  }
  .info-box__h {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .info-box__p {
    font-size: 13px !important;
  }

  /* Action buttons — stack */
  .confirmation-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .confirmation-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ── TABLET: 768px – 1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {

  /* === KORPA === */
  .cart-container {
    grid-template-columns: 1fr 320px !important;
    gap: 32px !important;
    padding: 40px 24px !important;
  }
  .page-hd {
    padding: 40px 24px 32px !important;
  }
  .page-hd__h {
    font-size: 48px !important;
  }
  .cart-item__img {
    width: 100px !important;
    height: 125px !important;
  }
  .cart-item {
    grid-template-columns: 100px 1fr auto !important;
    gap: 16px !important;
  }
  .cart-item__name {
    font-size: 18px !important;
  }
  .cart-summary {
    padding: 24px !important;
  }
  .cart-summary__h {
    font-size: 24px !important;
  }

  /* === CHECKOUT === */
  .checkout-container {
    grid-template-columns: 1fr 320px !important;
    gap: 32px !important;
    padding: 40px 24px !important;
  }
  .form-section__h {
    font-size: 24px !important;
  }
  .order-summary {
    padding: 24px !important;
  }
  .order-summary__h {
    font-size: 24px !important;
  }

  /* === POTVRDA === */
  .confirmation {
    padding: 56px 24px 72px !important;
  }
  .confirmation__h {
    font-size: 48px !important;
  }
  .info-boxes {
    gap: 16px !important;
  }
  .order-details {
    padding: 32px 24px !important;
  }
}