.page-shell {
     
     max-width: 1400px;
     margin: auto;
     padding: 50px 0px 50px 0px;
 }

 .shop-layout {
     display: flex;
     align-items: flex-start;
 }

 /* ── SIDEBAR ── */
 .sidebar {
     width: 360px;
     min-width: 210px;
     background: #fff;
     padding: 18px 16px 0;
     border-right: 1px solid #e8e3db;
     position: sticky;
     top: 0;
     overflow-y: auto;
 }

 .sidebar-heading {
     font-size: 24px;
     font-weight: 700;
     color: #111;
     letter-spacing: .04em;
     margin-bottom: 14px;
 }

 /* Price */
 .price-section {
     margin-bottom: 4px;
 }

 .price-label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;
 }

 .price-label {
     font-size: 18px;
     font-weight: 700;
     color: #111;
     letter-spacing: .05em;
     text-transform: uppercase;
 }

 .slider-wrap {
     position: relative;
     height: 20px;
     display: flex;
     align-items: center;
     margin-bottom: 8px;
 }

 .slider-track {
     position: absolute;
     left: 0;
     right: 0;
     height: 3px;
     border-radius: 2px;
     background: #ddd;
 }

 .slider-fill {
     position: absolute;
     height: 3px;
     border-radius: 2px;
     background: #7b3fa0;
 }

 .slider-wrap input[type=range] {
     position: absolute;
     width: 100%;
     -webkit-appearance: none;
     background: transparent;
     height: 3px;
     pointer-events: none;
     z-index: 2;
 }

 .slider-wrap input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: #7b3fa0;
     border: 2px solid #fff;
     box-shadow: 0 1px 5px rgba(123, 63, 160, .45);
     pointer-events: all;
     cursor: pointer;
 }

 .price-inputs-row {
     display: flex;
     gap: 6px;
     align-items: center;
     margin-bottom: 14px;
 }

 .price-box {
     border: 1px solid #ddd;
     border-radius: 5px;
     padding: 4px 7px;
     font-size: 16px;
     width: 100px;
     color: #111;
     
 }

 .price-box:focus {
     outline: none;
     border-color: #7b3fa0;
 }

 /* Accordion filter sections */
 .filter-section {
     border-top: 1px solid #ece8e1;
 }

 .filter-toggle {
     width: 100%;
     background: none;
     border: none;
     padding: 10px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 18px;
     font-weight: 700;
     color: #111;
     letter-spacing: .05em;
     text-transform: uppercase;
     cursor: pointer;
 }

 .filter-toggle .chev {
     font-size: 9px;
     color: #aaa;
     transition: transform .22s;
 }

 .filter-toggle.open .chev {
     transform: rotate(180deg);
     color: #7b3fa0;
 }

 .filter-body {
     max-height: 0;
     overflow: hidden;
     transition: max-height .28s ease, padding-bottom .2s;
 }

 .filter-body.open {
     max-height: 350px;
     padding-bottom: 10px;
 }

 /* Checkboxes */
 .fck {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 7px;
 }

 .fck-l {
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .fck input[type=checkbox] {
     accent-color: #7b3fa0;
     width: 12px;
     height: 12px;
     cursor: pointer;
     flex-shrink: 0;
 }

 .fck-lbl {
     font-size: 16px;
     color: #444;
     cursor: pointer;
     line-height: 1.2;
 }

 .fck-cnt {
     font-size: 10.5px;
     color: #bbb;
 }

 /* Color swatches */
 .color-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     padding: 10px;
 }

 .csw {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid transparent;
     outline: 2px solid transparent;
     outline-offset: 2px;
     transition: outline-color .15s, transform .12s;
     flex-shrink: 0;
 }

 .csw:hover {
     transform: scale(1.15);
 }

 .csw.on {
     outline-color: #7b3fa0;
 }

 .color-hint {
     font-size: 16px;
     color: #aaa;
     margin-top: 5px;
 }

 /* Flash banner */
 .flash-banner {
     margin: 16px -16px 0;
     background: #18100a;
     position: relative;
     overflow: hidden;
 }

 .flash-banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .4;
     display: block;
 }

 .flash-ov {
     position: absolute;
     inset: 0;
     padding: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .flash-tag {
     font-size: 84px;
     text-align: center;
     font-weight: 800;
     color: #fff;
     line-height: 1.15;
 }

 .flash-pct {
     font-size: 26px;
     font-weight: 900;
     color: #f0c070;
 }

 .btn-explore {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     background: #002AC4;
     color: #fff;
     border: none;
     border-radius: 40px;
     font-size: 14px;
     font-weight: 600;
     padding: 10px 18px;
     margin-top: auto;
     text-decoration: none;
     cursor: pointer;
 }

 .btn-explore:hover {
     background: #002AC4;
     color: #fff;
 }

 /* ── MAIN ── */
 .main-content {
     flex: 1;
     padding: 18px 16px 32px;
     min-width: 0;
 }

 /* Toolbar */
 .toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
     gap: 8px;
     flex-wrap: wrap;
 }

 .toolbar-title {
     font-size: 24px;
     font-weight: 700;
     color: #111;
 }

 .toolbar-right {
     display: flex;
     align-items: center;
     gap: 7px;
 }

 /* Sort */
 .sort-wrap {
     position: relative;
 }

 .sort-btn {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 7px;
     font-size: 16px;
     font-weight: 500;
     color: #333;
     padding: 6px 11px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     
 }

 .sort-btn i {
     font-size: 10px;
     color: #999;
 }

 .sort-menu {
     position: absolute;
     top: calc(100% + 5px);
     right: 0;
     background: #fff;
     border: 1px solid #e8e3db;
     border-radius: 10px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
     min-width: 170px;
     z-index: 600;
     display: none;
     overflow: hidden;
 }

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

 .s-opt {
     padding: 9px 14px;
     font-size: 16px;
     color: #444;
     cursor: pointer;
     transition: background .13s;
     
 }

 .s-opt:hover {
     background: #f5eeff;
     color: #7b3fa0;
 }

 .s-opt.on {
     background: #f5eeff;
     color: #7b3fa0;
     font-weight: 600;
 }

 /* View btns */
 .vbtn {
     width: 30px;
     height: 30px;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: #bbb;
     cursor: pointer;
     transition: all .15s;
 }

 .vbtn.on {
     background: #7b3fa0;
     color: #fff;
     border-color: #7b3fa0;
 }

 .vbtn:hover:not(.on) {
     border-color: #ccc;
     color: #555;
 }

 /* ── Product Grid ── */
 .prod-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 13px;
 }

 .prod-grid.lv {
     grid-template-columns: 1fr 1fr;
 }

 /* Card */
 .pc {
     background: #fff;
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid #e8e3db;
     display: flex;
     flex-direction: column;
     transition: box-shadow .22s, transform .22s;
 }

 .pc:hover {
     box-shadow: 0 8px 28px rgba(123, 63, 160, .13);
     transform: translateY(-3px);
 }

 .pc.hide {
     display: none !important;
 }

.pc-img {
     background: #f2ece4;
     position: relative;
     overflow: hidden;
     aspect-ratio: 1 / 1;
 }

 .pc-img>a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     padding: 18px;
 }

 .pc-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
     transition: transform .3s;
 }

 .pc:hover .pc-img img {
     transform: scale(1.06);
 }

 .pc-badge {
     position: absolute;
     top: 8px;
     left: 8px;
     background: #f0c070;
     color: #111;
     font-size: 8.5px;
     font-weight: 800;
     letter-spacing: .07em;
     text-transform: uppercase;
     padding: 2px 8px;
     border-radius: 20px;
 }

 .pc-wish {
     position: absolute;
     top: 8px;
     right: 8px;
     background: rgba(255, 255, 255, .95);
     border: none;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     color: #ccc;
     cursor: pointer;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
     transition: color .15s;
 }

 .pc-wish:hover,
 .pc-wish.on {
     color: #e74c6f;
 }

 .pc-body {
     padding: 10px 11px 12px;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .pc-brand {
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: .1em;
     color: #ccc;
     margin-bottom: 2px;
 }

 .pc-name {
     font-size: 16px;
     font-weight: 600;
     color: #111;
     margin-bottom: 5px;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
     min-height: calc(1.3em * 2);
 }

 .pc-price {
     font-size: 14px;
     font-weight: 700;
     color: #111;
     margin-top: auto;
 }

 .pc-price .old {
     font-size: 10.5px;
     font-weight: 400;
     color: #ccc;
     text-decoration: line-through;
     margin-left: 4px;
 }

 .pc-acts {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 9px;
 }

 .pc-acts form {
     margin: 0;
     flex: 0 0 auto;
     line-height: 0;
 }

 .pc-acts form:first-child {
     flex: 1 1 124px;
     min-width: 104px;
     max-width: 124px;
 }

 .btn-buy:hover {
     background: #002AC4;
     transform: scale(1.04);
 }

 .btn-buy {
     flex: 1;
     background: #002AC4;
     color: #fff;
     border: none;
     border-radius: 40px;
     font-size: 9.91px;
     font-weight: 500;
     letter-spacing: .04em;
     text-transform: uppercase;
     padding: 7px 0;
     cursor: pointer;
     width: 100%;
     height: 43.88px;
     transition: background .15s;
     
 }



 .btn-ic {
     color: #000;
     border: 1px solid #000;
     border-radius: 50%;
     width: 33px;
     height: 33px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     cursor: pointer;
     transition: background .15s;
 }

 .btn-ic:hover {
     background: #e4d0ff;
 }

 /* List view */
 .prod-grid.lv .pc {
     flex-direction: row;
 }

 .prod-grid.lv .pc-img img {
     width: 100%;
     height: 100%;
 }

 .prod-grid.lv .pc-img {
     flex-shrink: 0;
     width: min(230px, 38%);
 }

 .prod-grid.lv .pc-body {
     justify-content: center;
 }

 /* No results */
 .no-res {
     grid-column: 1/-1;
     text-align: center;
     padding: 50px 20px;
     color: #bbb;
     font-size: 13px;
     display: none;
 }

 .no-res.show {
     display: block;
 }

 /* ── Pagination ── */
 .pag {
     display: flex;
     justify-content: center;
     gap: 5px;
     margin-top: 26px;
 }

 .pg-btn {
     width: 32px;
     height: 32px;
     border-radius: 7px;
     border: 1px solid #ddd;
     background: #fff;
     color: #555;
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .15s;
     
 }

 .pg-btn:hover:not(:disabled):not(.on) {
     border-color: #7b3fa0;
     color: #7b3fa0;
 }

 .pg-btn.on {
     background: #7b3fa0;
     color: #fff;
     border-color: #7b3fa0;
 }

 .pg-btn:disabled {
     opacity: .35;
     cursor: default;
 }

 /* ── Mobile ── */
 .mob-bar {
     display: none;
     padding: 9px 14px;
     background: #fff;
     border-bottom: 1px solid #e8e3db;
     gap: 8px;
     align-items: center;
 }

 .mob-filter-btn {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 7px;
     font-size: 12px;
     padding: 6px 12px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 5px;
     
 }

 .oc-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .38);
     z-index: 1040;
     display: none;
 }

 .oc-overlay.open {
     display: block;
 }

 .oc-panel {
     position: fixed;
     top: 0;
     left: -265px;
     width: 255px;
     height: 100vh;
     background: #fff;
     z-index: 1050;
     overflow-y: auto;
     transition: left .26s ease;
     padding: 16px;
 }

 .oc-panel.open {
     left: 0;
 }

 .oc-close {
     background: none;
     border: none;
     font-size: 17px;
     cursor: pointer;
     color: #333;
     float: right;
 }

 @media (max-width: 900px) {
     .sidebar {
         display: none;
     }

     .mob-bar {
         display: flex;
     }

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

 @media (max-width: 500px) {
     .prod-grid {
         grid-template-columns:  1fr;
         gap: 9px;
     }

     .pc-img {
         aspect-ratio: 4 / 5;
     }

     .main-content {
         padding: 12px 10px 28px;
     }
 }


 /* ============================ End ============================ */



 .page-wrap {
     
     background: #f5f0eb;
     color: #1a1a1a;
     min-height: 100vh;
 }

 /* ===== PRODUCT SECTION ===== */
 .product-section {
     max-width: 1400px;
     margin: 0 auto;
     padding: 32px 20px;
     display: grid;
     grid-template-columns: 80px 1fr 1fr;
     gap: 20px;
     align-items: start;
 }

 /* Thumbnails */
 .thumb-col {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .thumb {
     width: 70px;
     height: 70px;
     border-radius: 8px;
     background: #e8dfd6;
     border: 2px solid transparent;
     cursor: pointer;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: border-color .2s, transform .15s;
     flex-shrink: 0;
 }

 .thumb:hover {
     transform: scale(1.06);
     border-color: #c9a97a;
 }

 .thumb.active {
     border-color: #8b5e3c;
     box-shadow: 0 0 0 1px #8b5e3c;
 }

 .thumb svg {
     width: 100%;
     height: 100%;
 }

 /* Main image */
 .main-img-col {
     border-radius: 14px;
     background: #ede5da;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 360px;
     overflow: hidden;
     position: relative;
     cursor: zoom-in;
     user-select: none;
 }

 .main-img-col:hover .zoom-hint {
     opacity: 1;
 }

 .zoom-hint {
     position: absolute;
     bottom: 12px;
     right: 12px;
     background: rgba(0, 0, 0, .42);
     color: #fff;
     font-size: 11px;
     padding: 4px 10px;
     border-radius: 20px;
     opacity: 0;
     transition: opacity .2s;
     pointer-events: none;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .main-svg-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 24px;
     transition: opacity .22s ease, transform .22s ease;
 }

 .main-svg-wrap.fade-out {
     opacity: 0;
     transform: scale(.94) translateY(6px);
 }

 .main-svg-wrap svg {
     width: 100%;
     max-width: 280px;
     height: auto;
 }

 /* Lightbox */
 .lightbox {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(10, 5, 20, .82);
     z-index: 9999;
     align-items: center;
     justify-content: center;
 }

 .lightbox.open {
     display: flex;
     animation: lbFade .2s ease;
 }

 @keyframes lbFade {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .lb-inner {
     background: #ede5da;
     border-radius: 20px;
     padding: 40px;
     position: relative;
     width: min(520px, 90vw);
     display: flex;
     align-items: center;
     justify-content: center;
     animation: lbPop .22s ease;
 }

 @keyframes lbPop {
     from {
         transform: scale(.86);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 #lbSvg svg {
     width: 100%;
     max-width: 380px;
     height: auto;
 }

 .lb-close {
     position: absolute;
     top: 14px;
     right: 16px;
     background: rgba(0, 0, 0, .22);
     border: none;
     color: #fff;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .15s;
     line-height: 1;
 }

 .lb-close:hover {
     background: rgba(0, 0, 0, .5);
 }

 .lb-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, .9);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     font-size: 22px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
     transition: background .15s, transform .15s;
     line-height: 1;
 }

 .lb-nav:hover {
     background: #fff;
     transform: translateY(-50%) scale(1.08);
 }

 .lb-prev {
     left: -56px;
 }

 .lb-next {
     right: -56px;
 }

 .lb-dots {
     position: absolute;
     bottom: -36px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 7px;
 }

 .lb-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .35);
     cursor: pointer;
     transition: background .2s, transform .2s;
     border: none;
 }

 .lb-dot.active {
     background: #fff;
     transform: scale(1.3);
 }

 /* Product info */
 .product-info {
     padding: 0 8px;
 }

 .product-title {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .stars {
     color: #f5a623;
     font-size: 17px;
     margin-bottom: 12px;
     letter-spacing: 2px;
 }

 .price-row {
     display: flex;
     align-items: baseline;
     gap: 10px;
     margin-bottom: 4px;
 }

 .price-main {
     font-size: 24px;
     font-weight: 700;
 }

 .price-old {
     font-size: 14px;
     color: #999;
     text-decoration: line-through;
 }

 .free-ship {
     font-size: 12px;
     color: #555;
     margin-bottom: 18px;
 }

 .options-row {
     display: flex;
     gap: 24px;
     margin-bottom: 18px;
     align-items: flex-end;
     flex-wrap: wrap;
 }

 .option-group label {
     display: block;
     font-size: 11px;
     font-weight: 600;
     color: #777;
     text-transform: uppercase;
     letter-spacing: .8px;
     margin-bottom: 6px;
 }

 .qty-ctrl {
     display: flex;
     align-items: center;
     border: 1.5px solid #ccc;
     border-radius: 6px;
     overflow: hidden;
     width: fit-content;
 }

 .qty-btn {
     background: none;
     border: none;
     width: 32px;
     height: 34px;
     font-size: 18px;
     cursor: pointer;
     color: #444;
     transition: background .15s;
 }

 .qty-btn:hover {
     background: #eee;
 }

 .qty-val {
     width: 36px;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
     border-left: 1.5px solid #ccc;
     border-right: 1.5px solid #ccc;
     height: 34px;
     line-height: 34px;
 }

 .size-btns {
     display: flex;
     gap: 6px;
 }

 .size-btn {
     width: 36px;
     height: 34px;
     border: 1.5px solid #ccc;
     border-radius: 6px;
     background: #fff;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: all .15s;
 }

 .size-btn.active,
 .size-btn:hover {
     border-color: #1a1a1a;
     background: #1a1a1a;
     color: #fff;
 }

 .color-swatches {
     display: flex;
     gap: 8px;
 }

 .swatch {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid transparent;
     transition: border-color .15s, transform .15s;
 }

 .swatch:hover {
     transform: scale(1.15);
 }

 .swatch.active {
     border-color: #333;
 }

 .swatch-beige {
     background: #c9a97a;
 }

 .swatch-brown {
     background: #6b3a2a;
 }

 .swatch-red {
     background: #c0392b;
 }

 .cta-group {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 6px;
 }





 .btn-outline {
     background: #fff;
     color: #1a1a1a;
     border: 1.5px solid #ccc;
     border-radius: 8px;
     padding: 12px 20px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     width: 100%;
     
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: border-color .2s;
 }

 .btn-outline:hover {
     border-color: #888;
 }

 /* Tabs */
 .tabs-section {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px 32px;
 }

 .tabs-nav {
     display: flex;
     border-bottom: 1.5px solid #ddd;
     overflow-x: auto;
 }

 .tab-btn {
     background: none;
     border: none;
     padding: 12px 20px;
     font-size: 13px;
     font-weight: 500;
     color: #777;
     cursor: pointer;
     white-space: nowrap;
     border-bottom: 2px solid transparent;
     margin-bottom: -1.5px;
     transition: all .2s;
     
 }

 .tab-btn.active {
     color: #1a1a1a;
     border-bottom-color: #1a1a1a;
     font-weight: 700;
 }

 .tab-content {
     padding: 20px 0;
     font-size: 13px;
     color: #555;
     line-height: 1.8;
 }

 .tab-pane {
     display: none;
 }

 .tab-pane.active {
     display: block;
 }

 /* Similar */
 .similar-section {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px 48px;
 }

 .similar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 18px;
 }

 .similar-title {
     font-size: 17px;
     font-weight: 700;
 }

 /* Sort dropdown */
 .sort-wrap {
     position: relative;
 }

 .sort-btn {
     background: #fff;
     border: 1.5px solid #ccc;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     
     color: #1a1a1a;
     transition: border-color .2s, box-shadow .2s;
     user-select: none;
     white-space: nowrap;
 }

 .sort-btn:hover {
     border-color: #888;
 }

 .sort-btn.open {
     border-color: #4a2d82;
     box-shadow: 0 0 0 2px rgba(74, 45, 130, .15);
 }

 .sort-arrow {
     transition: transform .2s;
     font-size: 10px;
     color: #777;
 }

 .sort-btn.open .sort-arrow {
     transform: rotate(180deg);
 }

 .sort-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     background: #fff;
     border: 1.5px solid #ddd;
     border-radius: 10px;
     min-width: 200px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
     z-index: 100;
     overflow: hidden;
 }

 .sort-dropdown.open {
     display: block;
     animation: dropFade .15s ease;
 }

 @keyframes dropFade {
     from {
         opacity: 0;
         transform: translateY(-6px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .sort-option {
     padding: 11px 16px;
     font-size: 13px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: background .12s;
     color: #333;
 }

 .sort-option:hover {
     background: #f5f0eb;
 }

 .sort-option.selected {
     color: #4a2d82;
     font-weight: 600;
 }

 .sort-option.selected::after {
     content: "✓";
     font-size: 12px;
     color: #4a2d82;
 }

 .sort-divider {
     height: 1px;
     background: #eee;
     margin: 0 12px;
 }

 /* Product grid */
 .products-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
 }

 .product-card {
     background: #fff;
     border-radius: 12px;
     overflow: hidden;
     transition: transform .2s, box-shadow .2s;
     cursor: pointer;
 }

 .product-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
 }

 .card-img-wrap {
     background: #f0e8df;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 260px;
 }

 .card-body {
     padding: 10px 12px 12px;
 }

  

 .card-actions {
     display: flex;
     gap: 8px;
     align-items: center;
 }

 .card-buy {
     flex: 1;
     background: #4a2d82;
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 7px 10px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     
     transition: background .2s;
 }

 .card-buy:hover {
     background: #3a2068;
 }

 .card-icon-btn {
     width: 30px;
     height: 30px;
     border: 1.5px solid #ddd;
     border-radius: 6px;
     background: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     transition: border-color .2s;
 }

 .card-icon-btn:hover {
     border-color: #888;
 }

 /* Responsive */
 @media (max-width: 900px) {
     .product-section {
         grid-template-columns: 70px 1fr 1fr;
         gap: 14px;
     }

     .products-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 700px) {
     .product-section {
         grid-template-columns: 1fr;
         grid-template-areas: "thumbs" "main" "info";
     }

     .thumb-col {
         grid-area: thumbs;
         flex-direction: row;
         flex-wrap: wrap;
     }

     .main-img-col {
         grid-area: main;
     }

     .product-info {
         grid-area: info;
     }

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

     .product-title {
         font-size: 18px;
     }

     .lb-prev {
         left: 6px;
     }

     .lb-next {
         right: 6px;
     }

     .lb-inner {
         padding: 28px 52px;
     }
 }

 @media (max-width: 480px) {
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .thumb {
         width: 56px;
         height: 56px;
     }

     .options-row {
         gap: 16px;
     }

     .tab-btn {
         padding: 10px 14px;
         font-size: 12px;
     }
 }