/* =====================================
   MEMORA CREATIONS
   PROFESSIONAL PRODUCTS PAGE
===================================== */


/* =========================
   PAGE
========================= */

.products-body{
  min-height:100vh;

  background:
    linear-gradient(
      180deg,
      #faf8f5 0%,
      #fffdfb 45%,
      #faf7f3 100%
    );

  position:relative;
}


.products-page{
  position:relative;

  z-index:1;

  padding:
    24px 0 55px;
}


/* =========================
   BACKGROUND WATERMARK
========================= */

.products-watermark{
  position:fixed;

  top:52%;
  left:50%;

  transform:
    translate(-50%,-50%)
    rotate(-22deg);

  width:100%;

  text-align:center;

  color:
    rgba(138,90,59,.045);

  font-size:
    clamp(
      55px,
      10vw,
      155px
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:900;

  letter-spacing:.12em;

  white-space:nowrap;

  pointer-events:none;

  user-select:none;

  z-index:0;
}


/* =========================
   HERO
========================= */

.products-hero{
  position:relative;

  overflow:hidden;

  margin:
    0 0 24px;

  padding:
    clamp(
      36px,
      5vw,
      62px
    );

  border:
    1px solid #eadfd5;

  border-radius:30px;

  background:
    linear-gradient(
      135deg,
      rgba(241,225,210,.97),
      rgba(255,251,247,.97)
    );

  box-shadow:
    0 18px 45px
    rgba(61,39,23,.07);
}


.products-hero::before{
  content:"";

  position:absolute;

  top:-110px;
  right:-85px;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    rgba(183,131,93,.12);
}


.products-hero::after{
  content:"";

  position:absolute;

  right:150px;
  bottom:-100px;

  width:190px;
  height:190px;

  border-radius:50%;

  border:
    1px solid
    rgba(138,90,59,.16);
}


.products-eyebrow{
  position:relative;

  z-index:2;

  margin-bottom:12px;

  color:#9b613c;

  font-size:11px;

  font-weight:900;

  letter-spacing:.24em;

  text-transform:uppercase;
}


.products-title-row{
  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:30px;
}


.products-title-row h1{
  margin:0;

  color:#291a12;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      48px,
      6vw,
      74px
    );

  line-height:.95;

  letter-spacing:-.035em;
}


.products-title-row p{
  max-width:600px;

  margin:
    18px 0 0;

  color:#746a62;

  font-size:16px;

  line-height:1.65;
}


.products-count{
  flex-shrink:0;

  padding:
    9px 14px;

  border:
    1px solid #e2d6cb;

  border-radius:999px;

  background:
    rgba(255,255,255,.86);

  color:#766a61;

  font-size:12px;

  font-weight:800;

  box-shadow:
    0 6px 18px
    rgba(61,39,23,.05);
}


/* =========================
   FILTER CARD
========================= */

.products-filter-card{
  position:relative;

  z-index:2;

  margin-bottom:38px;

  padding:20px;

  border:
    1px solid #e8ddd3;

  border-radius:24px;

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 12px 32px
    rgba(61,39,23,.06);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.filter-top{
  margin-bottom:15px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:15px;
}


.filter-small{
  display:block;

  margin-bottom:4px;

  color:#a2704f;

  font-size:9px;

  font-weight:900;

  letter-spacing:.20em;
}


.filter-top h2{
  margin:0;

  color:#302119;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:23px;
}


.clear-filter-link{
  color:#8a5a3b;

  font-size:12px;

  font-weight:800;
}


.clear-filter-link:hover{
  text-decoration:underline;
}


/* =========================
   FILTER FORM
========================= */

.products-filter-form{
  display:grid;

  grid-template-columns:
    minmax(260px,1.6fr)
    minmax(170px,.8fr)
    minmax(170px,.8fr)
    auto;

  gap:10px;
}


.products-search-box{
  position:relative;
}


.products-search-box input,
.products-select{
  width:100%;

  height:54px;

  border:
    1px solid #e3d8ce;

  border-radius:14px;

  background:#fffdfb;

  color:#30251e;

  font:
    inherit;

  outline:none;
}


.products-search-box input{
  padding:
    0 15px 0 48px;
}


.products-search-box input::placeholder{
  color:#a39992;
}


.products-select{
  padding:
    0 36px 0 14px;

  cursor:pointer;
}


.products-search-box input:focus,
.products-select:focus{
  border-color:#b7835d;

  box-shadow:
    0 0 0 4px
    rgba(183,131,93,.10);
}


.products-search-icon{
  position:absolute;

  top:50%;
  left:16px;

  transform:
    translateY(-50%);

  width:20px;
  height:20px;

  color:#8a5a3b;

  pointer-events:none;
}


.products-search-icon svg{
  width:100%;
  height:100%;
}


.products-filter-btn{
  min-width:100px;

  height:54px;

  padding:
    0 22px;

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      #9b613c,
      #7e492a
    );

  color:#fff;

  font:
    inherit;

  font-size:13px;

  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 10px 22px
    rgba(138,90,59,.20);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.products-filter-btn:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 14px 26px
    rgba(138,90,59,.26);
}


/* =========================
   PRODUCT SECTION
========================= */

.products-section{
  position:relative;

  z-index:2;

  padding:
    12px 0 40px;
}


.products-section-heading{
  margin-bottom:22px;
}


.section-eyebrow{
  margin-bottom:7px;

  color:#9b613c;

  font-size:10px;

  font-weight:900;

  letter-spacing:.22em;
}


.products-section-heading h2{
  margin:0;

  color:#2b1b12;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      33px,
      4vw,
      48px
    );

  line-height:1;
}


/* =========================
   PRODUCT GRID
========================= */

.premium-products-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:18px;
}


/* =========================
   PRODUCT CARD
========================= */

.premium-product-card{
  position:relative;

  overflow:hidden;

  border:
    1px solid #e7ddd5;

  border-radius:22px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 9px 26px
    rgba(46,31,20,.055);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.premium-product-card:hover{
  transform:
    translateY(-5px);

  border-color:#dac6b6;

  box-shadow:
    0 20px 42px
    rgba(46,31,20,.12);
}


.premium-product-open{
  width:100%;

  padding:0;

  border:0;

  background:transparent;

  color:inherit;

  font:inherit;

  text-align:left;

  cursor:pointer;
}


/* =========================
   PRODUCT IMAGE
========================= */

.premium-image-wrap{
  position:relative;

  overflow:hidden;

  aspect-ratio:1/1;

  background:
    linear-gradient(
      145deg,
      #f7f3ef,
      #efebe7
    );
}


.premium-product-img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .35s ease;
}


.premium-product-card:hover
.premium-product-img{
  transform:
    scale(1.045);
}


/* =========================
   DISCOUNT
========================= */

.discount-badge{
  position:absolute;

  top:12px;
  left:12px;

  z-index:2;

  padding:
    6px 10px;

  border-radius:999px;

  background:#302018;

  color:#fff;

  font-size:10px;

  line-height:1;

  font-weight:900;

  letter-spacing:.04em;

  box-shadow:
    0 5px 12px
    rgba(0,0,0,.12);
}


/* =========================
   STOCK DOT
========================= */

.stock-dot{
  position:absolute;

  top:15px;
  right:15px;

  z-index:2;

  width:10px;
  height:10px;

  border-radius:50%;

  background:#31a767;

  box-shadow:
    0 0 0 4px
    rgba(49,167,103,.16);
}


.stock-dot.out{
  background:#c64f46;

  box-shadow:
    0 0 0 4px
    rgba(198,79,70,.15);
}


/* =========================
   CARD CONTENT
========================= */

.premium-card-content{
  padding:
    15px 15px 13px;
}


.premium-category{
  margin-bottom:7px;

  color:#9b613c;

  font-size:10px;

  line-height:1.2;

  font-weight:900;

  letter-spacing:.11em;

  text-transform:uppercase;
}


.premium-product-title{
  min-height:43px;

  margin:
    0 0 11px;

  color:#2f2119;

  font-size:15px;

  line-height:1.42;

  font-weight:850;
}


/* =========================
   PRICE FIX
========================= */

.premium-price-row{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  min-height:28px;
}


.premium-price{
  display:inline-block;

  color:#231812;

  font-size:19px;

  line-height:1.2;

  font-weight:900;
}


/*
  IMPORTANT:
  ORIGINAL PRICE WILL BE
  CLEARLY CROSSED OUT
*/

.premium-old-price{
  position:relative;

  display:inline-block !important;

  color:#928983 !important;

  font-size:13px !important;

  line-height:1.2;

  font-weight:700 !important;

  text-decoration:
    line-through !important;

  text-decoration-color:
    #776b64 !important;

  text-decoration-thickness:
    2px !important;

  text-decoration-skip-ink:
    none !important;

  opacity:.95;
}


/*
  FALLBACK FOR OLD .old CLASS
  USED IN QUICK VIEW /
  SINGLE PRODUCT
*/

.old{
  position:relative;

  display:inline-block !important;

  margin-left:7px;

  color:#928983 !important;

  font-size:14px !important;

  font-weight:700 !important;

  text-decoration:
    line-through !important;

  text-decoration-color:
    #766a62 !important;

  text-decoration-thickness:
    2px !important;

  text-decoration-skip-ink:
    none !important;
}


/* EXTRA CROSS-LINE FALLBACK */

.premium-old-price::after,
.old::after{
  content:"";

  position:absolute;

  left:-2px;
  right:-2px;

  top:50%;

  height:1.5px;

  background:#766a62;

  transform:
    translateY(-50%);

  pointer-events:none;
}


/* =========================
   STOCK TEXT
========================= */

.stock-text{
  margin-top:8px;

  color:#447a5a;

  font-size:11px;

  font-weight:800;
}


.stock-text.out{
  color:#b84f47;
}


/* =========================
   CARD ACTIONS
========================= */

.premium-card-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  padding:
    0 15px 15px;
}


.premium-card-actions .btn{
  min-height:42px;

  padding:
    9px 7px;

  border-radius:11px;

  font-size:11px;

  font-weight:800;
}


.premium-card-actions
.btn:not(.secondary){
  background:
    linear-gradient(
      180deg,
      #9b613c,
      #7e492a
    );

  color:#fff;
}


.premium-card-actions
.btn.secondary{
  background:#f1e9e2;

  color:#302119;
}


/* =========================
   EMPTY
========================= */

.products-empty{
  grid-column:
    1 / -1;

  padding:
    60px 20px;

  border:
    1px dashed #d9cabd;

  border-radius:22px;

  background:
    rgba(255,255,255,.90);

  text-align:center;

  color:#766c65;
}


.products-empty-icon{
  margin-bottom:12px;

  font-size:42px;
}


.products-empty strong{
  display:block;

  margin-bottom:6px;

  color:#34251c;

  font-size:18px;
}


/* =========================
   QUICK VIEW PRICE
========================= */

.product-popup-price{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:7px;

  color:#291c14;

  font-weight:900;
}


/* =========================
   TRUST SECTION
========================= */

.products-trust{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;

  margin:
    12px 0 35px;
}


.product-trust-item{
  min-height:100px;

  padding:16px;

  border:
    1px solid #e7dbd1;

  border-radius:18px;

  background:
    rgba(255,255,255,.95);

  display:flex;

  align-items:center;

  gap:13px;

  box-shadow:
    0 8px 22px
    rgba(61,39,23,.045);
}


.product-trust-icon{
  width:44px;
  height:44px;

  flex-shrink:0;

  border-radius:13px;

  background:#f3e5d9;

  color:#8a5a3b;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:20px;

  font-weight:900;
}


.product-trust-item strong{
  display:block;

  margin-bottom:3px;

  color:#33241b;

  font-size:13px;
}


.product-trust-item span{
  display:block;

  color:#81766e;

  font-size:11px;

  line-height:1.4;
}


/* =========================
   CUSTOMER SUPPORT
========================= */

.products-support{
  position:relative;

  z-index:2;

  overflow:hidden;

  margin:
    0 0 20px;

  border-radius:26px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  background:
    linear-gradient(
      135deg,
      #2d1d14,
      #71462d
    );

  color:#fff;

  box-shadow:
    0 20px 45px
    rgba(54,31,16,.14);
}


.products-support-copy{
  padding:
    clamp(
      28px,
      4vw,
      48px
    );
}


.products-support-copy > span{
  display:block;

  margin-bottom:8px;

  color:#e6c7ae;

  font-size:9px;

  font-weight:900;

  letter-spacing:.20em;
}


.products-support-copy h2{
  margin:
    0 0 10px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      29px,
      4vw,
      43px
    );

  line-height:1.05;
}


.products-support-copy p{
  max-width:500px;

  margin:0;

  color:#e4d7cf;

  font-size:13px;

  line-height:1.65;
}


.products-support-actions{
  padding:25px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:11px;

  background:
    rgba(255,255,255,.055);
}


.products-support-actions a{
  padding:15px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:15px;

  background:
    rgba(255,255,255,.09);

  color:#fff;

  font-size:13px;

  font-weight:800;
}


.products-support-actions a:hover{
  background:
    rgba(255,255,255,.14);
}


.products-support-actions small{
  display:block;

  margin-top:4px;

  color:#d8cbc3;

  font-size:11px;

  font-weight:500;
}


/* =========================
   FOOTER
========================= */

.products-footer{
  position:relative;

  z-index:2;

  margin-top:35px;

  padding:
    40px 0 110px;

  background:#21160f;

  color:#bdb0a7;

  text-align:center;
}


.products-footer strong{
  display:block;

  margin-bottom:8px;

  color:#fff;

  font-size:16px;

  font-weight:900;

  letter-spacing:.10em;
}


.products-footer p{
  margin:
    0 0 12px;

  font-size:13px;
}


.products-footer small{
  color:#897e76;

  font-size:10px;
}


/* =========================
   TABLET
========================= */

@media(max-width:950px){

  .products-filter-form{
    grid-template-columns:
      1fr 1fr;
  }


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


  .products-support{
    grid-template-columns:1fr;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .products-page{
    padding-top:12px;
  }


  .products-watermark{
    font-size:
      clamp(
        42px,
        15vw,
        80px
      );

    letter-spacing:.07em;

    color:
      rgba(138,90,59,.035);
  }


  .products-hero{
    margin-bottom:16px;

    padding:
      33px 20px;

    border-radius:21px;
  }


  .products-hero::before{
    width:190px;
    height:190px;
  }


  .products-title-row{
    flex-direction:column;

    align-items:flex-start;

    gap:14px;
  }


  .products-title-row h1{
    font-size:
      clamp(
        42px,
        12vw,
        52px
      );
  }


  .products-title-row p{
    margin-top:14px;

    font-size:14px;
  }


  .products-count{
    padding:
      7px 11px;

    font-size:10px;
  }


  /* FILTER */

  .products-filter-card{
    padding:14px;

    border-radius:19px;
  }


  .filter-top{
    align-items:flex-start;
  }


  .filter-top h2{
    font-size:20px;
  }


  .products-filter-form{
    grid-template-columns:1fr;
  }


  .products-search-box input,
  .products-select,
  .products-filter-btn{
    height:51px;
  }


  /* PRODUCTS */

  .products-section-heading h2{
    font-size:32px;
  }


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

    gap:10px;
  }


  .premium-product-card{
    border-radius:16px;
  }


  .discount-badge{
    top:8px;
    left:8px;

    padding:
      5px 7px;

    font-size:8px;
  }


  .stock-dot{
    top:11px;
    right:11px;

    width:8px;
    height:8px;
  }


  .premium-card-content{
    padding:
      11px 10px;
  }


  .premium-category{
    font-size:8px;
  }


  .premium-product-title{
    min-height:37px;

    margin-bottom:8px;

    font-size:12px;

    line-height:1.35;
  }


  .premium-price{
    font-size:15px;
  }


  .premium-old-price{
    font-size:
      11px !important;
  }


  .stock-text{
    font-size:9px;
  }


  .premium-card-actions{
    padding:
      0 9px 10px;

    grid-template-columns:1fr;

    gap:6px;
  }


  .premium-card-actions .btn{
    min-height:38px;

    font-size:10px;
  }


  /* TRUST */

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

    gap:8px;
  }


  .product-trust-item{
    min-height:110px;

    padding:11px;

    flex-direction:column;

    align-items:flex-start;
  }


  .product-trust-item:last-child{
    grid-column:
      1 / -1;

    min-height:auto;

    flex-direction:row;

    align-items:center;
  }


  .product-trust-icon{
    width:38px;
    height:38px;

    font-size:17px;
  }


  /* SUPPORT */

  .products-support{
    border-radius:21px;
  }


  .products-support-copy{
    padding:24px 20px;
  }


  .products-support-actions{
    padding:
      0 20px 22px;

    background:transparent;
  }

}


/* =========================
   VERY SMALL MOBILE
========================= */

@media(max-width:380px){

  .premium-products-grid{
    grid-template-columns:1fr;
  }


  .products-trust{
    grid-template-columns:1fr;
  }


  .product-trust-item,
  .product-trust-item:last-child{
    grid-column:auto;

    flex-direction:row;

    align-items:center;

    min-height:auto;
  }

}