/* ======================================== COLOR TINTING SELECTOR (Product Card) ======================================== */.color-tinting-selector{ display:flex; align-items:center; gap:12px; margin:20px 0;}
.color-tinting-selector__label{ font-size:14px; font-weight:600; color:#333; flex-shrink:0;}
.color-tinting-selector__options{ display:flex; gap:8px; align-items:center;}
.color-tinting-selector__option{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #ccc; border-radius:30px; cursor:pointer; transition:border-color 0.2s ease,background 0.2s ease; font-size:14px; color:#555; background:#f5f5f5;}
.color-tinting-selector__option:hover{ border-color:#999; background:#eee;}
.color-tinting-selector__option.is-selected{ border-color:#3978C3; background:#f0f5fb; color:#333;}
.color-tinting-selector__option-circle{ width:18px; height:18px; border-radius:50%; border:2px solid #ccc; background-color:#fff; flex-shrink:0;}
.color-tinting-selector__option.is-selected .color-tinting-selector__option-circle{ border-color:#3978C3;}
.color-tinting-selector__option--color .color-tinting-selector__option-circle{ border-color:currentColor;}
.color-tinting-selector__choose-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; appearance:none; -webkit-appearance:none; border:none; border-radius:30px; background:transparent; color:#2d9cdb; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.2s ease; white-space:nowrap;}
.color-tinting-selector__choose-icon{ width:18px; height:18px; object-fit:contain; flex-shrink:0;}
.color-tinting-selector__choose-btn:hover{ background:#ebf8ff;}
.color-tinting-selector__clear{ font-size:18px; color:#999; cursor:pointer; line-height:1;}
.color-tinting-selector__clear:hover{ color:#333;}
/* ======================================== COLOR PICKER MODAL ======================================== */.color-picker-modal-overlay{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); z-index:9999; display:none; align-items:center; justify-content:center;}
.color-picker-modal-overlay.is-open{ display:flex;}
.color-picker-modal{ background:#fff; border-radius:8px; max-width:1100px; width:95%; max-height:90vh; overflow:hidden; position:relative; padding:32px 36px; box-sizing:border-box; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,0.15);}
.color-picker-modal__close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:1px solid #e5e5e5; background:#fff; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; color:#808080; display:flex; align-items:center; justify-content:center; z-index:10; transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;}
.color-picker-modal__close:hover{ background:#f5f5f5; color:#333; border-color:#ccc;}
.color-picker-modal__title{ font-size:20px; font-weight:700; color:#333; margin:0 0 20px 0;}
.color-picker-modal__search{ margin-bottom:20px; position:relative;}
.color-picker-modal__search-input{ width:100%; padding:10px 16px; border:1px solid #e5e5e5; border-radius:5px; font-size:14px; outline:none; transition:border-color 0.2s ease; box-sizing:border-box;}
.color-picker-modal__search-input:focus{ border-color:#3978C3;}
.color-picker-modal__content{ display:flex; gap:30px; flex:1; overflow-y:auto; min-height:0;}
.color-picker-modal__collections{ width:200px; flex-shrink:0;}
.color-picker-modal__collections-label{ font-size:11px; font-weight:700; color:#808080; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px;}
.color-picker-modal__collections-list{ display:flex; flex-direction:column; gap:2px;}
.color-picker-modal__collection{ font-size:13px; color:#555; cursor:pointer; transition:color 0.2s ease; padding:5px 0; border:none; background:none; border-radius:0;}
.color-picker-modal__collection:hover{ color:#3978C3;}
.color-picker-modal__collection.is-selected{ font-weight:700; color:#333;}
.color-picker-modal__colors{ flex:1; min-width:0; overflow:hidden;}
.color-picker-modal__colors-label{ font-size:13px; color:#808080; margin-bottom:16px;}
.color-picker-modal__spectrum-bar{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:20px; width:100%;}
.color-picker-modal__spectrum-item{ width:36px; height:36px; cursor:pointer; transition:transform 0.2s ease,box-shadow 0.2s ease; position:relative; border-radius:0; flex-shrink:0;}
.color-picker-modal__spectrum-item:hover,.color-picker-modal__spectrum-item.is-selected{ transform:translateY(-3px) scale(1.08); box-shadow:0 4px 12px rgba(0,0,0,0.25); z-index:1;}
.color-picker-modal__spectrum-item.is-selected::after{ content:'\2713'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:14px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.color-picker-modal__color-group-name{ font-size:15px; font-weight:600; color:#333; margin-bottom:12px;}
.color-picker-modal__color-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:12px; width:100%;}
.color-picker-modal__color-card{ position:relative; padding-bottom:50%; cursor:pointer; border-radius:0; transition:transform 0.2s ease,box-shadow 0.2s ease;}
.color-picker-modal__color-card:hover{ transform:scale(1.03); box-shadow:0 3px 12px rgba(0,0,0,0.2); z-index:1;}
.color-picker-modal__color-card.is-selected{ outline:3px solid #3978C3; outline-offset:-3px;}
.color-picker-modal__color-card-name{ position:absolute; bottom:6px; left:8px; right:8px; font-size:10px; color:#555; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.color-picker-modal__color-card.is-dark .color-picker-modal__color-card-name{ color:rgba(255,255,255,0.7);}
.color-picker-modal__pagination{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin-top:16px; max-width:100%;}
.color-picker-modal__pagination-btn{ width:34px; height:34px; border:1px solid #e5e5e5; background:#fff; border-radius:5px; cursor:pointer; font-size:13px; color:#4d4d4d; transition:all 0.2s ease; flex-shrink:0;}
.color-picker-modal__pagination-btn:hover{ background-color:#f5f7fa; border-color:#c5d7ee; color:#3978C3;}
.color-picker-modal__pagination-btn.is-active{ background-color:#3978C3; border-color:#3978C3; color:#fff;}
.color-picker-modal__pagination-btn:disabled{ opacity:0.4; cursor:not-allowed;}
.color-tinting-selector__selected{ display:flex; align-items:center; gap:10px; padding:8px 14px; border:2px solid #3978C3; border-radius:25px; background-color:#f5f7fa; cursor:pointer;}
.color-tinting-selector__selected-preview{ width:24px; height:24px; border-radius:50%; border:2px solid #ccc;}
.color-tinting-selector__selected-name{ font-size:14px; font-weight:600; color:#333; font-family:'Courier New',Courier,monospace; text-transform:uppercase;}
.color-tinting-selector__selected-change{ margin-left:auto; color:#3978C3; font-size:12px; cursor:pointer; text-decoration:underline;}
.color-picker-modal__pagination-dots{ border:none; background:transparent; cursor:default; font-size:16px; letter-spacing:2px; color:#999;}
.color-tinting-selector__input{ display:none;}
/* ======================================== RESPONSIVE - Mobile ======================================== */@media (max-width:768px){  .color-picker-modal-overlay{ align-items:stretch; justify-content:stretch;}
  .color-picker-modal{ padding:16px 14px 12px; max-width:100%; width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border-radius:0; display:flex; flex-direction:column; overflow:hidden; box-shadow:none;}
  .color-picker-modal__close{ position:absolute; top:10px; right:10px; z-index:1001; width:34px; height:34px; font-size:20px; background:#fff; border:1px solid #e5e5e5; box-shadow:0 1px 4px rgba(0,0,0,0.1);}
  .color-picker-modal__title{ font-size:17px; margin-bottom:10px; padding-right:40px;}
  .color-picker-modal__search{ margin-bottom:10px;}
 .color-picker-modal__search-input{ padding:9px 12px; font-size:14px; border-radius:5px;}
  .color-picker-modal__content{ flex-direction:column; gap:0; flex:1; min-height:0; overflow:hidden;}
  .color-picker-modal__collections{ width:100%; flex-shrink:0; margin-bottom:10px;}
 .color-picker-modal__collections-label{ margin-bottom:6px; font-size:10px;}
 .color-picker-modal__collections-list{ flex-direction:row; flex-wrap:nowrap; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;}
 .color-picker-modal__collections-list::-webkit-scrollbar{ display:none;}
 .color-picker-modal__collection{ font-size:12px; white-space:nowrap; padding:5px 10px; border:1px solid #e5e5e5; border-radius:20px; flex-shrink:0; background:#fff;}
 .color-picker-modal__collection:hover{ background:#f5f7fa;}
 .color-picker-modal__collection.is-selected{ font-weight:700; color:#333; border-color:#333; background:#fff;}
  .color-picker-modal__colors{ flex:1; min-height:0; min-width:0; display:flex; flex-direction:column;}
  .color-picker-modal__colors-label{ display:none;}
  .color-picker-modal__spectrum-bar{ margin-bottom:10px; flex-shrink:0; gap:3px; overflow:visible; flex-wrap:wrap;}
 .color-picker-modal__spectrum-item{ width:26px; height:26px; border-radius:0;}
 .color-picker-modal__spectrum-item:hover, .color-picker-modal__spectrum-item.is-selected{ transform:translateY(-2px) scale(1.1);}
 .color-picker-modal__spectrum-item.is-selected::after{ font-size:11px;}
  .color-picker-modal__color-group-name{ font-size:14px; margin-bottom:8px; flex-shrink:0;}
  .color-picker-modal__color-grid{ grid-template-columns:repeat(2,1fr); gap:4px; margin-bottom:0; flex:0 0 auto; align-content:start;}
 .color-picker-modal__color-card{ padding-bottom:60%; border-radius:0;}
 .color-picker-modal__color-card-name{ font-size:9px; bottom:4px; left:5px; right:5px;}
  .color-picker-modal__pagination{ gap:5px; margin-top:12px; flex-shrink:0; padding-bottom:2px;}
 .color-picker-modal__pagination-btn{ width:34px; height:34px; font-size:13px; border-radius:5px;}
  .color-tinting-selector{ flex-direction:column; align-items:flex-start; gap:10px;}
 .color-tinting-selector__options{ flex-wrap:wrap; gap:10px; width:100%;}
 .color-tinting-selector__option{ padding:7px 12px; font-size:14px;}
 .color-tinting-selector__choose-btn{ padding:7px 12px; font-size:13px;}
}
@media (max-width:375px){ .color-picker-modal{ padding:12px 10px 10px;}
 .color-picker-modal__title{ font-size:16px; margin-bottom:8px;}
 .color-picker-modal__search{ margin-bottom:8px;}
 .color-picker-modal__search-input{ padding:8px 10px; font-size:13px;}
 .color-picker-modal__collections{ margin-bottom:8px;}
 .color-picker-modal__collection{ font-size:11px; padding:4px 8px;}
 .color-picker-modal__spectrum-item{ width:22px; height:22px;}
 .color-picker-modal__color-group-name{ font-size:13px; margin-bottom:6px;}
 .color-picker-modal__color-card-name{ font-size:8px;}
 .color-picker-modal__pagination-btn{ width:30px; height:30px; font-size:12px;}
}