/* ===== PoshWave custom shop — [pw_shop] ================================= */

.pw-shop{
  --g:#cd9824;            /* gold */
  --g-lt:#fbe472;
  --g-md:#f3ba35;
  --g-dk:#8a6a15;
  --ink:#020202;
  --muted:#7a6f52;
  --muted-2:#5a5138;
  --cream:#fffdf4;
  --cream-2:#fdf7e0;
  --line:#e6d7b0;
  --flow:340px;

  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  max-width:1440px;
  margin:0 auto;
  padding:36px 24px 72px;
}
.pw-shop *,.pw-shop *::before,.pw-shop *::after{box-sizing:border-box;}

/* ---- Header ---- */
.pw-shop-head{text-align:center;margin-bottom:38px;}
.pw-shop-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--g-dk);font-weight:700;margin-bottom:14px;
}
.pw-shop-eyebrow::before,.pw-shop-eyebrow::after{
  content:'';width:44px;height:1px;background:var(--line);
}
.pw-shop-title{
  font-family:'Cinzel',Georgia,serif;
  font-size:clamp(30px,5vw,50px);
  font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  margin:0;line-height:1.12;
}
.pw-shop-sub{
  max-width:640px;margin:14px auto 0;
  color:var(--muted);font-size:15px;line-height:1.75;
}

/* ---- Layout ---- */
.pw-shop-wrap{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  gap:36px;align-items:start;
}

/* ---- Filter rail ---- */
.pw-fil{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:24px 22px 22px;
  position:sticky;top:110px;
}
.pw-fil-top{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.pw-fil-top h2{
  font-family:'Cinzel',Georgia,serif;
  font-size:19px;letter-spacing:.14em;text-transform:uppercase;
  margin:0;font-weight:600;
}
.pw-fil-reset{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-dk);text-decoration:none;font-weight:700;
}
.pw-fil-reset:hover{color:var(--g);text-decoration:underline;}

/* Accordion */
.pw-fil-grp{border-bottom:1px solid rgba(205,152,36,.18);}
.pw-fil-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:17px 0;background:none;border:0;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
/* XStore styles buttons globally on hover/focus; keep these headers flat. */
.pw-fil-head:hover,
.pw-fil-head:focus,
.pw-fil-head:active,
.pw-fil-head:focus-visible{
  background:none!important;
  background-image:none!important;
  color:var(--ink)!important;
  box-shadow:none!important;
  border:0!important;
  text-decoration:none!important;
}
.pw-fil-head:hover{color:var(--g-dk)!important;}
.pw-fil-head:focus-visible{outline:2px solid var(--g);outline-offset:2px;}

.pw-fil-chev{transition:transform .3s ease;color:var(--muted);flex:0 0 auto;}
.pw-fil-grp.pw-open .pw-fil-chev{transform:rotate(180deg);}
/* max-height collapse, not the 0fr grid trick: the inner list has its own
   overflow-y:auto, which defeats the overflow:hidden that trick relies on
   and lets collapsed rows bleed through. */
.pw-fil-body{max-height:0;overflow:hidden;transition:max-height .34s ease;}
.pw-fil-grp.pw-open .pw-fil-body{max-height:440px;}
.pw-fil-list{list-style:none;margin:0;padding:0 0 16px;max-height:216px;overflow-y:auto;}
.pw-fil-list::-webkit-scrollbar{width:4px;}
.pw-fil-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

.pw-fil-opt{
  display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;
  font-size:13.5px;color:var(--muted-2);transition:color .2s ease;
}
.pw-fil-opt:hover{color:var(--ink);}
.pw-fil-opt input{position:absolute;opacity:0;width:0;height:0;}
.pw-fil-box{
  width:16px;height:16px;border:1.5px solid rgba(205,152,36,.6);
  border-radius:3px;flex:0 0 auto;position:relative;
  transition:background .2s ease,border-color .2s ease;
}
.pw-fil-box.pw-radio{border-radius:50%;}
.pw-fil-opt input:checked+.pw-fil-box{
  background:linear-gradient(135deg,var(--g-lt),var(--g));
  border-color:var(--g);
}
.pw-fil-opt input:checked+.pw-fil-box::after{
  content:'';position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.pw-fil-opt input:checked+.pw-fil-box.pw-radio::after{
  left:4px;top:4px;width:6px;height:6px;border:0;border-radius:50%;
  background:var(--ink);transform:none;
}
.pw-fil-opt input:focus-visible+.pw-fil-box{outline:2px solid var(--g);outline-offset:2px;}
.pw-fil-txt{flex:1 1 auto;}
.pw-fil-cnt{font-size:11.5px;color:rgba(122,111,82,.65);}

/* Colour swatches */
.pw-sw{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(2,2,2,.16);
}

/* Price range */
.pw-range{position:relative;height:34px;margin:8px 0 4px;}
.pw-range-track{
  position:absolute;top:15px;left:0;right:0;height:3px;
  background:rgba(205,152,36,.24);border-radius:3px;
}
.pw-range-fill{
  position:absolute;top:0;bottom:0;
  background:linear-gradient(90deg,var(--g-md),var(--g));border-radius:3px;
}
.pw-range input[type=range]{
  position:absolute;top:0;left:0;width:100%;height:34px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none;
}
.pw-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--g);cursor:pointer;box-shadow:0 2px 6px rgba(2,2,2,.2);
}
.pw-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--g);cursor:pointer;
}
.pw-price-in{display:flex;align-items:center;gap:8px;padding-bottom:18px;}
.pw-price-in input{
  width:100%;min-width:0;padding:9px 10px;
  border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:13px;color:var(--ink);background:#fff;
}
.pw-price-in input:focus{outline:none;border-color:var(--g);}
.pw-cur,.pw-dash{color:var(--muted);font-size:13px;flex:0 0 auto;}

.pw-fil-apply{
  width:100%;margin-top:20px;padding:13px;border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--g-lt),var(--g-md) 48%,var(--g));
  color:var(--ink);font:inherit;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:box-shadow .3s ease,transform .2s ease;
}
.pw-fil-apply:hover,.pw-fil-apply:focus{
  background:linear-gradient(135deg,var(--g-lt),var(--g-md) 48%,var(--g))!important;
  color:var(--ink)!important;
  box-shadow:0 10px 24px rgba(205,152,36,.32)!important;
}
.pw-fil-apply:active{transform:scale(.98);}
.pw-fil-mobile:hover,.pw-fil-mobile:focus{
  background:#fff!important;color:var(--ink)!important;
  border-color:var(--g)!important;box-shadow:none!important;
}

/* ---- Results bar ---- */
.pw-res-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.pw-res-count{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.pw-sort{display:flex;align-items:center;gap:10px;}
.pw-sort>span{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pw-sort select{
  padding:9px 34px 9px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a6f52' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.pw-sort select:focus{outline:none;border-color:var(--g);}

/* Active filter chips */
.pw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.pw-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:var(--cream-2);border:1px solid rgba(205,152,36,.3);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);text-decoration:none;font-weight:600;
}
.pw-chip:hover{border-color:var(--g);color:var(--ink);}
.pw-chip b{font-weight:800;color:var(--ink);}

/* ---- Grid ---- */
.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;}

.pw-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(205,152,36,.22);border-radius:14px;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.pw-card:hover{
  transform:translateY(-6px);border-color:rgba(205,152,36,.55);
  box-shadow:0 18px 42px rgba(205,152,36,.18);
}

/* Uniform imagery: fixed 3:4 frame, face-priority crop */
.pw-card-thumb{
  position:relative;display:block;aspect-ratio:3/4;
  overflow:hidden;background:var(--cream-2);
}
.pw-card-thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:opacity .5s ease,transform .9s ease;
}
.pw-img-alt{opacity:0;}
.pw-card:hover .pw-img-alt{opacity:1;}
.pw-card:hover .pw-card-thumb img{transform:scale(1.06);}

.pw-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:6px 12px;border-radius:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.pw-badge-sale{background:linear-gradient(135deg,var(--g-lt),var(--g));color:var(--ink);}
.pw-badge-out{background:rgba(2,2,2,.82);color:#fff;}

.pw-card-body{
  display:flex;flex-direction:column;flex:1 1 auto;gap:7px;
  padding:18px 16px 20px;text-align:center;
}
.pw-card-name{
  margin:0;font-family:'Cinzel',Georgia,serif;
  font-size:14.5px;font-weight:600;line-height:1.4;letter-spacing:.02em;
}
.pw-card-name a{
  color:var(--ink);text-decoration:none;transition:color .25s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pw-card:hover .pw-card-name a{color:var(--g);}
.pw-card-cat{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pw-card-price{font-size:15px;font-weight:700;color:var(--g-dk);}
.pw-card-price del{color:rgba(122,111,82,.6);font-weight:400;margin-right:6px;}
.pw-card-price ins{text-decoration:none;color:var(--g-dk);}
.pw-card-price .amount{color:var(--g-dk);}
.pw-card-cta{margin-top:auto;padding-top:14px;}

/* ---- Flow button (CSS port of the React FlowButton) ---- */
.pw-flow{
  position:relative;display:flex;align-items:center;justify-content:center;gap:4px;
  width:100%;overflow:hidden;border-radius:100px;
  border:1.5px solid rgba(205,152,36,.55);background:transparent;
  padding:13px 26px;
  font-family:'Manrope',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);cursor:pointer;
  transition:border-color 600ms cubic-bezier(.23,1,.32,1),
             color 600ms cubic-bezier(.23,1,.32,1),
             border-radius 600ms cubic-bezier(.23,1,.32,1);
}
.pw-flow:hover{border-color:transparent;color:var(--ink);border-radius:12px;}
.pw-flow:active{transform:scale(.95);}
.pw-flow:focus-visible{outline:2px solid var(--g);outline-offset:3px;}

.pw-flow-arr{
  position:absolute;display:flex;width:16px;height:16px;z-index:9;color:var(--ink);
  transition:left 800ms cubic-bezier(.34,1.56,.64,1),
             right 800ms cubic-bezier(.34,1.56,.64,1),
             color 800ms cubic-bezier(.34,1.56,.64,1);
}
.pw-flow-arr svg{width:100%;height:100%;}
.pw-flow-arr-l{left:-25%;}
.pw-flow:hover .pw-flow-arr-l{left:15px;color:var(--ink);}
.pw-flow-arr-r{right:15px;}
.pw-flow:hover .pw-flow-arr-r{right:-25%;color:var(--ink);}

.pw-flow-txt{
  position:relative;z-index:1;transform:translateX(-12px);
  transition:transform 800ms ease-out;
}
.pw-flow:hover .pw-flow-txt{transform:translateX(12px);}

/* Sized from the button's own width (not a fixed px value) and animated with
   scale, so the fill always reaches the ends however wide the button gets. */
.pw-flow-circle{
  position:absolute;top:50%;left:50%;
  width:260%;aspect-ratio:1/1;height:auto;
  border-radius:50%;opacity:0;z-index:0;
  background:linear-gradient(135deg,var(--g-lt),var(--g-md) 48%,var(--g));
  transform:translate(-50%,-50%) scale(0);
  transition:transform 800ms cubic-bezier(.19,1,.22,1),
             opacity 380ms ease;
}
.pw-flow:hover .pw-flow-circle{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* Sold-out button stays inert-looking */
.pw-flow.pw-flow-out{opacity:.55;}

/* ---- Embedded grid (homepage / Elementor sections) ---- */
.pw-shop-embed{padding:0;max-width:none;}
.pw-shop-embed .pw-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1100px){.pw-shop-embed .pw-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:860px){.pw-shop-embed .pw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- Variation modal ---- */
.pw-modal{position:fixed;inset:0;z-index:100050;display:none;align-items:center;justify-content:center;padding:20px;}
.pw-modal.open{display:flex;}
.pw-modal-backdrop{position:absolute;inset:0;background:rgba(2,2,2,.58);backdrop-filter:blur(2px);}
.pw-modal-box{
  position:relative;z-index:1;width:100%;max-width:660px;max-height:90vh;overflow-y:auto;
  background:var(--cream,#fffdf4);border-radius:18px;
  box-shadow:0 30px 80px rgba(2,2,2,.4);
  font-family:'Manrope',system-ui,sans-serif;
  animation:pwModalIn .28s cubic-bezier(.19,1,.22,1);
}
@keyframes pwModalIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.pw-modal-x{
  position:absolute;top:12px;right:14px;z-index:2;
  background:rgba(255,255,255,.9);border:1px solid rgba(205,152,36,.3);
  width:32px;height:32px;border-radius:50%;
  font-size:20px;line-height:1;cursor:pointer;color:#020202;
}
.pw-modal-x:hover{background:#fff;border-color:#cd9824;}
.pw-modal-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;padding:22px;}
.pw-modal-media{border-radius:12px;overflow:hidden;background:#fdf7e0;aspect-ratio:3/4;}
.pw-modal-media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.pw-modal-name{font-family:'Cinzel',Georgia,serif;font-size:19px;font-weight:600;margin:2px 0 8px;color:#020202;line-height:1.3;padding-right:38px;}
.pw-modal-price{font-size:16px;font-weight:700;color:#8a6a15;margin-bottom:18px;}
.pw-modal-price del{color:rgba(122,111,82,.6);font-weight:400;margin-right:6px;}
.pw-modal-price ins{text-decoration:none;color:#8a6a15;}
.pw-modal-attr{margin-bottom:16px;}
.pw-modal-attr-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#7a6f52;margin-bottom:9px;
}
.pw-modal-opts{display:flex;flex-wrap:wrap;gap:8px;}
.pw-opt{
  min-width:44px;padding:9px 14px;
  border:1.5px solid rgba(205,152,36,.4);border-radius:8px;background:#fff;
  font:inherit;font-size:13px;font-weight:600;color:#020202;cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.pw-opt:hover{border-color:#cd9824;}
.pw-opt.on{
  border-color:#cd9824;
  background:linear-gradient(135deg,#fbe472,#cd9824);
  box-shadow:0 4px 12px rgba(205,152,36,.28);
}
.pw-opt-swatch{width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;}
.pw-opt-swatch.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #cd9824;}
.pw-modal-msg{display:none;font-size:13px;margin-bottom:12px;color:#7a6f52;}
.pw-modal-msg.show{display:block;}
.pw-modal-msg.pw-err{color:#b3261e;}
.pw-modal-add{
  width:100%;padding:14px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#fbe472,#f3ba35 48%,#cd9824);
  color:#020202;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:box-shadow .3s,opacity .3s;
}
.pw-modal-add:hover:not(:disabled){box-shadow:0 10px 26px rgba(205,152,36,.34);}
.pw-modal-add:disabled{opacity:.45;cursor:not-allowed;}
@media(max-width:560px){
  .pw-modal-body{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px;}
  .pw-modal-media{max-width:150px;margin:0 auto;}
}

/* ---- Pagination ---- */
.pw-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:48px;}
.pw-pager .page-numbers{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.pw-pager .page-numbers:hover,.pw-pager .page-numbers.current{
  background:linear-gradient(135deg,var(--g-lt),var(--g));
  border-color:var(--g);color:var(--ink);font-weight:700;
}
.pw-pager .dots{border-color:transparent;}

/* ---- Empty ---- */
.pw-empty{text-align:center;padding:70px 20px;color:var(--muted);}
.pw-empty-reset{
  display:inline-block;margin-top:14px;color:var(--g-dk);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;
}

/* ---- Mobile toggle ---- */
.pw-fil-mobile{
  display:none;align-items:center;gap:8px;
  padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;margin-bottom:18px;
}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .pw-shop-wrap{grid-template-columns:236px minmax(0,1fr);gap:26px;}
  .pw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:860px){
  .pw-shop{padding:28px 16px 56px;}
  .pw-shop-wrap{grid-template-columns:minmax(0,1fr);}
  .pw-fil-mobile{display:inline-flex;}
  .pw-fil{display:none;position:static;}
  .pw-fil.pw-fil-show{display:block;margin-bottom:26px;}
}
@media(max-width:560px){
  .pw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}
  .pw-card-body{padding:14px 10px 16px;}
  .pw-card-name{font-size:13px;}
  .pw-flow{padding:11px 16px;font-size:9.5px;letter-spacing:.1em;}
  .pw-flow:hover .pw-flow-arr-l{left:9px;}
  .pw-flow-arr-r{right:9px;}
  .pw-flow-arr{width:13px;height:13px;}
}
@media(prefers-reduced-motion:reduce){
  .pw-shop *,.pw-shop *::before,.pw-shop *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
  .pw-card:hover{transform:none;}
}