/* ====================================================================
   RESPONSIVE.CSS — Media queries για κινητά και tablets
   --------------------------------------------------------------------
   Όλες οι @media (max-width) ρυθμίσεις σε ΕΝΑ αρχείο, ώστε να βλέπεις
   εύκολα τι αλλάζει στο mobile. Πάντα φόρτωσε αυτό το αρχείο ΤΕΛΕΥΤΑΙΟ.
   --------------------------------------------------------------------
   Breakpoint stack:
     • Global (always-on iOS/touch fundamentals)
     • ≤1180px — tablet medium adjustments
     • ≤968px  — primary mobile breakpoint (drawer nav, stacking)
     • ≤768px  — phones portrait (further tightening)
     • ≤480px  — small phones (text scale, spacing)
     • ≤380px  — very narrow phones (extreme compaction)
     • landscape orientation + max-height:500px — phones in landscape
   ==================================================================== */

/* ====================================================================
   GLOBAL MOBILE/TOUCH FUNDAMENTALS — applied always (no media query)
   ==================================================================== */

/* Smooth touch scrolling on iOS */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* No tap highlight flash — clean editorial feel */
a,button,[role="button"],.icon-btn,.cat-link,.concern-row,.cert-badge,.product-seal{-webkit-tap-highlight-color:transparent}

/* Inputs ≥ 16px font on touch — prevents iOS auto-zoom στο focus */
@media (pointer:coarse){
  input[type="text"],input[type="email"],input[type="search"],input[type="tel"],
  input[type="number"],input[type="url"],input[type="password"],select,textarea{
    font-size:16px !important;
  }
}

/* Prevent horizontal scroll από rogue elements */
html,body{max-width:100%;overflow-x:hidden}

/* Touch target minimum — 44x44px για iOS HIG / 48dp για Material */
@media (pointer:coarse){
  .icon-btn,.cat-link,.dot,.arrow,.btn-add-cart,.menu-toggle,
  .concern-row,.concern-arrow,.cat-card-shop,.explore-arrow-circle,
  .pick-cta,.cookie-btn,.cart-qty button,.cart-remove,.social a{
    min-height:44px;
  }
  .menu-toggle{min-width:44px;min-height:44px}
  .icon-btn:first-child,.icon-btn:nth-child(2),#cartBtn{min-width:44px;min-height:44px}
}

@media(max-width:968px){
  nav{padding:1rem 1.5rem}
  .nav-links{position:fixed;top:0;right:-100%;width:80%;height:100vh;background:var(--ivory);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:5.5rem 3rem 3rem;gap:2.2rem;transition:right .4s ease;box-shadow:-20px 0 40px rgba(61,42,30,0.15);z-index:60}
  /* Skinya wordmark στην κορυφή του menu (όπως το logo) */
  .nav-links::before{content:'Skinya';font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:2rem;line-height:1;color:var(--gold-leaf);letter-spacing:.02em;margin-bottom:1.4rem}
  .nav-links.open{right:0}
  .nav-links a{font-size:1rem}
  .menu-toggle{display:flex}
  /* Cart → εικονίδιο καλαθιού (όχι μεγάλο pill) σε mobile, με count badge — εξοικονομεί χώρο */
  #cartBtn{background:none;color:var(--aubergine);padding:0;border-radius:0;box-shadow:none;letter-spacing:normal}
  #cartBtn:hover{background:none;color:var(--gold-leaf);transform:none;box-shadow:none;letter-spacing:normal}
  .cart-icon{display:inline-flex}
  .cart-label{display:none}
  .cart-count{position:absolute;top:2px;right:2px;background:var(--gold-leaf);color:#fff;min-width:16px;height:16px;padding:0 4px;font-size:.55rem;margin:0;box-shadow:0 2px 6px rgba(192,133,122,0.5)}
  section{padding:5rem 1.5rem}
  /* Mobile hero — κείμενο overlay στο ΠΑΝΩ μέρος της φωτό, με fade στην κορυφή.
     min-height:auto → χωρίς κενό κάτω (τα επόμενα sections ανεβαίνουν). */
  .hero{padding:0;min-height:auto;flex-direction:column;justify-content:flex-start;align-items:stretch}
  .hero-visual{position:absolute;inset:0;width:100%;height:100%;min-height:0;order:0}
  .hero-visual::after{background:linear-gradient(180deg, rgba(244,231,220,0.94) 0%, rgba(244,231,220,0.6) 30%, rgba(244,231,220,0.18) 52%, transparent 70%)}
  .hero-content{order:2;padding:4.5rem 1.5rem 5rem;text-align:left;max-width:100%;background:transparent;margin-top:0;position:relative;z-index:5}
  .hero h1{font-size:clamp(2.2rem,9vw,3.4rem)}
  /* Lead στενότερο ώστε να μη φτάνει στο μπουκάλι/μοντέλο δεξιά (περισσότερες σειρές) */
  .hero p.lead{max-width:60%}
  /* Announce bar mobile — compact: icons + main label only, hide subline */
  .announce{padding:.6rem 1rem;grid-template-columns:repeat(3,1fr)}
  .announce-item{padding:0 .4rem;gap:.4rem}
  .announce-icon{width:14px;height:14px}
  .announce-item span{font-size:.55rem;letter-spacing:.16em;flex-direction:column;align-items:center;gap:0}
  .announce-item span i{display:none}
  .hero--editorial{padding:3rem 1.5rem 4rem;gap:3rem}
  .hero-photos{grid-template-columns:1fr;gap:1.2rem;max-width:480px}
  .hero-photo-card{aspect-ratio:4/5}
  .hero-photo-card-overlay{left:1rem;right:1rem;bottom:1rem;padding:1.2rem 1.4rem}
  .hero-photo-card-overlay h3{font-size:1.25rem}
  .hero-photo-card-overlay p{font-size:.8rem;margin-bottom:1rem}
  .hero-leaf{display:none}
  .bottle{width:200px;height:320px}
  .cat-cards{padding:4rem 1.5rem 3rem}
  .cat-cards-grid{grid-template-columns:1fr;gap:1.2rem;max-width:480px}
  .cat-card{aspect-ratio:auto;min-height:440px;padding:1.8rem 1.6rem}
  .cat-card-num{top:1.4rem;left:1.6rem;font-size:1rem}
  .cat-card-product{width:75%;height:42%;top:13%}
  .cat-card-overlay{gap:.6rem}
  .cat-card-desc{font-size:.82rem}
  .concern-match{grid-template-columns:1fr;padding:0 1.5rem;margin:2rem auto 4rem}
  .concern-stage-wrap{border-radius:6px 6px 0 0;min-height:460px}
  .concern-stage{padding:2.4rem 1.8rem}
  .concern-stage-content h3{font-size:2.3rem}
  .concern-stage-content p{font-size:.88rem;margin-bottom:1.2rem}
  .concern-stage-ings{margin-bottom:1.4rem}
  .ing-chip{font-size:.58rem;padding:.45rem .85rem;letter-spacing:.18em}
  .concern-stage-cta{padding:.8rem 1.4rem;font-size:.65rem}
  .concern-selector{border-radius:0 0 6px 6px;min-height:auto}
  .concern-selector-head{padding:1.8rem 1.8rem 1.2rem}
  .concern-selector-head h2{font-size:1.6rem}
  .concern-row{padding:1rem 1.8rem;gap:1.1rem}
  .concern-row.is-active,.concern-row:hover{padding-left:2.3rem}
  .concern-text h3{font-size:1.3rem}
  .concern-text small{font-size:.66rem}
  .concern-num{font-size:1.3rem}
  /* Mobile: φωτο ΑΝΑΜΕΣΑ σε περιγραφή και συστατικά (όχι στο τέλος) */
  .slide{display:flex;flex-direction:column;align-items:stretch;gap:1.3rem;padding:2rem}
  .slide-text{display:contents}            /* προωθεί τα παιδιά ως flex items του .slide */
  .slide-brand{order:1}
  .slide-text h3{order:2}
  .slide-text p{order:3}
  .slide-text .slide-benefits{order:4}      /* «Βοηθάει» κάτω από την περιγραφή */
  .slide-text p.slide-tip{order:5}          /* «Tip» αμέσως μετά τα benefits (override .slide-text p) */
  .slide-visual{order:6;height:300px;width:100%}   /* full-width φωτο (όχι στενή) */
  .slide-meta{order:7}
  .slide .btn-primary{order:8}
  .quick-grid{grid-template-columns:1fr}
  .explore{padding:4rem 1.5rem 5rem}
  .explore .section-head{margin-bottom:3rem}
  .explore-stack{gap:1.6rem}
  /* Mobile: stacked card — φωτό πάνω, κείμενο σε καθαρό λευκό από κάτω (χωρίς overlap) */
  .explore-card,.explore-card--routine{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;min-height:0;border-radius:18px;gap:0}
  .explore-visual{position:relative;order:0;inset:auto;height:220px;flex-shrink:0;border-radius:0}
  .explore-visual > img{position:absolute;inset:0;transform:none!important}
  .explore-card::before,.explore-card--routine::before{display:none}
  .explore-num{display:none}
  .explore-text{order:1;max-width:100%;gap:.7rem;padding:1.7rem 1.6rem 2rem;background:#fff}
  .explore-text h3{font-size:clamp(1.7rem,7vw,2.2rem)}
  .explore-text p{font-size:.88rem;max-width:100%}
  .ritual-grid{grid-template-columns:1fr;gap:3rem}
  .video-frame{height:400px}

  /* ----- Ritual K-Beauty routine responsive ----- */
  .routine-section{padding:4.5rem 1.5rem}
  .routine-steps{grid-template-columns:1fr;gap:1rem}
  .routine-step{padding:1.4rem;gap:1rem}
  .routine-step .step-num{width:54px;height:54px;font-size:1.2rem}
  .routine-weekly{padding:4.5rem 1.5rem}
  .weekly-grid{grid-template-columns:1fr;gap:1.5rem}
  .routine-tips{padding:4.5rem 1.5rem}
  .tips-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .tip{padding:1.5rem 1rem}

  /* ----- Founder's Notes responsive ----- */
  /* Ύψος στο banner → η φωτό εκτείνεται πιο κάτω και το fade γίνεται
     σταδιακό (όχι απότομο κόψιμο κάτω από τον τίτλο). */
  .notes-header{min-height:72vh;padding:5rem 1.5rem 3rem}
  .notes-header h1{font-size:clamp(2rem,8vw,3rem)!important;line-height:1.08}
  /* Mobile: eyebrow + tagline επιστρέφουν στο flow, χωρίς rotation (η φωτό δεν φαίνεται ως βιβλίο σε στενά viewports) */
  .notes-header .eyebrow{position:static;transform:none;margin:0 0 1.4rem;font-size:.7rem;letter-spacing:.45em;text-align:center;white-space:normal}
  .notes-points{position:static;transform:none;margin-top:1.6rem;text-align:center;display:flex;justify-content:center}
  .notes-point{font-size:1rem}
  .notes-ornament{display:none}  /* hide botanical wisps στο mobile */
  .notes-points{gap:1.4rem;flex-direction:column;align-items:flex-start;padding:2.5rem 1rem 2rem;max-width:340px;margin:3rem auto 0}
  .notes-point{font-size:.95rem}
  .notes-intro{padding:4rem 1.5rem 3rem}
  .notes-mood{padding:2rem 1.5rem 4rem}
  .notes-mood-grid{grid-template-columns:1fr;gap:2.5rem}
  .notes-mood-photo{max-width:420px;margin:0 auto;width:100%}
  .notes-mood-aside{align-items:center;text-align:center}
  .notes-mood-quote{text-align:center}
  .notes-letter{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .letter-sender{padding-top:0}
  .letter-body{text-align:left}
  .notes-divider{justify-content:center}
  .notes-lead{font-size:1.25rem}
  .dropcap{font-size:4rem}
  .notes-story{padding:3rem 1.5rem 5rem}
  .notes-grid{grid-template-columns:1fr;gap:3rem}
  .notes-pullquote{position:static}
  .pullquote-card{padding:2.5rem 1.8rem}
  .pullquote-card blockquote{font-size:1.45rem}
  .notes-founders{padding:5rem 1.5rem}
  .founders-grid{grid-template-columns:1fr;gap:3rem;max-width:420px}
  .notes-signature{padding:4rem 1.5rem 6rem}
  .signature-name{font-size:1.8rem}
  .featured-grid{grid-template-columns:1fr;padding:2rem;gap:2rem}
  .featured-img{height:300px}
  .articles{padding:0 1.5rem 4rem}
  .articles-grid{grid-template-columns:1fr;gap:2rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-brand{grid-column:span 2}
  .cart-drawer{width:100%;right:-100%}
  .news-form{flex-direction:column;border:none}
  .news-form input{border:1px solid rgba(253,251,246,0.3);margin-bottom:1rem}
  .news-form button{padding:1rem}
  .about-features{grid-template-columns:1fr}
  .promo-banner{padding:4rem 1.5rem;margin:3rem 1.5rem 0}
  .foot-bottom{flex-direction:column;gap:.8rem;text-align:center}
}

@media (max-width:1180px) and (min-width:969px){
  /* Στο ενδιάμεσο εύρος, οι 3 cat-cards γίνονται 2+1 (πιο ευχάριστο από στενά 3) */
  .cat-cards-grid{grid-template-columns:repeat(2,1fr)}
  .cat-card:last-child{grid-column:span 2;aspect-ratio:21/9}
}

@media (max-width:900px){
  .featured-product{grid-template-columns:1fr;padding:2rem;gap:2.5rem}
  .featured-visual{height:340px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .category-section{padding:4rem 1.5rem}
  /* Category-nav sticky top adjusted για ψηλότερο mobile nav (logo 78px + padding) */
  /* flex-start (όχι center) → ξεκινά από την 1η κατηγορία· με center οι πρώτες έφευγαν εκτός αριστερά */
  .category-nav{padding:.8rem 1rem;gap:1rem;top:110px;justify-content:flex-start}
  .cat-link{font-size:.7rem;letter-spacing:.22em;padding:.6rem .3rem}
}

@media (max-width:600px){
  .cat-grid{grid-template-columns:1fr}
  .featured-info h3{font-size:1.6rem}
  .visual-initial{font-size:5rem}
  /* Featured badges: compact ώστε το «★ Best of Category» (αριστερά) και το
     seal «Leaping Bunny ✓» (δεξιά) να μη συναντιούνται στη στενή κάρτα. */
  .featured-tag{top:1rem;left:1rem;font-size:.48rem;letter-spacing:.12em;padding:.34rem .55rem;white-space:nowrap}
  .featured-visual .product-seals{top:.8rem;right:.8rem;gap:.3rem}
  .featured-visual .product-seal{font-size:.46rem;letter-spacing:.1em;padding:.3rem .5rem}
}

/* ====================================================================
   ≤ 768px — phones portrait, further tightening
   ==================================================================== */
@media (max-width:768px){
  /* Routine flow chips: stack κάθετα (αλλιώς το οριζόντιο bar ξεχειλίζει
     και τραβάει όλο το text column εκτός viewport). Gradient πάνω→κάτω
     = η σειρά της ρουτίνας (ανάλαφρο → πλούσιο/SPF). */
  .routine-flow{
    flex-direction:column;
    background:linear-gradient(180deg,
      var(--ivory) 0%, var(--lilac-cream) 33%, var(--gold-soft) 66%, var(--gold-leaf) 100%);
  }
  .flow-chip{padding:1rem 1.1rem;font-size:.78rem;letter-spacing:.2em}
  .flow-chip:not(:last-child)::after{
    left:30%;right:30%;top:auto;bottom:0;width:auto;height:1px;
  }

  /* Values (from women, for women) — μία στήλη, full-width panels (όχι
     στενές/ψηλές κάρτες). Πιο άνετο reading, σωστό spacing. */
  .values-section{padding:5rem 1.5rem}
  .values-grid{grid-template-columns:1fr;gap:1rem;max-width:440px}
  .value{padding:1.8rem 1.6rem;border-radius:12px}
  .value h4{font-size:1.4rem;margin-bottom:.6rem}
  .value p{font-size:.98rem}

  /* Hero fine-tuning */
  .hero-content{padding:2.2rem 1.4rem 3.5rem}
  .hero h1{font-size:clamp(2rem,8.5vw,2.8rem);line-height:1.05}
  .hero p.lead{font-size:.92rem;line-height:1.6;margin:0 0 2rem}
  .hero-cta{gap:1rem;flex-direction:column;align-items:flex-start}
  .hero-cta .btn-primary,.hero-cta .btn-link{width:auto}
  /* Hero gradient overlay για readability — υπάρχει ήδη pseudo στο home.css */
  .hero-content::before{display:none}

  /* Section preamble (concern title) — tighter */
  .concern-preamble{padding:4rem 1.4rem 2rem}
  .concern-preamble .section-head h2{font-size:clamp(1.9rem,7vw,2.6rem)}
  .concern-preamble .section-head p{font-size:.92rem}

  /* Concern stage — content padding tighter, font scaling */
  .concern-stage{padding:2rem 1.4rem}
  .concern-stage-content h3{font-size:clamp(1.8rem,7vw,2.4rem);line-height:1.02}
  .concern-stage-content p{font-size:.86rem;line-height:1.55}
  .concern-stage-ings{gap:.4rem;margin-bottom:1.2rem}
  .ing-chip{font-size:.55rem;padding:.4rem .75rem;letter-spacing:.15em}
  .concern-stage-cta{padding:.75rem 1.2rem;font-size:.62rem;letter-spacing:.22em}

  /* Marquee — slightly smaller σε tablet αλλά διατηρεί editorial scale */
  .marquee-item{font-size:1.3rem;gap:1.6rem}
  .marquee-item::after{margin-left:0;font-size:.85rem}

  /* Carousel slide mobile — controls scaled */
  .carousel-controls{margin-top:2rem;padding:0 1rem;gap:1rem}
  .arrow{width:42px;height:42px}
  .slide-text h3{font-size:clamp(1.8rem,7vw,2.4rem)}
  .slide-text p{font-size:.92rem;margin-bottom:1.8rem}
  .slide-meta{padding:1.2rem 0;margin-bottom:1.8rem}
  .meta-item{padding:0 .8rem}
  .meta-item small{font-size:.55rem;letter-spacing:.22em}
  .meta-item strong{font-size:.95rem}

  /* Explore cards — tighter */
  .explore-visual{height:200px}
  .explore-text{padding:1.5rem 1.4rem 1.8rem}
  .explore-text h3{font-size:clamp(1.6rem,7vw,2rem)}
  .explore-text p{font-size:.85rem;line-height:1.6}
  .explore-link{font-size:.65rem;letter-spacing:.22em;gap:.6rem}
  .explore-arrow-circle{width:32px;height:32px;font-size:.8rem}

  /* Newsletter — tighter padding */
  .newsletter{padding:5rem 1.4rem}
  .newsletter h2{font-size:clamp(2rem,8vw,2.8rem)}
  .news-lead{font-size:.92rem;margin-bottom:2rem}
  .news-form input{padding:1rem 1.2rem;font-size:16px}  /* 16px για iOS no-zoom */
  .news-form button{padding:1rem}

  /* Footer — single column για narrow phones, foot-brand full width */
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .foot-brand{grid-column:auto}
  /* Logo: το wordmark είναι centered στο box του → φαίνεται indented σε σχέση
     με το κείμενο. Νudge αριστερά για να ευθυγραμμιστεί με το text/social. */
  .foot-brand .logo{margin-left:-1.5rem}
  .foot-col h5{margin-bottom:1.2rem;padding-bottom:.7rem}
  .foot-col li{margin-bottom:.7rem}

  /* Announce bar — even tighter, smaller icon-only on tiny */
  .announce{padding:.55rem .6rem}
  .announce-item{padding:0 .3rem;gap:.3rem}
  .announce-item span{font-size:.5rem;letter-spacing:.12em}
}

/* ====================================================================
   ≤ 480px — small phones (iPhone SE, narrow Android)
   ==================================================================== */
@media (max-width:480px){
  section{padding:4rem 1.2rem}

  /* Hero — even more compact */
  .hero-content{padding:2rem 1.2rem 3rem}
  .hero h1{font-size:clamp(1.85rem,9vw,2.4rem)}
  .hero p.lead{font-size:.88rem}
  .hero-visual{height:55vh;min-height:55vh}

  /* Concern preamble */
  .concern-preamble{padding:3rem 1.2rem 1.6rem}
  .concern-preamble .section-head h2{font-size:clamp(1.7rem,7.5vw,2.2rem)}

  /* Concern stages */
  .concern-stage-wrap{min-height:420px}
  .concern-stage-content h3{font-size:clamp(1.6rem,7.5vw,2.1rem)}
  .concern-stage-content p{font-size:.82rem}
  .concern-stage-cta{width:auto;padding:.7rem 1.1rem}
  .concern-selector-head h2{font-size:1.4rem}
  .concern-row{padding:.9rem 1.4rem;gap:.9rem}
  .concern-text h3{font-size:1.15rem}
  .concern-text small{font-size:.6rem;letter-spacing:.16em}

  /* Marquee — mobile: μεγαλύτερο από πριν, διατηρεί editorial vibe */
  .marquee-item{font-size:1.15rem;gap:1.3rem}
  .marquee-item::after{margin-left:0;font-size:.75rem}

  /* Explore */
  .explore-card,.explore-card--routine{border-radius:14px}
  .explore-visual{height:185px}
  .explore-text{padding:1.4rem 1.2rem 1.6rem}
  .explore-text h3{font-size:clamp(1.5rem,7vw,1.8rem)}
  .explore-text p{font-size:.82rem}

  /* Carousel */
  .slide{padding:1.4rem;gap:1.5rem}
  .slide-text{padding:2rem 0 1rem}
  .slide-text h3{font-size:clamp(1.6rem,7vw,2rem)}
  .slide-visual{height:240px}
  .slide-brand{font-size:1rem}
  .slide-meta{flex-direction:column;gap:0;padding:1rem 0}
  .meta-item{padding:.6rem 0;border-right:none;border-bottom:1px solid rgba(31,24,19,0.08);text-align:left}
  .meta-item:last-child{border-bottom:none}

  /* Products header fan — ακόμα πιο compact: μικρότερη κεντρική + στενότερες
     πλαϊνές ώστε να μένει χώρος να φανούν χωρίς να κόβονται. */
  .ph-frame--main{max-width:220px;padding:1.2rem}
  .ph-frame--back-left{width:46%;transform:translate(-9%,-50%) rotate(-6deg)}
  .ph-frame--back-right{width:46%;transform:translate(9%,-50%) rotate(6deg)}

  /* Featured product (catalog page) */
  .featured-product{padding:1.6rem;gap:1.8rem;border-radius:12px}
  .featured-visual{height:280px}
  .featured-info h3{font-size:1.4rem}
  .featured-info .key-ing{font-size:1rem}
  .featured-info .product-price{font-size:1.4rem}
  .featured-info .desc{font-size:.85rem}

  /* Mini cards — single column για narrow */
  .mini-card{padding:1rem}
  .mini-visual{height:240px}
  .mini-info h4{font-size:1rem;min-height:auto}
  .mini-info .key-ing{font-size:.92rem}

  /* Newsletter */
  .newsletter{padding:4rem 1.2rem}
  .newsletter h2{font-size:clamp(1.8rem,9vw,2.4rem)}

  /* Logo sizing για narrow */
  .logo{width:130px;height:60px}
  .foot-brand .logo{width:150px;height:70px}
}

/* ====================================================================
   ≤ 380px — very narrow phones (older Android, narrow iPhone Pro)
   ==================================================================== */
@media (max-width:380px){
  /* Hero — extreme compaction */
  .hero h1{font-size:1.7rem;line-height:1.06}
  .hero p.lead{font-size:.85rem}
  .hero-visual{height:50vh;min-height:50vh}

  /* Announce — only icons, no text overflow */
  .announce-item span{font-size:.46rem;letter-spacing:.1em}

  /* Cart button — μικρότερο */
  #cartBtn{padding:.6rem .9rem;font-size:.62rem;letter-spacing:.18em}

  /* Concern */
  .concern-stage-content h3{font-size:1.5rem}
  .concern-stage-cta{font-size:.58rem;padding:.65rem 1rem}

  /* Buttons general */
  .btn-primary{padding:.95rem 1.6rem;font-size:.66rem;letter-spacing:.22em}
  .btn-link{font-size:.66rem;letter-spacing:.22em}

  /* Explore numerals + arrow */
  .explore-num{font-size:1.2rem}
  .explore-arrow-circle{width:28px;height:28px;font-size:.75rem}
}

/* ====================================================================
   LANDSCAPE PHONES — height ≤ 500px (e.g. iPhone landscape)
   Avoid hero filling entire viewport, give content room
   ==================================================================== */
@media (max-height:500px) and (orientation:landscape){
  /* Nav: shrink */
  nav{padding:.6rem 1.5rem}
  .logo{width:130px;height:55px}

  /* Hero: side-by-side layout, capped height */
  .hero{flex-direction:row;min-height:auto;height:auto;align-items:center}
  .hero-content{order:1;padding:2rem 1.5rem;background:transparent;margin-top:0;flex:1;max-width:50%}
  .hero-content::before{display:none}
  .hero h1{font-size:clamp(1.4rem,4vw,2rem)}
  .hero p.lead{font-size:.82rem;margin:0 0 1.4rem;max-width:100%}
  .hero-cta{flex-direction:row;gap:1rem;align-items:center}
  .hero-visual{order:2;position:relative;width:50%;height:auto;min-height:80vh}
  .hero-visual::after{background:linear-gradient(90deg, rgba(244,231,220,0.85) 0%, rgba(244,231,220,0.45) 30%, transparent 60%)}

  /* Concern match: keep stacked but min-height tighter */
  .concern-stage-wrap{min-height:320px}
  .concern-stage{padding:1.5rem 1.4rem}
  .concern-stage-content h3{font-size:1.6rem}
  .concern-stage-content p{font-size:.82rem;margin-bottom:.8rem}

  /* Explore cards landscape — keep min-height reasonable */
  .explore-card{min-height:260px}

  /* Footer πιο compact */
  footer{padding:3.5rem 1.5rem 1.5rem}
  .foot-brand p{font-size:.95rem}
}

/* ====================================================================
   TOUCH-SPECIFIC — hover styles που πρέπει να μην triggerάρουν on tap
   ==================================================================== */
@media (hover:none) and (pointer:coarse){
  /* Disable hover lift on cards για να μη "κολλάει" το hover state μετά από tap */
  .cat-card:hover,.explore-card:hover,.mini-card:hover{transform:none}
  /* Disable hover scale on photos σε touch */
  .cat-card:hover .cat-card-product{transform:translateX(-50%)}
  .explore-card:hover .explore-visual > img{transform:none}
  .slide:hover .slide-img{transform:none}
  .ritual-final-visual:hover .ritual-final-photo{transform:none}
  .ritual-final-visual:hover .ritual-final-accent{transform:rotate(-4deg)}
}