/* =====================================================================
   Shifa Display — brand design layer
   ---------------------------------------------------------------------
   Loaded AFTER app.css / responsive.css, so it intentionally overrides
   the purchased theme's defaults. Its job is to make every page speak the
   same visual language as the category pages (include/category-page.php),
   which already use the "luxury" treatment: Cormorant Garamond display
   type, uppercase letterspaced headings, a gold rule, generous space.

   It deliberately does NOT touch height / min-height / display / flex on
   `#content > section` or the slider chain — those are owned by the
   full-screen scroll-snap system in include/header.php and
   assets/js/section-scroll.js. Changing them here would break the
   one-section-per-scroll behaviour.
   ===================================================================== */

:root{
	--brand-blue:#021A3D;
	--brand-gold:#B0893B;
	--gold-dark:#7E5F22;
	--gold-light:#E8CE86;
	--gold-gradient:linear-gradient(135deg,var(--gold-dark) 0%,var(--brand-gold) 28%,var(--gold-light) 50%,var(--brand-gold) 72%,var(--gold-dark) 100%);
	/* Mirrors the gold's five-stop structure (dark - base - highlight - base -
	   dark) so the two brand colours read as a matched pair. The highlight is a
	   genuinely lighter blue rather than a tint of #021A3D — against a navy that
	   dark, a narrow range reads as a flat fill, not a gradient. */
	--blue-light:#1B4F8F;
	--blue-deep:#010D22;
	--blue-gradient:linear-gradient(135deg,var(--blue-deep) 0%,var(--brand-blue) 26%,var(--blue-light) 50%,var(--brand-blue) 74%,var(--blue-deep) 100%);
	--ink:#171310;
	--muted:#7a7570;
	--cream:#faf7f2;
	--display:'Cormorant Garamond',Garamond,serif;
	--ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   0. Section backgrounds

   The markup dresses seven section grounds with `background-img bg-img-N`,
   but the purchased theme only ever shipped rules for `.section.bg-img-2`
   and `.block-parallax.bg-img-4` — every other one resolved to no background
   at all. That is what hid the home page's enquiry block: its type is white
   on purpose, written against a dark brown photo that was never painted, so
   it was white on the plain white page.

   Adding a new `bg-img-N` to the markup means adding its rule here; if the
   artwork is dark it also has to go in the light-type list in section 1.
   --------------------------------------------------------------------- */

.background-img{
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

/* Near-white textures. These carry the normal dark type. */
.background-img.bg-img-3{background-image:url("../../media/banner/bg-img-3.jpg");}
.background-img.bg-img-4{background-image:url("../../media/banner/bg-img-4.jpg");}
.background-img.bg-img-7{background-image:url("../../media/banner/bg-img-7.jpg");}

/* ---- The navy ground -------------------------------------------------
   ONE dark surface, used in four places, so every dark moment on the site
   reads as the same thing rather than four near-misses:
     .bg-img-5              home page enquiry band
     .site-main .page-title inner-page title banner (every page but home)
     .luxury-dark-band      "can't find it? we customise" CTA on category pages
     .cz-cta                closing CTA on customize.php

   The first three are defined together below. .cz-cta carries its own copy in
   customize.php's inline <style> because that page keeps its styles local —
   if you change the recipe here, change it there too.

   Three of them replaced stock template photographs or leftovers in the wrong
   colour family: media/banner/bg-img-5.jpg (a warm brown, which put the home
   page's one dark band in a different colour family from everything else),
   media/site-header.jpg behind the title banner, and .luxury-dark-band's flat
   #171310 — a near-black warm brown that was the last dark surface on the site
   still failing to match the other three. Dropping the first two also removes
   two image requests.

   .luxury-dark-band's ground has to live HERE rather than in
   include/category-page.php's inline <style>, where the rest of that band is
   styled: the inline block loads after this file, so a local `background`
   there wins the cascade and quietly puts the band back on its own colour. */
.background-img.bg-img-5,
.site-main .page-title,
.luxury-dark-band{
	position:relative;
	overflow:hidden;
	background-color:var(--brand-blue);
	background-image:var(--blue-gradient);
}
/* Gold halftone bleeding in from both ends, masked so it fades out well before
   it reaches the type. */
.background-img.bg-img-5:before,
.background-img.bg-img-5:after,
.site-main .page-title:before,
.site-main .page-title:after,
.luxury-dark-band:before,
.luxury-dark-band:after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:230px;
	z-index:0;
	background-image:radial-gradient(rgba(176,137,59,.45) 1.4px,transparent 1.5px);
	background-size:11px 11px;
	pointer-events:none;
}
.background-img.bg-img-5:before,
.site-main .page-title:before,
.luxury-dark-band:before{
	left:0;
	-webkit-mask-image:linear-gradient(90deg,#000,transparent);
	mask-image:linear-gradient(90deg,#000,transparent);
}
.background-img.bg-img-5:after,
.site-main .page-title:after,
.luxury-dark-band:after{
	right:0;
	-webkit-mask-image:linear-gradient(270deg,#000,transparent);
	mask-image:linear-gradient(270deg,#000,transparent);
}
/* The dots are absolutely positioned, so without a stacking context of its own
   the in-flow content would paint underneath them. The old ground layered its
   scrim into background-image precisely to avoid an overlay covering the form;
   this keeps that guarantee, belt-and-braces with pointer-events:none above.

   .luxury-dark-band takes `> *` rather than `> .section-container` because its
   heading, rule and button are direct children with no container between them
   — see the markup in include/category-page.php. */
.background-img.bg-img-5 > .section-container,
.site-main .page-title > .section-container,
.luxury-dark-band > *{
	position:relative;
	z-index:1;
}
/* On phones the band is barely wider than two 230px bleeds, which puts dots
   behind the type instead of side-lighting it. Same trim .cz-cta makes. */
@media (max-width:600px){
	.luxury-dark-band:before,
	.luxury-dark-band:after{width:110px;}
}

/* ---------------------------------------------------------------------
   1. Display typography
   The theme sets section headings in the body sans at a fairly small
   size, which is the single strongest "stock template" tell. Everything
   below re-cuts them as the serif display face used on category pages.
   --------------------------------------------------------------------- */

/* Every heading is brand blue. The theme shipped them in near-black (#171310
   and friends); #021A3D is the brand colour and is what the category pages
   already used, so this brings the whole site into line.
   Excluded below: headings that sit on a dark ground (the dark CTA band, the
   footer, the hero slider), which stay white — recolouring those would make
   them unreadable. */
h1,h2,h3,h4,h5,h6,
.block-title h2,
.lookbook-intro .title,
.intro-title,
.text-title-heading,
.luxury-cat-heading h2,
.luxury-cat-subheading h3,
.luxury-cat-footnote h3,
.luxury-card .card-title,
.other-categories h3,
.oc-card .oc-title,
.newsletter-title{
	color:var(--brand-blue);
}

/* Headings on dark grounds stay light — blue on these would be unreadable.
   Verified per background rather than assumed: media/banner/bg-img-4.jpg
   (why-us) is near-white so it takes blue, but the .bg-img-5 ground behind the
   home page's enquiry block is the navy gradient, so that one takes white.

   Keyed on the GROUND, not on the component. Keying the white on
   `.newsletter-title` itself dragged white along wherever the block was reused
   — it once hid the heading of an about.php CTA that used the same block on a
   plain white section. Keep it keyed this way if the block is reused again. */
.luxury-dark-band h1,.luxury-dark-band h2,.luxury-dark-band h3,
.title-slider,
#site-footer .block-title,
.color-white h1,.color-white h2,.color-white h3{
	color:#fff!important;
}

/* The enquiry heading is the exception among the dark grounds: gold rather
   than white, which is the treatment the theme itself gives a newsletter
   title and what the gold rules and buttons elsewhere already establish.
   Flat gold, not var(--gold-gradient) — gradient text needs
   background-clip:text with a transparent text-fill, and the gradient's dark
   stop (#7E5F22) has almost no separation from the brown ground behind it,
   so the ends of the line would sink into the photo.
   All three lines are gold, graded by brightness so the hierarchy survives
   being one colour family. The heading takes the palette's LIGHT gold rather
   than #B0893B: the base gold only looked strong because it was sitting on
   the theme's white card, and against this brown it drops to about 4.2:1 —
   legible for display type but muddy, brown on brown. Light gold reads at
   roughly 8.8:1 and is still unmistakably gold.

   The eyebrow is the same light gold held back slightly, and the standfirst
   is dimmed further so it recedes behind the heading — brightness is doing
   the work that a colour change would normally do. The eyebrow cannot take
   the base gold: at 12px it is small text, where 4.2:1 misses the 4.5:1
   contrast floor that the 40px heading is exempt from. */
.bg-img-5 .newsletter-title{color:var(--gold-light)!important;}
.bg-img-5 .brand-eyebrow{color:rgba(232,206,134,.85);}
.bg-img-5 .newsletter-text{color:rgba(232,206,134,.68)!important;}

/* Every heading level is listed, not just h2, because the heading TAG inside a
   .block-title varies with where the block sits in the document outline — the
   home page's first block carries the page <h1>, later ones h2/h3/h4 — while
   the block always has to look the same. Keeping the look on the tag would
   mean choosing between a correct outline and a consistent page. */
.block-title h1,
.block-title h2,
.block-title h3,
.block-title h4,
.newsletter-title,
.lookbook-intro .title,
.intro-title,
.text-title-heading{
	font-family:var(--display)!important;
	font-weight:700!important;
	letter-spacing:2px!important;
	text-transform:uppercase;
	line-height:1.25!important;
}

.block-title h1,
.block-title h2,
.block-title h3,
.block-title h4{
	font-size:36px!important;
	margin-bottom:0!important;
	position:relative;
	padding-bottom:22px;
}

/* Gold rule under every section heading — the motif category pages
   already use as `.divider`, applied globally so the pages match.

   Centred by DEFAULT, because that is what the headings themselves do: the
   theme centres every block title on the home page
   (body.home .section .block-title), on about (.page-about-us .block
   .block-title) and on the contact form. Defaulting the rule to left:0 and
   only centring it on an explicit .text-center class left it pinned to the
   left under headings the theme had already centred — which is what happened
   under "Explore Our Catalogue", whose markup carries no .text-center.
   .text-left is the escape hatch if a left-aligned heading is ever added. */
.block-title h1:after,
.block-title h2:after,
.block-title h3:after,
.block-title h4:after{
	content:"";
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:64px;
	height:2px;
	background:var(--gold-gradient);
}
.block-title.text-left h1:after,
.block-title.text-left h2:after,
.block-title.text-left h3:after,
.block-title.text-left h4:after,
.text-left .block-title h1:after,
.text-left .block-title h2:after,
.text-left .block-title h3:after,
.text-left .block-title h4:after{left:0;transform:none;}

/* Eyebrow label — small uppercase kicker above a heading. */
.brand-eyebrow{
	display:block;
	font-family:'Lato',sans-serif;
	font-size:12px;
	font-weight:700;
	letter-spacing:3.5px;
	text-transform:uppercase;
	color:var(--brand-gold);
	margin-bottom:14px;
}

.gold-divider{height:2px;border:0;width:90px;margin:18px auto;background:var(--gold-gradient);}

.text-gold-gradient{
	color:var(--brand-gold);
	background:var(--gold-gradient);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;
}

/* Body copy: the theme runs long paragraphs tight and dark. Loosening the
   leading is most of what separates "brochure" from "template". */
.lookbook-intro .description,
.intro-item,
.newsletter-text{
	font-size:16px;
	line-height:1.95;
	color:var(--muted);
}

/* ---------------------------------------------------------------------
   1b. Imagery
   A soft 5px corner on every image. Containers that clip an image (the card
   thumbnails, which use overflow:hidden for the zoom) need the same radius,
   or the square container crops the rounded corners straight back off.
   --------------------------------------------------------------------- */

img{border-radius:5px;}

.item-product-cat .item-image,
.block-products .item-image,
.lookbook-content .item,
.section-column.right{border-radius:5px;overflow:hidden;}

/* Exceptions — the logo is artwork with its own edges, and the hero slider is
   edge-to-edge, so a corner radius there just nicks the viewport corners. */
.site-logo img,
.block-sliders .content-image img{border-radius:0;}

/* ---------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------- */

.button,
.button-primary,
.button-white,
.button-outline{
	font-family:'Lato',sans-serif;
	font-size:12px!important;
	font-weight:700;
	letter-spacing:2px;
	text-transform:uppercase;
	border-radius:10px;
	padding:5px 25px!important;
	transition:background-position .55s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}

/* Every button is blue at rest and gold on hover — the same rest/hover pair
   the category caption pill uses, so the two behave identically site-wide.
   Text stays white in both states; both fills are dark enough for it.

   The gradients are declared with the highlight already centred rather than
   swept in from off-canvas: CSS cannot cross-fade two background-images, so a
   position animation between two different gradients only produces a lurch.
   The fade that does read comes from background-color underneath, which is why
   both states set it as well as the image. */
.button,
.button-primary,
.button-white,
.button-outline,
.button-slider.button-white{
	background-color:var(--brand-blue)!important;
	background-image:var(--blue-gradient)!important;
	border:1px solid transparent;
	color:#fff!important;
}
.button:hover,.button:focus,
.button-primary:hover,.button-primary:focus,
.button-white:hover,.button-white:focus,
.button-outline:hover,.button-outline:focus,
.button-slider.button-white:hover,
.button-slider.button-white:focus{
	background-color:var(--brand-gold)!important;
	background-image:var(--gold-gradient)!important;
	border-color:transparent;
	color:#fff!important;
	transform:translateY(-2px);
}

/* Hero buttons sit on photography, where a dark fill can disappear into a dark
   frame — a hairline keeps the edge readable on any slide. */
.button-slider.button-white{
	border-color:rgba(255,255,255,.5);
	box-shadow:0 6px 18px rgba(1,13,34,.35);
}

/* The category CTA band's button, now that the band is navy rather than
   near-black: a blue-gradient button on a blue-gradient ground is a rectangle
   of text with no button around it. Gold instead — the same answer .cz-btn
   already gives for the closing CTA on customize.php, so the two navy CTAs
   carry the same button.

   Base AND hover are both spelled out. Gold on gold means the hover reads as
   the lift alone, exactly like .cz-btn; and the hover has to be restated
   regardless, because the generic .button-primary:hover above matches at the
   same specificity and comes first, so this rule would otherwise beat it and
   the button would lose its hover entirely. */
.luxury-dark-band .button-primary{
	background-color:var(--brand-gold)!important;
	background-image:var(--gold-gradient)!important;
	border-color:transparent;
	color:#fff!important;
}
.luxury-dark-band .button-primary:hover,
.luxury-dark-band .button-primary:focus{
	background-color:var(--brand-gold)!important;
	background-image:var(--gold-gradient)!important;
	border-color:transparent;
	color:#fff!important;
	transform:translateY(-2px);
	box-shadow:0 12px 26px rgba(126,95,34,.35);
}

/* ---------------------------------------------------------------------
   3. Hero slider — washed banner

   One banner: the photograph is the ground for the whole section, and the
   caption sits on its left over a cream wash that fades out before it reaches
   the jewellery. Text side and picture side are distinguishable, but there is
   no edge between them, so it reads as a single image rather than two panels.

   (It went through a hard split first — a cream box beside a photo box with a
   gold rule down the join. That produced exactly the "two separate things"
   look this replaces. The lesson is in the wash: gradients join, lines
   divide.)

   The theme fights this in four places, all undone below. `.item-info` is
   position:absolute with a 255px indent and margin-top:-100px; it is centred
   with top:50% + translateY(-50%), which must be removed as a PAIR; and it is
   opacity:0/visibility:hidden until slick flags the slide active. The markup
   also runs image FIRST, caption second, so the arrangement is done with flex
   `order` rather than by editing index.php.

   Everything here is scoped to `body.home #content > section:first-child`,
   matching the specificity the height rules in include/header.php already
   use on the same elements. Without that prefix these rules lose to them.
   --------------------------------------------------------------------- */

/* Responsive geometry, in one place. Every rule below reads these rather than
   hard-coding a width or a pad, so the breakpoints stay legible: each one
   restates the geometry and nothing else.

   The split ratio is not fixed at 50/50 all the way down. At 768px an even
   split leaves the panel 384px wide, which is narrow enough that the heading
   wraps every other word, so the content half widens as the screen narrows
   and finally takes the whole width when the layout stacks. */
body.home #content > section:first-child{
	--hero-content-w:50%;
	--hero-pad-x:clamp(28px,4vw,64px);
	--hero-pad-y:clamp(36px,3vw,56px);
}
@media (max-width:991px){
	body.home #content > section:first-child{--hero-content-w:56%;}
}
@media (max-width:767px){
	body.home #content > section:first-child{
		--hero-content-w:100%;
		--hero-pad-x:20px;
		--hero-pad-y:36px;
	}
}

/* ONE banner, not two panels sharing a border.

   The previous version gave each half its own box and drew a gold rule down
   the join. That is what made it read as two separate things: a hard edge
   between two flat areas tells the eye "these are different components".

   So the photograph is now the ground for the WHOLE section and the caption
   rides on top of it. What sets the text side apart from the picture side is
   a wash rather than an edge — opaque cream at the far left, melting to fully
   transparent before it reaches the jewellery. There is no line anywhere, so
   it reads as a single continuous banner whose left end simply happens to be
   calm enough to carry type. */
body.home #content > section:first-child .item-content{
	position:relative;
	display:flex;
	align-items:stretch;
}

/* object-position matters as much as ever. Every slide is shot with the
   jewellery on the RIGHT over a wide sweep of empty backdrop — that emptiness
   is what the wash is for. Anchoring the crop right keeps the subject in the
   uncovered part of the frame. */
body.home #content > section:first-child .content-image{
	order:2;
	overflow:hidden;
}
body.home #content > section:first-child .content-image img{
	width:100%!important;
	object-fit:cover;
	object-position:right center;
}
/* The theme's own scrim. The wash replaces it. */
body.home #content > section:first-child .content-image:after{content:none;}

@media (min-width:768px){
	/* The photo leaves the flex row and becomes its backdrop. Taking it out of
	   flow is precisely what turns two side-by-side boxes into one image with
	   type on it, and it leaves the row's height governed by the caption. */
	body.home #content > section:first-child .content-image{
		position:absolute;
		inset:0;
		width:100%!important;
		max-width:none;
		height:auto!important;
		z-index:0;
	}
	body.home #content > section:first-child .content-image img{
		height:100%!important;
		min-height:var(--hero-img-h);
	}
}

/* Content half. The theme centres this panel the old way — absolutely
   positioned, top:50% with transform:translateY(-50%) — plus a 255px indent,
   a -100px pull and an opacity/visibility reveal that only fires on the slide
   slick has flagged active. All of it has to come off together.

   transform:none is the critical line and the least obvious. A transform is
   NOT a positioning property: it applies to static elements exactly as it
   does to absolute ones. So setting position:static dropped the top:50% that
   pushes the panel DOWN while leaving the translateY(-50%) that pulls it back
   UP — half the panel's own height, with nothing left to offset it. That, not
   the negative margin, is what buried the caption behind the header.

   The margin and transform carry !important because they are the difference
   between a readable banner and a decapitated one, and include/header.php's
   inline <style> loads AFTER this file — a later rule there on a comparable
   selector would silently reinstate the overlap. */
body.home #content > section:first-child .item-info{
	order:1;
	/* relative, not static: the caption has to sit above an out-of-flow image,
	   and only a positioned element takes a z-index. That reactivates the
	   theme's top:50% though — half of its old centring trick, which alone
	   would drop the panel by half the banner — so every offset is neutralised
	   explicitly here alongside the transform that was the other half. */
	position:relative;
	top:auto;
	right:auto;
	bottom:auto;
	left:auto;
	-webkit-transform:none!important; /* the theme ships both spellings */
	transform:none!important;
	z-index:2;
	flex:0 0 var(--hero-content-w);
	max-width:var(--hero-content-w);
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:0!important;
	padding:var(--hero-pad-y) var(--hero-pad-x);
	opacity:1;
	visibility:visible;
}

/* The wash, keyed PER SLIDE.

   It used to be one fixed cream for all three, which only ever worked for the
   slide it was sampled from. The three artworks are shot on three unrelated
   grounds — blush beige, dark navy, warm ivory — so on the navy slide the
   cream landed as a pale block sitting on top of the photograph: exactly the
   two-panel look the whole wash exists to avoid, just with a soft edge instead
   of a hard one. Matching the wash to the ground is what keeps it one banner.

   Two things follow from that and both are needed:

   1. The tint is translucent, not opaque. Same hue as what is behind it, so
      the photo's own gradation carries through the caption side — the diagonal
      light streak on slide 1, the falloff on slide 2 — and there is no seam
      where the wash ends. An opaque fill of the right colour still shows a
      join against a photograph that is not perfectly flat, and none of these
      are.
   2. The type flips with it. Navy-on-navy is invisible, so the heading and
      body colour are tokens set beside the wash rather than fixed here.

   Values sampled from the left third of each file (hero-1 ~#D8BDA8,
   hero-2 ~#0E1A2E, hero-3 ~#FFF8EF). Re-sample if the artwork is swapped —
   the class in index.php is the hook. */
body.home #content > section:first-child{
	--hero-wash:250,247,242;
	--hero-title:var(--brand-blue);
	--hero-text:var(--muted);
}
/* Set on .item, not on the section, so each slide overrides by inheritance —
   the section selector is far more specific, but it is on a different element,
   so the nearest ancestor with a value wins and specificity never enters into
   it. Slick's cloned slides copy their classes, so the infinite loop keeps the
   right wash. */
.hero-slide-beige{
	--hero-wash:216,189,168;
	/* --muted is a warm grey that all but dissolves into beige at this
	   lightness (about 2.4:1). The navy at 78% keeps the body copy readable
	   without letting it compete with the heading above it. */
	--hero-text:rgba(2,26,61,.78);
}
.hero-slide-navy{
	--hero-wash:14,26,46;
	--hero-title:#fff;
	--hero-text:rgba(255,255,255,.82);
}
.hero-slide-ivory{
	--hero-wash:255,248,239;
}

/* Near-solid for the first two thirds of the panel so the type has a
   dependable ground, then out to nothing by the panel's right edge — which
   sits just short of the jewellery, so the fade spends itself on empty
   backdrop rather than over the subject. */
@media (min-width:768px){
	body.home #content > section:first-child .item-info{
		background:linear-gradient(90deg,
			rgba(var(--hero-wash),.93) 0%,
			rgba(var(--hero-wash),.88) 60%,
			rgba(var(--hero-wash),.62) 84%,
			rgba(var(--hero-wash),0) 100%);
	}
}
/* Stacked, the photo is a block of its own again and there is nothing behind
   the panel to fade into — a gradient would just reveal the page background,
   so it goes back to a flat fill of the same tint. */
@media (max-width:767px){
	body.home #content > section:first-child .item-info{background:rgb(var(--hero-wash));}
}
/* layout-3 caps this at 415px, which leaves the panel looking half-empty. */
body.home #content > section:first-child .item-info .content{max-width:none;}

/* Type follows the ground the slide happens to have. */
body.home #content > section:first-child .title-slider{color:var(--hero-title)!important;}
body.home #content > section:first-child .description-slider{color:var(--hero-text)!important;}

/* The hero button is a blue gradient, which disappears into the navy slide.
   Cream fill there instead — the hairline and shadow set in section 2 stop it
   flattening out. The hover rule is restated because section 2's gold hover
   matches at the same specificity and comes FIRST in the file, so without this
   the base rule below would win over it and the button would lose its hover. */
.hero-slide-navy .button-slider.button-white{
	background-color:var(--cream)!important;
	background-image:none!important;
	border-color:rgba(255,255,255,.85);
	color:var(--brand-blue)!important;
}
.hero-slide-navy .button-slider.button-white:hover,
.hero-slide-navy .button-slider.button-white:focus{
	background-color:var(--brand-gold)!important;
	background-image:var(--gold-gradient)!important;
	border-color:transparent;
	color:#fff!important;
}

/* The same gold rule under the heading that every other section title on the
   site carries (.block-title h2:after) — left-aligned here rather than
   centred, because the panel is. Without it the caption is three plain
   left-aligned blocks and reads as an unstyled column; the rule is what ties
   the banner to the rest of the page.

   Built as a pseudo-element so no markup changes: the slide captions in
   index.php stay exactly as they are. */
body.home #content > section:first-child .title-slider{
	position:relative;
	padding-bottom:clamp(18px,1.6vw,26px);
}
body.home #content > section:first-child .title-slider:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:64px;
	height:2px;
	background:var(--gold-gradient);
}

/* Fluid rather than stepped. Fixed sizes at 1199/991/600 were tuned for a
   caption running across the whole viewport; in a panel that is half that
   width they overflowed, and a step change mid-resize is visible anyway.
   clamp() covers every width between the two ends with no breakpoint at all,
   which is why sections 9's .title-slider / .description-slider overrides
   have been removed rather than re-tuned. */
.title-slider{
	font-family:var(--display)!important;
	font-weight:700!important;
	font-size:clamp(32px,3.4vw,60px)!important;
	line-height:1.12!important;
	letter-spacing:clamp(1px,.08vw,1.5px);
	color:#fff!important;
	margin-bottom:clamp(14px,1.2vw,22px)!important;
}
.description-slider{
	font-size:clamp(15px,1.05vw,17px)!important;
	line-height:1.8;
	color:rgba(255,255,255,.9)!important;
	max-width:52ch;
	margin-bottom:clamp(24px,2.4vw,34px)!important;
}

/* Slider dots as thin gold bars instead of the theme's grey circles. They are
   pinned over the photo half: on the cream panel a white bar is invisible,
   and gold on cream is barely better. */
.block-sliders ul.slick-dots li button{
	width:26px;height:3px;border-radius:0;
	background:rgba(255,255,255,.45);
	transition:background .3s var(--ease),width .3s var(--ease);
}
.block-sliders ul.slick-dots li.slick-active button{background:var(--brand-gold);width:44px;}
body.home #content > section:first-child .block-sliders ul.slick-dots{
	left:auto;
	right:0;
	width:calc(100% - var(--hero-content-w));
}

/* The theme's nav-center arrows are pinned to the outer edges of the slider.
   That put one circle floating in the middle of the empty cream panel and the
   other half off the right edge of the photo — with three slides on autoplay
   and the gold dots already showing position, they are clutter rather than
   navigation. Delete this rule to bring them back. */
body.home #content > section:first-child .block-sliders .slick-arrow,
body.home #content > section:first-child .block-sliders .slick-prev,
body.home #content > section:first-child .block-sliders .slick-next{
	display:none!important;
}

/* Stacked below 768px: caption first, photo under it — the words are the
   reason someone stops scrolling, so they lead.

   It stays a FLEX column rather than becoming display:block. The markup runs
   image-then-caption, so the reversal is done entirely by `order` — and order
   is ignored the moment the container stops being flex, which would silently
   flip the stack back to image-first. */
@media (max-width:767px){
	body.home #content > section:first-child .item-content{
		display:flex;
		flex-direction:column;
		height:auto;
	}
	body.home #content > section:first-child .item-info,
	body.home #content > section:first-child .content-image{
		flex:none;
		max-width:none;
		width:100%!important;
	}
	body.home #content > section:first-child .block-sliders ul.slick-dots{
		left:0;
		right:auto;
		width:100%;
	}
}

/* ---------------------------------------------------------------------
   4. Category cards (home) — matched to .luxury-card on category pages
   --------------------------------------------------------------------- */

/* The caption pill overlaps the bottom edge of the photo — a sliver over the
   image, the rest hanging below it on the page. That needs three things to line
   up:
     1. overflow must be VISIBLE here, or the overhanging part is clipped off.
        The image zoom is still clipped, because overflow:hidden lives on
        .item-image instead (below).
     2. padding-bottom reserves the space the pill hangs into, so the next row
        of cards is not overlapped.
     3. the pill is pinned at that same offset and pushed down by 85% of its own
        height, so only its top edge crosses the photo (see below).
   All three use --cat-pill-overhang, so the proportion holds if the pill's
   height changes.

   It was originally a 50/50 straddle, which put 33px of navy across the bottom
   of every photo — landing squarely on the base of the display stands, since
   these shots are framed with the product sitting on the bottom edge. The
   shallow overlap plus --cat-img-rest (below) is what keeps them clear. */
.item-product-cat .item-product-cat-content{
	--cat-pill-overhang:62px;
	/* Photo inset. The category shots are framed tight — the product's base sits
	   on the bottom edge — so at full bleed the pill cut across it. Scaling the
	   image down inside the frame lifts that base clear and leaves an even gap
	   on all four sides. 1 = full bleed; lower = smaller product.
	   --cat-img-zoom is the hover state and must stay above --cat-img-rest for
	   the zoom to still read as a zoom. */
	--cat-img-rest:.9;
	--cat-img-zoom:.96;
	position:relative;
	overflow:visible;
	/* No panel and no shadow: the cards sit flat on the page, so the only
	   things drawn are the photo and the pill. Deliberately not background:#fff
	   — an explicit white would come back as a visible block the moment this
	   section is given a tinted ground. */
	background:none;
	padding-bottom:var(--cat-pill-overhang);
	transition:transform .35s var(--ease);
}
/* Lift only. With no panel behind it there is no edge for a shadow to belong
   to, so the hover is carried by the movement and the pill's gold sweep. */
.item-product-cat .item-product-cat-content:hover{
	transform:translateY(-6px);
}
/* Clipping moved here so the zoom stays inside the frame while the pill above
   is free to overhang. */
.item-product-cat .item-image{overflow:hidden;margin:0;}
.item-product-cat .item-image img{
	width:100%;
	transform:scale(var(--cat-img-rest));
	transition:transform .7s var(--ease);
	display:block;
}
.item-product-cat .item-product-cat-content:hover .item-image img{transform:scale(var(--cat-img-zoom));}

/* Caption anatomy for layout-2 (this is not a bar under the image):
     .product-cat-content-info — absolutely positioned wrapper, pinned by the
       theme at left:50% / translateX(-50%) / bottom:40px with a fixed 40px height.
     .item-title              — the visible pill itself; the theme gives it
       background:#fff, min-width:190px, line-height:40px, and swaps the
       background to gold on hover.

   The pill is what needs restyling, not the wrapper. Two earlier mistakes are
   corrected here: forcing position:relative on the wrapper tore the caption out
   of its pinned placement, and tinting the hover text gold put gold on the
   theme's gold hover background — which is why the label vanished on hover.

   Every theme declaration above is a 5-class selector, so the overrides below
   need !important to land. */
/* Width is set on the wrapper (not left to shrink-to-fit) so the pill is a
   consistent size across all four cards regardless of name length. */
.item-product-cat .product-cat-content-info{
	height:auto!important;
	min-height:0!important;
	width:90%;
	max-width:none;
	padding:0!important;
	text-align:center;
	background:none;
	/* Sit on the image's bottom edge (the theme pins it 40px up inside the
	   photo), then shift down by most of the pill's own height so it only
	   clips the edge rather than straddling it 50/50. At 85% just a sliver of
	   the pill covers the photo, which keeps the overlap effect without the
	   pill landing on the product itself. Being a percentage of the pill's own
	   height, the bite stays proportional if the pill's height changes.
	   translateX(-50%) is the theme's own centring and has to be repeated —
	   transform is a single property, so setting Y alone would drop it. */
	bottom:var(--cat-pill-overhang)!important;
	-webkit-transform:translate(-50%,85%)!important;
	transform:translate(-50%,85%)!important;
}

/* All four pills are held at a two-line height, so "Display Counters" (which
   fits on one line) is the same size as "Jewellery Trays & Display Props"
   (which wraps to two). Without this the pills were ragged — each sized to its
   own text.

   min-height is expressed in em so it tracks font-size through the media
   queries: 2 lines x 1.4 line-height = 2.8em, plus the 24px of vertical
   padding that border-box folds into the height. Flex centring keeps a
   one-line label optically centred in that taller box; overflow:hidden caps
   anything longer at two lines. */
.item-product-cat .item-title{
	display:flex!important;
	align-items:center;
	justify-content:center;
	min-height:calc(2.8em + 24px);
	overflow:hidden;
	width:100%;
	box-sizing:border-box;
	min-width:0!important;
	max-width:100%;
	text-align:center;
	padding:12px 18px!important;
	border-radius:10px;
	font-family:var(--display)!important;
	font-size:15px!important;
	font-weight:700;
	letter-spacing:1.5px!important;
	line-height:1.4!important;
	text-transform:uppercase;
	background-color:var(--brand-blue)!important;
	background-image:var(--blue-gradient)!important;
	color:#fff!important;
	transition:background-color .35s var(--ease),background-position .55s var(--ease);
}
/* Navy at rest, gold on hover — white text in both states, so the label is
   legible whichever background is showing. */
.item-product-cat .item-title:hover,
.item-product-cat .item-product-cat-content:hover .item-title{
	background-color:var(--brand-gold)!important;
	background-image:var(--gold-gradient)!important;
	background-size:220% 100%;
	background-position:100% 0;
	color:#fff!important;
}

/* Catalogue carousel tiles get the same lift, minus the caption. */
.block-products .item-image{overflow:hidden;}
.block-products .item-image img{transition:transform .7s var(--ease);}

/* "View All Products" sat tight under the carousel — the theme's m-t-30 is not
   enough clearance once the tiles scale on hover. */
.block-products .block-content > .text-center{margin-top:52px!important;}
.block-products .item-image:hover img{transform:scale(1.06);}

/* ---------------------------------------------------------------------
   5. "Why brands trust us" — plain checklist becomes a card grid
   --------------------------------------------------------------------- */

.why-us-grid{
	display:grid!important;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px!important;
	max-width:1040px;
	margin:0 auto 46px!important;
}
.why-us-grid li{
	background:rgba(255,255,255,.94);
	border:1px solid rgba(176,137,59,.28);
	padding:26px 24px!important;
	gap:16px!important;
	font-size:15px!important;
	font-weight:700;
	letter-spacing:.6px;
	color:var(--ink);
	transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.why-us-grid li:hover{
	border-color:var(--brand-gold);
	box-shadow:0 12px 28px rgba(2,26,61,.10);
	transform:translateY(-3px);
}
/* Check glyph in a gold ring instead of a bare icon. */
.why-us-grid li i{
	flex:0 0 auto;
	width:40px;height:40px;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--brand-gold);
	border-radius:50%;
	color:var(--brand-gold)!important;
	font-size:16px!important;
}

.why-us-tagline{
	font-family:'Lato',sans-serif;
	font-size:12px!important;
	font-weight:700;
	letter-spacing:3.5px;
	text-transform:uppercase;
	color:var(--brand-gold);
}
.why-us-tagline strong{
	font-family:var(--display);
	font-size:40px!important;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:none;
	color:var(--ink);
	margin-top:14px!important;
}

/* ---------------------------------------------------------------------
   6. Enquiry block

   Everything below is scoped to `.bg-img-5` — the dark ground it is designed
   against — for two reasons. It is the file's rule that light type is keyed
   to the ground rather than the component, and it buys the specificity this
   block needs: the theme dresses `.block-newsletter.layout-2` at four
   classes deep, so component-level selectors here silently lost to it. That
   is why the button was rendering at the theme's 40px with zero horizontal
   padding, clipping "ENQUIRE NOW" at both ends.
   --------------------------------------------------------------------- */

.newsletter-title{font-size:40px!important;margin-bottom:16px!important;}

/* Honeypot field, shared by the home page's quote form and the contact form.
   Positioned off-screen rather than display:none — some bots skip fields they
   can tell are hidden, and skipping the trap is the one thing it must not let
   them do. aria-hidden + tabindex="-1" keep it away from screen readers and
   the tab order, so nobody using the site can land in it by accident. */
.sd-trap{
	position:absolute!important;
	left:-9999px!important;
	width:1px;height:1px;overflow:hidden;
}

/* Server-side rejection under the quote form. It sits on the dark .bg-img-5
   ground, so the usual near-black-on-pink alert would vanish — this is the
   same warm red lifted until it reads against the photograph. */
.newsletter-error{
	margin-top:12px;
	font-size:13px;
	line-height:1.6;
	color:#ffc9bd;
}

/* The theme paints `.block-info .info-wrap` white and caps it at 510px — a
   white card laid on top of the photograph. It is what swallowed the
   standfirst, and it defeats the point of running the block on artwork at
   all, so it is cleared and the copy sits directly on the scrimmed image. */
.bg-img-5 .block-info .info-wrap{
	max-width:760px;
	margin:0 auto;
	padding:0;
	background:transparent;
}
.bg-img-5 .newsletter-text{
	max-width:560px;
	margin-left:auto;
	margin-right:auto;
}

.bg-img-5 .block-newsletter .newsletter-form{
	max-width:580px;
	margin:42px auto 0;
	display:flex;
	align-items:stretch;
	gap:0;
}
/* min-width:0 because a flex item will not shrink below its intrinsic input
   width otherwise, and the field would push the button off the row. */
.bg-img-5 .block-newsletter .newsletter-form input[type=email]{
	flex:1;
	min-width:0;
	height:56px;
	border:1px solid rgba(255,255,255,.28);
	border-right:0;
	border-radius:6px 0 0 6px;
	background:rgba(255,255,255,.08);
	color:#fff;
	padding:0 24px;
	font-size:14px;
	letter-spacing:.5px;
}
.bg-img-5 .block-newsletter .newsletter-form input[type=email]::placeholder{color:rgba(255,255,255,.60);}
.bg-img-5 .block-newsletter .newsletter-form input[type=email]:focus{
	outline:none;
	border-color:var(--brand-gold);
	background:rgba(255,255,255,.14);
}

/* The submit lives inside a `.btn-submit` span that the theme paints navy and
   sizes independently of the input within it, which is the other half of the
   clipping. The span is reduced to a transparent sleeve so the input alone
   draws the button. */
.bg-img-5 .block-newsletter .newsletter-form .btn-submit{
	display:flex;
	margin:0;
	background:transparent;
}
/* layout-2 already suppresses the theme's icomoon arrow, but the base rule
   sets a `content` — pinned off here so a stray glyph cannot sit over the label. */
.bg-img-5 .block-newsletter .newsletter-form .btn-submit:before{content:none;}

/* Gold, not the navy this used to be: a blue button on a warm brown
   photograph reads as a foreign element, and gold ties it to the heading and
   the rules elsewhere on the page. Navy type on gold keeps both brand
   colours in play and gives the label a stronger contrast than white would. */
.bg-img-5 .block-newsletter .newsletter-form .btn-submit input[type=submit]{
	height:56px;
	line-height:56px;
	border:0;
	border-radius:0 6px 6px 0;
	padding:0 38px;
	background-color:var(--brand-gold);
	background-image:var(--gold-gradient);
	color:var(--brand-blue);
	font-size:12px;
	font-weight:700;
	letter-spacing:2px;
	text-transform:uppercase;
	white-space:nowrap;
	cursor:pointer;
	transition:filter .35s var(--ease);
}
/* Brightening the existing gradient rather than swapping the fill — a colour
   change on hover would break the gradient's five-stop shape. */
.bg-img-5 .block-newsletter .newsletter-form .btn-submit input[type=submit]:hover{
	filter:brightness(1.10);
	color:var(--brand-blue);
}

/* ---------------------------------------------------------------------
   7. Reach stats + client logo strip
   --------------------------------------------------------------------- */

/* Reach figures at the foot of the home page's enquiry section. They share
   that section rather than occupying a screen of their own — see the markup
   note in index.php. The rule above them is the only separator; a panel or a
   second ground here would re-read as two blocks, which is the thing being
   avoided. */
.home-stats{
	margin-top:54px;
	padding-top:32px;
	border-top:1px solid rgba(176,137,59,.28);
}
.stat-row{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	text-align:center;
}
.stat-value{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(30px,3.6vw,46px);
	line-height:1;
	letter-spacing:1px;
	color:var(--gold-light);
	/* The figure and its "+" must not be split across lines while the number
	   is still growing and the box is at its narrowest. */
	white-space:nowrap;
}
.stat-label{
	margin-top:11px;
	font-family:'Lato',sans-serif;
	font-weight:700;
	font-size:11px;
	letter-spacing:2.5px;
	text-transform:uppercase;
	color:rgba(255,255,255,.62);
}
@media (max-width:600px){
	.home-stats{margin-top:38px;padding-top:26px;}
	.stat-row{grid-template-columns:repeat(2,1fr);gap:28px 14px;}
}

/* The client logo strip that used to live here — a desaturated row of five
   brand marks on the home page and about.php — has been removed from the site
   entirely, along with .clients-label / .client-logos and the grayscale-until-
   hover treatment on .block-image.slider. The home page shows the reach stats
   above in its place. */

/* ---------------------------------------------------------------------
   8. Inner-page title banner + footer
   --------------------------------------------------------------------- */

/* The banner H1 is the page's real heading, so it carries the full
   keyword-bearing line ("About Shifa Display – Jewellery Display & Packaging
   Manufacturer") rather than a two-word label. At a flat 46px those run four
   lines and swamp the banner, hence the clamp and the measure: long headings
   settle around 34–40px and wrap at a readable width, short ones still reach
   the original 46px. */
#title .text-title-heading,
#title h1{
	font-family:var(--display)!important;
	font-size:clamp(26px,3.1vw,46px)!important;
	font-weight:700!important;
	letter-spacing:3px!important;
	text-transform:uppercase;
	max-width:26ch;
	margin-left:auto!important;
	margin-right:auto!important;
}

/* Everything on the banner is white. The navy ground itself is set up in §0
   alongside .bg-img-5, since the two share one recipe.

   This is not cosmetic tidying: the theme paints the breadcrumb link and its
   delimiter #021a3d — the SAME navy the ground now is — so "Home" and the
   separator were invisible the moment the background changed. The heading was
   #e5e5e5 rather than white. Every one of these is listed explicitly, because
   `color` on the container does not reach an <a>, which carries its own. */
.site-main .page-title,
.site-main .page-title .content-title-heading .text-title-heading,
.site-main .page-title h1,
.site-main .page-title .breadcrumbs,
.site-main .page-title .breadcrumbs a{
	color:#fff!important;
}
/* Gold on hover, matching every other link on a dark ground. */
.site-main .page-title .breadcrumbs a:hover{color:var(--gold-light)!important;}
/* The delimiter is a 1px bar drawn as a :before, not a character — it needs
   background, not color. Held at 45% so it separates without competing. */
.site-main .page-title .breadcrumbs .delimiter:before{
	background:rgba(255,255,255,.45)!important;
}

#site-footer .block-text .block-title{
	font-family:var(--display)!important;
	font-size:26px!important;
	letter-spacing:2.5px;
	text-transform:uppercase;
}
#site-footer .social-link li a{
	width:38px;height:38px;
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;
}

/* ---------------------------------------------------------------------
   8b. Social links — real brand marks

   Markup: include/social-links.php, used by the header bar, the mobile fixed
   bar and the footer. The styling lives here rather than in any of those so
   the three stay identical by construction.

   No tile behind the logos. Each mark carries its own silhouette — a circle
   for Facebook and WhatsApp, a rounded square for Instagram and LinkedIn — so
   the theme's circular chip has to be switched off: a Facebook circle inside
   another circle reads as a mistake rather than a design.

   The !important flags earn their place: `.social-link li a` is styled by
   app.css and again in section 8 above, both with selector weight that beats
   an unaided class here.
   --------------------------------------------------------------------- */

.brand-social{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:16px;
	list-style:none;
	margin:0;
	padding:0;
}
.brand-social li{margin:0;float:none;}
.brand-social li a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto!important;
	height:auto!important;
	padding:0;
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	line-height:0;
	transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.brand-social li a svg{
	width:30px;
	height:30px;
	display:block;
}

/* Official brand colours. Instagram is absent on purpose — its mark is a
   gradient, painted by a fill on the path itself in the partial. */
.brand-social li a.social-facebook svg{fill:#1877F2;}
.brand-social li a.social-linkedin svg{fill:#0A66C2;}
.brand-social li a.social-whatsapp svg{fill:#25D366;}

/* The logos are already at full saturation, so a colour shift on hover has
   nowhere to go; a small lift reads more clearly than a tint. */
.brand-social li a:hover{transform:translateY(-3px);opacity:.85;}

/* The header bar and the mobile bottom bar are tighter than the footer. */
.header-social .brand-social{gap:12px;}
.header-social .brand-social li a svg{width:24px;height:24px;}
.header-mobile-fixed .header-social .brand-social li a svg{width:22px;height:22px;}

/* Dev-only reminders. Kept in the markup as HTML comments instead of
   visible text; this rule is a belt-and-braces guard for any that
   are re-added by hand. */
.placeholder-note{display:none!important;}

/* ---------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------- */

/* .title-slider is deliberately absent from these breakpoints: it is sized by
   a clamp() in section 3 instead. Fixed steps here were tuned for a caption
   that had the full viewport width to run across — in the split banner it only
   has half, so a 52px step at 1199px overflowed the panel. */
@media (max-width:1199px){
	.block-title h1,
	.block-title h2,
	.block-title h3,
	.block-title h4{font-size:32px!important;}
}

@media (max-width:991px){
	.why-us-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.newsletter-title,
	.why-us-tagline strong{font-size:32px!important;}
	/* No font-size here any more: the clamp() in §8 already lands at ~30px by
	   this width, and a fixed 34px override only fought it. */
}

@media (max-width:600px){
	.why-us-grid{grid-template-columns:1fr;gap:14px!important;}
	.block-title h1,
	.block-title h2,
	.block-title h3,
	.block-title h4{font-size:26px!important;letter-spacing:1.5px!important;padding-bottom:18px;}
	.newsletter-title,
	.why-us-tagline strong{font-size:26px!important;}
	.button,.button-primary,.button-white,.button-outline{padding:5px 20px!important;letter-spacing:1.5px;}
	/* Stack the enquiry field and button — side by side they collapse to
	   an unusable input on narrow screens. Stacked, each element needs the
	   radius on all four corners rather than the joined-pair split.
	   Carries the same .bg-img-5 scope as section 6: without it these sit a
	   class below the rules they are meant to override and never apply. */
	.bg-img-5 .block-newsletter .newsletter-form{flex-direction:column;gap:12px;}
	.bg-img-5 .block-newsletter .newsletter-form input[type=email]{
		border-right:1px solid rgba(255,255,255,.28);
		border-radius:6px;
	}
	.bg-img-5 .block-newsletter .newsletter-form .btn-submit,
	.bg-img-5 .block-newsletter .newsletter-form .btn-submit input[type=submit]{width:100%;}
	.bg-img-5 .block-newsletter .newsletter-form .btn-submit input[type=submit]{border-radius:6px;}
	/* Same narrowing .cz-cta uses: two 230px halftone bands would meet in the
	   middle of a phone-width section and put dots behind the type. */
	.background-img.bg-img-5:before,
	.background-img.bg-img-5:after{width:110px;}
}

@media (prefers-reduced-motion:reduce){
	*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}