/* assets/css/material-sales-style.css - v1.3.4 */
:root{--mwsg-primary-color:#0274BE;--mwsg-text-color:#212121;--mwsg-text-secondary-color:#757575;--mwsg-background-color:#FFFFFF;--mwsg-card-background-color:#fff;--mwsg-divider-color:#bdbdbd;--mwsg-font-family:'Roboto',sans-serif;--mwsg-tab-bar-height:56px;--mwsg-tab-bar-height-mobile:50px;}
.mwsg-container{font-family:var(--mwsg-font-family);background-color:var(--mwsg-background-color);padding:16px 0;max-width:1200px;margin:0 auto;padding-bottom:calc(var(--mwsg-tab-bar-height) + 20px);}

.mwsg-filters-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 16px 16px; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--mwsg-divider-color); margin-bottom: 20px; }

/* IAP Filter Chip Styles */
.mwsg-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 45px; /* M3 spec */
    border-radius: 8px; /* M3 spec */
    border: 1px solid var(--mwsg-divider-color); /* Outline color */
    background-color: var(--mwsg-card-background-color); /* Match card background */
    color: var(--mwsg-text-color); /* Default text color */
    font-family: var(--mwsg-font-family);
    font-size: 18px; /* M3 Label Small */
    font-weight: 500; /* Medium weight */
    line-height: 1; /* For vertical centering of text/icon */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none; /* Prevent text selection on click */
    flex-shrink: 0; /* Prevent shrinking in flex layouts */
    padding: 0 16px; /* Default padding for label-only */
    text-decoration: none !important; /* Remove underline if parent is a link */
}
.mwsg-filter-chip:hover { background-color: rgba(0,0,0,0.04); /* M3 hover state overlay */ }
.mwsg-filter-chip:focus-visible { outline: 2px solid var(--mwsg-primary-color); outline-offset: 1px; } /* Adjusted offset for better visual */
.mwsg-filter-chip.selected {
    padding-left: 10px; /* Adjust padding when icon is present */
    background-color: #E0EEF7; /* New light blue background */
    color: var(--mwsg-primary-color); /* Text color for selected chip - changed for contrast */
    border-color: #E0EEF7; /* Border matches new background */
}
.mwsg-filter-chip .mwsg-chip-icon { font-size: 24px; /* M3 spec */ margin-right: 8px; /* M3 spec */ color: var(--mwsg-primary-color); line-height:1; } /* Default icon color */
.mwsg-filter-chip.selected .mwsg-chip-icon { color: var(--mwsg-primary-color); } /* Icon color for selected chip - changed for contrast */
.mwsg-filter-chip .mwsg-chip-label { line-height:1; }

.mwsg-sort-options { display: flex; align-items: center; gap: 4px; flex-shrink: 1; justify-content: flex-end; }
.mwsg-sort-icon { display: inline-flex; align-items: center; padding: 6px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, color 0.2s; color: var(--mwsg-text-secondary-color); text-decoration:none !important; border-bottom: none !important; }
.mwsg-sort-icon:hover { color: var(--mwsg-primary-color); background-color: rgba(2,116,190,0.08); }
.mwsg-sort-icon.active { color: var(--mwsg-primary-color); background-color: rgba(2,116,190,0.12); /* Light tint for active */ }
.mwsg-sort-icon.active .material-icons-outlined { color: var(--mwsg-primary-color); } /* Main icon color when active */
.mwsg-sort-icon .main-sort-icon.material-icons-outlined { font-size: 38px; /* Increased main sort icon size */ vertical-align: middle; }
.mwsg-sort-icon .sort-direction.material-icons-outlined { font-size: 16px; /* Smaller direction arrow */ margin-left: 2px; /* Adjusted for closer proximity */ vertical-align: middle; }


.mwsg-tabs{display:flex;justify-content:center;background-color:var(--mwsg-card-background-color);box-shadow:0 -2px 5px rgba(0,0,0,0.15);position:fixed;bottom:0;left:0;right:0;z-index:100000;border-top:1px solid var(--mwsg-divider-color);height:var(--mwsg-tab-bar-height);}
.mwsg-tabs a{flex-grow:1;text-align:center;padding:0 16px;line-height:var(--mwsg-tab-bar-height);text-decoration:none;color:var(--mwsg-text-secondary-color);font-weight:500;font-size:18px;text-transform:uppercase;border-top:3px solid transparent;border-bottom:none;transition:color .3s ease,border-top-color .3s ease;position:relative;overflow:hidden;}
.mwsg-tabs a.active,.mwsg-tabs a:hover{color:var(--mwsg-primary-color);border-top-color:var(--mwsg-primary-color);}
.mwsg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 16px;}
.mwsg-card{background-color:var(--mwsg-card-background-color);border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.15);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s cubic-bezier(.25,.8,.25,1);text-decoration:none !important;color:inherit;}
.mwsg-card:hover{box-shadow:0 8px 17px rgba(0,0,0,0.2),0 6px 20px rgba(0,0,0,0.19);}
.mwsg-card--sponsor { border: 2px solid #f44336 !important; box-shadow: 0 0 10px rgba(244, 67, 54, 0.5) !important; }
.mwsg-card-thumbnail{width:100%;height:180px;object-fit:cover;border-bottom:1px solid var(--mwsg-divider-color);}
.mwsg-card-placeholder-thumbnail{width:100%;height:180px;background-color:#e0e0e0;display:flex;align-items:center;justify-content:center;color:var(--mwsg-text-secondary-color);border-bottom:1px solid var(--mwsg-divider-color);}.mwsg-card-placeholder-thumbnail .material-icons-outlined{font-size:48px;}
.mwsg-card-content{padding:16px;flex-grow:1;display:flex;flex-direction:column;}
.mwsg-card-title{font-size:18px;font-weight:500;color:var(--mwsg-text-color);margin:0 0 4px 0;line-height:1.3;}
.mwsg-card-category{font-size:13px;color:var(--mwsg-text-secondary-color);margin-bottom:12px;text-transform:capitalize;}
.mwsg-card-price{margin-top:auto;font-size:16px;font-weight:700;text-align:right;}.mwsg-card-price .price{color:var(--mwsg-primary-color);}.mwsg-card-price del{color:var(--mwsg-text-secondary-color);font-size:15px;font-weight:400;margin-right:8px;}.mwsg-card-price ins{text-decoration:none;background:0 0;color:var(--mwsg-primary-color);font-size:22px;}.mwsg-card-price .free{color:var(--mwsg-primary-color);font-weight:700;font-size:20px;}
.mwsg-card--sponsor .mwsg-card-price del { text-decoration: line-through !important; }
.mwsg-pagination{margin-top:32px;text-align:center;}.mwsg-pagination ul{list-style:none;padding:0;margin:0;}.mwsg-pagination ul li{display:inline-block;}.mwsg-pagination .page-numbers{padding:8px 12px;margin:0 4px;border:1px solid var(--mwsg-divider-color);border-radius:4px;text-decoration:none;color:var(--mwsg-text-color);transition:background-color .3s ease,color .3s ease;background-color:var(--mwsg-card-background-color);}.mwsg-pagination .page-numbers:hover,.mwsg-pagination .page-numbers.current{background-color:var(--mwsg-primary-color);color:var(--mwsg-card-background-color);border-color:var(--mwsg-primary-color);}
.mwsg-no-products{text-align:center;padding:20px;color:var(--mwsg-text-secondary-color);}

/* Admin settings styles */
.mwsg-ad-spot { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; background-color: #f9f9f9; }
.mwsg-ad-spot h4 { margin-top: 0; }
.mwsg-ad-spot p { margin-top: 5px; margin-bottom: 5px; }
.mwsg-ad-spot label { display: block; margin-bottom: 5px; }
.mwsg-ad-spot .regular-text { width: 100%; max-width: 400px; }
.mwsg-ad-spot .button-link-delete { color: #a00; text-decoration: none; border: none; background: none; cursor: pointer; }

/* --- Seasonal Sales Carousel Styles --- */
.seasonal-sales-carousel-wrapper {
  /* This wrapper handles positioning for scroll buttons but does NOT scroll itself. */
  width: 100%;
  position: relative;
}

.seasonal-sales-carousel {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto; /* This is the scrolling container */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px; /* For spacing below cards */

  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.seasonal-sales-carousel::-webkit-scrollbar {
  display: none; /* WebKit */
}

.seasonal-sales-carousel .mwsg-card {
  flex: 0 0 calc((100% - 32px) / 3); /* 3 cards with 16px gap between */
  max-width: 340px;
  min-width: 240px;
  scroll-snap-align: start; /* Snap to the start of the card */
}

/* Scroll buttons (desktop only) */
.seasonal-carousel-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--mwsg-divider-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--mwsg-primary-color);
  transition: background 0.2s, color 0.2s;
}
.seasonal-carousel-scroll-btn:hover {
  background: var(--mwsg-primary-color);
  color: #fff;
}
.seasonal-carousel-scroll-btn.left {
  left: 0;
}
.seasonal-carousel-scroll-btn.right {
  right: 0;
}

/* On larger screens, hide the native scrollbar and show custom buttons */
@media (min-width: 901px) {
  .seasonal-carousel-scroll-btn {
    display: flex;
  }
  .seasonal-sales-carousel {
     /* Hide scrollbar visually but keep it scrollable via buttons/script */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .seasonal-sales-carousel::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 900px) {
  .seasonal-sales-carousel .mwsg-card {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: 340px;
    min-width: 200px;
  }
}

@media (max-width: 600px) {
  .seasonal-sales-carousel .mwsg-card {
    flex: 0 0 75vw;
    min-width: 220px;
    max-width: 80vw;
  }
  .seasonal-sales-carousel {
    gap: 12px;
    /* Add padding to create space on the sides. */
    padding-left: 4vw;
    padding-right: 4vw;
    /* This tells the snapping algorithm to consider the padding as part of the viewport. */
    scroll-padding-inline: 4vw;
  }
}

@media(max-width:768px){ 
    .mwsg-filters-toolbar { flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: space-between; }
    .mwsg-sort-icon .main-sort-icon.material-icons-outlined { font-size: 30px; /* Adjusted for tablets */ }
    .mwsg-sort-icon .sort-direction.material-icons-outlined { font-size: 14px; }
}
@media(max-width:600px){
    .mwsg-container{padding-bottom:calc(var(--mwsg-tab-bar-height-mobile) + 20px);}
    .mwsg-filters-toolbar { gap: 10px; /* Less gap between toggle and sort group */ }
    .mwsg-sort-options { gap: 2px; /* Minimal gap between sort icons */ }
    .mwsg-sort-icon { padding: 5px; }
    .mwsg-sort-icon .main-sort-icon.material-icons-outlined { font-size: 26px; /* Adjusted for small mobile */ }
    .mwsg-sort-icon .sort-direction.material-icons-outlined { font-size: 14px; /* Keep small */ }

    .mwsg-tabs{height:var(--mwsg-tab-bar-height-mobile);justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);}
    .mwsg-tabs a{padding:0 8px;font-size:18px;line-height:var(--mwsg-tab-bar-height-mobile);}
    .mwsg-grid{grid-template-columns:1fr;padding:0 8px;}
    .mwsg-card-title{font-size:28px !important;}.mwsg-card-category{font-size:18px;margin-top:0;}.mwsg-card-price{font-size:15px;}.mwsg-card-price del{font-size:15px;}.mwsg-card-price ins{font-size:22px;}.mwsg-card-price .free{font-size:20px;}
    .mwsg-card-thumbnail,.mwsg-card-placeholder-thumbnail{height:160px;}
}