/* ----------------------------
    GLOBAL / LAYOUT
---------------------------- */
.menu-container {
  padding       : 1rem;
  padding-bottom: 7rem;
}

/* ----------------------------
    BREADCRUMBS
---------------------------- */
.breadcrumbs {
  margin   : 1rem 0;
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.breadcrumbs a {
  color          : #333;
  text-decoration: none;
}

/* ----------------------------
    SHOP CONTROLS
---------------------------- */
.shop-controls {
  display: flex;
  margin : 20px 0;
}

.control-btn {
  background     : #f8f9fd;
  font-size      : clamp(0.7rem, 2.5vw, 0.9rem);
  border         : none;
  padding        : clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  width          : 100%;
  height         : 43px;
}

.btn-content {
  display    : flex;
  align-items: center;
  gap        : 5px;
}

.filter-count {
  background-color: #f05478;
  color           : white;
  font-size       : 12px;
  border-radius   : 50%;
  width           : 20px;
  height          : 20px;
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.filter-tag {
  background-color: #f05478;
  color           : white;
  font-size       : 12px;
  border-radius   : 50%;
  width           : 20px;
  height          : 20px;
  display         : flex;
  align-items     : center;
  justify-content : center;
}

/* ----------------------------
    FILTERS (GENERAL STYLING)
---------------------------- */

.filters h2 {
  font-size: 18px;
}

.filter-group {
  background   : #fff;
  padding      : 0 15px;
  border-bottom: 1px solid #e8e8ed;
}

.filter-group.highlighted {
  margin-bottom: 15px;
  border-bottom: none;
}

.highlighted-option {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 8px 0;
  cursor     : pointer;
  transition : background-color 0.2s ease;
}


.highlighted-option label {
  color: #333;
}

.filter-title {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 15px 0;
  cursor         : pointer;
}


.filter-title h4 {
  margin            : 0;
  /* font-size      : clamp(0.875rem, 2vw, 0.9rem) */
  font-size         : clamp(0.9rem, 2vw, 0.95rem);

}

.filter-content {
  max-height: 0;
  overflow  : hidden;
  transition: max-height 0.3s ease;
  padding   : 0 20px;
}

.filter-list {
  list-style: none;
  padding   : 10px 0;
  font-size : 17px;

}

.filter-list input[type="checkbox"] {
  width : 15px;
  height: 15px;
}

.filters h4,
.filter-list li label,
.slider-item-header p,
.filter-refresh-btn {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
}

.filter-list li label {
  display    : flex;
  align-items: center;
  gap        : 10px;
  font-weight: 400;
}

.filter-title-baadge {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.filter-items-count {
  background-color: #3f4247;
  color           : #fff;
  font-size       : 12px;
  border-radius   : 50%;
  width           : 20px;
  height          : 20px;
  display         : flex;
  align-items     : center;
  justify-content : center;
}


/* ----------------------------
MOBILE FILTER HEADER
---------------------------- */
.filter-header-mobile {
  justify-content: space-between;
  align-items    : center;
  padding        : 20px;
}

.filter-header-mobile h4 {
  font-size: 16px;
}

.clear-btn {
  background: none;
  border    : none;
}

/* ----------------------------
RANGE SLIDER (GLOBAL STYLING)
---------------------------- */

.slider-item {
  margin: 30px 0;
}

.slider-item-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 10px;
}

.slider-item-header p {
  font-size  : 14px;
  font-weight: 500;
  margin     : 0;
  color      : #6a6a6a;
}


.sliders-control {
  position: relative;
  height  : 24px;
}

.sliders-control input[type="range"] {
  position          : absolute;
  width             : 100%;
  pointer-events    : none;
  -webkit-appearance: none;
  background        : transparent;
  height            : 24px;
}

.sliders-control input[type="range"]::-webkit-slider-runnable-track {
  height : 4px;
  z-index: 100;
}


.sliders-control input[type="range"]::-webkit-slider-thumb {
  pointer-events    : auto;
  -webkit-appearance: none;
  height            : 18px;
  width             : 18px;
  border-radius     : 50%;
  background        : #38424b;
  cursor            : pointer;
  margin-top        : -7px;
}

.sliders-control::before {
  content      : "";
  position     : absolute;
  top          : 50%;
  left         : 0;
  right        : 0;
  height       : 4px;
  background   : #ddd;
  transform    : translateY(-50%);
  border-radius: 2px;
}


.sliders-control::after {
  content      : "";
  position     : absolute;
  top          : 50%;
  height       : 4px;
  background   : #38424b;
  transform    : translateY(-50%);
  border-radius: 2px;
  left         : var(--from, 0%);
  right        : calc(100% - var(--to, 100%));
}


/* ----------------------------
COLOR FILTER (GLOBAL STYLING)
---------------------------- */
.color-list {
  display  : flex;
  flex-wrap: wrap;
  gap      : 15px;
  padding  : 10px 0;
}

.color-list li {
  list-style: none;
}

.color-list label {
  display : inline-block;
  position: relative;
  cursor  : pointer;
}

.color-list input[type="checkbox"] {
  appearance: none;
  position  : absolute;
}

.color-swatch {
  display      : block;
  width        : 28px;
  height       : 28px;
  border-radius: 50%;
  border       : 1px solid #e8e8ed;
  transition   : transform 0.2s ease;
  transform    : scale(1);
}

.color-list input[type="checkbox"]:checked+.color-swatch {
  transform: scale(0.7);
}

/* ----------------------------
FRAME TYPE & SHAPE (GLOBAL STYLING)
---------------------------- */
.filter-list.frame-type-list .count,
.filter-list.frame-shape-list .count {
  color    : #999;
  font-size: 13px;
}

/* ----------------------------
PRICE FILTER (GLOBAL STYLING)
---------------------------- */
.price-range {
  display        : flex;
  justify-content: center;
  gap            : 15px;
  padding        : 15px 0;
}

.price-input-group {
  display       : flex;
  flex-direction: column;
}

.price-input-group label {
  font-size    : 14px;
  margin-bottom: 5px;
  text-align   : center;
}

.price-input-group input {
  width           : 100%;
  padding         : 10px 15px;
  border          : none;
  background-color: #f8f9fd;
  border-radius   : 5px;
  font-size       : 14px;
}

/* ----------------------------
DESKTOP VIEW
---------------------------- */
.page-title {
  font-size: calc(1.44375rem + 1.575vw);
}

.shop-content {
  display    : flex;
  gap        : 20px;
  align-items: flex-start;
}

.filters {
  width         : 300px;
  position      : sticky;
  top           : 50px;
  align-self    : flex-start;
  display       : flex;
  flex-direction: column;
  max-height    : calc(100vh - 50px);
}

.filters-inner {
  flex-grow : 1;
  overflow-y: auto;
}

/* Za Chrome, Safari i Edge */
.filters-inner::-webkit-scrollbar {
  display: none;
}

/* Za Firefox */
.filters-inner {
  scrollbar-width: none;
}

.filter-header-mobile,
.filter-footer,
.minus-icon,
.filter-title.active .plus-icon {
  display: none;
}

.filter-title.active .minus-icon {
  display: block;
}


.filter-title-content {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.products-and-pager-container {
  flex-direction: column;
  flex-grow     : 1;
}

.pager {
  margin-top     : auto;
  display        : flex;
  justify-content: center;
  gap            : 8px;
  margin-top     : 40px;
}

.pager-numbers {
  display: flex;
  gap    : 8px;
}

.pager-arrow,
.pager-number {
  background     : #f8f9fd;
  border         : none;
  font-size      : 14px;
  font-weight    : 500;
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  cursor         : pointer;
  transition     : all 0.2s ease;
  justify-content: center;
  align-items    : center;
}

.pager-arrow.disabled {
  opacity: 0.5;
  cursor : not-allowed;
}

.pager-number.active {
  background-color: #38424b;
  color           : #fff;
  width           : 38px;
  height          : 38px;
  font-size       : 16px;
}

.pager-number:hover:not(.active),
.pager-arrow:hover:not(.disabled) {
  background-color: #f0f0f0;
}

/* ----------------------------
    DROPDOWN STYLING
---------------------------- */
.dropdown.open .control-btn img:last-child {
  transform : rotate(180deg);
  transition: transform 0.2s ease;
}

.dropdown.open img,
.dropdown.open>img {
  transform: rotate(180deg);
}

.dropdown-menu {
  right     : 0;
  margin    : 5px 0 0;
  border    : 1px solid #e8e8ed;
  z-index   : 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown.open .dropdown-menu {
  display: block;
}

.sort-btn>img:last-child {
  margin-left: 8px;
}

.sort-option {
  padding  : 8px 15px;
  cursor   : pointer;
  font-size: 14px;
}

.sort-option:hover {
  background-color: #f0f0f0;
}

/* === PRODUCT CARD === */
.product-list-copy {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 20px;
}

.product-card-copy {
  width         : 100%;
  aspect-ratio  : 1 / 1.25;
  background    : #f8f9fd;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  border-radius : 8px;
  transition    : transform 0.3s ease-in-out;
}

.product-image-wrapper-copy {
  width           : 100%;
  height          : 65%;
  background-color: #f8f9fd;
  display         : flex;
  align-items     : center;
  justify-content : center;
  position        : relative;
}

.product-image-wrapper-copy img {
  position         : absolute;
  top              : 55%;
  left             : 50%;
  transform        : translate(-50%, -50%);
  user-select      : none;
  pointer-events   : none;
  -webkit-user-drag: none;
  width            : 85%;
  height           : auto;
  transition       : transform 0.3s ease-in-out;
  mix-blend-mode   : multiply;
}

.product-card-copy:hover .product-image-wrapper-copy img {
  transform: translate(-50%, -50%) scale(1.07);
}

.product-tag-badge-copy {
  position        : absolute;
  top             : 7%;
  left            : 6%;
  padding         : 0.2em 1em;
  border          : 1.5px solid currentColor;
  border-radius   : 999px;
  background-color: #f05478;
  color           : white;
  font-size       : 75%;
  font-weight     : 600;
  font-family     : "Open Sans", sans-serif;
}

.product-info-copy {
  height         : 35%;
  display        : flex;
  flex-direction : column;
  justify-content: flex-start;
  padding        : 1% 6%;
  box-sizing     : border-box;
  text-align     : left;
  position       : relative;
}

.brand-name-copy {
  font-size    : clamp(1rem, 1.2vw, 1.4rem);
  font-weight  : 500;
  color        : #111;
  margin       : 0;
  line-height  : 1.1;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  font-family  : "Open Sans", sans-serif;
}

.product-name-copy {
  font-size    : clamp(0.9rem, 1vw, 1.2rem);
  font-weight  : normal;
  color        : #787878;
  margin       : 0;
  margin-top   : 2%;
  line-height  : 1.1;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.product-price-copy {
  position          : absolute;
  bottom            : 15%;
  right             : 6%;
  display           : flex;
  align-items       : center;
  justify-content   : flex-end;
  gap               : 8%;
  /* font-size      : clamp(1rem, 1.3vw, 1.5rem); */
  font-size         : clamp(0.8rem, 1.3vw, 1.5rem);
  font-weight       : bold;
  margin            : 0;
  white-space       : nowrap;
  line-height       : 1.2;
}

.sale-price-copy {
  font-weight: bold;
  color      : #245069;
}

.regular-price-copy {
  font-weight    : normal;
  color          : #245069;
  text-decoration: line-through;
  opacity        : 0.7;
  font-size      : 90%;
}

/* ----------------------------
    MEDIA QUERIES
---------------------------- */

/* Desktop (768px and up) */
@media (min-width: 768px) {

  .shop-controls .filter-btn {
    display: none;
  }

  .shop-controls .dropdown.sort-dropdown {
    margin-left: auto;
  }

  .filters-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 30px;
    padding        : 0 15px;
  }

  .filters-header h2 {
    margin: 0;
  }

}

/* Tablet / Mobile (up to 1200px) and smaller */
@media (max-width: 1200px) {
  .product-list-copy {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .shop-controls {
    gap: 20px;
  }

  .filters-header {
    display: none;
  }

  .filter-container,
  .dropdown {
    flex: 1;
  }

  body.no-scroll {
    overflow: hidden;
  }

  .filters {
    position      : fixed;
    top           : 0;
    left          : 0;
    width         : 100%;
    max-height    : 100%;
    height        : 100%;
    background    : #f7f8fc;
    z-index       : 1000;
    transform     : translateX(-100%);
    transition    : transform 0.3s ease;
    display       : flex;
    flex-direction: column;
    overflow-y    : auto;
  }

  .filters.open {
    transform: translateX(0);
  }

  .filter-header-mobile {
    display: flex;
  }

  .filter-accordion {
    flex-grow: 1;
    padding  : 0 10px 20px;
  }

  .filter-footer {
    display         : block;
    background-color: #fff;
    box-shadow      : 0 -8px 8px rgba(0, 0, 0, 0.1);
    padding         : 20px;
    position        : sticky;
    bottom          : 0;
    z-index         : 1001;
  }

  .filter-refresh-btn {
    width           : 100%;
    padding         : 10px;
    background-color: #3f4247;
    color           : white;
    border          : none;
    border-radius   : 5px;
  }

  .product-list-copy {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 1919px) {
  .product-list-copy {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .product-list-copy {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .shop-controls {
    flex-direction: column;
    gap           : 6px;
  }

  .product-price-copy {
    font-size      : 0.8rem;
    position       : static;
    margin-top     : 5px;
    justify-content: flex-start;
  }
}

.filter.is-visually-hidden { 
  display: none !important; 
}

.item.is-disabled {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
}

/* ============================
   "Izdvojeno za vas" – aktivni tag
   ============================ */

/* cijeli red klikabilan */
.highlighted-option-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 100%;
}

/* sakrij radio — ali NE blokiraj klik */
.highlighted-option-label input[type="radio"] {
    position: absolute;
    inset: 0;              /* pokrije cijeli label */
    opacity: 0;            /* ne vidi se */
    cursor: pointer;
    pointer-events: auto;  /* OMOGUĆI klik */
}

/* hover highlight */
.highlighted-option:hover {
    background-color: #f8f9fd;
}

/* aktivni red */
.highlighted-option:has(input[type="radio"]:checked) {
    background-color: #ffe8f0;
}

/* aktivni kružić */
.highlighted-option input[type="radio"]:checked + .filter-tag {
    box-shadow: 0 0 0 2px #f05478;
}

/* aktivni tekst */
.highlighted-option input[type="radio"]:checked + .filter-tag + .filter-label {
    font-weight: 600;
}