/*
 * Infinity Rise Products — frontend styles.
 * Reuses the theme's design tokens (--color-*, --fs-*, .container, .btn) so the
 * catalogue matches the site. Falls back gracefully if a token is missing.
 */

.irp-grid { display: grid; grid-template-columns: repeat(var(--irp-cols, 4), 1fr); gap: 28px; }
@media (max-width: 1024px) { .irp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .irp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 425px)  { .irp-grid { grid-template-columns: 1fr; } }

/* ---------- Card ---------- */
.irp-card { display: flex; flex-direction: column; background: var(--color-white, #fff); text-decoration: none; color: inherit; box-shadow: 0 6px 24px rgba(0,0,0,.06); transition: box-shadow .25s ease, transform .25s ease; }
.irp-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.12); transform: translateY(-3px); }
.irp-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--color-bg-1, #efe9df) center / cover no-repeat; }
.irp-card__labels { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.irp-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.irp-card__cat { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-secondary, #a97f2d); }
.irp-card__title { font-family: var(--font-primary, inherit); font-size: 20px; font-weight: 600; color: var(--color-black, #1a1a1a); line-height: 1.25; }
.irp-card__more { margin-top: 6px; font-size: 15px; color: var(--color-primary, #06402a); text-decoration: underline; text-underline-offset: 3px; }
.irp-card:hover .irp-card__more { color: var(--color-secondary, #a97f2d); }

/* ---------- Badges ---------- */
.irp-badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: .03em; border-radius: 0; background: var(--color-primary, #06402a); color: var(--color-ancient, #e2c58d); }
.irp-badge--featured-products { background: var(--color-secondary, #a97f2d); color: #fff; }
.irp-badge--new-arrivals { background: var(--color-primary, #06402a); color: var(--color-ancient, #e2c58d); }

/* ---------- Single product ---------- */
/* Top spacing: 90px on large screens (incl. 1920) instead of the theme's larger
   section top padding, scaling down responsively on smaller screens. */
.irp-single.section { padding-top: 90px; padding-bottom: 0; }
@media (max-width: 1280px) { .irp-single.section { padding-top: 72px; } }
@media (max-width: 1024px) { .irp-single.section { padding-top: 56px; } }
@media (max-width: 600px)  { .irp-single.section { padding-top: 40px; } }
.irp-single__top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* Desktop: the gallery column is a fixed square image place per breakpoint
   (1280:530, 1440/1536:600, 1920:700); the summary takes the rest. */
@media (min-width: 1025px) { .irp-single__top { grid-template-columns: 530px 1fr; } }
@media (min-width: 1281px) { .irp-single__top { grid-template-columns: 600px 1fr; } }
@media (min-width: 1900px) { .irp-single__top { grid-template-columns: 700px 1fr; } }
/* No gallery images: no empty box — summary spans the full width. */
.irp-single__top.irp-single__top--nogallery { grid-template-columns: 1fr; }

/* Gallery — flex column so the thumbnails sit at the bottom, lining up with the
   summary/Specifications level on the right (main image stays 1:1 at the top). */
.irp-gallery { display: flex; flex-direction: column; }
.irp-gallery__main { background: var(--color-bg-1, #efe9df); overflow: hidden; margin-bottom: 16px; flex: 0 0 auto; }
.irp-gallery__img { width: 100%; height: auto; max-height: 600px; object-fit: contain; display: block; margin: 0 auto; transition: opacity .2s ease; }
/* Desktop: fixed square image place; the image fits inside it (object-fit:contain)
   so any size shows fully, centred, never cropped. 1280:530, 1440/1536:600, 1920:700. */
@media (min-width: 1025px) {
	.irp-gallery__main { width: 530px; height: 392px; }
	.irp-gallery__img { height: 100%; max-height: none; }
}
@media (min-width: 1281px) { .irp-gallery__main { width: 600px; height: 600px; } }
@media (min-width: 1900px) { .irp-gallery__main { width: 700px; height: 700px; } }
.irp-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.irp-gallery__thumb { aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; overflow: hidden; }
.irp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.irp-gallery__thumb.is-active { border-color: var(--color-secondary, #a97f2d); }
/* 5+ images: turn the thumbnail strip into a horizontal slider — 3 thumbs fully
   visible and the 4th peeking (offset) so it's clear there's more to swipe/scroll.
   %-based widths keep 3-up + peek at every breakpoint incl. mobile. <=4 images keep
   the static grid above. Higher specificity (.irp-gallery ...) so the fixed 12px gap
   wins over the base 16px/10px rules and the calc stays in sync. */
.irp-gallery .irp-gallery__thumbs--slider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.irp-gallery__thumbs--slider::-webkit-scrollbar { display: none; }
.irp-gallery .irp-gallery__thumbs--slider .irp-gallery__thumb {
	flex: 0 0 calc((100% - 66px) / 3); /* 3 full + ~30px peek of the 4th at 12px gap */
	scroll-snap-align: start;
}
/* Prev/next arrows for the thumbnail slider (added by JS only when the strip
   overflows). Overlaid at the left/right edges, centred on the strip. */
.irp-gallery__thumbs-wrap { position: relative; }
.irp-gallery__navbtn {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
	background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	color: var(--color-black, #1a1a1a); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.irp-gallery__navbtn:hover { background: #fff; }
.irp-gallery__navbtn[hidden] { display: none; }
.irp-gallery__navbtn--prev { left: 8px; }
.irp-gallery__navbtn--next { right: 8px; }
.irp-gallery__navbtn svg { width: 15px; height: 15px; }
.irp-gallery__navbtn svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
	.irp-gallery__navbtn { width: 28px; height: 28px; }
	.irp-gallery__navbtn svg { width: 13px; height: 13px; }
}

/* Summary */
.irp-summary__cat { display: inline-block; font-size: 16px; font-weight: 500; color: var(--color-secondary, #a97f2d); text-decoration: none; margin: 0 0 14px; }
.irp-summary__cat:hover { color: var(--color-primary, #06402a); }
.irp-summary__title { font-family: var(--font-primary, inherit); font-size: 44px; font-weight: 400; line-height: 1.15; margin: 0 0 18px; color: var(--color-black, #1a1a1a); }
.irp-summary__excerpt { font-size: var(--fs-p, 16px); color: #4a4a4a; line-height: 1.7; margin: 0 0 28px; }

/* Colour / variant dropdown */
.irp-variant { position: relative; display: block; max-width: 240px; margin: 0 0 24px; }
.irp-variant__input { width: 100%; appearance: none; -webkit-appearance: none; padding: 14px 44px 14px 42px; border: 1px solid rgba(0,0,0,.2); background: #fff; font: inherit; font-size: var(--fs-p, 16px); font-weight: 500; color: var(--color-black, #1a1a1a); cursor: pointer; }
.irp-variant__input:focus { outline: none; border-color: var(--color-secondary, #a97f2d); }
/* Custom variant dropdown (JS-enhanced) so options use the site colour, not the
   browser's default blue. Native <select> stays hidden but drives swatch/gallery. */
.irp-variant--custom .irp-variant__input { display: none; }
.irp-variant__btn { display: block; width: 100%; text-align: left; padding: 14px 44px 14px 42px; border: 1px solid rgba(0,0,0,.2); background: #fff; font: inherit; font-size: var(--fs-p, 16px); font-weight: 500; color: var(--color-black, #1a1a1a); cursor: pointer; }
.irp-variant.is-open .irp-select__list { display: block; }
.irp-variant__swatch { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #c0392b center/cover no-repeat; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.irp-variant__chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 14px; height: 9px; background: var(--color-black, #1a1a1a); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; pointer-events: none; }

/* Size pills */
.irp-sizes { margin: 0 0 26px; }
.irp-sizes__label { display: block; font-size: var(--fs-p, 16px); font-weight: 500; color: var(--color-black, #1a1a1a); margin: 0 0 12px; }
.irp-sizes__list { display: flex; flex-wrap: wrap; gap: 12px; }
.irp-size { min-width: 52px; padding: 11px 14px; border: 1px solid rgba(0,0,0,.2); background: #fff; cursor: pointer; font: inherit; font-size: var(--fs-p, 16px); font-weight: 500; color: var(--color-black, #1a1a1a); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.irp-size:hover { border-color: var(--color-secondary, #a97f2d); }
.irp-size.is-selected { background: var(--color-secondary, #a97f2d); border-color: var(--color-secondary, #a97f2d); color: #fff; }

/* Enquire button */
.irp-summary__actions { margin: 4px 0 32px; }
.irp-summary__actions .irp-enquire-btn { width: 100%; max-width: 460px; border-radius: 0; padding: 16px 24px; font-size: 24px; font-weight: 500; color: var(--color-primary, #06402a); cursor: pointer; }

/* Accordions (Key Features / Specifications) */
.irp-acc + .irp-acc { border-top: 1px solid #E2C58D; }
.irp-acc:last-child { border-bottom: 1px solid #E2C58D; }
.irp-acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; background: none; border: 0; cursor: pointer; font-family: var(--font-primary, inherit); font-size: 18px; font-weight: 400; color: var(--color-black, #1a1a1a); text-align: left; }
.irp-acc__icon { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.irp-acc__icon::before, .irp-acc__icon::after { content: ""; position: absolute; background: var(--color-black, #1a1a1a); transition: opacity .2s ease; }
.irp-acc__icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.irp-acc__icon::after { left: 6px; top: 0; width: 2px; height: 14px; }
.irp-acc.is-open .irp-acc__icon::after { opacity: 0; }
.irp-acc__body { display: none; padding: 0 2px 24px; }
.irp-acc.is-open .irp-acc__body { display: block; }
.irp-rte { color: #5a5a5a; line-height: 1.75; font-size: var(--fs-p, 16px); }
.irp-rte p { margin: 0 0 1em; }
.irp-spec-table { width: 100%; border-collapse: collapse; }
.irp-spec-table th, .irp-spec-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #e4ddd0; font-size: 20px; vertical-align: top; }
.irp-spec-table th { width: 38%; font-weight: 600; color: var(--color-black, #1a1a1a); background: var(--color-bg-1, #f3eee4); }

/* Related */
.irp-related__title { font-family: var(--font-primary, inherit); font-size: var(--fs-h3, 38px); font-weight: 500; margin: 0 0 36px; color: var(--color-black, #1a1a1a); }

/* Responsive */
@media (max-width: 1024px) { .irp-single__top { gap: 40px; } }
/* 1280 band: scaled-down product-detail typography + enquire button. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.irp-summary__title { font-size: 38px; font-weight: 400; line-height: 1.15; margin: 0 0 18px; }
	.irp-acc__head { font-size: 16px; font-weight: 400; padding: 22px 2px; }
	.irp-summary__actions .irp-enquire-btn { max-width: 292px; padding: 16px 24px; font-size: 14px; font-weight: 500; }
	.irp-spec-table th, .irp-spec-table td { padding: 12px 16px; font-size: 14px; }
}
@media (max-width: 900px)  { .irp-single__top { grid-template-columns: 1fr; gap: 32px; } .irp-summary__actions .irp-enquire-btn { max-width: none; } }
/* Mobile: smaller product title, enquire button, accordion heads, spec table
   + Related Products title so they don't overpower the narrow single-column
   layout (sizes per client: acc 14, specs 12, related title 16). */
@media (max-width: 600px)  {
	.irp-gallery__thumbs { gap: 10px; }
	.irp-summary__title { font-size: 24px; }
	.irp-summary__actions .irp-enquire-btn { font-size: 18px; }
	/* Tighten the gaps around the Enquire button (sizes above, Key Features below). */
	.irp-sizes { margin-bottom: 16px; }
	.irp-summary__actions { margin: 4px 0 16px; }
	.irp-acc__head { font-size: 14px; }
	/* Smaller +/- accordion icon to match the 14px heads (12px cross, centred bars). */
	.irp-acc__icon { width: 12px; height: 12px; }
	.irp-acc__icon::before { top: 5px; width: 12px; }
	.irp-acc__icon::after { left: 5px; height: 12px; }
	.irp-spec-table th, .irp-spec-table td { font-size: 12px; }
	.irp-related__title { font-size: 16px; }
}

/* ---------- Category banner (mirrors the site Categories/About banner) ---------- */
.irp-cat-banner { position: relative; display: flex; align-items: center; min-height: var(--bnr-h, 800px); background: var(--color-primary, #06402a) center / cover no-repeat; color: #fff; padding: var(--bnr-pt, 280px) var(--bnr-pr, 250px) var(--bnr-pb, 140px) var(--bnr-pl, 250px); }
.irp-cat-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.irp-cat-banner__inner { position: relative; z-index: 1; }
.irp-cat-banner__title { color: #fff; font-size: var(--fs-h1, 56px); font-weight: 600; line-height: 1.08; margin: 0 0 10px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.irp-cat-banner__desc { color: rgba(255,255,255,.92); max-width: 720px; margin: 0; font-size: var(--fs-p, 18px); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
@media (min-width: 1025px) { .irp-cat-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .irp-cat-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .irp-cat-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .irp-cat-banner { min-height: 400px; } }
/* Mobile: the category banner uses the shared non-home banner treatment
   (main.css: 1920/960 cover box) so its height matches the other page banners —
   no short/contain override here. */

/* ---------- Sub-category filter cards ---------- */
/* Fixed-width cards (cap at 325px), left-aligned — small like the design at every
   desktop size; minmax shrinks them on narrower widths instead of overflowing. */
/* Single-row slider: cards sit in one line, overflow scrolls (touch swipe on
   mobile, prev/next arrows + drag on desktop). */
.irp-subslider { position: relative; margin: 0 0 48px; }
.irp-subcards { display: flex; gap: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0; padding-bottom: 2px; }
.irp-subcards::-webkit-scrollbar { display: none; }
.irp-subcards.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.irp-subcard { flex: 0 0 calc((100% - 5 * 28px) / 6); scroll-snap-align: start; display: flex; flex-direction: column; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
/* Prev/next arrows (desktop mouse users; hidden on touch/mobile). */
.irp-subslider__nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(6,64,42,.25); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.12); transition: opacity .2s ease; }
.irp-subslider__nav::before { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--color-primary, #06402a); border-bottom: 2px solid var(--color-primary, #06402a); }
.irp-subslider__nav--prev { left: -14px; }
.irp-subslider__nav--prev::before { transform: rotate(135deg); margin-left: 4px; }
.irp-subslider__nav--next { right: -14px; }
.irp-subslider__nav--next::before { transform: rotate(-45deg); margin-right: 4px; }
.irp-subslider__nav[hidden] { display: none; }
.irp-subslider__nav:disabled { opacity: .3; cursor: default; }
.irp-subcard__media { aspect-ratio: 13 / 14; background: var(--color-bg-1, #efe9df) center / cover no-repeat; }
.irp-subcard__bar { display: flex; align-items: center; gap: 14px; padding: 16px 0 0; }
.irp-subcard__arrow { flex: 0 0 auto; width: 36px; height: 36px; background: url('../images/category-page/arrow-default.svg') center / contain no-repeat; transition: transform .25s ease; }
.irp-subcard:hover .irp-subcard__arrow, .irp-subcard.is-active .irp-subcard__arrow { background-image: url('../images/category-page/arrow-active.svg'); }
.irp-subcard__name { font-family: var(--font-primary, inherit); font-size: var(--fs-h6, 20px); font-weight: 500; line-height: 1.25; color: var(--color-black, #1a1a1a); }
.irp-subcard:hover .irp-subcard__name, .irp-subcard.is-active .irp-subcard__name { color: var(--color-secondary, #a97f2d); }
/* Sub-category image: smooth zoom on hover, clipped within the image frame (the
   ::before inherits the card's inline background-image so no markup change). */
.irp-subcard__media { position: relative; overflow: hidden; }
.irp-subcard__media::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .5s ease; }
.irp-subcard:hover .irp-subcard__media::before { transform: scale(1.08); }
/* 1280 only: smaller cards (232px), wider media, smaller arrow. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.irp-subcard { flex-basis: calc((100% - 5 * 28px) / 6); }
	.irp-subcard__media { aspect-ratio: 17 / 14; }
	.irp-subcard__arrow { width: 22px; height: 28px; }
}

/* ---------- Results header (divider + active title + count) ---------- */
.irp-results__divider { border: 0; border-top: 1px solid rgba(6,64,42,.18); margin: 0 0 36px; }
/* 1920: larger bottom spacing under the sub-category cards and results divider. */
@media (min-width: 1900px) { .irp-subslider { margin: 0 0 80px; } .irp-results__divider { margin: 0 0 80px; } }
.irp-results { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 54px; }
/* H4 heading style (responsive via --fs-h4). */
.irp-results__title { font-family: var(--font-primary, inherit); font-size: var(--fs-h4, 42px); font-weight: 400; line-height: 1.15; margin: 0; color: var(--color-black, #1a1a1a); }
.irp-results__count { color: #6a6a6a; font-size: 16px; }
@media (max-width: 600px)  { .irp-results { gap: 4px; } .irp-results__count { font-size: 13px; } }

/* ---------- Products toolbar (search + sort) ---------- */
.irp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 60px; flex-wrap: wrap; }
/* Responsive spacing for the results header + toolbar (scales the 1920 values down). */
@media (max-width: 1536px) { .irp-results { margin-bottom: 42px; } .irp-toolbar { margin-bottom: 46px; } }
@media (max-width: 1280px) { .irp-results { margin-bottom: 34px; } .irp-toolbar { margin-bottom: 38px; } }
@media (max-width: 600px)  { .irp-results { margin-bottom: 24px; } .irp-toolbar { margin-bottom: 28px; } }
/* Search bar width = exactly one product-card column (4-col grid, 28px gaps). */
.irp-search { position: relative; flex: 0 1 calc((100% - 84px) / 4); max-width: calc((100% - 84px) / 4); }
/* Tablet: search + sort share one row at equal width (each ~half). */
@media (max-width: 1024px) {
	.irp-search { flex: 1 1 0; min-width: 0; max-width: none; }
	.irp-sort { flex: 1 1 0; min-width: 0; }
	.irp-sort__select, .irp-select__btn { width: 100%; min-width: 0; }
}
.irp-search__input { width: 100%; padding: 18px 56px 18px 22px; border: 1px solid rgba(0,0,0,.12); background: #fff; font: inherit; font-size: 16px; color: var(--color-black, #1a1a1a); }
/* All screens except mobile: slightly shorter search box (14px vertical padding). */
@media (min-width: 601px) { .irp-search__input { padding: 14px 56px 14px 22px; } }
.irp-search__input::placeholder { color: #8a8a8a; }
.irp-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background-color: var(--color-primary, #06402a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.irp-search__input:focus { outline: none; border-color: var(--color-secondary, #a97f2d); }
.irp-search__btn { position: absolute; right: 10px; top: 0; bottom: 0; width: 34px; border: 0; background: transparent url('../images/category-page/search.svg') center / 20px no-repeat; cursor: pointer; }
.irp-sort__select { appearance: none; -webkit-appearance: none; accent-color: var(--color-primary, #06402a); min-width: 200px; padding: 14px 48px 14px 20px; border: 1px solid var(--color-secondary, #a97f2d); background: #fff url('../images/category-page/down-arrow.svg') right 20px center / 14px no-repeat; font: inherit; font-size: 16px; color: var(--color-black, #1a1a1a); cursor: pointer; }
.irp-sort__select:focus { outline: none; }
.irp-sort__select option:checked, .irp-sort__select option:hover { background: var(--color-primary, #06402a); color: #fff; }
/* Custom dropdown (JS-enhanced) so selected + hovered options use the site colour
   instead of the browser's default blue (Chrome ignores CSS on native options). */
.irp-sort { position: relative; }
.irp-sort--custom .irp-sort__select { display: none; }
.irp-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 200px; padding: 14px 20px; border: 1px solid var(--color-secondary, #a97f2d); background: #fff; font: inherit; font-size: 16px; color: var(--color-black, #1a1a1a); cursor: pointer; text-align: left; }
.irp-select__btn::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: url('../images/category-page/down-arrow.svg') center / 14px no-repeat; transition: transform .2s ease; }
.irp-sort.is-open .irp-select__btn::after { transform: rotate(180deg); }
.irp-select__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--color-secondary, #a97f2d); box-shadow: 0 10px 28px rgba(0,0,0,.14); display: none; }
.irp-sort.is-open .irp-select__list { display: block; }
.irp-select__opt { padding: 12px 20px; font-size: 16px; color: var(--color-black, #1a1a1a); cursor: pointer; }
.irp-select__opt:hover, .irp-select__opt[aria-selected="true"] { background: var(--color-primary, #06402a); color: #fff; }
/* Pin option text to the control's size so the open dropdown list matches the
   closed "New Arrivals" value (mobile browsers draw options larger otherwise). */
.irp-sort__select option { font-size: 16px; font-family: inherit; }

/* ---------- Product cards (framed image + name + Enquire; green when featured/hovered) ---------- */
.irp-pgrid { grid-template-columns: repeat(4, 1fr); }
.irp-pcard { display: flex; flex-direction: column; background: var(--color-bg-1, #efe9df); padding: 16px; transition: background-color .25s ease; }
.irp-pcard__media { display: block; aspect-ratio: 4 / 3; background: #fff center / cover no-repeat; }
.irp-pcard__body { padding: 18px 4px 4px; }
/* H6 heading style (responsive via --fs-h6). */
.irp-pcard__name { display: block; font-family: var(--font-primary, inherit); font-size: var(--fs-h6, 24px); font-weight: 500; line-height: 1.15; color: var(--color-black, #1a1a1a); text-decoration: none; margin: 0 0 10px; transition: color .25s ease; }
.irp-pcard__enquire { display: inline-block; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-p, 20px); color: var(--color-black, #1a1a1a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .25s ease; }
.irp-pcard:hover { background: var(--color-primary, #06402a); }
.irp-pcard:hover .irp-pcard__name { color: #fff; }
.irp-pcard:hover .irp-pcard__enquire { color: var(--color-ancient, #e2c58d); }
.irp-pcard.is-hidden { display: none; }
/* Product image: smooth zoom on hover, clipped within the image frame (the
   ::before inherits the card's inline background-image so no markup change). */
.irp-pcard__media { position: relative; overflow: hidden; }
.irp-pcard__media::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .5s ease; }
.irp-pcard:hover .irp-pcard__media::before { transform: scale(1.08); }
/* Mobile: square image frame — the uploads are square 700x700 crops, and the
   4:3 frame's cover-crop was cutting off the subject (faces in the top third). */
@media (max-width: 768px) { .irp-pcard__media { aspect-ratio: 1 / 1; } }

/* "Show More" button — reveals the next batch of products (8 shown initially). */
.irp-loadmore { text-align: center; margin-top: 54px; }
.irp-loadmore[hidden] { display: none; }
.irp-loadmore__btn { background: transparent; color: var(--color-primary, #06402a); border: 1px solid var(--color-secondary, #a97f2d); border-radius: 0; padding: 14px 42px; font-family: var(--font-primary, inherit); font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.irp-loadmore__btn:hover, .irp-loadmore__btn:focus { background: var(--color-primary, #06402a); color: #fff; border-color: var(--color-primary, #06402a); outline: none; }
@media (max-width: 1024px) { .irp-loadmore { margin-top: 40px; } }
@media (max-width: 600px)  { .irp-loadmore { margin-top: 28px; } .irp-loadmore__btn { width: 100%; padding: 13px 24px; } }

/* Responsive */
@media (max-width: 1280px) { .irp-pgrid { grid-template-columns: repeat(3, 1fr); } }
/* 1280 only: keep 4 product columns like the design. */
@media (min-width: 1025px) and (max-width: 1280px) { .irp-pgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .irp-subcards, .irp-pgrid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .irp-subcard { flex-basis: calc((100% - 3 * 24px) / 4); } }
/* Phone only: stack search over sort, full width each (tablet keeps them side by side). */
@media (max-width: 600px)  { .irp-toolbar { flex-direction: column; align-items: stretch; } .irp-search, .irp-sort { flex: 0 0 auto; max-width: none; } .irp-sort__select, .irp-select__btn { width: 100%; } }
/* Mobile: smaller, shorter toolbar (the search box + "New Arrivals" were oversized). */
@media (max-width: 600px) {
	.irp-search__input,
	.irp-select__btn,
	.irp-select__opt,
	.irp-sort__select,
	.irp-sort__select option { font-size: 14px; }
	.irp-search__input { padding: 13px 50px 13px 18px; }
	.irp-select__btn { padding: 13px 18px; }
}
@media (max-width: 480px)  { .irp-subcards, .irp-pgrid { gap: 14px; } .irp-pgrid { grid-template-columns: repeat(2, 1fr); } .irp-pcard__name { font-size: 14px; } .irp-pcard__enquire { font-size: 12px; } .irp-pcard__body { padding: 12px 2px 2px; } }
/* Mobile: small sub-category cards — two per view with the next one peeking; swipe to scroll. */
@media (max-width: 600px) {
	.irp-subcards { gap: 14px; }
	.irp-subcard { flex-basis: 44%; }
	.irp-subslider__nav { display: none; }
	.irp-subcard__arrow { width: 24px; height: 24px; }
}

.irp-archive__title { font-family: var(--font-primary, inherit); font-size: var(--fs-h1, 56px); font-weight: 600; margin: 0 0 36px; }
.irp-empty { color: #6a6a6a; font-size: 18px; }
.irp-pagination { margin-top: 40px; }
.irp-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid #d8cfbb; color: var(--color-primary, #06402a); text-decoration: none; }
.irp-pagination .page-numbers.current { background: var(--color-primary, #06402a); color: #fff; border-color: var(--color-primary, #06402a); }

/* ---------- Enquiry modal ---------- */
/* align-items:flex-start (not the default stretch) so the dialog sizes to its
   content and its white background covers every field. With stretch, a dialog
   taller than the viewport gets clamped to the viewport height and the
   overflowing fields render outside the painted background. margin:auto centres it. */
.irp-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px; }
.irp-modal[hidden] { display: none; }
.irp-modal__overlay { position: fixed; inset: 0; background: rgba(9, 26, 18, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.irp-modal__dialog { position: relative; margin: auto; background: #fff; width: 100%; max-width: 560px; padding: 26px 28px 22px; border-radius: 0; box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.irp-modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #f4f0e8; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #4a4a4a; transition: background-color .2s ease, color .2s ease; }
.irp-modal__close:hover { background: var(--color-secondary, #a97f2d); color: #fff; }

.irp-modal__head { margin: 0 40px 14px 0; }
.irp-modal__title { font-family: var(--font-primary, inherit); font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; color: var(--color-black, #1a1a1a); }
.irp-modal__product { color: var(--color-secondary, #a97f2d); }
.irp-modal__sub { margin: 8px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: #6a6a6a; }

/* Selected product summary */
.irp-prod { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px 14px; background: var(--color-bg-2, #f6f2ef); border: 1px solid #eadfce; border-radius: 0; }
.irp-prod[hidden] { display: none; }
.irp-prod__media { flex: 0 0 auto; }
.irp-prod__img { width: 56px; height: 56px; object-fit: cover; border-radius: 0; display: block; background: #eee; }
.irp-prod__img[hidden] { display: none; }
.irp-prod__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.irp-prod__name { font-size: 15px; font-weight: 600; color: var(--color-black, #1a1a1a); line-height: 1.3; }
.irp-prod__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.irp-prod__chip { font-size: 12px; color: #5a5a5a; background: #fff; border: 1px solid #e3d9c8; border-radius: 0; padding: 3px 10px; }
.irp-prod__chip[hidden] { display: none; }
.irp-prod__chip b { color: var(--color-black, #1a1a1a); font-weight: 600; }

/* Quantity stepper */
.irp-qty { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.irp-qty__label { font-size: 12px; color: #6a6a6a; }
.irp-qty__control { display: inline-flex; align-items: center; border: 1px solid #d8cdb9; border-radius: 0; overflow: hidden; background: #fff; }
.irp-qty__btn { width: 30px; height: 34px; border: 0; background: #fff; color: var(--color-primary, #06402a); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease; }
.irp-qty__btn:hover { background: var(--color-bg-1, #e5dfd3); }
.irp-qty__input { width: 40px; height: 34px; border: 0; border-left: 1px solid #e6ddcc; border-right: 1px solid #e6ddcc; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--color-black, #1a1a1a); background: #fff; }

/* Form */
.irp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.irp-field { margin: 0 0 10px; }
.irp-field--full { grid-column: 1 / -1; }
.irp-field label { display: block; font-size: 13px; font-weight: 500; color: #333; margin: 0 0 4px; }
.irp-field label span { color: #c0392b; }
.irp-field input, .irp-field textarea { width: 100%; padding: 9px 12px; border: 1px solid #d8cdb9; border-radius: 0; font-family: inherit; font-size: 14px; color: var(--color-black, #1a1a1a); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.irp-field input::placeholder, .irp-field textarea::placeholder { color: #9a958c; }
.irp-field input:focus, .irp-field textarea:focus { outline: none; border-color: var(--color-secondary, #a97f2d); box-shadow: 0 0 0 2px rgba(169,127,45,.15); }
.irp-field textarea { resize: vertical; min-height: 60px; }
.irp-field input.is-invalid, .irp-field textarea.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.12); }
.irp-field__err { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #c0392b; }
.irp-field__err:empty { display: none; }

/* intl-tel-input phone field */
.irp-field .iti { display: block; width: 100%; }
.irp-field .iti__dropdown-content { z-index: 10000; }
.irp-modal .iti__selected-dial-code { font-size: 15px; font-weight: 400; }
/* Smaller country-picker dropdown text (names, dial codes, search). */
.irp-modal .iti__dropdown-content,
.irp-modal .iti__country,
.irp-modal .iti__country-name,
.irp-modal .iti__dial-code,
.irp-modal .iti__search-input { font-size: 13px; }
.irp-modal .iti__country { padding: 8px 10px; }
/* Taller country-search box on mobile for easier tapping. */
@media (max-width: 600px) { .irp-modal .iti__search-input { padding: 12px 12px; font-size: 15px; } }

.irp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.irp-form__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.irp-modal .irp-submit { border-radius: 0; padding: 12px 30px; font-size: 14px; font-weight: 500; cursor: pointer; }
.irp-submit[disabled] { opacity: .6; cursor: default; }
.irp-form__msg { font-size: 14px; }
/* Prominent full-width confirmation banner after submit (was easy to miss). */
/* Success / error message: fixed toast at the bottom-centre of the screen so it's
   always visible without scrolling the (tall) form. */
.irp-form__msg.is-ok,
.irp-form__msg.is-err { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: auto; max-width: min(520px, calc(100% - 32px)); margin: 0; z-index: 10001; padding: 14px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.45; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
/* Mobile: keep the thank-you toast on ONE line — full width with a font that
   scales down to fit the message without wrapping. */
@media (max-width: 560px) {
	.irp-form__msg.is-ok,
	.irp-form__msg.is-err { left: 8px; right: 8px; transform: none; max-width: none; width: auto; white-space: nowrap; padding: 11px 12px; font-size: clamp(8px, 2.6vw, 13px); }
}
.irp-form__msg.is-ok { color: #06402a; background: #E7F1EA; border: 1px solid rgba(6, 64, 42, .25); }
.irp-form__msg.is-ok::before { content: "\2713\00a0\00a0"; }
.irp-form__msg.is-err { color: #c0392b; background: #FBEAE8; border: 1px solid rgba(192, 57, 43, .25); }

@media (max-width: 560px) {
	.irp-modal { padding: 0; }
	.irp-modal__dialog { max-width: none; min-height: 100%; margin: 0; border-radius: 0; padding: 48px 18px 22px; }
	.irp-form__grid { grid-template-columns: 1fr; }
	/* Keep the product image, info and quantity on ONE line to reduce the box
	   height. The info column shrinks (min-width:0) so nothing is clipped. */
	.irp-prod { flex-wrap: nowrap; }
	.irp-qty { width: auto; flex-direction: column; align-items: flex-end; gap: 4px; }
}