/*
Theme Name: Drip Hose Landing
Description: Одностраничная тема-лендинг для товара (капельный полив). Яркий стиль: красный акцент, чёрные секции, кремовый фон, зелёный природный акцент.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: drip-hose-landing
*/

/* =========================================================
   TOKENS
   Red   #E63946 — акцент/скидка/CTA
   Black #17181B — тёмные секции
   Cream #FBF8F1 — фон
   Green #3E8E4F — природа/чекмарки
   Ink   #1F2323 — текст
   ========================================================= */
:root{
  --red: #f1760b;
  --red-dark: #ffbb13;
  --black: #17181B;
  --black-soft: #23262A;
  --cream: #FBF8F1;
  --cream-dim: #F1ECDD;
  --green: #3E8E4F;
  --ink: #1F2323;
  --stone: #6E7570;
  --white: #FFFFFF;

  --font-display: 'Montserrat', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 10px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:120%; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; line-height:1.15; margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.section-title{ text-align:center; font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:2rem; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms!important;transition-duration:0.01ms!important;} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--font-display); font-weight:700; font-size:0.95rem;
  padding:0.95rem 1.8rem; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.btn-red{ background:var(--red); color:var(--white); }
.btn-red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }

/* =========================================================
   TOP NAV
   ========================================================= */
.site-header{ background:var(--cream); padding:1rem 0; position:sticky; top:0; z-index:30; box-shadow:0 1px 0 rgba(0,0,0,0.06); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-logo{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; text-transform:uppercase; }
.nav-menu{ display:flex; gap:1.75rem; list-style:none; margin:0; padding:0; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; }
.nav-menu a:hover{ color:var(--red); }
@media (max-width:760px){ .nav-menu{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:clamp(2rem,5vw,3.5rem) 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,3rem); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.discount-tag{
  display:inline-block; background:var(--red); color:var(--white); font-weight:800;
  font-family:var(--font-display); font-size:0.85rem; padding:0.4rem 0.9rem; border-radius:6px; margin-bottom:1rem;
}
.price-compare{ display:flex; border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem; max-width:440px; }
.price-old-block, .price-new-block{ flex:1; padding:1rem 1.2rem; }
.price-old-block{ background:var(--black); color:var(--white); }
.price-new-block{ background:var(--red); color:var(--white); }
.price-label{ font-size:0.78rem; opacity:0.85; margin-bottom:0.3rem; }
.price-old-value{ font-size:1.5rem; font-weight:800; text-decoration:line-through; opacity:0.7; }
.price-new-value{ font-size:1.5rem; font-weight:800; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-media{ position:relative; }
.hero-media-card{
  ; border-radius:var(--radius); color:var(--white); position:relative; overflow:hidden; border: 1px solid black;
}
.hero-media-title{ font-size:1.5rem; text-transform:uppercase; }
.hero-media-sub{ color:var(--green); font-size:0.85rem; font-weight:700; text-transform:uppercase; margin:0.5rem 0 1rem; }
.hero-media-badges{ display:grid; gap:0.5rem; margin-bottom:1rem; }
.hero-media-badges span{ font-size:0.82rem; display:flex; gap:0.5rem; align-items:center; }
.hero-media-badges span::before{ content:"●"; color:var(--green); }
.hero-media img{ border-radius:8px; }
.hero-sizes{ display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap; }
.hero-sizes span{ background:var(--green); color:var(--white); font-size:0.78rem; font-weight:700; padding:0.3rem 0.65rem; border-radius:6px; }

/* =========================================================
   FEATURE GRID (Чому це працює)
   ========================================================= */
.features{ padding:clamp(3rem,6vw,5rem) 0; }
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .features-grid{ grid-template-columns:1fr; } }
.feature-card{ background:var(--white); border:1px solid var(--cream-dim); border-radius:var(--radius); overflow:hidden; }
.feature-card img{ max-height:350px; width:100%; object-fit:cover; }
.feature-body{ padding:1.25rem 1.4rem 1.5rem; }
.feature-body h3{ font-size:1.05rem; text-transform:uppercase; margin-bottom:0.6rem; }
.feature-body ul{ margin:0; padding-left:1.1rem; font-size:0.92rem; color:var(--stone); }
.feature-body li{ margin-bottom:0.3rem; }

/* =========================================================
   CHECKLIST (dark)
   ========================================================= */
.checklist{ background:var(--black); color:var(--white); padding:clamp(2.5rem,5vw,4rem) 0; }
.checklist h2{ text-align:center; margin-bottom:2rem; font-size:clamp(1.4rem,2.6vw,2rem); }
.checklist ul{ list-style:none; margin:0; padding:0; max-width:760px; margin:0 auto; display:grid; gap:1.1rem; }
.checklist li{ display:flex; gap:0.9rem; align-items:flex-start; font-size:1rem; }
.checklist li::before{
  content:"✓"; flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--green); color:var(--white); font-size:0.85rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}

/* =========================================================
   VIDEO
   ========================================================= */
.video-section{ padding:clamp(3rem,6vw,5rem) 0; }
.video-frame{
  position:relative; max-width:900px; margin:0 auto; aspect-ratio:16/9; background:var(--black-soft);
  border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--white);
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55;
}
.video-frame .play{
  position:relative; z-index:2; width:70px; height:70px; border-radius:50%; background:var(--red);
  border:none; color:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.video-frame .play:hover{ background:var(--red-dark); transform:scale(1.06); }
.video-frame.is-playing .video-thumb,
.video-frame.is-playing .play{ display:none; }

/* =========================================================
   USE CASES (Для чого купують)
   ========================================================= */
.usecases{ padding:clamp(3rem,6vw,5rem) 0; }
.usecases-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:1000px){ .usecases-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .usecases-grid{ grid-template-columns:1fr; } }
.usecase-card{ background:var(--black); color:var(--white); border-radius:var(--radius); overflow:hidden; }
.usecase-card img{ max-height:360px; width:100%; object-fit:cover; }
.usecase-body{ padding:1.1rem 1.2rem 1.4rem; }
.usecase-body h3{ font-size:1rem; text-transform:uppercase; margin-bottom:0.5rem; }
.usecase-body p{ font-size:0.88rem; color:rgba(255,255,255,0.75); margin:0; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ padding:clamp(3rem,6vw,5rem) 0; }
.testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .testimonials-grid{ grid-template-columns:1fr; } }
.testimonial-card{ background:var(--white); border:1px solid var(--cream-dim); border-radius:var(--radius); padding:1.4rem; }
.testimonial-name{ font-weight:700; margin-bottom:0.2rem; }
.testimonial-meta{ font-size:0.8rem; color:var(--stone); margin-bottom:0.5rem; }
.stars{ color:var(--red); letter-spacing:2px; margin-bottom:0.6rem; }
.testimonial-text{ font-size:0.92rem; color:var(--ink); margin-bottom:0.9rem; }
.testimonial-card img{ border-radius:8px; max-height: 400px; width:100%; object-fit:cover; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{ background:var(--black-soft); color:var(--white); padding:clamp(3rem,6vw,4.5rem) 0; text-align:center; }
.final-cta h2{ margin-bottom:2rem; font-size:clamp(1.4rem,2.6vw,2rem); }
.final-cta .hero-media-card{ max-width:420px; margin:0 auto 2rem; }
.final-price{ display:flex; max-width:520px; margin:0 auto 1.5rem; border-radius:var(--radius); overflow:hidden; }
.final-price > div{ flex:1; padding:1rem; }
.final-price .old{ background:var(--white); color:var(--black); }
.final-price .old span{ display:block; text-decoration:line-through; font-weight:800; font-size:1.3rem; }
.final-price .new{ background:var(--red); }
.final-price .new span{ display:block; font-weight:800; font-size:1.3rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--black); color:rgba(255,255,255,0.6); padding:1.5rem 0; text-align:center; font-size:0.82rem; }
.site-footer a:hover{ color:var(--white); }

/* =========================================================
   ORDER MODAL
   ========================================================= */
.dhl-modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(23,24,27,0.6);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.28s ease, visibility 0.28s ease;
}
.dhl-modal-overlay.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
}

.dhl-modal{
  position:relative; width:100%; max-width:600px;
  background:var(--white); border-radius:16px;
  padding:clamp(1.75rem,4vw,2.75rem);
  max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
  transform:translateY(24px) scale(0.97);
  transition:transform 0.28s ease;
}
.dhl-modal-overlay.is-open .dhl-modal{
  transform:translateY(0) scale(1);
}
.dhl-modal-close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:38px; height:38px; border:none; background:transparent;
  font-size:1.6rem; line-height:1; color:var(--stone); cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:background .2s ease, color .2s ease;
}
.dhl-modal-close:hover{ background:var(--cream-dim); color:var(--ink); }

.dhl-modal-title{
  font-size:clamp(1.3rem,3vw,1.7rem); text-align:center; margin-bottom:1.75rem;
  padding-right:1.5rem;
}

.dhl-order-form{ display:grid; gap:1rem; }
.dhl-input{
  width:100%; padding:1rem 1.1rem; font-family:var(--font-body); font-size:1rem;
  border:1px solid var(--cream-dim); border-radius:var(--radius); background:var(--cream);
  color:var(--ink); appearance:none;
}
select.dhl-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236E7570' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center;
}
.dhl-input:focus{ outline:2px solid var(--red); outline-offset:1px; }
.dhl-submit{ width:100%; margin-top:0.35rem; font-size:1.05rem; }
.dhl-privacy{ font-size:0.82rem; color:var(--stone); text-align:center; margin:0.5rem 0 0; }
.dhl-privacy a{ color:var(--ink); text-decoration:underline; }

@media (max-width:480px){
  .dhl-modal{ padding:1.5rem 1.25rem; border-radius:12px; }
}

/* =========================================================
   MOBILE OPTIMIZATION (≤640px)
   — грид-секции с несколькими карточками/фото становяться
     горизонтальними свайп-слайдерами (нативний scroll-snap,
     без додаткового JS);
   — трохи менший базовий розмір шрифту, щоб все акуратно
     влазило в ширину 320px.
   ========================================================= */
@media (max-width:640px){

  html{ font-size:100%; } /* знімаємо +20% масштаб з десктопу */

  .container{ padding:0 1rem; }

  /* ---- helper: горизонтальний слайдер ---- */
  .features-grid,
  .usecases-grid,
  .testimonials-grid{
    display:flex;
    grid-template-columns:none;
    gap:0.9rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:1rem;
    padding:0.25rem 1rem 1rem;
    margin:0 -1rem;
    scrollbar-width:none;
  }
  .features-grid::-webkit-scrollbar,
  .usecases-grid::-webkit-scrollbar,
  .testimonials-grid::-webkit-scrollbar{ display:none; }

  .feature-card,
  .usecase-card,
  .testimonial-card{
    flex:0 0 80%;
    scroll-snap-align:start;
  }

  .feature-card img{ height: auto;
    width: 100%; }
  .usecase-card img{ height: 350px;width: 100%; }

  .section-title{ font-size:1.35rem; margin-bottom:1.25rem; }
  .hero-title{ font-size:1.9rem; }
  .hero-subtitle{ font-size:0.95rem; }
  .btn{ font-size:0.85rem; padding:0.8rem 1.4rem; }

  .testimonial-card img {
    border-radius: 8px;
    min-height: 180px;
    max-height: 270px;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width:360px){
  html{ font-size:92%; }
  .feature-card,
  .usecase-card,
  .testimonial-card{ flex-basis:86%; }
  .usecase-card{ flex-basis:50%; }

  .testimonial-card img {
    border-radius: 8px;
    min-height: 180px;
    max-height: 270px;
    width: 100%;
    object-fit: cover;
  }
}