/*
 Theme Name:   Flatsome Child
 Theme URI:    https://arbetsro.se
 Template:     flatsome
 Version:      4.0
*/

/* ============================================
   ARBETSRO — Skog · Hav · Snickeri · Småland
   Skogsgrönt #2C3E2D | Trä #8B6B4A
   Mossa #6B8C7A | Lin #F0EBE1 | Kol #2C2925
   Havsgrå #7B8F98 | Sten #8A8580
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Inter:wght@300;400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --primary:    #2C3E2D;
  --cta:        #8B6B4A;
  --accent:     #6B8C7A;
  --bg:         #F0EBE1;
  --text:       #2C2925;
  --light:      #E2DAD0;
  --stone:      #8A8580;
  --mist:       #7B8F98;
  --cream-dark: #E8E0D4;
  --r-sm:       4px;
  --r-md:       8px;
  --r-lg:       14px;
  --shadow-sm:  0 2px 12px rgba(44,62,45,0.07);
  --shadow-md:  0 8px 40px rgba(44,62,45,0.10);
  --shadow-lg:  0 20px 70px rgba(44,62,45,0.14);
  --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* === FONT SMOOTHING === */
body, body * { -webkit-font-smoothing: antialiased; }

/* === BODY === */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, sans-serif !important;
  font-weight: 300 !important;
}

/* === RUBRIKER === */
h1, h2, h3, h4, h5, h6,
.heading-font,
.banner h1, .banner h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--primary) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

p { line-height: 1.85; font-weight: 300; }
a { color: var(--primary); }

/* === NAVIGATION === */
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  color: var(--text) !important;
  transition: color 0.2s !important;
}
.nav > li > a:hover { color: var(--primary) !important; }

/* === HEADER === */
#header {
  background: rgba(240,235,225,0.96) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--light) !important;
  transition: var(--transition);
}

/* Transparent header på startsidan */
.home #header.transparent,
.home .header.transparent {
  background: transparent !important;
  box-shadow: none !important;
}
.home .header.transparent .nav > li > a { color: rgba(240,235,225,0.85) !important; }
.home .header.transparent .nav > li > a:hover { color: #fff !important; }
.home .header.transparent #logo img { filter: brightness(0) invert(1) !important; opacity: 0.9; }

#logo img { max-height: 44px !important; width: auto !important; }

/* === TOPBAR === */
.top-bar {
  background: var(--primary) !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* === KNAPPAR === */
.button, .button.primary, .button.alt, .single_add_to_cart_button,
a.button, input[type="submit"] {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  border-radius: var(--r-sm) !important;
  transition: var(--transition) !important;
}
.button.primary, .button.alt, .single_add_to_cart_button {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #F0EBE1 !important;
  padding: 14px 32px !important;
}
.button.primary:hover, .button.alt:hover, .single_add_to_cart_button:hover {
  background: #7a5c3a !important;
  border-color: #7a5c3a !important;
  box-shadow: 0 6px 20px rgba(139,107,74,0.28) !important;
}

/* === PRODUKTKORT === */
.products li, .product-grid-item {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s !important;
  border: 1px solid var(--light) !important;
}
.products li:hover, .product-grid-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: transparent !important;
}
.products li .attachment-woocommerce_thumbnail {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
.products li:hover .attachment-woocommerce_thumbnail {
  transform: scale(1.04) !important;
}
.product-grid-item .title a,
.products li .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  color: var(--primary) !important;
  font-weight: 400 !important;
}
.products li .price, .product-grid-item .price {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  color: var(--cta) !important;
}
.products li .button {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.products li .button:hover {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
}

/* === PRODUKTSIDA === */
.product_title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(26px, 3vw, 42px) !important;
  color: var(--primary) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}
.woocommerce-product-gallery {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.price { color: var(--cta) !important; font-weight: 500 !important; font-size: 26px !important; }
.woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.9;
  font-family: Inter, sans-serif !important;
  font-weight: 300 !important;
}

/* === CART & CHECKOUT === */
.woocommerce-cart .cart-collaterals .cart_totals {
  border-radius: var(--r-md);
  background: #fff;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light);
}
.woocommerce #payment #place_order {
  background: var(--cta) !important;
  width: 100% !important;
  border-radius: var(--r-sm) !important;
  padding: 16px !important;
}
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--light) !important;
  padding: 12px 16px !important;
  font-family: Inter, sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  background: #fff !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(107,140,122,0.12) !important;
  outline: none !important;
}

/* === FOOTER === */
#footer { background: var(--primary) !important; }
#footer h3, #footer h4, .footer-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 17px !important;
  color: var(--bg) !important;
  margin-bottom: 20px !important;
  font-weight: 400 !important;
}
#footer a { color: rgba(240,235,225,0.65) !important; transition: color 0.2s; }
#footer a:hover { color: var(--accent) !important; }
#footer p { color: rgba(240,235,225,0.65) !important; font-family: Inter, sans-serif !important; font-size: 14px; font-weight: 300; }
.footer-bottom {
  background: rgba(0,0,0,0.18) !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px;
  color: rgba(240,235,225,0.38) !important;
}

/* === MISC === */
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.breadcrumbs { font-family: Inter, sans-serif !important; font-size: 13px; opacity: 0.5; }
.woocommerce-message { border-left-color: var(--accent) !important; border-radius: var(--r-sm); }
.woocommerce-error { border-left-color: var(--cta) !important; border-radius: var(--r-sm); }
.section { background-color: inherit; }

/* === GRAIN OVERLAY (skapar texturkänsla utan bild) === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}

/* === HOMEPAGE CONCEPT BOXES === */
/* Koncept-rutor på mörk bakgrund */
.section[style*="#2C3E2D"] .ux-html div,
.section[style*="2C3E2D"] .ux-html div {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s !important;
}
.section[style*="#2C3E2D"] .ux-html div:hover,
.section[style*="2C3E2D"] .ux-html div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(107,140,122,0.65) !important;
}

/* Produktkort på startsidan */
.front-page-products .ux-html div {
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
.front-page-products .ux-html div:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(44,62,45,0.12) !important;
}

/* Avdelare-linje */
.ux-html [style*="gradient"] { display: block; }

/* === LOGO === */
#logo img {
  max-height: 40px !important;
  width: auto !important;
}
.home .header.transparent #logo img {
  filter: none !important;
  opacity: 1 !important;
  /* Logo är redan ljus (cream) — fungerar på mörk hero */
}

/* Flatsome logo wrapper padding */
.header-inner .logo-container { padding: 0 !important; }

/* === MOBILE === */
@media (max-width: 767px) {
  .product_title { font-size: 26px !important; }
  #logo img { max-height: 32px !important; }
  /* Kolumner på mobil */
  .ux-html [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
}