/* Basic wrapper spacing */
.atswc-wrap { margin: 20px 0; }

/* 2-column layout: left filters, right products */

.atswc-layout { 
  display: grid; 
  grid-template-columns: 280px 800px; 
  gap: 24px; 
  align-items: start;
}

@media (max-width: 1024px) { .atswc-layout { grid-template-columns: 1fr; } }
/*22sept2025*/
/* Products grid */
.atswc-grid {
  display: grid;
  grid-template-columns: repeat(3, 250px); /* 3 fixed columns */
  gap: 20px;
  /* justify-content: center;  */
}

/* Ensure each card behaves consistently */
.atswc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
/* responsive grid breakpoints (keeps it fluid) */
@media (min-width: 1280px) and (max-width: 1367px){
  .atswc-grid {
    display: grid;
    grid-template-columns: repeat(3, 276px)!important;
}
.atswc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 106%;
  box-sizing: border-box;
  /* gap: 70% !important; */
}
.atswc-thumbwrap {
  width: 260px !important;
  height: 375px;
  background: #fafafa;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
}

@media (min-width:1025px) and (max-width: 1280px) {
  .atswc-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .atswc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  #atswc-sort-select {
    padding-right: 40em;
}
.atswc-filters {
  padding: 24px 24px 24px 24px !important;
}
.atswc-checks {
  display: flex !important;
  gap: 20px;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
  width: 100%;
  padding: 0.5rem 0rem;
  transition: all .3s;
}
#atswc-sort-select {
  padding-right: 98px !important;
}
.atswc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  gap: 51% !important;
}
}
@media (min-width: 481px) and (max-width: 768px) {
  .atswc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .atswc-grid { grid-template-columns: 1fr; gap: 35px !important; }
  #atswc-sort-select {
    padding-right: 235px;
}
.atswc-filters {
  padding: 24px 24px 24px 24px !important;
}
.atswc-sortby {
  width: 100% !important;
}
#atswc-sort-select {
  padding-right: 240px !important;
}
.atswc-topbar {
  display: flex;
  margin-bottom: 20px;
  row-gap: 20px;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
}
.atswc-filters {
  padding: 24px 24px 24px 24px;
}
}

/* product card */
.atswc-item {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/*22sept2025*/
/* Wrapper defines fixed card size */
.atswc-thumbwrap {
  width: 305px;
  height: 375px;
  background: #fafafa;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Target ONLY shortcode images */
.atswc-thumbwrap img.atswc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle image hover */
.atswc-item:hover .atswc-thumb { transform: scale(1.03); }

/* SKU above title — small uppercase */
.atswc-sku {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #8f6b66; /* subtle brown-ish like figma */
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* LEFT: Filters panel */
.atswc-filters {
  background: #F6F3EF;
  padding: 75px 24px;
  border-radius: 10px;
}
.atswc-block { margin-bottom: 16px; }
/* Label styling */
.atswc-sortby .atswc-label {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}

p {
  color: #838383;
  margin-top: 10px;
  margin-bottom: 5px;

}
/* labels & blocks */
.atswc-block { margin-bottom: 18px; }
.atswc-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #272727;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* Attribute terms list */
.atswc-checks { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 220px; overflow: auto; }
.atswc-check input { margin-right: 8px; }
label.atswc-check {
  font-family: "Cabin", sans-serif;
  line-height: 22px;
  font-weight: 400;
  font-size: 17px;
  color: #696969;
}
.atswc-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.atswc-actions button {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #6B4033 !important;
  background: #F6F3EF !important;
  border: 1px solid #6B4033 !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  font-family: "Cabin", sans-serif;
}
.atswc-actions button:hover {
  background: transparent;
  color: #F6C072 !important;
}

/* No-filter message */
.atswc-nofilter {
  font-size: 14px;
  color: #666666;
  font-style: italic;
  margin-top: 6px;
}

/* RIGHT: Results */
.atswc-results { position: relative; }

.atswc-topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 600;
}
.atswc-found {
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  color: #000000;
  font-family: "Cabin", sans-serif;
  text-wrap: nowrap;
}
/* Select dropdown styling */
/* Select dropdown styling */
.atswc-sortby {
  border-bottom: 1px solid #AAAAAA;
  width: 25%;
}

#atswc-sort-select {
  border: none;
  background-color: #F6F3EF;
  font-size: 14px;
  color: #AAAAAA;
  cursor: pointer;
  padding: 6px 0px;

  /* Remove browser default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom down chevron (#3B3B3B) */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%233B3B3B' xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 30px; /* ensures text doesn't overlap arrow */
}

/* Hover/focus state */
#atswc-sort-select:hover,
#atswc-sort-select:focus {
  border-color: #5F803F;
  outline: none;
}

p.atswc-short-desc {
  text-align: left;
  color: #838383;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
  width: 100%;
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 0rem;
  transition: all .3s;
}


/* Loader overlay (shown during AJAX) */
.atswc-loader {
  position: absolute; inset: 0;
  display: none; align-items: center; 
  justify-content: center;
  /* background: rgba(255,255,255,0.6); */
  /* background:#7e5446; */
  /* background: rgba(126, 84, 70, 0.4); */
  background: #f6f3ef;
  z-index: 2; border-radius: 10px;
}
.atswc-loader.is-active { display: flex; }
.atswc-loader .spinner {
  width: 36px; height: 36px; border-radius: 50%;
  /* border: 3px solid #ddd; 
  border-top-color: #666; */
  /* fully transparent */
  /* background: rgba(0, 0, 0, 0);  */
  border: 3px solid #6e8f4b; 
  border-top-color: rgba(126, 84, 70, 0.4);
  animation: atswc-spin 0.8s linear infinite;
}
@keyframes atswc-spin { to { transform: rotate(360deg); } }

/* Product grid */
.atswc-list[data-state="loading"] { opacity: 0.6; }
.atswc-placeholder, .atswc-empty { padding: 20px; border:1px dashed #ddd; border-radius: 8px; text-align:center; }

/* .atswc-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 1280px){ .atswc-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width: 1024px){ .atswc-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px){ .atswc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .atswc-grid{ grid-template-columns: 1fr; } } */

.atswc-item { display:block; text-decoration:none;   overflow:hidden;  }
.atswc-thumbwrap { aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; background:#fafafa; overflow:hidden; }
.atswc-thumb { width:100%; height:100%; object-fit:cover; }
.atswc-noimg { width:100%; height:100%; background:linear-gradient(45deg,#f2f2f2,#e9e9e9); }
/* product title */
.atswc-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #272727;
  line-height: 1.35;
  text-align: left;
}

/* Load more button */
.atswc-pager { text-align:center; margin-top: 16px; }
.atswc-loadmore {
  padding: 10px 20px;
  border: 1px solid #6B4033 !important;
  background: #F6F3EF !important;
  color: #6B4033 !important;
  font-weight: 500;
  cursor: pointer;
  font-family: "Cabin", sans-serif !important;
}
.atswc-loadmore:hover {
  background: transparent;
  color: #F6C072 !important;
}

/* PhotoSwipe: custom caption at bottom */
.pswp__caption--custom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
}
/*23 sept 2025*/
/* div.pswp__zoom-wrap > img.pswp__img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
} */

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover{
  background-color: transparent;
  color: #F6C072 !important;
  border: 1px solid #6B4033 !important;
}

/* 30-sep-2025 */
.pswp__img{
  width: 350px !important;
  height: auto !important;
  padding-top: 60px !important;
}

.pswp__zoom-wrap{
  transform: translate3d(800px, 0px, 0px) scale3d(1, 1, 1) !important;
}

.pswp--zoom-allowed .pswp__button--zoom{
  display: none !important;
}


/* Mobile screens */
/* Mobile screens (max-width:480px) — styles above will not apply */
@media (max-width: 480px) {
  .pswp__img {
        /* width: initial !important; */
    /* height: auto !important; */
    padding-top: 84px !important;
    padding-left: 55px !important;
  }

  .pswp__zoom-wrap {
    transform: none !important;
  }

}
/* Laptops: 1366px to 1919px */
@media (min-width: 1366px) and (max-width: 1919px) {
  .pswp__zoom-wrap {
    transform: translate3d(502px, -30px, 0px) scale3d(1, 1, 1) !important;
  }
}

/* Large Desktops: 1920px and above */
@media (min-width: 1920px) {
  .pswp__zoom-wrap {
    transform: translate3d(800px, 0px, 0px) scale3d(1, 1, 1) !important;
  }
}


/* iPad Mini Portrait */
@media (min-width: 485px) and (max-width: 1024px) and (orientation: portrait) {
  .pswp__img {
  width: 450px;
  height: auto;
  margin-top: 60px;
  }
  
  .pswp__zoom-wrap {
  transform: translate3d(205px, 0, 0) scale3d(1, 1, 1) !important;
  }

  }
  
/* Merge: preserve current product figure wrapper */
.atswc-figure { margin: 0; display: flex; align-items: center; justify-content: center; }

.pswp__button--arrow--prev.pswp__button--arrow {
  background-color: transparent !important;
  border: none !important;
}
button.pswp__button.pswp__button--close {
  background-color: transparent !important;
  border: none !important;
}
button.pswp__button.pswp__button--arrow--next.pswp__button--arrow.pswp__hide-on-close {
  background-color: transparent !important;
  border: none !important;
}
.pswp {
  --pswp-placeholder-bg: transparent !important;
  }

/* =============================
  Landscape Mode (Readymade Furniture)
  ------------------------------------
  Applies only when JS adds `pswp--landscape-mode` to the PhotoSwipe root.
  Keeps existing portrait behavior intact elsewhere.
  - Removes portrait-only width/padding hacks.
  - Lets PhotoSwipe fully control centering via its own transforms.
  ============================= */
  .pswp.pswp--landscape-mode .pswp__img {
    /* Force a consistent desktop width for landscape images */
    width: 900px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
  }
  
/* Do not override zoom-wrap transform in CSS; JS sets exact inline transform
    (with !important) from PhotoSwipe's current pan/zoom to avoid theme overrides. */
.pswp.pswp--landscape-mode .pswp__zoom-wrap { }

/* For mobile screens (up to 767px) */
@media (max-width: 767px) {
  .pswp.pswp--landscape-mode .pswp__img {
    width: 350px !important;
    height: auto !important;
    padding-top: 235px !important;
    padding-left: 40px !important;
  }
}
/* Mobile adjustments for landscape mode */
@media (min-width: 768px) and (max-width: 1024px) {
    /* On tablet/mobile, keep responsive width so it fits viewport */
    .pswp.pswp--landscape-mode .pswp__img { 
      width: 75vw !important;
      height: auto !important;
      position: absolute;
      top: 240px;
      left: -101px;
      height: auto !important;
    }
  }

  /* Desktop-only hard offset to visually center for the Readymade Furniture
     category. Scoped strictly to PhotoSwipe + this category so other
     categories remain unchanged. */
  @media (min-width: 1025px) {
    .pswp.pswp--landscape-mode img.pswp__img {
      position: absolute !important;
      left: -278px !important;
      top: 65px !important;
    }
  }

/* Let PhotoSwipe control centering via its transforms; JS will ensure inline
  transforms have priority only for this category. Keep image sizing only. */
.pswp.pswp--landscape-mode .pswp__img { display: block !important; margin: 0 auto !important; }