/* ============================================================
   YOKABA v3 — Figma 1:1 design (kategoria + produkt)
   reference: https://www.figma.com/design/Vy2yr2x9zWJ8Jp5uP0F4Bh
   ============================================================ */

/* === FONTS === */
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/centurygothic.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/centurygothic_bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* === TOKENS === */
:root {
  --yk-bg: #FFFFFF;
  --yk-bg-soft: #FAFAFA;
  --yk-bg-mute: #F6F6F6;
  --yk-border: rgba(0,0,0,0.08);
  --yk-text: #232323;
  --yk-text-mute: #7a7a7a;
  --yk-copper: #A88466;
  --yk-copper-dark: #8a6a51;
  --yk-success: #4cbb6c;
  --yk-danger: #ff4c4c;
  --yk-radius-card: 24px;
  --yk-radius-img: 16px;
  --yk-radius-btn: 8px;
  --yk-shadow-card: 0 4px 16px rgba(0,0,0,0.04);
  --yk-shadow-card-hover: 0 12px 32px rgba(0,0,0,0.08);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--yk-bg); }
body, body * {
  font-family: "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--yk-text);
}
a { color: var(--yk-text); text-decoration: none; transition: color .15s; }
a:hover, a:focus { color: var(--yk-copper); text-decoration: none; }

/* === HEADER === */
#header {
  background: var(--yk-bg);
  border-bottom: 1px solid var(--yk-border);
  padding: 0;
  box-shadow: none;
}
#header .header-top {
  padding: 12px 20px;
}
#header .header-nav {
  border-bottom: 1px solid var(--yk-border);
  padding: 6px 20px;
  font-size: 13px;
  background: var(--yk-bg);
}
#header .logo {
  max-height: 80px;
  width: auto;
}
#_desktop_top_menu .top-menu a,
#header a {
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
}
#header .blockcart, #header .user-info {
  font-weight: 700;
  font-size: 14px;
}
#header .blockcart .cart-products-count {
  background: var(--yk-copper);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Hide blockcart preview (pop-up artefact) */
.popup_cart, .pop-cart-footer, .blockcart-modal, .cart-preview .body:not(.show) {
  display: none !important;
}

/* === BREADCRUMB === */
.breadcrumb {
  background: transparent;
  padding: 16px 20px;
  margin: 0;
  font-size: 13px;
}
.breadcrumb li, .breadcrumb-item {
  color: var(--yk-text-mute);
}
.breadcrumb li a, .breadcrumb-item a {
  color: var(--yk-text-mute);
}
.breadcrumb li.active, .breadcrumb-item.active {
  color: var(--yk-text);
  font-weight: 700;
}

/* === PAGE HEADER === */
.page-header, .block-category .h1, .block-category .category-cover {
  text-align: center;
}
.page-header h1, h1.h1, h1.page-title {
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 32px 0 16px;
  color: var(--yk-text);
}
.category-description {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
  color: var(--yk-text-mute);
}

/* === STRONA KATEGORII === */
body.category #content-wrapper, body.category #wrapper {
  padding: 0 20px;
  max-width: 1440px;
  margin: 0 auto;
}
#left-column {
  flex: 0 0 280px;
  max-width: 280px;
  padding-right: 24px;
}
#search_filters {
  background: var(--yk-bg);
  border: 1px solid var(--yk-border);
  border-radius: var(--yk-radius-card);
  padding: 28px 24px;
  margin-bottom: 24px;
}
#search_filters .h6, .filters-title {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--yk-text);
  margin-bottom: 20px;
}
#search_filters .facet {
  padding: 16px 0;
  border-top: 1px solid var(--yk-border);
}
#search_filters .facet:first-of-type { border-top: none; padding-top: 0; }
#search_filters .facet-title, #search_filters section.facet > p:first-child {
  font-weight: 700;
  font-size: 14px;
  color: var(--yk-text);
  text-transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 12px;
}
#search_filters .facet-title::after, #search_filters section.facet > p:first-child::after {
  content: "⌄";
  font-size: 14px;
  font-weight: 400;
  color: var(--yk-text-mute);
}

/* === TOP BAR (n produktów + sort) === */
#js-product-list-top, .products-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--yk-border);
  margin-bottom: 24px;
}
.total-products p {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: var(--yk-text);
  margin: 0;
}
.products-sort-order .select-title {
  font-size: 13px;
  color: var(--yk-text);
  letter-spacing: 0.3px;
}

/* === PRODUCT GRID === */
#products .products, .featured-products .products, .products-section .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
@media (max-width: 991px) {
  #products .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  #products .products { grid-template-columns: 1fr; }
}

/* === PRODUCT CARD === */
.product-miniature, article.product-miniature, .js-product-miniature {
  width: auto !important;
  margin: 0 !important;
  background: var(--yk-bg);
  border: 1px solid var(--yk-border);
  border-radius: var(--yk-radius-card);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.product-miniature:hover {
  box-shadow: var(--yk-shadow-card-hover);
  transform: translateY(-2px);
}
.product-miniature .thumbnail-container, .product-miniature .product-thumbnail {
  position: relative;
  background: var(--yk-bg);
  height: 280px;
  display: block;
}
.product-miniature .product-thumbnail img, .product-miniature picture img {
  width: 100% !important;
  height: 280px !important;
  object-fit: contain !important;
  display: block;
  background: var(--yk-bg);
}
.product-miniature .product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin: 0;
}
.product-miniature .product-flag {
  background: var(--yk-copper);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  text-transform: uppercase;
  margin-right: 4px;
}
.product-miniature .product-flag.on-sale { background: var(--yk-text); }
.product-miniature .product-flag.new { background: var(--yk-text); }

.product-miniature .product-description, .product-miniature > .product-description {
  padding: 16px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-miniature .product-title, .product-miniature h2.product-title, .product-miniature h3.product-title {
  margin: 0 0 6px;
  min-height: 40px;
}
.product-miniature .product-title a {
  color: var(--yk-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.product-miniature .product-description-short, .product-miniature .product-short {
  color: var(--yk-text-mute);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 4px;
}
.product-miniature .comments_note {
  font-size: 12px;
  color: var(--yk-text-mute);
  margin: 8px 0;
}
.product-miniature .comments_note .star-on { color: var(--yk-copper); }

/* Price row */
.product-miniature .product-price-and-shipping {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-miniature .price, .product-miniature .current-price {
  color: var(--yk-copper);
  font-size: 18px;
  font-weight: 700;
}
.product-miniature .regular-price {
  color: var(--yk-copper);
  text-decoration: line-through;
  font-size: 12px;
  font-weight: 400;
  margin-right: 6px;
}
.product-miniature .add-to-cart, .product-miniature button[data-button-action="add-to-cart"] {
  background: var(--yk-copper);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.product-miniature .add-to-cart:hover, .product-miniature button[data-button-action="add-to-cart"]:hover {
  background: var(--yk-copper-dark);
}
.product-miniature .add-to-cart i, .product-miniature .add-to-cart .material-icons {
  color: #fff;
  font-size: 18px;
}

/* === PRODUCT PAGE === */
body.product #wrapper, body.product #content-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.product-cover {
  background: var(--yk-bg);
  border: 1px solid var(--yk-border);
  border-radius: var(--yk-radius-card);
  overflow: hidden;
}
.product-cover img {
  width: 100%;
  height: auto;
}
.product-information .h1 {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.3;
}
.product-prices, .product-price {
  margin: 16px 0;
}
.product-prices .current-price, .current-price-value {
  color: var(--yk-copper);
  font-size: 32px;
  font-weight: 700;
}
.product-prices .regular-price {
  color: var(--yk-copper);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
  margin-right: 8px;
}
.product-prices .tax-shipping-delivery-label {
  color: var(--yk-text-mute);
  font-size: 12px;
}
.product-quantity .qty {
  display: inline-flex;
  align-items: center;
}
.product-add-to-cart .btn-primary, .product-add-to-cart .add-to-cart {
  background: var(--yk-copper) !important;
  border-color: var(--yk-copper) !important;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 16px 32px;
  border-radius: var(--yk-radius-btn);
  font-size: 14px;
}
.product-add-to-cart .btn-primary:hover {
  background: var(--yk-copper-dark) !important;
  border-color: var(--yk-copper-dark) !important;
}
.product-availability { font-weight: 700; }
.product-availability.product-available { color: var(--yk-success); }
.product-availability.product-unavailable { color: var(--yk-danger); }

/* Product tabs */
.product-tabs .nav-tabs {
  border-bottom: 1px solid var(--yk-border);
  margin-top: 32px;
}
.product-tabs .nav-tabs .nav-link {
  color: var(--yk-text-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 16px 24px;
  background: transparent;
}
.product-tabs .nav-tabs .nav-link.active {
  color: var(--yk-copper);
  border-bottom-color: var(--yk-copper);
  background: transparent;
}

/* === USP SECTION (product page) === */
.yk-usp {
  background: var(--yk-bg-soft);
  border-radius: var(--yk-radius-card);
  padding: 48px 32px;
  margin: 56px 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.yk-usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 991px) {
  .yk-usp__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 575px) {
  .yk-usp__grid { grid-template-columns: 1fr; }
}
.yk-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.yk-usp__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: var(--yk-text);
  flex-shrink: 0;
}
.yk-usp__item h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--yk-text);
}
.yk-usp__item p {
  font-size: 13px;
  color: var(--yk-text-mute);
  line-height: 1.5;
  margin: 0;
}

/* === FOOTER === */
.footer-container {
  background: var(--yk-text);
  color: #fff;
  padding: 64px 20px 24px;
  margin-top: 80px;
}
.footer-container * { color: #fff; }
.footer-container a:hover { color: var(--yk-copper); }
.footer-container h3, .footer-container .h3 {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* === BUTTONS === */
.btn-primary, .btn.btn-primary, button.btn-primary {
  background: var(--yk-copper);
  border-color: var(--yk-copper);
  color: #fff;
  border-radius: var(--yk-radius-btn);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 24px;
  font-size: 13px;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--yk-copper-dark);
  border-color: var(--yk-copper-dark);
}

/* === FORMS === */
.form-control {
  border: 1px solid var(--yk-border);
  border-radius: 0;
  padding: 14px 16px;
  font-size: 14px;
}
.form-control:focus {
  border-color: var(--yk-copper);
  box-shadow: 0 0 0 2px rgba(168,132,102,0.2);
}


/* === MATERIAL ICONS (PS used) === */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.material-icons {
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* Cart button styling */
#_desktop_cart, .blockcart {
  background: transparent !important;
}
#_desktop_cart .blockcart {
  padding: 0;
}
#_desktop_cart a.cart-products {
  color: var(--yk-text) !important;
  font-weight: 700;
}
#_desktop_cart a.cart-products .material-icons,
.blockcart .material-icons {
  color: var(--yk-text);
}

/* Search styling */
#_desktop_search_wrapper .search-widget input,
#search_widget input {
  border: 1px solid var(--yk-border);
  border-radius: 0;
  padding: 14px 16px;
  font-size: 14px;
}

/* Product card placeholder issue — fix img height */
.product-miniature img[src*="placeholder"], 
.product-miniature .product-thumbnail .img-fluid {
  width: 100% !important;
  height: 280px !important;
  object-fit: contain !important;
}

/* ============================================================
   PRODUCT CARD — Figma 5.0.0.0 (yk-card)
   ============================================================ */
.yk-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: var(--yk-radius-card) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .2s, transform .2s;
  margin: 0 !important;
  width: auto !important;
  padding: 0 !important;
  position: relative;
}
.yk-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.yk-card__image-wrap {
  position: relative;
  display: block;
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.yk-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  padding: 16px;
  background: #fff;
}
.yk-card__flags {
  position: absolute;
  top: 12px;
  left: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.yk-card__flag {
  background: var(--yk-copper);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  text-transform: uppercase;
}
.yk-card__flag--new { background: var(--yk-text); }
.yk-card__flag--online-only { background: var(--yk-copper); }
.yk-card__flag--on-sale, .yk-card__flag--discount { background: var(--yk-copper); }

.yk-card__body {
  padding: 16px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yk-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 36px;
}
.yk-card__title a {
  color: var(--yk-text) !important;
  text-decoration: none !important;
}
.yk-card__desc {
  color: var(--yk-text-mute);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}
.yk-card__meta {
  color: var(--yk-text-mute);
  font-size: 12px;
  margin: 0;
}
.yk-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--yk-text-mute);
}
.yk-card__stars { display: inline-flex; gap: 2px; }
.yk-card__cta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.yk-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yk-card__price {
  color: var(--yk-copper) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.yk-card__price-old {
  color: var(--yk-copper);
  font-size: 12px;
  text-decoration: line-through;
  opacity: 0.7;
}
.yk-card__add-form { margin: 0; }
.yk-card__add {
  background: var(--yk-copper);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.yk-card__add:hover {
  background: var(--yk-copper-dark);
}
.yk-card__add svg { color: #fff; }

/* Material Icons fallback — hide raw text if font fails */
.material-icons:not([class*="material-icons-"]) {
  font-family: "Material Icons", "Material Symbols Outlined", sans-serif;
}
.material-icons:empty::before { content: " "; }
/* Better: hide all material-icons that show as text fallback */
i.material-icons {
  font-feature-settings: "liga";
}

/* === CART/USER ICONS REPLACEMENT (inline SVG via CSS background or pseudo) === */
#_desktop_user_info a, .user-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#_desktop_user_info a::before, .user-info > a::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

#_desktop_cart .blockcart, #_desktop_cart a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: var(--yk-text) !important;
  padding: 8px 12px;
}
#_desktop_cart a::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2'><path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Search icon */
#search_widget button[type='submit'], #search_widget .submit::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Wishlist heart icon */
.wishlist-button-add, .wishlist-button-product, a.wishlist {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--yk-border);
  color: var(--yk-text-mute);
  text-decoration: none;
  font-size: 0;
}
.wishlist-button-add::before, .wishlist-button-product::before, a.wishlist::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Hide Material Icons font text */
.material-icons {
  font-family: "Material Icons", "Material Symbols Outlined";
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}
i.material-icons:not(:has(svg)):empty { display: none; }