/*
Theme Name:  iStamPic
Theme URI:   https://istampic.shop
Description: Child theme do Storefront desenhado para a iStamPic — capas de telemóvel personalizadas, feitas à mão em Portugal. Estética "tinta de carimbo sobre papel": paleta azul-carimbo, tipografia Sora + Instrument Sans, selo carimbado como assinatura visual.
Author:      Eduardo / iStamPic
Template:    storefront
Version:     1.0.0
Text Domain: istampic
*/

/* ==========================================================================
   1. TOKENS DE DESIGN
   ========================================================================== */
:root {
  /* Cores */
  --ist-paper: #FAF8F4;      /* fundo: papel quente */
  --ist-ink: #14161A;        /* texto: tinta preta */
  --ist-stamp: #2742C7;      /* acento: azul de carimbo */
  --ist-stamp-dark: #1D33A0; /* azul carregado (hover) */
  --ist-aluminium: #D8DBDF;  /* linhas e cartões: alumínio */
  --ist-marble: #EFEDE8;     /* secções alternadas: mármore claro */
  --ist-success: #1D7A4F;

  /* Tipografia */
  --ist-display: 'Sora', sans-serif;
  --ist-body: 'Instrument Sans', sans-serif;
  --ist-mono: 'Space Mono', monospace;

  /* Ritmo */
  --ist-radius-case: 28px;   /* raio de "capa de telemóvel" */
  --ist-section: clamp(56px, 9vw, 120px);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  background: var(--ist-paper);
  color: var(--ist-ink);
  font-family: var(--ist-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4, .site-title {
  font-family: var(--ist-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ist-ink);
}

a { color: var(--ist-stamp); }
a:hover { color: var(--ist-stamp-dark); }

::selection { background: var(--ist-stamp); color: #fff; }

/* Foco visível para teclado */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ist-stamp);
  outline-offset: 2px;
}

/* ==========================================================================
   3. CABEÇALHO E BARRA DE ANÚNCIO
   ========================================================================== */
.ist-announce {
  background: var(--ist-ink);
  color: var(--ist-paper);
  font-family: var(--ist-mono);
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: 0.04em;
}
.ist-announce strong { color: #9FB0FF; font-weight: 700; }

.site-header {
  background: var(--ist-paper);
  border-bottom: 1px solid var(--ist-aluminium);
}
.site-header .site-title a,
.site-header .site-title a:hover {
  color: var(--ist-ink);
  font-weight: 800;
}
.site-header .site-title a span { color: var(--ist-stamp); }

.main-navigation ul li a {
  font-family: var(--ist-body);
  font-weight: 600;
  color: var(--ist-ink);
}
.main-navigation ul li a:hover { color: var(--ist-stamp); }

/* ==========================================================================
   4. HERO (página inicial)
   ========================================================================== */
.ist-hero {
  padding: var(--ist-section) 0;
  overflow: hidden;
}
.ist-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.ist-hero__eyebrow {
  font-family: var(--ist-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ist-stamp);
  margin-bottom: 16px;
}
.ist-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 20px;
}
.ist-hero__lead {
  font-size: 1.1rem;
  max-width: 46ch;
  color: #3C4048;
  margin-bottom: 32px;
}

/* Moldura em forma de capa de telemóvel */
.ist-case-frame {
  aspect-ratio: 9 / 18;
  max-width: 300px;
  margin: 0 auto;
  border: 3px solid var(--ist-ink);
  border-radius: var(--ist-radius-case);
  background:
    radial-gradient(120% 90% at 20% 10%, #FFFFFF 0%, var(--ist-marble) 60%),
    var(--ist-marble);
  position: relative;
  box-shadow: 14px 14px 0 var(--ist-stamp);
  overflow: hidden;
}
.ist-case-frame::before {           /* recorte da câmara */
  content: "";
  position: absolute;
  top: 18px; left: 18px;
  width: 74px; height: 74px;
  border: 3px solid var(--ist-ink);
  border-radius: 22px;
  background: var(--ist-paper);
}
.ist-case-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   5. ASSINATURA: SELO CARIMBADO
   ========================================================================== */
.ist-seal {
  display: inline-block;
  font-family: var(--ist-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ist-stamp);
  border: 2.5px solid var(--ist-stamp);
  border-radius: 8px;
  padding: 8px 14px;
  transform: rotate(-3deg);
  position: relative;
  /* efeito de tinta irregular de carimbo */
  mask-image: radial-gradient(circle at 30% 40%, #000 96%, transparent 100%);
  box-shadow: 0 0 0 1px rgba(39, 66, 199, 0.15);
}
.ist-seal--footer { transform: rotate(2deg); }

/* ==========================================================================
   6. BOTÕES
   ========================================================================== */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button {
  background: var(--ist-stamp) !important;
  color: #fff !important;
  font-family: var(--ist-body);
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 26px;
  border: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:hover, .woocommerce a.button:hover {
  background: var(--ist-stamp-dark) !important;
  transform: translateY(-1px);
}
.ist-btn--ghost,
.woocommerce a.button.ist-btn--ghost {
  background: transparent !important;
  color: var(--ist-ink) !important;
  border: 2px solid var(--ist-ink) !important;
}

/* ==========================================================================
   7. GRELHA DE PRODUTOS
   ========================================================================== */
.ist-section {
  padding: var(--ist-section) 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.ist-section--marble {
  max-width: none;
  background: var(--ist-marble);
}
.ist-section--marble > .ist-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ist-section__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 8px;
}
.ist-section__kicker {
  font-family: var(--ist-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ist-stamp);
}

.woocommerce ul.products li.product {
  background: #fff;
  border: 1.5px solid var(--ist-aluminium);
  border-radius: var(--ist-radius-case);
  padding: 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--ist-ink);
  box-shadow: 8px 8px 0 var(--ist-stamp);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product img {
  border-radius: calc(var(--ist-radius-case) - 8px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ist-display);
  font-size: 1.02rem;
  font-weight: 600;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: var(--ist-mono);
  color: var(--ist-ink);
  font-weight: 700;
}
.woocommerce span.onsale {
  background: var(--ist-stamp);
  font-family: var(--ist-mono);
  border-radius: 8px;
  transform: rotate(-4deg);
}

/* ==========================================================================
   8. BENEFÍCIOS / GARANTIAS
   ========================================================================== */
.ist-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ist-benefit {
  border-top: 3px solid var(--ist-ink);
  padding-top: 16px;
}
.ist-benefit h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ist-benefit p { margin: 0; color: #3C4048; font-size: 0.95rem; }
.ist-benefit__tag {
  font-family: var(--ist-mono);
  font-size: 12px;
  color: var(--ist-stamp);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   9. TESTEMUNHOS
   ========================================================================== */
.ist-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ist-quote {
  background: #fff;
  border: 1.5px solid var(--ist-aluminium);
  border-radius: 16px;
  padding: 22px;
  font-size: 0.98rem;
}
.ist-quote footer {
  margin-top: 12px;
  font-family: var(--ist-mono);
  font-size: 12.5px;
  color: var(--ist-stamp);
}

/* ==========================================================================
   10. PÁGINA DE PRODUTO E CHECKOUT
   ========================================================================== */
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: var(--ist-radius-case);
  border: 1.5px solid var(--ist-aluminium);
}
.woocommerce div.product .product_title { font-size: 1.8rem; }
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--ist-stamp);
}
.woocommerce-message::before, .woocommerce-info::before {
  color: var(--ist-stamp);
}

/* ==========================================================================
   11. RODAPÉ
   ========================================================================== */
.site-footer {
  background: var(--ist-ink);
  color: #C7CAD1;
}
.site-footer a { color: #9FB0FF; }
.site-footer .ist-seal { color: #9FB0FF; border-color: #9FB0FF; }

/* ==========================================================================
   12. RESPONSIVO E ACESSIBILIDADE
   ========================================================================== */
@media (max-width: 820px) {
  .ist-hero__grid { grid-template-columns: 1fr; }
  .ist-case-frame { max-width: 220px; box-shadow: 10px 10px 0 var(--ist-stamp); }
  .ist-benefits, .ist-quotes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}