/*
 Theme Name:   Hairspace Child
 Theme URI:    https://hairspace.se
 Description:  Child theme för X Theme — anpassningar för Hairspace.se e-handel
 Author:       Amazing Hair i Sundsvall AB
 Author URI:   https://hairspace.se
 Template:     pro
 Version:      1.0.0
 Text Domain:  hairspace-child
*/


/* ==========================================================================
   HAIRSPACE DESIGN SYSTEM — CSS Custom Properties
   ==========================================================================
   Färgpalett och typografi enligt varumärkesmanual.
   ========================================================================== */

:root {
  /* Palett */
  --hs-paper:      #FAF7F2;
  --hs-cream:      #F5EFE7;
  --hs-sand:       #E8DFD1;
  --hs-ink:        #1C1A17;
  --hs-champagne:  #B0996F;

  /* Transparenta varianter */
  --hs-ink-10:     rgba(28, 26, 23, 0.10);
  --hs-ink-50:     rgba(28, 26, 23, 0.50);
  --hs-champagne-20: rgba(176, 153, 111, 0.20);

  /* Typografi */
  --hs-font-display: 'Cormorant Garamond', 'Georgia', serif;
  --hs-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --hs-radius-sm: 4px;
  --hs-radius-md: 6px;
  --hs-radius-lg: 8px;
}


/* ==========================================================================
   1. TYPOGRAFI & GRUNDLÄGGANDE
   ========================================================================== */

body {
  font-family: var(--hs-font-body);
  color: var(--hs-ink);
  background-color: var(--hs-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce div.product .product_title {
  font-family: var(--hs-font-display);
  font-weight: 300;
  color: var(--hs-ink);
}

h1, .entry-title { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }

/* Display italic — för hero-text och accenter */
.hs-display-italic,
.entry-title em {
  font-family: var(--hs-font-display);
  font-style: italic;
  font-weight: 300;
}


/* ==========================================================================
   2. TOP BAR — Trust-element
   ========================================================================== */

.x-topbar,
.x-bar-space .x-bar[data-x-bar-top] {
  background-color: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
  font-family: var(--hs-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

.x-navbar,
.x-bar-space .x-bar[data-x-bar-mid] {
  background-color: var(--hs-paper) !important;
  border-bottom: 1px solid var(--hs-sand);
}

/* Navigations-länkar */
.x-nav > li > a,
.x-menu > li > a {
  font-family: var(--hs-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hs-ink) !important;
  transition: color 0.2s ease;
}

.x-nav > li > a:hover,
.x-menu > li > a:hover {
  color: var(--hs-champagne) !important;
}

/* "Rådgivning"-länk i champagne */
.x-nav > li:last-child > a,
.x-menu > li:last-child > a {
  color: var(--hs-champagne) !important;
}

/* Dropdown / mega-meny */
.x-nav .sub-menu,
.x-dropdown-content {
  background-color: var(--hs-paper);
  border: 1px solid var(--hs-sand);
  min-width: 220px;
}

.x-nav .sub-menu a {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--hs-ink) !important;
}

.x-nav .sub-menu a:hover {
  background-color: var(--hs-cream) !important;
  color: var(--hs-champagne) !important;
}

/* Sökfält */
.x-search input[type="text"],
.x-search input[type="search"] {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  background-color: var(--hs-cream);
  border-radius: var(--hs-radius-md);
}

/* Kundvagn-ikon */
.x-cart .x-cart-count {
  background-color: var(--hs-ink);
  color: var(--hs-cream);
  font-size: 0.65rem;
  font-weight: 500;
}


/* ==========================================================================
   4. KNAPPAR
   ========================================================================== */

/* Primär CTA — fylld Ink */
.button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
  font-family: var(--hs-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
  border: 2px solid var(--hs-ink) !important;
  border-radius: var(--hs-radius-md) !important;
  padding: 14px 32px !important;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

.button:hover,
button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: transparent !important;
  color: var(--hs-ink) !important;
}

/* Sekundär CTA — outlined */
.button.hs-outline,
.woocommerce a.button.hs-outline {
  background-color: transparent !important;
  color: var(--hs-ink) !important;
  border: 2px solid var(--hs-ink) !important;
}

.button.hs-outline:hover,
.woocommerce a.button.hs-outline:hover {
  background-color: var(--hs-ink) !important;
  color: var(--hs-cream) !important;
}


/* ==========================================================================
   5. WOOCOMMERCE — PRODUKTLISTNING
   ========================================================================== */

/* Butiksarkiv bakgrund */
.post-type-archive-product,
.tax-product_cat {
  background-color: var(--hs-paper);
}

/* Produktkort */
.woocommerce ul.products li.product {
  text-align: center;
  background-color: transparent;
  transition: transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
}

/* Produktbilder */
.woocommerce ul.products li.product a img {
  border-radius: var(--hs-radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--hs-cream);
}

/* Varumärke ovanför produkttitel */
.woocommerce ul.products li.product .hs-product-brand {
  font-family: var(--hs-font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-champagne);
  margin-top: 0.75rem;
  display: block;
}

/* Produkttitel i listning */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--hs-font-display);
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.25rem;
  color: var(--hs-ink);
}

/* Pris */
.woocommerce ul.products li.product .price {
  font-family: var(--hs-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.25rem;
  color: var(--hs-ink);
}

/* Reapris */
.woocommerce ul.products li.product .price del {
  color: var(--hs-ink-50);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--hs-ink);
}

/* Rea-badge */
.woocommerce span.onsale {
  background-color: var(--hs-ink);
  color: var(--hs-cream);
  font-family: var(--hs-font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--hs-radius-sm);
  min-height: auto;
  min-width: auto;
  line-height: 1.2;
}

/* "Köp"-knapp i listning */
.woocommerce ul.products li.product .button {
  font-size: 0.7rem !important;
  padding: 10px 20px !important;
  margin-top: 0.75rem;
}


/* ==========================================================================
   6. WOOCOMMERCE — ENSKILD PRODUKTSIDA
   ========================================================================== */

/* Produktgalleri */
.woocommerce div.product div.images img {
  border-radius: var(--hs-radius-lg);
  background-color: var(--hs-cream);
}

/* Produkttitel */
.woocommerce div.product .product_title {
  font-family: var(--hs-font-display);
  font-size: 2rem;
  font-weight: 300;
}

/* Pris på produktsida */
.woocommerce div.product .price {
  font-family: var(--hs-font-body);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hs-ink);
}

/* Kort beskrivning */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--hs-ink-50);
  border-left: 2px solid var(--hs-champagne);
  padding-left: 1rem;
  margin: 1rem 0;
}

/* Kvantitetsfält */
.woocommerce .quantity .qty {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-md);
  background-color: var(--hs-paper);
  width: 60px;
  text-align: center;
}

/* Flikar */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--hs-sand);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--hs-font-body);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--hs-ink-50);
  padding: 0.75rem 1.25rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hs-ink);
  border-bottom: 2px solid var(--hs-ink);
}

/* Relaterade produkter / Korsförsäljning */
.woocommerce div.product .related.products h2,
.woocommerce div.product .upsells.products h2 {
  font-family: var(--hs-font-display);
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/* Leveransinformation under köp-knapp */
.hs-delivery-info {
  background-color: var(--hs-cream);
  border-radius: var(--hs-radius-lg);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--hs-ink);
}

.hs-delivery-info span {
  display: block;
}


/* ==========================================================================
   7. VARUKORG
   ========================================================================== */

.woocommerce-cart table.shop_table {
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}

.woocommerce-cart table.shop_table th {
  font-family: var(--hs-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-ink-50);
  background-color: var(--hs-cream);
}

.woocommerce-cart table.shop_table td {
  border-top: 1px solid var(--hs-sand);
}

/* Kupongfält */
.woocommerce-cart .coupon input[type="text"] {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-md);
  padding: 10px 14px;
}


/* ==========================================================================
   8. CHECKOUT
   ========================================================================== */

.woocommerce-checkout {
  background-color: var(--hs-paper);
}

/* Trust badges ovanför checkout */
.hairspace-trust-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 0 1.5rem;
  font-family: var(--hs-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--hs-ink);
  border-bottom: 1px solid var(--hs-sand);
  margin-bottom: 2rem;
}

/* Checkout-formulär */
.woocommerce-checkout .form-row label {
  font-family: var(--hs-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--hs-ink);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-md);
  background-color: var(--hs-paper);
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--hs-champagne);
  outline: none;
  box-shadow: 0 0 0 2px var(--hs-champagne-20);
}

/* Klarna checkout-container */
.woocommerce-checkout #payment {
  background-color: var(--hs-cream);
  border-radius: var(--hs-radius-lg);
  border: 1px solid var(--hs-sand);
  padding: 1.5rem;
}

/* Ordersammanfattning */
.woocommerce-checkout-review-order-table {
  border: 1px solid var(--hs-sand) !important;
  border-radius: var(--hs-radius-lg);
}


/* ==========================================================================
   9. BLOGG / INSPIRATION
   ========================================================================== */

/* Artikelkort */
.x-blog .hentry,
.blog .hentry {
  background-color: transparent;
  border: none;
}

.x-blog .entry-featured,
.blog .entry-featured {
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}

/* Artikeltitel */
.x-blog .entry-title a,
.blog .entry-title a {
  font-family: var(--hs-font-display);
  font-weight: 400;
  color: var(--hs-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.x-blog .entry-title a:hover,
.blog .entry-title a:hover {
  color: var(--hs-champagne);
}

/* Kategori-tag på artiklar */
.x-blog .entry-categories a,
.blog .entry-categories a {
  font-family: var(--hs-font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-champagne);
}

/* Enskild artikel */
.single-post .entry-content {
  font-family: var(--hs-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--hs-ink);
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
  font-family: var(--hs-font-display);
  font-weight: 300;
  margin-top: 2.5rem;
}

/* Blockquote i artiklar */
.single-post .entry-content blockquote {
  font-family: var(--hs-font-display);
  font-style: italic;
  font-size: 1.25rem;
  border-left: 3px solid var(--hs-champagne);
  padding-left: 1.5rem;
  color: var(--hs-ink);
}


/* ==========================================================================
   10. BREADCRUMBS
   ========================================================================== */

.woocommerce-breadcrumb,
.x-breadcrumbs {
  font-family: var(--hs-font-body);
  font-size: 0.75rem;
  color: var(--hs-ink-50);
}

.woocommerce-breadcrumb a,
.x-breadcrumbs a {
  color: var(--hs-ink-50);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.x-breadcrumbs a:hover {
  color: var(--hs-champagne);
}

.breadcrumb-sep {
  margin: 0 0.4rem;
  color: var(--hs-sand);
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.x-colophon,
footer.x-colophon {
  background-color: var(--hs-cream) !important;
  border-top: 1px solid var(--hs-sand);
}

.x-colophon,
.x-colophon a {
  font-family: var(--hs-font-body);
  color: var(--hs-ink);
}

.x-colophon a:hover {
  color: var(--hs-champagne);
}

/* Footer-rubriker */
.x-colophon .widget-title,
.x-colophon h4 {
  font-family: var(--hs-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Nyhetsbrev */
.hs-newsletter input[type="email"] {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-md);
  padding: 12px 16px;
  background-color: var(--hs-paper);
  width: 100%;
}

.hs-newsletter input[type="email"]:focus {
  border-color: var(--hs-champagne);
  outline: none;
  box-shadow: 0 0 0 2px var(--hs-champagne-20);
}


/* ==========================================================================
   12. FORMULÄR & INPUTS (generellt)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-family: var(--hs-font-body);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-md);
  background-color: var(--hs-paper);
  color: var(--hs-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--hs-champagne);
  outline: none;
  box-shadow: 0 0 0 2px var(--hs-champagne-20);
}

::placeholder {
  color: var(--hs-ink-50);
  font-size: 0.85rem;
}


/* ==========================================================================
   13. HJÄLPKLASSER
   ========================================================================== */

/* Bakgrunder */
.hs-bg-paper      { background-color: var(--hs-paper); }
.hs-bg-cream      { background-color: var(--hs-cream); }
.hs-bg-sand        { background-color: var(--hs-sand); }
.hs-bg-ink         { background-color: var(--hs-ink); color: var(--hs-cream); }
.hs-bg-champagne   { background-color: var(--hs-champagne); color: var(--hs-paper); }

/* Text */
.hs-text-ink       { color: var(--hs-ink); }
.hs-text-champagne { color: var(--hs-champagne); }
.hs-text-muted     { color: var(--hs-ink-50); }

/* Typografi */
.hs-font-display   { font-family: var(--hs-font-display); }
.hs-font-body      { font-family: var(--hs-font-body); }

/* Spärrad text (versaler) */
.hs-caps {
  font-family: var(--hs-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sektionsavdelare */
.hs-divider {
  border: none;
  border-top: 1px solid var(--hs-sand);
  margin: 2rem 0;
}

/* Upphämtning-notice */
.hairspace-pickup-notice {
  background-color: var(--hs-cream);
  border: 1px solid var(--hs-sand);
  border-radius: var(--hs-radius-lg);
  padding: 1rem 1.25rem;
  font-family: var(--hs-font-body);
  font-size: 0.85rem;
}


/* ==========================================================================
   14. WOOCOMMERCE NOTICES
   ========================================================================== */

.woocommerce-message {
  background-color: var(--hs-cream);
  border-top-color: var(--hs-champagne);
  color: var(--hs-ink);
}

.woocommerce-info {
  background-color: var(--hs-cream);
  border-top-color: var(--hs-sand);
  color: var(--hs-ink);
}

.woocommerce-error {
  background-color: #fdf2f2;
  border-top-color: #c53030;
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 979px) {
  /* Navigation — mobil */
  .x-nav-wrap-mobile {
    background-color: var(--hs-paper);
  }

  .x-nav-wrap-mobile a {
    font-family: var(--hs-font-body);
    font-size: 0.85rem;
    color: var(--hs-ink);
    border-bottom: 1px solid var(--hs-sand);
  }
}

@media (max-width: 767px) {
  /* Produkter: 2 kolumner på mobil */
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Större CTA-knappar på mobil */
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
    padding: 16px !important;
  }

  /* Hero-text */
  h1, .entry-title {
    font-size: 1.75rem;
  }

  /* Trust-badges i kolumn på mobil */
  .hairspace-trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  /* Checkout — trust badges */
  .hairspace-trust-badges span {
    display: block;
  }
}