/* ==========================================================================
   TitiArt – site theme: lavender background, green buttons, warm cards
   Loaded LAST in header.twig. #content raises specificity above the older
   rules in stylesheet.css and product-page-fixes.css.
   ========================================================================== */

:root {
  /* Brand */
  --titi-green: #5c8001;        /* buttons, prices */
  --titi-green-dark: #4a6801;   /* hover, price on tinted backgrounds */
  --titi-lime: #c8e531;         /* focus ring, small accents */

  /* Lavender */
  --titi-page-bg: #f1e9f8;      /* page background */
  --titi-lavender-soft: #e7dbf3;/* panels: Christmas banner */
  --titi-lavender-line: #d6c3ea;
  --titi-lavender: #9b7fc4;     /* accent line under section titles */
  --titi-plum: #5b4a72;         /* section titles */
  --titi-text: #3d3348;         /* card titles */

  /* Product cards – to try the pale lilac variant instead, set
     --titi-card-bg: #f6f0fb; and --titi-card-line: #e2d5ee; */
  --titi-card-bg: #fdf8ef;      /* warm ivory */
  --titi-card-line: #eadfcd;
  --titi-card-border: #dccbec;
}

/* --- Page ----------------------------------------------------------------- */
body,
#menu {
  background-color: var(--titi-page-bg);
}

/* Section titles directly in #content ("Подбрани с любов…", "Често комбинирани продукти:")
   and in the home sliders */
#content > h3,
#content .titi-slider > h3 {
  position: relative;
  padding-bottom: 10px;
  color: var(--titi-plum);
  font-weight: 600;
}
#content > h3::after,
#content .titi-slider > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--titi-lavender);
}

/* Christmas banner (HTML module) */
#content .titi-xmas {
  background-color: var(--titi-lavender-soft);
  border-color: var(--titi-lavender-line);
}

/* --- Card frame ---------------------------------------------------------- */
#content .product-thumb {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 0 20px;
  padding: 0;
  background: var(--titi-card-bg);
  border: 1px solid var(--titi-card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(91, 74, 114, .12);
  transition: box-shadow .2s ease, transform .2s ease;
}
#content .product-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(91, 74, 114, .18);
}

/* category.twig wraps caption + buttons in an extra <div> */
#content .product-thumb > div:not(.image):not(.caption):not(.button-group) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* --- Image ----------------------------------------------------------------- */
#content .product-thumb .image {
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid var(--titi-card-line);
  overflow: hidden;
  text-align: center;
}
#content .product-thumb .image a {
  display: block;
  width: 100%;
  height: 100%;
}
#content .product-thumb .image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  transition: transform .3s ease;
}
#content .product-thumb:hover .image img {
  transform: scale(1.03);
}

/* --- Text ------------------------------------------------------------------ */
#content .product-thumb .caption {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 14px 14px 0;
  background: transparent;
  text-align: center;
}
#content .product-thumb .caption h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: auto;
  min-height: 2.7em;               /* always room for 2 lines */
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
#content .product-thumb .caption h4 a {
  color: var(--titi-text);
  font-weight: 600;
  text-decoration: none;
}
#content .product-thumb .caption h4 a:hover {
  color: var(--titi-green);
}

/* the cut short description ("Коледна топка със сн..") repeats the title */
#content .product-thumb .caption > p:not(.price) {
  display: none;
}

#content .product-thumb .price {
  display: block;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--titi-green-dark);
}
#content .product-thumb .price-old {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #8a8190;
  text-decoration: line-through;
}
#content .product-thumb .price-tax {
  display: none;
}

/* --- Button ---------------------------------------------------------------- */
#content .product-thumb .button-group {
  display: block;
  margin: 0;
  padding: 12px 14px 14px;
  background: transparent;
  border: 0;
  overflow: visible;
}
#content .product-thumb .button-group .btn-personalize {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  float: none;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--titi-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .2s ease;
}
#content .product-thumb .button-group .btn-personalize:hover,
#content .product-thumb .button-group .btn-personalize:focus {
  background: var(--titi-green-dark);
  color: #fff;
  outline: none;
}
#content .product-thumb .button-group .btn-personalize:focus-visible {
  box-shadow: 0 0 0 3px var(--titi-lime);
}

/* --- Small screens ---------------------------------------------------------- */
@media (max-width: 767px) {
  #content .product-thumb .caption {
    padding: 10px 10px 0;
  }
  #content .product-thumb .caption h4 {
    -webkit-line-clamp: 3;          /* narrow 2-column cards: allow 3 lines */
    min-height: 4.05em;
    font-size: 14px;
  }
  #content .product-thumb .price {
    font-size: 16px;
  }
  #content .product-thumb .button-group {
    padding: 10px;
  }
  #content .product-thumb .button-group .btn-personalize {
    font-size: 13px;
    padding: 10px 8px;
  }
}

/* --- Related products carousel (product page) ------------------------------ */
#content .titiart-carousel-wrapper {
  position: relative;
  padding: 0;
}
#content .titiart-carousel {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#content .titiart-carousel::-webkit-scrollbar {
  display: none;
}
#content .titiart-carousel .product-carousel-item {
  flex: 0 0 calc((100% - 16px) / 2);   /* mobile: 2 whole cards */
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
#content .titiart-carousel .product-thumb {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  #content .titiart-carousel .product-carousel-item {
    flex-basis: calc((100% - 32px) / 3); /* tablet: 3 */
  }
}
@media (min-width: 992px) {
  #content .titiart-carousel .product-carousel-item {
    flex-basis: calc((100% - 48px) / 4); /* desktop: 4 */
  }
}
#content .titiart-carousel-wrapper .carousel-nav-btn {
  position: absolute;
  top: 30%;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--titi-card-border);
  border-radius: 50%;
  background: #fff;
  color: var(--titi-plum);
  box-shadow: 0 2px 8px rgba(91, 74, 114, .18);
  transform: translateY(-50%);
}
#content .titiart-carousel-wrapper .carousel-nav-btn.prev { left: -12px; right: auto; }
#content .titiart-carousel-wrapper .carousel-nav-btn.next { right: -12px; left: auto; }
#content .titiart-carousel-wrapper .carousel-nav-btn:hover { color: var(--titi-green); border-color: var(--titi-green); }
@media (hover: none) {
  #content .titiart-carousel-wrapper .carousel-nav-btn { display: none; }   /* touch: swipe */
}

@media (prefers-reduced-motion: reduce) {
  #content .product-thumb,
  #content .product-thumb .image img { transition: none; }
  #content .product-thumb:hover,
  #content .product-thumb:hover .image img { transform: none; }
}

/* --- Header, menus and dropdowns: warm ivory instead of white ------------- */
:root {
  --titi-ivory: #fdf8ef;        /* same as the product cards */
  --titi-ivory-deep: #f6efe2;   /* submenus */
  --titi-ivory-hover: #f1e7d5;  /* hover / tap */
  --titi-ivory-line: #eadfcd;   /* separators */
}

/* Mobile: sticky header bar + search dropdown (mobile-header-bar.css) */
.mobile-header-bar,
.mobile-search-dropdown {
  background-color: var(--titi-ivory);
}

/* Mobile: overlay menu (menu-styles.css) */
.mobile-overlay-content,
.mobile-menu-link,
.mobile-submenu-inline .view-all .mobile-menu-link {
  background-color: var(--titi-ivory);
}
.mobile-menu-item {
  border-bottom-color: var(--titi-ivory-line);
}
.mobile-submenu-inline,
.mobile-submenu-inline .mobile-menu-link {
  background-color: var(--titi-ivory-deep);
}
.mobile-submenu-inline .mobile-menu-item {
  border-bottom-color: var(--titi-ivory-line);
}
.mobile-menu-separator {
  background-color: var(--titi-ivory-line);
}
.mobile-menu-link:hover,
.mobile-menu-link:focus,
.mobile-submenu-inline .mobile-menu-link:hover,
.mobile-submenu-inline .mobile-menu-link:focus {
  background-color: var(--titi-ivory-hover);
}

/* Desktop: category dropdowns and cart dropdown (bootstrap / stylesheet.css / menu-styles.css) */
#menu .dropdown-menu,
.navbar-nav .dropdown-menu,
#cart .dropdown-menu {
  background-color: var(--titi-ivory);
  border-color: var(--titi-ivory-line);
}
#menu .dropdown-menu a:hover,
#menu .dropdown-menu a:focus,
.dropdown-inner li a:hover,
.dropdown-inner li a:focus {
  background-color: var(--titi-ivory-hover);
  color: var(--titi-green-dark);
}

/* --- Product grid spacing (home "Подбрани с любов", category, search, special) ---
   Bootstrap gives 30px between cards and 30px at the screen edge on mobile.
   Desktop: 20px gap. Mobile: 10px gap and 10px edge, so the cards get ~20% wider. */
#content .row:has(> .product-layout) {
  margin-left: -10px;
  margin-right: -10px;
}
#content .row > .product-layout {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}
#content .row > .product-layout > .product-thumb {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  /* content starts 30px from the screen edge (container 15 + #content 15);
     -25px puts the row at 5px, + 5px column padding = cards 10px from the edge */
  #content .row:has(> .product-layout) {
    margin-left: -25px;
    margin-right: -25px;
  }
  #content .row > .product-layout {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }
}

/* --- Home: H1 intro (HTML module) – compact title + 3 trust chips ---------- */
#content .titi-home-intro {
  margin: 8px 0 14px;
  text-align: left;
}
#content .titi-home-intro__title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--titi-plum);
}
#content .titi-home-intro__usp {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#content .titi-home-intro__usp li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px;
  background: var(--titi-ivory);
  border: 1px solid var(--titi-card-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--titi-text);
}
#content .titi-home-intro__usp .fa {
  font-size: 14px;
  color: var(--titi-green);
}
@media (min-width: 768px) {
  #content .titi-home-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 10px 0 20px;
  }
  #content .titi-home-intro__title {
    margin: 0;
    font-size: 26px;
  }
  #content .titi-home-intro__usp {
    flex: none;
    gap: 10px;
  }
  #content .titi-home-intro__usp li {
    flex: none;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 13.5px;
    white-space: nowrap;
  }
  #content .titi-home-intro__usp .fa { font-size: 16px; }
}

/* --- Home: SEO text (HTML module) ------------------------------------------ */
#content .titi-seo {
  max-width: 900px;
  margin: 32px auto 24px;
  padding: 24px 28px;
  background: var(--titi-ivory);
  border: 1px solid var(--titi-card-border);
  border-radius: 12px;
  color: var(--titi-text);
  font-size: 15px;
  line-height: 1.65;
}
#content .titi-seo h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--titi-plum);
}
#content .titi-seo h3 {
  margin: 20px 0 8px;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--titi-plum);
}
#content .titi-seo h3::after { content: none; }
#content .titi-seo p { margin: 0 0 10px; }
#content .titi-seo ol { margin: 0; padding-left: 22px; }
#content .titi-seo li { margin-bottom: 4px; }
#content .titi-seo a {
  color: var(--titi-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767px) {
  #content .titi-seo { padding: 18px 16px; font-size: 14.5px; }
  #content .titi-seo h2 { font-size: 19px; }
}

/* --- Footer: own Facebook card instead of the Facebook Page Plugin --------- */
footer .titi-fb-card {
  display: block;
  max-width: 340px;
  margin: 0 0 16px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  color: var(--titi-text);
  font-weight: 400;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
footer .titi-fb-card:hover,
footer .titi-fb-card:focus {
  transform: translateY(-2px);
  color: var(--titi-text);
  text-decoration: none;
}
footer .titi-fb-card:focus-visible { outline: 3px solid var(--titi-lime); outline-offset: 2px; }
footer .titi-fb-card__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 820 / 312;          /* Facebook cover proportions */
  object-fit: cover;
  background: var(--titi-lavender-soft);
}
footer .titi-fb-card__body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 10px;
}
footer .titi-fb-card__logo {
  flex: none;
  width: 52px;
  height: 52px;
  margin-top: -18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
footer .titi-fb-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 6px;
}
footer .titi-fb-card__text strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
footer .titi-fb-card__text small {
  font-size: 12px;
  color: #6b6475;
}
footer .titi-fb-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 12px 12px;
  border-radius: 8px;
  background: #1877f2;              /* Facebook blue – recognisable */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
footer .titi-fb-card:hover .titi-fb-card__btn { background: #166fe5; }