/*
Theme Name: Rembrandt
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* ─── Fonts ─── */
@font-face{font-family:"Garet";src:url("fonts/garet.book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Garet";src:url("fonts/garet.heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro Black";src:url("fonts/MyriadProBlack-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ─── Tokens ─── */
:root{
	--gold:#c58a3a;
	--gold-light:#e7c49a;
	--cream:#f4ecd8;
	--cream-soft:#faf5e8;
	--ink:#231f20;
	--brown:#2d1710;
	--dark:#211d1e;
	--muted:#c7b79b;
	--white:#fff;
	--border:#d6bb8e;

	/* legacy aliases used by base helpers */
	--primary:var(--gold);
	--accent:var(--brown);
	--text:var(--ink);
	--bg:var(--cream);
	--bg-alt:var(--cream-soft);
	--text-light:#8a7c63;
}

/* ─── WP 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}
.wp-block-image img{display:block}
.gallery{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.gallery-item{flex:1 0 calc(33.333% - .5rem)}
.gallery-item img{display:block;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: "Garet", Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.39; color: var(--ink); background: #f9f7f0 url(img/textureBg.jpg) repeat center top; overflow-x: hidden;}
.siteShell{ max-width:100%;margin:0 auto; position:relative;overflow:hidden}
img,picture,video,canvas,svg{ display:block;max-width:100%;height:auto}
.twi-visual picture, .pd-main picture, .pd-badge picture, .pd-pack picture{ display:contents;}
button{ font:inherit;cursor:pointer}
a{ text-decoration:none;color:inherit}
table{ border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{ font-weight:400;line-height:1.25}
input,select,textarea{ width:100%;padding:10px;border:1px solid var(--border);background:var(--white);font:inherit;border-radius:0;-webkit-appearance:none}
textarea{ resize:none;min-height:120px}

/* ─── Layout ─── */
.content { max-width: 1400px; margin: 0px auto; padding: 0px; width: 100%;}
.rbg{ background-image: var(--bg-desktop); background-size: cover; background-position: center;}
@media (max-width: 819px){ .rbg{ background-image: var(--bg-phone);} }
.hidden{ display:none!important}
.center{ text-align:center!important}
.row{ display:flex;flex-wrap:wrap;gap:15px}
.col{ flex:1}
.button{ display:inline-block;padding:12px 30px;background:var(--gold);color:var(--cream);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;cursor:pointer;border:none;transition:background .3s}
.button:hover{ background:var(--brown)}

/* ─── Notifications ─── */
.msg{ padding:12px 16px;font-size:1rem;margin:20px 0 0;display:none}
.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}

/* ─── Page header (hero) ─── */
.pageHeader {  min-height: 770px; color: var(--gold-light); overflow: hidden; background: rgb(0, 0, 0);}
.pageHeader .ph-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;}
.pageHeader .ph-content { position: absolute; left: 0px; right: 0px; top: 214px; text-align: center; z-index: 1; color: var(--gold-light);}
.pageHeader .ph-content :is(h1, h2, h3, p) { margin: 0px; font-family: "Garet", sans-serif; font-weight: 400; font-size: 32px; letter-spacing: 18px; line-height: 1.1; text-transform: uppercase; color: var(--gold-light);}
.pageHeader .overlay{ background: linear-gradient(rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 100%); position: absolute; z-index: 1; width: 100%; height: 440px;}

/* ─── Text + Image block ─── */
.textWithImage .content { display: flex; align-items: flex-start; gap: 58px;}
.textWithImage.side-right .content{ flex-direction:row-reverse}
.textWithImage .twi-visual { flex: 0 0 556px; aspect-ratio: 610 / 708; overflow: hidden;}
.textWithImage .twi-visual img { width: 100%;}
.textWithImage .twi-text { flex: 0 0 526px;}
.textWithImage .twi-text :is(h1, h2, h3, h4, h5, h6) { margin: -3px 0px 24px; color: var(--gold); font-family: "Garet", sans-serif; font-weight: 400; font-size: 27px; letter-spacing: 6px; line-height: 1; text-transform: uppercase;}
.textWithImage .twi-text p{ margin:0 0 28px; font-size:16px; line-height:1.56;}
.textWithImage .twi-text p:last-child{ margin-bottom:0}
.page-id-272 .twi-text ul{ columns:2; column-gap:40px; padding-left:18px; margin:0; text-align: left;}
.page-id-272 .twi-text ul li{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin-bottom:6px}
/* store-locator: make linked retailers clearly distinct from plain store names */
.page-id-272 .twi-text ul li a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; transition:color .2s}
.page-id-272 .twi-text ul li a:hover{ color:#9c6a28}

/* ─── Accolades block (dark band) ─── */
.accolades{ background:var(--dark); color:var(--gold);  padding:69px 0px 66px; text-align:center;}
.accolades .ac-title{ display:grid; grid-template-columns:415px auto 415px; align-items:center; justify-content:center; gap:50px; margin:0px auto 23px; color:var(--gold); font-family:"Garet",sans-serif; font-weight:400; font-size:28px; letter-spacing:5px; line-height:1; text-transform:uppercase;}
.accolades .ac-rule{ height:1px;background:var(--gold)}
.accolades .ac-row{ display:grid; grid-template-columns:repeat(3, 113px); justify-content:center; gap:60px;}
.accolades .ac-award{ width:113px;  border-radius:50%; background:#171617; display:grid; place-items:center; overflow:hidden; aspect-ratio: 1 / 1;}
.accolades .ac-award img{ width:100%;height:100%;object-fit:contain}
.accolades .ac-award-primary{ background:#d6ab35}

/* ─── Fullwidth Text block ─── */
.fullwidthText { text-align: center;}
.fullwidthText .content{ width:auto;margin:0}
.fullwidthText :is(h1, h2, h3, h4, h5, h6) { margin: -6px 0px 18px; color: var(--gold); font-family: "Garet", sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 5px; line-height: 1.25; text-transform: uppercase;}
.fullwidthText p { margin: 0px 0px 28px; line-height: 1.5;}
.fullwidthText p:last-child{ margin-bottom:0}

/* ─── Pairings List block ─── */
.pairingsList{ padding:0 105px;}
.pairingsList .pairings-filter{ display:flex; justify-content:center; align-items:stretch; gap:0; margin: 41px 0px 69px; }
.pairingsList .filter-label,
.pairingsList .dropdown{ height:42px; padding:0px 20px; border:1px solid var(--gold); background:rgb(255, 255, 255); color:var(--gold); font-family:"Garet",sans-serif; font-size:14px;  letter-spacing:0px; line-height:1; text-transform:uppercase; display:inline-flex; align-items:center; position:relative;}
.pairingsList .filter-label{ color: #FFF; background-color: var(--gold);}
.pairingsList .filter-label{ border-right:0}
.pairingsList .dropdown{ cursor:pointer; padding-right:30px; min-width:290px; user-select:none;}
.pairingsList .dropdown::after{ content:""; position:absolute; right:16px; top:50%; width:14px; height:8px; margin-top:-4px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%23c58a3a' stroke-width='1'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:contain; transition:transform .15s ease;}
.pairingsList .dropdown.active::after{ transform:rotate(180deg)}
.pairingsList .dropdown em{ font-style:normal;color:inherit}
.pairingsList .dropdown ul{ position:absolute; top:100%; left:-1px; right:-1px; margin:0; padding:0; list-style:none; background:var(--cream); border:1px solid var(--gold); border-top:0; display:none; z-index:20;}
.pairingsList .dropdown.active ul{ display:block}
.pairingsList .dropdown li{ padding:14px 24px; cursor:pointer; color:var(--gold); letter-spacing:6px; font-size:13px;}
.pairingsList .dropdown li:hover{ background:var(--gold);color:var(--cream)}
.pairingsList .pairings-grid{ display:grid; grid-template-columns:repeat(4, 196px); justify-content:center; column-gap:40px; row-gap:40px;}
.pairingsList .pairing-card{ text-align:center; will-change:transform,opacity}
.pairingsList .pairing-card.is-hidden{ display:none}
.pairingsList .pairing-card a{ display:block;color:inherit}
.pairingsList .pairing-card a:hover .pairing-card-title{ color:var(--dark)}
.pairingsList .pairing-card-title{ min-height:65px; margin:0; color:var(--gold); font-family:"Garet",sans-serif; font-weight:400; font-size:16px; letter-spacing:1px; line-height:1.2; text-transform:uppercase; transition: 0.3s;}

/* ─── Shared circular thumbnail ─── */
.circleImg{ width:146px;  margin:0px auto 23px; border-radius:50%; overflow:hidden; display:block; background:var(--brown); aspect-ratio: 1 / 1;}
.circleImg img{ width:100%; aspect-ratio: 1/1; object-fit:cover; transition: 0.3s ease;}
.circleImg:hover img{ transform: scale(1.1); }

/* ─── Circle Links block (flexible row of round CTAs) ─── */
.circleLinks { padding: 43px 0px 0px;}
.circleLinks .circle-links-grid { display: grid; grid-template-columns: repeat(auto-fit, 200px); justify-content: center; gap: 36px;}
.circleLinks .circle-link { color: var(--gold); font-family: "Garet", sans-serif; letter-spacing: 3.5px; line-height: 1.2; text-transform: uppercase; text-align: center; display: block; font-size: 15px; transition: 0.3s ease;}
.circleLinks .circle-link:hover{ color:var(--dark);}
.circleLinks .circle-link-label{ display:block}

/* ─── Pairing Detail (single-pairing.php) ─── */
body.single-pairing section{ padding: 176px 0px 0px;}
.pairingDetail{  }
.pairingDetail .pd-card{ position:relative; padding:11px; color:var(--cream);}
.pairingDetail .pd-frame{ position:relative;  }
.pairingDetail .pd-title{ margin:0px 0px 31px; color:var(--cream); font-family:"Garet",sans-serif; font-weight:400; font-size:42px; letter-spacing:17px; line-height:1.2; text-transform:uppercase; text-align:center;}
.pairingDetail .pd-title span{ display: block; font-size:30px; letter-spacing:6px; }
.pairingDetail .pd-title.left{text-align:left;}
.productsList .pairingDetail .pd-grid{ display:block; padding: 0 0 0 460px; }
.productsList .pairingDetail.reverse .pd-grid{ display:block; padding: 0 460px 0 0; }
.pairingDetail .pd-grid{ display:grid; grid-template-columns:520px 1fr; gap:50px; align-items:start;}
.pairingDetail .pd-visual{ position:relative;  }
.pairingDetail .pd-visual.absolute{ position:absolute; top: 50%; left: 0; transform: translateY(-50%);  }
.pairingDetail.reverse .pd-visual.absolute{ left:auto; right:0; }
.pairingDetail .pd-main{ transition: 0.3s ease; width:520px;  border-radius:50%; overflow:hidden; position:relative; z-index:1; aspect-ratio: 1 / 1; margin: 15px 0px 0px -9px; transform: scale(1.035);}
.productsList .pairingDetail .pd-main{ position: absolute; margin: 0px; border-radius: unset; left: 0px; top: -140px; width: 410px;}
.productsList .pairingDetail .pd-visual.absolute .pd-main{ position: relative; left: auto; top: auto; aspect-ratio: 1 / 1;}
.productsList .pairingDetail.reverse .pd-grid{ grid-template-columns: 1fr 520px;}
.productsList .pairingDetail.reverse .pd-visual{ grid-column: 2;}
.productsList .pairingDetail.reverse .pd-copy{ grid-column: 1;}
.productsList .pairingDetail.reverse .pd-main{ left: auto; right: 0;}
.productsList .pairingDetail.reverse .pd-badge{ left: auto; right: -37px;}
.productsList .pairingDetail.reverse .pd-pack{ left: auto; right: -93px; transform: rotate(20deg);}
.pairingDetail .pd-main img{ width:100%;height:100%;object-fit:cover;display:block}
.pairingDetail .pd-badge{ transition: 0.3s ease; position:absolute; top:11px; left:-37px; width:84px;  z-index:3; aspect-ratio: 1 / 1;}
.pairingDetail .pd-badge img{ width:100%;height:100%;object-fit:contain;display:block}
.pairingDetail .pd-pack{ transition: 0.3s ease; position:absolute; left:-93px; bottom:29px; width:215px; transform:rotate(-34deg); z-index:3;}
.pairingDetail .pd-pack img{ width:100%;height:auto;display:block}
.pairingDetail .pd-copy{ color:var(--cream);   }
.pairingDetail .pd-copy :is(h2,h3):not(.pd-title){ margin:0px 0px 11px; color:var(--gold); font-family:"Garet",sans-serif; font-weight:400; font-size:26px; letter-spacing:6.5px; line-height:1.2; text-transform:uppercase;}
.pairingDetail .pd-text{ margin-bottom:34px}
.pairingDetail .pd-text ul,
.pairingDetail .pd-text ol{ list-style:none; padding:0; margin:0;}
.pairingDetail .pd-text li{margin:0px 0px 1px}
/* show list markers on pairing ingredients/instructions (ul=dots, ol=numbers) */
.pairingDetail .pd-ingredients ul,
.pairingDetail .pd-instructions ul{ list-style:disc; padding-left:1.25em; margin:0;}
.pairingDetail .pd-ingredients ol,
.pairingDetail .pd-instructions ol{ list-style:decimal; padding-left:1.4em; margin:0;}
.pairingDetail .pd-ingredients li,
.pairingDetail .pd-instructions li{ margin:0 0 4px; padding-left:4px;}
.pairingDetail .pd-text p{margin:0 0 14px}
.pairingDetail .pd-text p:last-child{margin-bottom:0}
.pairingDetail .pd-text a{color:inherit;text-decoration:underline}
.pairingDetail .pd-serves{ margin:40px 0px 0px; color:var(--gold); font-family:"Garet",sans-serif;  letter-spacing:3.2px; text-transform:uppercase; font-size:15px;}
body.single-pairing .nav{ background: var(--ink);}
.pairingDetail .pd-badge:hover{ transform: scale(1.2);}
body.single-pairing .pairingDetail .pd-pack:hover{ transform: scale(1.2) rotate(-34deg);}
.pairingDetail .pd-main:hover{ transform: scale(1.1);}

/* ─── Products List block (reuses .pairingDetail .pd-* styles) ─── */
.productsList{ display:flex; flex-direction:column; gap:60px;}
.pl-nutrition-btn{ display:inline-block; margin-top:8px; background:transparent; border:1px solid var(--gold); color:var(--gold); padding:14px 28px; font-family:"Garet",sans-serif; font-size:13px; letter-spacing:4px; text-transform:uppercase; cursor:pointer; transition:background .15s ease, color .15s ease;}
.pl-nutrition-btn:hover{ background:var(--gold); color:var(--cream);}
.fancybox__content:has(> img.fancybox-image){ width:auto !important;}
.fancybox__container img.fancybox-image{ width:300px !important; height:auto !important; max-width:90vw !important;}

/* ─── Contact Form block ─── */
.contactForm{ }
.contactForm .contactFormContent{ display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:start;}
.contactForm .contactFormLeft{ color:var(--ink)}
.contactForm .contactFormRight{ padding:20px; background: #fff;}
.contactForm .contactFormLeft :is(h1,h2,h3,h4,h5,h6){ margin:0 0 36px; color:var(--gold); font-family:"Garet",sans-serif; font-weight:400; font-size:29px; letter-spacing:4px; line-height:1.25; text-transform:uppercase;}
.contactForm .contactFormLeft p{margin:0 0 14px;font-size:16px;line-height:1.56}
.contactForm .contactFormLeft p:last-child{margin-bottom:0}
.contactForm .contactFormLeft a{color:inherit;text-decoration:underline}
.contactForm .contactFormIntro{margin-bottom:32px;color:var(--ink)}
.contactForm .contactFormFields{display:flex;flex-direction:column;gap:24px}
.contactForm .formRow{ display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.contactForm .formRow-full{grid-template-columns:1fr}
.contactForm .formField{display:flex;flex-direction:column;gap:10px}
.contactForm .formField label{ color:var(--gold); font-family:"Garet",sans-serif;  font-size:13px; letter-spacing:6px; text-transform:uppercase;}
.contactForm .formField input,
.contactForm .formField textarea{ width:100%; height:54px; padding:0 18px; border:1px solid var(--gold); background:transparent; color:var(--ink); font-family:"Garet",sans-serif; font-size:16px; line-height:1.4; border-radius:0; -webkit-appearance:none;}
.contactForm .formField textarea{ height:180px; padding:14px 18px; resize:vertical;}
.contactForm .formField input:focus,
.contactForm .formField textarea:focus{outline:none;border-color:var(--brown)}
.contactForm .formField input::placeholder,
.contactForm .formField textarea::placeholder{color:var(--muted)}
.contactForm .formDisclaimer{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink);}
.contactForm .formDisclaimer a{color:var(--gold);text-decoration:none}
.contactForm .g-recaptcha{margin:8px 0}
.contactForm .submitBtn{ align-self:flex-start; height:54px; padding:0 42px; border:1px solid var(--gold); background:var(--gold); color:var(--cream); font-family:"Garet",sans-serif;  font-size:14px; letter-spacing:8px; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s;}
.contactForm .submitBtn:hover{background:transparent;color:var(--gold)}
.contactForm .msg{margin-top:12px}

/* ─── ACF Blocks wrapper ─── */
.block{margin:0 auto;position:relative}
.bgSection{position:relative}
.bgSection .ornament { max-width: 1400px; border-width: 80px; border-style: solid; border-color: transparent; border-image: url("img/ornament.svg") 77 / 80px round; margin: 0px auto; padding: 70px 50px; box-sizing: border-box;}
body.single-pairing .bgSection .ornament{ padding: 10px;}
.pairOrnament { border-width: 38px; border-style: solid; border-color: transparent; border-image: url("img/pairOrnament.svg") 80 / 80px round; margin: 0px auto; padding: 0px; box-sizing: border-box;}
.productsList .pairOrnament { border-image: url("img/pairOrnament.svg") 35 / 80px round; }

/* ─── Popup overlay (CPT) ─── */
.popupOverlay{position:fixed;left:0;top:0;background:rgba(255,255,255,.8);display:block;width:100vw;height:100vh;z-index:1000}
.popupOverlay .popup{width:100%;margin:0 auto;max-width:420px;position:relative}
.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}

/* ─── Site nav (desktop) ─── */
header{ height: 176px;  position: absolute; left: 0px; top: 0px; width: 100%; z-index: 99; padding: 87px 0px 0px;}
body.admin-bar header{ top: 0;}
body.single-pairing header{ background: var(--ink);}
.nav {    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: start; column-gap: 75px;  max-width: 1095px; margin: 0px auto; }
.nav-link { color: var(--gold); font-family: "Garet", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 2.5px; line-height: 1; text-transform: uppercase; white-space: nowrap; text-align: center;}
.nav-link.active,.nav-link:hover{ color:var(--gold-light)}
.brand { justify-self: center; width: 189px; margin-top: -50px; background: url("img/logo.svg") center center / contain no-repeat; aspect-ratio: 204 / 105;}
.brand-medallion{ display:block; width:150px; height:80px; margin:0 auto 4px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:5px; line-height:1.5; text-transform:uppercase; border-radius:50%;}
.brand-name{ display:block; font-family:"Myriad Pro Black","Myriad Pro",Georgia,serif; font-size:32px; font-weight:900; letter-spacing:2px; line-height:1; text-transform:uppercase;}

/* ─── Footer (cream, single row) ─── */
.siteFooter { color: var(--ink); font-size: 13px; padding: 32px 0px;}
.siteFooter a{color:inherit;text-decoration:none}
.siteFooter a:hover{color:var(--gold)}
.siteFooter ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0px 10px;}
.siteFooter ul li{display:inline}
.siteFooter .copyright{white-space:nowrap}
.siteFooter .content { display: flex; justify-content: space-between; align-items: center; padding: 0px 20px;}

/*body.single-pairing{ background: url("page-5.png") center 4px / 1440px auto no-repeat;}*/

/* ─── Responsive (≤1399px / 1280px screens) ─── */
@media (max-width: 1399px) {
	.textWithImage .content{ gap: 40px;}
	.textWithImage .twi-visual{ flex: 1 1 auto; aspect-ratio: auto;}
	.textWithImage .twi-text{ flex: 0 0 440px;}
	.pairingsList .dropdown li { letter-spacing: 1px;}
	.pageHeader { min-height: 690px;}
}

/* ─── all desktop sizes ─── */
@media (max-width: 1280px) {
	.showIpad{ display: none;}
}

/* ─── Tablet (780–1279px) ─── */
@media (max-width: 1279px) {
	.showDesktop, .hideIpad{ display: none !important;}
	.showIpad{ display:block;}
	.bgSection .ornament{ padding: 50px 40px; border-width: 50px;}
	body.single-pairing .bgSection .ornament{ padding: 40px;}
	.nav{ max-width: 100%; column-gap: 49px; padding: 0 20px; margin: 0;}
	.nav-link{ font-size: 14px; letter-spacing: 1.5px;}
	.brand{ width: 150px; margin-top: -38px;}
	.pairingsList{ padding: 0px 0px 20px;}
	.pairingsList .pairings-grid{ grid-template-columns: repeat(3, 196px);}
	.contactForm{ }
	.contactForm .contactFormContent{ grid-template-columns: 280px 1fr; gap: 40px;}
	.circleLinks .circle-links-grid { grid-template-columns: repeat(auto-fit, 188px);}
	.accolades { padding: 50px 0px;}
	.pairingDetail .pd-copy{ text-align: center;}
	.contactForm .contactFormLeft p{ font-size: 14px;}
	.pageHeader .ph-content :is(h1, h2, h3, p){ font-size: 32px;}

	/* ipad narrow */
	.textWithImage .content,
	.textWithImage.side-right .content{ flex-direction: column; align-items: center; gap: 30px; padding: 0px;}
	.textWithImage .twi-visual{ flex: 0 0 auto; width: 100%; max-width: 100%;}
	.textWithImage .twi-text{ flex: 0 0 auto; width: 100%; max-width: 100%;}

	.productsList .pairingDetail .pd-grid,
	.productsList .pairingDetail.reverse .pd-grid{ display: block; padding: 0;}
	.productsList .pairingDetail .pd-visual.absolute,
	.productsList .pairingDetail.reverse .pd-visual.absolute{ position: relative; left: auto; right: auto; top: auto; transform: none; text-align: center;}
	.productsList .pairingDetail .pd-main,
	.productsList .pairingDetail.reverse .pd-main{ position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: 360px; margin: 0 auto 30px; aspect-ratio: 1 / 1;}
	.productsList .pairingDetail .pd-visual{ text-align: center;}
	.productsList .pairingDetail .pd-badge,
	.productsList .pairingDetail .pd-pack{ display: none;}
	.productsList .pairingDetail .pd-title,
	.productsList .pairingDetail .pd-title.left{ text-align: center; font-size: 30px; letter-spacing: 6px;}

	.contactForm .contactFormContent{ grid-template-columns: 1fr; gap: 40px;}

	.pairingsList .pairings-grid{ grid-template-columns: repeat(3, 200px);}

	.accolades .ac-title{ grid-template-columns: 1fr auto 1fr; gap: 30px; font-size: 24px;}

	body.single-pairing .pairingDetail .pd-grid{ grid-template-columns: 1fr; gap: 60px;}
	body.single-pairing .pairingDetail .pd-visual{ margin: 0 auto;}
}

/* ─── Phone (≤779px) ─── */
.nav-toggle{ display: none;}

/* offset anchor jumps (#product-*) on The Collection so the sticky header doesn't cover the target card */
.productsList .pairingDetail{ scroll-margin-top: 140px; }

@media (max-width: 779px) {
	body{ min-width: 375px;}
	html #wpadminbar{ display: none !important;}
	body.admin-bar{ margin-top: -46px;}

	/* Header + nav (hamburger) */
	header{ height: 70px; padding: 0; position: fixed; width: 100%;}
	.nav{ max-width: none; height: 70px; column-gap: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; grid-template-columns: none;}
	.nav .nav-link{ display: none;}

	.brand{ width: 104px; margin: 0; aspect-ratio: 204 / 105;}
	.nav-toggle{ display: flex; flex-direction: column; gap: 5px; justify-content: center; position: fixed; left: 20px; top: 22px; width: 28px; height: 24px; padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 101;}
	.nav-toggle span{ display: block; width: 100%; height: 2px; background: var(--gold); transition: transform .3s ease, opacity .2s ease; transform-origin: center;}
	.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg);}
	.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0;}
	.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
	.nav.open{ position: fixed; inset: 0; height: 100vh; background: rgba(20,16,16,0.97); z-index: 100; flex-direction: column; justify-content: center; gap: 28px; padding: 80px 20px 40px;}
	.nav.open .nav-link{ display: block; font-size: 18px; letter-spacing: 5px; color: var(--gold);}
	.nav.open .nav-link.active{ color: var(--gold-light);}
	.nav.open .brand{ position: fixed; top: 8px; left: 50%; transform: translateX(-50%); margin: 0;}
	body.nav-open{ overflow: hidden;}

	/* Hero */
	.pageHeader{ min-height: 480px;}
	.pageHeader .ph-content{ top: 140px;}
	.pageHeader .ph-content :is(h1, h2, h3, p){ font-size: 26px; letter-spacing: 6px; line-height: 1.2;}
	.pageHeader .overlay{ height: 240px;}

	/* Ornament tighter */
	.bgSection .ornament{ padding: 50px 30px; border-width: 0px; border-style: none; border-image: none;}

	/* Fullwidth text */
	.fullwidthText :is(h1, h2, h3, h4, h5, h6){ font-size: 22px; letter-spacing: 3px;}
	.fullwidthText p{ font-size: 15px;}

	/* Text + Image */
	.textWithImage .twi-visual{ max-width: 100%;}
	.textWithImage .twi-text :is(h1, h2, h3, h4, h5, h6){ font-size: 22px; letter-spacing: 4px;}
	.page-id-272 .twi-text ul{ columns: 1;}

	/* Products list */
	.productsList .pairingDetail .pd-card{ padding: 8px;}
	.productsList .pairingDetail .pd-main,
	.productsList .pairingDetail.reverse .pd-main{ max-width: 240px; margin: 0 auto 20px;}
	.productsList .pairingDetail .pd-title,
	.productsList .pairingDetail .pd-title.left{ font-size: 22px; letter-spacing: 4px;}
	.productsList .pairOrnament{ border-width: 18px;}
	.pl-nutrition-btn{ padding: 12px 14px; font-size: 11px; letter-spacing: 2px; white-space: nowrap;}
	.productsList .pairingDetail .pd-text{ text-align: center;}
	.productsList .pairingDetail .pd-copy{ text-align: center;}

	/* Circle Links */
	.circleLinks .circle-links-grid{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px;}
	.circleImg{ width: 120px;}

	/* Pairings list */
	.pairingsList{ padding: 0px;}
	.pairingsList .pairings-grid{ grid-template-columns: repeat(2, 156.5px); gap: 20px;}
	.pairingsList .pairing-card{ margin: 0 auto; max-width: 220px;}
	.pairingsList .pairings-filter{ flex-direction: column; align-items: center; gap: 0; margin: 24px 0 40px;}
	.pairingsList .filter-label{ display: none;}
	.pairingsList .dropdown{ width: 100%; max-width: 280px; min-width: 0;}

	/* Single pairing */
	body.single-pairing .pairingDetail .pd-title{ font-size: 22px; letter-spacing: 4px;}
	body.single-pairing .bgSection .ornament{ padding: 8px;}
	body.single-pairing .pairingDetail .pd-card{ padding: 10px;}
	body.single-pairing .pairingDetail .pd-pack,
	body.single-pairing .pairingDetail .pd-badge{ }

	/* Contact */
	.contactForm{ padding: 0px;}
	.contactForm .formRow{ grid-template-columns: 1fr; gap: 16px;}
	.contactForm .contactFormContent{ gap: 24px;}

	/* Accolades */
	.accolades{ padding: 36px 16px;}
	.accolades .ac-title{ font-size: 16px; gap: 12px; letter-spacing: 3px; grid-template-columns: 1fr auto 1fr;}
	.accolades .ac-row{ grid-template-columns: repeat(3, 76px); gap: 16px;}
	.accolades .ac-award{ width: 76px;}

	/* Footer */
	.siteFooter .content{ flex-direction: column; gap: 12px; padding: 0px 16px; text-align: center;}
	.siteFooter ul{ justify-content: center; flex-wrap: wrap;}

	body.scrolled header{ background: #000;}
	.siteFooter{ background: rgba(0,0,0,0.8); color: #fff;}
	.pairOrnament{ border-width: 20px; border-image: url("img/pairOrnament.svg") 13 / 20px round; padding: 10px;}
	.productsList .pairOrnament{ border-width: 15px; border-image: url("img/pairOrnament.svg") 15 / 15px round; padding: 10px; }
	.pairingDetail .pd-main{ margin: 0 auto; width: 100%;}
	.pairingDetail .pd-badge { top: -19px; left: -8px;}
	.pairingDetail .pd-pack { left: -17px; bottom: -31px; width: 145px;}
	body.single-pairing section { padding: 72px 0px 0px;}

}