@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;900&family=Lalezar&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:#1b1b17;
  --paper:#f6f5f1;
  --snow:#fdfdfb;
  --line:#e2e1da;
  --mist:#edece6;
  --smoke:#4c4c45;
  --steel:#8b8b82;
  --signal:#ff4b1f;
  --signal-deep:#d63a12;
  --moss:#2e7d5b;
  --cobalt:#2b49d8;
  --butter:#ffc531;

  --font-display:'Lalezar','Vazirmatn',serif;
  --font-body:'Vazirmatn',Tahoma,sans-serif;
  --font-latin:'Space Grotesk','Vazirmatn',sans-serif;

  --fog:#c9c8c0;
  --coal:#24241f;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

h1,
h2,
h3{
  font-family:var(--font-display);
  font-weight:400;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}

.screen-reader-text{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

.ab-btn{
  display:inline-block;
  padding:16px 32px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  border:2px solid transparent;
  border-radius:4px;
  transition:all .3s;
}

.ab-btn--ink{
  background:var(--ink);
  color:#fff;
}

.ab-btn--ink:hover{
  background:var(--signal);
}

.ab-btn--signal{
  background:var(--signal);
  color:#fff;
}

.ab-btn--signal:hover{
  background:var(--signal-deep);
}

.ab-btn--ghost{
  border-color:var(--ink);
  color:var(--ink);
}

.ab-btn--ghost:hover{
  background:var(--ink);
  color:#fff;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.ab-section{
  padding:80px 0;
}

.ab-section--ink{
  background:var(--ink);
  color:#fff;
}

.ab-section--mist{
  background:var(--mist);
}

.ab-h2{
  font-size:42px;
  margin:0 0 40px;
}

.ab-h2--light{
  color:#fff;
}

.ab-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

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


/* =========================================================
   GENERAL CARD
   ========================================================= */

.ab-card{
  position:relative;
  background:var(--snow);
  border:1px solid var(--line);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease,
    background-color .35s ease;
  border-radius:6px;
  overflow:hidden;
  display:block;
  height:100%;
  will-change:transform;
}

.ab-card:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 45px rgba(27,27,23,.10);
}

.ab-card__img{
  position:relative;
  display:block;
  aspect-ratio:1;
  background:var(--mist);
  overflow:hidden;
}

.ab-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .35s ease;
}

.ab-card:hover .ab-card__img img{
  transform:scale(1.045);
}

.ab-badge--sale{
  position:absolute;
  top:12px;
  inset-inline-start:12px;
  background:var(--signal);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:4px;
  font-weight:700;
}

.ab-card__body{
  display:block;
  padding:20px;
}

.ab-card__title{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:var(--ink);
}

.ab-card__price{
  font-weight:900;
  color:var(--signal);
  font-size:18px;
}

.ab-card__price del{
  color:var(--steel);
  font-size:13px;
  margin-inline-end:7px;
}

.ab-card__price ins{
  text-decoration:none;
}


/* =========================================================
   GLOBAL CARD MOTION
   ========================================================= */

.ab-product-card,
.ab-category-card,
.ab-feature,
.ab-post,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  position:relative;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease,
    background-color .35s ease;
  will-change:transform;
}

.ab-product-card:hover,
.ab-category-card:hover,
.ab-feature:hover,
.ab-post:hover,
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 45px rgba(27,27,23,.10);
}

.ab-card img,
.ab-product-card img,
.ab-category-card img,
.ab-feature img,
.ab-post__image img,
.woocommerce ul.products li.product img{
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .35s ease;
}

.ab-product-card:hover img,
.ab-category-card:hover img,
.ab-feature:hover img,
.ab-post:hover .ab-post__image img,
.woocommerce ul.products li.product:hover img{
  transform:scale(1.045);
}

.ab-card a,
.ab-product-card a,
.ab-category-card a,
.ab-feature a,
.ab-post a{
  transition:
    color .25s ease,
    opacity .25s ease;
}

.ab-card button,
.ab-product-card button,
.ab-category-card button,
.ab-post__read{
  transition:
    transform .25s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.ab-card:hover button,
.ab-product-card:hover button,
.ab-category-card:hover button{
  transform:translateY(-2px);
}


/* =========================================================
   PRODUCT / CATEGORY / FEATURE CARDS
   ========================================================= */

.ab-product-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--snow);
}

.ab-product-card:hover{
  border-color:rgba(255,75,31,.35);
  box-shadow:
    0 20px 50px rgba(27,27,23,.10),
    0 4px 14px rgba(27,27,23,.05);
}

.ab-category-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--snow);
}

.ab-category-card:hover{
  border-color:rgba(255,75,31,.35);
}

.ab-feature{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--snow);
}

.ab-feature:hover{
  border-color:rgba(255,75,31,.30);
}

.ab-post{
  overflow:hidden;
  border-radius:10px;
}

.ab-post:hover{
  border-color:rgba(255,75,31,.45);
  box-shadow:
    0 22px 55px rgba(27,27,23,.11),
    0 5px 16px rgba(27,27,23,.05);
}


/* =========================================================
   CARD SHINE
   ========================================================= */

.ab-card::after,
.ab-product-card::after,
.ab-category-card::after,
.ab-post::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.35) 45%,
      transparent 65%
    );
  transform:translateX(-100%);
  transition:
    opacity .35s ease,
    transform .65s cubic-bezier(.22,.61,.36,1);
}

.ab-card:hover::after,
.ab-product-card:hover::after,
.ab-category-card:hover::after,
.ab-post:hover::after{
  opacity:1;
  transform:translateX(100%);
}


/* =========================================================
   WOOCOMMERCE BASE
   ========================================================= */

.woocommerce ul.products,
.woocommerce-page ul.products{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  float:none!important;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--snow);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
  border-color:rgba(255,75,31,.40);
  box-shadow:
    0 20px 50px rgba(27,27,23,.10),
    0 5px 15px rgba(27,27,23,.04);
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images{
  margin:0;
  padding:0;
}

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary{
  margin:0;
  padding:0;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs{
  margin:60px 0 0;
  padding:0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs{
  list-style:none;
  margin:0 0 30px;
  padding:0;
  display:flex;
  gap:0;
  border-bottom:2px solid var(--ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li{
  margin:0;
  padding:0;
  border:0;
  background:none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:14px 24px;
  font-weight:700;
  color:var(--smoke);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--signal);
  border-bottom-color:var(--signal);
}

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{
  border-top-color:var(--signal);
  background:var(--snow);
  color:var(--ink);
}

.woocommerce-message::before,
.woocommerce-info::before{
  color:var(--signal);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  border-radius:6px;
  font-weight:800;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.ab-cats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:40px;
}

.ab-cat{
  background:var(--snow);
  border:1px solid var(--line);
  padding:20px;
  text-align:center;
  border-radius:6px;
  transition:all .3s;
}

.ab-cat img{
  aspect-ratio:1;
  object-fit:cover;
  margin-bottom:12px;
  border-radius:4px;
  width:100%;
}

.ab-cat b{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.ab-cat span{
  font-size:12px;
  color:var(--steel);
}

.ab-cat:hover{
  border-color:var(--signal);
  transform:translateY(-4px);
}


/* =========================================================
   FEATURES
   ========================================================= */

.ab-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}

.ab-feature{
  background:var(--snow);
  border:1px solid var(--line);
  padding:28px;
  border-radius:6px;
  transition:all .3s;
}

.ab-feature__num{
  font-family:var(--font-display);
  font-size:56px;
  color:var(--signal);
  display:block;
  margin-bottom:16px;
  line-height:1;
}

.ab-feature h3{
  font-size:20px;
  margin:0 0 10px;
  font-family:var(--font-body);
  font-weight:700;
}

.ab-feature p{
  font-size:14px;
  color:var(--smoke);
  line-height:1.8;
  margin:0;
}


/* =========================================================
   ABOUT
   ========================================================= */

.ab-about{
  padding:80px 0;
}

.ab-about__hero{
  background:linear-gradient(135deg,var(--ink) 0%,#24241f 100%);
  color:#fff;
  padding:100px 0;
  text-align:center;
  margin-bottom:60px;
}

.ab-about__hero h1{
  font-size:64px;
  margin:0 0 20px;
}

.ab-about__hero p{
  font-size:20px;
  max-width:700px;
  margin:0 auto;
  line-height:2;
}

.ab-about__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:center;
  margin-bottom:80px;
}

.ab-about__text h2{
  font-size:42px;
  margin:0 0 24px;
}

.ab-about__text p{
  font-size:16px;
  line-height:2;
  color:var(--smoke);
  margin:0 0 20px;
}

.ab-about__img img{
  border-radius:12px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.3);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .ab-card,
  .ab-product-card,
  .ab-category-card,
  .ab-feature,
  .ab-post,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .ab-card img,
  .ab-product-card img,
  .ab-category-card img,
  .ab-feature img,
  .ab-post__image img,
  .woocommerce ul.products li.product img{
    transition:none!important;
  }

  .ab-card:hover,
  .ab-product-card:hover,
  .ab-category-card:hover,
  .ab-feature:hover,
  .ab-post:hover,
  .woocommerce ul.products li.product:hover,
  .woocommerce-page ul.products li.product:hover{
    transform:none;
  }
}


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

@media(max-width:700px){

  .ab-card:hover,
  .ab-product-card:hover,
  .ab-category-card:hover,
  .ab-feature:hover,
  .ab-post:hover,
  .woocommerce ul.products li.product:hover,
  .woocommerce-page ul.products li.product:hover{
    transform:translateY(-4px);
  }

  .ab-card:hover img,
  .ab-product-card:hover img,
  .ab-category-card:hover img,
  .ab-feature:hover img,
  .ab-post:hover .ab-post__image img,
  .woocommerce ul.products li.product:hover img{
    transform:scale(1.025);
  }

}

@media(max-width:760px){

  .ab-grid,
  .ab-grid--posts{
    grid-template-columns:1fr;
  }

  .ab-cats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ab-features{
    grid-template-columns:1fr;
  }

  .ab-section{
    padding:60px 0;
  }

}

@media(max-width:480px){

  .container{
    padding:0 16px;
  }

  .ab-cats{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .ab-cat{
    padding:12px;
  }

  .ab-card__body{
    padding:16px;
  }

}