/*
Theme Name: Astra Child
Template: astra
Version: 1.0.1
*/

/* ===== SkønhedsMagasinet Homepage Redesign ===== */

:root{
  --sm-pink: #d94f70;
  --sm-pink-dark: #c43d5e;
  --sm-pink-bg: #fdf1f3;
  --sm-text: #1f1f1f;
  --sm-muted: #6b6b6b;
}

.sm-hero{
  background: var(--sm-pink-bg);
  border-radius: 24px;
  padding: 60px 48px;
}
.sm-hero h1{
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 16px;
}
.sm-hero h1 .sm-accent{ color: var(--sm-pink); }
.sm-hero p{ color: var(--sm-muted); font-size: 1.05rem; margin-bottom: 24px; }

.sm-btn{
  display: inline-block;
  background: var(--sm-pink);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
}
.sm-btn:hover{ background: var(--sm-pink-dark); }

.sm-hero-image img{
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.sm-trustbar{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 0;
}
.sm-trust-item{ display:flex; gap:14px; align-items:flex-start; }
.sm-trust-icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--sm-pink-bg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1.3rem;
}
.sm-trust-item h4{ margin:0 0 4px; font-size:1rem; }
.sm-trust-item p{ margin:0; color:var(--sm-muted); font-size:0.9rem; }

.sm-section-title{ font-size:1.7rem; margin-bottom:24px; }

.sm-cat-card{
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.sm-cat-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.sm-cat-card .sm-cat-body{ padding:16px; }
.sm-cat-card h4{ margin:0 0 6px; font-size:1.05rem; }
.sm-cat-card p{ margin:0 0 10px; color:var(--sm-muted); font-size:0.88rem; }
.sm-cat-card a{ color:var(--sm-pink); font-weight:600; text-decoration:none; font-size:0.9rem; }

.sm-product-card{
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  position:relative;
}
.sm-product-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.sm-badge{
  position:absolute; top:12px; left:12px;
  background:var(--sm-pink); color:#fff;
  font-size:0.7rem; font-weight:700;
  padding:4px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:0.03em;
}
.sm-product-body{ padding:14px; }
.sm-product-body h5{ margin:0 0 6px; font-size:1rem; }
.sm-rating{ color:var(--sm-pink); font-size:0.85rem; margin-bottom:4px; }
.sm-tag{ color:var(--sm-muted); font-size:0.8rem; }

@media (max-width: 782px){
  .sm-trustbar{ grid-template-columns: repeat(2,1fr); }
  .sm-hero{ padding: 32px 24px; }
}

/* ===== Fonts ===== */
body, p, li, a, input, textarea, button {
  font-family: 'Inter', sans-serif;
}

/* Astra's own Customizer typography settings output inline/high-specificity CSS,
   so headings need !important + a body-scoped selector to reliably override it */
body h1, body h2, body h3, body h4, body h5, body h6,
body .site-title, body .entry-title,
body .ast-header-navigation .menu-item a {
  font-family: 'Poppins', sans-serif !important;
}

body h1 { font-size: 2.4rem; font-weight: 800 !important; line-height: 1.2; }
body h2 { font-size: 1.9rem; font-weight: 700 !important; line-height: 1.25; }
body h3 { font-size: 1.5rem; font-weight: 700 !important; line-height: 1.3; }
body h4 { font-size: 1.2rem; font-weight: 600 !important; }
body h5 { font-size: 1.05rem; font-weight: 600 !important; }
body h6 { font-size: 0.95rem; font-weight: 600 !important; }

/* ===== Header ===== */
.ast-primary-header-bar,
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #f2e4e7;
}
.site-title a, .ast-site-title a {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--sm-pink, #d94f70);
}
.ast-header-navigation .menu-item a {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f1f1f;
  padding: 10px 16px;
}
.ast-header-navigation .menu-item a:hover {
  color: var(--sm-pink, #d94f70);
}
.sm-search-toggle {
  display: flex;
  align-items: center;
  margin-left: 8px;
  position: relative;
}
.sm-search-link {
  display: content;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fdf1f3;
  color: var(--sm-pink, #d94f70);
  border: none;
  cursor: pointer;
}
.sm-search-link:hover { background: var(--sm-pink, #d94f70); color: #fff; }

/* Slide-down search panel */
.sm-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  padding: 0 14px;
  z-index: 999;
}
.sm-search-panel.open {
  max-height: 80px;
  opacity: 1;
  padding: 14px;
}
.sm-search-panel input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #eee;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}
.sm-search-panel input[type="search"]:focus {
  outline: none;
  border-color: var(--sm-pink, #d94f70);
}

/* Astra hides SVGs inside the nav menu by default (it expects font icons) — force ours to show */
.ast-header-navigation .sm-search-toggle svg,
.main-header-menu .sm-search-toggle svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: var(--sm-pink, #d94f70) !important;
}

/* Fallback: draw the icon with pure CSS in case the SVG keeps getting hidden by another rule */
.sm-search-link svg { display: none !important; }
.sm-search-link {
  position: relative;
}
.sm-search-link::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--sm-pink, #d94f70);
  border-radius: 50%;
  box-sizing: border-box;
}
.sm-search-link::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 21px;
  width: 8px;
  height: 2px;
  background: var(--sm-pink, #d94f70);
  transform: rotate(45deg);
  border-radius: 1px;
}
.sm-search-link:hover::before,
.sm-search-link:hover::after {
  border-color: #fff;
  background: #fff;
}

/* ===== Footer ===== */
#colophon, .site-footer {
  background: #1f1a1c;
  color: #ddd;
  padding: 56px 0 24px;
}
.site-footer a { color: #ddd; text-decoration: none; }
.site-footer a:hover { color: var(--sm-pink, #d94f70); }
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.site-footer .widget { margin-bottom: 24px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; font-size: 0.9rem; }
.ast-small-footer {
  background: #171314;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  font-size: 0.85rem;
  color: #999;
}