/*!
Theme Name: aamra_theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aamra_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

aamra_theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.woocommerce-tabs.wc-tabs-wrapper p, .woocommerce-product-details__short-description p {
    padding: 10px 0 !important;
}
.summary.entry-summary h1.product_title.entry-title {
    font-size: 30px;
    padding-bottom: 20px !important;
}
.single.single-product .section-padding {
    padding: 30px 0;
}
.hero-button.home_content_btn.mt-20 {
    margin-top: 30px;
}
span.posted_in a {
    color: #024e19;
    font-weight: bold;
}


.header-main a.logo img {
    width: 200px;
}
.main-menu {
    display: inline-block;
    float: right;
}
.top_header {
    background-color: var(--theme);
     padding: 5px 0;
}
ul.top_contact li {
    display: inline;
    margin-right: 15px;
    color: var(--body);
    font-size: 15px;
}
.top_header ul.social-icon li {
    display: inline-block;
    margin-right: 15px;
    color: var(--body);
}
.top_right {
    float: right;
}
.color-white{
    color: var(--body);
}
ul.top_contact i{
    margin-right: 5px;
}
.color-black{
    color: var(--black);
}
a.footerLogo img {
    width: 150px;
}
.footer-section{
    background-color:#153243 !important;
}
.footer-bottom .footer-wrapper p {
    font-size: 14px;
}
.footer-bottom ul > li a {
    font-size: 14px;
}
ul.top_contact a, .top_right ul.social-icon a{
	color: var(--body);
}



/*Services*/

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  @media (max-width: 900px) {
    .service-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

  .service-box {
    border-radius: 12px;
    padding: 28px 20px 32px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
  }

  .service-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
  }

  .service-box:hover .service-icon svg {
    transform: scale(1.08);
  }

  .service-icon {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .service-icon svg {
    width: 110px;
    height: 110px;
    transition: transform 0.35s ease;
  }

  .service-content {
    margin-top: auto;
  }

  .service-box h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
  }

  .service-box p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
  }

  /* Box 1 - Amber */
  .box-amber {
    background: #FAEEDA;
  }
  .box-amber h3 {
    color: #412402;
  }
  .box-amber p {
    color: #633806;
  }

  /* Box 2 - Blue */
  .box-blue {
    background: #E6F1FB;
  }
  .box-blue h3 {
    color: #042C53;
  }
  .box-blue p {
    color: #0C447C;
  }

  /* Box 3 - Green */
  .box-green {
    background: #EAF3DE;
  }
  .box-green h3 {
    color: #173404;
  }
  .box-green p {
    color: #27500A;
  }

  /* Box 4 - Purple */
  .box-purple {
    background: #EEEDFE;
  }
  .box-purple h3 {
    color: #26215C;
  }
  .box-purple p {
    color: #3C3489;
  }
section.product-section {
    background: #fafafa;
}
.home_content p{
    margin-bottom: 20px;
}

/*Product*/
@keyframes pFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .p-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .p-card {
    animation: pFadeUp 0.55s cubic-bezier(.2,.8,.2,1) both;
    color: inherit;
    display: block;
  }
  .p-card:nth-child(1) { animation-delay: 0s; }
  .p-card:nth-child(2) { animation-delay: 0.09s; }
  .p-card:nth-child(3) { animation-delay: 0.18s; }
  .p-card:nth-child(4) { animation-delay: 0.27s; }
  .p-card:nth-child(5) { animation-delay: 0.36s; }

  .p-img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: #eceae6;
    margin-bottom: 12px;
  }
  .p-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
  }
  .p-img-wrap img.p-img-main { position: relative; z-index: 1; }
  .p-card:hover .p-img-wrap img.p-img-main { opacity: 0; }
  .p-img-wrap img.p-img-hover {
    position: absolute; inset: 0; opacity: 0;
    transform: scale(1.04); z-index: 0;
  }
  .p-card:hover .p-img-wrap img.p-img-hover { opacity: 1; transform: scale(1.1); }

  /* Clickable image link that opens the lightbox */
  .p-img-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: zoom-in;
  }

  .p-tag {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    padding: 4px 9px; border-radius: 5px;
    background: #111; color: #fff;
    pointer-events: none;
  }
  .p-tag.sale { background: #fdecec; color: #d32f2f; }

  .p-quick {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
    display: flex; gap: 6px;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }
  .p-card:hover .p-quick { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .p-btn-cart {
    flex: 1; background: #fff; color: #111; border: none;
    font-size: 11.5px; font-weight: 600; padding: 9px 0; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; transition: background 0.25s;
  }
  .p-btn-cart:hover { background: #f0f0f0; }
  .p-btn-cart svg { width: 13px; height: 13px; }

  .p-btn-wish {
    width: 34px; flex-shrink: 0; background: rgba(255,255,255,0.95); border: none;
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.25s;
  }
  .p-btn-wish:hover { background: #fff; }
  .p-btn-wish svg { width: 15px; height: 15px; stroke: #111; fill: none; }

  .p-swatches { display: flex; gap: 5px; margin-bottom: 6px; }
  .p-swatch {
    width: 14px; height: 14px; border-radius: 999px;
    border: 1.5px solid rgba(0,0,0,0.08); display: inline-block;
  }

  .p-cat {
    font-size: 10.5px; color: #999; text-transform: uppercase;
    letter-spacing: 0.5px; margin: 0 0 4px;
  }
  .p-name {
    font-size: 13.5px; font-weight: 500; margin: 0 0 6px;
    line-height: 1.35; color: #1a1a1a;
  }

  .p-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
  .p-rating svg { width: 11px; height: 11px; fill: #f5a623; }
  .p-rating span { font-size: 10.5px; color: #999; }

  .p-price-row { display: flex; align-items: baseline; gap: 7px; }
  .p-price { font-size: 14px; font-weight: 700; color: #1a1a1a; }
  .p-price-old { font-size: 11.5px; color: #999; text-decoration: line-through; }

  @media (max-width: 980px) {
    .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  }

  /* ---------- CSS-only Lightbox (no JavaScript) ---------- */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, background 0.35s ease;
  }
  .lightbox:target {
    background: rgba(10,10,10,0.9);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  }
  .lightbox:target .lightbox-inner {
    transform: scale(1);
  }

  .lightbox-inner img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  .lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  .lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }
  .lightbox-close svg {
    width: 16px; height: 16px;
    stroke: #111; fill: none;
    stroke-width: 2; stroke-linecap: round;
  }

  /* Clicking the dark backdrop also closes it (the whole .lightbox is a link to #) */
  .lightbox-backdrop-link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /*End*/



/*Hero Banner*/
.hero-1 .hero-height {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-1 .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.hero-1 .container-fluid {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* মূল ফিক্স এখানে */
.hero-1 .hero-content {
    display: flex;
    flex-direction: column;   /* এটাই মূল সমাধান — সব উপাদান নিচের দিকে stack হবে */
    align-items: flex-start;  /* left align */
    gap: 16px;
    max-width: 700px;
}

.hero-1 .hero-content .sub-title {
    display: inline-block;
   
}

.hero-1 .hero-content h1 {
    margin: 0;
    line-height: 1.2;
    font-size: 45px;

}

.hero-1 .hero-content p {
    margin: 0;
    max-width: 600px;
}

.hero-1 .hero-button {
    margin-top: 24px;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1350px;
}


/*Gallery*/
.magnific-img {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}
.magnific-img i.fa.fa-search-plus {
    position: absolute;
    bottom: 34px;
    background: #ff9819;
    color: #fff;
    right: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-radius: 12px 0px 0px 0px;
}

.magnific-img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  height: 360px;
}

/*.magnific-img {
  display: inline-block;
  width: 32.3%;
}*/
a.image-popup-vertical-fit {
  cursor: -webkit-zoom-in;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.98;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}
.mfp-arrow-left:before {
  border-right: none !important;
}
.mfp-arrow-right:before {
  border-left: none !important;
}
button.mfp-arrow,
.mfp-counter {
  opacity: 0 !important;
  transition: opacity 200ms ease-in, opacity 2000ms ease-out;
}
.mfp-container:hover button.mfp-arrow,
.mfp-container:hover .mfp-counter {
  opacity: 1 !important;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #ccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}
.mfp-preloader a {
  color: #ccc;
}
.mfp-preloader a:hover {
  color: #fff;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #fff;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}
.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #fff;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
  margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}
.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}
.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}
.mfp-arrow-left:after {
  border-right: 17px solid #fff;
  margin-left: 31px;
}
.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3f3f3f;
}

.mfp-arrow-right {
  right: 0;
}
.mfp-arrow-right:after {
  border-left: 17px solid #fff;
  margin-left: 39px;
}
.mfp-arrow-right:before {
  border-left: 27px solid #3f3f3f;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}
.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}
.mfp-figure small {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 14px;
}
.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
  screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}


.cta-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.default_content_box p {
    margin-bottom: 20px;
}
.default_content_box h2,
.default_content_box h1,
.default_content_box h3,
.default_content_box h4,
.default_content_box h5,
.default_content_box h6 {
  margin-bottom: 20px;
}




.mcc-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

ul.list li {
    color: #fff;
    line-height: 30px;
    font-size: 16px;
}
ul.list li i {
    margin-right: 10px;
}
ul.list {
    margin-top: 20px;
}




@media (max-width:767px){    
    .hide{
        display:none !important;
    }
    ul.top_contact {
        text-align: center;
        font-size: 20px;
    }
    a.logo img {
        margin-top: 8px;
        padding-bottom: 8px;
    }
    .header-main .sidebar__toggle {
        font-size: 28px;
        margin-top: -38px;
    }

    .hero-1 .hero-content h1 {
        font-size: 30px;
    }
	.mcc-grid {
	    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}


}   




/*Product */

/* ============================================================
   Rebirth Labs — WooCommerce Product List Redesign
   Drop this into: Appearance > Customize > Additional CSS
   OR enqueue via your child theme's style.css
   ============================================================ */



/* ── Root tokens ── */
:root {
  --rl-green-dark:   #0b3286;
  --rl-green-mid:    #0b3286;
  --rl-green-light:  #E1F5EE;
  --rl-green-accent: #fff;
  --rl-badge-bg:     #0b3286;
  --rl-badge-text:   #E1F5EE;
  --rl-card-bg:      #ffffff;
  --rl-card-border:  rgba(0, 0, 0, 0.08);
  --rl-card-radius:  16px;
  --rl-img-bg:       #f7f6f2;
}

/* ── Product Grid ── */


/* ── Individual Card ── */
ul.products li.product {
  background: var(--rl-card-bg);
  border: 0.5px solid var(--rl-card-border);
  border-radius: var(--rl-card-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; 
}

ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: #0c3388;
  box-shadow: 0 12px 32px rgba(15, 46, 38, 0.10);
}

/* ── Product Image Area ── */
ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  background: var(--rl-img-bg);
  padding: 0.20rem;
  text-align: center;
  text-decoration: none;
}

ul.products li.product a.woocommerce-loop-product__link img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

ul.products li.product:hover a.woocommerce-loop-product__link img {
  transform: scale(1.04);
}

/* ── Sale Badge ── */
ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--rl-badge-bg) !important;
  color: var(--rl-badge-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  min-width: unset !important;
  min-height: unset !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.6 !important;
  z-index: 2;
}

/* ── Product Info Block ── */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.35 !important;
    margin: 8px 5px 8px !important;
    padding: 0 !important;
}

/* ── Price ── */
ul.products li.product .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 16px 14px !important;
  flex-wrap: wrap;
}

ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
  font-size: 12px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  opacity: 1 !important;
}

ul.products li.product .price ins,
ul.products li.product .price ins .woocommerce-Price-amount {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--rl-green-mid) !important;
  text-decoration: none !important;
  background: none !important;
}

/* Price range (no sale) */
ul.products li.product .price > .woocommerce-Price-amount {
  font-size: 14px !important;
  color: #555 !important;
  font-weight: 500 !important;
}

/* ── Add to Cart / Select Options Button ── */
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .add_to_cart_button,
ul.products li.product .product_type_variable {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 32px) !important;
  margin: auto 16px 16px !important;
  padding: 10px 0 !important;
  background: var(--rl-green-dark) !important;
  color: var(--rl-green-accent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: background 0.18s ease, transform 0.12s ease !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product .add_to_cart_button:hover,
ul.products li.product .product_type_variable:hover {
  background: #be1c2e.service8-scetion-area .service8-boxarea:hover !important;
  color: var(--rl-green-accent) !important;
  transform: none !important;
}

ul.products li.product .button:active,
ul.products li.product a.button:active {
  transform: scale(0.97) !important;
}

/* Loading state */
ul.products li.product .add_to_cart_button.loading {
  opacity: 0.7 !important;
}

/* Added state */
ul.products li.product .add_to_cart_button.added {
  background: var(--rl-green-mid) !important;
}

/* ── Star Ratings ── */
ul.products li.product .star-rating {
  margin: 0 16px 6px !important;
  color: var(--rl-green-mid) !important;
}

ul.products li.product .star-rating span::before,
ul.products li.product .star-rating::before {
  color: var(--rl-green-mid) !important;
}

/* ── Sidebar / Filter Widgets ── */
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--rl-green-mid) !important;
}

.widget_price_filter .price_slider_amount .button {
  background: var(--rl-green-dark) !important;
  color: var(--rl-green-accent) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  padding: 7px 18px !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}

.widget_price_filter .price_slider_amount .button:hover {
  background: #1D4A3A !important;
}

/* ── Category Widget ── */
.widget_product_categories ul li a {
  color: #333;
  transition: color 0.15s;
}
.widget_product_categories ul li a:hover {
  color: var(--rl-green-mid);
}

/* ── Search Widget ── */
.widget_product_search input[type="search"] {
  border-radius: 8px !important;
  border: 0.5px solid rgba(0,0,0,0.15) !important;
  padding: 9px 14px !important;
  transition: border-color 0.18s !important;
}

.widget_product_search input[type="search"]:focus {
  border-color: var(--rl-green-mid) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
}