/* ===== WALLET STREET - POLARIFY STYLE (CLEAN) ===== */

/* --- HEADER --- */
.ws-header{
  position: sticky !important; /* viktigt: annars funkar inte z-index */
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 1px 0 #eaeaea !important;
}

/* Search: icon first, expands on hover/click */
.ws-search-wrapper .wp-block-search__inside-wrapper{
  border: none !important;
  background: transparent !important;
  transition: all 0.3s ease;
}
.ws-search-wrapper .wp-block-search__input{
  width: 0 !important;
  padding: 6px 0 !important;
  border: none !important;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  font-size: 13px !important;
  background: transparent !important;
}
.ws-search-wrapper:hover .wp-block-search__input,
.ws-search-wrapper:focus-within .wp-block-search__input{
  width: 180px !important;
  padding: 6px 12px !important;
  opacity: 1;
  border-bottom: 1px solid #000 !important;
}
.ws-search-wrapper .wp-block-search__button{
  background: none !important;
  border: none !important;
  padding: 4px !important;
  color: #000 !important;
  min-width: auto !important;
}
.ws-search-wrapper .wp-block-search__button svg{ width:18px; height:18px; }
.ws-search-wrapper .wp-block-search__label{ display:none !important; }

/* Site title */
.ws-header .wp-block-site-title a{
  text-decoration: none !important;
  color: #000 !important;
}

/* Separators thin */
.ws-header hr.wp-block-separator{
  margin: 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 1 !important;
}

/* --- NAVIGATION - POLARIFY STYLE --- */
.ws-nav-bar{ background:#fff !important; }

.ws-main-nav .wp-block-navigation-item a,
.ws-main-nav .wp-block-navigation-item .wp-block-navigation-item__content{
  color: #444 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 8px 2px !important;
  position: relative;
  transition: color 0.2s ease;
}
.ws-main-nav .wp-block-navigation-item a:hover,
.ws-main-nav .wp-block-navigation-item.current-menu-item a{
  color: #000 !important;
}
/* Underline animation */
.ws-main-nav .wp-block-navigation-item > a::after,
.ws-main-nav .wp-block-navigation-item > .wp-block-navigation-item__content::after{
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 1.5px;
  background: #000;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.ws-main-nav .wp-block-navigation-item > a:hover::after,
.ws-main-nav .wp-block-navigation-item.current-menu-item > a::after{
  width: 100%;
}

/* Dropdown submenus */
.ws-main-nav .wp-block-navigation__submenu-container{
  background: #fff !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
  padding: 20px 28px !important;
  min-width: 200px !important;
  animation: wsSlideDown 0.25s ease;
  border-top: 2px solid #000 !important;
}
@keyframes wsSlideDown{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.ws-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a{
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  padding: 7px 0 !important;
  color: #666 !important;
  display: block !important;
}
.ws-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover{
  color: #000 !important;
  padding-left: 4px !important;
}
.ws-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a::after{
  display: none !important;
}
/* Dropdown arrow */
.ws-main-nav .wp-block-navigation__submenu-icon{
  width: 8px !important; height: 8px !important;
  margin-left: 4px !important;
}

/* --- MINI CART ICON --- */
.wc-block-mini-cart__button{
  background: none !important;
  border: none !important;
  color: #000 !important;
  cursor: pointer;
  padding: 0 !important;
}
.wc-block-mini-cart__badge{
  background: #000 !important;
  color: #fff !important;
  font-size: 10px !important;
  min-width: 16px; height: 16px;
  border-radius: 50%;
}

/* --- PRODUCT CARDS --- */
.wc-block-grid__product,
.products .product{
  text-align: left !important;
  transition: transform 0.2s ease;
}
.wc-block-grid__product:hover{ transform: translateY(-2px); }
.wc-block-grid__product-image img,
.products .product img{
  border-radius: 0 !important;
  transition: opacity 0.3s ease;
}
.wc-block-grid__product:hover img{ opacity: 0.92; }
.wc-block-grid__product-title a,
.products .product .woocommerce-loop-product__title{
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000 !important;
  text-decoration: none !important;
}
.wc-block-grid__product-price,
.products .product .price{
  font-size: 13px !important;
  color: #666 !important;
}
/* Add to cart buttons */
.wc-block-grid__product-add-to-cart a,
.add_to_cart_button{
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  border: none !important;
  transition: background 0.2s ease;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.wc-block-grid__product-add-to-cart a:hover,
.add_to_cart_button:hover{ background: #444 !important; }

/* --- SINGLE PRODUCT PAGE --- */
.single-product .product_title{
  font-size: 24px !important;
  font-weight: 300 !important;
}
.single-product .price{ font-size: 18px !important; color:#000 !important; }
.single-product .single_add_to_cart_button{
  background: #fff !important;
  color: #000 !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 15px 30px !important;
  width: 100%;
  transition: all 0.2s ease;
}
.single-product .single_add_to_cart_button:hover{
  background: #000 !important;
  color: #fff !important;
}

/* --- BUTIK PAGE CLEAN --- */
.woocommerce-breadcrumb{ display:none !important; }
.woocommerce-products-header__title{
  font-size: 28px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  text-align: center !important;
}
.woocommerce-ordering select{
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}
ul.products{ gap: 28px !important; }

/* --- GLOBAL --- */
html{ scroll-behavior: smooth; }
a{ transition: color 0.2s ease; }
.wp-block-button__link{ transition: all 0.2s ease !important; }

/* Hide old inline navbars on pages */
.page-id-211 .entry-content > .wp-block-group.alignfull[style*="sticky"],
.page-id-214 .entry-content > .wp-block-group.alignfull[style*="sticky"],
.page-id-215 .entry-content > .wp-block-group.alignfull[style*="sticky"]{
  display: none !important;
}

/* Gtranslate flags smaller */
.gtranslate_wrapper img{ height: 16px !important; }

/* =============================================
   WALLET STREET — PRODUCT GALLERY + UI
   ============================================= */

/* 1. Gallery container — kill WooCommerce float layout */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.images{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  opacity: 1 !important;
}
.wp-block-woocommerce-product-image-gallery{ max-width: 100% !important; }

/* 2. Viewport */
.woocommerce div.product .flex-viewport{
  background: #f5f3ee;
  border-radius: 8px;
  overflow: hidden;
  max-height: none !important;
  height: auto !important;
  min-height: unset !important;
}

/* 3. Kill zoom overlay */
.woocommerce div.product .zoomImg{ display: none !important; }

/* 4. Images responsive */
.woocommerce div.product .woocommerce-product-gallery__image > a > img{
  max-width: 100%;
  height: auto;
  display: block;
  width: 100% !important;
}

/* 5. Zoom-on-hover */
.woocommerce div.product .woocommerce-product-gallery__image > a{
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.woocommerce div.product .woocommerce-product-gallery__image > a:hover > img{
  transform: scale(1.05);
  transition: transform 0.4s ease;
  cursor: zoom-in;
}

/* 6. Trigger icon */
.woocommerce div.product .woocommerce-product-gallery__trigger{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 7. Thumbnails */
.woocommerce div.product .flex-control-thumbs{
  display: flex !important;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar{ display: none; }
.woocommerce div.product .flex-control-thumbs li{
  flex: 0 0 calc(25% - 8px);
  min-width: 65px;
}
.woocommerce div.product .flex-control-thumbs li img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: #f5f3ee;
}
.woocommerce div.product .flex-control-thumbs li img:hover{ opacity: 0.8; }
.woocommerce div.product .flex-control-thumbs li img.flex-active{
  opacity: 1;
  border-color: var(--wp--preset--color--primary, #343230);
}

/* 8. Slider arrows */
.woocommerce div.product .flex-direction-nav{ margin:0; padding:0; list-style:none; }
.woocommerce div.product .flex-direction-nav a{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-indent: -9999px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a{ opacity: 1; }
.woocommerce div.product .flex-direction-nav .flex-prev{ left: 12px; }
.woocommerce div.product .flex-direction-nav .flex-next{ right: 12px; }
.woocommerce div.product .flex-direction-nav a::after{
  content:'';
  width: 9px; height: 9px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  text-indent: 0;
  display: block;
}
.woocommerce div.product .flex-direction-nav .flex-prev::after{ transform: rotate(-135deg); margin-left: 3px; }
.woocommerce div.product .flex-direction-nav .flex-next::after{ transform: rotate(45deg); margin-right: 3px; }

/* 9. Product typography */
.woocommerce div.product .product_title{
  font-family: var(--wp--preset--font-family--source-serif-pro, serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.woocommerce div.product .price{
  font-size: 1.4rem;
  font-weight: 400;
}

/* 10. Cart & checkout */
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row img{
  max-width: 80px;
  border-radius: 4px;
}
.wp-block-woocommerce-cart-cross-sells-block h2{ font-weight: 300 !important; }
.wc-block-checkout .wc-block-components-checkout-place-order-button{
  background: var(--wp--preset--color--primary, #343230) !important;
  color: #fff !important;
  border: none; border-radius: 0;
  padding: 1rem 2rem;
  font-weight: 600; width: 100%;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover{ opacity: 0.85; }

/* 11. WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background: var(--wp--preset--color--primary, #343230);
  color: #fff; border: none; border-radius: 0;
  font-weight: 600; padding: 0.8rem 2rem;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  opacity: 0.85;
  background: var(--wp--preset--color--primary, #343230);
  color: #fff;
}

/* 12. Responsive */
@media (max-width: 767px){
  .wp-block-columns .wp-block-column{ flex-basis: 50% !important; }
  .woocommerce div.product .flex-direction-nav a{
    opacity: 1;
    width: 32px; height: 32px;
  }
  .woocommerce div.product .flex-control-thumbs li{
    flex: 0 0 58px; min-width: 58px;
  }
}

/* Fix: wrapper width/transform */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper{
  width: 100% !important;
  transform: none !important;
}

/* === Wallet Street: Snygg färgväljare === */
.variations_form .variations tr td.value select,
.variations_form .variations tr td.value .select2-container{
  display: none !important;
}
.wc-variation-swatches{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 8px !important;
  align-items: center !important;
}
button.swatch-btn,
.wc-variation-swatches .swatch-btn{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #ddd !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  display: inline-block !important;
  flex: 0 0 36px !important;
  box-sizing: border-box !important;
}
button.swatch-btn:hover,
button.swatch-btn.selected,
.wc-variation-swatches .swatch-btn:hover,
.wc-variation-swatches .swatch-btn.selected{
  border-color: #000 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important;
  outline: none !important;
}
.variations_form .variations td.label{
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ===== MOBILE FIXES (ONLY ONCE) ===== */
@media (max-width: 782px){

  /* Se till att header/nav/hamburger ligger över heron */
  .ws-header,
  header.wp-block-template-part,
  .wp-site-blocks > header,
  .wp-block-template-part,
  .wp-block-navigation{
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close{
    position: relative !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
  }

  .wp-block-navigation__responsive-container{ z-index: 1000001 !important; }

  /* Hindra cover-overlay från att äta klick */
  .ws-hero .wp-block-cover__background,
  .ws-hero .wp-block-cover__image-background{
    pointer-events: none !important;
  }

  /* Flytta ner CTA-knappen i heron */
  .ws-hero .wp-block-buttons{
    margin-top: 48px !important;
  }
}

/* Dölj hamburgarknapp när mobilmenyn är öppen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open {
  display: none !important;
}

/* Svarta underkategorier i mobilmenyn */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  color: #111111 !important;
}

/* ===== PRODUKTVARIANTER - SWATCH STIL ===== */

/* Swatch-storlek och form */
button.swatch-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  padding: 0 !important;
}

/* Vald/aktiv swatch - tydlig ring runt */
button.swatch-btn.selected,
button.swatch-btn[aria-checked="true"] {
  outline: 3px solid #111 !important;
  outline-offset: 3px !important;
  border-color: #111 !important;
}

/* === Dölj "Back to shopping cart"-länken i kassan === */
.wc-block-components-checkout-return-to-cart-button,
.wp-block-woocommerce-checkout-return-to-cart-button,
a.wc-block-components-checkout-return-to-cart-button {
  display: none !important;
}

/* order-received header/footer is now handled via :not() on the checkout hide rule */

/* === Fixa storlek på betalningsikoner (WooCommerce-sidor overridar height:auto) === */
.ws-payment-bar .ws-payment-bar__icon {
  height: 28px !important;
  width: auto !important;
  max-width: none !important;
}

/* === Visa header och footer på orderbekräftelsesidan ===
   Specificitet 0,3,1 slår hiding-regelns 0,2,1 oavsett källa */
.page-template-page-checkout.woocommerce-order-received.woocommerce-checkout header.wp-block-template-part,
.page-template-page-checkout.woocommerce-order-received.woocommerce-checkout footer.wp-block-template-part {
  display: block !important;
}

/* === MOBIL-FIX: full bredd pa telefon (Claude) === */
@media (max-width: 781px){
  html, body{ overflow-x: hidden !important; max-width: 100% !important; }
  .alignfull,
  .wp-block-cover.alignfull,
  .entry-content > .alignfull{
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ws-header,
  .ws-header > .wp-block-group,
  .ws-header .wp-block-group{
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  img, video, iframe{ max-width: 100% !important; height: auto !important; }
}

/* ===== Wallet Street: variant-swatches & produktsida-polish (Claude) ===== */
.wc-variation-swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 2px;}
.wc-variation-swatches .swatch-btn{width:34px;height:34px;min-width:34px;border-radius:50%;border:1px solid rgba(0,0,0,.22);padding:0;cursor:pointer;box-shadow:none;outline:none;transition:transform .12s ease,box-shadow .12s ease;}
.wc-variation-swatches .swatch-btn:hover{transform:scale(1.08);}
.wc-variation-swatches .swatch-btn:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #111;}
.wc-variation-swatches .swatch-btn.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #111;}
.single-product table.variations th.label,.single-product table.variations th.label label{font-weight:600;letter-spacing:.06em;}
.single-product div.product .entry-summary table.variations{margin:8px 0 16px;}
.single-product div.product .entry-summary .single_variation_wrap .price{font-weight:600;}
.single-product div.product form.cart{margin-top:10px;}
.single-product table.variations a.reset_variations{font-size:.8em;opacity:.7;text-decoration:underline;}
.single-product table.variations a.reset_variations:hover{opacity:1;}


/* ===== Wallet Street: centrera produktlayout (Claude) ===== */
@media (min-width:782px){
.single-product main.wp-block-group.alignfull{margin-left:auto !important;margin-right:auto !important;}
.single-product .wp-block-columns.alignwide{margin-left:auto !important;margin-right:auto !important;}
}