/*
 * Orange Duke demo — child-theme overrides on top of Classic.
 *
 * Colori: arancione #f26a1b, verificato il 9 nov 2026 dal logo SVG live su
 * orangeduke.it (assets/mark.svg: cerchio fill="#f26a1b", corona bianca).
 * E' l'unico dato visivo reale reperito: il vecchio store Shopify
 * (orangedukesocks.com) e' offline, e web.archive.org non era raggiungibile
 * dal tool di ricerca usato in questa sessione, quindi lo snapshot del
 * 19/02/2022 (confermato esistente dall'API availability) non e' stato
 * letto. Font: NON verificato da nessuna fonte reale — placeholder, da
 * confermare con l'utente o estrarre da un nuovo screenshot/snapshot prima
 * del go-live.
 *
 * TODO: verificare colori/font reali su una nuova fonte raggiungibile
 * (screenshot Wayback via browser, o dominio live se torna disponibile).
 * Vedi data/context/orangeduke.md e note di ricerca in shipping.ts.
 *
 * --- Restyle "figo con animazioni" (9 nov 2026, ispirazione Funisox) ---
 * Palette scelta deliberatamente (non estratta da nessuna fonte, solo il
 * brand orange e' reale — vedi sopra): oltre all'arancione brand, due colori
 * di accento per i "flat color block" in stile Funisox:
 *   - Giallo ambra `--orangeduke-yellow` (#ffc94d): triadico/analogo
 *     all'arancione, richiama la sezione gialla della reference e resta
 *     "caldo" e giocoso senza clashare col brand.
 *   - Verde petrolio `--orangeduke-teal` (#1b4b43): complementare freddo
 *     all'arancione, usato solo per blocchi scuri (promo/footer accent),
 *     come il banner scuro della reference — da' contrasto senza diventare
 *     un secondo colore "primario".
 * Nessun prodotto/logo fabbricato.
 *
 * --- Iterazione 2 (9 nov 2026, v1.2.0): vero index.tpl, CSS riallineato ---
 * Il v1.1.0 qui sopra vestiva la homepage solo con selettori POSIZIONALI
 * indovinati (#index #content > *:first-child/ecc.), perche' Classic non
 * era vendorizzato in questo repo. L'owner ha segnalato che il risultato
 * non assomigliava alla reference. In questa iterazione il sorgente reale
 * di Classic 8.2 e' stato recuperato (flyctl ssh console sul server live
 * orangeduke-demo) e usato per: (1) un vero override
 * `templates/index.tpl` che renderizza un hero full-bleed + riga a 3 tile
 * nel block `page_content_top` prima di `{$HOOK_HOME}` — vedi
 * `.orangeduke-hero`/`.orangeduke-tiles` qui sotto; (2) selettori prodotto
 * grid/slider corretti contro il markup verificato
 * (`.product-flags.js-product-flags`, `.homeslider-container`/`.rslides`/
 * `.caption`, hover su `.thumbnail-container`). La vecchia sezione CSS
 * posizionale e' stata rimossa, non lasciata in sovrapposizione. Vedi
 * README.md, sezione "Iterazione 2", per i dettagli completi.
 */
/* Poppins si carica da head.tpl (<link> con preconnect), non con @import: l'@import bloccava il render. */

:root {
  --orangeduke-orange: #f26a1b;
  --orangeduke-orange-dark: #cc5613;
  --orangeduke-yellow: #ffc94d;
  --orangeduke-yellow-dark: #e6ac1f;
  --orangeduke-teal: #1b4b43;
  --orangeduke-teal-dark: #123530;
  --orangeduke-text: #292b2c;
  --orangeduke-radius: 18px;
  --orangeduke-transition-fast: 180ms ease;
  --orangeduke-transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Flat colors for the inline SVG sock illustration in the hero
     (templates/index.tpl) — reuses the same brand palette, no new colors. */
  --orangeduke-sock-base: #ffffff;
  --orangeduke-sock-cuff: var(--orangeduke-teal);
  --orangeduke-sock-heel: var(--orangeduke-yellow);
  --orangeduke-sock-dot: var(--orangeduke-orange);
}

body {
  /* TODO: font non verificato — placeholder Poppins, confermare con una fonte reale */
  font-family: "Poppins", sans-serif;
  color: var(--orangeduke-text);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.page-title,
#content .block-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Confident display scale for homepage block titles (not just bumping
   weight — real size jump + tighter tracking, so section headers read as
   "designed" rather than default Bootstrap h3s). */
#index #content .block-title,
#index #content h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

/* Primary brand color everywhere Classic uses Bootstrap's --primary / btn-primary */
a,
.price,
#wishlist_button span {
  color: var(--orangeduke-orange);
}

/* Testo bianco su fondo arancione: pulsanti ed etichette */
.btn-primary,
.btn-primary:hover,
.product-flag {
  color: #fff;
}
.product-flag {
  background-color: var(--orangeduke-orange);
}

.btn-primary {
  background-color: var(--orangeduke-orange);
  border-color: var(--orangeduke-orange);
}

/* Buttons: confident shape + a real hover "lift", not just a color swap. */
.btn-primary,
.btn-secondary {
  border-radius: 999px;
  font-weight: 700;
  transition: transform var(--orangeduke-transition-fast),
    box-shadow var(--orangeduke-transition-fast),
    background-color var(--orangeduke-transition-fast),
    border-color var(--orangeduke-transition-fast);
}
.btn-primary:hover {
  background-color: var(--orangeduke-orange-dark);
  border-color: var(--orangeduke-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(242, 106, 27, 0.35);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* =========================================================================
   Homepage hero + 3-tile row
   -------------------------------------------------------------------------
   Styles the REAL markup emitted by templates/index.tpl (child-theme
   override of Classic's index.tpl — verified against the actual Classic 8.2
   source fetched via flyctl ssh console on 9 nov 2026, see README.md for
   the ground-truth dump). `.orangeduke-hero` / `.orangeduke-tiles` and their
   children are classes WE define in that template, not guesses at Classic's
   own markup, so there's nothing to verify here beyond "does the selector
   match the template" (it does — read templates/index.tpl alongside this).
   ========================================================================= */

.orangeduke-hero {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3rem calc(50vw - 50%) 3.5rem;
  background: linear-gradient(
    135deg,
    var(--orangeduke-orange) 0%,
    var(--orangeduke-orange-dark) 100%
  );
  animation: orangeduke-fade-slide-in var(--orangeduke-transition-slow) both;
}

.orangeduke-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.orangeduke-hero-copy {
  flex: 1 1 360px;
  color: #fff;
  max-width: 560px;
}

.orangeduke-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.orangeduke-hero-title {
  color: #fff;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.orangeduke-hero-subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
  max-width: 44ch;
}

.orangeduke-hero-cta {
  display: inline-block;
  /* Owner feedback: the button read as the same orange as the hero
     background, barely visible. White fill + orange text gives it real
     contrast against the gradient, with a crisp border so it still reads
     as a button at a glance even without hover. */
  background-color: #fff;
  border: 2px solid #fff;
  color: var(--orangeduke-orange-dark);
  font-weight: 700;
}
.orangeduke-hero-cta:hover,
.orangeduke-hero-cta:focus-visible {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.orangeduke-hero-visual {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  display: flex;
  justify-content: center;
}

.orangeduke-hero-sock {
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25));
  animation: orangeduke-float 6s ease-in-out infinite;
}

.orangeduke-hero-photo {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--orangeduke-radius-lg, 18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: orangeduke-float 6s ease-in-out infinite;
}

.orangeduke-hero-shape {
  position: absolute;
  display: block;
  pointer-events: none;
}
.orangeduke-hero-shape--triangle-1 {
  top: 8%;
  left: -4%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 28px solid var(--orangeduke-yellow);
  animation: orangeduke-float 5s ease-in-out infinite;
}
.orangeduke-hero-shape--triangle-2 {
  bottom: 10%;
  right: -2%;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid var(--orangeduke-teal);
  animation: orangeduke-float 7s ease-in-out infinite reverse;
}
.orangeduke-hero-shape--circle {
  top: 40%;
  right: 6%;
  width: 160%;
  height: 160%;
  max-width: 320px;
  max-height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transform: translate(10%, -50%);
  z-index: -1;
}

/* 3-tile highlight row, directly below the hero. */
.orangeduke-tiles {
  background-color: var(--orangeduke-yellow);
  padding: 2.5rem calc(50vw - 50%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  animation: orangeduke-fade-slide-in var(--orangeduke-transition-slow) 120ms both;
}

.orangeduke-tiles-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .orangeduke-tiles-inner {
    grid-template-columns: 1fr;
  }
}

.orangeduke-tile {
  position: relative;
  background: #fff;
  border-radius: var(--orangeduke-radius);
  overflow: hidden;
  padding-bottom: 1.25rem;
  text-align: center;
  transition: transform var(--orangeduke-transition-fast),
    box-shadow var(--orangeduke-transition-fast);
}

/* "Stretched link": the whole card is clickable, not just the text link
   (owner feedback — clicking the photo/background did nothing before). The
   pseudo-element covers the full .orangeduke-tile (its nearest positioned
   ancestor); the visible <a> text keeps its normal place in the layout. */
.orangeduke-tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.orangeduke-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 24px rgba(41, 43, 44, 0.18);
}

.orangeduke-tile-media {
  /* The three photos (tile-art-ai.jpg etc.) were cropped to 1200x675 (16:9).
     A fixed height here made the box's real aspect ratio depend on how wide
     the tile itself rendered (1/3 of the row on desktop vs full-width on
     mobile) — different from 16:9 at either breakpoint, so `background-size:
     cover` always trimmed the image. An explicit aspect-ratio matching the
     source photos means the box's shape never depends on viewport width. */
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.orangeduke-tile-title {
  margin: 1rem 0 0.25rem;
  font-size: 1.1rem;
}

.orangeduke-tile-link {
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
}

/* =========================================================================
   Existing PrestaShop image-slider module (ps_imageslider), left wired to
   displayHome in config/theme.yml so merchants can still edit slides from
   the back office with no code deploy. It now renders BELOW our static
   hero/tiles (inside the untouched {block name='hook_home'}), so it's
   styled lightly here — rounded corners + caption treatment consistent
   with the rest of the page — rather than as a second competing hero.
   Verified real markup (flyctl ssh console, 9 nov 2026):
     .homeslider-container > ul.rslides > li.slide > a > img + span.caption
   ========================================================================= */
.homeslider-container {
  border-radius: var(--orangeduke-radius);
  overflow: hidden;
  margin: 2rem auto;
  max-width: 1200px;
}
.homeslider-container .rslides {
  margin: 0;
  padding: 0;
  list-style: none;
}
.homeslider-container .slide img {
  width: 100%;
  height: auto;
  display: block;
}
.homeslider-container .caption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  max-width: 60%;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.homeslider-container .caption h2 {
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  margin-bottom: 0.25rem;
}

@keyframes orangeduke-fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   Product grid — bold flat color-block cards
   -------------------------------------------------------------------------
   Selectors verified directly against the real markup of Classic's
   catalog/_partials/miniatures/product.tpl (fetched via flyctl ssh console,
   9 nov 2026 — see README.md for the full dump):

     div.js-product.product
       article.product-miniature.js-product-miniature
         div.thumbnail-container
           div.thumbnail-top
             a.thumbnail.product-thumbnail > picture > img
             div.highlighted-informations > a.quick-view
           div.product-description
             h3.product-title > a
             div.product-price-and-shipping > span.price
           ul.product-flags.js-product-flags > li.product-flag.{type}

   No new data attributes or markup added — only CSS against these existing
   classes. `.highlighted-informations` holds the quick-view link, NOT the
   SALE/NEW flags (that was a guess in the previous pass — fixed below, see
   the `.product-flags` rule).
   ========================================================================= */

.product-miniature {
  border-radius: var(--orangeduke-radius);
  overflow: hidden;
}

.product-miniature .thumbnail-container {
  position: relative;
  border-radius: var(--orangeduke-radius);
  overflow: hidden;
  background-color: var(--orangeduke-yellow);
  transition: transform var(--orangeduke-transition-fast),
    box-shadow var(--orangeduke-transition-fast);
}

.product-miniature .product-title {
  font-weight: 700;
}

/* =========================================================================
   DEAD CODE REMOVED (pulizia 10 nov 2026): forme decorative floating
   (decor-shapes.tpl) e banner cookie proprio del tema (cookie-banner.tpl)
   — nessuno dei due e' mai stato incluso da head.tpl (vedi commento in
   templates/_partials/head.tpl), quindi il markup non esiste mai in pagina
   e queste regole non hanno mai avuto effetto. Il banner cookie visibile
   sul sito e' quello di Valen.
   ========================================================================= */

/* =========================================================================
   Header icons — Valen chat trigger + expandable search (item 1, 9 nov 2026)
   -------------------------------------------------------------------------
   Markup: _partials/header.tpl (Valen trigger) and
   modules/ps_searchbar/ps_searchbar.tpl (search icon/form). Behaviour:
   assets/js/custom.js.
   ========================================================================= */

.orangeduke-valen-trigger-wrap {
  display: inline-flex;
  align-items: center;
}

.orangeduke-valen-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--orangeduke-text);
  cursor: pointer;
  transition: background-color var(--orangeduke-transition-fast),
    color var(--orangeduke-transition-fast), transform var(--orangeduke-transition-fast);
}
.orangeduke-valen-trigger:hover,
.orangeduke-valen-trigger:focus-visible {
  background-color: rgba(242, 106, 27, 0.12);
  color: var(--orangeduke-orange);
  transform: translateY(-1px);
}

/* =========================================================================
   Homepage/header whitespace fix (item 3, 9 nov 2026)
   -------------------------------------------------------------------------
   Root cause (confirmed via computed-style inspection of the live mobile
   page): Classic's `#wrapper` carries a ~25px padding-top as breathing room
   for the breadcrumb nav (`nav.breadcrumb`) that normally sits above page
   content. On the homepage that breadcrumb is hidden (`display:none`,
   Classic/theme default for the index page), so the padding becomes dead
   whitespace between the header and our hero — worse on mobile because the
   header itself is visually taller there. Scoped to the homepage only
   (`#index`), so breadcrumb spacing on category/product/CMS pages is
   untouched.
   ========================================================================= */
#index #wrapper {
  padding-top: 0;
}

/* =========================================================================
   Benefits/USP row (item 5, 9 nov 2026)
   -------------------------------------------------------------------------
   Markup: index.tpl, `.orangeduke-benefits` section after the 3-tile row.
   ========================================================================= */
.orangeduke-benefits {
  background-color: #fff;
  padding: 2.5rem calc(50vw - 50%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 1px solid #f1f1f1;
}
.orangeduke-benefits-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
}
.orangeduke-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.orangeduke-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--orangeduke-yellow);
  color: var(--orangeduke-teal-dark);
}
.orangeduke-benefit-text {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  max-width: 22ch;
}
@media (max-width: 767.98px) {
  .orangeduke-benefits-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
}

/* Carosello "Prodotti popolari" mobile e griglia 2 colonne categoria:
   rimossi (pulizia 10 nov 2026) — entrambi sostituiti dal restyle di
   novembre (od-base.css per il carosello, od-category.css per la griglia
   CSS grid 2/3/4 colonne; la vecchia griglia a float .col-xs-12 di Classic
   non esiste piu' nel markup). */

/* DEAD CODE REMOVED (pulizia 10 nov 2026): vecchia barra filtri/categorie a
   colonna sinistra (#left-column, #search_filters stile Classic), vecchio
   blockreassurance (.blockreassurance_product) e vecchio blocco Trustpilot
   (.orangeduke-trustpilot*) — il restyle di novembre ha tolto #left-column
   dal layout (layout-full-width, vedi product-list.tpl) e riscritto filtri,
   rassicurazioni e recensioni da zero con classi nuove (.od-facet*,
   .od-reassure*, .od-reviews*, vedi od-category.css/od-product.css e i
   template modules/blockreassurance/.../displayBlockProduct.tpl e
   _partials/trustpilot-reviews.tpl). Questo intero blocco non ha piu'
   markup da colpire. */

/* =========================================================================
   Accessibility: respect prefers-reduced-motion.
   Disables/shortens every keyframe animation and hover-transform defined
   above for users who have asked the OS/browser to reduce motion.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .orangeduke-hero,
  .orangeduke-tiles,
  .orangeduke-hero-sock,
  .orangeduke-hero-shape--triangle-1,
  .orangeduke-hero-shape--triangle-2 {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .orangeduke-tile:hover,
  .btn-primary:hover {
    transform: none !important;
  }
}