/* ---------------------------------------------------
   TABLE OF CONTENTS
   1. Header / Breadcrumbs
   2. Series Logo / Header Image
   3. Titles
   4. Price & SKU
   5. Categories & Tags
   6. Descriptions
   7. Attributes
   8. Stock / Weight / Dimensions
   9. Gallery
  10. Ink Details
  11. Features & Overview columns
  12. Adjust badge scaling
  13. Compatibility (Print Heads & Printers)
  14. Spec Rows
  15. Full-width Background Carousels
  16. In-Container Row Utility
  17. Color container for swatches
  18. Swatch square styling
  19. Tooltip for swatches
  20. Swatch hover
  21. Color swatches
  22. Substrates carousel title
  23. Applications carousel title
  24. Short description styling
--------------------------------------------------- */

/* ---------------------------------------
   SINGLE PRODUCT TEMPLATE – ALL CUSTOM STYLES
----------------------------------------- */

/* Header / Breadcrumbs */
.breadcrumbs-container {
  margin: 1rem 0;
  text-align: center;
}
.breadcrumbs-link {
  color: var(--series-color);
  text-decoration: none;
}
.breadcrumbs-link:hover {
  opacity: 0.8;
}
.breadcrumbs-current {
  color: var(--series-color);
  font-weight: 600;
}

/* Series Logo / Header Image */
.series-logo-container {
  text-align: center;
  margin: 1.6rem auto;
  width: 30%;
  align-items: center;
}


.header-product-image-container {
  text-align: center;
  margin: 2rem auto;
  width: 100%;
  align-items: center;

}

.series-logo-image {
  height: auto;
  width:100%;
  display: block;
  margin: 0 auto;
  align-items: center;
}

.header-product-image {
  height: auto;
  width:50%;
  display: block;
  margin: 0 auto;
  align-items: center;
}

/* Titles */
.header-product-title {
  font-size: 4rem;
  margin-top: 1rem;
  text-align: center;
  font-family: "Bauhaus Demi", sans-serif;
  font-weight: normal;
}
.product-title-inner {
  font-size: 2rem;
  margin: 2rem 0;
  text-align: center;
}

/* Price & SKU */
.price-sku-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.price-label {
  color: var(--series-color);
}
.sku-label {
  font-weight: bold;
}

/* Categories & Tags */
.categories-tags-container {
  margin-bottom: 1.5rem;
}
.category-item,
.tag-item {
  background-color: #fff;
  color: #000;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  margin-right: 0.5em;
}

/* Descriptions */
.short-description-container,
.full-description-container {
  margin-bottom: 2rem;
}
.short-description-title,
.full-description-title {
  font-size: 4.5rem;
  margin-bottom: 0.5rem;
  padding: 5%;
}

/* Attributes */
.attributes-container {
  margin-bottom: 2rem;
}
.attributes-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.attributes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.attribute-item {
  margin-bottom: 0.5rem;
}
.attribute-label {
  font-weight: 600;
  margin-right: 0.5em;
}
.attribute-values {
  color: #666;
}

/* Stock / Weight / Dimensions */
.stock-weight-dimensions-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.stock-status,
.weight,
.dimensions {
  margin-right: 1.5rem;
}

/* Gallery */
.gallery-container {
  margin-bottom: 2rem;
}
.gallery-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.gallery-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.gallery-image-item {
  border-radius: 8px;
  overflow: hidden;
}
.gallery-image-item img {
  width: 100%;
  border-radius: 8px;
}

/* Ink Details */
.ink-details-container {
  margin-bottom: 2rem;
}
.ink-details-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.ink-details-list {
  list-style: none;
  padding: 0;
}
.ink-details-list li {
  margin-bottom: 1rem;
}
.ink-manufacturer,
.ink-kind,
.ink-series,
.packaging-types,
.badges-list,
.available-colours,
.compatible-printheads,
.compatible-printers {
  margin-bottom: 1rem;
}
.printhead-link,
.printer-link {
  color: var(--series-color);
  text-decoration: none;
}
span.printhead-link {
  text-decoration: none;
  cursor: default;
}
.printhead-link:hover,
.printer-link:hover {
  text-decoration: underline;
}
span.printhead-link:hover {
  text-decoration: none;
}

/* Features & Overview columns */
.features-overview-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.features-column,
.overview-column {
  flex: 1;
}
.features-title,
.overview-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.features-content,
.overview-content {
  font-size: 1rem;
}

/* Adjust badge scaling */
.badge-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 2%;
  height: 300px;
}

/* Each badge item remains a flex item */
.badge-row .badge-item {
  flex: 0 0 auto;
  text-align: center;
}

/* Badge image sizing: constrain by width, auto height */
.badge-image {
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Compatibility (Print Heads & Printers) */
.compatibility-row {
  margin-bottom: 2rem;
}
.compatibility-column h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.compatibility-list {
  list-style: none;
  padding: 0;
}
.compatibility-list li {
  margin-bottom: 0.5rem;
}

/* Spec Rows */
.spec-row {
  margin-bottom: 2rem;
}
.spec-heading {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.spec-content {
  font-size: 1rem;
  line-height: 1.5;
}
.availability-content {
  font-size: 1rem;
  line-height: 1.5;
}

/* Full-width Background Carousels */
.full-width-background-carousel {
  background-color: #000;
  padding: 8% 0;
}
.full-width-background-carousel .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* In-Container Row Utility */
.in-container-row {
  padding: 2% 0;
}


/* Color container for swatches */
.color-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Swatch square styling */
.color-square {
    width: 60px;
    height: 60px;
    padding: 12px;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: default;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Swatch gradient effect */
.color-square::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 30%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

/* Tooltip for swatches */
.color-square::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(30, 30, 30, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    opacity: 0;
    white-space: nowrap;
    font-family: 'Futura', sans-serif;
    font-size: 0.8em;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Swatch hover */
.color-square:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
}
.color-square:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Color swatches */
.cyan { background-color: #009ee0; color: white; }
.magenta { background-color: #e2007a; color: white; }
.yellow { background-color: #ffed00; color: black; }
.black { background-color: #000000; color: white; }
.light-cyan { background-color: #84d0f0; color: white; }
.light-magenta { background-color: #f19fc1; color: white; }
.light-yellow { background-color: #fff59b; color: black; }
.light-black { background-color: #9c9e9f; color: white; }
.violet { background-color: #3e277b; color: white; }
.fluorescent-pink { background-color: #e53262; color: white; }
.fluorescent-yellow { background-color: #ffed00; color: black; }
.orange { background-color: #e95d0f; color: white; }
.green { background-color: #178256; color: white; }
.white {
  background-color: #ffffff;
  color: white;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
.varnish { background: linear-gradient(90deg, #eceded, #ffffff); color: black; }
.ink-clear { background: linear-gradient(90deg, #eceded, #ffffff); color: black; }

.substrates-carousel-title {
  margin-top: 15%;
}

.applications-carousel-title {
  margin-top: 15%;
}

/* ========================
   Container Styles
   ======================== */
.short-description-container {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  padding: 1rem;            /* breathing room on small screens */
  box-sizing: border-box;
}

/* ========================
   Content Styles
   ======================== */
.short-description-content {
  width: 100%;              /* fill available space */
  max-width: 800px;         /* don’t stretch too wide on large screens */
  margin: 0 auto;           /* fallback horizontal centering */
  text-align: center;
  
  /* responsive font sizing: min 1rem, fluid up to 1.2em */
  font-size: clamp(1rem, 4vw, 1.2em);
  line-height: 1.4;
  box-sizing: border-box;
  padding: 1rem;
}

/* ========================
   Tablet Breakpoint
   (min-width: 768px)
   ======================== */
@media (min-width: 768px) {
  .short-description-container {
    padding: 2rem;
  }
  .short-description-content {
    padding: 2rem;
  }
}

/* ========================
   Desktop Breakpoint
   (min-width: 1024px)
   ======================== */
@media (min-width: 1024px) {
  .short-description-content {
    width: 66%;             /* your original 2/3 width */
    /* bump up font size on desktop for better readability */
    font-size: 1.4em;
  }
}


/* -------------- Fancy List Styles -------------- */
/* --------- Fancy List (koristi FontAwesome ili SVG) --------- */

/* Ukloni zadane točkice */
.fancy-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* Svaki <li> označi kao relativno pozicioniran element */
.fancy-list-item {
  position: relative;
  padding-left: 1.2em;     /* prostor za 'bullet' */
  margin-bottom: 0.75em;   /* razmak između stavki */
  font-size: 1rem;
  line-height: 1.4;        /* po potrebi prilagodi visinu retka */
  color: #333;             /* boja teksta */
}

/* Pseudo-element za 'bullet' (FontAwesome ili Unicode) */
.fancy-list-item::before {
  content: "\f00c";               /* FA5 checkmark kod */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;               /* koristi solid varijantu */
  font-size: 2em;                 /* smanji veličinu ikone */
  position: absolute;
  left: 0;
  top: 50%;                       /* centriranje vertikalno */
  transform: translateY(-50%);    /* centriraj u odnosu na tekst */
  color: var(--series-color);     /* akcent-boja iz inline CSS varijable */
}

/* Ako treba Unicode fallback: */
.fancy-list-item.no-icon::before {
  content: "•";                   /* obična točkica */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: var(--series-color);
}

/* --------- Ako koristite packaging-list strukturu (SVG umjesto FontAwesome) --------- */

/* Ukloni standardne točkice */
.packaging-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* Svaki <li> za pakiranje */
.packaging-item {
  display: flex;
  align-items: baseline;  /* poravnaj ikonu s osnovicom teksta */
  margin-bottom: 0.75em;
  font-size: 1rem;
  line-height: 1.4;
}

/* Kontejner za ikonu */
.pack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;           /* širina kružića */
  height: 2em;          /* visina kružića */
  margin-right: 0.5em;  /* razmak između ikone i naziva */
}

/* Sam IMG unutar .pack-icon */
.pack-icon img {
  width: 1em;   /* postavi da bude jednako CSS jedinici, prilagodi ako treba veće */
  height: auto;
  display: inline-block;
  vertical-align: text-bottom; /* spusti ikonu na donju liniju teksta */
  transform: translateY(10px); /* pomakni ikonu 10px prema dolje */
}

/* Tekst pored ikone */
.pack-name {
  line-height: 1.4;
  color: #fff;  /* ili po potrebi bijela na tamnoj podlozi */
}



/* SIGNLE PRODUCT HEADING BAR */

.section-heading-bar {
  display: flex;
  align-items: baseline; /* Align h3 text baseline */
  width: 100%;
  min-height: 2.8em;
  box-sizing: border-box;
  background: linear-gradient(to right, rgba(0,0,0,0.1), var(--series-color), rgba(0,0,0,0.1));
  padding-bottom: 0;
  padding-top: 0.6em;
  padding-left: 5%;
  border-radius: 10px;
}
.section-heading-bar h3 {
  margin: 0;
  color: #fff;
  font-size: 1.4em;
}

/* Ensure linked product names in heading bar are white */
.section-heading-bar .product-name a {
  color: #fff !important;
  font-family: "Bauhaus Demi", sans-serif;
  font-weight: normal;
  font-size: 1.4em;
}