and heading. Widget spacing is already set per-widget in the templates, so the theme margin was being added on top and roughly doubling every gap. Zero it out and let the widget margins do the work. Reference spacing from the source build: eyebrow -> h2 20px (mb-5) h2 -> body 24px (mt-6) body -> body 16px (mt-4) body -> button 40px (mt-10) ========================================================================== */ .ih-section .elementor-widget-text-editor p, .ih-footer .elementor-widget-text-editor p { margin: 0 !important; } .ih-section .elementor-heading-title, .ih-footer .elementor-heading-title { margin: 0 !important; } /* The text-editor wrapper itself can also pick up theme margins */ .ih-section .elementor-widget-text-editor .elementor-widget-container, .ih-section .elementor-widget-heading .elementor-widget-container { margin: 0; } /* Blockquote (Founder) has its own theme margin */ .ih-quote blockquote, .ih-section blockquote { margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ========================================================================== 31. WIDGET GAP RESET Elementor sets --widgets-spacing: 20px on every container, applied as a flex gap between child widgets. The section templates set exact margins per widget, so that 20px was being added on top of every gap. Zero the gap on the copy columns and let the per-widget margins define the rhythm. The hero is deliberately excluded — its spacing is already correct and tuned against the reference. ========================================================================== */ .ih-copy-col, .ih-sec-head, .ih-bs, .ih-manifesto-left, .ih-std-list { --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; gap: 0 !important; row-gap: 0 !important; } /* Manifesto rows carry their own padding, so keep them flush */ .ih-std-list > .elementor-element { margin: 0 !important; } /* ========================================================================== 32. MANIFESTO — CORRECTIONS ========================================================================== */ /* ---- Sticky left column ---- position: sticky is cancelled by overflow:hidden on ANY ancestor, and the section template sets it. Clear it on this section only, then pin. */ #manifesto, #manifesto > .e-con-inner, #manifesto .e-con-inner { overflow: visible !important; } .ih-manifesto-left { position: sticky !important; top: 112px; align-self: flex-start !important; height: -moz-fit-content; height: fit-content; } /* ---- Row separators ---- Drop the full-width top rule; the short gradient rule is the divider. */ .ih-std { border-top: 0 !important; /* matches py-9 / md:py-11 in the source build */ padding: 44px 0; } .ih-std-rule { bottom: 0; height: 1px; width: 38%; background: linear-gradient(to right, rgba(255, 255, 255, 0.45), transparent); } /* ---- Tighter vertical rhythm ---- */ .ih-std-head { margin-bottom: 12px; } .ih-std-title { font-size: 32px; } .ih-std-text { font-size: 16px; } .ih-std-ghost { font-size: 104px; top: -8px; } #manifesto { padding-top: 144px !important; padding-bottom: 144px !important; } @media (max-width: 1024px) { .ih-manifesto-left { position: static !important; } .ih-std { padding: 36px 0; } .ih-std-title { font-size: 28px; } .ih-std-ghost { font-size: 80px; } #manifesto { padding-top: 96px !important; padding-bottom: 96px !important; } } /* ========================================================================== 33. FLAGSHIP — CORRECTIONS ========================================================================== */ /* Bolder point labels */ .ih-point-label { font-weight: 600; font-size: 23px; letter-spacing: -0.01em; } /* Tighter list rhythm — the reference sits ~46px per row, ours was ~52px */ .ih-points { margin-top: 32px; } .ih-point { padding-top: 13px; margin-bottom: 10px; } .ih-point:last-child { margin-bottom: 0; } .ih-point-icon { height: 34px; width: 34px; } .ih-point-row { gap: 14px; } .ih-point-note { margin-top: 6px; padding-left: 48px; font-size: 11px; } /* Section padding down from 160px */ #tq { padding-top: 128px !important; padding-bottom: 128px !important; } @media (max-width: 1024px) { .ih-point-label { font-size: 20px; } .ih-point-icon { height: 30px; width: 30px; } .ih-point-note { padding-left: 44px; } #tq { padding-top: 96px !important; padding-bottom: 96px !important; } } /* ========================================================================== 34. MOBILE ========================================================================== */ /* ---- Marquee padding (missing entirely — source uses py-10 md:py-14) ---- */ .ih-marquee { padding: 56px 0; } @media (max-width: 767px) { .ih-marquee { padding: 40px 0; } .ih-marquee-item { gap: 24px; margin: 0 24px; font-size: 2.25rem; } } /* ---- Header ---- Logo left, burger right. Login hides below desktop, Shop Now below 640px, matching `hidden xl:inline-flex` and `hidden sm:inline-flex` in the source. */ @media (max-width: 1024px) { .ih-header .e-con-inner { flex-wrap: nowrap !important; align-items: center !important; } .ih-header .e-con-inner > .e-con:nth-child(1) { width: auto !important; flex: 1 1 auto !important; } .ih-header .e-con-inner > .e-con:nth-child(2) { width: auto !important; flex: 0 0 auto !important; order: 3; } .ih-header .e-con-inner > .e-con:nth-child(3) { width: auto !important; flex: 0 0 auto !important; } .ih-header-login { display: none !important; } .ih-nav .elementor-menu-toggle { margin-left: auto; } } @media (max-width: 639px) { .ih-header .ih-btn-pill { display: none !important; } } /* ---- Hero product group ---- Elementor containers default to flex-wrap: wrap, which was stacking the two bottles vertically instead of sitting them side by side. */ .ih-product-glow { flex-wrap: nowrap !important; } @media (max-width: 767px) { .ih-product-glow > .elementor-element:nth-last-child(2) img { height: 30vh; } .ih-product-glow > .elementor-element:nth-last-child(1) img { height: 22vh; } .ih-hero > .elementor-widget-html { bottom: 16px; } } /* ---- Section padding ---- */ @media (max-width: 767px) { .ih-section { padding-top: 80px !important; padding-bottom: 80px !important; } #manifesto, #tq { padding-top: 80px !important; padding-bottom: 80px !important; } .ih-sec-head { margin-bottom: 40px; } } /* ---- Manufacturing steps ---- */ @media (max-width: 767px) { .ih-steps { gap: 32px 12px; padding: 36px 0; } .ih-step-icon { height: 46px; width: 46px; } .ih-step-label { margin-top: 14px; font-size: 11px; letter-spacing: 1.8px; } .ih-step-sub { font-size: 11px; max-width: 120px; } } /* ---- Stockists ---- The nested paddings (section + block + panel) were squeezing the cards to about half the screen width. Collapse them on small screens. */ @media (max-width: 767px) { .ih-stockists { padding-left: 0; padding-right: 0; } .ih-stockists-panel { padding: 16px; border-radius: 18px; } .ih-stockists-head { gap: 24px; margin-bottom: 32px; } .ih-stockist { width: 100%; padding: 16px; align-items: center; } .ih-stockist-name { font-size: 15px; } .ih-stockist-loc { font-size: 11px; } .ih-chips { gap: 6px; } .ih-chip { padding: 5px 12px; font-size: 10px; } .ih-plain-btn { width: 100%; justify-content: space-between; } } /* ---- Footer ---- */ @media (max-width: 767px) { .ih-foot-top { padding-bottom: 48px; } .ih-foot-links { gap: 32px; } .ih-foot-legal { gap: 8px; } .ih-foot-wordmark span { font-size: 22vw; } } /* ---- Product cards ---- */ @media (max-width: 767px) { .ih-card-grid { gap: 20px; } } /* ========================================================================== 35. PRODUCT PAGE (PDP) Used by the Black Seed Oil 100ml and 200ml pages. ========================================================================== */ .ih-pdp, .ih-pdp-sec { max-width: 1400px; margin: 0 auto; width: 100%; } .ih-pdp-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ih-zinc-500); text-decoration: none; transition: color 0.3s ease; } .ih-pdp-back:hover { color: #ffffff; } .ih-pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } /* ---- Gallery ---- */ .ih-pdp-gallery { display: flex; gap: 16px; } .ih-pdp-thumbs { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; } .ih-pdp-thumb { height: 64px; width: 64px; flex: 0 0 auto; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; transition: border-color 0.3s ease; } .ih-pdp-thumb:hover { border-color: rgba(255, 255, 255, 0.4); } .ih-pdp-thumb.is-active { border-color: #ffffff; } .ih-pdp-thumb img { height: 100%; width: 100%; display: block; } .ih-fit-contain { object-fit: contain; padding: 6px; } .ih-fit-cover { object-fit: cover; } .ih-pdp-stage { position: relative; flex: 1 1 auto; min-height: 440px; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ih-pdp-stage::before { content: ""; position: absolute; inset: 0; opacity: 0.7; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(217, 119, 37, 0.10), transparent 70%), radial-gradient(ellipse 40% 45% at 50% 50%, rgba(200, 202, 205, 0.07), transparent 72%); } .ih-pdp-stage-img { display: none; position: relative; z-index: 1; animation: ih-fade-in 0.6s var(--ih-ease); } .ih-pdp-stage-img.is-active { display: block; } .ih-pdp-stage-img.ih-fit-contain { height: 380px; width: auto; padding: 0; filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7)); } .ih-pdp-stage-img.ih-fit-cover { position: absolute; inset: 0; height: 100%; width: 100%; } @keyframes ih-fade-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* ---- Info column ---- */ .ih-pdp-brow { font-size: 12px; letter-spacing: 3.6px; text-transform: uppercase; color: var(--ih-zinc-500); margin: 0 0 12px; } .ih-pdp-title { font-size: 48px; font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-transform: none; } .ih-pdp-rating { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .ih-pdp-rating span { font-size: 14px; color: var(--ih-zinc-400); } .ih-pdp-lede { margin: 20px 0 0; font-size: 18px; line-height: 1.625; color: var(--ih-zinc-400); max-width: 576px; } /* ---- Feature badges ---- */ .ih-pdp-badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--ih-border); border-bottom: 1px solid var(--ih-border); } .ih-pdp-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .ih-pdp-badge img { height: 64px; width: 64px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)); } .ih-pdp-badge span { font-size: 10px; line-height: 1.25; color: var(--ih-zinc-400); } /* ---- Size body.elementor-page-17203 ---- */ .ih-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; } .ih-size { position: relative; display: flex; align-items: center; gap: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.02); padding: 16px; text-decoration: none; transition: border-color 0.3s ease, background-color 0.3s ease; } .ih-size:hover { border-color: rgba(255, 255, 255, 0.3); } .ih-size.is-active { border-color: #ffffff; background: rgba(255, 255, 255, 0.10); } .ih-size-radio { position: absolute; top: 12px; right: 12px; height: 16px; width: 16px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.3); } .ih-size.is-active .ih-size-radio { border-color: #ffffff; background: #ffffff; box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 6px #000000; } .ih-size img { height: 56px; width: auto; object-fit: contain; flex: 0 0 auto; } .ih-size-name { display: block; font-size: 20px; font-weight: 500; line-height: 1; color: var(--ih-zinc-100); } .ih-size-price { display: block; margin-top: 4px; font-size: 14px; color: var(--ih-zinc-300); } .ih-size-note { display: block; margin-top: 4px; font-size: 10px; line-height: 1.25; color: var(--ih-zinc-500); max-width: 110px; } /* ---- Quantity + cart ---- */ .ih-pdp-buy { display: flex; gap: 12px; margin-top: 24px; } .ih-qty { display: flex; align-items: center; justify-content: space-between; gap: 4px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 8px; width: 144px; flex: 0 0 auto; } body .ih-qty .ih-qty-btn { display: flex; height: 36px; width: 36px; min-width: 36px; padding: 0 !important; align-items: center; justify-content: center; border-radius: 9999px !important; border: 0 !important; background: transparent !important; cursor: pointer; transition: background-color 0.3s ease; } body .ih-qty .ih-qty-btn:hover { background: rgba(255, 255, 255, 0.1) !important; } .ih-qty-val { font-size: 15px; color: var(--ih-zinc-100); } .ih-cart-btn { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 12px; border-radius: 9999px; background: #ffffff; padding: 14px 32px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #000000; text-decoration: none; transition: background-color 0.5s ease; } .ih-cart-btn:hover { background: var(--ih-zinc-200); color: #000000; } .ih-cart-btn svg { transition: transform 0.5s var(--ih-ease); } .ih-cart-btn:hover svg { transform: translateX(4px); } /* ---- Trust row ---- */ .ih-pdp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } .ih-trust { display: flex; align-items: flex-start; gap: 8px; } .ih-trust svg { margin-top: 2px; flex: 0 0 auto; } .ih-trust strong { display: block; font-size: 11px; font-weight: 400; line-height: 1.25; color: var(--ih-zinc-200); } .ih-trust em { display: block; font-size: 10px; font-style: normal; color: #52525b; } /* ---- Shared PDP headings ---- */ .ih-pdp-h2 { font-size: 60px; font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-transform: none !important; } .ih-center { text-align: center; } /* ---- Value strip ---- */ .ih-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1400px; margin: 0 auto; } .ih-val { display: flex; flex-direction: column; align-items: center; text-align: center; } .ih-val-icon { display: flex; height: 48px; width: 48px; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); } .ih-val-title { margin: 16px 0 0; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ih-zinc-200); } .ih-val-body { margin: 8px 0 0; font-size: 12px; line-height: 1.625; color: var(--ih-zinc-500); max-width: 220px; } /* ---- Process ---- */ .ih-proc-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 64px; } .ih-proc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ih-proc { border-radius: 16px; padding: 28px; height: 100%; } .ih-proc-n { display: flex; height: 36px; width: 36px; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2); font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ih-zinc-200); } .ih-proc-title { margin: 20px 0 0; font-size: 24px; font-weight: 500; color: var(--ih-zinc-100); text-transform: none; } .ih-proc-body { margin: 8px 0 0; font-size: 14px; line-height: 1.625; color: var(--ih-zinc-400); } .ih-sourcing { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); padding: 32px; height: 100%; } .ih-sourcing-brow { margin: 0 0 20px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ih-zinc-500); } .ih-sourcing-body p { margin: 0 0 16px; font-size: 14px; line-height: 1.625; color: var(--ih-zinc-400); } .ih-sourcing-body p:last-child { margin-bottom: 0; } .ih-text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 32px; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ih-zinc-200); text-decoration: none; transition: color 0.3s ease; } .ih-text-link:hover { color: #ffffff; } .ih-text-link svg { transition: transform 0.5s var(--ih-ease); } .ih-text-link:hover svg { transform: translateX(4px); } /* ---- Lab ---- */ .ih-lab-head { max-width: 672px; margin-bottom: 56px; } .ih-lab-pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; } .ih-lab-pt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .ih-lab-pt > span:last-child { font-size: 12px; line-height: 1.25; color: var(--ih-zinc-300); } .ih-lab-icon { display: flex; height: 40px; width: 40px; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); } .ih-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ih-batch { border-radius: 24px; padding: 32px; } .ih-batch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; } .ih-batch-k { margin: 0; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #52525b; } .ih-batch-v { margin: 4px 0 0; font-size: 14px; color: var(--ih-zinc-200); } .ih-batch-v.ih-mono { font-family: "JetBrains Mono", monospace; font-size: 18px; color: var(--ih-zinc-100); } .ih-pill-sm { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 24px; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ih-zinc-100); text-decoration: none; transition: background-color 0.5s ease, color 0.5s ease; } .ih-pill-sm:hover { background: #ffffff; color: #000000; } .ih-tq { border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); padding: 32px; } .ih-tq-body { margin: 0; font-size: 16px; line-height: 1.625; color: var(--ih-zinc-400); } /* ---- What to expect ---- */ .ih-exp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; } .ih-exp { border-radius: 16px; padding: 24px; height: 100%; } .ih-exp-n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #52525b; } .ih-exp-title { margin: 12px 0 0; font-size: 20px; font-weight: 500; line-height: 1.15; color: var(--ih-zinc-100); text-transform: none; } .ih-exp-body { margin: 8px 0 0; font-size: 14px; line-height: 1.625; color: var(--ih-zinc-400); } /* ---- Details + FAQ accordions ---- */ .ih-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .ih-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ih-acc-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 20px; font-weight: 500; color: var(--ih-zinc-100); cursor: pointer; list-style: none; transition: color 0.3s ease; } .ih-acc-q::-webkit-details-marker { display: none; } .ih-acc-q:hover { color: #ffffff; } .ih-acc-i { flex: 0 0 auto; display: flex; transition: transform 0.4s var(--ih-ease); } .ih-acc[open] .ih-acc-i { transform: rotate(180deg); } .ih-acc-a { padding: 0 0 20px; font-size: 14px; line-height: 1.625; color: var(--ih-zinc-400); } /* ---- PDP reviews ---- */ .ih-pdp-rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; } .ih-pdp-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ih-pdp-rev-grid .ih-review { width: auto; border-radius: 24px; padding: 32px; } .ih-pdp-rev-grid .ih-review-text { font-size: 20px; margin-top: 20px; } /* ---- Final CTA ---- */ .ih-final-cta { position: relative; overflow: hidden; background-image: linear-gradient(to bottom, #030303 0%, rgba(3, 3, 3, 0.70) 50%, #030303 100%), url("https://immortalhealthaustralia.com/wp-content/uploads/IH/mountain-mist.webp"); background-size: cover, cover; background-position: center center; background-repeat: no-repeat; } .ih-final-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 160px 40px; text-align: center; } .ih-final-h2 { font-size: 72px; font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; margin: 0; text-transform: none !important; } .ih-final-lede { max-width: 512px; margin: 24px auto 0; font-size: 18px; line-height: 1.625; color: var(--ih-zinc-400); } .ih-final-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 448px; margin: 40px auto 0; text-align: left; } /* ========================================================================== 36. PDP RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .ih-pdp-grid { grid-template-columns: 1fr; gap: 40px; } .ih-pdp-title { font-size: 38px; } .ih-pdp-h2 { font-size: 40px; } .ih-final-h2 { font-size: 48px; } .ih-proc-grid { grid-template-columns: 1fr; gap: 24px; } .ih-lab-grid { grid-template-columns: 1fr; } .ih-acc-grid { grid-template-columns: 1fr; gap: 48px; } .ih-exp-grid { grid-template-columns: repeat(2, 1fr); } .ih-pdp-rev-grid { grid-template-columns: 1fr; } .ih-pdp-rev-head { flex-direction: column; align-items: flex-start; } .ih-values { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .ih-final-inner { padding: 112px 24px; } } @media (max-width: 767px) { .ih-pdp-back { margin-bottom: 24px; } .ih-pdp-gallery { flex-direction: column-reverse; gap: 12px; } .ih-pdp-thumbs { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .ih-pdp-thumbs::-webkit-scrollbar { display: none; } .ih-pdp-thumb { height: 56px; width: 56px; } .ih-pdp-stage { min-height: 320px; } .ih-pdp-stage-img.ih-fit-contain { height: 260px; } .ih-pdp-title { font-size: 30px; } .ih-pdp-lede { font-size: 15px; } .ih-pdp-h2 { font-size: 30px; } .ih-final-h2 { font-size: 34px; } .ih-final-lede { font-size: 15px; } .ih-pdp-badges { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 16px 0; } .ih-pdp-badge img { height: 40px; width: 40px; } .ih-pdp-badge span { font-size: 8px; } .ih-sizes, .ih-final-sizes { grid-template-columns: 1fr; } .ih-size img { height: 48px; } .ih-pdp-buy { flex-direction: column; } .ih-qty { width: 100%; } .ih-cart-btn { padding: 14px 20px; font-size: 11px; letter-spacing: 2px; } .ih-pdp-trust { grid-template-columns: 1fr 1fr; gap: 12px; } .ih-lab-pts { grid-template-columns: 1fr 1fr; gap: 20px; } .ih-proc-cards { grid-template-columns: 1fr; gap: 16px; } .ih-exp-grid { grid-template-columns: 1fr; gap: 12px; } .ih-values { grid-template-columns: 1fr 1fr; } .ih-batch-grid { grid-template-columns: 1fr; gap: 16px; } .ih-batch, .ih-tq, .ih-sourcing { padding: 24px; } .ih-acc-q { font-size: 17px; padding: 16px 0; } .ih-final-inner { padding: 80px 20px; } } /* ========================================================================== 37. HONEY PRODUCT PAGE Extends section 35 (PDP). Only the differences live here. ========================================================================== */ /* Warm spotlight behind the jar instead of the oil page's neutral one */ .ih-honey-stage::before { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(184, 134, 60, 0.16), transparent 70%), radial-gradient(ellipse 40% 45% at 50% 50%, rgba(200, 202, 205, 0.06), transparent 72%) !important; } /* Four badges rather than five */ .ih-badges-4 { grid-template-columns: repeat(4, 1fr); } /* Single size — don't stretch the card across the full width */ .ih-sizes-single { grid-template-columns: minmax(0, 320px); } .ih-sizes-single .ih-size { cursor: default; } .ih-sizes-single .ih-size:hover { border-color: #ffffff; } .ih-sizes-single .ih-size-note { max-width: 180px; } /* Second lede paragraph */ .ih-pdp-lede.ih-mt { margin-top: 16px; } /* Differentiator grid — icon, title, body (the oil page's version is icon + label only, so these get an extra text row) */ .ih-diff-grid { margin-top: 0; gap: 32px 24px; } .ih-diff-t { font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ih-zinc-100); } .ih-diff-b { font-size: 13px; line-height: 1.6; color: var(--ih-zinc-500); margin-top: -4px; } /* Rich accordion bodies (lists, bold labels) */ .ih-acc-a p { margin: 0 0 12px; } .ih-acc-a p:last-child { margin-bottom: 0; } .ih-acc-a ul { margin: 0 0 12px; padding-left: 18px; list-style: disc; } .ih-acc-a li { margin-bottom: 4px; } .ih-acc-a strong { color: var(--ih-zinc-200); font-weight: 500; } /* Placeholder slots for the Wiser review shortcodes */ .ih-wiser-slot, .ih-wiser-block { border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 12px 16px; } .ih-wiser-block { border-radius: 24px; padding: 56px 24px; text-align: center; } .ih-wiser-note { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #52525b; } /* Final CTA — honey variant uses the honeycomb backdrop */ .ih-final-honey { background-image: linear-gradient(to bottom, #030303 0%, rgba(3, 3, 3, 0.72) 50%, #030303 100%), url("https://immortalhealthaustralia.com/wp-content/uploads/IH/honeycomb.webp") !important; } .ih-final-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; } .ih-final-tags span { border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 16px; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ih-zinc-400); } .ih-final-buy { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; } .ih-final-size { display: flex; align-items: baseline; gap: 12px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 12px 24px; flex: 0 0 auto; } .ih-final-buy .ih-cart-btn { flex: 0 0 auto; } @media (max-width: 1024px) { .ih-diff-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ih-badges-4 { grid-template-columns: repeat(4, 1fr); gap: 4px; } .ih-sizes-single { grid-template-columns: 1fr; } .ih-diff-grid { grid-template-columns: 1fr; gap: 24px; } .ih-final-buy { flex-direction: column; } .ih-final-size, .ih-final-buy .ih-cart-btn { width: 100%; justify-content: center; } .ih-wiser-block { padding: 40px 16px; } } /* ========================================================================== 38. WISER REVIEWS Dark-theme overrides for the Wiser Reviews plugin output. The plugin ships light-theme defaults (white cards, dark text), which are invisible-to-wrong on this background. These rules are written broadly and defensively because the plugin's exact markup isn't known here — if something still renders light after this, inspect the element and add its class to the matching group below. ========================================================================== */ /* ---- Rating + count line (hero and section heading) ---- */ .ih-wiser-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ih-wiser-rating, .ih-wiser-rating * { color: var(--ih-zinc-400) !important; font-size: 14px; line-height: 1.3; } .ih-wiser-rating strong, .ih-wiser-rating b { color: var(--ih-zinc-100) !important; font-weight: 500; } /* Star glyphs — the plugin may use SVG, a font icon, or an sprite */ .ih-wiser-rating svg { fill: #e4e4e7 !important; } .ih-wiser-rating svg path, .ih-wiser-rating svg polygon { fill: #e4e4e7 !important; } .ih-wiser-rating i, .ih-wiser-rating [class*="star"] { color: #e4e4e7 !important; } .ih-wiser-rating img { max-height: 16px; width: auto; } /* ---- Review body ---- */ .ih-wiser-reviews { margin-top: 8px; } /* Neutralise the plugin's own light panels */ .ih-wiser-reviews [class*="card"], .ih-wiser-reviews [class*="review"], .ih-wiser-reviews [class*="item"], .ih-wiser-reviews [class*="wrapper"] { background: transparent !important; box-shadow: none !important; } /* Then give the actual review cards the site's glass treatment */ .ih-wiser-reviews [class*="review-item"], .ih-wiser-reviews [class*="review_card"], .ih-wiser-reviews [class*="review-card"] { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--ih-border) !important; border-radius: 24px !important; padding: 28px !important; } .ih-wiser-reviews p, .ih-wiser-reviews span, .ih-wiser-reviews div, .ih-wiser-reviews li { color: var(--ih-zinc-400) !important; } .ih-wiser-reviews h1, .ih-wiser-reviews h2, .ih-wiser-reviews h3, .ih-wiser-reviews h4, .ih-wiser-reviews strong { color: var(--ih-zinc-100) !important; } .ih-wiser-reviews svg, .ih-wiser-reviews svg path, .ih-wiser-reviews svg polygon { fill: #e4e4e7 !important; } .ih-wiser-reviews [class*="star"] { color: #e4e4e7 !important; } /* Inputs and buttons the plugin renders (write-a-review forms, filters) */ .ih-wiser-reviews input, .ih-wiser-reviews textarea, .ih-wiser-reviews select { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--ih-zinc-100) !important; border-radius: 12px !important; } .ih-wiser-reviews button:not([class*="star"]) { border-radius: 9999px !important; border: 1px solid var(--ih-border-strong) !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--ih-zinc-100) !important; } .ih-wiser-reviews button:not([class*="star"]):hover { background: #ffffff !important; color: #000000 !important; } /* Hairlines the plugin draws between reviews */ .ih-wiser-reviews hr, .ih-wiser-reviews [class*="divider"] { border-color: var(--ih-border) !important; background: var(--ih-border) !important; } /* If the shortcode snippet isn't installed the raw text prints — make that obvious rather than letting it slip through as body copy. */ .ih-wiser-reviews:not(:has(*)), .ih-wiser-rating:not(:has(*)) { font-family: monospace; color: #71717a !important; } /* ========================================================================== 39. WOOCOMMERCE SHOP / CATEGORY ARCHIVE Dark treatment for the Astra WooCommerce product loop. NOTE ON PRODUCT IMAGES The 2024 product shots have baked-in white backgrounds, which read as white boxes on this page. CSS cannot remove those. The transparent versions already in the media library at /uploads/IH/ (bottle-100ml.webp, bottle-200ml.webp, honey-jar.webp) should be set as each product's featured image. Until then, .ih-shop-legacy-img below keeps the white shots looking deliberate rather than broken — see the note at the end. ========================================================================== */ /* ---- Page shell ---- */ .woocommerce .ast-woocommerce-container, .woocommerce-page .ast-woocommerce-container { background: var(--ih-bg); padding-top: 48px; padding-bottom: 96px; } /* ---- Archive title ---- */ .woocommerce-products-header__title.page-title { font-size: 60px !important; font-weight: 500 !important; line-height: 0.98; letter-spacing: -0.02em; text-transform: none !important; margin-bottom: 40px; background-image: linear-gradient(180deg, #ffffff 0%, #cfcfcf 38%, #8f9295 66%, #e9e9e9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .woocommerce-products-header { border-bottom: 1px solid var(--ih-border); padding-bottom: 8px; margin-bottom: 32px; } /* Category description, if one is set */ .woocommerce-products-header .term-description p { font-size: 18px; line-height: 1.625; color: var(--ih-zinc-400); max-width: 640px; } /* ---- Toolbar ---- */ .ast-shop-toolbar-container { border-bottom: 1px solid var(--ih-border); padding-bottom: 24px; margin-bottom: 40px; } .woocommerce-result-count { font-size: 12px !important; letter-spacing: 2px; text-transform: uppercase; color: var(--ih-zinc-500) !important; margin: 0; } /* Filter button — Astra renders this in the theme accent (currently gold) */ body .astra-shop-filter-button, body .astra-shop-filter-button.ast-flyout-filter { display: inline-flex !important; align-items: center; gap: 10px; border-radius: 9999px !important; border: 1px solid var(--ih-border-strong) !important; background: rgba(255, 255, 255, 0.05) !important; padding: 10px 22px !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase; color: var(--ih-zinc-100) !important; box-shadow: none !important; transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } body .astra-shop-filter-button:hover { background: #ffffff !important; border-color: #ffffff !important; color: #000000 !important; } .astra-shop-filter-button svg { fill: currentColor; width: 15px; height: 15px; } .astra-shop-filter-button:hover svg { fill: #000000; } /* Sort dropdown */ .woocommerce-ordering select.orderby { border-radius: 9999px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; background-color: rgba(255, 255, 255, 0.05) !important; padding: 9px 36px 9px 18px !important; font-size: 12px !important; letter-spacing: 1.2px; color: var(--ih-zinc-300) !important; } .woocommerce-ordering select.orderby option { background: #0a0a0a; color: var(--ih-zinc-200); } /* Grid / list view toggles */ .ast-products-view .ast-view-trigger svg { fill: var(--ih-zinc-500); transition: fill 0.3s ease; } .ast-products-view .ast-view-trigger:hover svg, .ast-products-view .ast-view-trigger.active svg { fill: var(--ih-zinc-100); } /* ---- Product card ---- */ ul.products li.product { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ih-border); border-radius: 24px; overflow: hidden; padding: 0 !important; transition: transform 0.6s var(--ih-ease), border-color 0.6s ease, box-shadow 0.6s ease; } ul.products li.product:hover { border-color: var(--ih-border-strong); box-shadow: 0 40px 120px -40px rgba(200, 202, 205, 0.25); } /* Thumbnail area */ .astra-shop-thumbnail-wrap { position: relative; display: block; background: rgba(255, 255, 255, 0.02); overflow: hidden; } .astra-shop-thumbnail-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.7s ease; background: radial-gradient(ellipse at center, rgba(217, 119, 37, 0.10), transparent 65%); } ul.products li.product:hover .astra-shop-thumbnail-wrap::before { opacity: 1; } /* Force a consistent square regardless of the source ratio — the honey shot is 4:3 where the bottles are 1:1, which is why they looked mismatched. */ .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 28px; } ul.products li.product img { position: relative; z-index: 1; width: auto !important; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; border-radius: 0; transition: transform 0.7s var(--ih-ease); } ul.products li.product:hover img { transform: translateY(-6px) scale(1.04); } /* ---- Summary ---- */ .astra-shop-summary-wrap { padding: 24px 28px 28px !important; border-top: 1px solid var(--ih-border); } .ast-woo-product-category { display: block; font-size: 11px !important; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ih-zinc-500) !important; margin-bottom: 8px; } ul.products li.product h2.woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { font-size: 22px !important; font-weight: 500 !important; line-height: 1.2 !important; text-transform: none !important; color: var(--ih-zinc-100) !important; padding: 0 !important; margin: 0 0 10px !important; transition: color 0.3s ease; } ul.products li.product a:hover h2.woocommerce-loop-product__title { color: #ffffff !important; } ul.products li.product .price, ul.products li.product .price .amount, ul.products li.product .price bdi, ul.products li.product .woocommerce-Price-currencySymbol { font-size: 18px !important; font-weight: 400 !important; color: var(--ih-zinc-200) !important; } /* Short description — key-feature lists get long, so cap and fade them */ .ast-woo-shop-product-description { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ih-zinc-400); } .ast-woo-shop-product-description h5 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ih-zinc-500); margin: 0 0 8px; } .ast-woo-shop-product-description p, .ast-woo-shop-product-description li { color: var(--ih-zinc-400); } .ast-woo-shop-product-description ul { margin: 0; padding-left: 16px; list-style: disc; } .ast-woo-shop-product-description li { margin-bottom: 3px; } .ast-woo-shop-product-description strong { color: var(--ih-zinc-200); font-weight: 500; } /* Grid view: keep cards even by trimming long descriptions */ ul.products.columns-3 .ast-woo-shop-product-description, ul.products.columns-4 .ast-woo-shop-product-description { max-height: 132px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); } /* ---- Quick view + add to cart ---- */ .ast-quick-view-text { border-radius: 9999px !important; background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: var(--ih-zinc-100) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase; padding: 8px 18px !important; } ul.products li.product .button, ul.products li.product .added_to_cart { display: inline-flex !important; align-items: center; justify-content: center; margin-top: 16px !important; border-radius: 9999px !important; border: 1px solid var(--ih-border-strong) !important; background: rgba(255, 255, 255, 0.05) !important; padding: 10px 24px !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase; color: var(--ih-zinc-100) !important; transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; } ul.products li.product .button:hover, ul.products li.product .added_to_cart:hover { background: #ffffff !important; border-color: #ffffff !important; color: #000000 !important; } /* ---- Wiser star rating in the loop ---- The plugin already outputs #B8BABD stars, which matches the brand silver. The rating sits BELOW the image in normal flow rather than overlaid on it — overlaying put the stars flush against the image edge with no gap, and on the white-background product shots they landed on top of the photo. */ .astra-shop-thumbnail-wrap .wiser_review { position: static; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 16px 18px; pointer-events: none; } .astra-shop-thumbnail-wrap .Wsrspfapp-stars-list { display: flex; align-items: center; gap: 8px; } .Wsrspfapp-review-count { font-size: 11px !important; letter-spacing: 1px; line-height: 1; color: var(--ih-zinc-400) !important; } /* Trim the padding the image link carries at its foot, so the gap above the stars comes from the rating block itself and doesn't double up. */ .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { padding-bottom: 20px; } /* ---- Sidebar / filter flyout ---- */ .astra-off-canvas-sidebar-wrapper, #astra-mobile-popup .ast-off-canvas-sidebar-wrapper { background: #050505 !important; border-right: 1px solid var(--ih-border); } .astra-off-canvas-sidebar-wrapper .widget-title, .astra-off-canvas-sidebar-wrapper h2 { font-size: 12px !important; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ih-zinc-500) !important; } .astra-off-canvas-sidebar-wrapper a { color: var(--ih-zinc-300) !important; } .astra-off-canvas-sidebar-wrapper a:hover { color: #ffffff !important; } /* ---- Pagination ---- */ .woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: flex; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 9999px; border: 1px solid var(--ih-border); min-width: 42px; height: 42px; line-height: 40px; font-size: 13px; color: var(--ih-zinc-300) !important; background: transparent !important; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: #ffffff !important; border-color: #ffffff; color: #000000 !important; } /* ---- Notices ---- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: rgba(255, 255, 255, 0.04) !important; border-top-color: var(--ih-border-strong) !important; color: var(--ih-zinc-200) !important; border-radius: 12px; } /* ---- LEGACY WHITE-BACKGROUND IMAGES ---- Remove this block once the featured images are swapped for the transparent versions in /uploads/IH/. Until then it puts the white shots on a soft light plate so they read as intentional product tiles rather than white rectangles floating on black. */ .ih-shop-legacy-img .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { background: linear-gradient(160deg, #f6f6f7 0%, #e7e8ea 100%); border-radius: 20px; margin: 14px 14px 0; padding: 20px; } /* ---- Responsive ---- */ @media (max-width: 1024px) { .woocommerce-products-header__title.page-title { font-size: 42px !important; } .astra-shop-summary-wrap { padding: 20px 22px 24px !important; } ul.products li.product h2.woocommerce-loop-product__title { font-size: 19px !important; } } @media (max-width: 767px) { .woocommerce-products-header__title.page-title { font-size: 32px !important; } .woocommerce .ast-woocommerce-container { padding-bottom: 64px; } .ast-shop-toolbar-container { padding-bottom: 16px; margin-bottom: 28px; } ul.products li.product { border-radius: 18px; } .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { padding: 18px; } ul.products.columns-3 .ast-woo-shop-product-description, ul.products.columns-4 .ast-woo-shop-product-description { max-height: 96px; } } /* ========================================================================== 40. LIVE GOOGLE REVIEWS Output of the [ih_google_reviews] shortcode (ih-google-reviews.php). Reuses .ih-review / .ih-glass from section 20 and adds the grid, the avatar photo variant and the required Google attribution line. ========================================================================== */ .ih-greviews { max-width: 1400px; margin: 0 auto; width: 100%; } .ih-greviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; } /* Google returns at most 5 reviews, so the grid has to look right at 1–5. auto-fit keeps them even at any count without a per-count rule. */ .ih-greviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; } .ih-greviews-grid .ih-review { width: auto; flex: 1 1 auto; border-radius: 24px; padding: 32px; scroll-snap-align: none; } .ih-greviews-grid .ih-review-text { font-size: 17px; font-weight: 400; line-height: 1.55; } /* Reviewer photo from Google */ .ih-review-avatar-img { height: 40px; width: 40px; flex: 0 0 auto; border-radius: 9999px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.15); } .ih-greviews-grid .ih-review-by em { display: block; font-style: normal; font-size: 11px; letter-spacing: 1px; color: #52525b; margin-top: 2px; } /* Attribution — required by Google's terms, don't hide this */ .ih-greviews-attr { margin: 28px 0 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #52525b; } .ih-greviews-attr a { color: var(--ih-zinc-400); text-decoration: none; transition: color 0.3s ease; } .ih-greviews-attr a:hover { color: #ffffff; } @media (max-width: 1024px) { .ih-greviews-head { flex-direction: column; align-items: flex-start; } .ih-greviews-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 767px) { .ih-greviews-head { margin-bottom: 32px; } .ih-greviews-grid { grid-template-columns: 1fr; gap: 12px; } .ih-greviews-grid .ih-review { padding: 24px; } .ih-greviews-grid .ih-review-text { font-size: 16px; } } /* ========================================================================== SHOP ARCHIVE — THUMBNAIL + RATING LAYOUT (supersedes the rules above) The Wiser rating markup sits INSIDE the product image link: .astra-shop-thumbnail-wrap > a > img > .wiser_review Making that link a fixed-aspect flex box put the stars and the image in the same square, so they overlapped. Instead: the link becomes a vertical stack, the image gets a fixed height, and the rating sits beneath it in its own row. Wiser draws its stars by filling one element via a --avg-per custom property. Overriding display/gap on .Wsrspfapp-stars-list interfered with that fill, so those internals are left alone here. ========================================================================== */ .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; align-items: center; justify-content: flex-start; aspect-ratio: auto !important; height: auto !important; padding: 28px 24px 0 !important; } /* Fixed image band — keeps every card the same height whatever the source ratio (the honey shot is 4:3, the bottles 1:1). */ ul.products li.product img { display: block; height: 240px !important; width: auto !important; max-width: 100%; object-fit: contain; margin: 0 auto; } /* Rating row: own line, full width, clear of the image */ .astra-shop-thumbnail-wrap .wiser_review { position: static !important; display: block !important; width: 100%; margin-top: 20px; padding: 0 0 20px !important; text-align: center; pointer-events: none; } /* Leave Wiser's own star layout intact — only centre the row and space the count away from the stars. */ .astra-shop-thumbnail-wrap .Wsrspfapp-stars-list { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; } .astra-shop-thumbnail-wrap .Wsrspfapp-stars-list-fullret { display: inline-block !important; vertical-align: middle; } .Wsrspfapp-review-count { display: inline-block !important; font-size: 11px !important; letter-spacing: 1px; line-height: 1; white-space: nowrap; color: var(--ih-zinc-400) !important; } /* The plugin injects this empty div next to the rating; it adds stray space */ .astra-shop-thumbnail-wrap #ask_ai_main_div { display: none !important; } @media (max-width: 1024px) { ul.products li.product img { height: 210px !important; } } @media (max-width: 600px) { .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link { padding: 24px 20px 0 !important; } ul.products li.product img { height: 200px !important; } .astra-shop-thumbnail-wrap .wiser_review { margin-top: 16px; padding-bottom: 16px !important; } }/* End custom CSS */