/* ============================================================
   RAMIRENT TILE SYSTEM (Woo + Post Category Archives)
   Clean / single-layout version (sidebar + tiles)
   ============================================================ */

:root{
  --ram-gap-desktop: 28px;
  --ram-gap-tablet: 22px;
  --ram-gap-mobile: 16px;

  --ram-max-width: 1480px;
  --ram-pad-desktop: 20px;
  --ram-pad-tablet: 16px;
  --ram-pad-mobile: 14px;

  --ram-radius: 12px;
  --ram-shadow: 0 10px 22px rgba(0,0,0,.18);

  --ram-overlay-a: rgba(0,0,0,.55);
  --ram-overlay-b: rgba(0,0,0,.22);
  --ram-overlay-c: rgba(0,0,0,0);
}

/* safety */
.woocommerce a,
.archive a,
.woocommerce img,
.archive img,
.archive figure,
.archive .wp-block-image{
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ============================================================
   A) WOO SIDEBAR LAYOUT (Shop + Product categories)
   ============================================================ */

.woocommerce .rami-shop-layout{
  display:flex;
  gap:40px;
  align-items:flex-start;
  max-width:var(--ram-max-width);
  margin:0 auto;
  padding:0 var(--ram-pad-desktop);
}

.woocommerce .rami-shop-filters{
  flex:0 0 320px;
  width:320px;
}

.woocommerce .rami-shop-products{
  flex:1 1 auto;
  min-width:0; /* prevents shrink bugs */
}

/* ============================================================
   B) WOO GRID (applies inside right column only)
   ============================================================ */

.woocommerce .rami-shop-products ul.products{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:var(--ram-gap-desktop) !important;

  width:100% !important;
  max-width:none !important;
  margin:0 0 80px !important;
  padding:0 !important;

  list-style:none !important;
  box-sizing:border-box !important;

  justify-items:stretch !important;
  align-items:stretch !important;
}

/* kill Woo clearfix */
.woocommerce .rami-shop-products ul.products::before,
.woocommerce .rami-shop-products ul.products::after{
  content:none !important;
  display:none !important;
}

/* neutralize width/float rules */
.woocommerce .rami-shop-products ul.products > li{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* responsive */
@media (max-width:1200px){
  .woocommerce .rami-shop-products ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:var(--ram-gap-tablet) !important;
  }
}
@media (max-width:900px){
  .woocommerce .rami-shop-layout{ flex-direction:column; }
  .woocommerce .rami-shop-filters{ width:100%; flex:1 1 auto; }
  .woocommerce .rami-shop-products ul.products{
    grid-template-columns:1fr !important;
    gap:var(--ram-gap-mobile) !important;
  }
}

/* ============================================================
   C) CATEGORY TILE (Shop page) — uses content-product_cat.php
   ============================================================ */

.woocommerce .ramirent-cat-tile__link{
  position:relative !important;
  display:block !important;
  width:100% !important;

  overflow:hidden !important;
  border-radius:var(--ram-radius) !important;
  box-shadow:var(--ram-shadow) !important;
  text-decoration:none !important;

  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:50% 35% !important;

  transition:transform .2s ease, filter .2s ease !important;
}

/* height */
.woocommerce .ramirent-cat-tile__link::before{
  content:"" !important;
  display:block !important;
  padding-top:52% !important;
}

/* overlay */
.woocommerce .ramirent-cat-tile__overlay{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    to top,
    var(--ram-overlay-a) 0%,
    var(--ram-overlay-b) 55%,
    var(--ram-overlay-c) 78%
  ) !important;
  pointer-events:none !important;
}

.woocommerce .ramirent-cat-tile__title{
  position:absolute !important;
  left:22px !important;
  bottom:20px !important;
  margin:0 !important;

  color:#fff !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  max-width:88% !important;

  text-shadow:0 4px 18px rgba(0,0,0,.55) !important;
}

.woocommerce .ramirent-cat-tile__title::after{
  content:"" !important;
  display:block !important;
  width:42px !important;
  height:4px !important;
  margin-top:10px !important;
  background:#ffd200 !important;
  border-radius:2px !important;
}

.woocommerce .ramirent-cat-tile__link:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.02) !important;
}

/* ============================================================
   D) PRODUCT TILE (Category pages) — uses content-product.php
   ============================================================ */

.woocommerce .ramirent-prod-tile__link{
  position:relative !important;
  display:block !important;
  width:100% !important;

  overflow:hidden !important;
  border-radius:var(--ram-radius) !important;
  box-shadow:var(--ram-shadow) !important;

  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:50% 35% !important;
}

/* height */
.woocommerce .ramirent-prod-tile__link::before{
  content:"" !important;
  display:block !important;
  padding-top:52% !important;
}

.woocommerce .ramirent-prod-tile__overlay{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    to top,
    var(--ram-overlay-a) 0%,
    var(--ram-overlay-b) 55%,
    var(--ram-overlay-c) 78%
  ) !important;
  pointer-events:none !important;
}

.woocommerce .ramirent-prod-tile__title{
  position:absolute !important;
  left:22px !important;
  bottom:52px !important;
  margin:0 !important;

  color:#fff !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  max-width:88% !important;

  text-shadow:0 4px 18px rgba(0,0,0,.55) !important;
}

.woocommerce .ramirent-prod-tile__title::after{
  content:"" !important;
  display:block !important;
  width:42px !important;
  height:4px !important;
  margin-top:10px !important;
  background:#ffd200 !important;
  border-radius:2px !important;
}

/* buttons */
.woocommerce .ramirent-prod-tile__actions{
  position:absolute !important;
  right:22px !important;
  bottom:16px !important;
  z-index:10 !important;

  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}

.woocommerce .ramirent-prod-tile__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  white-space:nowrap !important;
  word-break:keep-all !important;

  height:38px !important;
  min-width:56px !important;
  padding:0 14px !important;
  border-radius:10px !important;

  background:rgba(255,255,255,.92) !important;
  color:#0b2a57 !important;

  font-weight:800 !important;
  font-size:14px !important;
  line-height:1 !important;
  text-decoration:none !important;

  border:0 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

.woocommerce .ramirent-prod-tile__btn::before,
.woocommerce .ramirent-prod-tile__btn::after{
  content:none !important;
  display:none !important;
}

/* ============================================================
   E) POST CATEGORY ARCHIVES (/category/.../) — keep your old styles
   ============================================================ */

body.archive.category .archive-title{ display:none !important; }

body.archive.category main#site-content{
  max-width:1480px !important;
  margin:0 auto 80px !important;
  padding:0 20px !important;
  box-sizing:border-box !important;
}

body.archive.category .archive-items{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:28px !important;
}

body.archive.category article.post-card{
  position:relative !important;
  border:0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
  background:#fff !important;

  aspect-ratio:405.33 / 210.77 !important;
}

body.archive.category a.post-card__link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  text-decoration:none !important;
  border:0 !important;
  outline:0 !important;
}

body.archive.category .post-card__image,
body.archive.category .post-card__image figure,
body.archive.category .post-card__image .wp-block-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}
body.archive.category .post-card__image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:50% 35% !important;
  border:0 !important;
  outline:0 !important;
}

body.archive.category .post-card__image::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.20) 55%,
    rgba(0,0,0,0) 78%
  ) !important;
}

body.archive.category .post-card__content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  padding:18px 22px !important;
  background:transparent !important;
  pointer-events:none !important;
}

body.archive.category .post-card__title{
  margin:0 !important;
  color:#fff !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  max-width:88% !important;
  text-shadow:0 4px 18px rgba(0,0,0,.60) !important;
}

body.archive.category .post-card__title::after{
  content:"" !important;
  display:block !important;
  width:42px !important;
  height:4px !important;
  margin-top:10px !important;
  background:#ffd200 !important;
  border-radius:2px !important;
}

body.archive.category .post-card__footer,
body.archive.category .post-card__cta,
body.archive.category .wp-block-button{
  display:none !important;
}

@media (max-width:1100px){
  body.archive.category .archive-items{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:22px !important;
  }
}
@media (max-width:768px){
  body.archive.category .archive-items{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  body.archive.category .post-card__title{ font-size:18px !important; }
}
@media (max-width:768px){
  body.archive.category .block-root{
    padding-left:8px !important;
    padding-right:8px !important;
  }
}
/* ===== FINAL OVERRIDE: Fix tiny Woo tiles in sidebar layout ===== */

/* make sure right side can grow */
.woocommerce .rami-shop-products{
  width: 100% !important;
  min-width: 0 !important;
}

/* force UL grid */
.woocommerce .rami-shop-products ul.products{
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* kill any floats/widths from theme */
.woocommerce .rami-shop-products ul.products > li.product,
.woocommerce .rami-shop-products ul.products > li.product-category{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* force the tile itself to fill the grid cell */
.woocommerce .rami-shop-products .ramirent-prod-tile__link{
  display:block !important;
  width:100% !important;
}

/* enforce height ratio again */
.woocommerce .rami-shop-products .ramirent-prod-tile__link::before{
  content:"" !important;
  display:block !important;
  padding-top:52% !important;
}

/* tablet / mobile */
@media (max-width:1200px){
  .woocommerce .rami-shop-products ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width:900px){
  .woocommerce .rami-shop-layout{ flex-direction: column !important; }
  .woocommerce .rami-shop-filters{ width:100% !important; }
  .woocommerce .rami-shop-products ul.products{
    grid-template-columns: 1fr !important;
  }
}