/* ==========================================================================
   Deli2on — base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--d2-font-body);
	color: var(--d2-ink);
	background: var(--d2-cream);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--d2-font-display);
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 0.5em;
	color: var(--d2-espresso);
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; max-width: 62ch; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.d2-skip-link {
	position: absolute; top: -60px; left: 12px; z-index: 10000;
	background: var(--d2-espresso); color: var(--d2-cream); padding: 10px 16px; border-radius: var(--d2-radius);
	transition: top .2s ease;
}
.d2-skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--d2-caramel); outline-offset: 2px; }

.d2-container {
	max-width: var(--d2-max);
	margin: 0 auto;
	padding: 0 var(--d2-gutter);
}
.d2-narrow { max-width: 780px; }
.d2-section { padding: clamp(52px, 8vw, 96px) 0; }
.d2-alt-bg { background: var(--d2-parchment); }

.d2-kicker {
	font-family: var(--d2-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--d2-caramel);
	margin: 0 0 0.6em;
}
.d2-section-head { max-width: 640px; margin-bottom: 40px; }
.d2-section-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.d2-section-head--center p { margin-left: auto; margin-right: auto; }

.d2-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--d2-radius);
	font-weight: 600;
	font-size: 0.96rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.d2-btn-primary { background: var(--d2-caramel); color: var(--d2-espresso); }
.d2-btn-primary:hover { background: var(--d2-caramel-light); }
.d2-btn-ghost { border-color: var(--d2-line-on-dark); color: inherit; }
.d2-hero .d2-btn-ghost { color: var(--d2-cream); border-color: var(--d2-line-on-dark); }
.d2-btn-ghost:hover { background: rgba(0,0,0,0.05); }
.d2-btn:active { transform: translateY(1px); }

.d2-link { color: var(--d2-espresso); font-weight: 600; border-bottom: 1px solid var(--d2-caramel); padding-bottom: 2px; }
.d2-link:hover { color: var(--d2-caramel); }

/* ==========================================================================
   Motion — scroll reveal, count-up, hero entrance
   ========================================================================== */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
	will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.d2-hero-copy > * { opacity: 0; transform: translateY(16px); animation: d2-hero-in .8s cubic-bezier(.16,.84,.44,1) forwards; }
.d2-hero-copy > *:nth-child(1) { animation-delay: .05s; }
.d2-hero-copy > *:nth-child(2) { animation-delay: .16s; }
.d2-hero-copy > *:nth-child(3) { animation-delay: .27s; }
.d2-hero-copy > *:nth-child(4) { animation-delay: .38s; }
.d2-hero-media { opacity: 0; transform: scale(.94); animation: d2-hero-media-in 1s cubic-bezier(.16,.84,.44,1) .2s forwards; }
@keyframes d2-hero-in { to { opacity: 1; transform: translateY(0); } }
@keyframes d2-hero-media-in { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.d2-hero-copy > *, .d2-hero-media { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   Logo image
   ========================================================================== */
.d2-logo-link { display: inline-flex; }
.d2-logo-img { max-height: 60px; width: auto; }

/* Header gains a soft shadow once scrolled — a small, single premium detail */
.d2-header { transition: box-shadow .25s ease, background .25s ease; }
.d2-header.is-scrolled { box-shadow: 0 8px 24px rgba(43,23,16,0.08); }


.d2-topbar { background: var(--d2-espresso); color: var(--d2-cream); font-size: 0.82rem; }
.d2-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--d2-gutter); gap: 16px; }
.d2-topbar-msg { margin: 0; opacity: 0.85; }
.d2-topbar-phone { margin: 0; font-weight: 600; white-space: nowrap; }

.d2-header {
	background: var(--d2-parchment);
	border-bottom: 1px solid var(--d2-line);
	position: sticky; top: 0; z-index: 200;
}
.d2-header-inner {
	display: flex; align-items: center; gap: 24px;
	padding: 14px var(--d2-gutter);
}
.d2-logo-text {
	font-family: var(--d2-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--d2-espresso);
}
.d2-logo-text span { color: var(--d2-caramel); }
.d2-logo-text--light { color: var(--d2-cream); }
.d2-logo-text--light span { color: var(--d2-caramel-light); }
.custom-logo { max-height: 56px; width: auto; }

.d2-primary-nav { margin-left: 12px; flex: 1; }
.d2-menu { display: flex; gap: 30px; }
.d2-menu a {
	font-weight: 500;
	font-size: 0.96rem;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.d2-menu a:hover, .d2-menu .current-menu-item > a { border-color: var(--d2-caramel); }

.d2-header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.d2-icon-link { position: relative; display: inline-flex; padding: 4px; }
.d2-cart-count {
	position: absolute; top: -6px; right: -8px;
	background: var(--d2-caramel); color: var(--d2-espresso);
	font-size: 0.66rem; font-weight: 700; line-height: 1;
	min-width: 16px; height: 16px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

.d2-nav-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 34px; height: 34px; border: none; background: none; cursor: pointer; padding: 0;
}
.d2-nav-toggle span { display: block; height: 2px; background: var(--d2-espresso); border-radius: 2px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.d2-hero { background: var(--d2-espresso); color: var(--d2-cream); overflow: hidden; }
.d2-hero-inner {
	display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px;
	padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px);
}
.d2-hero-copy p.d2-kicker { color: var(--d2-caramel-light); }
.d2-hero h1 { color: var(--d2-cream); }
.d2-hero-lede { color: rgba(246,239,225,0.82); font-size: 1.05rem; }
.d2-hero-ctas { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.d2-hero-media { display: flex; justify-content: center; }
.d2-hero-media img { max-width: 400px; }

/* ==========================================================================
   Facts strip
   ========================================================================== */
.d2-facts { background: var(--d2-caramel-light); }
.d2-facts-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 30px var(--d2-gutter); }
.d2-fact { font-size: 0.9rem; color: var(--d2-espresso-soft); font-weight: 500; }
.d2-fact-number { display: block; font-family: var(--d2-font-display); font-size: 1.9rem; font-weight: 600; color: var(--d2-espresso); }
.d2-fact-label { display: block; }

/* ==========================================================================
   Collection grid (home) — uses the shared .d2-product-card system below
   ========================================================================== */
.d2-collection-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
	justify-content: center; gap: 28px;
}
.d2-collection-empty { text-align: center; color: var(--d2-bark); }
.d2-collection-cta { text-align: center; margin-top: 40px; }

/* ==========================================================================
   Shared product card — used on the homepage collection grid AND the
   shop/category loop, so both look and behave the same way.
   ========================================================================== */
.d2-product-card {
	list-style: none; position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--d2-line); border-radius: 14px;
	overflow: hidden; box-shadow: 0 2px 10px rgba(43,23,16,0.05);
	transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease;
}
.d2-product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(43,23,16,0.12); border-color: var(--d2-caramel); }
.d2-product-card-media { display: block; position: relative; overflow: hidden; }
.d2-product-card-media img {
	width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #fff;
	transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.d2-product-card:hover .d2-product-card-media img { transform: scale(1.07); }
.d2-product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.d2-product-card .d2-loop-cat { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--d2-caramel); margin: 0 0 4px; font-weight: 600; }
.d2-product-card-title {
	font-family: var(--d2-font-display); font-size: 0.92rem; font-weight: 600; line-height: 1.32;
	margin: 0 0 6px; color: var(--d2-espresso);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.64em;
}
.d2-product-card-title a { color: inherit; text-decoration: none; }
.d2-product-card .star-rating { margin-bottom: 4px; font-size: 0.85rem; }
.d2-product-card .price { color: var(--d2-caramel); font-weight: 700; display: block; margin-bottom: 12px; font-size: 0.94rem; }
.d2-product-card .price del { color: var(--d2-bark); opacity: 0.55; font-weight: 400; margin-right: 6px; font-size: 0.85em; }
.d2-product-card .onsale,
.d2-product-card .d2-sale-badge {
	position: absolute; top: 12px; left: 12px; background: var(--d2-caramel); color: #fff;
	font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	padding: 5px 11px; border-radius: 999px; z-index: 2; line-height: 1.4;
	box-shadow: 0 3px 8px rgba(190,138,61,0.35);
}

.d2-product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
/* !important throughout: WooCommerce ships its own default `.button`
   padding/line-height, and depending on plugin vs theme CSS load order it
   can win the specificity tie against `.d2-product-actions .button`,
   making "Add to cart" taller than the untouched "Buy Now" button next to
   it. Pin both to the same box model explicitly so they always match. */
.d2-product-actions .button,
.d2-product-actions .d2-btn-buynow {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 100% !important; min-height: 40px !important; text-align: center !important;
	padding: 0 8px !important; margin: 0 !important; border-radius: 9px !important;
	font-size: 0.76rem !important; font-weight: 600 !important; line-height: 1.2 !important;
	white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
	box-sizing: border-box !important;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.d2-product-actions .button {
	background: var(--d2-espresso) !important; color: var(--d2-cream) !important; border: 1px solid var(--d2-espresso) !important;
}
.d2-product-actions .button:hover { background: var(--d2-caramel) !important; border-color: var(--d2-caramel) !important; color: #fff !important; transform: translateY(-1px); }
.d2-product-actions .d2-btn-buynow {
	background: var(--d2-caramel-light) !important; color: var(--d2-espresso) !important; border: 1px solid var(--d2-caramel) !important;
	text-decoration: none !important;
}
.d2-product-actions .d2-btn-buynow:hover {
	background: var(--d2-caramel) !important; color: #fff !important; border-color: var(--d2-caramel) !important;
	box-shadow: 0 6px 14px rgba(190,138,61,0.35); transform: translateY(-1px);
}

@media (max-width: 480px) {
	.d2-product-actions { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Blend / ingredients (home)
   ========================================================================== */
.d2-blend-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.d2-blend-media img { border-radius: 50%; max-width: 320px; margin: 0 auto; }
.d2-ingredient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.d2-ingredient img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; margin-bottom: 12px; }
.d2-ingredient h4 { font-family: var(--d2-font-display); font-size: 1.02rem; margin-bottom: 4px; }
.d2-ingredient p { font-size: 0.86rem; margin-bottom: 0; }

/* ==========================================================================
   Fuel Peak dosage cards
   ========================================================================== */
.d2-dosage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.d2-dosage-card {
	background: var(--d2-espresso); color: var(--d2-cream); border-radius: var(--d2-radius);
	padding: 26px 22px; text-align: center; transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
.d2-dosage-card:hover { transform: translateY(-6px); }
.d2-dosage-amount { display: block; font-family: var(--d2-font-display); font-size: 2.1rem; font-weight: 600; color: var(--d2-caramel-light); }
.d2-dosage-card h4 { color: var(--d2-cream); font-size: 1.02rem; margin: 4px 0 10px; }
.d2-dosage-card p { color: rgba(246,239,225,0.78); font-size: 0.88rem; margin: 0; max-width: none; }

/* Checklists (brochure benefit lists) */
.d2-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.d2-checklist h3 { font-size: 1.08rem; margin-bottom: 16px; }
.d2-checklist ul { display: grid; gap: 12px; }
.d2-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.d2-checklist li::before {
	content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--d2-leaf-soft); color: var(--d2-leaf); font-size: 0.74rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* Comparison table (regular coffee vs Deli2on) */
.d2-compare { width: 100%; border-collapse: collapse; margin-top: 8px; }
.d2-compare th, .d2-compare td { padding: 16px 14px; border-bottom: 1px solid var(--d2-line); text-align: center; font-size: 0.92rem; }
.d2-compare th { font-family: var(--d2-font-display); font-weight: 600; font-size: 1rem; }
.d2-compare thead th:first-child, .d2-compare tbody td:first-child { text-align: left; font-weight: 600; color: var(--d2-espresso-soft); }
.d2-compare .d2-compare-highlight { background: var(--d2-parchment); color: var(--d2-caramel); font-weight: 600; border-left: 2px solid var(--d2-caramel); border-right: 2px solid var(--d2-caramel); }
.d2-compare thead .d2-compare-highlight { border-top: 2px solid var(--d2-caramel); border-radius: var(--d2-radius) var(--d2-radius) 0 0; }

/* Full-bleed product banner */
.d2-banner { position: relative; overflow: hidden; }
.d2-banner img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; object-position: center 25%; }
.d2-banner-copy {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
	padding: 0 var(--d2-gutter); background: linear-gradient(90deg, rgba(43,23,16,0.82) 0%, rgba(43,23,16,0.42) 55%, rgba(43,23,16,0) 90%);
	color: var(--d2-cream);
}
.d2-banner-copy .d2-container { padding: 0; }
.d2-banner-copy h2 { color: var(--d2-cream); max-width: 480px; }
.d2-banner-copy p { color: rgba(246,239,225,0.85); max-width: 440px; }


/* ==========================================================================
   Journey / farm-to-cup
   ========================================================================== */
.d2-journey-steps {
	display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
	counter-reset: none;
}
.d2-journey-steps li {
	text-align: center; padding: 20px 8px; border-top: 3px solid var(--d2-caramel);
	font-weight: 600; font-size: 0.94rem;
}
.d2-journey-steps li span {
	display: block; font-family: var(--d2-font-display); font-size: 1.5rem; color: var(--d2-caramel);
	margin-bottom: 6px; font-weight: 600;
}

/* ==========================================================================
   Philosophy band
   ========================================================================== */
.d2-philosophy { background: var(--d2-espresso); color: var(--d2-cream); padding: 76px 0; text-align: center; }
.d2-philosophy blockquote { margin: 0; max-width: 720px; margin: 0 auto; }
.d2-philosophy p {
	font-family: var(--d2-font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-style: italic; color: var(--d2-cream); margin-bottom: 16px; max-width: none;
}
.d2-philosophy cite { color: var(--d2-caramel-light); font-style: normal; font-size: 0.9rem; }

/* ==========================================================================
   Origin (home) / About intro
   ========================================================================== */
.d2-origin-inner, .d2-about-intro, .d2-signature-blend {
	display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center;
}
.d2-origin-media img, .d2-about-intro-media img, .d2-signature-media img { border-radius: var(--d2-radius); width: 100%; }
.d2-lede { font-size: 1.15rem; color: var(--d2-espresso-soft); }

.d2-two-col { columns: 2; column-gap: 48px; }
.d2-two-col p { max-width: none; }

.d2-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.d2-process-item { border-top: 1px solid var(--d2-line); padding-top: 18px; }
.d2-process-item p { font-size: 0.92rem; }

.d2-vision-copy { max-width: 780px; }
.d2-vision-copy p { font-size: 1.08rem; max-width: none; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.d2-page-hero { background: var(--d2-parchment); border-bottom: 1px solid var(--d2-line); padding: 56px 0 44px; }
.d2-page-hero h1 { margin: 0; }
.d2-page-hero--shop h1, .d2-page-hero--shop .d2-kicker { margin: 0; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.d2-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.d2-contact-list { display: grid; gap: 20px; margin: 24px 0; }
.d2-contact-list dt { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--d2-caramel); margin-bottom: 4px; }
.d2-contact-list dd { margin: 0; }
.d2-policy-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.d2-policy-links a { font-size: 0.9rem; border-bottom: 1px solid var(--d2-line); padding-bottom: 2px; }
.d2-policy-links a:hover { border-color: var(--d2-caramel); }

.d2-contact-form-wrap { background: var(--d2-parchment); border: 1px solid var(--d2-line); border-radius: var(--d2-radius); padding: 32px; }
.d2-contact-form { display: grid; gap: 6px; }
.d2-contact-form label { font-size: 0.86rem; font-weight: 600; margin-top: 10px; }
.d2-contact-form input, .d2-contact-form textarea {
	font-family: inherit; font-size: 1rem; padding: 12px 14px;
	border: 1px solid var(--d2-line); border-radius: var(--d2-radius); background: #fff;
}
.d2-contact-form input:focus, .d2-contact-form textarea:focus { outline: none; border-color: var(--d2-caramel); }
.d2-contact-form button { margin-top: 18px; justify-self: start; }
.d2-form-success { text-align: center; padding: 20px 0; }

.d2-contact-map-section { padding-top: 0; }
.d2-contact-map {
	border-radius: var(--d2-radius); overflow: hidden; border: 1px solid var(--d2-line);
	box-shadow: 0 12px 28px rgba(43,23,16,0.08);
}
.d2-contact-map iframe { display: block; width: 100%; height: 380px; }

/* ==========================================================================
   Blog fallback
   ========================================================================== */
.d2-post-list { display: grid; gap: 40px; }
.d2-post-card h2 { margin-bottom: 8px; }
.d2-post-thumb { display: block; margin-bottom: 14px; border-radius: var(--d2-radius); overflow: hidden; }

/* ==========================================================================
   404
   ========================================================================== */
.d2-404 { text-align: center; }
.d2-404 .d2-hero-ctas { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.d2-footer { background: var(--d2-espresso); color: rgba(246,239,225,0.85); }
.d2-footer-top {
	display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px;
	padding: 64px var(--d2-gutter) 44px;
}
.d2-footer-brand p { font-size: 0.9rem; color: rgba(246,239,225,0.7); margin-top: 14px; }
.d2-footer h3 { color: var(--d2-cream); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 14px; font-family: var(--d2-font-body); }
.d2-footer-col ul { display: grid; gap: 10px; }
.d2-footer-col a { font-size: 0.9rem; }
.d2-footer-col a:hover { color: var(--d2-caramel-light); }
.d2-footer-bottom { border-top: 1px solid var(--d2-line-on-dark); }
.d2-footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 20px var(--d2-gutter); font-size: 0.8rem; }
.d2-footer-bottom-inner p { margin: 0; }

/* ==========================================================================
   WooCommerce — shop grid, product page, cart, checkout, account
   ========================================================================== */
.d2-shop-wrap { padding: 48px 0 80px; }

/* Belt-and-suspenders: guarantee the shop content always gets the same
   left/right gutter as the rest of the site, independent of how
   WooCommerce's hooks nest the result-count/ordering row vs the product
   grid inside this wrapper. */
.d2-shop-wrap > .d2-container {
	max-width: var(--d2-max) !important;
	margin: 0 auto !important;
	padding-left: var(--d2-gutter) !important;
	padding-right: var(--d2-gutter) !important;
	box-sizing: border-box !important;
}

.woocommerce-notices-wrapper { margin-bottom: 24px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--d2-parchment); border: 1px solid var(--d2-line); border-left: 4px solid var(--d2-caramel);
	border-radius: var(--d2-radius); padding: 14px 18px; list-style: none; margin-bottom: 20px;
}

/* Product grid — cards keep a fixed, compact width (auto-fill) instead of
   stretching to divide the row evenly. That makes cards smaller and, since
   leftover row space is centered rather than handed to the cards, keeps
   equal breathing room on the left and right at any viewport — no separate
   breakpoints needed, it reflows on its own. */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(190px, 215px)) !important;
	justify-content: center !important;
	gap: 20px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* WooCommerce's legacy float-layout clearfix adds :before/:after pseudo
   elements to ul.products for clearing floats. Once the grid above turns
   ul.products into a CSS grid, those pseudo elements become real, empty
   grid cells and silently shift every real product over — this is what
   was throwing off alignment on the shop grid and on the related/up-sells
   rows (which only have 1–2 real items, so the phantom cell is obvious).
   Kill them outright. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

ul.products li.product,
ul.products li.product.d2-product-card {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.star-rating { color: var(--d2-caramel); }


.woocommerce-pagination { margin-top: 44px; }
.woocommerce-pagination .page-numbers { display: inline-flex; gap: 8px; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius);
}
.woocommerce-pagination .current { background: var(--d2-espresso); color: var(--d2-cream); border-color: var(--d2-espresso); }

.woocommerce-ordering select, .woocommerce-result-count { font-size: 0.9rem; }
.woocommerce-ordering select {
	padding: 8px 12px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius); background: #fff;
}

/* Single product */
.single-product .summary { padding-left: 8px; }
.single-product .product_title { margin-bottom: 10px; }
.single-product .price { font-size: 1.4rem; color: var(--d2-caramel); font-weight: 700; margin-bottom: 16px; display: block; }
.single-product .woocommerce-product-details__short-description { margin-bottom: 20px; }
.single-product .cart { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.single-product .quantity input { width: 64px; padding: 12px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius); text-align: center; }
.single-product .single_add_to_cart_button {
	background: var(--d2-espresso); color: var(--d2-cream); border: none; padding: 14px 30px;
	border-radius: var(--d2-radius); font-weight: 600; cursor: pointer; font-size: 0.96rem;
}
.single-product .single_add_to_cart_button:hover { background: var(--d2-caramel); color: var(--d2-espresso); }
.woocommerce-tabs ul.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--d2-line); margin: 40px 0 0; padding: 0; }
.woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 18px; font-weight: 600; }
.woocommerce-tabs ul.tabs li.active a { border-bottom: 2px solid var(--d2-caramel); }
.woocommerce-tabs .panel { padding: 26px 0; max-width: 780px; }
.related.products { margin-top: 64px; }
.related.products > h2 { font-size: 1.5rem; margin-bottom: 28px; }
.up-sells.products { margin-top: 64px; }
.up-sells.products > h2 { font-size: 1.5rem; margin-bottom: 28px; }

/* "You may also like…" (up-sells) and "Related products" usually hold
   only 1–2 items. Forcing them into the same rigid 3-equal-column grid as
   the full shop leaves a lone card stretched into the left third of the
   row with empty space to its right — the misaligned look at the bottom
   of the product page. Let these two grids size cards to a natural,
   consistent width instead, wrapping only as many columns as fit. */
.related.products ul.products,
.up-sells.products ul.products {
	grid-template-columns: repeat(auto-fill, minmax(260px, 300px)) !important;
	justify-content: flex-start;
}

/* Cart */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table {
	width: 100%; border-collapse: collapse; margin-bottom: 26px;
}
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td {
	padding: 14px 10px; border-bottom: 1px solid var(--d2-line); text-align: left;
}
.woocommerce-cart table.shop_table img { width: 64px; border-radius: var(--d2-radius); }
.woocommerce-cart .actions .button, .checkout-button, .wc-proceed-to-checkout .checkout-button {
	background: var(--d2-espresso) !important; color: var(--d2-cream) !important; border-radius: var(--d2-radius) !important;
	padding: 14px 26px !important; font-weight: 600 !important;
}
.woocommerce-cart .actions .button:hover, .checkout-button:hover { background: var(--d2-caramel) !important; color: var(--d2-espresso) !important; }
.cart-collaterals .cart_totals { background: var(--d2-parchment); border: 1px solid var(--d2-line); border-radius: var(--d2-radius); padding: 24px; max-width: 420px; margin-left: auto; }
.cart-collaterals .cart_totals table { width: 100%; }
.cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td { padding: 10px 0; border-bottom: 1px solid var(--d2-line); }

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea, .woocommerce-checkout select {
	width: 100%; padding: 12px 14px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius); font-family: inherit; font-size: 1rem;
}
#order_review { background: var(--d2-parchment); border: 1px solid var(--d2-line); border-radius: var(--d2-radius); padding: 24px; margin-top: 40px; }
#order_review table.shop_table { margin-bottom: 12px; }
#place_order {
	background: var(--d2-caramel) !important; color: var(--d2-espresso) !important; border: none !important;
	padding: 16px 30px !important; border-radius: var(--d2-radius) !important; font-weight: 700 !important; font-size: 1rem !important;
	width: 100%;
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block; padding: 12px 16px; border-radius: var(--d2-radius); font-weight: 600; font-size: 0.92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--d2-parchment); color: var(--d2-caramel); }
.woocommerce-account .woocommerce-MyAccount-content { margin-top: 32px; }
.woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: 12px 10px; border-bottom: 1px solid var(--d2-line); }
.woocommerce-account .woocommerce-Button, .woocommerce-account button[type="submit"] {
	background: var(--d2-espresso); color: var(--d2-cream); border: none; padding: 12px 22px;
	border-radius: var(--d2-radius); font-weight: 600; cursor: pointer;
}
.woocommerce-account .woocommerce-Button:hover { background: var(--d2-caramel); color: var(--d2-espresso); }
.woocommerce-account .woocommerce-form-row input { padding: 12px 14px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius); width: 100%; }
.woocommerce-account fieldset { border: 1px solid var(--d2-line); border-radius: var(--d2-radius); padding: 20px; margin-top: 20px; }
.woocommerce-account fieldset legend { padding: 0 8px; font-weight: 700; }

/* Widget / sidebar */
.widget-title { font-family: var(--d2-font-display); font-size: 1.05rem; margin-bottom: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.d2-hero-inner, .d2-blend-inner, .d2-origin-inner, .d2-about-intro, .d2-signature-blend, .d2-contact-grid {
		grid-template-columns: 1fr; text-align: left;
	}
	.d2-hero-media { order: -1; }
	.d2-ingredient-grid { grid-template-columns: repeat(2, 1fr); }
	.d2-process-grid { grid-template-columns: repeat(2, 1fr); }
	.d2-journey-steps { grid-template-columns: repeat(4, 1fr); }
	.d2-facts-inner { grid-template-columns: repeat(2, 1fr); }
	.d2-two-col { columns: 1; }
	.d2-dosage-grid { grid-template-columns: 1fr; }
	.d2-checklist-grid { grid-template-columns: 1fr; gap: 28px; }
	.d2-compare { font-size: 0.85rem; }
	.d2-compare th, .d2-compare td { padding: 10px 8px; }
	.woocommerce-checkout #customer_details { grid-template-columns: 1fr; }

	/* Tighter gap once we're at tablet width */
	ul.products {
		gap: 16px !important;
	}

	.d2-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.d2-nav-toggle { display: flex; }
	.d2-primary-nav {
		position: absolute; top: 100%; left: 0; right: 0; background: var(--d2-parchment);
		border-bottom: 1px solid var(--d2-line); max-height: 0; overflow: hidden; transition: max-height .25s ease;
	}
	.d2-primary-nav.is-open { max-height: 400px; }
	.d2-menu { flex-direction: column; gap: 0; padding: 8px var(--d2-gutter) 18px; }
	.d2-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--d2-line); }
	.d2-topbar-msg { display: none; }
	.d2-ingredient-grid { grid-template-columns: repeat(2, 1fr); }
	.d2-journey-steps { grid-template-columns: repeat(2, 1fr); }
	.d2-footer-top { grid-template-columns: 1fr; padding-top: 44px; }

	/* Slightly smaller minimum card width + gap once we're down to phone width */
	ul.products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
		gap: 12px !important;
	}

	.single-product .summary { padding-left: 0; margin-top: 24px; }
}

@media (max-width: 480px) {
	/* Two even columns on small phones instead of one oversized column */
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}