/*
Theme Name: BelGioioso Hispanic Selection
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* ===== Palette (BelGioioso Hispanic Selection) ===== */
:root{
	--orange:#f58220;   /* header bar, accents */
	--red:#d02030;      /* primary buttons, accent headlines */
	--magenta:#ed1edb;  /* marquee / Cotija */
	--blue:#134e8d;     /* footer */
	--oaxaca:#0189e1;   /* Oaxaca blue */
	--quesadilla:#48a974;/* Quesadilla green */
	--yellow:#f2e85b;   /* hero headline */
	--cream:#f6efdf;    /* page background */
	--cream-2:#efe6d2;  /* alt section background */
	--ink:#1a1a1a;      /* body text */
	--white:#fff;
	--border:#d8cfba;
	/* legacy aliases used by starter helpers */
	--primary:var(--red);
	--accent:var(--orange);
	--dark:var(--ink);
	--text:var(--ink);
	--bg:var(--cream);
	--bg-alt:var(--cream-2);
}

/* ===== WordPress Core Styles ===== */
.alignleft{float:left; margin-right:1.5rem; margin-bottom:1rem}
.alignright{float:right; margin-left:1.5rem; margin-bottom:1rem}
.aligncenter{display:block; margin-left:auto; margin-right:auto; margin-bottom:1rem}
.alignwide{max-width:100%; margin-left:auto; margin-right:auto}
.alignfull{max-width:100vw; margin-left:calc(-50vw + 50%); width:100vw}
.wp-caption{max-width:100%; margin-bottom:1rem}
.wp-caption img{display:block; max-width:100%; height:auto}
.wp-caption-text,.wp-block-image figcaption,.gallery-caption{font-size:.875rem; color:#666; margin-top:.5rem; text-align:center}
img{max-width:100%; height:auto}
.screen-reader-text{clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; word-wrap:normal!important}
.has-text-align-left{text-align:left}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}

/* ===== Reset ===== */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px}
body{font-family:"Albert Sans",sans-serif; min-width:1600px; min-height:100vh; line-height:1.6; overflow-x:hidden; font-weight:400; font-size:1rem; color:var(--ink); background:var(--cream);}
/* Figma: the HOME page sits on white — the only cream there is the rounded Fiesta
   Favorites panel. Product Family and Product Detail are cream, hence the scope. */
body.home{ background:var(--white);}
img, picture, video, canvas, svg{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer}
a{text-decoration:none; color:inherit}
table{border-collapse:collapse; border-spacing:0}
input, select, textarea{width:100%; padding:12px 14px; border:1px solid var(--border); background:var(--white); font:inherit; border-radius:8px; -webkit-appearance:none}
textarea{resize:none; min-height:120px}

/* ===== Typography ===== */
.display, h1, h2, h3{font-family:"rl-limo",sans-serif; font-weight:700; line-height:1.02; text-transform:uppercase; letter-spacing:0.005em;}
h1{font-size:2.75rem}
h2{font-size:2.4rem}
h3{font-size:1.5rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ===== Layout ===== */
/* Page frame. Everything that belongs to the layout is capped here and centred, so
   nothing keeps spreading left/right as the window grows — full-bleed colour bands
   (header, marquee, banner, CTA background, footer) stay outside it on purpose.
   Elements that run past the frame do it with a plain -50px margin, never a 100vw calc. */
.contentCenter, .content{ width:1500px; margin:0 auto;}
/* Four fixed tiers (Edison's convention): each sets a body min-width and a .content width,
   so nothing resizes between breakpoints.
   big desktop >=1600 | small desktop 1280-1599 | tablet 768-1279 | phone <768 */
.hidden, .hide{display:none !important}
.center{ text-align:center !important;}
.white{ color:var(--white);}

.row{display:flex; flex-wrap:wrap; gap:24px}
.col{flex:1}
.col-1{flex:0 0 100%}
.col-2{flex:0 0 calc(50% - 12px)}
.col-3{flex:0 0 calc(33.333% - 16px)}
.col-4{flex:0 0 calc(25% - 18px)}

/* Responsive BG */
.rbg{background-image:var(--bg-desktop); background-size:cover; background-position:center; background-repeat:no-repeat}

/* ===== Buttons ===== */
.button{display:inline-block; padding:11px 26px; background:var(--red); color:var(--white); font-family:"Albert Sans",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; font-size:0.9375rem; line-height:1; border-radius:10px; border:none; cursor:pointer; transition:background 0.25s, transform 0.25s;}
.button:hover{background:#b01726; transform:translateY(-2px)}
.button.orange{background:var(--orange)} .button.orange:hover{background:#e07215}

/* ===== Notifications ===== */
.msg{padding:12px 16px; font-size:1rem; margin:20px 0 0; display:none; border-radius:8px;}
.msg.visible{display:block !important;}
.msg.success{background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7}
.msg.error{background:#fbe9e7; color:#c62828; border:1px solid #ef9a9a}
.msg.warning{background:#fff8e1; color:#f57f17; border:1px solid #ffe082}
.redBorder{border-color:#c62828 !important; outline:2px solid #c62828 !important;}

/* ===== ACF Blocks wrapper ===== */
.block{ position:relative;}

/* ===== Popup overlay ===== */
.popupOverlay{position:fixed; left:0; top:0; background:rgba(0,0,0,0.6); display:block; width:100vw; height:100vh; z-index:2000;}
.popupOverlay .popup{ width:100%; margin:0 auto; max-width:420px; position:relative;}
.popupOverlay .popupFullImg, .popupOverlay .popupFullImg img{ width:100%; margin:0 auto; display:block;}
.popupOverlay .close{ position:absolute; right:-40px; top:-40px; width:40px; height:40px; background:url(img/close.svg) no-repeat center center / contain; cursor:pointer;}
.displayTable{ display:table; width:100%; height:100%;}
.verticalAlign{ display:table-cell; vertical-align:middle;}

/* ===== Header (orange centered-logo nav) ===== */
header{ position:fixed; left:0; top:0; width:100%; min-width:1600px; z-index:1000; background:var(--orange); transition:0.3s ease;}
/* tier widths (see Layout): placed after the header rule so they win */
@media(max-width:1599px){ .contentCenter, .content{ width:1200px;} body, header{ min-width:1280px;} }
@media(max-width:1279px){ .contentCenter, .content{ width:720px;} body, header{ min-width:768px;} }
@media(max-width:767px){ .contentCenter, .content{ width:345px;} body, header{ min-width:375px;} html{ font-size:15px;} }  /* phone: every rem-based size ~6% smaller */
body.admin-bar header{ top:32px;}
/* CLIENT EDIT 2026-09-04: lift the header off the page once scrolling starts.
   body.scrolled is toggled past 60px by the handler in footer.php. */
body.scrolled header{ box-shadow:0 3px 16px rgba(0,0,0,0.18);}
/* Figma NAV 7002:22: bar 148 tall, logo 154x92, links 22px / 1.1px tracking,
   current section in RL Limo Black yellow. */
header .content{ display:flex; align-items:center; justify-content:center; position:relative; min-height:148px;}
header .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; z-index:2;
	background:var(--yellow); border-radius:16px; padding:14px 22px;}
header .logo img{ height:92px; width:auto;}
header .headerNav{ width:100%;}
.headerLinks{ list-style:none; display:flex; justify-content:center; align-items:center; gap:7.4%;}
.headerLinks a{ font-family:"rl-limo",sans-serif; font-weight:700; font-size:1.375rem; line-height:1; color:var(--white); text-transform:uppercase; letter-spacing:0.05em; transition:opacity 0.2s;}
.headerLinks a:hover{ opacity:0.78;}
/* current section: RL Limo Black in yellow (Figma) */
.headerLinks .current-menu-item > a{ font-weight:900; color:var(--yellow);}
/* center notch for the logo — assumes a 4-item Header Menu (2 links each side).
   Percentages of the ul width put the four links where Figma has them at 1600;
   below 1400 they fall back to fixed spacing so nothing overflows. */
.headerLinks li:nth-child(2){ margin-right:29%;}
@media(max-width:1599px){
	.headerLinks{ gap:40px;}
	.headerLinks li:nth-child(2){ margin-right:230px;}
}
/* hamburger (mobile only) */
header .menuIcon{ display:none; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:46px; height:46px; align-items:center; justify-content:center; z-index:3;}
header .menuIcon span{ display:block; width:28px; height:3px; background:var(--white); border-radius:2px; position:absolute; transition:0.3s ease; left:50%; margin-left:-14px;}
header .menuIcon span:nth-child(1){ top:16px;}
header .menuIcon span:nth-child(2){ top:23px;}
header .menuIcon span:nth-child(3){ top:30px;}
body.menuOpen .menuIcon span:nth-child(1){ top:23px; transform:rotate(45deg);}
body.menuOpen .menuIcon span:nth-child(2){ opacity:0;}
body.menuOpen .menuIcon span:nth-child(3){ top:23px; transform:rotate(-45deg);}

/* page sections start below the fixed header */
section{ padding-top:148px;}
/* No admin-bar offset needed: WordPress already sets html{margin-top:<bar height>}, so the
   plain `section` padding (= header height) is correct for logged-in users too. Adding the
   bar height here double-counts it and opens a gap under the header. Only the 46px-bar
   breakpoint below needs a fix, because the theme hard-codes header top:32px. */

/* ===== Footer (navy columns) ===== */
/* Figma (footer 7003:6): bar 241 tall, logo 282x169 at 39px from the top,
   link columns starting at 38% and 58.4% of the content, rows 20px/36 line-height
   pitched 50px apart, copyright 18px orange bottom right.
   Links and copyright are RL Limo Regular (400); the Typekit kit djs4shn carries
   400/700/900 in roman and italic since 2026-08-17. */
footer{ background:var(--blue); color:var(--white); padding:39px 0 52px;}
footer a{ color:var(--white); transition:opacity 0.2s;} footer a:hover{ opacity:0.8;}
footer .footRow{ display:flex; align-items:flex-start; gap:0;}
.footLogo{ flex:0 0 38%;}
.footLogo img{ width:282px; max-width:100%; height:auto; aspect-ratio:282/169;}
.footerMenu{ flex:0 0 20.4%; padding-top:8px;}
.footLinks{ list-style:none; display:flex; flex-direction:column; gap:14px;}
.footLinks a{ font-family:"rl-limo",sans-serif; font-weight:400; font-size:1.25rem; line-height:36px; text-transform:uppercase; letter-spacing:normal;}
.footCopy{ flex:1 1 auto; display:flex; align-items:flex-end; justify-content:flex-end; align-self:stretch;}
.copyright{ font-family:"rl-limo",sans-serif; font-weight:400; font-size:1.125rem; line-height:36px; color:var(--orange); letter-spacing:normal; margin:0;}

/* ===== HERO ===== */
/* Figma places these photos with an explicit fill transform, not cover. Sizes are % of the
   container width; positions converted to the CSS offset/(container-image) percentage. */
.hero{ position:relative; width:100%; min-height:752px; display:flex; align-items:center; justify-content:center; text-align:center; background-size:111.56% auto; background-position:37.2% 66.9%; overflow:hidden;}
.hero::before{ content:""; position:absolute; inset:0; background:rgba(2,2,2,0.4);}
/* Figma Product Family: the headline-less hero is a 462 photo band, not the 900 home
   hero — and it carries no overlay, since there is no headline to keep legible. */
.hero.heroPlain{ min-height:462px; background-size:119.38% auto; background-position:63.9% 38.2%;}
.hero.heroPlain::before{ background:none;}
/* CLIENT EDIT 2026-09-04: the family hero is two layers - the table is the background
   (crops with the viewport as before) and the products ride on top, sized with contain
   so they stay FULLY visible at every width. drop-shadow follows the PNG alpha, so the
   shadow hugs the corn/limes/tubs rather than a rectangle. */
/* CLIENT EDIT 2026-09-04: the hero is two images, both editable in admin - the background
   crops with the viewport, the overlay always stays fully visible on top. The asset is
   padded so its centre is the TUB GROUP: the tubs must never crop, the produce may.
   Shadow measured off the unlayered original (39% contact darkening, ~73px reach). */
.hero .heroOverlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
	background-repeat:no-repeat; background-position:center;
	background-size:auto min(144%, 128vw);
	filter:drop-shadow(-2px 3px 7px rgba(38,18,4,0.46)) drop-shadow(-5px 5px 26px rgba(38,18,4,0.26));}
.hero .heroInner{ position:relative; z-index:2; padding:0 40px; transform:translateY(-9px);}
.hero h1{ font-size:6rem; line-height:1.04; color:var(--yellow); max-width:1000px; margin:0 auto; text-shadow:0 2px 18px rgba(0,0,0,0.28);}

/* ===== MARQUEE ===== */
.marquee{ background:var(--magenta); overflow:hidden; white-space:nowrap; padding:14px 0;}
/* Two identical groups side by side; the track slides left by exactly one group
   width, so group 2 arrives where group 1 began and the loop is seamless. Each
   group is at least a viewport wide, otherwise the strip empties out mid-scroll. */
.marquee .marqueeTrack{ display:flex; width:max-content; animation:marqueeScroll 112s linear infinite;}
.marquee .marqueeGroup{ display:flex; flex:0 0 auto; min-width:100vw; justify-content:space-around; white-space:nowrap;}
.marquee .marqueeTrack span{ display:inline-block; color:var(--white); font-family:"Albert Sans",sans-serif; font-weight:600; font-size:1.5625rem; text-transform:uppercase; letter-spacing:0.02em; padding:0 38px;}
@keyframes marqueeScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .marquee .marqueeTrack{ animation:none;} }

/* ===== Tablet ===== */
@media(max-width:1279px){
	.hero, .hero.heroPlain, .bannerBlock .banner{ background-size:cover; background-position:center;}
	header .content{ justify-content:flex-start; min-height:88px;}
	header .menuIcon{ display:flex;}
	header .logo{ left:50%; padding:8px 14px; border-radius:10px;}
	header .logo img{ height:58px;}
	header .headerNav{ position:absolute; left:0; top:100%; width:100%; background:var(--orange); max-height:0; overflow:hidden; transition:max-height 0.3s ease;}
	body.menuOpen header .headerNav{ max-height:80vh;}
	.headerLinks{ flex-direction:column; gap:0; padding:8px 0 18px;}
	.headerLinks li:nth-child(2){ margin-right:0;}
	.headerLinks a{ display:block; padding:14px 32px; font-size:1.5rem;}
	section{ padding-top:88px;}
	.hero{ min-height:520px;}
	.hero h1{ font-size:3.6rem;}
	footer .footRow{ flex-wrap:wrap;}
	.footLogo{ flex:0 0 100%; margin-bottom:24px;}
	.footLogo img{ margin:0 auto; width:180px;}
	.footerMenu{ flex:1 1 40%; text-align:center;}
	.footLinks{ align-items:center;}
	.footCopy{ flex:0 0 100%; justify-content:center; margin-top:18px;}
}

/* ===== Phone ===== */
@media(max-width:782px){
	body.admin-bar header{ top:46px;}   /* WP grows the bar to 46px here */
}
@media(max-width:767px){
	h1{font-size:2.1rem} h2{font-size:1.9rem}
	.hero{ min-height:440px;}
	.hero h1{ font-size:2.6rem;}
	.marquee .marqueeTrack span{ font-size:1.15rem; padding:0 24px;}
	[class*="col-"]{ flex:0 0 100%;}
	.footerMenu{ flex:1 1 100%;}
	.footLogo img{ width:140px;}
	.footLinks{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 20px;}
	.footLinks a{ font-size:0.9375rem; line-height:30px;}
	#wpadminbar{ position:fixed !important;}
}

/* =================================================================
   BLOCK SECTIONS
   ================================================================= */
.eyebrow{ display:block; font-family:"Albert Sans",sans-serif; font-weight:500; font-size:2rem; color:var(--orange); text-transform:uppercase; letter-spacing:0.02em; line-height:1; margin-bottom:0;}

/* ===== TEXT + IMAGE ===== */
/* Figma: the photo starts 106px below the marquee bar (968 -> 1074) */
.textImage{ padding:106px 0 95px;}
.tiRow{ display:flex; align-items:center; gap:99px;}
.textImage.img-right .tiImage{ order:2;}
.tiImage{ flex:0 0 48%; position:relative;}
.textImage.img-left .tiImage{ margin-left:-50px; flex-basis:51.9%;}
.tiImageInner{ position:relative; z-index:2;}
/* Figma crops this photo to 777x560; the source asset is a shallower crop */
.tiImageInner img{ width:100%; aspect-ratio:777/560; object-fit:cover; object-position:100% 50%; height:auto; display:block; position:relative; z-index:2;}
.tiImage::before{ content:""; position:absolute; z-index:1; left:25px; top:27px; right:-13px; bottom:-15px; background:var(--orange);}
.tiFlower{ position:absolute; width:64px; height:auto; z-index:3;}
/* Figma 5014:288: this flower sits level with the photo's top edge (1078 vs 1074),
   not above it — at -58px it collided with the marquee bar. */
.tiFlowerTop{ left:calc(100% + 30px); top:-60px; transform:rotate(-90deg);}
.tiFlowerBottom{ left:25px; top:calc(100% + 34px);}
/* Figma: the text column is 607 wide and stops at 92.5% of the frame — left free it
   runs to the content edge and the right side reads too wide. Heading box is narrower
   again (553), which is what sets its line break. */
.tiText{ flex:1 1 auto; position:relative; top:5px; left:-4px; max-width:607px; font-size:1.25rem; line-height:1.5;}
.tiHeading{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.4375rem; line-height:1.109; text-transform:uppercase; max-width:553px; margin-bottom:40px;}
.tiBody{ font-size:1.25rem; line-height:1.5; color:#000;}
.tiBody p{ margin-bottom:30px;}
.tiText .button{ margin-top:11px;}

/* ===== HIGHLIGHTS ===== */
.highlightsBlock{ padding:22px 0 100px;}
.highlights{ position:relative; left:-8px; max-width:1416px; margin:0 auto; background:transparent; border-radius:50px; padding:31px 50px 38px;}
.highlights::before{ content:""; position:absolute; z-index:0; inset:15px -14px -15px 14px; background:var(--orange); border-radius:50px;}
.highlights::after{ content:""; position:absolute; z-index:1; inset:0; background:var(--magenta); border-radius:50px;}
.highlights > *{ position:relative; z-index:2;}
.hlTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--yellow); font-size:2.8rem; text-align:center; text-transform:uppercase; line-height:61px; margin-bottom:23px;}
.hlCols{ display:flex; align-items:stretch; min-height:118px;}
.hlCol{ flex:1 1 0; padding:6px 14px; text-align:center; color:var(--white); font-family:"Albert Sans",sans-serif; font-weight:500; font-size:1.5rem; line-height:1.208; text-transform:uppercase; display:flex; align-items:center; justify-content:center;}
.hlCol + .hlCol{ border-left:5px solid var(--yellow);}
/* Figma's four text boxes are 305 / 337 / 257 / 284 wide — matching those ratios is
   what reproduces the design's line breaks, and it lands the separators within ~1% of
   where Figma draws them (27.2% / 53.2% / 75.9% of the panel). */
.hlCol:nth-child(1){ flex-grow:305;}
.hlCol:nth-child(2){ flex-grow:337;}
.hlCol:nth-child(3){ flex-grow:257;}
.hlCol:nth-child(4){ flex-grow:284;}
.highlightsBlock:not(.pdPerf) .hlCol:nth-child(1){ padding:6px 15px;}
.highlightsBlock:not(.pdPerf) .hlCol:nth-child(2){ padding:6px 13px;}
.highlightsBlock:not(.pdPerf) .hlCol:nth-child(3){ padding:6px 30px;}
.highlightsBlock:not(.pdPerf) .hlCol:nth-child(4){ padding:6px 1px;}

/* ===== BANNER ===== */
.banner{ position:relative; width:100%; min-height:588px; display:flex; align-items:center; justify-content:center; text-align:center; background-size:113.56% auto; background-position:46.5% 56.3%;}
.banner::before{ content:""; position:absolute; inset:0; background:rgba(2,2,2,0.2);}
.banner .bannerInner{ position:relative; z-index:2; padding:0 40px; transform:translateY(-19px); min-width:0; max-width:100%;}
.banner h2{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--white); font-size:4.06rem; line-height:1.1; text-transform:uppercase; max-width:1000px; margin:0 auto; text-shadow:0 2px 14px rgba(0,0,0,0.3);}

/* ===== FIESTA FAVORITES ===== */
/* Figma: banner ends 2710, the eyebrow starts 2770 */
.fiestaBlock{ padding:60px 0 0;}
.fiestaPanel{ position:relative; z-index:1; background:#f6f0dc; border-radius:50px; margin-top:-51px; padding:9px 70px 0;}
/* Figma: title box 2802..2901, cream panel starts 2850 — the panel top cuts through it */
.fiestaHead{ position:relative; z-index:2; margin-bottom:0;}
.fiestaHead .eyebrow{ color:var(--orange); text-align:center;}
.fiestaTitle{ position:relative; top:-10px; font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:4.6875rem; line-height:1.32; text-transform:uppercase; letter-spacing:0.05em; text-align:center;}
/* 120px = the 50px content gutter plus the panel's own 70px padding, i.e. the frame edge */
.fiestaRow{ --bleed:120px; display:flex; align-items:flex-start; gap:306px; padding:88px 0 0;}
/* Figma Vector 5/6: a 4px #d02030 rule, not a hairline */
.fiestaRow + .fiestaRow{ border-top:4px solid var(--red);}
.fiestaRow.imgRight{ flex-direction:row-reverse;}
/* dish is 428 tall; padding-bottom is the tub hang, set from Figma's row heights 644/751/765 */
.fiestaImg{ flex:0 0 40%; position:relative; padding-bottom:216px;}
.fiestaDish{ width:auto; overflow:hidden; border-radius:30px;}
.fiestaRow.imgLeft .fiestaDish{ margin-left:calc(var(--bleed) * -1);}
.fiestaRow.imgRight .fiestaDish{ margin-right:calc(var(--bleed) * -1);}
.fiestaDish img{ display:block; width:100%; height:428px; object-fit:cover;}
.fiestaRow.imgLeft .fiestaDish{ border-top-left-radius:0; border-bottom-left-radius:0;}
.fiestaRow.row0 .fiestaDish img{ transform:translate(88px,-20px) scale(1.27);}
.fiestaRow.row1 .fiestaDish img{ transform:translate(0,16px) scale(1.05);}
.fiestaRow.row2 .fiestaDish img{ transform:translate(-88px,-36px) scale(1.29);}
.fiestaRow.imgRight .fiestaDish{ border-top-right-radius:0; border-bottom-right-radius:0;}
.fiestaTub{ position:absolute; bottom:0; width:102%; z-index:2;}
.fiestaRow.imgLeft .fiestaTub{ left:50%; transform:rotate(-10.7deg);}
.fiestaRow.row0 .fiestaTub{ width:112%; left:calc(50% - 9.5px); bottom:-21.5px;}
.fiestaRow.imgRight .fiestaTub{ left:-68%; width:110%; transform:translate(6px,-16px) scale(1.05) rotate(8.3deg);}
.fiestaRow.row2 .fiestaTub{ left:46%; width:104%; transform:translate(20px,-8px) scale(1.01) rotate(-14.6deg);}
.fiestaRow.row1 .fiestaImg{ padding-bottom:323px;}
.fiestaRow.row2 .fiestaImg{ padding-bottom:322px;}
.fiestaTub img{ width:100%; height:auto; display:block;}
.fiestaFlower{ position:absolute; width:69px; height:auto; z-index:1;}
.fiestaRow.imgLeft .fiestaFlower{ left:calc(100% + 22px); top:19px; transform:rotate(-90deg);}
.fiestaRow.imgRight .fiestaFlower{ left:-102px; top:0; transform:rotate(180deg);}
.fiestaText{ flex:1 1 auto; min-width:0;}
.fiestaRow.imgRight .fiestaName, .fiestaRow.imgRight .fiestaPron{ text-align:right;}
.fiestaName{ margin:0 0 -2px; max-width:553px;}
.fiestaName a{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.4375rem; line-height:1.109; text-transform:uppercase;}
.fiestaPron{ font-family:"Albert Sans",sans-serif; font-weight:500; color:var(--red); font-size:2rem; text-transform:uppercase; margin-bottom:30px;}
.fiestaDesc{ font-size:1.25rem; line-height:1.75; color:#000; max-width:513px;}
.fiestaDesc p{ margin-bottom:0.9em;}

/* ===== CTA COLLECTION (orange band) ===== */
/* Figma: the orange band starts at y4960 while the cream fiesta panel runs to 5276,
   so the panel sits ON TOP of the orange for its last 316px. The band is pulled up
   under the panel and painted beneath it. */
.ctaCollection{ background:var(--orange); position:relative; z-index:0; margin-top:-316px; padding:351px 0 128px;}
/* Figma Collection Section 7001:6 (frame 1600): text 166..796, photo 860..1601,
   so at the 1500 frame the text is inset ~7.6% and the photo runs to the frame edge. */
.ctaRow{ display:flex; align-items:center; gap:60px; padding-left:7.6%;}
.ctaText{ flex:1 1 auto; min-width:0;}
/* Figma runs this heading at two sizes in one block — 75px for the phrases that carry
   the message, 50px for the connecting words, on a single 70px leading (scaled here to
   the 1500 frame). Wrap the small runs in <span class="sm"> in the ACF heading field.
   line-height in em so children inherit one computed leading and it still scales at
   the mobile sizes. */
.ctaHeading{ font-family:"rl-limo",sans-serif; font-weight:700; color:#ffe72d; font-size:4.6875rem; line-height:0.93em; text-transform:uppercase; margin-bottom:18px;}
.ctaHeading .sm{ font-size:3.125rem; line-height:1.12em;}
/* CLIENT EDIT 2026-09-04: was Figma's #fcce29, which only reached 1.73:1 on the
   orange and got lost. White is 2.59:1 and matches the header links on this same bg. */
.ctaBody{ color:var(--white); font-size:1.25rem; line-height:1.75; max-width:617px;}
.ctaBody p{ margin-bottom:0;}  /* Figma runs the two paragraphs with no gap */
.ctaText .button{ margin-top:37px;}
.ctaMedia{ flex:0 0 49.85%; position:relative; text-align:center;}
.ctaBadge{ max-width:411px; margin:0 auto -91px; position:relative; z-index:2; transform:translateX(-21px);}
.ctaImg{ margin-right:-50px; overflow:hidden;}
.ctaImg img{ width:100%; max-width:741px; aspect-ratio:741/736; object-fit:cover; margin:0 0 0 auto; display:block; transform:translate(46px,0) scale(1.19);}

/* ===== Block responsive ===== */
/* small desktop (1200 frame): narrower Fiesta gutter, and the CTA headline sized so
   BELGIOIOSO'S fits its column. Must sit before the tablet/phone blocks. */
@media(max-width:1599px){ .fiestaRow{ gap:245px;} .ctaHeading{ font-size:4rem;} .ctaHeading .sm{ font-size:2.67rem;} }
@media(max-width:1279px){
	/* Text + image stacks on tablet too: photo on top, centred text below (as on the phone) */
	.tiRow{ flex-direction:column; gap:48px;}
	.textImage.img-right .tiImage{ order:0;}
	.tiImage, .textImage.img-left .tiImage{ flex:0 0 100%; width:100%; margin-left:0;}
	.tiFlower{ display:none;}
	.tiText{ text-align:center; left:0; margin:0 auto;}
	.tiHeading{ margin-left:auto; margin-right:auto; margin-bottom:26px;}
	.tiHeading{ font-size:2.6rem;}
	.fiestaPanel{ padding:40px 36px; margin-top:-38px;}
	.fiestaTitle{ font-size:3rem;}
	.hlCol{ font-size:1.15rem; padding:6px 16px;}
	/* the desktop per-column padding/ratios are Figma 1600 values - even them out below it */
	.highlightsBlock:not(.pdPerf) .hlCol:nth-child(1), .highlightsBlock:not(.pdPerf) .hlCol:nth-child(2),
	.highlightsBlock:not(.pdPerf) .hlCol:nth-child(3), .highlightsBlock:not(.pdPerf) .hlCol:nth-child(4){ padding:6px 16px;}
	.hlCol:nth-child(1), .hlCol:nth-child(2), .hlCol:nth-child(3), .hlCol:nth-child(4){ flex-grow:1;}
	.banner h2{ font-size:2.8rem;}
	.ctaHeading{ font-size:3.3rem;}
	.ctaHeading .sm{ font-size:2.2rem;}
	/* Tablet stacks the Fiesta rows and the CTA like the phone: side by side the 720 frame
	   is too narrow and the headline ran into the photo. */
	.fiestaRow, .fiestaRow.imgRight{ flex-direction:column; gap:22px; text-align:center; padding-top:40px;}
	.fiestaImg, .fiestaRow.row1 .fiestaImg, .fiestaRow.row2 .fiestaImg{ flex:0 0 100%; width:100%; min-height:0; padding-bottom:190px;}
	.fiestaRow.imgLeft .fiestaDish, .fiestaRow.imgRight .fiestaDish{ margin:0;}
	.fiestaDish img, .fiestaRow.imgLeft .fiestaDish img, .fiestaRow.imgRight .fiestaDish img{ height:360px; border-radius:0;}
	.fiestaDish{ border-radius:20px !important;}
	.fiestaRow.row0 .fiestaDish img, .fiestaRow.row1 .fiestaDish img, .fiestaRow.row2 .fiestaDish img{ transform:none;}
	.fiestaRow.imgLeft .fiestaTub, .fiestaRow.imgRight .fiestaTub, .fiestaRow.row2 .fiestaTub{ left:50%; width:300px; transform:translateX(-50%) rotate(-9deg);}
	.fiestaRow.row0 .fiestaTub{ bottom:0;}
	.fiestaFlower{ display:none;}
	.fiestaRow.imgRight .fiestaName, .fiestaRow.imgRight .fiestaPron{ text-align:center;}
	.fiestaPron{ justify-content:center;}
	.fiestaText{ width:100%;}
	.fiestaName, .fiestaDesc{ margin-left:auto; margin-right:auto;}
	/* Highlights: four columns are too tight in the 720 frame, stack them like the phone */
	.highlights{ padding:30px 26px; border-radius:30px;}
	.highlights::before, .highlights::after{ border-radius:30px;}
	.hlCols{ flex-direction:column; gap:0;}
	.hlCol + .hlCol{ border-left:0; border-top:2px solid var(--yellow);}
	.highlights .hlCols .hlCol.hlCol{ padding:18px 16px;}
	.highlights .hlCols .hlCol.hlCol:first-child{ padding-top:0;}
	.highlights .hlCols .hlCol.hlCol:last-child{ padding-bottom:0;}
	.ctaCollection{ padding-bottom:60px;}
	.ctaRow{ flex-direction:column-reverse; gap:30px; padding-left:0;}
	.ctaText{ text-align:center;}
	.ctaMedia{ flex:0 0 auto; width:100%;}
	.ctaBody{ max-width:none;}
	.ctaImg{ margin-right:0;}
	.ctaImg img{ max-width:560px; margin:0 auto; transform:none;}
	.ctaBadge{ max-width:340px; margin-bottom:-50px; transform:none;}
}
@media(max-width:767px){
	.textImage{ padding:48px 0;}
	.tiRow{ flex-direction:column; gap:48px;}
	.textImage.img-right .tiImage{ order:0;}
	.tiImage{ flex:0 0 100%; width:100%;}
	.textImage.img-left .tiImage{ margin-left:0; flex-basis:100%;}
	.tiFlower{ display:none;}
	.tiText{ font-size:1.1rem;}
	.tiHeading{ font-size:2.2rem; margin-left:auto; margin-right:auto; margin-bottom:26px;}
	.tiText{ text-align:center; left:0;}
	.highlights{ padding:30px 26px; border-radius:30px;}
	.highlights::before, .highlights::after{ border-radius:30px;}
	.hlCols{ flex-direction:column; gap:0;}
	.hlCol + .hlCol{ border-left:0; border-top:2px solid var(--yellow);}
	/* Equal space above and below every divider. Doubled class to beat the tablet
	   .highlightsBlock:not(.pdPerf) .hlCol:nth-child(n) padding. */
	.highlights .hlCols .hlCol.hlCol{ padding:18px 16px;}
	.highlights .hlCols .hlCol.hlCol:first-child{ padding-top:0;}
	.highlights .hlCols .hlCol.hlCol:last-child{ padding-bottom:0;}
	.banner{ min-height:320px;}
	.banner .bannerInner{ transform:none;}
	.banner h2{ font-size:2rem;}
	.fiestaPanel{ border-radius:30px; padding:32px 22px; margin-top:calc(1.8rem * -0.87);}
	.fiestaTitle{ font-size:1.8rem;}
	.fiestaRow, .fiestaRow.imgRight{ flex-direction:column; gap:22px; text-align:center; padding-top:40px;}
	/* the desktop panel-over-orange overlap is a 1600px device; scale it for phones */
	.ctaCollection{ margin-top:-120px; padding:150px 0 60px;}
	.fiestaPanel{ padding-bottom:24px;}
	.fiestaImg, .fiestaRow.row1 .fiestaImg, .fiestaRow.row2 .fiestaImg{ padding-bottom:130px;}
	.fiestaRow.imgLeft .fiestaDish, .fiestaRow.imgRight .fiestaDish{ margin:0;}
	.fiestaDish img, .fiestaRow.imgLeft .fiestaDish img, .fiestaRow.imgRight .fiestaDish img{ height:240px;}
	.fiestaDish{ border-radius:20px !important;}
	.fiestaRow.row0 .fiestaDish img, .fiestaRow.row1 .fiestaDish img, .fiestaRow.row2 .fiestaDish img{ transform:none;}
	.fiestaRow.imgLeft .fiestaTub, .fiestaRow.imgRight .fiestaTub, .fiestaRow.row2 .fiestaTub{ width:62%;}
	.fiestaRow.row0 .fiestaTub{ bottom:0;}
	.fiestaFlower{ display:none;}
	.fiestaRow.imgRight .fiestaName, .fiestaRow.imgRight .fiestaPron{ text-align:center;}
	.fiestaPron{ justify-content:center;}
	.fiestaName a{ font-size:2.4rem;}
	.fiestaRow.row1 .fiestaImg, .fiestaRow.row2 .fiestaImg{ padding-bottom:130px;}
	.fiestaPron{ line-height:1.2; margin-bottom:16px;}
	.ctaRow{ flex-direction:column-reverse; gap:30px; padding-left:0;}
	.ctaText{ text-align:center;}
	.ctaMedia{ flex:0 0 auto; width:100%;}
	.ctaHeading{ font-size:2.1rem;}
	.ctaHeading .sm{ font-size:1.4rem;}
	.ctaBody{ max-width:none;}
	.ctaImg{ margin-right:0;}
	.ctaBadge{ max-width:280px; margin-bottom:-40px;}
}

/* ===== PRODUCT COLOR BLOCKS (Family) ===== */
/* Figma Product Family spacing: 63 below the hero, 100 under the title, 625 card pitch */
/* Figma cards span x40..1540, not the standard 50px gutter */
.colorBlocks{ padding:67px 0 14px;}
.colorBlocks .content{ position:relative; left:-10px;}
.cbHead{ margin-bottom:107px; text-align:center;}
.cbHead .eyebrow{ color:var(--orange); text-align:center;}
.cbTitle{ position:relative; top:-9px; left:18px; font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:4.6875rem; line-height:1.32; text-transform:uppercase; letter-spacing:0.004em; text-align:center;}
/* Figma Title 7001:19 rotates these: purple 180deg on the left, blue -90deg on the right */
.cbTitle .cbTitleFlower{ display:inline-block; width:64px; height:auto; vertical-align:middle; margin:0 65px;}
.cbTitle .flowerL{ width:68px; transform:translateY(-13px) rotate(180deg);}
.cbTitle .flowerR{ transform:translateY(-14px) rotate(-90deg);}
.cbRow{ position:relative; display:flex; align-items:center; gap:0; border-radius:50px; padding:36px 0 40px; margin-bottom:106px; min-height:564px; cursor:pointer; background:transparent;}
.cbRow::before{ content:""; position:absolute; z-index:0; inset:16px -10px -16px 10px; background:var(--orange); border-radius:50px;}
.cbRow::after{ content:""; position:absolute; z-index:1; inset:0; border-radius:50px; background-image:linear-gradient(var(--yellow),var(--yellow)); background-repeat:no-repeat; background-size:5px calc(100% - 129px); background-position:50.7023% 64px;}
.cbRow > *{ position:relative; z-index:2;}
.cbRow.color-magenta::after{ background-color:var(--magenta);}
.cbRow.color-blue::after{ background-color:var(--oaxaca);}
.cbRow.color-green::after{ background-color:var(--quesadilla);}
.cbRow.imgRight{ flex-direction:row-reverse;}
.cbImg{ flex:0 0 50.5333%; text-align:center; position:relative;}
/* Fixed tub sizes per breakpoint (600 / 440 / 320 / 240) so the tub only changes size at a
   breakpoint, never while resizing. top and margin-bottom scale with --tub, keeping the
   Figma ratios: poke = 36.46% of the tub width, tagline gap a constant 34.5px. */
.cbTub{ --tub:600px; --gap:30px; width:var(--tub); max-width:100%; position:relative; top:calc(var(--tub) * -0.3646); left:-6px; margin:0 auto calc(var(--gap) + 38px + var(--tub) * -0.3646 - var(--tub) * (1 - var(--vb)));}
/* --vt/--vb = where the tub pixels start/end inside the square PNG after its rotate/scale
   (measured from the alpha). The margin uses them so --gap is the VISIBLE space between
   the tub and the tagline (the +38px undoes the tagline's top:-38px). */
.cbRow.color-magenta .cbTub{ --vt:0.184; --vb:0.844;}
.cbRow.color-blue .cbTub{ --vt:0.179; --vb:0.824;}
.cbRow.color-green .cbTub{ --vt:0.181; --vb:0.829;}
@media(max-width:1599px){ .cbTub{ --tub:440px;} }
.cbTub img{ width:100%; height:auto;}
.cbRow.color-magenta .cbTub{ transform:scale(0.954) rotate(-10.7deg);}
.cbRow.color-blue .cbTub{ transform:scale(0.8718) rotate(8.9deg);}
.cbRow.color-green .cbTub{ transform:scale(0.804) rotate(-14.6deg);}
/* Figma gives the tagline a 553 box (516 at our frame), which is what breaks
   "SMOOTH MELT. / GOLDEN CRISP." after the period instead of after GOLDEN. */
.cbTagline{ position:relative; top:-38px; font-family:"rl-limo",sans-serif; font-weight:700; color:var(--yellow); font-size:2.8125rem; line-height:1.05; text-transform:uppercase; max-width:553px; margin:0 auto;}
.cbText{ flex:1 1 auto; text-align:center; padding:0; border:0; transform:translateY(-7px);}

/* Figma sets the name at 75px and breaks it before CHEESE — the max-width does that
   for all three names without hard-coding a <br>. */
.cbName{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--yellow); font-size:4.6875rem; line-height:1.1067; text-transform:uppercase; max-width:493px; margin:0 auto 39px;}
.cbBestLabel{ font-family:"Albert Sans",sans-serif; font-weight:700; color:var(--white); font-size:2rem; text-transform:uppercase; margin-bottom:23px;}
.cbBestList{ font-family:"Albert Sans",sans-serif; font-weight:500; color:var(--white); font-size:2rem; line-height:1.1875; text-transform:uppercase; max-width:none; margin:0 auto 52px;}
.cbBtn{ pointer-events:none; padding:12.5px 40px;}
@media(max-width:1279px){
	.cbTitle{ font-size:3rem; display:flex; align-items:center; justify-content:center; top:0; left:0;}
	.cbTitle .cbTitleFlower{ flex:0 0 auto; margin:0 20px;}
	.cbTitle{ white-space:nowrap;}
	/* .colorBlocks .content sits 10px left for the cards' orange offset; the title has no
	   offset, so move it back to centre it on the page. */
	.cbHead{ position:relative; left:10px;}
	.cbTitle .flowerL{ transform:rotate(180deg);}
	.cbTitle .flowerR{ transform:rotate(-90deg);}
	.cbName{ font-size:2.6rem; max-width:300px;}
	.cbTagline{ font-size:1.9rem; max-width:none;}
	.cbBestLabel, .cbBestList{ font-size:1.35rem;}
	.cbRow{ min-height:0; margin-bottom:60px;}
	/* Tablet + phone: tub and tagline sit as one centred group with a fixed 24px gap between
	   the VISIBLE tub and the tagline. --vt/--vb = where the tub pixels start/end inside the
	   square PNG after its rotate/scale (measured from the alpha), so the margins trim the
	   transparent padding instead of guessing it. */
	.cbTub{ --tub:320px; top:0; margin:calc(var(--tub) * var(--vt) * -1) auto calc(24px - var(--tub) * (1 - var(--vb)));}
	.cbTagline{ top:0; padding:0 28px;}
	.cbText{ padding:0 28px;}
	.cbHead{ margin-bottom:60px;}
}
@media(max-width:767px){
	.cbTitle{ font-size:2.3rem; top:0; left:0;}
	/* one line with a flower each side inside the 345px frame (the title is ~9.4em wide) */
	.cbTitle{ font-size:1.5rem;}
	.cbTitle .cbTitleFlower, .cbTitle .flowerL{ width:28px; margin:0 10px;}
	.cbTub{ --tub:240px; left:0;}
	.cbRow.color-magenta .cbTub{ --vt:0.170; --vb:0.860;}
	.cbRow.color-blue .cbTub{ --vt:0.133; --vb:0.872;}
	.cbRow.color-green .cbTub{ --vt:0.103; --vb:0.910;}
	/* the desktop scale is a Figma-1600 correction; the mobile width already handles size */
	.cbRow.color-magenta .cbTub{ transform:rotate(-10.7deg);}
	.cbRow.color-blue .cbTub{ transform:rotate(8.9deg);}
	.cbRow.color-green .cbTub{ transform:rotate(-14.6deg);}
	.cbRow, .cbRow.imgRight{ flex-direction:column; gap:40px; padding:34px 26px; border-radius:30px; min-height:0;}
	.cbRow::before, .cbRow::after{ border-radius:30px;}
	.cbRow::after{ background-image:none;}
	.cbImg{ flex:0 0 100%;}
	.cbText{ border:0 !important; padding:0;}
	.cbName{ font-size:2.2rem; max-width:none;}
	.cbTagline{ font-size:1.6rem; max-width:none;}
	.cbBestLabel, .cbBestList{ font-size:1.15rem;}
	.cbHead{ margin-bottom:36px;}
}

/* ===== PRODUCT DETAIL ===== */
/* Sizes, colours and spacing below come from Figma frame 5014:51 (Product Detial),
   which is 1600 wide against a 1430 content band — read as ~1:1 against the live band. */
.pdTitleBar{ padding:63px 0 64px;}
.pdTagline{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:2.8125rem; line-height:1.05; text-transform:uppercase;}
.pdTagline .tlSent{ display:inline-block;}
.pdRow{ display:flex; gap:8.4%; align-items:flex-start; max-width:1399px; margin:0 auto;}
/* Photos column: 589 of 1399 wide; main tile 588 square r50, three 184 thumbs r25 */
.pdGallery{ flex:0 0 42.1%;}
.pdMain{ background:var(--white); border-radius:50px; aspect-ratio:1; padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pdMain picture{ display:contents;}
.pdMain img{ width:100%; height:auto;}
/* Tub photos carry different amounts of transparent padding in their 600x600 canvases —
   scale + nudge each so the visible tub is 88.3% of the tile (Figma 519/588) and centred. */
.color-magenta .pdMain img{ transform:translate(0.16%,-1.75%) scale(1.0246);}
.color-blue .pdMain img{ transform:translate(-1.21%,-0.09%) scale(1.0528);}
.color-green .pdMain img{ transform:translate(0.69%,-0.95%) scale(0.9691);}
.pdThumbs{ display:flex; gap:3.14%; margin-top:2.9%;}
.pdThumb{ flex:1 1 0; background:var(--white); border-radius:25px; padding:0; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pdThumb picture{ display:contents;}
.pdThumb img{ width:100%; height:100%; object-fit:contain;}
/* photos (JPEG) fill the tile; transparent PNG tubs stay whole */
.pdThumb.isPhoto img{ object-fit:cover;}
/* photo tiles open in GLightbox */
.pdMain.pdLightbox, .pdThumb.pdLightbox{ cursor:zoom-in; transition:transform 0.2s;}
.pdThumb.pdLightbox:hover{ transform:translateY(-3px);}
.glightbox-clean .gslide-description{ background:transparent;}
.pdInfo{ flex:1 1 auto; padding-top:16px;}
.pdName{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.4375rem; line-height:1; text-transform:uppercase; margin-bottom:-2px;}
.pdPron{ font-family:"Albert Sans",sans-serif; font-weight:500; color:var(--red); font-size:2rem; text-transform:uppercase; margin-bottom:16px;}
.pdSizes{ font-size:1.25rem; line-height:1.5;}
.pdSizes strong{ font-weight:700;}
.pdSizeFirst{ color:var(--red); font-weight:700; text-decoration:underline;}
.pdHr{ border:0; border-top:3px solid var(--orange); margin:37px 0 26px; opacity:1;}
.pdDesc{ font-size:1.25rem; line-height:1.5; color:#000;}
.pdDesc p{ margin-bottom:1.5em;}
.pdDesc p:last-child{ margin-bottom:21px;}
.pdDesc + .pdHr{ margin-bottom:35px;}
.pdBestLabel{ font-family:"Albert Sans",sans-serif; font-weight:700; color:var(--red); font-size:2rem; text-transform:uppercase; margin-bottom:21px;}
.pdBestList{ font-family:"Albert Sans",sans-serif; font-weight:500; color:var(--red); font-size:2rem; line-height:1.1875; text-transform:uppercase; margin-bottom:44px;}
.pdBuy{ padding:12.5px 26px;}
.pdPerf{ padding:74px 0 0;}
/* Product-detail highlights only (the home block keeps its own 4-column sizing).
   Figma: panel 1416x308, title 45px yellow, columns Albert Sans Medium 32px in a
   118px row split 405 / 513 / 405 — separators land at 31.4% and 73.8%. */
.pdPerf .highlights{ padding:49px 50px 45px;}
.pdPerf .hlTitle{ margin-bottom:35px;}
.pdPerf .hlCols{ min-height:118px;}
.pdPerf .hlCol{ font-size:2rem; line-height:1.1875; padding:6px 28px;}
.pdPerf .hlCol:nth-child(1){ flex-grow:339;}
.pdPerf .hlCol:nth-child(2){ flex-grow:539;}
.pdPerf .hlCol:nth-child(3){ flex-grow:260;}
/* Heritage */
.pdHeritageBlock{ padding:69px 0 50px;}
/* Figma: photo 1430x683 r46; card 546 wide, rgba(255,255,255,0.85), r50, 84px off the right edge */
.pdHeritage{ position:relative; max-width:1430px; margin:0 auto; border-radius:46px; aspect-ratio:1430/683; display:flex; align-items:center; justify-content:flex-end; background-size:cover; background-position:50% 94.9%; padding:30px 0;}
.pdHeritageCard{ background:rgba(255,255,255,0.85); border-radius:50px; padding:60px 48px 66px; flex:0 0 auto; width:38.2%; max-width:546px; margin-right:5.87%; text-align:center;}
.pdHeritageTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:2.8rem; text-transform:uppercase; margin-bottom:26px;}
.pdHeritageCard p{ font-size:2rem; line-height:1.28; color:#000; margin:0;}

/* Featured recipes — geometry from Figma (Product Detail 5014:51 > Recipes 7003:3):
   cards 454 wide with ~19px gaps across the 1430 band, photo 454x383, white panel,
   11px orange foot, title Albert Sans Bold 32px red. */
.frBlock{ padding:41px 0 81px;}
.frTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:3.125rem; text-transform:uppercase; margin-bottom:73px;}
.frGrid{ display:flex; gap:1.33%; align-items:stretch; max-width:1398px; margin:0 auto;}
.frCard{ flex:1 1 0; min-width:0; display:flex; flex-direction:column;}
.frImg{ display:block; aspect-ratio:454/383; overflow:hidden;}
.frImg picture{ display:contents;}
.frImg img{ display:block; width:100%; height:100%; object-fit:cover;}
.frBody{ position:relative; flex:1; display:flex; flex-direction:column; background:var(--white); text-align:center; padding:36px 25px 53px;}
.frBody::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:11px; background:var(--orange);}
.frName{ font-family:"Albert Sans",sans-serif; font-weight:700; color:var(--red); font-size:2rem; line-height:1.16; text-transform:uppercase; margin:0 0 38px;}
.frBody .button{ align-self:center; margin-top:auto;}

/* You may also like */
/* Figma: the cream page background stops at y3168 and the whole related-products
   band down to the footer is white. */
.pdRelatedBlock{ padding:83px 0 137px; background:var(--white);}
.pdRelTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange); font-size:3.125rem; text-transform:uppercase; margin-bottom:62px;}
/* Geometry from Figma (Product Detail 5014:51 > Related PRoducts 7003:4):
   tiles 585x585 square, radius 58, 21px gap, inside the 1430 content band
   -> 40.91% wide each, 1.47% gap. */
.pdRelGrid{ display:flex; gap:1.4%; justify-content:center; align-items:flex-start;}
.pdRelCard{ flex:0 0 39%; max-width:39%; text-align:center;}
.pdRelImg{ border-radius:58px; aspect-ratio:1; padding:0; display:flex; align-items:center; justify-content:center;}
/* doImg() wraps the image in <picture>, which becomes the flex item and sits left —
   display:contents makes the img itself the flex item so it actually centres. */
.pdRelImg picture{ display:contents;}
.pdRelImg img{ width:100%; height:auto; margin:0;}
/* Each tub photo sits at a different scale/offset inside its 600x600 canvas, so the tubs
   rendered at different sizes and off-centre. Scale + nudge each one so the visible tub is
   79% of the tile (Figma sits between 76.7% and 81.9%) and centred. Re-measure if a photo changes. */
.pdRelCard.color-magenta .pdRelImg img{ transform:translate(-0.16%,-1.87%) scale(0.975);}
.pdRelCard.color-blue .pdRelImg img{ transform:translate(-1.09%,0.946%) scale(0.9218);}
.pdRelCard.color-green .pdRelImg img{ transform:translate(1.636%,-0.507%) scale(0.8851);}
.color-magenta .pdRelImg, .pdRelCard.color-magenta .pdRelImg{ background:var(--magenta);}
.pdRelCard.color-blue .pdRelImg{ background:var(--oaxaca);}
.pdRelCard.color-green .pdRelImg{ background:var(--quesadilla);}
.pdRelName{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:2.8125rem; text-transform:uppercase; margin:32px 0 14px;}
@media(max-width:1279px){
	.pdRow{ flex-direction:column; gap:32px;}
	.pdGallery{ flex:0 0 100%; max-width:480px; margin:0 auto;}
	.pdTagline{ font-size:2.1rem;}
	.pdName{ font-size:2.4rem;}
	.pdPron{ font-size:1.5rem;}
	.pdBestLabel, .pdBestList{ font-size:1.5rem;}
	.pdSizes, .pdDesc{ font-size:1.1rem;}
	.pdPerf .hlCol{ font-size:1.35rem;}
	.pdPerf .hlCols{ min-height:0;}
	.pdPerf .highlights{ padding:34px 26px 26px;}
	.pdPerf .hlTitle{ margin-bottom:24px;}
	.pdHeritageTitle{ font-size:2rem; margin-bottom:16px;}
	.pdHeritageCard p{ font-size:1.25rem;}
	/* tablet: the three recipes share one row */
	.frGrid{ gap:16px;}
	.frName{ font-size:1.15rem; margin-bottom:18px;}
	.frBlock{ padding:40px 0 60px;}
	/* the desktop values above are Figma-1600 corrections; keep the prior mobile spacing */
	.frTitle{ margin-bottom:54px;}
	.pdRelatedBlock{ padding:41px 0 137px;}
	/* tablet: both related products share one row */
	.pdRelGrid{ gap:24px;}
	.pdRelCard{ flex:0 0 calc(50% - 12px); max-width:calc(50% - 12px);}
	.pdRelName{ font-size:1.8rem; margin:22px 0 12px;}
}
/* Tablet: the heritage card is centred and wraps (it overflowed the photo at 901-1100). */
@media(max-width:1279px){
	.pdHeritage{ justify-content:center; padding:30px; aspect-ratio:auto; min-height:520px;}
	.pdHeritageCard{ flex:0 1 auto; width:100%; max-width:620px; min-width:0; margin-right:0; padding:34px 26px; border-radius:30px;}
}
/* Phone: smaller section titles, tighter space between sections. */
@media(max-width:767px){
	.frTitle, .pdRelTitle{ font-size:2.2rem; margin-bottom:32px;}
	.frGrid{ flex-direction:column; align-items:center; gap:32px;}
	.frCard{ flex:0 0 auto; width:100%; max-width:440px;}
	.frName{ font-size:1.7rem; margin-bottom:28px;}
	.pdRelGrid{ flex-direction:column; align-items:center; gap:40px;}
	.pdRelCard{ flex:0 0 auto; width:100%; max-width:440px;}
	.pdRelName{ font-size:2.2rem;}
	.pdHeritageBlock{ padding-bottom:0;}
	.frBlock{ padding:48px 0;}
	.pdRelatedBlock{ padding:48px 0 60px;}
	/* "PERFORMANCE" is ~8em wide and has to fit the 345px frame minus the card padding */
	.pdPerf .hlTitle{ font-size:2.1rem; line-height:1.15;}
	.pdInfo{ text-align:center;}
}

/* ===== CONTACT PAGE ===== */
.contactBlock{ padding:64px 0 90px;}
.contactHead{ max-width:760px; margin:0 auto 40px;}
.contactTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.6rem; line-height:1; text-transform:uppercase; margin-bottom:20px;}
.contactIntro{ font-size:1.05rem; color:var(--ink);}
.center{ text-align:center;}

/* form card */
.contactForm{ max-width:940px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:28px; padding:44px 48px;}
.cfGrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px 22px;}
.cfGrid .c1{ grid-column:span 6;}
.cfGrid .c2{ grid-column:span 3;}
.cfGrid .c3{ grid-column:span 2;}
.cfGrid hr{ border:none; border-top:1px solid var(--border); margin:2px 0;}

.contactForm label{ display:block; font-family:"Albert Sans",sans-serif; font-weight:600; font-size:0.95rem; color:var(--ink); margin-bottom:7px;}
.contactForm label strong{ color:var(--red);}
.contactForm input[type=text], .contactForm textarea, .contactForm select{ margin:0;}
.contactForm input[type=file]{ width:100%; font-size:0.9rem; padding:9px 0;}
.contactForm .subjectToggle{ display:flex; gap:34px; flex-wrap:wrap;}
.contactForm .radioLabel{ display:inline-flex; align-items:center; gap:9px; font-weight:500; margin:0; cursor:pointer;}
.contactForm .radioLabel input{ width:auto; margin:0;}

.contactForm .egLabel{ display:block; font-size:0.72rem; color:#8a8170; margin-top:8px;}
.contactForm .egBox{ display:inline-block; margin-top:5px; padding:7px 12px; background:var(--cream-2); border:1px solid var(--border); border-radius:6px; font-family:"Courier New",monospace; font-size:0.8rem; letter-spacing:0.5px; line-height:1.35;}
.contactForm .fileLimit{ display:block; font-size:0.72rem; color:#8a8170; margin-top:6px;}
.contactForm .addressNote{ font-size:0.9rem; font-style:italic; color:#7a715c; margin:0;}

.cfSubmit{ margin-top:8px;}
.cfSubmit .g-recaptcha{ display:inline-block; margin-bottom:18px;}
.cfSubmit .button{ display:inline-block;}
.contactForm .divMessage{ display:none; margin:16px auto 0; max-width:520px; padding:11px 16px; border-radius:8px; font-weight:600; font-size:0.92rem;}
.contactForm .divMessage.error{ background:#fbe9e7; color:#c62828; border:1px solid #ef9a9a;}
.contactForm .redBorder{ border-color:#c62828 !important; outline:2px solid rgba(198,40,40,0.25) !important;}

/* success popup */
.popContainer{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(26,26,26,0.6);}
.popContainer.show{ display:block;}
.popContainer .displayTable{ display:table; width:100%; height:100%;}
.popContainer .tableCell{ display:table-cell; vertical-align:middle; text-align:center; padding:20px;}
.popContainer .popContent{ display:inline-block; max-width:460px; background:var(--white); border-radius:22px; padding:44px 44px 38px; text-align:center;}
.popContainer .popContent h2{ font-family:"rl-limo",sans-serif; color:var(--red); font-size:2.2rem; margin-bottom:14px;}
.popContainer .popContent p{ margin-bottom:24px;}
.popClose{ cursor:pointer;}

/* contact info */
.contactInfo{ max-width:760px; margin:44px auto 0; text-align:center; font-size:1rem;}
.contactInfo p{ margin-bottom:16px;}
.contactInfo a{ color:var(--red); font-weight:600;}
.contactAddr{ line-height:1.7;}

@media(max-width:767px){
	.contactTitle{ font-size:2.6rem;}
	.contactForm{ padding:30px 22px; border-radius:20px;}
	.cfGrid{ gap:16px;}
	.cfGrid .c1, .cfGrid .c2, .cfGrid .c3{ grid-column:span 6;}
}
.contactForm input[type=radio], .contactForm input[type=checkbox]{ -webkit-appearance:auto; appearance:auto; width:auto; height:auto; min-height:0; padding:0; margin:0; border-radius:0; background:none; accent-color:var(--red);}
.contactForm .egImg{ display:inline-block; margin-top:6px; max-width:100%; height:auto; border:1px solid var(--border); border-radius:4px;}
/* file inputs — boxed + branded button (matches corporate boxed look, microsite red) */
.contactForm input[type=file]{ width:100%; cursor:pointer; background:var(--white); border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:0.9rem; line-height:1.5; -webkit-appearance:none;}
.contactForm input[type=file]::-webkit-file-upload-button,
.contactForm input[type=file]::file-selector-button{ margin-right:14px; padding:8px 16px; border:none; border-radius:6px; background:var(--red); color:#fff; font-family:"Albert Sans",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; font-size:0.78rem; cursor:pointer; transition:background 0.2s;}
.contactForm input[type=file]::-webkit-file-upload-button:hover,
.contactForm input[type=file]::file-selector-button:hover{ background:#b01726;}
/* custom file picker: hidden native input + branded button + image preview */
.contactForm .filePicker{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:2px;}
.contactForm .filePicker input[type=file].fileInput{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; background:none;}
.contactForm .fileBtn{ margin:0; cursor:pointer; font-size:0.82rem; padding:9px 18px;}
.contactForm .filePicker .fileName{ font-size:0.9rem; color:#7a715c;}
.contactForm .filePicker .fileLimit{ flex-basis:100%; margin:0;}
.contactForm .filePreview{ flex-basis:100%; display:flex; gap:10px; flex-wrap:wrap;}
.contactForm .filePreview:empty{ display:none;}
.contactForm .filePreview img{ width:110px; height:110px; object-fit:cover; border:1px solid var(--border); border-radius:8px;}
/* Where to Buy / store locator */
.locatorBlock{ padding:64px 0 90px;}
/* Legal pages (Privacy Policy, Terms & Conditions): a Full-width Text block with a .legalText wrapper */
.legalText{ max-width:900px; margin:32px auto 0; font-size:1.0625rem; line-height:1.6; color:#000;}
.legalText h2{ font-family:"Albert Sans",sans-serif; font-weight:700; color:var(--red); font-size:1.375rem; line-height:1.3; text-transform:uppercase; margin:40px 0 12px;}
.legalText p{ margin-bottom:1em;}
.legalText .legalDate{ font-weight:600; color:#8e7954;}
.legalText ul{ list-style:disc; margin:0 0 1em 1.4em;}
.legalText li{ margin-bottom:0.4em;}
.legalText a{ color:var(--red); text-decoration:underline; overflow-wrap:anywhere;}
.legalTable{ overflow-x:auto; margin:8px 0 24px; border:1px solid #e6d9bd; border-radius:14px; background:#fbf8f1;}
.legalTable table{ width:100%; min-width:640px; border-collapse:collapse; font-size:0.9375rem; line-height:1.45;}
.legalTable th, .legalTable td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #e6d9bd;}
.legalTable th{ color:var(--red); font-weight:700;}
.legalTable tr:last-child td{ border-bottom:0;}
.locatorHead{ max-width:760px; margin:0 auto 36px;}
.locatorTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.6rem; line-height:1; text-transform:uppercase; margin-bottom:16px;}
.locatorIntro{ font-size:1.05rem;}
#destini-locator{ min-height:600px;}
@media(max-width:767px){ .locatorTitle{ font-size:2.6rem;} }
/* ===== ABOUT PAGE ===== */
/* The About page is now several ACF blocks rather than one wrapper, so the section padding
   belongs to the first and last block only - otherwise every block repeats it. */
.aboutBlock{ padding:0;}
section > .aboutBlock:first-child{ padding-top:56px;}
.aboutCloseBlock{ padding-bottom:84px;}
.aboutHead{ max-width:820px; margin:0 auto 22px; text-align:center;}
.aboutHead .eyebrow{ color:var(--orange); text-align:center;}
.aboutTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:3.4rem; line-height:1.02; text-transform:uppercase; margin-top:2px;}
.asRow{ display:flex; align-items:center; gap:56px; max-width:1080px; margin:0 auto; padding:30px 0;}
.asRow.rev{ flex-direction:row-reverse;}
.asImg{ flex:0 0 auto; display:flex; justify-content:center;}
.asImg img{ width:340px; max-width:100%; height:auto; display:block;}
.asText{ flex:1 1 auto;}
.asHeading{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:2.1rem; line-height:1.05; text-transform:uppercase; margin-bottom:14px;}
.asText p{ font-size:1.12rem; line-height:1.6; color:var(--ink); margin:0;}
.aboutClose{ max-width:860px; margin:44px auto 0; text-align:center; background:var(--cream-2); border:1px solid var(--border); border-radius:24px; padding:40px 46px;}
.aboutClose .closeLead{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--red); font-size:1.7rem; text-transform:uppercase; line-height:1.05; margin-bottom:16px;}
.aboutClose p{ font-size:1.12rem; line-height:1.6; margin-bottom:14px;}
.aboutClose .closePillars{ font-weight:600; color:var(--blue); margin-bottom:0;}
@media(max-width:1279px){
	.aboutTitle{ font-size:2.4rem;}
	.asRow, .asRow.rev{ flex-direction:column; gap:22px; text-align:center; padding:22px 0;}
	.asImg img{ width:300px;}
	.aboutClose{ padding:30px 24px;}
}
/* About page video */
.aboutVideo{ max-width:820px; margin:8px auto 48px;}
.videoWrap{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.15);}
.videoWrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0;}

/* contact page: toll-free line under the form */
.contactPhone{ text-align:center; margin-top:28px;}

/* ===== Recipe detail =============================================
   Built on the product-detail design language: same title bar, same
   two-column photo/info row, same card + button treatment. The accent
   colour comes from the recipe's accent_color field (color-magenta /
   color-blue / color-green) so each recipe matches its cheese. */
.recipeDetail{ --accent:var(--magenta);}
.recipeDetail.color-blue{ --accent:var(--oaxaca);}
.recipeDetail.color-green{ --accent:var(--quesadilla);}

.recipeDetail .pdTitleBar{ padding:52px 0 46px;}
.rcEyebrow{ margin-bottom:10px;}
.rcTitle{ font-size:3.4375rem; margin-bottom:14px;}
.rcCategory{ font-family:"Albert Sans",sans-serif; font-weight:500; color:var(--red);
	font-size:1.25rem; line-height:1.4; text-transform:uppercase; letter-spacing:0.02em;
	max-width:760px; margin:0 auto;}

.rcRow{ gap:6.4%; align-items:flex-start;}
.rcGallery{ flex:0 0 42.1%;}
/* Recipe photos are 4:5 portrait, so the tile follows the photo rather than
   the square product tile. */
.rcMain{ display:block; background:var(--white); border-radius:50px; overflow:hidden; aspect-ratio:1080/1350;}
.rcMain picture{ display:contents;}
.rcMain img{ display:block; width:100%; height:100%; object-fit:cover;}
.rcThumbs{ margin-top:3%;}
.rcThumb{ border-radius:25px;}
.rcThumb img{ object-fit:cover;}

.rcInfo{ padding-top:4px;}
.rcMeta{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap;
	background:var(--white); border-radius:25px; overflow:hidden;}
.rcMeta li{ flex:1 1 auto; padding:18px 14px; text-align:center;
	border-left:3px solid var(--accent);}
.rcMeta li:first-child{ border-left:0;}
.rcMetaLabel{ display:block; font-family:"Albert Sans",sans-serif; font-weight:700;
	color:var(--accent); font-size:0.875rem; line-height:1.2; text-transform:uppercase;
	letter-spacing:0.06em; margin-bottom:6px;}
.rcMetaValue{ display:block; font-family:"Albert Sans",sans-serif; font-weight:500;
	color:#000; font-size:1.0625rem; line-height:1.25; white-space:nowrap;}

.rcIntro{ font-size:1.25rem; line-height:1.5; color:#000; margin-bottom:30px;}
.rcIntro p:last-child{ margin-bottom:0;}

.rcHeading{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange);
	font-size:2.8125rem; line-height:1.05; text-transform:uppercase; margin:0 0 20px;
	padding-top:26px; border-top:3px solid var(--orange);}
.rcSubHeading{ font-family:"Albert Sans",sans-serif; font-weight:700; color:var(--red);
	font-size:1.375rem; line-height:1.3; text-transform:uppercase; margin:26px 0 12px;}
.rcSubHeading:first-of-type{ margin-top:0;}

.rcIngredients{ list-style:none; margin:0 0 8px; padding:0;
	font-size:1.25rem; line-height:1.45; color:#000;}
.rcIngredients li{ position:relative; padding:0 0 0 30px; margin-bottom:11px;}
.rcIngredients li::before{ content:""; position:absolute; left:4px; top:0.62em;
	width:10px; height:10px; border-radius:50%; background:var(--accent);}

.rcBuy{ margin-top:22px; padding:12.5px 26px;}

/* Instructions — full-width white panel with an orange foot, echoing .frBody */
.rcStepsBlock{ padding:74px 0 20px;}
.rcSteps{ position:relative; background:var(--white); border-radius:50px;
	max-width:1416px; margin:0 auto; padding:52px 60px 56px; overflow:hidden;}
.rcSteps::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:11px;
	background:var(--orange);}
.rcStepsTitle{ font-family:"rl-limo",sans-serif; font-weight:700; color:var(--orange);
	font-size:3.125rem; line-height:1.05; text-transform:uppercase; margin-bottom:40px;}
.rcStepList{ list-style:none; counter-reset:rcStep; margin:0; padding:0;
	max-width:1140px; margin-inline:auto;}
.rcStepList li{ counter-increment:rcStep; position:relative; padding:0 0 0 74px;
	margin-bottom:26px; font-size:1.25rem; line-height:1.55; color:#000; min-height:50px;}
.rcStepList li:last-child{ margin-bottom:0;}
.rcStepList li::before{ content:counter(rcStep); position:absolute; left:0; top:-2px;
	width:50px; height:50px; border-radius:50%; background:var(--accent); color:var(--white);
	font-family:"Albert Sans",sans-serif; font-weight:700; font-size:1.375rem;
	display:flex; align-items:center; justify-content:center;}

.rcMoreBlock{ padding-top:66px;}
.rcMoreGrid{ max-width:932px;}

/* The five recipe facts only fit on one row above ~1285px. Below 1400 each fact becomes
   its own white card, 2 per row, and an odd last card (Yield) takes the full row. */
@media(max-width:1599px){
	.rcMeta{ background:none; border-radius:0; overflow:visible; gap:12px;}
	.rcMeta li{ flex:1 1 calc(50% - 6px); background:var(--white); border-radius:20px; border-left:0; padding:14px 10px;}
	.rcMeta li:last-child:nth-child(odd){ flex-basis:100%;}
	.rcMetaValue{ white-space:normal;}
}
@media(max-width:1279px){
	.rcRow{ flex-direction:column; gap:32px;}
	.rcInfo{ align-self:center; width:100%; max-width:640px; text-align:center;}
	.rcGallery{ flex:0 0 100%; max-width:440px; margin:0 auto;}
	.rcTitle{ font-size:2.4rem;}
	.rcCategory{ font-size:1rem; padding:0 8px;}
	.rcHeading{ font-size:2.1rem;}
	.rcIngredients, .rcIntro{ font-size:1.1rem;}
	.rcStepsBlock{ padding:44px 0 10px;}
	.rcSteps{ border-radius:30px; padding:34px 24px 40px;}
	.rcStepsTitle{ font-size:2.1rem; margin-bottom:28px;}
	.rcStepList li{ padding-left:54px; font-size:1.1rem; min-height:38px;}
	.rcStepList li::before{ width:38px; height:38px; font-size:1.1rem;}
	.rcMoreBlock{ padding-top:40px;}
}
@media(max-width:1279px){
	/* ingredients are centred on tablet/phone: the bullet rides inline with its line */
	.rcIngredients li{ padding:0;}
	.rcIngredients li::before{ position:static; display:inline-block; vertical-align:middle; margin:-3px 10px 0 0;}
}

/* Recipes index */
.recipeArchive .pdTitleBar{ padding:52px 0 8px;}
.raIntro{ text-transform:none; font-size:1.375rem; margin-top:14px;}
.raBlock{ padding-top:52px;}

/* ---------- 404 ---------- */
/* padding-top amplio: varios temas montan el header encima del contenido */
.t404{ padding:150px 20px 130px; text-align:center;}
.t404Inner{ max-width:720px; margin:0 auto;}
.t404Code{ display:block; font-size:13px; letter-spacing:0.42em; text-indent:0.42em; text-transform:uppercase; opacity:0.5; margin:0 0 18px;}
.t404Title{ margin:0 0 18px;}
.t404Text{ margin:0 auto 36px; max-width:560px; line-height:1.7; opacity:0.85;}
.t404 .t404Btn{ display:inline-block;}
@media(max-width:767px){
	.t404{ padding:110px 18px 84px;}
}