관리-도구

편집 파일: slns-pillar-pages.css

/* ═══════════════════════════════════════════════════════════════
   SLNS SAREES — PILLAR PAGES · "VELVET COURT" EDITION
   Shop listing (/products) + Product details ONLY.
   Standalone file — load AFTER luxury-theme.css. It overrides the
   earlier plain treatment with a full themed background:
   deep violet silk canvas · floating porcelain panels · gold
   framing · ghost typography · animated throughout.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --p-plum:     #241028;
  --p-aubergine:#331640;
  --p-royal:    #4E2160;
  --p-orchid:   #7A3E96;
  --p-mauve:    #B583C9;
  --p-lilac:    #E9D9F0;
  --p-gold:     #C6A15B;
  --p-gold-hi:  #E3C88A;
  --p-gold-ln:  rgba(198,161,91,0.4);
  --p-porcelain:#FBF9FC;
  --p-blush:    #F4EDF7;
  --p-veil:     #E7DAEE;
  --p-ink-veil: rgba(36,16,40,0.55);
  --pf-d: 'Cormorant Garamond', Georgia, serif;
  --pf-b: 'Outfit', system-ui, sans-serif;
  --pe: cubic-bezier(0.19, 1, 0.22, 1);
  --p-motif: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45 12c4.5 11 12 18.5 23 23-11 4.5-18.5 12-23 23-4.5-11-12-18.5-23-23 11-4.5 18.5-12 23-23z' fill='%23C6A15B' fill-opacity='0.06'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════
   0 · PAGE-SCOPING
   6Valley marks both pages with recognisable roots:
   listing  → .SearchParameters exists on the page
   details  → .cz-product-gallery / .product-details-shipping-details
   JS (below file) adds body.slns-shop / body.slns-pdp for clean
   scoping; every rule here hangs off those body classes.
   ════════════════════════════════════════════════════════════ */

/* ── THE THEMED BACKGROUND — deep violet silk canvas ───────── */
body.slns-shop.luxury-theme,
body.slns-pdp.luxury-theme {
  background:
    radial-gradient(ellipse 85% 55% at 12% -5%, rgba(198,161,91,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 92% 20%, rgba(122,62,150,0.22), transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(122,33,64,0.18), transparent 60%),
    linear-gradient(170deg, var(--p-aubergine) 0%, var(--p-plum) 55%, #170A1C 100%) !important;
  background-attachment: fixed !important;
  position: relative;
}
/* damask motif layer over the whole canvas */
body.slns-shop.luxury-theme::before,
body.slns-pdp.luxury-theme::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: var(--p-motif);
  pointer-events: none;
}
/* ghost watermark word floating behind the content */
body.slns-shop.luxury-theme::after {
  content: 'Collection';
  position: fixed; top: 42%; left: 50%; z-index: 0;
  transform: translate(-50%, -50%);
  font-family: var(--pf-d); font-style: italic; font-weight: 500;
  font-size: clamp(120px, 20vw, 320px);
  color: transparent; -webkit-text-stroke: 1px rgba(198,161,91,0.07);
  white-space: nowrap; pointer-events: none; user-select: none;
}
body.slns-pdp.luxury-theme::after {
  content: 'Atelier';
  position: fixed; top: 45%; left: 50%; z-index: 0;
  transform: translate(-50%, -50%);
  font-family: var(--pf-d); font-style: italic; font-weight: 500;
  font-size: clamp(140px, 22vw, 360px);
  color: transparent; -webkit-text-stroke: 1px rgba(198,161,91,0.07);
  white-space: nowrap; pointer-events: none; user-select: none;
}
body.slns-shop .container, body.slns-pdp .container { position: relative; z-index: 1; }

/* page entrance */
@keyframes pIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════
   A · SHOP LISTING — floating porcelain islands on violet silk
   ════════════════════════════════════════════════════════════ */

/* A1 · Toolbar — frosted glass panel with gold crown line */
body.slns-shop .py-3.mb-2.mb-md-4.rtl.__inline-35,
body.slns-shop .search-page-header {
  background: rgba(251,249,252,0.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(198,161,91,0.25) !important;
  border-top: 2px solid var(--p-gold) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 70px rgba(11,5,14,0.45) !important;
  padding: 28px 30px !important;
  animation: pIn .8s var(--pe) both;
}
body.slns-shop .search-page-header .font-semibold.mb-0,
body.slns-shop .widget-title.font-bold {
  font-family: var(--pf-d) !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 500 !important; letter-spacing: -0.01em !important;
  color: var(--p-porcelain) !important;
}
body.slns-shop .view-page-item-count {
  font-family: var(--pf-b) !important; font-size: 10.5px !important;
  font-weight: 700 !important; letter-spacing: 0.24em !important;
  text-transform: uppercase !important; color: var(--p-gold-hi) !important;
}
/* toolbar search — dark glass, gold key */
body.slns-shop .search-page-button-input {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 13px !important; font-weight: 300 !important;
  color: #fff !important; padding: 13px 20px !important;
  box-shadow: none !important; transition: all .35s var(--pe) !important;
}
body.slns-shop .search-page-button-input::placeholder { color: rgba(233,217,240,0.45) !important; font-style: italic; }
body.slns-shop .search-page-button-input:focus { background: rgba(255,255,255,0.12) !important; border-color: var(--p-gold) !important; }
body.slns-shop .search-page-button .input-group-text {
  background: var(--p-gold) !important; border: none !important; border-radius: 0 !important;
  transition: filter .3s !important;
}
body.slns-shop .search-page-button .czi-search { color: var(--p-plum) !important; }
body.slns-shop .search-page-button:hover .input-group-text { filter: brightness(1.12); }
/* sort/filter — light hairline selects on dark glass */
body.slns-shop .sorting-item { color: var(--p-lilac) !important; font-family: var(--pf-b) !important; }
body.slns-shop .for-sorting, body.slns-shop select.form-control {
  background-color: transparent !important; border: none !important;
  border-bottom: 1px solid rgba(198,161,91,0.4) !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 12.5px !important;
  color: var(--p-lilac) !important; box-shadow: none !important; cursor: pointer;
}
body.slns-shop .for-sorting option, body.slns-shop select.form-control option { color: var(--p-plum); background: #fff; }
body.slns-shop .fi-sr-bars-filter { color: var(--p-gold) !important; }

/* A2 · FILTER SIDEBAR — porcelain island, gold spine */
body.slns-shop .cz-sidebar.__inline-35,
body.slns-shop .__search-sidebar .cz-sidebar {
  background: var(--p-porcelain) !important;
  border: none !important;
  border-left: 3px solid var(--p-gold) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 80px rgba(11,5,14,0.5) !important;
  animation: pIn .8s var(--pe) .12s both;
}
body.slns-shop .cz-sidebar .fs-16.font-weight-bold,
body.slns-shop .cz-sidebar-header h6, body.slns-shop .cz-sidebar h5 {
  font-family: var(--pf-d) !important; font-size: 1.5rem !important;
  font-weight: 500 !important; color: var(--p-plum) !important;
  position: relative; padding-bottom: 12px;
}
body.slns-shop .cz-sidebar .fs-16.font-weight-bold::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 40px; height: 1px; background: var(--p-gold);
}
body.slns-shop .cz-sidebar [data-toggle="collapse"],
body.slns-shop .cz-sidebar h6 {
  font-family: var(--pf-b) !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.26em !important;
  text-transform: uppercase !important; color: var(--p-orchid) !important;
}
body.slns-shop .cz-sidebar a, body.slns-shop .cz-sidebar label {
  font-family: var(--pf-b) !important; font-size: 13px !important;
  color: var(--p-royal) !important;
  transition: color .2s, padding-left .25s var(--pe) !important;
}
body.slns-shop .cz-sidebar a:hover { color: var(--p-orchid) !important; padding-left: 6px !important; text-decoration: none !important; }
body.slns-shop .cz-sidebar img { border-radius: 50% !important; border: 1px solid var(--p-veil); }
body.slns-shop .cz-sidebar input[type="number"], body.slns-shop .cz-sidebar input[type="text"] {
  background: var(--p-blush) !important; border: 1px solid var(--p-veil) !important;
  border-radius: 0 !important; font-family: var(--pf-b) !important;
  color: var(--p-plum) !important; transition: border-color .25s !important;
}
body.slns-shop .cz-sidebar input:focus { border-color: var(--p-orchid) !important; box-shadow: none !important; }
body.slns-shop .cz-sidebar input[type="range"],
body.slns-shop .cz-sidebar input[type="checkbox"],
body.slns-shop .cz-sidebar input[type="radio"] { accent-color: var(--p-orchid) !important; }
body.slns-shop .cz-sidebar .btn, body.slns-shop .cz-sidebar button[type="submit"] {
  background: var(--p-royal) !important; border: none !important; border-radius: 0 !important;
  transition: background .25s, transform .25s !important;
}
body.slns-shop .cz-sidebar .btn:hover { background: var(--p-orchid) !important; transform: translateY(-1px); }
body.slns-shop .shop-sidebar-scroll::-webkit-scrollbar { width: 3px; }
body.slns-shop .shop-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--p-gold); }

/* A3 · PRODUCT CARDS — luminous plates on the dark silk */
body.slns-shop .product-with-bg { padding: 12px !important; }
body.slns-shop .product-single-hover.style--card {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  transition: transform .5s var(--pe) !important;
}
body.slns-shop .product-single-hover.style--card:hover { transform: translateY(-8px) !important; }
/* image frame — porcelain plate with double gold framing */
body.slns-shop .product-single-hover .overflow-hidden.position-relative {
  aspect-ratio: 3/4 !important;
  background: var(--p-veil) !important;
  position: relative !important;
  outline: 1px solid rgba(198,161,91,0.35);
  outline-offset: 5px;
  transition: outline-color .4s, outline-offset .4s, box-shadow .5s !important;
  box-shadow: 0 22px 60px rgba(11,5,14,0.45);
}
body.slns-shop .product-single-hover:hover .overflow-hidden.position-relative {
  outline-color: var(--p-gold);
  outline-offset: 9px;
  box-shadow: 0 34px 90px rgba(11,5,14,0.6), 0 0 60px rgba(198,161,91,0.14);
}
body.slns-shop .product-single-hover .overflow-hidden img,
body.slns-shop .product-single-hover .inline_product img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  transition: transform 1.1s var(--pe), filter .5s !important;
}
body.slns-shop .product-single-hover:hover .overflow-hidden img {
  transform: scale(1.07) !important; filter: brightness(0.94) saturate(1.05);
}
/* quick view → gold pill rising */
body.slns-shop .product-single-hover .quick-view,
body.slns-shop .product-single-hover .quick-view-tag {
  position: absolute !important; left: 50% !important; bottom: 20px !important;
  top: auto !important; right: auto !important;
  transform: translate(-50%, 14px) !important; opacity: 0 !important;
  z-index: 5 !important; transition: all .45s var(--pe) !important;
}
body.slns-shop .product-single-hover:hover .quick-view,
body.slns-shop .product-single-hover:hover .quick-view-tag {
  opacity: 1 !important; transform: translate(-50%, 0) !important;
}
body.slns-shop .product-single-hover .btn-circle {
  background: var(--p-porcelain) !important; border: none !important;
  border-radius: 0 !important; width: auto !important; height: auto !important;
  padding: 11px 24px !important;
  font-family: var(--pf-b) !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.2em !important;
  color: var(--p-plum) !important;
  transition: background .25s !important;
}
body.slns-shop .product-single-hover .btn-circle:hover { background: var(--p-gold) !important; }
body.slns-shop .product-single-hover .czi-eye::after {
  content: '  QUICK VIEW'; font-family: var(--pf-b); font-size: 10px; letter-spacing: .18em;
}
/* meta — light text on the violet canvas */
body.slns-shop .single-product-details { padding: 18px 4px 4px !important; background: transparent !important; }
body.slns-shop .single-product-details a,
body.slns-shop .single-product-details .text-center.mb-1 {
  font-family: var(--pf-b) !important; font-size: 13px !important;
  font-weight: 400 !important; text-transform: none !important;
  color: var(--p-lilac) !important; transition: color .25s !important;
}
body.slns-shop .product-single-hover:hover .single-product-details a { color: var(--p-gold-hi) !important; }
body.slns-shop .product-price .text-accent {
  font-family: var(--pf-d) !important; font-size: 1.3rem !important;
  font-weight: 500 !important; color: var(--p-porcelain) !important;
}
body.slns-shop .product-price .category-single-product-price {
  font-family: var(--pf-b) !important; font-size: 11.5px !important;
  font-weight: 300 !important; color: rgba(233,217,240,0.45) !important;
}
body.slns-shop .for-discount-value {
  background: var(--p-gold) !important; color: var(--p-plum) !important;
  font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .14em !important;
}
body.slns-shop .out_fo_stock {
  background: rgba(11,5,14,0.6) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--p-lilac) !important;
  font-family: var(--pf-b) !important; font-size: 9px !important;
  font-weight: 700 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important;
}
/* stars */
body.slns-shop .product-single-hover .tio-star { color: var(--p-gold) !important; }
body.slns-shop .product-single-hover .tio-star-outlined { color: rgba(233,217,240,0.2) !important; }

/* A4 · Pagination — gold steppers on silk */
body.slns-shop .pagination .page-link {
  background: transparent !important;
  border: 1px solid rgba(198,161,91,0.35) !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; color: var(--p-lilac) !important;
  margin: 0 4px !important; transition: all .3s var(--pe) !important;
}
body.slns-shop .pagination .page-item.active .page-link,
body.slns-shop .pagination .page-link:hover {
  background: var(--p-gold) !important; border-color: var(--p-gold) !important;
  color: var(--p-plum) !important; transform: translateY(-2px);
}

/* A5 · scroll-in reveal (JS adds .cxr-in) */
body.slns-shop .product-with-bg {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--pe), transform 1s var(--pe);
}
body.slns-shop .product-with-bg.cxr-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   B · PRODUCT DETAILS — the atelier viewing room
   ════════════════════════════════════════════════════════════ */

/* B1 · Main panels — porcelain islands floating on silk */
body.slns-pdp .container .card:not(.search-card),
body.slns-pdp .product-details-shipping-details {
  background: var(--p-porcelain) !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: 0 34px 90px rgba(11,5,14,0.5) !important;
  animation: pIn .8s var(--pe) both;
}
body.slns-pdp .container > .card:nth-of-type(2),
body.slns-pdp .container .card ~ .card { animation-delay: .12s; }

/* B2 · Gallery — museum mount */
body.slns-pdp .cz-product-gallery, body.slns-pdp [class*="product-gallery"] {
  background: linear-gradient(150deg, var(--p-blush), #fff) !important;
  padding: 14px !important;
  outline: 1px solid rgba(198,161,91,0.4);
  outline-offset: -8px;
}
body.slns-pdp .cz-product-gallery img { transition: transform .9s var(--pe) !important; }
body.slns-pdp .cz-product-gallery:hover img { transform: scale(1.025); }
body.slns-pdp .cz-thumblist a, body.slns-pdp .focus-preview-image-by-color {
  border: 1px solid var(--p-veil) !important; border-radius: 0 !important;
  transition: all .3s var(--pe) !important;
}
body.slns-pdp .cz-thumblist a.active, body.slns-pdp .cz-thumblist a:hover,
body.slns-pdp .focus-preview-image-by-color.shadow-border {
  border-color: var(--p-gold) !important; transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(198,161,91,0.3) !important;
}

/* B3 · Title + meta */
body.slns-pdp .details h1, body.slns-pdp .product-title,
body.slns-pdp .product-details-shipping-details h1 {
  font-family: var(--pf-d) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 500 !important; line-height: 1.12 !important;
  letter-spacing: -0.015em !important; color: var(--p-plum) !important;
  position: relative; padding-bottom: 16px; margin-bottom: 14px !important;
}
body.slns-pdp .details h1::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 1px; background: var(--p-gold);
}
body.slns-pdp .details .fs-14.text-muted {
  font-family: var(--pf-b) !important; font-size: 10.5px !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--p-mauve) !important;
}

/* B4 · Price */
body.slns-pdp .discounted-unit-price {
  font-family: var(--pf-d) !important; font-size: 2.6rem !important;
  font-weight: 500 !important; color: var(--p-royal) !important;
}
body.slns-pdp .details del {
  font-family: var(--pf-b) !important; font-size: 1rem !important;
  font-weight: 300 !important; color: var(--p-mauve) !important;
}
body.slns-pdp .product-total-unit-price { font-family: var(--pf-d) !important; color: var(--p-royal) !important; }
body.slns-pdp .details .text-danger, body.slns-pdp .out-of-stock-text {
  display: inline-block;
  background: var(--p-blush); border: 1px solid var(--p-veil);
  color: var(--p-royal) !important;
  font-family: var(--pf-b) !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important; padding: 8px 18px !important;
}

/* B5 · Labels, swatches, qty */
body.slns-pdp .product-description-label {
  font-family: var(--pf-b) !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.26em !important;
  text-transform: uppercase !important; color: var(--p-orchid) !important;
}
body.slns-pdp .checkbox-color label, body.slns-pdp .checkbox-color span {
  border-radius: 50% !important; transition: transform .25s var(--pe), box-shadow .25s !important;
}
body.slns-pdp .checkbox-color input:checked + label,
body.slns-pdp .checkbox-color label:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p-gold) !important;
}
body.slns-pdp .quantity-box {
  border: 1px solid var(--p-veil) !important; border-radius: 0 !important;
  background: var(--p-blush) !important;
}
body.slns-pdp .quantity-box .btn-number, body.slns-pdp .quantity-box button {
  background: transparent !important; border: none !important;
  color: var(--p-royal) !important; transition: all .2s !important;
}
body.slns-pdp .quantity-box .btn-number:hover { background: var(--p-royal) !important; color: #fff !important; }
body.slns-pdp .product-details-cart-qty { font-family: var(--pf-d) !important; background: transparent !important; color: var(--p-plum) !important; }

/* B6 · Action buttons — with gold shine sweep */
body.slns-pdp .product-add-to-cart-button,
body.slns-pdp .product-buy-now-button,
body.slns-pdp .product-restock-request-button {
  position: relative; overflow: hidden;
  border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: 0.24em !important;
  text-transform: uppercase !important; padding: 17px 36px !important;
  transition: all .4s var(--pe) !important;
}
body.slns-pdp .product-add-to-cart-button::before,
body.slns-pdp .product-buy-now-button::before {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--pe);
}
body.slns-pdp .product-add-to-cart-button:hover::before,
body.slns-pdp .product-buy-now-button:hover::before { left: 130%; }
body.slns-pdp .product-add-to-cart-button {
  background: var(--p-royal) !important; border: 1px solid var(--p-royal) !important; color: #fff !important;
}
body.slns-pdp .product-add-to-cart-button:hover {
  background: var(--p-orchid) !important; border-color: var(--p-orchid) !important;
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(122,62,150,0.4) !important;
}
body.slns-pdp .product-buy-now-button {
  background: var(--p-gold) !important; border: 1px solid var(--p-gold) !important; color: var(--p-plum) !important;
}
body.slns-pdp .product-buy-now-button:hover {
  background: var(--p-gold-hi) !important;
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(198,161,91,0.45) !important;
}
body.slns-pdp .product-restock-request-button {
  background: transparent !important;
  border: 1px solid var(--p-royal) !important; color: var(--p-royal) !important;
}
body.slns-pdp .product-restock-request-button:hover { background: var(--p-royal) !important; color: #fff !important; }
body.slns-pdp .product-action-add-wishlist {
  border: 1px solid var(--p-veil) !important; border-radius: 0 !important;
  color: var(--p-royal) !important; transition: all .3s var(--pe) !important;
}
body.slns-pdp .product-action-add-wishlist:hover {
  border-color: var(--p-orchid) !important; color: var(--p-orchid) !important; transform: translateY(-2px);
}

/* B7 · Trust panel — gold crowned porcelain */
body.slns-pdp .container .card .fs-14 { font-family: var(--pf-b) !important; color: var(--p-royal) !important; }
body.slns-pdp .container aside .card, body.slns-pdp .col-lg-3 .card,
body.slns-pdp .col-md-4 .card { border-top: 2px solid var(--p-gold) !important; }

/* B8 · Tabs — hairline gold */
body.slns-pdp .nav--tabs { border-bottom: 1px solid var(--p-veil) !important; }
body.slns-pdp .nav--tabs .tab_link, body.slns-pdp .nav-tabs .nav-link {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 11.5px !important;
  font-weight: 700 !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important; color: var(--p-mauve) !important;
  padding: 15px 28px !important; position: relative; transition: color .3s !important;
}
body.slns-pdp .nav--tabs .tab_link::after, body.slns-pdp .nav-tabs .nav-link::after {
  content: ''; position: absolute; left: 28px; right: 28px; bottom: -1px;
  height: 2px; background: var(--p-gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--pe);
}
body.slns-pdp .nav--tabs .tab_link.active, body.slns-pdp .nav-tabs .nav-link.active { color: var(--p-plum) !important; background: transparent !important; }
body.slns-pdp .nav--tabs .tab_link.active::after, body.slns-pdp .nav-tabs .nav-link.active::after { transform: scaleX(1); }
body.slns-pdp .nav--tabs .tab_link:hover { color: var(--p-plum) !important; }

/* B9 · Description + reviews */
body.slns-pdp .p-details-description {
  font-family: var(--pf-b) !important; font-size: 14px !important;
  font-weight: 300 !important; line-height: 1.95 !important; color: var(--p-royal) !important;
}
body.slns-pdp .rating-color, body.slns-pdp .details .tio-star { color: var(--p-gold) !important; }

/* B10 · "You May Also Like" — normalized names, gold hover */
body.slns-pdp aside .flash-product-title, body.slns-pdp [class*="also-like"] a {
  font-family: var(--pf-b) !important; font-size: 13px !important;
  font-weight: 400 !important; line-height: 1.45 !important;
  color: var(--p-plum) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
body.slns-pdp aside h5 { font-family: var(--pf-d) !important; font-weight: 500 !important; color: var(--p-plum) !important; }

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.slns-shop *, body.slns-pdp * {
    animation: none !important; transition-duration: 0.01ms !important;
  }
  body.slns-shop .product-with-bg { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FILTER CONTROLS — "COURT JEWELS" REDESIGN
   The stock white Sort/Filter boxes → frosted glass & gold pills.
   Native <select> preserved underneath = all AJAX intact.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOOLBAR: Sort by / Filter By pills ─────────────────────── */
/* the white wrapper boxes → dark frosted pills with gold hairline */
body.slns-shop .sorting-item,
body.slns-shop .search-page-header .d-flex.align-items-center.gap-2,
body.slns-shop [class*="sorting"] {
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(198,161,91,0.35) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(11,5,14,0.35) !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: border-color .35s var(--pe), box-shadow .35s !important;
}
body.slns-shop .sorting-item:hover,
body.slns-shop .sorting-item:focus-within {
  border-color: var(--p-gold) !important;
  box-shadow: 0 10px 30px rgba(11,5,14,0.35), 0 0 24px rgba(198,161,91,0.18) !important;
}
/* the little sort/filter icons → gold */
body.slns-shop .sorting-item i,
body.slns-shop .sorting-item svg,
body.slns-shop .sorting-item img,
body.slns-shop .fi-sr-bars-filter,
body.slns-shop [class*="fi-sr"] {
  color: var(--p-gold) !important;
  filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(1.05);
}
/* "Sort by" / "Filter By" labels — small caps gold, kill dotted underline */
body.slns-shop .sorting-item label,
body.slns-shop .sorting-item span,
body.slns-shop .sorting-item .text-nowrap,
body.slns-shop .sorting-item abbr {
  font-family: var(--pf-b) !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: 0.28em !important; text-transform: uppercase !important;
  color: var(--p-gold-hi) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  white-space: nowrap;
}
/* the native SELECT — invisible chrome, lilac text, custom gold chevron */
body.slns-shop .sorting-item select,
body.slns-shop .for-sorting,
body.slns-shop .product-list-filter-input {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C6A15B' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  border: none !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 13px !important; font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: var(--p-porcelain) !important;
  padding: 8px 26px 8px 2px !important;
  box-shadow: none !important; outline: none !important;
  cursor: pointer;
  transition: color .25s !important;
}
body.slns-shop .sorting-item select:hover, body.slns-shop .for-sorting:hover { color: var(--p-gold-hi) !important; }
/* native option list stays readable */
body.slns-shop .sorting-item select option,
body.slns-shop .for-sorting option { background: #fff !important; color: var(--p-plum) !important; font-family: var(--pf-b); }

/* ── SIDEBAR CONTROLS — porcelain island refinement ─────────── */
/* group headers with gold hairline + refined chevron toggle */
body.slns-shop .cz-sidebar [data-toggle="collapse"],
body.slns-shop .cz-sidebar .accordion-heading {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 0 10px !important;
  border-bottom: 1px solid rgba(198,161,91,0.25) !important;
  cursor: pointer;
  transition: color .25s !important;
}
body.slns-shop .cz-sidebar [data-toggle="collapse"]:hover { color: var(--p-royal) !important; }
/* the circular chevron button → hairline gold ring */
body.slns-shop .cz-sidebar [data-toggle="collapse"] .btn,
body.slns-shop .cz-sidebar .rotate-icon,
body.slns-shop .cz-sidebar [class*="arrow"],
body.slns-shop .cz-sidebar [data-toggle="collapse"] i {
  background: transparent !important;
  border: 1px solid rgba(198,161,91,0.45) !important;
  border-radius: 50% !important;
  width: 26px !important; height: 26px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: var(--p-gold) !important; font-size: 11px !important;
  box-shadow: none !important;
  transition: all .3s var(--pe) !important;
}
body.slns-shop .cz-sidebar [data-toggle="collapse"]:hover i {
  background: var(--p-gold) !important; color: var(--p-plum) !important; transform: rotate(180deg);
}

/* "Product Type" select in sidebar — hairline underline, gold chevron */
body.slns-shop .cz-sidebar select {
  -webkit-appearance: none !important; appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A3E96' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  border: none !important;
  border-bottom: 1px solid var(--p-veil) !important; border-radius: 0 !important;
  font-family: var(--pf-b) !important; font-size: 13.5px !important;
  color: var(--p-plum) !important;
  padding: 10px 26px 10px 2px !important;
  box-shadow: none !important; cursor: pointer;
  transition: border-color .3s !important;
}
body.slns-shop .cz-sidebar select:focus,
body.slns-shop .cz-sidebar select:hover { border-bottom-color: var(--p-orchid) !important; }

/* PRICE — refined: Min/Max labels, gold-underline inputs, jewel slider */
body.slns-shop .cz-sidebar .form-label,
body.slns-shop .cz-sidebar label[for] {
  font-family: var(--pf-b) !important; font-size: 9.5px !important;
  font-weight: 700 !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important; color: var(--p-mauve) !important;
}
body.slns-shop .cz-sidebar input[type="number"],
body.slns-shop .cz-sidebar input[type="text"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--p-veil) !important; border-radius: 0 !important;
  font-family: var(--pf-d) !important; font-size: 1.05rem !important;
  color: var(--p-plum) !important;
  padding: 6px 2px !important;
  transition: border-color .3s !important;
}
body.slns-shop .cz-sidebar input[type="number"]:focus,
body.slns-shop .cz-sidebar input[type="text"]:focus {
  border-bottom-color: var(--p-gold) !important; box-shadow: none !important;
}
/* the go "›" button → gold square */
body.slns-shop .cz-sidebar .btn,
body.slns-shop .cz-sidebar button[type="submit"] {
  background: var(--p-gold) !important; color: var(--p-plum) !important;
  border: none !important; border-radius: 0 !important;
  width: 38px !important; height: 38px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background .25s, transform .25s !important;
}
body.slns-shop .cz-sidebar .btn:hover { background: var(--p-orchid) !important; color: #fff !important; transform: translateX(2px); }

/* range slider — jewel thumbs on a gold-to-orchid track */
body.slns-shop .cz-sidebar input[type="range"] {
  -webkit-appearance: none !important; appearance: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--p-gold), var(--p-orchid)) !important;
  border-radius: 1px !important; outline: none !important;
}
body.slns-shop .cz-sidebar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--p-porcelain);
  border: 2px solid var(--p-gold);
  box-shadow: 0 2px 8px rgba(11,5,14,0.35);
  cursor: pointer;
  transition: transform .2s var(--pe), border-color .2s;
}
body.slns-shop .cz-sidebar input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25); border-color: var(--p-orchid);
}
body.slns-shop .cz-sidebar input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--p-porcelain); border: 2px solid var(--p-gold);
  box-shadow: 0 2px 8px rgba(11,5,14,0.35); cursor: pointer;
}
body.slns-shop .cz-sidebar input[type="range"]::-moz-range-track {
  height: 2px; background: linear-gradient(90deg, var(--p-gold), var(--p-orchid));
}
/* jQuery-UI style sliders if theme uses them */
body.slns-shop .cz-sidebar .ui-slider,
body.slns-shop .cz-sidebar .noUi-target {
  background: rgba(122,62,150,0.2) !important; border: none !important; height: 2px !important;
}
body.slns-shop .cz-sidebar .ui-slider-range,
body.slns-shop .cz-sidebar .noUi-connect { background: linear-gradient(90deg, var(--p-gold), var(--p-orchid)) !important; }
body.slns-shop .cz-sidebar .ui-slider-handle,
body.slns-shop .cz-sidebar .noUi-handle {
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: var(--p-porcelain) !important; border: 2px solid var(--p-gold) !important;
  box-shadow: 0 2px 8px rgba(11,5,14,0.35) !important; top: -7px !important; cursor: pointer !important;
}

/* CATEGORY LIST — hairline rows with gold arrow slide */
body.slns-shop .cz-sidebar .product-list-filter a,
body.slns-shop .cz-sidebar li a {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 12px 2px !important;
  border-bottom: 1px solid rgba(231,218,238,0.6) !important;
  font-family: var(--pf-b) !important; font-size: 13px !important;
  letter-spacing: 0.03em !important; color: var(--p-royal) !important;
  position: relative;
  transition: color .25s, padding-left .3s var(--pe) !important;
}
body.slns-shop .cz-sidebar li:last-child a { border-bottom: none !important; }
body.slns-shop .cz-sidebar li a:hover { color: var(--p-orchid) !important; padding-left: 8px !important; }
body.slns-shop .cz-sidebar li a img {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important; object-fit: cover !important;
  border: 1px solid var(--p-veil) !important;
  transition: border-color .25s, transform .25s !important;
}
body.slns-shop .cz-sidebar li a:hover img { border-color: var(--p-gold) !important; transform: scale(1.08); }
/* the trailing chevron ">" turns gold and slides */
body.slns-shop .cz-sidebar li a i,
body.slns-shop .cz-sidebar li a [class*="angle"],
body.slns-shop .cz-sidebar li a [class*="chevron"] {
  margin-left: auto !important; color: var(--p-mauve) !important;
  transition: color .25s, transform .3s var(--pe) !important;
}
body.slns-shop .cz-sidebar li a:hover i { color: var(--p-gold) !important; transform: translateX(4px); }

/* checkbox / radio groups anywhere in sidebar */
body.slns-shop .cz-sidebar input[type="checkbox"],
body.slns-shop .cz-sidebar input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--p-orchid) !important;
}

/* mobile filter drawer keeps the porcelain treatment */
body.slns-shop .cz-sidebar.show, body.slns-shop .cz-sidebar.open {
  background: var(--p-porcelain) !important;
}

관리-도구

편집 파일: slns-pillar-pages.css

🔐 System Login