/* Hélène Furniture Catalogue — plugin styles
   Design uploaded HTML files (furniture-*.html) ke jaisa hi rakha gaya hai. */

:root{
	--hf-container-width: 1280px;  /* header ki width se match karo */
	--hf-container-padding: 0px;   /* agar header ke左/right thoda gap ho to yahan px daal do e.g. 20px */
}

.hf-wrap{
	max-width:var(--hf-container-width); margin:0 auto; padding:0 var(--hf-container-padding);
	font-family:'Inter', sans-serif;
	color:#0a0a0a;
}

/* ---- Back link ---- */
.hf-back-row{ padding:22px 0 0; }
.hf-back-link{
	font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
	color:rgba(10,10,10,0.56); display:inline-flex; align-items:center; gap:8px;
	text-decoration:none;
}
.hf-back-link:hover{ color:#0a0a0a; }

/* ---- Hero ---- */
.hf-cat-hero{ padding:26px 0 40px; }
.hf-eyebrow{
	display:flex; align-items:center; gap:14px;
	font-size:11.5px; font-weight:500; letter-spacing:0.2em;
	text-transform:uppercase; color:rgba(10,10,10,0.56); margin-bottom:20px;
}
.hf-eyebrow::before{ content:''; display:block; width:34px; height:1px; background:#0a0a0a; }
.hf-cat-hero h1{
	font-family:'Cormorant Garamond', serif; font-weight:400; font-style:italic;
	font-size:clamp(32px, 4.6vw, 56px); line-height:1.14; margin:0;
}
.hf-cat-hero p{
	margin-top:18px; font-size:15px; line-height:1.7;
	color:rgba(10,10,10,0.56); font-weight:300; max-width:520px;
}

/* ---- Filters ---- */
.hf-filters{
	padding:22px 0 36px;
	border-top:1px solid rgba(10,10,10,0.14);
	border-bottom:1px solid rgba(10,10,10,0.14);
}
.hf-filters ul{ display:flex; list-style:none; gap:36px; flex-wrap:wrap; margin:0; padding:0; }
.hf-filter-btn{
	background:none !important; background-color:transparent !important;
	border:none !important; box-shadow:none !important; outline:none !important;
	-webkit-appearance:none; appearance:none; border-radius:0 !important;
	font-family:'Inter', sans-serif;
	font-size:11.5px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase;
	color:rgba(10,10,10,0.56); cursor:pointer; margin:0; padding:0 0 4px 0; position:relative;
}
.hf-filter-btn.active{ color:#0a0a0a; }
.hf-filter-btn.active::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#0a0a0a; }
.hf-filter-btn:hover{ color:#0a0a0a; }
.hf-filter-btn:focus{ outline:none; box-shadow:none; }

/* ---- Gallery (non-clickable cards) ---- */
.hf-gallery{ padding:60px 0 100px; }
.hf-gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 40px; }
.hf-piece{ display:block; cursor:default; } /* not a link, just showcase */
.hf-piece-thumb{ aspect-ratio:4/5; background:#f8f8f8; overflow:hidden; }
.hf-piece-thumb img{
	width:100%; height:100%;
	object-fit:cover; object-position:center center;
	display:block; transition:transform .5s ease;
}
.hf-piece:hover .hf-piece-thumb img{ transform:scale(1.035); }
.hf-piece-cap{ margin-top:15px; }
.hf-piece-name{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:17px; }
.hf-piece-meta{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(10,10,10,0.42); margin-top:3px; }
.hf-piece[data-hidden="true"]{ display:none; }

/* ---- Landing page collections grid (shortcode) ---- */
.hf-collections-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
	background:transparent;
}
.hf-collection-tile{ position:relative; display:block; background:transparent; text-decoration:none; color:inherit; }
.hf-collection-img{ aspect-ratio:4/5; background:#f8f8f8; overflow:hidden; }
.hf-collection-img img{
	width:100%; height:100%;
	object-fit:cover; object-position:center center;
	display:block; transition:transform .6s ease;
}
.hf-collection-tile:hover .hf-collection-img img{ transform:scale(1.035); }
.hf-collection-cap{ display:flex; align-items:baseline; justify-content:space-between; padding:22px 4px; }
.hf-collection-name{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:26px; }
.hf-collection-count{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(10,10,10,0.42); }

@media (max-width:1000px){
	.hf-gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:36px 26px; }
}
@media (max-width:900px){
	.hf-collections-grid{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px){
	.hf-wrap{ padding:0 24px; }
	.hf-gallery-grid{ grid-template-columns:1fr; }
	.hf-filters ul{ gap:22px; overflow-x:auto; }
}