/**
 * Plaza Cosmetics - madhesia / nuanca te kartat e produkteve
 * -----------------------------------------------------------
 * Vendi: catalog/view/javascript/plaza/plaza-opt.css
 * Shkon bashke me: plaza-opt.js
 * 12.11.2026
 */

/* ---- kutia e opsioneve ---- */
.product-thumb .plz-opt{display:flex;flex-direction:column;gap:7px;margin:10px 0 2px;text-align:left}
.product-thumb .plz-lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8f8f8f;line-height:1}

/* ---- butonat e madhesive / emrave ---- */
.product-thumb .plz-pills,.product-thumb .plz-sw{display:flex;gap:6px;align-items:center}
.product-thumb .plz-pill{-webkit-appearance:none;appearance:none;flex:0 0 auto;background:#fff;border:1px solid #dcdcdc;border-radius:999px;padding:5px 12px;font-size:12px;line-height:1.3;color:#222;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.product-thumb .plz-pill:hover{border-color:#999}
.product-thumb .plz-pill[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}

/* ---- rrathet e nuancave ---- */
.product-thumb .plz-dot{flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid #e3e3e3;background:#eee center/cover no-repeat;cursor:pointer;transition:box-shadow .15s}
.product-thumb .plz-dot:hover{box-shadow:0 0 0 2px #fff,0 0 0 3px #bbb}
.product-thumb .plz-dot[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3px #111}

/* ---- emri i nuances se zgjedhur ---- */
.product-thumb .plz-sel{font-size:12px;color:#333;min-height:16px;line-height:16px}
.product-thumb .plz-sel b{font-weight:600}

/* kur zgjidhet madhesia, etiketa "prej / from" nuk ka me kuptim */
.product-thumb.plz-chosen .product-labels-price{display:none}

/* ---- foto e kartes sipas opsionit: hover-i nuk e nderron ---- */
.product-thumb.plz-photo:hover .has-second-image img.img-first{visibility:visible}
.product-thumb.plz-photo:hover .has-second-image img.img-second{visibility:hidden;opacity:0}

/* ---- slideri ---- */
.product-thumb .plz-wrap{position:relative}
.product-thumb .plz-wrap .plz-pills,.product-thumb .plz-wrap .plz-sw{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:4px}
.product-thumb .plz-wrap .plz-pills::-webkit-scrollbar,.product-thumb .plz-wrap .plz-sw::-webkit-scrollbar{display:none}
.product-thumb .plz-wrap .plz-pill,.product-thumb .plz-wrap .plz-dot{scroll-snap-align:start}

/* shigjetat - si butonat e karuselave tona, vetem me te vogla */
.product-thumb .plz-arr{display:none;position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:1px solid #1c2021;border-radius:6px;background:#fff;cursor:pointer;z-index:2;align-items:center;justify-content:center;box-shadow:0 0 6px 5px rgba(255,255,255,.95);transition:background .15s}
.product-thumb .plz-arr.plz-l{left:0}
.product-thumb .plz-arr.plz-r{right:0}
.product-thumb .plz-wrap.plz-has-l .plz-arr.plz-l,.product-thumb .plz-wrap.plz-has-r .plz-arr.plz-r{display:flex}
.product-thumb .plz-arr span{display:block;line-height:0}
.product-thumb .plz-arr span::before{content:"\e93f";font-family:icomoon;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;speak:none;-webkit-font-smoothing:antialiased;font-size:9px;line-height:1;color:#1c2021;display:block}
.product-thumb .plz-arr.plz-l span::before{transform:scaleX(-1)}
.product-thumb .plz-arr:hover{background:#ddb3b1}

/* ---- nje madhesi e vetme: e zgjedhur, por me pamje te qete ---- */
.product-thumb .plz-single .plz-pill[aria-pressed="true"]{background:#fff;color:#111;border-color:#111;cursor:default}

/* ---- pa stok: duket, por nuk zgjidhet (si te faqja e produktit) ---- */
.product-thumb .plz-oos{position:relative;cursor:not-allowed}
.product-thumb .plz-dot.plz-oos{overflow:hidden;filter:grayscale(.45)}
.product-thumb .plz-dot.plz-oos:hover{box-shadow:none}
.product-thumb .plz-dot.plz-oos::before{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.55)}
.product-thumb .plz-dot.plz-oos::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - .8px),rgba(28,32,33,.8) calc(50% - .8px),rgba(28,32,33,.8) calc(50% + .8px),transparent calc(50% + .8px))}
.product-thumb .plz-pill.plz-oos{background:#faf9f8;border-color:rgba(28,32,33,.08);color:#9a9a9a;text-decoration:line-through;text-decoration-thickness:1px}
.product-thumb .plz-pill.plz-oos:hover{border-color:rgba(28,32,33,.08)}
.product-thumb .plz-sel.plz-sel-oos,.product-thumb .plz-lab.plz-lab-oos{color:#8a8a8a}
.product-thumb .plz-sel.plz-sel-oos b{font-weight:600;color:#555}

/* ---- telefon ---- */
@media (max-width:480px){
.product-thumb .plz-lab{font-size:10px}
.product-thumb .plz-pill{padding:4px 10px;font-size:11px}
.product-thumb .plz-sel{font-size:11px}
.product-thumb .plz-wrap .plz-pills,.product-thumb .plz-wrap .plz-sw{gap:5px}
.product-thumb .plz-dot{width:22px;height:22px}
.product-thumb .plz-arr{width:18px;height:18px;border-radius:5px}
.product-thumb .plz-arr span::before{font-size:8px}
}