/* HERE'S FLAVOUR — Classic Salla Style */

:root {
  --hf-red: #d1241e;
  --hf-red-dark: #af1e19;
  --hf-white: #ffffff;
  --hf-ink: #252323;
  --hf-muted: #736a69;
  --hf-line: #eadbd9;
  --hf-soft: #fcf8f7;

  --color-primary: #d1241e;
  --color-primary-dark: #af1e19;
  --color-primary-light: #fcf8f7;
  --color-primary-reverse: #ffffff;
}

body {
  background: var(--hf-white) !important;
  color: var(--hf-ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

main {
  background: var(--hf-white);
}

/* Header */

.top-navbar {
  background: var(--hf-soft) !important;
  color: var(--hf-ink) !important;
  border-bottom: 1px solid var(--hf-line);
}

.top-navbar a {
  color: var(--hf-ink) !important;
}

.main-nav-container,
.main-nav-container .inner {
  background: var(--hf-white) !important;
  border-bottom: 1px solid var(--hf-line);
  box-shadow: 0 4px 18px rgb(37 35 35 / 3%) !important;
}

.navbar-brand img {
  object-fit: contain;
}

.main-menu > li > a {
  color: var(--hf-ink) !important;
  font-weight: 700;
  transition: color 180ms ease;
}

.main-menu > li > a:hover,
.main-menu > li.active > a {
  color: var(--hf-red) !important;
}

.header-btn__icon {
  color: var(--hf-red) !important;
  border-color: var(--hf-line) !important;
  background: var(--hf-white) !important;
}

.s-cart-summary-count {
  background: var(--hf-red) !important;
  color: var(--hf-white) !important;
}

/* Section titles */

.s-block {
  margin-top: 38px;
}

.s-block__title {
  border-bottom: 1px solid var(--hf-line);
  padding-bottom: 15px;
  margin-bottom: 24px;
}

.s-block__title h2 {
  color: var(--hf-ink) !important;
  font-weight: 800;
  line-height: 1.5;
  border-inline-start: 3px solid var(--hf-red);
  padding-inline-start: 14px;
}

.s-block__title a {
  color: var(--hf-red) !important;
  font-weight: 700;
}

/* Product cards */

.s-product-card-entry {
  background: var(--hf-white) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 5px !important;
  box-shadow: 0 5px 18px rgb(37 35 35 / 3%) !important;
  overflow: hidden;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.s-product-card-image {
  background: var(--hf-soft) !important;
}

.s-product-card-image img {
  transition: transform 350ms ease;
}

.s-product-card-content {
  padding: 18px !important;
}

.s-product-card-content-title a {
  color: var(--hf-ink) !important;
  font-weight: 700 !important;
  line-height: 1.7;
  text-decoration: none;
}

.s-product-card-content-subtitle {
  color: var(--hf-muted) !important;
  line-height: 1.7;
}

.s-product-card-price,
.s-product-card-sale-price h4 {
  color: var(--hf-red) !important;
  font-weight: 800 !important;
}

.s-product-card-sale-price span {
  color: var(--hf-muted) !important;
}

.s-product-card-promotion-title {
  background: var(--hf-red) !important;
  color: var(--hf-white) !important;
  border-radius: 2px !important;
  padding: 5px 12px !important;
  font-weight: 700;
  box-shadow: none !important;
}

.s-product-card-wishlist-btn {
  background: var(--hf-white) !important;
  color: var(--hf-red) !important;
  border: 1px solid var(--hf-line) !important;
  box-shadow: none !important;
}

/* Buttons */

.s-button-primary {
  background: var(--hf-red) !important;
  border-color: var(--hf-red) !important;
  color: var(--hf-white) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.s-button-primary:hover {
  background: var(--hf-red-dark) !important;
  border-color: var(--hf-red-dark) !important;
}

.s-button-outline-primary {
  background: var(--hf-white) !important;
  border-color: var(--hf-red) !important;
  color: var(--hf-red) !important;
  border-radius: 4px !important;
}

.s-button-outline-primary:hover {
  background: var(--hf-soft) !important;
}

.s-button-primary:disabled,
.s-button-outline-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Search and form controls */

.s-search-input {
  background: var(--hf-soft) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 4px !important;
  color: var(--hf-ink) !important;
}

main :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select
) {
  border-color: var(--hf-line);
  border-radius: 4px;
  color: var(--hf-ink);
}

main :is(input, textarea, select):focus-visible,
.s-search-input:focus-visible {
  outline: 2px solid var(--hf-red);
  outline-offset: 3px;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--hf-red);
  outline-offset: 4px;
}

/* Banners */

.banner-entry {
  border-radius: 5px !important;
  overflow: hidden;
}

.banner-entry img {
  border-radius: inherit;
}

/* Breadcrumbs and product details */

.breadcrumbs {
  color: var(--hf-muted);
}

.breadcrumbs a {
  color: var(--hf-red) !important;
}

.product-single h1 {
  color: var(--hf-ink);
  font-weight: 800;
  line-height: 1.6;
}

.product-single .product-price {
  color: var(--hf-red) !important;
  font-weight: 800;
}

.s-quantity-input-container {
  border: 1px solid var(--hf-line) !important;
  border-radius: 4px !important;
  background: var(--hf-white);
}

/* Reviews */

.s-comment-entry {
  background: var(--hf-white) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 5px !important;
  padding: 20px !important;
  margin-bottom: 14px;
  box-shadow: none !important;
}

.s-comment-entry-content {
  color: var(--hf-ink);
  line-height: 1.9;
}

.s-comment-entry-date {
  color: var(--hf-muted);
}

/* Footer */

.store-footer {
  background: var(--hf-red) !important;
  color: var(--hf-white) !important;
  border-top: 4px double rgb(255 255 255 / 45%);
  margin-top: 48px;
}

.store-footer__inner {
  background: transparent !important;
  padding-top: 38px;
  padding-bottom: 30px;
}

.store-footer :is(h2, h3, h4, p, a) {
  color: var(--hf-white) !important;
}

.store-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.store-footer .social-link {
  border: 1px solid rgb(255 255 255 / 45%) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--hf-white) !important;
}

.store-footer .s-contacts-icon {
  color: var(--hf-white) !important;
}

.store-footer__payments {
  background: var(--hf-white);
  border-radius: 4px;
  padding: 8px 12px;
}

/* Desktop hover */

@media (hover: hover) and (pointer: fine) {
  .s-product-card-entry:hover {
    transform: translateY(-4px);
    border-color: var(--hf-red) !important;
    box-shadow: 0 12px 28px rgb(37 35 35 / 7%) !important;
  }

  .s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.035);
  }
}

/* Mobile */

@media (max-width: 767px) {
  .s-block {
    margin-top: 26px;
  }

  .s-block__title {
    padding-bottom: 12px;
    margin-bottom: 18px;
  }

  .s-block__title h2 {
    font-size: 1.15rem;
    padding-inline-start: 10px;
  }

  .s-product-card-content {
    padding: 12px !important;
  }

  .s-product-card-content-title a {
    font-size: 0.9rem;
  }

  .s-product-card-entry .s-button-element {
    min-height: 44px;
  }

  .s-comment-entry {
    padding: 15px !important;
  }

  .store-footer {
    margin-top: 32px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .s-product-card-entry,
  .s-product-card-image img,
  .s-button-primary,
  .main-menu > li > a {
    transition: none !important;
  }

  .s-product-card-entry:hover,
  .s-product-card-entry:hover .s-product-card-image img {
    transform: none !important;
  }/* HERE'S FLAVOUR — Mobile Product Layout */

@media (max-width: 767px) {
  /* Standard product grids */
  .s-products-list-wrapper:not(.s-products-list-slider),
  .products-list:not(.swiper-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Product cards */
  .s-product-card-entry {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #eadbd9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Uniform image area */
  .s-product-card-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex: none !important;
    overflow: hidden !important;
    background: #fcf8f7 !important;
    border-bottom: 1px solid #eadbd9 !important;
  }

  .s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 6px !important;
    transform: none !important;
  }

  /* Content */
  .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px 10px 10px !important;
    gap: 8px !important;
    text-align: start !important;
  }

  .s-product-card-content-main {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .s-product-card-content-title {
    margin: 0 !important;
    min-height: 44px !important;
  }

  .s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    color: #252323 !important;
    overflow-wrap: anywhere !important;
  }

  .s-product-card-content-subtitle {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    color: #736a69 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* Prices */
  .s-product-card-content-sub {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .s-product-card-price,
  .s-product-card-sale-price h4 {
    color: #d1241e !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  .s-product-card-sale-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .s-product-card-sale-price span {
    color: #736a69 !important;
    font-size: 11px !important;
  }

  /* Full-width add button */
  .s-product-card-content-footer {
    margin-top: auto !important;
    padding-top: 8px !important;
    width: 100% !important;
  }

  .s-product-card-content-footer salla-add-product-button,
  .s-product-card-content-footer salla-button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .s-product-card-content-footer .s-button-element {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 6px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Compact offer label */
  .s-product-card-promotion-title {
    max-width: calc(100% - 48px) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    padding: 4px 7px !important;
    border-radius: 3px !important;
    background: #d1241e !important;
    color: #ffffff !important;
  }

  .s-product-card-wishlist-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
  }
}

@media (max-width: 359px) {
  .s-products-list-wrapper:not(.s-products-list-slider),
  .products-list:not(.swiper-wrapper) {
    gap: 8px !important;
  }

  .s-product-card-content {
    padding: 10px 8px 8px !important;
  }

  .s-product-card-content-title a {
    font-size: 12px !important;
  }

  .s-product-card-price,
  .s-product-card-sale-price h4 {
    font-size: 14px !important;
  }
}
}