/* Ramki Cards homepage product cards | KingOfCards-inspired cleanup
   2026-10-21 final homepage product-card override.
   Scope: only homepage/product-carousel cards in main.rc-new.
   Purpose:
   - fill every photo frame edge-to-edge without internal image padding,
   - keep title and price only once below the image,
   - match the requested reference card proportion more closely,
   - preserve PHP data, links, sliders and product-gallery JS.
*/

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #ebe6df !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 12px rgba(42, 24, 18, 0.06) !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Force the product media to remain a clean image-only area. */
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  aspect-ratio: auto !important;
  background: #e9dbc7 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  padding: 0 !important;
  isolation: isolate !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media::before,
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media::after,
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy::before,
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy::after {
  content: none !important;
  display: none !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  scale: 1 !important;
}

/* Card controls remain in the PHP markup; restore their presentation.
   These rules intentionally supersede the older theme layers without changing
   the full-cover image sizing or the gallery arrow/listener behaviour. */
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-heart {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 15 !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #fff !important;
  color: #850c28 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  cursor: pointer !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-heart[aria-pressed="true"] {
  background: #850c28 !important;
  color: #fff !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-enquire {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 14 !important;
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #87001c !important;
  color: #fff !important;
  font: 600 12px/20px 'Josefin Sans', 'Lato', Arial, sans-serif !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(100%) !important;
  cursor: pointer !important;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease !important;
}

/* Both hover over the whole card and keyboard focus restore the actions. */
@media (hover: hover) and (pointer: fine) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product:hover > .rc-product-media > button.rc-heart,
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product:focus-within > .rc-product-media > button.rc-heart {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product:hover > .rc-product-media > button.rc-enquire,
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product:focus-within > .rc-product-media > button.rc-enquire {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-enquire:hover {
  background: #710017 !important;
}
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-heart:focus-visible,
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-enquire:focus-visible {
  outline: 2px solid #f6be5e !important;
  outline-offset: -3px !important;
}

/* Touchscreens cannot rely on hover; keep the controls operable. */
@media (hover: none), (pointer: coarse) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-heart {
    width: 34px !important;
    height: 34px !important;
    top: 7px !important;
    right: 7px !important;
    font-size: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > button.rc-enquire {
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 11px !important;
    line-height: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* Product gallery arrows may remain, but keep them visually compact and image-only. */
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > .rc-gallery-arrow {
  z-index: 4 !important;
}

/* Clean bottom content area: only title + price once. */
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 0 auto !important;
  gap: 0 !important;
  padding: 18px 22px 20px !important;
  background: #ffffff !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  max-height: 2.7em !important;
  margin: 0 0 12px !important;
  font-family: 'Josefin Sans', 'Lato', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #1d1a17 !important;
  text-align: left !important;
  text-decoration: none !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > .rc-product-price {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Josefin Sans', 'Lato', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #c42016 !important;
  text-align: left !important;
}

html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > .rc-product-price del {
  margin-left: 7px !important;
  color: #867d77 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Prevent older theme layers from visually pushing product copy into the media block. */
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > * {
  position: relative !important;
}

/* Desktop sizing close to the provided King of Cards card proportion. */
@media (min-width: 1200px) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

@media (min-width: 851px) and (max-width: 1199px) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy {
    padding: 16px 18px 18px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > a {
    font-size: 15px !important;
  }
}

@media (max-width: 850px) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product {
    box-shadow: 0 2px 10px rgba(42, 24, 18, 0.05) !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image {
    padding: 0 !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy {
    padding: 14px 14px 16px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > a {
    font-size: 14px !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
    margin-bottom: 10px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > .rc-product-price {
    font-size: 14px !important;
  }
}

@media (max-width: 560px) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image {
    padding: 0 !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy {
    padding: 12px 12px 14px !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > a {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-copy > .rc-product-price {
    font-size: 13px !important;
  }
}


/* 2026-10-21 v6: restore original Ramki Cards PHOTO DISPLAY behavior.
   The ORIGINAL project stylesheet ramki-new-landing.css already used:
     media aspect ratio 1.28/1, image top:-11%, image height:127%.
   v2/v3/v4 forced square 300px frames and reset the crop, which revealed
   captions INSIDE the original uploaded JPEGs. Restore the original framing.

   No uploaded image bytes or DB paths are modified. The 2026 hover-action
   fix above remains active (heart/enquiry, gallery controls and badges).
*/
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1.28 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #f7f1e8 !important;
  isolation: isolate !important;
}
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media > a.rc-product-image > img {
  position: absolute !important;
  inset: auto !important;
  top: -11% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 127% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
}
/* Original project mobile image proportion, rather than the newer 190px box. */
@media (max-width: 680px) {
  html body main.rc-new#main-content .rc-scroll-shell > .rc-scroll-track > article.rc-product > .rc-product-media {
    aspect-ratio: 1.14 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/* The original media clip is restored but not applied to gallery arrows,
   favourite button, sale badge, or enquiry CTA. They remain inside .rc-product-media
   and keep the positions/interactions set in the v4 code above. */